/* Schriften lokal (Liveschaltung, 17.09.2026) — Lizenzen in fonts/ */
@font-face{font-family:'Ubuntu';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/ubuntu-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/ubuntu-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/ubuntu-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
/* =====================================================================
   Entwurf Z „Plakat" — Schrift ist das Bild.
   Papierweiss / Tiefschwarz im harten Wechsel, Gold nur als EIN Knopf
   und als Mauspfeil auf dunklem Grund. ⚠️ Startzustaende von Animationen NIE hier,
   nur per gsap.set in bewegung.js.
   ===================================================================== */
:root{
  --papier:#FAF9F6; --schwarz:#0A0A0A; --gold:#F0CE6E; --gold-text:#8A6A15;
  --grau-w:#5E5A53;   /* Nebentext auf Papier  (Kontrast ~6,6:1) */
  --grau-b:#A9A49B;   /* Nebentext auf Schwarz (Kontrast ~7,9:1) */
  --linie-w:rgba(10,10,10,.16); --linie-b:rgba(250,249,246,.2);
  --kopf-h:72px; --rand:clamp(20px,4.2vw,72px);
  --jakarta:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ubuntu:"Ubuntu",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Ubuntu Mono",ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--schwarz);font-family:var(--ubuntu);font-weight:400;
  font-size:17px;line-height:1.6;padding-top:var(--kopf-h);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
main{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.ton-b :focus-visible{outline-color:var(--gold)}

/* ---------- Toene: ganze Bildschirme im Wechsel ---------- */
.ton-w{background:var(--papier);color:var(--schwarz)}
.ton-b{background:var(--schwarz);color:var(--papier)}
.ton-w .neben{color:var(--grau-w)}
.ton-b .neben{color:var(--grau-b)}

/* ---------- Schrift ---------- */
.riesig,.h2,.h3,.gross,.zeilen-titel,.preis-zahl,.zahl-riesig,.tafel-nr,.fahrt-nr,.band-text{
  font-family:var(--jakarta);font-weight:300;letter-spacing:-.055em;line-height:.9}
.riesig{font-size:clamp(40px,14vw,260px);margin-left:-.04em;word-spacing:.1em}
.h2,.h3,.gross,.zeilen-titel,.fahrt-name,.faq-frage,.band-text{word-spacing:.06em}
.h2{font-size:clamp(38px,7.2vw,138px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;letter-spacing:-.05em;line-height:.92}
.h2.mittel{font-size:clamp(34px,5.2vw,96px)}
.h3{font-size:clamp(28px,3.6vw,64px);line-height:.98;letter-spacing:-.04em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.gross{font-size:clamp(23px,2.7vw,46px);line-height:1.12;letter-spacing:-.03em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.text{font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.62;max-width:60ch;hyphens:auto;-webkit-hyphens:auto}
.klein{font-size:15px;line-height:1.55;font-weight:400}
.etikett{font-family:var(--mono);font-size:13px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.nr{font-family:var(--mono);font-size:13px;letter-spacing:.1em}

/* ---------- Knoepfe ---------- */
.knopf-gold,.knopf-linie{display:inline-flex;align-items:center;gap:14px;padding:17px 26px;font-family:var(--ubuntu);
  font-weight:500;font-size:15px;letter-spacing:.02em;line-height:1.2;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.knopf-gold{background:var(--gold);color:var(--schwarz)}
.knopf-gold:hover{background:#F5DB92}
.knopf-linie{border:1px solid currentColor}
.ton-w .knopf-linie:hover{background:var(--schwarz);color:var(--papier);border-color:var(--schwarz)}
.ton-b .knopf-linie:hover{background:var(--papier);color:var(--schwarz);border-color:var(--papier)}
.pfeil{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a:hover .pfeil{transform:translateX(5px)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Kopfzeile: immer hell (Logo nur auf hellem Grund) ---------- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:1000;background:#FFFFFF;color:var(--schwarz);border-bottom:1px solid var(--schwarz)}
.kopf-innen{display:flex;align-items:center;gap:28px;padding:14px var(--rand);min-height:64px}
.marke{flex:none;display:block}
.wortmarke{height:34px;width:auto;display:block;transform:none!important}
.menue{display:flex;gap:clamp(14px,1.6vw,26px);margin-left:auto}
.menue a{font-size:14px;white-space:nowrap;position:relative;padding:6px 0}
.menue a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menue a:hover::after,.menue a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.kopf-cta{flex:none;border:1px solid var(--schwarz);padding:10px 16px;font-size:14px;font-weight:500;white-space:nowrap;transition:background .25s,color .25s}
.kopf-cta:hover{background:var(--schwarz);color:#fff}
.menue-knopf{display:none;margin-left:auto;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:10px 0 10px 12px;align-items:center;gap:10px}
.menue-knopf i{display:inline-block;width:26px;height:9px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
@media (max-width:1279px){
  .menue{display:none}
  .menue-knopf{display:inline-flex}
  .kopf-cta{order:2}
  .menue-knopf{order:3;margin-left:0}
  .kopf-innen{justify-content:space-between}
  .marke{margin-right:auto}
}
@media (max-width:560px){ .kopf-cta{display:none} .wortmarke{height:30px} }

/* Menueflaeche (kleine Bildschirme) — geschlossen = versteckt, auch ohne JS */
.menue-flaeche{position:fixed;left:0;right:0;bottom:0;top:var(--kopf-h);z-index:990;background:var(--schwarz);color:var(--papier);
  visibility:hidden;overflow-y:auto;padding:clamp(24px,5vw,64px) var(--rand)}
.menue-flaeche.offen{visibility:visible}
.menue-flaeche nav{display:flex;flex-direction:column}
.menue-flaeche a{display:flex;align-items:baseline;gap:18px;font-family:var(--jakarta);font-weight:300;letter-spacing:-.045em;
  font-size:clamp(34px,7.4vw,84px);line-height:1.08;padding:6px 0;border-bottom:1px solid var(--linie-b);overflow:hidden}
.menue-flaeche a .nr{color:var(--grau-b);flex:none;width:2.2em}
.menue-flaeche a[aria-current="page"] .nr{color:var(--gold)}
.menue-flaeche .menue-kontakt{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--grau-b)}

/* ---------- Seiten ---------- */
.seite{display:none}
.seite.an{display:block}
.ab{position:relative}
.luft{padding:clamp(88px,11vw,190px) var(--rand)}
.luft-klein{padding:clamp(64px,7vw,120px) var(--rand)}

/* ---------- Held (Kopfbereich) ---------- */
.held{min-height:calc(100svh - var(--kopf-h));display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vh,56px);
  padding:clamp(22px,3.2vh,40px) var(--rand) clamp(26px,4vh,48px)}
.held-oben{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.held-oben .etikett{max-width:44ch}
.held-unten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.held-unten .text{max-width:44ch}
.riesig .zeile{display:block;white-space:nowrap}
.riesig.versetzt .zeile:nth-child(2){text-align:right}
.maske{display:inline-block;clip-path:inset(-60% -30% 0 -30%);padding-bottom:.16em;margin-bottom:-.16em;vertical-align:top}
.maske .innen{display:inline-block}
@media (max-width:819px){
  .riesig .zeile{display:inline;white-space:normal}
  .held-unten{grid-template-columns:1fr}
}

/* Fotoband: randlos, s/w */
.sw{filter:grayscale(1) contrast(1.06)}
.fotoband{position:relative;height:clamp(420px,88svh,980px);overflow:hidden;background:var(--schwarz);color:var(--papier)}
.fotoband img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
.fotoband .band-schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 38%,rgba(10,10,10,.82) 100%)}
.fotoband .band-inhalt{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(28px,5vw,72px)}
.fotoband .band-inhalt .h2{max-width:16ch}
.fotoband.flach{height:clamp(320px,62svh,720px)}
.fotoband.hoch-auto{height:auto;min-height:clamp(520px,92svh,1000px);display:flex;align-items:flex-end}
.fotoband.hoch-auto .band-inhalt{position:relative;left:auto;right:auto;bottom:auto;padding:clamp(120px,30vh,320px) var(--rand) clamp(40px,6vw,88px)}
.fotoband.hoch-auto .band-schleier{background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.6) 45%,rgba(10,10,10,.9) 100%)}
.fotoband.hoch-auto .band-inhalt .h2{max-width:20ch}
.riesig .zeile.frei{display:inline;white-space:normal}
.menue-flaeche a span{display:inline-block}
@media (max-width:819px){ .fotoband{height:clamp(360px,72svh,700px)} }

/* ---------- Saetze (nummerierte Plakatzeilen) ---------- */
.saetze{display:flex;flex-direction:column}
.saetze li{display:grid;grid-template-columns:clamp(48px,9vw,160px) minmax(0,1fr);gap:16px;padding:clamp(26px,3.4vw,52px) 0;border-top:1px solid var(--linie-w)}
.ton-b .saetze li{border-top-color:var(--linie-b)}
.saetze li:last-child{border-bottom:1px solid var(--linie-w)}
.saetze .gross{max-width:34ch}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:clamp(40px,6vw,96px)}
.kopfzeile .text{max-width:62ch}

/* ---------- Querfahrt „3 Wege" ---------- */
.fahrt-rahmen{position:relative;overflow:hidden}
.fahrt-streifen{display:flex;width:max-content}
.fahrt-tafel{width:100vw;height:calc(100svh - var(--kopf-h));min-height:560px;flex:none;position:relative;
  padding:clamp(24px,4vh,48px) var(--rand);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);overflow:hidden}
.fahrt-intro{grid-template-columns:1fr;align-content:space-between}
.fahrt-intro .riesig{font-size:clamp(48px,15vw,280px)}
.fahrt-links{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.fahrt-nr{font-size:clamp(140px,31vh,380px);line-height:.8;letter-spacing:-.07em;margin-left:-.06em}
.fahrt-name{font-family:var(--jakarta);font-weight:300;letter-spacing:-.045em;line-height:.95;font-size:clamp(34px,4.3vw,78px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.fahrt-rechts{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(16px,2.6vh,30px);min-width:0}
.fahrt-rechts .text{max-width:40ch}
.fahrt-zaehler{position:absolute;right:var(--rand);top:clamp(24px,4vh,48px)}
.fahrt-leiste{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(128,128,128,.3)}
.fahrt-leiste i{position:absolute;inset:0;background:var(--gold);transform-origin:left}
.punkte{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.punkte li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--linie-w);font-size:clamp(14px,1.05vw,16px);line-height:1.35}
.ton-b .punkte li{border-top-color:var(--linie-b)}
.punkte li::before{content:"";position:absolute;left:0;top:1.02em;width:9px;height:1px;background:currentColor}
.punkte.einspaltig{grid-template-columns:1fr}
@media (max-width:1100px) and (min-width:820px){ .fahrt-tafel{grid-template-columns:1fr;align-content:space-between} .fahrt-nr{font-size:clamp(110px,20vh,220px)} }
@media (max-height:760px) and (min-width:820px){ .punkte li{padding:6px 0 6px 20px;font-size:14px} .fahrt-nr{font-size:clamp(110px,26vh,260px)} }
@media (max-width:819px){
  .fahrt-streifen{display:block;width:auto}
  .fahrt-tafel{width:auto;height:auto;min-height:0;grid-template-columns:1fr;padding:clamp(64px,14vw,96px) var(--rand)}
  .fahrt-nr{font-size:clamp(120px,40vw,220px)}
  .fahrt-leiste{display:none}
  .punkte{grid-template-columns:1fr}
}

/* ---------- Stapeltafeln ---------- */
.tafeln{position:relative}
.tafel{position:sticky;top:var(--kopf-h);min-height:calc(100svh - var(--kopf-h))}
.tafel-innen{min-height:calc(100svh - var(--kopf-h));padding:clamp(28px,4.5vh,56px) var(--rand);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;gap:clamp(20px,3vh,40px) clamp(24px,4vw,72px);align-content:stretch}
/* Inhalt oben: die naechste Tafel schiebt sich von unten darueber und verdeckt zuerst die Zierzahl */
.tafel-kopf{grid-column:1 / -1;grid-row:1;display:flex;justify-content:space-between;gap:20px}
.tafel-titel{grid-column:1 / -1;grid-row:2;align-self:start}
.tafel-deko{grid-column:1 / -1;grid-row:3;align-self:end;text-align:right;min-width:0}
.tafel-titel .riesig{font-size:clamp(64px,19vw,360px)}
.tafel-titel .h2{max-width:14ch}
.tafel-frage{grid-column:1;grid-row:2;align-self:start;min-width:0}
.tafel-antwort{grid-column:2;grid-row:2;align-self:start;min-width:0;padding-top:.5em}
.tafel-nr{font-size:clamp(120px,34vh,420px);line-height:.78;letter-spacing:-.07em}
.tafel .h3{max-width:18ch}
.faq-frage{font-family:var(--jakarta);font-weight:300;letter-spacing:-.04em;line-height:1.02;font-size:clamp(30px,4.2vw,76px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:1023px){
  .tafel-innen{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr}
  .tafel-antwort{grid-column:1;grid-row:3;padding-top:0}
  .tafel-deko{grid-row:4}
}

/* ---------- Riesen-Laufband ---------- */
.band{overflow:hidden;padding:clamp(28px,4vw,64px) 0;border-top:1px solid var(--schwarz);border-bottom:1px solid var(--schwarz)}
.band-spur{display:flex;width:max-content;white-space:nowrap}
.band-text{font-size:clamp(72px,14vw,260px);line-height:1.02;padding-right:.35em;display:flex;align-items:center;gap:.35em}
.band-text i{display:inline-block;width:.16em;height:.16em;border-radius:50%;border:1px solid currentColor}

/* ---------- Zweispalter mit randlosem Foto ---------- */
.spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--kopf-h))}
.spalten .foto{position:relative;overflow:hidden;min-height:420px}
.spalten .foto img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.spalten .inhalt{padding:clamp(64px,8vw,140px) var(--rand);display:flex;flex-direction:column;justify-content:center;gap:28px;min-width:0}
.spalten.umgekehrt .foto{order:2}
@media (max-width:959px){ .spalten{grid-template-columns:1fr;min-height:0} .spalten .foto{min-height:62svh} .spalten.umgekehrt .foto{order:0} }

/* ---------- Liste: Foto immer sichtbar links, bunt beim Darüberfahren (Martin 18.09.2026, folgt nicht mehr dem Zeiger) ---------- */
.zeilen-liste .zeile-link:first-child{border-top:1px solid currentColor}
.zeile-link{position:relative;display:grid;grid-template-columns:clamp(120px,15vw,240px) minmax(0,1fr) auto;gap:14px clamp(20px,3vw,48px);
  align-items:baseline;padding:clamp(22px,2.8vw,44px) var(--rand);margin:0 calc(var(--rand) * -1);border-bottom:1px solid currentColor;isolation:isolate}
.zeile-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--schwarz);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ton-b .zeile-link::before{background:var(--papier)}
.zeile-link .zeilen-titel{font-size:clamp(34px,6.2vw,118px);line-height:.95;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;transition:color .3s}
.zeile-link.mag .zeilen-titel{font-size:clamp(28px,3.7vw,68px);line-height:1}
.zeile-link .zeile-text{grid-column:2;max-width:62ch}
.zeile-link .zeile-weiter{align-self:end;white-space:nowrap}
.zeile-bild{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:820px){
  .ton-w .zeile-link:hover{color:var(--papier)}
  .ton-b .zeile-link:hover{color:var(--schwarz)}
  .zeile-link:hover::before{transform:scaleY(1);transform-origin:top}
  /* Überschrift bleibt beim Darüberfahren voll ausgefüllt, kein Umriss (Martin 18.09.2026) */
  .zeile-link:hover .neben{color:inherit}
  /* Foto immer sichtbar, fest links, so hoch wie Etikett + Überschrift + kleiner Text, bunt beim Darüberfahren
     (Martin 18.09.2026) · Etikett steht dafür über der Überschrift · Foto liegt absolut, zählt nicht zur Zeilenhöhe */
  .zeile-link{grid-template-columns:clamp(190px,22vw,340px) minmax(0,1fr) auto;align-items:start}
  .zeile-link > .etikett.neben{grid-column:2;grid-row:1}
  .zeile-link .zeilen-titel{grid-column:2;grid-row:2}
  .zeile-link .zeile-text{grid-column:2;grid-row:3}
  .zeile-link .zeile-weiter{grid-column:3;grid-row:2}
  .zeile-link .zeile-bild{display:block;position:absolute;left:var(--rand);top:clamp(22px,2.8vw,44px);width:clamp(190px,22vw,340px);
    height:calc(100% - 2 * clamp(22px,2.8vw,44px));object-fit:cover;transition:filter .5s ease}
  .zeile-link:hover .zeile-bild{filter:none}
}
@media (hover:none),(max-width:819px){
  .zeile-link{grid-template-columns:1fr}
  .zeile-link .zeile-text{grid-column:auto;order:4}
  .zeile-link .zeile-weiter{order:5}
  .zeile-bild{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:6px}
}

/* ---------- Eigener Zeiger: Mauspfeil, Spitze = Mausposition (Anker oben links) ---------- */
.zeiger{position:fixed;left:0;top:0;width:0;height:0;z-index:9500;pointer-events:none;visibility:hidden;will-change:transform}
.zeiger svg{display:block;width:16px;height:24.6px;overflow:visible;transform-origin:0 0;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.zeiger.gross svg{transform:scale(1.4)}
/* Rand 2px mittig + paint-order → 1px sichtbar aussen */
.zeiger path{fill:#111;stroke:#F0CE6E;stroke-width:2;stroke-linejoin:round;paint-order:stroke fill;vector-effect:non-scaling-stroke}
.zeiger.dunkel path{fill:#F0CE6E;stroke:#111}
html.eigener-zeiger,html.eigener-zeiger *{cursor:none!important}

/* ---------- Vorhang ---------- */
.vorhang{position:fixed;inset:0;z-index:9000;background:var(--schwarz);color:var(--papier);visibility:hidden;display:flex;align-items:flex-end;padding:var(--rand);overflow:hidden}
.vorhang-name{font-family:var(--jakarta);font-weight:300;letter-spacing:-.055em;line-height:.9;font-size:clamp(44px,10vw,190px);display:block}
.vorhang-maske{display:block;overflow:hidden;padding-bottom:.12em}

/* ---------- Vorteile ---------- */
.vorteile{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,72px)}
.vorteile li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:baseline;padding:clamp(16px,1.6vw,24px) 0;border-top:1px solid var(--linie-w)}
.ton-b .vorteile li{border-top-color:var(--linie-b)}
.vorteile .gross{font-size:clamp(21px,1.9vw,32px)}
@media (max-width:959px){ .vorteile{grid-template-columns:1fr} }

/* ---------- Tabelle ---------- */
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid currentColor}
.vergleich{width:100%;min-width:720px;border-collapse:collapse}
.vergleich tr>:first-child{padding-left:0!important}
.vergleich th,.vergleich td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--linie-w);vertical-align:top;font-size:15px;line-height:1.4}
.ton-b .vergleich th,.ton-b .vergleich td{border-bottom-color:var(--linie-b)}
.vergleich thead th{font-family:var(--jakarta);font-weight:400;font-size:clamp(17px,1.5vw,24px);letter-spacing:-.02em;padding-top:20px;padding-bottom:20px}
.vergleich tbody th{font-weight:400}
.vergleich .hervor{padding-left:18px}
.ton-w .vergleich thead .hervor{background:var(--schwarz);color:var(--papier)}
.ton-b .vergleich thead .hervor{background:var(--papier);color:var(--schwarz)}
.vergleich tbody .hervor{font-weight:500;border-left:1px solid currentColor;border-right:1px solid currentColor}
.fussnote{margin-top:18px;max-width:80ch}

/* ---------- Preise als Plakatzeilen ---------- */
.preis-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.5fr);gap:24px clamp(24px,4vw,64px);padding:clamp(36px,4vw,64px) 0;border-top:1px solid currentColor;align-items:start}
.preis-zeile:last-child{border-bottom:1px solid currentColor}
.preis-kopf{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.preis-name{font-family:var(--jakarta);font-weight:400;letter-spacing:-.03em;line-height:1.05;font-size:clamp(26px,2.4vw,40px)}
.preis-badge{border:1px solid currentColor;padding:5px 10px}
.preis-zahl{font-size:clamp(84px,11vw,210px);line-height:.82;letter-spacing:-.07em;white-space:nowrap}
.preis-zahl small{font-family:var(--mono);font-size:14px;letter-spacing:.1em;margin-left:10px;vertical-align:top}
.preis-zahl small.preis-vor{margin-left:0;margin-right:10px}
.preis-zusatz{margin-top:14px}
.preis-zeile .knoepfe{margin-top:10px}
@media (max-width:1100px){ .preis-zeile{grid-template-columns:1fr 1fr} .preis-zeile .punkte{grid-column:1 / -1} }
@media (max-width:640px){ .preis-zeile{grid-template-columns:1fr} }

/* ---------- Zahlen ---------- */
.zahlen li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:16px;align-items:end;padding:clamp(14px,1.8vw,26px) 0;border-top:1px solid currentColor}
.zahlen li:last-child{border-bottom:1px solid currentColor}
.zahl-riesig{font-size:clamp(84px,13vw,250px);line-height:.84;letter-spacing:-.07em;white-space:nowrap}
.zahlen .etikett{text-align:right;max-width:24ch;padding-bottom:.6em}
@media (max-width:640px){ .zahlen li{grid-template-columns:1fr} .zahlen .etikett{text-align:left} }

/* ---------- Zitat ---------- */
.zitat{font-family:var(--jakarta);font-weight:300;letter-spacing:-.04em;word-spacing:.06em;line-height:1.04;font-size:clamp(30px,4.5vw,86px);hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
@media (max-width:640px){ .zitat{hyphens:auto;-webkit-hyphens:auto} }
.zitat .w{display:inline}
/* be-different.png: Schriftzug liegt zwischen 41 % und 66 % der Bildhoehe — Leerraum per Abstand ausgleichen, Bild bleibt unbeschnitten */
.be-different{--bd:clamp(240px,32vw,500px);width:var(--bd);height:auto;margin-top:calc(clamp(40px,5vw,80px) - var(--bd) * .2);margin-bottom:calc(var(--bd) * -.16)}

/* ---------- Mitglied / Artikel ---------- */
.logo-felicitas{width:240px;height:auto}
.liste-gross li{font-family:var(--jakarta);font-weight:300;letter-spacing:-.03em;font-size:clamp(22px,2.3vw,38px);line-height:1.15;padding:12px 0;border-top:1px solid var(--linie-w)}
.ton-b .liste-gross li{border-top-color:var(--linie-b)}
.liste-gross.zwei{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
@media (max-width:640px){ .liste-gross.zwei{grid-template-columns:1fr} }
.karte-kontakt{display:flex;flex-direction:column;gap:6px}
/* Siegel 600x305, sichtbarer Inhalt mittig (x 193–411): 110x110 mit object-fit:cover blendet nur transparente Seitenraender aus */
.siegel{height:110px;width:110px;object-fit:cover;object-position:50% 50%;margin-top:18px;align-self:flex-start}
.kapitel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,5vw,96px);align-items:start}
.kapitel-kopf{position:sticky;top:calc(var(--kopf-h) + 40px);display:flex;flex-direction:column;gap:18px}
.kapitel-kopf .fahrt-nr{font-size:clamp(110px,16vw,300px)}
.kapitel-text p{font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.7;max-width:62ch;hyphens:auto;-webkit-hyphens:auto}
.kapitel-text p+p{margin-top:1.1em}
@media (max-width:959px){ .kapitel{grid-template-columns:1fr} .kapitel-kopf{position:static} }
.mittig{text-align:center;margin-inline:auto}
.mittig .text{margin-inline:auto}

/* ---------- Fusszeile ---------- */
.fuss{padding:clamp(72px,9vw,150px) var(--rand) 36px}
.fuss-gross{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(56px,7vw,110px)}
.fuss-gross a{font-family:var(--jakarta);font-weight:300;letter-spacing:-.05em;line-height:1;font-size:clamp(34px,7vw,132px);overflow-wrap:anywhere}
.fuss-gross a:hover{color:var(--gold)}
.fuss-raster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px;border-top:1px solid var(--linie-b);padding-top:36px;align-items:stretch}
.fuss-raster h4{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-b);margin-bottom:14px}
.fuss-raster nav{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fuss-raster nav a{font-size:15px}
.fuss-raster nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* Leitsatz mittig ueber den Ueberschriften · Zeichen in der linken Spalte (Martin 20.09.2026) */
/* Leitsatz steht nur noch oben auf der Startseite (Martin 20.09.2026) */
.fuss-marke{position:relative}
.fuss-marke .fuss-zeichen{position:absolute;top:2px;bottom:auto;left:0;height:calc(100% - 6px);width:auto;max-width:100%;object-fit:contain}
@media (max-width:959px){ .fuss-marke{order:9;justify-content:center;margin-top:8px} }
.fuss-unten{margin-top:48px;color:var(--grau-b);font-size:13px;text-align:center}
.fuss-fotos{margin-top:8px;color:var(--grau-b);font-size:12px;line-height:1.5}
@media (max-width:959px){ .fuss-raster{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .fuss-raster{grid-template-columns:1fr} }

/* Grosse Schrift auf breiten Bildschirmen ohne automatische Trennung (sonst „eige-nen").
   ⚠️ Muss am Dateiende stehen, sonst gewinnt die fruehere .h2-Regel. Darunter bleibt hyphens:auto (375 px). */
@media (min-width:960px){
  .h2,.h3,.gross,.zeilen-titel,.fahrt-name,.faq-frage,.liste-gross li,.preis-name,.kapitel-kopf .h3{hyphens:manual;-webkit-hyphens:manual}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .pfeil,.zeile-link::before,.menue a::after,.zeiger svg,.zeile-link .zeile-bild,.zeile-link > .etikett.neben{transition:none!important}
}

/* ---------- Magazin live aus PrivadiOffice (17.09.2026) ---------- */
.magazin-hinweis{padding-top:clamp(28px,3vw,48px)}
.magazin-hinweis:empty{display:none}

/* ---------- Rechtstexte (17.09.2026): ruhiger Lesesatz, gleiche Schriften/Toene ---------- */
.held.held-recht{min-height:clamp(340px,62svh,720px)}
.recht{max-width:1240px}
.recht-abschnitt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:18px clamp(32px,5vw,96px);
  padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--linie-w)}
.recht-abschnitt:first-child{border-top:0;padding-top:0}
.recht-h{font-family:var(--jakarta);font-weight:400;letter-spacing:-.025em;line-height:1.15;font-size:clamp(21px,1.9vw,30px);
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.recht-text{max-width:68ch}
.recht-text p,.recht-liste li{font-size:clamp(16px,1.12vw,18px);line-height:1.7;font-weight:400;white-space:pre-line;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.recht-text p+p,.recht-text p+ul,.recht-text ul+p{margin-top:.9em}
.recht-liste li{position:relative;padding-left:22px}
.recht-liste li+li{margin-top:.35em}
.recht-liste li::before{content:"";position:absolute;left:2px;top:.8em;width:8px;height:1px;background:currentColor}
.recht-text .offen{border-left:3px solid var(--gold);background:rgba(240,206,110,.18);padding:10px 14px}
.recht-stand{padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--linie-w)}
@media (max-width:959px){ .recht-abschnitt{grid-template-columns:1fr} }
@media (max-width:959px){ .recht-abschnitt:first-child > span:first-child{display:none} }

/* ---- Newsletter-Anmeldung im Fuss (18.09.2026, Martin) ----
   Steht ueber dem Fussraster. Der goldene Knopf ist hier der EINE gefuellte
   Knopf — alles andere im Fuss bleibt Schrift oder Umrandung. */
.nl{margin-bottom:clamp(56px,7vw,110px);padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--linie-b);max-width:760px}
.nl-etikett{margin:0 0 18px;font-family:var(--ubuntu);font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.nl-h{margin:0 0 18px;font-family:var(--jakarta);font-weight:300;letter-spacing:-.045em;line-height:1.02;font-size:clamp(32px,5vw,64px)}
.nl-spruch{margin:0 0 28px;max-width:54ch;opacity:.78}
.nl-form{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.nl-form input[type=email]{flex:1 1 280px;min-width:0;padding:17px 22px;border:1px solid var(--linie-b);border-radius:999px;
  background:transparent;color:var(--papier);font-family:var(--ubuntu);font-size:16px;transition:border-color .3s}
.nl-form input[type=email]::placeholder{color:rgba(250,249,246,.55)}
.nl-form input[type=email]:focus{outline:none;border-color:var(--gold)}
.nl-form.fehler input[type=email]{border-color:#E4736B}
.nl-knopf{flex:0 0 auto;border:0;cursor:pointer;font-size:16px}
.nl-meldung{margin:16px 0 0;font-size:16px;line-height:1.6;min-height:1.6em;color:var(--gold)}
.nl-meldung.fehler{color:#E4736B}
.nl-hinweis{margin:18px 0 0;max-width:60ch;opacity:.62}
.nl-form[aria-busy=true] .nl-knopf{opacity:.6;pointer-events:none}
@media (max-width:620px){
  .nl-form input[type=email]{flex-basis:100%}
  .nl-knopf{width:100%;justify-content:center}
}