/* BEYOND MY STORY – V5 Neuaufbau (02.11.2026)
   Aufbau wie freygner.com / freyspruch.com / ili.law / sylviafreygner.com: jedes Kapitel gleich gebaut –
   links die Kapitelmarke (Nummer + Name, am Desktop mitlaufend), rechts Überzeile (englisch) · Überschrift (deutsch) · Inhalt.
   Farben wie bisher: Weiß, Schoko #2f2124, Amethyst #5e4a5b, Flieder #cfc3cc. Schriften: Gloock · Libre Caslon Display · Avenir LT Pro.
   Kopf + Einstieg kommen unverändert aus einstieg.css (V2). */
:root {
  --weiss: #ffffff; --tinte: #2a1e21; --ink-2: #56494e; --grau: #8e8388; --linie: #e7e1e5;
  --choc: #2f2124; --choc-tief: #241a1c; --violet: #5e4a5b; --violet-l: #cfc3cc; --hauch: #f6f3f5;
  --serif: 'Gloock', 'Times New Roman', Georgia, serif;
  --lead: 'Libre Caslon Display', 'Times New Roman', Georgia, serif;
  --sans: 'Avenir LT Pro', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
  --kopf: 76px; --rand: clamp(16px, 4.2vw, 64px); --breite: 1320px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 18px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--weiss); color: var(--tinte); font: 300 17px/1.7 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-wrap: balance; }
i { font-style: normal; color: var(--violet); }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }

/* Knöpfe (wie V2) */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border: 1px solid var(--tinte);
  background: var(--tinte); color: var(--weiss); font: 400 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.btn:hover { background: var(--violet); border-color: var(--violet); }
.btn--leer { background: transparent; color: var(--tinte); }
.btn--leer:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.btn--hell { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.btn--hell:hover { background: var(--violet-l); border-color: var(--violet-l); color: var(--tinte); }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; line-height: 1.4; padding-block: 12px; } }
/* Kopf: Knopf „Folgen ansehen“ wie in der V2 erst ab 1181 px, darunter nur Menü */
@media (max-width: 1180px) { .kopf .nav__neu { display: none; } }

/* ---------- Kapitel-Raster ---------- */
.kap { padding-block: clamp(84px, 10vw, 150px); border-top: 1px solid var(--linie); }
.kap__in { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.3fr); column-gap: clamp(28px, 5vw, 96px); }
.kap__marke { align-self: start; position: sticky; top: calc(var(--kopf) + 40px); padding-top: 4px; }
.kap__nr { display: flex; align-items: baseline; gap: 14px; margin: 0; font: 300 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--tinte); }
.kap__nr span { font: 400 15px/1 var(--serif); letter-spacing: .04em; color: var(--violet); }
.kap__nr::after { content: ''; flex: 1; height: 1px; background: var(--linie); min-width: 20px; align-self: center; }
.kap__inhalt { min-width: 0; }

.kicker { margin: 0 0 18px; font: 300 11px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--violet); }
.kap__h { font-size: clamp(31px, 3.3vw, 50px); max-width: 21ch; }
.kap__unter { margin-top: 18px; font: 400 clamp(19px, 1.6vw, 23px)/1.4 var(--lead); color: var(--ink-2); max-width: 44ch; }
.h3 { font-size: clamp(26px, 2.5vw, 38px); max-width: 24ch; }
.lead { font: 400 clamp(22px, 2.1vw, 29px)/1.32 var(--lead); color: var(--tinte); }
.text p { color: var(--ink-2); max-width: 64ch; }
.text p + p { margin-top: 1em; }
.text--zeilen p + p { margin-top: .35em; }

.zwei { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.satz { margin-top: clamp(36px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--linie);
  font: 400 clamp(22px, 2.1vw, 30px)/1.3 var(--lead); color: var(--violet); max-width: 34ch; }
.satz > span { display: block; color: var(--tinte); }

/* ---------- 01 Die Serie ---------- */
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(48px, 6vw, 80px) 0 0; border-top: 1px solid var(--tinte); }
.fakten div { padding: 20px 22px 4px 0; }
.fakten div + div { padding-left: 22px; border-left: 1px solid var(--linie); }
.fakten dt { font: 300 10.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--grau); margin-bottom: 10px; }
.fakten dd { margin: 0; font: 400 19px/1.3 var(--serif); }
.fakten dd small { display: block; margin-top: 6px; font: 300 14px/1.45 var(--sans); color: var(--ink-2); }

.blick { margin-top: clamp(64px, 7vw, 100px); }
.blick__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.blick__liste a { display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px; border: 1px solid var(--linie); text-decoration: none; transition: border-color .3s, background .3s; }
.blick__liste a:hover { border-color: var(--violet); background: var(--hauch); }
.blick__nr { font: 400 15px/1 var(--serif); color: var(--violet); }
.blick__titel { margin-top: 26px; font: 400 21px/1.15 var(--serif); }
.blick__satz { margin-top: 8px; font: 300 14.5px/1.5 var(--sans); color: var(--ink-2); flex: 1; }
.blick__pfeil { margin-top: 18px; font: 300 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--violet); }

/* ---------- 02 Die Geschichten ---------- */
.namen { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; }
.namen a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--linie); text-decoration: none;
  font: 300 14.5px/1.35 var(--sans); color: var(--ink-2); transition: color .25s; }
.namen a span { font: 400 13px/1.5 var(--serif); color: var(--grau); }
.namen a:hover, .namen a[aria-current="true"] { color: var(--tinte); }
.namen a[aria-current="true"] span { color: var(--violet); }

.liste-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: clamp(56px, 6vw, 84px);
  font: 400 clamp(22px, 2.1vw, 30px)/1.3 var(--lead); color: var(--violet); }
.liste-kopf span { font: 300 10.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--grau); }
.gliste { list-style: none; margin: 22px 0 0; padding: 0; }
.gs { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr;
  grid-template-areas: "bild text" "folgen text"; gap: 26px clamp(26px, 3.4vw, 48px); padding-block: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf) + 12px); }
.gs:last-child { border-bottom: 1px solid var(--linie); }
.gs__text { grid-area: text; min-width: 0; }
.gs__bild { grid-area: bild; position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--hauch); align-self: start; }
.gs__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.gs__bild:hover img { transform: scale(1.03); }
.gs__play { position: absolute; left: 14px; bottom: 14px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--weiss); color: var(--violet); box-shadow: 0 6px 24px rgba(36, 26, 28, .22); transition: background .3s, color .3s; }
.gs__play svg { width: 18px; height: 18px; margin-left: 2px; }
.gs__play:hover { background: var(--violet); color: var(--weiss); }
.gs__meta { margin: 0 0 12px; font: 300 10.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--grau); }
.gs__meta b { font-weight: 400; color: var(--violet); }
.gs__name { font-size: clamp(27px, 2.4vw, 36px); }
.gs__titel { margin-top: 8px; font: 400 clamp(19px, 1.5vw, 22px)/1.3 var(--lead); color: var(--violet); }
.gs__zeile { margin-top: 10px; font: 300 14px/1.5 var(--sans); color: var(--ink-2); }
.gs__story { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.gs__story p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.gs__story p + p { margin-top: .8em; }
.platzhalter { padding: 14px 16px; border: 1px dashed var(--violet-l); font: 300 14px/1.5 var(--sans); color: var(--grau); }

.folgen { grid-area: folgen; align-self: start; min-width: 0; }
.folgen__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--tinte);
  font: 300 10.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--tinte); }
.folgen__kopf small { font-size: 10.5px; letter-spacing: .14em; color: var(--grau); }
.folgen__liste { list-style: none; margin: 0; padding: 0; }
.folgen__liste a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; border-bottom: 1px solid var(--linie);
  text-decoration: none; font: 300 14.5px/1.3 var(--sans); color: var(--tinte); transition: color .25s, background .25s; }
.folgen__liste a span:first-of-type { flex: 1; }
.folgen__liste i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--violet-l); color: var(--violet); flex: none; transition: background .25s, border-color .25s, color .25s; }
.folgen__liste svg { width: 10px; height: 10px; margin-left: 1px; }
.folgen__liste em { font-style: normal; color: var(--grau); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.folgen__liste em::after { content: ' ↗'; color: var(--violet); }
.folgen__liste a:hover { color: var(--violet); background: var(--hauch); }
.folgen__liste a:hover i { background: var(--violet); border-color: var(--violet); color: var(--weiss); }
.hinweis-vimeo { margin-top: 22px; font: 300 13px/1.5 var(--sans); color: var(--grau); }

/* ---------- 03 Der Ansatz ---------- */
.drei { margin-top: clamp(64px, 7vw, 100px); }
.drei__liste { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--tinte); }
.drei__liste li { padding: 24px 26px 0 0; }
.drei__liste li + li { padding-left: 26px; border-left: 1px solid var(--linie); }
.drei__nr { margin: 0 0 16px; font: 300 10.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--violet); }
.drei__nr span { font: 400 15px/1 var(--serif); letter-spacing: .04em; margin-right: 8px; }
.drei__h { font-size: clamp(21px, 1.8vw, 25px); margin-bottom: 16px; max-width: 16ch; }
.drei__liste p:not(.drei__nr) { font-size: 15.5px; color: var(--ink-2); }
.drei__liste p + p { margin-top: .7em; }

.warum { margin-top: clamp(64px, 7vw, 100px); background: var(--choc); color: var(--weiss); padding: clamp(36px, 5vw, 72px); }
.warum .kicker { color: var(--violet-l); }
.warum .zwei { margin-top: 34px; }
.warum .text p { color: rgba(255, 255, 255, .78); }
.warum__schluss { margin-top: clamp(36px, 4vw, 52px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18);
  font: 400 clamp(23px, 2.3vw, 33px)/1.28 var(--lead); color: var(--weiss); max-width: 30ch; }

/* ---------- 04 Die Producerin ---------- */
.prod { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.prod__bild { margin: 0; align-self: start; position: sticky; top: calc(var(--kopf) + 40px); }
.prod__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.prod__bild figcaption { margin-top: 14px; font: 400 19px/1.3 var(--serif); }
.prod__bild figcaption small { display: block; margin-top: 6px; font: 300 13.5px/1.5 var(--sans); color: var(--ink-2); }
.prod .satz { max-width: none; }

.brief { margin-top: clamp(64px, 7vw, 100px); background: var(--hauch); padding: clamp(32px, 5vw, 72px); }
.brief__text { margin-top: 30px; columns: 2 300px; column-gap: clamp(28px, 4vw, 56px); }
.brief__text p { color: var(--ink-2); break-inside: avoid; }
.brief__text p + p { margin-top: 1em; }
.brief__gruss { margin-top: 34px; font: 400 clamp(26px, 2.4vw, 34px)/1 var(--serif); color: var(--violet); }
.brief__gruss small { display: block; margin-top: 10px; font: 300 10.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--grau); }

/* ---------- 05 Deine Geschichte ---------- */
.kap--zart { background: var(--hauch); border-top: 0; }
.kap--zart .kap__nr::after { background: var(--violet-l); }
.tell { margin-top: 34px; font: 400 clamp(24px, 2.4vw, 34px)/1.2 var(--lead); color: var(--violet); }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.adresse { font: 300 14.5px/1.5 var(--sans); color: var(--ink-2); user-select: all; }

/* ---------- Absender: FREYGNER PRODUCTIONS ---------- */
.band { background: var(--choc); color: var(--weiss); padding-block: clamp(84px, 10vw, 140px); }
.band .kap__nr { color: var(--weiss); }
.band .kap__nr span { color: var(--violet-l); }
.band .kap__nr::after { background: rgba(255, 255, 255, .2); }
.band .kicker { color: var(--violet-l); }
.band__zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 80px); }
.band__zwei > div + div { padding-left: clamp(32px, 5vw, 80px); border-left: 1px solid rgba(255, 255, 255, .16); }
.band .text p { color: rgba(255, 255, 255, .78); }
.band .h3 { margin-bottom: 24px; }
.band__go { margin: 30px 0 26px; font: 400 clamp(22px, 2vw, 28px)/1.25 var(--lead); }
.band__go span { display: block; font: 300 10.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--violet-l); margin-bottom: 6px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--choc-tief); color: rgba(255, 255, 255, .78); padding-block: 64px 40px; }
.fuss__in { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.3fr); column-gap: clamp(28px, 5vw, 96px); row-gap: 34px; }
.fuss__logo { font: 400 clamp(20px, 2vw, 26px)/1 var(--serif); letter-spacing: .2em; color: var(--weiss); text-decoration: none; white-space: nowrap; }
.fuss__logo i { color: var(--violet-l); }
.fuss__marke { grid-column: 1 / -1; }
.fuss__marke p { margin-top: 12px; font: 300 9px/1.4 var(--sans); letter-spacing: .5em; text-transform: uppercase; }
.fuss__nav { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.fuss__nav p { margin-bottom: 12px; font: 300 10px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--violet-l); }
.fuss__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss__nav a { text-decoration: none; font: 300 14.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.fuss__nav a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: 4px; }
.fuss__klein { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font: 300 12.5px/1.5 var(--sans); color: rgba(255, 255, 255, .55); }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 820px; margin: 0 auto; padding: calc(var(--kopf) + 70px) var(--rand) 110px; }
.recht h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 30px; }
.recht h2 { font-size: 22px; margin: 38px 0 10px; }
.recht p { color: var(--ink-2); }
.recht p + p { margin-top: .8em; }
.recht .platzhalter { margin-bottom: 10px; }

/* ---------- Tablet / Handy ---------- */
@media (max-width: 1100px) {
  .fakten, .blick__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten div:nth-child(3) { padding-left: 0; border-left: 0; }
  .fakten div:nth-child(n+3) { border-top: 1px solid var(--linie); margin-top: 6px; }
  .gs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "bild" "text" "folgen"; }
  .gs__bild, .folgen { max-width: 640px; }
  .drei__liste { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .drei__liste li, .drei__liste li + li { padding: 24px 0 26px; border-left: 0; border-top: 1px solid var(--tinte); }
  .drei__liste li + li { border-top-color: var(--linie); }
}
@media (max-width: 900px) {
  .kap__in, .fuss__in { grid-template-columns: minmax(0, 1fr); }
  .kap__marke { position: static; margin-bottom: 34px; }
  .namen { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .namen a { display: inline-flex; gap: 8px; padding: 8px 12px; border: 1px solid var(--linie); }
  .zwei, .prod, .band__zwei { grid-template-columns: minmax(0, 1fr); }
  .band__zwei > div + div { padding-left: 0; border-left: 0; padding-top: 44px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .prod__bild { position: static; max-width: 420px; }
  .fuss__nav { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .fakten, .blick__liste { grid-template-columns: minmax(0, 1fr); }
  .fakten div, .fakten div + div { padding-left: 0; border-left: 0; }
  .fakten div + div { border-top: 1px solid var(--linie); margin-top: 6px; }
  .warum, .brief { margin-inline: calc(var(--rand) * -1); }
  .fuss__nav { grid-template-columns: minmax(0, 1fr); }
}