/* Rottler — Stylesheet des Themes. Teile: Farben/Schriften, Bausteine (Stil-Fundament „Rottler Fuge“), Seitenraster, Seitenformen. */

/* Rottler Fuge — Farben, Maße, Schriften (Werte aus dem Stil-Fundament, tokens.json) */
:root, [data-theme="fuge"] {
  --fuge: #070a12; --kachel: #111827; --kante: #253041; --feld-rand: #5a6b80;
  --kalk: #e9eef0; --asche: #94a0ae; --cyan: #22b5e0; --on-cyan: #04121a; --petrol: #0e6a78;
  --papier: #ecf1f2; --tinte: #0b1220; --tinte-matt: #4a5566; --fehler: #f2836b;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius-0: 0; --radius-1: 2px; --radius-2: 4px;
  --linie-haar: 1px; --linie-kante: 2px; --linie-fokus: 3px; --linie-fuge: 6px;
  --breite-seite: 1180px; --breite-text: 66ch; --hoehe-schriftzug: 88px;
  --font-display: "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif;
  --font-text: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;
}
@font-face { font-family: "Big Shoulders Stencil Display"; src: url("../fonts/BigShouldersStencilDisplay-var.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBMPlexSerif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/PermanentMarker-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Rottler Fuge: Bausteine als Klassen. Werte nur aus tokens.css. */
.rt { background: var(--fuge); color: var(--kalk); font-family: var(--font-text); font-size: 16px; line-height: 1.55; }
.rt *, .rt *::before, .rt *::after { box-sizing: border-box; }
.rt a { color: var(--cyan); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rt a:hover { text-decoration-thickness: 2px; }
.rt :focus-visible { outline: var(--linie-fokus) solid var(--cyan); outline-offset: 2px; }
.rt-papier { background: var(--papier); color: var(--tinte); }
.rt-papier a { color: var(--petrol); }
.rt-papier :focus-visible { outline-color: var(--tinte); }
.rt-versal { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; line-height: .95; font-weight: 900; margin: 0; text-wrap: balance; }
.rt-meta { color: var(--asche); font-size: 14px; line-height: 1.5; }
.rt-datum { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Kopf */
.rt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-bottom: var(--linie-kante) solid var(--kante); }
.rt-schriftzug { display: block; height: var(--hoehe-schriftzug); aspect-ratio: 400 / 331; background: var(--kalk); -webkit-mask: var(--rt-schriftzug) center / contain no-repeat; mask: var(--rt-schriftzug) center / contain no-repeat; }
.rt-papier .rt-schriftzug { background: var(--tinte); }
.rt-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.rt-nav a { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--asche); text-decoration: none; }
.rt-nav a:hover { color: var(--kalk); }
.rt-nav a[aria-current="page"] { color: var(--cyan); }
.rt-nav-knopf { display: none; }
@media (max-width: 640px) {
  .rt-schriftzug { height: 64px; }
  .rt-nav-knopf { display: inline-flex; }
  .rt-nav[data-zu] { display: none; }
  .rt-nav { flex-direction: column; width: 100%; gap: var(--space-2); padding-top: var(--space-2); }
}

/* Knopf */
.rt-knopf { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 11px 20px 9px; border: var(--linie-kante) solid var(--cyan); background: var(--cyan); color: var(--on-cyan); border-radius: var(--radius-0); cursor: pointer; text-decoration: none; }
.rt-knopf:hover { background: transparent; color: var(--cyan); }
.rt-knopf--zwei { background: transparent; color: var(--cyan); }
.rt-knopf--zwei:hover { background: var(--cyan); color: var(--on-cyan); }
.rt-knopf[disabled], .rt-knopf[aria-disabled="true"] { border-color: var(--kante); background: transparent; color: var(--asche); cursor: not-allowed; }
.rt-knopfgruppe { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Knöpfe als Link: schlägt die allgemeine Linkfarbe (.rt a) */
.rt a.rt-knopf { color: var(--on-cyan); text-decoration: none; }
.rt a.rt-knopf:hover, .rt a.rt-knopf--zwei { color: var(--cyan); }
.rt a.rt-knopf--zwei:hover { color: var(--on-cyan); }
/* Menüknopf nur auf dem Handy (schlägt .rt-knopf { display }) */
.rt-knopf.rt-nav-knopf { display: none; }
@media (max-width: 640px) { .rt-knopf.rt-nav-knopf { display: inline-flex; } }

/* Gaffa */
.rt-gaffa { display: inline-block; justify-self: start; align-self: start; background: var(--petrol); color: var(--kalk); font-family: var(--font-marker); font-size: 17px; line-height: 1.2; padding: 4px 14px 2px; transform: rotate(-2deg); clip-path: polygon(1% 4%, 99% 0, 100% 92%, 2% 100%); }

/* Gedenken */
.rt-gedenken { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-5); align-items: center; border-block: var(--linie-haar) solid var(--kante); padding-block: var(--space-5); }
.rt-gedenken img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); display: block; }
.rt-gedenken p { margin: 0; }
.rt-gedenken-name { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: .03em; line-height: 1; }
.rt-gedenken-jahre { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); margin-block: 6px 8px !important; }
.rt-gedenken-text { color: var(--asche); max-width: 52ch; margin-bottom: var(--space-2) !important; }
@media (max-width: 640px) { .rt-gedenken { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); } }

/* Fugenraster */
.rt-fugen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--linie-fuge); padding: var(--linie-fuge); background: #000; border-radius: var(--radius-2); }
.rt-fugen figure { margin: 0; position: relative; }
.rt-fugen img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rt-fugen figcaption { position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px; font-size: 13px; color: var(--kalk); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); opacity: 0; transition: opacity .2s; }
.rt-fugen figure:hover figcaption, .rt-fugen figure:focus-within figcaption { opacity: 1; }
@media (max-width: 640px) { .rt-fugen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-fugen figcaption { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rt-fugen figcaption { transition: none; } }

/* Songtext */
.rt-songtext { padding: 28px clamp(18px, 4vw, 48px); display: grid; gap: var(--space-3); justify-items: start; }
.rt-songtext-titel { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; }
.rt-songtext p { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.55; margin: 0; max-width: 32ch; }

/* Karten */
.rt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); align-items: start; }
.rt-karte { background: var(--kachel); border: var(--linie-haar) solid var(--kante); padding: var(--space-4); display: grid; gap: var(--space-3); }
.rt-karte img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-1); }
.rt-karte h3 { font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.rt-preis { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1; color: var(--kalk); }
.rt-status { justify-self: start; font-family: var(--font-mono); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--asche); border: var(--linie-haar) solid var(--asche); padding: 5px 8px; }
.rt-pflicht { font-size: 12px; line-height: 1.4; color: var(--asche); }

/* Diskografie */
.rt-diskografie { list-style: none; margin: 0; padding: 0; display: grid; font-variant-numeric: tabular-nums; }
.rt-diskografie li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding-block: 10px; border-bottom: var(--linie-haar) dashed var(--kante); }
.rt-diskografie time { color: var(--cyan); font-family: var(--font-mono); font-size: 13px; }
.rt-diskografie b { font-weight: 600; }
@media (max-width: 640px) { .rt-diskografie li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); } .rt-diskografie time { grid-column: 1 / -1; } }

/* Formularfeld */
.rt-feld { display: grid; gap: 6px; max-width: 360px; }
.rt-feld label { font-weight: 600; font-size: 14px; }
.rt-feld input, .rt-feld textarea, .rt-feld select { font: inherit; width: 100%; padding: 10px 12px; background: var(--fuge); color: var(--kalk); border: var(--linie-haar) solid var(--feld-rand); border-radius: var(--radius-0); }
.rt-feld input::placeholder { color: var(--asche); }
.rt-feld-hilfe { font-size: 13px; color: var(--asche); }
.rt-feld--fehler input { border-color: var(--fehler); }
.rt-feld-fehler { font-size: 13px; color: var(--fehler); }

/* Shop-Hinweis (Pflichtangaben, Germanized) */
.rt-shophinweis { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); font-size: 14px; line-height: 1.5; max-width: 66ch; }
.rt-shophinweis strong { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.rt-shophinweis ul { margin: 0; padding-left: 18px; }
.rt-shophinweis small { color: var(--tinte-matt); }

/* Fuß */
.rt-fuss { display: flex; flex-wrap: wrap; gap: 10px var(--space-5); justify-content: space-between; align-items: end; border-top: var(--linie-kante) solid var(--kante); padding-top: var(--space-4); font-size: 14px; color: var(--asche); }
.rt-fuss nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.rt-fuss nav a { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--asche); }
.rt-fuss nav a:hover { color: var(--kalk); }
.rt-fuss nav a.rt-weiter { color: var(--cyan); }

/* Seitenraster */
/* Seitenraster der Entwürfe: Rahmen, Startbereich, Spalten. Bausteine kommen aus ds/rottlerfuge/components/bundle.css. */
html, body { margin: 0; background: var(--fuge); }
.rt { min-height: 100%; }
.seite { max-width: var(--breite-seite); margin: 0 auto; padding-inline: clamp(16px, 3vw, 36px); padding-block: 0 var(--space-6); display: grid; gap: var(--space-7); }
.seitentitel { display: grid; gap: var(--space-3); justify-items: start; padding-top: var(--space-6); }
.seitentitel h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; line-height: .95; font-size: clamp(36px, 5vw, 56px); margin: 0; text-wrap: balance; }
.seitentitel p { margin: 0; color: var(--asche); max-width: 60ch; }
.abschnitt { display: grid; gap: var(--space-4); }
.abschnitt > h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; line-height: 1; font-size: 34px; margin: 0; }
.held { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding-top: var(--space-6); }
.held-text { display: grid; gap: var(--space-4); justify-items: start; }
.held h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; line-height: .95; font-size: clamp(44px, 6.4vw, 88px); margin: 0; text-wrap: balance; }
.held p { margin: 0; color: var(--asche); max-width: 46ch; }
.held img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--radius-1); }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.text { max-width: var(--breite-text); display: grid; gap: var(--space-4); }
.text p { margin: 0; }
.leise { color: var(--asche); }
.hinweis-zeile { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; border-block: var(--linie-haar) solid var(--kante); padding-block: var(--space-4); }
.ziel-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.ziel-liste a { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 14px; border-bottom: var(--linie-haar) dashed var(--kante); font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--kalk); }
.ziel-liste a span { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--asche); align-self: center; }
.ziel-liste a:hover { color: var(--cyan); }
.tracks { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; }
.tracks li { counter-increment: t; display: grid; grid-template-columns: 2.5em minmax(0, 1fr) auto; gap: var(--space-3); padding-block: 9px; border-bottom: var(--linie-haar) dashed var(--kante); }
.tracks li::before { content: counter(t, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--cyan); align-self: center; }
.tracks a { color: var(--kalk); text-decoration: none; }
.tracks a:hover { color: var(--cyan); }
.besetzung { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.besetzung b { display: block; font-weight: 600; }
.besetzung span { color: var(--asche); font-size: 14px; }
.papier-text { padding: var(--space-6) clamp(18px, 4vw, 56px); display: grid; gap: var(--space-4); }
.papier-text h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 28px; margin: var(--space-3) 0 0; }
.papier-text p { margin: 0; max-width: var(--breite-text); }
@media (max-width: 760px) {
  .held, .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .held { gap: var(--space-5); }
  .besetzung { grid-template-columns: minmax(0, 1fr); }
  .seite { gap: var(--space-6); }
}

.rt { --rt-schriftzug: url("../bilder/rottler-schriftzug.png"); }
@media (max-width: 640px) { .rt-nav.zu { display: none; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.springen:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: var(--cyan); color: var(--on-cyan); padding: 8px 14px; }

/* Seite Musik */
.release{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--space-6);align-items:start;border-top:var(--linie-kante) solid var(--kante);padding-top:var(--space-6)}
.release img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-1);display:block}
.release-text{display:grid;gap:var(--space-4);justify-items:start}
.release-text h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:.95;font-size:clamp(36px,4.4vw,56px);margin:0}
.dienste{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.dienste a{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.zitat{margin:0;border-left:var(--linie-kante) solid var(--petrol);padding-left:var(--space-4);color:var(--kalk);font-style:italic;max-width:60ch}
.zitat cite{display:block;font-style:normal;color:var(--asche);font-size:14px;margin-top:var(--space-2)}
@media (max-width:760px){.release{grid-template-columns:minmax(0,1fr)}}

/* Seite Rotte */
.gross{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--space-7);align-items:end;padding-top:var(--space-6)}
.gross img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);display:block}
.gross h1{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:.02em;margin:0}
.gross .jahre{font-family:var(--font-mono);color:var(--cyan);font-size:16px;margin:var(--space-3) 0 var(--space-5)}
.brief{display:grid;gap:var(--space-3);max-width:60ch}
.brief p{margin:0}
.brief .gruss{color:var(--asche)}
@media (max-width:760px){.gross{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}}

/* Seite Texte */
.texte{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-7);align-items:start}
.verzeichnis{display:grid;gap:var(--space-5)}
.verzeichnis h2{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--space-2)}
.verzeichnis ol{list-style:none;margin:0;padding:0;display:grid}
.verzeichnis a{display:block;padding-block:7px;border-bottom:var(--linie-haar) dashed var(--kante);color:var(--asche);text-decoration:none}
.verzeichnis a:hover{color:var(--kalk)}
.verzeichnis a[aria-current]{color:var(--cyan)}
.lied{padding:var(--space-7) clamp(20px,5vw,72px);display:grid;gap:var(--space-5)}
.lied header{display:grid;gap:var(--space-2)}
.lied .platte{font-family:var(--font-mono);font-size:13px;color:var(--tinte-matt)}
.lied h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(36px,4vw,52px);line-height:.95;margin:0}
.lied p{font-family:var(--font-serif);font-style:italic;font-size:20px;line-height:1.6;margin:0}
.lied nav{display:flex;justify-content:space-between;gap:var(--space-4);border-top:var(--linie-haar) solid #c9d2d6;padding-top:var(--space-4)}
@media (max-width:760px){.texte{grid-template-columns:minmax(0,1fr)}.lied p{font-size:18px}}

/* Seite Fotos */
.reiter{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.reiter a{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--asche);border:var(--linie-kante) solid var(--kante);padding:8px 14px 6px}
.reiter a[aria-current]{color:var(--on-cyan);background:var(--cyan);border-color:var(--cyan)}
.rt-fugen.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.rt-fugen.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Seite Chronik */
.jahr{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--space-5);border-top:var(--linie-kante) solid var(--kante);padding-top:var(--space-4)}
.jahr h2{font-family:var(--font-display);font-weight:900;font-size:44px;line-height:1;margin:0;color:var(--cyan)}
.eintraege{list-style:none;margin:0;padding:0;display:grid}
.eintraege li{display:grid;grid-template-columns:6.5em minmax(0,1fr) auto;gap:var(--space-4);align-items:baseline;padding-block:10px;border-bottom:var(--linie-haar) dashed var(--kante)}
.eintraege time{font-family:var(--font-mono);font-size:13px;color:var(--asche)}
.eintraege a{color:var(--kalk);text-decoration:none;font-weight:600}
.eintraege a:hover{color:var(--cyan);text-decoration:underline}
.eintraege .art{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--asche)}
@media (max-width:760px){.jahr{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}.eintraege li{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3)}.eintraege time{grid-column:1/-1}}

/* Seite Beitrag */
.beitrag{max-width:760px;display:grid;gap:var(--space-5)}
.beitrag-kopf{display:grid;gap:var(--space-3);justify-items:start;padding-top:var(--space-6)}
.beitrag-kopf h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:.95;font-size:clamp(40px,5vw,64px);margin:0}
.beitrag p{margin:0;font-size:18px;line-height:1.6}
.archivhinweis{font-family:var(--font-mono);font-size:13px;color:var(--asche);border:var(--linie-haar) solid var(--kante);padding:var(--space-3) var(--space-4)}
.bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--linie-fuge);background:#000;padding:var(--linie-fuge)}
.bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fussnote{font-size:14px!important;color:var(--asche)}
.blaettern{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;border-top:var(--linie-kante) solid var(--kante);padding-top:var(--space-4)}
.blaettern a{display:grid;gap:2px;text-decoration:none;max-width:45%}
.blaettern small{font-family:var(--font-mono);color:var(--asche);font-size:12px}
@media (max-width:760px){.blaettern a{max-width:100%}}

/* Seite Shop */
.zustand{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-6);align-items:start;border:var(--linie-haar) dashed var(--feld-rand);padding:var(--space-5)}
.zustand-text{display:grid;gap:var(--space-3);justify-items:start}
.zustand h3{font-family:var(--font-display);font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:.04em;margin:0}
@media (max-width:760px){.zustand{grid-template-columns:minmax(0,1fr)}}

/* Seite Links */
.links{max-width:560px;margin:0 auto;padding:var(--space-7) clamp(16px,4vw,24px) var(--space-6);display:grid;gap:var(--space-5);justify-items:center;text-align:center}
.links .rt-schriftzug{height:150px}
.links p{margin:0;color:var(--asche)}
.links .ziel-liste{width:100%;text-align:left}

/* Seite Recht */
.recht{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--space-6);align-items:start}
.recht-nav{display:grid;gap:2px}
.recht-nav a{padding:8px 0;border-bottom:var(--linie-haar) dashed var(--kante);color:var(--asche);text-decoration:none}
.recht-nav a[aria-current]{color:var(--cyan)}
.recht-nav small{color:var(--asche);font-size:12px;padding-top:var(--space-3)}
.papier-text address{font-style:normal}
@media (max-width:760px){.recht{grid-template-columns:minmax(0,1fr)}}

/* Seite Proberaum */
.song{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--space-6);border-top:var(--linie-kante) solid var(--kante);padding-top:var(--space-5)}
.song-kopf{display:grid;gap:var(--space-2);align-content:start;justify-items:start}
.song-kopf h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:.95;font-size:34px;margin:0}
.song-kopf p{margin:0;color:var(--asche);font-size:14px}
.fassungen{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.fassung{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--space-4);align-items:center;background:var(--kachel);border:var(--linie-haar) solid var(--kante);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2)}
.spielen{width:44px;height:44px;border:var(--linie-kante) solid var(--cyan);background:transparent;color:var(--cyan);display:grid;place-items:center;cursor:pointer;padding:0}
.spielen:hover{background:var(--cyan);color:var(--on-cyan)}
.fassung b{display:block;font-weight:600}
.fassung span{color:var(--asche);font-size:14px}
.fassung time{font-family:var(--font-mono);font-size:13px;color:var(--asche);white-space:nowrap}
.fassung.laeuft{border-color:var(--cyan)}
.spur{grid-column:2/-1;height:4px;background:var(--kante);position:relative}
.griffe{font-family:var(--font-mono);font-size:13px;color:var(--asche)}
.griffe summary{cursor:pointer;color:var(--kalk)}
.griffe pre{margin:var(--space-2) 0 0;white-space:pre-wrap;line-height:1.6}
@media (max-width:760px){.song{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}.fassung{grid-template-columns:44px minmax(0,1fr)}.fassung time{grid-column:2}}

/* Theme: Inhaltsbereich, Player-Zustände, Fuß */
.inhalt { display: grid; gap: var(--space-7); min-width: 0; }
.fuss-zusatz { font-size: 13px; }
.spur { grid-column: 2 / -1; height: 4px; background: var(--kante); position: relative; }
.fassung:not(.laeuft) .spur, .track:not(.laeuft) .spur { display: none; }
.spur i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cyan); }
.fassung.fehler b::after, .track.fehler b::after { content: " · nicht abspielbar"; color: var(--fehler); font-weight: 400; }
.stand { font-family: var(--font-mono); font-size: 12px; }

/* Musik: Trackliste mit Demo-Knopf */
.tracks li::before { content: none; }
.tracks li.track { display: grid; grid-template-columns: 2.2em 36px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding-block: 6px; }
.tracks .nummer { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); }
.track .spielen, .spielen-leer { width: 36px; height: 36px; }
.track .spur { grid-column: 3; }
.track.laeuft .track-titel, .track.laeuft .track-titel a { color: var(--cyan); }
.track-titel .stand { margin-left: var(--space-2); color: var(--asche); }
.release-beschreibung { margin: 0; max-width: 60ch; }
.release .tracks { width: 100%; }

/* Texte: Lieder untereinander, Verzeichnis bleibt am Rechner stehen */
.lieder { display: grid; gap: var(--space-5); min-width: 0; }
@media (min-width: 761px) { .verzeichnis { position: sticky; top: var(--space-4); max-height: calc(100vh - 32px); overflow: auto; } }

/* Bilder: WordPress schreibt width/height an jedes Bild; ohne height:auto verzerrt das Seitenverhältnis */
img { max-width: 100%; height: auto; }
.held img, .release img, .rt-karte img, .rt-fugen img, .rt-gedenken img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.gross img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.rt-fugen figure a { display: block; }
.beitragsbild { width: 100%; max-height: 70vh; object-fit: cover; }
.beitrag-text img { max-width: 100%; height: auto; }
.beitrag-text .alignleft { float: left; margin: 0 var(--space-4) var(--space-3) 0; max-width: 45%; }
.beitrag-text .alignright { float: right; margin: 0 0 var(--space-3) var(--space-4); max-width: 45%; }
.beitrag-text::after { content: ""; display: block; clear: both; }
.beitrag-text p { font-size: 18px; line-height: 1.6; margin: 0 0 var(--space-4); }

/* hidden gilt auch für SVG-Symbole (Abspielen/Pause) */
[hidden] { display: none !important; }