body.lang-us .pc-lang-de { display: none !important; }

body:not(.lang-us) .pc-lang-us { display: none !important; }

.pc-hero-card {
  padding: 32px 0 32px 28px !important;
  margin-bottom: 24px !important;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-name {
  font-family: var(--pc-font-page);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.hero-subline {
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted) !important;
  margin: 0 !important;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.grid-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dash-card {
  padding: 28px 0 28px 24px !important;
}

.card-title {
  font-family: var(--pc-font-page);
  font-size: 16px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px 0 !important;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pc-line);
  font-family: var(--pc-font-page);
  font-size: 13.5px;
}

.spec-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.spec-label {
  color: var(--pc-muted);
  font-weight: var(--pc-weight-page);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.spec-list strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-page);
  text-align: right;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Bild und Text bleiben nebeneinander.
     Vorher brach der Kopf auf eine Spalte um, das Bild stand dann über dem
     Text statt daneben. Bei 56 Pixeln Bildbreite ist daneben auch auf
     schmalen Geräten genug Platz.

     Polsterung und Abstand stehen bewusst nicht hier: Die drei
     Profildateien laden danach und setzen beides selbst. Werte an dieser
     Stelle würden nie greifen. */
  .pc-hero-card {
    flex-direction: row;
    align-items: center;
  }

  .avatar-wrap {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0;
  }

  .hero-badge-row {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  /* min-width: 0 ist hier entscheidend: Ohne diesen Wert schrumpft ein
     Flex-Element nicht unter seinen Inhalt, und ein langer Name würde das
     Bild aus dem Bild schieben. */
  .hero-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hero-name {
    font-size: 22px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .hero-subline {
    font-size: 13.5px;
    overflow-wrap: anywhere;
  }

  /* Auf schmalen Bildschirmen untereinander statt nebeneinander.
     Nebeneinander bricht der Wert um, sobald er zu lang wird, und landet
     dann links statt rechts - die Zeilen sehen dadurch ungeordnet aus.
     Untereinander sieht es immer gewollt aus, egal wie lang der Wert ist. */
  .spec-list li {
    display: block;
    padding-bottom: 12px;
  }

  .spec-list .spec-label {
    display: block;
    margin-bottom: 4px;
  }

  .spec-list strong {
    display: block;
    text-align: left;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  .spec-list strong {
    overflow-wrap: anywhere;
  }
}