/* Abschnitte unter dem Hero: 02 Vertrauensleiste, 03 Ausgewählte Arbeiten, 04 Was wir machen (Entwurf, 20.10.2026).
   Der Stil des Heros setzt sich fort: Nacht, Sand als Schrift und Linie, Sonne nur für Handlung und Zustand, Linienraster mit
   Plus an den Knoten, Kachelecken wie die Tafeln, die Seekarte als Bildwelt. Werte aus hero-varianten/basis.css und DESIGN.md.
   Die Teilung 7/12 zu 5/12 der Kopfleiste läuft als Senkrechte durch die Fälle und die Flächen weiter.
   Bewegung: hinein langsam und weich (Monolog, Paper Tiger), hinaus kurz; scrollgekoppelte Werte schreibt das Skript direkt an
   das bewegte Element, nicht als vererbte Variable. */
/* Werte (--zl, --leise, --sanft …), .abschnitt, .knoten und .nur-sr stehen seit 25.10. in quelle/rahmen.css */
/* eine Sprache für Links: Linie lädt beim Zeigen unter dem Text von links, der Pfeil geht ein Stück mit */
.fall-link > span:first-child, .mehr > span:first-child { position: relative; padding: 6px 0; }
.fall-link > span:first-child::after, .mehr > span:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
                                       transform: scaleX(0); transform-origin: left; transition: transform var(--raus); }
.fall-link svg, .mehr svg { width: 14px; height: 14px; flex: none; transition: translate .25s var(--aus); }

/* ========== 02 Vertrauensleiste ========== */
.vertrauen { padding-top: clamp(80px, 4vw + 48px, 128px); }
.vertrauen-kopf { display: flex; align-items: center; margin-bottom: 20px; }
.etikett { margin: 0; font: 500 15px/1.2 var(--schrift); letter-spacing: -.005em; color: var(--sand); }
.logos-rahmen { position: relative; isolation: isolate; }
.js .logos-rahmen { clip-path: inset(-12px 100% -12px -12px); transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1); }   /* das Raster zeichnet sich von links */
.js .logos-rahmen.da { clip-path: inset(-12px -12px -12px -12px); }
/* Licht unter dem Zeiger: eine eigene Ebene unter der Liste. Der Grund der Liste ist nur zu 10 % deckend, die Kacheln decken ganz:
   so leuchtet das Licht nur in den 1-px-Fugen (Terminals Kantenlicht), in Sand wie das Raster im Hero. */
.logos-licht { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }   /* nur unter dem Raster, nicht darüber hinaus */
.logos-licht i { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
                 background: radial-gradient(closest-side, rgb(var(--vg-k) / .62), rgb(var(--vg-k) / .2) 42%, rgb(var(--vg-k) / 0));
                 opacity: 0; transition: opacity .5s var(--aus); will-change: transform; }
.logos-rahmen.hell .logos-licht i { opacity: 1; }
/* Die Fuge ist mindestens ein Bildschirmpixel breit (--fuge setzt abschnitte.js): herausgezoomt (z. B. 80 %) war 1 px schmaler als ein Pixel,
   und Chrome ließ einzelne Linien je nach Lage weg (29.10., Jonah: „bei den mittleren Logos fehlen die senkrechten Striche“). */
.logos { --spalten: var(--sp-g, 8); position: relative; z-index: 1; list-style: none; margin: 0; padding: var(--fuge, 1px); display: grid; gap: var(--fuge, 1px);
         grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); background: var(--zl); }
.logo { position: relative; aspect-ratio: 1; background: var(--nacht); }
.logo.leer { display: none; }
.logo.leer.l8 { display: block; }   /* füllt die letzte Reihe (Vertrauen.astro) */
.logo img { width: 100%; height: 100%; object-fit: contain; opacity: .64; }
.js .logo img { opacity: 0; translate: 0 14px; transition: opacity .6s var(--aus) var(--v, 0s), translate .7s var(--aus) var(--v, 0s); }
.js .logos-rahmen.da .logo img { opacity: .64; translate: 0 0; }
.logos-rahmen .plus { z-index: 2; transition: color .3s var(--aus), scale .3s var(--aus); }

/* ========== 03 Ausgewählte Arbeiten ========== */
.faelle { list-style: none; margin: 0; padding: 0; }
.fall { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--zl); cursor: pointer; }
.fall-bild { position: relative; margin: 24px 28px 24px 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--nacht-800); isolation: isolate; }
.foto { position: absolute; left: -2%; top: -7%; width: 104%; height: 114%; max-width: none; object-fit: cover; transition: filter var(--raus); }   /* breiter: die Unschärfe zieht sonst Transparenz an den Rand */
.schleier { position: absolute; inset: 0; background: rgb(var(--hg-k) / .62); opacity: 0; transition: opacity .15s cubic-bezier(.25, 0, .25, 1); }
/* die Marke des Kunden auf einer Tafel wie im Hero: sagt in Ruhe, wessen Bild das ist */
.fall-marke { position: absolute; left: 28px; bottom: 28px; z-index: 2; width: 152px; height: 60px; display: grid; place-items: center; overflow: hidden;
              border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .13); transition: opacity .2s var(--aus);
              background: linear-gradient(var(--ecke), var(--ecke)) left top / 8px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) left top / 1px 8px no-repeat,
                          linear-gradient(var(--ecke), var(--ecke)) right bottom / 8px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) right bottom / 1px 8px no-repeat,
                          rgb(var(--hg2-k) / .86); }
.fall-marke img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 152px; height: 152px; max-width: none; opacity: .92; }   /* quadratische Fläche, mittig beschnitten */
.fenster-halter { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; perspective: 900px; pointer-events: none; }
.fenster { width: 72%; border-radius: var(--radius); overflow: hidden; background: var(--nacht-800); box-shadow: 0 0 0 1px rgb(var(--vg-k) / .14);
           opacity: 0; transform: translateY(72%) rotateX(18deg) scale(.95); transform-origin: 50% 100%;
           transition: opacity .15s cubic-bezier(.25, 0, .25, 1), transform .4s var(--aus); }
.fenster-leiste { height: 26px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgb(var(--vg-k) / .1);
                  font: 500 12px/1 var(--schrift); color: rgb(var(--vg-k) / .68); }
.fenster video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--nacht-800); }
/* Kachelecken: in Ruhe an den Ecken des Bildes, beim Zeigen gleiten sie an die Ecken des Fensters */
.fall-bild .ecke { position: absolute; width: 12px; height: 12px; z-index: 4; pointer-events: none; color: rgb(var(--vg-k) / .78); transition: translate var(--raus); }
.fall-bild .ecke::before, .fall-bild .ecke::after { content: ""; position: absolute; background: currentColor; }
.fall-bild .ecke::before { width: 12px; height: 1px; }
.fall-bild .ecke::after { width: 1px; height: 12px; }
.fall-bild .ecke:nth-of-type(1) { left: 14px; top: 14px; }
.fall-bild .ecke:nth-of-type(2) { right: 14px; top: 14px; }
.fall-bild .ecke:nth-of-type(2)::before, .fall-bild .ecke:nth-of-type(2)::after { right: 0; }
.fall-bild .ecke:nth-of-type(3) { left: 14px; bottom: 14px; }
.fall-bild .ecke:nth-of-type(3)::before, .fall-bild .ecke:nth-of-type(3)::after { bottom: 0; }
.fall-bild .ecke:nth-of-type(4) { right: 14px; bottom: 14px; }
.fall-bild .ecke:nth-of-type(4)::before, .fall-bild .ecke:nth-of-type(4)::after { right: 0; bottom: 0; }
.fall.an .ecke { transition: translate .85s var(--sanft); }
.fall.an .ecke:nth-of-type(1) { translate: var(--ex, 0) var(--ey, 0); }
.fall.an .ecke:nth-of-type(2) { translate: calc(-1 * var(--ex, 0px)) var(--ey, 0); }
.fall.an .ecke:nth-of-type(3) { translate: var(--ex, 0) calc(-1 * var(--ey, 0px)); }
.fall.an .ecke:nth-of-type(4) { translate: calc(-1 * var(--ex, 0px)) calc(-1 * var(--ey, 0px)); }
.fall.an .schleier { opacity: 1; transition: opacity .2s cubic-bezier(.25, 0, .25, 1); }
.fall.an .foto { filter: blur(2px) sepia(.5); transition: filter .85s var(--sanft); }
.mit-reel .fall.an .foto { filter: blur(14px) saturate(.6); }   /* das Mockup tritt hinter das Reel zurück */
.mit-reel .fall.an .schleier { opacity: 1; background: rgb(var(--hg-k) / .78); }
.mit-reel .fenster-leiste { display: none; }
.fall.an .fall-marke { opacity: 0; }
.fall.an .fenster { opacity: 1; transform: none; transition: opacity .15s cubic-bezier(.25, 0, .25, 1), transform .85s var(--sanft); }
.fall-text { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 0 28px 28px; border-left: 1px solid var(--zl); }
.fall-name { margin: 0; font: 400 clamp(24px, 18px + .8vw, 32px)/1.1 var(--schrift); letter-spacing: -.022em; }
/* Leistungen des Falls als Wort auf einer kleinen Tafel mit Kachelecken wie die Marke im Bild (seit 21.10. statt nummerierter Bojen:
   Jonah „man checkt nicht auf Anhieb, was die Zahlen bedeuten“) */
.fall-leistungen { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fall-leistungen li { display: flex; align-items: center; gap: 8px; padding: 8px 12px 9px 10px; border-radius: var(--radius); font: 500 13px/1 var(--schrift); letter-spacing: -.003em;
  color: var(--sand); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .26), inset 0 0 0 100px rgb(var(--vg-k) / .035); transition: box-shadow .35s var(--aus);
  background: linear-gradient(var(--ecke), var(--ecke)) left top / 6px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) left top / 1px 6px no-repeat,
              linear-gradient(var(--ecke), var(--ecke)) right bottom / 6px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) right bottom / 1px 6px no-repeat; }
.fall-leistungen li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sonne); flex: none; }   /* das, was wir gebaut haben: ein Punkt in Sonne */
.fall.an .fall-leistungen li { box-shadow: inset 0 0 0 1px rgb(255 106 31 / .55), inset 0 0 0 100px rgb(255 106 31 / .07); }
.fall-satz { margin: 18px 0 0; max-width: 40ch; color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.fall-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 15px/1 var(--schrift); color: var(--sand); text-decoration: none; }
.fall-link::after { content: ""; position: absolute; inset: 0; z-index: 5; }   /* die ganze Zeile ist der Link, auch das Bild */
.fall-link:focus-visible { outline: none; }
.fall-link:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: -2px; border-radius: var(--radius); }
.fall.an .fall-link > span:first-child::after { transform: none; transition: transform 1.2s var(--lade); }
.fall.an .fall-link svg { translate: 4px 0; }
.alle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0;
        border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); color: var(--sand); text-decoration: none; isolation: isolate;
        font-weight: 320; font-size: clamp(26px, 16px + 1.9vw, 52px); letter-spacing: -.034em; line-height: 1.1; }
/* Zeigen (Jonah 21.10.: „die Animation noch ein bisschen intensivieren … die lange Karte nochmal leicht farblich highlighten“): die Zeile
   füllt sich von links mit einem leisen Sandton, unter dem Zeiger glimmt Sonne wie die Korallen im Hero, der Text rückt ein, die Pfeilkachel
   wird zur Handlung in Sonne wie die Kachel im Knopf, die Plus an den Ecken hellen auf */
.alle-licht { position: absolute; inset: 0 calc(var(--rand) * -1); z-index: -1; pointer-events: none; overflow: hidden; }
.alle-licht::before { content: ""; position: absolute; inset: 0; background: rgb(var(--vg-k) / .045); transform: scaleX(0); transform-origin: left;
                      transition: transform var(--raus); }
.alle-licht i { position: absolute; top: -40%; bottom: -40%; left: 0; width: min(70vw, 900px); opacity: 0; transition: opacity .4s var(--aus);
                background: radial-gradient(closest-side, rgb(255 106 31 / .16), rgb(255 106 31 / .05) 55%, rgb(255 106 31 / 0)); will-change: translate; }
.alle-text { position: relative; display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; transition: translate .3s var(--aus); }
.alle-text span { display: block; transition: transform .3s var(--aus); }
.alle-text span + span { position: absolute; inset: 100% 0 auto 0; }
.alle .knoten .plus { transition: color .3s var(--aus), scale .3s var(--aus); }
.alle-pfeil { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius);
              box-shadow: inset 0 0 0 1px var(--linie-stark); transition: box-shadow .3s var(--aus), background-color .3s var(--aus), color .3s var(--aus); }
.alle-pfeil svg { width: 20px; height: 20px; transition: transform .3s var(--aus); }
.alle-pfeil::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' stroke='%23000' stroke-width='1.2'/%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 16 16' fill='none'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateX(-40px); transition: transform .3s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .alle:hover .alle-text { translate: 18px 0; transition: translate .7s var(--sanft); }
  .alle:hover .alle-text span { transform: translateY(-100%); }
  .alle:hover .alle-licht::before { transform: none; transition: transform .9s var(--lade); }
  .alle:hover .alle-licht i { opacity: 1; }
  .alle:hover .alle-pfeil { background: var(--sonne); color: rgb(12 9 8); box-shadow: inset 0 0 0 1px var(--sonne); }
  .alle:hover .alle-pfeil svg { transform: translateX(40px); }
  .alle:hover .alle-pfeil::after { transform: none; }
  .alle:hover .knoten .plus { color: rgb(var(--vg-k) / .9); scale: 1.3; }
}
.alle:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }
/* Tastatur: derselbe Zustand wie beim Zeigen (das Licht steht mittig); Touch: kurz drücken */
.alle:focus-visible .alle-text span { transform: translateY(-100%); }
.alle:focus-visible .alle-licht::before { transform: none; transition: transform .9s var(--lade); }
.alle:focus-visible .alle-licht i { opacity: 1; translate: calc(50vw - 50%) 0; }
.alle:focus-visible .alle-pfeil { background: var(--sonne); color: rgb(12 9 8); box-shadow: inset 0 0 0 1px var(--sonne); }
.alle:active .alle-text, .alle:active .alle-pfeil { scale: .985; }
.alle-text, .alle-pfeil { transition: translate .3s var(--aus), scale .16s var(--aus), box-shadow .3s var(--aus), background-color .3s var(--aus), color .3s var(--aus); }

/* ========== Intro nach der Kamerafahrt (nur kamerafahrt.html) ==========
   Der Kurs der Fahrt kommt oben auf der Teilung 7/12 herein und endet im Ziel; Aussage links groß, Überleitung rechts. Copy fehlt noch. */
.intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2vw + 12px, 44px); padding-top: clamp(170px, 10vw + 80px, 280px);
         padding-bottom: clamp(24px, 3vw, 48px); }
/* der Kurs kommt dort herein, wo das Ziel am Ende der Fahrt stand (--ziel-x setzt der Hero), und endet mit einem Kurspfeil; ein zweites Ziel gibt es nicht */
.intro-ankunft { position: absolute; top: 0; left: var(--ziel-x, calc(var(--rand) + (100% - 2 * var(--rand)) * 7 / 12)); height: clamp(120px, 7vw + 50px, 210px); width: 0; }
.intro-kurs { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; translate: -.5px 0;
              background: repeating-linear-gradient(rgb(var(--vg-k) / .55) 0 2px, transparent 2px 9px); }
.intro-ziel { position: absolute; left: 0; bottom: -2px; width: 12px; height: 7px; translate: -50% 0;
              background: linear-gradient(to bottom left, transparent calc(50% - .7px), rgb(var(--vg-k) / .72) calc(50% - .7px), rgb(var(--vg-k) / .72) calc(50% + .7px), transparent calc(50% + .7px)) left / 50% 100% no-repeat,
                          linear-gradient(to bottom right, transparent calc(50% - .7px), rgb(var(--vg-k) / .72) calc(50% - .7px), rgb(var(--vg-k) / .72) calc(50% + .7px), transparent calc(50% + .7px)) right / 50% 100% no-repeat; }
.js .intro-kurs { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); }   /* zeichnet sich, ohne das Strichmuster zu stauchen */
.js .intro-ziel { opacity: 0; transition: opacity .35s var(--aus) .95s; }
.js .intro.da .intro-kurs { clip-path: inset(0); }
.js .intro.da .intro-ziel { opacity: 1; }
.intro-titel { margin: 0; max-width: 18ch; font-weight: 320; font-size: clamp(40px, 22px + 3.9vw, 84px); line-height: .98; letter-spacing: -.04em; }
.intro-text { margin: 0; max-width: 40ch; font-size: clamp(17px, 15px + .4vw, 21px); line-height: 1.45; letter-spacing: -.008em; }
.platzhalter-was { display: block; margin-top: 14px; font: 400 15px/1.4 var(--schrift); letter-spacing: 0; color: var(--leise); }
.intro-text .platzhalter-was { margin-top: 8px; }

/* ========== 04 Was wir machen: gestapelte Flächen ========== */
.leistungen { position: relative; margin-top: var(--abstand-oben); overflow-x: clip; }   /* clip, nicht hidden: sticky bleibt */
.stapel { position: relative; }
.flaeche { position: sticky; top: var(--kopf); height: calc(100svh - var(--kopf)); min-height: 600px; background: var(--nacht); }
.flaeche:nth-child(odd) { background: var(--nacht-800); }   /* im Wechsel: Einschub und Website auf Nacht 800, Sichtbarkeit und System auf Nacht */
/* Haltestrecke: jede Fläche steht kurz ganz da, bevor die nächste sie zudeckt (Lesen, Fahrt im Plakat) */
.flaeche:not(:last-child) { margin-bottom: 15svh; }
.flaeche.einschub { background: transparent; }
.flaeche::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(var(--vg-k) / .14); z-index: 3; }   /* Kante der Fläche */
.flaeche.einschub::before { display: none; }
.deckel { position: absolute; inset: 0; z-index: 6; background: var(--nacht); opacity: 0; pointer-events: none; }   /* die zugedeckte Fläche tritt zurück (bis 60 %) */
.flaeche-innen { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
                 grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 0 var(--rand); }
.einschub .flaeche-innen { background: var(--nacht-800); border-radius: var(--radius); transform-origin: 50% 0; will-change: transform;
                           box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .1); }
.einschub .flaeche-innen::before { content: ""; position: absolute; inset: 14px; pointer-events: none; --e: 14px; --ef: var(--ecke);
  background: linear-gradient(var(--ef), var(--ef)) left top / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) left top / 1px var(--e) no-repeat,
              linear-gradient(var(--ef), var(--ef)) right bottom / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) right bottom / 1px var(--e) no-repeat; }
.einschub .abschnitt-titel { grid-area: 1 / 1; margin: 0; padding: clamp(36px, 6vh, 72px) 28px 0 0; }
.einschub .flaeche-text { grid-area: 3 / 1; padding: 0 28px clamp(36px, 6vh, 64px) 0; }
.einleitung { margin: 0; max-width: 20ch; font-weight: 320; font-size: clamp(26px, 15px + 1.8vw, 50px); line-height: 1.12; letter-spacing: -.032em; text-wrap: balance; }
.einleitung-rest { margin: clamp(18px, 2.6vh, 28px) 0 0; max-width: 36ch; font-size: clamp(17px, 15px + .4vw, 21px); line-height: 1.45; letter-spacing: -.008em; color: var(--sand); text-wrap: pretty; }
.leise-satz { color: var(--leise); }
.flaeche-text { grid-area: 1 / 1; padding: clamp(32px, 5vh, 64px) 28px 0 0; }
.frage { margin: 0; display: flex; align-items: center; gap: 14px; font: 500 15px/1.3 var(--schrift); letter-spacing: -.005em; }
/* die nummerierte Boje der Wegpunkte aus dem Hero */
.frage i { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 500 14px/1 var(--schrift); font-style: normal;
           font-variant-numeric: tabular-nums; color: var(--sand); box-shadow: inset 0 0 0 1.5px var(--sand); transition: box-shadow .5s var(--aus); }
.flaeche.da .frage i { box-shadow: inset 0 0 0 1.5px var(--sand), 0 0 0 4px rgb(var(--vg-k) / .08); }
[data-reihe="konzept"] .frage i { display: none; }
@media (min-width: 1600px) { .frage { font-size: 17px; } .frage i { width: 36px; height: 36px; font-size: 15px; } }   /* in der Reihenfolge des Konzepts stünden die Nummern 2, 3, 1 */
.leistungssatz { margin: clamp(20px, 3vh, 32px) 0 0; max-width: 30ch; font-size: clamp(19px, 12px + 1vw, 36px); line-height: 1.32; letter-spacing: -.015em; text-wrap: pretty; }
.wort { grid-area: 3 / 1; margin: 0; padding-right: 28px; font-weight: 320; line-height: .8; letter-spacing: -.055em; white-space: nowrap; }
.wort span { display: inline-block; font-size: clamp(56px, 10vw, 200px); padding-bottom: .21em; }   /* Platz für die Unterlänge (System); die Größe misst das Skript */
html:not(.js) .wort { white-space: normal; }
.mehr { grid-area: 4 / 1; position: relative; display: flex; align-items: center; gap: 10px; margin: 0 28px clamp(24px, 4vh, 44px) 0;
        padding: 16px 0 4px; min-height: 44px; font: 500 15px/1 var(--schrift); color: var(--sand); text-decoration: none; }
.mehr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(var(--vg-k) / .3); transform-origin: left; }   /* Kante, an der das Wort steht */
.js .mehr::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1) .2s; }
.js .flaeche.da .mehr::before { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .mehr:hover > span:first-child::after { transform: none; transition: transform 1.2s var(--lade); }
  .mehr:hover svg { translate: 4px 0; }
}
.mehr:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }
.mehr:focus-visible > span:first-child::after { transform: none; }
/* seit 21.10. in der Sprache von „Alle Arbeiten ansehen“: große Zeile, Pfeilkachel, Füllung und Sonnenschimmer beim Zeigen */
/* seit Jonahs Durchsicht (21.10. abends) ohne Link: die Kante bleibt, und das Wort steht auf derselben Höhe wie mit der Zeile */
.mehr.mehr-kante { padding: 0; min-height: 82px; }
/* das Plakat: ein Ausschnitt der Seekarte aus dem Hero, schräg wie ein Blatt auf dem Kartentisch */
.plakat { grid-area: 1 / 2 / 5 / 3; margin: 0; display: grid; place-items: center; border-left: 1px solid var(--zl); padding: 32px 0 32px clamp(20px, 3vw, 56px); }
.einschub .plakat { padding-right: 14px; }
html:not(.js) .plakat, .ohne-karte .plakat { visibility: hidden; }   /* ohne Riff-Daten kein leeres Blatt */
.blatt { position: relative; width: min(100%, 460px, calc(100svh - var(--kopf) - 140px)); aspect-ratio: 1; border-radius: var(--radius); background: var(--nacht-800);
         box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .13); will-change: transform; }
.flaeche:nth-child(odd) .blatt { background: var(--nacht); }
.blatt::after { content: ""; position: absolute; inset: 10px; pointer-events: none; --e: 10px; --ef: var(--ecke);
  background: linear-gradient(var(--ef), var(--ef)) left top / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) left top / 1px var(--e) no-repeat,
              linear-gradient(var(--ef), var(--ef)) right bottom / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) right bottom / 1px var(--e) no-repeat; }
.blatt svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; }
.blatt .hl { fill: none; stroke: var(--sand); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.blatt .krone { fill: var(--sand); fill-opacity: .045; }
.blatt .k-grund { fill: none; stroke: var(--nacht); stroke-opacity: .9; stroke-linecap: round; }
.flaeche:nth-child(even) .blatt .k-grund, .flaeche:nth-child(even) .blatt .zg { stroke: var(--nacht-800); }
.blatt .k-weg { fill: none; stroke: var(--sand); stroke-opacity: .3; stroke-linecap: round; }
.blatt .k-spur { fill: none; stroke: var(--sand); stroke-opacity: .72; stroke-linecap: round; }
.blatt .k-spitze { fill: none; stroke: var(--sonne); stroke-linecap: round; }
.blatt .k-pfeil { fill: none; stroke: var(--sand); stroke-opacity: .72; stroke-linecap: round; stroke-linejoin: round; }
.blatt .boje circle { fill: var(--nacht); stroke: var(--sand); stroke-opacity: .55; }
.blatt .boje .hof { fill: none; stroke: none; }
.blatt .boje.jetzt circle { stroke-opacity: 1; }
.blatt .boje.jetzt .hof { stroke: var(--sand); stroke-opacity: .16; }
.blatt .boje text { fill: var(--sand); fill-opacity: .7; font: 500 14px var(--schrift); text-anchor: middle; dominant-baseline: central; }
.blatt .boje.jetzt text { fill-opacity: 1; }
.blatt .pk-ziel .ring { fill: none; stroke: var(--sand); stroke-opacity: .75; }
.blatt .pk-ziel .kern { fill: var(--sonne); }
.blatt .pk-ziel .welle { fill: none; stroke: var(--sonne); stroke-opacity: 0; transform-box: fill-box; transform-origin: center; }
.blatt .pk-ziel.angekommen .welle { animation: pk-welle 1.3s var(--aus) both; }
@keyframes pk-welle { from { stroke-opacity: .8; scale: 1; } to { stroke-opacity: 0; scale: 3; } }
/* Kartenzeichen je Fläche: Leuchtfeuer mit Sektor (Sichtbarkeit), betonntes Fahrwasser (Website), Liegeplätze (System) */
.blatt .zg { fill: none; stroke: var(--nacht); stroke-opacity: .9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.blatt .zl { fill: none; stroke: var(--sand); stroke-opacity: .62; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.blatt .zl.fein { stroke-opacity: .42; stroke-dasharray: 3 4; }
.blatt .zf { fill: var(--sand); fill-opacity: .7; }
.blatt .tonne { fill: var(--nacht); stroke: var(--sand); stroke-opacity: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.flaeche:nth-child(even) .blatt .tonne { fill: var(--nacht-800); }
.blatt .sektor { fill: var(--sand); fill-opacity: .045; }
.blatt .blinkt .sektor { animation: pk-feuer 1.6s ease-in-out 3; }
@keyframes pk-feuer { 0%, 100% { fill-opacity: .045; } 18% { fill-opacity: .16; } 40% { fill-opacity: .045; } }

/* Seit 21.10.: je Fläche eine Szene (quelle/szenen.js) statt des Plakats. Jonah: „komplett auf die rechte Seite … das komplette rechte Fenster
   ausfüllen“: die rechten fünf Zwölftel von der Kante der Fläche bis unten und bis an den rechten Bildschirmrand, ohne Karte, ohne Kippen */
[data-grafik="szene"] .plakat { position: absolute; inset: 0 calc(var(--rand) * -1) 0 0; padding: 0; display: block; overflow: hidden; }
[data-grafik="szene"] .einschub .plakat { right: calc(var(--rand) * -1); }
[data-grafik="szene"] .einschub .flaeche-innen { overflow: hidden; }
.szene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  [data-grafik="szene"] .plakat { position: relative; inset: auto; height: clamp(340px, 96vw, 560px); margin: 32px calc(var(--rand) * -1) 4px; border-left: 0; }
  [data-grafik="szene"] .einschub .plakat { margin: 36px calc(var(--rand) * -1) 48px; }
}

.danach { position: relative; min-height: 60vh; padding: 96px var(--rand); background: var(--nacht); color: var(--leise); }

/* ========== Zwischenbreiten und Handy ========== */
@media (max-width: 860px) {
  .intro-ankunft { left: 50%; }
  .logos { --spalten: var(--sp-m, 4); }
  .logo.leer.l8 { display: none; }
  .logo.leer.l4 { display: block; }
  .fall { grid-template-columns: minmax(0, 1fr); }
  .fall-bild { margin: 20px 0 0; }
  .fall-text { border-left: 0; padding: 20px 0 24px; }
  .fall-marke { left: 16px; bottom: 16px; width: 128px; height: 52px; }
  .fall-marke img { width: 128px; height: 128px; }
  .flaeche { position: relative; top: 0; height: auto; min-height: 0; margin-bottom: 0 !important; }
  .deckel { display: none; }
  .flaeche-innen { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 0 var(--rand); }
  .einschub .flaeche-innen { transform: none !important; border-radius: 0; box-shadow: none; }
  .einschub .flaeche-innen::before { display: none; }
  .flaeche-innen > * { grid-area: auto !important; }
  .einschub .abschnitt-titel { padding: 64px 0 0; }
  .einschub .flaeche-text { padding: 28px 0 0; }
  .wort { padding: 56px 0 0; }
  .flaeche-text { padding: 20px 0 0; }
  .plakat { border-left: 0; padding: 36px 0 8px; }
  .einschub .plakat { padding: 40px 0 56px; }
  .blatt { width: min(100%, 360px); }
  .mehr { margin: 24px 0 48px; }
  .flaeche:last-child .mehr { margin-bottom: 0; }   /* nach der letzten Fläche gilt der Abstand aller Sections (23.10. spät) */
  .mehr.mehr-kante { min-height: 0; }
}
@media (max-width: 480px) {
  .logos { --spalten: var(--sp-k, 3); }
  .logo { aspect-ratio: 5 / 4; }
  .logo.leer.l4 { display: none; }
  .logo.leer.l3 { display: block; }
  .logo img { object-fit: cover; }   /* die Logos sitzen mittig auf einer quadratischen Fläche: so füllen sie die flachere Kachel */
  .fall-bild .ecke { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .logo img { opacity: .64; translate: none; }
  .js .logos-rahmen { clip-path: none; }
  .fall-bild .ecke { transition: none; }
  .fenster { transform: none; }
  .js .mehr::before { transform: none; }
  .js .intro-kurs { clip-path: none; transition: none; }
  .js .intro-ziel { opacity: 1; transition: none; }
}

/* ========== Nachtrag 04 (21.10. abends): „Mehr zu …“ wird gefunden ==========
   Jonah: „Vielleicht kann es sein, dass ein Kunde das nicht direkt findet“. Der Link folgt jetzt dem Lesen: ein Knopf direkt unter dem
   Leistungssatz, in der Form des Erstgespräch-Knopfs, aber als Umriss (der eine gefüllte Knopf bleibt das Erstgespräch). Dazu ist die
   Szene mit der Maus selbst ein Link: am Zeiger erscheint ein Schild. Die Zeile am Fuß der Fläche bleibt als zweiter Weg. */
.mehr-knopf { margin-top: clamp(22px, 3.2vh, 36px); display: inline-flex; align-items: center; gap: 16px; height: 48px; padding: 6px 6px 6px 18px;
              border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--sand); text-decoration: none;
              font: 500 15px/1 var(--schrift); letter-spacing: -.005em; transition: box-shadow .3s var(--aus), background-color .3s var(--aus), scale .16s var(--aus); }
.mehr-knopf-text { position: relative; display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.mehr-knopf-text span { display: block; transition: transform .3s var(--aus); }
.mehr-knopf-text span + span { position: absolute; inset: 100% 0 auto 0; }
.mehr-knopf-pfeil { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--linie-stark);
                    transition: background-color .3s var(--aus), color .3s var(--aus), box-shadow .3s var(--aus); }
.mehr-knopf-pfeil svg { width: 14px; height: 14px; transition: translate .3s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .mehr-knopf:hover { background: rgb(var(--vg-k) / .06); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .62); }
  .mehr-knopf:hover .mehr-knopf-text span { transform: translateY(-100%); }
  .mehr-knopf:hover .mehr-knopf-pfeil { background: var(--sonne); color: rgb(12 9 8); box-shadow: inset 0 0 0 1px var(--sonne); }
  .mehr-knopf:hover .mehr-knopf-pfeil svg { translate: 2px 0; }
}
.mehr-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.mehr-knopf:focus-visible .mehr-knopf-pfeil { background: var(--sonne); color: rgb(12 9 8); box-shadow: inset 0 0 0 1px var(--sonne); }
.mehr-knopf:active { scale: .98; }
/* die Szene als Link: Schild am Zeiger (Tafel mit Kachelecken wie die Tags, Pfeilkachel in Sonne) */
.szene-link { position: absolute; inset: 0; z-index: 2; display: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .szene-link { display: block; } }
.schild { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; will-change: transform; }
/* Auftritt (Jonah: „ploppt ja eigentlich nur ohne Animation auf … gerne nochmal irgendwie cool animieren“): erst die Pfeilkachel am Zeiger,
   dann zieht das Schild nach rechts auf, der Text gleitet hinein; raus geht es kurz in umgekehrter Folge */
.schild-innen { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: var(--radius);
          font: 500 14px/1 var(--schrift); letter-spacing: -.005em; color: var(--sand); white-space: nowrap; box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .22);
          background: linear-gradient(var(--ecke), var(--ecke)) left top / 7px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) left top / 1px 7px no-repeat,
                      linear-gradient(var(--ecke), var(--ecke)) right bottom / 7px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) right bottom / 1px 7px no-repeat,
                      rgb(var(--hg-k) / .9);
          clip-path: inset(0 calc(100% - 40px) 0 0 round var(--radius)); opacity: 0;
          transition: clip-path .2s cubic-bezier(.4, 0, .6, 1), opacity .15s var(--aus) .05s; }
.schild-text { display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.schild-text span { display: block; opacity: 0; translate: -14px 0; transition: opacity .12s var(--aus), translate .2s var(--aus); }
.schild i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 3px; background: var(--sonne); color: rgb(12 9 8);
            scale: .2; rotate: -90deg; transition: scale .18s var(--aus), rotate .18s var(--aus); }
.schild svg { width: 13px; height: 13px; translate: -18px 0; transition: translate .15s var(--aus); }
.szene-link.zeigt .schild-innen { opacity: 1; clip-path: inset(0 0 0 0 round var(--radius));
                                  transition: opacity .12s var(--aus), clip-path .62s cubic-bezier(.22, .9, .28, 1) .16s; }
.szene-link.zeigt .schild i { scale: 1; rotate: 0deg; transition: scale .42s cubic-bezier(.22, .9, .28, 1), rotate .5s cubic-bezier(.22, .9, .28, 1); }
.szene-link.zeigt .schild svg { translate: 0 0; transition: translate .45s cubic-bezier(.22, .9, .28, 1) .2s; }
.szene-link.zeigt .schild-text span { opacity: 1; translate: 0 0; transition: opacity .35s var(--aus) .3s, translate .6s cubic-bezier(.22, .9, .28, 1) .26s; }
.szene-link:active .schild-innen { scale: .95; transition: scale .12s var(--aus); }
@media (prefers-reduced-motion: reduce) { .schild-innen, .schild-text span, .schild i, .schild svg { transition: opacity .2s !important; clip-path: none; scale: 1; rotate: 0deg; translate: 0 0; } }
@media (max-width: 860px) { .mehr-knopf { margin-top: 22px; } }

/* ========== 05 Woran Sie es merken: Logbuch am Kurs ==========
   Cerebrium „Why“: links bleibt eine Titelliste stehen, rechts Karten, deren Grafik sich erst im Bild aufbaut. Bei uns ist die Liste ein
   senkrechter Kurs mit fünf Bojen wie die Wegpunkte im Hero, die Kursspitze in Sonne fährt beim Scrollen mit. Teilung 7/12 zu 5/12 wie
   die Kopfleiste: die Senkrechte läuft zwischen Logbuch und Tafeln. */
/* seit Jonahs Durchsicht (21.10. abends) gespiegelt: die Tafeln links, das Logbuch rechts („dass wieder mal so ein bisschen Abwechslung drin ist“);
   die Senkrechte bleibt bei 7/12, 04 davor hat den Text links */
.merkmale { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-bottom: clamp(120px, 8vw + 40px, 220px); }
.logbuch { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--kopf) + clamp(28px, 5vh, 64px)); align-self: start; padding-left: clamp(20px, 3vw, 56px); }
.logbuch .abschnitt-titel { margin-bottom: clamp(36px, 6vh, 72px); }
.logbuch-nav { position: relative; padding-left: 44px; }
.logbuch-liste { list-style: none; margin: 0; padding: 0; }
.logbuch-eintrag { position: relative; display: block; padding: .34em 0; color: var(--leise); text-decoration: none;
                   font-weight: 320; font-size: clamp(20px, 11px + 1.3vw, 44px); line-height: 1.1; letter-spacing: -.032em; text-wrap: balance;
                   transition: color .5s var(--aus); }
.logbuch-eintrag.jetzt { color: var(--sand); }
@media (hover: hover) and (pointer: fine) {
  .logbuch-eintrag:not(.jetzt):hover { color: rgb(var(--vg-k) / .86); transition-duration: .2s; }
  .logbuch-eintrag:not(.jetzt):hover > .logbuch-boje { box-shadow: inset 0 0 0 1.5px rgb(var(--vg-k) / .86); transition-duration: .2s; }
}
/* Fokus nur mit der Tastatur sichtbar (ein Klick fährt zur Station und gibt den Fokus wieder ab, quelle/logbuch.js); leiser Rahmen mit Luft */
.logbuch-eintrag:focus-visible { outline: 1.5px solid rgb(var(--vg-k) / .5); outline-offset: 10px; border-radius: 12px; }
/* Boje wie ein Wegpunkt: Punkt mit Ring; erreicht füllt sich der Kern in Sand, die aktive trägt die Kursspitze (Sonnenkern im Ring) und
   sendet einen leisen Ring aus, wie eine Leuchttonne (22.10.2026, Jonah: „den rechten Bereich … ein bisschen hübscher machen“) */
.logbuch-boje, .merkmal-boje { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--nacht);
                               box-shadow: inset 0 0 0 1.5px rgb(var(--vg-k) / .5); transition: box-shadow .5s var(--aus); }
.logbuch-boje { left: -44px; margin-left: 9px; top: calc(.34em + .55em); translate: 0 -50%; }
.logbuch-boje::after, .merkmal-boje::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--sand); scale: 0; transition: scale .45s var(--aus); }
.erreicht > .logbuch-boje::after, .merkmal.erreicht .merkmal-boje::after { scale: 1; }
.jetzt > .logbuch-boje, .merkmal.jetzt .merkmal-boje { box-shadow: inset 0 0 0 1.5px var(--sand), 0 0 0 6px rgb(255 106 31 / .1); }
.logbuch-boje::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 106 31 / .6); opacity: 0; pointer-events: none; }
.jetzt > .logbuch-boje::before { animation: boje-puls 3.2s var(--aus) .6s infinite; }
@keyframes boje-puls { 0% { scale: 1; opacity: .9; } 70%, 100% { scale: 2.3; opacity: 0; } }
/* der Kurs: gestrichelt, was noch kommt; durchgezogen, was gefahren ist; die Spitze in Sonne mit kurzem Schweif. Die Senkrechte setzt
   quelle/logbuch.js genau auf die Mitte der Bojen (vorher lag die Spitze einen halben Bildpunkt neben dem Ring) */
.logbuch-kurs, .merkmal-kurs { position: absolute; left: 16.5px; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.logbuch-weg { position: absolute; left: -.5px; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(rgb(var(--vg-k) / .42) 0 2px, transparent 2px 8px); }
.logbuch-spur { position: absolute; left: -.75px; top: 0; bottom: 0; width: 1.5px; background: rgb(var(--vg-k) / .85); transform-origin: 50% 0; transform: scaleY(0); }
.logbuch-spitze { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sonne);
                  box-shadow: 0 0 0 3px rgb(255 106 31 / .18); transform: translate(-50%, 0); }
.logbuch-spitze::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 1.5px; height: var(--schweif, 0px); translate: -50% 0; border-radius: 1px;
                          background: linear-gradient(rgb(255 106 31 / 0), rgb(255 106 31 / .85)); }
/* die Bojen liegen unter dem Kurs, die Spitze darüber: in der aktiven Boje sitzt sie als Sonnenkern */
.logbuch-liste, .merkmal-karten { position: relative; z-index: 1; }

.merkmal-spalte { grid-column: 1; grid-row: 1; position: relative; border-right: 1px solid var(--zl); padding-right: clamp(20px, 3vw, 56px); }
.merkmal-kurs { display: none; }
.merkmal-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(96px, 16vh, 220px); }
.merkmal { position: relative; outline: none; }
.merkmal-tafel { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--nacht-800); overflow: hidden;
                 box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .1); }
.merkmal-tafel::after { content: ""; position: absolute; inset: 10px; pointer-events: none; --e: 10px; --ef: var(--ecke);
  background: linear-gradient(var(--ef), var(--ef)) left top / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) left top / 1px var(--e) no-repeat,
              linear-gradient(var(--ef), var(--ef)) right top / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) right top / 1px var(--e) no-repeat,
              linear-gradient(var(--ef), var(--ef)) left bottom / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) left bottom / 1px var(--e) no-repeat,
              linear-gradient(var(--ef), var(--ef)) right bottom / var(--e) 1px no-repeat, linear-gradient(var(--ef), var(--ef)) right bottom / 1px var(--e) no-repeat; }
.merkmal-szene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* am Desktop steht der Titel groß im Logbuch daneben: in der Karte nur für Screenreader (Kritik: sonst jeder Titel zweimal im Bild) */
.merkmal-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.merkmal-boje { display: none; }
.merkmal-satz { margin: 28px 0 0; max-width: 32ch; font-size: clamp(19px, 13px + .6vw, 27px); line-height: 1.34; letter-spacing: -.014em; text-wrap: pretty; }
.merkmal:focus-visible .merkmal-tafel { outline: 2px solid var(--fokus); outline-offset: 4px; }
html:not(.js) .merkmal-tafel, html:not(.js) .logbuch-kurs, html:not(.js) .merkmal-kurs { display: none; }   /* ohne JS keine leeren Tafeln und keine stehende Kursspitze */

/* ========== 06 Für wen wir arbeiten: Drei Häfen ==========
   Herons „Problems“: drei Spalten im Raster, je eine isometrische Strichfigur, die sich beim Zeigen Linie für Linie zeichnet und dann im
   Strichmuster weiterfließt, Plus an den Knoten. Bei uns stehen die Figuren an einem Streifen Seekarte, ein Kurs läuft quer durch. */
.haefen { padding-bottom: 0; }   /* Abstände seit 23.10. spät einheitlich: jede Section hat oben --abstand-oben, unten nichts extra */
.haefen-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.haefen-kopf .abschnitt-titel { margin: 0; padding-right: 28px; }
.haefen-intro { padding-left: clamp(20px, 3vw, 56px); }
.haefen-einleitung { margin: 0; padding-top: .18em; font-weight: 320; font-size: clamp(24px, 12px + 1.4vw, 40px); line-height: 1.1; letter-spacing: -.032em; }
.haefen-einleitung .zeile { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.haefen-einleitung .zeile > span { display: inline-block; text-wrap: balance; }   /* der lange zweite Satz (22.10.) bricht ausgewogen */
.js .haefen-einleitung .zeile > span { translate: 0 108%; transition: translate 1.1s var(--sanft); }
.js .haefen-einleitung .zeile:nth-child(2) > span { transition-delay: .06s; }
.js .haefen-einleitung .zeile:nth-child(3) > span { transition-delay: .12s; }
.js .haefen-intro.da .haefen-einleitung .zeile > span { translate: 0 0; }
.haefen-leise { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 34ch; color: var(--leise); font-size: clamp(17px, 15px + .4vw, 21px); line-height: 1.45; letter-spacing: -.008em; text-wrap: pretty; }
.js .haefen-leise { opacity: 0; translate: 0 10px; transition: opacity .7s var(--aus) .5s, translate .9s var(--aus) .5s; }
.js .haefen-intro.da .haefen-leise { opacity: 1; translate: 0 0; }

.haefen-feld { position: relative; margin-top: clamp(56px, 6vw, 112px); border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.js .haefen-feld { clip-path: inset(-12px 100% -12px calc(var(--rand) * -1)); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1); }   /* zeichnet sich von links */
.js .haefen-feld.da { clip-path: inset(-12px calc(var(--rand) * -1)); }
.haefen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hafen { position: relative; display: flex; flex-direction: column; }
.hafen + .hafen { border-left: 1px solid var(--zl); }
.hafen .knoten .plus { transition: color .4s var(--aus), scale .4s var(--aus); }
.hafen.an > .knoten .plus, .hafen.an + .hafen > .knoten .plus.l { color: rgb(var(--vg-k) / .9); scale: 1.3; }
.hafen-bild { position: relative; height: clamp(320px, 19vw + 110px, 640px); padding: clamp(28px, 3vw, 56px) clamp(16px, 2vw, 40px) clamp(64px, 5vw, 112px);
              display: grid; grid-template-rows: minmax(0, 1fr); place-items: end center; border-bottom: 1px solid var(--zl); }
.hafen-bild svg.see, .hafen-bild svg.netz { position: absolute; top: 0; max-width: none; pointer-events: none; overflow: hidden; }   /* ohne max-width: sonst gestaucht, Kurs und Karte brachen an den Fugen */
.hafen-bild svg.see { z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); }
.see path { fill: none; stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hafen-bild svg.netz { z-index: 2; }
.netz-grund { fill: none; stroke: var(--nacht); stroke-opacity: .85; stroke-width: 7; stroke-linecap: round; }
.netz-weg { fill: none; stroke: var(--sand); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 3 5; stroke-linecap: round; }
.netz-spur { fill: none; stroke: var(--sand); stroke-opacity: .85; stroke-width: 1.5; stroke-dasharray: 1 2; stroke-dashoffset: 1; stroke-linecap: round; }
.netz-spitze { fill: none; stroke: var(--sonne); stroke-width: 2.6; stroke-linecap: round; opacity: 0; transition: opacity .3s var(--aus); }
.netz-fuehrung-ruhe { fill: none; stroke: var(--sand); stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 1.5 4; }
.netz-fuehrung { fill: none; stroke: var(--sand); stroke-opacity: .85; stroke-width: 1.2; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--aus); }
.netz-boje .ring { fill: var(--nacht); stroke: var(--sand); stroke-opacity: .55; stroke-width: 1.5; transition: stroke-opacity .4s var(--aus); }
.netz-boje .kern { fill: var(--sand); scale: 0; transition: scale .4s var(--aus); }
.hafen.an .netz-fuehrung { stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--sanft) .42s; }
.hafen.an .netz-boje .ring { stroke-opacity: 1; transition-delay: .35s; }
.hafen.an .netz-boje .kern { scale: 1; transition: scale .4s var(--sanft) .38s; }
/* die Figur: in Ruhe leise, beim Zeigen zeichnet sie sich dunkel nach (Herons 1,2 s je Strich, bei uns 0,9 s, 32 ms versetzt), dann fließt sie */
.figur { position: relative; z-index: 1; width: auto; height: 100%; max-width: 100%; overflow: visible; }   /* füllt die Höhe des Bildfelds, auch auf großen Bildschirmen */
.fig-grund { fill: var(--nacht); }
.fig-ruhe { fill: none; stroke: var(--sand); stroke-opacity: .42; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.fig-verdeckt { fill: none; stroke: var(--sand); stroke-opacity: .2; stroke-width: 1; stroke-dasharray: 2 3; }
.fig-licht { fill: var(--sand); fill-opacity: .07; transition: fill .3s var(--aus), fill-opacity .3s var(--aus); }
.fig-tinte path { fill: none; stroke: var(--sand); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1;
                  transition: stroke-dashoffset .3s var(--aus); }
.fig-fluss { fill: none; stroke: var(--nacht); stroke-width: 1.8; stroke-dasharray: 2 14; stroke-linecap: butt; opacity: 0; transition: opacity .25s var(--aus); }
.hafen.an .fig-tinte path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--sanft) calc(.5s + var(--i) * 18ms); }
.hafen.an .fig-licht { fill: var(--sonne); fill-opacity: 1; transition: fill .45s var(--aus) 1.1s, fill-opacity .45s var(--aus) 1.1s; }
.hafen.an .fig-fluss { opacity: .7; animation: fig-fluss 1.6s linear 1.6s infinite; transition: opacity .5s var(--aus) 1.6s; }
@keyframes fig-fluss { to { stroke-dashoffset: -16; } }
html:not(.js) .figur .fig-tinte, .ohne-karte .netz { display: none; }

.hafen-text { flex: 1; display: flex; flex-direction: column; padding: 28px 28px 0; }
.hafen-name { margin: 0; font: 400 clamp(22px, 16px + .75vw, 32px)/1.12 var(--schrift); letter-spacing: -.024em; text-wrap: balance; }
.hafen-satz { margin: 14px 0 32px; max-width: 34ch; color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
/* der Link in der Sprache von „Alle Arbeiten ansehen“: Zeile über die ganze Spalte, Füllung und Sonnenschimmer beim Zeigen */
.hafen-link.alle { margin: auto -28px 0; padding: 20px 28px; border-bottom: 0; font-size: clamp(20px, 11px + .95vw, 32px); }
.hafen-link .alle-licht { inset: 0; }
.hafen-link .alle-pfeil { width: 48px; height: 48px; }
.hafen-link .alle-pfeil svg, .hafen-link .alle-pfeil::after { width: 18px; height: 18px; }
.hafen-link.alle:focus-visible { outline-offset: -2px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .hafen-text { padding: 24px 20px 0; }
  .hafen-link.alle { margin: auto -20px 0; padding: 18px 20px; }
}
@media (max-width: 860px) {
  .merkmale { display: block; }
  .logbuch { position: static; padding-left: 0; }
  .logbuch-nav { display: none; }
  .merkmal-spalte { border-right: 0; padding-right: 0; padding-left: 34px; }
  .merkmal-kurs { display: block; left: 7px; }
  .merkmal-boje { display: block; left: -34px; margin-left: -.5px; top: 50%; translate: 0 -50%; }
  .merkmal-karten { gap: 72px; }
  .merkmal { display: flex; flex-direction: column; }
  .merkmal-titel { order: -1; position: relative; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
                  margin: 0 0 20px; font: 400 22px/1.15 var(--schrift); letter-spacing: -.02em; color: var(--sand); text-wrap: balance; }
  .merkmal-boje { top: calc(.575em); }
  .merkmal-tafel { aspect-ratio: 5 / 4; }
  .merkmal-satz { margin-top: 18px; font-size: 17px; line-height: 1.45; color: var(--leise); }
  .haefen-kopf { display: block; }
  .haefen-intro { padding-left: 0; margin-top: 28px; }
  .haefen-liste { grid-template-columns: minmax(0, 1fr); }
  .hafen + .hafen { border-left: 0; border-top: 1px solid var(--zl); }
  .hafen-bild { height: clamp(320px, 88vw, 440px); padding: 24px 8px 64px; }
  .hafen-text { padding: 24px 0 0; }
  .hafen-link.alle { margin: auto calc(var(--rand) * -1) 0; padding: 18px var(--rand); }
}
@media (prefers-reduced-motion: reduce) {
  .js .haefen-einleitung .zeile > span, .js .haefen-leise { translate: none; opacity: 1; transition: none; }
  .js .haefen-feld { clip-path: none; transition: none; }
  .fig-tinte path, .hafen.an .fig-tinte path, .netz-fuehrung, .hafen.an .netz-fuehrung { transition: none; }
  .hafen.an .fig-fluss { animation: none; opacity: 0; }
  .logbuch-eintrag, .logbuch-boje, .merkmal-boje, .logbuch-boje::after, .merkmal-boje::after { transition: none; }
  .jetzt > .logbuch-boje::before { animation: none; }
}