@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:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("schriften/playfair-display-latin-wght-normal.woff2") format("woff2")}@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url("schriften/playfair-display-latin-wght-italic.woff2") format("woff2")}
:root{
  --nacht:#222a2b;--kohle:#2c3738;--rauch:#3a4445;
  --papier:#f3f1ec;--papier-2:#b8b9b6;--grau:#8f918f;
  --linie:rgba(243, 241, 236, 0.12);--linie-stark:rgba(243, 241, 236, 0.28);
  --signal:#d6b67a;--schein:#d6b67a;--farbe:#d6b67a;
  --display:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--serif:"Playfair Display", Georgia, "Times New Roman", serif;--titelschrift:"Playfair Display", Georgia, "Times New Roman", serif;
  --rund:26px;--rund-gross:34px;--rund-klein:18px;
  --glas:rgba(243, 241, 236, 0.055);--glas-stark:rgba(243, 241, 236, 0.09);--glas-rand:rgba(243, 241, 236, 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:400;text-transform:none;letter-spacing:-0.01em}
.riesig,.held-titel{line-height:.98}
.riesig,.titel,.held-titel,.fuss-titel,.satz-text,.mo-gs-hoch h3{font-style:italic}
/* 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:400;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:#d6b67a;--linie:rgba(246,243,238,.16);color:var(--papier)}
.held-medium{background:#1b2122}
.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{--nacht:#1b2122;--kohle:#282d2e;--rauch:#353a3a;--papier:#f3f1ec;--papier-2:#bdbdba;--grau:#929391;--linie:rgba(243, 241, 236, 0.14);--linie-stark:rgba(243, 241, 236, 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:#d6b67a;border-color:#d6b67a;color:#161616}
/* 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:#d6b67a;color:#161616;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:#d6b67a}
/* Ü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:#d6b67a}
.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}}

/* 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 (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)}}
/* Der Schleier über dem ersten Bild in der Grundfarbe statt Schwarz: Die Farbe der Marke bleibt sichtbar */
.held::before{background:linear-gradient(to top,rgba(34,42,43,.9) 0%,rgba(34,42,43,.4) 40%,rgba(34,42,43,.06) 70%,rgba(34,42,43,.32) 100%)}
/* Kopf als schwebendes Glas: schmal, mit Luft ums Logo; auch gescrollt bleibt es Glas (nur leicht in der Grundfarbe getönt, damit die Schrift über hellen Bildern lesbar bleibt) */
.kopf{top:clamp(10px,1.6vw,20px);left:50%;right:auto;width:min(580px,calc(100% - 24px));translate:-50% 0;padding:15px 28px 15px 30px;border-radius:999px;gap:22px}
.kopf::before{opacity:1;border-radius:inherit;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 14px 40px rgba(0,0,0,.18);transition:opacity .4s,background .4s}
.kopf.gescrollt{padding-top:15px;padding-bottom:15px}
.kopf.gescrollt::before{background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),color-mix(in srgb,var(--nacht) 40%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 40px rgba(0,0,0,.22)}
.kopf .marke img.marke-bild{height:40px}
.kopf nav{gap:22px}
.kopf-tafel{top:calc(100% + 16px)}
@media (max-width:820px){.kopf,.kopf.gescrollt{padding:11px 16px 11px 22px}.kopf .marke img.marke-bild{height:34px}.kopf.offen{top:0;left:0;width:100%;translate:none;border-radius:0;padding:22px var(--rand)}.kopf.offen::before{border-radius:0;background:var(--nacht)}}
/* Der erste Abschnitt mit Rahmen in der Grundfarbe */
main > .held:first-child,main > .mv-tb-breit:first-child{margin:clamp(8px,1.2vw,16px);border-radius:var(--rund-gross);overflow:hidden}
main > .held:first-child:not([data-o-hoehe="hoch"]):not([data-o-hoehe="kompakt"]){min-height:calc(100svh - 2 * clamp(8px,1.2vw,16px))}