/* maria-matthaeus.de · Richtung „Bahn frei“ (B3 Weiß 1b) · Phase 5, 19.10.2026 */
/* Fira Sans, selbst gehostet (SIL Open Font License 1.1, siehe LICENSES.md) */
@font-face{font-family:"Fira Sans"; src:url(../fonts/FiraSans-Regular.woff) format("woff"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Fira Sans"; src:url(../fonts/FiraSans-Italic.woff) format("woff"); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:"Fira Sans"; src:url(../fonts/FiraSans-Medium.woff) format("woff"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Fira Sans"; src:url(../fonts/FiraSans-Bold.woff) format("woff"); font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"Fira Sans"; src:url(../fonts/FiraSans-ExtraBold.woff) format("woff"); font-weight:800; font-style:normal; font-display:swap}
/* Ersatzschrift mit angeglichener Breite, damit beim Laden wenig springt */
@font-face{font-family:"Fira Sans Fallback"; src:local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust:101%; ascent-override:93.5%; descent-override:26.5%; line-gap-override:0%}

/* Layout: „Bahn frei“, B3 Weiß 1b. Weißer Grund, Navy-Schrift, Logo-Sicheln Teal → Navy um die Porträt-Scheibe, Bahnenleine als Abschnittstrenner, Kapitel als Farbflächen in CI-Petrol und CI-Mint. Bewusst nur heller Auftritt. */
:root{
  --navy:#1A1D56; --petrol:#003A55; --dpetrol:#002F49; --teal:#1CA38F; --mint:#82B4B6; --grau:#A4ACB1; --weiss:#FFFFFF; --hell:#FAFAFB;
  --text:var(--navy); --text-2:#003A55;
  --sans:"Fira Sans", "Fira Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gutr:max(16px, env(safe-area-inset-right, 0px));
  --max:1180px;
  /* Stellschrauben Einstieg (Phase 6, Regler-Panel) */
  --name-groesse:clamp(56px,8.6vw,124px); --scheibe:470px; --einstieg-luft:40px;
  --einstieg-oben:56px; --h1-groesse:clamp(22px,2.3vw,30px); --text-abstand:22px;
  /* Werte aus dem Regler-Panel (Maria, 23.10.2026), ab 821 px */
  color-scheme:light;
}
/* Regler-Werte von Maria (80 / 24 / 20) gelten, wo der Bildschirm hoch genug ist. Auf niedrigeren Bildschirmen
   rücken Abstände, Name und Scheibe zusammen, damit die Bahnenleine im ersten Bildschirm sichtbar bleibt. */
@media (min-width:821px){ :root{
  --einstieg-oben:clamp(20px, calc(100vh - 820px), 80px);
  --text-abstand:clamp(12px, 2.4vh, 24px);
  --einstieg-luft:20px;
  --name-groesse:clamp(56px, min(8.6vw, 12vh), 124px);
  --scheibe:min(470px, 64vh);
} }
@media (min-width:1200px){ .hero .pause{position:absolute; right:0; bottom:2px} }
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--weiss); color:var(--text); font-family:var(--sans); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
::selection{background:var(--mint); color:var(--navy)}
a{color:inherit; text-decoration-thickness:1.5px; text-underline-offset:.18em}
/* Hover: Text behält seine Farbe (Teal ist keine Textfarbe), die Unterstreichung wird kräftig Teal */
a:hover{text-decoration-thickness:3px; text-decoration-color:var(--teal)}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:4px}
.in{max-width:var(--max); margin:0 auto; padding-left:var(--gut); padding-right:var(--gutr)}
p{margin:0}
h2{font-size:clamp(30px,4.2vw,52px); line-height:1.08; font-weight:800; letter-spacing:-.015em; margin:0; text-wrap:balance}
h3{font-size:clamp(19px,1.6vw,22px); line-height:1.25; font-weight:700; margin:0}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Bahn-Fähnchen: Beschriftung am Beckenrand */
.lane{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2)}
.lane b{min-width:26px; height:26px; padding:0 7px; border-radius:99px; background:var(--navy); color:#fff; display:inline-grid; place-items:center; font-size:13px; letter-spacing:0}
.on-dark .lane{color:var(--mint)} .on-dark .lane b{background:#fff; color:var(--navy)}

/* Knöpfe */
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--navy); color:#fff; font-weight:700; font-size:17px; padding:14px 24px; border-radius:99px; text-decoration:none; border:0; cursor:pointer; transition:background .2s, transform .2s}
.btn i{width:10px; height:10px; border-radius:50%; background:var(--teal)}
.btn:hover{background:#262a73; color:#fff}
.btn:active{transform:translateY(1px)}
.on-dark .btn{background:#fff; color:var(--navy)} .on-dark .btn:hover{background:#e9f2f2; color:var(--navy)}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px}
.cta-row small{font-size:15px; color:var(--text-2)}

/* Leine mit runden Schwimmkörpern */
.rope{height:18px; background:
  radial-gradient(circle at center,var(--navy) 0 6px,transparent 6.5px) 0 0/66px 18px repeat-x,
  radial-gradient(circle at center,var(--teal) 0 6px,transparent 6.5px) 22px 0/66px 18px repeat-x,
  radial-gradient(circle at center,var(--mint) 0 6px,transparent 6.5px) 44px 0/66px 18px repeat-x,
  linear-gradient(var(--navy),var(--navy)) 0 50%/100% 1.5px no-repeat}

/* Kopf */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:rgba(255,255,255,.9)}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(26,29,86,.07)}
.top .in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px}
.top .logo img{height:44px; width:auto; display:block}
.top nav{display:flex; align-items:center; gap:28px}
.top nav a{text-decoration:none; font-weight:500; font-size:17px}
.top .btn{padding:11px 20px; font-size:16px; white-space:nowrap}
.top .btn .short{display:none}
.top .btn{transition:opacity .25s ease, visibility .25s}
.top.cta-aus .btn{opacity:0; visibility:hidden}
.nav-links{display:flex; align-items:center; gap:28px}
.menue-knopf{display:none}
@media (max-width:820px){
  .top .btn .long{display:none} .top .btn .short{display:inline} .top .logo img{height:36px}
  .top nav{gap:10px}
  .nav-links{display:none}
  .js .menue-knopf{display:inline-flex; align-items:center; gap:6px; font:inherit; font-weight:600; font-size:15px; color:var(--navy); background:#fff; border:1.5px solid rgba(26,29,86,.25); border-radius:99px; padding:8px 14px; min-height:44px; cursor:pointer}
  .menue-knopf .ic{width:20px; height:20px}
  .menue-knopf .auf, .top.menue-offen .menue-knopf .zu{display:none}
  .top.menue-offen .menue-knopf .auf{display:inline}
  .top.menue-offen .nav-links{display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid rgba(26,29,86,.12); box-shadow:0 18px 30px -24px rgba(26,29,86,.5); padding:4px max(16px, 5vw) 12px}
  .top.menue-offen .nav-links a{display:flex; align-items:center; min-height:52px; font-size:19px; font-weight:600; border-bottom:1px solid rgba(26,29,86,.08)}
  .top.menue-offen .nav-links a:last-child{border-bottom:0}
}

@media (max-width:440px){ .top .btn{padding:9px 14px; font-size:14px; gap:8px} .top .logo img{height:30px} .top .in{gap:10px} }
@media (max-width:820px){ .top.cta-aus .btn{display:none} }
@media (max-width:480px){ .top .logo{overflow:hidden; width:46px; flex:none} .top .logo img{height:32px; max-width:none} }
@media (max-width:440px){ .menue-knopf .menue-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .js .menue-knopf{padding:8px 11px} }
@media (max-width:350px){ .top .btn{padding:8px 11px; font-size:13px; gap:6px} .top .logo img{height:26px} .top .in{gap:8px} }
/* Einstieg */
.hero{position:relative; overflow:hidden}
.hero .in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:var(--einstieg-luft); padding-block:var(--einstieg-oben) clamp(24px,3.5vh,64px); min-height:min(720px, calc(100vh - 112px))}
.hero .text{display:grid; gap:var(--text-abstand); position:relative; z-index:2; min-width:0}
.hero .name{font-size:var(--name-groesse); line-height:.9; font-weight:800; letter-spacing:-.03em; margin:0}
.hero h1{font-size:var(--h1-groesse); line-height:1.28; font-weight:700; margin:0; max-width:21em}
.hero h1 .wechsel{display:inline-block; background:var(--navy); color:#fff; padding:0 .32em; border-radius:.25em; transition:opacity .35s ease}
.hero .unter{font-size:clamp(17px,1.4vw,19px); color:var(--text-2); max-width:34em}
.pause{font:inherit; font-size:14px; color:var(--text-2); background:none; border:1px solid rgba(0,58,85,.3); border-radius:99px; padding:4px 12px; cursor:pointer; justify-self:start}
.pause:hover{border-color:var(--navy); color:var(--navy)}
.disc-wrap{position:relative; width:min(100%, var(--scheibe)); aspect-ratio:1; justify-self:center; z-index:1}
.disc{position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:2}
.disc img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block}
.disc-wrap .rings{position:absolute; left:-105.17%; top:-174.14%; width:448.28%; height:344.83%; z-index:1; pointer-events:none; overflow:visible}
.credit-foto{position:absolute; right:0; bottom:-30px; font-size:12px; color:var(--text-2); z-index:2}
.hero + .rope{margin-top:0}
@media (max-width:860px){
  .hero .in{grid-template-columns:1fr; padding-block:16px 40px; min-height:0; gap:18px}
  .hero .text{gap:16px} .hero .unter{font-size:16px}
  .disc-wrap{order:-1; width:min(50vw, 230px); justify-self:start; margin-left:4vw}
  .disc-wrap .rings path:nth-of-type(n+5){display:none}
  .disc-wrap .rings{clip-path:inset(0 0 19% 0)}
}
.rings path{transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
  .rings path{animation:ring 1.4s cubic-bezier(.16,1,.3,1) both}
  @keyframes ring{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
}

/* Abschnitte */
section.kap{padding-block:clamp(64px,9vw,120px)}
.kap .head{display:grid; gap:16px; margin-bottom:clamp(28px,4vw,48px); max-width:900px}
.prose{display:grid; gap:18px; max-width:68ch}
.on-dark{color:#fff}
.petrol{background:var(--petrol)} .petrol .prose, .petrol p{color:#E6F1F2}
.mintflaeche{background:var(--mint)} .mintflaeche .lane{color:var(--navy)}

/* Problem */
.problem .klammer{display:inline-block; font-weight:700; color:#fff; border-bottom:2px solid var(--teal); transition:opacity .35s}
.problem .gross{font-size:clamp(22px,2.4vw,30px); line-height:1.35; font-weight:500; color:#fff; max-width:30em}
.problem .knoten{margin-top:8px; font-size:clamp(20px,2vw,26px); line-height:1.4; font-weight:700; color:#fff; max-width:32em}

/* Haltung */
.haltung .in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:start}
.haltung .head{position:sticky; top:110px}
@media (max-width:860px){ .haltung .in{grid-template-columns:1fr} .haltung .head{position:static} }

/* Angebote */
.zitat{margin:0 0 clamp(32px,4vw,48px); display:grid; gap:6px; max-width:44em}
.zitat p:first-child{font-size:clamp(22px,2.4vw,30px); font-weight:500; line-height:1.3}
.zitat p:nth-child(2){font-size:18px}
.zitat cite{font-style:normal; font-size:15px; font-weight:700; letter-spacing:.04em}

/* Ablauf in Bahnen */
.bahnen{position:relative; border-top:0}
.bahn{position:relative; display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1.6fr); gap:24px; align-items:center; padding:30px 72px 30px 0; transition:background .5s}
.bahn + .bahn::before, .bahnen::after{content:""; position:absolute; left:0; right:0; top:-9px; height:18px; background:
  radial-gradient(circle at center,var(--navy) 0 5px,transparent 5.5px) 0 0/60px 18px repeat-x,
  radial-gradient(circle at center,var(--teal) 0 5px,transparent 5.5px) 20px 0/60px 18px repeat-x,
  radial-gradient(circle at center,var(--mint) 0 5px,transparent 5.5px) 40px 0/60px 18px repeat-x,
  linear-gradient(var(--navy),var(--navy)) 0 50%/100% 1.5px no-repeat}
.bahnen::after{top:auto; bottom:-9px}
.bahn .nr{font-size:72px; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:2px var(--navy)}
.bahn .t{font-size:clamp(20px,1.8vw,24px); font-weight:700}
.bahn .d{max-width:60ch; color:var(--text-2)}
.bahn.aktiv{background:#EEF5F5}
.schwimmer{position:absolute; right:22px; top:0; width:26px; height:26px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 9px rgba(28,163,143,.18), 0 0 0 20px rgba(28,163,143,.07); transition:transform .8s cubic-bezier(.16,1,.3,1); pointer-events:none}
@media (prefers-reduced-motion:reduce){ .schwimmer{transition:none} }
@media (max-width:760px){ .bahn{grid-template-columns:64px minmax(0,1fr); padding-right:52px} .bahn .nr{font-size:48px} .bahn .d{grid-column:1 / -1} .schwimmer{right:12px} }

/* Beispiele */
.beispiele{display:grid; gap:0}
.beispiel{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(20px,4vw,56px); padding-block:32px; border-top:2px solid var(--navy)}
.beispiel:last-child{border-bottom:2px solid var(--navy)}
.beispiel p{max-width:66ch}
@media (max-width:760px){ .beispiel{grid-template-columns:1fr} }

/* Stimmen */
.stimmen{columns:2 360px; column-gap:clamp(28px,4vw,56px)}
.stimme{break-inside:avoid; margin:0 0 36px; display:grid; gap:12px}
.stimme blockquote{margin:0; font-size:clamp(19px,1.6vw,22px); line-height:1.45; color:#fff}
.stimme figcaption{font-size:15px; color:var(--mint); font-weight:500}
.stimme figcaption b{color:#fff; font-weight:700}
.petrol a{color:#fff} .petrol a:hover{color:var(--mint)}

/* Über mich kurz */
.kurz .in{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:center}
.kurz .bild{width:min(100%,360px); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 0 0 6px #fff, 0 0 0 10px var(--navy)}
.kurz .bild img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block}
@media (max-width:760px){ .kurz .in{grid-template-columns:1fr} .kurz .bild{width:min(64vw,260px)} }

/* Fragen */
.fragen{border-top:2px solid var(--navy)}
.fragen details{border-bottom:1px solid rgba(26,29,86,.25)}
.fragen summary{list-style:none; cursor:pointer; padding:22px 48px 22px 0; position:relative; font-size:clamp(19px,1.6vw,22px); font-weight:700}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:""; position:absolute; right:6px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; border:2px solid var(--navy); background:
  linear-gradient(var(--navy),var(--navy)) center/10px 2px no-repeat, linear-gradient(var(--navy),var(--navy)) center/2px 10px no-repeat}
.fragen details[open] summary::after{background:linear-gradient(#fff,#fff) center/10px 2px no-repeat; background-color:var(--teal); border-color:var(--teal)}
.fragen .a{padding:0 0 26px; max-width:70ch; color:var(--text-2)}
.fragen .a a{color:var(--navy)}

/* Schluss */
.schluss{position:relative; overflow:hidden; background:var(--hell)}
.schluss .in{display:grid; gap:22px; padding-block:clamp(80px,10vw,140px); position:relative; z-index:2}

.schluss .mail{font-size:17px; color:var(--text-2)}
.schluss .mail span{font-weight:700; color:var(--navy); user-select:all}

/* Bilder in den Kapiteln */
.foto{margin:0; border-radius:22px; overflow:hidden; background:#e8eef0}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto figcaption{font-size:13px; padding-top:8px}
.problem .in{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr); gap:clamp(28px,5vw,72px); align-items:start}
.problem .head{grid-column:1/-1; margin-bottom:0}
.problem .foto{aspect-ratio:3/4; position:sticky; top:110px}
.haltung .band{grid-column:1/-1; aspect-ratio:21/9; margin-bottom:clamp(8px,2vw,24px)}
.haltung .band img{object-position:78% 60%}
@media (max-width:860px){ .problem .in{grid-template-columns:1fr} .problem .foto{position:static; aspect-ratio:4/3; max-width:520px} .haltung .band{aspect-ratio:4/3} }
.stimme.bild .foto{aspect-ratio:4/3}
.fr-wrap{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:start}
.fr-wrap .links-sp{position:sticky; top:110px; display:grid; gap:24px}
.fr-wrap .foto{aspect-ratio:3/4; max-width:360px}
@media (max-width:860px){ .fr-wrap{grid-template-columns:1fr} .fr-wrap .links-sp{position:static} .fr-wrap .foto{max-width:300px; aspect-ratio:1} }
/* Schluss mit Scheibe */
.schluss-art{position:absolute; right:-420px; top:56%; width:1200px; aspect-ratio:2600/2000; transform:translateY(-50%); z-index:1; pointer-events:none}
.schluss-art svg{position:absolute; inset:0; width:100%; height:100%}
.schluss-art .disc2{position:absolute; left:23.46%; top:50.5%; width:22.31%; aspect-ratio:1; border-radius:50%; overflow:hidden}
.disc2 img{width:100%; height:100%; object-fit:cover; object-position:58% 50%; display:block}
.schluss .disc-m{display:none}
@media (max-width:900px){ .schluss-art{display:none} .schluss .disc-m{display:block; width:180px; aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 0 0 6px #fff, 0 0 0 10px var(--teal)} .schluss .disc-m img{width:100%;height:100%;object-fit:cover;object-position:58% 50%} }
/* Seite Über mich */
.hero h1.name{font-size:var(--name-groesse); line-height:.9; max-width:none}
.ue-hero .prose{font-size:clamp(18px,1.5vw,21px); color:var(--text-2)}
.ue-story{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,5vw,72px); align-items:start}
.ue-story .foto{aspect-ratio:3/4; position:sticky; top:110px}
@media (max-width:860px){ .ue-story{grid-template-columns:1fr} .ue-story .foto{position:static; max-width:420px} }
.tafel{list-style:none; margin:0; padding:0; border-top:2px solid var(--navy)}
.tafel li{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); gap:20px; padding:16px 0; border-bottom:1px solid rgba(26,29,86,.3); font-size:18px}
.tafel .z{font-weight:800; font-variant-numeric:tabular-nums}
@media (max-width:560px){ .tafel li{grid-template-columns:1fr; gap:2px} }
.ue-tv{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px)}
@media (max-width:860px){ .ue-tv{grid-template-columns:1fr} }
.ue-bg{background-color:var(--petrol); background-image:linear-gradient(rgba(0,58,85,.84),rgba(0,47,73,.9)),url(../img/fotos/A7_04879-1600.jpg); background-size:cover; background-position:center}
@supports (background-image:image-set(url(x.avif) type("image/avif"))){ .ue-bg{background-image:linear-gradient(rgba(0,58,85,.84),rgba(0,47,73,.9)),image-set(url(../img/fotos/A7_04879-1600.avif) type("image/avif"),url(../img/fotos/A7_04879-1600.webp) type("image/webp"),url(../img/fotos/A7_04879-1600.jpg) type("image/jpeg"))} }
.ue-tv{align-items:start} .ue-tv h2{font-size:clamp(28px,3.4vw,44px); overflow-wrap:anywhere; hyphens:auto}
.ue-tv .gross{font-size:clamp(22px,2.3vw,30px); line-height:1.35; color:#fff; font-weight:500}
/* Werdegang mit Globus */
.wg-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:start}
.globus{margin:0; position:sticky; top:100px; display:grid; gap:18px}
.gl-box{width:100%; max-width:440px; aspect-ratio:1; position:relative}
.gl-box canvas{cursor:grab} .gl-box canvas:active{cursor:grabbing}
.gl-zoom{position:absolute; right:2%; bottom:2%; z-index:2; display:grid; gap:6px}
.gl-zoom button{font:inherit; font-weight:700; font-size:20px; line-height:1; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--navy); background:#fff; color:var(--navy); cursor:pointer; display:grid; place-items:center}
.gl-zoom button.welt{font-size:12px; letter-spacing:.02em}
.gl-zoom button:hover{background:#EEF5F5}
.gl-box canvas{display:block}
.globus figcaption{display:grid; gap:12px} .gl-titel{font-weight:700; font-size:clamp(19px,1.7vw,22px)} .gl-unter{font-size:15px; color:var(--text-2); margin-top:-8px}
.gl-laender{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.gl-laender button{font:inherit; font-size:15px; font-weight:700; color:var(--navy); background:rgba(255,255,255,.7); border:1px solid rgba(26,29,86,.25); border-radius:99px; padding:6px 14px; cursor:pointer; display:inline-flex; gap:6px; align-items:baseline}
.gl-laender button span{font-weight:400; font-size:13px; color:var(--text-2)}
.gl-laender button{flex-wrap:wrap; text-align:left; column-gap:6px; row-gap:0}
.gl-laender button:hover, .gl-laender button[aria-pressed="true"]{background:#fff; border-color:var(--navy)}
.globus .pause{color:var(--navy); border-color:rgba(26,29,86,.35)}
@media (max-width:900px){ .wg-grid{grid-template-columns:1fr} .globus{position:static} .gl-box{max-width:340px} }
/* Angebote: Leuchtturm */
.optL{position:relative; overflow:hidden; background:var(--dpetrol); color:#fff}
.optL .grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,80px); position:relative; z-index:2}
.optL .links{display:grid; gap:20px; align-content:start; position:sticky; top:100px}
.optL .zitat{margin:0}
.optL .zitat p, .optL .zitat cite{color:#fff} .optL .zitat p:nth-child(2){color:var(--mint)}
.optL .turmwrap{--th:clamp(180px,22vw,300px); height:var(--th); position:relative}
.optL .turm{height:100%; width:auto; display:block; position:relative; z-index:1}
.optL .liste{display:grid; gap:0; position:relative}
.optL .ang{position:relative; overflow:hidden; padding:28px 92px 30px 0; border-top:1px solid rgba(130,180,182,.45); display:grid; gap:10px}
.optL .ang:last-of-type{border-bottom:1px solid rgba(130,180,182,.45)}
.optL .ang h3{color:#fff; font-size:clamp(20px,1.8vw,24px)} .optL .ang p{color:#DCE9EC; max-width:60ch}
.optL .ang .mark{position:absolute; right:-34px; top:-34px; width:120px; height:120px; pointer-events:none; opacity:.5; transition:opacity .8s, filter .8s, transform .8s cubic-bezier(.16,1,.3,1)}
.optL .ang.lit .mark{opacity:1; filter:drop-shadow(0 0 10px rgba(28,163,143,.9)) drop-shadow(0 0 22px rgba(130,180,182,.55)); transform:scale(1.06)}
.optL .beam{position:absolute; left:calc(var(--th)*.2); top:calc(var(--th)*.237); width:0; height:0; z-index:-1; pointer-events:none; --rot:-30deg}
.optL .beam::before{content:""; position:absolute; left:-1800px; top:-1800px; width:3600px; height:3600px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg 56deg, rgba(220,240,240,.12) 61deg, rgba(255,255,255,.22) 66deg, rgba(220,240,240,.12) 71deg, transparent 76deg 360deg);
  transform:rotate(var(--rot)); transition:transform 1.6s cubic-bezier(.45,0,.2,1)}
.optL .lichtweg{display:none}
@media (prefers-reduced-motion:no-preference){ .optL .laterne{animation:kennung 2.6s ease-in-out infinite} @keyframes kennung{0%,60%,100%{opacity:1} 75%{opacity:.45}} }
@media (prefers-reduced-motion:reduce){ .optL .beam::before{transition:none} }
@media (max-width:860px){
  .optL .grid{grid-template-columns:1fr} .optL .links{position:static}
  .optL .turmwrap{--th:140px} .optL .beam{display:none}
  .optL .liste{padding-left:22px}
  .optL .lichtweg{display:block; position:absolute; left:0; top:0; bottom:0; width:2px; background:rgba(130,180,182,.25); font-style:normal}
  .optL .lichtweg i{position:absolute; left:-4px; top:0; width:10px; height:var(--lw,0px); border-radius:5px; background:linear-gradient(180deg, rgba(28,163,143,0), #1CA38F); box-shadow:0 0 14px rgba(28,163,143,.7); transition:height .3s; display:block}
  .optL .ang{padding-right:76px} .optL .ang .mark{width:104px; height:104px; right:-28px; top:-28px}
}
/* Fuß */
footer{background:var(--navy); color:#fff; padding-block:56px 40px}
footer .in{display:grid; gap:18px; font-size:16px}
footer .logo img{height:52px; width:auto}
footer a{color:#fff} footer a:hover{color:var(--mint)}
footer .links{display:flex; flex-wrap:wrap; gap:8px 22px}
footer .kontakt{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline}
footer .kontakt a{font-weight:500; font-size:17px}
.nb{white-space:nowrap}
footer .kontakt .addr{color:var(--mint); user-select:all}
footer .social{display:flex; gap:12px; flex-wrap:wrap}
footer .soc{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; border:1.5px solid rgba(255,255,255,.5); border-radius:99px; padding:6px 16px 6px 6px}
footer .soc .ic{width:30px; height:30px; padding:5px; border-radius:50%; background:rgba(255,255,255,.12); stroke-width:1.8}
.mail-k{display:inline-flex; align-items:center; gap:8px}
.mail-k .ic{width:22px; height:22px; flex:none; stroke-width:1.8}
footer .mail-k .ic{color:var(--mint)}
.schluss .mail-k .ic{color:var(--teal)}
footer .soc:hover{border-color:#fff}
.schluss .mail a{font-weight:700; color:var(--navy)}
footer .ki{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:14px; color:var(--mint); margin-top:-6px}
footer .ki img{height:40px; width:auto; margin:0 -12px 0 -14px}
footer .klein{color:var(--mint); font-size:15px}

/* Ergänzungen Phase 5 */
picture{display:contents}
.skip{position:absolute; left:16px; top:-60px; z-index:40; background:var(--navy); color:#fff; padding:10px 18px; border-radius:99px; font-weight:700; text-decoration:none}
.skip:focus{top:12px; color:#fff}
.mt-48{margin-top:48px}
.pause-hell{color:#E6F1F2; border-color:rgba(255,255,255,.4)}
.pause-hell:hover{color:#fff; border-color:#fff}
.nowrap{white-space:nowrap}
.bahnen-wrap{position:relative}
.bahnen{list-style:none; margin:0; padding:0}
.ohne-oben{padding-top:0}
.schluss h2{max-width:14em}
.link-stark{font-weight:700}
/* Unterseiten (Impressum, Datenschutz, 404) */
.schlicht{padding-block:clamp(48px,7vw,96px)}
.schlicht .in{display:grid; gap:22px; max-width:820px}
.schlicht h1{font-size:clamp(40px,6vw,72px); line-height:1; font-weight:800; letter-spacing:-.02em; margin:0}
.schlicht h2{font-size:clamp(22px,2.4vw,28px); margin-top:18px}
.offen{background:#EEF5F5; border:1px solid rgba(26,29,86,.18); padding:14px 18px; border-radius:12px; color:var(--text-2)}
.mt-8{margin-top:8px}

/* Fehlerseite 404 „Abgetaucht“ (22.10.2026): leere Scheibe mit halb versunkener 404, Wege zurück als vier Bahnen */
.fehler .in{min-height:min(640px, calc(100vh - 76px))}
.fehler h1{font-size:clamp(40px,6vw,76px); line-height:1.02; font-weight:800; letter-spacing:-.025em; max-width:11em}
.fehler .disc-wrap{width:min(100%, 420px)}
.fehler .disc{box-shadow:inset 0 0 0 1.5px rgba(26,29,86,.08)}
.see{display:block; width:100%; height:100%}
.see .zahl{font-family:var(--sans); font-weight:800; font-size:172px; letter-spacing:-8px; fill:var(--navy)}
@media (max-width:860px){ .fehler .disc-wrap{width:min(64vw, 300px)} }
@media (prefers-reduced-motion:no-preference){
  .see .zahl{animation:boje 5.5s ease-in-out infinite alternate}
  .see .w1{animation:welle 8s linear infinite}
  .see .w2{animation:welle 12s linear infinite reverse}
  @keyframes boje{from{transform:translateY(-3px)} to{transform:translateY(5px)}}
  @keyframes welle{from{transform:translateX(0)} to{transform:translateX(100px)}}
}
.fehler-wege .bahn a.t{text-decoration:none; color:inherit}
.fehler-wege .bahn a.t::after{content:""; position:absolute; inset:0; z-index:1}
.fehler-wege .bahn a.t:focus-visible{outline:none}
.fehler-wege .bahn:has(a.t:focus-visible){outline:3px solid var(--teal); outline-offset:-3px; border-radius:6px}
.fehler-wege .bahn:hover .t{text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--teal); text-underline-offset:.18em}

/* Navigation: Unterstreichung in Teal beim Überfahren, Text bleibt Navy */
.top nav .nav-links a:hover{text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--teal); text-underline-offset:.3em}