/* paullittau.com · Richtung „Seekarte“ */

@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-wght-normal.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-latin-wght-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --noir:#05071F;
  --navy:#0D114C;
  --navy-licht:#132366;
  --magenta:#A9398A;
  --magenta-hell:#FD69D4;
  --magenta-text:#8E2C73;
  --platin:#C8CAD4;
  --weiss:#F2F3F7;
  --papier:#F2F3F7;
  --tinte:#0D114C;
  --tinte-2:#3E4370;

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Lato,"Segoe UI",Arial,sans-serif;

  --rand:clamp(16px,6vw,104px);
  --spalte-karte:240px;
  --kurs-x:calc(var(--rand) + 20px);
  --inhalt-max:1120px;
  --abschnitt-y:clamp(88px,11vw,168px);

  --h1:clamp(52px,8.4vw,120px);
  --h2:clamp(38px,5vw,68px);
  --h3:clamp(28px,2.6vw,36px);
  --zitat:clamp(28px,3.2vw,42px);
  --text:clamp(17px,1.25vw,19px);
  --klein:13px;

  --hero-text-oben:clamp(120px,18vh,220px);
  --hero-foto-breite:44vw;

  --linie:rgba(200,202,212,.22);
  --linie-hell:#D5D7E1;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--noir);color:var(--weiss);font-family:var(--sans);font-size:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.28em;text-decoration-thickness:1px}
p{margin:0 0 1.1em}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;font-variant-numeric:lining-nums}
body{font-variant-numeric:lining-nums}
h1{font-size:var(--h1);line-height:.98}
h2{font-size:var(--h2);line-height:1.04;margin-bottom:.5em}
h3{font-size:var(--h3);line-height:1.15;margin-bottom:.35em}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:2px solid var(--magenta-hell);outline-offset:4px}
html{scrollbar-color:var(--navy-licht) var(--noir)}

.unterzeile{font-style:italic;color:var(--platin);font-size:clamp(19px,1.5vw,23px);line-height:1.5;max-width:34em}
.hell .unterzeile{color:var(--tinte-2)}
.versal{font-size:var(--klein);letter-spacing:.2em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--weiss);color:var(--navy);padding:10px 14px}

/* Buttons und Links */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--magenta);color:#fff;text-decoration:none;font-size:var(--klein);letter-spacing:.18em;text-transform:uppercase;padding:18px 28px;border:1px solid var(--magenta);transition:background .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:#93307A;transform:translateY(-2px)}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.textlink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;font-size:16px}
.textlink svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.textlink:hover svg{transform:translateX(5px)}
.hell .textlink{color:var(--navy)}

/* Navigation */
.kopf{position:sticky;top:0;z-index:50;background:rgba(5,7,31,.97);border-bottom:1px solid var(--linie)}
/* Mitlaufendes Menü nur am Desktop; auf Handy und Tablet übernimmt der Nach-oben-Pfeil */
@media (min-width:901px){html{scroll-padding-top:84px}}
@media (max-width:900px){.kopf{position:relative}}
.kopf-innen{display:flex;align-items:center;gap:28px;height:84px;padding:0 var(--rand)}
.wortmarke{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.12em;text-decoration:none;margin-right:auto;white-space:nowrap}
.menue{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.menue a{white-space:nowrap;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--platin);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.menue a:hover,.menue a[aria-current]{color:var(--weiss);border-color:var(--magenta-hell)}
.kopf .btn{padding:14px 20px;font-size:12px}
.menue-knopf{display:none;background:none;border:0;color:var(--weiss);padding:10px;margin-right:-10px;cursor:pointer}
.menue-knopf svg{width:28px;height:28px}
.btn{white-space:nowrap}
@media (max-width:600px){.btn{white-space:normal;line-height:1.5}}
.btn-kopf .kurz{display:none}
@media (max-width:1520px){
  .btn-kopf .lang{display:none}
  .btn-kopf .kurz{display:inline}
  .kopf .btn-kopf{padding:13px 18px}
}
@media (max-width:1100px){.kopf .btn-kopf{display:none}}
@media (max-width:1100px){
  .menue-knopf{display:block}
  .menue{position:fixed;inset:84px 0 0 0;background:var(--noir);flex-direction:column;gap:0;padding:24px var(--rand);transform:translateX(100%);transition:transform .45s var(--ease);visibility:hidden}
  .menue.offen{transform:none;visibility:visible}
  .menue a{display:block;font-family:var(--serif);font-size:32px;letter-spacing:0;text-transform:none;color:var(--weiss);padding:14px 0;border-bottom:1px solid var(--linie)}
  .menue li.nur-mobil{display:block;margin-top:28px}
  .menue li.nur-mobil a{border:0;padding:0}
}
.menue li.nur-mobil{display:none}
@media (max-width:1100px){.menue li.nur-mobil{display:block}.menue li.nur-mobil .btn{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:18px 26px;color:#fff;border:1px solid var(--magenta)}}

/* Seitenrahmen mit Kurslinie */
main{position:relative}
.kurs{position:absolute;top:0;bottom:0;left:var(--kurs-x);width:2px;z-index:4;pointer-events:none}
.kurs i{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--magenta) 0 10px,transparent 10px 18px)}
.kurs i:first-child{opacity:.28}
.kurs i:last-child{clip-path:inset(0 0 var(--kurs-rest,100%) 0)}
@media (max-width:900px){.kurs{left:7px;width:1.5px}.kurs i:first-child{opacity:.4}}

/* Kurslinie ab Standort- und Wegpunkt im Einstieg */
.kurs-start{position:absolute;left:7px;bottom:14px;width:min(62vw,900px);height:130px;overflow:visible;pointer-events:none}
.standort,.einstieg .wegpunkt{overflow:visible}
@media (max-width:900px){.kurs-start{display:none}}

/* Helle Abschnitte als Kartenpapier */
.hell{background-color:var(--papier);background-image:linear-gradient(rgba(13,17,76,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(13,17,76,.045) 1px,transparent 1px);background-size:120px 120px;background-position:-1px -1px}

.abschnitt{position:relative;padding:var(--abschnitt-y) var(--rand)}
.abschnitt>.innen{max-width:calc(var(--inhalt-max) + var(--spalte-karte));margin:0 auto 0 0;padding-left:var(--spalte-karte)}
.dunkel{background:var(--noir)}
.navy{background:var(--navy)}
.hell{background:var(--papier);color:var(--tinte)}
.hell+.hell{padding-top:0}
.hell+.hell:has(>.wegpunkt){padding-top:var(--abschnitt-y);border-top:1px solid var(--linie-hell)}
@media (max-width:900px){.abschnitt>.innen{padding-left:0}}

.wegpunkt{position:absolute;left:var(--kurs-x);top:calc(var(--abschnitt-y) - 44px);transform:translateX(-7px);display:flex;align-items:center;gap:16px;z-index:5;color:var(--platin)}
.wegpunkt .punkt{width:16px;height:16px;border-radius:50%;border:2px solid var(--magenta-hell);background:var(--noir);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.wegpunkt.erreicht .punkt{background:var(--magenta-hell);box-shadow:0 0 0 6px rgba(253,105,212,.16)}
.wegpunkt span:nth-child(2){font-size:12px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.hell .wegpunkt{color:var(--tinte-2)}
.hell .wegpunkt .punkt{background:var(--papier);border-color:var(--magenta)}
.hell .wegpunkt.erreicht .punkt{background:var(--magenta)}
.navy .wegpunkt .punkt{background:var(--navy)}
@media (max-width:900px){.wegpunkt{display:none}}

/* Hero */
.hero{position:relative;min-height:calc(100svh - 84px);background:var(--noir);overflow:hidden;display:flex;align-items:flex-end}
.hero .karte{position:absolute;inset:0;width:100%;height:100%}
.hero-foto{position:absolute;top:0;right:0;bottom:0;width:var(--hero-foto-breite);margin:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-foto:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noir) 0%,rgba(5,7,31,.6) 22%,rgba(5,7,31,0) 55%),linear-gradient(0deg,rgba(5,7,31,.85) 0%,rgba(5,7,31,0) 38%)}
.hero-text{position:relative;z-index:3;padding:var(--hero-text-oben) var(--rand) 0 calc(var(--rand) + var(--spalte-karte));width:100%}
.hero h1{max-width:7.6em;margin:0 0 32px}
.hero .unterzeile{margin-bottom:44px}
.hero-aktion{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center}
.standort{position:absolute;left:var(--kurs-x);top:calc(var(--hero-text-oben) - 64px);transform:translateX(-7px);display:flex;gap:16px;align-items:center;z-index:5;color:var(--platin)}
.standort .punkt{width:16px;height:16px;border-radius:50%;border:2px solid var(--magenta-hell);background:var(--magenta-hell);box-shadow:0 0 0 6px rgba(253,105,212,.16)}
.standort span:nth-child(2){font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.legende{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 56px;border-top:1px solid var(--linie);margin-top:clamp(56px,9vh,104px);padding:22px 0 clamp(32px,5vh,52px);max-width:760px}
.legende b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.4vw,48px);line-height:1;margin-bottom:8px;font-variant-numeric:lining-nums}
.legende span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--platin)}
.kursangabe{position:absolute;right:var(--rand);top:32px;z-index:3;font-size:11px;letter-spacing:.24em;color:rgba(200,202,212,.7);text-transform:uppercase}
@media (max-width:900px){
  .hero{display:block;min-height:0}
  .hero-foto{position:relative;width:100%;height:62svh}
  .hero-foto:after{background:linear-gradient(0deg,var(--noir) 0%,rgba(5,7,31,0) 55%)}
  .hero-text{padding:0 var(--rand);margin-top:-120px}
  .standort{display:none}
  .legende{grid-template-columns:repeat(3,1fr);gap:0 16px}
  .legende span{letter-spacing:.1em;font-size:11px}
  .kursangabe{display:none}
}

/* Feinjustierung von Paul über das Regler-Panel (28. und 29.10.2026).
   Werte der Yacht-Seite gelten einheitlich für die ganze Website; der Start-Hero behält Größe und Foto. */
@media (min-width:901px){
  body{--spalte-karte:122px;--abschnitt-y:114px;--h2:48px;--text:16.5px;--inhalt-max:1120px}
  body .einstieg{--einstieg-oben:165px;--einstieg-h1:61px;--einstieg-foto-breite:39vw;--einstieg-unten:102px}
  .hero{--hero-text-oben:129px;--h1:98px;--hero-foto-breite:43vw}
}

/* Unterseiten-Einstieg */
.einstieg{--einstieg-oben:clamp(96px,14vw,184px);--einstieg-unten:clamp(72px,9vw,128px);--einstieg-foto-breite:38vw;--einstieg-h1:clamp(56px,5.6vw,96px);position:relative;background:var(--noir);overflow:hidden;padding:var(--einstieg-oben) var(--rand) var(--einstieg-unten)}
.einstieg .karte{position:absolute;inset:0;width:100%;height:100%}
.einstieg .innen{position:relative;z-index:3;padding-left:var(--spalte-karte);max-width:calc(var(--spalte-karte) + 760px)}
.einstieg h1{margin-bottom:28px}
@media (min-width:901px){
  /* Text endet vor dem Foto (38vw) und seinem Verlauf */
  .einstieg:has(.einstieg-foto) .innen{max-width:calc(100vw - var(--einstieg-foto-breite) - var(--rand) - 64px)}
  .einstieg:has(.einstieg-foto) h1{font-size:var(--einstieg-h1)}
}
.einstieg .unterzeile{margin-bottom:40px}
.einstieg-foto{position:absolute;right:0;top:0;bottom:0;width:var(--einstieg-foto-breite);margin:0}
.einstieg-foto img{width:100%;height:100%;object-fit:cover}
.einstieg-foto:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noir),rgba(5,7,31,.35) 40%,rgba(5,7,31,.1))}
.einstieg .wegpunkt{top:calc(var(--einstieg-oben) - 56px)}
@media (max-width:900px){
  .einstieg{padding-top:0}
  .einstieg .innen{padding-left:0}
  .einstieg-foto{position:relative;width:calc(100% + 2*var(--rand));margin:0 calc(-1*var(--rand)) -80px;height:52svh}
  .einstieg-foto:after{background:linear-gradient(0deg,var(--noir) 5%,rgba(5,7,31,0) 60%)}
  .einstieg:not(:has(.einstieg-foto)){padding-top:72px}
}

/* Zitate (Standort) */
.zitate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;margin-top:56px}
.zitat{margin:0;border-top:1px solid var(--linie);padding-top:28px}
.zitat p{font-family:var(--serif);font-size:var(--zitat);line-height:1.22;margin-bottom:16px}
.zitat footer,.stimme footer{font-style:italic;color:var(--platin);font-size:16px}
.zitat:first-child{grid-column:1/-1;border-top:0;padding-top:0}
.zitat:first-child p{font-size:clamp(34px,4.4vw,60px);line-height:1.12;max-width:16em}
.zitat:first-child p .betont{color:var(--magenta-hell)}
.zitat footer b{font-style:normal;font-weight:700;color:var(--weiss)}
.anmerkung{margin-top:48px;font-style:italic;color:var(--platin)}
@media (max-width:760px){.zitate{grid-template-columns:1fr;gap:40px}}

/* Zwei Ebenen */
.peilung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:48px;border-top:5px solid var(--navy)}
.ebene{padding:36px 40px 8px 0}
.ebene+.ebene{padding-left:40px;border-left:1px solid var(--linie-hell)}
.ebene .gross{font-family:var(--serif);font-size:clamp(76px,9vw,128px);line-height:.8;color:var(--magenta);display:block;margin-bottom:18px}
.einleitung p{max-width:38em}
.einleitung h2{max-width:14em}
@media (max-width:760px){.peilung{grid-template-columns:1fr}.ebene+.ebene{padding-left:0;border-left:0;border-top:1px solid var(--linie-hell)}}

/* Routen (Angebote) */
.routen{margin-top:56px;border-top:1px solid var(--linie)}
.route{display:grid;grid-template-columns:96px minmax(0,1fr) 300px;gap:40px;align-items:center;padding:36px 0;border-bottom:1px solid var(--linie);text-decoration:none;position:relative;transition:background .4s var(--ease)}
.route:hover{background:rgba(19,35,102,.35)}
.route+.route .nr{color:var(--platin)}
.route .nr{font-family:var(--serif);font-size:52px;color:var(--magenta-hell);line-height:1;align-self:start}
.route h3{margin:0 0 12px;font-size:clamp(32px,3.2vw,44px)}
.route p{margin:0 0 20px;color:var(--platin);font-size:17px;max-width:30em}
.route figure{margin:0;aspect-ratio:3/2;overflow:hidden}
.route figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .8s var(--ease)}
.route:hover figure img{transform:scale(1.05)}
.route[href="/leistungen/"] figure img{filter:none}
.route .textlink{font-size:15px;color:var(--weiss)}
.weiteres{margin-top:40px;color:var(--platin)}
.weiteres a{color:var(--weiss)}
@media (max-width:900px){
  .route{grid-template-columns:44px 1fr;gap:16px;padding:28px 0}
  .route .nr{font-size:34px}
  .route figure{grid-column:1/-1;grid-row:1;aspect-ratio:16/9}
}

/* Erfahrung (Kennzahlen mit Bild) */
.erfahrung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:64px;align-items:end}
.kennzahlen{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 48px;border-top:5px solid var(--magenta);padding-top:26px;margin-bottom:36px}
.kennzahlen b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(52px,6vw,88px);line-height:.9;margin-bottom:10px}
.kennzahlen span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--platin);display:block;max-width:15em}
.hell .kennzahlen span{color:var(--tinte-2)}
.erfahrung figure{margin:0 0 calc(-1*var(--abschnitt-y));position:relative;z-index:2}
.erfahrung figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){.erfahrung{grid-template-columns:1fr;gap:40px}.erfahrung figure{margin:0}.kennzahlen{gap:0 20px}.kennzahlen span{font-size:11px;letter-spacing:.08em}}

.erfahrung-satz{font-family:var(--serif);font-size:clamp(28px,3vw,42px);line-height:1.25;max-width:17em;margin-bottom:8px}
.erfahrung .bekannt{margin-top:48px}

/* Jahreskurs (CEO Table) */
.jahreskurs{margin:40px 0 64px}
.jahreskurs ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr) 1.4fr;align-items:center;position:relative}
.jahreskurs ol:before{content:"";position:absolute;left:0;right:6%;top:22px;height:2px;background:repeating-linear-gradient(90deg,var(--magenta) 0 10px,transparent 10px 18px)}
.jahreskurs li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.jahreskurs .marke{display:block;position:relative;z-index:1}
.jahreskurs .live .marke{width:22px;height:22px;margin:11px 0;border-radius:50%;border:2px solid var(--magenta-hell);background:var(--noir)}
.jahreskurs .call .marke{width:9px;height:9px;margin:17.5px 0;border-radius:50%;background:var(--platin)}
.jahreskurs .gala .marke{width:44px;height:44px;color:var(--magenta-hell);background:var(--noir)}
.jahreskurs .gala .marke svg{width:44px;height:44px}
.jahreskurs .was{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--platin)}
.jahreskurs .call .was{opacity:.6}
.jahreskurs .gala .was{color:var(--weiss)}
.jahreskurs-legende{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:32px;padding-top:20px;border-top:1px solid var(--linie);color:var(--platin);font-size:15px}
.jahreskurs-legende span{display:flex;align-items:center;gap:10px}
.jahreskurs-legende i{display:inline-block;border-radius:50%}
.jahreskurs-legende i.live{width:14px;height:14px;border:2px solid var(--magenta-hell)}
.jahreskurs-legende i.call{width:8px;height:8px;background:var(--platin)}
.jahreskurs-legende i.gala{width:14px;height:14px;background:var(--magenta-hell);box-shadow:0 0 0 4px rgba(253,105,212,.2)}
.jahreskurs-legende i{flex:none}
@media (max-width:760px){
  .jahreskurs ol{grid-template-columns:1fr;gap:4px}
  .jahreskurs ol:before{left:21px;right:auto;top:10px;bottom:24px;width:2px;height:auto;background:repeating-linear-gradient(to bottom,var(--magenta) 0 8px,transparent 8px 14px)}
  .jahreskurs li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;text-align:left}
  .jahreskurs .marke{justify-self:center}
  .jahreskurs .live .marke,.jahreskurs .call .marke{margin:0}
  .jahreskurs .call .marke{margin:2px 0}
}

/* Drei Ebenen als Tiefenstaffel (FINEST TOOLs) */
.tiefen{margin:48px 0 16px;display:grid;gap:0}
.tiefe{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr) auto;gap:24px;align-items:baseline;padding:30px 32px;border-top:1px solid var(--linie)}
.tiefe b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.tiefe span{color:var(--platin)}
.tiefe em{font-style:italic;color:var(--magenta-hell);white-space:nowrap}
.tiefe.t1{background:rgba(19,35,102,.25);margin-right:24%}
.tiefe.t2{background:rgba(19,35,102,.5);margin-right:12%}
.tiefe.t3{background:rgba(19,35,102,.8);margin-right:0}
@media (max-width:760px){.tiefe{grid-template-columns:1fr;gap:8px;padding:22px 18px}.tiefe.t1,.tiefe.t2{margin-right:0}}

/* Fotostrecke unter dem großen Zitat (CEO Table) */
.bildband.mit-fotos{display:block;min-height:0}
.bildband.mit-fotos .innen{padding-right:0}
.fotostrecke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:24px;margin-top:64px;align-items:stretch}
.fotostrecke figure{margin:0;height:clamp(260px,26vw,420px)}
.fotostrecke img{width:100%;height:100%;object-fit:cover}
.fotostrecke figure:nth-child(1) img{object-position:50% 35%}
.fotostrecke figure:nth-child(2) img{object-position:55% 50%}
@media (max-width:760px){.fotostrecke{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}.fotostrecke figure{height:auto;aspect-ratio:4/5}.fotostrecke figure:nth-child(3){grid-column:1/-1;aspect-ratio:3/2}}

/* Auszeichnungen und Presse mit Interview-Foto (Speaking) */
.presse{margin-top:24px}
.presse figure{margin:56px 0 0}
.presse figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:none}
.presse .bekannt{margin-top:40px}
@media (max-width:900px){.presse figure{margin-top:32px}}

/* Bildpaar (Speaking) */
.bildpaar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:40px}
.bildpaar figure{margin:0}
.bildpaar img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bildpaar.hoch img{aspect-ratio:4/5}
.webinar .zweispaltig{align-items:center}
.webinar .termin{border-top:1px solid var(--linie-hell);border-bottom:1px solid var(--linie-hell);padding:32px 0}
.termin-datum{font-family:var(--serif);font-size:clamp(30px,3vw,42px);line-height:1.15;margin:12px 0 8px}
.termin-zeit{color:var(--tinte-2);margin:0}
.termin .btn{margin-top:24px}
.finest-uebersicht{margin:56px 0 64px}

/* Nach-oben-Pfeil, nur bis 900 px */
.nach-oben{display:none}
@media (max-width:900px){
  .nach-oben{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;width:48px;height:48px;background:var(--magenta);color:#fff;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
  .nach-oben svg{width:20px;height:20px}
}
.finest-uebersicht img{width:100%;height:auto;display:block}
@media (max-width:760px){.bildpaar{grid-template-columns:1fr;gap:20px}}

/* Seekarte Yacht */
.route-abschnitt .seeroute{margin-top:48px;-webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 60%,transparent 100%)}
.zielkarte{width:100%;height:auto;display:block}

/* Über Paul (kurz) */
.portraet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:72px;align-items:center}
.portraet figure{margin:0}
.portraet figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portraet .kernsatz{font-family:var(--serif);font-size:clamp(28px,2.8vw,38px);line-height:1.25;color:var(--weiss);margin:32px 0}
.hell .portraet .kernsatz{color:var(--navy)}
@media (max-width:900px){.portraet{grid-template-columns:1fr;gap:40px}}

/* Logbuch (Kundenstimmen) */
.logbuch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;margin-top:48px}
.stimme{margin:0;padding:32px 0;border-top:1px solid var(--linie)}
.stimme p{font-family:var(--serif);font-size:clamp(23px,2vw,28px);line-height:1.35;margin-bottom:14px}
.stimme footer b{font-style:normal;font-weight:700;color:var(--weiss);display:block}
.hell .stimme{border-color:var(--linie-hell)}
.hell .stimme footer{color:var(--tinte-2)}
.hell .stimme footer b{color:var(--navy)}
.bekannt{display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px;margin-top:64px;padding-top:32px;border-top:1px solid var(--linie)}
.bekannt .versal{color:var(--platin)}
.bekannt .medium{font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--weiss);opacity:.85}
.hell .bekannt .medium{color:var(--navy)}
.bekannt img{height:36px;width:auto;filter:grayscale(1) brightness(0) invert(.86);opacity:.85}
.hell .bekannt{border-color:var(--linie-hell)}
.hell .bekannt .versal{color:var(--tinte-2)}
.hell .bekannt img{filter:grayscale(1) contrast(1.2) brightness(.55);mix-blend-mode:multiply;opacity:1}
@media (max-width:760px){.logbuch{grid-template-columns:1fr}}

/* Karussell (Logbuch auf der Startseite) */
.karussell{margin-top:40px}
.karussell-kopf{display:flex;justify-content:space-between;align-items:center;border-top:5px solid var(--navy);padding-top:18px;margin-bottom:28px}
.zaehler{font-size:13px;letter-spacing:.2em;color:var(--tinte-2)}
.zaehler b{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:0;color:var(--navy);margin-right:4px}
.karussell-knoepfe{display:flex;gap:10px}
.karussell-knoepfe button{width:52px;height:52px;border:1px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.karussell-knoepfe button:hover{background:var(--navy);color:var(--weiss)}
.karussell-knoepfe button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--navy)}
.karussell-knoepfe svg{width:20px;height:20px}
.karussell-spur{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((100% - 64px)/2));gap:64px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--magenta) transparent;overscroll-behavior-x:contain}
.karussell-spur:focus-visible{outline-offset:8px}
.karte-stimme{margin:0;scroll-snap-align:start;border-top:1px solid var(--linie-hell);padding-top:24px}
.karte-stimme p{font-family:var(--serif);font-size:clamp(22px,1.9vw,27px);line-height:1.36;margin-bottom:16px;color:var(--navy)}
.karte-stimme footer{font-style:italic;color:var(--tinte-2);font-size:16px}
.karte-stimme footer b{display:block;font-style:normal;color:var(--navy)}
@media (max-width:760px){.karussell-spur{grid-auto-columns:86%;gap:28px}}

/* Fragen */
.fragen{margin-top:40px;border-top:5px solid var(--navy);max-width:900px}
.frage{border-bottom:1px solid var(--linie-hell)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font-family:var(--serif);font-size:clamp(23px,2vw,29px);line-height:1.25}
.frage summary::-webkit-details-marker{display:none}
.frage summary svg{flex:none;width:22px;height:22px;color:var(--magenta);transition:transform .4s var(--ease)}
.frage[open] summary svg{transform:rotate(45deg)}
.frage .antwort{padding:0 0 28px;max-width:44em;color:var(--tinte-2)}
.dunkel .frage{border-color:var(--linie)}
.dunkel .fragen{border-color:var(--magenta)}
.dunkel .frage .antwort{color:var(--platin)}

/* Ziel (Abschluss) */
.ziel{position:relative;overflow:hidden}
.ziel .innen{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.6fr);gap:64px;align-items:center}
.ziel h2{font-size:clamp(44px,6vw,84px)}
.ziel figure{margin:0}
.ziel figure img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9)}
.ziel .zielmarke{display:flex;align-items:center;gap:14px;margin-top:40px;color:var(--platin)}
.ziel .zielmarke svg{width:34px;height:34px;color:var(--magenta-hell)}
@media (max-width:900px){.ziel .innen{grid-template-columns:1fr}.ziel figure{max-width:360px}}

/* Ziel mit randabfallendem Foto (wie Einstieg) */
.ziel-rand{overflow:hidden;min-height:min(80svh,720px);display:flex;align-items:center}
.ziel-rand .innen{display:block;position:relative;z-index:3;width:100%;max-width:calc(100vw - 39vw - var(--rand) - 64px)}
.ziel-rand .ziel-foto{position:absolute;right:0;top:0;bottom:0;width:39vw;margin:0;max-width:none}
.ziel-rand .ziel-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;filter:none;transform:scaleX(-1)}
.ziel-rand .ziel-foto:after{content:"";position:absolute;inset:0 0 0 -2px;background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 4%,rgba(13,17,76,.4) 42%,rgba(13,17,76,.05))}
@media (max-width:900px){
  .ziel-rand{display:block;min-height:0;padding-top:0}
  .ziel-rand .innen{max-width:none}
  .ziel-rand .ziel-foto{position:relative;width:calc(100% + 2*var(--rand));margin:0 calc(-1*var(--rand)) -60px;height:52svh;max-width:none}
  .ziel-rand .ziel-foto:after{background:linear-gradient(0deg,var(--navy) 5%,rgba(13,17,76,0) 60%)}
}

/* Format-Zahlen (Unterseiten) */
.format{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:5px solid var(--magenta);margin:48px 0 56px}
.format div{padding:26px 28px 6px 0}
.format div+div{padding-left:28px;border-left:1px solid var(--linie)}
.format b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(60px,7vw,104px);line-height:.85;margin-bottom:12px}
.format span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--platin)}
.hell .format div+div{border-color:var(--linie-hell)}
.hell .format span{color:var(--tinte-2)}
@media (max-width:640px){.format{grid-template-columns:1fr}.format div+div{padding-left:0;border-left:0;border-top:1px solid var(--linie)}}

.zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.zweispaltig figure{margin:0}
.zweispaltig figure img{width:100%;object-fit:cover}
@media (max-width:900px){.zweispaltig{grid-template-columns:1fr;gap:40px}}

.register{margin-top:40px;border-top:1px solid var(--linie)}
.register-zeile{display:grid;grid-template-columns:80px minmax(0,.9fr) minmax(0,1.4fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.register-zeile .nr{font-family:var(--serif);font-size:30px;color:var(--platin)}
.register-zeile:first-child .nr{color:var(--magenta-hell)}
.register-zeile h3{font-size:clamp(25px,2.2vw,31px);margin:0}
.register-zeile p{margin:0;color:var(--platin)}
.hell .register{border-color:var(--linie-hell)}
.hell .register-zeile{border-color:var(--linie-hell)}
.hell .register-zeile .nr{color:var(--tinte-2)}
.hell .register-zeile:first-child .nr{color:var(--magenta)}
.hell .register-zeile p{color:var(--tinte-2)}
.register-titel{margin:56px 0 0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--platin)}
.hell .register-titel{color:var(--tinte-2)}
@media (max-width:760px){.register-zeile{grid-template-columns:48px 1fr}.register-zeile p{grid-column:2}}

.liste{list-style:none;padding:0;margin:24px 0;border-top:1px solid var(--linie)}
.liste li{padding:16px 0 16px 34px;border-bottom:1px solid var(--linie);position:relative}
.liste li:before{content:"";position:absolute;left:4px;top:1.25em;width:10px;height:10px;border-radius:50%;border:2px solid var(--magenta-hell)}
.hell .liste,.hell .liste li{border-color:var(--linie-hell)}
.hell .liste li:before{border-color:var(--magenta)}

/* Tagesablauf (Yacht) als Zeitleiste */
.tageslauf{position:relative;margin-top:48px;padding-left:40px}
.tageslauf:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(to bottom,var(--magenta) 0 8px,transparent 8px 14px)}
.tageslauf li{list-style:none;position:relative;padding:0 0 30px}
.tageslauf li:before{content:"";position:absolute;left:-40px;top:.35em;width:16px;height:16px;border-radius:50%;border:2px solid var(--magenta);background:var(--papier)}
.tageslauf b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.2;color:var(--navy)}
.tageslauf span{color:var(--tinte-2)}
.tageslauf{margin-bottom:0}

/* Route Kroatien */
.seeroute{width:100%;height:auto;margin-top:40px}

/* Vergleich (FINEST TOOLs) */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:5px solid var(--navy)}
.weg{padding:32px 32px 8px 0}
.weg+.weg{padding-left:32px;border-left:1px solid var(--linie-hell)}
.weg{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.weg .art{font-style:italic;color:var(--magenta-text);display:block;margin-bottom:12px}
.weg h3{margin-bottom:14px}
.tabelle-huelle{overflow-x:auto;margin-top:56px}
table.vergleich{width:100%;border-collapse:collapse;min-width:640px;font-size:16px}
.vergleich th,.vergleich td{padding:16px 14px;border-bottom:1px solid var(--linie-hell);text-align:left;vertical-align:top}
.vergleich thead th{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--navy);border-bottom:2px solid var(--navy)}
.vergleich td.ja svg{width:20px;height:20px;color:var(--magenta)}
.vergleich tbody th{font-weight:400;color:var(--tinte-2)}
@media (max-width:900px){.wege{grid-template-columns:1fr}.weg+.weg{padding-left:0;border-left:0;border-top:1px solid var(--linie-hell)}}

.auszeichnungen{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:24px;font-family:var(--serif);font-size:clamp(22px,2vw,28px)}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:40px;margin-top:32px}
.team>div{border-top:1px solid var(--linie);padding-top:20px}
.team figure{margin:0 0 18px;width:160px}
.team figure img{width:160px;height:160px;object-fit:cover;filter:saturate(.85)}
.team b{display:block;font-family:var(--serif);font-weight:400;font-size:28px}
.team span{color:var(--platin)}
.hell .team div{border-color:var(--linie-hell)}
.hell .team span{color:var(--tinte-2)}

.mitte{max-width:44em}
.gross-zitat{font-family:var(--serif);font-size:clamp(36px,5vw,72px);line-height:1.1;max-width:15em;margin:0}
.gross-zitat+footer{margin-top:24px;font-style:italic;color:var(--platin)}
.bildband{position:relative;min-height:70svh;display:flex;align-items:center;padding:var(--abschnitt-y) var(--rand);overflow:hidden}
.bildband{background:var(--noir)}
.bildband>.karte{position:absolute;inset:0;width:100%;height:100%}
.bildband .innen{position:relative;z-index:2;padding-left:var(--spalte-karte)}
@media (max-width:900px){.bildband .innen{padding-left:0}}

/* Fuß */
.fuss{background:var(--noir);border-top:1px solid var(--linie);padding:72px var(--rand) 40px;color:var(--platin)}
.fuss-innen{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:48px}
.fuss .wortmarke{color:var(--weiss);font-size:26px;display:inline-block;margin-bottom:10px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:10px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--weiss);text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--linie);font-size:14px}
@media (max-width:760px){.fuss-innen{grid-template-columns:1fr}}

/* Rechtstexte */
.recht{background:var(--papier);color:var(--tinte);padding:clamp(64px,8vw,120px) var(--rand)}
.recht .innen{max-width:760px;margin:0 auto}
.recht h1{font-size:clamp(44px,6vw,72px);margin-bottom:40px}
.recht h2{font-size:30px;margin:40px 0 12px}

/* Bewegung: Einblenden aus sichtbarem Zustand */
.js .einblenden{opacity:.001;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .einblenden.da{opacity:1;transform:none}
.karte .kurslinie{stroke-dasharray:10 8}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .einblenden{opacity:1;transform:none;transition:none}
  .kurs i:last-child{clip-path:none}
  *{transition:none!important}
}