/* Stickinsel · Die Fähre zur Stickinsel
   Eine Welt: Donau-Fähre zur Insel. Farben nur aus der Stufenleiter unten.
   Kanten nur als Perforation und Abriss der Fahrkarte, keine Schatten, keine Kästen. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/jost-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Stufenleiter, vom Ufer bis zur Nacht-Donau */
  --ufer: #FFF4E6;
  --karte: #FED4A3;
  --sand: #F2B57C;
  --wasser: #53C8E2;
  --tiefe: #17808F;
  --nacht: #173246;

  /* abgeleitete Töne für Text (aus der Nacht-Donau, nie grau) */
  --tinte: var(--nacht);
  --tinte-leise: #3A5468;
  --tiefe-text: #0F5F6B; /* Tiefe, nachgedunkelt für Text auf Pfirsich (Kontrast) */
  --auf-nacht: var(--ufer);
  --auf-nacht-leise: #BFD3DC;

  --schrift: "Jost", "Futura", "Century Gothic", "Segoe UI", sans-serif;

  /* Maße */
  --rand: clamp(16px, 4.5vw, 64px);
  --breite: 1312px;
  --abstand-abschnitt: clamp(72px, 10vw, 140px);
  --radius-karte: 8px;
  --perforation: 3px dashed var(--sand);

  /* Schriftgrößen */
  --text: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  --text-gross: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem);

  /* Regler für den Einstieg (Phase 6) */
  --hafen-oben: clamp(20px, 3.2vw, 48px);
  --fahrkarte-drehung: -1.5deg;
  --fahrkarte-breite: 860px;
  --ufer-anteil: 34%;
  --insel-groesse: clamp(96px, 11vw, 168px);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--tiefe) var(--ufer); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ufer);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--text);
  line-height: 1.55;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2.5px; }
::selection { background: var(--karte); color: var(--nacht); }
input, select, textarea, button { font: inherit; color: inherit; }
input, textarea { caret-color: var(--tiefe); }
:focus-visible { outline: 3px solid var(--nacht); outline-offset: 3px; border-radius: 4px; }
.nacht :focus-visible, .fusszeile :focus-visible { outline-color: var(--karte); }
h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; font-weight: 600; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.15; }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.tab { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: var(--rand); top: -60px; background: var(--nacht); color: var(--ufer); padding: 10px 16px; border-radius: 999px; z-index: 50; }
.sprung:focus { top: 12px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px; padding: 0.7em 1.35em;
  border: 2px solid var(--nacht); border-radius: 999px;
  background: var(--nacht); color: var(--ufer);
  font-weight: 600; font-size: 1.05em; text-decoration: none; cursor: pointer;
  transition: background-color .25s cubic-bezier(.2,.8,.2,1), color .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.knopf:hover { background: var(--tiefe); border-color: var(--tiefe); color: #fff; text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf--hell { background: transparent; color: var(--nacht); }
.knopf--hell:hover { background: var(--nacht); color: var(--ufer); border-color: var(--nacht); }
.knopf--karte { background: var(--karte); color: var(--nacht); border-color: var(--karte); }
.knopf--karte:hover { background: var(--ufer); border-color: var(--ufer); color: var(--nacht); }
.knopf--tiefe { background: var(--tiefe); border-color: var(--tiefe); color: #fff; }
.knopf--tiefe:hover { background: var(--nacht); border-color: var(--nacht); }
.knopf svg { width: 1.1em; height: 1.1em; flex: none; }
.knopf[disabled] { opacity: .6; cursor: progress; }

/* ---------- Kopfzeile (Anlegestelle) ---------- */
.kopf { position: relative; z-index: 20; padding-top: 22px; }
.kopf__innen { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.kopf__logo { width: clamp(170px, 18vw, 236px); flex: none; }
.kopf__logo img { width: 100%; }
.kopf__nav { display: flex; gap: clamp(16px, 2vw, 32px); margin-left: auto; font-size: 1.02rem; }
.kopf__nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .3s cubic-bezier(.2,.8,.2,1); }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { border-bottom-color: currentColor; }
.kopf .knopf { min-height: 46px; font-size: 1rem; }
.kopf__menu { display: none; margin-left: auto; background: none; border: 2px solid var(--nacht); border-radius: 999px; padding: 8px 14px; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.kopf__menu svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .kopf__nav { display: none; }
  .kopf__menu { display: inline-flex; margin-left: 8px; order: 3; }
  .kopf__innen > .kopf__anfrage { margin-left: auto; min-height: 42px; padding: .45em 1em; font-size: .95rem; }
  .kopf__lang { display: none; }
  .kopf.offen .kopf__nav {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; left: var(--rand); right: var(--rand); top: 76px;
    background: var(--nacht); color: var(--ufer); padding: 18px 22px 22px; border-radius: var(--radius-karte);
    font-size: 1.2rem;
  }
  .kopf.offen .kopf__nav a { padding: 10px 0; border-bottom: 1px dashed var(--tinte-leise); }
  .kopf.offen .kopf__nav .knopf { margin-top: 12px; justify-content: center; border-color: var(--karte); background: var(--karte); color: var(--nacht); }
  .kopf__nav .knopf { display: none; }
  .kopf.offen .kopf__nav .knopf { display: inline-flex; }
}
@media (min-width: 901px) { .kopf__nav .knopf { display: none; } }

/* ---------- Hafen (Einstieg) ---------- */
.hafen { position: relative; }
.hafen__ufer {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px);
  padding-top: var(--hafen-oben); padding-bottom: clamp(20px, 2vw, 28px); align-items: start;
}
.hafen h1 { font-size: var(--h1-groesse, clamp(2.5rem, 1.5rem + 3.2vw, 4.1rem)); max-width: var(--h1-breite, 20ch); }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.hafen--unterseite h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); max-width: 24ch; }
.hafen--unterseite .hafen__lead { margin-top: .5em; }
.hafen__lead { font-size: var(--text-gross); color: var(--tinte-leise); margin-top: 0.7em; max-width: 60ch; }

/* Abfahrtstafel */
.tafel { background: var(--nacht); color: var(--auf-nacht); border-radius: var(--radius-karte); padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 30px) 10px; }
.tafel__titel { font-size: 0.95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wasser); font-weight: 600; margin: 0 0 6px; display: flex; justify-content: space-between; gap: 12px; }
.tafel__titel span:last-child { color: var(--auf-nacht-leise); letter-spacing: .06em; }
.tafel__zeile {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 6px 18px; width: 100%;
  padding: 14px 0; border: 0; border-top: 1px dashed var(--tinte-leise); background: none; color: inherit; text-align: left;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); cursor: pointer;
  transition: opacity .3s, color .3s;
}
.tafel__zeile:hover .tafel__stueck { color: var(--karte); }
.tafel__preis { font-weight: 600; }
.tafel__zeit { color: var(--wasser); min-width: 5.2em; text-align: right; }
.tafel.hat-wahl .tafel__zeile { opacity: .42; }
.tafel.hat-wahl .tafel__zeile.ist-gewaehlt { opacity: 1; }
.tafel.hat-wahl .tafel__zeile.ist-gewaehlt .tafel__stueck { color: var(--karte); }
.tafel__fuss { font-size: 0.95rem; color: var(--auf-nacht-leise); border-top: 1px dashed var(--tinte-leise); padding: 12px 0 8px; margin: 0; }

/* Anleger: Ufer oben, Wasser unten, die Fahrkarte liegt auf der Kante */
.anleger { position: relative; background: linear-gradient(transparent 0 var(--ufer-anteil), var(--wasser) var(--ufer-anteil)); }
.anleger::before { /* Uferlinie: kleine Bögen, wo das Wasser beginnt */
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--ufer-anteil) - 1px); height: 18px;
  background: radial-gradient(circle at 20px -4px, var(--ufer) 0 17px, transparent 18px) 0 0 / 40px 18px repeat-x;
}
.anleger__innen { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(40px, 5vw, 72px); }
.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.route path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: butt; stroke-dasharray: 16 11; vector-effect: non-scaling-stroke; }
.insel { width: var(--insel-groesse); justify-self: end; margin-right: clamp(0px, 4vw, 60px); }
.insel img { width: 100%; border-radius: 50%; border: var(--insel-rand, clamp(4px, 0.45vw, 7px)) solid #fff; /* weiße Umrandung, hebt die Insel vom Wasser ab (Wunsch 2026-10-24) */ }
.anleger__rechts { display: grid; gap: 18px; justify-items: end; }

/* ---------- Fahrkarte ---------- */
.fahrkarte {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 15vw, 200px);
  background: var(--karte); color: var(--nacht); border-radius: var(--radius-karte);
  max-width: var(--fahrkarte-breite); transform: rotate(var(--fahrkarte-drehung)); transform-origin: 30% 50%;
}
.fahrkarte::before, .fahrkarte::after { /* Kerben an der Abrisslinie */
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--ufer);
  right: calc(clamp(140px, 15vw, 200px) - 11px); top: -11px;
}
.fahrkarte::after { top: auto; bottom: -11px; background: var(--wasser); }
.fahrkarte__haupt { padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.6vw, 36px); min-width: 0; }
.fahrkarte__kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--tiefe-text); margin: 0 0 12px; }
.fahrkarte__kopf span { color: #6B4B22; }
.fahrkarte fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.fahrkarte legend { padding: 0; font-weight: 600; margin-bottom: 10px; font-size: 1.02rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 7px 13px; border: 2px solid var(--nacht); border-radius: 999px;
  font-size: clamp(.94rem, .9rem + .15vw, 1.02rem); transition: background-color .2s, color .2s; cursor: pointer; white-space: nowrap;
}
.chip b { font-weight: 600; }
.chip input:checked + span { background: var(--nacht); color: var(--karte); }
.chip input:focus-visible + span { outline: 3px solid var(--tiefe); outline-offset: 2px; }
.chip:hover span { background: var(--ufer); }
.chip input:checked:hover + span { background: var(--nacht); }
.fahrkarte__feld { display: grid; gap: 4px; margin-bottom: 16px; }
.fahrkarte__feld label { font-weight: 600; font-size: 1.02rem; }
.fahrkarte__feld input {
  border: 0; border-bottom: 2px solid var(--nacht); background: transparent; padding: 8px 0; font-size: 1.25rem; border-radius: 0;
}
.fahrkarte__feld input::placeholder { color: #7A5A30; }
.fahrkarte__feld input:focus { outline: none; border-bottom-color: var(--tiefe); background: linear-gradient(transparent 70%, #FFE6C4 70%); }
.fahrkarte__weg { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fahrkarte__reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: end; margin-bottom: 18px; }
.fahrkarte__reihe .fahrkarte__feld, .fahrkarte__reihe fieldset { margin: 0; }
.fahrkarte__reihe .fahrkarte__weg { flex-direction: column; gap: 6px; font-size: .98rem; }
.radio { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.radio input { accent-color: var(--nacht); width: 20px; height: 20px; margin: 0; }
.fahrkarte__los { margin-top: 6px; }
.fahrkarte__abschnitt {
  border-left: var(--perforation); padding: clamp(20px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px);
  display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
}
.fahrkarte__abschnitt p { margin: 0; font-size: .98rem; line-height: 1.4; }
.stempel {
  width: clamp(104px, 10vw, 136px); aspect-ratio: 1; border: 4px solid var(--tiefe); border-radius: 50%;
  display: grid; place-items: center; text-align: center; color: var(--tiefe-text); font-weight: 700; line-height: 1.05;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); transform: rotate(-12deg);
}
.stempel small { display: block; font-size: .7em; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.stempel.knallt { animation: stempeln .55s cubic-bezier(.2,.9,.2,1); }
@keyframes stempeln {
  0% { transform: rotate(-26deg) scale(1.6); opacity: 0; filter: blur(2px); }
  60% { transform: rotate(-10deg) scale(.94); opacity: 1; filter: blur(0); }
  100% { transform: rotate(-12deg) scale(1); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand-abschnitt); position: relative; }
.abschnitt--karte { background: var(--karte); }
.abschnitt--sand { background: var(--sand); }
.abschnitt--wasser { background: var(--wasser); }
.abschnitt--nacht, .nacht { background: var(--nacht); color: var(--auf-nacht); }
.abschnitt--nacht p, .nacht p { color: var(--auf-nacht-leise); }
.abschnitt__kopf { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.abschnitt__kopf p { font-size: var(--text-gross); margin: 0; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.zwei-spalten--umgekehrt > :first-child { order: 2; }

/* Bilder mit Etikett (Bildunterschrift wie ein Gepäckzettel) */
.bild { margin: 0; position: relative; }
.bild img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-karte); background: var(--sand); }
.bild figcaption { font-size: .93rem; color: var(--tinte-leise); margin-top: 10px; padding-left: 14px; position: relative; }
.bild figcaption::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid currentColor; }
.nacht .bild figcaption, .abschnitt--nacht .bild figcaption { color: var(--auf-nacht-leise); }
.abschnitt--sand .bild figcaption, .abschnitt--wasser .bild figcaption { color: var(--nacht); }

/* ---------- Ladung (Was wir besticken) ---------- */
.ladung { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px) clamp(18px, 2.4vw, 32px); }
.stueck { display: grid; gap: 14px; align-content: start; }
.stueck .bild img { aspect-ratio: var(--seiten, 4 / 3); }
.stueck--gross { grid-column: 1 / span 7; --seiten: 16 / 10; }
.stueck--hoch { grid-column: 8 / span 5; grid-row: span 2; --seiten: 4 / 5; }
.stueck--mittel { grid-column: 1 / span 4; --seiten: 4 / 3; }
.stueck--schmal { grid-column: 5 / span 3; --seiten: 3 / 4; }
/* Etikett = Abriss einer Fahrkarte unter dem Foto: Perforation statt Kasten */
.etikett { padding: 14px 0 0; border-top: var(--perforation); display: grid; gap: 6px; position: relative; }
.abschnitt--wasser .etikett { border-top-color: var(--ufer); }
.abschnitt--wasser .etikett p { color: var(--nacht); }
.etikett h3 { font-size: var(--h3); }
.etikett__preis { font-weight: 600; font-size: 1.1rem; color: var(--nacht); }
.etikett p { margin: 0; color: var(--tinte-leise); }
.etikett a { font-weight: 600; text-decoration-color: var(--tiefe); }
.weitere { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--perforation); }
.weitere > div { padding: 22px 24px 0 0; }
.weitere > div + div { border-left: var(--perforation); padding-left: 24px; }
.weitere h3 { margin-bottom: 8px; }
.weitere p { margin: 0; color: var(--tinte-leise); }

/* ---------- Musterstoff ---------- */
.muster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.muster__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.muster__bilder .bild:last-child { margin-top: 56px; }
.muster__bilder img { aspect-ratio: 4 / 3; }
.muster .abschnitt__kopf { margin-bottom: 0; }

/* ---------- Weihnachten ---------- */
.letzte { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.letzte__datum { font-size: clamp(3.4rem, 2rem + 6vw, 6rem); font-weight: 600; color: var(--karte); line-height: .95; letter-spacing: -0.03em; margin: 22px 0 10px; }
.letzte__schild { display: block; font-size: var(--text-gross); letter-spacing: 0; color: var(--wasser); font-weight: 500; margin-bottom: 8px; }
.abschnitt--nacht .letzte__datum { color: var(--karte); }
.countdown { display: inline-flex; align-items: baseline; gap: 8px; border: 2px dashed var(--wasser); border-radius: 999px; padding: 6px 16px; margin: 4px 0 22px; color: var(--auf-nacht); }
.countdown[hidden] { display: none; }
.letzte .bild img { aspect-ratio: 3 / 4; }

/* ---------- Ablauf als gestickte Route ---------- */
.fahrt { position: relative; display: grid; gap: 0; }
.fahrt::before, .fahrt::after { /* Faden: Vorstich, wird beim Scrollen gestickt */
  content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 4px;
  background: repeating-linear-gradient(var(--ufer) 0 16px, transparent 16px 27px);
}
.fahrt::before { opacity: .35; }
.fahrt::after { clip-path: inset(0 0 calc((1 - var(--gestickt, 1)) * 100%) 0); }
.station { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 8px 28px; align-items: start; padding: 24px 0; }
.station + .station { border-top: 3px dashed rgba(255, 244, 230, .7); }
.station__nr {
  position: relative; z-index: 1; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wasser); border: 4px solid var(--ufer); font-size: 1.6rem; font-weight: 600; color: var(--nacht);
  transition: background-color .4s, color .4s;
}
.station.erreicht .station__nr { background: var(--nacht); color: var(--karte); border-color: var(--nacht); }
.station h3 { margin: 10px 0 6px; }
.station p { margin: 0; max-width: 54ch; }
.station__zeit { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); font-weight: 600; white-space: nowrap; padding-top: 12px; }
.fahrt__hinweis { margin: 28px 0 0 94px; font-weight: 500; }

/* ---------- Fragen ---------- */
.fragen { max-width: 920px; }
.frage { border-top: var(--perforation); }
.frage:last-child { border-bottom: var(--perforation); }
.frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-size: var(--h3); font-weight: 600; line-height: 1.32; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { width: 28px; height: 28px; flex: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage summary:hover { color: var(--tiefe); }
.abschnitt--karte .frage summary:hover { color: var(--tiefe-text); }
.frage__antwort { padding: 0 0 24px; max-width: 70ch; }
.frage__antwort p:last-child { margin-bottom: 0; }

/* ---------- Anfrage: die große Fahrkarte ---------- */
.anfrage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px); background: var(--karte); border-radius: var(--radius-karte); position: relative; }
.anfrage::before, .anfrage::after { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--wasser); right: calc(clamp(240px, 26vw, 340px) - 14px); top: -14px; }
.anfrage::after { top: auto; bottom: -14px; }
.anfrage__form { padding: clamp(24px, 4vw, 52px); min-width: 0; }
.anfrage__form h2 { margin-bottom: 10px; }
.anfrage__form > p { font-size: var(--text-gross); }
.anfrage__abschnitt { border-left: var(--perforation); padding: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 32px); display: grid; gap: 22px; align-content: start; }
.kontakt { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-items: start; }
.kontakt svg { width: 24px; height: 24px; margin-top: 2px; color: var(--tiefe); }
.kontakt b { display: block; font-weight: 600; }
.kontakt a { font-weight: 600; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 28px; }
.field { display: grid; gap: 6px; align-content: start; }
.field--breit { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; }
.field label small, .field legend small { font-weight: 400; color: #6B4B22; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; border: 2px solid var(--nacht); border-radius: 6px; background: var(--ufer); padding: 12px 14px; min-height: 52px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173246' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tiefe); box-shadow: 0 0 0 3px rgba(23, 128, 143, .25); }
.field__hinweis { font-size: .93rem; color: #5A4020; margin: 0; }
.field-error { display: none; margin: 0; font-size: .95rem; font-weight: 600; color: #8A1F11; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #8A1F11; }
.field fieldset { border: 0; margin: 0; padding: 0; }
.einwilligung { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-weight: 400 !important; }
.einwilligung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--nacht); }
.anfrage__los { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 26px; }
.anfrage__los p { margin: 0; font-size: .98rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin: 16px 0 0; }
.form-status.is-error { color: #8A1F11; font-weight: 600; }
#form-wrap.is-sent form { display: none; }
.erfolg { padding: clamp(24px, 4vw, 52px); }
.erfolg h3 { font-size: var(--h2); margin-bottom: 14px; }
.erfolg:focus { outline: none; }

/* ---------- Fußzeile ---------- */
.fusszeile { background: var(--nacht); color: var(--auf-nacht); padding: clamp(56px, 7vw, 96px) 0 32px; margin-top: -2px; }
.fusszeile__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.fusszeile__logo { width: 220px; margin-bottom: 18px; }
.fusszeile p, .fusszeile li { color: var(--auf-nacht-leise); margin: 0 0 6px; }
.fusszeile ul { list-style: none; margin: 0; padding: 0; }
.fusszeile a { color: var(--auf-nacht); }
.fusszeile h2 { font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wasser); margin-bottom: 14px; }
.fusszeile__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--tinte-leise); margin-top: 48px; padding-top: 22px; font-size: .95rem; color: var(--auf-nacht-leise); }
.fusszeile__unten a { color: var(--auf-nacht-leise); }

/* ---------- Unterseiten ---------- */
.groessen { width: 100%; border-collapse: collapse; }
.groessen td { padding: 14px 0; border-top: 1px dashed var(--tinte-leise); font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem); }
.groessen td:last-child { text-align: right; color: var(--wasser); }
.farben { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 8px; }
.farben li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--ufer); font-size: .98rem; }
.farben i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(23, 50, 70, .35); }
.farben-hinweis { font-size: .93rem; color: var(--tinte-leise); }
.preisliste { display: grid; gap: 0; max-width: 760px; margin-bottom: 24px; }
.preisliste div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px dashed var(--tinte-leise); font-size: var(--text-gross); }
.preisliste div:last-child { border-bottom: 1px dashed var(--tinte-leise); }
.preisliste b { color: var(--karte); white-space: nowrap; }
.ideen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.ideen .stueck:nth-child(1) { grid-column: span 5; --seiten: 3 / 4; }
.ideen .stueck:nth-child(2) { grid-column: span 7; --seiten: 16 / 10; }
.ideen .stueck:nth-child(3) { grid-column: span 4; --seiten: 3 / 4; }
.ideen .stueck:nth-child(4) { grid-column: span 4; --seiten: 3 / 4; }
.ideen .stueck:nth-child(5) { grid-column: span 4; align-self: end; }
.rechtzeitig { display: grid; max-width: 860px; }
.rechtzeitig div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 18px 0; border-top: 3px dashed rgba(255, 244, 230, .7); font-size: var(--text-gross); }
.rechtzeitig div:last-child { border-bottom: 3px dashed rgba(255, 244, 230, .7); }
.rechtzeitig b { white-space: nowrap; }
.hafen--nacht { background: var(--nacht); color: var(--auf-nacht); }
.hafen--nacht .kopf__nav a, .hafen--nacht .kopf__menu { color: var(--auf-nacht); border-color: var(--auf-nacht); }
.hafen--nacht .kopf__nav a:hover, .hafen--nacht .kopf__nav a[aria-current="page"] { border-bottom-color: var(--karte); }
.hafen--nacht .hafen__lead { color: var(--auf-nacht-leise); }

.hafen--nacht .anleger::before { background-image: radial-gradient(circle at 20px -4px, var(--nacht) 0 17px, transparent 18px); }
.hafen--nacht .fahrkarte::before { background: var(--nacht); }
.kopf.hafen--nacht .knopf { background: var(--karte); color: var(--nacht); border-color: var(--karte); }
.hafen--nacht .tafel { background: transparent; border: 0; padding-inline: 0; }
.kopf__anfrage { gap: .3em; }
.stueck--zweite { grid-column: 1 / span 7; --seiten: 16 / 10; }
.ladung h2 { font-size: var(--h3); line-height: 1.15; }
.hafen--nacht .hafen__frist { color: var(--karte); font-size: var(--text-gross); font-weight: 600; margin: 14px 16px 0 0; display: inline-block; vertical-align: middle; }
.hafen--nacht .countdown { margin: 14px 0 0; vertical-align: middle; }
.gutschein { background: var(--karte); border-radius: var(--radius-karte); padding: 26px 22px; position: relative; border: 3px dashed var(--sand); }
.gutschein h3 { margin-bottom: 8px; }
.gutschein p { margin: 0 0 16px; color: var(--tinte-leise); }
.rechtstext { padding-block: clamp(48px, 7vw, 96px); max-width: 760px; }
.rechtstext h1 { font-size: var(--h2); margin-bottom: 24px; }
.rechtstext h2 { font-size: var(--h3); margin: 40px 0 10px; }
.rechtstext p, .rechtstext ul { margin: 0 0 14px; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 6px 20px; margin: 0 0 14px; }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0; }
.rechtstext .stand { color: var(--tinte-leise); margin-top: 40px; }
@media (max-width: 520px) { .rechtstext dl { grid-template-columns: 1fr; gap: 0; } .rechtstext dd { margin-bottom: 10px; } }

/* ---------- Einblenden (vorsichtig, Inhalt ist ohne JS sichtbar) ---------- */
.js .auftauchen { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .auftauchen.da { opacity: 1; transform: none; }
.js .route path.wird-gestickt { stroke-dasharray: var(--laenge) var(--laenge); stroke-dashoffset: var(--laenge); animation: route-sticken 2.4s .3s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes route-sticken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .auftauchen { opacity: 1; transform: none; transition: none; }
  .stempel.knallt { animation: none; }
  .js .route path.wird-gestickt { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1080px) {
  .hafen__ufer { grid-template-columns: 1fr; }
  .hafen h1 { max-width: 16ch; }
  .tafel { max-width: 640px; }
  .anleger__innen { grid-template-columns: 1fr; }
  .anleger__rechts { justify-items: start; grid-template-columns: 1fr auto; align-items: end; }
  .ladung { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stueck--gross, .stueck--hoch { grid-column: 1 / -1; grid-row: auto; }
  .stueck--hoch { --seiten: 16 / 10; }
  .stueck--mittel, .stueck--schmal { grid-column: span 3; }
  .muster, .letzte, .zwei-spalten { grid-template-columns: 1fr; }
  .zwei-spalten--umgekehrt > :first-child { order: 0; }
  .ideen .stueck:nth-child(n) { grid-column: span 6; }
  .ideen .stueck:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --ufer-anteil: 34%; --fahrkarte-drehung: -0.8deg; }
  .fahrkarte { grid-template-columns: 1fr; }
  .fahrkarte::before, .fahrkarte::after { display: none; }
  .fahrkarte__abschnitt { border-left: 0; border-top: var(--perforation); flex-direction: row; text-align: left; justify-content: flex-start; }
  .stempel { width: 96px; flex: none; font-size: 1rem; }
  .fahrkarte__los { width: 100%; justify-content: center; }
  .fahrkarte__reihe { grid-template-columns: 1fr; }
  .fahrkarte__reihe .fahrkarte__weg { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .stueck--mittel, .stueck--schmal { grid-column: 1 / -1; }
  .weitere { grid-template-columns: 1fr; }
  .weitere > div + div { border-left: 0; padding-left: 0; border-top: var(--perforation); margin-top: 22px; }
  .muster__bilder .bild:last-child { margin-top: 28px; }
  .station { grid-template-columns: 52px minmax(0, 1fr); }
  .station__nr { width: 52px; height: 52px; font-size: 1.3rem; }
  .fahrt::before, .fahrt::after { left: 24px; }
  .station__zeit { grid-column: 2; padding-top: 0; font-size: 1.15rem; }
  .fahrt__hinweis { margin-left: 0; }
  .anfrage { grid-template-columns: 1fr; }
  .anfrage::before, .anfrage::after { display: none; }
  .anfrage__abschnitt { border-left: 0; border-top: var(--perforation); }
  .felder { grid-template-columns: 1fr; }
  .fusszeile__raster { grid-template-columns: 1fr; }
  .ideen .stueck:nth-child(n) { grid-column: 1 / -1; }
  .anleger__rechts { grid-template-columns: 1fr; justify-items: end; }
  /* Die Fahrkarte trägt dieselben Stücke mit Preisen und den Stempel „ca. 24 h“: auf dem Handy reicht sie */
  .hafen .tafel { display: none; }
  .stueck .bild img { aspect-ratio: 4 / 3; }
}
.nowrap { white-space: nowrap; }

@media (max-width: 420px) { .kopf__logo { width: 140px; } .kopf__menu { padding: 8px 12px; } }

/* Desktop: Fahrkarte rückt in den freien Streifen unter der Einleitung, Uferlinie quer durch die Karte */
@media (min-width: 1081px) {
  :root { --fahrkarte-breite: 780px; --ufer-anteil: 36%; }
  .anleger { margin-top: calc(-1 * var(--anleger-hoch, clamp(60px, 7vw, 96px))); }
  .hafen--nacht .anleger { margin-top: 0; } /* Weihnachten: linke Spalte ist höher, sonst überdeckt die Karte die Frist */
}
.nur-handy { display: none; }
@media (max-width: 720px) {
  .nur-handy { display: block; }
  .hafen--nacht .anleger { --ufer-anteil: 18%; }
  .hafen--nacht .hafen__frist { margin-top: 10px; }
  .hafen--nacht .countdown { margin-top: 8px; padding: 4px 12px; font-size: .95rem; }
}
/* Feinjustierung der Person aus dem Regler-Panel (gespeichert 2026-10-24), fest übernommen.
   Gilt ab Desktop-Breite, dort wurde sie eingestellt. */
@media (min-width: 1081px) {
  .hafen {
    --hafen-oben: 114px;
    --h1-groesse: 66px;
    --h1-breite: 20ch;
    --fahrkarte-breite: 830px;
    --fahrkarte-drehung: -4.75deg;
    --anleger-hoch: 75px;
    --ufer-anteil: 43%;
    --insel-groesse: 234px;
  }
}

/* Tafel liegt über der gedrehten Fahrkarte, damit deren Ecke nie Text der Tafel verdeckt */
.hafen__ufer { position: relative; z-index: 3; pointer-events: none; }
.hafen__ufer > * { pointer-events: auto; }