/* ==========================================================================
   Hostel Round Table Berlin
   Gestaltungsrichtung D "Index" - Navy + Lime, grosse Typografie
   ========================================================================== */

/* ------------------------------------------------------------- Schriften */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------- Tokens */
:root {
  /* Flaechen */
  --navy:        #0b1b3a;
  --navy-panel:  #12274f;
  --navy-panel2: #173263;
  --navy-tief:   #081530;
  --creme:       #f5f2ec;
  --karte-hell:  #fffdf9;

  /* Text auf Navy */
  --auf-navy:      #f5f2ec;
  --auf-navy-2:    #c2cbdd;
  --auf-navy-3:    #a9b6ce;
  --auf-navy-4:    #8fa0c0;
  /* 4.88:1 auf Panel, 5.66:1 auf Navy - erfuellt WCAG AA auch als Platzhalter */
  --auf-navy-5:    #8695b4;

  /* Text auf Creme */
  --auf-creme:     #0b1b3a;
  --auf-creme-2:   #3d4a68;
  --auf-creme-3:   #5b6b8c;

  /* Akzent */
  --lime:        #d9f25e;
  --lime-hell:   #e7f78f;

  /* Status */
  --ok:          #8fd694;
  --warten:      #f2c45e;
  --warnung:     #ff9b86;
  --ok-tief:     #1f6b3d;
  --warten-tief: #7a5a12;
  --warnung-tief:#8c2d1a;

  /* Linien */
  --linie-hell:  rgba(245, 242, 236, 0.14);
  --linie-hell-2:rgba(245, 242, 236, 0.24);
  --linie-dunkel:rgba(11, 27, 58, 0.16);
  --linie-dunkel-2: rgba(11, 27, 58, 0.28);

  /* Raster */
  --breite:      1400px;
  --pad-x:       clamp(16px, 4vw, 56px);
  --pad-y:       clamp(48px, 7vw, 112px);
  --pad-y-klein: clamp(32px, 4.5vw, 68px);

  /* Radien */
  --r-karte:  20px;
  --r-panel:  22px;
  --r-feld:   12px;
  --r-pille:  999px;

  /* Bewegung */
  --ease:  cubic-bezier(.16, .84, .24, 1);
  --ease2: cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--auf-navy);
  font-family: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-hell); }

::selection { background: var(--lime); color: var(--navy); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  padding: 12px 20px; border-radius: var(--r-pille);
  background: var(--lime); color: var(--navy); font-weight: 600;
  transition: top .2s ease;
}
.sprungmarke:focus { top: 12px; color: var(--navy); }

/* --------------------------------------------------------------- Layout */
.huelle { max-width: var(--breite); margin: 0 auto; }

.sektion { padding: var(--pad-y) var(--pad-x); }
.sektion--eng { padding: var(--pad-y-klein) var(--pad-x); }
.sektion--creme { background: var(--creme); color: var(--auf-creme); }
.sektion--linie-oben { border-top: 1px solid var(--linie-hell); }

.sektion--creme a { color: #0b1b3a; text-decoration: underline; text-underline-offset: 3px; }
.sektion--creme a:hover { color: var(--auf-creme-2); }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.raster--breit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(22px, 3vw, 56px); }
.raster--zwei  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 44px); }

/* ----------------------------------------------------------- Typografie */
.augenbraue {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auf-navy-4);
}
.sektion--creme .augenbraue { color: var(--auf-creme-3); }
.augenbraue--lime { color: var(--lime); }

.titel-xl {
  font-size: clamp(38px, 7.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 24ch;
}
.titel-l {
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.titel-m {
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.titel-s { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.025em; }

.fliess {
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--auf-navy-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.sektion--creme .fliess { color: var(--auf-creme-2); }
.fliess--eng { max-width: 50ch; }

.klein { font-size: 14.5px; color: var(--auf-navy-4); }
.sektion--creme .klein { color: var(--auf-creme-3); }

.zahlen { font-variant-numeric: tabular-nums; }

.text-lime { color: var(--lime); }

/* ---------------------------------------------------------------- Kopf */
.kopf {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px var(--pad-x);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.kopf[data-gescrollt='1'] {
  background: rgba(11, 27, 58, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linie-hell);
}
.kopf--fest { background: rgba(11, 27, 58, 0.94); backdrop-filter: blur(14px); border-bottom-color: var(--linie-hell); }

.marke {
  display: flex; align-items: center; gap: 9px; margin-right: auto;
  color: var(--auf-navy); font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
}
.marke:hover { color: var(--auf-navy); }
.marke__punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); flex: none; }

.hauptnav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 2vw, 26px);
  font-size: 14.5px;
}
.hauptnav a { color: var(--auf-navy-2); }
.hauptnav a:hover, .hauptnav a[aria-current='page'] { color: var(--auf-navy); }
.hauptnav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }

/* Menue-Umschalter nur auf schmalen Anzeigen */
.menue-schalter {
  display: none;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--linie-hell-2); border-radius: var(--r-pille);
  background: transparent; color: var(--auf-navy);
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.menue-schalter__balken { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
}
.menue-schalter__balken::before { top: -5px; }
.menue-schalter__balken::after  { top: 5px; }

@media (max-width: 900px) {
  .menue-schalter { display: inline-flex; }
  .hauptnav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--linie-hell);
  }
  .hauptnav[data-offen='1'] { display: flex; }
  .hauptnav a {
    display: flex; align-items: center; min-height: 48px;
    padding: 6px 2px; font-size: 16px;
  }
  .hauptnav .knopf { justify-content: center; margin-top: 10px; }
}

/* -------------------------------------------------------------- Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: var(--r-pille);
  font: inherit; font-size: 16px; font-weight: 600; text-align: center;
  cursor: pointer; text-decoration: none;
  transition: transform .2s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.knopf--primaer { background: var(--lime); color: var(--navy); }
.knopf--primaer:hover { background: var(--lime-hell); color: var(--navy); transform: translateY(-2px); }

.knopf--rand { border-color: var(--linie-hell-2); color: var(--auf-navy); background: transparent; }
.knopf--rand:hover { border-color: var(--auf-navy); background: rgba(245, 242, 236, 0.06); color: var(--auf-navy); transform: translateY(-2px); }

.sektion--creme .knopf--rand { border-color: var(--linie-dunkel-2); color: var(--auf-creme); }
.sektion--creme .knopf--rand:hover { border-color: var(--auf-creme); background: rgba(11, 27, 58, 0.05); color: var(--auf-creme); }

.knopf--hell { background: var(--creme); color: var(--navy); }
.knopf--hell:hover { background: var(--lime); color: var(--navy); transform: translateY(-2px); }

.knopf--klein { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
.knopf--voll  { width: 100%; }
.knopf--gefahr { background: var(--warnung); color: #3a0f06; }
.knopf--gefahr:hover { background: #ffb5a4; color: #3a0f06; transform: translateY(-2px); }

.knopf:disabled, .knopf[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

.textlink {
  color: var(--lime); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.textlink:hover { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- Hero */
.hero { padding: clamp(40px, 7vw, 104px) var(--pad-x) clamp(28px, 4vw, 56px); }
.hero__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 56px);
  margin-top: clamp(26px, 4vw, 48px);
}

.bildflaeche {
  position: relative; overflow: hidden;
  border-radius: var(--r-panel);
  background-color: var(--navy-panel);
  background-image: repeating-linear-gradient(115deg, rgba(245,242,236,.055) 0 3px, transparent 3px 14px);
  display: grid; place-items: center;
}
.bildflaeche__hinweis {
  padding: 16px; text-align: center;
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--auf-navy-4);
}
.bildflaeche--hero { aspect-ratio: 16 / 7; min-height: 240px; margin-top: clamp(28px, 4vw, 56px); }
.bildflaeche--karte { aspect-ratio: 16 / 9; border-radius: 0; background-color: var(--navy-panel2); }
.bildflaeche img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ Kennzahlen */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(36px, 5vw, 72px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--linie-hell);
}
.sektion--creme .kennzahlen { border-top-color: var(--linie-dunkel-2); }
.kennzahlen dt {
  font-size: clamp(34px, 4vw, 52px); font-weight: 600;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.kennzahlen dd { margin: 6px 0 0; font-size: 14.5px; color: var(--auf-navy-4); }
.sektion--creme .kennzahlen dd { color: var(--auf-creme-3); }

/* --------------------------------------------------------------- Laufband */
.laufband { padding: 14px 0; border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); overflow: hidden; }
.laufband__spur { display: flex; width: max-content; animation: laufband 46s linear infinite; }
.laufband__gruppe {
  display: flex; gap: 30px; padding-right: 30px;
  font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--auf-navy-4); white-space: nowrap;
}
.laufband__trenner { color: var(--lime); }
@keyframes laufband { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ------------------------------------------------------------ Indexzeilen */
.indexliste { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; border-top: 1px solid rgba(245,242,236,.16); }
.sektion--creme .indexliste { border-top-color: var(--linie-dunkel-2); }

.indexzeile {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(180px, 1.6fr) auto;
  gap: clamp(12px, 2vw, 32px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 24px) clamp(6px, 1vw, 14px);
  border-bottom: 1px solid rgba(245,242,236,.12);
  transition: background .25s ease, padding-left .25s ease;
  color: inherit;
}
.sektion--creme .indexzeile { border-bottom-color: var(--linie-dunkel); }
a.indexzeile:hover, .indexzeile:hover { background: rgba(245,242,236,.05); padding-left: 22px; color: inherit; }
.sektion--creme a.indexzeile:hover { background: rgba(11,27,58,.04); }

.indexzeile__kat { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.sektion--creme .indexzeile__kat { color: var(--auf-creme-3); }
.indexzeile__titel { display: block; font-size: clamp(17px, 1.9vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.indexzeile__unter { display: block; margin-top: 6px; font-size: 15px; color: var(--auf-navy-3); }
.sektion--creme .indexzeile__unter { color: var(--auf-creme-2); }
.indexzeile__pfeil { font-size: 18px; color: var(--auf-navy-4); }
.sektion--creme .indexzeile__pfeil { color: var(--auf-creme-3); }

@media (max-width: 640px) {
  .indexzeile { grid-template-columns: 1fr auto; }
  .indexzeile__kat { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- Karten */
.karte {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px 30px;
  border-radius: var(--r-karte);
  border: 1px solid var(--linie-dunkel);
  background: var(--karte-hell); color: var(--auf-creme);
  transition: transform .3s var(--ease2), box-shadow .3s ease;
}
.karte:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -32px rgba(11,27,58,.6); }
.karte__nummer { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-creme-3); }
.karte__titel { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.karte__text { font-size: 15.5px; line-height: 1.6; color: var(--auf-creme-2); }
.karte__marke { margin-top: auto; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--auf-creme-3); }

.karte--navy { background: var(--navy); color: var(--auf-navy); border-color: transparent; }
.karte--navy .karte__nummer { color: var(--lime); }
.karte--navy .karte__text  { color: var(--auf-navy-2); }
.karte--navy .karte__marke { color: var(--auf-navy-3); }

/* Meldungskarte mit Bild */
.meldung {
  display: flex; flex-direction: column;
  border-radius: var(--r-karte); overflow: hidden;
  background: var(--navy-panel); color: var(--auf-navy);
  transition: transform .3s var(--ease2);
}
.meldung:hover { transform: translateY(-6px); color: var(--auf-navy); }
.meldung__koerper { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.meldung__kat { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.meldung__titel { font-size: 19px; font-weight: 600; line-height: 1.26; letter-spacing: -0.02em; }
.meldung__text { font-size: 15px; line-height: 1.55; color: var(--auf-navy-3); }
.meldung__zeit { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--auf-navy-4); }

/* ---------------------------------------------------------------- Panel */
.panel {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-panel);
  background: var(--navy-panel);
  border: 1px solid var(--linie-hell);
}
.panel--hell { background: var(--karte-hell); color: var(--auf-creme); border-color: var(--linie-dunkel); }
.panel--flach { padding: clamp(18px, 2vw, 26px); }

.datenliste { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid rgba(245,242,236,.16); }
.datenliste li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(245,242,236,.12); font-size: 15.5px;
}
.datenliste li > span:last-child { color: var(--auf-navy-4); text-align: right; }
/* Steht nur ein span im Eintrag, ist er zugleich :last-child - er darf dann
   nicht als Sekundaerwert gedimmt und rechtsbuendig gesetzt werden. */
.datenliste li > span:only-child { color: inherit; text-align: left; }
.panel--hell .datenliste, .sektion--creme .datenliste { border-top-color: var(--linie-dunkel-2); }
.panel--hell .datenliste li, .sektion--creme .datenliste li { border-bottom-color: var(--linie-dunkel); }
.panel--hell .datenliste li > span:last-child, .sektion--creme .datenliste li > span:last-child { color: var(--auf-creme-3); }
.panel--hell .datenliste li > span:only-child, .sektion--creme .datenliste li > span:only-child { color: inherit; }

/* --------------------------------------------------------------- Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pille);
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap;
}
.chip--neutral { background: rgba(245,242,236,.08); color: var(--auf-navy-2); border-color: var(--linie-hell); }
.chip--ok      { background: rgba(143,214,148,.16); color: var(--ok); border-color: rgba(143,214,148,.34); }
.chip--warten  { background: rgba(242,196,94,.16);  color: var(--warten); border-color: rgba(242,196,94,.34); }
.chip--warnung { background: rgba(255,155,134,.16); color: var(--warnung); border-color: rgba(255,155,134,.34); }
.chip--lime    { background: rgba(217,242,94,.18);  color: var(--lime); border-color: rgba(217,242,94,.4); }

.sektion--creme .chip--neutral, .panel--hell .chip--neutral { background: rgba(11,27,58,.06); color: var(--auf-creme-2); border-color: var(--linie-dunkel); }
.sektion--creme .chip--ok, .panel--hell .chip--ok           { background: rgba(31,107,61,.1);  color: var(--ok-tief); border-color: rgba(31,107,61,.3); }
.sektion--creme .chip--warten, .panel--hell .chip--warten   { background: rgba(122,90,18,.1);  color: var(--warten-tief); border-color: rgba(122,90,18,.3); }
.sektion--creme .chip--warnung, .panel--hell .chip--warnung { background: rgba(140,45,26,.1);  color: var(--warnung-tief); border-color: rgba(140,45,26,.3); }

.chip__punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------ Formulare */
.feld { display: block; margin-top: 18px; }
.feld:first-child { margin-top: 0; }

.feld__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.feld__hinweis { display: block; margin-top: 7px; font-size: 13.5px; color: var(--auf-navy-4); line-height: 1.45; }
.panel--hell .feld__hinweis, .sektion--creme .feld__hinweis { color: var(--auf-creme-3); }

.eingabe, .auswahl, .textfeld {
  display: block; width: 100%;
  min-height: 48px; padding: 13px 16px;
  border: 1px solid var(--linie-hell-2); border-radius: var(--r-feld);
  background: rgba(11, 27, 58, .55); color: var(--auf-navy);
  font: inherit; font-size: 15.5px; line-height: 1.4;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textfeld { min-height: 130px; resize: vertical; }
.auswahl {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--auf-navy-3) 50%),
                    linear-gradient(135deg, var(--auf-navy-3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.eingabe::placeholder, .textfeld::placeholder { color: var(--auf-navy-5); }

.eingabe:focus, .auswahl:focus, .textfeld:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(217, 242, 94, .18);
}
.eingabe[aria-invalid='true'], .auswahl[aria-invalid='true'], .textfeld[aria-invalid='true'] {
  border-color: var(--warnung);
  box-shadow: 0 0 0 3px rgba(255, 155, 134, .16);
}

.panel--hell .eingabe, .panel--hell .auswahl, .panel--hell .textfeld,
.sektion--creme .eingabe, .sektion--creme .auswahl, .sektion--creme .textfeld {
  background: #fff; color: var(--auf-creme); border-color: var(--linie-dunkel-2);
}
.panel--hell .eingabe::placeholder, .sektion--creme .eingabe::placeholder { color: var(--auf-creme-3); }

.feld__fehler {
  display: block; margin-top: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--warnung);
}
.panel--hell .feld__fehler, .sektion--creme .feld__fehler { color: var(--warnung-tief); }

.feldpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.feldpaar > .feld { margin-top: 0; }
.feldpaar + .feld { margin-top: 18px; }

/* Kaestchen und Schalter */
.kaestchen {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 11px 0;
  font-size: 15px; line-height: 1.45; cursor: pointer;
}
.kaestchen input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--lime); cursor: pointer; }
.kaestchen__text { flex: 1; }
.kaestchen__unter { display: block; margin-top: 3px; font-size: 13.5px; color: var(--auf-navy-4); }
.panel--hell .kaestchen__unter, .sektion--creme .kaestchen__unter { color: var(--auf-creme-3); }

/* Auswahlkacheln, z. B. Terminoptionen */
.kachelwahl { display: grid; gap: 12px; margin-top: 12px; }
.kachel {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; min-height: 48px;
  border: 1px solid var(--linie-hell-2); border-radius: var(--r-feld);
  background: rgba(11,27,58,.4); cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.kachel:hover { border-color: var(--auf-navy-3); }
.kachel input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--lime); cursor: pointer; }
.kachel:has(input:checked) { border-color: var(--lime); background: rgba(217,242,94,.08); }
.kachel__titel { font-weight: 600; font-size: 16px; }
.kachel__unter { display: block; margin-top: 4px; font-size: 14px; color: var(--auf-navy-3); }

.formularblock + .formularblock { margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--linie-hell); }
.panel--hell .formularblock + .formularblock { border-top-color: var(--linie-dunkel); }
.formularblock__titel { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.formularblock__text  { font-size: 14.5px; color: var(--auf-navy-4); margin-bottom: 18px; }
.panel--hell .formularblock__text { color: var(--auf-creme-3); }

/* ------------------------------------------------------------- Meldungen */
.hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 20px; margin-bottom: 16px;
  border-radius: var(--r-feld);
  border: 1px solid var(--linie-hell);
  background: rgba(245,242,236,.06);
  font-size: 15px; line-height: 1.5;
}
.hinweis--erfolg  { border-color: rgba(143,214,148,.4); background: rgba(143,214,148,.1); }
.hinweis--fehler  { border-color: rgba(255,155,134,.4); background: rgba(255,155,134,.1); }
.hinweis--info    { border-color: rgba(217,242,94,.35); background: rgba(217,242,94,.08); }
.hinweis__marke { flex: none; font-weight: 700; }

.leerzustand {
  padding: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 36px);
  border: 1px dashed var(--linie-hell-2); border-radius: var(--r-panel);
  text-align: center; color: var(--auf-navy-3);
}
.leerzustand h3 { font-size: 19px; margin-bottom: 8px; color: var(--auf-navy); }

/* --------------------------------------------------------------- Akkordeon */
.akkordeon__eintrag { border-top: 1px solid var(--linie-dunkel-2); }
.akkordeon__eintrag:last-child { border-bottom: 1px solid var(--linie-dunkel-2); }
.akkordeon__knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 48px; padding: 20px 0;
  border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer;
}
.akkordeon__zeichen { color: var(--auf-creme-3); font-size: 22px; line-height: 1; flex: none; }
.akkordeon__inhalt { padding: 0 0 22px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--auf-creme-2); }
.akkordeon__inhalt[hidden] { display: none; }

/* Auf Navy */
.akkordeon--navy .akkordeon__eintrag { border-color: var(--linie-hell); }
.akkordeon--navy .akkordeon__zeichen { color: var(--auf-navy-4); }
.akkordeon--navy .akkordeon__inhalt  { color: var(--auf-navy-2); }

/* ---------------------------------------------------------------- Tabelle */
.tabellenrahmen { overflow-x: auto; border-radius: var(--r-karte); border: 1px solid var(--linie-hell); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.tabelle th, .tabelle td { padding: 14px 16px; text-align: left; vertical-align: top; }
.tabelle thead th {
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--auf-navy-4); background: rgba(245,242,236,.04);
  border-bottom: 1px solid var(--linie-hell); white-space: nowrap;
}
.tabelle tbody tr { border-bottom: 1px solid rgba(245,242,236,.08); }
.tabelle tbody tr:last-child { border-bottom: 0; }
.tabelle tbody tr:hover { background: rgba(245,242,236,.04); }
.tabelle td.zahlen, .tabelle th.zahlen { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Fusszeile */
.fuss { padding: clamp(40px, 5vw, 72px) var(--pad-x) 36px; border-top: 1px solid var(--linie-hell); background: var(--navy-tief); }
.fuss__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 30px; max-width: var(--breite); margin: 0 auto; }
.fuss__spalte { display: grid; gap: 9px; align-content: start; font-size: 14.5px; }
.fuss__titel { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-navy-5); }
.fuss__spalte a { color: var(--auf-navy-2); }
.fuss__spalte a:hover { color: var(--lime); }
.fuss__schluss {
  max-width: var(--breite); margin: 34px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(245,242,236,.1);
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--auf-navy-5);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* ============================================================ Mitgliederzone */
.intern-huelle {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 44px) var(--pad-x) clamp(48px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 900px) {
  .intern-huelle { grid-template-columns: minmax(0, 1fr); }
}

.seitennav {
  position: sticky; top: 84px;
  display: grid; gap: 4px;
  padding: 18px;
  border-radius: var(--r-karte);
  background: var(--navy-panel);
  border: 1px solid var(--linie-hell);
}
@media (max-width: 900px) {
  .seitennav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 10px; gap: 6px; }
  .seitennav__titel { display: none; }
}
.seitennav__titel { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-navy-5); padding: 4px 12px 10px; }
.seitennav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 10px 14px; border-radius: 10px;
  color: var(--auf-navy-2); font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.seitennav a:hover { background: rgba(245,242,236,.07); color: var(--auf-navy); }
.seitennav a[aria-current='page'] { background: var(--lime); color: var(--navy); font-weight: 600; }
.seitennav a[aria-current='page']:hover { background: var(--lime-hell); color: var(--navy); }
.seitennav__zahl {
  min-width: 22px; padding: 1px 7px; border-radius: var(--r-pille);
  background: rgba(245,242,236,.12); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center;
}
.seitennav a[aria-current='page'] .seitennav__zahl { background: rgba(11,27,58,.18); }

.bereichskopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(20px, 3vw, 32px);
}
.bereichskopf h1 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.04em; }
.bereichskopf p { margin-top: 8px; font-size: 15.5px; color: var(--auf-navy-3); max-width: 58ch; }

.kachelreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-bottom: clamp(22px, 3vw, 34px); }
.statkachel { padding: 20px 22px; border-radius: var(--r-karte); background: var(--navy-panel); border: 1px solid var(--linie-hell); }
.statkachel__zahl { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.statkachel__text { margin-top: 4px; font-size: 14px; color: var(--auf-navy-4); }
a.statkachel { color: inherit; transition: transform .25s var(--ease2), border-color .25s ease; }
a.statkachel:hover { transform: translateY(-3px); border-color: var(--linie-hell-2); color: inherit; }

/* Personen- und Hauskarten */
.personenraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.person {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--r-karte);
  background: var(--navy-panel); border: 1px solid var(--linie-hell);
  color: inherit; transition: transform .25s var(--ease2), border-color .25s ease;
}
a.person:hover { transform: translateY(-3px); border-color: var(--linie-hell-2); color: inherit; }
.person__monogramm {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(217,242,94,.16); color: var(--lime);
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.person__name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
.person__zeile { margin-top: 3px; font-size: 14px; color: var(--auf-navy-3); }
.person__haus  { margin-top: 2px; font-size: 14px; color: var(--auf-navy-4); }

/* Warnungseintrag */
.warnung {
  display: block; padding: 20px 22px; border-radius: var(--r-karte);
  background: var(--navy-panel); border: 1px solid var(--linie-hell);
  color: inherit; transition: transform .25s var(--ease2), border-color .25s ease;
}
a.warnung:hover { transform: translateY(-3px); border-color: var(--linie-hell-2); color: inherit; }
.warnung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.warnung__az { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--auf-navy-4); font-variant-numeric: tabular-nums; }
.warnung__titel { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.warnung__text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--auf-navy-3); }
.warnung__fuss { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie-hell); font-size: 13.5px; color: var(--auf-navy-4); display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Abstimmungsbalken */
.balken { margin-top: 10px; height: 8px; border-radius: var(--r-pille); background: rgba(245,242,236,.1); overflow: hidden; }
.balken__fuellung { height: 100%; border-radius: var(--r-pille); background: var(--lime); transition: width .5s var(--ease); }
.balken__fuellung--zweit { background: var(--auf-navy-4); }

.ergebniszeile { padding: 16px 0; border-bottom: 1px solid var(--linie-hell); }
.ergebniszeile:last-child { border-bottom: 0; }
.ergebniszeile__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.ergebniszeile__termin { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
.ergebniszeile__zahl { font-size: 14.5px; color: var(--auf-navy-3); font-variant-numeric: tabular-nums; }

/* Teilnehmerliste */
.namensliste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.namensliste li {
  padding: 6px 14px; border-radius: var(--r-pille);
  background: rgba(245,242,236,.07); border: 1px solid var(--linie-hell);
  font-size: 14px;
}

/* Zeitleiste im Protokoll */
.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--linie-hell); font-size: 14.5px; }
.protokoll li:last-child { border-bottom: 0; }
.protokoll__zeit { color: var(--auf-navy-4); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .protokoll li { grid-template-columns: 1fr; gap: 4px; } }

/* Blaetterung */
.blaettern { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.blaettern a, .blaettern span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid var(--linie-hell);
  color: var(--auf-navy-2); font-size: 15px; font-variant-numeric: tabular-nums;
}
.blaettern a:hover { border-color: var(--linie-hell-2); background: rgba(245,242,236,.06); color: var(--auf-navy); }
.blaettern [aria-current='page'] { background: var(--lime); border-color: var(--lime); color: var(--navy); font-weight: 600; }

/* Filterleiste */
.filterleiste {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 18px 20px; margin-bottom: 20px;
  border-radius: var(--r-karte); background: var(--navy-panel); border: 1px solid var(--linie-hell);
}
.filterleiste .feld { margin-top: 0; flex: 1 1 180px; }
.filterleiste .knopf { flex: none; }

/* ------------------------------------------------------------- Stufen
   Nummerierter Ablauf mit verbindender Linie. Anders als .indexliste,
   damit ein Prozess auch als Prozess lesbar ist und nicht als Aufzaehlung. */
.stufen { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; position: relative; }

.stufen::before {
  content: '';
  position: absolute; left: 25px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(var(--lime), rgba(217, 242, 94, .12));
}
.sektion--creme .stufen::before {
  background: linear-gradient(var(--auf-creme), rgba(11, 27, 58, .12));
}

.stufe {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
  padding: clamp(14px, 2vw, 20px) 0;
}

.stufe__nr {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  position: relative; z-index: 1;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--lime);
  color: var(--lime);
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.sektion--creme .stufe__nr {
  background: var(--creme); border-color: var(--auf-creme); color: var(--auf-creme);
}

.stufe__titel {
  display: block; margin-top: 11px;
  font-size: clamp(18px, 2vw, 23px); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.15;
}
.stufe__text {
  display: block; margin-top: 8px;
  font-size: 16px; line-height: 1.6; color: var(--auf-navy-2); max-width: 58ch;
}
.sektion--creme .stufe__text { color: var(--auf-creme-2); }

@media (max-width: 560px) {
  .stufen::before { left: 21px; }
  .stufe { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .stufe__nr { width: 44px; height: 44px; font-size: 14px; }
  .stufe__titel { margin-top: 8px; }
}

/* --------------------------------------------------------- Chip-Wolke
   Fuer Mengen kurzer Begriffe. Liest sich schneller als eine Liste mit
   Trennlinien, weil das Auge das Set als Ganzes erfasst. */
.chipwolke {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0;
}
.chipwolke .chip { font-size: 14.5px; padding: 9px 16px; }

/* ------------------------------------------------------- Warnpanel
   Fuer Abschnitte, die eine Grenze markieren statt zu informieren. */
.panel--grenze {
  border-left: 3px solid var(--warnung);
  border-top-left-radius: 6px; border-bottom-left-radius: 6px;
}
.panel--grenze .titel-s { color: var(--warnung); }
.sektion--creme .panel--grenze .titel-s,
.panel--hell.panel--grenze .titel-s { color: var(--warnung-tief); }

/* ------------------------------------------------------------- Fotos
   .bildflaeche bleibt als Rahmen erhalten - liegt ein <picture> darin,
   verschwindet der Platzhalterhinweis von selbst. */
.bildflaeche picture, .bildflaeche img { display: block; width: 100%; height: 100%; }
.bildflaeche:has(picture) { background: none; border: 0; }
.bildflaeche:has(picture) .bildflaeche__hinweis { display: none; }

/* Freistehendes Bild ohne Rahmen */
.foto {
  display: block; overflow: hidden;
  border-radius: var(--r-gross);
  background: var(--navy-panel2);
}
.foto img { display: block; width: 100%; height: auto; }
.foto--rand { border: 1px solid var(--linie-hell); }

/* Bild neben Text, zwei Spalten */
.foto-block {
  display: grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.foto-block--schmal { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
@media (max-width: 820px) {
  .foto-block, .foto-block--schmal { grid-template-columns: minmax(0, 1fr); }
  .foto-block__bild { order: -1; }
}

/* Bildunterschrift */
.foto__zeile {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--auf-navy-4);
}
.sektion--creme .foto__zeile { color: var(--auf-creme-3); }

/* Streifen aus mehreren Bildern */
.fotoreihe {
  display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 44px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fotoreihe .foto { aspect-ratio: 4 / 5; }
.fotoreihe .foto img { height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .fotoreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fotoreihe .foto:last-child { display: none; }
}

/* ------------------------------------------------------- Sprachwahl */
.sprachwahl {
  display: inline-flex; align-items: center; flex: none;
  padding: 3px; gap: 2px;
  border: 1px solid var(--linie-hell-2); border-radius: var(--r-pille);
}
.sprachwahl__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 38px; padding: 4px 10px;
  border-radius: var(--r-pille);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--auf-navy-3); text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sprachwahl__knopf:hover { background: rgba(245,242,236,.08); color: var(--auf-navy); }
.sprachwahl__knopf--aktiv { background: var(--lime); color: var(--navy); }

.sektion--creme .sprachwahl, .fuss .sprachwahl { border-color: var(--linie-hell); }
.sektion--creme .sprachwahl__knopf { color: var(--auf-creme-3); }
.sektion--creme .sprachwahl__knopf:hover { background: rgba(11,27,58,.06); color: var(--auf-creme); }
.sektion--creme .sprachwahl__knopf--aktiv { background: var(--navy); color: var(--creme); }

/* Im Kopf sitzt der Umschalter direkt vor dem Hauptruf */
.kopf .sprachwahl { margin-left: auto; }
@media (max-width: 900px) {
  .kopf .sprachwahl { margin-left: 0; order: 2; }
  .menue-schalter { order: 3; }
  .hauptnav { order: 4; }
}

/* --------------------------------------------------------- Fotogalerie */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; list-style: none; margin: 16px 0 0; padding: 0;
}
.galerie a {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--linie-hell);
  background: var(--navy-panel2);
}
.galerie img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s var(--ease2);
}
.galerie a:hover img { transform: scale(1.04); }
.galerie figcaption { margin-top: 6px; font-size: 12.5px; color: var(--auf-navy-4); }

/* ----------------------------------------------------------- Erscheinen */
[data-reveal] { will-change: opacity, transform; }
.reveal-vorbereitet {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-vorbereitet { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- Drucken */
@media print {
  .kopf, .fuss, .seitennav, .knopfreihe, .laufband, .blaettern { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .karte, .warnung, .person { border: 1px solid #ccc; background: #fff; color: #000; }
}