/* BEYOND MY STORY – V6 (02.11.2026), auf den V5-Aufbau gesetzt (bms5.css bleibt unverändert).
   Version 2: keine Kapitelleiste links (volle Breite, größere Bilder), keine runden Siegel („kein Rad“ – Sylvia),
   Monogramme nur aus Buchstaben, Faktenleiste raus, „Auf einen Blick“ als Bildkacheln. */

/* ---------- volle Breite statt Kapitelleiste ---------- */
.kap__in { display: block; }
.fuss__in { grid-template-columns: minmax(0, 1fr); }
.fuss__nav { grid-column: 1 / -1; }

/* ---------- Monogramme: nur Buchstaben in Libre Caslon Display ---------- */
.mono { display: inline-flex; align-items: center; gap: .16em; font-family: var(--lead); font-weight: 400; line-height: 1; color: var(--violet); font-size: 28px; }
.mono--bms span:nth-child(2) { font-size: 1.75em; }
.mono__raute { display: block; width: .2em; height: .2em; background: currentColor; transform: rotate(45deg); font-style: normal; }
.mono--dunkel { color: var(--violet-l); }

.kap__mono { display: flex; width: max-content; margin-bottom: 26px; font-size: 26px; }
.gs__mono { margin-bottom: 14px; font-size: 26px; }
.brief__siegel { font-size: 30px; padding-right: 22px; border-right: 1px solid var(--violet-l); }
.fuss__mono { font-size: 24px; }
.warum__mono { position: absolute; top: -.12em; right: -.04em; font-size: clamp(150px, 20vw, 260px); color: rgba(255, 255, 255, .06); pointer-events: none; }

/* ---------- Bildband nach Kapitel 01: am Set ---------- */
.bildband { position: relative; margin: 0; background: var(--choc); overflow: hidden; }
.bildband__foto { display: block; width: 100%; height: min(88vh, 56.25vw); min-height: 380px; object-fit: cover; }
.bildband::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 26, 28, 0) 58%, rgba(36, 26, 28, .5) 100%); }
.bildband__text { position: absolute; z-index: 1; bottom: clamp(22px, 4vw, 52px);
  right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); left: auto;
  color: var(--weiss); font: 400 clamp(19px, 1.7vw, 24px)/1.25 var(--lead); text-align: right; }
.bildband__text small { display: block; margin-top: 6px; font: 300 10.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

/* ---------- Auf einen Blick: vier große Bildkacheln ---------- */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kachel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--choc); color: var(--weiss); text-decoration: none; }
.kachel__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.kachel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 26, 28, 0) 34%, rgba(36, 26, 28, .84) 100%); }
.kachel__text { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 34px); right: clamp(20px, 2.4vw, 34px); bottom: clamp(18px, 2.2vw, 30px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: end; }
.kachel__titel { grid-column: 1; font: 400 clamp(24px, 2.3vw, 34px)/1.08 var(--serif); }
.kachel__satz { grid-column: 1; margin-top: 8px; font: 400 clamp(16px, 1.3vw, 19px)/1.35 var(--lead); color: rgba(255, 255, 255, .88); }
.kachel__pfeil { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .6);
  font: 300 17px/1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.kachel:hover .kachel__foto { transform: scale(1.04); }
.kachel:hover .kachel__pfeil { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.kachel:focus-visible { outline-offset: 4px; }

/* ---------- größere Bilder ---------- */
.gs { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.gs__media { grid-area: bild; position: relative; align-self: start; }
.drei__liste { column-gap: 52px; }
.drei__liste li, .drei__liste li + li { position: relative; padding: 24px 0 0; border-left: 0; }
.drei__liste li + li::before { content: ''; position: absolute; left: -26px; top: 0; bottom: 0; width: 1px; background: var(--linie); }
.drei__bild { position: relative; margin: 0 0 28px; }
.drei__bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--hauch); }
.prod { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- Warum: großes BMS als Wasserzeichen ---------- */
.warum { position: relative; overflow: hidden; }
.warum > :not(.warum__mono) { position: relative; z-index: 1; }

/* ---------- Personal Note: Monogramm neben der Unterschrift ---------- */
.brief__schluss { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.brief__schluss .brief__gruss { margin-top: 0; }

/* ---------- 05: das leere Sofa ---------- */
.fuenf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.fuenf__bild { margin: 0; }
.fuenf__bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--weiss); }
.fuenf__text .text { margin-top: 24px; }
.fuenf__text .tell { margin-top: 30px; }

/* ---------- Fuß: Monogramm neben dem Logo ---------- */
.fuss__marke { display: flex; align-items: center; gap: 22px; }

@media (max-width: 1100px) {
  .gs { grid-template-columns: minmax(0, 1fr); }
  .drei__bild { max-width: 460px; }
  .drei__liste li, .drei__liste li + li { padding: 24px 0 26px; border-top: 1px solid var(--linie); }
  .drei__liste li:first-child { border-top-color: var(--tinte); }
  .drei__liste li + li::before { display: none; }
}
@media (max-width: 900px) {
  .prod, .fuenf { grid-template-columns: minmax(0, 1fr); }
  .fuenf__bild { max-width: 520px; }
  .fuenf__bild img { aspect-ratio: 3 / 2; }
}
@media (max-width: 760px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kachel { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .bildband__foto { min-height: 300px; }
}

/* =====================================================================================================================
   Version 3 (02.11.2026, Manuela: „Schrift von sylviafreygner.com einbauen und das Logo im selben Stil“):
   sylviafreygner.com setzt alles in Avenir LT Pro Light (300), auch die Überschriften. Logo wie SYLVIAFREYGNER:
   Versalien, weit gesperrt, erster Teil leicht, zweiter kräftiger. Keine Serifenschriften mehr (Gloock/Caslon).
   ===================================================================================================================== */
:root { --serif: 'Avenir LT Pro', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif; --lead: var(--serif); }
h1, h2, h3, h4, .h3, .kap__h, .gs__name, .drei__h, .kachel__titel { font-weight: 300 !important; letter-spacing: -.005em; }
.lead, .satz, .kap__unter, .tell, .liste-kopf, .gs__titel, .warum__schluss, .band__go, .bildband__text, .kachel__satz, .brief__gruss { font-weight: 300; font-style: normal; }

/* Logo */
.logo, .fuss__logo { font-family: var(--sans) !important; font-weight: 300 !important; text-transform: uppercase; }
.logo { font-size: 17px; letter-spacing: .3em; gap: 8px; }
.logo__wort { white-space: nowrap; }
.logo__b { -webkit-text-stroke: .035em currentColor; }
.fuss__logo { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .3em; }
@media (max-width: 520px) { .logo { font-size: 13px; letter-spacing: .2em; } }

/* Einstieg: Schriftzug im Logo-Stil */
.lux__marke { font-weight: 300 !important; letter-spacing: .14em !important; font-size: clamp(40px, 6.2vw, 124px) !important; }
.lux__marke span:nth-child(n+2) { -webkit-text-stroke: .02em currentColor; }
.lux__zeile { font-style: normal !important; font-weight: 300; letter-spacing: .02em; }
@media (min-width: 761px) { .lux { --gross: clamp(40px, 6.2vw, 124px); } }
@media (max-width: 760px) { .lux__marke { font-size: 12.5vw !important; letter-spacing: .1em !important; } }

/* Initialen-Monogramm in Avenir, gesperrt */
.mono { font-family: var(--sans); font-weight: 300; letter-spacing: .14em; gap: .3em; }

/* Bildband: Bildzeile links (rechts sitzt Sylvia auf dem Sofa) */
.bildband__text { left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); right: auto; text-align: left; }
/* Bildzeile unter dem Foto statt darüber (auf dem weißen Sofa war sie schlecht lesbar) */
.bildband::after { display: none; }
.bildband__text { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: clamp(16px, 1.3vw, 18px);
  padding: 16px max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))) 18px; }
.bildband__text small { display: inline; margin: 0; }

/* =====================================================================================================================
   Version 4 (02.11.2026, Manuela: „orientier dich an JqecZFS5“ – dazu ili.law / freygner.com):
   Einleitung als ruhiger Zweispalter: links Überzeile + Überschrift, rechts Sylvias ganzer Text, Schlusssatz hervorgehoben.
   ===================================================================================================================== */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 110px); align-items: center; }
.intro__kopf .kicker { margin-bottom: 22px; }
.intro__kopf .kap__h { margin: 0; max-width: none; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; }
.intro__zeile { display: block; white-space: nowrap; }
.intro__text p { margin: 0; max-width: 56ch; color: var(--ink-2); }
.intro__text p + p { margin-top: 1.1em; }
.intro__text .intro__schluss { margin-top: 1.7em; padding-top: 1.4em; border-top: 1px solid var(--linie); color: var(--tinte); font-size: clamp(18px, 1.35vw, 20px); line-height: 1.55; }
@media (max-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; }
}

/* =====================================================================================================================
   Version 5 (02.11.2026, Manuela: „Schrift an sylviafreygner.com anpassen“) – Werte dort am 02.11. ausgelesen:
   alles Avenir LT Pro Light (300) · Fließtext 17 px / 1,5 in #111 · H2 32 px · H3 23 px · Unterzeile 25 px ·
   Überzeilen in Versalien ohne Sperrung · Knöpfe 15 px, 3,2 px gesperrt, eckig · Menü 17 px, normal geschrieben, grau #848484.
   ===================================================================================================================== */
:root { --ink-2: #111111; --sf-grau: #848484; }
body { font-size: 17px; line-height: 1.5; color: #111111; }
h1, h2, h3, h4, .h3 { line-height: 1.2; color: inherit; }

/* Überschriften */
.kap__h { font-size: clamp(26px, 2.3vw, 32px); max-width: 26ch; }
.intro__kopf .kap__h { font-size: clamp(30px, 2.8vw, 40px); }
.h3, .drei__h, .gs__name { font-size: clamp(21px, 1.7vw, 23px); }
.gs__name { font-size: clamp(23px, 2vw, 28px); }

/* Überzeilen: Versalien wie „ÜBER“ auf sylviafreygner.com, ohne Sperrung */
.kicker, .drei__nr, .gs__meta, .band__go span, .fuss__nav p, .brief__gruss small, .liste-kopf span, .folgen__kopf small {
  font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.kicker { margin-bottom: 14px; color: #111111; }
.band .kicker, .warum .kicker { color: var(--violet-l); }
.gs__meta { color: var(--sf-grau); }

/* Unterzeilen und hervorgehobene Sätze (sylviafreygner.com: 25 px) */
.lead, .kap__unter { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.3; color: #111111; }
.satz, .tell, .band__go, .warum__schluss { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.3; }
.intro__text .intro__schluss { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: #111111; }
.gs__titel { font-size: clamp(17px, 1.3vw, 19px); }
.liste-kopf { font-size: clamp(20px, 1.8vw, 25px); }

/* Fließtext überall 17 px / 1,5 */
.text p, .intro__text p, .gs__story p, .drei__liste p:not(.drei__nr), .brief__text p, .recht p { font-size: 17px; line-height: 1.5; }
.gs__zeile, .blick__satz, .adresse, .prod__bild figcaption small { font-size: 15px; color: #111111; }

/* Knöpfe wie sylviafreygner.com */
.btn { min-height: 0; padding: 17px 19px 13px; font: 300 15px/1.5 var(--sans); letter-spacing: 3.2px; text-transform: none; background: #111111; border-color: #111111; }
.btn--hell { background: var(--weiss); border-color: var(--weiss); color: #111111; }
.btn--leer { background: transparent; color: #111111; }
.kopf .nav__neu { padding: 11px 17px 8px; }

/* Menü: normal geschrieben, 17 px, grau */
.nav a { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--sf-grau); }
.nav a:hover, .nav a[aria-current] { color: #111111; }
.burger b { font-size: 15px; letter-spacing: 0; text-transform: none; }
.menue a { font-family: var(--sans); font-weight: 300; }

/* Einstieg: kleine Zeilen etwas größer, wie die Knopfschrift dort */
.lux__oben { font-size: 15px; letter-spacing: 3.2px; }
.lux__runter, .lux__zahl { font-size: 13px; letter-spacing: 2.4px; }
.lux__zeile { font-size: clamp(18px, 1.8vw, 25px); }
@media (max-width: 760px) {
  .lux__oben { font-size: 12px; letter-spacing: 2.4px; }
  .lux__runter, .lux__zahl { font-size: 11px; letter-spacing: 1.6px; }
}
.folgen__kopf { font-size: 15px; letter-spacing: .02em; }

/* „The Producer“ über dem Namen (Manuela 02.11.: Produzentin statt Producerin, englische Überzeile wie „The Founder“ bei Experiences) */
.prod__bild figcaption { font: 300 21px/1.3 var(--sans); }
.prod__kicker { display: block; margin-bottom: 8px; font: 300 15px/1.4 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: #111111; }

/* Version 6 (02.11.2026, Manuela: „der Abschnitt geht noch verständlicher“): „Jede Geschichte hat eine Geschichte dahinter“
   im selben Zweispalter wie die Einleitung – Text als eine Spalte von oben nach unten, Leitsatz oben, Schlusssatz unten. */
.intro__text .intro__lead { margin-bottom: 1.2em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; color: #111111; }
.intro + .drei { margin-top: clamp(72px, 8vw, 120px); }
@media (max-width: 600px) { .intro__zeile { white-space: normal; } }

/* Version 7 (02.11.2026, Manuela: „Ist die Startseite jetzt verständlich?“ – wie freyspruch.com, sylviafreygner.com, ili.law:
   erster Bildschirm = Aussage + was es ist + Knopf). Inhalt des Startbilds als ein Block, unten mittig. */
.lux__inhalt { position: absolute; left: 0; right: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--rand); }
.lux__inhalt .lux__oben, .lux__inhalt .lux__marke, .lux__inhalt .lux__zeile { position: static !important; top: auto !important; bottom: auto !important; margin: 0; }
.lux__inhalt .lux__marke { margin: 16px 0 14px; line-height: 1; }
.lux__info { margin: 18px 0 0; font: 300 15px/1.5 var(--sans); letter-spacing: .02em; color: rgba(255, 255, 255, .88); text-shadow: 0 2px 20px rgba(47, 33, 36, .5); }
.lux__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 26px; }
.btn--linie-hell { background: transparent; border-color: rgba(255, 255, 255, .85); color: #ffffff; }
.btn--linie-hell:hover { background: #ffffff; border-color: #ffffff; color: #111111; }
@media (min-width: 761px) {
  .lux__inhalt { bottom: max(90px, calc(var(--unten) - 20px)); }
}
@media (max-width: 760px) {
  .lux { aspect-ratio: auto; min-height: calc(100svh - var(--kopf)); padding-bottom: 40px; }
  .lux__inhalt { position: relative; padding: 0; }
  .lux__info { font-size: 13.5px; max-width: 30ch; }
  .lux__knoepfe { margin-top: 20px; }
  .lux__knoepfe .btn { padding: 14px 16px 11px; font-size: 14px; letter-spacing: 2px; }
}
@media (max-width: 760px) {
  .lux__zahlen { display: block; margin-top: 2px; }
  .lux__punkt { display: none; }
  .lux__knoepfe .btn--linie-hell { display: none; }
  .lux .ohero__foto { object-position: 38% 12%; }
}

/* Version 8 (02.11.2026, Manuela, nur Handy-Start): Infozeile raus, Sylvia weiter nach oben, Text weiter unten */
@media (max-width: 760px) {
  .lux__info { display: none; }
  .lux .ohero__foto { top: -16%; height: 116%; }
  .lux { padding-bottom: 28px; }
}

/* =====================================================================================================================
   Version 9 (03.11.2026, Manuela: „so ein Logo wie bei Sylvia Freygner mit dem Schokobraun“):
   Wortmarke als SVG im Aufbau von SYLVIAFREYGNER – BEYOND in Avenir Book, MYSTORY in Avenir Medium, Sperrung wie dort,
   Schokobraun #3D1F16 wie der Sylvia-Freygner-Endstand (Schoko & Weiß). Auf dunklem Grund weiß.
   ===================================================================================================================== */
:root { --logo-schoko: #3D1F16; --logo-tinte: #0D0D0D; }
.sym { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Version 10 (03.11., Manuela: „das Logo soll so sein wie bei Freygner“): Maße und Farbe wie .logo--sf2 im Endstand.
   Schriftzug fast schwarz, Schoko bleibt die Farbe der Flächen. Unterzeile in Schriftgröße wie dort (9,5 px bei 216 px Breite),
   Sperrung so gerechnet, dass FREYGNER PRODUCTIONS genau so breit läuft wie der Schriftzug (wie THE ART OF DECISION MAKING). */
.logo { width: clamp(180px, 15vw, 230px); gap: 7px; color: var(--logo-tinte); container-type: inline-size; }
.kopf--fest .logo, .kopf--hell .logo { color: var(--logo-tinte); }
.logo__svg { display: block; width: 100%; height: auto; fill: currentColor; }
.logo__zeile { display: block; font: 300 9.5px/1 var(--sans) !important; font-size: 4.4cqw !important; letter-spacing: .51em !important;
  letter-spacing: 2.26cqw !important; white-space: nowrap; text-transform: uppercase; color: var(--logo-tinte); opacity: 1; }
body.menue-offen .kopf .logo, body.menue-offen .kopf .logo__zeile { color: #ffffff; }
@media (max-width: 860px) { .logo { width: 150px; } .logo__zeile { font-size: 5cqw !important; letter-spacing: 1.885cqw !important; } }

/* Einstieg: dieselbe Wortmarke groß und weiß statt Schrift */
.lux__marke--logo { font-size: 0 !important; letter-spacing: 0 !important; animation: luxauf 1.8s cubic-bezier(.16, 1, .3, 1) both; }
.lux__svg { display: block; width: min(76vw, 1080px); height: auto; margin: 0 auto; color: #ffffff; fill: currentColor;
  filter: drop-shadow(0 2px 22px rgba(47, 33, 36, .45)); }
@media (max-width: 760px) { .lux__svg { width: 88vw; } }

/* Fuß: Wortmarke und Unterzeile weiß, Breite wie im Endstand (.ftr .logo), Unterzeile genau so breit wie der Schriftzug */
.fuss__marke > div { width: clamp(200px, 17vw, 260px); container-type: inline-size; display: flex; flex-direction: column; gap: 7px; }
.fuss__logo { display: block; color: #ffffff; }
.fuss__svg { display: block; width: 100%; height: auto; fill: currentColor; }
.fuss__marke p { margin: 0; font: 300 12px/1 var(--sans); font-size: 5.2cqw; letter-spacing: .34em; letter-spacing: 1.76cqw;
  white-space: nowrap; text-transform: uppercase; color: #ffffff; }