/* Schertler AI. Papier, Abendlicht, Tinte und ein einziges Kopierstift-Violett. */
@font-face { font-family: 'Besley'; src: url('/schrift/besley-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Besley'; src: url('/schrift/besley-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/schrift/schibsted.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
/* Ersatzschriften mit angepassten Massen, damit beim Nachladen nichts springt */
@font-face { font-family: 'Besley Ersatz'; src: local('Georgia'); size-adjust: 112%; ascent-override: 86%; descent-override: 24%; }
@font-face { font-family: 'Grotesk Ersatz'; src: local('Arial'); size-adjust: 99%; ascent-override: 96%; descent-override: 26%; }

:root {
  --papier: #efe5d3;
  --papier-hell: #f7f0e3;
  --tinte: #1f1812;
  --tinte-weich: #4d4035;
  --violett: #5a2bd6;
  --schrift-titel: 'Besley', 'Besley Ersatz', Georgia, serif;
  --schrift-text: 'Schibsted Grotesk', 'Grotesk Ersatz', Arial, sans-serif;
  /* Plattenmasse der Heldeneinstellung, je Format */
  --pw: 2560; --ph: 1440;
  --tx: 210; --ty: 168; --tw: 1450; --tf: 128;
  --sx: 640; --sy: 450; --sw: 760; --sf: 36;
  --lx: 470; --ly: 330; --lw: 1100; --lh: 470;
}
@media (orientation: portrait) {
  :root { --pw: 1344; --ph: 2016; --tx: 230; --ty: 160; --tw: 900; --tf: 104; --sx: 230; --sy: 520; --sw: 560; --sf: 40; --lx: 70; --ly: 340; --lw: 1000; --lh: 900; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--papier); color: var(--tinte); }
body { margin: 0; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--schrift-titel); font-weight: 900; margin: 0; letter-spacing: -0.012em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--violett); outline-offset: 4px; border-radius: 2px; }

.sprung { position: fixed; left: 16px; top: -100px; z-index: 30; background: var(--papier-hell); padding: 10px 14px; text-decoration: none; font-weight: 600; }
.sprung:focus { top: 16px; }

/* Kopf: das Zeichen links, der Weg zur E-Mail rechts */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: clamp(14px, 2.4vw, 30px) clamp(16px, 3.4vw, 48px); pointer-events: none; }
.kopf a { pointer-events: auto; }
.marke { display: block; padding: 6px 0; }
.marke-zeichen { display: block; height: clamp(22px, 2.1vw, 30px); aspect-ratio: 2862 / 646; background: var(--tinte); -webkit-mask: url('/bilder/marke.png') center / contain no-repeat; mask: url('/bilder/marke.png') center / contain no-repeat; }
.kopf-kontakt { font-weight: 600; font-size: 0.98rem; text-decoration: none; padding: 8px 0; background: linear-gradient(var(--violett), var(--violett)) left 100% / 100% 2px no-repeat; transition: background-size 0.4s ease; }
.kopf-kontakt:hover { background-size: 40% 2px; }

/* Bühne: das erste Bild. Ohne Kamerafahrt ein ruhiges Foto mit Titel. */
.buehne { position: relative; height: 100svh; min-height: 520px; overflow: hidden; container-type: size; background: #c49a64; }
.plakat img, .film-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.film-leinwand { opacity: 0; }
.titel {
  --s: max(calc(100cqw / var(--pw)), calc(100cqh / var(--ph)));
  position: absolute;
  left: calc(50cqw + (var(--tx) - var(--pw) / 2) * var(--s));
  top: calc(50cqh + (var(--ty) - var(--ph) / 2) * var(--s));
  width: calc(var(--tw) * var(--s));
  mix-blend-mode: multiply;
  color: var(--tinte);
}
.titel h1 { font-size: calc(var(--tf) * var(--s)); line-height: 0.98; }
.titel .satz {
  margin-top: calc((var(--sy) - var(--ty)) * var(--s) - 2 * 0.98 * var(--tf) * var(--s));
  margin-left: calc((var(--sx) - var(--tx)) * var(--s));
  width: calc(var(--sw) * var(--s));
  font-size: max(16px, calc(var(--sf) * var(--s)));
  line-height: 1.45; font-weight: 450;
}
@media (orientation: portrait) {
  .titel .satz { margin-top: calc(28 * var(--s)); margin-left: 0; }
}
/* Weiches Licht hinter dem kleinen Satz, damit er nicht auf den Papierstapeln steht */
.titel-licht {
  --s: max(calc(100cqw / var(--pw)), calc(100cqh / var(--ph)));
  position: absolute; pointer-events: none;
  left: calc(50cqw + (var(--lx) - var(--pw) / 2) * var(--s));
  top: calc(50cqh + (var(--ly) - var(--ph) / 2) * var(--s));
  width: calc(var(--lw) * var(--s)); height: calc(var(--lh) * var(--s));
  background: radial-gradient(closest-side, rgba(250, 242, 228, 0.9) 0%, rgba(250, 242, 228, 0.78) 45%, rgba(250, 242, 228, 0.36) 74%, rgba(250, 242, 228, 0) 100%);
  filter: blur(calc(14 * var(--s)));
}

/* Tafeln der Szene 2: ohne Kamerafahrt ganz normale Abschnitte */
.tafeln { padding: clamp(48px, 8vw, 120px) clamp(20px, 6vw, 96px); display: grid; gap: clamp(40px, 6vw, 80px); max-width: 1100px; margin: 0 auto; }
.tafel { max-width: 34rem; }
.tafel:nth-child(2) { justify-self: end; }
.tafel h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.08; margin-bottom: 0.5em; }
.tafel p { font-size: 1.08rem; max-width: 34ch; color: var(--tinte); }

/* Der letzte Halt: ein Brief auf dem leeren Tisch */
.tafel-ruhe { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: end; max-width: 40rem; }
.tafel-ruhe .portrait { grid-row: 1; grid-column: 1; display: block; width: 120px; padding: 6px 6px 18px; background: #fbf7ef; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.18), 0 8px 22px -10px rgba(60, 40, 20, 0.35); }
.tafel-ruhe .portrait img { display: block; width: 100%; height: auto; }
.tafel-ruhe h2 { grid-row: 1; grid-column: 2; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.04; margin: 0; }
.tafel-ruhe p { grid-column: 1 / -1; margin-top: 1rem; max-width: 46ch; }
.tafel-ruhe .post { display: inline-block; white-space: nowrap; margin-top: 0.2rem; font-family: var(--schrift-titel); font-weight: 900; font-size: clamp(1.35rem, 2.2vw, 1.9rem); text-decoration-color: var(--violett); text-decoration-thickness: 3px; text-underline-offset: 0.18em; }
.tafel-ruhe .post:hover { text-decoration-thickness: 1px; }

/* Abschnitte nach der Fahrt */
.abschnitt { position: relative; z-index: 6; background: var(--papier); padding: clamp(72px, 10vw, 150px) clamp(20px, 6vw, 96px) clamp(40px, 6vw, 80px); }
.abschnitt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.abschnitt-kopf h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; max-width: 16ch; }
.abschnitt-kopf p { margin-top: 1rem; max-width: 36rem; font-size: 1.1rem; color: var(--tinte-weich); }
.leistungen { padding-top: clamp(96px, 14vw, 200px); }
.ablaeufe { list-style: none; padding: 0; margin-top: clamp(36px, 5vw, 64px); }
.ablaeufe li { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); column-gap: clamp(20px, 4vw, 64px); padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid rgba(31, 24, 18, 0.22); }
.ablaeufe li:last-child { border-bottom: 1px solid rgba(31, 24, 18, 0.22); }
.ablaeufe > li > * { grid-column: 2; }
.ablaeufe .nummer { grid-column: 1; grid-row: 1 / span 3; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.1em; color: var(--violett); padding-top: 0.55em; font-variant-numeric: tabular-nums; }
.ablaeufe h3 { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; margin: 0 0 0.4em; }
.ablaeufe p:not(.nummer) { max-width: 40rem; font-size: 1.08rem; }
.ablaeufe .bsp { margin-top: 0.7em; font-size: 1rem; color: var(--tinte-weich); }
.ablaeufe .bsp b { font-weight: 600; color: var(--tinte); }
.nachsatz { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); column-gap: clamp(20px, 4vw, 64px); margin-top: clamp(28px, 3vw, 40px); }
.nachsatz p { grid-column: 2; max-width: 40rem; font-size: 1.12rem; }
.nachsatz a { font-weight: 600; text-decoration-color: var(--violett); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* Der erste Schritt: Analyse, Umsetzung, Betrieb und der Weg zur Anfrage */
.analyse { background: var(--papier-hell); border-top: 1px solid rgba(31, 24, 18, 0.14); padding-bottom: clamp(72px, 10vw, 140px); }
.schritte { list-style: none; padding: 0; margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); counter-reset: schritt; }
.schritte li { border-top: 2px solid var(--tinte); padding-top: 18px; }
.schritte li::before { counter-increment: schritt; content: counter(schritt); display: block; font-family: var(--schrift-titel); font-weight: 900; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: var(--violett); margin-bottom: 14px; }
.schritte h3 { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; margin: 0 0 0.45em; }
.schritte p { font-size: 1.04rem; max-width: 34ch; }
.anfrage { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(31, 24, 18, 0.22); }
.anfrage .post { display: inline-block; font-family: var(--schrift-titel); font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.1; text-decoration-color: var(--violett); text-decoration-thickness: 3px; text-underline-offset: 0.16em; }
.anfrage .post:hover { text-decoration-thickness: 1px; }
.anfrage p { margin-top: 0.9rem; color: var(--tinte-weich); }
.anfrage p a { text-decoration-color: var(--violett); text-decoration-thickness: 2px; text-underline-offset: 0.15em; color: var(--tinte); }
.faq { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 4vw, 64px); }
.faq h3 { grid-column: 1; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; margin: 0; padding: 22px 0; border-top: 1px solid rgba(31, 24, 18, 0.22); }
.faq p { grid-column: 2; padding: 22px 0; border-top: 1px solid rgba(31, 24, 18, 0.22); max-width: 40rem; }
.faq a { text-decoration-color: var(--violett); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
@media (max-width: 720px) {
  .ablaeufe li { grid-template-columns: 1fr; }
  .ablaeufe > li > *, .ablaeufe .nummer { grid-column: 1; grid-row: auto; }
  .ablaeufe .nummer { padding-top: 0; margin-bottom: 0.35rem; }
  .schritte { grid-template-columns: 1fr; }
  .nachsatz { grid-template-columns: 1fr; }
  .nachsatz p { grid-column: 1; }
  .schritte p { max-width: none; }
  .faq { grid-template-columns: 1fr; }
  .faq p { grid-column: 1; border-top: 0; padding-top: 0; }
}
.fuss { position: relative; z-index: 6; background: var(--papier); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; padding: 40px clamp(20px, 6vw, 96px) max(40px, env(safe-area-inset-bottom)); font-size: 0.95rem; color: var(--tinte-weich); border-top: 1px solid rgba(31, 24, 18, 0.14); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { text-decoration-color: rgba(31, 24, 18, 0.35); text-underline-offset: 0.2em; }

/* Kamerafahrt: die Bühne steht fest, der Abschnitt gibt den Weg vor. Die Länge kommt aus den Kapiteln. */
.film #film { --strecke: 21.9; height: calc((var(--strecke) + 1) * 100lvh); position: relative; }
@media (orientation: portrait) { .film #film { --strecke: 18.16; } }
.film .buehne { position: fixed; inset: 0 0 auto 0; height: 100lvh; min-height: 0; z-index: 0; }
.film .kopf { position: fixed; transition: transform 0.5s ease, opacity 0.5s ease; }
.nach-film .kopf { transform: translateY(-100%); opacity: 0; }
.nach-film .kopf:focus-within { transform: none; opacity: 1; }
.kapitel-leiste { transition: opacity 0.5s ease, visibility 0s; }
.nach-film .kapitel-leiste { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.film-bereit .film-leinwand { opacity: 1; transition: opacity 0.6s ease; }
.film .titel { will-change: opacity, filter; }

/* Kapiteltexte: eine feste Stelle, immer dieselbe. Ein weiches Licht dahinter hält sie lesbar. */
.film .tafeln { position: fixed; inset: 0; padding: 0; display: block; max-width: none; pointer-events: none; z-index: 5; }
.film .tafel {
  position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(28px, 10lvh, 120px);
  width: min(31rem, calc(100vw - 40px)); visibility: hidden; opacity: 0; will-change: opacity, filter;
  text-shadow: 0 0 1px rgba(250, 242, 228, 0.9), 0 0 12px rgba(250, 242, 228, 0.8);
}
.film .tafel::before {
  content: ''; position: absolute; z-index: -1; inset: -34% -22% -40% -26%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(249, 240, 224, 0.94) 0%, rgba(249, 240, 224, 0.82) 38%, rgba(249, 240, 224, 0.42) 66%, rgba(249, 240, 224, 0) 100%);
  filter: blur(6px);
}
.film .tafel h2 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); }
.film .tafel p { font-size: clamp(1.02rem, 1.2vw, 1.15rem); max-width: 30ch; }
@media (orientation: portrait) {
  .film .tafel { left: 20px; right: 20px; width: auto; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); }
  .film .tafel h2 { font-size: 1.6rem; }
  .film .tafel p { font-size: 1.04rem; }
}

/* Kapitelleiste: feine Striche am rechten Rand, der aktuelle ist länger */
.kapitel-leiste { display: none; }
.film .kapitel-leiste { display: flex; flex-direction: column; gap: 4px; position: fixed; right: clamp(10px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 8; }
.kapitel-leiste button { appearance: none; border: 0; background: none; padding: 9px 6px; cursor: pointer; display: flex; justify-content: flex-end; }
.kapitel-leiste button::after { content: ''; display: block; width: 14px; height: 2px; background: var(--tinte); opacity: 0.38; transition: width 0.5s ease, opacity 0.5s ease; }
.kapitel-leiste button[aria-current='step']::after { width: 30px; opacity: 0.95; }
.kapitel-leiste button:hover::after { opacity: 0.8; }
/* Der Brief im letzten Halt */
.film .tafel-ruhe { pointer-events: auto; text-shadow: none; bottom: auto; top: 50%; transform: translateY(-46%); width: min(38rem, calc(100vw - 40px)); padding: clamp(24px, 3vw, 40px); background: #f6efe2; box-shadow: 0 2px 3px rgba(50, 30, 10, 0.16), 0 30px 60px -30px rgba(50, 30, 10, 0.55); }
.film .tafel-ruhe::before { display: none; }
.film .tafel-ruhe h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.film .tafel-ruhe p { max-width: 46ch; }
@media (orientation: portrait) {
  .film .tafel-ruhe { top: auto; transform: none; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); padding: 22px 20px 20px; column-gap: 16px; }
  .film .tafel-ruhe .portrait { width: 84px; padding: 4px 4px 12px; }
  .film .tafel-ruhe h2 { font-size: 1.45rem; }
  .film .tafel-ruhe p { font-size: 0.98rem; margin-top: 0.8rem; }
}
.tafeln .tafel-ruhe { justify-self: start; }

/* Unterseiten: Impressum, Datenschutz, 404 */
.unterseite { background: var(--papier); }
.unterseite .kopf { position: relative; }
.recht { max-width: 44rem; margin: 0 auto; padding: clamp(32px, 6vw, 80px) 20px clamp(64px, 8vw, 120px); }
.recht h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; margin-bottom: 0.6em; }
.recht h2 { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 2.2em 0 0.5em; scroll-margin-top: 24px; }
.recht p { margin-bottom: 0.9em; max-width: 40rem; }
.recht a { text-decoration-color: var(--violett); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.recht .stand { color: var(--tinte-weich); font-size: 0.95rem; }
.recht :target { background: linear-gradient(transparent 62%, rgba(90, 43, 214, 0.16) 62%); }
/* Auf dem Handy liegt der Brief über der ganzen Breite: die Kapitelleiste tritt dort zurück */
@media (orientation: portrait) {
  .kapitel-leiste:has(button[data-ziel='ruhe'][aria-current='step']) { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
}