/* wohnung-kaufen-neuss.de — Motiv „Das Hafenbecken“: Kaimauern als Linienzug, Wasser in hellem Blaugrün, Poller,
   ein gelbes Schiff. Der Hafenkanal läuft am linken Rand durch die ganze Seite, jeder Abschnitt hat einen Liegeplatz.
   Schriften lokal (SIL OFL 1.1), keine Abrufe bei Dritten. Eine Hintergrundfarbe für die ganze Seite (iPhone-Safari).
   Keine style-Attribute im HTML: alles, was variiert, kommt über Klassen oder per Skript gesetzte Variablen. */

@font-face { font-family: "Schibsted"; src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farben */
  --grund: #EEF3F5;          /* Seite = Land und Papier des Hafenplans */
  --wasser: #D6E7EC;         /* Wasser in Becken und Kanal */
  --wasser-tief: #BBD8E0;    /* aktives Becken */
  --kielwasser: #9CC9D4;     /* befahrenes Wasser im Kanal */
  --rhein: #C9DFE6;
  --tinte: #12303F;          /* Kaimauer, Schrift */
  --tinte-2: #3B5866;        /* Nebentext (AA auf Grund und Karte) */
  --becken: #1F7A8C;         /* Linien, Knöpfe */
  --becken-text: #176676;    /* Akzent als Schrift (AA) */
  --signal: #E3B23C;         /* Schiff, belegte Poller */
  --linie: #B9CCD4;          /* Haarlinien */
  --karte: #F8FBFC;
  --marker: #F5D86A;         /* gelbe Stellen (offen) */
  /* Maße */
  --kopf-h: 4.25rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --kanal-x: .6rem;          /* Kanal links, gemessen ab dem Rand der Hülle */
  --kanal-b: 1.15rem;
  --einzug: 4.4rem;          /* Inhalt rechts vom Kanal */
  --pt: clamp(2.2rem, 5vw, 3.8rem);
  --mauer: 1.5px;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Schibsted", "Helvetica Neue", Arial, sans-serif;
  --schatten: 0 1px 0 rgba(18, 48, 63, .05), 0 16px 34px -24px rgba(18, 48, 63, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); background: var(--grund); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1.0625rem/1.66 var(--sans); font-kerning: normal; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--tinte); text-decoration-color: var(--becken); text-decoration-thickness: .085em; text-underline-offset: .2em; }
a:hover { color: var(--becken-text); text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--becken); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--signal); color: var(--tinte); }

h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -.022em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); letter-spacing: -.038em; line-height: 1.02; }
h2 { font-size: clamp(1.55rem, 2.7vw, 2.2rem); }
h3 { font-size: 1.22rem; letter-spacing: -.012em; }
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: .45em; }
strong, b { font-weight: 700; }
.huelle { max-width: 74rem; margin: 0 auto; padding: 0 var(--rand); }
.lesen { max-width: 43rem; }
.leise { color: var(--tinte-2); font-size: .95rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font: 500 .875rem/1.4 var(--mono); letter-spacing: .01em; color: var(--becken-text); margin: 0 0 .7rem; }
.offen { background: var(--marker); color: var(--tinte); padding: .05em .3em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.sprung { position: absolute; left: -999px; top: .5rem; background: var(--tinte); color: var(--karte); padding: .6rem 1rem; z-index: 100; }
.sprung:focus { left: 1rem; }
.entwurf { background: var(--marker); color: var(--tinte); font: 500 .875rem/1.4 var(--mono); text-align: center; padding: .45rem var(--rand); }

/* ---------- Kopf: Kaikante mit Pollern ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--grund); border-bottom: var(--mauer) solid var(--tinte); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--kopf-h); }
.marke { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; text-decoration: none; font: 500 1rem/1.1 var(--sans); color: var(--tinte); }
.marke:hover { color: var(--tinte); }
.marke b { font-weight: 700; }
.marke-zeichen { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .55rem; background: var(--tinte) url("/assets/img/zeichen.svg") center / cover no-repeat; }
.menue { display: flex; align-items: center; gap: .25rem 1.35rem; }
.menue a { text-decoration: none; font-weight: 500; font-size: 1rem; padding: .35rem 0; white-space: nowrap; }
.menue a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: .4em; }
.menue-schalter { display: none; }
.fortschritt { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--mauer)); height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--becken) 0 calc(var(--fortschritt, 0) * 100%), transparent 0); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.3rem; border-radius: .6rem;
  background: var(--tinte); color: var(--karte); font-weight: 700; text-decoration: none; border: 2px solid var(--tinte); transition: background .2s, border-color .2s, color .2s; }
.knopf:hover { background: var(--becken); border-color: var(--becken); color: #fff; }
.knopf.hell { background: transparent; color: var(--tinte); }
.knopf.hell:hover { background: var(--tinte); color: var(--karte); border-color: var(--tinte); }
.knopf.klein { min-height: 2.6rem; padding: .45rem 1.05rem; font-size: .95rem; }
.menue .knopf.klein, .menue .knopf.klein:hover { color: var(--karte); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .7rem; }
.aufruf { margin: 2rem 0 0; }
.aufruf .leise a { font-weight: 700; color: var(--tinte); }

/* ---------- Der Hafenkanal am linken Rand ---------- */
.abschnitt > .huelle, .seitenkopf > .huelle, .buehne > .huelle, main > .huelle { padding-left: calc(var(--rand) + var(--einzug)); }
.abschnitt, .seitenkopf, .buehne, main > .huelle { position: relative; }
.abschnitt::before, .seitenkopf::before, .buehne::before, main > .huelle::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--kanal-b); z-index: 0;
  left: calc(max(0px, (100% - 74rem) / 2) + var(--rand) + var(--kanal-x));
  border-left: var(--mauer) solid var(--tinte); border-right: var(--mauer) solid var(--tinte);
  background: linear-gradient(to bottom, var(--kielwasser) 0 calc(var(--gefahren, 0) * 100%), var(--wasser) 0); }
main > .huelle::before { left: calc(var(--rand) + var(--kanal-x)); }
main > .huelle { display: flow-root; }
/* Hafeneinfahrt: der Kanal beginnt im Seitenkopf mit einem runden Kopf */
.seitenkopf::before, .buehne::before { top: clamp(2rem, 6vw, 4.2rem); border-top: var(--mauer) solid var(--tinte); border-radius: 999px 999px 0 0; }
.abschnitt > .huelle, .seitenkopf > .huelle, .buehne > .huelle { position: relative; z-index: 1; }
/* Liegeplatz: Bucht in der rechten Kanalwand auf Höhe der ersten Überschrift, mit Signallicht */
.abschnitt::after {
  content: ""; position: absolute; z-index: 0; top: calc(var(--pt) + .2rem); height: 1.7rem; width: 1.55rem;
  left: calc(max(0px, (100% - 74rem) / 2) + var(--rand) + var(--kanal-x) + var(--kanal-b) - var(--mauer));
  border: var(--mauer) solid var(--tinte); border-left: 0; border-radius: 0 .55rem .55rem 0;
  background: radial-gradient(circle at calc(100% - .45rem) 50%, var(--licht, var(--signal)) 0 .22rem, transparent .26rem), var(--wasser); }
html.bewegt .abschnitt:not(.angelegt)::after { --licht: var(--linie); }
html.bewegt .abschnitt.angelegt::after { transition: background .4s; }
/* Überschrift legt an: kurzer Stoß an den Fender, dann Ruhe */
html.bewegt .abschnitt > .huelle > h2:first-child { transition: transform .9s cubic-bezier(.25, 1.6, .45, 1); }
html.bewegt .abschnitt:not(.angelegt) > .huelle > h2:first-child { transform: translateX(-.9rem); }

/* Lesebootchen (per Skript eingefügt), fährt im Kanal mit */
.boot { position: fixed; z-index: 40; top: 46vh; left: 0; width: 12px; height: 30px; margin-left: -6px; pointer-events: none; opacity: 0; transition: opacity .35s; }
.boot.da { opacity: 1; }
.boot-dreh { display: block; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.45, 0, .2, 1); }
.boot.hoch .boot-dreh { transform: rotate(180deg); }
.boot svg { display: block; width: 100%; height: 100%; }
.boot .rumpf { fill: var(--signal); stroke: var(--tinte); stroke-width: 1.4; }
.boot .aufbau { fill: var(--tinte); }

/* ---------- Startbühne mit Hafenplan ---------- */
.buehne { padding: clamp(2rem, 6vw, 4.2rem) 0 clamp(2.4rem, 5vw, 4rem); }
.buehne .huelle { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.buehne h1 { margin-bottom: .32em; max-width: 12ch; font-size: clamp(2.3rem, 4.7vw, 4rem); }
.buehne .unterzeile { font-size: clamp(1.1rem, 1.7vw, 1.28rem); }

.hafenplan { position: relative; padding: 0 0 2.6rem 3.6rem; margin-top: .4rem; }
.rhein { position: absolute; left: 0; top: -1.2rem; bottom: 0; width: 2.4rem; border-right: var(--mauer) solid var(--tinte);
  background: repeating-linear-gradient(180deg, var(--becken) 0 .7rem, transparent .7rem 1.9rem) 30% 0 / 1.5px 100% no-repeat,
              repeating-linear-gradient(180deg, var(--becken) 0 .7rem, transparent .7rem 1.9rem) 72% .9rem / 1.5px 100% no-repeat, var(--rhein); }
.rhein span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font: 500 .875rem/1 var(--mono); color: var(--tinte-2); background: var(--rhein); padding: .2rem .45rem; letter-spacing: .12em; }
.becken-liste { list-style: none; margin: 0; padding: 0 0 0 1.35rem; position: relative; }
/* Hafenkanal */
.becken-liste::before { content: ""; position: absolute; left: 0; top: -.6rem; bottom: -2.6rem; width: 1.35rem; background: var(--wasser);
  border-left: var(--mauer) solid var(--tinte); border-right: var(--mauer) solid var(--tinte); border-top: var(--mauer) solid var(--tinte); border-radius: .5rem .5rem 0 0; }
/* Mündung in den Rhein */
.muendung { position: absolute; left: 2.4rem; bottom: 0; width: calc(1.2rem + 1.35rem + var(--mauer)); height: 1.6rem; background: var(--wasser);
  border-bottom: var(--mauer) solid var(--tinte); border-right: var(--mauer) solid var(--tinte); border-radius: 0 0 .6rem 0; z-index: 1; }
.muendung::before { content: ""; position: absolute; left: 0; top: 0; width: 1.2rem; border-top: var(--mauer) solid var(--tinte); }
.becken { position: relative; margin: 0 0 1.05rem calc(-1 * var(--mauer)); z-index: 2; width: var(--l, 100%); }
.b1 { --l: 100%; } .b2 { --l: 92%; } .b3 { --l: 97%; } .b4 { --l: 84%; } .b5 { --l: 89%; } .b6 { --l: 80%; }
/* Poller auf der Kaikante über jedem Becken */
.becken::before { content: ""; position: absolute; left: 1rem; right: 2rem; top: -.62rem; height: 6px;
  background: radial-gradient(circle, var(--tinte) 0 2.4px, transparent 2.9px) 0 0 / 2.2rem 6px repeat-x; }
.becken-wasser { display: grid; gap: .1rem; min-height: 3.7rem; padding: .62rem 1.6rem .62rem 1rem; background: var(--wasser); text-decoration: none;
  border: var(--mauer) solid var(--tinte); border-left: 0; border-radius: 0 1.85rem 1.85rem 0; color: var(--tinte); transition: background .25s; }
.becken-wasser b { font-size: 1.04rem; line-height: 1.25; }
.becken-wasser span { font-size: .9375rem; line-height: 1.35; color: var(--tinte-2); }
a.becken-wasser:hover { background: var(--wasser-tief); color: var(--tinte); }
a.becken-wasser:hover b { text-decoration: underline; text-decoration-color: var(--becken); text-underline-offset: .2em; }
.ist-hier .becken-wasser { background: var(--wasser-tief); padding-right: 5.2rem; }
.ist-hier .becken-wasser span { color: var(--becken-text); font-family: var(--mono); font-size: .875rem; }
.ist-hier.angelegt::before, html:not(.bewegt) .ist-hier::before { background: radial-gradient(circle, var(--signal) 0 3px, transparent 3.4px) 0 0 / 2.2rem 6px repeat-x; }
.schiff { position: absolute; right: 1.6rem; top: 50%; width: 2.75rem; margin-top: -.56rem; line-height: 0; z-index: 3; }
.schiff-form { width: 100%; height: auto; overflow: visible; }
.schiff-form .rumpf, .schiff-svg .rumpf { fill: var(--signal); stroke: var(--tinte); stroke-width: 1.5; }
.schiff-form .aufbau, .schiff-svg .aufbau { fill: var(--tinte); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding: clamp(2rem, 6vw, 4.2rem) 0 1.4rem; }
.seitenkopf .huelle { display: grid; gap: 1.6rem 3.5rem; }
@media (min-width: 960px) { .seitenkopf .huelle:has(> .motiv), .seitenkopf .huelle:has(> .ansprech) { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); align-items: start; } }
.seitenkopf h1 { max-width: 18ch; font-size: clamp(2.15rem, 4.6vw, 3.7rem); }
.pfad { font: 500 .9rem/1.4 var(--mono); color: var(--tinte-2); margin-bottom: 1.3rem; }
.pfad a { color: var(--tinte-2); }
.unterzeile { font-size: clamp(1.08rem, 1.55vw, 1.22rem); color: var(--tinte-2); max-width: 42rem; }
.kurz { position: relative; max-width: 45rem; margin: 1.6rem 0 1.1rem; padding: 1.1rem 1.25rem 1.05rem; background: var(--karte); border: var(--mauer) solid var(--tinte); border-radius: .35rem 1.2rem 1.2rem .35rem; }
.kurz::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: .4rem; background: var(--becken); border-radius: .35rem 0 0 .35rem; }
.kurz p { margin: 0; font-size: 1.07rem; }
.kurz .kurz-marke { font: 600 .875rem/1 var(--mono); color: var(--becken-text); margin-bottom: .55rem; }
.stand { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font: 400 .875rem/1.45 var(--mono); color: var(--tinte-2); margin: 0; }
.motiv { min-width: 0; }
.hafen-kopf { margin: .4rem 0 0; }
.hafen-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hafen-svg .rhein-flaeche { fill: var(--rhein); }
.hafen-svg .ufer { fill: none; stroke: var(--tinte); stroke-width: 1.5; }
.hafen-svg .fluss { fill: none; stroke: var(--becken); stroke-width: 1.3; stroke-dasharray: 9 13; stroke-dashoffset: var(--strom, 0); }
.hafen-svg .rhein-name { font: 500 14px/1 var(--mono); fill: var(--tinte-2); letter-spacing: .14em; }
.hafen-svg .hafen-wasser { fill: var(--wasser); }
.hafen-svg .becken-aktiv { fill: var(--wasser-tief); }
.hafen-svg .kaimauer { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; }
.hafen-svg .poller { fill: var(--tinte); }
.hafen-svg .poller.belegt { fill: var(--signal); stroke: var(--tinte); stroke-width: 1; }
.hafen-svg .leine { stroke: var(--tinte); stroke-width: 1; }
.motiv .aufruf { margin-top: 1.4rem; }

/* ---------- Abschnitte und Bausteine ---------- */
.abschnitt { padding: var(--pt) 0; }
.abschnitt h2 { max-width: 30ch; }
.abschnitt h3 { margin-top: 1.6rem; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 2.8rem); }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.zwei, .drei { margin-bottom: 1.6rem; }
.kachel { background: var(--karte); border: var(--mauer) solid var(--linie); border-top: 3px solid var(--tinte); border-radius: 0 0 .8rem .8rem; padding: 1.15rem 1.2rem 1rem; }
.kachel h3 { margin: 0 0 .4em; }
.kachel p:last-child { margin-bottom: 0; }
.zahl-gross { display: block; font: 600 clamp(1.9rem, 4vw, 2.7rem)/1 var(--mono); color: var(--becken-text); letter-spacing: -.04em; margin-bottom: .45rem; }
.merk { padding-left: 1.2rem; }
.merk li::marker { color: var(--becken); }
.hinweis { background: var(--karte); border: var(--mauer) dashed var(--becken); border-radius: .8rem; padding: 1rem 1.2rem; margin: 1.4rem 0; }
.hinweis p:last-child { margin: 0; }
.zitat { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--becken); font-size: 1.05rem; }
.zitat footer { font: 400 .875rem/1.4 var(--mono); color: var(--tinte-2); margin-top: .4rem; }

/* Tabellen: Kopf in Tinte, Zeilen wie Liegeplatzlisten */
.tabelle-huelle { overflow-x: auto; margin: 1.4rem 0; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); font-size: 1rem; border: var(--mauer) solid var(--tinte); }
.tabelle caption { caption-side: bottom; text-align: left; padding: .7rem .1rem 0; font-size: .9rem; color: var(--tinte-2); }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: .75rem .95rem; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font: 600 .875rem/1.3 var(--mono); background: var(--tinte); color: var(--karte); }
.tabelle tbody th { font-weight: 700; }
.tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }
.tabelle td.zahl, .tabelle .zahl { font-family: var(--mono); white-space: nowrap; }

/* Fragen: Reihen an der Kaikante statt schwebender Karten */
.fragen { margin: 1.2rem 0; border-top: var(--mauer) solid var(--tinte); max-width: 46rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { -webkit-tap-highlight-color: transparent; cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 0; font-weight: 700; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: .55rem; top: 1.35rem; width: .62rem; height: .62rem; border-right: 2px solid var(--becken); border-bottom: 2px solid var(--becken); transform: rotate(45deg); transition: transform .25s; }
.fragen details[open] summary::after { transform: translateY(.3rem) rotate(-135deg); }
.fragen summary:hover { color: var(--becken-text); }
.fragen .antwort { padding: 0 0 1.15rem; }
.fragen .antwort p { margin: 0; }
.faq-verzeichnis { font-size: 1rem; }
.faq-gruppe + .faq-gruppe { padding-top: 0; }

/* Selbstcheck und Rechner (falls genutzt) */
.check { background: var(--karte); border: var(--mauer) solid var(--tinte); border-radius: 1rem; padding: clamp(1.1rem, 4vw, 2rem); margin: 1.5rem 0; }
.check fieldset { border: 0; border-bottom: 1px dotted var(--linie); margin: 0; padding: .9rem 0 1rem; }
.check legend { font-weight: 700; padding: 0; float: left; width: 100%; margin-bottom: .6rem; }
.wahl { display: flex; flex-wrap: wrap; gap: .55rem; clear: both; }
.wahl label { -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .95rem; border: var(--mauer) solid var(--linie); border-radius: .6rem; cursor: pointer; font-weight: 500; background: var(--grund); }
.wahl input { width: 1.1rem; height: 1.1rem; accent-color: var(--becken); margin: 0; }
.wahl label:has(input:checked) { border-color: var(--tinte); background: var(--wasser); }
.befund { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: .8rem; background: var(--grund); border-left: 6px solid var(--linie); }
.befund p { margin: 0 0 .5rem; }

/* Weiterlesen: Anlegestellen in Reihe */
.weiter-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.6rem 1.4rem; }
.weiter-liste li { margin: 0; display: grid; gap: .3rem; padding-top: .9rem; border-top: 3px solid var(--tinte); position: relative; }
.weiter-liste li::before { content: ""; position: absolute; top: -.5rem; left: 0; width: 1.6rem; height: .5rem; background: radial-gradient(circle at .35rem 50%, var(--signal) 0 .2rem, transparent .24rem); }
.weiter-liste a { font-weight: 700; font-size: 1.08rem; }
.weiter-liste span { color: var(--tinte-2); font-size: .97rem; }
.quellen { font-size: .92rem; color: var(--tinte-2); border-top: 1px solid var(--linie); padding-top: 1rem; margin-top: 2.2rem; max-width: 46rem; }
.quellen a { color: var(--tinte-2); }
.glossar dt { font-weight: 700; font-size: 1.15rem; margin-top: 1.4rem; }
.glossar dd { margin: .3rem 0 0; max-width: 45rem; }

/* Ansprechpartner */
.ansprech { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: start; padding: 1.25rem; background: var(--karte); border: var(--mauer) solid var(--tinte); border-radius: 1rem; max-width: 40rem; }
.ansprech img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--wasser); }
.ansprech p { margin: 0 0 .35rem; }
.ansprech-name { font-weight: 700; font-size: 1.125rem; }
.ansprech-rolle { font: 400 .9rem/1.4 var(--mono); color: var(--tinte-2); }
.ansprech-tel { font-weight: 700; }
.querlinks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- Anfrageformular: eine Kaimauer mit Pollern als Oberkante ---------- */
.anfrage-karte { position: relative; background: var(--karte); border: var(--mauer) solid var(--tinte); border-top: 5px solid var(--tinte); border-radius: 0 0 1.1rem 1.1rem;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.2rem, 4vw, 3rem); padding: clamp(1.3rem, 4vw, 2.5rem); }
.anfrage-karte::before { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: -.85rem; height: 7px;
  background: radial-gradient(circle, var(--tinte) 0 2.6px, transparent 3.1px) 0 0 / 2.4rem 7px repeat-x; }
.anfrage-kopf h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }
.anfrage .feld { margin: 0 0 1rem; }
.anfrage label, .anfrage legend { display: block; font-weight: 700; margin-bottom: .35rem; }
.anfrage .wahl label { display: inline-flex; font-weight: 500; margin: 0; }
.anfrage fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.anfrage input[type=text], .anfrage input[type=tel], .anfrage input[type=email], .anfrage textarea, .anfrage select {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--tinte); background: var(--grund); border: var(--mauer) solid #8FA7B2; border-radius: .55rem; padding: .72rem .9rem; min-height: 3rem; }
.anfrage select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background: linear-gradient(45deg, transparent 50%, var(--tinte) 50%) calc(100% - 1.15rem) 52% / .4rem .4rem no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--tinte) 50%) calc(100% - .76rem) 52% / .4rem .4rem no-repeat, var(--grund); }
.anfrage input:focus, .anfrage textarea:focus, .anfrage select:focus { border-color: var(--tinte); outline: none; box-shadow: 0 0 0 3px var(--wasser-tief); }
.anfrage .feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.anfrage .einwilligung label { font-weight: 400; display: grid; grid-template-columns: 1.25rem 1fr; gap: .7rem; align-items: start; font-size: .95rem; }
.anfrage .einwilligung input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--becken); }
.anfrage button.knopf { cursor: pointer; font-size: 1.05rem; font-family: var(--sans); }
.anfrage .versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status[data-stand="fehler"] { color: #9B1C1C; font-weight: 600; }
.danach { list-style: none; padding: 0; margin: 1.4rem 0 0; counter-reset: d; display: grid; gap: 1rem; position: relative; }
.danach::before { content: ""; position: absolute; left: 1.1rem; top: 1.2rem; bottom: 1.2rem; border-left: 2px dashed var(--becken); }
.danach li { counter-increment: d; display: grid; grid-template-columns: 2.3rem 1fr; gap: .15rem .8rem; margin: 0; position: relative; }
.danach li::before { content: counter(d); grid-row: span 2; font: 600 .95rem/2.2rem var(--mono); color: var(--tinte); background: var(--karte); border: var(--mauer) solid var(--tinte); border-radius: 50%; width: 2.3rem; height: 2.3rem; text-align: center; }
.danach b { display: block; }
.danach span { color: var(--tinte-2); font-size: .97rem; }

/* ---------- Fuß: Kaikante ---------- */
.fuss { position: relative; border-top: var(--mauer) solid var(--tinte); padding: 3rem 0 2.5rem; margin-top: 2.4rem; font-size: .97rem; background: var(--grund); }
.fuss::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: 6px; max-width: 74rem; margin: 0 auto;
  background: radial-gradient(circle, var(--tinte) 0 2.4px, transparent 2.9px) var(--rand) 0 / 2.6rem 6px repeat-x; }
.fuss .spalten { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: .7rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .35rem; }
.fuss .klein { margin-top: 2rem; font-size: .9rem; color: var(--tinte-2); max-width: 60rem; }

/* ---------- Bewegung: nur mit html.bewegt; ohne JavaScript oder bei reduzierter Bewegung gilt der Endzustand ---------- */
html.bewegt .hafen-svg .kaimauer { animation: mauer-zeichnen 2.2s cubic-bezier(.5, 0, .2, 1) .15s both; }
html.bewegt .hafen-svg .schiff-svg { animation: schiff-legt-an 1.6s cubic-bezier(.2, .8, .3, 1) 1.2s both; }
html.bewegt .hafen-svg .leine, html.bewegt .hafen-svg .poller.belegt { animation: leine-fest .4s ease-out 2.6s both; }
@keyframes mauer-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes schiff-legt-an { from { opacity: 0; translate: -140px 0; } 15% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes leine-fest { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.bewegt .abschnitt > .huelle > h2:first-child { transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .boot { display: none; }
}

/* ---------- Feste Aufrufleiste am Handy ---------- */
.leiste-unten { display: none; }
@media (max-width: 980px) {
  .leiste-unten { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--grund); border-top: var(--mauer) solid var(--tinte); transform: translateY(110%); transition: transform .3s ease; }
  .leiste-unten .knopf { flex: 1; min-height: 2.9rem; padding: .5rem .8rem; }
  .leiste-unten .knopf.hell { flex: 0 0 auto; }
  html.leiste-da .leiste-unten { transform: none; }
  html.leiste-da body { padding-bottom: 4.6rem; }
}

/* ---------- Breiten ---------- */
@media (max-width: 1100px) {
  .fuss .spalten { grid-template-columns: 1fr 1fr; }
  .drei { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  :root { --kopf-h: 3.85rem; --einzug: 3.2rem; --kanal-x: .35rem; --kanal-b: 1rem; }
  .menue-schalter { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border: 2px solid var(--tinte); border-radius: .6rem; background: transparent; color: var(--tinte); font: 600 1rem/1 var(--sans); cursor: pointer; }
  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: var(--mauer) solid var(--tinte); flex-direction: column; align-items: stretch; padding: .5rem var(--rand) 1.2rem; gap: 0; }
  .menue.offen-menue { display: flex; }
  .menue a { padding: .8rem 0; border-bottom: 1px solid var(--linie); font-size: 1.08rem; }
  .menue .knopf.klein { margin-top: .9rem; min-height: 3rem; }
  .buehne .huelle { grid-template-columns: 1fr; }
  .buehne h1 { max-width: 14ch; }
  .zwei { grid-template-columns: 1fr; }
  .seitenkopf .huelle:has(> .motiv) { grid-template-columns: 1fr; }
  .hafen-kopf { max-width: 34rem; }
}
@media (max-width: 640px) {
  :root { --einzug: 1.05rem; --kanal-x: -.62rem; --kanal-b: .74rem; --pt: 2.2rem; }
  body { font-size: 1.0625rem; }
  h1 { font-size: clamp(2.05rem, 9.4vw, 2.6rem); }
  .seitenkopf h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
  .drei { grid-template-columns: 1fr; }
  .fuss .spalten { grid-template-columns: 1fr; }
  .marke { gap: .55rem; font-size: .95rem; }
  .marke-zeichen { width: 2rem; height: 2rem; }
  .abschnitt::after { width: .8rem; height: 1.3rem; border-radius: 0 .4rem .4rem 0;
    background: radial-gradient(circle at calc(100% - .32rem) 50%, var(--licht, var(--signal)) 0 .17rem, transparent .2rem), var(--wasser); }
  .boot { width: 8px; height: 20px; margin-left: -4px; }
  html.bewegt .abschnitt:not(.angelegt) > .huelle > h2:first-child { transform: translateX(-.45rem); }
  .hafenplan { padding-left: 2.9rem; }
  .rhein { width: 1.9rem; }
  .muendung { left: 1.9rem; width: calc(1rem + 1.35rem + var(--mauer)); }
  .muendung::before { width: 1rem; }
  .becken-wasser { padding-right: 1.15rem; min-height: 3.5rem; }
  .ist-hier .becken-wasser { padding-right: 4.3rem; }
  .schiff { right: 1.05rem; width: 2.4rem; }
  .b1, .b2, .b3, .b4, .b5, .b6 { --l: 100%; }
  .b2 { margin-right: 4%; } .b4 { margin-right: 9%; } .b6 { margin-right: 6%; }
  .becken { width: auto; }
  .anfrage-karte { padding: 1.2rem 1rem 1.3rem; }
  .ansprech { grid-template-columns: 72px 1fr; padding: 1rem; }
  .ansprech img { width: 72px; height: 72px; }
  .tabelle.stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle.stapel, .tabelle.stapel tbody, .tabelle.stapel tr, .tabelle.stapel th, .tabelle.stapel td { display: block; width: 100%; }
  .tabelle.stapel { display: flex !important; flex-direction: column; }
  .tabelle.stapel tr { border-bottom: 2px solid var(--linie); padding: .4rem 0; }
  .tabelle.stapel tbody th { padding-bottom: .2rem; border: 0; }
  .tabelle.stapel td { border: 0; padding-top: .2rem; padding-bottom: .5rem; }
  .tabelle.stapel caption { order: 2; display: block; width: 100%; padding: .7rem .95rem .2rem; }
  .tabelle.stapel td::before { content: attr(data-spalte); display: block; font: 600 .875rem/1.3 var(--mono); color: var(--tinte-2); margin-bottom: .1rem; }
  .knoepfe .knopf { width: 100%; }
}
@media (max-width: 860px) { .anfrage-karte { grid-template-columns: 1fr; } .anfrage .feld-zeile { grid-template-columns: 1fr; } }

/* === Cover-Foto (Startseite, 14.11.2026) === */
.cover-foto { position: relative; margin: 0; }
.cover-foto img { display: block; width: 100%; height: clamp(190px, 34vw, 470px); object-fit: cover; object-position: center; }
.cover-foto figcaption { position: absolute; right: .5rem; bottom: .4rem; max-width: calc(100% - 1rem); padding: .15rem .5rem; border-radius: 3px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .875rem; line-height: 1.4; }
.cover-foto figcaption a { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
@media (max-width: 640px) { .cover-foto figcaption { position: static; max-width: none; padding: .3rem 1rem 0; border-radius: 0; background: none; color: inherit; text-align: right; } .cover-foto figcaption a { color: inherit; text-decoration-color: currentColor; } }
/* === Ende Cover-Foto === */