/* ==================================================================
 * SoloReady — EIN Header für alle Oberflächen.
 *
 * Bewusst KEIN Tailwind: dieselbe Datei wird von zwei Vite-Projekten mit
 * unterschiedlichen Tailwind-Configs UND von den statischen /themen/-Seiten
 * geladen. Reines CSS auf den Variablen aus theme.css ist die einzige
 * Variante, die überall garantiert identisch aussieht.
 *
 * Markup: shared/SiteHeader.tsx (React) bzw. shared/site-header.mjs (statisch).
 * Beide erzeugen dieselben Klassen — bei Änderungen BEIDE anfassen.
 * ================================================================== */

/* ---------------- Sprachleiste ---------------- */
.sr-langbar {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-glass);
  backdrop-filter: blur(10px);
}
.sr-langbar__inner {
  margin: 0 auto;
  display: flex;
  max-width: 72rem;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.35rem 0.75rem;
  scrollbar-width: none;
}
.sr-langbar__inner::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .sr-langbar__inner {
    padding-inline: 1.5rem;
  }
}
.sr-langbar__label {
  display: none;
  margin-right: 0.25rem;
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-dim);
  opacity: 0.85;
}
@media (min-width: 640px) {
  .sr-langbar__label {
    display: inline;
  }
}

.sr-lang {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.25rem 0.625rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-dim);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.sr-lang:hover {
  background: var(--c-panel2);
  color: var(--c-bone);
}
.sr-lang[aria-pressed='true'],
.sr-lang[aria-checked='true'] {
  background: var(--c-gold);
  color: var(--c-onGold);
}
.sr-lang__flag {
  font-size: 0.875rem;
  line-height: 1;
}
.sr-lang__name {
  display: none;
  white-space: nowrap;
}
.sr-lang__code {
  white-space: nowrap;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .sr-lang__name {
    display: inline;
  }
  .sr-lang__code {
    display: none;
  }
}

.sr-lang-more {
  position: relative;
}
.sr-lang-more__caret {
  transition: transform 0.15s;
}
.sr-lang-more[data-open='true'] .sr-lang-more__caret {
  transform: rotate(180deg);
}
.sr-lang-menu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  margin-top: 0.5rem;
  max-height: 70vh;
  width: min(92vw, 30rem);
  overflow-y: auto;
  border: 1px solid var(--c-linehi);
  border-radius: 18px;
  background: var(--c-panel2);
  padding: 0.75rem;
  box-shadow: 0 16px 48px rgba(10, 37, 56, 0.28);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}
@media (min-width: 640px) {
  .sr-lang-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sr-lang-menu .sr-lang {
  font-size: 0.8125rem;
  border-radius: 12px;
  padding: 0.375rem 0.625rem;
  color: var(--c-bone);
}
.sr-lang-menu .sr-lang .sr-lang__name {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-lang-menu .sr-lang .sr-lang__code {
  display: none;
}

/* ---------------- Kopfzeile ---------------- */
.sr-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-glass);
  backdrop-filter: blur(12px);
}
.sr-nav {
  margin: 0 auto;
  display: flex;
  max-width: 72rem;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
}
@media (min-width: 768px) {
  .sr-nav {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1320px) {
  .sr-nav {
    max-width: 84rem;
  }
}

.sr-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.sr-brand__mark {
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
}
.sr-brand__word {
  display: block;
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--c-bone);
}
.sr-brand__word span {
  color: var(--c-signalhi);
}
.sr-brand__sub {
  display: block;
  margin-top: 0.25rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-dim);
}

.sr-nav__links {
  margin-left: auto;
  display: none;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1320px) {
  .sr-nav__links {
    display: flex;
  }
}
@media (min-width: 1500px) {
  .sr-nav__links {
    gap: 1.25rem;
  }
}
.sr-nav__links a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.sr-nav__links a:hover,
.sr-nav__links a[aria-current='page'] {
  color: var(--c-bone);
}

.sr-nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Theme-Umschalter */
.sr-theme {
  display: none;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: transparent;
  color: var(--c-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sr-theme:hover {
  border-color: var(--c-linehi);
  color: var(--c-bone);
}
@media (min-width: 640px) {
  .sr-theme {
    display: flex;
  }
}
.sr-theme__moon {
  display: block;
}
.sr-theme__sun {
  display: none;
}
html[data-theme='dark'] .sr-theme__moon {
  display: none;
}
html[data-theme='dark'] .sr-theme__sun {
  display: block;
}

/* Anzeigetafel-Auth: Departures = anmelden, Arrivals = abmelden. */
.sr-board {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid #7bd42a;
  border-radius: 10px;
  background: #0a0c10;
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: #9ae23c;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.sr-board:hover {
  background: #9ae23c;
  color: #0a2538;
}
@media (min-width: 640px) {
  .sr-board {
    display: flex;
  }
}
.sr-board__chip {
  display: inline-flex;
  height: 1.25rem;
  width: 1.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #9ae23c;
  color: #0a2538;
}
.sr-board__text {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
@media (min-width: 1180px) {
  .sr-board__text {
    display: flex;
  }
}
/* Kleingedrucktes unter DEPARTURES sagt im Klartext, was passiert. */
.sr-board__hint {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0.9;
}
/* Auf schmalen Schirmen zählt nur das Klartext-Wort. */
.sr-board__short {
  display: inline;
}
@media (min-width: 1180px) {
  .sr-board__short {
    display: none;
  }
}

/* Flugschulsuche — Umriss-Button, damit er neben dem goldenen Kauf-CTA nicht
   um Aufmerksamkeit kämpft. Ab 1280 px sichtbar; darunter steckt der Eintrag
   im Klappmenü (sonst wird die Zeile zu eng). */
.sr-find {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--c-linehi);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-bone);
  background: transparent;
  transition: border-color 0.15s, color 0.15s;
}
.sr-find:hover {
  border-color: var(--c-gold);
  color: var(--c-goldtext);
}
@media (min-width: 640px) {
  .sr-find {
    display: inline-flex;
  }
}
/* Bis 1360 px nur die Lupe — die Beschriftung kostet 140 px, die die Zeile
   zusammen mit Linkzeile, Tafel und Kauf-CTA nicht hat. */
.sr-find span {
  display: none;
}
@media (min-width: 1500px) {
  .sr-find span {
    display: inline;
  }
}
.sr-mobile__foot .sr-find {
  display: inline-flex;
  justify-content: center;
  padding: 0.8rem 1.4rem;
  font-size: 0.95rem;
}

/* Kauf-CTA — darf schrumpfen und auf zwei Zeilen umbrechen. Mit
   `flex-shrink: 0` schob die lange Beschriftung die Seite sonst in einen
   horizontalen Scroll (gemessen bei 1280 px). */
.sr-cta {
  display: none;
  flex-shrink: 1;
  min-width: 7rem;
  max-width: 17rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-gold);
  padding: 0.6rem 1.15rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--c-onGold);
  box-shadow: 0 8px 32px rgba(240, 192, 64, 0.25);
  transition: filter 0.15s;
}
.sr-cta:hover {
  filter: brightness(1.08);
}
@media (min-width: 640px) {
  .sr-cta {
    display: inline-flex;
  }
}

.sr-burger {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: transparent;
  color: var(--c-bone);
  cursor: pointer;
}
@media (min-width: 1320px) {
  .sr-burger {
    display: none;
  }
}

/* ---------------- Mobiles Menü ---------------- */
.sr-mobile {
  border-top: 1px solid var(--c-line);
  background: var(--c-panel);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1rem 1.75rem;
}
@media (min-width: 1320px) {
  .sr-mobile {
    display: none;
  }
}
.sr-mobile a,
.sr-mobile button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0.7rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  color: var(--c-bone);
  cursor: pointer;
}
.sr-mobile a:hover,
.sr-mobile button:hover {
  background: var(--c-panel2);
}
.sr-mobile__foot {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sr-mobile__foot .sr-cta {
  display: inline-flex;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
}
.sr-mobile__foot .sr-board {
  display: inline-flex;
  align-self: flex-start;
}
.sr-mobile__foot .sr-theme {
  display: flex;
}

/* Sichtbarer Fokus überall — Gold auf Dunkel wie auf Hell lesbar. */
.sr-langbar :focus-visible,
.sr-header :focus-visible,
.sr-mobile :focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}

/* Skip-Link (a11y) */
.sr-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.sr-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  border-radius: 999px;
  background: var(--c-gold);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-onGold);
}