/* ==========================================================================
   Herdecke Genießen 2027 — Stylesheet v0.6 (09.10.2026)
   Eine Seite statt Website + App. Richtung A „Der nächste Abend“.
   Farbe (Entscheidung 09.10.2026):
     · zwischen den Terminen: Rot der Wortmarke (#FF0000)
     · am Tag selbst: die Farbe des Abends (body.hg-tag[data-abend])
     · Schrift auf Farbe ist Weiß oder Schwarz — was den Kontrast hält (>= 4,5:1).
       Schwarz auf: Rot, Tschechien-Gold, Niederlande-Orange. Weiß auf allen anderen.
     · Farbe als Text auf Papier nur in der dunklen Stufe (--fg-accent).
   Aufbau: 1 Schrift · 2 Palette · 3 Semantik · 4 Grundlagen · 5 Basis · 6 Bausteine · 7 Desktop · 8 Druck
   ========================================================================== */

/* ---------- 1. Schrift (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-Italic-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-Italic-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ---------- 2. Palette (nur hier stehen Farbwerte) ---------- */
:root {
  color-scheme: light dark;

  --rot-base:   #FF0000;  /* fest: Rot der Wortmarke */
  --rot-hell:   #FF3D33;  /* Hover; Schwarz darauf 5,9:1 */
  --rot-b4:     #A30000;  /* Rot als Text auf Papier 8:1 */
  --rot-a7:     #FBE9E8;

  --nacht-base: #0F1B2D;
  --nacht-b1:   #0B1421;
  --nacht-a1:   #1E3A5F;
  --nacht-a8:   #D9E0EA;

  --tinte-base: #1E1B18;
  --tinte-a3:   #5A5550;
  --tinte-a6:   #A8A29B;

  --papier-base:#FFF8F2;
  --papier-b1:  #F1E8DF;
  --papier-b2:  #E3D8CE;
  --weiss:      #FFFFFF;
  --schwarz:    #000000;

  --gruen-base: #1F5229;  --gruen-a7: #E6F0E8;
  --blau-base:  #24567A;  --blau-a7:  #E7EFF4;
  --amber-a7:   #FFF3D4;  --amber-b4: #6B4A00;

  /* Abend-Farben (Landschaft/Küche, nicht Flagge) */
  --akzent-feb: #0F1B2D; --akzent-dk: #2F6B8F; --akzent-pl: #8A5A2B; --akzent-cz: #C79A2E;
  --akzent-at:  #4F7A3A; --akzent-ch: #6D6A66; --akzent-fr: #6B3B6E; --akzent-nl: #E07A1F;
}

/* ---------- 3. Semantik (Bausteine benutzen nur diese) ---------- */
:root {
  --bg:               var(--papier-base);
  --bg-elevated:      var(--weiss);
  --bg-subtle:        var(--papier-b1);
  --bg-deep:          var(--nacht-base);

  --bg-accent:        var(--rot-base);     /* Kopf, Hauptknopf */
  --bg-accent-hover:  var(--rot-hell);
  --bg-accent-faint:  var(--rot-a7);
  --fg-on-accent:     var(--schwarz);      /* Schrift auf der Akzentfläche */
  --fg-accent:        var(--rot-b4);       /* Akzent als Text auf Papier */
  --border-accent:    var(--rot-b4);

  --border-subtle:    var(--papier-b2);
  --border-strong:    var(--tinte-base);
  --border-on-deep:   rgba(255,255,255,.18);

  --fg:               var(--tinte-base);
  --fg-muted:         var(--tinte-a3);
  --fg-faint:         var(--tinte-a6);
  --fg-on-deep:       rgba(255,255,255,.92);
  --fg-on-deep-muted: var(--nacht-a8);
  --fg-link:          var(--fg-accent);
  --fg-focus:         var(--tinte-base);

  --bg-positive: var(--gruen-a7); --fg-positive: var(--gruen-base);   /* läuft */
  --bg-notice:   var(--amber-a7); --fg-notice:   var(--amber-b4);     /* verlegt */
  --bg-negative: var(--tinte-base); --fg-negative: var(--weiss);      /* abgesagt: dunkel, nicht rot — die Seite ist rot */
  --bg-informative: var(--blau-a7); --fg-informative: var(--blau-base);
  --fg-fehler:   var(--rot-b4);                                      /* Formularfehler */

  --akzent:      var(--tinte-a6);          /* Punkt in Listen, je Termin via [data-abend] */
}
[data-abend="feb"] { --akzent: var(--akzent-feb); } [data-abend="dk"] { --akzent: var(--akzent-dk); }
[data-abend="pl"]  { --akzent: var(--akzent-pl); }  [data-abend="cz"] { --akzent: var(--akzent-cz); }
[data-abend="at"]  { --akzent: var(--akzent-at); }  [data-abend="ch"] { --akzent: var(--akzent-ch); }
[data-abend="fr"]  { --akzent: var(--akzent-fr); }  [data-abend="nl"] { --akzent: var(--akzent-nl); }

/* Abendseiten immer, alle Seiten ab 3 Tage vor einem Abend: die ganze Seite nimmt die Farbe des Abends. Schrift darauf: Weiß oder Schwarz. */
body.hg-tag[data-abend="feb"] { --bg-accent: #0F1B2D; --bg-accent-hover: #1E3A5F; --fg-on-accent: #FFFFFF; --fg-accent: #1E3A5F; --border-accent: #1E3A5F; --bg-accent-faint: #ECF0F5; }
body.hg-tag[data-abend="dk"]  { --bg-accent: #2F6B8F; --bg-accent-hover: #275A78; --fg-on-accent: #FFFFFF; --fg-accent: #24567A; --border-accent: #24567A; --bg-accent-faint: #E7EFF4; }
body.hg-tag[data-abend="pl"]  { --bg-accent: #8A5A2B; --bg-accent-hover: #744B23; --fg-on-accent: #FFFFFF; --fg-accent: #6E4620; --border-accent: #6E4620; --bg-accent-faint: #F3EADF; }
body.hg-tag[data-abend="cz"]  { --bg-accent: #C79A2E; --bg-accent-hover: #D4AB48; --fg-on-accent: #000000; --fg-accent: #6E5208; --border-accent: #6E5208; --bg-accent-faint: #F6EDD3; }
body.hg-tag[data-abend="at"]  { --bg-accent: #4F7A3A; --bg-accent-hover: #436832; --fg-on-accent: #FFFFFF; --fg-accent: #3C5E2B; --border-accent: #3C5E2B; --bg-accent-faint: #E8F0E3; }
body.hg-tag[data-abend="ch"]  { --bg-accent: #6D6A66; --bg-accent-hover: #5C5956; --fg-on-accent: #FFFFFF; --fg-accent: #55524F; --border-accent: #55524F; --bg-accent-faint: #EEEDEB; }
body.hg-tag[data-abend="fr"]  { --bg-accent: #6B3B6E; --bg-accent-hover: #5A315D; --fg-on-accent: #FFFFFF; --fg-accent: #6B3B6E; --border-accent: #6B3B6E; --bg-accent-faint: #F1E7F2; }
body.hg-tag[data-abend="nl"]  { --bg-accent: #E07A1F; --bg-accent-hover: #E88D3C; --fg-on-accent: #000000; --fg-accent: #8F4307; --border-accent: #8F4307; --bg-accent-faint: #FBE8D6; }

/* Dunkel: gleiche Rollen, andere Werte. Die Akzentfläche (Rot / Abendfarbe) bleibt. */
@media (prefers-color-scheme: dark) { :root:not(.theme-light) {
  --bg: #151515; --bg-elevated: #1F1F1F; --bg-subtle: #2A2A2A; --bg-deep: var(--nacht-b1);
  --border-subtle: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.85);
  --fg: rgba(255,255,255,.92); --fg-muted: rgba(255,255,255,.68); --fg-faint: rgba(255,255,255,.45); --fg-focus: #FFFFFF;
  --bg-positive: #1C3322; --fg-positive: #8FD3A0; --bg-notice: #3A2E10; --fg-notice: #F2D27E;
  --bg-negative: #FFFFFF; --fg-negative: #000000; --bg-informative: #17293A; --fg-informative: #9CC7E6; --fg-fehler: #FF9B97;
} }
.theme-dark {
  --bg: #151515; --bg-elevated: #1F1F1F; --bg-subtle: #2A2A2A; --bg-deep: var(--nacht-b1);
  --border-subtle: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.85);
  --fg: rgba(255,255,255,.92); --fg-muted: rgba(255,255,255,.68); --fg-faint: rgba(255,255,255,.45); --fg-focus: #FFFFFF;
  --bg-positive: #1C3322; --fg-positive: #8FD3A0; --bg-notice: #3A2E10; --fg-notice: #F2D27E;
  --bg-negative: #FFFFFF; --fg-negative: #000000; --bg-informative: #17293A; --fg-informative: #9CC7E6; --fg-fehler: #FF9B97;
}
/* Akzent als Text und als zarte Fläche im Dunkeln: aus der Akzentfläche gemischt (gilt für Rot und jede Abendfarbe) */
@media (prefers-color-scheme: dark) { :root:not(.theme-light) body { --fg-accent: color-mix(in srgb, var(--bg-accent) 45%, #FFFFFF); --border-accent: color-mix(in srgb, var(--bg-accent) 45%, #FFFFFF); --bg-accent-faint: color-mix(in srgb, var(--bg-accent) 22%, #151515); } }
.theme-dark body { --fg-accent: color-mix(in srgb, var(--bg-accent) 45%, #FFFFFF); --border-accent: color-mix(in srgb, var(--bg-accent) 45%, #FFFFFF); --bg-accent-faint: color-mix(in srgb, var(--bg-accent) 22%, #151515); }

/* ---------- 4. Grundlagen ---------- */
:root {
  --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;
  --radius-2: 6px; --radius-3: 10px; --radius-4: 12px; --radius-pill: 9999px;
  --shadow-lg: 0 16px 40px rgba(15,27,45,.20), 0 0 1px rgba(0,0,0,.25);
  --z-tabs: 90; --z-toast: 400;
  --control-h: 52px;
  --container: 640px; --container-wide: 1040px; --measure: 62ch;
  --tabs-h: 64px;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-text:    "Source Sans 3", "Segoe UI", Roboto, system-ui, sans-serif;

  --text-small:  .8125rem;  /* 13 · Kicker, Tab-Wort */
  --text-label:  .9375rem;  /* 15 · Meta */
  --text-body:   1rem;      /* 16 */
  --text-large:  1.125rem;  /* 18 · Zeilentitel */
  --text-lead:   1.25rem;   /* 20 */
  --h1: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);     /* 36 → 48 */
  --h2: 1.5rem;                                   /* 24 */
  --h3: 1.25rem;
  --lh-text: 1.5; --lh-heading: 1.12;
  --tracking-caps: .1em;
}

/* ---------- 5. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--text-body)/var(--lh-text) var(--font-text); text-wrap: pretty; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
/* Linkfarbe folgt dem Akzent dort, wo er gesetzt wird (Abendfarbe, Dunkel) — deshalb am body, nicht an :root */
body { --fg-link: var(--fg-accent); }
a { color: var(--fg-link); text-underline-offset: 3px; }
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
.num, time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--fg-focus); outline-offset: 2px; }
[id] { scroll-margin-top: var(--space-4); }
.hg-container { width: min(100% - 2 * var(--space-4), var(--container)); margin-inline: auto; }
.hg-container--wide { width: min(100% - 2 * var(--space-4), var(--container-wide)); margin-inline: auto; }
.hg-skip { position: absolute; left: -999px; } .hg-skip:focus { left: var(--space-4); top: var(--space-4); background: var(--bg-elevated); color: var(--fg); padding: var(--space-2) var(--space-3); z-index: var(--z-toast); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hg-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 6. Bausteine ---------- */

/* Kopf: Akzentfläche, Wortmarke als Bild. Nicht sticky. */
.hg-header { background: var(--bg-accent); color: var(--fg-on-accent); }
.hg-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 58px; padding: var(--space-2) 0; }
.hg-header__marke { display: flex; align-items: center; min-height: 44px; }
.hg-wortmarke { display: block; height: 30px; width: auto; }
.hg-header__zusatz { font: 700 var(--text-small)/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hg-nav { display: none; gap: var(--space-1); }
.hg-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); color: var(--fg-on-accent); text-decoration: none; font-weight: 700; font-size: var(--text-label); }
.hg-nav a:hover { background: color-mix(in srgb, var(--fg-on-accent) 14%, transparent); }
.hg-nav a[aria-current="page"] { background: var(--fg-on-accent); color: var(--bg-accent); }
.hg-header :focus-visible { outline-color: var(--fg-on-accent); }
.hg-header__zusatz, .hg-nav { margin-left: auto; }
/* Menü-Knopf oben rechts: Darstellung und Nebenziele */
.hg-menue { position: relative; flex: 0 0 auto; margin-right: calc(-1 * var(--space-2)); }
.hg-menue__knopf { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg-on-accent); cursor: pointer; }
.hg-menue__knopf:hover, .hg-menue__knopf[aria-expanded="true"] { background: color-mix(in srgb, var(--fg-on-accent) 14%, transparent); }
.hg-menue__knopf .hg-icon { width: 26px; height: 26px; stroke-width: 2; }
.hg-menue__feld { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-toast); width: min(300px, calc(100vw - 2 * var(--space-4))); padding: var(--space-4); border-radius: var(--radius-4); background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); }
.hg-menue__feld[hidden] { display: none; }
.hg-menue__feld .hg-stufe { margin: 0 0 var(--space-2); }
.hg-menue__feld .hg-schema { display: flex; border-color: var(--border-subtle); }
.hg-menue__feld .hg-schema button { flex: 1 1 0; padding: 0 var(--space-2); color: var(--fg); }
.hg-menue__feld .hg-schema button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.hg-menue__feld :focus-visible { outline-color: var(--fg-focus, currentColor); }
.hg-menue__feld ul { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--border-subtle); }
.hg-menue__feld li a { display: flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 600; text-decoration: none; }
.hg-menue__feld li a:hover { text-decoration: underline; }

/* Statusleiste: im Fluss, nie Overlay */
.hg-status { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) max(var(--space-4), calc((100% - var(--container)) / 2)); font-weight: 700; background: var(--bg-subtle); color: var(--fg); }
.hg-status--positive { background: var(--bg-positive); color: var(--fg-positive); }
.hg-status--notice   { background: var(--bg-notice);   color: var(--fg-notice); }
.hg-status--negative { background: var(--bg-negative); color: var(--fg-negative); }

/* Seitenanfang: Kicker, große Zeile, Titel, Meta */
.hg-seite { padding: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-6); }
.hg-block { display: grid; gap: var(--space-5); }
.hg-kopfblock { display: grid; gap: var(--space-1); }
.hg-kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font: 700 var(--text-small)/1.3 var(--font-text); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-accent); }
.hg-kicker--ruhig { color: var(--fg-muted); }
.hg-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); flex: 0 0 auto; }
/* dunkle Abendfarben (Februar) bleiben auf dunklem Grund erkennbar */
.hg-punkt { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent); }
.hg-titel { margin: 0; font-size: var(--text-lead); font-weight: 600; line-height: 1.3; }
.hg-meta { margin: 0; color: var(--fg-muted); }
.hg-motto { margin: 0; font: italic 600 var(--text-large)/1.35 var(--font-display); }
.hg-zurueck { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; margin: var(--space-1) 0 calc(-1 * var(--space-3)); font-weight: 600; text-decoration: none; }
.hg-zurueck:hover { text-decoration: underline; }

/* Foto: Bild oben, Text darunter — nie Text auf dem Bild */
.hg-foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-4); background: var(--bg-subtle); }
.hg-foto-link { display: block; border-radius: var(--radius-4); }
.hg-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.hg-bilder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-3); background: var(--bg-subtle); }
:root.theme-dark .hg-foto, :root.theme-dark .hg-bilder img, :root.theme-dark .hg-zeile__bild { filter: brightness(.9); }

/* Knöpfe */
.hg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 2px solid transparent; font: 700 1.0625rem/1.2 var(--font-text); text-decoration: none; text-align: center; cursor: pointer; }
.hg-btn--primary { background: var(--bg-accent); color: var(--fg-on-accent); } .hg-btn--primary:hover { background: var(--bg-accent-hover); }
.hg-btn--secondary { background: transparent; color: var(--fg-accent); border-color: var(--border-accent); } .hg-btn--secondary:hover { background: var(--bg-accent-faint); }
.hg-btn--breit { width: 100%; }
.hg-btn:active { transform: translateY(1px); }
.hg-btn[disabled] { opacity: .55; cursor: default; }
.hg-btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hg-btn-row > .hg-btn { padding-inline: var(--space-3); }
.hg-btn-row--einzeln { grid-template-columns: 1fr; }
.hg-textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Abschnittskopf mit Linie */
.hg-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--border-strong); }
.hg-kopf > span, .hg-kopf > a { font-size: var(--text-label); color: var(--fg-muted); white-space: nowrap; }
.hg-kopf > a { color: var(--fg-link); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }

/* Zeilenliste: Saison, Betriebe, Stände */
.hg-zeilen { list-style: none; margin: 0; padding: 0; }
.hg-zeilen--linie { border-top: 2px solid var(--border-strong); }
.hg-zeile { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); color: var(--fg); text-decoration: none; }
a.hg-zeile:hover .hg-zeile__titel { text-decoration: underline; text-underline-offset: 3px; }
.hg-zeile__bild { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-3); background: var(--bg-subtle); flex: 0 0 auto; }
.hg-zeile__datum { flex: 0 0 5.2em; font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.hg-zeile__text { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.hg-zeile__ueber { font-size: var(--text-label); font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.hg-zeile__titel { font-size: var(--text-large); font-weight: 700; }
.hg-zeile__titel--leicht { font-weight: 400; }
.hg-zeile__unter { font-size: var(--text-label); color: var(--fg-muted); }
.hg-zeile__ende { flex: 0 0 auto; font-size: var(--text-label); font-weight: 600; color: var(--fg-muted); }
.hg-zeile > .hg-icon { color: var(--fg-muted); }
.hg-zeile--vergangen { color: var(--fg-muted); } .hg-zeile--vergangen .hg-zeile__bild { opacity: .6; }
.hg-zeile--aus .hg-zeile__titel { text-decoration: line-through; }
.hg-marke-klein { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg-negative); color: var(--fg-negative); font: 700 var(--text-small)/1.5 var(--font-text); }
.hg-marke-klein--notice { background: var(--bg-notice); color: var(--fg-notice); }

/* Anfangsbuchstabe statt Foto (alle Betriebe gleich, solange nicht jeder ein Foto hat) */
.hg-initial { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-accent-faint); color: var(--fg-accent); font: 700 1.375rem/1 var(--font-display); flex: 0 0 auto; }
.hg-initial--gross { width: 72px; height: 72px; font-size: 2.125rem; }
.hg-rund { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--bg-subtle); }
.hg-rund--gross { width: 72px; height: 72px; }
.hg-kopfzeile { display: flex; align-items: center; gap: var(--space-4); }

/* Verweiszeile und Platte */
.hg-link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-4); background: var(--bg-subtle); color: var(--fg); text-decoration: none; font-size: 1.0625rem; font-weight: 600; }
.hg-link-row:hover { background: var(--bg-accent-faint); }
.hg-link-row small { display: block; font-size: var(--text-label); font-weight: 400; color: var(--fg-muted); }
.hg-platte { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-4); background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
.hg-platte--zart { background: var(--bg-subtle); border-color: transparent; gap: 2px; }

/* Fakten als Zeilen */
.hg-fakten { margin: 0; border-top: 2px solid var(--border-strong); }
.hg-fakten > div { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.hg-fakten dt { flex: 0 0 4.75rem; font-size: var(--text-label); color: var(--fg-muted); }
.hg-fakten dd { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.hg-fakten dd.offen { font-weight: 400; color: var(--fg-muted); }

/* Genuss-Pass, Stände, Fortschritt */
.hg-pass__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.hg-pass__kopf b { font-size: var(--text-large); } .hg-pass__kopf span { font-weight: 600; font-variant-numeric: tabular-nums; }
.hg-progress { height: 10px; border-radius: var(--radius-pill); background: var(--border-subtle); overflow: hidden; }
.hg-progress > i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--bg-accent); transition: width 300ms ease; }
.hg-nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--fg-faint); background: var(--bg-elevated); color: var(--fg); font-weight: 700; font-size: var(--text-label); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hg-stand[data-voll="1"] .hg-nr { border-color: var(--bg-accent); background: var(--bg-accent); color: var(--fg-on-accent); }
.hg-stand[data-voll="1"] .hg-zeile__ende { color: var(--fg-positive); }
.hg-scanner { position: relative; aspect-ratio: 1; border-radius: var(--radius-4); overflow: hidden; background: #000; }
.hg-scanner video { width: 100%; height: 100%; object-fit: cover; }
.hg-scanner::after { content: ""; position: absolute; inset: 15%; border: 3px solid rgba(255,255,255,.9); border-radius: var(--radius-4); }

/* Quiz */
.hg-quiz__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.hg-quiz__zeit { font: 700 1.75rem/1 var(--font-display); color: var(--fg-accent); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.hg-antworten { display: grid; gap: var(--space-2); }
.hg-antwort { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-4); border: 1.5px solid var(--border-subtle); background: var(--bg-elevated); color: var(--fg); font: 500 var(--text-body)/1.35 var(--font-text); text-align: left; cursor: pointer; }
.hg-antwort > b { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-subtle); font-size: var(--text-label); }
.hg-antwort[disabled] { cursor: default; }
.hg-antwort--richtig { border-color: var(--fg-positive); background: var(--bg-positive); color: var(--fg-positive); }
.hg-antwort--falsch { border-color: var(--border-strong); background: var(--bg-subtle); text-decoration: line-through; }
.hg-rang { list-style: none; margin: 0; padding: 0; }
.hg-rang li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.hg-rang b { font-variant-numeric: tabular-nums; }

/* Hinweis, Toast */
.hg-hinweis { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-4); background: var(--bg-informative); color: var(--fg-informative); }
.hg-hinweis--positive { background: var(--bg-positive); color: var(--fg-positive); }
.hg-hinweis--notice { background: var(--bg-notice); color: var(--fg-notice); }
.hg-hinweis--negative { background: var(--bg-negative); color: var(--fg-negative); }
.hg-toast { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--tabs-h) + var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-toast); max-width: var(--container); margin-inline: auto; box-shadow: var(--shadow-lg); font-weight: 600; }
.hg-leer { margin: 0; color: var(--fg-muted); }

/* „Mehr lesen“ ohne Script */
.hg-mehr > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--fg-link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.hg-mehr > summary::-webkit-details-marker { display: none; }
.hg-mehr[open] > summary { display: none; }

/* Prosa (Seiten, Rechtstexte, Betriebstexte) */
.hg-prosa > * + * { margin-top: var(--space-4); }
.hg-prosa > *:last-child { margin-bottom: 0; }
.hg-prosa h2, .hg-prosa h3, .hg-prosa h4 { margin-top: var(--space-8); font-size: var(--h3); }
.hg-prosa img { border-radius: var(--radius-4); }
.hg-prosa a { word-break: break-word; }
.hg-prosa ul, .hg-prosa ol { padding-left: 1.2em; }

/* Sponsoren: weiße Platte, immer verlinkt, nie eingefärbt */
.hg-stufe { margin: 0 0 var(--space-2); font: 700 var(--text-small)/1.3 var(--font-text); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
* + .hg-stufe { margin-top: var(--space-5); }
.hg-sponsor-titel { display: grid; justify-items: center; gap: var(--space-2); background: var(--weiss); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); padding: var(--space-4); text-decoration: none; color: var(--tinte-base); }
.hg-sponsor-titel img { max-height: 64px; max-width: 100%; width: auto; } .hg-sponsor-titel small { color: var(--tinte-a3); font-size: var(--text-label); }
.hg-sponsor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hg-sponsor-kachel { display: grid; place-items: center; min-height: 76px; padding: var(--space-3); background: var(--weiss); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); color: var(--tinte-base); text-decoration: none; font-weight: 600; text-align: center; }
.hg-sponsor-grid img { max-height: 44px; max-width: 100%; width: auto; }
.hg-sponsor-kachel.hg-sponsor-werden { background: transparent; border-style: dashed; border-color: var(--fg-faint); color: var(--fg-muted); }
.hg-praesentiert { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--weiss); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); color: var(--tinte-a3); font-size: var(--text-label); text-decoration: none; line-height: 1.3; }
.hg-praesentiert img { max-height: 40px; max-width: 96px; width: auto; flex: 0 0 auto; }
.hg-praesentiert b { display: block; color: var(--tinte-base); font-size: var(--text-body); }

/* Eingaben */
.hg-field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.hg-field label { font-weight: 600; }
.hg-field .hint { font-size: var(--text-label); color: var(--fg-muted); }
.hg-input { width: 100%; min-height: var(--control-h); border: 1.5px solid var(--fg-faint); border-radius: var(--radius-2); padding: 0 var(--space-3); font: inherit; color: var(--fg); background: var(--bg-elevated); }
textarea.hg-input { padding: var(--space-3); min-height: 120px; }
.hg-input:focus { border-color: var(--border-strong); outline: 3px solid var(--fg-focus); outline-offset: 1px; }
.hg-field.is-invalid .hg-input { border-color: var(--fg-fehler); border-width: 2px; }
.hg-field .error { font-size: var(--text-label); font-weight: 600; color: var(--fg-fehler); }

/* Band (Newsletter) und Fuß */
.hg-band { background: var(--bg-subtle); border-radius: var(--radius-4); padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-3); }
.hg-band p { margin: 0; }
/* Schattenriss über dem Fuß, davor ein Himmel: hell warmes Nachmittagslicht, dunkel Abendglut. Oben läuft der Himmel in den Seitengrund aus.
   Die Gebäude tragen die Farbe des Fußes (Maske; ohne Masken-Unterstützung das fest eingefärbte Bild). Volle Breite bis 1300 px, am Handy mittig beschnitten. */
.hg-silhouette { --himmel: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 22%, #FFF0D6 55%, #FFE2B0 82%, #FFD595 100%);
  position: relative; margin-top: var(--space-6); height: calc(clamp(96px, 19.27vw, 250px) * 1.55); background: var(--himmel); }
@media (prefers-color-scheme: dark) { :root:not(.theme-light) .hg-silhouette { --himmel: linear-gradient(to bottom, var(--bg) 0%, #2A1420 28%, #7A1D22 55%, #D9431F 76%, #FF8A2B 90%, #FFC46B 100%); } }
.theme-dark .hg-silhouette { --himmel: linear-gradient(to bottom, var(--bg) 0%, #2A1420 28%, #7A1D22 55%, #D9431F 76%, #FF8A2B 90%, #FFC46B 100%); }
.hg-silhouette::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% / 1.55); background: url(../img/silhouette.webp) center bottom / auto 100% no-repeat; }
@supports ((mask-image: url(a.png)) or (-webkit-mask-image: url(a.png))) {
  .hg-silhouette::after { background: var(--bg-deep); -webkit-mask: url(../img/silhouette.webp) center bottom / auto 100% no-repeat; mask: url(../img/silhouette.webp) center bottom / auto 100% no-repeat; }
}
.hg-footer { margin-top: 0; background: var(--bg-deep); color: var(--fg-on-deep-muted); padding: var(--space-8) 0 calc(var(--space-8) + var(--tabs-h) + env(safe-area-inset-bottom)); font-size: var(--text-label); }
.hg-footer p { margin: 0 0 var(--space-3); }
.hg-footer a { color: var(--fg-on-deep); }
.hg-footer .hg-wortmarke { height: 28px; margin-bottom: var(--space-4); }
.hg-footer__cols { display: grid; gap: var(--space-6); }
.hg-footer__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.hg-footer__links a { display: flex; align-items: center; min-height: 44px; }
.hg-footer :focus-visible { outline-color: #FFFFFF; }
.hg-footer__links a[aria-current="page"] { font-weight: 700; }
.hg-footer__sponsoren { margin: var(--space-4) 0 0; }
.hg-footer__sponsoren span { display: block; font-size: var(--text-small); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.hg-footer__sponsoren a { display: inline-flex; align-items: center; min-height: 44px; }

/* Wetter am Brunnen (nur wenn eingeschaltet, ab 3 Tage vor dem Abend) */
.hg-wetter { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-4); background: var(--bg-subtle); color: var(--fg); }
.hg-wetter .hg-stufe { margin: 0; }
.hg-wetter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-weight: 600; }
.hg-wetter__warnung { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2, 6px); background: var(--bg-notice); color: var(--fg-notice); font-weight: 600; }
.hg-wetter__warnung svg { flex: none; margin-top: 2px; }
.hg-schema { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border-on-deep); border-radius: var(--radius-pill); }
.hg-schema button { min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg-on-deep); font: 600 var(--text-label) var(--font-text); cursor: pointer; }
.hg-schema button[aria-pressed="true"] { background: #FFFFFF; color: var(--nacht-base); }

/* Leiste unten: drei Ziele, Zeichen + Wort */
.hg-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabs); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--bg-elevated); border-top: 1px solid var(--border-subtle); padding-bottom: env(safe-area-inset-bottom); }
.hg-tabs a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: var(--tabs-h); color: var(--fg-muted); text-decoration: none; font: 600 var(--text-small)/1.1 var(--font-text); }
.hg-tabs a[aria-current="page"] { color: var(--fg-accent); font-weight: 700; }
.hg-tabs .hg-icon { width: 24px; height: 24px; }

/* Galerie, Seitenzahlen */
.hg-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.hg-galerie img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--radius-2); }
.hg-pagination { display: flex; gap: var(--space-2); justify-content: center; }
.hg-pagination a, .hg-pagination span { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); text-decoration: none; }
.hg-pagination .current { background: var(--bg-accent); color: var(--fg-on-accent); }
.wp-block-image img, .alignwide, .alignfull { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) { .hg-btn, .hg-link-row, .hg-nav a { transition: background-color 150ms ease; } }

/* ---------- 7. Ab Tablet: Kopf-Navigation statt Leiste; ab Desktop zwei Spalten auf der Startseite ---------- */
@media (min-width: 768px) {
  .hg-footer { padding-bottom: var(--space-8); }
  .hg-tabs { display: none; }
  .hg-nav { display: flex; }
  .hg-header__zusatz { display: none; }
  .hg-header__bar { min-height: 72px; }
  .hg-wortmarke { height: 38px; }
  .hg-seite { padding-top: var(--space-10); gap: var(--space-8); }
  .hg-toast { bottom: var(--space-6); }
  .hg-footer__cols { grid-template-columns: 2fr 1fr 1fr; }
  .hg-footer__links { grid-template-columns: 1fr; }
  .hg-sponsor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hg-zweispaltig { width: min(100% - 2 * var(--space-6), var(--container-wide)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .hg-zweispaltig > .hg-container { width: 100%; }
}

/* ---------- 8. Druck ---------- */
@media print {
  :root { --bg: #fff; --fg: #000; }
  body { padding: 0; }
  .hg-header, .hg-tabs, .hg-footer, .hg-silhouette, .hg-btn-row, .hg-skip { display: none; }
  a { color: inherit; text-decoration: none; }
}

/* Nachtrag v0.6: Spalten-Hülle (mobil untereinander, ab 1024 px nebeneinander — siehe 7) */
.hg-zweispaltig { display: grid; gap: var(--space-6); }
.hg-zeile__marken { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.hg-klein { font-size: var(--text-label); color: var(--fg-muted); margin: 0; }
@media (prefers-color-scheme: dark) { :root:not(.theme-light) .hg-foto, :root:not(.theme-light) .hg-bilder img, :root:not(.theme-light) .hg-zeile__bild { filter: brightness(.9); } }