/* ==========================================================================
   Dadanaut – Design-Entwurf
   Monochrom + ein Akzent. Raster, Tusche, Comic-Panels.
   Alles, was man „leicht ändern“ möchte, steht in den Tokens ganz oben.
   ========================================================================== */

@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); font-display: swap; }

/* ---------- Tokens -------------------------------------------------------- */
:root {
  --paper:   #efe8da;
  --paper-2: #e3d9c6;
  --ink:     #171412;
  --ink-2:   #5b534b;
  --accent:  #c2571a;   /* Retro-Rostorange */
  --on-accent: #fff6ea;

  --f-display: "Anton", "Impact", sans-serif;
  --f-text:    "Newsreader", Georgia, serif;
  --f-mono:    "Space Mono", ui-monospace, monospace;
  --f-hand:    "Permanent Marker", "Comic Sans MS", cursive;

  --line: 3px;            /* Strichstärke der Panels */
  --shadow: 6px;          /* harter Comic-Schatten */
  --radius: 4px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --dot: color-mix(in srgb, var(--ink) 9%, transparent);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #141210;
    --paper-2: #211d19;
    --ink:     #ece4d4;
    --ink-2:   #a69c8e;
    --accent:  #e2742f;
    --on-accent: #160d06;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:   #141210;
  --paper-2: #211d19;
  --ink:     #ece4d4;
  --ink-2:   #a69c8e;
  --accent:  #e2742f;
  --on-accent: #160d06;
  color-scheme: dark;
}

/* ---------- Grundlagen ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 0.9px, transparent 1.2px);
  background-size: 7px 7px;
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--f-text);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.3rem, 9vw, 6.5rem); overflow-wrap: anywhere; hyphens: auto; }
h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
h3 { font-size: 1.6rem; }
.mono { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.hand { font-family: var(--f-hand); text-transform: none; }
.akzent { color: var(--accent); }
.leise { color: var(--ink-2); }

/* Sprachumschaltung: data-l="de" / data-l="en" */
html[lang="de"] [data-l="en"], html[lang="en"] [data-l="de"] { display: none !important; }

.huelle { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }
/* Deko, die über den Rand ragt, wird abgeschnitten statt die Seite zu verbreitern */
main, .fuss { overflow-x: clip; }

/* ---------- Kopf ---------------------------------------------------------- */
.kopf {
  border-bottom: var(--line) solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.kopf .huelle { display: flex; align-items: center; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.logo {
  font: 400 2.1rem/1 var(--f-display); letter-spacing: .02em; text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.logo:hover { color: inherit; }
.logo-bild {
  width: 44px; height: 44px; flex: none; object-fit: cover;
  border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s;
}
.logo:hover .logo-bild { transform: rotate(-4deg) scale(1.05); }
.nav { display: flex; gap: clamp(.6rem, 2vw, 1.6rem); margin-left: auto; flex-wrap: wrap; }
.nav a { font-family: var(--f-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: .3rem 0; border-bottom: 3px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.schalter { display: flex; gap: .4rem; }
.knopf-klein {
  font: 700 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px;
  padding: .45rem .7rem; cursor: pointer;
}
.knopf-klein:hover { background: var(--ink); color: var(--paper); }
.knopf-klein svg { width: 14px; height: 14px; vertical-align: -2px; }

@media (max-width: 760px) {
  .kopf { position: static; }
  .kopf .huelle { padding-block: .6rem; }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .schalter { margin-left: auto; }
}

/* ---------- Comic-Bausteine ----------------------------------------------- */
.panel {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  border-radius: var(--radius);
  position: relative;
}
.panel--raster { background-image: radial-gradient(var(--dot) 1.2px, transparent 1.5px); background-size: 6px 6px; }

/* Erzählkasten wie im Comic */
.kasten {
  display: inline-block;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  font: 700 .75rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  padding: .35rem .6rem;
}
.kasten--akzent { background: var(--accent); color: var(--on-accent); border-color: var(--ink); }
/* Luft zwischen Kästchen und folgender Überschrift */
.kasten + h1, .kasten + h2, .kasten + h3 { margin-top: 1.1rem; }

/* Sprechblase */
.blase {
  position: relative; background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: 1.4em; padding: .85rem 1.5rem; font-family: var(--f-hand); font-size: 1.05rem; line-height: 1.35;
  text-align: center; text-wrap: balance;
}
.blase::after, .blase::before {
  content: ""; position: absolute; left: 2.2rem; bottom: -16px;
  border: 9px solid transparent; border-top: 14px solid var(--ink); border-bottom: 0;
}
.blase::before { bottom: -11px; left: calc(2.2rem + 2px); border-width: 7px; border-top-width: 11px; border-top-color: var(--paper); z-index: 1; }

.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 .85rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: .85rem 1.1rem; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.knopf:hover { color: var(--on-accent); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.knopf:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.knopf--leer { background: var(--paper); color: var(--ink); }
.knopf--leer:hover { color: var(--ink); }

/* Speedlines hinter Überschriften */
.speed { position: relative; isolation: isolate; }
.speed::before {
  content: ""; position: absolute; inset: -18% -6% -18% -3%; z-index: -1;
  background: repeating-linear-gradient(-8deg, transparent 0 9px, color-mix(in srgb, var(--ink) 10%, transparent) 9px 11px);
  -webkit-mask: radial-gradient(ellipse 60% 50% at 30% 50%, #000 20%, transparent 100%);
          mask: radial-gradient(ellipse 60% 50% at 30% 50%, #000 20%, transparent 100%);
}

/* ---------- Rasterbilder -------------------------------------------------- */
/* Das Raster ist eine PNG-Maske; die Punktfarbe kommt von hier. */
.rb { position: relative; overflow: hidden; background: var(--paper); margin: 0; }
.rb > img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; position: relative; z-index: 2; }
.rb-r {
  position: absolute; inset: 0; z-index: 1; background: var(--ink);
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.rb--akzent .rb-r { background: var(--accent); }
.rb-neg { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rb-pos { display: none; }
  :root:not([data-theme="light"]) .rb-neg { display: block; }
}
:root[data-theme="dark"] .rb-pos { display: none; }
:root[data-theme="dark"] .rb-neg { display: block; }
.rb.ist-raster:hover > img, .rb.ist-raster:focus-within > img, .rb.zeig-original > img { opacity: 1; }
.rb:not(.ist-raster) > img { opacity: 1; }

/* ---------- Lightbox ------------------------------------------------------ */
[data-lightbox] { cursor: zoom-in; }
.rb[data-lightbox]::after {
  content: "+"; position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font: 700 1.3rem/28px var(--f-mono); text-align: center;
  opacity: 0; transform: scale(.7); transition: .2s;
}
.rb[data-lightbox]:hover::after, .rb[data-lightbox]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .rb[data-lightbox]::after { opacity: 1; transform: none; } }
html.lb-offen { overflow: hidden; }
.lightbox {
  border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink);
  width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop {
  background-color: rgb(14 12 10 / .9);
  background-image: radial-gradient(rgb(239 232 218 / .07) 1px, transparent 1.3px);
  background-size: 6px 6px;
}
.lb-rahmen { margin: 0; padding: 10px; max-width: min(92vw, 1200px); transform: rotate(-.6deg); }
.lb-rahmen.neu { animation: lb-auf .28s cubic-bezier(.2, .9, .25, 1.2); }
@keyframes lb-auf { from { opacity: 0; transform: rotate(-3deg) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .lb-rahmen.neu { animation: none; } }
.lb-rahmen img { display: block; max-width: 100%; max-height: 78dvh; width: auto; height: auto; margin: 0 auto; }
.lb-rahmen figcaption { text-align: center; margin: .7rem .4rem .2rem; color: var(--ink-2); }
.lb-knopf {
  position: fixed; z-index: 2; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 700 1.3rem/1 var(--f-mono); display: grid; place-items: center;
}
.lb-knopf:hover { background: var(--accent); color: var(--on-accent); }
.lb-zu { top: 1rem; right: 1rem; }
.lb-zurueck { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-weiter { right: 1rem; top: 50%; translate: 0 -50%; }
.lb-zahl { position: fixed; bottom: 1.2rem; left: 50%; translate: -50% 0; color: #efe8da; }
@media (max-width: 700px) {
  .lb-zurueck, .lb-weiter { top: auto; bottom: 1rem; translate: none; width: 46px; height: 46px; }
  .lb-rahmen img { max-height: 70dvh; }
}

/* ---------- Strichzeichnungen --------------------------------------------- */
.sk { display: block; color: var(--ink); overflow: visible; }
.sk .p  { fill: var(--paper); }
.sk .pa { stroke: var(--paper); }
.sk .i  { fill: currentColor; }
.sk .r  { fill: url(#dd-raster); }
.sk .h  { fill: url(#dd-schraffur); }
.sk .k  { fill: url(#dd-kreuz); }
.sk .a  { stroke: var(--accent); }
.sk .af { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
.sk .m  { fill: var(--accent); }
.sk .ra { fill: url(#dd-raster-akzent); }
.sk .s  { stroke-width: 1.3; }
.sk .t-display { font-family: var(--f-display); }
.sk .t-marker  { font-family: var(--f-hand); }
.sk .t-mono    { font-family: var(--f-mono); }
#dd-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--ink); }

/* Erscheinen beim Scrollen */
.zeigt { transition: transform .9s cubic-bezier(.2, .9, .25, 1.15), opacity .6s; }
.zeigt:not(.da) { opacity: 0; }
.zeigt--rechts:not(.da) { transform: translateX(40%) rotate(var(--dreh, 0deg)); }
.zeigt--links:not(.da)  { transform: translateX(-40%) rotate(var(--dreh, 0deg)); }
.zeigt--unten:not(.da)  { transform: translateY(30%) rotate(var(--dreh, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  .zeigt, .zeigt:not(.da) { transition: none; transform: rotate(var(--dreh, 0deg)) !important; opacity: 1; }
}

/* Der Dadanaut schaut ums Eck */
.gucker {
  position: fixed; right: 0; top: 46vh; z-index: 15; width: 170px;
  transform: translateX(92%) rotate(-16deg); transition: transform .7s cubic-bezier(.2, .9, .25, 1.2);
  cursor: pointer; border: 0; background: none; padding: 0; color: inherit;
}
.gucker.guckt { transform: translateX(42%) rotate(-16deg); }
.gucker .blase { position: absolute; right: 70%; top: -3rem; width: max-content; max-width: 220px; font-size: .95rem; opacity: 0; transform: rotate(16deg) scale(.8); transform-origin: right bottom; transition: .25s; pointer-events: none; }
.gucker .blase::after { left: auto; right: 1.2rem; }
.gucker .blase::before { left: auto; right: calc(1.2rem + 2px); }
.gucker.spricht .blase { opacity: 1; transform: rotate(16deg); }
/* Ohne Seitenrand: kleiner, unten rechts, schaut nur ein Stück heraus */
@media (max-width: 1440px) {
  .gucker { width: 110px; top: auto; bottom: 10px; }
  .gucker.guckt { transform: translateX(50%) rotate(-16deg); }
}

/* Statistik-Häkchen */
.statistik-schalter { padding: 1rem 1.2rem; margin: 1.4rem 0; }
.statistik-schalter .haken { margin-bottom: .4rem; }
.statistik-status { margin: 0; font-size: .72rem; line-height: 1.5; }
.statistik-schalter--klein { margin: 1rem 0 0; padding: 0; }
.statistik-schalter--klein .haken { font-size: .85rem; }
.statistik-schalter--klein .haken input { width: 18px; height: 18px; }
.haken input:disabled { opacity: .45; cursor: not-allowed; }

/* Nach-oben-Knopf */
.nach-oben {
  position: fixed; right: 18px; bottom: 18px; z-index: 16;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border: var(--line) solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
  transition: opacity .25s, transform .25s, background .15s, color .15s;
}
.nach-oben svg { width: 22px; height: 22px; }
.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: var(--accent); color: var(--on-accent); }
.nach-oben:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: opacity .1s; transform: none; } }
/* Auf schmalen Bildschirmen schaut der Dadanaut über dem Knopf hervor */
@media (max-width: 1440px) { .gucker { bottom: 84px; } }
@media (max-width: 760px) { .nach-oben { width: 46px; height: 46px; right: 14px; bottom: 14px; } .gucker { bottom: 76px; } }

/* Filmstreifen-Trenner */
.trenner { width: min(600px, 100%); margin: 3.5rem auto; }

/* ---------- Startseite ---------------------------------------------------- */
.held { padding: clamp(2.5rem, 7vw, 5.5rem) 0 4rem; position: relative; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.held h1 { margin-top: 1.1rem; }
.held .unterzeile { font-size: 1.3rem; font-style: italic; max-width: 34ch; }
.held .cover { transform: rotate(-2deg); position: relative; }
.held .cover .rb { aspect-ratio: 1; }
.held .aktionen { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.held-scheibe { position: absolute; width: 64%; right: -24%; top: -16%; z-index: -1; transform: rotate(-8deg); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.held .cover:hover .held-scheibe { transform: rotate(43deg); }
.held-blase { position: absolute; left: -1.5rem; bottom: -2.4rem; transform: rotate(-3deg); z-index: 3; max-width: 240px; }
@media (max-width: 860px) {
  .held-raster { grid-template-columns: minmax(0, 1fr); }
  .held .cover { max-width: 460px; }
  .held-scheibe { right: -16%; top: 8%; width: 46%; }
  .held-blase { left: auto; right: -.5rem; bottom: -1.6rem; }
}

.abschnitt { padding: 3rem 0; position: relative; }
.abschnitt-kopf { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.abschnitt-kopf h2 { margin: 0; }

/* News-Karten */
.news-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.karte { display: flex; flex-direction: column; text-decoration: none; transition: transform .15s; }
.karte:hover { color: inherit; transform: translate(-2px, -2px) rotate(-.4deg); }
.karte:nth-child(2) { transform: rotate(.5deg); }
.karte .rb { aspect-ratio: 16 / 10; border-bottom: var(--line) solid var(--ink); }
.karte-text { padding: 1rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.karte h3 { margin: 0; }
.karte p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.karte .mehr { margin-top: auto; padding-top: .6rem; }
@media (max-width: 900px) { .news-reihe { grid-template-columns: minmax(0, 1fr); } .karte:nth-child(2) { transform: none; } }

/* Musikregal */
.regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 44%), 1fr)); gap: 1.6rem 1.4rem; }
.platte { text-decoration: none; display: block; }
.platte .rb { aspect-ratio: 1; border: var(--line) solid var(--ink); border-radius: var(--radius); transition: transform .15s, box-shadow .15s; }
.platte:hover { color: inherit; }
.platte:hover .rb { transform: translate(-3px, -3px); box-shadow: var(--shadow) var(--shadow) 0 var(--accent); }
.platte .titel { font: 400 1.3rem/1 var(--f-display); text-transform: uppercase; margin-top: .7rem; display: block; }
.platte .jahr { margin-top: .25rem; display: block; color: var(--ink-2); }

.regal-deko { position: absolute; left: calc(-1 * clamp(150px, 14vw, 210px) - 1.5rem); top: 5rem; width: clamp(150px, 14vw, 210px); --dreh: -4deg; transform: rotate(-4deg); }
@media (max-width: 1500px) { .regal-deko { display: none; } }

/* ---------- Albumseite ---------------------------------------------------- */
.album-kopf { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 3.5rem); padding: 3rem 0 2rem; align-items: start; }
.album-kopf .rb { aspect-ratio: 1; }
.album-kopf .cover { transform: rotate(-1.2deg); }
.album-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 1.4rem; }
@media (max-width: 860px) { .album-kopf { grid-template-columns: minmax(0, 1fr); } .album-kopf .cover { max-width: 420px; } }

/* Player */
.player { padding: 1.2rem 1.2rem 0; margin-top: .4rem; }
.player-oben { display: flex; align-items: center; gap: 1rem; }
.play {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); border: var(--line) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; display: grid; place-items: center;
}
.play:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.play svg { width: 26px; height: 26px; }
.play .pause, .player.laeuft .play .start { display: none; }
.player.laeuft .play .pause { display: block; }
.player-titel { min-width: 0; flex: 1; }
.player-titel .jetzt { font: 400 1.6rem/1 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.player-titel .zeit { color: var(--ink-2); }
.player-knoepfe { display: flex; gap: .3rem; }
.player-knoepfe button { background: none; border: 2px solid var(--ink); border-radius: 50%; width: 38px; height: 38px; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.player-knoepfe button:hover { background: var(--ink); color: var(--paper); }
.player-knoepfe svg { width: 16px; height: 16px; }
.welle { width: 100%; height: 72px; margin: 1rem 0 .4rem; cursor: pointer; display: block; touch-action: none; }
.liste { list-style: none; margin: 0 -1.2rem; padding: 0; border-top: 2px solid var(--ink); counter-reset: t; }
.liste li { border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.liste li:last-child { border-bottom: 0; }
.liste button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .6rem; align-items: baseline;
  padding: .7rem 1.2rem; font-size: 1.05rem;
}
.liste button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.liste button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.liste .nr { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); }
.liste .dauer { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); }
.liste li.aktiv button { background: var(--ink); color: var(--paper); }
.liste li.aktiv .nr, .liste li.aktiv .dauer { color: var(--accent); }
.player-scheibe { position: absolute; right: -2.4rem; top: -3.4rem; width: 96px; z-index: 2; pointer-events: none; }
.player.laeuft .player-scheibe { animation: dreh 6s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player.laeuft .player-scheibe { animation: none; } }
@media (max-width: 860px) { .player-scheibe { right: -.6rem; top: -3rem; width: 72px; } }

/* Teilen */
.teilen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 2rem; }
.teilen .mono { margin-right: .3rem; }

/* Album-Inhalt */
.album-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(2rem, 5vw, 4.5rem); padding: 2rem 0 3rem; }
.fliesstext { max-width: 64ch; }
.mit-initiale > p:first-of-type::first-letter { font: 400 4.2em/.8 var(--f-display); float: left; margin: .08em .1em 0 0; color: var(--accent); }
.fliesstext blockquote { margin: 1.6rem 0 2rem; }
.fliesstext blockquote:not(.blase) { padding: 0; }
.fliesstext figure { margin: 2rem 0; }
.fliesstext figcaption { margin-top: .5rem; }
@media (max-width: 960px) { .album-inhalt { grid-template-columns: minmax(0, 1fr); } }

.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.galerie .rb { aspect-ratio: 16 / 10; border: var(--line) solid var(--ink); }
.galerie figure:nth-child(odd) { transform: rotate(-.8deg); }
.galerie figure:nth-child(even) { transform: rotate(.8deg) translateY(10px); }
@media (max-width: 600px) { .galerie { grid-template-columns: minmax(0, 1fr); } }

/* Download */
.download { padding: 1.4rem; position: relative; }
.album-inhalt > aside { position: sticky; top: 100px; align-self: start; }
.download h3 { margin-top: .9rem; }
.download p { font-size: 1rem; margin: .3rem 0 1rem; }
.download-tuete { position: absolute; right: -1.8rem; top: -4.6rem; width: 104px; --dreh: 8deg; transform: rotate(8deg); }
.feld { display: block; margin-bottom: 1rem; }
.feld > span { display: block; margin-bottom: .35rem; }
.feld input[type="email"] {
  width: 100%; font: 400 1.05rem var(--f-text); color: var(--ink); background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: var(--radius); padding: .7rem .8rem;
}
.feld input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }
.formate { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; padding: 0; margin: 0 0 1rem; }
.formate legend { padding: 0; margin-bottom: .35rem; }
.formate label { cursor: pointer; }
.formate input { position: absolute; opacity: 0; pointer-events: none; }
.formate span.chip { display: inline-block; font: 700 .78rem/1 var(--f-mono); padding: .5rem .7rem; border: 2px solid var(--ink); border-radius: 99px; }
.formate input:checked + .chip { background: var(--ink); color: var(--paper); }
.formate input:focus-visible + .chip { outline: 3px solid var(--accent); outline-offset: 2px; }
.formate small { display: block; font-size: .7rem; }
.haken { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .92rem; line-height: 1.4; margin-bottom: 1.2rem; cursor: pointer; }
.haken input { appearance: none; width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: 3px; margin: 1px 0 0; background: var(--paper); cursor: pointer; display: grid; place-items: center; }
.haken input:checked { background: var(--accent); }
.haken input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kleingedruckt { font-size: .8rem; color: var(--ink-2); margin-top: 1rem; line-height: 1.45; }
.download .knopf { width: 100%; justify-content: center; }
.bestaetigt { display: none; }
.download.gesendet form { display: none; }
.download.gesendet .bestaetigt { display: block; }
.bestaetigt .blase { margin: .4rem 0 1.6rem; }
@media (max-width: 960px) { .album-inhalt > aside { position: static; } .download-tuete { right: -.4rem; width: 80px; } }

/* Schlagzeug-Pause vor dem Fuß */
.pause-buehne { display: flex; justify-content: center; align-items: end; gap: 2rem; padding: 2rem 0 1rem; }
.pause-buehne .sk { width: min(300px, 70%); }
.pause-buehne .blase { margin-bottom: 10rem; }
@media (max-width: 600px) { .pause-buehne { flex-direction: column-reverse; align-items: center; } .pause-buehne .blase { margin: 0; } }

/* ---------- Geschichtenstapel (News) -------------------------------------- */
.stapel-kopf { padding: 3rem 0 1rem; }
.stapel { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 3rem; align-items: start; }
.eintraege { display: flex; flex-direction: column; gap: 2.4rem; }
.eintrag { display: grid; grid-template-columns: 240px minmax(0, 1fr); text-decoration: none; overflow: hidden; }
.eintrag:hover { color: inherit; }
.eintrag:hover h2 { color: var(--accent); }
.eintrag .rb { height: 100%; min-height: 180px; border-right: var(--line) solid var(--ink); }
.eintrag-text { padding: 1.2rem 1.4rem; }
.eintrag h2 { font-size: 2rem; margin: .5rem 0; }
.eintrag p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.eintrag:nth-child(even) { transform: rotate(.35deg); }
@media (max-width: 700px) { .eintrag { grid-template-columns: minmax(0, 1fr); } .eintrag .rb { border-right: 0; border-bottom: var(--line) solid var(--ink); aspect-ratio: 16/9; height: auto; } }
.seitenleiste { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 1.6rem; }
.seitenleiste .sk { width: 200px; --dreh: -3deg; transform: rotate(-3deg); }
.seitenleiste ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.seitenleiste li { margin: .2rem 0; }
@media (max-width: 960px) { .stapel { grid-template-columns: minmax(0, 1fr); } .seitenleiste { position: static; flex-direction: row; flex-wrap: wrap; align-items: start; } .seitenleiste .sk { width: 120px; } }

/* Beitrag */
.beitrag { max-width: 760px; margin: 0 auto; padding: 3rem 0; }
.beitrag h1 { font-size: clamp(2.8rem, 8vw, 5rem); }
.beitrag .fliesstext { font-size: 1.2rem; }
.beitrag-bild { margin: 2rem 0; }
.beitrag-bild .rb { aspect-ratio: 16/9; border: var(--line) solid var(--ink); }

/* Video mit 2-Klick */
.video { aspect-ratio: 16/9; position: relative; border: var(--line) solid var(--ink); background: var(--ink); color: var(--paper); display: grid; place-items: center; text-align: center; overflow: hidden; }
.video .rb { position: absolute; inset: 0; opacity: .35; }
.video-hinweis { position: relative; z-index: 3; padding: 1.4rem; max-width: 46ch; }
.video-hinweis p { font-size: .95rem; margin: .6rem 0 1rem; }

/* ---------- Kosmos -------------------------------------------------------- */
.kosmos-held { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: 3rem 0 1rem; }
.figur-buehne {
  padding: 1.5rem 1.5rem 0; overflow: hidden; transform: rotate(-1deg);
  background:
    repeating-conic-gradient(from 0deg at 50% 22%, color-mix(in srgb, var(--ink) 8%, transparent) 0 5deg, transparent 5deg 12deg),
    var(--paper);
}
.figur-buehne .sk { width: 100%; max-width: 360px; margin: 0 auto; }
.kosmos-blase { margin-top: 2rem; max-width: 30ch; transform: rotate(-1.5deg); }
.akte { padding: clamp(1.4rem, 4vw, 2.6rem); max-width: 860px; margin: 0 auto; }
.akte-stempel { position: absolute; right: 1.4rem; top: -1rem; transform: rotate(4deg); background: var(--paper); }
.akte dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .7rem 1.6rem; margin: 1rem 0 0; }
.akte dt { padding-top: .25rem; color: var(--ink-2); border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.akte dd { margin: 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); padding-top: .1rem; }
.geschichte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.geschichte li { padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.geschichte li:nth-child(2) { transform: rotate(.8deg) translateY(.6rem); }
.geschichte .sk { height: 180px; width: 100%; }
.geschichte p { margin: 0; font-size: 1.02rem; }
.geschichte .kasten { align-self: flex-start; }
.hinter-maske { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (max-width: 860px) {
  .kosmos-held { grid-template-columns: minmax(0, 1fr); }
  .figur-buehne { max-width: 400px; }
  .geschichte { grid-template-columns: minmax(0, 1fr); }
  .geschichte li:nth-child(2) { transform: none; }
  .akte dl { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .akte dd { border-top: 0; margin-bottom: .6rem; }
  .hinter-maske { grid-template-columns: minmax(0, 1fr); }
  .hinter-maske > .sk { width: 160px; }
}

/* ---------- Kirby-Ergänzungen --------------------------------------------- */
.fliesstext h2 { font-size: 2rem; margin-top: 2rem; }
.fliesstext h3 { margin-top: 1.6rem; }
.fliesstext img { max-width: 100%; height: auto; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3rem; }
.fliesstext hr { border: 0; border-top: var(--line) dashed var(--ink); margin: 2.5rem 0; }
.beitrag-bild { margin: 2rem 0; }
.beitrag-bild figcaption, .galerie figcaption { margin-top: .5rem; }
.video-block { margin: 2rem 0; }
.video-eigen video { width: 100%; border: var(--line) solid var(--ink); }
.blase footer { margin-top: .4rem; font-size: .75rem; }
.dl-fehler { font-size: .95rem; margin: 0 0 1.4rem; }

.album-hinweis { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.2rem; align-items: center; padding: .8rem 1.2rem .8rem .8rem; margin: 2.5rem 0 1rem; text-decoration: none; }
.album-hinweis .rb { aspect-ratio: 1; border: 2px solid var(--ink); }
.album-hinweis .display { font-size: 1.8rem; }
.album-hinweis:hover { color: inherit; transform: translate(-2px, -2px); }
.beitrag-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.freie-seite { padding: 3rem 0; }
.layout-zeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem 3rem; margin: 1.5rem 0; }
.layout-spalte { grid-column: span var(--span, 12); max-width: none; }
@media (max-width: 760px) { .layout-zeile { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .layout-spalte { grid-column: 1 / -1; } }

.fehlerseite { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 4rem 0 2rem; }
.fehlerseite .blase { max-width: 32ch; margin: 1rem 0 2rem; }
.fehler-kopf { transform: rotate(-8deg); }
@media (max-width: 700px) { .fehlerseite { grid-template-columns: minmax(0, 1fr); } .fehler-kopf { width: 180px; } }

.download-seite { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: 4rem 0 1rem; }
.download-seite .cover .rb { aspect-ratio: 1; }
.download-seite .cover { transform: rotate(-1.5deg); }
.download-seite .blase { max-width: 36ch; margin: 1rem 0 1.6rem; }
.download-seite-tuete { width: 160px; margin: 2rem auto 0; }
@media (max-width: 760px) { .download-seite { grid-template-columns: minmax(0, 1fr); } .download-seite .cover { max-width: 260px; } }

.tabelle-huelle { overflow-x: auto; margin-top: 1rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th { font: 700 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: .8rem; border-bottom: var(--line) solid var(--ink); white-space: nowrap; }
.tabelle td { padding: .6rem .8rem; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }

/* Lizenzhinweis */
.lizenz { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem 1.2rem; margin: 2.4rem 0 0; }
.lizenz p { margin: 0; font-size: .98rem; line-height: 1.5; }
.lizenz-zeichen { width: 40px; height: 40px; color: var(--accent); }

/* Extras unter dem Musik-Download */
.extras { padding: 1.4rem; margin-top: 2.4rem; }
.extras h3 { margin-top: .9rem; }
.extras-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.extras-liste li { border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.extras-liste a { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .75rem 0; text-decoration: none; }
.extras-liste a svg { margin-top: .2rem; color: var(--accent); }
.extras-liste a > span { display: flex; flex-direction: column; gap: .15rem; }
.extras-liste a:hover strong { color: var(--accent); text-decoration: underline; }
.extras-text { font-size: .92rem; color: var(--ink-2); }

/* Stapel und Schlagworte am Ende einer Geschichte */
.schlagwort-leiste { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); }
.schlagwort-leiste p { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin: 0 0 .8rem; }
.stapel-chip, .schlagwort {
  font: 700 .74rem/1 var(--f-mono); letter-spacing: .04em; text-decoration: none;
  padding: .42rem .65rem; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper);
}
.stapel-chip { background: var(--ink); color: var(--paper); }
.stapel-chip:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.schlagwort:hover { background: var(--ink); color: var(--paper); }

/* Schlagwort-Wolke */
.wolke { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; margin: .4rem 0 0; line-height: 1.25; }
.wolke a { text-decoration: none; font-family: var(--f-text); }
.wolke a:hover, .wolke a[aria-current] { color: var(--accent); text-decoration: underline; }
.wolke-1 { font-size: .85rem; color: var(--ink-2); }
.wolke-2 { font-size: 1rem; }
.wolke-3 { font-size: 1.2rem; }
.wolke-4 { font-size: 1.45rem; font-family: var(--f-display) !important; text-transform: uppercase; }
.wolke-5 { font-size: 1.8rem; font-family: var(--f-display) !important; text-transform: uppercase; }
.seitenleiste [aria-current] { color: var(--accent); }

/* ---------- Fuß ----------------------------------------------------------- */
.fuss { margin-top: 3rem; padding: 0 0 2.5rem; }
.fuss-deko { width: min(230px, 60%); margin: 0 auto -6px; position: relative; z-index: 1; }
.fuss-innen { border-top: var(--line) solid var(--ink); padding-top: 2.6rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.fuss h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin: .25rem 0; font-size: 1rem; }
.fuss .logo { font-size: 2.6rem; gap: .7rem; }
.fuss .logo-bild { width: 64px; height: 64px; box-shadow: 3px 3px 0 var(--ink); }
.fuss .klein { font-size: .9rem; color: var(--ink-2); max-width: 36ch; }
@media (max-width: 760px) { .fuss-innen { grid-template-columns: minmax(0, 1fr); } }

/* Hinweisband für den Entwurf */
.entwurf-band { background: var(--ink); color: var(--paper); font: 700 .72rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: .45rem var(--gutter); }
.entwurf-band a { color: var(--accent); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 200%); transition: transform .3s; z-index: 50; }
.toast.zeigen { transform: translate(-50%, 0); }

/* ---------- Stilblatt ----------------------------------------------------- */
.muster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.6rem; }
.muster figure { margin: 0; padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.muster .sk { width: 100%; height: 200px; }
.farben { display: flex; gap: 1rem; flex-wrap: wrap; }
.farbe { width: 140px; }
.farbe i { display: block; height: 80px; border: var(--line) solid var(--ink); border-radius: var(--radius); margin-bottom: .4rem; }

/* Hörbeispiel in Geschichten */
.hoerbeispiel { margin: 1.6rem 0; padding: .9rem 1rem; }
.hoerbeispiel figcaption { margin-bottom: .5rem; }
.hoerbeispiel audio { width: 100%; display: block; accent-color: var(--accent); }
@media (max-height: 950px) { .album-inhalt > aside { position: static; } }