/*
  EMMA'S SCHATZKISTE — Startseite · Hilfe Verein · Shop
  Stand 2026-09-21

  BENANNTE REFERENZ (Workspace-Regel: kein UI-Code ohne benannte Referenz)
    → design-references/entries/emmas-schatzkiste-ds.md
      Übernommen: die handgelegte Headline (jede Zeile eigene Rotation), die
      Zwei-Farbwelten-Trennung Shop=blau / Verein=gelb, die durchgehende Pill-Rundung,
      die blaustichigen Schatten, das 4px-Raster, Motion nur als Zustandsfeedback,
      Sprache/Tonalität (Deutsch, Du-Form, Satzkleinschreibung, keine Emoji).
      NICHT übernommen: der Dreifach-Akzent, die neunstufige Typo-Skala, die
      durchgefallenen Textkontraste, die fixen Pixel-Stopps im Hero-Scrim.

  BEWUSSTE ABWEICHUNGEN VOM HANDOFF — alle drei vom Auftraggeber freigegeben,
  Begründung je Guardrail:

  1. FARBE — bewusste Abweichung vom Guardrail "Ein einziger Akzent-Ton pro Seite",
     auf ausdrücklichen Kundenwunsch (2026-09-21: die disziplinierte Ein-Akzent-Fassung
     wurde als zu blass empfunden). Gleiches Vorgehen wie bei Hypno Active, wo die drei
     Logofarben ebenfalls gegen den Guardrail stehen und dokumentiert sind.

     Damit die Hierarchie trotzdem trägt, gilt eine harte Regel:
       FARBE LEBT IN FLÄCHEN UND IN DISPLAY-TYPO — NIE IM FLIESSTEXT.
     Alle drei Buntfamilien laufen wieder, aber nur als Sektionsflächen, Kachelfüllungen,
     Icon-Chips und H1-Zeilen. Jeder Fliesstext bleibt --ink-500 / --ink-700. Damit
     kollidieren die Farben nie miteinander um dieselbe Leseebene.
     Die Seitenidentität bleibt erhalten: --accent* ist weiter pro Seite gesetzt
     (Startseite Sky, Verein Sun) und regiert Icons, Rahmen und aktiven Nav-Zustand.
     Coral bleibt ausschliesslich Handlungsfarbe der primären Buttons.

  2. KONTRAST (Guardrail "Graue Schrift auf farbigem Grund")
     Gemessen, nicht geschätzt:
       ink-300 #8B94A0 auf sun-100 #FDF4DC ....  2.80  durchgefallen (§19-Zeile!)
       weiß auf coral-400 #F4715A ............... 2.85  durchgefallen
       weiß auf sky-400 #4A9FE0 ................. 2.87  durchgefallen
       ink-500 #4A5560 auf sun-100 .............. 6.94  bestanden
     Auf farbigem Grund steht Text jetzt in --ink-700 (13.20 auf Creme).
     Primärbutton: weiß auf --coral-600 #C8402B (4.97), Hover #B03422 (6.25),
     Press #A82F1E (6.80) — dunkelt bei jedem Schritt nach, nie heller.
     Header: weiß statt sky-400, damit die Navigation nicht weiß auf Hellblau steht.

  3. TYPO-SKALA (Guardrail "Typo-Extreme, kein Mittelmaß")
     Neun gleichmäßige Stufen (56/42/32/24/19/17/15/13/11) auf sechs reduziert.
     Gestrichen: 42, 24, 19, 15. Bleibt: Display / 30 / 20 / 17 / 13 / 11.

  ASSETS: Die Client-Logos kamen als JPEG mit eingebackenem weissem Kasten, im Handoff
  per mix-blend-mode:multiply kaschiert — das bricht auf jedem dunkleren Grund. Beide sind
  jetzt echt freigestellt (Flood-Fill ueber randverbundenes Nahe-Weiss + weiche Kante,
  800px, 96-Farben-Palette, 67/68 KB) und liegen als assets/logo-*.png. Kein Blend-Mode
  mehr noetig. Originale: design_handoff_emmas_schatzkiste/assets/.

  FONTS: Fredoka + Nunito. Laut Handoff Platzhalter für einen nicht gelieferten
  Markenfont — ersetzen, sobald echte Binaries da sind. Kein Inter, kein System-Font.
*/

/* ============================================================ TOKENS */
:root{
  /* Marke, unverändert aus dem Handoff */
  --sky-400:#4A9FE0; --sky-500:#2E86D0; --sky-600:#1F6BAB;
  --sky-50:#EAF4FC;  --sky-100:#CFE6F8;
  --sun-400:#F5C13B; --sun-600:#A87811; --sun-100:#FDF4DC;
  --coral-400:#F4715A; --coral-500:#DB513A; --coral-50:#FFF1EE;

  /* Ergänzt für AA-Textkontrast — siehe Abweichung 2 */
  --sun-700:#8F6510;    /* gelber Text in Body-Größe: 4.74 auf Creme */
  --coral-600:#C8402B;  /* Primärbutton, weiß darauf: 4.97 */
  --coral-700:#B03422;  /* Hover: 6.25 */
  --coral-800:#A82F1E;  /* Press: 6.80 */

  /* Getönte Neutrale (blaustichig, kein reines Grau) */
  --ink-300:#8B94A0; --ink-500:#4A5560; --ink-700:#232A33;
  --line-soft:#EDEFF2; --line:#DFE3E8;

  --surface-page:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F5F7FA;
  --surface-band:#FDF4DC; --surface-band-cool:#EAF4FC; --surface-footer:#FDF4DC;

  /* Pro Seite überschrieben — genau ein Identitätsakzent */
  --accent:var(--sky-500);
  --accent-text:var(--sky-600);
  --accent-soft:var(--sky-50);
  --accent-line:var(--sky-400);

  /* Typo — sechs Stufen */
  --t-display: 700 clamp(34px, 7.2vw, 60px)/1.02 'Fredoka', 'Trebuchet MS', sans-serif;
  --t-h2:      600 clamp(24px, 3.1vw, 30px)/1.12 'Fredoka', 'Trebuchet MS', sans-serif;
  --t-h3:      600 20px/1.3 'Fredoka', 'Trebuchet MS', sans-serif;
  --t-body:    400 17px/1.65 'Nunito', 'Segoe UI', sans-serif;
  --t-small:   400 13px/1.5 'Nunito', 'Segoe UI', sans-serif;
  --t-label:   700 11px/1.4 'Nunito', 'Segoe UI', sans-serif;
  --ls-display:-0.01em; --ls-caps:0.08em;

  /* Raster 4px. --space-14 existiert im Handoff nicht und fehlt hier bewusst auch. */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;

  --page-max:1180px; --page-pad-x:24px; --gutter-grid:20px; --header-h:64px;

  --radius-xs:6px; --radius-s:10px; --radius-m:14px; --radius-l:20px; --radius-xl:28px;
  --radius-band:24px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(35,52,74,.06);
  --shadow-card:0 2px 10px rgba(35,52,74,.07);
  --shadow-card-hover:0 10px 24px rgba(35,52,74,.13);
  --shadow-band:0 4px 22px rgba(35,52,74,.09);
  --shadow-button:0 2px 0 rgba(35,52,74,.10);
  --ring-focus:0 0 0 3px var(--sky-100), 0 0 0 5px var(--sky-400);

  --ease:cubic-bezier(.2,.6,.3,1);
  --dur-color:120ms; --dur-lift:200ms; --dur-large:340ms;
}

/* Vereinsseite: gelbe Welt. Einziger Akzentwechsel im ganzen System. */
.page-verein{
  --accent:var(--sun-600);
  --accent-text:var(--sun-700);
  --accent-soft:var(--sun-100);
  --accent-line:var(--sun-400);
}

/* ============================================================ BASE */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--surface-page); color:var(--ink-500);
  font:var(--t-body); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; letter-spacing:var(--ls-display); color:var(--ink-700)}
h1{font:var(--t-display)} h2{font:var(--t-h2)} h3{font:var(--t-h3)}
p{margin:0}
img{max-width:100%; display:block}
a{color:var(--accent-text); text-underline-offset:3px}
a:hover{color:var(--sky-600)}

.wrap{max-width:var(--page-max); margin:0 auto; padding-inline:var(--page-pad-x)}
.section{padding-block:var(--space-16)}
.section--tight{padding-block:var(--space-12)}

/* Getoente Vollflaechen statt durchgehendem Weiss. Geben der Seite Rhythmus und
   tragen den groessten Teil der Farbe — ohne einen einzigen Fliesstext einzufaerben. */
.field{padding-block:var(--space-16)}
.field--cool{background:var(--sky-50)}
.field--warm{background:var(--sun-100)}
.field--rose{background:var(--coral-50)}
.field--sunk{background:var(--surface-sunk)}

/* Ein gesaettigtes Vollflaechen-Band pro Seite. Pastelltoene allein trugen die Seite
   nicht — sie verschwinden gegen Weiss. Gemessen: Weiss auf --sky-500 = 3.86, reicht
   fuer Ueberschriften ab 24px (Schwelle 3.0), NICHT fuer Fliesstext; deshalb steht auf
   dem blauen Band nur die Ueberschrift, der Fliesstext sitzt in den weissen Kacheln.
   --ink-700 auf --sun-400 = 8.67 und ist ueberall zulaessig. */
.field--solid-sky{background:var(--sky-500)}
.field--solid-sky h2{color:#fff}
.field--solid-sky .lede{color:#fff}
.field--solid-sun{background:var(--sun-400)}
.field--solid-sun h2, .field--solid-sun .lede{color:var(--ink-700)}
.field--solid-sky .sh__chip, .field--solid-sun .sh__chip{background:var(--surface-card); color:var(--ink-700)}
.field--solid-sky .tile, .field--solid-sun .tile{background:var(--surface-card)}
.lede{font:var(--t-body); color:var(--ink-500); max-width:56ch}
.label{
  font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--ink-500);
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface-card); color:var(--ink-700); padding:12px 18px;
  border-radius:var(--radius-pill); box-shadow:var(--shadow-card);
}
.skip:focus{left:var(--page-pad-x); top:12px}

/* ============================================================ HEADER */
/* Weiß statt --sky-400: weiße Navigation auf Hellblau misst 2.87 und fällt durch. */
.hdr{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6);
}
.hdr__brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font:var(--t-h3); color:var(--ink-700); white-space:nowrap;
  min-height:44px;   /* Touch-Ziel, auch auf Tablets */
}
.hdr__brand img{width:34px; height:34px; object-fit:contain}
.nav{display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap}
/* 44px hoch statt 31: Tablets sind Touch-Geraete, WCAG 2.5.5 will 44x44.
   Passt weiterhin in den 64px hohen Header. */
.nav a{
  display:flex; align-items:center; min-height:44px;
  padding:8px 14px; border-radius:var(--radius-pill);
  font:600 15px/1 'Nunito','Segoe UI',sans-serif; color:var(--ink-500);
  text-decoration:none; transition:color var(--dur-color) var(--ease),
    background var(--dur-color) var(--ease);
}
.nav a:hover{color:var(--ink-700); background:var(--surface-sunk)}
.nav a[aria-current="page"]{color:var(--ink-700); background:var(--accent-soft)}

/* MOBILER HEADER — unter 640px.
   Vorher: eine Zeile, Nav horizontal scrollend, Wortmarke per font-size:0 versteckt.
   Gemessen war das zu eng — Nav-Links 28px hoch, Wortmarken-Link 32px breit, und bei
   320/360px scrollte die Nav seitlich weg, ohne dass man es sieht.
   Jetzt: zwei Zeilen, Nav als Viererraster ueber die volle Breite, jedes Ziel >=44px
   (WCAG 2.5.5). Der Header ist dafuer nicht mehr sticky — zwei Zeilen wuerden sonst
   dauerhaft ein Sechstel des Handydisplays wegnehmen. Auf fuenf Unterseiten ist eine
   mitlaufende Navigation kein Verlust. */
@media (max-width:639.98px){
  .hdr{position:static; height:auto}
  html{scroll-padding-top:16px}
  .hdr__in{
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    height:auto; gap:6px; padding-block:10px;
  }
  .hdr__brand{
    justify-content:center; min-height:44px; gap:10px;
    font:600 18px/1.2 'Fredoka','Trebuchet MS',sans-serif;
  }
  .hdr__brand img{width:30px; height:30px}
  .nav{
    display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
    flex-wrap:nowrap; overflow:visible;
  }
  .nav a{
    min-height:44px; display:flex; align-items:center; justify-content:center;
    padding:6px 4px; font-size:13px; line-height:1.15; text-align:center;
    white-space:normal; hyphens:auto;
  }
  /* Fusszeilen-Links waren 21px hoch und damit unter jeder Touch-Schwelle. */
  .ftr__col ul{gap:2px}
  .ftr__col a, .ftr__col span{
    display:flex; align-items:center; min-height:44px; padding-block:2px;
  }
}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 22px; border-radius:var(--radius-pill); border:1px solid transparent;
  font:700 16px/1 'Nunito','Segoe UI',sans-serif; text-decoration:none; cursor:pointer;
  transition:background var(--dur-color) var(--ease), color var(--dur-color) var(--ease),
    transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
}
.btn svg{width:18px; height:18px; flex:none}
/* Primär: weiß auf coral-600 = 4.97. Dunkelt bei Hover und Press weiter nach. */
.btn--primary{background:var(--coral-600); color:#fff; box-shadow:var(--shadow-button)}
.btn--primary:hover{background:var(--coral-700); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
.btn--primary:active{background:var(--coral-800); transform:scale(.97); box-shadow:var(--shadow-xs)}
.btn--secondary{background:var(--surface-card); color:var(--ink-700); border-color:var(--line); box-shadow:var(--shadow-button)}
.btn--secondary:hover{background:var(--surface-sunk); color:var(--ink-700); transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
.btn--secondary:active{transform:scale(.97); box-shadow:var(--shadow-xs)}
.btn--l{padding:15px 26px; font-size:17px}

/* ============================================================ HERO */
.hero{position:relative; overflow:hidden; background:var(--accent-soft)}
.hero__media{position:absolute; inset:0; background-size:cover; background-position:74% 45%}
.hero__scrim{position:absolute; inset:0}
.hero__in{position:relative; width:100%; padding-block:var(--space-16)}
/* width:100% ist nötig: .wrap bringt margin:0 auto mit, und im Grid-Container
   schluckt ein Auto-Margin das Stretch — der Block schrumpft sonst auf Max-Content. */
.hero__col{display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%,560px)}
.hero__logo{width:100%; max-width:200px}

/* Der eine Move der Referenz: jede Zeile einzeln gekippt. Bleibt.
   Neu ist die Farbdisziplin — Ink trägt, ein Wort trägt den Akzent. */
.hl{display:grid; justify-items:start; gap:2px; line-height:1.05}
.hl span{display:inline-block}
.hl span:nth-child(1){transform:rotate(-2.5deg)}
.hl span:nth-child(2){transform:rotate(1.5deg) translateX(14px)}
.hl span:nth-child(3){transform:rotate(-1deg)}
/* Display-Typo darf Farbe tragen: bei >=24px gilt die Large-Text-Schwelle 3.0,
   alle drei Marken-Buntwerte liegen darueber (auf Weiss 3.86 / 3.92 / 4.00,
   auf Creme 3.52 / 3.57 / 3.65). Im Fliesstext waere keiner davon zulaessig. */
.hl .c-sky{color:var(--sky-500)}
.hl .c-sun{color:var(--sun-600)}
.hl .c-coral{color:var(--coral-500)}
.hl .on{color:var(--accent)}

.hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}

.pill-eyebrow{
  display:inline-block; background:var(--sun-400); color:var(--ink-700);
  font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
  padding:7px 15px; border-radius:var(--radius-pill); transform:rotate(-2deg);
}

.trusts{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)}
.trust{display:flex; align-items:center; gap:10px}
.trust__chip{
  width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
}
.trust svg{width:15px; height:15px; flex:none}
.trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
.trust span{display:block; font:var(--t-small); color:var(--ink-500)}

/* Schwachstelle des Handoffs behoben: die fixen Stopps (430/560/820px) decken das Foto
   unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
   Text darunter auf voller Fläche. */
@media (min-width:820px){
  .hero{min-height:clamp(540px,64vw,680px); display:grid}
  .hero__in{align-self:center}
  .hero--shop .hero__scrim{
    background:linear-gradient(98deg,#FFF 0,#FFF 430px,rgba(255,255,255,.92) 560px,rgba(255,255,255,0) 820px);
  }
  .hero--verein .hero__scrim{
    background:linear-gradient(100deg,var(--sun-100) 0,var(--sun-100) 430px,rgba(253,244,220,.92) 560px,rgba(253,244,220,0) 820px);
  }
}
@media (max-width:819.98px){
  .hero__media{position:relative; inset:auto; height:clamp(200px,44vw,320px)}
  .hero__scrim{display:none}
  .hero__in{padding-block:var(--space-10)}
  .hero--shop{background:var(--surface-page)}
  .hero--verein{background:var(--sun-100)}
}
.hero--verein{border-bottom:6px solid var(--sun-400)}
/* Seit im Hero ein echtes Foto liegt, braucht das Zeichen einen eigenen Grund —
   auf dem gemusterten Stoff war die feine Schrift darin nicht mehr lesbar. */
.hero__mark{
  position:absolute; right:var(--page-pad-x); bottom:var(--space-6);
  width:clamp(110px,16vw,180px); transform:rotate(-3deg);
  background:rgba(255,255,255,.94); padding:12px; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-band); box-sizing:content-box;
}
@media (max-width:819.98px){ .hero__mark{display:none} }

/* ============================================================ SECTIONS */
.sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)}
.sh__chip{
  width:44px; height:44px; flex:none; border-radius:var(--radius-m);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
  transform:rotate(-3deg);
}
.field--cool .sh__chip, .field--warm .sh__chip, .field--rose .sh__chip{background:var(--surface-card)}
.sh svg{width:22px; height:22px; flex:none}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start}
.cols p{max-width:52ch}

.story{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--space-8); align-items:center;
}
.story__copy{display:grid; gap:var(--space-4)}
.story__copy p{max-width:50ch}
.story__img{
  /* height:auto ist noetig: die width/height-Attribute im HTML (gegen Layout-Shift)
     machen beide Achsen definit, dann ignoriert der Browser aspect-ratio. */
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-band);
  transform:rotate(-1.5deg);
}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)}

/* Kacheln tragen Farbe als Fuellung — der Text darin bleibt durchgehend
   ink-700/ink-500 (12.99-13.20 bzw. 6.83-6.94 auf allen drei Toenen). */
.tile{
  background:var(--surface-card); border:1px solid var(--line-soft);
  border-top:4px solid var(--accent-line);
  border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
  transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
}
.tile--cool{background:var(--sky-50);   border-color:#D6E8F7; border-top-color:var(--sky-400)}
.tile--warm{background:var(--sun-100);  border-color:#F2E5C4; border-top-color:var(--sun-400)}
.tile--rose{background:var(--coral-50); border-color:#F8DED8; border-top-color:var(--coral-400)}
/* Auf getoentem Feld kehren sich die Kacheln um: weiss auf Farbe statt Farbe auf Weiss. */
.field--cool .tile, .field--warm .tile, .field--rose .tile{background:var(--surface-card)}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
.tile p{color:var(--ink-500)}
.tile .btn{justify-self:start; margin-top:var(--space-1)}

/* Opa Martin */
/* 560px waren als leeres Platzhalterquadrat eine tote Flaeche mitten auf der Seite.
   Auf 400px verkleinert und auf ein Cremefeld gesetzt, damit die Luecke wie ein
   vorbereiteter Rahmen liest und nicht wie ein Loch. */
.portrait{max-width:400px; margin-inline:auto; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
.portrait__slot{
  width:100%; aspect-ratio:1/1; border-radius:var(--radius-xl);
  background:var(--surface-card); border:2px dashed var(--sun-400);
  display:grid; place-items:center; padding:var(--space-6);
}
.portrait__slot span{font:var(--t-small); color:var(--ink-700); max-width:22ch}
.portrait__slot img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-xl)}
.portrait__name{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}

/* Audio */
.song{
  max-width:520px; margin-inline:auto; background:var(--surface-card);
  border:1px solid var(--line-soft); border-radius:var(--radius-l);
  box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-4);
}
.song__top{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.song__top h3{color:var(--accent-text)}  /* nicht --accent: 20px/600 zaehlt nicht als
   Large Text, sky-500 misst dort nur 3.86. accent-text = 5.60 bzw. 5.20. */
.badge{
  font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius-pill);
  background:var(--sun-400); color:var(--ink-700);   /* 8.67 */
}
.song__row{display:flex; align-items:center; gap:var(--space-4)}
.iconbtn{
  width:44px; height:44px; flex:none; border-radius:var(--radius-circle, 50%);
  display:grid; place-items:center; border:1px solid var(--line);
  background:var(--sun-100); color:var(--ink-300); cursor:not-allowed;
}
.iconbtn svg{width:18px; height:18px}
.song__meter{flex:1; display:grid; gap:var(--space-2)}
.song__track{height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)}
.song__time, .song__note{font:var(--t-small); color:var(--ink-500)}

/* Band */
.band{
  background:var(--surface-band); border-radius:var(--radius-band);
  padding:clamp(24px,4vw,44px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--space-8); align-items:center;
}
.band--cool{background:var(--surface-band-cool)}
.band__copy{display:grid; gap:var(--space-4); justify-items:start}
/* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */
.band__copy p{color:var(--ink-700); max-width:46ch}
.band__copy h2{color:var(--accent)}
.band__copy .label{color:var(--ink-700)}
.band img{width:100%; max-width:380px; justify-self:center}

/* Kontakt */
.contacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gutter-grid)}
.contact{
  background:var(--surface-card); border:1px solid var(--line-soft);
  border-left:4px solid var(--accent-line);
  border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  padding:var(--space-6); display:grid; gap:var(--space-2);
}
.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); word-break:break-word}
/* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch —
   einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am
   Handy zuverlaessig antippen. */
.contact a{
  color:var(--accent-text); display:inline-flex; align-items:center;
  min-height:44px; text-decoration:underline; text-underline-offset:3px;
}

/* Shop-Platzhalter */
.parked{min-height:100vh; display:flex; flex-direction:column}
.parked main{flex:1; display:grid; place-items:center; padding:var(--space-20) var(--page-pad-x)}
.parked__in{max-width:620px; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
.parked__in h1{font:var(--t-h2); color:var(--accent)}
.parked__in p{max-width:48ch}

/* ============================================================ RECHTSTEXTE */
.prose{max-width:74ch; margin-inline:auto; display:grid; gap:var(--space-5)}
.prose h1{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
.prose h2{
  font:var(--t-h3); color:var(--ink-700); margin-top:var(--space-6);
  padding-top:var(--space-4); border-top:2px solid var(--accent-line);
}
.prose h3{font:600 17px/1.35 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); margin-top:var(--space-2)}
.prose p, .prose li{color:var(--ink-500)}
.prose ul{margin:0; padding-left:1.2em; display:grid; gap:var(--space-2)}
.prose dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-5)}
.prose dt{font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-700); padding-top:4px}
.prose dd{margin:0; color:var(--ink-700)}
/* Telefon und E-Mail in der Angabenliste stehen allein, nicht im Satz — sie brauchen
   ein echtes Ziel. Links mitten im Fliesstext bleiben unveraendert: fuer die gilt die
   Inline-Ausnahme von WCAG 2.5.8. */
.prose dd a{display:inline-flex; align-items:center; min-height:44px}
.prose__intro{
  background:var(--accent-soft); border-radius:var(--radius-l);
  padding:var(--space-5); color:var(--ink-700);
}
/* Offene Stellen, die der Betreiber noch fuellen muss — im Quelltext und auf der
   Seite unuebersehbar, damit nichts davon versehentlich live geht. */
.todo{
  display:inline-block; background:var(--coral-50); color:var(--ink-700);
  border:2px dashed var(--coral-400); border-radius:var(--radius-xs);
  padding:1px 8px; font-weight:700;
}
.prose__warn{
  background:var(--coral-50); border:2px dashed var(--coral-400);
  border-radius:var(--radius-l); padding:var(--space-5); color:var(--ink-700);
}
.prose__warn strong{color:var(--ink-700)}

/* ============================================================ FOOTER */
.ftr{
  background:var(--surface-footer); padding-block:var(--space-16) var(--space-8);
  margin-top:var(--space-16); border-top:6px solid var(--accent-line);
}
.parked .ftr{margin-top:0}
.ftr__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--space-8)}
.ftr__col h3{font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-700); margin-bottom:var(--space-3)}
.ftr__col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
/* Guardrail + Kontrast: auf Creme kein ink-300 (2.80). Ink-700 = 13.20. */
/* Waren 21px hoch und verfehlten damit sogar die AA-Untergrenze von 24px
   (WCAG 2.5.8). Auf dem Handy weiter oben auf 44px gesetzt. */
.ftr__col a, .ftr__col span{
  display:flex; align-items:center; min-height:30px;
  font:400 15px/1.4 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); text-decoration:none;
}
.ftr__col a:hover{color:var(--sky-600); text-decoration:underline}
.ftr__legal{
  margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(35,52,74,.12);
  font:var(--t-small); color:var(--ink-700); max-width:80ch;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .hl span, .pill-eyebrow, .hero__mark{transform:none}
}

/* ============================================================ MOBILE TYPOGRAFIE
   Muss hinter allen Basisregeln stehen: .badge und .ftr__col h3 setzen ihre Groesse
   ueber die font-Kurzform, und bei gleicher Spezifitaet gewinnt die spaetere Regel.
   11px Versalschrift ist auf Handygroesse zu knapp — 12px ist die Untergrenze. */
@media (max-width:639.98px){
  .label, .ftr__col h3, .badge{font-size:12px}
}

/* ============================================================ FOKUS
   Muss ganz am Ende stehen. Der Ring ist eine box-shadow, und .btn/.tile/.song
   setzen selbst eine — bei gleicher Spezifitaet gewinnt die spaetere Regel.
   Stand vorher im Base-Block und wurde von .btn--primary still ueberschrieben:
   Tastaturnutzer sahen auf Buttons gar keinen Fokus. */
:focus-visible{
  outline:none;
  box-shadow:var(--ring-focus);
  border-radius:var(--radius-xs);
}
/* Elemente mit eigener Schattierung: Ring davor, eigener Schatten dahinter. */
.btn:focus-visible{border-radius:var(--radius-pill); box-shadow:var(--ring-focus), var(--shadow-button)}
.nav a:focus-visible, .hdr__brand:focus-visible{border-radius:var(--radius-pill)}
.iconbtn:focus-visible{border-radius:50%}
.contact a:focus-visible, .ftr__col a:focus-visible{border-radius:var(--radius-xs)}