@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("schriften/manrope-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("schriften/fraunces-latin-wght-normal.woff2") format("woff2")}@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("schriften/fraunces-latin-wght-italic.woff2") format("woff2")}
:root{
  --nacht:#f2eee5;--kohle:#fbf9f4;--rauch:#ebeae5;
  --papier:#1d2420;--papier-2:#595d57;--grau:#83857f;
  --linie:rgba(29, 36, 32, 0.12);--linie-stark:rgba(29, 36, 32, 0.28);
  --signal:#1f3328;--schein:#1f3328;--farbe:#1f3328;
  --display:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--serif:"Fraunces", Georgia, "Times New Roman", serif;--titelschrift:"Fraunces", Georgia, "Times New Roman", serif;
  --rund:26px;--rund-gross:34px;--rund-klein:18px;
  --glas:rgba(29, 36, 32, 0.035);--glas-stark:rgba(29, 36, 32, 0.06);--glas-rand:rgba(29, 36, 32, 0.13);
}
html{background:var(--nacht);color:var(--papier)}
/* Titel in der Titelschrift des Themas, ohne die schmale Form von OKLETSGO */
.riesig,.titel,.held-titel,.fuss-titel,.satz-text,.mo-lauf-teil span{font-family:var(--titelschrift);font-variation-settings:normal;font-weight:500;text-transform:none;letter-spacing:-0.01em}
.riesig,.held-titel{line-height:.98}

/* Der große Satz in der Titelschrift (seit dem 03.11.2026), etwas ruhiger als bei OKLETSGO */
.satz-text{font-size:clamp(36px,5vw,80px);line-height:1.04;max-width:20ch}
.serif{font-family:var(--titelschrift);font-style:italic;color:var(--signal)}
.marke-name{font-family:var(--titelschrift);font-weight:500;font-size:20px;letter-spacing:-.01em;color:var(--papier)}
/* Über Bildern und Filmen (Kopf): helle Schrift auf dunklem Schleier, wie im neuen Builder; ohne Bild die Gegenfläche */
.held{--papier:#f6f3ee;--papier-2:rgba(246,243,238,.84);--grau:rgba(246,243,238,.66);--signal:#67746d;--linie:rgba(246,243,238,.16);color:var(--papier)}
.held-medium{background:#1f3328}
.held .knopf.voll{background:#f6f3ee;border-color:#f6f3ee;color:#161616}
.held .knopf:not(.voll){color:#f6f3ee;border-color:rgba(246,243,238,.4)}
/* Der Kopf über dem Bild des ersten Abschnitts: hell, bis man scrollt */
body:has(main > .held:first-child) .kopf:not(.gescrollt):not(.offen){--papier:#f6f3ee;--papier-2:rgba(246,243,238,.84);--linie:rgba(246,243,238,.2);--linie-stark:rgba(246,243,238,.4);color:#f6f3ee}
/* Die Gegenfläche (Abschnitte mit „Hell" bzw. Kontrast) */
.hell{--signal:#737e74;--nacht:#1f3328;--kohle:#2c3e33;--rauch:#38493f;--papier:#f2eee5;--papier-2:#bdbfb6;--grau:#939a90;--linie:rgba(242, 238, 229, 0.14);--linie-stark:rgba(242, 238, 229, 0.3);background:var(--nacht)}
.hell .knopf.voll{background:var(--papier);color:var(--nacht);border-color:var(--papier)}
/* Wie im Websitebuilder vom 24.10.2026 (Holz Mewes): ruhigere Grössen, Akzentwörter im Titel in derselben Stärke,
   Dachzeilen als Versalien in der Akzentfarbe, Inhalt höchstens 1200 px breit */
.titel{font-size:clamp(34px,4.2vw,58px);line-height:1.06}
.held-titel{font-size:clamp(44px,6.6vw,92px)}
.titel .serif,.held-titel .serif,.riesig .serif,.mv-satz-fragen .titel .serif{font-weight:inherit;font-variation-settings:normal}
.abschnitt{padding-left:max(var(--rand),calc((100% - 1200px) / 2));padding-right:max(var(--rand),calc((100% - 1200px) / 2))}
.abschnitt-kopf p{font-size:17px}
.kicker,.mo-gs-karte .kicker,.mo-gs .kicker{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
.kicker i{width:14px;height:2px;border-radius:1px;background:var(--signal)}
.held .kicker{color:#f6f3ee}.held .kicker i{background:#f6f3ee}
.knopf{font-family:var(--display)}
.held .knopf.voll{background:#1f3328;border-color:#1f3328;color:#ffffff}
/* Karten mit Bild: Titel wie Zwischenüberschriften */
.mo-gs-karte h3,.mo-gs-unter h3{font-family:var(--titelschrift);font-size:clamp(20px,1.9vw,26px);font-variation-settings:normal;line-height:1.15}
.mo-gs-karte .mo-gs-medium{aspect-ratio:4/3}
/* Versetzt: Bild und Text nebeneinander, abwechselnd */
.mo-gs-folge{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);width:100%}
.mo-gs-folge.rechts .mo-gs-medium{order:2}
.mo-gs-folge .mo-gs-medium{aspect-ratio:3/2}
.mo-gs-folge + .mo-gs-folge{margin-top:clamp(40px,5vw,80px)}
.mo-gs-unter{grid-template-columns:1fr;gap:10px}
.mo-gs-unter p:not(.kicker){font-size:15.5px}
/* Laufschrift als Band in der Akzentfarbe */
.mo-laufband{background:#1f3328;color:#ffffff;border:0;padding:clamp(28px,3.4vw,48px) 0}
.mo-lauf-teil span{font-family:var(--titelschrift);font-variation-settings:normal;font-weight:700;text-transform:none;font-size:clamp(40px,6vw,88px)}
.mo-lauf-punkt{background:currentColor;opacity:.5}
/* Zahlen in der Akzentfarbe */
.mo-zahl b{font-family:var(--titelschrift);font-variation-settings:normal;font-weight:700;color:var(--signal);font-size:clamp(40px,calc(20vw / var(--n,4)),64px)}
.hell .mo-zahl b{color:#737e74}
/* Über Bildern bis an den Rand: helle Schrift auf dunklem Schleier */
.mv-zr-breit,.mv-tb-breit{--papier:#f6f3ee;--papier-2:rgba(246,243,238,.86);--grau:rgba(246,243,238,.7);color:#f6f3ee;min-height:min(70vh,640px)}
.mv-zr-breit::after,.mv-tb-breit::after{background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.25))}
.mv-zr-breit .serif,.mv-tb-breit .serif{color:#67746d}
.mv-zr-breit{align-items:center;justify-items:center;text-align:center}
.mv-zr-gross{margin:0 auto}
.mv-zr-gross .riesig{font-size:clamp(36px,5vw,68px);line-height:1.05}
.mv-zr-breit .zwischenruf-knoepfe{justify-content:center}
/* Umfang: Überschrift links, Liste rechts mit Haken */
.abschnitt:has(> .umfang){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start}
.abschnitt:has(> .umfang) .abschnitt-kopf{grid-template-columns:1fr;gap:16px;margin:0}
.umfang{grid-template-columns:1fr}
.umfang li{padding:13px 0;font-size:15.5px;grid-template-columns:24px 1fr}
.umfang li::before{width:18px;height:18px;margin-top:.1em;background:color-mix(in srgb,var(--signal) 16%,transparent);-webkit-mask:none;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--signal) 30%,transparent)}
/* Galerie: Bildunterschriften in der Textschrift */
.mo-fotos figcaption{font-family:var(--display);font-size:12.5px;color:var(--grau);padding-top:6px}
.mo-fotos figure{background:transparent;aspect-ratio:auto;overflow:visible;border-radius:0}
.mo-fotos figure img{aspect-ratio:var(--v);height:auto;border-radius:var(--rund-klein)}
@media (max-width:820px){.abschnitt:has(> .umfang),.mo-gs-folge{grid-template-columns:1fr}.mo-gs-folge.rechts .mo-gs-medium{order:0}}
.korn::after{display:none}
.knopf.voll{background:var(--signal);border-color:var(--signal);color:#ffffff}
.kopf.gescrollt{background:rgba(242, 238, 229, 0.86)}
/* Stimmen als Karten (03.11.2026): so viele Spalten, wie passen, ruhigere Zitate mit Anführungszeichen */
.mv-stimmen-karten{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mv-stimme{background:var(--kohle);gap:26px}
.mv-stimme blockquote::before{content:'“';display:block;font-family:var(--titelschrift);font-size:64px;line-height:.62;color:var(--signal);margin-bottom:10px}
.mv-stimme blockquote p{font-size:clamp(18px,1.35vw,21px);line-height:1.45}
.mv-stimme figcaption{color:var(--papier);font-weight:600}
/* Logo im Kopf (09.11.2026): sind beide Fassungen da, die zur Grundfarbe passende; über dem Bild des ersten Abschnitts die helle */
.kopf .marke-bild.logo-hell{display:none}

/* Logo (seit dem 03.11.2026): im Kopf und im Fuss; im Fuss das, das zur Gegenfläche passt */
.fuss-logo .logo-dunkel{display:none}
.fuss-logo .logo-hell{display:block}
/* Ein Bild daneben ist gleich gross, egal auf welcher Seite es steht */
@media (min-width:821px){.mv-tb-seite.rechts{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}


/* Kopf als schwebende Karte (09.11.2026, wie im Cabinmanager): so breit wie der Inhalt, Glas in der Fläche, ein Raster-Menü klappt darunter auf */
.kopf{top:clamp(8px,1.2vw,16px);left:50%;right:auto;width:min(1240px,calc(100% - 24px));translate:-50% 0;padding:10px 12px 10px 22px;border-radius:var(--rund);gap:22px}
.kopf::before{opacity:1;border-radius:inherit;background:color-mix(in srgb,var(--kohle) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 0 0 1px var(--linie),0 12px 32px -24px rgba(0,0,0,.55)}
.kopf.gescrollt{padding-top:10px;padding-bottom:10px}
.kopf .marke img.marke-bild{height:30px}
.kopf nav{gap:24px}
body:has(main > .held:first-child) .kopf:not(.gescrollt):not(.offen){--papier:#1d2420;--papier-2:#595d57;color:#1d2420}
@media (max-width:820px){.kopf,.kopf.gescrollt{padding:8px 10px 8px 16px}.kopf.offen{top:0;left:0;width:100%;translate:none;border-radius:0;padding:18px var(--rand)}.kopf.offen::before{border-radius:0;background:var(--nacht)}}
/* Kompakt: rund halb so viel Luft zwischen den Abschnitten, Überschriften näher am Inhalt, Kacheln ohne Leerraum */
:root{--luft:clamp(56px,7vw,112px)}
[data-neu][data-g-abstand="eng"]{--luft:clamp(44px,5.4vw,84px)}
[data-neu][data-g-abstand="weit"]{--luft:clamp(68px,8.4vw,132px)}
.abschnitt-kopf{margin-bottom:clamp(22px,3vw,44px);gap:18px}
.bs-kopf{margin-bottom:clamp(22px,3vw,40px)}
.mv-kachel{min-height:0;gap:18px;padding:clamp(20px,2vw,28px)}
.mv-kopf-geteilt,.mv-kopf-rahmen,.mv-kopf-text-gross{padding-top:calc(var(--luft) * .5 + 80px)}
main > .abschnitt:first-child{padding-top:calc(var(--luft) + 76px)}
.fuss{padding-top:clamp(56px,7vw,96px)}
.mv-tb-verlauf{min-height:clamp(440px,42vw,700px)}