/*
+==============================================================================+
|   _   _   _____   _____   ____    ___  __  __                                |
|  | \ | | | ____| |_   _| |  _ \  |_ _| \ \/ /                                |
|  |  \| | |  _|     | |   | |_) |  | |   \  /                                 |
|  | |\  | | |___    | |   |  _ <   | |   /  \                                 |
|  |_| \_| |_____|   |_|   |_| \_\ |___| /_/\_\                                |
|                                                                              |
|  IT | WEB | SOFTWARE | DIGITAL SOLUTIONS                                     |
|  Engineered by NETRIX                                                        |
|  https://www.netrix.de/                                                      |
|                                                                              |
+==============================================================================+
|  Projekt   : Website Millberry                                               |
|  Datei     : src/static/css/main.css                                         |
|  Version   : 2.0.0                                                           |
|  Copyright : (c) 2026 Netrix GmbH                                            |
|              Alle Rechte vorbehalten.                                        |
+==============================================================================+
*/

/* =========================================================================
   Millberry – Designsystem
   Farben aus dem Logo · Oswald (Überschriften) · Lato (Text) · Bangers (Comic)
   Aufbau: 1 Fonts · 2 Tokens · 3 Basis · 4 Layout · 5 Header/Nav · 6 Hero
           7 Komponenten · 8 Inhalte (Prose, Comics, Reime) · 9 Spiele
           10 Footer · 11 Übergänge & Animationen · 12 Hilfsklassen
   ========================================================================= */

/* ---------- 1 Fonts (lokal, DSGVO-freundlich) ---------- */
@font-face { font-family: 'Oswald'; src: url('../fonts/oswald-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('../fonts/bangers.woff2') format('woff2'); font-display: swap; }

/* ---------- 2 Tokens ---------- */
:root {
  color-scheme: dark;
  --c-ink: #1a0413;
  --c-night: #12060f;
  --c-bg: #170811;
  --c-surface: #230a1c;
  --c-surface-2: #301029;
  --c-line: rgba(255, 243, 230, .13);
  --c-text: #fff3e6;
  --c-muted: #d9c3cf;
  --c-rasp: #e8336f;
  --c-rasp-light: #ff7aa5;
  --c-rasp-dark: #a3134a;
  --c-magenta: #ff2d95;
  --c-bb: #2f3354;
  --c-bb-light: #6170a8;
  --c-leaf: #c8e04e;
  --c-teal: #3fb3a0;
  --c-cyan: #4fd8e8;
  --c-gold: #ffc94a;
  --c-copper: #e08a4f;

  --f-head: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-comic: 'Bangers', Impact, 'Arial Black', sans-serif;

  --radius: 18px;
  --radius-s: 10px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --shadow-pop: 6px 6px 0 var(--c-ink);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --ease-out: cubic-bezier(.2, .9, .25, 1.15);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .95 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.0625rem/1.7 var(--f-body);
  color: var(--c-text);
  background:
    var(--grain),
    radial-gradient(1200px 600px at 85% -10%, rgba(232, 51, 111, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(97, 112, 168, .12), transparent 60%),
    var(--c-bg);
  background-attachment: fixed;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-rasp-light); text-decoration-thickness: .08em; text-underline-offset: .2em; }
@media (hover: hover) { a:hover { color: var(--c-leaf); } }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
::selection { background: var(--c-magenta); color: #fff; }
:focus-visible { outline: 3px solid var(--c-leaf); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
/* Touch: kein Doppeltipp-Zoom und keine Tipp-Verzögerung; Buttons ohne grauen Tipp-Blitz (eigenes :active-Feedback) */
a, button, input, select, label, summary, [role='button'] { touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--c-leaf); color: var(--c-ink); font-weight: 900; border-radius: var(--radius-s); text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4 Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.section { padding-block: clamp(56px, 9vw, 110px); position: relative; }
.section--tight { padding-block: clamp(36px, 6vw, 64px); }
.section--alt { background: linear-gradient(180deg, transparent, rgba(47, 51, 84, .22) 20%, rgba(47, 51, 84, .22) 80%, transparent); }
.grid { --gap: clamp(18px, 2.4vw, 30px); display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc((100% - 2 * var(--gap)) / 3))), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.3fr 1fr; align-items: start; } }
main { display: block; min-height: 60vh; }
/* Schräge/überstehende Deko (Ticker, schwebende Beeren) darf nicht seitlich überstehen – sonst wird die Seite auf dem Handy breiter.
   clip statt hidden: erzeugt keinen Scroll-Container, sticky bleibt intakt. */
main, .site-footer { overflow-x: clip; }

/* Abschnitts-Überschrift mit Saftstrich */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 4vw, 44px); }
.section-head h2 { margin: 0; }
.kicker { display: inline-block; font: 400 1.15rem/1 var(--f-comic); letter-spacing: .06em; color: var(--c-leaf); transform: rotate(-2deg); margin-bottom: .5rem; }
.juice-line { position: relative; display: inline-block; }
.juice-line::after {
  content: ''; position: absolute; left: -2%; right: -4%; bottom: -.12em; height: .32em; z-index: -1;
  background: var(--c-rasp); border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; transform: rotate(-1.2deg) scaleX(var(--juice, 1)); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
[data-reveal]:not(.is-visible) .juice-line::after { --juice: 0; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--c-muted); max-width: 62ch; }

/* ---------- 5 Header & Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid var(--c-line);
  view-transition-name: site-header;
}
/* Milchglas auf eigener Ebene: backdrop-filter direkt am Header würde ihn zum Bezugsrahmen
   für position:fixed machen – das Mobilmenü wäre dann nur so hoch wie der Header. */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(18, 6, 15, .78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); flex: none; }
.brand img { width: 54px; height: 54px; transition: transform .5s var(--ease-out); view-transition-name: brand-logo; }
@media (hover: hover) { .brand:hover img { transform: rotate(-12deg) scale(1.08); } }
.brand span { font: 400 1.6rem/1 var(--f-comic); letter-spacing: .04em; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; display: block; padding: 8px 12px; border-radius: 999px;
  font: 600 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--c-text);
  transition: color .2s, background .2s;
}
@media (hover: hover) { .nav__link:hover { background: rgba(255, 243, 230, .08); color: var(--c-text); } }
.nav__link[aria-current='page'] { background: var(--c-rasp); color: #fff; box-shadow: 3px 3px 0 var(--c-ink); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid transparent; color: var(--c-text); cursor: pointer; transition: background .2s, transform .2s;
}
@media (hover: hover) { .icon-btn:hover { background: rgba(255, 243, 230, .1); transform: rotate(-8deg); } }
.icon-btn .icon { width: 24px; height: 24px; }
.sound-toggle[aria-pressed='true'] { color: var(--c-leaf); }
.sound-toggle[aria-pressed='true'] .i-off, .sound-toggle[aria-pressed='false'] .i-on { display: none; }
.menu-btn { display: none; }

@media (max-width: 1020px) {
  .menu-btn { display: inline-grid; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0; z-index: 99;
    background: var(--grain), radial-gradient(circle at 80% 10%, rgba(255, 45, 149, .35), transparent 50%), var(--c-night);
    padding: 28px var(--gutter) 40px; overflow-y: auto;
    clip-path: circle(0 at calc(100% - 40px) -40px); visibility: hidden;
    transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s;
  }
  .nav.is-open { clip-path: circle(150% at calc(100% - 40px) -40px); visibility: visible; transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
  .nav__list { flex-direction: column; gap: 6px; }
  .nav__link { font-size: clamp(1.8rem, 8vw, 2.6rem); padding: 10px 6px; border-radius: 8px; opacity: 0; transform: translateX(-20px); transition: opacity .35s, transform .45s var(--ease-out); }
  .nav.is-open .nav__link { opacity: 1; transform: none; }
  .nav.is-open li:nth-child(2) .nav__link { transition-delay: .04s; }
  .nav.is-open li:nth-child(3) .nav__link { transition-delay: .08s; }
  .nav.is-open li:nth-child(4) .nav__link { transition-delay: .12s; }
  .nav.is-open li:nth-child(5) .nav__link { transition-delay: .16s; }
  .nav.is-open li:nth-child(6) .nav__link { transition-delay: .2s; }
  .nav.is-open li:nth-child(7) .nav__link { transition-delay: .24s; }
  .nav.is-open li:nth-child(8) .nav__link { transition-delay: .28s; }
  .nav__link[aria-current='page'] { box-shadow: none; background: none; color: var(--c-rasp-light); }
  .nav__mascot { display: block !important; width: 140px; margin: 24px 0 0 auto; transform: rotate(8deg); }
  .brand span { display: none; }
  body.menu-open { overflow: hidden; }
  /* Angetippter Menüpunkt bleibt sichtbar markiert, bis die neue Seite da ist */
  .nav.is-open .nav__link.is-loading { color: var(--c-leaf); transform: translateX(10px); }
  .nav__link.is-loading::after { content: ' …'; }
  /* Einwilligungs-Hinweis verdeckt sonst die unteren Menüpunkte (kommt nach dem Schließen wieder) */
  body.menu-open .consent { visibility: hidden; }
}
.nav__mascot { display: none; }

/* Lesefortschritt */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 101; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--c-leaf), var(--c-cyan), var(--c-magenta)); }

/* ---------- 6 Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92vh, 860px); display: grid; align-items: center; padding-block: 60px 90px;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translateY(calc(var(--scroll, 0) * 0.15px)); filter: saturate(1.1); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 6, 15, .2) 0%, rgba(18, 6, 15, .55) 55%, var(--c-bg) 100%), radial-gradient(ellipse at 30% 50%, rgba(18, 6, 15, .65), transparent 70%); }
.hero__inner { display: grid; gap: 24px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr .85fr; } }
.hero__title { margin: 0; white-space: nowrap; font-size: clamp(3rem, 8.4vw, 8rem); line-height: .9; letter-spacing: .02em; text-shadow: 5px 5px 0 var(--c-ink), 0 0 40px rgba(255, 45, 149, .45); }
.hero__title .ch { display: inline-block; animation: drop-in .8s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
.hero__claim { font: 400 clamp(1.5rem, 3.4vw, 2.3rem)/1.15 var(--f-comic); letter-spacing: .03em; color: var(--c-leaf); transform: rotate(-2deg); margin: 14px 0 18px; text-shadow: 3px 3px 0 var(--c-ink); }
.hero__text { max-width: 54ch; font-size: 1.15rem; color: var(--c-text); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__logo { position: relative; justify-self: center; width: min(78vw, 440px); aspect-ratio: 1; cursor: pointer; }
.hero__logo img { width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: bob 6s ease-in-out infinite; transform: perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .2s; }
.hero__logo-hint { position: absolute; right: 2%; bottom: 6%; font: 400 1.05rem/1.1 var(--f-comic); color: var(--c-text); background: var(--c-ink); padding: 6px 12px; border-radius: 14px; transform: rotate(6deg); border: 2px solid var(--c-rasp); }
.splat-counter { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 18px; font-size: .95rem; color: var(--c-muted); }
.splat-counter b { font: 400 1.4rem/1 var(--f-comic); color: var(--c-rasp-light); min-width: 2ch; }
@media (max-width: 899px) {
  .hero { padding-block: 28px 70px; }
  .hero__logo { order: -1; width: min(58vw, 300px); }
  .hero__logo-hint { font-size: .85rem; right: -6%; }
}
.float-berry { position: absolute; z-index: -1; width: var(--s, 70px); opacity: .9; animation: float 9s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }

/* Seitenkopf für Unterseiten */
.page-hero { position: relative; isolation: isolate; padding-block: clamp(48px, 8vw, 96px) clamp(36px, 6vw, 64px); overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 90% at 90% 0%, var(--hero-tint, rgba(232, 51, 111, .3)), transparent 70%); }
.page-hero__inner { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .page-hero__inner { grid-template-columns: 1fr auto; } }
.page-hero h1 { margin-bottom: .25em; }
.page-hero__art { width: clamp(140px, 22vw, 250px); justify-self: center; animation: bob 7s ease-in-out infinite; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0 0 16px; padding: 0; font-size: .9rem; color: var(--c-muted); }
.breadcrumbs li + li::before { content: '/'; margin-right: 10px; color: var(--c-rasp); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
@media (hover: hover) { .breadcrumbs a:hover { color: var(--c-leaf); } }

/* ---------- 7 Komponenten ---------- */
/* Buttons */
.btn {
  --bg: var(--c-rasp); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 3px solid var(--c-ink);
  background: var(--bg); color: var(--fg); font: 700 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--c-ink); transition: transform .18s var(--ease-out), box-shadow .18s, background .2s;
}
@media (hover: hover) { .btn:hover { color: var(--fg); transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 var(--c-ink); } }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--c-ink); }
.btn .icon { width: 20px; height: 20px; }
.btn--leaf { --bg: var(--c-leaf); --fg: var(--c-ink); }
.btn--cyan { --bg: var(--c-cyan); --fg: var(--c-ink); }
.btn--ghost { --bg: rgba(18, 6, 15, .5); --fg: var(--c-text); border-color: var(--c-text); box-shadow: none; }
@media (hover: hover) { .btn--ghost:hover { box-shadow: 4px 4px 0 var(--c-rasp); } }
.btn--small { padding: 9px 16px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Chips / Tags */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--c-line);
  font: 600 .78rem/1.3 var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text); text-decoration: none; background: rgba(255, 243, 230, .04);
  transition: background .2s, color .2s, transform .2s;
}
@media (hover: hover) { a.chip:hover, button.chip:hover { background: var(--c-leaf); color: var(--c-ink); transform: rotate(-3deg); } }
.chip--cat { background: var(--c-rasp); border-color: var(--c-ink); color: #fff; }
button.chip { cursor: pointer; }
button.chip[aria-pressed='true'] { background: var(--c-text); color: var(--c-ink); }

/* Karten */
.card {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); border: 1px solid var(--c-line);
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
@media (hover: hover) { .card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 24px 50px -20px rgba(232, 51, 111, .55); border-color: rgba(232, 51, 111, .6); } }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-night); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.06) rotate(.6deg); } }
.card__media--art { display: grid; place-items: center; background: var(--grain), radial-gradient(circle at 50% 60%, var(--tint, rgba(232, 51, 111, .35)), transparent 70%), var(--c-night); }
.card__media--art img { width: 38%; height: auto; object-fit: contain; transition: transform .6s var(--ease-out); }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.card__title { margin: 0; font-size: 1.35rem; }
.card__title a { color: var(--c-text); text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__text { color: var(--c-muted); margin: 0; font-size: .98rem; }
.card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--c-muted); }
.card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.card__meta .icon { width: 16px; height: 16px; }
.card .chips { position: relative; z-index: 2; }
.card__body > .chip { align-self: flex-start; }
.comic-card .card__media { aspect-ratio: 16 / 10; }

/* Rubrik-Kacheln */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 22px 14px 20px; border-radius: var(--radius);
  background: var(--c-surface); border: 2px solid var(--c-line); text-decoration: none; color: var(--c-text); overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .3s, background .3s;
}
.tile::before { content: ''; position: absolute; inset: auto -30% -60% -30%; height: 90%; background: var(--tint, var(--c-rasp)); opacity: .0; border-radius: 50%; transition: opacity .35s, transform .5s var(--ease-out); transform: translateY(30%); z-index: 0; }
.tile > * { position: relative; z-index: 1; }
.tile img { width: 76px; height: 76px; transition: transform .45s var(--ease-out); }
.tile strong { font: 700 1.2rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; }
.tile small { color: var(--c-muted); font-size: .85rem; line-height: 1.4; }
@media (hover: hover) { .tile:hover { color: var(--c-text); transform: translateY(-6px); border-color: var(--tint, var(--c-rasp)); } }
@media (hover: hover) { .tile:hover::before { opacity: .22; transform: none; } }
@media (hover: hover) { .tile:hover img { transform: rotate(-10deg) scale(1.12); animation: wiggle .5s ease-in-out; } }
.tile--soon small::after { content: ' · bald mehr'; color: var(--c-leaf); }

/* Ticker-Band */
.ticker { position: relative; z-index: 2; overflow: hidden; background: var(--c-magenta); color: var(--c-ink); border-block: 3px solid var(--c-ink); transform: rotate(-1.6deg); margin: -26px -10px 0; }
.ticker__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
@media (hover: hover) { .ticker:hover .ticker__track { animation-play-state: paused; } }
.ticker__item { display: flex; align-items: center; gap: 22px; padding: 10px 22px 10px 0; font: 400 1.35rem/1 var(--f-comic); letter-spacing: .05em; white-space: nowrap; }
.ticker__item img { width: 26px; height: 26px; }

/* CTA-Banner */
.cta {
  position: relative; isolation: isolate; display: grid; gap: 18px 30px; align-items: center; grid-template-columns: 1fr; overflow: hidden;
  padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--radius) + 6px); border: 3px solid var(--c-ink); box-shadow: 8px 8px 0 var(--c-ink);
  background: var(--grain), linear-gradient(120deg, var(--cta-a, var(--c-rasp)), var(--cta-b, var(--c-magenta)));
  color: #fff;
}
@media (min-width: 720px) { .cta { grid-template-columns: auto 1fr auto; } }
.cta__art { width: clamp(100px, 14vw, 150px); margin-block: -14px; animation: bob 5s ease-in-out infinite; }
.cta h2, .cta h3 { margin: 0 0 6px; font-size: clamp(1.6rem, 3.2vw, 2.4rem); text-shadow: 3px 3px 0 var(--c-ink); }
.cta p { margin: 0; font-size: 1.06rem; max-width: 56ch; }
.cta .btn { --bg: var(--c-text); --fg: var(--c-ink); white-space: nowrap; }
.cta--leaf { --cta-a: #7da82d; --cta-b: #3fb3a0; }
.cta--bb { --cta-a: #2f3354; --cta-b: #6170a8; }
.cta--cyan { --cta-a: #1d8fa0; --cta-b: #3fb3a0; }
.cta::after { content: ''; position: absolute; z-index: -1; right: -60px; top: -60px; width: 260px; height: 260px; background: rgba(255, 255, 255, .14); -webkit-mask: url('../img/illus/spritzer-3.svg') center / contain no-repeat; mask: url('../img/illus/spritzer-3.svg') center / contain no-repeat; }

/* Mini-Banner (in Artikeln, Seitenleiste) */
.mini-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius); border: 2px dashed rgba(200, 224, 78, .55); background: rgba(200, 224, 78, .06); text-decoration: none; color: var(--c-text); transition: transform .3s var(--ease-out), background .3s; }
@media (hover: hover) { .mini-banner:hover { color: var(--c-text); background: rgba(200, 224, 78, .14); transform: rotate(-.6deg) scale(1.01); } }
.mini-banner img { width: 64px; flex: none; }
.mini-banner strong { display: block; font: 700 1.1rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .04em; }
.mini-banner span { color: var(--c-muted); font-size: .95rem; }

/* Sprechblase */
.bubble { position: relative; display: inline-block; padding: 10px 16px; background: var(--c-text); color: var(--c-ink); border: 3px solid var(--c-ink); border-radius: 18px; font: 400 1.15rem/1.2 var(--f-comic); letter-spacing: .04em; box-shadow: 4px 4px 0 var(--c-ink); }
.bubble::after { content: ''; position: absolute; left: 24px; bottom: -14px; width: 20px; height: 16px; background: inherit; border: 3px solid var(--c-ink); border-top: 0; border-left: 0; transform: skewX(-30deg) rotate(10deg); clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* Release / Player */
.release { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .release { grid-template-columns: minmax(260px, 420px) 1fr; } }
.release__cover { position: relative; border-radius: var(--radius); overflow: visible; }
.release__cover img { border-radius: var(--radius); box-shadow: var(--shadow), 10px 10px 0 var(--c-ink); position: relative; z-index: 1; }
.release__cover .vinyl { position: absolute; z-index: 0; top: 4%; right: -14%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--c-rasp) 0 14%, var(--c-ink) 14.5% 16%, #1c0a17 16.5%, #2a1424 30%, #1c0a17 31%, #2a1424 46%, #1c0a17 47%, #241020 70%, #12060f 71%);
  transition: transform .8s var(--ease-out); }
.release.is-playing .vinyl { transform: translateX(16%) rotate(180deg); }
@media (hover: hover) { .release:hover .vinyl { transform: translateX(16%) rotate(180deg); } }
.release.is-playing .vinyl { animation: spin 2.4s linear infinite; }
.release > div:last-child { position: relative; z-index: 2; }
.release__title { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); }
.release__sub { font: 400 1.4rem/1 var(--f-comic); color: var(--c-leaf); letter-spacing: .05em; margin: 4px 0 16px; }
.player { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius); background: rgba(18, 6, 15, .7); border: 1px solid var(--c-line); margin: 20px 0; }
.player__row { display: flex; align-items: center; gap: 14px; }
.player__btn { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--c-ink); background: var(--c-leaf); color: var(--c-ink); cursor: pointer; box-shadow: 3px 3px 0 var(--c-ink); transition: transform .2s var(--ease-out); flex: none; }
@media (hover: hover) { .player__btn:hover { transform: scale(1.08) rotate(-6deg); } }
.player__btn .icon { width: 26px; height: 26px; }
.player__btn[disabled] { background: var(--c-surface-2); color: var(--c-muted); cursor: not-allowed; transform: none; }
.player__viz { flex: 1; height: 58px; min-width: 0; }
.player__time { font: 600 .9rem/1 var(--f-head); color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 88px; text-align: right; }
.player__progress { width: 100%; accent-color: var(--c-rasp); }
.player__note { font-size: .92rem; color: var(--c-muted); margin: 0; }
.streams { display: flex; flex-wrap: wrap; gap: 10px; }

/* Teilen */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 0; border-top: 1px solid var(--c-line); margin-top: 40px; }
.share strong { font: 700 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 140%); padding: 12px 20px; border-radius: 18px; background: var(--c-leaf); color: var(--c-ink); font-weight: 900; width: max-content; border: 3px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink); transition: transform .4s var(--ease-out); max-width: calc(100% - 32px); text-align: center; }
.toast.is-visible { transform: translate(-50%, 0); }

/* Einwilligung Besucherstatistik – unten, blockiert nichts; „Nein“ und „Okay“ gleich gewichtet */
.consent {
  position: fixed; left: 50%; bottom: 16px; z-index: 250; width: min(760px, calc(100% - 24px));
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center;
  padding: 14px 18px; border: 3px solid var(--c-ink); border-radius: var(--radius); background: var(--c-surface);
  box-shadow: 8px 8px 0 var(--c-ink); transform: translate(-50%, 30px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s;
}
.consent.is-open { transform: translate(-50%, 0); opacity: 1; }
.consent__art { width: 64px; height: auto; grid-row: span 2; transform: rotate(-8deg); }
.consent__title { font-size: 1.15rem; margin: 0 0 4px; text-transform: none; }
.consent__body p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--c-muted); }
.consent__body a { color: var(--c-rasp-light); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.consent__btn { --bg: var(--c-surface-2); --fg: var(--c-text); border-color: var(--c-text); min-width: 9.5em; justify-content: center; }
@media (max-width: 560px) {
  .consent { grid-template-columns: 1fr; bottom: 10px; padding: 14px; }
  .consent__art { display: none; }
  .consent__actions { justify-content: stretch; }
  .consent__btn { flex: 1; }
}
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--c-text); cursor: pointer; text-align: left; }
@media (hover: hover) { .link-btn:hover { color: var(--c-leaf); } }

/* Impressum-Kopf: Millberry vorneweg */
.legal-brand { display: flex; gap: 22px; align-items: center; padding: 20px 24px; margin-bottom: 8px; border: 2px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); }
.legal-brand img { width: 110px; height: auto; flex: none; }
.legal-brand__name { margin: 0; font: 400 2.2rem/1 var(--f-comic); letter-spacing: .04em; color: var(--c-text) !important; }
.legal-brand__text { margin: 4px 0 10px; }
@media (max-width: 520px) { .legal-brand { flex-direction: column; align-items: flex-start; } .legal-brand img { width: 84px; } }

/* Kontaktformular */
.form { display: grid; gap: 18px; padding: clamp(18px, 4vw, 32px); border: 3px solid var(--c-ink); border-radius: var(--radius); background: var(--c-surface); box-shadow: 8px 8px 0 var(--c-ink); }
.form__intro, .form__privacy { margin: 0; color: var(--c-muted); font-size: .92rem; }
.form__privacy a { color: var(--c-text); }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field label { font: 600 1rem/1.3 var(--f-head); letter-spacing: .02em; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 2px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-night); color: var(--c-text); font: 400 1rem/1.45 var(--f-body); transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 9em; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); opacity: .7; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--c-leaf); box-shadow: 4px 4px 0 var(--c-rasp); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--c-rasp-light); }
.field__hint { margin: 0; color: var(--c-muted); font-size: .85rem; }
.field__error { margin: 0; color: var(--c-rasp-light); font-size: .9rem; font-weight: 700; }
.field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.form__status { margin: 0; font-weight: 700; }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--c-rasp-light); }
.form__status.is-ok { color: var(--c-leaf); }
.form.is-sent .field, .form.is-sent .field-row, .form.is-sent .form__intro, .form.is-sent .form__privacy, .form.is-sent [data-submit] { display: none; }
.form.is-sent .form__status { font: 400 clamp(1.4rem, 4vw, 2rem)/1.2 var(--f-comic); letter-spacing: .03em; }

/* Suche */
.search-dialog { width: min(680px, calc(100% - 24px)); max-height: min(80vh, 720px); padding: 0; border: 3px solid var(--c-ink); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); box-shadow: 10px 10px 0 var(--c-ink); margin-top: 10vh; }
.search-dialog::backdrop { background: rgba(18, 6, 15, .75); backdrop-filter: blur(6px); }
.search-dialog[open] { animation: pop-in .35s var(--ease-out); }
.search-dialog__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--c-line); }
.search-dialog__head .icon { width: 26px; height: 26px; color: var(--c-rasp-light); }
.search-dialog input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--c-text); font: 500 1.3rem/1.2 var(--f-body); padding: 8px 0; }
.search-dialog input:focus { outline: none; }
.search-results { list-style: none; margin: 0; padding: 8px; max-height: 56vh; overflow-y: auto; }
.search-results a { display: block; padding: 12px 14px; border-radius: var(--radius-s); text-decoration: none; color: var(--c-text); }
.search-results a:focus { background: var(--c-surface-2); outline: none; }
@media (hover: hover) { .search-results a:hover { background: var(--c-surface-2); outline: none; } }
.search-results small { display: block; color: var(--c-muted); font-size: .88rem; }
.search-results .chip { margin-right: 8px; padding: 2px 8px; font-size: .68rem; }
.search-empty { padding: 26px 18px; color: var(--c-muted); text-align: center; }
.search-empty img { width: 90px; margin: 0 auto 10px; }

/* Klick-Spritzer */
.splat { position: absolute; z-index: 5; width: var(--size, 120px); aspect-ratio: 1; pointer-events: none; background: var(--color, var(--c-rasp)); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0); animation: splat 2.6s var(--ease-out) forwards; }
.splat-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }

/* 2-Klick-Einbettung */
.embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--c-night); border: 2px solid var(--c-line); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; background: var(--grain), radial-gradient(circle, rgba(232, 51, 111, .3), transparent 70%); }
.embed__consent p { max-width: 46ch; font-size: .92rem; color: var(--c-muted); margin: 0; }

/* ---------- 8 Inhalte ---------- */
.prose { font-size: clamp(1.06rem, 1.3vw, 1.16rem); line-height: 1.8; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2em; text-transform: none; color: var(--c-text); }
.prose h2::before { content: ''; display: block; width: 46px; height: 6px; margin-bottom: 14px; border-radius: 4px; background: var(--c-rasp); transform: rotate(-3deg); }
.prose h3 { margin-top: 1.6em; color: var(--c-rasp-light); }
.prose blockquote { margin: 1.8em 0; padding: 18px 26px; border-left: 6px solid var(--c-leaf); background: rgba(200, 224, 78, .06); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-style: italic; font-size: 1.12em; }
.prose blockquote p + p { margin-top: .6em; }
.prose .lede::first-letter, .prose > p:first-of-type::first-letter { float: left; font: 400 4.2em/.8 var(--f-comic); color: var(--c-rasp); margin: .08em .12em 0 0; text-shadow: 3px 3px 0 var(--c-ink); }
/* Initiale als Kachel – für schmale Buchstaben (I, J, l), die als freie Bangers-Initiale kaum lesbar sind */
.prose .lede.lede--kachel::first-letter { font: 700 3em/.9 var(--f-head); padding: .14em .3em .06em; margin: .1em .2em 0 0; color: var(--c-text); background: var(--c-rasp); border: 3px solid var(--c-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--c-ink); text-shadow: 2px 2px 0 var(--c-ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li::marker { color: var(--c-rasp); }
.prose img { border-radius: var(--radius); }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: .9rem; color: var(--c-muted); margin-top: 8px; text-align: center; }
.prose hr { border: 0; height: 40px; background: url('../img/illus/ranke.svg') center / 260px auto no-repeat; margin: 2.4em 0; }
.prose .note { font-size: .9rem; color: var(--c-muted); }
.prose strong { color: #fff; }
.post-head { text-align: left; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; color: var(--c-muted); font-size: .95rem; margin: 18px 0 0; }
.post-meta span { display: inline-flex; gap: 6px; align-items: center; }
.post-meta .icon { width: 18px; height: 18px; color: var(--c-rasp-light); }
.post-cover { margin: 0 0 clamp(28px, 4vw, 48px); }
.post-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow), 8px 8px 0 var(--c-ink); }
.post-nav { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; padding: 18px 20px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); text-decoration: none; color: var(--c-text); transition: border-color .3s, transform .3s var(--ease-out); }
@media (hover: hover) { .post-nav a:hover { border-color: var(--c-rasp); transform: translateY(-3px); } }
.post-nav small { display: block; color: var(--c-leaf); font: 600 .8rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.post-nav .next { text-align: right; }
.author-box { display: flex; gap: 18px; align-items: center; padding: 20px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); margin-top: 30px; }
.author-box img { width: 84px; flex: none; }
.author-box p { margin: 0; color: var(--c-muted); font-size: .98rem; }
.author-box strong { color: var(--c-text); font-family: var(--f-head); letter-spacing: .04em; text-transform: uppercase; }

/* Reime */
.poem { position: relative; padding: clamp(26px, 5vw, 50px); border-radius: 6px; background: var(--grain), #fbf1e4; color: var(--c-ink); box-shadow: var(--shadow), 8px 8px 0 var(--c-rasp); transform: rotate(-.6deg); }
.poem::before { content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(2deg); background: rgba(200, 224, 78, .75); }
.poem h1, .poem h2 { color: var(--c-ink); text-transform: none; font-family: var(--f-comic); font-weight: 400; letter-spacing: .03em; }
.poem__text { font: 400 clamp(1.15rem, 2vw, 1.35rem)/1.75 var(--f-body); font-style: italic; white-space: pre-line; }
.poem__text p { margin: 0 0 1.1em; }
.poem__sign { text-align: right; font: 400 1.2rem/1 var(--f-comic); color: var(--c-rasp-dark); margin-top: 20px; }
.poem-card { display: block; padding: 24px; border-radius: 6px; background: #fbf1e4; color: var(--c-ink); text-decoration: none; box-shadow: 6px 6px 0 var(--c-rasp); transform: rotate(var(--tilt, -1deg)); transition: transform .35s var(--ease-out); position: relative; }
.poem-card:nth-child(2n) { --tilt: 1.2deg; box-shadow: 6px 6px 0 var(--c-cyan); }
.poem-card:nth-child(3n) { --tilt: -.4deg; box-shadow: 6px 6px 0 var(--c-leaf); }
@media (hover: hover) { .poem-card:hover { color: var(--c-ink); transform: rotate(0) scale(1.03); } }
.poem-card h3 { font: 400 1.6rem/1.1 var(--f-comic); letter-spacing: .03em; margin-bottom: 10px; }
.poem-card p { font-style: italic; margin: 0; white-space: pre-line; color: #4a2a3c; }
.poem-card .more { display: inline-block; margin-top: 14px; font: 700 .85rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--c-rasp-dark); }

/* Comics */
.comic { display: grid; gap: clamp(8px, 2vw, 14px); grid-template-columns: 1fr; padding: clamp(8px, 2vw, 14px); background: var(--c-text); border: 4px solid var(--c-ink); border-radius: 8px; box-shadow: 10px 10px 0 var(--c-rasp); }
@media (min-width: 720px) { .comic { grid-template-columns: 1fr 1fr; } }
/* Panels skalieren als Ganzes: Positionen in %, Schrift/Abstände in cqw (Panelbreite).
   Dadurch bricht der Text auf jedem Gerät gleich um und Blasen bleiben dort, wo sie geprüft wurden (npm run test:comics). */
.panel {
  position: relative; margin: 0; aspect-ratio: 4 / 3.2; overflow: hidden; border: 4px solid var(--c-ink); border-radius: 4px; container-type: inline-size;
  background: radial-gradient(circle, rgba(26, 4, 19, .14) 1.4px, transparent 1.8px) 0 0 / 12px 12px, var(--panel-bg, #ffd7e5);
}
.panel__char { position: absolute; bottom: -4%; width: var(--w, 46%); left: var(--x, 30%); filter: drop-shadow(.8cqw 1.2cqw 0 rgba(26, 4, 19, .25)); }
.panel__char--flip { transform: scaleX(-1); }
.panel__prop { position: absolute; width: var(--w, 30%); left: var(--x, 0); bottom: var(--y, 4%); }
.panel .bubble {
  position: absolute; top: var(--y, 6%); left: var(--x, 6%); width: max-content; max-width: var(--bw, 60%); z-index: 2;
  padding: 1.7cqw 2.6cqw; border-radius: 3.4cqw; font-size: 4.6cqw; line-height: 1.12; box-shadow: .8cqw .8cqw 0 var(--c-ink);
}
/* Schwanz: --tx = Abstand vom linken Blasenrand zur Kopfmitte der sprechenden Figur (in Panelbreite, vom Template berechnet) */
.panel .bubble::after { left: clamp(1.6cqw, calc(var(--tx, 6) * 1cqw - 2cqw), calc(100% - 5.6cqw)); bottom: -2.8cqw; width: 4cqw; height: 3.2cqw; }
.panel .bubble--lean-right::after { transform: skewX(30deg) rotate(-10deg) scaleX(-1); }
.panel .bubble--shout { background: var(--c-leaf); }
.panel .caption { position: absolute; top: 0; left: 0; z-index: 2; padding: .9cqw 1.8cqw; background: var(--c-gold); color: var(--c-ink); border-right: 3px solid var(--c-ink); border-bottom: 3px solid var(--c-ink); font: 400 3.2cqw/1.2 var(--f-comic); letter-spacing: .05em; }
.panel__fx { position: absolute; z-index: 3; font: 400 7cqw/1 var(--f-comic); color: var(--c-magenta); -webkit-text-stroke: .45cqw var(--c-ink); transform: rotate(-12deg); left: var(--x, 70%); top: var(--y, 4%); }
.comic-card .card__media { aspect-ratio: 4 / 3; background: radial-gradient(circle, rgba(26, 4, 19, .14) 1.4px, transparent 1.8px) 0 0 / 12px 12px, #ffd7e5; }
.comic-card .card__media img { object-fit: contain; padding: 10px 0 0; }

/* Über – Crew */
/* Lexikoneintrag „Millberry“ (Über-Seite): Kupfer statt Gold */
.lexikon { position: relative; padding: 22px 26px 22px 30px; border: 3px solid var(--c-ink); border-left: 10px solid var(--c-copper); border-radius: var(--radius-s); background: linear-gradient(120deg, var(--c-surface) 60%, rgba(224, 138, 79, .16)); box-shadow: 8px 8px 0 var(--c-ink); }
.lexikon__wort { margin: 0; font: 400 clamp(1.9rem, 5vw, 2.6rem)/1 var(--f-comic); letter-spacing: .05em; color: var(--c-copper); }
.lexikon__art { font: italic 400 1rem/1 var(--f-body); letter-spacing: 0; color: var(--c-muted); }
.lexikon__def { margin: 10px 0 0; font: 600 clamp(1.1rem, 2.4vw, 1.3rem)/1.4 var(--f-head); }

/* Chronik (Über-Seite): Zeitstrahl mit Comic-Daten */
.chronik { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 4px solid var(--c-rasp); display: grid; gap: 22px; }
.chronik__item { position: relative; }
.chronik__item::before { content: ''; position: absolute; left: -40px; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--c-rasp); border: 3px solid var(--c-ink); box-shadow: 2px 2px 0 var(--c-ink); }
.chronik__item:nth-child(even)::before { background: var(--c-bb-light); }
.chronik__wann { display: block; font: 400 1.5rem/1.1 var(--f-comic); letter-spacing: .04em; color: var(--c-leaf); }
.chronik__item p { margin: 4px 0 0; }
.crew { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.crew__member { position: relative; padding: 18px 18px 22px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); text-align: center; transition: transform .35s var(--ease-out); }
@media (hover: hover) { .crew__member:hover { transform: rotate(-1.5deg) translateY(-4px); } }
.crew__member img { width: 150px; margin: -6px auto 6px; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .crew__member:hover img { transform: scale(1.08) rotate(4deg); } }
.crew__member h3 { margin: 0; text-transform: uppercase; }
.crew__role { font: 400 1.1rem/1.2 var(--f-comic); color: var(--c-leaf); letter-spacing: .04em; margin: 2px 0 8px; }
.crew__member p { color: var(--c-muted); margin: 0; font-size: .96rem; }
.values { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: v; }
.value { padding: 22px; border-radius: var(--radius); border: 2px solid var(--c-ink); background: var(--c-surface-2); box-shadow: 6px 6px 0 var(--c-ink); }
.value::before { counter-increment: v; content: '0' counter(v); display: block; font: 400 2.4rem/1 var(--f-comic); color: var(--c-rasp); margin-bottom: 6px; }
.values--plain .value::before { display: none; }
.value h3 { margin: 0 0 6px; text-transform: uppercase; }
.value p { margin: 0; color: var(--c-muted); }
.faq details { border-bottom: 1px solid var(--c-line); padding: 14px 0; }
.faq summary { cursor: pointer; font: 600 1.15rem/1.3 var(--f-head); letter-spacing: .02em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.8rem/1 var(--f-comic); color: var(--c-rasp); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 10px 0 4px; color: var(--c-muted); }

/* Rechtstexte */
.legal h2 { font-size: 1.4rem; text-transform: none; margin-top: 2em; }
.legal h3 { font-size: 1.12rem; margin-top: 1.4em; }
.legal p, .legal li { color: var(--c-muted); }
.legal address { font-style: normal; }
.todo { background: rgba(255, 201, 74, .18); color: var(--c-gold); padding: 0 6px; border-radius: 4px; border: 1px dashed var(--c-gold); font-weight: 700; }

/* ---------- 9 Spiele ---------- */
.game-shell { position: relative; border-radius: calc(var(--radius) + 4px); border: 3px solid var(--c-ink); box-shadow: 8px 8px 0 var(--c-ink); background: var(--c-night); overflow: hidden; }
.game-shell canvas { width: 100%; height: auto; touch-action: none; cursor: none; }
/* Spielflächen: schnelles Tippen markiert keinen Text und öffnet kein Bildmenü (Langdruck auf Android) */
.game-shell, .bingo, .whack, .tuer__stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.game-shell img, .whack img, .bingo img { -webkit-user-drag: none; pointer-events: none; }
.game-hud { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--c-surface-2); border-bottom: 3px solid var(--c-ink); font: 600 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
.game-hud b { font: 400 1.4rem/1 var(--f-comic); color: var(--c-leaf); margin-left: 6px; }
.game-overlay { position: absolute; inset: 52px 0 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; background: rgba(18, 6, 15, .82); backdrop-filter: blur(3px); }
.game-overlay[hidden] { display: none; }
.game-overlay h2 { margin: 0; font-family: var(--f-comic); font-weight: 400; letter-spacing: .04em; }
.game-overlay p { margin: 0; max-width: 46ch; color: var(--c-muted); }
.game-overlay img { width: 110px; }
.game-help { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 26px; }
.game-help div { padding: 16px; border-radius: var(--radius-s); background: var(--c-surface); border: 1px solid var(--c-line); font-size: .95rem; color: var(--c-muted); }
.game-help strong { display: block; color: var(--c-text); font-family: var(--f-head); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }

/* Beat-Beere */
.seq { padding: 16px; display: grid; gap: 10px; }
.seq__row { display: grid; grid-template-columns: 92px repeat(16, 1fr); gap: 5px; align-items: center; }
.seq__label { font: 700 .82rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); text-align: left; background: none; border: 0; cursor: pointer; padding: 6px 0; }
@media (hover: hover) { .seq__label:hover { color: var(--c-leaf); } }
.seq__cell { aspect-ratio: 1; min-width: 0; border-radius: 30%; border: 2px solid var(--c-ink); background: var(--c-surface-2); cursor: pointer; padding: 0; transition: transform .1s, background .15s; }
.seq__cell:nth-child(4n + 2) { background: #3a1532; }
.seq__cell[aria-pressed='true'] { background: var(--row-c, var(--c-rasp)); box-shadow: 0 0 12px var(--row-c, var(--c-rasp)); }
.seq__cell:active { transform: scale(.86); }
.seq__cell.is-now { transform: scale(1.18); outline: 2px solid var(--c-text); }
.seq__controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border-top: 3px solid var(--c-ink); background: var(--c-surface); }
.seq__controls label { display: inline-flex; align-items: center; gap: 8px; font: 600 .9rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; }
.seq__controls input[type=range] { accent-color: var(--c-leaf); width: 120px; }
.seq__controls select { background: var(--c-surface-2); color: var(--c-text); border: 2px solid var(--c-line); border-radius: 8px; padding: 6px 10px; font: inherit; }
@media (max-width: 640px) {
  .seq__row { grid-template-columns: 58px repeat(8, 1fr); }
  .seq__row .seq__cell:nth-child(n + 10) { display: none; }
  .seq--page2 .seq__row .seq__cell:nth-child(n + 10) { display: block; }
  .seq--page2 .seq__row .seq__cell:nth-child(-n + 9):not(.seq__label) { display: none; }
  .seq__pager { display: inline-flex !important; }
}
.seq__pager { display: none; }

/* Bingo */
.bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px; }
.bingo button { aspect-ratio: 1; min-width: 0; padding: 4px; border-radius: 10px; border: 2px solid var(--c-ink); background: var(--c-text); color: var(--c-ink); font: 700 clamp(.6rem, 2.5vw, .9rem)/1.15 var(--f-body); cursor: pointer; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; transition: transform .15s, background .2s; position: relative; }
@media (hover: hover) { .bingo button:hover { transform: rotate(-2deg) scale(1.03); } }
.bingo button[aria-pressed='true'] { background: var(--c-rasp); color: #fff; }
.bingo button:active { transform: scale(.94); }
.bingo button[aria-pressed='true']::after { content: ''; position: absolute; inset: 10%; background: rgba(255, 255, 255, .25); -webkit-mask: url('../img/illus/spritzer-1.svg') center / contain no-repeat; mask: url('../img/illus/spritzer-1.svg') center / contain no-repeat; }
.bingo .free { background: var(--c-leaf); }
.bingo.is-win button[aria-pressed='true'] { animation: wiggle .5s ease-in-out 3; }

/* Ehrlich-O-Mat */
.oracle { display: grid; gap: 24px; justify-items: center; text-align: center; padding: clamp(24px, 5vw, 50px); }
.oracle__machine { position: relative; width: min(100%, 560px); padding: 26px; border-radius: 28px; border: 4px solid var(--c-ink); background: linear-gradient(180deg, var(--c-rasp), var(--c-rasp-dark)); box-shadow: 8px 8px 0 var(--c-ink); }
.oracle__screen { min-height: 150px; display: grid; place-items: center; padding: 20px; border-radius: 16px; border: 4px solid var(--c-ink); background: #0d1f22; color: var(--c-cyan); font: 400 clamp(1.25rem, 3vw, 1.7rem)/1.3 var(--f-comic); letter-spacing: .04em; text-shadow: 0 0 10px rgba(79, 216, 232, .6); }
.oracle__screen.is-rolling { animation: flicker .12s steps(2) infinite; }
.oracle__lever { margin-top: 18px; }
.oracle__cats { justify-content: center; }

/* Dach-O-Meter */
.dach { margin: 2.2em 0; padding: 22px; border-radius: var(--radius); border: 3px solid var(--c-ink); background: var(--c-surface); box-shadow: 6px 6px 0 var(--c-ink); }
.dach h3 { margin-top: 0; color: var(--c-text); }
.dach__stage { position: relative; display: grid; place-items: end center; padding-top: 10px; }
.dach__stage svg { width: min(100%, 520px); height: auto; overflow: visible; }
.dach__roof { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s var(--ease-out); }
.dach__payers { display: flex; justify-content: center; gap: 4px; margin-top: 8px; min-height: 40px; }
.dach__payers img { width: 34px; transition: transform .3s var(--ease-out); }
.dach input[type=range] { width: 100%; accent-color: var(--c-rasp); }
.dach__out { font: 400 1.25rem/1.3 var(--f-comic); color: var(--c-leaf); letter-spacing: .04em; min-height: 2.6em; text-align: center; }

/* KI-Türsteher (Essay „Zwei-Klassen-KI-Gesellschaft“) */
.tuer { margin: 2.2em 0; padding: 22px; border-radius: var(--radius); border: 3px solid var(--c-ink); background: var(--c-surface); box-shadow: 6px 6px 0 var(--c-ink); }
.tuer h3 { margin-top: 0; color: var(--c-text); }
.tuer__intro { margin: 0 0 12px; }
.tuer__stage { position: relative; aspect-ratio: 2 / 1; max-width: 560px; margin: 0 auto 16px; border-radius: var(--radius-s); border: 3px solid var(--c-ink); overflow: hidden; background: radial-gradient(circle at 16% 60%, rgba(255, 201, 74, .38), transparent 42%), var(--c-night); }
.tuer__door { position: absolute; left: 4%; bottom: -4%; width: 24%; height: 76%; border: 4px solid var(--c-ink); border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 38%, var(--c-text) 0, var(--c-gold) 30%, var(--c-rasp) 82%); box-shadow: 0 0 40px rgba(255, 201, 74, .5); }
.tuer__door span { position: absolute; left: 50%; top: -30%; translate: -50% 0; rotate: -3deg; white-space: nowrap; font: 400 clamp(.95rem, 3vw, 1.5rem)/1 var(--f-comic); letter-spacing: .06em; color: var(--c-text); text-shadow: 0 0 6px var(--c-cyan), 0 0 16px var(--c-cyan); }
.tuer__rope { position: absolute; left: 27%; bottom: 0; width: 34%; }
.tuer__bouncer { position: absolute; left: 31%; bottom: 2%; width: 26%; transition: translate .5s var(--ease-out), scale .5s var(--ease-out); }
.tuer__guest { position: absolute; left: 70%; bottom: 2%; width: 24%; transition: translate .9s var(--ease-out), scale .9s var(--ease-out), opacity .9s, rotate .4s; }
.tuer__stage.is-knock .tuer__guest { animation: wiggle .3s 2; }
.tuer__stage.is-in .tuer__bouncer { translate: 0 -6%; scale: .9; }
.tuer__stage.is-in .tuer__guest { translate: -255% 0; scale: .75; opacity: 0; }
.tuer__stage.is-wait .tuer__guest { translate: -45% 0; }
.tuer__stage.is-out .tuer__guest { translate: 10% 0; rotate: 8deg; }
.tuer__stamp { position: absolute; right: 4%; top: 8%; padding: 4px 12px; border: 4px solid currentColor; border-radius: 8px; background: var(--c-night); font: 400 clamp(1.1rem, 3.4vw, 1.8rem)/1 var(--f-comic); letter-spacing: .08em; rotate: -10deg; animation: stamp-in .45s var(--ease-out) both; }
[data-result='in'] .tuer__stamp { color: var(--c-leaf); }
[data-result='wait'] .tuer__stamp { color: var(--c-gold); }
[data-result='out'] .tuer__stamp { color: var(--c-rasp-light); }
.tuer__controls { display: grid; gap: 14px; }
.tuer__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.tuer__group legend { padding: 0; margin-bottom: 8px; font: 700 .85rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--c-rasp-light); }
.tuer__actions { margin: 18px 0 8px; }
.tuer__verdict { margin: 0; min-height: 2.6em; font: 400 1.25rem/1.3 var(--f-comic); letter-spacing: .04em; color: var(--c-leaf); }
.tuer__meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 10px; font: 600 .8rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.tuer__meter[hidden] { display: none; }
.tuer__bar { height: 14px; border: 2px solid var(--c-ink); border-radius: 99px; background: var(--c-night); overflow: hidden; }
.tuer__bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--c-rasp), var(--c-leaf)); transition: width .9s var(--ease-out); }
.tuer__meter b { min-width: 4ch; text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; }

/* Essay-Grafiken: Müll-Tonne, Tickets, Lautstärke, Merksatz */
.muell__stage { position: relative; aspect-ratio: 16 / 10; max-width: 560px; margin-inline: auto; border-radius: var(--radius); border: 3px solid var(--c-ink); overflow: hidden; background: radial-gradient(circle at 50% 90%, rgba(97, 112, 168, .5), transparent 60%), var(--c-surface); box-shadow: 6px 6px 0 var(--c-ink); }
.prose .muell__tonne { position: absolute; left: 50%; bottom: 3%; width: 30%; translate: -50% 0; border-radius: 0; }
.muell__tag { position: absolute; left: var(--x); top: var(--y); max-width: 36%; padding: 5px 10px; border: 2px solid var(--c-ink); border-radius: 8px; background: var(--c-text); color: var(--c-ink); font: 400 clamp(.78rem, 2.4vw, 1.1rem)/1.1 var(--f-comic); letter-spacing: .03em; box-shadow: 3px 3px 0 var(--c-ink); rotate: var(--r); }
.muell.is-visible .muell__tag { animation: muell-pop .7s var(--ease-out) both, bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * 140ms), calc(var(--i) * 140ms + .7s); }
.muell__turbo { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; rotate: -8deg; padding: 3px 10px; border: 3px solid var(--c-ink); border-radius: 8px; background: var(--c-rasp); color: var(--c-text); font: 400 clamp(.9rem, 2.6vw, 1.25rem)/1 var(--f-comic); letter-spacing: .06em; box-shadow: 3px 3px 0 var(--c-ink); animation: turbo 1.1s ease-in-out infinite; }
@keyframes muell-pop { from { opacity: 0; transform: translateY(50px) scale(.2); } }
@keyframes turbo { 50% { scale: 1.12; } }
@keyframes stamp-in { from { opacity: 0; scale: 2.4; } }

.tickets { display: grid; gap: 22px; margin: 2.2em 0; }
@media (min-width: 640px) { .tickets { grid-template-columns: 1fr 1fr; } }
.ticket { position: relative; padding: 18px 20px 54px; border: 3px solid var(--c-ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--c-ink); color: var(--c-ink); }
.ticket--gold { background: var(--c-gold); rotate: -1.2deg; }
.ticket--grau { background: var(--c-muted); rotate: 1deg; }
.ticket__kicker { display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 3px dashed var(--c-ink); font: 400 1.15rem/1 var(--f-comic); letter-spacing: .08em; }
.ticket__title { display: block; margin-bottom: 10px; font: 700 1.3rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.ticket dl { display: grid; gap: 6px; margin: 0; font-size: .95rem; line-height: 1.3; }
.ticket dl div { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; }
.ticket dt { font-weight: 900; }
.ticket dd { margin: 0; }
.ticket__stamp { position: absolute; right: 14px; bottom: 12px; padding: 3px 10px; border: 3px solid currentColor; border-radius: 6px; font: 400 1.15rem/1 var(--f-comic); letter-spacing: .08em; rotate: -10deg; }
.ticket--gold .ticket__stamp { color: var(--c-bb); }
.ticket--grau .ticket__stamp { color: var(--c-rasp-dark); }
.tickets.is-visible .ticket__stamp { animation: stamp-in .5s var(--ease-out) both; animation-delay: .5s; }
.tickets.is-visible .ticket--grau .ticket__stamp { animation-delay: .9s; }

.laut__grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: clamp(8px, 2vw, 18px); padding: 20px clamp(10px, 2vw, 20px) 16px; border: 3px solid var(--c-ink); border-radius: var(--radius); background: var(--c-surface); box-shadow: 6px 6px 0 var(--c-ink); }
.laut__gruppe { display: grid; justify-items: center; gap: 6px; text-align: center; }
.prose .laut__gruppe img { width: min(100%, 130px); height: auto; border-radius: 0; }
.laut__beeren { display: flex; justify-content: center; }
.prose .laut__beeren img { width: 50%; max-width: 76px; }
.laut__gruppe b { font: 700 clamp(.78rem, 2.2vw, 1.05rem)/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text); }
.laut__gruppe > span:last-child { font-size: clamp(.72rem, 1.9vw, .88rem); line-height: 1.3; color: var(--c-muted); }
.laut__meter { --max: 100%; display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.laut__gruppe--still .laut__meter { --max: 24%; }
.laut__meter i { width: 8px; height: var(--max); border: 2px solid var(--c-ink); border-radius: 3px; background: var(--c-rasp); }
.laut__gruppe--still .laut__meter i { background: var(--c-leaf); }
.laut__meter i:nth-child(2n) { height: calc(var(--max) * .7); }
.laut.is-visible .laut__meter i { animation: eq .42s ease-in-out infinite alternate; }
.laut.is-visible .laut__meter i:nth-child(2) { animation-duration: .3s; }
.laut.is-visible .laut__meter i:nth-child(3) { animation-duration: .5s; }
.laut.is-visible .laut__meter i:nth-child(4) { animation-duration: .36s; }
.laut.is-visible .laut__meter i:nth-child(5) { animation-duration: .46s; }
@keyframes eq { from { height: calc(var(--max) * .2); } to { height: var(--max); } }

.merksatz { margin: 2.2em 0 1.4em; padding: 24px 26px; border: 3px solid var(--c-ink); border-radius: var(--radius); background: linear-gradient(135deg, var(--c-rasp), var(--c-rasp-dark)); box-shadow: 8px 8px 0 var(--c-ink); rotate: -.6deg; }
.merksatz span { display: block; }
.prose .merksatz strong { display: block; margin-top: .5em; font: 400 clamp(1.5rem, 3.6vw, 2.1rem)/1.15 var(--f-comic); letter-spacing: .03em; color: var(--c-text); text-shadow: 3px 3px 0 var(--c-ink); }

/* Millberry TV */
.tv { position: relative; width: min(100%, 820px); margin-inline: auto; padding: clamp(14px, 3vw, 28px); padding-right: clamp(70px, 14vw, 130px); border-radius: 36px; border: 4px solid var(--c-ink); background: linear-gradient(160deg, #6b3b2a, #3e2017); box-shadow: 12px 12px 0 var(--c-ink); }
.tv__screen { position: relative; aspect-ratio: 4 / 3; border-radius: 26px / 34px; overflow: hidden; border: 4px solid var(--c-ink); background: #111; }
.tv__screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv__content { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 8%; text-align: center; color: #fff; }
.tv__content img { width: 32%; }
.tv__content p { margin: 0; font: 400 clamp(1rem, 2.6vw, 1.6rem)/1.25 var(--f-comic); letter-spacing: .04em; text-shadow: 2px 2px 0 #000; }
.tv__content small { font-size: clamp(.7rem, 1.6vw, .9rem); opacity: .8; }
.tv__screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px), radial-gradient(ellipse, transparent 60%, rgba(0, 0, 0, .55)); pointer-events: none; }
.tv__panel { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(60px, 13vw, 116px); display: grid; align-content: center; justify-items: center; gap: 16px; }
.tv__knob { width: clamp(38px, 8vw, 62px); aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--c-ink); background: conic-gradient(from 0deg, #d9c3cf, #8b7380, #d9c3cf); cursor: pointer; transition: transform .35s var(--ease-out); position: relative; }
.tv__knob::after { content: ''; position: absolute; left: 50%; top: 6%; width: 4px; height: 36%; background: var(--c-ink); transform: translateX(-50%); border-radius: 2px; }
.tv__ch { font: 400 clamp(.9rem, 2.2vw, 1.3rem)/1 var(--f-comic); color: var(--c-leaf); background: #000; padding: 6px 8px; border-radius: 6px; letter-spacing: .06em; }
.tv__speaker { width: 70%; height: 60px; background: repeating-linear-gradient(0deg, var(--c-ink) 0 3px, transparent 3px 7px); border-radius: 6px; }
.tv__antenna { position: absolute; left: 40%; top: -70px; width: 120px; height: 74px; pointer-events: none; }

/* ---------- 10 Footer ---------- */
.site-footer { position: relative; margin-top: clamp(40px, 8vw, 90px); padding: 70px 0 30px; background: var(--grain), var(--c-night); border-top: 3px solid var(--c-ink); }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 28px; background: url('../img/illus/ranke.svg') center / 420px 100% repeat-x; opacity: .85; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand img { width: 110px; margin-bottom: 10px; }
.footer-brand p { color: var(--c-muted); font-size: .95rem; }
.footer-claim { font: 400 1.3rem/1.2 var(--f-comic); color: var(--c-leaf); letter-spacing: .04em; }
.site-footer h2 { font-size: 1rem; letter-spacing: .12em; color: var(--c-rasp-light); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer ul a { color: var(--c-text); text-decoration: none; }
@media (hover: hover) { .site-footer ul a:hover { color: var(--c-leaf); } }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.social { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 2px solid var(--c-line); color: var(--c-text); text-decoration: none; font: 600 .85rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; transition: background .2s, border-color .2s, transform .2s; }
@media (hover: hover) { .social:hover { color: var(--c-ink); background: var(--c-leaf); border-color: var(--c-ink); transform: rotate(-3deg); } }
.social--soon { opacity: .55; cursor: default; }
@media (hover: hover) { .social--soon:hover { background: none; color: var(--c-text); border-color: var(--c-line); transform: none; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--c-line); font-size: .88rem; color: var(--c-muted); }
.footer-bottom a { color: var(--c-muted); }
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(30px) scale(.6); transition: opacity .3s, transform .4s var(--ease-out); }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top img { width: 100%; filter: drop-shadow(3px 4px 0 var(--c-ink)); }
@media (hover: hover) { .to-top:hover img { animation: wiggle .5s; } }

/* ---------- 11 Übergänge & Animationen ---------- */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .6s; }
::view-transition-old(root) { animation: vt-out .45s cubic-bezier(.6, 0, .4, 1) both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: .25; transform: scale(.96); filter: blur(2px) saturate(1.6) hue-rotate(-15deg); } }
@keyframes vt-in { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); } }
/* Fallback ohne View Transitions: sanft einblenden */
@supports not (view-transition-name: none) { main { animation: fade-up .5s ease-out both; } }

@keyframes drop-in { from { opacity: 0; transform: translateY(-60px) rotate(-12deg); } 60% { opacity: 1; transform: translateY(8px) rotate(3deg); } to { transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(14px, -22px) rotate(10deg); } 66% { transform: translate(-10px, -8px) rotate(-8deg); } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes splat { 0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(0); opacity: 1; } 12% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.1); } 22% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } 75% { opacity: .9; } 100% { transform: translate(-50%, -42%) rotate(var(--rot)) scale(1); opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85) rotate(-2deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes flicker { 50% { opacity: .6; } }
@keyframes fall { from { transform: translateY(-120px) rotate(0); } to { transform: translateY(110vh) rotate(var(--r, 360deg)); } }

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s ease-out, transform .8s var(--ease-out); transition-delay: var(--delay, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  /* Seitenwechsel ohne Bewegung: nur kurze Überblendung */
  ::view-transition-old(root) { animation: vt-fade-out .2s ease both; }
  ::view-transition-new(root) { animation: vt-fade-in .28s ease both; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* ---------- 12 Hilfsklassen ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.muted { color: var(--c-muted); }
.stack > * + * { margin-top: var(--stack, 16px); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.empty-state { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; border: 2px dashed var(--c-line); border-radius: var(--radius); color: var(--c-muted); }
.empty-state img { width: 130px; }
.badge-new { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 10px; border-radius: 8px; border: 2px solid var(--c-ink); background: var(--c-leaf); color: var(--c-ink); font: 400 1rem/1 var(--f-comic); letter-spacing: .05em; transform: rotate(-6deg); }
.notfound { text-align: center; }
.notfound__num { font: 400 clamp(6rem, 22vw, 14rem)/.9 var(--f-comic); color: var(--c-rasp); text-shadow: 8px 8px 0 var(--c-ink); letter-spacing: .02em; margin: 0; }
.whack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 420px); margin: 26px auto; }
.whack button { position: relative; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c-ink); background: radial-gradient(circle at 50% 70%, #0a0308 0 45%, var(--c-surface-2) 46%); overflow: hidden; cursor: pointer; padding: 0; }
.whack img { position: absolute; left: 12%; width: 76%; top: 100%; transition: top .18s var(--ease-out); }
.whack button.is-up img { top: 8%; }
.whack button.is-hit img { top: 100%; transition-duration: .3s; }
.whack button:active { transform: scale(.95); }