/* Erstgespräch-Fenster (Entwurf, 23.10.2026, spät): hinter allen Knöpfen „Erstgespräch buchen“ und dem Link im Fuß. Aufbau nach Visioned (Fenster
   von rechts mit Rand zum Bildschirm, links Kontakt, rechts der Ablauf), Felder als dunkle Kästen wie bei Terminal, Linien mit Plus wie Heron. Links
   die Seekarte aus dem Hero: der Kurs fährt mit jedem Schritt ein Stück weiter, bei der Bestätigung kommt er an. Am Handy ganzseitig ohne Karte.
   Farben über die Kanäle (hell und dunkel). Sonne nur für Auswahl, Fortschritt und den Pfeil. Skript: quelle/fenster.js. */
.eg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--rand);
           border: 0; background: transparent; color: var(--sand); overflow: hidden; }
.eg[open] { display: flex; justify-content: flex-end; }
.eg::backdrop { background: rgb(var(--hg-k) / .84); opacity: 0; transition: opacity .5s var(--aus); }
.eg.da::backdrop { opacity: 1; }
.eg.geht::backdrop { opacity: 0; transition-duration: .35s; }
html.eg-offen { overflow: hidden; }
.eg a:not(.knopf) { color: inherit; text-decoration: none; }   /* der Kalender-Knopf ist ein Link und behält die Farbe des Knopfs (28.10.) */
.eg-klein a, .eg-kontakt-klein a { text-decoration: underline; text-decoration-color: rgb(var(--vg-k) / .35); text-underline-offset: 3px; }

.eg-rahmen { position: relative; width: min(1240px, 100%); height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                  background: var(--nacht); border: 1px solid rgb(var(--vg-k) / .14); border-radius: var(--radius); overflow: hidden;
                  will-change: translate; }   /* Ein- und Ausfahrt rechnet fenster.js (eine Bewegung, gleichmäßig auslaufend) */

/* links: Lage, Seekarte, Kontakt */
.eg-seite { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid var(--zl); background: rgb(var(--hg2-k)); overflow: hidden; }
.eg-lage { position: relative; z-index: 2; display: flex; justify-content: space-between; margin: 0; padding: 14px 18px; color: var(--leise); font-size: 12px; letter-spacing: .01em; }
.eg-karte { position: relative; grid-row: 2; display: block; width: 100%; height: 100%; min-height: 0; }   /* zwischen Lage und Kontakt: die Boje liegt nie unter dem Kontakt */
/* Karte: Kamerafahrt mit Boot (fenster.js). Licht nur auf den Linien, Sonne für Licht, gewählte Bojen und das Ziel */
.fk-linien path { fill: none; stroke: rgb(var(--vg-k) / .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fk-licht path { fill: none; stroke: var(--sonne); stroke-width: 1.15; vector-effect: non-scaling-stroke; }
html.hell .fk-licht path { stroke: var(--sonne-700); }
.fk-bootlicht { opacity: .9; }
.fk-bojenlicht { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 1.1s var(--aus); }
.fk-bojenlicht.an { scale: 1; }
.fk-kurs-vor { fill: none; stroke: rgb(var(--vg-k) / .2); stroke-width: 1.3; stroke-dasharray: 1.3 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fk-kurs { fill: none; stroke: rgb(var(--vg-k) / .85); stroke-width: 1.8; stroke-dasharray: 1.6 7; stroke-linecap: round; }
.fk-weg { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fk-boje-ring { fill: var(--nacht); stroke: rgb(var(--vg-k) / .5); stroke-width: 1.3; transition: stroke .5s var(--aus), fill .5s var(--aus); }
.fk-boje-zahl { fill: rgb(var(--vg-k) / .72); font: 500 12px/1 var(--schrift); text-anchor: middle; transition: fill .5s var(--aus); }
.fk-boje.an .fk-boje-ring { stroke: var(--sonne); fill: rgb(255 106 31 / .18); }
.fk-boje.an .fk-boje-zahl { fill: var(--sand); }
.fk-ziel-ring { fill: var(--nacht); stroke: rgb(var(--vg-k) / .55); stroke-width: 1.4; }
.fk-ziel-kern { fill: rgb(var(--vg-k) / .5); transition: fill .6s var(--aus); }
.fk-ziel.an .fk-ziel-kern { fill: var(--sonne); }
.fk-ziel.an .fk-ziel-ring { stroke: var(--sonne); }
.fk-puls { fill: none; stroke: var(--sonne); stroke-width: 1.4; opacity: 0; }
.fk-rumpf { fill: var(--nacht); stroke: rgb(var(--vg-k) / .95); stroke-width: 1.4; stroke-linejoin: round; }
.fk-kajuete { fill: none; stroke: rgb(var(--vg-k) / .7); stroke-width: 1.1; }
.fk-kiel { fill: none; stroke: rgb(var(--vg-k) / .75); stroke-width: 1; stroke-linecap: round; }
.eg-kontakt { position: relative; z-index: 2; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--zl);
                   font-size: 15px; line-height: 1.5; letter-spacing: -.005em; }
.fk-zelle { position: relative; padding: 22px 18px 24px; }
.fk-zelle + .fk-zelle { border-left: 1px solid var(--zl); }
.fk-zelle .knoten { position: absolute; inset: -1px auto auto -1px; width: calc(200% + 1px); height: 1px; pointer-events: none; }
.eg-kopf { margin: 0 0 10px; color: rgb(var(--vg-k) / .5); font: 500 13px/1.2 var(--schrift); letter-spacing: -.003em; }
.eg-kontakt p, .eg-kontakt address { margin: 0; font-style: normal; color: var(--leise); }
.eg-kontakt .fuss-link { color: var(--leise); }
.eg-kontakt .eg-kopf { color: rgb(var(--vg-k) / .5); }

/* rechts: Kopf mit Fortschritt, darunter der Schritt */
.eg-haupt { position: relative; display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
                 padding: 0 clamp(24px, 3.4vw, 56px) clamp(24px, 3vw, 40px); scrollbar-width: thin; }
.eg-oben { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
                margin: 0 calc(clamp(24px, 3.4vw, 56px) * -1); padding: 14px clamp(24px, 3.4vw, 56px) 14px; background: var(--nacht); border-bottom: 1px solid var(--zl); }
.eg-name { margin: 0; font: 500 14px/1 var(--schrift); letter-spacing: -.003em; }
.eg-fortschritt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eg-fortschritt li { display: grid; gap: 8px; min-width: 0; }
.ff-strich { position: relative; display: block; height: 2px; background: rgb(var(--vg-k) / .14); overflow: hidden; }
.ff-strich::after { content: ""; position: absolute; inset: 0; background: var(--sonne); scale: 0 1; transform-origin: left; transition: scale .7s var(--sanft); }
.eg-fortschritt li.fertig .ff-strich::after, .eg-fortschritt li.jetzt .ff-strich::after { scale: 1 1; }
.eg-fortschritt li.jetzt .ff-strich::after { scale: .5 1; }
.ff-name { overflow: hidden; color: var(--leise); font-size: 12px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; transition: color .4s var(--aus); }
.eg-fortschritt li.jetzt .ff-name { color: var(--sand); }
.eg-zu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(var(--vg-k) / .22); border-radius: var(--radius);
              background: transparent; color: var(--sand); cursor: pointer; transition: border-color .3s var(--aus), background-color .3s var(--aus); }
.eg-zu svg { width: 20px; height: 20px; transition: rotate .4s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .eg-zu:hover { border-color: rgb(var(--vg-k) / .6); background: rgb(var(--vg-k) / .06); }
  .eg-zu:hover svg { rotate: 90deg; }
}
.eg :focus-visible { outline: 2px solid var(--sonne); outline-offset: 3px; }
html.hell .eg :focus-visible { outline-color: var(--sonne-700); }

.eg-schritt { display: flex; flex-direction: column; flex: 1; padding-top: clamp(36px, 6vh, 72px); }
.eg-schritt[hidden] { display: none; }
.eg-schritt.kommt { animation: eg-kommt .6s var(--sanft) both; }
.eg-schritt.kommt-zurueck { animation: eg-kommt-zurueck .6s var(--sanft) both; }
@keyframes eg-kommt { from { opacity: 0; translate: 28px 0; } }
@keyframes eg-kommt-zurueck { from { opacity: 0; translate: -28px 0; } }
.eg-titel { margin: 0; font: 320 clamp(32px, 18px + 1.9vw, 52px)/1.02 var(--schrift); letter-spacing: -.04em; text-wrap: balance; outline: none; }
html.hell .eg-titel { font-weight: 300; }
.eg-satz { margin: 14px 0 0; max-width: 46ch; color: var(--leise); font-size: clamp(16px, 15px + .2vw, 18px); line-height: 1.45; text-wrap: pretty; }
.eg-auswahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.eg-auswahl span { padding: 6px 10px; border: 1px solid rgb(var(--vg-k) / .16); border-radius: 3px; color: rgb(var(--vg-k) / .78); font-size: 13px; line-height: 1; }

/* Auswahl: Zeilen (Anliegen), Pillen (Budget, Start), Kacheln (Tage, Zeiten). Das Feld selbst liegt unsichtbar darüber, der Rahmen zeigt den Zustand. */
.eg-wahl-gruppe { margin: clamp(24px, 3.4vh, 36px) 0 0; padding: 0; border: 0; min-width: 0; }
.eg-wahl-legende { margin: 0 0 12px; padding: 0; color: rgb(var(--vg-k) / .86); font-size: 15px; letter-spacing: -.005em; }
.eg-wahl { position: relative; display: grid; align-items: center; border: 1px solid rgb(var(--vg-k) / .14); border-radius: var(--radius); cursor: pointer;
        background: rgb(var(--vg-k) / .025); transition: border-color .3s var(--aus), background-color .3s var(--aus); }
.eg-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eg-wahl:has(input:focus-visible) { outline: 2px solid var(--sonne); outline-offset: 3px; }
html.hell .eg-wahl:has(input:focus-visible) { outline-color: var(--sonne-700); }
.eg-wahl:has(input:checked) { border-color: var(--sonne); background: rgb(255 106 31 / .07); }
@media (hover: hover) and (pointer: fine) { .eg-wahl:hover { border-color: rgb(var(--vg-k) / .4); } .eg-wahl:has(input:checked):hover { border-color: var(--sonne); } }
.eg-wahl-name { font-size: 16px; line-height: 1.2; letter-spacing: -.01em; pointer-events: none; }
.eg-wahl-liste { display: grid; gap: 8px; }
.eg-wahl-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name zeichen" "satz zeichen"; gap: 4px 16px; padding: 16px 18px; }
.eg-wahl-zeile .eg-wahl-name { grid-area: name; font-size: 18px; }
.eg-wahl-satz { grid-area: satz; color: var(--leise); font-size: 14px; line-height: 1.35; pointer-events: none; }
.eg-wahl-zeichen { grid-area: zeichen; position: relative; width: 20px; height: 20px; border: 1px solid rgb(var(--vg-k) / .4); border-radius: 3px; pointer-events: none;
                transition: background-color .25s var(--aus), border-color .25s var(--aus); }
.eg-wahl-zeichen::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--nacht); border-width: 0 1.8px 1.8px 0;
                       rotate: 45deg; scale: 0; transition: scale .25s var(--aus); }
.eg-wahl:has(input:checked) .eg-wahl-zeichen { background: var(--sonne); border-color: var(--sonne); }
.eg-wahl:has(input:checked) .eg-wahl-zeichen::after { scale: 1; }
.eg-wahl-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.eg-wahl-pille { padding: 13px 16px; }
.eg-wahl-pille .eg-wahl-name { font-size: 15px; white-space: nowrap; }

/* Weg: zwei große Flächen */
.eg-weg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(28px, 4vh, 44px); }
.eg-weg { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 184px; padding: 22px 22px 20px; text-align: left;
       border: 1px solid rgb(var(--vg-k) / .14); border-radius: var(--radius); background: rgb(var(--vg-k) / .025); color: var(--sand); font: inherit; cursor: pointer;
       transition: border-color .3s var(--aus), background-color .3s var(--aus); }
.eg-weg-name { font: 320 clamp(24px, 16px + .9vw, 32px)/1.05 var(--schrift); letter-spacing: -.03em; }
.eg-weg-satz { color: var(--leise); font-size: 15px; line-height: 1.45; max-width: 30ch; }
.eg-weg-pfeil { justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; background: rgb(var(--vg-k) / .08); color: var(--sand);
             transition: background-color .3s var(--aus), color .3s var(--aus); }
.eg-weg-pfeil svg { width: 16px; height: 16px; transition: translate .35s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .eg-weg:hover { border-color: var(--sonne); background: rgb(255 106 31 / .06); }
  .eg-weg:hover .eg-weg-pfeil { background: var(--sonne); color: var(--nacht); }
  .eg-weg:hover .eg-weg-pfeil svg { translate: 3px 0; }
}

/* Termin: Tage als Reihe zum Wischen, Uhrzeiten im Raster */
.eg-tage { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: 8px; overflow-x: auto; margin: -5px; padding: 5px 5px 11px; scroll-padding-inline: 12px; scrollbar-width: thin; }
.eg-tage .eg-wahl { grid-template-rows: auto auto; justify-items: center; gap: 4px; padding: 12px 6px; }
.eg-tage .eg-wahl-tag { color: var(--leise); font-size: 13px; line-height: 1; pointer-events: none; }
.eg-tage .eg-wahl-name { font-size: 17px; }
.eg-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.eg-zeiten .eg-wahl { justify-items: center; padding: 12px 6px; }
.eg-zeiten .eg-wahl-name { font-size: 15px; font-variant-numeric: tabular-nums; }
.eg-zeiten[data-fehler] .eg-wahl { border-color: rgb(255 106 31 / .5); }

/* Felder */
.eg-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(24px, 3.4vh, 36px); }
.eg-feld { display: grid; align-content: start; gap: 8px; min-width: 0; }
.eg-feld-breit { grid-column: 1 / -1; }
.eg-feld label { color: rgb(var(--vg-k) / .86); font-size: 14px; letter-spacing: -.003em; }
.eg-feld input, .eg-feld textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgb(var(--vg-k) / .16); border-radius: var(--radius);
                              background: rgb(var(--vg-k) / .035); color: var(--sand); font: 400 16px/1.4 var(--schrift); letter-spacing: -.005em;
                              transition: border-color .3s var(--aus), background-color .3s var(--aus); }
.eg-feld textarea { resize: vertical; min-height: 120px; }
.eg-feld input:focus, .eg-feld textarea:focus { outline: none; border-color: var(--sonne); background: rgb(var(--vg-k) / .05); }
.eg-feld input:focus-visible, .eg-feld textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--sonne); }
.eg-feld input[aria-invalid="true"] { border-color: var(--sonne); }
.eg-feld-fehler { margin: 0; color: var(--sonne); font-size: 14px; line-height: 1.35; }
html.hell .eg-feld-fehler { color: var(--sonne-700); }
.eg-wahl-gruppe > .eg-feld-fehler { margin-top: 10px; }

.eg-klein { margin: 18px 0 0; max-width: 62ch; color: var(--leise); font-size: 13px; line-height: 1.45; }
.eg-klein .fuss-link { font-size: 13px; padding: 0; color: rgb(var(--vg-k) / .8); }
.eg-entwurf { color: var(--leise); font-size: 13px; line-height: 1.3; }
p.eg-entwurf { margin: 18px 0 0; }

/* unten: Zurück links, Überspringen und Weiter rechts */
.eg-unten { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: clamp(28px, 4vh, 48px); }
.fu-rechts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 22px; }
.eg-leise { position: relative; padding: 10px 0; border: 0; background: none; color: rgb(var(--vg-k) / .72); font: 500 15px/1 var(--schrift); letter-spacing: -.005em; cursor: pointer;
                 transition: color .3s var(--aus); }
.eg-leise::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale var(--raus); }
@media (hover: hover) and (pointer: fine) {
  .eg-leise:hover { color: var(--sand); }
  .eg-leise:hover::after { scale: 1 1; transform-origin: left; transition: scale .6s var(--lade); }
}
.eg button.knopf { border: 0; cursor: pointer; }
.eg-kontakt-klein { display: none; margin: 22px 0 0; color: rgb(var(--vg-k) / .55); font-size: 13px; }
.eg-kontakt-klein .fuss-link { font-size: 13px; }

@media (max-width: 1100px) {
  .eg-rahmen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .eg-kontakt { grid-template-columns: 1fr; }
  .fk-zelle + .fk-zelle { border-left: 0; border-top: 1px solid var(--zl); }
}
@media (max-width: 860px) {
  .eg { padding: 0; }
  .eg-rahmen { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; }
  .eg-seite { display: none; }
  .eg-oben { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .eg-name { display: none; }
  .ff-name { font-size: 11px; }
  .ff-name[data-kurz] { font-size: 0; }
  .ff-name[data-kurz]::after { content: attr(data-kurz); font-size: 11px; }
  .eg-haupt { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .eg-schritt { padding-top: 32px; }
  .eg-weg-wahl, .eg-felder { grid-template-columns: 1fr; }
  .eg-weg { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .eg-weg-name { grid-column: 1; } .eg-weg-satz { grid-column: 1; } .eg-weg-pfeil { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .eg-unten { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: auto calc(clamp(24px, 3.4vw, 56px) * -1) 0; padding: 14px clamp(24px, 3.4vw, 56px);
                   background: var(--nacht); border-top: 1px solid var(--zl); }
  .eg-entwurf { display: none; }
  p.eg-entwurf { display: block; }
  .eg-kontakt-klein { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-schritt.kommt, .eg-schritt.kommt-zurueck { animation: none; }
  .ff-strich::after { transition: none; }
}