/* 11 Erstgespräch (Entwurf, 23.10.2026, zweite Fassung nach den Referenzen): der letzte klare Weg in die Handlung, als eigener Baustein über dem
   Fuß; beide stehen auch allein. Aufbau nach Heron (CTA mittig mit kleinem Knopf über einer Zeichnung, Raster mit Plus und Koordinaten an den
   Ecken) und Terminal (ruhig auf Dunkel, ein Knopf). Die Zeichnung ist die Seekarte aus dem Hero: der Kurs kommt hier an der Zielboje an. Dezent:
   alles einmal, nichts in Schleife, Sonne nur für die Boje. Farben über die Kanäle. Skript: quelle/abschluss.js. */
.abschluss { padding-bottom: var(--abstand-oben); }   /* zum Fuß derselbe Abstand wie zwischen allen Sections (23.10. spät) */
.abschluss-rahmen { position: relative; border: 1px solid var(--zl); overflow: clip; }
.abschluss-rahmen .knoten { z-index: 3; }
.abschluss-lage { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; margin: 0; padding: 12px 16px;
                  color: rgb(var(--vg-k) / .42); font-size: 12px; letter-spacing: .01em; pointer-events: none; }
.abschluss-text { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center;
                  padding: clamp(72px, 6vw + 32px, 144px) var(--rand) clamp(36px, 3vw + 16px, 64px); }
.abschluss-titel { margin: 0; font: 320 clamp(40px, 22px + 3vw, 80px)/1 var(--schrift); letter-spacing: -.04em; color: var(--sand); text-wrap: balance; }
html.hell .abschluss-titel { font-weight: 300; }
.abschluss-titel .zeile { display: block; overflow-y: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.abschluss-titel .zeile > span { display: inline-block; }
.abschluss-satz { margin: 20px 0 0; max-width: 34ch; color: var(--leise); font-size: clamp(16px, 15px + .3vw, 19px); line-height: 1.45; text-wrap: pretty; }
.abschluss-knopf { margin-top: clamp(28px, 2vw + 12px, 40px); }

/* die Seekarte unter dem Text, im selben Rahmen; ihre Oberkante ist eine Linie des Rasters */
.abschluss-karte { position: relative; display: block; width: 100%; height: clamp(220px, 22vw, 380px); border-top: 1px solid var(--zl); }
.ak-linie { fill: none; stroke: rgb(var(--vg-k) / .16); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 1.2s var(--aus) calc(var(--s, 0) * 40ms); }
.ak-kurs { fill: none; stroke: rgb(var(--vg-k) / .7); stroke-linecap: round; }   /* Stärke und Muster setzt abschluss.js in Bildschirmpixeln */
.ak-maske-weg { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ak-ring { fill: none; stroke: rgb(var(--vg-k) / .75); opacity: 0; transition: opacity .5s var(--aus); }
.ak-kern { fill: var(--sonne); opacity: 0; transition: opacity .5s var(--aus); }
.ak-puls { fill: none; stroke: var(--sonne); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ak-schild { font-weight: 500; font-family: var(--schrift); letter-spacing: -.005em; fill: rgb(var(--vg-k) / .78); opacity: 0; transition: opacity .6s var(--aus) .2s;
             paint-order: stroke; stroke: var(--nacht); stroke-linejoin: round; }
.abschluss.an .ak-linie { opacity: 1; }
.abschluss.am-ziel :is(.ak-ring, .ak-kern, .ak-schild) { opacity: 1; }

/* Ziel am Ende der Karte (24.10.): eigene Ebene über dem ganzen Rahmen, unter dem Text; Maße in Bildschirmpixeln (abschluss.js) */
.abschluss-ziel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; transition: opacity .4s var(--aus); }
.js .abschluss:not(.an) .abschluss-ziel { opacity: 0; }
/* A Leuchtfeuer: Echolot und Maus (24.10., zweite Fassung). Licht, Nebel, Teilchen, Schatten und Treffer rechnet ein Shader auf der Leinwand
   (abschluss.js), aufgehellt über die Seite gelegt (screen; im hellen Modus multiply). Hier Ring, Zeiger und der Knopf: --licht (0 bis 1) sagt, wie
   stark der Strahl ihn trifft, --lichtx wo auf der Unterkante; dort sitzt der Glanz und wandert mit dem Winkel. */
.af-leinwand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.af-leinwand.hell { mix-blend-mode: multiply; }
.af-ringlinie { fill: none; stroke: rgb(var(--vg-k) / .16); stroke-width: 1; }
.af-strich { stroke: rgb(var(--vg-k) / .3); stroke-width: 1; }
.af-zeigerbogen { fill: none; stroke: var(--sonne); stroke-width: 2.2; stroke-linecap: round; }
.af-flamme { fill: var(--sonne); }
.af-punkt { fill: var(--nacht); stroke: rgb(var(--vg-k) / .9); stroke-width: 1.4; }
.abschluss[data-ziel="leuchtfeuer"] .abschluss-knopf { position: relative; z-index: 2; }
.abschluss[data-ziel="leuchtfeuer"] .abschluss-knopf .knopf { --licht: 0; --lichtx: 50%;
  background-image: radial-gradient(60% 150% at var(--lichtx) 118%, rgb(255 140 70 / calc(var(--licht) * .62)), rgb(255 140 70 / 0) 72%);
  box-shadow: 0 0 0 1px rgb(255 106 31 / calc(var(--licht) * .55)),
              0 calc(var(--licht) * 10px) calc(var(--licht) * 34px) calc(var(--licht) * -8px) rgb(255 106 31 / calc(var(--licht) * .45)); }
/* B Kreuzpeilung */
.ap-linie-leise { stroke: rgb(var(--vg-k) / .28); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; }
.ap-linie { stroke: rgb(var(--vg-k) / .66); stroke-width: 1.2; stroke-dasharray: 6 5; }
.ap-grad { fill: rgb(var(--vg-k) / .68); font: 400 12px var(--schrift); text-anchor: middle; }
.ap-ring { fill: none; stroke: var(--sonne); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ap-ring2 { fill: none; stroke: var(--sonne); stroke-opacity: .25; stroke-width: 1; }
.ap-kern { fill: var(--sonne); opacity: 0; }
.ap-puls { fill: none; stroke: var(--sonne); stroke-width: 1.4; opacity: 0; }
.ap-schild { fill: rgb(var(--vg-k) / .78); font: 500 13px var(--schrift); letter-spacing: -.005em; paint-order: stroke; stroke: var(--nacht); stroke-width: 6px; stroke-linejoin: round; }
.ap-grad, .ap-schild, .ap-ring2 { opacity: 0; transition: opacity .7s var(--aus) .5s; }
.abschluss-ziel.fest :is(.ap-grad, .ap-schild, .ap-ring2, .ap-kern) { opacity: 1; }
.abschluss-ziel.fest .ap-ring { stroke-dashoffset: 0; }
.abschluss-ziel.fest .ap-grad { transition-delay: 0s; }
.abschluss-nochmal { box-shadow: inset 0 0 0 1px var(--zl); margin-left: 4px; }

/* einmal: Zeilen aus ihren Masken, Satz und Knopf folgen */
.js .abschluss-titel .zeile > span { translate: 0 112%; }
.abschluss.an .abschluss-titel .zeile > span { translate: 0 0; transition: translate 1.1s var(--sanft) var(--v, 0s); }
.js .abschluss :is(.abschluss-satz, .abschluss-knopf) { opacity: 0; translate: 0 12px; }
.abschluss.an :is(.abschluss-satz, .abschluss-knopf) { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus) var(--w, .35s), translate 1s var(--sanft) var(--w, .35s); }
.abschluss.an .abschluss-knopf { --w: .5s; }

@media (max-width: 860px) {
  .abschluss-lage { font-size: 11px; padding: 10px 12px; }
  .abschluss-karte { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  /* doppelte Klasse: muss die Einblend-Regeln (.abschluss.an …) schlagen */
  .js .abschluss.abschluss .abschluss-titel .zeile > span, .js .abschluss.abschluss :is(.abschluss-satz, .abschluss-knopf) { translate: none; opacity: 1; transition: none; }
  .ak-linie, .ak-ring, .ak-kern, .ak-schild { transition: none; }
}