/* ============================================================
   Schießen kennenlernen – Gestaltung
   ------------------------------------------------------------
   Stahlblau und Gelb, helle und dunkle Abschnitte im Wechsel.
   Jeder Abschnitt ist ein „Blatt“ mit runden oberen Ecken, das
   sich leicht über den vorherigen schiebt.
   Farbtöne je Abschnitt: .ton-hell, .ton-dunkel, .ton-akzent –
   alle Bausteine nutzen nur die Variablen und passen sich an.
   Schriften: nur Systemschriften, keine Drittanbieter.
   ============================================================ */

/* Eigene Schrift „Inter“ (SIL Open Font License, siehe assets/schrift/LICENSE.txt) –
   liegt auf dem eigenen Server, es wird nichts von Drittanbietern geladen. */
@font-face {
  font-family: "Inter";
  src: url("schrift/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grundpalette */
  --stahl-950: #0a121b;
  --stahl-900: #0e1823;
  --stahl-800: #152232;
  --stahl-700: #1e3044;
  --stahl-600: #2c5a85;
  --stahl-500: #3d6489;
  --stahl-400: #6f97bd;
  --stahl-200: #c9d7e5;
  --stahl-100: #e4ebf2;
  --stahl-50:  #f2f5f8;
  --gelb: #f2c230;
  --gelb-hell: #ffd75a;
  --gebot-blau: #005ca8;     /* Gebotszeichen nach ISO 7010 */
  --gebot-weiss: #ffffff;
  --scheibe: #e9ebe6;
  --spiegel: #111a24;
  --loch: #cfd4cc;

  /* Schrift */
  --f-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Maße – richten sich nach Breite UND Höhe des Bildschirms */
  --rand: clamp(20px, 4.5vw, 56px);
  --breite: 1200px;
  --abstand: clamp(64px, min(9vw, 13vh), 128px);
  --blatt: clamp(20px, 3vw, 36px);      /* Rundung und Überlappung der Abschnitte */
  --kopf-hoehe: 68px;
  --radius: 14px;
  --radius-klein: 8px;
  --weich: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

/* ---------- Farbtöne --------------------------------------- */

:root, .ton-dunkel, .ton-akzent {
  --grund: var(--stahl-900);
  --flaeche: var(--stahl-800);
  --flaeche-2: var(--stahl-700);
  --tinte: #eef2f6;
  --tinte-2: #a7b6c6;
  --linie: rgba(255, 255, 255, .09);
  --linie-stark: rgba(255, 255, 255, .18);
  --akzent-text: var(--gelb);
  --signal: var(--gelb);
  --auf-signal: #121a22;
  --signal-zart: rgba(242, 194, 48, .12);
  --platzhalter: #f2b562;
  --platzhalter-grund: #2c1f0c;
  --fehler: #ff8a80;
  --fehler-grund: #2e1514;
  --erfolg: #5ccf96;
  --schatten: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 40px -18px rgba(0, 0, 0, .55);
  --ringe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='white' stroke-opacity='.07'%3E%3Ccircle cx='200' cy='200' r='198'/%3E%3Ccircle cx='200' cy='200' r='170' stroke-dasharray='2 9'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='110'/%3E%3Ccircle cx='200' cy='200' r='80' stroke-dasharray='1 6'/%3E%3Ccircle cx='200' cy='200' r='50'/%3E%3Ccircle cx='200' cy='200' r='20'/%3E%3C/svg%3E");
}
.ton-hell, .seite {
  color-scheme: light;
  --grund: var(--stahl-50);
  --flaeche: #ffffff;
  --flaeche-2: var(--stahl-100);
  --tinte: #0e1823;
  --tinte-2: #4d5d6e;
  --linie: #dde4eb;
  --linie-stark: #c3cdd8;
  --akzent-text: var(--stahl-600);
  --signal: var(--gelb);
  --auf-signal: #121a22;
  --signal-zart: #fdf3d0;
  --platzhalter: #9a4a06;
  --platzhalter-grund: #fff3df;
  --fehler: #b42318;
  --fehler-grund: #fdecea;
  --erfolg: #17734a;
  --schatten: 0 1px 2px rgba(14, 24, 35, .05), 0 18px 40px -20px rgba(14, 24, 35, .22);
  --ringe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%232c5a85' stroke-opacity='.1'%3E%3Ccircle cx='200' cy='200' r='198'/%3E%3Ccircle cx='200' cy='200' r='170' stroke-dasharray='2 9'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='110'/%3E%3Ccircle cx='200' cy='200' r='80' stroke-dasharray='1 6'/%3E%3Ccircle cx='200' cy='200' r='50'/%3E%3Ccircle cx='200' cy='200' r='20'/%3E%3C/svg%3E");
}

/* ---------- Grundlagen ------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 12px);
}

body {
  margin: 0;
  background: var(--stahl-900);
  color: var(--tinte);
  font: 400 1rem/1.62 var(--f-text);
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gelb); color: #121a22; }

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

.sprung {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gelb);
  color: #121a22;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-klein);
}
.sprung:focus { top: 12px; }

.huelle {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.platzhalter {
  color: var(--platzhalter);
  background: var(--platzhalter-grund);
  outline: 1.5px dashed var(--platzhalter);
  outline-offset: 1px;
  border-radius: 2px;
  padding: 0 .25em;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Typografie ------------------------------------- */

h1, h2 { font-family: var(--f-display); margin: 0; text-wrap: balance; }

h2 {
  font-size: clamp(1.75rem, min(3.4vw, 5.6vh), 2.75rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 650;
}

h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lead { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.55; max-width: 34em; color: var(--tinte); }
.text-2 { color: var(--tinte-2); }
.fliesstext { display: grid; gap: 1em; max-width: 38em; color: var(--tinte-2); }

/* Überzeile mit Nummer und Strich */
.schild {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  align-self: start;
  margin: 0;
  color: var(--tinte-2);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.schild::before { content: ""; width: 24px; height: 1px; background: var(--signal); flex: none; }
.schild-nr { color: var(--akzent-text); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

.etikett {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

/* Gesetzesverweise */
.gesetz {
  color: var(--tinte);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}
.gesetz:hover { text-decoration-thickness: 2.5px; }
.gesetz::after {
  content: "";
  display: inline-block;
  width: .62em; height: .62em;
  margin-left: .22em;
  vertical-align: .05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Knöpfe ----------------------------------------- */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  background: var(--tinte);
  color: var(--grund);
  border: 1px solid var(--tinte);
  border-radius: 999px;
  font: 600 .94rem/1 var(--f-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s, border-color .25s, transform .2s, box-shadow .25s;
}
/* gelbe Füllung schiebt sich beim Überfahren herein */
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  transform: translateY(101%);
  transition: transform .35s var(--weich);
}
.knopf:hover { color: var(--auf-signal); border-color: var(--signal); box-shadow: 0 10px 28px -10px rgba(242, 194, 48, .55); }
.knopf:hover::before { transform: none; }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .6; cursor: progress; }
.knopf .pfeil { transition: transform .25s var(--weich); }
.knopf:hover .pfeil { transform: translateX(3px); }

.knopf-linie { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.knopf-klein { min-height: 40px; padding-inline: 18px; font-size: .86rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.pfeil { width: .9em; height: .9em; flex: none; }

/* ---------- Kopfzeile -------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.kopf.gescrollt {
  background: rgba(10, 18, 27, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.kopf-reihe { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--kopf-hoehe); }

.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #eef2f6; }
.marke-zeichen { width: 24px; height: 24px; flex: none; display: block; }
.marke-loch { stroke: var(--stahl-900); }
.marke-punkt { fill: var(--gelb); }
.marke-text { font-size: .76rem; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

.navi { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.navi a:not(.knopf) { position: relative; color: rgba(238, 242, 246, .74); text-decoration: none; font-size: .88rem; transition: color .15s; }
.navi a:not(.knopf)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--gelb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--weich);
}
.navi a:not(.knopf):hover { color: #fff; }
.navi a:not(.knopf):hover::after { transform: none; }
.kopf .knopf { --tinte: #eef2f6; --grund: var(--stahl-900); }

.navi-schalter {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: #eef2f6;
  cursor: pointer;
}
.navi-schalter span.striche,
.navi-schalter span.striche::before,
.navi-schalter span.striche::after { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
.navi-schalter span.striche { position: relative; }
.navi-schalter span.striche::before,
.navi-schalter span.striche::after { content: ""; position: absolute; left: 0; }
.navi-schalter span.striche::before { top: -7px; }
.navi-schalter span.striche::after { top: 7px; }
.navi-schalter[aria-expanded="true"] span.striche { background: transparent; }
.navi-schalter[aria-expanded="true"] span.striche::before { transform: translateY(7px) rotate(45deg); }
.navi-schalter[aria-expanded="true"] span.striche::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
  .navi-schalter { display: inline-flex; }
  .navi {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--rand) 24px;
    background: var(--stahl-950);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .navi.offen { display: flex; }
  .kopf:has(.navi.offen) { background: var(--stahl-950); }
  .navi a:not(.knopf) { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #eef2f6; font-size: 1rem; }
  .navi a:not(.knopf)::after { display: none; }
  .navi .knopf { margin-top: 20px; min-height: 50px; }
}

/* ---------- Abschnitte als Blätter -------------------------- */

.abschnitt {
  position: relative;
  margin-top: calc(-1 * var(--blatt));
  padding-block: var(--abstand) calc(var(--abstand) + var(--blatt));
  background: var(--grund);
  color: var(--tinte);
  border-radius: var(--blatt) var(--blatt) 0 0;
  box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, .45);
  overflow: clip;
}

/* Hintergrund: weiche Farbflächen, die langsam „atmen“, und Scheibenringe */
.abschnitt::before,
.abschnitt::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.abschnitt::before {
  inset: -8%;
  background:
    radial-gradient(40% 35% at 85% 15%, rgba(61, 100, 137, .38), transparent 70%),
    radial-gradient(35% 30% at 8% 85%, rgba(242, 194, 48, .07), transparent 70%);
  animation: atmen 18s ease-in-out infinite alternate;
}
.abschnitt::after {
  width: clamp(420px, 60vw, 880px);
  aspect-ratio: 1;
  right: clamp(-440px, -22vw, -160px);
  top: clamp(-320px, -14vw, -120px);
  background: var(--ringe) center / contain no-repeat;
  animation: drehen 160s linear infinite;
}
.ton-hell::before {
  background:
    radial-gradient(40% 35% at 90% 10%, rgba(111, 151, 189, .22), transparent 70%),
    radial-gradient(35% 30% at 5% 95%, rgba(242, 194, 48, .10), transparent 70%);
}
.ton-hell::after { right: auto; left: clamp(-440px, -22vw, -160px); top: auto; bottom: clamp(-320px, -14vw, -120px); }
/* Anfrage: Ringe links, damit sie sich nicht mit den Ringen der Geschenkidee (rechts) wiederholen */
#termine::after { right: auto; left: clamp(-440px, -22vw, -160px); }
.ton-akzent { background: linear-gradient(135deg, #234769 0%, var(--stahl-800) 55%, var(--stahl-900) 100%); }
.ton-akzent::before {
  background:
    radial-gradient(45% 40% at 80% 20%, rgba(111, 151, 189, .35), transparent 70%),
    radial-gradient(40% 35% at 15% 90%, rgba(242, 194, 48, .14), transparent 70%);
}

@keyframes atmen {
  from { transform: translate3d(-2%, -1%, 0); }
  to   { transform: translate3d(2%, 2%, 0); }
}
/* Animationen pausieren, solange der Abschnitt nicht im Bild ist (Klasse setzt app.js) */
.js .abschnitt::before, .js .abschnitt::after { animation-play-state: paused; }
.js .abschnitt.im-bild::before, .js .abschnitt.im-bild::after { animation-play-state: running; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Überzeile + Überschrift als Kopf eines Abschnitts */
.bahn-kopf { display: grid; gap: 18px; }

.abschnitt-kopf { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 48rem; }

/* ---------- Held: Vollbild-Foto ----------------------------- */

.held {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 900px);
  margin-top: calc(-1 * var(--kopf-hoehe));
  overflow: hidden;
  isolation: isolate;
  color: #eef2f6;
  background: var(--stahl-950);
}
.held-fotos { position: absolute; inset: 0; z-index: -2; overflow: hidden; contain: strict; }
.held-bild[data-nr="2"] { opacity: 0; }
.held-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 40%;
}
.held::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 18, 27, .7) 0%, rgba(10, 18, 27, .1) 60%),
    linear-gradient(180deg, rgba(10, 18, 27, .55) 0%, rgba(10, 18, 27, 0) 25%, rgba(10, 18, 27, .2) 55%, rgba(10, 18, 27, .92) 100%);
}
.held-inhalt {
  display: grid;
  gap: clamp(16px, 2.6vh, 24px);
  padding-top: calc(var(--kopf-hoehe) + 40px);
  padding-bottom: calc(var(--blatt) + clamp(28px, 5vh, 56px));
}
.held .schild { color: #e2e6ea; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

.held-titel {
  display: flex;
  flex-direction: column;
  font-size: clamp(2.5rem, min(6.2vw, 9.5vh), 5.4rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
  max-width: 12em;
  hyphens: manual;
}
.held-zusatz { color: var(--gelb); font-weight: 300; letter-spacing: -.03em; }
.held-titel > span { display: block; padding-bottom: .06em; }

/* Scroll-Hinweis unten in der Mitte */
.scroll-hinweis {
  position: absolute;
  left: 50%;
  bottom: calc(var(--blatt) + 14px);
  z-index: 2;
  width: 26px; height: 42px;
  margin-left: -13px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
}
.scroll-hinweis span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gelb);
}
.scroll-hinweis { display: none; }
@media (min-width: 761px) and (min-height: 821px) {
  .scroll-hinweis { display: block; bottom: calc(var(--blatt) + 22px); }
  .held-inhalt { padding-bottom: calc(var(--blatt) + 92px); }
}
.held-lead { font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.55; max-width: 32em; color: #cdd5dd; }
.held-lead strong { color: #fff; font-weight: 600; }
.held .knopf { --tinte: #ffffff; --grund: var(--stahl-900); }
.held .knopf-linie { --tinte: #ffffff; border-color: rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Eckdaten als Glasleiste auf dem Foto */
.eckdaten {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(16px, 3vh, 36px);
  background: rgba(14, 24, 35, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
}
.eckdaten li { display: grid; gap: 6px; align-content: start; padding: clamp(14px, 2.4vh, 22px) 22px; }
.eckdaten li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.eck-zahl {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.6rem, min(2.6vw, 4.4vh), 2.3rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.eck-zahl small { font-size: .5em; letter-spacing: 0; margin-left: .15em; }
.eck-text { font-size: .82rem; line-height: 1.4; color: #b9c4cf; max-width: 26ch; }

@media (max-width: 760px) {
  .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eckdaten li { padding: 14px 16px; }
  .eckdaten li:nth-child(3) { border-left: 0; }
  .eckdaten li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 520px) {
  .held::after { background: linear-gradient(180deg, rgba(10,18,27,.6) 0%, rgba(10,18,27,.1) 22%, rgba(10,18,27,.6) 45%, rgba(10,18,27,.96) 72%); }
  .held .knopf-reihe .knopf { width: 100%; }
}

/* Ringscheibe (404-Seite) */
.held-scheibe { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.held-scheibe svg { display: block; width: 100%; height: auto; transform: rotate(-2.2deg); filter: drop-shadow(0 26px 34px rgba(14, 24, 35, .3)); }
.sch-halter { fill: var(--tinte-2); }
.sch-karte { fill: var(--scheibe); }
.sch-ring { fill: none; stroke: var(--spiegel); stroke-width: 1.6; }
.sch-spiegel { fill: var(--spiegel); }
.sch-ring-hell { fill: none; stroke: var(--scheibe); stroke-width: 1.4; opacity: .9; }
.sch-druck { fill: var(--spiegel); opacity: .55; font: 700 11px var(--f-text); letter-spacing: .14em; text-transform: uppercase; }
.sch-loch { fill: var(--loch); stroke: var(--spiegel); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.sch-loch-papier { fill: var(--spiegel); stroke: var(--loch); }

/* ---------- Karten-Grundform -------------------------------- */

.weg, .belegung, .hinweis, .uebersicht, .ergebnis {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* ---------- Für wen: Foto bleibt stehen, Text zieht vorbei --- */

.fuer-wen { padding-top: 0; }
.fw-raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* Foto-Spalte reicht bis an den linken Bildschirmrand */
.fw-bild-spalte { align-self: stretch; }
.fw-bild {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 16px);
  height: calc(100svh - var(--kopf-hoehe) - 32px);
  min-height: 460px;
  max-height: 860px;
  margin-top: calc(var(--blatt) + 16px);
  overflow: hidden;
  border-radius: 0 calc(var(--radius) + 10px) calc(var(--radius) + 10px) 0;
  background: var(--stahl-900);
  box-shadow: var(--schatten);
}
.fw-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--weich), transform 6s var(--weich);
}
.fw-foto[data-foto="1"] { object-position: 45% 62%; }
.fw-foto[data-foto="2"] { object-position: 55% 55%; }
.fw-foto.ist-aktiv { opacity: 1; transform: scale(1); }
.fw-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 27, 0) 45%, rgba(10, 18, 27, .72) 100%);
  pointer-events: none;
}

/* Qualifikationen als Glas-Plaketten auf dem Foto */
.fw-plaketten {
  position: absolute;
  z-index: 1;
  left: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  right: 24px;
  bottom: clamp(20px, 4vh, 36px);
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.fw-plaketten li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: rgba(14, 24, 35, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .86rem;
  font-weight: 550;
  line-height: 1.2;
}
.fw-plaketten svg { width: 20px; height: 20px; color: var(--gelb); flex: none; }

/* Text-Spalte */
.fw-text {
  display: grid;
  gap: clamp(28px, 4vh, 44px);
  max-width: calc(var(--breite) / 2);
  padding: calc(var(--abstand) + var(--blatt)) var(--rand) 0 clamp(32px, 5vw, 80px);
}
.fw-kopf { display: grid; gap: 16px; }
.einstieg-titel { font-size: clamp(1.75rem, min(3.2vw, 5.4vh), 2.6rem); }

/* Zwei Wege als Auswahlkarten */
.wege { display: grid; gap: 12px; }
.weg {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas: "symbol etikett pfeil" "symbol frage pfeil";
  gap: 4px 16px;
  align-items: center;
  padding: 20px 22px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  color: var(--tinte);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--weich), border-color .3s, box-shadow .35s;
}
.weg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 140% at 0% 50%, rgba(242, 194, 48, .16), transparent 60%);
  opacity: 0;
  transition: opacity .35s;
}
.weg:hover { transform: translateY(-3px); border-color: rgba(242, 194, 48, .7); box-shadow: 0 22px 44px -22px rgba(14, 24, 35, .35); }
.weg:hover::before { opacity: 1; }
.weg-symbol {
  grid-area: symbol;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--stahl-100);
  color: var(--stahl-600);
  transition: background-color .3s, color .3s;
}
.weg-symbol svg { width: 30px; height: 30px; }
.weg:hover .weg-symbol { background: var(--gelb); color: #121a22; }
.weg .etikett { grid-area: etikett; align-self: end; }
.weg-frage { grid-area: frage; font-size: .98rem; line-height: 1.45; color: var(--tinte-2); }
.weg-pfeil {
  grid-area: pfeil;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  color: var(--tinte);
  transition: transform .35s var(--weich), background-color .3s, border-color .3s;
}
.weg:hover .weg-pfeil { transform: translateX(4px); background: var(--tinte); border-color: var(--tinte); color: var(--grund); }

/* Leitsatz: Wörter leuchten beim Scrollen nacheinander auf */
.fw-leitsatz {
  padding-left: 20px;
  border-left: 3px solid var(--gelb);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, min(2.4vw, 4.2vh), 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.fw-leitsatz .wort { transition: color .35s; }
.js .fw-leitsatz[data-bereit] .wort { color: var(--linie-stark); }
.js .fw-leitsatz[data-bereit] .wort.an { color: var(--tinte); }

@media (max-width: 900px) {
  .fuer-wen { padding-top: calc(var(--blatt) + 8px); }
  .fw-raster { grid-template-columns: minmax(0, 1fr); }
  .fw-bild-spalte { padding-inline: var(--rand); }
  .fw-bild { position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 560px; margin-top: 0; border-radius: var(--radius); }
  .fw-plaketten { left: 16px; right: 16px; bottom: 16px; }
  .fw-plaketten li { font-size: .8rem; padding: 7px 13px 7px 9px; }
  .fw-text { max-width: none; padding: clamp(36px, 8vw, 56px) var(--rand) 0; }
}
@media (max-width: 520px) {
  .weg { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "symbol etikett" "frage frage"; padding: 18px; }
  .weg-symbol { width: 44px; height: 44px; }
  .weg-pfeil { display: none; }
  .weg-frage { margin-top: 8px; }
}

/* ---------- Kursformat als Kachel-Raster ------------------ */

.kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "dauer   teil    beleg"
    "betr    betr    beleg"
    "schiess schiess beleg"
    "ausr    ausr    muni"
    "ort     termin  termin"
    "preis   preis   preis";
  gap: 14px;
}
.k-dauer { grid-area: dauer; }
.k-teil { grid-area: teil; }
.k-betr { grid-area: betr; }
.k-schiess { grid-area: schiess; }
.k-ausr { grid-area: ausr; }
.k-muni { grid-area: muni; }
.k-ort { grid-area: ort; }
.k-termin { grid-area: termin; }
.k-preis { grid-area: preis; }
.k-beleg { grid-area: beleg; }

.kachel {
  position: relative;
  margin: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 22px 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%), var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s;
}
/* Lichtkegel folgt der Maus (Position setzt app.js) */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -40%), rgba(242, 194, 48, .13), transparent 60%);
  opacity: 0;
  transition: opacity .35s;
}
.kachel:hover { border-color: rgba(242, 194, 48, .35); }
.kachel:hover::before { opacity: 1; }

.kachel dt {
  display: grid;
  justify-items: start;
  gap: 14px;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-2);
}
.kachel-symbol {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--signal-zart);
  color: var(--gelb);
  border: 1px solid rgba(242, 194, 48, .18);
}
.kachel-symbol svg { width: 22px; height: 22px; }
.kachel dd { margin: 0; min-width: 0; line-height: 1.5; }
.kachel dd .zusatz { display: block; margin-top: 6px; font-size: .88rem; color: var(--tinte-2); }
.kachel dd a.zusatz { color: var(--tinte); text-decoration-color: var(--gelb); text-underline-offset: .2em; }

/* Preis-Kachel hervorgehoben */
.k-preis {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
  padding: 26px 28px;
  border-color: rgba(242, 194, 48, .35);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(242, 194, 48, .14), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), var(--flaeche);
}
.preis-anzeige { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.1; color: var(--gelb); }
.preis-staffel { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; }
.preis-staffel li { display: grid; gap: 2px; padding: 11px 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.preis-staffel span { font-size: .76rem; color: var(--tinte-2); }
.preis-staffel b { font-weight: 600; font-variant-numeric: tabular-nums; }

.gebote { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.gebot { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--tinte-2); padding-right: 6px; }
.gebot svg { width: 32px; height: 32px; flex: none; display: block; }
.gebot-kreis { fill: var(--gebot-blau); }
.gebot-zeichen { fill: var(--gebot-weiss); }
.gebot-strich { fill: none; stroke: var(--gebot-weiss); stroke-width: 2.4; stroke-linecap: round; }

/* Standskizze als große Kachel */
.belegung { padding: 22px 22px 20px; }
.belegung svg { display: block; width: 100%; height: auto; max-height: 420px; margin-inline: auto; }
.belegung figcaption { margin-top: 10px; font-size: .86rem; line-height: 1.5; color: var(--tinte-2); }
.belegung .etikett { display: block; margin-bottom: 6px; }

.bl-karte { fill: var(--scheibe); stroke: var(--linie); stroke-width: 1; }
.bl-ring { fill: none; stroke: var(--spiegel); stroke-width: 1.2; }
.bl-spiegel { fill: var(--spiegel); }
.bl-bahn { stroke: var(--linie-stark); stroke-width: 1.5; stroke-dasharray: 4 5; }
.bl-linie { stroke: var(--tinte); stroke-width: 2; }
.bl-schuetze { fill: var(--signal); }
.bl-aufsicht { fill: var(--flaeche); stroke: var(--signal); stroke-width: 3; }
.bl-warte { fill: none; stroke: var(--tinte-2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.bl-person { fill: var(--tinte-2); }
.bl-text { fill: var(--tinte-2); font: 500 15px var(--f-text); }
.bl-text-stark { fill: var(--tinte); font: 600 13px var(--f-text); letter-spacing: .12em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .bl-schuetze { animation: puls 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
}

@media (max-width: 1000px) {
  .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "dauer   teil"
      "betr    betr"
      "schiess schiess"
      "beleg   beleg"
      "ausr    ausr"
      "muni    ort"
      "termin  termin"
      "preis   preis";
  }
  .belegung svg { max-width: 460px; }
}
@media (max-width: 560px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .kachel { grid-area: auto !important; padding: 18px; }
  .k-preis { grid-template-columns: minmax(0, 1fr); }
  .preis-staffel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belegung { padding: 18px 14px 16px; }
}

/* ---------- Was dich erwartet (Akzentblatt) ---------------- */

.band-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.band-raster .fliesstext { font-size: 1.05rem; color: #c3cfdb; }
.band-raster .fliesstext p:first-child { color: #eef2f6; }

.leitsatz {
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--linie);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.7rem, min(3.6vw, 6vh), 2.9rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 24ch;
}
.leitsatz em { font-style: normal; color: var(--gelb); font-weight: 300; }

@media (max-width: 860px) { .band-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kursablauf ------------------------------------- */

.zeitleiste { margin-bottom: 18px; }
.zl-balken {
  display: flex;
  gap: 4px;
  height: 64px;
  padding: 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.zl-seg {
  flex: var(--min) 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 10px;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.zl-gespraech { background: var(--flaeche-2); color: var(--tinte-2); }
.zl-unterweisung {
  background-color: var(--stahl-100);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(44, 90, 133, .16) 6px 8px);
  color: var(--stahl-600);
}
.zl-schiessen { background: linear-gradient(180deg, var(--gelb-hell), var(--gelb)); color: #121a22; }
/* kurze 15-Minuten-Felder: enger setzen, damit „Pause“ und „Abschluss“ hineinpassen */
.zl-kurz { padding-inline: 8px; letter-spacing: .04em; }
.zl-seg.aktiv { transform: translateY(-3px); box-shadow: 0 8px 18px -8px rgba(14, 24, 35, .5); filter: saturate(1.15); }

.zl-skala { position: relative; height: 28px; margin: 8px 4px 0; }
.zl-skala span {
  position: absolute;
  top: 0;
  left: calc(var(--t) / 180 * 100%);
  transform: translateX(-50%);
  padding-top: 8px;
  font-size: .76rem;
  color: var(--tinte-2);
  font-variant-numeric: tabular-nums;
}
.zl-skala span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 5px; background: var(--linie-stark); }
.zl-skala span:first-child { transform: none; }
.zl-skala span:first-child::before { left: 0; }
.zl-skala span:last-child { transform: translateX(-100%); }
.zl-skala span:last-child::before { left: auto; right: 0; }

.zl-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 clamp(32px, 4vw, 52px); font-size: .86rem; color: var(--tinte-2); }
.zl-legende li { display: inline-flex; align-items: center; gap: 9px; }
.zl-legende i { display: inline-block; width: 20px; height: 12px; border-radius: 4px; }

.ablauf-liste { list-style: none; display: grid; gap: 10px; position: relative; padding-left: 44px; }
/* senkrechte Zeitlinie, füllt sich beim Scrollen (--fortschritt setzt app.js) */
.ablauf-liste::before,
.ablauf-liste::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  border-radius: 2px;
  background: var(--linie-stark);
}
.ablauf-liste::after {
  background: linear-gradient(180deg, var(--gelb-hell), var(--gelb));
  transform-origin: top;
  transform: scaleY(var(--fortschritt, 0));
  box-shadow: 0 0 12px rgba(242, 194, 48, .5);
}
.ab-schritt { position: relative; }
.ab-schritt::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 24px;
  z-index: 1;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--linie-stark);
  transition: background-color .3s, border-color .3s, box-shadow .3s, transform .3s var(--weich), translate .2s;
}
/* Schießblöcke haben links einen dickeren Rand – Punkt um die Differenz zurücksetzen, damit er mittig auf der Linie sitzt */
.ab-schritt.ist-schiessen::before { left: -41px; }
/* hervorgehobene Karte rückt 4 px nach rechts – der Punkt bleibt dabei auf der Linie stehen */
.ab-schritt.aktiv::before { translate: -4px 0; }
.ab-schritt.erreicht::before { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 0 5px var(--signal-zart); transform: scale(1.1); }
.ab-schritt {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 5rem;
  gap: 8px 28px;
  align-items: baseline;
  padding: 20px 24px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ab-schritt.aktiv { border-color: var(--stahl-400); box-shadow: var(--schatten); transform: translateX(4px); }
.ab-zeit { font-variant-numeric: tabular-nums; color: var(--tinte-2); white-space: nowrap; font-size: .92rem; }
.ab-inhalt { display: grid; gap: 4px; min-width: 0; }
.ab-inhalt h3 { font-size: 1.1rem; }
.ab-inhalt p { color: var(--tinte-2); max-width: 46em; font-size: .96rem; }
.ab-teile { list-style: none; display: grid; gap: 14px; }
.ab-teile li { display: grid; gap: 3px; }
.ab-art { justify-self: end; font-size: .8rem; font-weight: 600; color: var(--tinte-2); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--flaeche-2); }
.ab-schritt.ist-schiessen { border-left: 4px solid var(--gelb); }
.ab-schritt.ist-schiessen .ab-art { background: var(--signal-zart); color: #6b5208; }
.ab-schritt.ist-schiessen h3::before {
  content: "";
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .5em;
  vertical-align: .1em;
  border-radius: 50%;
  background: var(--gelb);
  box-shadow: 0 0 0 4px var(--signal-zart);
}

.hinweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: 22px 24px;
  border-left: 4px solid var(--signal);
  max-width: 52rem;
}
.hinweis svg { width: 24px; height: 24px; color: var(--akzent-text); }
.hinweis p + p { margin-top: 6px; color: var(--tinte-2); }
.ablauf-liste + .hinweis { margin-inline: auto; }

@media (max-width: 720px) {
  .zl-balken { height: 52px; }
  .zl-seg { padding: 0 6px 8px; font-size: .64rem; letter-spacing: .05em; border-radius: 7px; }
  .zl-seg .lang { display: none; }
  .zl-kurz { font-size: 0; } /* zu schmal für Text – die Legende erklärt die grauen Felder */
  .zl-skala .halb { display: none; }
  .ab-schritt { grid-template-columns: minmax(0, 1fr) auto; padding: 18px; }
  .ablauf-liste { padding-left: 30px; }
  .ablauf-liste::before, .ablauf-liste::after { left: 8px; }
  .ab-schritt::before { left: -28px; width: 12px; height: 12px; top: 22px; }
  .ab-schritt.ist-schiessen::before { left: -31px; }
  .ab-zeit { grid-column: 1; }
  .ab-art { grid-column: 2; grid-row: 1; }
  .ab-inhalt { grid-column: 1 / -1; }
}

/* ---------- Voraussetzungen -------------------------------- */

.checkliste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.checkliste li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  line-height: 1.5;
  transition: border-color .25s, transform .25s var(--weich);
}
.checkliste li:hover { border-color: rgba(242, 194, 48, .45); transform: translateY(-2px); }
.kasten { width: 26px; height: 26px; border-radius: 50%; background: var(--signal-zart); display: grid; place-items: center; }
.kasten svg { width: 13px; height: 13px; color: var(--signal); }

@media (max-width: 760px) { .checkliste { grid-template-columns: minmax(0, 1fr); } }

.hinweis-warnung { border-left-color: var(--tinte-2); }
.hinweis-warnung svg { color: var(--tinte-2); }

/* ---------- Ausschlussliste (FAQ „Was ist nicht Bestandteil“) --- */

.ausschluss { list-style: none; display: grid; }
.ausschluss li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
  line-height: 1.45;
  color: var(--tinte);
}
.ausschluss li:first-child { padding-top: 2px; }
.ausschluss li:last-child { border-bottom: 0; padding-bottom: 0; }
.ausschluss svg { width: 13px; height: 13px; margin-top: 5px; color: var(--fehler); }

.schlussabsatz { margin-top: 28px; max-width: 46em; color: var(--tinte-2); font-size: .94rem; }

/* ---------- Anfrage ---------------------------------------- */

.anfrage-titel { font-size: clamp(2rem, min(4.4vw, 7vh), 3.4rem); max-width: 15em; }
/* knapper oben, damit nach „Termin anfragen“ der Formular-Kasten unten schon zu sehen ist */
#termine { padding-top: clamp(48px, 8vh, 80px); }

/* Helles Formular-Panel im dunklen Abschnitt */
.anfrage-raster {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(20px, 3vh, 32px);
  padding: clamp(22px, 4vw, 52px);
  background: var(--grund);
  color: var(--tinte);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}

.formular { display: grid; gap: clamp(32px, 4vw, 48px); min-width: 0; }

.feldgruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.feldgruppe legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--f-display);
  font-weight: 650;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.schritt-nr {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--grund);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: 0;
  flex: none;
}

.beispiel-hinweis {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 6px 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--platzhalter);
  background: var(--platzhalter-grund);
  outline: 1.5px dashed var(--platzhalter);
  border-radius: 4px;
}

/* Terminkarten */
.termine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.termin { position: relative; display: block; cursor: pointer; }
.termin input { position: absolute; opacity: 0; pointer-events: none; }
.termin-koerper {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 16px 16px 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--weich), box-shadow .25s;
}
.termin:hover .termin-koerper { border-color: var(--linie-stark); transform: translateY(-2px); box-shadow: var(--schatten); }
.termin input:checked + .termin-koerper { background: var(--stahl-900); border-color: var(--stahl-900); color: #eef2f6; box-shadow: 0 16px 32px -16px rgba(14, 24, 35, .6); }
.termin input:checked + .termin-koerper .termin-tag,
.termin input:checked + .termin-koerper .termin-plaetze { color: #a7b6c6; }
.termin input:focus-visible + .termin-koerper { outline: 2px solid var(--stahl-600); outline-offset: 2px; }
.termin-tag { font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.termin-datum { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.02em; margin-top: 2px; }
.termin-zeit { font-size: .88rem; font-variant-numeric: tabular-nums; }
.termin-plaetze { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; color: var(--tinte-2); }
.platz-punkte { display: inline-flex; gap: 3px; }
.platz-punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); }
.platz-punkte i.frei { background: var(--gelb); }
.termin.voll { cursor: not-allowed; }
.termin.voll .termin-koerper { background: transparent; border-style: dashed; transform: none; box-shadow: none; }
.termin.voll .termin-datum, .termin.voll .termin-zeit { color: var(--tinte-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.termin-wunsch .termin-datum { font-size: 1.12rem; }
.termin-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--gelb); color: #121a22; display: none; place-items: center; }
.termin-check svg { width: 12px; height: 12px; }
.termin input:checked ~ .termin-check { display: grid; }

.keine-termine { padding: 16px 18px; background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: var(--radius); color: var(--tinte-2); grid-column: 1 / -1; }

/* Monatskalender für die Terminauswahl */
.kalender {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 2vw, 20px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.kal-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kal-titel { display: grid; gap: 4px; min-width: 0; }
.kal-monat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .35em;
  row-gap: 6px;
  font-family: var(--f-display);
  font-weight: 650;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.kal-jahr { color: var(--stahl-600); }
.kal-marke {
  align-self: center;
  margin-left: .3em;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--f-text);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--auf-signal);
  background: var(--gelb);
}
.kal-marke.jetzt { color: var(--tinte-2); background: var(--flaeche-2); }
.kal-heute { font-size: .82rem; color: var(--tinte-2); }
.kal-pfeile { display: flex; gap: 6px; flex-shrink: 0; }
.kal-pfeil {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--tinte);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--weich);
}
.kal-pfeil svg { width: 16px; height: 16px; }
.kal-pfeil:hover:not(:disabled) { background: var(--stahl-900); border-color: var(--stahl-900); color: #eef2f6; }
.kal-pfeil:active:not(:disabled) { transform: scale(.94); }
.kal-pfeil:disabled { opacity: .35; cursor: default; }
.kal-pfeil:focus-visible, .kal-tag:focus-visible, .kal-sprung:focus-visible { outline: 2px solid var(--stahl-600); outline-offset: 2px; }

.kal-hinweis {
  padding: 10px 14px;
  border-left: 3px solid var(--gelb);
  border-radius: var(--radius-klein);
  background: var(--signal-zart);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--tinte);
}

.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-raster.blaettern { animation: kal-blaettern .35s var(--weich); }
@keyframes kal-blaettern { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kal-wt { padding-bottom: 4px; text-align: center; font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.kal-tag {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 46px;
  aspect-ratio: 1 / .66;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: none;
  font: inherit;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-2);
  opacity: .7;
}
.kal-tag.heute { opacity: 1; border-color: var(--linie-stark); border-style: dashed; }
.kal-tag.gesperrt { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.kal-tag.feiertag::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--linie-stark); }
.kal-tag.frei {
  opacity: 1;
  font-weight: 650;
  color: var(--tinte);
  background: var(--signal-zart);
  border-color: rgba(242, 194, 48, .55);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--weich), box-shadow .25s;
}
.kal-tag.frei:hover { border-color: var(--gelb); transform: translateY(-2px); box-shadow: var(--schatten); }
.kal-tag.frei.gewaehlt { background: var(--stahl-900); border-color: var(--stahl-900); color: #eef2f6; box-shadow: 0 12px 24px -12px rgba(14, 24, 35, .6); }
.kal-punkte { position: absolute; bottom: 6px; display: flex; gap: 3px; }
.kal-punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--gelb); }

.kal-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.kal-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--tinte-2); }
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-punkt { width: 10px; height: 10px; border-radius: 3px; background: var(--signal-zart); outline: 1px solid rgba(242, 194, 48, .7); }
.kal-punkt.aus { background: none; outline: 1px dashed var(--linie-stark); }
.kal-sprung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--tinte);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.kal-sprung svg { width: 14px; height: 14px; transition: transform .25s var(--weich); }
.kal-sprung:hover { background: var(--gelb); border-color: var(--gelb); color: var(--auf-signal); }
.kal-sprung:hover svg { transform: translateX(3px); }

.kal-auswahl { display: grid; gap: 12px; margin-top: 16px; }
.kal-auswahl-titel { display: grid; gap: 2px; font-family: var(--f-display); font-weight: 650; font-size: 1.1rem; letter-spacing: -.01em; }
.kal-auswahl-titel span { font-family: var(--f-text); font-weight: 500; font-size: .84rem; letter-spacing: 0; color: var(--tinte-2); }
.kal-auswahl .termine { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Felder */
.feld-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feld { display: grid; gap: 7px; min-width: 0; }
.feld label, .feld .feld-name { font-size: .9rem; font-weight: 550; }
.feld .optional { font-weight: 400; color: var(--tinte-2); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--flaeche);
  color: var(--tinte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.feld input::placeholder, .feld textarea::placeholder { color: #8593a2; }
.feld textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.feld input:hover, .feld textarea:hover { border-color: var(--tinte-2); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--stahl-600); box-shadow: 0 0 0 4px rgba(44, 90, 133, .15); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--fehler); }
.feld-fehler { font-size: .86rem; color: var(--fehler); font-weight: 550; }

/* Segmentwahl: Personen, Erfahrung */
.segmente { display: flex; flex-wrap: wrap; gap: 8px; }
.segment { position: relative; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 50px;
  padding: 0 18px;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  font-size: 1.05rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.segment.text span { font-size: .92rem; }
.segment span:hover { border-color: var(--tinte-2); }
.segment input:checked + span { background: var(--stahl-900); border-color: var(--stahl-900); color: #eef2f6; }
.segment input:focus-visible + span { outline: 2px solid var(--stahl-600); outline-offset: 3px; }
.segment input:disabled + span { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.feld-info { font-size: .86rem; color: var(--tinte-2); }

/* Bestätigungen */
.bestaetigung {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
  line-height: 1.5;
  font-size: .96rem;
}
.bestaetigung:first-of-type { border-top: 1px solid var(--linie); }
.bestaetigung input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.bestaetigung input::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid #121a22;
  border-bottom: 2px solid #121a22;
  transform: translateY(-2px) rotate(-45deg) scale(0);
  transition: transform .15s var(--weich);
}
.bestaetigung input:checked { background: var(--gelb); border-color: var(--gelb); }
.bestaetigung input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.bestaetigung input:focus-visible { outline: 2px solid var(--stahl-600); outline-offset: 3px; }
.bestaetigung a { color: var(--akzent-text); font-weight: 550; text-underline-offset: .2em; }

.absenden { display: grid; gap: 12px; justify-items: start; }
.absenden .knopf { min-width: 240px; min-height: 54px; }
.absenden-hinweis { font-size: .86rem; color: var(--tinte-2); max-width: 46em; }
.formular-fehler { padding: 12px 16px; background: var(--fehler-grund); color: var(--fehler); border-radius: var(--radius-klein); font-weight: 550; font-size: .92rem; }

.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Mitlaufende Übersicht */
.uebersicht { position: sticky; top: calc(var(--kopf-hoehe) + 20px); display: grid; padding: 22px 22px 20px; border-top: 4px solid var(--gelb); min-width: 0; }
.uebersicht-titel { font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: 10px; }
.uebersicht dl { margin: 0; }
.ue-zeile { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linie); }
.ue-zeile dt { font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.ue-zeile dd { margin: 0; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; font-size: .96rem; }
.ue-zeile dd .leer { color: var(--tinte-2); font-weight: 400; }
.ue-zeile dd small { display: block; font-weight: 400; color: var(--tinte-2); font-size: .84rem; }
.ue-summe { display: block; font-size: 1.75rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mitbringen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--signal-zart);
  border-radius: var(--radius-klein);
  font-size: .86rem;
  line-height: 1.4;
}
.mitbringen svg { width: 20px; height: 20px; color: #8a6a0a; }

.zurueck { justify-self: start; padding: 0; background: none; border: 0; color: var(--akzent-text); font: inherit; font-weight: 550; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Ergebnis nach dem Absenden */
.ergebnis { display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 3.5vw, 40px); border-top: 4px solid var(--erfolg); }
.ergebnis.alternative { border-top-color: var(--gelb); }
.ergebnis h3 { font-family: var(--f-display); font-weight: 650; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -.03em; }
.ergebnis p { max-width: 40em; }
.ergebnis pre {
  width: 100%;
  margin: 0;
  padding: 14px;
  max-height: 260px;
  overflow: auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  font: 500 .86rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mail-adresse { font-weight: 650; font-size: 1.05rem; user-select: all; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .anfrage-raster { grid-template-columns: minmax(0, 1fr); }
  .uebersicht { position: static; order: -1; }
}
@media (max-width: 560px) {
  .anfrage-raster { margin-inline: calc(-1 * var(--rand) + 8px); padding: 20px 16px; }
  .feld-reihe { grid-template-columns: minmax(0, 1fr); }
  .absenden .knopf { width: 100%; min-width: 0; }
  .termine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .termin-koerper { padding: 14px 12px 12px; }
  .termin-datum { font-size: 1.15rem; }
  .termin-wunsch .termin-datum { font-size: 1.05rem; }
  .kal-auswahl .termine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kal-auswahl .termin-wunsch { grid-column: 1 / -1; }
  .kal-auswahl .termin-datum { font-size: 1.02rem; white-space: nowrap; }
  .kal-raster { gap: 5px; }
  .kal-tag { min-height: 40px; font-size: .88rem; }
  .kal-pfeil { width: 40px; height: 40px; }
  .kal-fuss { flex-direction: column; align-items: stretch; }
  .kal-sprung { justify-content: center; }
}

/* ---------- Preis pro Person + rollende Beträge ------------ */

.feld-preis {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  justify-self: start;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--signal-zart);
  font-size: .9rem;
  color: var(--tinte-2);
}
.feld-preis b { color: var(--tinte); font-weight: 650; font-variant-numeric: tabular-nums; }
.preis-staffel small { font-size: .74rem; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.rollt { animation: rollen-preis .45s var(--weich); }
@keyframes rollen-preis { from { transform: translateY(-.25em); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Filmkorn über dem Kopf-Foto (ruhend, sparsam) --- */

.held-fotos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
.fw-plaketten { z-index: 2; }

/* ---------- Feste Anfrage-Leiste auf dem Handy ------------- */

.anfrage-leiste { display: none; }
@media (max-width: 760px) {
  .anfrage-leiste {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    border-radius: 18px;
    background: rgba(10, 18, 27, .82);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
    color: #eef2f6;
    transform: translateY(calc(100% + 24px));
    transition: transform .45s var(--weich);
  }
  .anfrage-leiste.sichtbar { transform: none; }
  .al-text { display: grid; line-height: 1.2; }
  .al-text small { font-size: .72rem; color: #a7b6c6; }
  .al-text b { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; color: var(--gelb); }
  .anfrage-leiste .knopf { --tinte: #ffffff; --grund: var(--stahl-900); min-height: 46px; padding-inline: 20px; }
  .fuss { padding-bottom: 96px; }
}

/* ---------- So läuft deine Anfrage ab ---------------------- */

.anfrage-weg {
  list-style: none;
  counter-reset: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(20px, 3.4vh, 32px);
}
/* verbindende Linie hinter den Nummern */
.anfrage-weg::before {
  content: "";
  position: absolute;
  top: 35px;
  left: calc(16.66% + 10px);
  right: calc(16.66% + 10px);
  height: 2px;
  background: linear-gradient(90deg, var(--gelb), rgba(242, 194, 48, .25));
}
.anfrage-weg li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 20px 18px;
  text-align: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.aw-nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gelb);
  color: #121a22;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--flaeche), 0 0 0 7px rgba(242, 194, 48, .35);
}
.anfrage-weg h3 { margin-top: 2px; }
.anfrage-weg p { font-size: .92rem; color: var(--tinte-2); max-width: 36ch; }

@media (max-width: 760px) {
  .anfrage-weg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .anfrage-weg::before { top: 30px; bottom: 30px; left: 41px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--gelb), rgba(242, 194, 48, .25)); }
  .anfrage-weg li { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; padding: 18px; }
  .aw-nr { grid-row: span 2; }
  .anfrage-weg h3 { margin-top: 0; align-self: end; }
}

/* ---------- Geschenk --------------------------------------- */

.geschenk-raster {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.geschenk-text { display: grid; gap: 22px; }
.geschenk-text .lead { color: #dce4ec; }
.geschenk-liste { list-style: none; display: grid; gap: 12px; }
.geschenk-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; color: #c3cfdb; line-height: 1.5; }
.geschenk-liste svg {
  width: 26px; height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(242, 194, 48, .16);
  color: var(--gelb);
}
.geschenk-text .knopf-reihe { margin-top: 4px; }
.geschenk-hinweis { font-size: .84rem; color: #9fb0c2; max-width: 44em; }

/* Geschenkkarte */
.geschenk-buehne { perspective: 1200px; display: grid; place-items: center; padding: 24px 0; }
.geschenk-karte {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1.586;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 20px;
  overflow: hidden;
  color: #eef2f6;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(242, 194, 48, .28), transparent 55%),
    linear-gradient(140deg, #24486b 0%, #12202f 60%, #0a121b 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .15);
  transform: rotateX(8deg) rotateY(-14deg) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform .6s var(--weich);
}
.geschenk-buehne:hover .geschenk-karte { transform: rotateX(0) rotateY(0) rotateZ(0) scale(1.02); }
/* Lichtschimmer, der über die Karte zieht */
.geschenk-karte::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  transform: translateX(-60%);
  pointer-events: none;
}
.gk-ringe {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  right: -22%;
  bottom: -38%;
  background: var(--ringe) center / contain no-repeat;
  opacity: .9;
  pointer-events: none;
}
.gk-oben { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.gk-marke { width: 26px; height: 26px; color: #eef2f6; }
.gk-titel { font-size: .74rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.gk-mitte { align-self: center; display: grid; gap: 4px; position: relative; z-index: 1; }
.gk-etikett { font-size: .7rem; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--gelb); }
.gk-gross { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.gk-unten { display: flex; justify-content: space-between; align-items: end; gap: 12px; font-size: .8rem; color: #a7b6c6; position: relative; z-index: 1; }
.gk-unten b { font-size: 1.1rem; color: var(--gelb); font-weight: 650; }

@media (prefers-reduced-motion: no-preference) {
  .geschenk-karte { animation: schweben 7s ease-in-out infinite; }
  .geschenk-buehne:hover .geschenk-karte { animation-play-state: paused; }
  .geschenk-karte::after { animation: schimmer 5.5s ease-in-out infinite; }
  /* ruht, solange sie weit außerhalb des Bildschirms ist (Klasse setzt app.js) */
  .geschenk-buehne.ruht .geschenk-karte,
  .geschenk-buehne.ruht .geschenk-karte::after { animation-play-state: paused; }
  @keyframes schweben {
    0%, 100% { transform: rotateX(8deg) rotateY(-14deg) rotateZ(2deg) translateY(0); }
    50%      { transform: rotateX(4deg) rotateY(-8deg) rotateZ(1deg) translateY(-10px); }
  }
  @keyframes schimmer { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
}

@media (max-width: 860px) {
  .geschenk-raster { grid-template-columns: minmax(0, 1fr); }
  .geschenk-buehne { order: -1; padding: 0 0 8px; }
}

/* Formular: Geschenk-Option */
.segment-symbol { width: 18px; height: 18px; margin-right: 8px; flex: none; }
.geschenk-feld {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--signal-zart);
  border: 1px dashed rgba(242, 194, 48, .55);
}

/* ---------- Gut zu wissen (FAQ) ----------------------------- */

.faq-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 32px); display: grid; gap: 18px; }
.faq-kopf h2 { font-size: clamp(1.9rem, min(3.6vw, 6vh), 3rem); line-height: 1.08; }
.faq-ja {
  display: inline-block;
  color: var(--stahl-600);
  background: linear-gradient(var(--gelb), var(--gelb)) 0 100% / 100% 4px no-repeat;
  padding-bottom: 6px;
}
.faq-kopf .lead { color: var(--tinte-2); }

.faq-liste { display: grid; gap: 10px; }
.faq-eintrag {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color .3s, box-shadow .3s;
  interpolate-size: allow-keywords;
}
.faq-eintrag[open] { border-color: var(--linie-stark); box-shadow: var(--schatten); }
.faq-eintrag summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary:focus-visible { outline: 2px solid var(--stahl-600); outline-offset: 2px; }
.faq-eintrag summary h3 { font-size: 1.06rem; line-height: 1.35; }
.faq-eintrag summary:hover h3 { color: var(--stahl-600); }

/* Plus, das sich beim Öffnen zum Minus dreht */
.faq-zeichen {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--flaeche-2);
  transition: background-color .3s, transform .4s var(--weich);
}
.faq-zeichen::before,
.faq-zeichen::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--tinte);
  transition: transform .4s var(--weich), background-color .3s;
}
.faq-zeichen::after { transform: rotate(90deg); }
.faq-eintrag[open] .faq-zeichen { background: var(--gelb); transform: rotate(180deg); }
.faq-eintrag[open] .faq-zeichen::before,
.faq-eintrag[open] .faq-zeichen::after { background: #121a22; }
.faq-eintrag[open] .faq-zeichen::after { transform: rotate(0deg); }

.faq-antwort {
  display: grid;
  gap: 14px;
  padding: 0 22px 24px;
  color: var(--tinte-2);
  line-height: 1.65;
}
.faq-kern { color: var(--tinte); font-weight: 600; }
.faq-grundlage { font-size: .86rem; padding-top: 12px; border-top: 1px solid var(--linie); }
.faq-link { color: var(--stahl-600); font-weight: 600; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.faq-antwort .ausschluss li { color: var(--tinte); }
.faq-antwort .schlussabsatz { margin-top: 4px; font-size: .9rem; }

/* weiches Auf- und Zuklappen (moderne Browser; ältere klappen ohne Animation) */
.faq-eintrag::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s var(--weich), content-visibility .45s allow-discrete;
}
.faq-eintrag[open]::details-content { block-size: auto; }

@media (max-width: 900px) {
  .faq-raster { grid-template-columns: minmax(0, 1fr); }
  .faq-kopf { position: static; }
}
@media (max-width: 520px) {
  .faq-eintrag summary { padding: 18px; }
  .faq-antwort { padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-eintrag::details-content { transition: none; }
  .kal-raster.blaettern { animation: none; }
}

/* ---------- Fußzeile --------------------------------------- */

.fuss {
  position: relative;
  margin-top: calc(-1 * var(--blatt));
  background: var(--stahl-950);
  color: #a7b6c6;
  border-radius: var(--blatt) var(--blatt) 0 0;
  padding-block: clamp(48px, 6vw, 80px) 28px;
  font-size: .9rem;
  box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, .5);
}
.fuss-raster { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fuss .marke { color: #eef2f6; }
.fuss .marke-loch { stroke: var(--stahl-950); }
.fuss-titel { font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #eef2f6; margin-bottom: 12px; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss a { color: #a7b6c6; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gelb); }
.fuss-links { list-style: none; display: grid; gap: 7px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: .82rem; }
.fuss-claim { margin-top: 14px; max-width: 30em; line-height: 1.6; }

@media (max-width: 760px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ------- */

.seite {
  position: relative;
  min-height: 60vh;
  padding-block: clamp(40px, 6vw, 80px) calc(var(--abstand) + var(--blatt));
  background: var(--grund);
  color: var(--tinte);
  border-radius: var(--blatt) var(--blatt) 0 0;
}
.langtext { max-width: 44rem; display: grid; gap: 14px; color: var(--tinte-2); }
.langtext h1 { font-size: clamp(2.2rem, min(4.6vw, 7.5vh), 3.4rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 650; margin: 14px 0; color: var(--tinte); }
.langtext h2 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.25; letter-spacing: -.02em; margin-top: 24px; color: var(--tinte); }
.langtext strong { color: var(--tinte); }
.langtext ul { padding-left: 1.2em; display: grid; gap: 6px; }
.langtext a:not(.knopf) { color: var(--akzent-text); text-underline-offset: .2em; }
.langtext .lead { color: var(--tinte); }
.langtext .klein { font-size: .88rem; }

.fehlerseite { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.fehlerseite .held-scheibe { max-width: 320px; }
@media (max-width: 760px) { .fehlerseite { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Bewegung --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Fotos im Kopfbereich: langsame Kamerafahrt und Überblendung im Wechsel (18 s je Runde) */
  .held-bild[data-nr="1"] { animation: held-a 18s linear infinite; }
  .held-bild[data-nr="2"] { animation: held-b 18s linear infinite; }
  /* ruhen, solange der Kopfbereich nicht im Bild ist (Klasse setzt app.js) */
  .held.ausser-bild .held-bild { animation-play-state: paused; }
  @keyframes held-a {
    0%   { opacity: 1; transform: scale(1.12); }
    50%  { opacity: 1; }
    56%  { opacity: 0; transform: scale(1.03); }
    94%  { opacity: 0; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1.12); }
  }
  @keyframes held-b {
    0%   { opacity: 0; transform: scale(1.12); }
    44%  { opacity: 0; transform: scale(1.12); }
    50%  { opacity: 1; }
    94%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.03); }
  }

  /* Überschrift: Zeilen werden von unten enthüllt */
  .held-inhalt > .held-titel { animation: none; }
  .held-titel > span { animation: zeile 1.1s var(--weich) both; }
  .held-titel > span:nth-child(1) { animation-delay: .25s; }
  .held-titel > span:nth-child(2) { animation-delay: .45s; }
  @keyframes zeile {
    from { opacity: 0; transform: translateY(.45em); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: none; clip-path: inset(-10% -5% -20% -5%); }
  }

  .scroll-hinweis { animation: auftauchen .9s 1.2s var(--weich) both; }
  .scroll-hinweis span { animation: rollen 1.8s ease-in-out infinite; }
  @keyframes rollen { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

  /* Kopfbereich: Inhalte erscheinen nacheinander */
  .held-inhalt > * { animation: auftauchen .9s var(--weich) both; }
  .held-inhalt > :nth-child(1) { animation-delay: .15s; }
  .held-inhalt > :nth-child(2) { animation-delay: .28s; }
  .held-inhalt > :nth-child(3) { animation-delay: .42s; }
  .held-inhalt > :nth-child(4) { animation-delay: .54s; }
  .held-inhalt > :nth-child(5) { animation-delay: .7s; }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

  .sch-loch { animation: einschlag .32s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.5s + var(--n) * .2s); }
  @keyframes einschlag { from { transform: scale(0); } to { transform: scale(1); } }

  /* Beim Scrollen hereingleiten (Klassen setzt app.js) */
  .zeige { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--weich), transform .8s var(--weich); transition-delay: calc(var(--i, 0) * 80ms); }
  .zeige.sichtbar { opacity: 1; transform: none; }

  /* Ablauf-Balken füllt sich von links */
  .js .zl-balken .zl-seg { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.6, 0, .2, 1), box-shadow .2s, filter .2s; transition-delay: calc(var(--i, 0) * 180ms); }
  .js .zl-balken.sichtbar .zl-seg { transform: none; }
  .js .zl-balken.sichtbar .zl-seg.aktiv { transform: translateY(-3px); transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

p, li, dd, h2, h3 { overflow-wrap: break-word; }