/*
  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.

  4. KRÄFTIGERE TÖNUNGEN (2026-09-24) — zweite Kundenrückmeldung "zu transparent".
     Referenz wie oben: der DS-Eintrag hält fest, dass Pastell allein nicht trägt.
     sun-100 → sun-200, sky-50 → sky-100, coral-50 → coral-100, Icon-Chips im Vollton,
     Hero-Schleier auf eine kurze Kante gekürzt, Header deckend. Auf den neuen Gründen
     Display-Typo in der dunkleren Stufe (≥3.87). Messwerte in DESIGN.md, Abschnitt 1b.

  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 */

  /* Kräftigere Tönungen — 2026-09-24, siehe Abweichung 4. Die 50/100-Pastelle
     lasen gegen Weiß wie verwaschen ("zu transparent"). */
  --sun-200:#FBE3A0;    /* ink-700 darauf 11.44 */
  --coral-100:#FFD8CE;  /* ink-700 darauf 11.01 */

  /* 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:var(--sun-200); --surface-band-cool:var(--sky-100); --surface-footer:var(--sun-200);

  /* Pro Seite überschrieben — genau ein Identitätsakzent */
  --accent:var(--sky-500);
  --accent-text:var(--sky-600);
  --accent-soft:var(--sky-100);
  --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-200);
  --accent-line:var(--sun-400);
  /* Icon-Chips im hellen Gelb statt sun-600 (las als Braun). Weißes Icon darauf
     wäre 1.6 — deshalb Ink-Icon: 8.67. */
  --chip-bg:var(--sun-400); --chip-fg:var(--ink-700);
}

/* ============================================================ 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}
/* Verein: Links in Ink mit dicker gelber Unterstreichung statt braunem Text. */
.page-verein main a:not(.btn){color:var(--ink-700); text-decoration-color:var(--sun-400); text-decoration-thickness: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-100)}
.field--warm{background:var(--sun-200)}
.field--rose{background:var(--coral-100)}
.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:var(--surface-page);   /* deckend: das durchscheinende Weiß wirkte milchig */
  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}
/* Beide Zeichen: Laden und Hilfe Verein (Kundenwunsch 2026-09-25) — die zwei Welten
   des Handoffs stehen damit auf jeder Seite nebeneinander. */
.hdr__marks{display:flex; align-items:center; gap:4px}
.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. Dritte Fassung (2026-09-24).
   Die Zwei-Zeilen-Fassung (Wortmarke mittig, darunter Viererraster mit Pillen) hat
   der Kunde als klobig zurückgewiesen. Jetzt wieder eine Zeile und sticky: links nur
   das Zeichen (der Name steht groß im Hero-Logo direkt darunter und bleibt für
   Screenreader im Link), rechts die vier Punkte. Aktiv ist eine 3px-Unterkante im
   Akzent statt der Pille — dieselbe Geste wie die Footer-Kante.
   Gemessen passt das bis 320px: 44px Zeichen + vier Ziele à ≥44px Höhe. */
@media (max-width:639.98px){
  :root{--header-h:60px; --page-pad-x:20px}
  .hdr__in{gap:var(--space-2)}
  .hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
  .hdr__brand img{width:32px; height:32px}
  .nav{flex-wrap:nowrap; gap:0}
  /* Die Kopfzeile traegt am Handy vier Punkte; "Neuigkeiten" steht dort direkt unter dem Hero */
  .nav a.nav__news{display:none}
  .nav a{
    position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
    font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
  }
  .nav a[aria-current="page"]{background:none}
  .nav a[aria-current="page"]::after{
    content:""; position:absolute; left:clamp(5px,2.2vw,10px); right:clamp(5px,2.2vw,10px);
    bottom:6px; height:3px; border-radius:var(--radius-pill); background:var(--accent-line);
  }
  /* 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;
  }
}
/* Unter 360px mit zwei Zeichen im Header: "Hilfe Verein" darf zweizeilig werden. */
@media (max-width:359.98px){
  .nav a{white-space:normal; text-align:center; line-height:1.1}
}

/* ============================================================ 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)}
/* Beide Heros stehen seit 2026-09-24 auf getöntem Grund (sky-100 / sun-200). Dort
   fielen die Buntwerte auf ~3.0-3.1 — knapp an der Schwelle. Deshalb die dunklere
   Stufe derselben Familie: auf sky-100 4.35 / 4.04 / 3.87, auf sun-200 4.43 / 4.11 / 3.93. */
.hero .hl .c-sky{color:var(--sky-500)}
/* Gelb: dunkles Gelb, das auf hellem Grund lesbar bleibt, ist zwangsläufig Braun
   (sun-600/700 wurden vom Kunden am 2026-09-24 als "braun statt gelb" zurückgewiesen).
   Deshalb helles Markengelb mit dunkler Kontur — wie die Buchstaben im Logo. Lesbar
   macht die Kontur: ink-700 gegen den Grund misst ≥11. paint-order legt sie unter die
   Füllung, damit die Buchstaben nicht dünner werden. */
.hero .hl .c-sun, .yellow-type{color:var(--sun-400)}
/* Kontur auf allen drei Zeilen (Kundenwunsch 2026-09-24) — einheitlicher Sticker-Look
   wie die Wortmarke. Da die Kontur den Kontrast trägt, stehen Blau und Coral wieder
   in ihren helleren Markenwerten sky-500 / coral-500 statt der dunklen 600er. */
/* 0.1em statt fester 6px: auf dem Handy (34px) liefen die Buchstaben sonst zu. */
.hero .hl span{-webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill}
.hero .hl .c-coral{color:var(--coral-500)}
.hero .trust b + span{color:var(--ink-700)}

.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(--chip-bg,var(--accent)); color:var(--chip-fg,#fff);  /* Icon 3.86 */
}
.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)}
/* Nur die Unterzeile treffen — .trust__chip ist selbst ein <span>, und ein blankes
   ".trust span" setzte ihm display:block und die Textfarbe: Icon aus dem Kreis
   gerutscht und dunkel statt weiß. */
.trust b + 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){
  /* Kante der Fläche folgt der Textspalte: .wrap ist zentriert, die Spalte endet bei
     50% - 590px + 24px + 560px. max() hält sie bei schmalen Fenstern bei 600px. */
  .hero{min-height:clamp(540px,64vw,680px); display:grid; --scrim-edge:max(600px, calc(50% + 10px))}
  .hero__in{align-self:center}
  .hero--shop .hero__scrim{
    /* Getönte Fläche statt Weiß, und eine kurze Kante statt eines langen Schleiers:
       vorher lag bis 820px ein halbtransparenter Weißverlauf über dem Foto und nahm ihm
       die Farbe. Jetzt deckt die Fläche die Textspalte, das Foto steht voll gesättigt. */
    background:linear-gradient(98deg,var(--sky-100) 0,var(--sky-100) var(--scrim-edge),rgba(207,230,248,0) calc(var(--scrim-edge) + 90px));
  }
  .hero--verein .hero__scrim{
    background:linear-gradient(100deg,var(--sun-200) 0,var(--sun-200) var(--scrim-edge),rgba(251,227,160,0) calc(var(--scrim-edge) + 90px));
  }
}
@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(--sky-100)}
  .hero--verein{background:var(--sun-200)}
}
.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(--chip-bg,var(--accent)); color:var(--chip-fg,#fff);  /* Icon: Grafik-Schwelle 3.0 */
  transform:rotate(-3deg);
}
.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}
/* Kundenwunsch 2026-09-24: Geschichte größer. Überschrift auf Display-Niveau, Text eine
   Stufe hoch auf 20px (vorhandene h3-Stufe, keine neue Größe) in ink-700 — er ist hier
   der Inhalt, nicht Beiwerk. Guardrail Typo-Extreme: groß wird wirklich groß. */
#ueber-uns .sh h2{font-size:clamp(32px, 4.6vw, 48px); line-height:1.05}
#ueber-uns .sh__chip{width:52px; height:52px}
#ueber-uns .sh svg{width:26px; height:26px}
.story__copy{gap:var(--space-5)}
.story__copy p{font-size:20px; line-height:1.6; color:var(--ink-700); max-width:44ch}
.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:3/2; object-fit:cover;  /* Ladenfoto ist Querformat */
  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);
}
/* Getönte Kacheln tragen auch auf dem gelben Vollband ihre Farbe (Spezifität 0,2,0,
   damit sie das Weiß von .field--solid-* .tile schlagen). Fließtext darin ink-700:
   Guardrail "keine graue Schrift auf farbigem Grund". */
.tile.tile--cool{background:var(--sky-100);   border-color:var(--sky-100);   border-top-color:var(--sky-500)}
.tile.tile--warm{background:var(--sun-200);   border-color:var(--sun-200);   border-top-color:var(--sun-600)}
.tile.tile--rose{background:var(--coral-100); border-color:var(--coral-100); border-top-color:var(--coral-500)}
.tile[class*="tile--"] p{color:var(--ink-700)}
/* 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}
/* Gleiche Behandlung wie .story__img — gekippt, weiß gerahmt, wie ein aufgelegtes Foto. */
.portrait__img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-xl); border:6px solid var(--surface-card);
  box-shadow:var(--shadow-band); transform:rotate(1.5deg);
}
/* Wie die Hero-Headline: Display-Größe, helles Markenblau mit dunkler Kontur (die Kontur
   trägt den Kontrast), leicht gekippt wie jede Headline-Zeile. */
.portrait__name{
  font:var(--t-display); font-size:clamp(40px, 6vw, 60px); letter-spacing:var(--ls-display);
  color:var(--sky-500); -webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill;
  transform:rotate(-2deg);
}

/* Anfahrt — Adresse, Zeiten, Karte */
.visit{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--space-8); align-items:stretch;
}
.visit__info{display:grid; gap:var(--space-6); align-content:center; justify-items:start}
.visit__info .label{display:block; margin-bottom:var(--space-2)}
.visit__addr{font:600 22px/1.35 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
.hours{margin:0; display:grid; grid-template-columns:auto auto; gap:var(--space-1) var(--space-6)}
.hours dt{color:var(--ink-500)}
.hours dd{margin:0; font-weight:700; color:var(--ink-700)}
/* Zwei-Klick-Karte. Vor dem Klick eine getönte Fläche mit Decor-Muster — keine Karte
   in der Karte (Guardrail), nur Inhalt auf Fläche. */
.map{
  position:relative; isolation:isolate; min-height:380px; overflow:hidden;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-band);
  background:var(--sky-100) url(decor/cool.svg) 0 0/var(--decor-size,600px) auto repeat;
  display:grid; place-items:center; padding:var(--space-8) var(--space-6);
}
.map.is-loaded{padding:0; display:block; background:var(--surface-sunk)}
.map iframe{display:block; width:100%; height:100%; min-height:380px; border:0}
.map__consent{display:grid; gap:var(--space-3); justify-items:center; text-align:center; max-width:36ch}
.map__pin{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-card);
}
.map__pin svg{width:28px; height:28px}
.map__title{font:var(--t-h3); color:var(--ink-700)}
.map__note{font:var(--t-small); color:var(--ink-700)}
.map__note a{color:var(--ink-700)}

/* 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)}
/* Auf der Vereinsseite wäre das Braun — 20px ist zu klein für die Kontur-Lösung.
   Ink trägt den Text, die gelbe Badge daneben trägt die Farbe. */
.page-verein .song__top h3{color:var(--ink-700)}  /* 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)}
/* Seit 2026-09-26 mit echten Liedern. Knopf im Vollton wie die Icon-Chips
   (weiß auf sky-500 3.86 / Ink auf sun-400 8.67 — Grafik-Schwelle 3.0). */
.iconbtn{
  width:52px; height:52px; flex:none; border-radius:50%;
  display:grid; place-items:center; border:0; cursor:pointer;
  background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff);
  box-shadow:var(--shadow-button);
  transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
}
.iconbtn:hover{transform:translateY(-2px); box-shadow:var(--shadow-card-hover)}
.iconbtn:active{transform:scale(.95); box-shadow:var(--shadow-xs)}
.iconbtn svg{width:22px; height:22px}
.iconbtn .i-pause, .is-playing .iconbtn .i-play{display:none}
.is-playing .iconbtn .i-pause{display:block}
.song__meter{flex:1; display:grid; gap:var(--space-1)}
/* Fortschritt als echter Regler — per Tastatur bedienbar, Füllung über --p aus player.js. */
.song__seek{
  -webkit-appearance:none; appearance:none; width:100%; height:24px; margin:0;
  background:transparent; cursor:pointer; --p:0%;
}
.song__seek::-webkit-slider-runnable-track{
  height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(to right,var(--accent-line) var(--p),var(--surface-sunk) var(--p));
}
.song__seek::-moz-range-track{height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)}
.song__seek::-moz-range-progress{height:8px; border-radius:var(--radius-pill); background:var(--accent-line)}
.song__seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-5px; border-radius:50%;
  background:var(--surface-card); border:3px solid var(--ink-700); box-shadow:var(--shadow-xs);
}
.song__seek::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--surface-card);
  border:3px solid var(--ink-700);
}
.song__seek:focus-visible{box-shadow:none; outline:none}
.song__seek:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring-focus)}
.song__seek:focus-visible::-moz-range-thumb{box-shadow:var(--ring-focus)}
.song__time{font:var(--t-small); color:var(--ink-500); font-variant-numeric:tabular-nums}

/* 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-text)}  /* 4.43 auf sun-200 */
.page-verein .band__copy h2{color:var(--sun-400); -webkit-text-stroke:5px var(--ink-700); paint-order:stroke fill}
.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); overflow-wrap:break-word}  /* bricht am <wbr> nach dem @ */
/* 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 .contact__note{font:var(--t-small); color:var(--ink-500)}
.contact .contact__note a{min-height:0; display:inline}
.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}
/* Social-Links im Footer. Ausgehende Verweise, sonst nichts: kein Page-Plugin,
   kein Feed, kein Follow-Button. Solche Widgets laden fremde Skripte beim
   Seitenaufruf und wuerden die Bannerfreiheit kippen, auf der die
   Datenschutzerklaerung steht — dieselbe Ueberlegung wie bei der Karte.

   Icon PLUS Text, nicht Icon allein: eine reine Icon-Reihe zwingt zum Raten und
   braucht Extra-Beschriftung. Mit Text greift .ftr__col a unveraendert weiter,
   inklusive der 30px/44px-Zielgroessen.
   Die Icons erben currentColor (--ink-700) statt Markenfarben zu tragen — im
   Fliesstext traegt Farbe keine Information, siehe DESIGN.md Abschnitt Farbe. */
.ftr__social{gap:9px}
.ftr__social svg{width:18px; height:18px; flex:none}

/* Platzhalter, solange eine Profiladresse fehlt. Unuebersehbar, damit nichts
   davon versehentlich live geht. */
.ftr__social[href^="URL-"]{
  color:var(--coral-500); border:2px dashed var(--coral-400);
  border-radius:var(--radius-xs); padding-inline:6px; font-weight:700;
}

/* Nur fuer Screenreader. */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.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}
}

/* ============================================================ DECOR
   Referenz: Handoff-DS-Komponente "Decor — flat decorative layer" (variant, opacity).
   Im Handoff gelistet, aber nie gebaut. Kundenwunsch 2026-09-24: die Flächen wirkten leer.
   Flache Spielzeug-Silhouetten, je Fläche derselbe Farbton eine Stufe dunkler — Schatten,
   kein zweites Motiv. Text darüber gemessen gegen die DUNKLERE Musterfarbe:
   ink-700 ≥ 7.41 auf allen hellen Tönen, weiß auf #2878BD = 4.65.

   Technik: vorgefärbte SVG-Kacheln (assets/decor/*.svg, erzeugt aus source.svg) als
   normales Hintergrundbild. Die erste Fassung lief über eine CSS-Maske und war in
   Safari (Mac) unsichtbar — Hintergrundbilder laufen überall.
   Kachelgröße 600px (vorher 420): auf Kundenwunsch größere Spielzeuge, gleich kräftig. */
.field--warm, .field--cool, .field--rose, .field--solid-sky, .field--solid-sun,
.band, .ftr{position:relative; isolation:isolate}
.field--warm::before, .field--cool::before, .field--rose::before,
.field--solid-sky::before, .field--solid-sun::before, .band::before, .ftr::before,
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; background-repeat:repeat;
  background-size:var(--decor-size,600px) auto; background-position:0 0;
}
.field--warm::before, .band::before, .ftr::before{background-image:url(decor/warm.svg)}
.field--cool::before, .band--cool::before{background-image:url(decor/cool.svg)}
.field--rose::before{background-image:url(decor/rose.svg)}
.field--solid-sky::before{background-image:url(decor/sky.svg); background-position:180px 120px}
.field--solid-sun::before{background-image:url(decor/sun.svg); background-position:180px 120px}

/* Hero: über Foto und Verlauf, unter dem Text. */
.hero--shop::after{background-image:url(decor/hero-shop.svg)}
.hero--verein::after{background-image:url(decor/hero-verein.svg)}
.hero::after{z-index:0}
.hero__in, .hero__mark{z-index:1}
/* Desktop: nur über der Farbfläche, zur Fotokante hin ausgeblendet. Breite statt
   SVG-Maske; der Verlauf ist eine reine Gradient-Maske, die Safari seit Jahren kann. */
@media (min-width:820px){
  .hero::after{
    right:auto; width:var(--scrim-edge);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
  }
}
@media (max-width:819.98px){ .hero__media{z-index:1} }
@media (max-width:639.98px){ :root{--decor-size:440px} }

/* ============================================================ HANDY-RHYTHMUS
   Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.
   Gemessen vorher: Startseite 4936px hoch, auf dem ersten Bildschirm nur Foto und
   Logo — die Headline begann bei ~560px. Referenz bleibt das Handoff-DS; geändert
   werden nur Verhältnisse, nicht die Bausteine. */
@media (max-width:639.98px){
  /* Headline zuerst, Foto danach als gekipptes, gerahmtes Bild — dieselbe Behandlung
     wie .story__img und das Porträt. */
  .hero{display:flex; flex-direction:column}
  .hero__in{order:1; padding-block:var(--space-6) var(--space-5)}
  .hero__media{
    order:2; height:190px; margin:0 var(--page-pad-x) var(--space-8);
    border-radius:var(--radius-xl); box-shadow:var(--shadow-band); transform:rotate(-1.5deg);
  }
  .hero__col{gap:var(--space-4)}
  .hero__logo{max-width:112px}
  /* So groß, wie "weitergegeben!" in die Spalte passt (Breite ≈ 7.2 × Schriftgröße):
     46px bei 375, 39px bei 320. Kontur dünner, sonst laufen die Punzen zu. */
  .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 7.4))}
  /* "zusammenhalten!" ist breiter: ≈ 8.0 × Schriftgröße inkl. Kontur. */
  .hero--verein .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 8.1))}

  .section{padding-block:var(--space-10)}
  .section--tight{padding-block:var(--space-8)}
  .field{padding-block:var(--space-10)}
  .sh{margin-bottom:var(--space-4)}
  .story{gap:var(--space-5)}
  .story__img{aspect-ratio:3/2}
  .story__copy p{font-size:18px}
  .hero .hl span, .portrait__name{-webkit-text-stroke-width:.075em}
  .portrait{max-width:260px; gap:var(--space-3)}
  .tiles{gap:var(--space-3)}
  .tile{padding:var(--space-5)}
  .band{gap:var(--space-5)}
  .band img{max-width:220px}
  .ftr{margin-top:var(--space-10); padding-block:var(--space-10) var(--space-6)}
}

/* ============================================================ 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)}

/* ============================================================ TOUCH-ZIELE MOBIL
   Muss ganz am Ende stehen. Die Regel im Mobile-Block weiter oben (Zeile ~245) setzt
   .ftr__col a auf min-height:44px, wird aber von der Basisregel im FOOTER-Abschnitt
   mit min-height:30px ueberschrieben — gleiche Spezifitaet, spaetere Regel gewinnt.
   Die dokumentierte 44px-Korrektur war dadurch seit laengerem wirkungslos; gemessen
   waren es auf dem Handy 30px. Hier greift sie wieder.
   Betrifft alle Fusszeilen-Links, nicht nur die Social-Links. */
@media (max-width:639.98px){
  .ftr__col a, .ftr__col span{min-height:44px; padding-block:2px}
}

/* ============================================================ NEUIGKEITEN (News-Pinnwand)
   Die Zettel rendert news.js (WEBklar-Portal, Funktion "News") in Kork mit Holzrahmen #A8733F,
   Schriften der Seite ueber die --wkn-Variablen. .news-board ist nur der statische Leerzustand im
   selben Look; news.js ersetzt ihn, sobald ein Beitrag haengt. */
.news-lead{max-width:52ch; margin:calc(var(--space-2) * -1) 0 var(--space-6) 58px; color:var(--ink-500)}
.news-pinnwand{
  --wkn-font-display:'Fredoka', 'Trebuchet MS', sans-serif;
  --wkn-font-body:'Nunito', 'Segoe UI', sans-serif;
}
.news-board{
  position:relative; border-radius:var(--radius-xl); border:12px solid #A8733F;
  padding:var(--space-12) var(--space-6); display:grid; place-items:center;
  background-color:#C08A52;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .58 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  box-shadow:inset 0 6px 14px rgba(60,32,10,.35), var(--shadow-band);
}
.news-empty{
  position:relative; max-width:34ch; text-align:center; background:#fff; border-radius:8px;
  padding:var(--space-8) var(--space-6) var(--space-6); transform:rotate(-1.5deg);
  box-shadow:0 10px 22px rgba(35,52,74,.18);
}
.news-empty::before{
  content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px;
  transform:translateX(-50%) rotate(3deg); background:rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(35,52,74,.12);
}
.news-empty__pin svg{width:34px; height:34px; color:var(--sun-700)}
.news-empty h3{font:var(--t-h2); color:var(--ink-700); margin:var(--space-2) 0}
.news-empty p{color:var(--ink-500); margin:0}
@media (max-width:700px){
  .news-lead{margin-left:0}
  .news-board{border-width:8px; padding:var(--space-10) var(--space-4); border-radius:var(--radius-l)}
}