/* ofmont.com. Designsprache der bisherigen Seite: Nachtblau #212d40 und Anthrazit #222 im Wechsel,
   Akzent Violett #9c62ee, Seitenkoepfe mit abgedunkeltem Bild, schraege Trennkanten,
   weisse Karten auf dunklem Grund, Cormorant Garamond fuer Titel, Abhaya Libre fuer Text. */

:root {
  --blue: #212d40;
  --dark: #222222;
  --black: #080b10;
  --card: #0d1421;
  --text: #e9ebef;
  --muted: #9ba0ab;
  --ink: #222222;
  --accent: #9c62ee;
  --accent-dark: #7e46d0;
  --line: rgba(255,255,255,0.12);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Abhaya Libre", Georgia, serif;
  --max: 1140px;
  --skew: 4vw;
}

/* Helle Ansicht (Schalter in der Navigation, Wahl im Browser gespeichert). Die Kopfbilder bleiben dunkel
   mit weissem Text, der Rest wird Papier und kühles Pastell; Violett bleibt der einzige Akzent, etwas dunkler
   für den Kontrast auf Hell. Standard bleibt dunkel. */
:root { --head-fade: rgba(33,45,64,.9); --ghost: #ffffff; --ghost-bg: rgba(255,255,255,.12); --card-border: transparent; --card-light-shadow: 0 18px 40px rgba(0,0,0,.35); --input-bg: #ffffff; }
html[data-theme="light"] {
  --blue: #e7eaf2; --dark: #f7f5f0; --black: #0f1520; --card: #ffffff; --text: #1e2634; --muted: #5d6675; --ink: #1e2634;
  --accent: #7141c9; --accent-dark: #5a2fa8; --line: rgba(20,30,50,.12);
  --head-fade: rgba(247,245,240,.96); --ghost: #1e2634; --ghost-bg: rgba(30,38,52,.08); --card-border: rgba(20,30,50,.1);
  --card-light-shadow: 0 14px 34px rgba(30,38,52,.12); --input-bg: #ffffff;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
#insider-titel { scroll-margin-top: 28px; }
body { margin: 0; background: var(--dark); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h2.accent { color: var(--accent); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
.divider { width: 70px; height: 3px; background: var(--accent); margin: 18px 0 24px; }
.center .divider { margin-left: auto; margin-right: auto; }
ul.clean { list-style: none; padding: 0; margin: 0; }

/* Kopf */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4vw; }
.brand img { height: 46px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; align-items: center; }
.site-nav a { color: #fff; font-family: var(--serif); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.site-nav a:hover { text-decoration: none; border-bottom-color: #fff; }
.site-nav a.active { border-bottom-color: #fff; }
.site-nav a.btn-nav { background: var(--accent); color: #fff; padding: 7px 15px; border-radius: 3px; border: 0; }
.site-nav a.btn-nav:hover { background: var(--accent-dark); }
.nav-toggle { display: none; background: rgba(8,11,16,.6); border: 1px solid var(--line); color: #fff; font-size: 1.3rem; padding: 4px 12px; border-radius: 3px; }
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: rgba(8,11,16,.96); display: none; padding: 16px 6vw 24px; border-bottom: 1px solid var(--line); }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Buttons */
.btn { display: inline-block; background: var(--accent); color: #fff; font-family: var(--serif); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 13px 26px; border-radius: 3px; border: 0; cursor: pointer; font-size: .95rem; line-height: 1.2; }
.btn:hover { background: var(--accent-dark); text-decoration: none; }
.btn.ghost { background: transparent; border: 1px solid var(--ghost); color: var(--ghost); }
.btn.ghost:hover { background: var(--ghost-bg); }
/* Auf dunklen Kopfbildern bleiben Geist-Knöpfe auch hell weiss */
.page-head .btn.ghost, .hero .btn.ghost, .form-stage .btn.ghost { border-color: #fff; color: #fff; }
.page-head .btn.ghost:hover, .hero .btn.ghost:hover { background: rgba(255,255,255,.12); }
/* Schalter hell/dunkel */
/* Der Schalter zeigt, was ein Klick tut (Vorgabe Florian, 21.09.2026): auf der dunklen Seite Sonne plus
   "Seite in hell anzeigen", auf der hellen Mond plus "Seite in dunkel anzeigen". Schmale Schirme: Kurzform. */
.theme-toggle { background: rgba(8,11,16,.35); border: 1px solid rgba(255,255,255,.35); color: #fff; height: 36px; padding: 0 14px 0 11px; border-radius: 18px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-family: var(--serif); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.theme-toggle:hover { background: rgba(255,255,255,.15); }
.theme-toggle .tt-ico { font-size: 1.05rem; }
.theme-toggle .tt-kurz { display: none; }
.theme-toggle .tt-mond, .theme-toggle .tt-dunkel { display: none; }
html[data-theme="light"] .theme-toggle .tt-sonne, html[data-theme="light"] .theme-toggle .tt-hell { display: none; }
html[data-theme="light"] .theme-toggle .tt-mond, html[data-theme="light"] .theme-toggle .tt-text.tt-dunkel { display: inline; }
@media (max-width: 640px) {
  .theme-toggle .tt-text { display: none !important; }
  .theme-toggle .tt-kurz.tt-hell { display: inline; }
  html[data-theme="light"] .theme-toggle .tt-kurz.tt-hell { display: none; }
  html[data-theme="light"] .theme-toggle .tt-kurz.tt-dunkel { display: inline; }
}
.btn.ghost-accent { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.btn.ghost-accent:hover { background: rgba(156,98,238,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* Abschnitte */
section { padding: 72px 0; position: relative; }
section.blue { background: var(--blue); }
section.dark { background: var(--dark); }
section.tight { padding: 44px 0; }
/* Schraege Unterkante wie im alten Auftritt */
.slant { padding-bottom: calc(72px + var(--skew)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skew)), 0 100%); margin-bottom: calc(-1 * var(--skew)); z-index: 2; }
.slant-up { padding-top: calc(72px + var(--skew)); clip-path: polygon(0 var(--skew), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--skew)); }

/* Seitenkopf mit Bild */
.page-head { position: relative; padding: 150px 0 110px; background: var(--black) center/cover no-repeat; color: #fff; text-align: center; }
.page-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,16,.55), rgba(8,11,16,.8)); }
.page-head .wrap { position: relative; }
.page-head h1 { text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.page-head p { max-width: 720px; margin: 0 auto; font-size: 1.05rem; }
.page-head .sub { color: #fff; font-family: var(--serif); font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
.page-head.plain { background: linear-gradient(180deg, #1a2130, var(--dark)); }
.page-head.plain::before { display: none; }
.page-head.bibliothek { background-image: url("/static/img/florian-bibliothek.png"); background-position: center 30%; }
.page-head.buchhandel { background-image: url("/static/img/buchhandel.png"); }
.page-head.envelope { background-image: url("/static/img/insider-bg.jpg"); text-align: left; }
.page-head.verlag { background-image: url("/static/img/verlag-1.jpg"); background-position: center 40%; }
.page-head.telefon { background-image: url("/static/img/kontakt-bg.jpg"); background-position: center 35%; }
.page-head .accent-text, .accent-text { color: var(--accent); }

/* Seitenkopf mit Hochformat-Bild: auf breiten Schirmen bleibt das Bild ganz erkennbar (scharf rechts,
   weich gezoomt dahinter), auf dem Handy als normales Kopfbild. Bild per Inline-Style --img. */
.page-head.portrait { min-height: min(78vh, 820px); display: flex; align-items: center; text-align: left; overflow: hidden; background: var(--black); padding: 150px 0 100px; }
.page-head.portrait .bg-blur { position: absolute; inset: -40px; background: var(--img) center 35%/cover no-repeat; filter: blur(26px) brightness(.5) saturate(1.1); transform: scale(1.06); }
.page-head.portrait .bg-sharp { position: absolute; top: 0; bottom: 0; right: 0; width: min(46%, 640px); background: var(--img) right center/contain no-repeat; }
.page-head.portrait::before { z-index: 1; background: linear-gradient(90deg, rgba(8,11,16,.94) 0%, rgba(8,11,16,.82) 42%, rgba(8,11,16,.35) 62%, rgba(8,11,16,.05) 100%); }
.page-head.portrait .wrap { z-index: 2; width: 100%; }
.page-head.portrait h1, .page-head.portrait h2 { max-width: 640px; }
.page-head.portrait p { margin: 0 0 1em; max-width: 560px; }
.page-head.portrait .sub { margin-bottom: 10px; }
@media (max-width: 900px) {
  .page-head.portrait { min-height: 0; display: block; text-align: center; padding: 140px 0 90px; }
  .page-head.portrait .bg-blur { inset: 0; filter: none; transform: none; background-size: cover; }
  .page-head.portrait .bg-sharp { display: none; }
  .page-head.portrait::before { background: linear-gradient(180deg, rgba(8,11,16,.55), rgba(8,11,16,.8)); }
  .page-head.portrait p, .page-head.portrait h1, .page-head.portrait h2 { margin-left: auto; margin-right: auto; }
  .page-head.portrait .btn-row { justify-content: center; }
}
.page-head.insider-cta { min-height: min(70vh, 720px); }

/* Der eine Satz, der überall wiederkehrt */
.mantra { font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; color: var(--text); }
.mantra.small { font-size: .95rem; color: var(--muted); }
.card-light .mantra { color: var(--ink); }

/* Formular-Bühne: Anmeldung auf Stimmungsbild */
.form-stage { position: relative; padding: 72px 0 90px; background: var(--black); overflow: hidden; }
.form-stage::before { content: ""; position: absolute; inset: -40px; background: var(--img) center 40%/cover no-repeat; filter: blur(3px) brightness(.55); transform: scale(1.04); }
.form-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(8,11,16,.35) 25%, rgba(8,11,16,.35) 75%, rgba(34,34,34,1) 100%); }
.form-stage .wrap { position: relative; z-index: 1; }

/* Scroll-Effekte (nur mit JS und ohne prefers-reduced-motion aktiv) */
.fx .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.fx .reveal.in { opacity: 1; transform: none; }
.fx .voice, .fx .card-light, .fx .reviews figure, .fx .series-item .cover { transition: transform .35s ease, box-shadow .35s ease; }
.fx .voice:hover, .fx .card-light:hover, .fx .reviews figure:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(0,0,0,.45); }
.fx .series-item .cover:hover { transform: translateY(-6px) rotate(-1deg); }
.fx .btn { transition: background .25s ease, transform .25s ease; }
.fx .btn:hover { transform: translateY(-2px); }
.fx .hero-cover img { animation: floatin 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes floatin { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
.fx .hero h1, .fx .hero .lead, .fx .hero .band2, .fx .hero .btn-row, .fx .hero .divider { animation: floatin 1s cubic-bezier(.2,.7,.2,1) both; }
.fx .hero .lead { animation-delay: .15s; } .fx .hero .band2 { animation-delay: .25s; } .fx .hero .btn-row { animation-delay: .35s; } .fx .hero .divider { animation-delay: .1s; }

/* Hero Startseite: eigene Bildebene (.hero-bg), die beim Scrollen langsamer mitzieht (Parallaxe, JS in base.html).
   Handy: Hochformat-Bild hero-berge.jpg; Desktop: Querformat berge-quer.jpg (Matterhorn bei Nacht). */
/* Die KI-Bilder sind 768 x 1408 (Hochformat). Auf dem Desktop wird das Bild deshalb nicht auf Bildschirmbreite
   gezogen (unscharf), sondern scharf in der Mitte gezeigt (Ebene .hero-sharp, bis 900 px breit, nahe der
   Originalgrösse) und die Ränder mit einer weich gezoomten Kopie gefüllt (.hero-bg). Beide Ebenen ziehen beim
   Scrollen mit (Parallaxe, JS in base.html). Der Inhalt sitzt unten, damit der Berg oben frei bleibt. */
.hero { position: relative; min-height: min(96vh, 960px); display: flex; align-items: flex-end; background: var(--black); padding: 260px 0 80px; overflow: hidden; }
/* Das Bild kommt aus --img (Inline-Style am Abschnitt), sonst hero-berge.jpg. Startseite: berghang.jpg
   (verschneite Hänge, Florian 21.09.2026) in der Insider-Sektion. */
.hero-bg, .para-bg { position: absolute; left: 0; right: 0; top: -18%; bottom: -18%; background: var(--black) var(--img, url("/static/img/hero-berge.jpg")) center 22%/cover no-repeat; filter: blur(16px) brightness(.5); transform: scale(1.1); will-change: transform; z-index: 0; }
.hero-sharp, .para-sharp { position: absolute; top: -14%; bottom: -14%; left: 50%; width: min(100%, 1000px); margin-left: max(-50%, -500px); background: var(--img, url("/static/img/hero-berge.jpg")) center 18%/cover no-repeat; will-change: transform; z-index: 0; }
/* Die scharfe Mitte läuft an den Rändern weich in die unscharfe Kopie aus, statt mit einer Kante abzubrechen
   (Florian, 21.09.2026: "Übergang wirkt abrupt, Text über der Kante sieht komisch aus"). Am Handy keine Maske,
   dort füllt die scharfe Ebene die ganze Breite. */
.hero-sharp, .para-sharp { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
@media (max-width: 820px) { .hero-sharp, .para-sharp { -webkit-mask-image: none; mask-image: none; } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,11,16,.3) 0%, rgba(8,11,16,0) 30%, rgba(8,11,16,.35) 62%, rgba(19,26,40,.96) 100%); }
.hero > .wrap { z-index: 2; }
@media (max-width: 820px) { .hero { padding-top: 200px; min-height: 0; } .hero-bg { display: none; } .hero-sharp { width: 100%; margin-left: -50%; background-position: center 12%; } }
/* Kopf mit Bergbild und Parallaxe (Insider-Sektion der Startseite, Insider-Seite): oben 260 px freier Berg, darunter der Inhalt */
.page-head.berge { text-align: left; background: var(--black); overflow: hidden; padding: 300px 0 90px; }
.page-head.berge.slant-up { padding-top: calc(300px + var(--skew)); }
.page-head.berge:not(.slant-up) { padding-bottom: 80px; }
.page-head.berge .para-sharp { background-position: center 10%; }
.page-head.berge::before { z-index: 1; background: linear-gradient(180deg, rgba(8,11,16,.15) 0%, rgba(8,11,16,0) 22%, rgba(8,11,16,.55) 34%, rgba(8,11,16,.82) 100%); }
.page-head.berge .wrap { z-index: 2; }
@media (max-width: 820px) { .page-head.berge { padding-top: 240px; } .page-head.berge .para-bg { display: none; } .page-head.berge .para-sharp { width: 100%; margin-left: -50%; } }
/* Handy: Anmeldung nach oben (Vorgabe Florian, 22.09.2026). Startseite: das Formular steht direkt unter dem Titel
   der Insider-Sektion, Text und Vorteile folgen darunter; dafuer wird der linke Block zur reinen Huelle
   (display:contents), damit alle vier Teile in einer Spalte sortierbar sind. Insider-Seite: weniger Berg ueber der
   Ueberschrift, und die Vorteile wandern unter das Formular (JS in base.html). Ab 901 px bleibt alles beim Alten. */
@media (max-width: 900px) {
  #insider > .wrap.two-col { display: flex; flex-direction: column; gap: 0; }
  #insider > .wrap.two-col > div:first-child { display: contents; }
  #insider > .wrap.two-col > div:first-child > * { min-width: 0; max-width: 100%; }
  #insider > .wrap.two-col > div:first-child > h2 { order: 1; }
  #insider > .wrap.two-col > .insider-form { order: 2; margin-bottom: 30px; }
  #insider > .wrap.two-col > div:first-child > p { order: 3; }
  #insider > .wrap.two-col > div:first-child > .vorteile { order: 4; }
  .page-head.berge:not(.slant-up) { padding-top: 160px; padding-bottom: 28px; }
  .form-stage { padding-top: 26px; }
}
.form-stage .vorteile { max-width: 720px; margin: 28px auto 0; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 56px; align-items: center; }
.hero-cover img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.65)); }
.hero h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 600; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.hero .lead { font-size: 1.1rem; font-weight: 500; margin-bottom: .3em; }
.hero .band2 { font-size: 1.1rem; font-weight: 700; color: #fff; }
.hero .hero-note { margin: 12px 0 0; font-size: .92rem; color: #c9cdd6; }
.fx .hero .hero-note { animation: floatin 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: .45s; }
@media (max-width: 820px) {
  .hero { padding-top: 110px; }
  .hero .wrap { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .hero-cover { max-width: 260px; margin: 0 auto; }
  .hero .divider { margin-left: auto; margin-right: auto; }
  .hero .btn-row { justify-content: center; }
}

/* Karten */
.card-light { background: #fff; color: var(--ink); border-radius: 4px; padding: 40px; box-shadow: var(--card-light-shadow); border: 1px solid var(--card-border); }
.card-light h2, .card-light h3 { color: var(--ink); }
.card-light h2.accent { color: var(--accent); }
.card-light a { color: var(--accent-dark); }
.card-dark { background: var(--card); border-radius: 4px; padding: 44px; box-shadow: 0 18px 40px rgba(0,0,0,.4); border: 1px solid var(--card-border); }
html[data-theme="light"] .card-dark { box-shadow: var(--card-light-shadow); }
html[data-theme="light"] .voice, html[data-theme="light"] .reviews figure, html[data-theme="light"] .insider-form { box-shadow: var(--card-light-shadow); border: 1px solid var(--card-border); }
.hero, .hero h1, .hero .lead, .page-head, .page-head h1, .page-head h2, .page-head p, .page-head .benefit p, .form-stage { color: #fff; }
.page-head .muted, .hero .muted { color: #c9cdd6; }
html[data-theme="light"] .hero::before { background: linear-gradient(180deg, rgba(8,11,16,.35) 0%, rgba(8,11,16,.05) 40%, rgba(8,11,16,.2) 72%, var(--head-fade) 100%); }
html[data-theme="light"] .page-head.plain { background: linear-gradient(180deg, #1a2130, #2b3549); }
html[data-theme="light"] .site-footer { background: var(--blue); }
html[data-theme="light"] .logo-round { background: var(--blue); }
html[data-theme="light"] .banner .logo-round img { filter: invert(1) brightness(.2); }
html[data-theme="light"] .footer-brand .logo-dunkel { display: none; } .footer-brand .logo-hell { display: none; } html[data-theme="light"] .footer-brand .logo-hell { display: block; }
html[data-theme="light"] .footer-inner h4 { color: var(--muted); border-bottom-color: var(--line); }
html[data-theme="light"] .footer-inner h4::after { background: var(--blau); }
html[data-theme="light"] .series-item .cover .label { text-shadow: 0 2px 10px #000; }
html[data-theme="light"] .zahl-hell { color: var(--ink); }
@media (max-width: 700px) { .card-light, .card-dark { padding: 28px 22px; } }

/* Raster */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two-col > * { min-width: 0; max-width: 100%; }  /* sonst drückt das eingebettete Anmeldeformular die Spalte am Handy über den Rand (Befund 21.09.2026) */
.two-col.text-wide { grid-template-columns: 1.4fr 1fr; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
@media (max-width: 860px) { .two-col, .two-col.text-wide { grid-template-columns: 1fr; } .three-col { grid-template-columns: 1fr; gap: 20px; } }

/* Zitat */
.quote { font-family: var(--serif); font-size: 1.4rem; font-style: italic; text-align: center; max-width: 820px; margin: 0 auto; }
.quote cite { display: block; font-style: normal; font-size: 1rem; color: var(--muted); margin-top: 10px; }
.quote-card { display: grid; grid-template-columns: 1fr 120px; gap: 28px; align-items: center; max-width: 860px; margin: 0 auto; }
.quote-card .mark { position: absolute; top: -26px; left: 40px; width: 56px; height: 56px; border-radius: 50%; background: var(--card); color: #fff; font-family: var(--serif); font-size: 3rem; line-height: 1.3; text-align: center; }
.quote-card p { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 8px; }
.quote-card cite { font-style: normal; color: #555; }
.avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
@media (max-width: 600px) { .quote-card { grid-template-columns: 1fr; } .quote-card .avatar { margin: 0 auto; } }

/* Stimmen */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 32px; }
.voice { background: #fff; color: var(--ink); padding: 30px 28px; border-radius: 4px; font-size: .98rem; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.voice p { flex: 1; margin-bottom: 18px; }
.voice-by { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); }
.voice-by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.stars { display: block; margin: 0 auto 10px; }

/* Rezensionen (Amazon-Screenshots) */
.reviews { columns: 4 230px; column-gap: 18px; }
.reviews figure { margin: 0 0 18px; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.3); break-inside: avoid; }
.reviews img { width: 100%; height: auto; }

/* Fakten */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; text-align: center; }
.fact strong { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--accent); line-height: 1.1; }
.fact span { color: var(--muted); font-size: .92rem; }

/* Reihe */
.series { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); gap: 32px; justify-content: center; }
.series-item { text-align: center; }
.series-item .cover { aspect-ratio: 2/3; border-radius: 3px; overflow: hidden; margin-bottom: 14px; position: relative; box-shadow: 0 16px 30px rgba(0,0,0,.45); }
.series-item .cover img { width: 100%; height: 100%; object-fit: cover; }
.series-item .cover .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--serif); font-size: 1.5rem; text-shadow: 0 2px 10px #000; }
.series-item h3 { margin-bottom: 2px; font-size: 1.25rem; }

/* Verlauf statt einfarbiger Fläche (Designprinzip Florian, 21.09.2026, Vorbild Kopf der Agentenseite):
   Klasse glow legt ein dunkles Nachtblau mit hellerem Schein oben links und einem Hauch Violett unten rechts
   über den Abschnitt. Nicht überall, aber immer wieder. Fuss und Formularbühne tragen dieselbe Idee. */
section.glow { background-image: radial-gradient(ellipse 65% 80% at 12% 0%, rgba(96,118,168,.42), transparent 62%), radial-gradient(ellipse 55% 70% at 92% 100%, rgba(156,98,238,.17), transparent 60%); }
section.dark.glow { background-image: radial-gradient(ellipse 65% 80% at 12% 0%, rgba(60,74,104,.55), transparent 62%), radial-gradient(ellipse 55% 70% at 92% 100%, rgba(156,98,238,.14), transparent 60%); }
.site-footer { background-image: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(156,98,238,.09), transparent 62%); }

/* Zitat-Bühne (Startseite, Anton Moser): grosses Zitat, riesige Anführung als Schein, Porträt, Name gesperrt */
.zitat-buehne { padding: 104px 0 96px; overflow: hidden; }
.zitat { margin: 0 auto; max-width: 880px; text-align: center; position: relative; }
.zitat::before { content: "\201C"; position: absolute; top: -70px; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 16rem; line-height: 1; color: var(--accent); opacity: .16; pointer-events: none; }
.zitat blockquote { margin: 0; position: relative; }
.zitat blockquote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.65rem, 3.3vw, 2.6rem); line-height: 1.22; color: #fff; margin: 0 0 32px; }
.zitat figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.zitat figcaption img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.5); margin-bottom: 10px; }
.zitat cite { font-style: normal; font-family: var(--serif); text-transform: uppercase; letter-spacing: .22em; font-size: .95rem; color: #fff; }
.zitat figcaption span { color: var(--muted); font-size: .92rem; }
.zitat-buehne .wrap::after { content: ""; display: block; width: 70px; height: 3px; background: var(--accent); margin: 40px auto 0; }

/* Vorteile des Insider-Clubs (Start und Insider-Seite): Glaskacheln mit Nummer, nicht mehr vier Häkchen-Zeilen */
.vorteile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.vorteile li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px 15px; background: rgba(13,20,33,.72); border: 1px solid rgba(255,255,255,.1); border-left: 2px solid var(--accent); border-radius: 4px; }
.vorteile .nr { font-family: var(--serif); font-size: 1.45rem; line-height: 1; color: var(--accent); font-weight: 600; min-width: 30px; padding-top: 3px; }
.vorteile h3 { font-size: 1.12rem; margin: 0 0 3px; color: #fff; }
.vorteile p { margin: 0; font-size: .93rem; color: #c9cdd6; line-height: 1.5; font-style: normal; }
.page-head .vorteile p { color: #c9cdd6; }

/* Logline (Agentenseite): der Stoff in drei Sätzen */
.logline .sub { margin-bottom: 14px; }
.logline-text { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; color: #fff; margin: 0; }
html[data-theme="light"] .logline-text { color: var(--text); font-weight: 500; letter-spacing: -.02em; }

/* Unterschrift und Name (Insider-Seite) */
.autor-sign { margin-top: 26px; }
.autor-sign img { width: 230px; height: auto; margin: 0 0 2px -4px; }
.autor-name { font-family: var(--serif); text-transform: uppercase; letter-spacing: .22em; font-size: .88rem; color: #c9cdd6; margin: 0; font-style: normal; }
.page-head .autor-name { margin: 0; }

/* Insider */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px; }
.benefit h3 { font-size: 1.15rem; margin-bottom: 4px; }
.benefit h3::before { content: "✓"; color: var(--accent); margin-right: 8px; font-weight: 700; }
.benefit p { font-style: italic; margin: 0; color: var(--text); }
@media (max-width: 600px) { .benefits { grid-template-columns: 1fr; } }
.insider-form { background: #fff; color: var(--ink); border-radius: 4px; padding: 30px 32px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.insider-form h3 { color: var(--ink); }
/* Das eingebettete Infomaniak-Formular bringt eigene Farben mit; hier neutralisiert. */
.insider-form [class^="inf-main"], .insider-form [class*=" inf-main"] { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.insider-form .inf-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
/* Rasterfelder duerfen schrumpfen, sonst zwingt die Mindestbreite der Eingabefelder die Spalte breiter als
   die Karte und die Felder stehen am Handy 22 px ueber deren Rand (gemessen 22.09.2026). */
.insider-form .inf-content > * { min-width: 0; }
.insider-form .inf-rgpd, .insider-form .inf-submit, .insider-form altcha-widget { grid-column: 1 / -1; }
.insider-form .inf-input input { background: #fff !important; color: #222 !important; border: 1px solid #c8cbcf !important; height: 46px !important; font-family: var(--sans) !important; font-size: 1rem !important; border-radius: 3px; width: 100% !important; }
.insider-form .inf-submit { text-align: right !important; }
.insider-form .inf-submit input { background: var(--accent) !important; color: #fff !important; font-family: var(--serif) !important; font-weight: 600 !important; letter-spacing: .07em; text-transform: uppercase; padding: 12px 24px !important; border-radius: 3px; cursor: pointer; font-size: .95rem !important; height: auto !important; }
.insider-form .inf-submit input:hover { background: var(--accent-dark) !important; }
.insider-form .inf-rgpd { color: #555 !important; font-size: .85rem !important; margin: 12px 0 !important; }
.insider-form h4, .insider-form span, .insider-form label { color: var(--ink) !important; }
.insider-form .inf-success p a { color: var(--accent-dark) !important; }
@media (max-width: 600px) { .insider-form .inf-content { grid-template-columns: 1fr; } }
/* Dunkle Fassung der Anmeldung (Insider-Seite): Glaskarte auf Stimmungsbild */
.insider-form.glass { background: rgba(13,20,33,.82); color: var(--text); border: 1px solid rgba(156,98,238,.45); border-top-width: 3px; box-shadow: 0 30px 70px rgba(0,0,0,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 36px 40px 30px; }
.insider-form.glass h3 { color: #fff; font-size: 1.6rem; }
.insider-form.glass .inf-input input { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; }
.insider-form.glass .inf-input input::placeholder { color: rgba(255,255,255,.55); }
.insider-form.glass .inf-input input:focus { border-color: var(--accent) !important; outline: none; }
.insider-form.glass h4, .insider-form.glass span, .insider-form.glass label { color: var(--text) !important; }
.insider-form.glass .inf-rgpd { color: var(--muted) !important; }
.insider-form.glass .inf-success p a { color: var(--accent) !important; }
@media (max-width: 700px) { .insider-form.glass { padding: 26px 20px 22px; } }

/* Kontaktformular */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
input[type=text], input[type=email], select, textarea { width: 100%; padding: 11px 12px; border: 1px solid #c8cbcf; border-radius: 3px; font-family: var(--sans); font-size: 1rem; background: #fff; color: #222; }
textarea { min-height: 150px; }
.hp { position: absolute; left: -9999px; }
.notice { padding: 14px 18px; border-radius: 3px; margin-bottom: 20px; display: none; }
.notice.ok { background: #e6f5e9; color: #1d5a2c; display: block; }
.notice.err { background: #fdeaea; color: #8a1c1c; display: block; }
.contact-info h3 { color: var(--accent); }
.contact-info ul { padding-left: 20px; }

/* Video */
.video { position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Autorenseite */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-grid .big { grid-column: 1 / -1; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; aspect-ratio: 1/1; }
.photo-grid .big img { aspect-ratio: 4/3; }
.interview { columns: 2; column-gap: 48px; }
.interview dt { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; margin-top: 26px; break-after: avoid; }
.interview dd { margin: 6px 0 0; font-size: .97rem; }
.interview > div { break-inside: avoid; }
@media (max-width: 800px) { .interview { columns: 1; } }

/* Presse, Rechtliches */
.press-list li { margin-bottom: 14px; }
.legal h2 { font-size: 1.45rem; margin-top: 34px; }

/* Banner-Karte (Ofmont Artis | Welt der Buecher | Kontakt) */
.banner { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.banner .logo-round { width: 56px; height: 56px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; }
.banner .logo-round img { width: 34px; }
.banner h3 { margin: 0; font-size: 1.3rem; line-height: 1.25; }
@media (max-width: 700px) { .banner { grid-template-columns: 1fr; text-align: center; } .banner .logo-round { margin: 0 auto; } }

/* Fuss */
.site-footer { background: var(--dark); border-top: 1px solid var(--line); padding: 56px 24px 0; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.footer-inner h4 { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); cursor: default; }
.footer-inner h4::after { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); margin-top: 7px; margin-bottom: -8px; }
.footer-inner ul { list-style: none; margin: 0; padding: 0; }
.footer-inner li { margin-bottom: 6px; font-size: .95rem; }
.footer-inner a { color: var(--text); }
.footer-brand img { width: 110px; }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .wrap { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; font-size: .85rem; color: var(--muted); }
.footer-bottom a { color: var(--text); margin-left: 14px; font-size: .9rem; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } .footer-bottom .wrap { flex-direction: column; gap: 10px; } }

/* =====================================================================================================
   HELLE ANSICHT ALS EIGENER LOOK (Vorgabe Florian 20.09.2026, Vorbild foresight.denotter.ch):
   warmes Papier, klare Sans-Serif mit leichtem Gewicht, dünne Linien statt Schatten, schwarze Knöpfe,
   viel Luft, keine Schrägen; Bilder als Fotoflächen neben dem Text, nicht als abgedunkelte Hintergründe.
   Dunkel bleibt der Standard bei jedem Besuch; die helle Wahl gilt nur für die Sitzung (sessionStorage).
   ===================================================================================================== */
.logo-hell { display: none; }
html[data-theme="light"] {
  --blue: #eeece7; --dark: #f6f5f2; --black: #f6f5f2; --card: #ffffff; --text: #0d0d0d; --muted: #4a4a4a; --ink: #0d0d0d;
  --accent: #0d0d0d; --accent-dark: #333333; --line: rgba(13,13,13,.22);
  --serif: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --skew: 0px; --head-fade: #f6f5f2; --ghost: #0d0d0d; --ghost-bg: rgba(13,13,13,.06); --card-border: rgba(13,13,13,.22);
  --card-light-shadow: none; --input-bg: #ffffff; --blau: #5b8fc7;
}
html[data-theme="light"] body { font-size: 17px; line-height: 1.6; letter-spacing: -.005em; }
html[data-theme="light"] .logo-dunkel { display: none; } html[data-theme="light"] .logo-hell { display: block; }
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
html[data-theme="light"] h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
html[data-theme="light"] h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
html[data-theme="light"] h2.accent { color: var(--text); }
html[data-theme="light"] h2.accent::after { content: "."; color: var(--blau); }
html[data-theme="light"] .divider { width: 44px; height: 1px; background: var(--text); }
html[data-theme="light"] a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .btn, html[data-theme="light"] .site-nav a { text-decoration: none; }
/* Kopfzeile */
/* Die Kopfzeile liegt auch in der hellen Ansicht ueber dem Bild, genau wie in der dunklen (Florian, 22.09.2026:
   "warum ziehst du das Bild nicht einfach bis ganz hoch"). Keine eigene Flaeche, keine Linie darunter; Position
   und Stapelhoehe kommen aus der Grundregel. Die Kopfbereiche bekommen dafuer dieselbe Hoehe wie dunkel. */
html[data-theme="light"] .site-header { padding: 18px 4vw; }
html[data-theme="light"] .site-nav a { color: var(--text); text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; border-bottom-color: transparent; }
html[data-theme="light"] .site-nav a.active, html[data-theme="light"] .site-nav a:hover { border-bottom-color: var(--text); }
html[data-theme="light"] .site-nav a.btn-nav { background: var(--text); color: #fff; border-radius: 0; padding: 8px 16px; }
html[data-theme="light"] .site-nav a.btn-nav:hover { background: #333; }
html[data-theme="light"] .nav-toggle, html[data-theme="light"] .theme-toggle { background: transparent; border-color: var(--text); color: var(--text); }
@media (max-width: 920px) { html[data-theme="light"] .site-nav { background: var(--dark); border-bottom: 1px solid var(--line); z-index: 60; } }
/* Knöpfe */
html[data-theme="light"] .btn { background: var(--text); color: #fff; border-radius: 0; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .95rem; padding: 12px 22px; }
html[data-theme="light"] .btn:hover { background: #333; }
html[data-theme="light"] .btn.ghost, html[data-theme="light"] .btn.ghost-accent, html[data-theme="light"] .page-head .btn.ghost, html[data-theme="light"] .hero .btn.ghost { background: transparent; border: 1px solid var(--text); color: var(--text); }
html[data-theme="light"] .btn.ghost:hover { background: rgba(13,13,13,.06); }
/* Abschnitte: keine Schrägen, dünne Linien */
html[data-theme="light"] section { padding: 88px 0; }
html[data-theme="light"] .slant, html[data-theme="light"] .slant-up { clip-path: none; margin: 0; padding-top: 88px !important; padding-bottom: 88px !important; }
html[data-theme="light"] section.blue, html[data-theme="light"] section.dark { border-top: 1px solid var(--line); }
html[data-theme="light"] section.tight { padding: 56px 0; }
/* Übergang zwischen Abschnitten (Florian 21.09.2026, "unglaublich langweilig"): auf der Linie sitzt mittig der
   blaue Punkt aus den Titeln, darunter fällt ein kurzer Faden in den Abschnitt; die Fläche wechselt leicht. */
html[data-theme="light"] section.blue::before, html[data-theme="light"] section.dark::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--blau); z-index: 3; }
html[data-theme="light"] section.blue::after, html[data-theme="light"] section.dark::after { content: ""; position: absolute; top: 4px; left: 50%; width: 1px; height: 46px; background: linear-gradient(var(--blau), transparent); z-index: 3; }
html[data-theme="light"] section.glow { background-image: none; }
html[data-theme="light"] .site-footer { background-image: none; }
/* Karten: flach, mit Linie */
html[data-theme="light"] .card-dark, html[data-theme="light"] .card-light, html[data-theme="light"] .voice, html[data-theme="light"] .insider-form, html[data-theme="light"] .reviews figure, html[data-theme="light"] .quote-card { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
html[data-theme="light"] .card-dark { padding: 40px; }
html[data-theme="light"] .card-light a, html[data-theme="light"] .voice-by, html[data-theme="light"] .quote-card cite { color: var(--text); }
html[data-theme="light"] .quote-card .mark { display: none; }
html[data-theme="light"] .quote { font-style: normal; font-weight: 500; letter-spacing: -.02em; }
html[data-theme="light"] .quote cite { color: var(--muted); }
/* Zahlenfakten wie beim Vorbild: Linie oben, Zahl gross, Text darunter */
html[data-theme="light"] .facts { text-align: left; gap: 24px; }
html[data-theme="light"] .fact { border-top: 1px solid var(--text); padding-top: 14px; }
html[data-theme="light"] .fact strong { color: var(--text); font-weight: 500; letter-spacing: -.02em; font-size: 2.2rem; }
html[data-theme="light"] .benefit h3::before { color: var(--text); }
html[data-theme="light"] .benefit p { font-style: normal; color: var(--muted); }
html[data-theme="light"] .vorteile li { background: rgba(255,255,255,.86); border: 1px solid var(--line); border-left: 2px solid var(--blau); border-radius: 0; backdrop-filter: none; }
html[data-theme="light"] .vorteile .nr { color: var(--blau); font-weight: 500; }
html[data-theme="light"] .vorteile h3 { color: var(--text); }
html[data-theme="light"] .vorteile p, html[data-theme="light"] .page-head .vorteile p { color: var(--muted); }
html[data-theme="light"] .autor-sign img { filter: invert(1) brightness(.15); }
html[data-theme="light"] .autor-name { color: var(--muted); }
html[data-theme="light"] .zitat::before { color: var(--blau); opacity: .35; }
html[data-theme="light"] .zitat blockquote p { color: var(--text); font-style: normal; font-weight: 500; letter-spacing: -.02em; }
html[data-theme="light"] .zitat cite { color: var(--text); font-weight: 500; letter-spacing: .12em; }
html[data-theme="light"] .zitat figcaption img { border-color: var(--text); box-shadow: none; }
html[data-theme="light"] .zitat-buehne .wrap::after { width: 44px; height: 1px; background: var(--text); }
html[data-theme="light"] .hero .hero-note { color: var(--muted); }
html[data-theme="light"] .mantra { font-style: normal; color: var(--muted); font-size: 1.05rem; }
html[data-theme="light"] .series-item .cover { border-radius: 0; box-shadow: none; border: 1px solid var(--line); }
/* Kopfbereiche (zweite Fassung 21.09.2026, Florian: "das mit den Bildern so am Rand passt nicht"): das Bild liegt
   als Hintergrund über die ganze Breite, aufgehellt, und ein Papier-Verlauf von links hält den Text lesbar; auf dem
   Handy läuft der Verlauf von oben nach unten. Kein Bild mehr am Rand, keine Linie. */
html[data-theme="light"] .page-head { background: var(--dark); background-image: none !important; color: var(--text); text-align: left; padding: 150px 0 96px; min-height: 0; display: block; overflow: hidden; border-bottom: 1px solid var(--line); }
html[data-theme="light"] .page-head, html[data-theme="light"] .page-head h1, html[data-theme="light"] .page-head h2, html[data-theme="light"] .page-head p, html[data-theme="light"] .page-head .benefit p, html[data-theme="light"] .page-head .sub, html[data-theme="light"] .page-head .accent-text { color: var(--text); text-shadow: none; }
html[data-theme="light"] .page-head h1, html[data-theme="light"] .page-head h2 { color: var(--text) !important; }
html[data-theme="light"] .page-head::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--img, none) center 30%/cover no-repeat; opacity: .5; }
html[data-theme="light"] .page-head::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(246,245,242,.85) 0%, rgba(246,245,242,0) 150px), linear-gradient(90deg, var(--dark) 0%, rgba(246,245,242,.92) 40%, rgba(246,245,242,.55) 68%, rgba(246,245,242,.18) 100%); }
html[data-theme="light"] .page-head .wrap { position: relative; z-index: 2; max-width: var(--max); width: 100%; }
html[data-theme="light"] .page-head.bibliothek { --img: url("/static/img/florian-bibliothek.png"); }
html[data-theme="light"] .page-head.buchhandel { --img: url("/static/img/buchhandel.png"); }
html[data-theme="light"] .page-head.verlag { --img: url("/static/img/verlag-1.jpg"); }
html[data-theme="light"] .page-head.telefon { --img: url("/static/img/kontakt-bg.jpg"); }
html[data-theme="light"] .page-head.berge { --img: url("/static/img/hero-berge.jpg"); }
html[data-theme="light"] .page-head.plain::after, html[data-theme="light"] .page-head.plain::before { display: none; }
html[data-theme="light"] .page-head:not(.plain) .wrap > *:not(.two-col), html[data-theme="light"] .page-head.portrait .wrap > * { max-width: 640px; }
html[data-theme="light"] .page-head .wrap.two-col, html[data-theme="light"] .page-head .wrap > .two-col { grid-template-columns: 1fr 1fr; gap: 48px; }
html[data-theme="light"] .page-head p { margin-left: 0; }
html[data-theme="light"] .page-head .sub { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--muted); }
html[data-theme="light"] .page-head.portrait .bg-blur, html[data-theme="light"] .page-head.portrait .bg-sharp, html[data-theme="light"] .para-bg, html[data-theme="light"] .para-sharp, html[data-theme="light"] .hero-bg { display: none; }
html[data-theme="light"] .page-head.portrait { min-height: 0; padding: 150px 0 96px; }
html[data-theme="light"] .page-head.berge { padding: 150px 0 96px; }
html[data-theme="light"] .page-head.insider-cta { padding: 96px 0; }
html[data-theme="light"] .page-head.buchhandel::after { opacity: .28; }
html[data-theme="light"] .page-head .btn.ghost { border-color: var(--text); color: var(--text); }
@media (max-width: 900px) {
  html[data-theme="light"] .page-head, html[data-theme="light"] .page-head.portrait, html[data-theme="light"] .page-head.berge { padding: 150px 0 80px; text-align: left; }
  html[data-theme="light"] .page-head::before { background: linear-gradient(180deg, rgba(246,245,242,.8) 0%, rgba(246,245,242,.35) 16%, rgba(246,245,242,.9) 52%, var(--dark) 78%); }
  html[data-theme="light"] .page-head .wrap.two-col, html[data-theme="light"] .page-head .wrap > .two-col { grid-template-columns: 1fr; gap: 28px; }
  html[data-theme="light"] .page-head.plain { padding-top: 130px; }
  html[data-theme="light"] .page-head.portrait p, html[data-theme="light"] .page-head.portrait h1, html[data-theme="light"] .page-head.portrait h2 { margin-left: 0; margin-right: 0; }
  html[data-theme="light"] .page-head.portrait .btn-row { justify-content: flex-start; }
}
/* Hero der Startseite: dasselbe Prinzip, Berg über die ganze Breite hinter einem Papier-Verlauf, Cover ohne Rahmen */
html[data-theme="light"] .hero { background: var(--dark); min-height: min(82vh, 780px); padding: 170px 0 90px; align-items: center; border-bottom: 1px solid var(--line); }
html[data-theme="light"] .hero-sharp { display: block; position: absolute; inset: 0; left: 0; top: 0; bottom: 0; width: 100%; margin: 0; filter: none; background: url("/static/img/berge-quer.jpg") center 40%/cover no-repeat; opacity: .55; border: 0; transform: none !important; }
html[data-theme="light"] .hero::before { display: block; content: ""; z-index: 1; background: linear-gradient(180deg, rgba(246,245,242,.85) 0%, rgba(246,245,242,0) 150px), linear-gradient(90deg, var(--dark) 0%, rgba(246,245,242,.94) 42%, rgba(246,245,242,.6) 70%, rgba(246,245,242,.2) 100%); }
html[data-theme="light"] .hero > .wrap { grid-template-columns: minmax(200px, 320px) 1fr; gap: 48px; padding-right: 24px; }
html[data-theme="light"] .hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
html[data-theme="light"] .hero .btn-row { margin-top: 18px; }
html[data-theme="light"] .hero, html[data-theme="light"] .hero h1, html[data-theme="light"] .hero .lead, html[data-theme="light"] .hero .band2 { color: var(--text); text-shadow: none; }
html[data-theme="light"] .hero .lead { color: var(--muted); font-weight: 400; }
html[data-theme="light"] .hero-cover img { filter: drop-shadow(0 24px 34px rgba(0,0,0,.28)); border: 0; }
@media (max-width: 820px) {
  html[data-theme="light"] .hero { padding: 150px 0 70px; min-height: 0; }
  html[data-theme="light"] .hero-sharp { background-position: center 25%; opacity: .5; }
  html[data-theme="light"] .hero::before { background: linear-gradient(180deg, rgba(246,245,242,.8) 0%, rgba(246,245,242,.3) 15%, rgba(246,245,242,.88) 46%, var(--dark) 72%); }
  html[data-theme="light"] .hero > .wrap { padding: 0 24px; grid-template-columns: 1fr; text-align: center; }
  html[data-theme="light"] .hero-cover { max-width: 240px; margin: 0 auto; }
}
/* Anmeldung und Bühne */
html[data-theme="light"] .insider-form.glass { background: #fff; color: var(--text); border: 1px solid var(--text); backdrop-filter: none; }
html[data-theme="light"] .insider-form.glass h3, html[data-theme="light"] .insider-form.glass span, html[data-theme="light"] .insider-form.glass label { color: var(--text) !important; }
html[data-theme="light"] .insider-form .inf-input input, html[data-theme="light"] .insider-form.glass .inf-input input { background: #fff !important; color: var(--text) !important; border: 1px solid var(--text) !important; border-radius: 0; }
html[data-theme="light"] .insider-form .inf-submit input { background: var(--text) !important; border-radius: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans) !important; }
html[data-theme="light"] .insider-form .inf-input input::placeholder, html[data-theme="light"] .insider-form.glass .inf-input input::placeholder { color: rgba(13,13,13,.55); opacity: 1; }
html[data-theme="light"] .page-head.berge:not(.slant-up) { padding-bottom: 80px; }
@media (max-width: 900px) {
  html[data-theme="light"] .page-head.berge:not(.slant-up) { padding-top: 160px; padding-bottom: 24px; }
  html[data-theme="light"] .form-stage { padding-top: 26px; }
}
html[data-theme="light"] .form-stage { background: var(--dark); color: var(--text); border-top: 1px solid var(--line); }
html[data-theme="light"] .form-stage::before { filter: none; opacity: .18; }
html[data-theme="light"] .form-stage::after { display: none; }
html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] select, html[data-theme="light"] textarea { border: 1px solid var(--text); border-radius: 0; }
html[data-theme="light"] .contact-info h3 { color: var(--text); }
/* Fuss */
html[data-theme="light"] .site-footer { background: var(--dark); border-top: 1px solid var(--text); }
html[data-theme="light"] .footer-inner a, html[data-theme="light"] .footer-bottom a { color: var(--text); text-decoration: none; }
html[data-theme="light"] .footer-brand .logo-hell { display: block; }
html[data-theme="light"] .banner .logo-round { background: var(--text); border: 1px solid var(--text); }
html[data-theme="light"] .banner .logo-round img { filter: none; }
html[data-theme="light"] .interview dt { font-weight: 600; }
html[data-theme="light"] .fx .voice:hover, html[data-theme="light"] .fx .card-light:hover, html[data-theme="light"] .fx .reviews figure:hover { transform: none; box-shadow: none; }