/* ============================================================
   Language Switcher Dropdown — gilt ab 6+ aktiven Sprachen.
   HTML: <nav id="lang-switch"> > <button aria-expanded> + <ul hidden> > li > a/strong

   Inline-Variante (≤5 Sprachen, kein <button>) wird tier-spezifisch
   in tier/{default,basic,pro}/header.css gestyled — diese Regeln
   greifen NUR bei :has(> button), kollidieren also nicht.
   ============================================================ */

/* Inline-Variante (≤5 Sprachen, ohne <button>): gemeinsame Default-Geometrie.
   Tier-spezifische Properties (grid-area, padding-inline, color, position-Anpassungen)
   leben weiter in tier/{default,basic,pro}/header.css und ueberschreiben bei Bedarf. */
#lang-switch:not(:has(> button)) {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
}

#lang-switch:has(> button) {
  position: relative;
  display: inline-block;
}

#lang-switch > button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0.0625rem solid transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
}

#lang-switch > button::after {
  content: '\25BE';  /* ▾ small triangle down */
  font-size: 0.75em;
  margin-inline-start: var(--space-1);
  transition: transform var(--transition);
}

#lang-switch > button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

#lang-switch > button:hover,
#lang-switch > button[aria-expanded="true"] {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

#lang-switch > ul {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 12rem;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

#lang-switch > ul > li {
  margin: 0;
}

#lang-switch > ul a,
#lang-switch > ul strong {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-weight: normal;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background var(--transition);
}

#lang-switch > ul a:hover {
  background: var(--color-bg-alt);
}

#lang-switch > ul strong {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: default;
}

/* ============================================================
   Mobile + Tablet-Portrait — tier-unabhängig sichtbar halten.
   Bisher gab es zwei Welten: 04-layout.css versteckte den lang-switch global
   per !important, pro/header.css holte ihn (nur im Dropdown-Modus) wieder rein.
   Jetzt zentral hier: lang-switch bleibt sichtbar, kompakt im Header, egal ob
   Inline (≤5 Sprachen) oder Dropdown (6+).
   ============================================================ */
@media screen and (max-width: 79.499rem) {
  #site-header #lang-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    line-height: 1;
    /* margin-inline-end statt padding, damit der Lang-Switch optisch vom
       service-icons abrückt aber gleichzeitig vom rechten Container-Rand
       konsistent zum padding-page bleibt. */
    margin-inline-end: var(--space-2);
  }

  /* Inline-Variante (Codes wie "DE | EN") kompakt: kleine padding, kein
     dekorativer underline. Aktuelle Sprache als muted, andere klickbar.
     > a, > span (direct children) — sonst überschreibt diese Regel auch die
     Dropdown-Items im <ul> (höhere Specificity als #lang-switch > ul a) und
     killt das padding-block weiter unten. */
  #site-header #lang-switch > a,
  #site-header #lang-switch > span {
    display: inline-block;
    padding: 0.125rem 0.25rem;
    line-height: 1;
  }

  /* Dropdown-Button (6+ Sprachen): hover-bg neutralisieren, damit es im
     Mobile-Header (oft auf transparentem/dunklem Topbar) nicht weiß-auf-
     weiß wirkt. Tier-spezifische Color-Overrides können zusätzlich greifen. */
  #site-header .service #lang-switch > button:hover,
  #site-header .service #lang-switch > button[aria-expanded="true"] {
    background: transparent;
    border-color: transparent;
  }

  /* Dropdown-Panel auf Mobile: Listen-Items mit deutlich mehr Vertical-Padding,
     damit die Touch-Targets WCAG 2.5.5-konform werden (≥44 px) und die Texte
     nicht zu eng aufeinander kleben. Gilt für Links + aktuelle Sprache (strong). */
  #lang-switch > ul a,
  #lang-switch > ul strong {
    padding-block: var(--space-3);
  }

  #lang-switch > ul > li + li {
    margin-block-start: var(--space-3);
  }

}

/* ============================================================
   Language Banner (Apple-style suggestion)
   HTML: <aside id="lang-banner"> > p + a + button
   ============================================================ */

#lang-banner {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-3) var(--padding-page);
  background: var(--color-bg-alt);
  border-bottom: 0.0625rem solid var(--color-border);
  font-size: var(--text-sm);
}

#lang-banner p {
  flex: 1;
  margin: 0;
}

#lang-banner a {
  font-weight: 600;
  white-space: nowrap;
}

#lang-banner [data-dismiss] {
  /* inline-flex + line-height:1 + svg display:block — verhindert dass
     Browser-Default-Button-Baseline + SVG-inline-baseline den Button
     gegenüber dem benachbarten Text vertikal versetzen. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: var(--space-1);
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

#lang-banner [data-dismiss] svg {
  display: block;
}

/* Mobile: kompakter — kleineres padding, kleinere Schrift, Link bleibt inline
   neben dem Text (nicht mehr eigene 100%-breite Zeile). flex-wrap erlaubt
   trotzdem Umbruch wenn der Text zu lang ist für eine Zeile. */
@media (max-width: 44.999rem) {
  #lang-banner {
    flex-wrap: wrap;
    padding: var(--space-2) var(--padding-page);
    gap: var(--space-2);
    font-size: var(--text-xs);
  }

  #lang-banner [data-dismiss] {
    padding: var(--space-1);
  }
}