/* ===========================================================
   Skiwoche Kronplatz 2027 — style.css
   Farbtokens und Schriftpaarung exakt nach PRP Abschnitt 8.
   =========================================================== */

:root {
  --firn:      #EFF3F5;  /* Hintergrund */
  --nacht:     #12283A;  /* Text, Hero-Overlay */
  --gletscher: #7FA8C4;  /* Sekundär, Linien, Icons */
  --sonne:     #FFEC8B;  /* Vereinsgelb — NUR: CTA + Skipass-Karte */
  --gelb-hell: #FFF6C9;  /* helles Vereinsgelb — Hinweisflächen */
  --tvw-blau:  #355087;  /* Vereinsblau — Titel, Tabellenkopf */
  --tvw-blau-tief: #1D2C4A; /* dunkles Vereinsblau — Hero, Footer, Karte */
  --fels:      #5C6B76;  /* Sekundärtext */

  --font-display: 'Archivo Expanded', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --max-width: 720px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--firn);
  color: var(--nacht);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.mono { font-family: var(--font-mono); font-weight: 500; }

/* ---------- Fokus-Sichtbarkeit ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--nacht);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--nacht);
  color: var(--firn);
  padding: var(--space-1) var(--space-2);
  z-index: 100;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Layout-Hilfen ---------- */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-2);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--tvw-blau);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-1);
}
.section-lead {
  color: var(--fels);
  margin: 0 0 var(--space-3);
  max-width: 52ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-m);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: var(--sonne);
  color: var(--nacht);
}
.btn--primary:hover { box-shadow: 0 4px 14px rgba(18, 40, 58, 0.18); }
.btn--secondary {
  background: transparent;
  color: var(--nacht);
  border-color: var(--nacht);
}
.btn--ghost {
  background: transparent;
  color: var(--nacht);
  border-color: var(--gletscher);
  padding: 0.5em 1em;
  min-height: 40px;
  font-size: 0.9rem;
}
.btn--small { padding: 0.45em 0.9em; }
.btn--full { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: scale(0.98); }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative;
  color: var(--firn);
  background: var(--tvw-blau-tief);
  overflow: hidden;
}
/* Bild immer vollständig sichtbar — kein Beschnitt */
.hero__bild {
  width: 100%;
  height: auto;
  display: block;
}
/* Vereinslogo oben links, auf weisser Kreisfläche damit der schwarze Ring steht */
/* Das Logo fuehrt zurueck auf die Vereinsseite. Die Positionierung sitzt
   auf dem Link, damit die gesamte Flaeche anklickbar ist. */
.hero__logo-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 4;
  display: block;
  line-height: 0;
  border-radius: 50%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero__logo-link:hover { transform: scale(1.06); }
.hero__logo-link:focus-visible {
  outline: 3px solid var(--sonne);
  outline-offset: 3px;
}
.hero__logo {
  display: block;
  width: 58px;
  height: 58px;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(29, 44, 74, 0.4);
}
@media (min-width: 760px) {
  .hero__logo-link {
    top: var(--space-3);
    left: var(--space-3);
  }
  .hero__logo {
    width: 84px;
    height: 84px;
    padding: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo-link { transition: none; }
  .hero__logo-link:hover { transform: none; }
}
/* Schneefall im Hero — dezent, per JS erzeugt, respektiert prefers-reduced-motion */
.schnee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.schnee__flocke {
  position: absolute;
  top: -12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
  opacity: 0.8;
  animation-name: schnee-fallen;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes schnee-fallen {
  to {
    transform: translate(var(--schnee-drift, 20px), var(--schnee-distanz, 420px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .schnee { display: none; }
}
/* Mobile: Text über dem Bild auf dunklem Grund — Bild bleibt unbeschnitten */
.hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  padding: var(--space-4) var(--space-2) var(--space-3);
}
/* Ab Tablet: Text liegt im Himmelbereich auf dem Bild */
@media (min-width: 760px) {
  .hero { display: grid; }
  /* .schnee gehoert zwingend mit ins Raster. Fehlt es hier, landet die
     Schnee-Ebene in einer eigenen Rasterzeile unterhalb des Bildes und
     ist mit Hoehe 0 unsichtbar. */
  .hero__bild, .hero__ueberlagerung, .hero__inner, .schnee { grid-area: 1 / 1; }
  .hero__ueberlagerung {
    z-index: 2;
    background: linear-gradient(180deg,
      rgba(29, 44, 74, 0.88) 0%,
      rgba(29, 44, 74, 0.72) 32%,
      rgba(29, 44, 74, 0.32) 52%,
      rgba(29, 44, 74, 0) 68%);
  }
  .hero__inner {
    align-self: start;
    justify-self: center;
    padding-top: clamp(var(--space-3), 4vw, var(--space-5));
    text-shadow: 0 1px 12px rgba(18, 40, 58, 0.5);
  }
}
.hero__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--firn);
  opacity: 0.85;
  margin: 0 0 var(--space-1);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 var(--space-2);
}
.hero__subtitle {
  font-size: 1.1rem;
  margin: 0 0 var(--space-3);
}
.hero__datum {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
  color: var(--sonne);
}
.hero__price { color: var(--sonne); font-size: 1.15em; }
.hero__cta { margin-top: var(--space-1); }

/* ===========================================================
   PREISRECHNER
   =========================================================== */
.rechner { background: var(--firn); }
.rechner__grid {
  display: grid;
  gap: var(--space-4);
}
.control-group {
  margin-bottom: var(--space-3);
}
.control-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.control-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

/* Stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid rgba(18, 40, 58, 0.12);
  border-radius: var(--radius-m);
  padding: 0.4em 0.6em;
}
.stepper__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gletscher);
  background: var(--firn);
  color: var(--nacht);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.stepper__btn:hover { background: var(--gletscher); color: #fff; }
.stepper__value { min-width: 2ch; text-align: center; font-size: 1.2rem; }

/* Kinder-Liste */
.kinder-liste { display: flex; flex-direction: column; gap: var(--space-1); }
.kind-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: #fff;
  border: 1px solid rgba(18, 40, 58, 0.12);
  border-radius: var(--radius-s);
  padding: 0.5em 0.75em;
}
.kind-zeile__label { font-size: 0.85rem; color: var(--fels); white-space: nowrap; }
.kind-zeile select {
  flex: 1;
  min-width: 0;
  padding: 0.5em;
  border-radius: var(--radius-s);
  border: 1px solid rgba(18, 40, 58, 0.2);
  background: #fff;
  color: var(--nacht);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.kind-zeile__entfernen {
  background: none;
  border: none;
  color: var(--fels);
  font-size: 1.1rem;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
}
.kind-zeile__entfernen:hover { background: rgba(92, 107, 118, 0.15); }

/* Zimmer radio pills */
.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: #fff;
  border: 1px solid rgba(18, 40, 58, 0.15);
  border-radius: 999px;
  padding: 0.55em 1em;
  cursor: pointer;
  font-size: 0.92rem;
}
.radio-pill:has(input:checked) {
  border-color: var(--nacht);
  background: rgba(127, 168, 196, 0.18);
}
.radio-pill__note { color: var(--fels); font-size: 0.85em; }

.hinweis-rabatt {
  background: var(--gelb-hell);
  border-left: 3px solid var(--sonne);
  padding: 0.8em 1em;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--nacht);
  font-size: 0.92rem;
  margin: var(--space-2) 0;
}

/* Aufschlüsselung */
.aufschluesselung { margin-top: var(--space-3); }
.aufschluesselung__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fels);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-1);
}
.aufschluesselung__liste { display: flex; flex-direction: column; }
.aufschluesselung__zeile {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(18, 40, 58, 0.1);
  font-size: 0.95rem;
}
.aufschluesselung__zeile:last-child { border-bottom: none; font-weight: 600; }

/* Skipasskarte — Signature-Element */
.rechner__ergebnis {
  position: sticky;
  top: var(--space-2);
}
.skipasskarte {
  position: relative;
  background: linear-gradient(135deg, var(--tvw-blau-tief) 0%, var(--tvw-blau) 100%);
  color: var(--firn);
  border-radius: var(--radius-l);
  padding: var(--space-3) var(--space-3) var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: 0 12px 30px rgba(18, 40, 58, 0.25);
  overflow: hidden;
}
.skipasskarte::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 140px;
  height: 140px;
  background: var(--sonne);
  opacity: 0.12;
  border-radius: 50%;
}
.skipasskarte__loch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--firn);
  margin-bottom: var(--space-2);
}
.skipasskarte__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.75;
  margin: 0 0 0.5em;
}
.skipasskarte__personen { font-size: 1.05rem; margin: 0 0 0.25em; }
.skipasskarte__zeitraum { font-size: 0.85rem; opacity: 0.8; margin: 0 0 0.9em; }
.skipasskarte__preis {
  font-size: clamp(2rem, 8vw, 2.6rem);
  color: var(--sonne);
  margin: 0;
  position: relative;
  z-index: 1;
}
.rechner__unterkunft {
  font-size: 0.78rem;
  color: var(--fels);
  margin-top: var(--space-2);
}
.rechner__unterkunft span { font-family: var(--font-mono); }

/* ===========================================================
   WAS IST DRIN / NICHT
   =========================================================== */
.inklusive { background: #fff; }
.inklusive__grid {
  display: grid;
  gap: var(--space-3);
}
.inklusive__spalte-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 var(--space-2);
}
.check-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(18, 40, 58, 0.08);
}
.icon { font-weight: 700; flex-shrink: 0; }
.icon--check { color: #2f7a4f; }
.icon--cross { color: #b23a3a; }

/* ===========================================================
   PREISÜBERSICHT (Tabelle → Karten auf Mobile)
   =========================================================== */
.preistabelle {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.preistabelle thead { display: none; }
.preistabelle tr {
  display: block;
  border: 1px solid rgba(18, 40, 58, 0.1);
  border-radius: var(--radius-s);
  margin-bottom: var(--space-1);
  padding: 0.75em 1em;
}
.preistabelle td {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35em 0;
  border: none;
}
.preistabelle td::before {
  content: attr(data-label);
  font-weight: 600;
  color: var(--fels);
  font-size: 0.85rem;
  margin-right: 1em;
}
.preistabelle__hinweis { color: var(--fels); font-size: 0.88rem; margin-top: var(--space-2); }

/* ===========================================================
   SKIGEBIET
   =========================================================== */
.skigebiet { background: var(--firn); }
.skigebiet__fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.fakt {
  background: #fff;
  border-radius: var(--radius-m);
  padding: var(--space-2);
  text-align: center;
}
.fakt__zahl { font-size: 1.5rem; color: var(--nacht); margin: 0 0 0.2em; }
.fakt__text { font-size: 0.85rem; color: var(--fels); margin: 0; }
.skigebiet__text { color: var(--fels); margin-bottom: var(--space-2); }
.skigebiet__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.skigebiet__links .btn { flex: 1 1 auto; }
.rechner__unterkunft a { color: var(--tvw-blau); }

/* ===========================================================
   GALERIE / SLIDER
   =========================================================== */
.galerie { background: #fff; padding-bottom: var(--space-4); }
.galerie .section-inner { padding-bottom: var(--space-2); }

.slider { position: relative; }

.slider__spur {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--space-2) var(--space-2);
  margin: 0;
  list-style: none;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
}
.slider__spur::-webkit-scrollbar { display: none; }
.slider__spur:focus-visible { outline: 3px solid var(--nacht); outline-offset: -3px; }

.slider__folie {
  flex: 0 0 88%;
  scroll-snap-align: center;
  max-width: 620px;
}
.slider__folie figure { margin: 0; }
/* Kein Zuschnitt mehr.

   Vorher: feste Höhe plus object-fit: cover. Das schneidet jedes Bild auf
   dasselbe Format zurecht — bei Hochkant-Aufnahmen über die halbe Höhe, und
   weil Gesichter im oberen Drittel liegen, fielen genau sie heraus.
   Feste Pixelhöhen sind ausserdem nicht responsiv.

   Jetzt: ein Rahmen mit festem Seitenverhältnis, das Bild wird darin
   vollständig eingepasst. Nichts wird abgeschnitten, egal welches Format.
   Der Rahmen skaliert mit der Breite, die Folien bleiben gleich hoch. */
.slider__folie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
  background: var(--firn);
}
.slider__folie figcaption {
  margin-top: 0.6em;
  font-size: 0.85rem;
  color: var(--fels);
}

/* Pfeile — bewusst ohne Gelb, das bleibt CTA und Skipass-Karte vorbehalten */
.slider__pfeil {
  position: absolute;
  /* Pfeile sitzen auf halber Bildhöhe. Da der Rahmen 4:3 hat und mit der
     Breite skaliert, wird die Höhe nicht mehr in Pixeln angenommen. */
  top: calc((100% - 3.5rem) / 2);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(18, 40, 58, 0.15);
  background: rgba(255, 255, 255, 0.94);
  color: var(--nacht);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(18, 40, 58, 0.18);
}
.slider__pfeil:hover { background: var(--nacht); color: var(--firn); }
.slider__pfeil:disabled { opacity: 0.35; cursor: default; }
.slider__pfeil:disabled:hover { background: rgba(255,255,255,0.94); color: var(--nacht); }
.slider__pfeil--zurueck { left: var(--space-2); }
.slider__pfeil--vor { right: var(--space-2); }

.slider__punkte {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-1);
}
.slider__punkt {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.slider__punkt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gletscher);
  transition: transform 0.2s ease, background 0.2s ease;
}
.slider__punkt[aria-selected="true"]::before {
  background: var(--nacht);
  transform: scale(1.5);
}
.slider__zaehler {
  text-align: center;
  font-size: 0.8rem;
  color: var(--fels);
  margin: var(--space-1) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .slider__spur { scroll-behavior: auto; }
  .slider__punkt::before { transition: none; }
}

@media (min-width: 700px) {
  .slider__folie { flex: 0 0 46%; }
  .slider__pfeil { display: flex; }
  .slider__spur { padding-left: var(--space-4); padding-right: var(--space-4); }
}


/* ===========================================================
   VERFÜGBARKEIT
   =========================================================== */
.verfuegbarkeit {
  background: #fff;
  border: 1px solid rgba(53, 80, 135, 0.2);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}
.verfuegbarkeit__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 0.6em;
  flex-wrap: wrap;
}
.verfuegbarkeit__text { font-weight: 600; color: var(--tvw-blau); }
.verfuegbarkeit__zahl { font-size: 0.85rem; color: var(--fels); }
.verfuegbarkeit__balken {
  height: 10px;
  border-radius: 999px;
  background: rgba(53, 80, 135, 0.15);
  overflow: hidden;
}
.verfuegbarkeit__fuellung {
  height: 100%;
  width: 0;
  background: var(--tvw-blau);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.verfuegbarkeit--knapp .verfuegbarkeit__fuellung { background: #B26A00; }
.verfuegbarkeit--knapp .verfuegbarkeit__text { color: #8A5200; }
.verfuegbarkeit--voll .verfuegbarkeit__fuellung { background: #A33; }
.verfuegbarkeit--voll .verfuegbarkeit__text { color: #8E2A2A; }
@media (prefers-reduced-motion: reduce) {
  .verfuegbarkeit__fuellung { transition: none; }
}

/* ===========================================================
   PERSONEN-ZEILEN
   =========================================================== */
.control-hilfe {
  font-size: 0.85rem;
  color: var(--fels);
  margin: 0 0 var(--space-1);
}
.personen-liste { display: flex; flex-direction: column; gap: var(--space-1); }
.person-zeile {
  background: #fff;
  border: 1px solid rgba(18, 40, 58, 0.12);
  border-radius: var(--radius-s);
  padding: 0.6em 0.75em;
}
.person-zeile__kopf {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}
.person-zeile__nummer {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(53, 80, 135, 0.12);
  color: var(--tvw-blau);
  font-size: 0.85rem;
}
.person-zeile__feld { flex: 1 1 150px; min-width: 0; }
.person-zeile__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fels);
  margin-bottom: 2px;
}
.person-zeile__feld input[type="date"] {
  width: 100%;
  padding: 0.45em 0.5em;
  border: 1px solid rgba(18, 40, 58, 0.2);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  background: #fff;
  color: var(--nacht);
  min-height: 40px;
}
.person-zeile__alter {
  font-size: 0.9rem;
  color: var(--fels);
  min-width: 3.5em;
  text-align: right;
}
.person-zeile__entfernen {
  background: none; border: none;
  color: var(--fels);
  font-size: 1.05rem;
  cursor: pointer;
  min-width: 32px; min-height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person-zeile__entfernen:hover { background: rgba(92, 107, 118, 0.15); }
.person-zeile__option {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-top: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid rgba(18, 40, 58, 0.08);
  font-size: 0.85rem;
  color: var(--fels);
  cursor: pointer;
}
.person-zeile__option input { margin-top: 0.2em; width: 18px; height: 18px; flex-shrink: 0; }

/* ===========================================================
   ZIMMER-OPTIONEN
   =========================================================== */
.zimmer-vorschlag {
  font-size: 0.85rem;
  color: var(--fels);
  margin-bottom: var(--space-1);
}
#zimmer-optionen { flex-direction: column; align-items: stretch; }
.zimmer-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  background: #fff;
  border: 1px solid rgba(18, 40, 58, 0.15);
  border-radius: var(--radius-s);
  padding: 0.75em 0.9em;
  cursor: pointer;
}
.zimmer-option:has(input:checked) {
  border-color: var(--tvw-blau);
  background: rgba(53, 80, 135, 0.08);
}
.zimmer-option--gesperrt { opacity: 0.55; cursor: default; }
.zimmer-option input { margin-top: 0.25em; width: 18px; height: 18px; flex-shrink: 0; }
.zimmer-option__inhalt { display: flex; flex-direction: column; gap: 2px; }
.zimmer-option__titel { font-weight: 600; }
.zimmer-option__text { font-size: 0.82rem; color: var(--fels); }

/* ===========================================================
   HINWEISE
   =========================================================== */
.hinweis {
  padding: 0.8em 1em;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 0.9rem;
  margin: var(--space-2) 0;
}
.hinweis--info {
  background: var(--gelb-hell);
  border-left: 3px solid var(--sonne);
  color: var(--nacht);
}
.hinweis--warnung {
  background: #FBE9E9;
  border-left: 3px solid #A33;
  color: #7A2323;
}
.aufschluesselung__zusatz {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--fels);
}

/* ===========================================================
   TEILNEHMER IM FORMULAR
   =========================================================== */
.teilnehmer-fieldset {
  border: 1px solid rgba(18, 40, 58, 0.15);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  margin: 0 0 var(--space-2);
}
.teilnehmer-fieldset legend { font-weight: 600; padding: 0 0.4em; }
.teilnehmer-zeile {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  flex-wrap: wrap;
}
.teilnehmer-zeile__nummer {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(53, 80, 135, 0.12);
  color: var(--tvw-blau);
  font-size: 0.85rem;
}
.teilnehmer-zeile input[type="text"] {
  flex: 1 1 120px;
  min-width: 0;
  padding: 0.6em 0.7em;
  border: 1px solid rgba(18, 40, 58, 0.25);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--firn);
  color: var(--nacht);
}
.teilnehmer-zeile__alter {
  font-size: 0.82rem;
  color: var(--fels);
  min-width: 3.5em;
  text-align: right;
}

/* ===========================================================
   ANMELDUNG
   =========================================================== */
.anmeldung { background: #fff; }
.honeypot-feld { position: absolute; left: -9999px; }
.form-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.form-field { margin-bottom: var(--space-2); }
.form-field label,
.zimmerwunsch-fieldset legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea {
  width: 100%;
  padding: 0.8em 0.9em;
  border-radius: var(--radius-s);
  border: 1px solid rgba(18, 40, 58, 0.25);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--firn);
  color: var(--nacht);
}
.form-field textarea { resize: vertical; }
.form-hint { font-size: 0.82rem; color: var(--fels); margin: 0.4em 0 0; }
.form-error {
  color: #b23a3a;
  font-size: 0.85rem;
  margin: 0.4em 0 0;
}
.zimmerwunsch-fieldset {
  border: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.zimmerwunsch-fieldset legend { width: 100%; }

.verbindlichkeit {
  background: var(--firn);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  margin: var(--space-3) 0;
}
.verbindlichkeit__text { font-size: 0.9rem; color: var(--fels); margin: 0 0 var(--space-2); }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-weight: 500;
  cursor: pointer;
}
.checkbox-row input { margin-top: 0.3em; width: 20px; height: 20px; flex-shrink: 0; }

.danke-sektion {
  background: var(--tvw-blau-tief);
  color: var(--firn);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.danke-sektion__title { font-family: var(--font-display); margin-top: 0; }

/* ===========================================================
   FAQ / AKKORDEON
   =========================================================== */
.faq { background: var(--firn); }
.akkordeon__item {
  border-bottom: 1px solid rgba(18, 40, 58, 0.15);
}
.akkordeon__item h3 { margin: 0; }
.akkordeon__trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nacht);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.akkordeon__trigger::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--gletscher);
  flex-shrink: 0;
}
.akkordeon__trigger[aria-expanded="true"]::after { content: "−"; }
.akkordeon__panel { padding: 0 0 var(--space-2); color: var(--fels); }

/* ===========================================================
   STICKY BOTTOM BAR (Mobile)
   =========================================================== */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--tvw-blau-tief);
  color: var(--firn);
  padding: 0.8em 1em;
  box-shadow: 0 -4px 16px rgba(18, 40, 58, 0.25);
  transform: translateY(120%);
  transition: transform 0.25s ease;
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar__preis { font-size: 1.2rem; color: var(--sonne); }
@media (prefers-reduced-motion: reduce) {
  .sticky-bar { transition: none; }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer { background: var(--tvw-blau-tief); color: var(--firn); }
.footer__title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.5em; }
.footer__grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer p { color: rgba(239, 243, 245, 0.85); }
.footer__copy {
  font-size: 0.8rem;
  border-top: 1px solid rgba(239, 243, 245, 0.2);
  padding-top: var(--space-2);
}

/* ===========================================================
   ZÄHLER-ANIMATION (respektiert prefers-reduced-motion)
   =========================================================== */
.preis-tick { animation: preis-tick 0.35s ease; }
@keyframes preis-tick {
  0% { transform: translateY(6px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .preis-tick { animation: none; }
}

/* ===========================================================
   BREAKPOINTS — Mobile-first, ab 360px getestet
   =========================================================== */
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .inklusive__grid { grid-template-columns: 1fr 1fr; }

  .preistabelle thead { display: table-header-group; }
  .preistabelle tr { display: table-row; border: none; margin: 0; padding: 0; }
  .preistabelle td {
    display: table-cell;
    padding: 0.9em 1em;
    border-bottom: 1px solid rgba(18, 40, 58, 0.1);
  }
  .preistabelle td::before { content: none; }
  .preistabelle th {
    text-align: left;
    padding: 0.9em 1em;
    background: var(--tvw-blau);
    color: var(--firn);
    font-weight: 600;
  }
}

@media (min-width: 860px) {
  .rechner__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
  .sticky-bar { display: none; } /* Sticky-Bar ist ein Mobile-Pattern */
}

/* ===========================================================
   ERGÄNZUNGEN — Osterfamilienfahrt
   Untertitel im Hero, Mitgliedschaft, interne Kontrollansicht.
   Die Zimmer-Optionen weiter oben werden nicht mehr verwendet.
   =========================================================== */

/* Untertitel unter dem Haupttitel */
.hero__subtitle--klein {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--sonne);
  margin: 0 0 var(--space-2);
}
@media (min-width: 700px) {
  .hero__subtitle--klein { font-size: 1.15rem; }
}

/* Mitgliedschaft in der Personenzeile */
.person-zeile__option select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--nacht);
  background: #fff;
  border: 1px solid rgba(18, 40, 58, 0.18);
  border-radius: var(--radius-s);
  padding: 0.5em 0.6em;
  width: 100%;
  cursor: pointer;
}
.person-zeile__option:has(select) {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35em;
}
.person-zeile__option select:focus-visible {
  outline: 2px solid var(--tvw-blau);
  outline-offset: 1px;
}

/* Checkboxen für Skipass und Einzelzimmer */
#optionen-gruppe .checkbox-row {
  margin-top: 0.7em;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Zusatzzeile in der Aufschlüsselung */
.aufschluesselung__zeile--info {
  font-size: 0.85rem;
  color: var(--fels);
}

/* ---------- Interne Kontrollansicht ---------- */
.intern {
  margin-top: var(--space-3);
  border: 1px dashed rgba(92, 107, 118, 0.45);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.6);
}
.intern > summary {
  padding: 0.8em 1em;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fels);
  list-style: none;
}
.intern > summary::-webkit-details-marker { display: none; }
.intern > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.intern[open] > summary::before { content: "▾ "; }
.intern[open] > summary { border-bottom: 1px dashed rgba(92, 107, 118, 0.35); }
.intern__inhalt { padding: 1em; overflow-x: auto; }
.intern__tabelle {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.intern__tabelle th {
  text-align: left;
  font-weight: 600;
  color: var(--fels);
  padding: 0 0.6em 0.5em 0;
  border-bottom: 1px solid rgba(18, 40, 58, 0.2);
  white-space: nowrap;
}
.intern__tabelle th:not(:first-child),
.intern__tabelle td:not(:first-child) { text-align: right; }
.intern__tabelle td {
  padding: 0.5em 0.6em 0.5em 0;
  border-bottom: 1px solid rgba(18, 40, 58, 0.08);
  white-space: nowrap;
}
.intern .hinweis { margin-top: 1em; }

@media (prefers-reduced-motion: reduce) {
  .intern > summary::before { transition: none; }
}

/* Fussnote unter der Personenliste (Nichtmitglieder-Zuschlag) */
.control-fussnote {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(18, 40, 58, 0.1);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--fels);
}
.control-fussnote strong { color: var(--nacht); }

/* Sonderzeilen der Preistabelle: Alter und Jahrgang fallen auseinander */
.preistabelle__sonderzeile td {
  background: rgba(255, 236, 139, 0.22);
  font-size: 0.94em;
}
.preistabelle__fussnote {
  color: var(--tvw-blau);
  font-weight: 600;
}

/* ===== Personenzeile mit Namen und Rollen-Badge ===== */
.person-zeile__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.person-zeile__name {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(18, 40, 58, 0.18);
  border-radius: 6px;
  font: inherit;
  font-size: 0.92rem;
  background: #fff;
  color: var(--nacht);
}
.person-zeile__name:focus {
  outline: 2px solid var(--tvw-blau);
  outline-offset: 1px;
  border-color: var(--tvw-blau);
}
.person-zeile__daten {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-left: 2rem;
}
.person-zeile__daten .person-zeile__feld,
.person-zeile__daten .person-zeile__option {
  flex: 1 1 9rem;
  min-width: 0;
}
.person-zeile__status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.person-zeile__statuswert {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
}

/* Rollen-Badge: ergibt sich automatisch aus dem Geburtsdatum */
.rolle-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rolle-badge--erwachsen {
  background: rgba(53, 80, 135, 0.12);
  color: var(--tvw-blau);
}
.rolle-badge--kind {
  background: rgba(255, 236, 139, 0.55);
  color: #6B5A12;
}

/* Teilnehmerliste im Formular: nur noch Anzeige */
.teilnehmer-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(18, 40, 58, 0.08);
}
.teilnehmer-zeile:last-child { border-bottom: 0; }
.teilnehmer-zeile__name { flex: 1 1 10rem; }
.teilnehmer-zeile__name--leer { color: var(--fels); font-style: italic; }
.teilnehmer-zeile__preis { margin-left: auto; font-weight: 600; }

@media (max-width: 600px) {
  .person-zeile__daten { padding-left: 0; }
  .person-zeile__name { flex: 1 1 100%; }
}

/* Footer: Ansprechpartnerin hervorheben, Verein darunter absetzen */
.footer__ansprech { margin-bottom: 0.6rem; }
.footer__ansprech strong { color: var(--sonne); }
.footer__trenner {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* Unplausibles Geburtsdatum sichtbar machen */
.person-zeile__datum--fehler {
  border-color: #B3261E !important;
  background: rgba(179, 38, 30, 0.05);
}
.person-zeile__alter--fehler { color: #B3261E; font-weight: 600; }
.person-zeile__fehler {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #B3261E;
}

/* Geburtsdatum als Textfeld (browserunabhängig statt input type=date) */
.person-zeile__datum {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(18, 40, 58, 0.18);
  border-radius: 6px;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  background: #fff;
  color: var(--nacht);
}
.person-zeile__datum:focus {
  outline: 2px solid var(--tvw-blau);
  outline-offset: 1px;
  border-color: var(--tvw-blau);
}
.person-zeile__datum::placeholder {
  color: var(--fels);
  opacity: 0.6;
  letter-spacing: 0.02em;
}

/* Ansprechpartner-Gruppe im Anmeldeformular */
.form-gruppe {
  border: 1px solid rgba(18, 40, 58, 0.12);
  border-radius: 8px;
  padding: var(--space-2);
  margin: 0 0 var(--space-3);
}
.form-gruppe__titel {
  padding: 0 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nacht);
}
.form-gruppe .form-hint { margin-top: 0.2rem; }

/* Hinweis auf wiederhergestellte Eingaben */
.entwurf-hinweis {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.entwurf-hinweis__knopf {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--tvw-blau);
  border-radius: 999px;
  background: transparent;
  color: var(--tvw-blau);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.entwurf-hinweis__knopf:hover { background: var(--tvw-blau); color: #fff; }

/* ===== Personenzeile: sauberer Umbruch statt seitlichem Überlauf =====
   Sobald ein Geburtsdatum eingetragen ist, kommen Alter und Rollen-Badge
   dazu. Ohne min-width: 0 können Flex-Elemente nicht unter ihre
   Inhaltsbreite schrumpfen — die Zeile wird dann breiter als der
   Container und schiebt die ganze Seite nach rechts. */
.person-zeile,
.person-zeile__kopf,
.person-zeile__daten,
.person-zeile__feld,
.person-zeile__option,
.person-zeile__status {
  min-width: 0;
  max-width: 100%;
}
.person-zeile__status {
  flex: 0 1 auto;
}
.person-zeile__statuswert {
  flex-wrap: wrap;
}
.person-zeile__datum,
.person-zeile__option select {
  max-width: 100%;
  box-sizing: border-box;
}
.person-zeile__fehler {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Letzte Absicherung gegen seitliches Verschieben.

   WICHTIG: hier bewusst "clip" statt "hidden" und nur auf <body>, nicht auf
   <html>. overflow-x: hidden erzeugt einen Scroll-Container — und in einem
   Scroll-Container hört position: sticky auf zu funktionieren. Die
   mitlaufende Preiskarte und die Sticky-Leiste fangen dann an zu springen.
   "clip" schneidet ebenfalls ab, erzeugt aber keinen Scroll-Container. */
body { max-width: 100%; overflow-x: clip; }

/* Auf schmalen Schirmen brauchen Datum und Mitgliedschaft die volle Breite,
   Alter und Badge rutschen darunter. */
@media (max-width: 560px) {
  .person-zeile__daten {
    padding-left: 0;
    gap: var(--space-1);
  }
  .person-zeile__feld,
  .person-zeile__option {
    flex: 1 1 100%;
  }
  .person-zeile__status {
    flex: 1 1 100%;
  }
  .person-zeile__statuswert {
    min-height: 0;
  }
}

/* ===== Eingabefelder: kein Aufspringen beim Antippen =====

   Zwei Ursachen dafür, dass die Seite beim Fokussieren eines Feldes
   verrutscht und sich plötzlich seitlich schieben lässt:

   1. Safari zoomt automatisch hinein, sobald ein Eingabefeld eine
      Schriftgrösse unter 16px hat. Die Seite wird dadurch grösser als
      der Bildschirm und lässt sich verschieben. 16px verhindert das.

   2. Ein Fokusrahmen mit positivem outline-offset liegt ausserhalb des
      Feldes. Bei einem Feld über die volle Breite ragt er über den Rand
      hinaus und erzeugt Überlauf. Negativer Offset legt ihn nach innen. */
.person-zeile__name,
.person-zeile__datum,
.person-zeile__option select,
.form-field input,
.form-field select,
.form-field textarea {
  font-size: 16px;
}
.person-zeile__name:focus,
.person-zeile__datum:focus,
.person-zeile__option select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--tvw-blau);
  outline-offset: -2px;
  border-color: var(--tvw-blau);
}