/* site.css – Ollie erklärt KI. Adult editorial layout with comic accents: paper, ink borders, hard offset shadows,
   halftone dots, the colours of the four topic groups. Fonts are self-hosted (OFL). The design tokens below are
   checked for contrast at build time (lib/contrast.mjs reads the --c-* values of this :root block). */

/* ---------------- fonts: latin always, latin-ext only when a page needs it (Turkish ğ ş İ …) ---------------- */
@font-face { font-family: "Fraunces Soft"; src: url(/fonts/fraunces-soft-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces Soft"; src: url(/fonts/fraunces-soft-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Comic Neue"; src: url(/fonts/comic-neue-latin-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* metric-matched fallbacks (measured: width ratio of a German sample, the web fonts' vertical metrics) – no jump when
   the web fonts arrive */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); size-adjust: 91.4%; ascent-override: 107.1%; descent-override: 27.9%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 98.5%; ascent-override: 99.9%; descent-override: 32.1%; line-gap-override: 0%; }

/* ---------------- tokens ---------------- */
:root {
  --c-paper: #FFF3D6;
  --c-paper-2: #FFF8E8;
  --c-cream: #FFF6D0;
  --c-card: #FFFDF5;
  --c-ink: #2A2320;
  --c-ink-2: #4E433D;
  --c-violet: #5E4BA8;
  --c-owl: #9C86D9;
  --c-yellow: #FFD84D;
  --c-pink: #B8126A;
  --c-stage: #3B3470;
  --c-stage-2: #2E2658;
  --c-denkt: #7A5500;   --c-denkt-tint: #FFF0B3;   --c-denkt-mid: #F2C230;
  --c-werkzeug: #174EA6; --c-werkzeug-tint: #D6E6FF; --c-werkzeug-mid: #5B8FE0;
  --c-nutzen: #17693A;  --c-nutzen-tint: #D2F2DC;  --c-nutzen-mid: #4DBE72;
  --c-vorsicht: #B3261E; --c-vorsicht-tint: #FFD9D4; --c-vorsicht-mid: #F0503C;
  --c-yt: #CC0000;
  --focus: var(--c-violet);
  --ink: var(--c-ink); /* the kit's SVG classes use --ink */
  --f-head: "Fraunces Soft", "Fraunces Fallback", Georgia, serif;
  --f-text: "Atkinson Hyperlegible Next", "Atkinson Fallback", Arial, sans-serif;
  --f-comic: "Comic Neue", "Comic Sans MS", var(--f-text);
  --r: 16px;
  --b: 3px solid var(--c-ink);
  --sh1: 4px 4px 0 var(--c-ink);
  --sh2: 8px 8px 0 var(--c-ink);
  --head-h: 64px;
  --dots: radial-gradient(circle, rgba(42, 35, 32, .13) 22%, transparent 26%) 0 0 / 12px 12px;
  color-scheme: light;
  scroll-padding-top: 1rem;
  scroll-padding-bottom: 5.5rem; /* the sticky skip pill never hides a focused element (WCAG 2.4.11) */
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--c-paper); color: var(--c-ink); font: 400 1.125rem/1.6 var(--f-text); font-optical-sizing: auto; }
body > main { flex: 1 0 auto; }
h1, h2, h3 { overflow-wrap: break-word; font-family: var(--f-head); font-weight: 850; font-variation-settings: "SOFT" 100; line-height: 1.02; letter-spacing: -.012em; margin: 0 0 .4em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.hy p, .hy li { hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.hy h1, .hy h2, .hy h3, .hy .card-title, .hy .ep-nav .t { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
a { color: var(--c-violet); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .16em; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
@media (scripting: none) { .tabs, [data-motion-toggle], .facade-play { display: none !important; } }
.panel-note--nojs { background: var(--c-cream); font-weight: 600; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* controls that float over dark and light areas: a yellow ring framed in ink – visible on both */
.skip--pill:focus-visible, .beat-go:focus-visible, .stage-btn:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; box-shadow: 0 0 0 7px var(--c-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(100% - 2.2rem, 1200px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.2rem, 46rem); }
.todo { background: repeating-linear-gradient(-45deg, #FFE45C 0 8px, #FFF3A6 8px 16px); color: var(--c-ink); border: 2px dashed var(--c-ink); border-radius: 6px; padding: 0 .3em; font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5; max-width: 40rem; }

/* the kit's ink classes (baked pieces + live rigs) */
svg .o  { stroke: var(--ink); stroke-width: calc(6px * var(--lw, 1)); stroke-linejoin: round; stroke-linecap: round; }
svg .o4 { stroke: var(--ink); stroke-width: calc(4.5px * var(--lw, 1)); stroke-linejoin: round; stroke-linecap: round; }
svg .o3 { stroke: var(--ink); stroke-width: calc(3px * var(--lw, 1)); stroke-linejoin: round; stroke-linecap: round; }
svg .nf { fill: none; }
svg .letter { font-family: var(--f-comic); font-weight: 700; paint-order: stroke fill; stroke: var(--ink); stroke-width: 7px; stroke-linejoin: round; }
svg .mono { font-family: ui-monospace, Menlo, monospace; font-weight: 600; white-space: pre; }

/* small UI icons */
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------- buttons, pills, stickers ---------------- */
.btn { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .6em 1.2em; border: var(--b); border-radius: 999px; background: var(--c-card); color: var(--c-ink); font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: var(--sh1); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-3px, -3px); box-shadow: var(--sh2); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); }
.btn--yes { background: var(--c-yellow); }
.linkish { background: none; border: 0; padding: .4em 0; color: var(--c-violet); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; font-weight: 600; min-height: 44px; }
.kpill { display: inline-flex; align-items: center; gap: .08em; padding: 0 .16em 0 .12em; margin: 0 .03em; border: .09em solid var(--ki); border-radius: .45em; background: var(--kt); color: var(--ki); line-height: 1.08; white-space: nowrap; }
.kpill svg { width: .72em; height: .72em; flex: none; }
.nw { white-space: nowrap; }
.sent { display: inline-block; }
.gpill { display: inline-block; padding: .1em .7em; border-radius: 999px; font-weight: 700; font-size: .85em; border: 2px solid currentColor; }
.gpill--denkt { color: var(--c-denkt); background: var(--c-denkt-tint); }
.gpill--werkzeug { color: var(--c-werkzeug); background: var(--c-werkzeug-tint); }
.gpill--nutzen { color: var(--c-nutzen); background: var(--c-nutzen-tint); }
.gpill--vorsicht { color: var(--c-vorsicht); background: var(--c-vorsicht-tint); }
.sticker { position: absolute; display: grid; place-items: center; font: 700 1rem/1.05 var(--f-comic); color: var(--c-ink); background: var(--c-yellow); border: var(--b); border-radius: 999px; padding: .55em .9em; box-shadow: var(--sh1); transform: rotate(-8deg); }

/* ---------------- header, skip link, motion toggle ---------------- */
.skip { position: absolute; left: 1rem; top: -100px; z-index: 50; background: var(--c-yellow); color: var(--c-ink); font-weight: 700; padding: .7em 1.1em; border: var(--b); border-radius: 999px; text-decoration: none; }
.skip:focus-visible { top: .75rem; }
.js .skip--pill { white-space: nowrap; position: fixed; top: auto; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: -50% 0; display: inline-flex; align-items: center; gap: .45em; min-height: 48px; box-shadow: var(--sh1); transition: opacity .3s, translate .3s; }
.skip--pill { display: inline-flex; align-items: center; gap: .4em; }
.skip--pill .ico { transition: transform .3s; }
.skip--pill:hover .ico { transform: translateY(3px); }
.js .skip--pill.is-away { opacity: 0; translate: -50% 140%; pointer-events: none; }
.js .skip--pill.is-away:focus-visible { opacity: 1; translate: -50% 0; }
@media (min-aspect-ratio: 1/1) and (min-width: 820px) { .js .skip--pill { left: max(2rem, 5vw); translate: 0 0; } .js .skip--pill.is-away { translate: 0 140%; } .js .skip--pill.is-away:focus-visible { translate: 0 0; } }

.site-head { position: relative; z-index: 20; display: flex; align-items: center; gap: 1rem; height: var(--head-h); padding: 0 max(1rem, env(safe-area-inset-left)); background: var(--c-paper); border-bottom: var(--b); }
.brand { order: 1; display: flex; align-items: center; gap: .55rem; color: var(--c-ink); text-decoration: none; font: 850 clamp(1.05rem, 4.4vw, 1.3rem)/1 var(--f-head); font-variation-settings: "SOFT" 100; white-space: nowrap; }
.brand-owl { width: 46px; height: 40px; flex: none; }
.brand-owl svg { width: 100%; height: 100%; overflow: visible; }
.brand:hover .brand-name { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .2em; }
.site-nav { order: 2; margin-left: auto; display: none; }
.site-nav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: .45em .8em; border-radius: 999px; color: var(--c-ink); font-weight: 600; text-decoration: none; }
.site-nav a:hover { background: var(--c-cream); box-shadow: inset 0 0 0 2px var(--c-ink); }
.motion-toggle { order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .35em .85em; border: 2px solid var(--c-ink); border-radius: 999px; background: var(--c-card); font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.motion-toggle .ico-play { display: none; }
.motion-toggle[data-paused="true"] { background: var(--c-ink); color: var(--c-paper); }
.motion-toggle[data-paused="true"] .ico-pause { display: none; }
.motion-toggle[data-paused="true"] .ico-play { display: block; }
@media (min-width: 820px) { .site-nav { display: block; } .motion-toggle { margin-left: .5rem; } }
@media (max-width: 479px) {
  /* narrow phones: the pause button shows its icon only (the text stays its accessible name) – robust for longer languages */
  .motion-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .motion-toggle .ico { width: 1.3em; height: 1.3em; }
}

/* ---------------- the greeting ---------------- */
.greet { position: relative; background: var(--c-stage); color: var(--c-paper); --focus: var(--c-yellow); }
/* static (no JS, reduced motion, slow devices): the hero picture, then the four boxes as a comic strip */
.greet-sticky { position: relative; }
.stage { position: relative; width: min(100%, calc(min(66svh, 42rem) * 10 / 11)); aspect-ratio: 10 / 11; margin-inline: auto; overflow: hidden; }
.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-ui { position: absolute; right: .8rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: none; flex-direction: column-reverse; align-items: flex-end; gap: .45rem; z-index: 3; }
.stage-ui .xray-read { order: -1; }
.stage-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--c-paper); border-radius: 50%; background: rgba(46, 38, 88, .8); color: var(--c-paper); cursor: pointer; }
.stage-btn .ico { width: 1.3em; height: 1.3em; }
.stage-btn span:not(.vh) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage-btn[aria-pressed="true"] { background: var(--c-paper); color: var(--c-stage); }
html:not(.is-scrolled) .motion-toggle--stage { display: none; }
.motion-toggle--stage .ico-play { display: none; }
.motion-toggle--stage[data-paused="true"] { background: var(--c-paper); color: var(--c-stage); }
.motion-toggle--stage[data-paused="true"] .ico-pause { display: none; }
.motion-toggle--stage[data-paused="true"] .ico-play { display: block; }
@media (min-aspect-ratio: 1/1) and (min-width: 820px) { .stage-ui { top: .9rem; bottom: auto; flex-direction: row-reverse; align-items: flex-start; } }
@media (max-width: 359px) { .stage-ui { bottom: calc(5rem + env(safe-area-inset-bottom)); } }
.xray-read { font: 600 .8rem/1.3 ui-monospace, Menlo, monospace; color: #D8FFE6; background: rgba(20, 16, 40, .8); padding: .3em .6em; border-radius: 8px; display: none; }
.is-live .stage-ui { display: flex; }
.stage-ui { transition: opacity .3s; }
.is-end .stage-ui { opacity: 0; pointer-events: none; }
.is-xray .xray-read { display: block; }
.stage-svg .xp { display: none; }
.is-xray .stage-svg .xp { display: inline; }

/* the beats: comic caption boxes (the look of the videos' caption box) */
.beats { list-style: none; margin: 0; padding: 0; }
.beat-box { position: relative; margin: 0; padding: .55em .8em .6em; background: var(--c-cream); color: var(--c-ink); border: 5px solid var(--c-ink); border-radius: 10px; box-shadow: var(--sh2); font: 850 clamp(1.5rem, 3.6vw, 2.7rem)/1.12 var(--f-head); font-variation-settings: "SOFT" 100; text-wrap: balance; rotate: -.6deg; width: fit-content; max-width: 100%; }
.beat-box::before { content: ""; position: absolute; inset: 0; border-radius: 5px; opacity: .55; pointer-events: none;
  background: radial-gradient(circle, #FFD84D 32%, transparent 36%) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(135deg, transparent 60%, #000 100%); mask-image: linear-gradient(135deg, transparent 60%, #000 100%); }
.beat-box .ph { position: relative; display: block; }
.beat-box .kpill { border-width: .08em; }
.beat-go { display: inline-flex; align-items: center; gap: .4em; margin-top: 1.1rem; min-height: 48px; padding: .55em 1.1em; background: var(--c-yellow); color: var(--c-ink); border: var(--b); border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: var(--sh1); }
.scroll-hint { display: none; }

/* static greeting (no JS, reduced motion, slow devices): the hero picture + the four boxes as a comic strip below */
.beats { position: relative; display: grid; gap: 1.2rem; padding: 1.6rem max(1.1rem, 4vw) 2.2rem; background: var(--c-stage-2); }
@media (min-width: 900px) { .beats { grid-template-columns: repeat(4, 1fr); align-items: start; } .beat:nth-child(even) { margin-top: 1.2rem; } .beats .beat-box { font-size: clamp(1.3rem, 2.2vw, 1.9rem); } }

/* the scroll-driven stage (JS + motion allowed): tall section, sticky picture, the boxes cross-fade over it */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.stage-static) .greet { height: 560svh; }
  html:not(.stage-static) .snacks { position: relative; z-index: 3; margin-top: -70svh; border-top: 5px solid var(--c-ink); box-shadow: 0 -10px 0 rgba(42, 35, 32, .12); }
  html:not(.stage-static) .snacks::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: radial-gradient(circle, rgba(42, 35, 32, .22) 26%, transparent 30%) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); pointer-events: none; }
  html:not(.stage-static) .greet-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  html:not(.stage-static) .stage { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; }
  html:not(.stage-static) .beat-box { font-size: clamp(1.5rem, 3.6vw, 2.7rem); }
  html:not(.stage-static) .beats { position: absolute; z-index: 2; inset: auto; top: max(1rem, 3svh); left: 1rem; right: 1rem; display: block; padding: 0; background: none; pointer-events: none; }
  html:not(.stage-static) .beat { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; margin: 0 !important; }
  html:not(.stage-static) .beat.on { visibility: visible; }
  html:not(.stage-static) .beat-box { max-width: min(100%, 34rem); margin-inline: auto; }
  html:not(.stage-static) .beat:last-child .beat-go { margin-inline: auto; }
  html:not(.stage-static) .beat-go { pointer-events: auto; }
  html:not(.stage-static) .beat:last-child { text-align: center; }
  html:not(.stage-static) .scroll-hint { display: none !important; }
  @media (min-aspect-ratio: 1/1) and (min-width: 820px) { html:not(.stage-static) .scroll-hint { display: flex !important; left: calc(max(2rem, 5vw) + 16.5rem); translate: 0 0; bottom: calc(1.2rem + env(safe-area-inset-bottom)); } }
  html:not(.stage-static) .scroll-hint { position: absolute; z-index: 2; left: 50%; bottom: calc(5.4rem + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0; font: 700 .95rem var(--f-comic); color: var(--c-paper); text-shadow: 0 2px 0 var(--c-stage-2); transition: opacity .4s; }
  html:not(.stage-static) .scroll-hint .ico { width: 1.6rem; height: 1.6rem; animation: nudge 1.6s ease-in-out infinite; }
  html.is-scrolled .scroll-hint, html.is-paused .scroll-hint .ico { opacity: 0; animation: none; }
  @media (min-aspect-ratio: 1/1) and (min-width: 820px) {
    html:not(.stage-static) .beats { top: 50%; left: max(2rem, 5vw); right: auto; width: min(36vw, 31rem); translate: 0 -50%; height: 16rem; }
    html:not(.stage-static) .beat { top: 50%; translate: 0 -50%; }
    html:not(.stage-static) .beat:last-child { text-align: left; }
  }
}
@keyframes nudge { 50% { transform: translateY(6px); } }

/* ---------------- sections ---------------- */
.sec-head { position: relative; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.sec-head h2 { font-size: clamp(2.7rem, 9vw, 6rem); font-weight: 900; margin-bottom: .25em; }
.sec-head h2:focus { outline: none; }
.sec-head h2:focus-visible { outline: 3px solid var(--focus); }

.snacks { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); background: var(--c-paper); }
.snacks .sec-head { padding-right: 7.5rem; }

/* cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 1.7rem); }
@media (min-width: 620px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; }
.card-link { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--c-card); color: var(--c-ink); text-decoration: none; border: var(--b); border-radius: var(--r); box-shadow: var(--sh1); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.card-link:hover, .card-link:focus-visible { transform: translate(-4px, -4px) rotate(-.6deg); box-shadow: var(--sh2); }
.card-link:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); }
.card-poster { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: calc(var(--r) - 3px) calc(var(--r) - 3px) 0 0; border-bottom: var(--b); background: #E8DCC0; }
.card-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform-origin: 50% 70%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.card-link:hover .card-poster img { transform: scale(1.045); }
.card-pin { position: absolute; top: -12px; right: -10px; width: clamp(58px, 9vw, 74px); aspect-ratio: 1; display: grid; place-items: center; background: var(--c-card); border: var(--b); border-radius: 50%; box-shadow: var(--sh1); rotate: 8deg; transition: rotate .3s cubic-bezier(.3, 1.8, .5, 1), scale .3s cubic-bezier(.3, 1.8, .5, 1); }
.card-pin .emblem { width: 76%; height: 76%; overflow: visible; }
.card-link:hover .card-pin, .card-link:focus-visible .card-pin { rotate: -10deg; scale: 1.14; }
.card-meta { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .85rem .95rem; }
@media (max-width: 599px) { .card-dur { display: none; } }
.card-kicker { font: 700 .85rem/1.3 var(--f-head); letter-spacing: .01em; color: var(--c-ink-2); }
.card-title { overflow-wrap: break-word; font: 850 clamp(1.1rem, 2.1vw, 1.35rem)/1.1 var(--f-head); font-variation-settings: "SOFT" 100; transition: font-variation-settings .3s; }
.card-link:hover .card-title { font-variation-settings: "SOFT" 0; }
.card-q { font-size: .95rem; line-height: 1.35; color: var(--c-ink-2); }
.card--denkt .card-poster { background: var(--c-denkt-tint); }
.card--werkzeug .card-pin { border-color: var(--c-ink); }
.card--denkt .card-pin { background: var(--c-denkt-tint); }
.card--werkzeug .card-pin { background: var(--c-werkzeug-tint); }
.card--nutzen .card-pin { background: var(--c-nutzen-tint); }
.card--vorsicht .card-pin { background: var(--c-vorsicht-tint); }

/* the featured card (Folge 0) */
.cards--feature { grid-template-columns: 1fr; margin-bottom: clamp(2.4rem, 6vw, 4rem); }
.card--feature .card-link { background: var(--c-cream); }
.card--feature .card-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.card--feature .card-q { font-size: 1.1rem; }
.card-teaser { margin-top: .5rem; font-size: 1.05rem; line-height: 1.5; max-width: 34rem; }
.card--feature .sticker { top: -16px; left: -12px; font-size: 1.05rem; }
.card--feature .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--dots); opacity: .35; pointer-events: none; -webkit-mask-image: linear-gradient(110deg, transparent 55%, #000); mask-image: linear-gradient(110deg, transparent 55%, #000); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1rem; }
.card-cta { display: inline-flex; align-items: center; gap: .45em; min-height: 46px; padding: .5em 1.15em; border: var(--b); border-radius: 999px; background: var(--c-yellow); font-weight: 800; box-shadow: var(--sh1); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); }
.card-link:hover .card-cta { transform: rotate(-3deg) scale(1.05); }
.card-legend { display: none; }
@media (min-width: 1000px) {
  .card--feature { position: relative; }
  .card--feature .card-meta { padding-right: 26rem !important; }
  .card--feature .card-legend { position: absolute; z-index: 2; right: 2rem; top: 50%; translate: 0 -50%; width: 22rem; display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem; background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 14px; }
  .legend-g { color: var(--c-ink); text-decoration: none; border-radius: 10px; padding: .15rem .3rem; }
  .legend-g:hover { background: var(--c-paper-2); }
  .legend-g:hover .mini-badge { transform: rotate(-10deg) scale(1.1); }
  .legend-t { font: 800 1.05rem/1.2 var(--f-head); font-variation-settings: "SOFT" 100; }
  .legend-g { display: flex; align-items: center; gap: .6rem; font-size: .92rem; line-height: 1.3; }
  .legend-g strong { display: block; font-family: var(--f-head); }
  .legend-g--denkt strong { color: var(--c-denkt); } .legend-g--werkzeug strong { color: var(--c-werkzeug); } .legend-g--nutzen strong { color: var(--c-nutzen); } .legend-g--vorsicht strong { color: var(--c-vorsicht); }
}
.mini-badge { width: 40px; height: 40px; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.card-link:hover .mini-badge { transform: translateY(-4px) rotate(-8deg); }
.card-link:hover .mini-badge:nth-child(2) { transition-delay: .05s; } .card-link:hover .mini-badge:nth-child(3) { transition-delay: .1s; } .card-link:hover .mini-badge:nth-child(4) { transition-delay: .15s; }
@media (min-width: 700px) {
  .card--feature .card-link { flex-direction: row; align-items: center; }
  .card--feature .card-poster { width: min(30%, 250px); flex: none; aspect-ratio: 9 / 16; border-radius: calc(var(--r) - 3px) 0 0 calc(var(--r) - 3px); border-bottom: 0; border-right: var(--b); }
  .card--feature .card-poster img { object-position: 50% 50%; }
  .card--feature .card-meta { position: relative; z-index: 1; flex: 1 1 auto; padding: 1.6rem clamp(1.4rem, 4vw, 3rem); }
}

/* the four groups */
.group { margin-top: clamp(2.4rem, 6vw, 4.2rem); --g: var(--c-ink); --gt: var(--c-paper-2); --gm: var(--c-ink); }
.group--denkt { --g: var(--c-denkt); --gt: var(--c-denkt-tint); --gm: var(--c-denkt-mid); }
.group--werkzeug { --g: var(--c-werkzeug); --gt: var(--c-werkzeug-tint); --gm: var(--c-werkzeug-mid); }
.group--nutzen { --g: var(--c-nutzen); --gt: var(--c-nutzen-tint); --gm: var(--c-nutzen-mid); }
.group--vorsicht { --g: var(--c-vorsicht); --gt: var(--c-vorsicht-tint); --gm: var(--c-vorsicht-mid); }
.group-head { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; padding: .7rem 1.1rem .7rem .7rem; background: var(--gt); border: var(--b); border-radius: 999px 22px 22px 999px; box-shadow: inset 0 -6px 0 var(--gm), var(--sh1); }
.group-head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--dots); opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.group-head .badge { width: clamp(56px, 9vw, 76px); height: auto; flex: none; transition: rotate .5s cubic-bezier(.3, 1.8, .5, 1); }
.group.in .group-head .badge { animation: stamp .55s cubic-bezier(.3, 1.8, .5, 1) both; }
.group-head h3 { margin: 0; color: var(--g); font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.group-head p { margin: .1rem 0 0; font-weight: 600; }
@keyframes stamp { 0% { scale: 1.8; opacity: 0; rotate: -18deg; } 60% { scale: .9; opacity: 1; } 100% { scale: 1; rotate: 0deg; } }

/* cards rise in when their group scrolls into view (JS adds .in; without JS they are simply there) */
.js .group:not(.in) .card, .js .cards--feature:not(.in) .card { opacity: 0; transform: translateY(24px) rotate(1.5deg); }
.js .card { transition: opacity .5s, transform .6s cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------------- making-of ---------------- */
.made { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) 0; background: var(--c-ink); color: var(--c-paper); --focus: var(--c-yellow); }
.made::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 243, 214, .07) 22%, transparent 26%) 0 0 / 14px 14px; pointer-events: none; }
.made a { color: var(--c-yellow); }
.made .wrap { position: relative; }
.sec-head--dark h2 { color: var(--c-paper); }
.made-clap { position: absolute; right: 0; top: -1.4rem; width: clamp(110px, 20vw, 230px); rotate: 6deg; }
.made-clap .clap { width: 100%; height: auto; overflow: visible; }
.clap-stick { transform: rotate(-16deg); }
.made.in .clap-stick { animation: clap 1.1s .35s cubic-bezier(.5, 0, .7, 1) both; }
.made-clap:hover .clap-stick { animation: clap .8s cubic-bezier(.5, 0, .7, 1) both; }
@keyframes clap { 0% { transform: rotate(-16deg); } 35% { transform: rotate(-26deg); } 52% { transform: rotate(0deg); } 60% { transform: rotate(-4deg); } 68%, 100% { transform: rotate(0deg); } }
.made-clap { pointer-events: auto; }
.made .sec-head { padding-right: clamp(7rem, 22vw, 16rem); }
.made-films { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 34rem); gap: clamp(1rem, 3vw, 2rem); align-items: end; margin-bottom: clamp(2.4rem, 6vw, 4rem); }
@media (max-width: 620px) { .made-films { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.film { position: relative; display: flex; flex-direction: column; color: var(--c-paper); text-decoration: none; border: 3px solid var(--c-paper); border-radius: var(--r); overflow: hidden; background: var(--c-stage-2); box-shadow: 4px 4px 0 var(--c-yellow); }
.film--portrait picture { aspect-ratio: 9 / 16; display: block; }
.film--portrait img { width: 100%; height: 100%; object-fit: cover; }
a.film:hover { transform: translate(-4px, -4px) rotate(-.6deg); box-shadow: 8px 8px 0 var(--c-yellow); }
a.film { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.film--soon { box-shadow: none; border-style: dashed; background: rgba(255, 243, 214, .04); }
.film--landscape picture { aspect-ratio: 16 / 9; display: block; }
.film--landscape img { width: 100%; height: 100%; object-fit: cover; }
.film-title .ico-yt { color: #FF4E45; }   /* as the selected YouTube tab (on the dark stage) */
.film-note { font-size: .8rem; opacity: .85; }
.film-soon { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, rgba(255, 216, 77, .06) 0 14px, transparent 14px 28px); }
.soon-art { width: 70%; height: auto; overflow: visible; rotate: -3deg; }
.soon-inline { display: none; }
@media (max-width: 619px) { .sticker--soon { display: none; } .soon-inline { display: inline; } }
.sticker--soon { top: .7rem; right: .7rem; rotate: 8deg; }
.film-cap { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem .85rem; border-top: 3px solid var(--c-paper); }
.film--soon .film-cap { border-top-style: dashed; }
.film-kind { font-size: .8rem; font-weight: 700; opacity: .85; }
.film-title { display: flex; align-items: center; gap: .35em; font: 800 clamp(1rem, 2vw, 1.25rem)/1.2 var(--f-head); font-variation-settings: "SOFT" 100; }

.steps { list-style: none; margin: 0 0 clamp(2.4rem, 6vw, 3.6rem); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1rem 1.1rem; border: 2px solid rgba(255, 243, 214, .5); border-radius: 14px; background: rgba(255, 243, 214, .05); font-size: .95rem; line-height: 1.4; }
.step strong { font: 800 1.1rem/1.15 var(--f-head); font-variation-settings: "SOFT" 100; color: var(--c-yellow); }
.step-n { position: absolute; top: -.8rem; left: .8rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); font: 800 .95rem var(--f-head); border: 2px solid var(--c-ink); }
.step-art { height: 3.2rem; display: block; }
.ico-step { width: 2.4rem; height: 2.4rem; color: var(--c-yellow); stroke-width: 2; }
.step.is-hot .ico-step { animation: hop .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes hop { 40% { transform: translateY(-6px) rotate(-6deg); } }
.js .steps:not(.in) .step { opacity: 0; transform: translateY(16px); }
.js .step { transition: opacity .5s, transform .5s cubic-bezier(.2, 1.4, .4, 1), border-color .3s; transition-delay: calc(var(--i, 0) * 90ms); }
.step.is-hot { border-color: var(--c-yellow); background: rgba(255, 216, 77, .1); }

.made-facts { grid-column: 1 / -1; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0; }
@media (min-width: 820px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .made-films { grid-template-columns: minmax(0, 250px) minmax(0, 30rem) minmax(0, 1fr); } .made-facts { grid-column: auto; align-self: stretch; } .made-facts .facts { grid-template-columns: 1fr; gap: 1rem; } .made-facts .fact dd { font-size: clamp(2rem, 3.2vw, 2.8rem); } }
.fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 3px solid var(--c-paper); padding-top: .6rem; }
.fact dt { font-weight: 600; font-size: .95rem; }
.fact dd { margin: 0; font: 900 clamp(2.2rem, 5.6vw, 3.6rem)/1 var(--f-head); font-variation-settings: "SOFT" 100; color: var(--c-yellow); font-variant-numeric: tabular-nums; }
.fact-pre { font-size: .6em; vertical-align: .18em; }
.facts-note { margin-top: 1.1rem; font-size: .9rem; opacity: .85; max-width: 52rem; }

/* ---------------- about ---------------- */
.about { padding: clamp(3.5rem, 9vw, 6rem) 0; background: var(--c-paper-2); border-top: var(--b); }
.about h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
.points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; } }
.point { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-content: start; gap: .15rem 1rem; padding: 1.1rem 1.2rem; background: var(--c-card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh1); }
.point .ico-point { grid-row: span 2; width: 2.4rem; height: 2.4rem; padding: .35rem; border-radius: 12px; background: var(--c-cream); border: 2px solid var(--c-ink); color: var(--c-violet); }
.point strong { font: 800 1.2rem/1.2 var(--f-head); font-variation-settings: "SOFT" 100; }
.point span { line-height: 1.5; }

/* ---------------- footer ---------------- */
.site-foot { position: relative; background: var(--c-stage-2); color: var(--c-paper); --focus: var(--c-yellow); margin-top: 0; }
.foot-perch { position: relative; height: 0; border-top: 4px solid var(--c-ink); }
.foot-in { width: min(100% - 2.2rem, 1200px); margin-inline: auto; padding: 2.4rem 0 calc(2.4rem + env(safe-area-inset-bottom)); }
.foot-links { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.foot-links a { display: inline-block; padding: .35em 0; color: var(--c-paper); font-weight: 700; }
.foot-made { margin: 0; font-size: .95rem; opacity: .9; }
.langs ul { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 1rem 0 0; }
.langs a { color: var(--c-paper); }

/* ---------------- cameos (decoration only; JS draws them) ---------------- */
.cameo { position: absolute; display: block; pointer-events: none; }
.cameo svg { width: 100%; height: 100%; overflow: visible; }
.cameo--window { right: 0; top: -.2rem; width: clamp(92px, 15vw, 132px); aspect-ratio: 1; pointer-events: auto; cursor: pointer; }
.cameo--fox { right: 1.2rem; bottom: calc(100% - 6px); width: 96px; height: 70px; }
.cameo--pigeon { left: 0; bottom: 0; width: 100%; height: 90px; }
.cameo--beaver { right: 0; top: -2.2rem; width: 96px; height: 96px; }
.cameo--fox404 { position: relative; width: 180px; height: 150px; margin-bottom: 1rem; }

/* ---------------- episode page ---------------- */
.ep { padding: 1.2rem 0 3rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 1.4rem; padding: 0; font-size: .95rem; }
.crumbs li + li::before { content: "›" / ""; margin-right: .5rem; color: var(--c-ink-2); }
.crumbs a { display: inline-block; padding: .2em 0; }
.crumbs a[aria-current] { color: var(--c-ink); text-decoration: none; font-weight: 700; }
.ep-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.ep-emblem { position: absolute; right: 0; top: -.4rem; width: clamp(76px, 14vw, 132px); aspect-ratio: 1; display: grid; place-items: center; background: var(--c-card); border: var(--b); border-radius: 50%; box-shadow: var(--sh1); rotate: 8deg; }
.ep--denkt .ep-emblem { background: var(--c-denkt-tint); } .ep--werkzeug .ep-emblem { background: var(--c-werkzeug-tint); }
.ep--nutzen .ep-emblem { background: var(--c-nutzen-tint); } .ep--vorsicht .ep-emblem { background: var(--c-vorsicht-tint); }
.ep-emblem .emblem { width: 76%; height: 76%; overflow: visible; }
.ep-head h1, .ep-kicker, .ep-teaser { padding-right: clamp(5.5rem, 16vw, 9rem); }
@media (max-width: 479px) { .ep-emblem { width: 60px; } .ep-head h1, .ep-teaser { padding-right: 0; } .ep-head h1 { margin-top: 1.2rem; } }
.ep-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; font: 700 1rem/1.3 var(--f-head); color: var(--c-ink-2); }
.ep-head h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 900; margin-bottom: .35em; }
.ep-title { display: block; }
.ep-q { display: block; margin-top: .15em; font-size: .52em; font-weight: 600; color: var(--c-violet); line-height: 1.15; }
.ep-teaser { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 42rem; }
.ep-body { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 980px) { .ep-body { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .player { width: min(420px, 34vw); } }
/* sticky next to the Textfassung only where the whole player fits on the screen */
@media (min-width: 980px) and (min-height: 820px) { .player { position: sticky; top: 1rem; width: min(420px, 34vw, calc((100svh - 20rem) * 9 / 16)); } }
@media (max-width: 979px) { .player { width: min(100%, 26rem); margin-inline: auto; } }

.player { container-type: inline-size; }
.tabs { display: flex; gap: .4rem; padding: .3rem; margin-bottom: .8rem; border: var(--b); border-radius: 999px; background: var(--c-card); }
.tab { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 44px; padding: .35em .5em; white-space: nowrap; border: 0; border-radius: 999px; background: none; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--c-ink); }
.tab[aria-selected="true"] { background: var(--c-ink); color: var(--c-paper); }
.tab[disabled] { opacity: .6; cursor: not-allowed; }
.tab .ico-yt { color: var(--c-yt); }
@media (max-width: 359px) { .tab .ico { display: none; } }
.tab[aria-selected="true"] .ico-yt { color: #FF4E45; }
.screen { position: relative; border: 4px solid var(--c-ink); border-radius: 20px; box-shadow: var(--sh2); overflow: hidden; background: #221D2B; }
.panel[hidden] { display: none; }
.facade { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #221D2B; cursor: pointer; aspect-ratio: 9 / 16; color: var(--c-ink); text-decoration: none; }
.facade picture, .facade img { width: 100%; height: 100%; object-fit: cover; }
.facade-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; background: linear-gradient(180deg, transparent 45%, rgba(20, 16, 26, .55)); transition: background .3s; }
.play-dot { width: 5.4rem; height: 5.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); border: 4px solid var(--c-ink); box-shadow: var(--sh1); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.play-dot .ico { width: 2.3rem; height: 2.3rem; translate: 3px 0; }
.play-dot--yt { background: #fff; }
.play-dot--yt .ico { width: 3rem; height: 3rem; translate: 0 0; color: var(--c-yt); }
.play-label { padding: .3em .9em; border-radius: 999px; background: var(--c-card); border: var(--b); font-weight: 800; color: var(--c-ink); }
.facade:hover .play-dot, .facade:focus-visible .play-dot { transform: scale(1.1) rotate(-6deg); }
.facade:focus-visible { outline-offset: -8px; }
.facade--yt .facade-play { background: rgba(20, 16, 26, .35); }
.facade--yt img { filter: saturate(.55) brightness(.92); }
.panel-note { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin: 0; padding: .7rem .9rem; background: var(--c-card); border-top: var(--b); font-size: .9rem; line-height: 1.45; }
.panel-note .ico { color: var(--c-nutzen); }
.player-alt { margin: .9rem 0 0; font-size: .9rem; color: var(--c-ink-2); }
.live-frame { display: block; width: 100%; height: calc((100cqw - 8px) * 16 / 9 + 64px); border: 0; background: #221D2B; }
.yt-frame { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; background: #000; }
.yt-demo { aspect-ratio: 9 / 16; display: grid; place-content: center; gap: .6rem; padding: 2rem; text-align: center; color: var(--c-paper); background: repeating-linear-gradient(-45deg, #2B2536 0 16px, #221D2B 16px 32px); }
.yt-demo strong { font: 800 1.4rem/1.2 var(--f-head); font-variation-settings: "SOFT" 100; }
.yt-demo p { margin: 0; }

/* the consent panel: a bottom sheet over the dimmed poster */
.consent { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 100%; overflow: auto; padding: 1.2rem 1.2rem 1rem; background: var(--c-cream); border-top: 4px solid var(--c-ink); border-radius: 18px 18px 0 0; font-size: .98rem; line-height: 1.5; animation: sheet .35s cubic-bezier(.2, 1.2, .4, 1); }
.consent h3 { font-size: 1.45rem; margin-bottom: .45em; }
.consent h3:focus { outline: none; }
.consent-once { font-size: .92rem; }
.consent-do { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 .2rem; }
.consent .btn { min-height: 46px; }
.consent .btn--yes { background: #fff; }
.consent .btn--yes .ico-yt { color: var(--c-yt); width: 1.4em; height: 1.4em; }
.screen.is-asking .facade--yt { filter: brightness(.55); }
@keyframes sheet { from { transform: translateY(100%); } }

/* the Textfassung: a reading rail with the scenes */
.tf { position: relative; }
.tf h2 { font-size: clamp(2rem, 5vw, 3rem); padding-right: 7rem; }
.tf-intro { max-width: 40rem; }
.scenes { list-style: none; margin: 1.6rem 0 1.2rem; padding: 0 0 0 1.8rem; position: relative; }
.scenes::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, var(--c-ink) 0 10px, transparent 10px 18px); opacity: .35; }
.scenes .rail-fill { position: absolute; left: .45rem; top: .6rem; width: 4px; border-radius: 4px; background: var(--c-violet); height: 0; }
.rail-owl { position: absolute; top: 0; left: -.9rem; z-index: 1; width: 2.6rem; height: 2.3rem; margin-top: -1.15rem; pointer-events: none; }
.rail-owl svg { width: 100%; height: 100%; overflow: visible; }
.scene { position: relative; margin-bottom: 1.4rem; padding: 1rem 1.1rem 1.1rem; background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 14px; }
.scene::before { content: ""; position: absolute; left: calc(-1.8rem + .1rem); top: 1.15rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--c-paper); border: 3px solid var(--c-ink); }
.scene.is-here { box-shadow: 4px 4px 0 var(--c-owl); }
.scene.is-here::before { background: var(--c-owl); }
.scene-time { display: inline-block; margin: 0 0 .5rem; padding: .05em .6em; border-radius: 999px; background: var(--c-ink); color: var(--c-paper); font: 700 .85rem/1.6 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.scene-pic { margin-bottom: .6rem; }
.lab { display: inline-block; margin-right: .35em; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-violet); }
.scene-caps .lab { display: block; margin-bottom: .3rem; }
.cap { margin: 0 0 .5rem; padding: .45em .8em; background: var(--c-cream); border: 3px solid var(--c-ink); border-radius: 8px; box-shadow: var(--sh1); font: 700 1.05rem/1.4 var(--f-comic); rotate: -.4deg; }
.cap:nth-child(odd) { rotate: .3deg; }
.cap p { margin: 0; }
.tf-sound { font-style: italic; }
.ai-note { margin: clamp(2rem, 5vw, 3rem) 0 1.6rem; padding: 1rem 1.2rem; border: 2px dashed var(--c-ink); border-radius: 14px; font-size: .95rem; background: var(--c-paper-2); }
.ep-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: stretch; }
.ep-nav a { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border: var(--b); border-radius: 14px; background: var(--c-card); color: var(--c-ink); text-decoration: none; box-shadow: var(--sh1); transition: transform .15s, box-shadow .15s; }
.ep-nav a:hover { transform: translate(-3px, -3px); box-shadow: var(--sh2); }
.ep-nav .lab { display: block; margin: 0; }
.ep-nav .t { display: block; font: 800 1.05rem/1.2 var(--f-head); font-variation-settings: "SOFT" 100; }
.ep-nav-next { justify-content: flex-end; text-align: right; }
.ep-nav-all { font-weight: 700; justify-content: center; }
@media (max-width: 640px) { .ep-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ep-nav-all { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 399px) { .ep-nav { grid-template-columns: minmax(0, 1fr); } .ep-nav-all { grid-row: auto; } }
.ep-nav .t { overflow-wrap: break-word; }

/* ---------------- about: the privacy panel + the colophon ---------------- */
.about-more { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .about-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 2rem; } }
.privacy { padding: 1.3rem 1.4rem 1.2rem; background: var(--c-card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh1); }
.privacy h2, .privacy h3 { display: flex; align-items: center; gap: .5rem; font-size: clamp(1.4rem, 3vw, 1.7rem); margin-bottom: .5rem; }
.privacy .ico-pp { width: 1.6em; height: 1.6em; flex: none; color: var(--c-nutzen); }
.pp-run .ico { width: 1.2em; height: 1.2em; }
.pp-sum:empty { display: none; }
.pp-list { list-style: none; margin: 1rem 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.pp-list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: 10px; background: var(--c-paper-2); }
.pp-ico .ico { width: 1.3rem; height: 1.3rem; display: none; }
.pp-list li.is-ok .ico-ok { display: block; color: var(--c-nutzen); }
.pp-list li.is-bad .ico-bad { display: block; color: var(--c-vorsicht); }
.pp-list li.is-bad { background: var(--c-vorsicht-tint); }
.pp-v { font: 800 1.05rem/1 var(--f-text); font-variant-numeric: tabular-nums; }
.pp-sum { font-weight: 700; margin: 0 0 .6rem; }
.pp-note { font-size: .95rem; color: var(--c-ink-2); margin: .6rem 0 0; }
.colophon h3 { font-size: clamp(1.4rem, 3vw, 1.7rem); }
.colo { margin: 0; display: grid; gap: .9rem; }
.colo div { padding-left: 1rem; border-left: 4px solid var(--c-owl); }
.colo dt { font: 800 1.1rem/1.25 var(--f-head); font-variation-settings: "SOFT" 100; }
.colo dd { margin: .15rem 0 0; line-height: 1.5; }
.colo-built { margin: 1rem 0 0; font-size: .95rem; color: var(--c-ink-2); }

/* ---------------- the legal pages: sober text, a small comic header ---------------- */
.legal { padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem); }
.wrap--legal { width: min(100% - 2.2rem, 50rem); }
.legal-head { display: grid; gap: 1.2rem; align-items: center; margin-bottom: 1.6rem; }
@media (min-width: 720px) { .legal-head { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2rem; } }
.legal-head h1 { font-size: clamp(2.2rem, 6.4vw, 3.8rem); }
.legal-head .lede { margin: 0; }
.legal-art { width: min(100%, 20rem); aspect-ratio: 320 / 230; border: var(--b); border-radius: 18px; box-shadow: var(--sh1); overflow: hidden; background: var(--c-paper-2); }
/* small screens: the title comes first, the scene sits small next to it */
@media (max-width: 719px) {
  .legal-head { grid-template-columns: minmax(0, 1fr) clamp(6rem, 28vw, 9rem); grid-template-areas: "t a" "l l"; gap: .8rem 1rem; }
  .legal-head-t { display: contents; }
  .legal-head h1 { grid-area: t; margin: 0; align-self: center; }
  .legal-head .lede { grid-area: l; }
  .legal-art { grid-area: a; width: 100%; border-width: 2px; border-radius: 12px; box-shadow: 3px 3px 0 var(--c-ink); }
}
.legal-art svg { width: 100%; height: 100%; }
.legal-draft { margin: 0 0 1.6rem; }
.legal-toc { margin: 0 0 2rem; padding: 1rem 1.2rem; border: 2px solid var(--c-ink); border-radius: 12px; background: var(--c-paper-2); }
.legal-toc-t { margin: 0 0 .4rem; font-weight: 800; }
.legal-toc ol { margin: 0; padding-left: 1.4rem; columns: 2 17rem; column-gap: 2.4rem; }
.legal-toc li { padding: .2rem 0; break-inside: avoid; }
.legal-sec { margin: 0 0 2.2rem; scroll-margin-top: 1rem; }
.legal-sec h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: .6rem; }
.legal-body { max-width: 44rem; }
.legal-body ul { padding-left: 1.3rem; margin: 0 0 1em; }
.legal-body li { margin: 0 0 .55em; }
.legal-body li::marker { color: var(--c-violet); }
.legal-dl { margin: 0 0 1em; display: grid; gap: .5rem; padding: 1rem 1.2rem; background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 12px; }
.legal-dl div { display: grid; gap: .1rem 1rem; }
@media (min-width: 560px) { .legal-dl div { grid-template-columns: 11rem minmax(0, 1fr); } }
.legal-dl dt { font-weight: 800; }
.legal-dl dd { margin: 0; overflow-wrap: anywhere; }
.legal-box { margin: 0 0 1.2em; padding: 1rem 1.2rem; background: var(--c-cream); border: var(--b); border-radius: 12px; box-shadow: var(--sh1); }
.legal-box h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.legal-box p:last-child { margin: 0; }
.legal-asof { margin: 2rem 0 0; padding-top: 1rem; border-top: 2px solid var(--c-ink); color: var(--c-ink-2); }
.legal .privacy { margin: 0 0 1.2em; }
.mail-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: .4rem 0 1.4rem; }
.btn--mail { font-size: 1.15rem; }
.btn--mail .ico { width: 1.4em; height: 1.4em; }
.mail-addr { font-weight: 700; overflow-wrap: anywhere; }
.ico-ext { display: inline-block; width: .9em; height: .9em; margin-left: .15em; vertical-align: -.05em; }

/* ---------------- stubs, 404 ---------------- */
.stub { padding: clamp(3rem, 9vw, 6rem) 0; min-height: 60vh; }
.stub h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
.todo-block { padding: 1rem 1.2rem; border: 2px dashed var(--c-ink); border-radius: 12px; background: var(--c-paper-2); }

/* ---------------- motion preferences, pause, view transitions ---------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
html.is-paused *, html.is-paused *::before, html.is-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .group:not(.in) .card, .js .cards--feature:not(.in) .card, .js .steps:not(.in) .step { opacity: 1; transform: none; }
  .card-link:hover, .card-link:focus-visible { transform: none; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------- forced colors, print ---------------- */
@media (forced-colors: active) {
  .card-link, .btn, .beat-box, .scene, .screen, .consent, .point, .group-head, .privacy, .legal-art, .legal-box, .legal-dl, .legal-toc { border-color: CanvasText; box-shadow: none; }
  .pp-list li.is-ok .ico-ok, .pp-list li.is-bad .ico-bad { color: CanvasText; }
  .kpill { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .tab { border: 2px solid ButtonText; }
  .tab[aria-selected="true"] { outline: 3px solid Highlight; }
}
@media print {
  .site-head nav, .motion-toggle, .skip, .greet, .player, .cameo, .site-foot .foot-perch, .ep-nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .site-foot { background: #fff; color: #000; }
  .site-foot a { color: #000; }
  .scene, .cap { box-shadow: none; break-inside: avoid; }
  /* the legal pages print as plain documents: no header art, no panel, links spelled out */
  .legal-art, .legal-toc, .privacy, .mail-cta .ico, .page-legal .site-foot, .ico-ext { display: none !important; }
  .legal { padding: 0; }
  .legal-head { display: block; }
  .legal-box, .legal-dl { box-shadow: none; background: #fff; }
  .legal-box, .legal-dl { break-inside: avoid-page; }
  .legal-sec h2 { break-after: avoid; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .9em; }
}

/* ---------------- Frag Ollie (/frag-ollie/ + the start page's teaser) ---------------- */
.faqp .wrap { width: min(100% - 2.2rem, 1000px); }
.faq-head { padding: clamp(1.6rem, 5vw, 3.2rem) 0 clamp(.6rem, 2vw, 1.2rem); }
.faq-kicker, .faqt-sign { display: inline-block; margin: 0 0 .7rem; padding: .4em 1em; font: 700 1.05rem/1 var(--f-comic); color: var(--c-ink); background: #E4B07C; border: var(--b); border-radius: 10px; box-shadow: var(--sh1); transform: rotate(-2deg); }
.faq-head h1 { font-size: clamp(3rem, 11vw, 6.5rem); font-weight: 900; margin: .1em 0 .2em; }
.faq-sign { font: 700 clamp(1.15rem, 2.6vw, 1.5rem)/1.3 var(--f-comic); color: var(--c-violet); margin-bottom: .9em; }
.faq-honest { color: var(--c-ink-2); font-size: 1rem; max-width: 40rem; }
.faq-part { margin: clamp(1.6rem, 4vw, 2.6rem) 0; }
.faq-part h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.faq { background: var(--c-card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh1); scroll-margin-top: 1rem; }
.faq[open] { box-shadow: var(--sh2); }
.faq-sum { display: flex; align-items: center; gap: .9rem; min-height: 48px; padding: .9rem 1.1rem; cursor: pointer; list-style: none; border-radius: calc(var(--r) - 3px); }
.faq-sum::-webkit-details-marker { display: none; }
.faq-sum:hover .faq-q { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .16em; }
.faq-sum:focus-visible { outline-offset: -4px; }
.faq-face { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 3px solid currentColor; }
.faq-face svg { width: 1.9rem; height: 1.9rem; }
.faq-face--s { width: 2.1rem; height: 2.1rem; border-width: 2.5px; }
.faq-face--s svg { width: 1.35rem; height: 1.35rem; }
.faq-sum-t { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.faq-who { font-size: .92rem; font-weight: 700; color: var(--c-ink-2); }
.faq-q { font: 800 clamp(1.15rem, 2.6vw, 1.42rem)/1.25 var(--f-head); font-variation-settings: "SOFT" 100; }
.faq-chev { flex: none; width: 1.6rem; height: 1.6rem; transition: transform .25s; }
.faq[open] .faq-chev { transform: rotate(180deg); }
.faq-body { display: grid; gap: 1.2rem; padding: .2rem 1.1rem 1.3rem; }
@media (min-width: 720px) { .faq-body { grid-template-columns: min(340px, 42%) minmax(0, 1fr); align-items: start; } }
@media (max-width: 719px) { .faq-screen { width: min(100%, 24rem); margin-inline: auto; } }
.faq-screen { container-type: inline-size; border: 4px solid var(--c-ink); border-radius: 16px; overflow: hidden; background: #221D2B; box-shadow: var(--sh1); }
.facade--faq { aspect-ratio: 4 / 5; }
.facade--faq .play-dot { width: 4.4rem; height: 4.4rem; }
.facade--faq .play-dot .ico { width: 1.9rem; height: 1.9rem; }
.faq-frame { display: block; width: 100%; height: calc(100cqw * 5 / 4 + 64px); border: 0; background: #221D2B; }
.faq-by { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; font-weight: 800; }
.faq-text { font-size: 1.16rem; line-height: 1.58; }
.faq-more { font-size: .98rem; }
.faq-more .lab { font-weight: 700; }
.faq-note { margin: 0; font-size: .88rem; color: var(--c-ink-2); }
.faq-missing { margin: clamp(1.6rem, 4vw, 2.6rem) 0; padding: 1.3rem 1.6rem; background: var(--c-cream); border: var(--b); border-radius: var(--r); box-shadow: var(--sh1); }
.faq-missing h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.faq-missing p { margin: 0; font-size: 1.1rem; }
.faq-missing a { overflow-wrap: anywhere; }
.faqt { padding: clamp(2.6rem, 7vw, 4.6rem) 0; background: var(--dots), var(--c-paper-2); border-top: var(--b); }
.faqt-in { max-width: 46rem; }
.faqt h2 { font-size: clamp(2.4rem, 8vw, 4.6rem); font-weight: 900; margin-bottom: .2em; }
.faqt-text { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.faqt-qs { list-style: none; margin: 1.1rem 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.faqt-qs a { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem 1.1rem .5rem .55rem; background: var(--c-card); border: var(--b); border-radius: 999px; box-shadow: var(--sh1); color: var(--c-ink); font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.faqt-qs a:hover { transform: translate(-2px, -2px); box-shadow: var(--sh2); }
.faqt-qs .faq-face { width: 2.4rem; height: 2.4rem; border-width: 2.5px; }
.faqt-qs .faq-face svg { width: 1.55rem; height: 1.55rem; }
.faqt .btn .ico { width: 1.2em; height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .faq-chev, .faqt-qs a { transition: none; } }
/* the Sprechstunde picture next to the page's header and the teaser (wide screens only) */
.faq-art img { width: 100%; height: auto; border: 4px solid var(--c-ink); border-radius: 18px; box-shadow: var(--sh2); }
.faq-head-art, .faqt-art { display: none; }
@media (min-width: 900px) {
  .faq-head { display: grid; grid-template-columns: minmax(0, 1fr) min(380px, 38%); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .faq-head > * { grid-column: 1; }
  .faq-head > .faq-kicker { justify-self: start; }
  .faq-head > .faq-head-art { display: block; grid-column: 2; grid-row: 1 / span 6; transform: rotate(1.5deg); }
  .faqt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 36%); column-gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .faqt-wrap > .faqt-art { display: block; grid-column: 2; grid-row: 1; transform: rotate(-1.5deg); }
  .faqt-wrap > .faqt-in { grid-column: 1; grid-row: 1; }
}