:root{

  --deal-gruen-hell: #29e0b4;
  --deal-gruen-tief: #1cb890;

  --optik-hebung: -4px;
  --optik-dauer: .22s;
}

.gutschein-karte,
.deal-karte{
  overflow:hidden;
  background:
    radial-gradient(480px 160px at 8% 0%, rgba(124,92,255,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--card);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform var(--optik-dauer) ease, box-shadow var(--optik-dauer) ease, border-color var(--optik-dauer) ease;
}
.gutschein-karte::before,
.deal-karte::before{
  content:"";
  position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, transparent, rgba(124,92,255,.40), rgba(35,213,171,.35), transparent);
  pointer-events:none;
}
.gutschein-karte:hover,
.deal-karte:hover{
  transform: translateY(var(--optik-hebung));
  border-color: rgba(124,92,255,.22);
  box-shadow: 0 20px 44px rgba(0,0,0,.34), 0 0 0 1px rgba(124,92,255,.06), inset 0 1px 0 rgba(255,255,255,.08);
}

@keyframes optikEinblenden{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.karten-raster > .gutschein-karte,
.karten-raster > .deal-karte{ animation: optikEinblenden .5s ease both; }
.karten-raster > :nth-child(1){ animation-delay:0s; }
.karten-raster > :nth-child(2){ animation-delay:.04s; }
.karten-raster > :nth-child(3){ animation-delay:.08s; }
.karten-raster > :nth-child(4){ animation-delay:.12s; }
.karten-raster > :nth-child(5){ animation-delay:.16s; }
.karten-raster > :nth-child(6){ animation-delay:.2s; }

.shop-kachel,
.quer-karte{
  transition: transform var(--optik-dauer) ease, box-shadow var(--optik-dauer) ease, border-color var(--optik-dauer) ease;
}
.shop-kachel:hover,
.quer-karte:hover{
  transform: translateY(var(--optik-hebung));
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  border-color: rgba(124,92,255,.22);
}

.gutschein-shop,
.gutschein-shop a{ font-size:.86rem; font-weight:700; }
.gutschein-kat{
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
}
.gutschein-titel{
  font-size:1.16rem; font-weight:800; line-height:1.26; margin-top:.2rem;
}

.deal-preis .jetzt{ font-size:1.75rem; font-weight:900; }

.deal-preis .statt{ font-size:.85rem; }
.sparen-hero h1{ font-weight:900; letter-spacing:-.01em; }
.sparen-zahl b{ font-size:1.5rem; }

.rabatt-plakette{
  background:linear-gradient(135deg, var(--deal-gruen-hell), var(--deal-gruen-tief));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 6px 16px rgba(35,213,171,.35), inset 0 1px 0 rgba(255,255,255,.35);
  padding:.42rem .68rem;
  font-size:.85rem;
  letter-spacing:.01em;
}

.rabatt-plakette + .gutschein-titel,
.rabatt-plakette + .gutschein-kopf{ padding-right:5.2rem; }

.code-box > summary{
  background:linear-gradient(135deg, #e63946 0%, #c62828 100%);
  box-shadow:0 6px 20px rgba(230,57,70,.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.code-box > summary:hover{
  background:linear-gradient(135deg, #ef4444 0%, #d32f2f 100%);
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(230,57,70,.36);
}

.hinweis{
  padding:14px 16px 14px 20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.hinweis.warnung{
  background:rgba(255,201,77,.05);
  border-color:rgba(255,201,77,.16);
  box-shadow: inset 3px 0 0 0 rgba(255,201,77,.75);
}
.hinweis:not(.warnung){
  box-shadow: inset 3px 0 0 0 rgba(124,92,255,.55);
}

.leer-hinweis{
  border-style:solid;
  background:
    radial-gradient(420px 160px at 50% -10%, rgba(124,92,255,.10), transparent 60%),
    rgba(255,255,255,.025);
  padding:34px 22px;
}
.leer-hinweis a{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:10px; min-height:44px; padding:.5rem 1rem;
  border-radius:var(--rund-pille); background:rgba(255,255,255,.08);
  border:1px solid var(--stroke); color:var(--text);
  text-decoration:none; font-weight:800; font-size:.88rem;
  transition: background var(--optik-dauer) ease;
}
.leer-hinweis a:hover{ background:rgba(255,255,255,.14); }
.leer-hinweis a:focus-visible{ outline:none; box-shadow:var(--focus); }

.header-strip{

  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 2px 0 0 rgba(124,92,255,.35);
}
.brand-logo{
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(124,92,255,.12);
  transition: box-shadow var(--optik-dauer) ease;
}
.brand:hover .brand-logo{ box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 3px rgba(124,92,255,.22); }

.nav-btn,
.menue-gruppe > summary{
  background:linear-gradient(135deg, #e63946 0%, #c62828 100%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-btn:hover,
.menue-gruppe > summary:hover{
  background:linear-gradient(135deg, #ef4444 0%, #d32f2f 100%);
  box-shadow:0 10px 22px rgba(230,57,70,.30);
}

.menue-link{ transition: background .15s ease, padding-left .15s ease; }
.menue-link:hover{ padding-left:14px; }

@media (min-width:721px){
  .menue-klappe{ overflow:hidden; }
  .menue-klappe::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, rgba(124,92,255,.60), rgba(35,213,171,.50));
  }
  @media (prefers-reduced-motion:no-preference){
    .menue-gruppe[open] > .menue-klappe{ animation: optikKlappeAuf .18s ease both; }
  }
}
@keyframes optikKlappeAuf{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

.hauptmenue{ list-style:none !important; display:flex !important; }
.menue-punkt{ list-style:none; }

@media (max-width:560px){

  .gutschein-titel{ font-size:1.08rem; }
  .deal-preis .jetzt{ font-size:1.55rem; }

  .karten-raster > .gutschein-karte,
  .karten-raster > .deal-karte{ animation-delay:0s !important; }
}

/*gh-kopf-mobil:start*/
@media (max-width:720px){
  /* 1) Dreifaches Polster auf ein Mass. */
  header.site-header{ padding-top:6px; }
  header.site-header > .wrap{ padding:6px 12px 8px; }
  .header-strip{ padding:9px 12px; }

  /* 2) Logo und Menue in EINE Zeile. */
  .header-strip{ flex-direction:row !important; align-items:center; gap:10px; }
  .brand-title{ display:none; }
  .brand{ flex:0 0 auto; }
  .site-nav{ flex:1 1 auto; min-width:0; }

  /* Festes 2x2-Raster. display:grid braucht !important, weil Abschnitt 7
     dieser Datei .hauptmenue{display:flex !important} als Sicherheitsnetz
     gegen die aeltere Inline-Kopie der Startseite setzt. */
  .hauptmenue{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; width:auto; }
  .menue-punkt{ min-width:0; }
  .menue-punkt:has(> details[open]){ grid-column:1 / -1; }

  /* Trefferflaeche bleibt 48 px. Nur Schrift und Polster geben nach,
     damit die Beschriftungen in die halbe Breite passen. */
  .menue-gruppe > summary,
  .nav-btn--einzeln{
    min-height:48px !important;
    font-size:12px !important;
    padding:.4rem 6px !important;
    gap:4px !important;
    line-height:1.2;
    white-space:normal !important;
    overflow-wrap:break-word;
    min-width:0;
  }
  .menue-pfeil{ border-left-width:4px; border-right-width:4px; border-top-width:5px; }
}

/* Sehr schmale Geraete (iPhone SE & Co.). Bei 320 px bleiben je Knopf nur
   noch 96 px; "Gewinnspiele" braucht mit Klapp-Pfeil daneben mehr und wurde
   dort abgeschnitten (gemessen: 1 Knopf mit scrollWidth > clientWidth).
   Der Pfeil weicht als Erstes — er ist Beiwerk, die Beschriftung ist es
   nicht. Die Trefferflaeche bleibt unangetastet bei 48 px. */
@media (max-width:359px){
  .menue-pfeil{ display:none; }
  .menue-gruppe > summary,
  .nav-btn--einzeln{ font-size:11.5px !important; padding:.35rem 4px !important; }
}
/*gh-kopf-mobil:ende*/

@media (prefers-reduced-motion:reduce){
  .gutschein-karte, .deal-karte, .shop-kachel, .quer-karte,
  .karten-raster > .gutschein-karte, .karten-raster > .deal-karte,
  .code-box > summary, .nav-btn, .menue-gruppe > summary,
  .brand-logo, .menue-link, .menue-gruppe[open] > .menue-klappe,
  .leer-hinweis a{
    animation:none !important;
    transition:none !important;
  }
  .gutschein-karte:hover, .deal-karte:hover,
  .shop-kachel:hover, .quer-karte:hover,
  .code-box > summary:hover, .nav-btn:hover, .menue-gruppe > summary:hover{
    transform:none !important;
  }
}

/*gh-textbreite:start*/
/* Zeilenlaenge des Fliesstextes. Verwalteter Block — die Quelle ist DIESE
   Datei, werkzeuge/menue_css_einspielen.py traegt sie in die statischen
   Seiten nach (die laden kein externes Stylesheet).

   Anlass 10.08.2026: die Inhaltsbreite wurde auf allen Seiten vereinheitlicht
   (vorher 1100 px auf sechs, 1340 px auf fuenf Seiten — 240 px Sprung beim
   Seitenwechsel). Der Fliesstext lief mit: /ratgeber gemessen 159 Zeichen je
   Zeile, /impressum 114. Ab etwa 90 Zeichen findet das Auge den Zeilenanfang
   nicht mehr zuverlaessig.

   Nicht die Seite schmal halten, sondern dem Text seine Grenze geben —
   derselbe Weg, den dichte.css fuer die Hinweiskaesten gewaehlt hat.
   Kartenraster und Bedienelemente bleiben unberuehrt. */
.page p, .page li,
.page-legal p, .page-legal li,
.ratgeber-inhalt p, .ratgeber-inhalt li,
.details-text { max-width: 72ch; }
/*gh-textbreite:ende*/

/*gh-mobil-eng:start*/
@media (max-width:720px){

  /*zusage:trefferflaeche-48*/
  /* Hauptaktionen — alles, was einen Besuch abschliesst oder eine Liste
     weiterblaettert. 48 statt der geforderten 44 px: das Vorbild supergewinne
     macht Bedienelemente auf kleinen Bildschirmen sogar groesser (1,2em statt
     1em), und die vier zusaetzlichen Pixel kosten hier nachweislich nichts —
     die Knoepfe stehen in eigenen Zeilen, nicht neben Inhalt. Gemessen:
     "Zum Angebot" 41 -> 48, Blaettern 38 -> 48, "Merken" 38 -> 48. */
  .cta-btn,
  .pager-link,
  .gh-merkzeile__knopf,
  .share-btn,
  .gh-more-prizes > summary{
    min-height:48px !important;
    height:auto !important;          /* .pager-link stand auf height:38px */
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }

  /*zusage:trefferflaeche-44*/
  /* Nebenwege: Fusszeile, Ratgeber-Verweise, Sprungmarke, Chips.
     `nav > a` ist bewusst STRUKTURELL formuliert und nicht als Klassenliste:
     ein Link, der unmittelbar in einem <nav> steht, ist ein eigenstaendiges
     Ziel und kein Wort in einem Satz. Damit sind auch die Fusszeilen-Links
     (nav.footer-links) und die Ratgeber-Leiste (nav[aria-label=Ratgeber])
     erfasst, ohne dass ihre Klassennamen hier auftauchen muessen — und jede
     kuenftige Navigationsleiste gleich mit. */
  nav > a,
  .skip,
  .sektion-mehr,
  .gh-related__link,
  .cookie-settings-link{
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center;
    padding-top:.35rem;
    padding-bottom:.35rem;
  }
  /* Die Fusszeile steht mittig; ihre Links sollen das bleiben. */
  .footer-links > a{ justify-content:center; }

  /*zusage:schrift-15*/
  /* Fliesstext — alles, was gelesen wird, um zu entscheiden. Gemessen lag das
     zwischen 13,0 und 14,7 px. Nicht erfasst und bewusst kleiner bleiben die
     Etiketten eine Regel weiter unten. */
  .mini-prizes-text, .mini-prizes-more,
  .item-meta dd,
  .gs-meta-card dd,
  .gs-prizes, .gs-prizes li,
  .gh-related__link,
  .gh-rel-card__meta,
  .sektion-mehr,
  .pager-status,
  .footer-copy,
  .cookie-settings-link,
  .cta-btn,
  .gh-merkzeile__fuss,
  .muted,
  nav > a,
  .menue-link span{
    font-size:15px !important;
  }
  /* Etiketten. Sie stehen ueber einem Wert oder in einem Abzeichen und werden
     nicht als Satz gelesen; 15 px wuerden sie aus ihrer halbbreiten Zelle
     druecken. Sie werden trotzdem angehoben — gemessen standen sie bei
     9,9 bis 12,5 px, und darunter wird auf einem Handy geraten statt gelesen. */
  .item-meta dt,
  .gs-meta-card dt,
  .gh-stats__label, .gh-stats__cell-label,
  .cat-sub, .va-sub,
  .marke, .gutschein-kat,
  .gh-aufwand{
    font-size:12.5px !important;
  }

  /*zusage:freitext-volle-breite*/
  /* Der eigentliche Inhaltsverlust. Die Kennzahlen einer Karte stehen auf dem
     Handy in einem zweispaltigen Raster. Darin lag die Zelle "Gewinne" — eine
     FREITEXT-Liste — in 112 px Breite, waehrend "Enddatum" mit seinen zehn
     Zeichen die volle Breite bekam. Gemessen waren dadurch 49 bis 84 % des
     Textes weggeschnitten ("10 Fiat 500 Elektro LaPrima Cabrio · 25 Bikes
     + 3 weitere" wurde zu "10 Fiat 500 Elektro…").

     Die Regel ist an der Struktur festgemacht, nicht am Wortlaut: die Zelle
     mit dem mehrzeiligen Freitext geht ans Ende und ueber beide Spalten, die
     kurzen Kennzahlen ruecken auf. Sie kostet keine Hoehe, sie tauscht nur
     die Plaetze — beide Reihen sind danach voll belegt.

     Kennt ein Browser :has() nicht, faellt genau diese Umsortierung weg und
     die Karte steht wie vorher da; nichts wird unbedienbar. */
  .item-meta .m:has(.mini-prizes-text){
    order:1;
    grid-column:1 / -1;
  }
  /* Sonst bekaeme "Enddatum" als letzte ungerade Zelle weiterhin die volle
     Breite und die erste Reihe bliebe halb leer. */
  .item-meta:has(.mini-prizes-text) .m:last-child:nth-child(odd){
    grid-column:auto;
  }
  /* Karten mit VIER Kennzahlen (die Listenseiten zeigen zusaetzlich den
     Veranstalter) gehen bei derselben Zaehlung leer aus. Nach dem Vorziehen
     des Freitextfelds bleiben dort DREI halbbreite Zellen — die letzte stand
     allein in ihrer Reihe und liess 111 px Loch daneben stehen (gemessen auf
     /gewinnspiele.php bei 390 px: alle 24 Karten betroffen).

     Gezaehlt werden muss die Zahl der HALBBREITEN Zellen, nicht die aller
     Kinder: das vollbreite Freitextfeld kippt die Parität um eins. Steht es
     im Raster (:has), ist die letzte Zelle genau dann allein, wenn die
     Gesamtzahl gerade ist. Damit stimmt die Regel fuer jede Feldzahl:
     3 Felder -> 2 halbe, gepaart; 4 -> 3 halbe, letzte fuellt; 5 -> 4 halbe,
     gepaart. */
  .item-meta:has(.mini-prizes-text) .m:last-child:nth-child(even){
    grid-column:1 / -1;
  }

  /* Erster Bildschirm. Die Kopfleiste ist bereits auf 144 px gebracht
     (Block gh-kopf-mobil); hier gibt der Vorspann daruber nach. Nichts
     entfaellt — es sind ausschliesslich Abstaende und eine Schriftgroesse,
     die von 16 auf 15 px geht und damit weiter ueber der Fliesstext-Grenze
     liegt. */
  main.wrap{ padding-top:10px !important; }
  .hero-title{ margin-top:6px !important; margin-bottom:4px !important; }
  .hero-rule{ margin-top:4px !important; margin-bottom:8px !important; }
  .hero-sub{ margin-bottom:6px !important; }
  .section{ margin-top:14px !important; }
  .sektion-kopf{ margin-bottom:6px !important; }
}

/* Sehr schmale Geraete. Die Kennzahlen-Zellen der Karten stehen hier in
   knapp 100 px; zweispaltig bleibt richtig (die Werte sind kurz), aber das
   Polster darf nachgeben. */
@media (max-width:359px){
  .item-meta .m{ padding-left:8px !important; padding-right:8px !important; }
}

/* Das Kennzahlen-Raster der Detailseite (.gs-meta-grid) stand frueher hier,
   als `grid-auto-flow: dense` nur fuer Handybreiten. Es hat den Block
   verlassen und heisst jetzt gh-fakten-raster (weiter unten): der Fehler
   trat bei 1280 px genauso auf wie bei 390 px, und eine Regel, die fuer
   beide Breiten gilt, gehoert nicht in einen Block, dessen Pruefung
   (werkzeuge/test_mobil.php, Punkt 2) verlangt, dass JEDE Regel darin in
   einer Handy-Media-Abfrage steht. */
/*gh-mobil-eng:ende*/

/*gh-fakten-raster:start*/
.gs-meta-grid{
  --gs-spalten:2;
  --gs-luecke:10px;
  display:flex;
  flex-wrap:wrap;
  gap:var(--gs-luecke);
}
@media (min-width:760px){
  .gs-meta-grid{ --gs-spalten:3; }
}
.gs-meta-card{
  /* Basis = eine Spalte. Danach teilt flex-grow den Rest der letzten Zeile
     auf; volle Zeilen haben keinen Rest und bleiben unveraendert.
     min-width:0 nimmt der Automatik-Mindestbreite die Macht, eine Zeile
     durch langen Inhalt aufzubrechen — der Umbruch soll allein an der
     Spaltenzahl haengen, nicht am Text eines einzelnen Feldes. */
  flex:1 1 calc((100% - (var(--gs-spalten) - 1) * var(--gs-luecke)) / var(--gs-spalten));
  min-width:0;
}
/* Nach der Media-Abfrage, damit die volle Breite die Spaltenbasis schlaegt. */
.gs-meta-card--loesung{
  flex-basis:100%;
  order:1;
}
/*gh-fakten-raster:ende*/

main > section ~ section {
  margin-top: 24px;
}

/*gh-pfadleiste:start*/
/* ============================================================
   PFADLEISTE (Brotkrumen)
   ============================================================
   Verwalteter Block. Die Quelle ist DIESE Datei;
   werkzeuge/menue_css_einspielen.py traegt sie in die vorgerenderten
   *.html-Seiten nach, die kein externes Stylesheet laden.

   WARUM DIESER BLOCK BEIDE KLASSEN ANSPRICHT
   ------------------------------------------
   Der Bestand hat ZWEI Pfadleisten mit unterschiedlichem Aufbau:

     .brotkrumen     <nav><ol><li>…  — gh_brotkrumen() in module.php,
                     benutzt von aktion, shop, gutschein-kategorie, suche
     .gh-breadcrumb  <nav><a>…<span aria-hidden>›</span>… — die Vorlage
                     gewinnspiel.html, aus der ALLE 675 Detailseiten rendern

   Sie hatten bis zum 11.08.2026 zwei verschiedene Gestaltungen (.82rem grau
   vs. .85rem grau, andere Abstaende, andere Trennerfarbe) — dieselbe
   Fehlerklasse wie die zwei Zurueck-Knoepfe (.back-top/.back-btn) und die
   zwei Datumsleisten davor. Eine Aussage, zwei Gestalten laufen beim naechsten
   Eingriff auseinander. Deshalb steht die Gestaltung hier EINMAL und trifft
   beide Aufbauten; die alten Regeln in dichte.css und in gewinnspiel.html
   sind ersatzlos entfallen.

   Der Aufbau bleibt je Leiste unangetastet: die <ol>-Fassung traegt ihren
   Trenner als ::before (ein "›" im Text wuerde vorgelesen), die flache
   Fassung hat ihn als aria-hidden-<span> im Markup. Beide werden hier nur
   eingefaerbt — content: auf einem echten Element wuerde dessen Inhalt
   ersetzen und ist deshalb bewusst nur am Pseudoelement gesetzt. */
.brotkrumen,
.gh-breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 10px;
  padding: 4px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .20);
  font-size: .84rem;
  color: rgba(255, 255, 255, .58);
  /* Auf schmalen Schirmen laeuft ein langer Pfad seitlich weiter, statt in
     drei Zeilen umzubrechen und den ersten Bildschirm zu verbrauchen. */
  overflow-x: auto;
  scrollbar-width: none;
}
.brotkrumen::-webkit-scrollbar,
.gh-breadcrumb::-webkit-scrollbar { display: none; }

.brotkrumen ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
}
/* !important ist hier keine Bequemlichkeit, sondern die einzige Moeglichkeit:
   styles.css setzt `ol > li, .gs-ol > li {display:block !important}` fuer die
   Gewinnspiel-Liste. Gegen ein !important hilft hoehere Spezifitaet nicht —
   und ohne diese Zeile war die Pfadleiste 57 statt 36 px hoch, weil jede
   Stufe ihren Trenner UNTER statt NEBEN sich setzte. Gemessen an
   /gutscheine/lidl: li-Hoehe 47 px statt 28 px. */
.brotkrumen li { display: flex !important; align-items: center; gap: 2px; }

/* Jede Stufe ist eine eigene Trefferflaeche — vorher waren es nackte Links
   mit 11 px Hoehe, auf dem Handy nicht zuverlaessig zu treffen. */
.brotkrumen a,
.brotkrumen [aria-current="page"],
.gh-breadcrumb a,
.gh-breadcrumb [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .34rem .62rem;
  border-radius: 999px;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
}
.brotkrumen a,
.gh-breadcrumb a {
  color: rgba(255, 255, 255, .74);
  font-weight: 800;
  border: 1px solid transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.brotkrumen a:hover,
.gh-breadcrumb a:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
  text-decoration: none;
}
.brotkrumen a:focus-visible,
.gh-breadcrumb a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}

/* Die aktuelle Seite ist kein Link, sondern das Ziel — sie bekommt die
   Hausfarbe und darf als einzige Stufe gekuerzt werden. */
.brotkrumen [aria-current="page"],
.gh-breadcrumb [aria-current="page"] {
  color: #fff;
  font-weight: 900;
  background: rgba(124, 92, 255, .20);
  border: 1px solid rgba(124, 92, 255, .34);
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  /* block statt inline-flex: nur ein Blockkasten kuerzt mit "…". line-height
     wird dabei ausdruecklich wiederholt — ohne sie wurde die aktuelle Stufe
     33 statt 28 px hoch, und der Trenner davor rutschte sichtbar nach unten,
     weil er in einem hoeheren Kasten mittig ausgerichtet wird. */
  display: block;
  line-height: 1.15;
}

/* Trenner. Nur Farbe und Abstand — den Inhalt bringt jede Fassung selbst mit. */
.brotkrumen li + li::before { content: "›"; }
.brotkrumen li + li::before,
.gh-breadcrumb > [aria-hidden="true"] {
  color: rgba(255, 255, 255, .28);
  font-weight: 900;
  padding: 0 1px;
  user-select: none;
}

/* Das Haus-Zeichen der ersten Stufe (gh_pfad_symbol() in module.php). */
.pfad-haus {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
  opacity: .85;
}
.brotkrumen a:hover .pfad-haus,
.gh-breadcrumb a:hover .pfad-haus { opacity: 1; }

@media (max-width: 560px) {
  .brotkrumen,
  .gh-breadcrumb { font-size: .8rem; margin: 12px 0 8px; }
  .brotkrumen [aria-current="page"],
  .gh-breadcrumb [aria-current="page"] { max-width: 22ch; }
}
/*gh-pfadleiste:ende*/

/*gh-scrollleiste:start*/
/* ============================================================
   SCROLLLEISTE
   ============================================================
   Verwalteter Block (siehe werkzeuge/menue_css_einspielen.py).

   Die Seite lief bisher mit der Systemleiste: auf dunklem Grund ein
   hauchduenner, fast unsichtbarer Streifen — auf einer Seite mit 300+ Karten
   ist die Leiste aber die einzige Anzeige, wie weit unten man ist.

   Bewusst NICHT ueber `scrollbar-color`/`scrollbar-width` am :root: sobald
   eine dieser beiden Eigenschaften gesetzt ist, ignoriert Chrome die
   ::-webkit-scrollbar-Pseudoelemente fuer denselben Scroller — man bekaeme
   je nach Browser zwei verschiedene Leisten. Der Firefox-Weg steht deshalb
   in einem @supports-Zweig, der nur dort greift, wo es die Pseudoelemente
   gar nicht gibt.

   Innere Scroller mit eigener Regel (.nav-row, .brotkrumen) bleiben
   unberuehrt: display:none an einer Klasse schlaegt diese Grundregel. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .26);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .46);
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: rgba(255, 255, 255, .34) rgba(255, 255, 255, .07); }
}
/*gh-scrollleiste:ende*/

/*gh-artikel:start*/
/* ============================================================
   RATGEBER-ARTIKEL
   ============================================================
   Verwalteter Block (siehe werkzeuge/menue_css_einspielen.py). Er gilt fuer
   `main.wrap.page` — gemessen am 11.08.2026 sind das GENAU die 13
   Ratgeber-Seiten und sonst keine.

   DER FEHLER, DEN ER BEHEBT
   -------------------------
   Die Zeilenlaengen-Grenze (Block gh-textbreite) begrenzte den ABSATZ auf
   72ch, nicht den Kasten, in dem er steht. Der Kasten blieb 1560 px breit.
   Ergebnis auf 1440 px: 46 % der Kartenflaeche Text, 54 % leere Karte rechts
   daneben — der Text klebte am linken Rand statt in der Mitte zu stehen.
   Ein Absatz mit Maximalbreite in einem Behaelter ohne Maximalbreite ist
   halbe Arbeit; die Grenze gehoert an die SPALTE.

   Deshalb bekommt die Spalte hier ihre Breite, und der Absatz gibt seine
   wieder ab (max-width:none) — sonst wirkten zwei Grenzen gegeneinander und
   der Text saesse erneut links in einem zu breiten Kasten, nur weniger
   auffaellig. Die 72ch-Regel bleibt fuer alle anderen Seiten unveraendert
   gueltig, dort steht sie allein.

   Innenbreite: 720 px minus Innenabstand ergibt rund 78 Zeichen je Zeile —
   unter der im Block gh-textbreite dokumentierten Schwelle von etwa 90, ab
   der das Auge den Zeilenanfang nicht mehr sicher findet. */
main.wrap.page {
  max-width: 720px;
}

/* Die ganze Spalte rutscht mit: Zurueck-Knopf, Ueberschrift, Vorspann,
   Zeile mit Datum und Karte stehen buendig uebereinander. Vorher lief die
   zentrierte Ueberschrift ueber 1560 px, waehrend der Text darunter bei
   576 px endete — zwei Achsen auf einer Seite. */
main.wrap.page > .card.page-card {
  padding: clamp(22px, 3vw, 36px);
  border-radius: 20px;
  background:
    radial-gradient(760px 260px at 12% -8%, rgba(124, 92, 255, .10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .032));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

main.wrap.page .page-card {
  font-size: 1.03rem;
  line-height: 1.72;
}
main.wrap.page .page-card > p,
main.wrap.page .page-card > ul,
main.wrap.page .page-card > ol,
main.wrap.page .page-card li {
  max-width: none;
}
main.wrap.page .page-card > p {
  margin: 0 0 1.05em;
  color: rgba(255, 255, 255, .84);
}
main.wrap.page .page-card > p:last-child { margin-bottom: 0; }

/* Der Vorspann traegt die Aussage des Artikels und darf sie auch tragen. */
main.wrap.page .page-card > p:first-of-type {
  font-size: 1.12rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, .93);
}

/* Zwischenueberschriften: die Artikel haben im Schnitt neun davon (116 h2 auf
   13 Seiten). Sie sind die eigentliche Gliederung und brauchen mehr Luft nach
   OBEN als nach unten — sonst haengen sie am Absatz davor statt am eigenen
   Abschnitt. */
main.wrap.page .page-card h2 {
  position: relative;
  margin: 2.1em 0 .5em;
  padding-left: 15px;
  font-size: 1.3rem;
  line-height: 1.28;
  font-weight: 950;
  color: #fff;
}
main.wrap.page .page-card h2:first-child { margin-top: 0; }
main.wrap.page .page-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7c5cff, #23d5ab);
}
main.wrap.page .page-card h3 {
  margin: 1.5em 0 .4em;
  font-size: 1.06rem;
  font-weight: 900;
  color: rgba(255, 255, 255, .95);
}

main.wrap.page .page-card ul,
main.wrap.page .page-card ol {
  margin: 0 0 1.05em;
  padding-left: 1.3em;
}
main.wrap.page .page-card li {
  margin: .45em 0;
  color: rgba(255, 255, 255, .84);
}
main.wrap.page .page-card li::marker { color: rgba(124, 92, 255, .9); }

main.wrap.page .page-card strong { color: #fff; font-weight: 900; }

/* Links im Fliesstext: 161 Stueck. Ohne eigene Farbe sind sie von normalem
   Text nur an der Unterstreichung zu unterscheiden, die styles.css beim
   Hover sogar wegnimmt — ein Link, der beim Draufzeigen unsichtbar wird. */
main.wrap.page .page-card a {
  color: #a99bff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(169, 155, 255, .45);
}
main.wrap.page .page-card a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #fff;
}
main.wrap.page .page-card a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
  border-radius: 6px;
}

/* Kopf des Artikels */
main.wrap.page .hero-title {
  font-size: clamp(1.65rem, 4.2vw, 2.1rem);
  line-height: 1.2;
  margin: 10px auto 12px;
}
main.wrap.page .hero-rule { width: min(220px, 40%) !important; }
main.wrap.page .hero-sub { font-size: 1.02rem; line-height: 1.55; }

/* Der Zurueck-Knopf bleibt am linken Rand der Spalte statt mittig zu
   schweben — er gehoert zur Navigation, nicht zum Artikelkopf. */
main.wrap.page > .back-top,
main.wrap.page > .back-btn { margin: 4px 0 10px; }

@media (max-width: 760px) {
  main.wrap.page .page-card { font-size: 1rem; line-height: 1.68; }
  main.wrap.page .page-card > p:first-of-type { font-size: 1.06rem; }
  main.wrap.page .page-card h2 { font-size: 1.16rem; margin-top: 1.8em; }
}

/* Dieselbe Sache auf den Rechtstext-Seiten (main.legal: impressum,
   datenschutz, kontakt, ueber-uns, so-pruefen-wir). Sie haben denselben
   Fehler in kleinerer Ausfuehrung: die Spalte ist 980 px breit, der Absatz
   bei 72ch zu Ende — rund 330 px leere Karte rechts. Sie stehen hier und
   nicht in einem eigenen Block, weil es EINE Regel ist ("die Grenze gehoert
   an die Spalte") und zwei Bloecke fuer eine Regel genau die Drift erzeugen,
   gegen die die uebrigen Bloecke dieser Datei gebaut sind. */
main.legal .legal__inner { width: min(780px, 92vw); }
main.legal .legalCard p,
main.legal .legalCard li { max-width: none; }

/* ------------------------------------------------------------------
   Dieselbe Sache ein DRITTES Mal, 15.08.2026 — auf den DETAILSEITEN
   (/gewinnspiel/<slug>-<id>, Vorlage neu/gewinnspiel.html).
   ------------------------------------------------------------------
   GEMESSEN am laufenden Server bei 1440 px Fensterbreite:

     Behaelter  section.section > div.card   1280 px innen
     Text       div.details-text              659 px  = 51 % der Karte
     leer rechts daneben                      621 px
     Umfang     8 Textbloecke, der laengste 14 Zeilen

   Es ist wieder die halbe Loesung: `.details-text { max-width: 72ch }` aus
   dem Block gh-textbreite begrenzt den ABSATZ, die Karte darum bleibt
   1280 px. Dazu kommt die zweite Achse, die den Eindruck "linksbuendig"
   ueberhaupt erst erzeugt: die Zwischenueberschrift ueber jedem Textblock
   lief ueber die vollen 1308 px, der Text darunter endete bei 659 px.

   Deshalb greift die Grenze an der SEKTION und nicht an der Karte — die
   Ueberschrift steht in der Sektion, nicht in der Karte. Nur so wandern
   Ueberschrift und Text gemeinsam auf EINE Achse; eine Grenze an der Karte
   allein haette den Text zentriert und die Ueberschrift links stehen
   lassen, also die zweite Achse festgeschrieben statt aufgeloest.

   RECHNUNG zur Zeilenlaenge (gemessen: 9,15 px je Zeichen):
     760 px Spalte − 2 × 14 px Kartenpolster = 732 px Text = 80 Zeichen.
   Das liegt unter der oben dokumentierten Schwelle von etwa 90 und neben
   den beiden bereits geloesten Faellen (Ratgeber 78, Rechtstexte 78).

   Dass links und rechts je rund 274 px frei bleiben, ist die richtige
   Antwort und kein Rest. Die Alternative waere ein Text mit 140 Zeichen je
   Zeile: freie Flaeche kostet nichts, eine unlesbare Zeile schon.

   `:has()` statt einer ID-Abfrage (#gsLongWrap, #gsSummaryWrap, #gsFaqWrap):
   die Regel soll fuer JEDE Sektion mit Fliesstext gelten, auch fuer die
   naechste, die jemand einbaut. Die Aufzaehlung nennt Bauformen des
   Inhalts, keine Namen einzelner Seitenteile.

   NICHT betroffen (geprueft, nicht angenommen): .detail-hero mit Bild und
   Kennzahlen-Raster, die Knopfleiste und "Aehnliche Gewinnspiele" — das
   sind Raster und Bedienelemente, kein Fliesstext, und sie behalten die
   volle Breite. Die Deal-Detailseite hat seit dem 15.08.2026 gar keinen
   Fliesstext mehr und ist deshalb hier nicht erwaehnt. */
body.detail .section:has(.details-text),
body.detail .section:has(.faq-list) {
  width: min(760px, 100%);
  margin-inline: auto;
}
body.detail .section:has(.details-text) .details-text { max-width: none; }
/*gh-artikel:ende*/

/*gh-kopfknopf:start*/
/* ============================================================
   KOPFLEISTE — die vier Knoepfe und ihre Klappmenues
   ============================================================
   Verwalteter Block (siehe werkzeuge/menue_css_einspielen.py). Die Knoepfe
   stehen auf JEDER Seite; ohne diesen Weg haetten die 771 vorgerenderten
   Seiten eine andere Kopfleiste als die PHP-Seiten.

   DER FEHLER, DEN ER BEHEBT
   -------------------------
   "Wo stehe ich?" und "Wo ist die Tastatur?" sahen identisch aus. Beides war
   ein weisser 2-px-Ring mit 2 px Abstand:

     styles.css:473  summary[data-aktiv="1"]{outline:2px solid rgba(255,255,255,.70)}
     .nav-btn:focus-visible{box-shadow:var(--focus)}  (= 3px rgba(255,255,255,.55))

   HIER STAND bis 15.08.2026 an genau dieser Stelle ein VERSCHACHTELTER
   Kommentar: die Erlaeuterung „3px rgba(255,255,255,.55)" war selbst in
   Kommentarzeichen gesetzt. CSS kennt keine Verschachtelung — das innere
   Schlusszeichen hat diesen Kommentar hier beendet. Alles danach bis zum
   eigentlichen Schluss war damit CSS-Text, den der Parser als Selektor las;
   er verschluckte dabei die direkt folgende Regel mitsamt position:relative.
   (Deshalb steht in diesem Block ab jetzt KEIN Kommentarzeichen mehr im
   Fliesstext — auch nicht als Zitat.)

   SICHTBARE FOLGE, im Browser gemessen (412x844, Chromium):
   ohne position:relative hatte der Balken unten kein positioniertes
   Elternelement mehr. Er bezog sich damit auf den Anfangs-Umriss des
   Dokuments und lag mit left:14px/right:14px/bottom:6px als 384x3-Streifen
   quer im SEITENINHALT — auf 7 von 7 geprueften Seiten an derselben
   Dokumentstelle (y = Fensterhoehe − 9 px). Auf dem Handy wandert diese
   Stelle mit der ein- und ausfahrenden Adressleiste: der „random Strich"
   der Nutzerbeschwerde vom 15.08.2026.

   Zwei verschiedene Aussagen in einer Gestalt — wer mit der Tastatur
   navigiert, kann den aktiven Bereich nicht vom gerade fokussierten Knopf
   unterscheiden. Der Fokusring ist die Aussage, die man NICHT umgestalten
   darf (er ist Bedienbarkeit); also bekommt der aktive Bereich eine eigene:
   einen Balken unter dem Knopf in den Hausfarben. Ein Balken kann nie mit
   einem Ring verwechselt werden, auch nicht in Graustufen oder bei
   Farbfehlsichtigkeit — er unterscheidet sich in der FORM, nicht im Farbton.

   Der Ring wird hier ausdruecklich zurueckgenommen (outline:none), sonst
   stuenden Balken UND Ring nebeneinander. */
.hauptmenue .nav-btn,
.hauptmenue .menue-gruppe > summary {
  position: relative;
  gap: 9px;
  letter-spacing: .1px;
  border-radius: 14px;
}

/* Aktiver Bereich: Balken statt Ring. */
.hauptmenue .menue-gruppe > summary[data-aktiv="1"],
.hauptmenue .nav-btn[aria-current="page"] {
  outline: none;
  outline-offset: 0;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .45);
}
.hauptmenue .menue-gruppe > summary[data-aktiv="1"]::after,
.hauptmenue .nav-btn[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #23d5ab);
  box-shadow: 0 0 10px rgba(124, 92, 255, .55);
}
/* Der Balken sitzt INNEN am unteren Rand, nicht darunter: die 8 px unter dem
   Knopf gehoeren der Spitze der Klappe. Standen beide dort, ueberlagerten sie
   sich genau auf dem Knopf, der aktiv UND aufgeklappt ist — also auf dem
   haeufigsten Fall. */
/* Der Fokusring bleibt, was er ist — und gewinnt gegen die Zustandsfarbe. */
.hauptmenue .nav-btn:focus-visible,
.hauptmenue .menue-gruppe > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .75);
}

/* Aufgeklappt: der Knopf sinkt sichtbar ein und traegt die Klappe.
   Vorher unterschied sich "offen" von "zu" nur am gedrehten Pfeil — bei
   vier gleich roten Knoepfen nebeneinander zu wenig. */
.hauptmenue .menue-gruppe[open] > summary {
  background: linear-gradient(135deg, #c62828 0%, #9e1f1f 100%);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45);
}
.hauptmenue .menue-gruppe[open] > summary:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a82424 100%);
}

@media (min-width: 721px) {
  /* Die Klappe gehoert sichtbar zu ihrem Knopf: eine Spitze schlaegt die
     Bruecke ueber die 8 px Luft dazwischen. Ohne sie schwebt ein Kasten
     unter der Leiste, der zu jedem der vier Knoepfe gehoeren koennte.
     overflow:hidden an .menue-klappe (Abschnitt weiter oben) wuerde die
     Spitze abschneiden — sie haengt deshalb am <details>, nicht an der
     Klappe. */
  .hauptmenue .menue-gruppe { position: relative; }
  .hauptmenue .menue-gruppe[open]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 26px;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: #0d2247;
    border-left: 1px solid rgba(124, 92, 255, .45);
    border-top: 1px solid rgba(124, 92, 255, .45);
    z-index: 2;
  }
  .hauptmenue .menue-klappe {
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .48);
  }
}

/* Eintraege der Klappe */
.menue-klappe .menue-link {
  border-radius: 12px;
  padding: 10px 12px;
  border-left: 3px solid transparent;
}
.menue-klappe .menue-link:hover {
  background: rgba(255, 255, 255, .10);
  border-left-color: rgba(124, 92, 255, .85);
  padding-left: 12px;   /* nimmt das Verrutschen aus Abschnitt "menue-link" zurueck:
                           der Balken zeigt die Auswahl an, ein wandernder Text
                           dazu ist eine zweite Ansage fuer dieselbe Sache */
}
/* Die Seite, auf der man steht — ruhiger als das frueher volle Rotfeld, das
   neben dem roten Knopf darueber wie ein zweiter Knopf aussah. */
.menue-klappe .menue-link[aria-current="page"] {
  background: rgba(255, 255, 255, .07);
  border-left-color: #e63946;
  box-shadow: none;
}
.menue-klappe .menue-link[aria-current="page"] b { color: #fff; }

/* ------------------------------------------------------------
   Der Zaehler am Knopf "☆ Merkliste" (.nav-merkzahl)
   ------------------------------------------------------------
   HIERHER UMGEZOGEN AM 15.08.2026 aus neu/helpers.php,
   gh_merken_stil(). Diese Funktion wird nur von Seiten aufgerufen, die
   Merken-KNOEPFE rendern — das Abzeichen sitzt aber in der KOPFLEISTE und
   steht damit auf jeder Seite. Gemessen im ausgelieferten HTML, 15.08.2026:

     /deals, /merkliste, /gewinnspiele   Markup ja, Regel ja
     /            (neu/index.php)        Markup ja, Regel NEIN
     /impressum   (vorgerenderte Seite)  Markup ja, Regel NEIN

   Dort stand die Zahl ohne Hintergrund, ohne Rundung, ohne reservierte
   Breite. Ein Stil, der an der Sichtbarkeit von Merken-Knoepfen haengt, kann
   eine Kopfleiste nicht versorgen. Im verwalteten Kopfleisten-Block geht er
   beide Wege: als Datei fuer die PHP-Seiten, als zeichengleiche Kopie fuer
   die 79 vorgerenderten Seiten (werkzeuge/menue_css_einspielen.py).

   KEIN LAYOUTSPRUNG — und warum dafuer ZWEI Dinge stimmen muessen
   --------------------------------------------------------------
   Die Seite kommt OHNE Zahl vom Server; der Stand liegt in localStorage
   (assets/merkliste.js). Erst das Skript setzt die Zahl und nimmt `hidden`
   weg. Alles, was dabei die Breite aendert, schiebt die Nachbarn zur Seite —
   die Beschwerde des Nutzers vom 15.08.2026: "die 1 kann kommen, aber das
   Layout verschiebt sich".

   1. `visibility:hidden` statt `display:none` bei [hidden]. `display:none`
      nimmt das Abzeichen ganz aus dem Layout; beim Erscheinen waechst der
      Knopf um seine volle Breite. `visibility:hidden` behaelt den Platz.

   2. Die reservierte Breite muss auch reichen. `min-width:22px` reichte
      nicht: bei border-box (styles.css `*{box-sizing:border-box}`) bleiben
      von 22 px nach dem Innenmass 2x7 px nur 8 px fuer die Ziffern. Eine
      Ziffer misst in Noto Sans Bold 0,572 em, bei .94rem (15,04 px) also
      8,60 px — aus der Schriftdatei gelesen, nicht geschaetzt. Der Knopf
      waere trotz Punkt 1 noch um 0,60 px gewachsen (eine Ziffer) und um
      9,20 px (zwei Ziffern).

      `min-width: calc(2ch + 14px)` reserviert genau zwei Ziffern plus
      Innenmass. `1ch` IST die Ziffernbreite der geladenen Schrift, die
      Reservierung stimmt damit in JEDER Schrift — nicht nur in der, die hier
      gemessen wurde. `tabular-nums` macht jede Ziffer so breit wie die "0",
      auf die sich `ch` bezieht (Hausstil: .rank und .stat .v in styles.css).

      Gemessen bei 15,04 px Schrift:
        leer   2x8,60 + 14           = 31,20 px
        "1"    max(31,20; 14 + 8,60) = 31,20 px
        "99"   max(31,20; 14 +17,20) = 31,20 px
      Bis 99 Eintraegen bewegt sich nichts. Ab 100 waechst der Knopf um eine
      Ziffernbreite; fuer diesen Fall staendig Platz freizuhalten waere
      derselbe Fehler in die andere Richtung.

   Der Preis ist ein leerer Streifen von 31,20 px + 6 px Abstand, solange die
   Merkliste leer ist — die bewusste Gegenrechnung zu einer Kopfleiste, die
   bei jedem Merken springt.

   `.94rem` statt der ueblichen Abzeichen-Groesse: eine Zahl, die man nicht
   lesen kann, ist als Zaehler wertlos. Schmaler wird das Abzeichen ueber das
   Innenmass, nicht ueber die Schrift.

   3. UND DIE HOEHE MUSS AUCH RESERVIERT SEIN (nachgetragen 15.08.2026)
      Punkt 1 und 2 haben die BREITE stillgelegt, die Hoehe nicht. Der Grund
      ist eine Eigenheit, die man der Regel nicht ansieht: `visibility:hidden`
      behaelt den Platz eines Kastens — aber der Kasten war leer. Ein leeres
      Element ohne eigene Hoehe und ohne senkrechtes Innenmass (`padding:0 7px`)
      ist 0 px hoch. Erst die Ziffer machte daraus eine Zeile von
      1,6 x 15,04 px = 24,06 px.

      Der Knopf ist ein `inline-flex` mit `min-height:44px`; sein Innenraum
      misst 44 - 2x10,4 (Innenmass) - 2x1 (Rahmen) = 21,2 px. 24,06 > 21,2 —
      also wuchs der Knopf beim ersten Merken von 44 auf 46,84 px, und die
      ganze Kopfleiste mit ihm. Im Browser gemessen auf allen sechs geprueften
      Seitenarten, jedes Mal exakt +2,84 px.

      `height` fest gesetzt loest beides auf einmal: leer und gefuellt sind
      derselbe Kasten (kein Sprung), und 1,15rem = 18,4 px bleibt unter den
      21,2 px Innenraum (kein Wachstum). In `rem` statt `px`, damit das
      Verhaeltnis zur Knopfschrift (.9rem x 1,4 = 1,26rem Zeile) bei jeder
      Grundschriftgroesse erhalten bleibt. Auf dem Handy ist der Innenraum mit
      24,4 px sogar groesser — dort war nie Gefahr, aber auch nie Reserve. */
.nav-merkzahl {
  display: inline-block;
  margin-left: 6px;
  min-width: calc(2ch + 14px);
  height: 1.15rem;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffc454;
  color: #1a1a1a;
  font-size: .94rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15rem;
  text-align: center;
  vertical-align: .06em;
}
.nav-merkzahl[hidden] { visibility: hidden; }

/* ------------------------------------------------------------
   Die Grundfarbe ALLER Knopfarten der Kopfzeile
   ------------------------------------------------------------
   HIERHER UMGEZOGEN AM 15.08.2026 aus neu/helpers.php,
   gh_kopf_farbe_stil(). Die Regel selbst ist unveraendert; nur ihr Weg auf
   die Seite ist ein anderer.

   WAS DIE FUNKTION LEISTETE
   Drei Regeln faerbten die Kopfzeile unterschiedlich ein — `--navAktiv`
   (#07203f) auf dem aktiven Gruppenknopf, ein dunkelroter Verlauf auf dem
   AUFGEKLAPPTEN, und `.nav-btn--einzeln` gab Suche/Merkliste/Konto einen
   durchscheinenden weissen Grund. Drei Farben nebeneinander, ohne erkennbare
   Regel dahinter. Diese Zeilen setzen alle drei auf `var(--btn)` zurueck: ein
   Ton in jedem Zustand.

   WARUM SIE UMZIEHEN MUSSTE
   Die Funktion lief nur auf Seiten, die sie aufrufen. Am 15.08.2026 im
   ausgelieferten HTML nachgezaehlt:

     /deals, /gutscheine, /merkliste, /ratgeber, /suche, /aktion/*,
     /gutscheine/kategorie/*, /gewinnspiele, /            Regel da
     /gewinnspiel/<slug>   (Detailseiten)                 Regel FEHLT
     /impressum, /datenschutz, /ueber-uns, /kontakt,
     /kategorie/*, /beendet …  (79 vorgerenderte Seiten)  Regel FEHLT

   Dort stand die Kopfzeile weiter dreifarbig — die Beschwerde des Nutzers vom
   15.08.2026 („oben auf Unterseiten andersfarbig, muss ueberall orange sein").
   Im Browser gemessen: auf /gewinnspiel/<slug> und /impressum zwei
   verschiedene Hintergruende, auf den Helferseiten einer.

   Das ist DIESELBE Fehlerklasse wie beim Zaehler darueber, und deshalb steht
   die Loesung hier: der verwaltete Block geht beide Wege — als Datei fuer die
   PHP-Seiten, als zeichengleiche Kopie in die vorgerenderten
   (werkzeuge/menue_css_einspielen.py). Nachgemessen, dass er wirklich jede
   Seite erreicht: 19 von 20 Seitenarten tragen ihn, die zwanzigste (/konto)
   antwortet abgemeldet mit 302 und rendert gar keine Kopfleiste.

   DER EINWAND AUS DER ALTEN FUNKTION — und warum er hier nicht mehr traegt
   Sie stand im Koerper statt in optik.css mit der Begruendung, ein fester
   Cache-Schluessel (?v=N) erreiche wiederkehrende Besucher nicht. Das stimmt
   — und ist eine Aufgabe fuer den Schluessel, nicht fuer den Ablageort: er
   ist mit dieser Aenderung auf ?v=12 erhoeht (11 Fundstellen). Der Preis der
   Umgehung war zu hoch: eine Regel im Koerper erreicht nur, wer sie aufruft,
   und genau daran sind zwei ganze Seitenklassen vorbeigelaufen.

   ZUSTAENDE BLEIBEN ERKENNBAR, nur nicht mehr ueber die Farbe: der
   Leuchtbalken unter dem aktiven Reiter (::after weiter oben), der
   eingesunkene Schatten, der gedrehte Klapp-Pfeil und aria-current bleiben
   unangetastet. `:hover` behaelt --btnHover — derselbe Ton eine Spur dunkler,
   kein Farbwechsel.

   `background-image:none` muss mit: die Zustandsregeln weiter oben setzen
   einen Verlauf, und ein Verlauf liegt ueber einer Hintergrundfarbe. */
.site-nav .nav-btn,
.site-nav .menue-gruppe > summary,
.site-nav .nav-btn--einzeln,
.site-nav .menue-gruppe[open] > summary,
.site-nav .menue-gruppe > summary[data-aktiv="1"],
.site-nav .nav-btn[aria-current="page"] {
  background: var(--btn);
  background-image: none;
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.site-nav .nav-btn:hover,
.site-nav .menue-gruppe > summary:hover,
.site-nav .menue-gruppe[open] > summary:hover {
  background: var(--btnHover);
  background-image: none;
}
/* Das Profilzeichen im Konto-Reiter. `currentColor` in der Zeichnung + diese
   Groesse: es sitzt auf derselben Grundlinie wie die Emoji der Nachbarn
   (gemessen: 1.05em entspricht deren optischer Hoehe). */
.nav-zeichen {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -.15em;
  margin-right: .35em;
  flex: 0 0 auto;
}
/*gh-kopfknopf:ende*/