/*
 * style-neu.css - Stilblatt des neuen Designs
 *
 * Wird ausschliesslich in der Vorschau geladen (mu-plugins/00-bg-vorschau.php).
 * Besucher bekommen diese Datei nie zu sehen.
 *
 * Der body traegt in der Vorschau die Klasse .bg-neu. Regeln, die etwas
 * Bestehendes ueberschreiben, sollten damit beginnen - das hebt die Spezifitaet
 * an und macht beim Lesen sofort klar, was neu ist und was uebernommen wurde.
 *
 * Achtung bei ReHub-Knoepfen: Farben wie .btn_offer_block kommen aus den
 * Theme-Optionen als Inline-<style> mit !important. Solche Regeln lassen sich
 * nicht per gewoehnlicher Kaskade schlagen. Der saubere Weg ist, die Werte in
 * den ReHub-Optionen zu aendern, sobald das Design steht - nicht ein Wettrennen
 * mit !important.
 */

/* ==========================================================================
   1. Farbtoken
   Alles andere leitet sich hieraus ab. Wenn eine Farbe geaendert werden soll,
   dann hier und nirgends sonst.
   ========================================================================== */

.bg-neu {
    /* Identitaet - stammt aus der Logodatei */
    --bg-blue:        #375878;   /* Logo-Blau, Links, Flaechen */
    --bg-blue-deep:   #1b2f44;   /* Grund fuer Kopf- und Fussbereich */
    --bg-blue-light:   #4a719a;
    --bg-blue-soft:   #e9f0f7;

    /* Handlung. Gruen ist der Vorschlag, Orange die sichere Alternative.
       Zum Vergleichen: die beiden Bloecke unten tauschen. */
    --bg-action:      #7cb92c;   /* Gruen aus dem Bildzeichen */
    --bg-action-hover:#6aa522;
    --bg-on-action:  #12240a;   /* dunkle Schrift - weiss auf Gruen faellt mit 2,38 durch */
    --bg-action-text: #4d7a13;   /* Gruen als Schrift auf Weiss: #7cb92c hat nur 2,2:1, dieses 5,1:1 */
    --bg-action-soft: #eaf4dc;   /* weiche Flaeche fuer Hinweise wie "Neu" - Schrift darauf: --bg-action-text */

    /* Alternative Orange:
    --bg-action:      #cf6516;
    --bg-action-hover:#b45611;
    --bg-on-action:  #ffffff;
    */

    /* Bedeutung - sparsam, nur wo etwas ablaeuft */
    --bg-urgent:       #b23a2b;
    --bg-urgent-soft:  #fbeeea;

    /* "Nur bei uns". Bewusst weder Gruen (das gehoert dem Knopf und wuerde ihn
       schwaechen) noch Rot (das heisst auf dieser Seite "laeuft ab"). Bernstein
       ist die vierte und letzte Bedeutung - mehr Akzente vertraegt die Seite
       nicht. */
    --bg-exclusive:    #e8b53a;
    --bg-on-exclusive:#2b1f04;

    /* "Beliebt" - eigene Farbe, weil jede Blaustufe neben der blauen Wert-Kachel
       als Teil der Kachel gelesen wurde (21.09.2026). Lavendel liegt neben Blau
       auf dem Farbkreis, ist sonst nirgends belegt: Gold = Exklusiv, Gruen =
       Code/Neu/Pruefhaken, Rot = Dringlichkeit, Grau = Bedingung. */
    --bg-popular:      #c9dbeb;   /* Mittelton: satter als die Kachel (#e9f0f7), keine Vollflaeche wie der Knopf (#375878). Lavendel und helles Blau verworfen (21.09.2026) */
    --bg-popular-text: #2f4c68;   /* 6,4:1 auf der Flaeche */

    /* Flaechen und Schrift, leicht ins Blaue gezogen statt neutralgrau */
    --bg-paper:      #f6f8fa;
    --bg-surface:     #ffffff;
    --bg-surface-2:   #eef2f6;
    --bg-line:       #dde5ec;
    --bg-line-strong:  #c3d0dc;
    --bg-text:        #15202b;
    --bg-text-2:      #556676;
    --bg-text-3:      #8494a4;

    /* Form */
    --bg-radius:      10px;
    --bg-shadow:    0 1px 2px rgba(21,32,43,.05), 0 8px 24px -14px rgba(21,32,43,.30);
}

/* ==========================================================================
   2. Gutscheinkarte
   Markup: neu/inc/parts/compact_grid.php (Zweig $gridtype == 'compact').
   Wirkt auf Startseite, alle Shopseiten und alle Kategorieseiten.
   ========================================================================== */

.bg-neu .offer_grid.bgn-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
    overflow: hidden;
    padding: 18px 18px 0;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bg-neu .offer_grid.bgn-card:hover {
    border-color: var(--bg-line-strong);
    box-shadow: var(--bg-shadow);
}
/* Die Plakette laeuft im Fluss mit (siehe .re-ribbon-badge weiter unten) und
   kostet deshalb eine schmale Zeile. Karten ohne Plakette bekommen dieselbe
   Spur als Innenabstand - sonst faengt in einer Reihe jedes zweite Logo auf
   einer anderen Hoehe an. Browser ohne :has() zeigen es wie bisher, also
   leicht versetzt; kaputt geht nichts. */
.bg-neu .offer_grid.bgn-card:not(:has(.re-ribbon-badge)) { padding-top: 41px; }

/* HIER STAND EINE PERFORATION AM LINKEN RAND - und sie ist am 10.09.2026 wieder
   verschwunden. Der User hat sie "Zacken" genannt, und er hatte recht:
   - Gezeichnet waren es Bogen, keine Loecher. Auf einem hellen Rand liest das
     Auge daraus eine Saegekante, keine Perforation.
   - Sie lief ueber die GANZE Hoehe. Eine Perforation ist aber eine Abrisslinie:
     sie verlaeuft dort, wo man trennt, EINMAL - nicht am Ruecken entlang.
   - Sie lief in die abgerundete Ecke hinein, die sah dadurch angeknabbert aus.
   - Und sie war doppelt gemoppelt: die Karte hat ueber dem Fuss laengst eine
     gestrichelte Linie - das ist die Abrisslinie.
   Was blieb: diese eine Linie, dafuer von Kante zu Kante (siehe .bgn-card-footer).
   Ein Zeichen, das etwas bedeutet, statt zwoelf, die Textur machen. */

/* --- Kopf: Logo, Art, Wert --- */
/* Kartenkopf. Bis 21.09.2026 hiess er wie der Abschnittskopf (.bgn-section-head) und
   erbte dessen spaetere Regel mit; die Werte hier sind der damals wirksame
   Stand (gap 20px, align-items flex-end, flex-wrap, margin-bottom 18px). */
.bg-neu .bgn-card-head {
    display: flex; flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 18px;
}
/* Der Logokasten.
   ReHub setzt .offer_grid figure img{height:150px} (in schmalen Spalten per
   Medienabfrage auf 80px). In einem 42px hohen Kasten ergibt das einen
   angeschnittenen Streifen statt eines Logos.

   Warum hier feste Pixel und nicht max-width:100%: Ein Prozentwert fuer
   max-height braucht eine aufgeloeste Hoehe des Elternteils. In einem Raster-
   bzw. Flexfeld ohne feste Hoehe ist die unbestimmt, der Prozentwert wird
   verworfen - und die 80px aus dem Theme bleiben stehen. */
/* --- Logorahmen, ueberall gleich ---
   Alle Shoplogos sind 160x120 JPG mit eingebranntem weissem Rand. Die Tinte ist
   auf die Breite normiert (140-144px) und mittig, aber 22 bis 116px hoch. Mit
   object-fit:contain bestimmt deshalb die Leere die Groesse: eine Wortmarke wie
   G-Star fuellt 18 Prozent des Kastens, ein Signet wie HUAWEI 66. Genau das ist
   der Grund, warum die Leisten nach viel Weiss und wenig Marke aussehen.

   Hier laeuft es andersherum: logo-passt.js misst je Datei das Rechteck der
   Tinte und legt es als --iw/--ih/--ox/--oy an das Bild. Der Rahmen vergroessert
   das Bild dann so weit, dass die TINTE ihn ausfuellt, und schneidet den weissen
   Ueberstand ab. Ohne das Skript greifen die Vorgaben unten (--iw = --cw), und
   es bleibt beim alten contain-Verhalten - kaputt geht dabei nichts.

   --bw/--bh sind bewusst einheitenlos: in calc() laesst sich nur mit Zahlen
   multiplizieren, eine Laenge mal Laenge gibt es nicht. */
.bg-neu .bgn-logo,
.bg-neu div.asp_w.asp_r .asp_image,   /* Suchergebnisse (Ajax Search Pro), siehe Abschnitt 3 */
.bg-neu .bg-cat-shopcard-logo {   /* Kategoriekacheln, siehe Abschnitt Kategorie-Kopf */
    --bw: 92; --bh: 34;
    --pad: .94;               /* etwas Abstand zum Rand, sonst klebt die Marke an */
    box-sizing: content-box;
    width: calc(var(--bw) * 1px); height: calc(var(--bh) * 1px);
    flex: none; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-size: 0;              /* alt-Text unsichtbar halten, das Logo ist rein dekorativ */
}
.bg-neu .bgn-logo a { display: block; line-height: 0; flex: none; }

/* --- Die Platte ---
   Das Weiss in der Datei laesst sich nicht wegnehmen, also bekommt es eine
   Kante. Ein Logo auf weisser Karte ohne Rahmen sieht aus wie ein Versehen;
   dasselbe Logo auf einer umrandeten Platte sieht aus wie ein Schild. Die
   Platte traegt deshalb ueberall dieselbe Kante, denselben Radius und dieselbe
   leichte Hebung - sie ist ein Bauteil, keine Verzierung. */
.bg-neu .bgn-logo--tile {
    background: #fff;
    border: 1px solid var(--bg-line);
    border-radius: 9px;
    padding: 7px 9px;
    box-shadow: 0 1px 2px rgba(21,32,43,.05);
}
.bg-neu a:hover .bgn-logo--tile { border-color: var(--bg-line-strong); }
.bg-neu .bgn-logo img,
.bg-neu div.asp_w.asp_r .asp_image img,
.bg-neu .bg-cat-shopcard-logo img {
    --cw: 160; --ch: 120;      /* Vorlagenmass, vom Skript ueberschrieben */
    /* Rueckfall, solange das Skript ein Bild noch nicht gemessen hat - und das
       ist bei loading="lazy" der Normalfall, bis man hinunterscrollt. Frueher
       stand hier das Leinwandmass (160x120); dann rechnet der Rahmen mit lauter
       Leere und die Marke wird winzig. Gemessen ueber alle Dateien ist die Tinte
       aber IMMER 140-144px breit - mit 142x46 liegt der Rueckfall bei flachen
       Wortmarken exakt richtig und bei hohen Signets nur wenig daneben. */
    --iw: 142; --ih: 46;
    --ox: 0; --oy: 0;
    /* Sauberer Massstab (21.09.2026). Die Logodateien sind durchweg 160x120
       Pixel. Die alte Startseite zeigt sie in Originalgroesse (160 CSS-px) und
       wirkt scharf, obwohl das auf Retina zweifach hochgerechnet ist; dieser
       Rahmen zog dieselben Dateien auf 89 bis 120 CSS-px - und DAS sah
       verwaschen aus. Der Unterschied ist der Faktor, nicht die Datei: bei 2,0
       (Retina, Originalgroesse) oder 1,0 (Retina, halbe Groesse) wird jeder
       Bildpunkt ganzzahlig vervielfacht; bei 1,33 (106px) bekommt jeder zweite
       Strich eine andere Dicke. Im Vergleichsbild bei Geraetefaktor 2 war das
       eindeutig: 160px scharf, 106px matschig, 80px scharf und klein.
       Deshalb wird der Massstab auf .5 oder 1 gerundet (Regel in @supports
       unter dieser): halbe oder ganze Dateigroesse ist auf 1x- und 2x-Bild-
       schirmen gleichermassen sauber. Unter .5 (kleine Kaesten wie das
       Hero-Logo) bleibt der krumme Wert, dort ist die Marke ohnehin klein.
       Ein Kasten muss also entweder die ganze Datei fassen (--bw 152, siehe
       Partnerkacheln) oder auf die halbe zielen (--bw 80 bis 92) - ein Kasten
       dazwischen bekommt trotzdem nur die halbe Groesse.
       --smax 1: nie ueber die Dateigroesse hinaus, relativ zu ihr (--cw) -
       eine 320x240-Datei duerfte also doppelt so gross gezeichnet werden. */
    --smax: 1;
    --s0: min(calc(var(--bw) * var(--pad) / var(--iw)), calc(var(--bh) * var(--pad) / var(--ih)), var(--smax));
    --s: var(--s0);
    width:  calc(var(--cw) * var(--s) * 1px) !important;
    height: calc(var(--ch) * var(--s) * 1px) !important;
    max-width: none !important; max-height: none !important;
    /* Sitzt die Tinte nicht genau mittig, wandert das Bild um den Versatz. */
    transform: translate(calc(var(--ox) * var(--s) * -1px), calc(var(--oy) * var(--s) * -1px));
    object-fit: fill; display: block; flex: none;
}
/* Rundung auf .5 oder 1, siehe oben: unter .5 bleibt der krumme Wert.
   In @supports, weil ein Browser ohne round() den Wert einer --Eigenschaft
   erst beim Einsetzen prueft - die Breite waere dann ungueltig und das Logo
   weg. So bleibt er einfach beim ungerundeten Massstab. */
@supports (width: calc(round(down, 1.5px, 1px))) {
    .bg-neu .bgn-logo img,
    .bg-neu div.asp_w.asp_r .asp_image img,
    .bg-neu .bg-cat-shopcard-logo img {
        --s: max(calc(round(down, var(--s0) * 2, 1) / 2), min(var(--s0), .5));
    }
}

.bg-neu .bgn-type {
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--bg-text-3);
    margin: 0;
}
/* Bis 21.09.2026 stand "Gutscheincode" in Gruen. Neben der gruenen Plakette
   verschmolzen beide zu einem Etikett, und Gruen hatte auf der Seite fuenf
   Bedeutungen. Jetzt: Art-Wort grau fuer beide Sorten, Gruen nur noch fuer den
   Pruefhaken. Ob Code oder Angebot, sagen Kachel (Ticket) und Knopftext. */
.bg-neu .bgn-type:not(.bgn-type--deal) { color: var(--bg-text-3); }

/* Shopname als Zeile ueber dem Wert - er ersetzt sowohl das Art-Woertchen oben
   als auch die Verweiszeile "Alle X Gutscheine" ganz unten. Zwei Zeilen weniger. */
.bg-neu .bgn-card-shop {
    display: block;
    font-size: 12px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--bg-text-3);
    text-decoration: none;
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bg-neu .bgn-card-shop:hover { color: var(--bg-blue); }
/* Platz fuer die Plakette in der Ecke freihalten, sonst legt sie sich auf den
   Shopnamen. Das Theme zentriert Text in .offer_grid - hier links. */
/* justify-content ausdruecklich setzen: gemessen stand der Wertblock am rechten
   Rand statt neben dem Logo - irgendeine Theme-Regel setzt space-between. */
.bg-neu .bgn-card .bgn-card-head {
    text-align: left;
    justify-content: flex-start;
}
.bg-neu .bgn-card .bgn-value-block { flex: 1 1 auto; }
.bg-neu .bgn-value-block { min-width: 0; text-align: left; }
.bg-neu .bgn-value {
    display: block;
    font-size: 24px; font-weight: 700;
    line-height: 1; letter-spacing: -.03em;
    color: var(--bg-text);
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-value .bgn-upto {
    font-size: 14px; font-weight: 600;
    letter-spacing: 0; color: var(--bg-text-2);
}

/* --- Titel und Bedingung --- */
/* Das Child-Theme setzt in style.css
     .offer_grid p{font-size:14px; height:36px; line-height:18px; font-weight:normal!important}
   Die feste Hoehe ist der Grund, warum lange Titel bisher auf der Bedingung
   landeten - der Text laeuft aus dem 36px-Kasten heraus. Beides wird hier
   zurueckgenommen, das Schriftgewicht braucht dafuer dieselbe Waffe. */
.bg-neu .bgn-card-title,
.bg-neu .bgn-note {
    height: auto;
    min-height: 0;
    overflow: visible;
}
.bg-neu .bgn-card-title {
    font-weight: 600 !important;
    font-size: 14.5px;
    line-height: 1.4;
    margin: 0 !important;
    /* Zwei Zeilen genuegen. Ohne Deckel bestimmt der laengste Titel die Hoehe
       der ganzen Reihe, und darunter klafft bei den anderen eine Luecke. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bg-neu .bgn-card-title a { color: var(--bg-text); text-decoration: none; }
.bg-neu .bgn-card-title a:hover { color: var(--bg-blue); }

/* Vollstaendig, nicht abgeschnitten - das war der Grund fuer "auf das GESAMTE S…" */
.bg-neu .bgn-note {
    margin: 0;
    font-size: 13px; line-height: 1.45;
    font-weight: 400 !important;
    color: var(--bg-text-2);
    text-transform: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* --- Fuss: Knopf und Frist --- */
/* Knopf und Frist stehen bewusst untereinander statt nebeneinander. Nebeneinander
   passen sie in einer 5-spaltigen Reihe nicht und brechen um - dann ist der Fuss
   mal 78 und mal 116 Pixel hoch und die gestrichelte Linie sitzt in jeder Karte
   woanders. Gestapelt ist er immer gleich hoch. */
/* Knopf und Frist nebeneinander. Sie standen untereinander, weil sie in einer
   sechsspaltigen Reihe umbrachen - die neue Startseite zeigt drei Spalten, da
   ist Platz. flex-wrap faengt schmalere Raster trotzdem ab. */
.bg-neu .bgn-card-footer {
    margin-top: auto;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 8px 12px;
    /* Negative Aussenabstaende plus gleich grosse Innenabstaende: so laeuft die
       gestrichelte Linie bis an beide Kanten, waehrend Knopf und Frist in der
       Flucht des uebrigen Textes bleiben. Eine Abrisslinie, die vor dem Rand
       aufhoert, ist keine. */
    margin-left: -18px; margin-right: -18px;
    padding: 12px 18px 16px;
    border-top: 1px dashed var(--bg-line-strong);
}
.bg-neu .bgn-btn { margin: 0; }
/* ReHub haengt an den Knopfkasten 15px Aussenabstand, die hier nur den Fuss aufblasen */
.bg-neu .bgn-card-footer .priced_block { margin: 0; }

/* Der Knopf selbst kommt aus rehub_generate_offerbtn(). Seine Farbe steht als
   Inline-<style> mit !important in den ReHub-Optionen - die aendern wir dort,
   nicht hier. Form und Groesse lassen sich dagegen sauber setzen. */
.bg-neu .bgn-btn .btn_offer_block {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; line-height: 1.2;
    padding: 10px 15px;
    border-radius: 7px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
.bg-neu .bgn-btn .btn_offer_block:active { top: 0; }

.bg-neu .bgn-expiry {
    font-size: 11.5px;
    color: var(--bg-text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bg-neu .bgn-expiry.is-urgent {
    color: var(--bg-urgent);
    font-weight: 600;
}

/* --- Shoplink --- */
/* Zwei Zeilen Platz reservieren: "Alle Horizn Studios Gutscheine" bricht um,
   "Alle Tapo Gutscheine" nicht. Ohne feste Hoehe sitzt die gestrichelte Linie
   darueber in jeder Karte der Reihe woanders. */
.bg-neu .bgn-shop-link {
    margin: 0 0 14px;
    padding: 0;
    font-size: 12.5px;
    text-align: left;
    line-height: 1.4;
    min-height: 35px;
}
.bg-neu .bgn-shop-link a { color: var(--bg-blue); text-decoration: none; }
.bg-neu .bgn-shop-link a:hover { text-decoration: underline; }

/* --- Badge: aus dem Schraegband wird ein Plaettchen ---
   Es steht bewusst in der normalen Reihenfolge ganz oben und nicht absolut in der
   Ecke: Labels wie "Nur kurze Zeit" sind zu breit, um neben dem Wert zu passen.

   Das !important ist hier kein Reflex. Das Child-Theme setzt in style.css selbst
     .re-ribbon-badge{width:90px!important;height:90px!important}
     .re-ribbon-badge.left-badge{left:-6px!important}
   Ohne gleiche Waffe bleibt das Band 90x90 Pixel gross und haengt links raus. */
/* Auf der Karte sitzt die Plakette in der Ecke, in der Zeile laeuft sie im Text
   mit - dort ist rechts der Knopf. */
/* Die Plakette stand frei in der Ecke und hat sich bei fuenf Spalten ueber das
   Logo gelegt: die Logoplatte ist 114px breit, "NUR KURZE ZEIT" rund 95 - in
   einer 190px breiten Karte geht das nicht auf. Reservierter Platz half nicht,
   weil die Platte eine feste Breite hat und nicht schrumpft. Jetzt laeuft sie
   im Fluss mit, rechtsbuendig ueber dem Logo: kostet eine schmale Zeile, kann
   sich aber bei keiner Spaltenzahl mehr ueberlagern. */
.bg-neu .bgn-card .re-ribbon-badge {
    position: static !important;
    align-self: flex-end;
    width: auto !important; height: auto !important;
    left: auto !important; right: auto !important; top: auto !important;
    margin: -2px 0 -3px !important; padding: 0;
    transform: none; background: none; box-shadow: none;
    overflow: visible; text-align: right;
}
.bg-neu .bgn-offer .re-ribbon-badge {
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 0 2px;
    padding: 0;
    transform: none;
    background: none;
    box-shadow: none;
    overflow: visible;
    text-align: left;
    pointer-events: auto;
}
.bg-neu .bgn-card .re-ribbon-badge::before,
.bg-neu .bgn-card .re-ribbon-badge::after,
.bg-neu .bgn-offer .re-ribbon-badge::before,
.bg-neu .bgn-offer .re-ribbon-badge::after { display: none; }
.bg-neu .bgn-card .re-ribbon-badge > span,
.bg-neu .bgn-offer .re-ribbon-badge > span {
    display: inline-block;
    position: static;
    transform: none !important;
    width: auto !important;
    height: auto;
    right: auto; top: auto;
    padding: 3px 8px;
    border-radius: 4px;
    /* Als Langformen mit !important (21.09.2026). Vorher stand hier
       `font: 600 11px/1.5 inherit` - als Kurzform ungueltig (`inherit` darf
       nicht als Teil stehen), der Browser verwarf die Zeile, und die Plakette
       lief in dem, was rehub-blankchild/style.css:43 vorgibt: `font: bold
       9px/24px Arial !important`. Gegen dieses !important kommen nur Langformen
       mit !important und hoeherer Spezifitaet an. */
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: .07em; text-transform: uppercase;
    background: var(--bg-blue-soft);
    color: var(--bg-blue);
    box-shadow: none;
}
.bg-neu .bgn-card .re-ribbon-badge > span::before,
.bg-neu .bgn-card .re-ribbon-badge > span::after,
.bg-neu .bgn-offer .re-ribbon-badge > span::before,
.bg-neu .bgn-offer .re-ribbon-badge > span::after { display: none; }

/* Eine Regel (21.09.2026): EINE gefuellte Plakette je Zeile, und das ist der
   Verkaufsgrund "Exklusiv". Alles andere sind leise Hinweise - Umriss oder
   weiche Flaeche. Vorher trug "Exklusiv" das Gruen des Suchknopfs (wirkte
   klickbar und war gesaettigter als der Knopf), "Beliebt" und "Neu" hatten
   dieselbe Farbe wie die Wert-Kachel und gingen unter. */
/* Badge 1 = "Beliebt" - Lavendel, siehe Token. Vorher: Umriss (sah aus, als
   fehle die Farbe), Tiefblau gefuellt (zu dunkel), helles Blau (ununterscheidbar
   von der Wert-Kachel der Angebote). Der Kundengruppen-Chip bleibt grau. */
.bg-neu .bgn-card .badge_1 > span,
.bg-neu .bgn-offer .badge_1 > span {
    background: var(--bg-popular);
    color: var(--bg-popular-text);
    box-shadow: none;
}
/* Badge 2 = "Exklusiv" - Gold, siehe --bg-exclusive im Token-Block */
.bg-neu .bgn-card .badge_2 > span,
.bg-neu .bgn-offer .badge_2 > span {
    background: var(--bg-exclusive);
    color: var(--bg-on-exclusive);
}
/* Badge 3 = "Neu" - weiches Gruen */
.bg-neu .bgn-card .badge_3 > span,
.bg-neu .bgn-offer .badge_3 > span {
    background: var(--bg-action-soft);
    color: var(--bg-action-text);
}
/* Badge 4 = "Nur kurze Zeit" - Dringlichkeit, keine Auszeichnung */
.bg-neu .bgn-card .badge_4 > span,
.bg-neu .bgn-offer .badge_4 > span {
    background: var(--bg-urgent-soft);
    color: var(--bg-urgent);
}

/* --- Abgelaufene Gutscheine bleiben erkennbar --- */
.bg-neu .bgn-card.expired_coupon,
.bg-neu .bgn-card.rh_expired { opacity: .6; }

@media (max-width: 640px) {
    .bg-neu .offer_grid.bgn-card { padding: 16px 14px 0 22px; }
    .bg-neu .bgn-value { font-size: 24px; }
}

/* ==========================================================================
   3. Kopfzeile
   Markup: neu/inc/header_layout/header_eight.php
   ========================================================================== */

/* --- Logozeile auf tiefem Blau --- */
/* Gemessen und getrimmt (10.09.): die Zeile war 161px hoch - 14+14 eigenes
   Polster, 15+15 aus ReHubs .logo-section und ein Suchblock, den die
   Vorschlagszeile darunter auf 103px aufblies. Jetzt traegt nur noch die
   Kopfzeile selbst Polster, und die Hoehe bestimmt das Suchfeld. */
.bg-neu .logo_section_wrap.bgn-header {
    background: var(--bg-blue-deep);
    padding: 16px 0;
}
.bg-neu .bgn-header-row {
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap;
    /* Auch links und rechts auf null: ReHubs .logo-section rueckt den Inhalt
       um 24px ein. Gemessen lag das Logo bei x=124, waehrend Menue,
       Vertrauensleiste und der Inhalt darunter bei x=100 beginnen - eine
       Kante, die man sieht, ohne sie benennen zu koennen. */
    padding: 0 !important;
}
/* ReHubs .logo-section traegt `clearfix`, also ein ::before mit Inhalt. In
   einem Flexlayout wird daraus ein vollwertiges Flexkind: null Pixel breit,
   aber die Luecke von 24px steht davor. Gemessen lag das Logo dadurch bei
   x=124, waehrend Menue und Vertrauensleiste bei x=100 beginnen. Ein Relikt
   aus der Float-Zeit, das im Flexlayout nichts mehr zu suchen hat. */
.bg-neu .bgn-header-row::before,
.bg-neu .bgn-header-row::after { content: none !important; }
.bg-neu .bgn-site-logo { display: block; flex: none; margin: 0; padding: 0; }  /* ReHub blendet .logo auf Mobil per display:none aus */
/* 42 -> 45px am 20.09.2026 (+7%): neben dem sehr breiten Suchfeld wirkte die
   Marke zu klein. Die Kopfzeile darf dabei NICHT wachsen, und genau deshalb
   stehen hier zwei Zahlen statt einer: die Huelle behaelt ihre 42px und gibt
   der Flexreihe weiter dieselbe Hoehe, das Bild wird 45px hoch und haengt mit
   je 1,5px negativem Rand oben und unten darueber hinaus. Die 16px Polster der
   Leiste nehmen das auf, sichtbar ist nur das groessere Logo. */
.bg-neu .bgn-site-logo { height: 42px; }
.bg-neu .bgn-site-logo img { height: 45px; width: auto; display: block; margin: -1.5px 0; }

/* --- Suche: von klein rechts aussen zu breit und mittig --- */
.bg-neu .bgn-search { flex: 1 1 260px; min-width: 200px; margin: 0; float: none; }
.bg-neu .bgn-search input[type="search"],
.bg-neu .bgn-search input[type="text"] {
    width: 100%;
    padding: 11px 44px 11px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 14px;
    height: auto;
    box-shadow: none;
}
.bg-neu .bgn-search input::placeholder { color: #90a5b9; }
.bg-neu .bgn-search input:focus {
    outline: 2px solid var(--bg-action);
    outline-offset: 1px;
    background: rgba(255,255,255,.13);
}
.bg-neu .bgn-search button,
.bg-neu .bgn-search input[type="submit"] {
    background: var(--bg-action);
    color: var(--bg-on-action);
    border: 0; border-radius: 6px;
}

/* --- Provisionshinweis ---
   Steht seit 10.09. unten statt im Kopf. Oben war er eine Zeile, die niemand
   beim Ankommen liest und die den Inhalt nach unten drueckt; unten ist er das,
   was er ist - eine Fussnote, die aber sichtbar bleiben muss. */
.bg-neu .bgn-disclosure {
    background: var(--bg-blue-deep);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 0;
}
/* Volle Breite: der Hinweis ist eine Bande, kein Absatz in der Lesespalte.
   Dasselbe max()-Polster wie die Abschnitte der Startseite, damit die Kante
   mit allem anderen fluchtet. */
.bg-neu .bgn-disclosure-inner {
    padding: 0 max(18px, calc((100% - 1200px) / 2));
}
.bg-neu .bgn-disclosure p {
    margin: 0;
    color: #93a8bc;
    font-size: 12.5px; line-height: 1.55;
}
.bg-neu .bgn-disclosure strong { color: #cbdaea; font-weight: 600; }
.bg-neu .bgn-disclosure a { color: #9dc4ea; text-decoration: underline; }

/* --- Vertrauensleiste --- */
.bg-neu .bgn-trustbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-line);
}
.bg-neu .bgn-trustbar ul {
    margin: 0; padding: 11px 0; list-style: none;
    display: flex; gap: 30px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--bg-text-2);
}
.bg-neu .bgn-trustbar li {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
}
.bg-neu .bgn-trustbar li::before { content: none; }
.bg-neu .bgn-trustbar b {
    color: var(--bg-text); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-trustbar svg {
    width: 15px; height: 15px; flex: none;
    color: var(--bg-action);
}

/* --- Navigationsleiste (Fassung 1) ---
   ReHub liefert sie in Grossbuchstaben, mit Trennstrichen zwischen den
   Punkten und einem farbigen Kasten hinter dem aktiven. Das ist die Optik des
   alten Themes. Hier dieselbe Sprache wie im Rest: normale Schreibung, kein
   Rahmenwerk, und der aktive Punkt wird durch einen Strich an der Unterkante
   markiert - derselbe Strich wie unter der laufenden Marke im Slider. */
/* Gerechnet, nicht geschaetzt: der Sprung vom Kopf (#1b2f44, Helligkeit 2,7%)
   zur Leiste (#375878, 9,1%) ist Faktor 1,84 - zur weissen Vertrauensleiste
   darunter aber 7,42. Das Band trennte sich also kaum vom Kopf, aber hart von
   dem darunter, und las sich als drittes, fremdes Element zwischen zwei
   starken. Jetzt eine Entscheidung statt eines Kompromisses: dieselbe Farbe wie
   der Kopf, getrennt nur durch einen Haarstrich. Aus drei Baendern werden zwei -
   ein dunkler Block und die helle Leiste. */
.bg-neu .bgn-navbar {
    background: var(--bg-blue-deep);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.bg-neu .bgn-navbar .top_menu > ul { display: flex; align-items: stretch; }
.bg-neu .bgn-navbar .top_menu > ul > li {
    border: 0 !important;
    margin: 0; padding: 0;
}
.bg-neu .bgn-navbar .top_menu > ul > li::before,
.bg-neu .bgn-navbar .top_menu > ul > li::after { content: none !important; }
/* Der Strich unter dem aktiven Punkt liegt als inset-Schatten am Link, NICHT
   als ::after. Grund, teuer gelernt: ReHub setzt den Pfeil bei "Kategorien"
   selbst als Pseudoelement. Ein eigenes ::after ueberschreibt ihn, und
   `display:flex` am Link macht aus einem ::before das erste Flexkind - der
   Pfeil stand dann VOR dem Wort. Mit block + inset-Schatten bleiben beide
   Pseudoelemente des Themes unangetastet. */
.bg-neu .bgn-navbar .top_menu > ul > li > a {
    display: block;
    height: 48px; line-height: 48px; padding: 0 22px;
    border-radius: 6px 6px 0 0;
    color: #dbe6f1 !important;
    font-size: 14.5px; font-weight: 600;
    text-transform: none !important; letter-spacing: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: inset 0 -3px 0 transparent;
    transition: box-shadow .15s ease, color .15s ease;
}
/* Der erste Punkt buendig mit Logo und Inhalt darunter - sonst haengt die
   ganze Zeile 22px nach rechts versetzt. */
.bg-neu .bgn-navbar .top_menu > ul > li:first-child > a { padding-left: 0; }
.bg-neu .bgn-navbar .top_menu > ul > li:first-child > a:hover { padding-left: 22px; margin-left: -22px; }
/* "Leicht abgesetzt": beim Ueberfahren hebt sich der Punkt als eigene Flaeche
   ab, statt dass Trennstriche dauerhaft Kaesten zeichnen. Im Ruhezustand
   traegt der Abstand die Trennung. */
.bg-neu .bgn-navbar .top_menu > ul > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 -3px 0 rgba(255,255,255,.35);
}
.bg-neu .bgn-navbar .top_menu > ul > li.current-menu-item > a,
.bg-neu .bgn-navbar .top_menu > ul > li.current_page_item > a,
.bg-neu .bgn-navbar .top_menu > ul > li.current-menu-parent > a {
    color: #fff !important;
    box-shadow: inset 0 -3px 0 var(--bg-action);
}
/* Die Klapplisten sind Theme-Bauteile - nur Kante und Schatten angleichen. */
.bg-neu .bgn-navbar .top_menu ul.sub-menu {
    border: 1px solid var(--bg-line);
    border-radius: 0 0 var(--bg-radius) var(--bg-radius);
    box-shadow: 0 12px 28px -18px rgba(21,32,43,.55);
}

/* --- Suchfeld ---
   Ajax Search Pro bringt seine Optik aus den eigenen Einstellungen mit und
   schreibt sie als <style> in die Seite - eine weisse Pille mit grauer Lupe.
   Die Regeln hier tragen deshalb !important: ASPs Blocke stehen weiter unten
   im Dokument und gewinnen sonst ueber die Reihenfolge. Beim Scharfschalten
   gehoert das in die ASP-Einstellungen, dann kann dieser Block weg. */
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_w,
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_m,
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_w_container,
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_main_container {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Auch der Rand muss weg, nicht nur das Polster: ASPs Huelle brachte 20px
       mit, die die ganze Kopfzeile hoeher machten. */
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    /* Und die Rundung. Gemessen: .asp_w und .asp_m tragen `border-radius: 50px`
       und schneiden das Feld darin zurecht - meine 4px am .probox waren also
       richtig gesetzt und wurden von aussen ueberstimmt. Ein Elternteil mit
       Radius und overflow:hidden bestimmt die Form seiner Kinder, egal was die
       selbst sagen. */
    border-radius: 4px !important;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox {
    margin: 0 !important;
    height: 44px !important;
    /* Polster links am KASTEN, nicht am Feld: ASP setzt fuer input.orig eigene
       Werte ueber einen ID-Selektor (#ajaxsearchpro1_1 ...), und eine ID
       schlaegt jede Zahl von Klassen - auch mit !important. Gemessen: mein
       padding:0 14px kam nie an, das Feld trug ASPs margin-left:-4px. */
    padding: 0 0 0 16px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    display: flex !important; align-items: stretch !important;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .proinput { margin: 0 !important; padding: 0 !important; }
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .proinput input.orig,
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .proinput input.autocomplete {
    height: 42px !important;
    padding: 0 14px !important;
    color: #fff !important;
    font-size: 14.5px !important; line-height: 42px !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    text-shadow: none !important;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .proinput input.orig::placeholder { color: #90a5b9 !important; opacity: 1 !important; }
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox:focus-within {
    background: rgba(255,255,255,.14) !important;
    border-color: var(--bg-action) !important;
}
/* Die Lupe wird zum Knopf - im Entwurf war das die einzige farbige Flaeche
   im Kopf. Buendig an der Kante und ueber die volle Hoehe, nicht als Kaestchen
   im Feld: ein schwebendes Quadrat sieht aus, als waere es hineingerutscht. */
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .promagnifier {
    width: 48px !important; height: auto !important;
    min-width: 48px !important; max-width: 48px !important;
    align-self: stretch !important;
    margin: 0 !important;
    background: var(--bg-action) !important;
    border-radius: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .promagnifier:hover { background: var(--bg-action-hover) !important; }
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .promagnifier .innericon {
    width: 20px !important; height: 20px !important; float: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .promagnifier svg { fill: var(--bg-on-action) !important; width: 19px !important; height: 19px !important; }
/* Die Vorschlagszeile ("z.B.: G-Star, Eis.de, ...") kommt aus ASP und haengt
   unter dem Feld. Sie blaeht die Kopfzeile um 35px auf fuer drei Beispiele, die
   im Platzhalter besser aufgehoben waeren. Hier ausgeblendet - beim
   Scharfschalten in den ASP-Einstellungen abstellen ("Try this" / Suchvorschlaege)
   und die Beispiele stattdessen in den Platzhaltertext nehmen. */
.bg-neu :is(.bgn-search, #rhSplashSearch) p.asp-try { display: none !important; }

/* Symbole an Menuepunkten (Warenkorb bei "Shops") kommen aus den
   Menue-Einstellungen von ReHub. Im neuen Kopf traegt kein Punkt ein Symbol -
   eines allein wirkt wie vergessen. Beim Scharfschalten im Menue entfernen. */
.bg-neu .bgn-navbar .top_menu > ul > li > a > i,
.bg-neu .bgn-header-nav .top_menu > ul > li > a > i { display: none !important; }

/* --- Fassung 2: alles in einer Zeile ---
   Logo, Suche und Menue nebeneinander, wie im ersten Entwurf. Die Leiste
   darunter traegt in dieser Fassung nur noch den Burger fuers Telefon und
   verschwindet am Rechner ganz. Umschalter: Adminleiste oder ?bgkopf=1|2. */
.bg-neu .bgn-header--2 .bgn-header-row { flex-wrap: nowrap; gap: 22px; }
.bg-neu .bgn-header--2 .bgn-search { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.bg-neu .bgn-header-nav { flex: none; margin-left: auto; }
.bg-neu .bgn-header-nav .top_menu > ul {
    display: flex; align-items: center; gap: 24px;
    margin: 0; padding: 0; list-style: none;
    background: none; border: 0;
}
.bg-neu .bgn-header-nav .top_menu > ul > li { margin: 0; padding: 0; float: none; border: 0 !important; box-shadow: none; }
.bg-neu .bgn-header-nav .top_menu > ul > li::before { content: none; }
/* ReHub zeichnet beim Ueberfahren und am aktiven Punkt einen eigenen 3px-Balken
   als a:after in der Themefarbe (Orange) - zusammen mit dem Unterstrich unten
   stand der Strich doppelt (21.09.2026). Nicht per content:none entfernen,
   sondern nur unsichtbar: Hoehe 0, ohne Farbe. Die Trennstriche zwischen den
   Punkten (border-right am li, Eltern-Theme) ebenfalls weg. */
.bg-neu .bgn-header-nav .top_menu > ul:not(.off-canvas) > li > a::after,
.bg-neu .bgn-navbar .top_menu > ul:not(.off-canvas) > li > a::after {
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: none !important;
}
.bg-neu .bgn-navbar .top_menu > ul > li { border-right: 0 !important; }
.bg-neu .bgn-header-nav .top_menu > ul > li > a {
    display: block; padding: 7px 0;
    color: #dbe6f1; font-size: 14.5px; font-weight: 600; line-height: 1.2;
    text-transform: none; letter-spacing: 0;
    border-bottom: 2px solid transparent;
    background: none;
}
.bg-neu .bgn-header-nav .top_menu > ul > li > a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.bg-neu .bgn-header-nav .top_menu > ul > li.current-menu-item > a,
.bg-neu .bgn-header-nav .top_menu > ul > li.current_page_item > a {
    color: #fff; border-bottom-color: var(--bg-action);
}
@media (min-width: 1025px) {
    /* Am Rechner traegt die Leiste in Fassung 2 nichts mehr. */
    .bg-neu .bgn-navbar--2 { display: none; }
}
@media (max-width: 1024px) {
    /* Auf schmalen Schirmen uebernimmt in beiden Fassungen der Burger. */
    .bg-neu .bgn-header-nav { display: none; }
    .bg-neu .bgn-header--2 .bgn-header-row { flex-wrap: wrap; }
}

@media (max-width: 1024px) {
    /* Auf Mobil verschiebt ReHub das Logo per JavaScript in die Menueleiste
       (Klasse .mobileinmenu, display:none !important auf dem Original). Dagegen
       anzukaempfen lohnt nicht - dort gehoert es auch hin. Die Suche bekommt
       stattdessen die volle Breite. */
    .bg-neu .bgn-header-row { gap: 14px; }
    .bg-neu .bgn-search { flex: 1 1 100%; }
    .bg-neu .bgn-trustbar ul { gap: 8px 18px; font-size: 12.5px; }
}
@media (max-width: 640px) {
    /* Auf dem Telefon alle vier Punkte als zwei Zeilen zu zwei Spalten. Bis
       21.09.2026 fielen "Shops und Marken" und "kostenlos" weg - das las sich
       wie ein Fehler, nicht wie eine Entscheidung. */
    .bg-neu .bgn-trustbar ul {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 7px 12px; padding: 9px 0;
        font-size: 12px; line-height: 1.3;
    }
    .bg-neu .bgn-trustbar ul { padding-left: 16px; padding-right: 16px; }   /* der Container hat auf dem Telefon keinen Rand */
    .bg-neu .bgn-trustbar li { gap: 6px; align-items: flex-start; min-width: 0; }
    .bg-neu .bgn-trustbar svg { width: 13px; height: 13px; margin-top: 1px; }
}

/* ==========================================================================
   4. Gutschein-Zeile der Shopseiten
   Markup: neu/inc/parts/postlistpart.php
   Wirkt auf Shop-, Kategorie-, Such- und Archivseiten - ueberall dort, wo
   wpsm_offer_list_loop() bzw. category.php die Liste ausgibt.

   Die Zeile benutzt dieselben Bausteine wie die Karte (Perforation, Plaettchen
   statt Schraegband, Art-Woertchen, Frist), nur waagerecht angeordnet.
   ========================================================================== */

.bg-neu .rh_offer_list.bgn-offer {
    position: relative;
    display: block;
    margin: 0 0 14px !important;   /* Child setzt margin-bottom:2px !important */
    /* 18/20/17 statt 14/16/13 (21.09.2026, zweite Runde): ohne die Details-Reihe
       war die Zeile mit 116px zu gedraengt - Frist und Pruefstand klebten am Titel. */
    padding: 18px 20px 10px;       /* unten 10: gemessen 21px unter dem Fusstext gegen 16 darueber (21.09.2026) */
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bg-neu .rh_offer_list.bgn-offer:hover {
    border-color: var(--bg-line-strong);
    box-shadow: var(--bg-shadow);
}

/* Die Perforation am linken Rand ist mit der auf der Karte zusammen entfallen -
   Begruendung dort. Die Abrisslinie der Zeile ist .bgn-offer-detail. */

/* Merkzettel-Herz oben rechts statt im Bildkasten */
.bg-neu .bgn-offer-save {
    position: absolute;
    top: 10px; right: 12px;
    z-index: 2;
    font-size: 14px;
}

/* --- Die drei Spalten --- */
.bg-neu .bgn-offer-head {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding-bottom: 0;
}

/* --- Wert-Plaettchen ---
   Ohne Rahmen: der Rahmen der alten Zeile liess den Kasten wie einen
   fehlenden Bildplatz aussehen. Flaeche statt Linie loest das. */
.bg-neu .bgn-offer-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 74px;
    padding: 9px 6px;
    border-radius: 8px;
    background: var(--bg-blue-soft);
    color: var(--bg-blue);
    text-align: center;
    text-decoration: none;
    line-height: 1.1;
}
.bg-neu .bgn-offer-value:hover { background: #dde9f4; }
/* Code oder Angebot (21.09.2026, vierte Fassung): gleiche Form, andere Farbe,
   beide getoent. Code = weiches Gruen mit dunkelgruener Zahl (das Gruen aus dem
   Bildzeichen), Angebot = weiches Blau mit blauer Zahl. Vollblau (dritte
   Fassung) war dem User zu stark und zu nah am Knopf; Ticketformen (erste und
   zweite Fassung) zu wenig flach. Der Markt trennt per Farbe (Gutscheinsammler,
   Sparwelt, Gutscheinrausch), coupons.de gar nicht. Gold bleibt Exklusiv. */
.bg-neu .bgn-offer[data-bg-type="code"] .bgn-offer-value {
    background: var(--bg-action-soft);
    color: var(--bg-action-text);
}
.bg-neu .bgn-offer[data-bg-type="code"] .bgn-offer-value:hover { background: #dfeecb; }
.bg-neu .bgn-offer[data-bg-type="code"] .bgn-offer-upto { color: var(--bg-action-text); opacity: .8; }
.bg-neu .bgn-offer[data-bg-type="code"] .bgn-offer-word { opacity: .85; }
.bg-neu .bgn-offer-number {
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bg-neu .bgn-offer-unit { font-size: 17px; font-weight: 600; margin-left: 1px; }
/* "Gratis", "Angebot", "2fuer1" - Woerter brauchen weniger Groesse als Zahlen,
   sonst sprengen sie das Plaettchen. */
/* Woerter statt Zahlen ("Gratis", "Angebot", "2fuer1"). 15px liessen "Angebot"
   im 78px breiten Plaettchen zu "Ange-bot" umbrechen - Trennung aus, kleiner. */
.bg-neu .bgn-offer-value--text .bgn-offer-number {
    font-size: 13px;
    letter-spacing: -.01em;
    white-space: normal;
    hyphens: none;
    word-break: normal;
}
.bg-neu .bgn-offer-upto {
    font-size: 10px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--bg-text-2);
}
.bg-neu .bgn-offer-word {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    opacity: .75;
}
.bg-neu .bgn-offer-image { display: block; line-height: 0; margin-bottom: 4px; }
.bg-neu .bgn-offer-image img {
    width: auto !important; height: auto !important;
    max-width: 66px !important; max-height: 40px !important;
    object-fit: contain; display: block;
}

/* --- Mitte: Art, Titel, Bedingung, Konditionen --- */
.bg-neu .bgn-offer-body { min-width: 0; }
/* Art-Woertchen und Band stehen in einer Zeile - das Band als eigene Reihe
   ueber der Zeile kostete 26px Hoehe fuer zwei Woerter. */
.bg-neu .bgn-offer-labels {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 6px;
}
.bg-neu .bgn-offer .bgn-type { margin: 0; }
.bg-neu .bgn-offer .re-ribbon-badge { margin: 0 !important; }
/* siehe Abschnitt 2: die Farbe des Art-Woertchens gilt fuer Karte und Zeile */
/* Kundengruppe ("Nur Neukunden") als Chip in der Etikettenzeile - vorher grau
   in der Konditionszeile, wo es niemand sah. Getoente Flaeche, kein Umriss
   (der gehoert "Beliebt") und kein Gold (das gehoert "Exklusiv"). */
.bg-neu .bgn-offer-cond {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-surface-2);
    color: var(--bg-text-2);
    font-size: 11px; font-weight: 600; line-height: 1.5;
    letter-spacing: .07em; text-transform: uppercase;
    white-space: nowrap;
}
/* Etikett ohne Text (Theme-Option badge_label_N leer) nie als leeres Plaettchen
   zeigen - postlistpart.php faengt es fuer die Zeile ab, das hier deckt Karte
   und Nachladen ab. */
.bg-neu .re-ribbon-badge:has(> span:empty),
.bg-neu .re-line-badge:has(> span:empty) { display: none !important; }

.bg-neu .bgn-offer-title {
    height: auto !important;
    min-height: 0;
    overflow: visible;
    margin: 0 0 5px !important;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600 !important;   /* Child erzwingt font-weight:normal !important */
    color: var(--bg-text);
}
.bg-neu .bgn-offer-title a { color: var(--bg-text); text-decoration: none; }
.bg-neu .bgn-offer-title a:hover { color: var(--bg-blue); }

.bg-neu .bgn-offer-note {
    height: auto !important;
    margin: 0 !important;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 500 !important;
    color: var(--bg-blue);
}

.bg-neu .bgn-offer-price {
    margin: 5px 0 0;
    font-size: 15px; font-weight: 700;
    color: var(--bg-text);
}

/* Konditionszeile: was frueher auf den grauen Streifen unten und das
   eingeklappte Detailfeld verteilt war, steht hier in einer Zeile. */
.bg-neu .bgn-offer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 14px;
    margin-top: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bg-text-3);
}
/* Fuss: Haarlinie ueber die volle Breite, links Frist/Bedingung/Details,
   rechts der Pruefstand (21.09.2026). Durchgezogen, nicht gestrichelt - die
   Abriss-Metapher ist mit den Ticketkacheln gestorben. */
.bg-neu .bgn-offer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--bg-line);
}
.bg-neu .bgn-offer-foot .bgn-offer-meta { flex: 1 1 auto; min-width: 0; }
.bg-neu .bgn-offer-foot .bgn-offer-verified { margin-left: auto; }
.bg-neu .bgn-offer-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.bg-neu .bgn-offer-meta > span + span::before {
    content: "·";
    color: var(--bg-line-strong);
}
.bg-neu .bgn-offer-expiry { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-neu .bgn-offer-expiry.is-urgent { color: var(--bg-urgent); font-weight: 600; }
/* Der Pruefstand ist das Argument dieser Seite gegenueber den grossen
   Portalen. Deshalb Haken und Farbe statt 70%-Grau am unteren Rand. */
.bg-neu .bgn-offer-verified { color: var(--bg-action-text); font-weight: 600; }
.bg-neu .bgn-offer-verified svg { flex: none; }

/* --- Knopf --- */
/* Pruefstand: steht seit dem Fuss (21.09.2026) rechts in .bgn-offer-foot, im
   Fluss - keine absolute Position mehr, damit auch kein Sonderfall auf Mobil. */
.bg-neu .bgn-offer-button { justify-self: end; }
.bg-neu .bgn-offer-foot .bgn-offer-verified {
    position: relative;
    flex: none;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: help;
    outline: none;
}
/* Erklaerung als Sprechblase: beim Ueberfahren und im Fokus (Antippen auf
   Mobil, Tab-Taste). Text kommt aus data-hint in postlistpart.php. */
.bg-neu .bgn-offer-verified::after {
    content: attr(data-hint);
    position: absolute;
    right: 0; bottom: calc(100% + 7px);
    width: max-content; max-width: 260px;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--bg-blue-deep);
    color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.4;
    text-align: left; white-space: normal;
    box-shadow: 0 6px 18px -8px rgba(21,32,43,.5);
    opacity: 0; visibility: hidden; transform: translateY(3px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    pointer-events: none;
    z-index: 5;
}
.bg-neu .bgn-offer-verified:hover::after,
.bg-neu .bgn-offer-verified:focus::after,
.bg-neu .bgn-offer-verified:focus-visible::after {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
}
.bg-neu .bgn-offer-verified:focus-visible { box-shadow: 0 0 0 2px var(--bg-blue-soft), 0 0 0 3.5px var(--bg-blue); border-radius: 4px; }
.bg-neu .bgn-offer-button .priced_block { margin: 0; }
.bg-neu .bgn-offer-button .btn_offer_block {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 190px;
    font-size: 14px; line-height: 1.2;
    padding: 12px 18px;
    border-radius: 7px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
.bg-neu .bgn-offer-button .btn_offer_block:active { top: 0; }

/* ReHub klebt an den Code-Knopf einen 16px breiten Streifen mit gestricheltem
   Rand und blassgruenem Verlauf (.coupon_btn:before, rehub-theme/style.css
   Zeile 1196) - die Abriss-Metapher. Die traegt im neuen Design schon die
   Perforation am linken Rand, und ueber dem Titel steht das Wort
   "Gutscheincode". Am Knopf bleibt davon nur ein Farbfleck neben der Palette. */
.bg-neu .bgn-offer-button .coupon_btn::before,
.bg-neu .bgn-btn .coupon_btn::before { display: none; }

/* --- Aufklapper ---
   Seit 21.09.2026 steht der Schalter "Details" am Ende der Konditionszeile,
   nicht mehr als eigene Reihe mit Abrisslinie (die kostete rund 40px je Zeile,
   bei neun Gutscheinen eine Bildschirmhoehe). Das Kaestchen sitzt am
   Zeilenanfang, der Text am Zeilenende - die Nachbarregel des Child-style.css
   (.toggle-coupon:checked + label + .coupon-content) greift deshalb nicht mehr,
   :has() uebernimmt. */
.bg-neu .bgn-offer-detail { border: 0; margin: 0; padding: 0; }
.bg-neu .bgn-offer-foot .coupon-toggle-label {
    display: inline-flex; align-items: center; gap: 4px;
    width: auto;
    margin: 0; padding: 0;
    border: 0;
    color: var(--bg-text-2);
    font-size: 12px;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
}
.bg-neu .bgn-offer-foot .coupon-toggle-label:hover { color: var(--bg-blue); }
.bg-neu .bgn-offer-foot .coupon-toggle-label .toggle-icon { margin: 0; transition: transform .25s ease; }
.bg-neu .bgn-offer:has(.toggle-coupon:checked) .coupon-toggle-label .toggle-icon { transform: rotate(180deg); }
/* Tastaturfokus sichtbar machen. Das Kaestchen steht hier nicht neben seinem
   Etikett, deshalb ueber :has() an der Gutscheinzeile statt ueber den Nachbarn. */
.bg-neu .bgn-offer:has(.toggle-coupon:focus-visible) .coupon-toggle-label {
    outline: 2px solid var(--bg-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
.bg-neu .bgn-offer .coupon-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    background: var(--bg-surface-2);
    border-bottom: 0;
    border-radius: 8px;
    margin: 0;
    padding: 0 14px;
    color: var(--bg-text-2);
    font-size: 13px;
    line-height: 1.55;
}
/* Wie im Child-Stylesheet: statt eines max-height-Deckels (erst 400px - schnitt
   lange Bedingungen ab -, dann 1200px - ruckelte beim Zuklappen) animiert das
   Raster die echte Hoehe des Inhalts. */
.bg-neu .bgn-offer:has(.toggle-coupon:checked) .coupon-content {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 11px 14px;
    margin-top: 12px;
}
.bg-neu .bgn-offer .coupon-content p { margin: 0 0 6px; }
.bg-neu .bgn-offer .coupon-content p:last-child { margin-bottom: 0; }
.bg-neu .bgn-offer-footnote {
    display: flex; flex-wrap: wrap; gap: 2px 12px;
    font-size: 11.5px;
    color: var(--bg-text-3);
}
.bg-neu .bgn-offer-footnote > span + span::before { content: "·"; margin-right: 12px; color: var(--bg-line-strong); }
/* Exklusiv-Hinweis im Detailfeld (vierte Runde 21.09.2026): vorher grauer
   Fliesstext, jetzt goldener Kasten in der Farbe der Exklusiv-Plakette mit
   eigener Zeile "Exklusiver Gutscheincode". */
.bg-neu .bgn-offer .coupon-content .coll_details_exklusiv {
    margin: 10px 0 8px;
    padding: 9px 12px 10px;
    border-radius: 6px;
    background: #fbf3dc;
    border-left: 3px solid var(--bg-exclusive);
    color: var(--bg-text);
    font-size: 13px;
    line-height: 1.5;
}
.bg-neu .coll_details_exklusiv .bgn-exklusiv-title {
    display: block;
    margin-bottom: 3px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: #8a640e;
}

/* --- Abgelaufen --- */
.bg-neu .bgn-offer.expired_coupon,
.bg-neu .bgn-offer.rh_expired { opacity: .6; }

/* --- Schmal --- */
@media (max-width: 767px) {
    .bg-neu .rh_offer_list.bgn-offer { padding: 14px 14px 10px 20px; }
    .bg-neu .bgn-offer-head {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 6px 13px;
    }
    .bg-neu .bgn-offer-button {
        grid-column: 1 / -1;
        justify-self: stretch;
        margin-top: 4px;
    }
    .bg-neu .bgn-offer-foot { margin-top: 10px; }
    .bg-neu .bgn-offer-button .btn_offer_block { width: 100%; min-width: 0; }
    .bg-neu .bgn-offer-value { min-height: 60px; }
    .bg-neu .bgn-offer-number { font-size: 23px; }
    .bg-neu .bgn-offer-unit { font-size: 15px; }
    .bg-neu .bgn-offer-title { font-size: 15px; }
}

/* ==========================================================================
   5. Shopseiten-Rahmen: Ueberschrift, Filterreiter, Randspalte
   Markup: rehub-blankchild/taxonomy-dealstore.php - die Datei wird NICHT
   ersetzt. Sie laeuft ueber die WordPress-Vorlagenhierarchie, nicht ueber
   rh_locate_template(), also greift RH_GRANDCHILD_DIR dort nicht. Muss sie
   aber auch nicht: die Struktur der Seite ist in Ordnung, alt sind nur Farben
   und Formen - und die liegen alle in Reichweite der Kaskade.

   Zur Spezifitaet: taxonomy-dealstore.php bringt ab Zeile 636 einen eigenen
   <style>-Block im Rumpf mit. Der steht spaeter im Dokument als dieses Stilblatt,
   gewinnt bei gleicher Spezifitaet also. Deshalb traegt hier jede Regel das
   .bg-neu davor - zwei Klassen schlagen eine, unabhaengig von der Reihenfolge.
   ========================================================================== */

/* --- Senkrechter Rhythmus am Seitenkopf ---
   Gemessen am 10.09.2026 (Bett1, 1400px): Kopfunterkante -> Brotkrume 5px,
   Brotkrume -> H1 4px, H1 -> Einleitung 12px, Einleitung -> "10 aktuelle
   Angebote" 22px, Ueberschrift -> Reiter 14px, Reiter -> erste Zeile 17px.
   Also fuenf Abstaende zwischen 4 und 22px: **alles gleich nah**. Wo alle
   Abstaende gleich sind, gibt es keine Gruppen, und ohne Gruppen wirkt jede
   Seite gedrungen, egal wie viel Platz insgesamt da ist.

   Neu in zwei Gruppen geordnet:
     Wer bin ich    Brotkrume - H1 - Einleitung   (innen eng: 14/10)
     Was gibt es    Anzahl - Reiter - Zeilen      (innen eng: 16/18)
   und dazwischen eine deutliche Fuge (34px). Ueber der ersten Gruppe steht die
   Luft, die der schwere dunkle Kopfblock braucht (22px statt 5px). */
.bg-neu .bg_breadcrumb { margin-top: 22px; font-size: 12.5px; }
.bg-neu .rh-content-wrap { padding-top: 14px; }

/* --- Ueberschriften --- */
.bg-neu .woo-tax-name h1 {
    /* 27px waren zu wenig: darueber sitzt ein 126px hoher dunkler Block, und
       die H1 muss dagegen ankommen. Mitwachsend, damit sie auf dem Telefon
       nicht die halbe erste Bildschirmseite frisst. */
    /* 21.09.2026: 700/33px wirkte zu fett - 600 und etwas kleiner, der Kopf
       darueber ist seit dem Wegfall der Vertrauensleiste ohnehin flacher. */
    /* Dritte Runde: 600 war dem User noch zu fett -> 500. */
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--bg-text);
    margin: 0 0 10px;
    text-wrap: balance;
}
.bg-neu .woo-tax-name h2 {
    /* Vierte Runde 21.09.2026: 600 zu fett, 34px Abstand zu viel. */
    font-size: 18px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--bg-text);
    margin: 24px 0 14px;
}
.bg-neu .woo-tax-name .term-description,
.bg-neu .woo-tax-name .textgrey {
    color: var(--bg-text-2);
    font-size: 14.5px;
    line-height: 1.6;
}
/* Der Aufklapp-Pfeil traegt seine Farbe als SVG-Attribut (stroke="#ee6c04").
   CSS schlaegt Praesentationsattribute, deshalb reicht eine Regel. */
.bg-neu .shoptext-toggle-icon path { stroke: var(--bg-blue); }
.bg-neu .mobile-shoptext-toggle { color: var(--bg-blue); font-weight: 600; }

/* --- Filterreiter ---
   Die Reiter sind Navigation, keine Handlung. Deshalb das Blau der Identitaet
   und nicht die Handlungsfarbe, die dem Knopf in der Zeile gehoert. */
.bg-neu .re_filter_instore .bg_filter_tabs {
    background: var(--bg-surface-2);
    border: 1px solid var(--bg-line);
    border-radius: 11px;
    padding: 4px;
    gap: 3px;
    margin: 0 0 18px;
}
.bg-neu .re_filter_instore .bg_filter_tab {
    color: var(--bg-text-2);
    border-radius: 8px;
    padding: 9px 17px;
    font-size: 13.5px;
    font-weight: 600;
}
.bg-neu .re_filter_instore .bg_filter_tab:hover {
    color: var(--bg-text);
    background: var(--bg-line);
}
.bg-neu .re_filter_instore .bg_filter_tab.active {
    color: #fff;
    background: var(--bg-blue);
    box-shadow: none;
}
.bg-neu .re_filter_instore .bg_tab_count {
    background: rgba(21,32,43,.08);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}
.bg-neu .re_filter_instore .bg_filter_tab.active .bg_tab_count { background: rgba(255,255,255,.22); }
.bg-neu .re_filter_instore .bg_filter_empty {
    background: var(--bg-paper);
    border: 1px dashed var(--bg-line-strong);
    border-radius: var(--bg-radius);
    color: var(--bg-text-2);
}

/* --- Randspalte: alle Kaesten auf eine Form ---
   Vorher trug jeder Kasten seinen eigenen Rahmen und Schatten aus dem Theme.
   Gleiche Kanten und gleicher Innenabstand machen aus sechs Kaesten eine Spalte. */
.bg-neu .rh-300-sidebar .rh-cartbox {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    padding: 16px;
}
.bg-neu .rh-300-sidebar .rh-cartbox h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--bg-text);
    margin: 0 0 12px;
}
/* ReHubs Akzentfarbe steckt im ganzen Theme als Klasse. Einmal umbiegen statt
   an jeder Fundstelle - das Orange kommt sonst an Stellen wieder hoch, die man
   erst zwei Seiten spaeter sieht. */
.bg-neu .rehub-main-color { color: var(--bg-blue); }
.bg-neu .rehub-main-color-bg { background-color: var(--bg-blue); }

/* Logokasten */
.bg-neu .woo-tax-logo img { max-height: 62px; width: auto; }
/* Shop + Redaktion als Einheit (21.09.2026): 12px statt 20px dazwischen. Der
   Abstand unter dem Redaktionskasten bleibt gross (eigener Rand + Rand des
   Spaltenblocks), darunter beginnen Spartipps, Zahlen, Werbung. */
.bg-neu .rh-300-sidebar .woo-tax-logo.mb20 { margin-bottom: 12px !important; }
/* Bewertung: Sterne, darunter "4,49 / 5", darunter "105 Bewertungen". Die
   Textzeile baut taxonomy-dealstore.php in der Vorschau um; angemeldet steht
   sie im DOM VOR den Sternen, deshalb Flex mit fester Reihenfolge. */
.bg-neu .woo-tax-logo .rh-star-ajax { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bg-neu .woo-tax-logo .rh-star-ajax .user-rate { order: 1; }
.bg-neu .woo-tax-logo .rh-star-ajax .title_star_ajax { order: 2; display: block; text-align: center; }
.bg-neu .woo-tax-logo .rh-star-ajax .userrating-clear { order: 3; }
.bg-neu .woo-tax-logo .bgn-rating-score { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--bg-text); font-variant-numeric: tabular-nums; }
.bg-neu .woo-tax-logo .bgn-rating-count { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--bg-text-3); }
/* "Zum Shop" (21.09.2026, zweite Runde): gefuellt wog er genauso schwer wie
   "Code anzeigen" in der Zeile, der duenne Umriss der ersten Runde war zu
   klein und zu leise (Child-style.css setzt width:auto, font-size:82% und
   padding 7px 20px, alles !important). Jetzt volle Breite, getoente Flaeche,
   beim Ueberfahren gefuellt. Farben kommen als Inline-<style> mit !important
   aus den ReHub-Optionen, deshalb auch hier !important mit hoeherer
   Spezifitaet. display bleibt unangetastet: die Mobil-Abfrage des Child
   blendet den Knopf unter 1024px aus, das soll so bleiben. */
.bg-neu .woo-tax-logo > a.wpsm-button.rehub_main_btn {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: capitalize !important;   /* "zum Shop" -> "Zum Shop" */
    letter-spacing: 0 !important;
    text-align: center !important;
    background: var(--bg-blue-soft) !important;
    color: var(--bg-blue) !important;
    fill: var(--bg-blue) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    transition: background-color .15s ease, color .15s ease;
}
.bg-neu .woo-tax-logo > a.wpsm-button.rehub_main_btn .rhicon { margin-right: 6px; font-size: 13px; }
.bg-neu .woo-tax-logo > a.wpsm-button.rehub_main_btn:hover,
.bg-neu .woo-tax-logo > a.wpsm-button.rehub_main_btn:active {
    background: var(--bg-blue) !important;
    color: #fff !important;
    fill: #fff !important;
    box-shadow: none !important;
    top: 0;
}
/* Teilstern (21.09.2026). ReHub fuellt Sterne nur ganz ($i <= $total,
   abgerundet). taxonomy-dealstore.php setzt in der Vorschau auf den naechsten
   Stern die Klasse is-part und den Anteil als --bg-fill (4,57 -> 57%), aus dem
   exakten $store_rating - data-rate taugt nicht, das ist angemeldet gerundet
   ("5" bei 4,57). Gezeichnet wird auf dem vorhandenen ::before-Glyph:
   Farbverlauf als Textfuellung, links Gold bis --bg-fill, rechts Grau. Kein
   eigenes font-family noetig, deshalb unempfindlich gegen den Icon-Font. */
.bg-neu .woo-tax-logo .starrate.is-part::before {
    background: linear-gradient(90deg, #F6A123 var(--bg-fill, 50%), #ccc var(--bg-fill, 50%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* "Gutschein der Woche" (inc/widgets/dealwoo-custom.php, eigenes <style> im
   Widget, deshalb .bg-neu davor): das alte Orange - Linie unter dem Titel,
   Hover, Prozentpille - hat im neuen System keinen Anker mehr. Logo ist Blau
   und Gruen, Gold gehoert Exklusiv, Rot der Dringlichkeit. Titel wie die
   anderen Randkaesten, Pille im Identitaetsblau. (21.09.2026) */
.bg-neu .deal_daywoo {
    border: 1px solid var(--bg-line) !important;
    border-radius: var(--bg-radius) !important;
    box-shadow: none !important;
}
.bg-neu .deal_daywoo .title {
    background: transparent;
    color: var(--bg-text);
    border-bottom: 1px solid var(--bg-line);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.bg-neu .deal_daywoo h3 a { color: var(--bg-text); }
.bg-neu .deal_daywoo h3 a:hover { color: var(--bg-blue); }
.bg-neu .deal_daywoo .bg-week-discount {
    background: var(--bg-blue);
    color: #fff;
}
.bg-neu .deal_daywoo .woo_spec_timer .countdown_amount { background: var(--bg-blue-deep); }
.bg-neu .deal_daywoo .bg-week-btn { background: var(--bg-blue) !important; color: #fff !important; }
.bg-neu .deal_daywoo .bg-week-btn:hover { background: var(--bg-blue-deep) !important; }
/* Weitere Orange-Reste des Child-Themes auf der Shopseite */
.bg-neu .no-coupons-notice { border-left-color: var(--bg-blue); }

/* Slider in der Randspalte: Rahmenfarbe auf das Token, Rest kommt live aus
   rehub-blankchild/style.css (der Slider laeuft schon im alten Design neu). */
.bg-neu .slider-container { border-color: var(--bg-line); box-shadow: none; }
.bg-neu .woo-tax-logo .rh_custom_notice {
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-text);
    margin: 12px 0 14px;
}

/* Redaktionskasten - das Gesicht hinter der Pruefung. Das ist ein Vertrauens-
   signal, kein Werbeblock, deshalb ruhig und ohne Akzentfarbe ausser beim Haken. */
.bg-neu .editor-box .editor-verified,
.bg-neu .editor-box .editor-check { color: var(--bg-action-text); }
.bg-neu .editor-box .editor-name { color: var(--bg-text); font-weight: 600; }
.bg-neu .editor-box .editor-pos  { color: var(--bg-text-3); font-size: 12.5px; }
.bg-neu .editor-box .editor-link { color: var(--bg-blue); font-weight: 500; }
.bg-neu .editor-box .editor-photo img { border-radius: 50%; }

/* Spartipps */
.bg-neu .bg-perks-box .bg-perks-intro { color: var(--bg-text-3); }
.bg-neu .bg-shop-perks li {
    border-bottom: 1px solid var(--bg-line);
    font-size: 13.5px;
    color: var(--bg-text);
}
.bg-neu .bg-perks-box .bg-perk-check {
    background: var(--bg-action);
    color: var(--bg-on-action);
}
/* Die Werte sind dieselbe Sorte Zahl wie im Plaettchen der Gutscheinzeile -
   also dieselbe Farbe, sonst behauptet die Seite zwei Bedeutungen fuer eins. */
.bg-neu .bg-shop-perks .bg-perk-val {
    color: var(--bg-blue);
    background: var(--bg-blue-soft);
    border-radius: 6px;
    font-size: 12px;
}

/* Zahlenkasten "G-Star Rabatte" */
.bg-neu .rh-300-sidebar .store_details_line { color: var(--bg-text); }
.bg-neu .rh-300-sidebar .rh-cartbox .last_updated { color: var(--bg-text-3); }

/* --- Aehnliche Shops (Logokacheln) und "auch sehr beliebt" (Shopbloecke) ---
   Markup: taxonomy-dealstore.php ab Zeile ~903 und ~946, live geteilt, deshalb
   nur CSS. Live-Regeln (Child-style.css 58-60 und 232-237) setzen Flex mit
   10px Rand, 100px-Logos, 18px-Shopnamen in Blau und einen Verweis ohne
   Innenabstand - im Bild vom 21.09.2026 sah das nach Rohbau aus. */

/* Abschnittsueberschriften: bisher zentriert und mager (fontnormal), im Rest
   der Spalte stehen H1 und H2 links. Gleiche Form wie die Listen-H2. */
.bg-neu .rh-300-content-area h2.font120.fontnormal.text-center,
.bg-neu .rh-content-wrap h2.font120.fontnormal.text-center {
    text-align: left;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--bg-text);
    margin: 30px 0 14px;
}

/* Kacheln: sechs in einer Reihe, gleiche Hoehe, Logo in festem Fenster */
.bg-neu .shop-logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    justify-content: stretch;
    align-items: stretch;
}
.bg-neu .shop-logos .shop-logo {
    margin: 0;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bg-neu .shop-logos .shop-logo:hover {
    border-color: var(--bg-line-strong);
    box-shadow: var(--bg-shadow);
}
.bg-neu .shop-logos .shop-logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 100%;
    padding: 14px 10px 12px;
    text-decoration: none;
    color: var(--bg-text-2);
}
.bg-neu .shop-logos .shop-logo img {
    display: block;
    width: auto; height: auto;
    max-width: 96px; max-height: 40px;
    object-fit: contain;
}
.bg-neu .shop-logos .shop-logo__name {
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    color: var(--bg-text-2);
    overflow-wrap: anywhere;
}
.bg-neu .shop-logos .shop-logo:hover .shop-logo__name { color: var(--bg-blue); }
@media (max-width: 767px) {
    .bg-neu .shop-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
    .bg-neu .shop-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shopbloecke: Kopf (Logoplatte + Name) / Gutscheinzeile / Fuss (Alle ... Rabattcodes) */
.bg-neu .other-stores .store {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    margin-bottom: 14px;
    overflow: hidden;
}
.bg-neu .other-stores .store:last-child { margin-bottom: 0; }
.bg-neu .other-stores .store-info { padding: 16px 20px 0; }
.bg-neu .other-stores .store-info-content { display: flex; align-items: center; gap: 12px; }
/* Logoplatte wie im Slider der Randspalte (.slide-logo) */
.bg-neu .other-stores .store-link {
    display: flex; align-items: center; justify-content: center;
    flex: none;
    width: 64px; height: 44px;
    margin: 0; padding: 4px;
    box-sizing: border-box;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 6px;
}
.bg-neu .other-stores .store-logo {
    display: block;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    margin: 0;
    object-fit: contain;
}
.bg-neu .other-stores .store-name {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--bg-text);
    text-decoration: none;
}
.bg-neu .other-stores .store-name:hover { color: var(--bg-blue); }
/* Die Zeile bringt ihren eigenen Innenabstand mit (18/20px) - kein zweiter
   Rahmen und kein zweiter Abstand drumherum, sonst rueckt sie 36px ein. */
.bg-neu .other-stores .store-gutschein { padding: 0; }
.bg-neu .other-stores .rh_offer_list.bgn-offer {
    border: 0;
    border-radius: 0;
    padding: 12px 20px 10px;
    margin-bottom: 0 !important;
}
.bg-neu .other-stores .bgn-offer:hover { box-shadow: none; }
/* Fuss: eigene Zeile hinter einer gestrichelten Linie, Innenabstand wie der Kopf */
.bg-neu .other-stores .show-all-coupons {
    margin: 0 !important;
    padding: 11px 20px 12px;
    border-top: 1px dashed var(--bg-line-strong);
    font-size: 13px;
    line-height: 1.4;
    color: var(--bg-text-2);
}
.bg-neu .other-stores .show-all-coupons a {
    color: var(--bg-blue);
    font-weight: 600;
    text-decoration: none;
}
.bg-neu .other-stores .show-all-coupons a::after { content: " \2192"; }
.bg-neu .other-stores .show-all-coupons a:hover { color: var(--bg-blue-deep); text-decoration: underline; }
@media (max-width: 767px) {
    .bg-neu .other-stores .store-info { padding: 14px 16px 0; }
    .bg-neu .other-stores .rh_offer_list.bgn-offer { padding: 12px 16px 12px; }
    .bg-neu .other-stores .show-all-coupons { padding: 10px 16px 12px; }
}

/* Abschnittsueberschriften im Inhalt (uebrige, ohne text-center) */
.bg-neu .rh-300-content-area > h2,
.bg-neu .rh-content-wrap h2.font120 {
    font-size: 19px;
    font-weight: 500;
    color: var(--bg-text);
}

/* --- Verweise ---
   Die Orange-Quelle ist ein nacktes `a{color:#ee6c04}` aus den ReHub-Optionen,
   Spezifitaet 0,0,1. Eine Klasse davor genuegt, um es abzuloesen - und liegt
   immer noch unter den Bauteil-Regeln oben (zwei Klassen), die ihre eigenen
   Farben behalten sollen. Zusaetzlich wird ReHubs eigene Variable umgebogen,
   damit auch Regeln mitziehen, die nicht die Hexzahl, sondern var() benutzen. */
.bg-neu {
    --rehub-main-color: #375878;
}
.bg-neu a { color: var(--bg-blue); }
.bg-neu a:hover { color: var(--bg-blue-deep); }
.bg-neu .color_link { color: var(--bg-blue) !important; }
.bg-neu .bg-cat-mega .bg-cat-svg,
.bg-neu .bg-cat-mega li.bg-cat-all .bg-cat-svg { color: var(--bg-blue); }

/* --- Anlass-Baender (Black Week, Ostern, Singles Day ...) ---
   Kommen aus postlistpart.php als .re-line-badge und sind im Theme dreieckige
   Faehnchen mit orangem Rand. Im neuen Design tragen sie dieselbe Form wie die
   Redaktionsplaketten - sonst hat eine Zeile zwei Sorten Etikett. */
.bg-neu .bgn-offer .re-line-badge {
    position: static;
    display: inline-block;
    width: auto; height: auto;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}
.bg-neu .bgn-offer .re-line-badge::before,
.bg-neu .bgn-offer .re-line-badge::after { display: none; }
.bg-neu .bgn-offer .re-line-badge > span {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    /* Langformen statt der ungueltigen Kurzform `font: 600 11px/1.5 inherit`
       (siehe Plakettenregel in Abschnitt 2, 21.09.2026). */
    font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1.5;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--bg-blue-deep);
    color: #fff;
}

/* ==========================================================================
   6. Startseite - Kopfbereich
   Markup: neu/inc/hero.php ([bg_hero])

   Aufbau nach dem Entwurf: Slider links, "Heute geprueft" rechts. Darunter die
   Markenleiste (zeigt, wer im Slider steckt, und blaettert dorthin), darunter
   die kleineren Teaserplaetze.

   Der Slider laeuft ueber CSS scroll-snap statt ueber eine Bibliothek: das
   Element bestimmt den LCP, und Wischen funktioniert ohne eine Zeile JavaScript.
   ========================================================================== */

.bg-neu .bgn-hero { margin: 0; }
/* Seit 10.09. eine Spalte: der Kasten "Heute geprueft" daneben kostete den
   Slider ein Drittel seiner Breite - und der Slider ist die verkaufte Flaeche. */
.bg-neu .bgn-hero-main { display: block; }

/* --- Slider --- */
/* Der Rahmen rundet nicht mehr selbst: jede Folie bringt ihre eigenen Ecken
   mit, damit die angeschnittene naechste Folie rechts wie eine eigene Karte
   aussieht und nicht wie ein abgeschnittener Teil derselben Flaeche. */
.bg-neu .bgn-hero-slider {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    /* Die wartende Folie endete hart an der Abschnittskante. Bei einem Motiv
       mit Muster sieht dieser Schnitt nach Fehler aus statt nach "hier geht es
       weiter". Der Verlauf auf den letzten --fade Pixeln macht daraus eine
       weiche Kante, ohne der laufenden - also verkauften - Folie auch nur einen
       Pixel Breite zu nehmen; die Spitze zu verbreitern haette direkt vom
       bezahlten Platz abgezogen.

       Die Maske sitzt am RAHMEN, nicht an der Folie. Ein erster Versuch am
       20.09.2026 hatte sie an die Folie gehaengt, die gerade nicht `is-current`
       ist - dieses Kennzeichen haengt das Skript aber erst 90ms NACH dem
       Stillstand um. Die hereinlaufende Folie galt also waehrend der ganzen
       Bewegung noch als wartend und war ab Pixel 116 durchsichtig: man sah eine
       weisse Flaeche, bis das Bild am Ende aufpoppte. Am Rahmen gibt es dieses
       Zeitproblem nicht - dort liegt der Verlauf immer auf denselben letzten
       Pixeln, egal was sich darunter bewegt.

       Die Knoepfe bleiben unberuehrt: sie stehen --peek + 12px vom Rand, also
       144px, und damit weit ausserhalb der 46px Verlauf. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), rgba(0,0,0,0) 100%);
}
/* Breite der angeschnittenen naechsten Folie. An einer Stelle geaendert,
   ueberall mitgezogen - auch von den Knoepfen, die sich daran ausrichten. */
/* --fade: auf welcher Breite die wartende Folie nach rechts ausblendet.
   0 schaltet den Verlauf ab und stellt die harte Kante von vorher wieder her.

   --depth / --overscan: die Parallaxe, siehe weiter unten bei .bgn-hero-image.
   Beide zusammen abschalten (0 und 1), nie nur eins - sonst steht das Bild
   vergroessert, aber unbewegt da. */
.bg-neu .bgn-hero { --peek: 132px; --slide-gap: 16px; --fade: 46px; --depth: .14; --overscan: 1.08; }
.bg-neu .bgn-hero-track {
    display: flex;
    gap: var(--slide-gap);
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;               /* die Leiste wuerde den Bildrand zerschneiden */
    -ms-overflow-style: none;
}
.bg-neu .bgn-hero-track::-webkit-scrollbar { display: none; }
.bg-neu .bgn-hero-slide {
    position: relative;
    flex: 0 0 calc(100% - var(--peek));
    scroll-snap-align: start;
    min-height: 380px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--bg-radius);
    background: var(--bg-blue-deep);
    transition: opacity .35s ease;
}
/* Die wartenden Folien treten zurueck, sonst buhlen zwei Anzeigen gleichzeitig
   um die Aufmerksamkeit. Erst wenn das Skript die laufende Folie kennzeichnet -
   ohne die Klasse `is-ready` bliebe sonst alles halbdurchsichtig liegen. */
.bg-neu .bgn-hero-track.is-ready .bgn-hero-slide { opacity: .68; }
.bg-neu .bgn-hero-track.is-ready .bgn-hero-slide.is-current { opacity: 1; }

/* Von der wartenden Folie ist nur ein Streifen zu sehen. Stuende dort Text,
   waeren es angeschnittene Wortreste ("Bis", "Zum") - das sieht nach Fehler
   aus. Sichtbar bleibt das Motiv, die Schrift kommt mit der Folie. */
.bg-neu .bgn-hero-track.is-ready .bgn-hero-slide:not(.is-current) .bgn-hero-label,
.bg-neu .bgn-hero-track.is-ready .bgn-hero-slide:not(.is-current) .bgn-hero-text,
.bg-neu .bgn-hero-track.is-ready .bgn-hero-slide:not(.is-current) .bgn-hero-overlay {
    opacity: 0;
    transition: opacity .2s ease;
}
/* Ohne Wartezeit vor dem Aufblenden: die .1s standen hier, damit der Text
   nicht schon waehrend der Schiebebewegung auftaucht. Das erledigt aber
   bereits die Klasse is-current, die erst 90ms nach dem Stillstand gesetzt
   wird - die Verzoegerung kam also obendrauf und liess den Text spuerbar
   hinterherhinken (21.09.2026). */
.bg-neu .bgn-hero-text,
.bg-neu .bgn-hero-overlay { transition: opacity .22s ease; }

/* --- Aufsteigender Text beim Folienwechsel ---
   Nur bei einem WECHSEL, nicht beim ersten Aufbau: die Klasse `is-entering` setzt
   das Skript erst ab der zweiten Folie. Sonst laege die wichtigste Zeile der
   Seite beim Laden kurz auf Deckung 0 - schlecht fuer den gemessenen
   Seitenaufbau und unruhig anzusehen.
   Die Zeilen kommen versetzt: Wert, Ueberschrift, Knopf lesen sich dadurch in
   der Reihenfolge, in der sie gemeint sind.
   TEMPO (21.09.2026): vorher .45s Dauer und bis .26s Versatz, die letzte Zeile
   stand also erst 0,71s nach dem Stillstand - dazu die 90ms, die das Skript
   den Stillstand abwartet. Das war als Bewegung schoen und als Warten zu lang.
   Jetzt .3s Dauer und bis .12s Versatz: alles steht nach rund 0,42s, die
   Staffelung bleibt aber sichtbar. Wer es noch flotter will, dreht an diesen
   beiden Groessen - der Versatz darf hoechstens ein Drittel der Dauer sein,
   sonst zerfaellt der Block in Einzelzeilen. */
.bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > * {
    animation: bgn-fade-up .3s cubic-bezier(.22,.61,.36,1) both;
}
.bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > *:nth-child(1) { animation-delay: 0s; }
.bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > *:nth-child(2) { animation-delay: .03s; }
.bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > *:nth-child(3) { animation-delay: .06s; }
.bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > *:nth-child(4) { animation-delay: .09s; }
.bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > *:nth-child(5) { animation-delay: .12s; }
@keyframes bgn-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-neu .bgn-hero-slide.is-entering .bgn-hero-text > * { animation: none; }
    .bg-neu .bgn-hero { --depth: 0; --overscan: 1; }
}

.bg-neu .bgn-hero-image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* --- Parallaxe (20.09.2026) ---
   Das Motiv laeuft langsamer als seine Folie: bei --depth .14 mit 86% von
   deren Geschwindigkeit. Dadurch steht im rechten Anschnitt nicht mehr der
   aeusserste linke Rand des Bildes, sondern ein Streifen weiter innen, und
   beim Blaettern entsteht Tiefe statt eines Schubs.

   WARUM DAS HIER FUNKTIONIERT, wo zwei Versuche vorher gescheitert sind: der
   Versatz haengt allein an der Scrollposition, nicht an einer Klasse. Es gibt
   also weder eine Verzoegerung noch einen Moment, in dem sich Folie und Bild
   gegeneinander bewegen - das Bild folgt der Folie in jedem einzelnen Bild.

   --overscan ist Pflicht, nicht Zierde. Verschiebt man das Bild nach links,
   fehlt rechts genau so viel. Die 8% Vergroesserung legen auf jeder Seite
   rund 43px Reserve an, und mehr als das wandert nie. Bezahlt wird das oben
   und unten: bei 1.08 sind es je 15px, also 4% der Folienhoehe. WER MEHR
   PARALLAXE WILL, ZAHLT MEHR SCHNITT - und das Motiv ist gebuchte Flaeche.
   Bis 1.31 bleibt das Bild scharf (darueber wird die 1400px-Vorlage
   hochgerechnet), aber bei 1.31 fehlen oben und unten schon je 15%.

   translate3d VOR scale: so zaehlt --px in echten Pixeln und nicht in
   vergroesserten. */
.bg-neu .bgn-hero-slide .bgn-hero-image {
    --px: 0px;
    transform: translate3d(var(--px), 0, 0) scale(var(--overscan));
}
/* Der Schleier deckt nur noch die untere linke Ecke ab - dort, wo Logo, Wert,
   Ueberschrift und Knopf stehen. Frueher lief er ueber die ganze Hoehe und
   verdeckte oben links ein Viertel des Motivs, ohne dass dort etwas stand.
   Der Winkel folgt dem Textblock: dunkel an der unteren Kante, offen nach
   rechts oben. */
.bg-neu .bgn-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(34deg,
        rgba(9,17,26,.96) 0%,
        rgba(9,17,26,.92) 26%,
        rgba(9,17,26,.72) 42%,
        rgba(9,17,26,.34) 58%,
        rgba(9,17,26,0)   76%);
}
/* Nur bis knapp ueber das Logo (21.09.2026). Der Keil lief bis in die obere
   linke Ecke - dort lagen bei 34 Grad noch rund 80% Schwarz, obwohl der
   Textblock erst bei 174px von 380px beginnt (Logo-Oberkante, gemessen bei
   1440px Fenster). Die Maske schneidet den Schleier von oben ab: bis 60% der
   Hoehe von unten voll da (228px; das Logo beginnt bei 206px, mit zweizeiliger
   Ueberschrift bei 228px), bis 74% ausgeblendet (281px, also gut 70px ueber dem
   Logo). Die Maske haengt am Schleier, nicht am Motiv - das Bild bleibt ganz,
   und der Keil bleibt nach rechts oben offen wie bisher. Auf Telefonen ist
   der Textblock hoeher als 60% der Folie, dort ist die Maske abgeschaltet
   (siehe Medienabfrage 639px). */
.bg-neu .bgn-hero-slide .bgn-hero-overlay {
    -webkit-mask-image: linear-gradient(to top, #000 60%, rgba(0,0,0,0) 74%);
            mask-image: linear-gradient(to top, #000 60%, rgba(0,0,0,0) 74%);
}
/* Unten verankert statt mittig: oben links bleibt das Motiv frei, und der
   Block sitzt dort, wo der Schleier ihn traegt. */
.bg-neu .bgn-hero-text {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: min(56%, 440px);
    padding: 26px 24px 30px;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 10px;
    color: #fff;
    text-shadow: 0 1px 14px rgba(9,17,26,.45);   /* faengt helle Bildstellen ab */
}
.bg-neu .bgn-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.bg-neu .bgn-chip {
    font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px;
}
.bg-neu .bgn-chip--ad { background: rgba(255,255,255,.18); color: #eaf1f8; }
/* Pflichtkennzeichnung, aber nicht im Weg: klein oben rechts, wo kein Text
   steht. Sie muss lesbar bleiben - deshalb eigene Flaeche statt nur Schrift. */
.bg-neu .bgn-hero-label {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.86);
    background: rgba(9,17,26,.38);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 3px 7px; border-radius: 4px;
    line-height: 1.4;
}
/* Auf dem Foto ist die weisse Kachel gewollt - sie ist der Aufkleber, auf dem
   die Marke steht. Also nicht kaschieren, sondern knapp um die Marke schneiden. */
/* 20.09.2026 um rund 13% verkleinert und innen entlastet: die weisse Platte
   war so praesent, dass sie mit der Rabattzeile um die Aufmerksamkeit stritt.
   Vorher 66x30 bei 11/13 Polster (Kasten 92x52), jetzt 58x27 bei 9/11
   (Kasten 80x45). Die Marke selbst schrumpft kaum - der Rahmen schneidet die
   Tinte zu, und die lag vorher mit Luft drin. */
.bg-neu .bgn-hero-logo {
    --bw: 58; --bh: 27; --pad: 1;
    background: #fff; border-radius: 7px;
    padding: 9px 11px;
    box-shadow: 0 1px 3px rgba(9,17,26,.14);
}
/* Logo und Abzeichen stehen nebeneinander in einer Zeile. Das kostet keine
   Hoehe: neben der kleinen Platte ist ohnehin Platz frei.
   NICHT .bgn-hero-brand nennen - so heisst schon die Schaltflaeche in der
   Markenleiste unter dem Slider, und das Skript sammelt die mit
   querySelectorAll('.bgn-hero-brand') ein. Gleicher Name haette die Leiste
   zerlegt. */
.bg-neu .bgn-hero-logo-row { display: flex; align-items: center; gap: 10px; }
/* "Exklusiv" war bisher nur eine Moeglichkeit, es in die Ueberschrift zu
   tippen. Als Abzeichen ist es das, was es sein soll: eine Eigenschaft des
   Angebots, nicht ein Wort im Satz. Geschaltet wird es je Buchung im
   Platzierungs-Werkzeug (Motivfeld "Exklusiv"). */
.bg-neu .bgn-hero-badge {
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--bg-on-exclusive);
    background: var(--bg-exclusive);
    padding: 4px 9px; border-radius: 5px;
    line-height: 1.25;
    text-shadow: none;                   /* der geerbte Schatten macht die Kanten schmutzig */
    white-space: nowrap;
}

.bg-neu .bgn-hero-value {
    font-weight: 700; font-size: 40px; line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-hero-value small {
    margin-left: 8px;
    font-size: 17px; font-weight: 600; letter-spacing: 0;
}
.bg-neu .bgn-hero-title {
    font-size: 16px; font-weight: 600;
    line-height: 1.35; color: #dbe5ef;
}
/* Kompakter seit 20.09.2026: 10/17 Polster ergaben 38px Hoehe - kraeftig, aber
   schwer. 8/15 sind 34px; die Farbe traegt die Aufmerksamkeit, nicht die Masse. */
.bg-neu .bgn-hero-cta {
    align-self: flex-start; margin-top: 4px;
    background: var(--bg-action); color: var(--bg-on-action);
    font-weight: 600; font-size: 14px;
    padding: 8px 15px; border-radius: 6px;
    display: inline-flex; gap: 6px; align-items: center;
}
.bg-neu .bgn-hero-slide:hover .bgn-hero-cta { background: var(--bg-action-hover); }

/* Abstaende der grossen Folie einzeln statt ein gleicher gap fuer alles.
   Marke, Rabattzeile und Unterzeile gehoeren zusammen und ruecken enger; vor
   dem Knopf entsteht dafuer eine echte Luecke. So liest sich der Block als
   eine Gruppe mit einer Handlung darunter statt als vier gleich weit
   auseinanderstehende Zeilen.

   Ausdruecklich auf .bgn-hero-slide begrenzt: die Minikacheln und die geteilte
   Teaserkarte benutzen dieselben Klassen, haben aber ihren eigenen, engeren
   gap - ohne diese Schranke wuerden sie hier mitgezogen. */
.bg-neu .bgn-hero-slide .bgn-hero-text  { gap: 0; }
.bg-neu .bgn-hero-slide .bgn-hero-value  { margin-top: 8px; }
.bg-neu .bgn-hero-slide .bgn-hero-title { margin-top: 9px; }
.bg-neu .bgn-hero-slide .bgn-hero-cta   { margin-top: 20px; }

.bg-neu .bgn-hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--bg-text);
    cursor: pointer; opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
    box-shadow: 0 2px 10px rgba(9,17,26,.22);
    z-index: 3;
}
.bg-neu .bgn-hero-slider:hover .bgn-hero-arrow,
.bg-neu .bgn-hero-arrow:focus-visible { opacity: 1; }
.bg-neu .bgn-hero-arrow svg { width: 19px; height: 19px; }
.bg-neu .bgn-hero-prev { left: 12px; }
.bg-neu .bgn-hero-next     { right: calc(var(--peek) + 12px); }

/* --- Laufleiste ---
   Unten rechts, weil links Chip, Logo, Wert und Knopf stehen. Die dunkle
   Kapsel traegt die Striche auch ueber hellen Motiven, wo der Verlauf des
   Schleiers schon ausgelaufen ist. */
.bg-neu .bgn-hero-progress {
    position: absolute; right: calc(var(--peek) + 14px); bottom: 14px; z-index: 3;
    display: flex; align-items: center;
    padding: 5px;
    border-radius: 999px;
    background: rgba(9,17,26,.44);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@keyframes bgn-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bg-neu .bgn-hero-pause {
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: rgba(255,255,255,.82); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bg-neu .bgn-hero-pause:hover { color: #fff; }
.bg-neu .bgn-hero-pause svg { width: 13px; height: 13px; display: block; }
.bg-neu .bgn-hero-pause .bgn-icon-play { display: none; }
.bg-neu .bgn-hero-pause[aria-pressed="true"] .bgn-icon-pause { display: none; }
.bg-neu .bgn-hero-pause[aria-pressed="true"] .bgn-icon-play { display: block; }

/* --- "Heute geprueft" ---
   Die Gegenrede zur Anzeige daneben: hier steht, was die Redaktion heute
   wirklich angefasst hat. Genau das unterscheidet die Seite von den grossen
   Portalen, also steht es gleichrangig neben der bezahlten Flaeche. */
.bg-neu .bgn-today {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    padding: 16px 18px;
    display: flex; flex-direction: column;
}
.bg-neu .bgn-today h2 {
    font-size: 16px; font-weight: 600;
    margin: 0; color: var(--bg-text);
    text-align: left;
}
.bg-neu .bgn-today-date {
    margin: 2px 0 10px;
    font-size: 12px; color: var(--bg-text-3);
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-today-item {
    display: grid; grid-template-columns: 76px 1fr auto;
    gap: 12px; align-items: center;
    padding: 11px 0;
    border-top: 1px solid var(--bg-line);
    text-decoration: none;
}
.bg-neu .bgn-offer-logo { --bw: 76; --bh: 28; align-self: center; }
.bg-neu .bgn-today-no-logo { width: 76px; height: 28px; display: block; }
.bg-neu .bgn-today-value {
    display: block;
    font-weight: 700; font-size: 19px; line-height: 1.1;
    color: var(--bg-text);
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-today-title {
    display: block;
    font-size: 13px; line-height: 1.35;
    color: var(--bg-text-2);
}
.bg-neu .bgn-today-item:hover .bgn-today-title { color: var(--bg-blue); }
.bg-neu .bgn-today-arrow { color: var(--bg-blue); font-size: 18px; }
.bg-neu .bgn-today-all {
    margin-top: auto; padding-top: 12px;
    text-align: center; font-size: 13.5px; font-weight: 600;
    color: var(--bg-blue); text-decoration: none;
}
.bg-neu .bgn-today-all:hover { text-decoration: underline; }

/* --- Markenleiste --- */
/* Die Leiste gehoert zur Folie, nicht zur ganzen Zeile: sie endet dort, wo der
   Slider endet (Raster 1.62fr zu 1fr mit 20px Luecke). Sonst laeuft sie unter
   den Kasten "Heute geprueft" weiter und sieht aus wie eine eigene Reihe. */
/* Die Leiste ist so breit wie der Slider - der geht jetzt ueber alles. */
.bg-neu .bgn-hero-brands { display: flex; gap: 8px; margin-top: 12px; }
/* Weisse Kacheln auf hellem Grund verschwimmen, wenn sie nur eine 1px-Linie
   trennt. Hier traegt ein leiser Schatten die Trennung. Der laufende Platz steht
   vorn: volle Deckung, Hebung und ein Strich an der Unterkante, der die Leiste
   mit der Laufanzeige im Slider verbindet. */
.bg-neu .bgn-hero-brand {
    position: relative;
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 9px;
    cursor: pointer;
    opacity: .62;
    box-shadow: 0 1px 2px rgba(21,32,43,.06);
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}
/* --bw kommt aus hero.php und richtet sich nach der Zahl der Folien: sechs
   Platten nebeneinander haben nun einmal weniger Platz als drei. */
.bg-neu .bgn-brand-logo { --bw: 108; --bh: 30; max-width: 100%; }
.bg-neu .bgn-brand-text { font-size: 12px; font-weight: 600; color: var(--bg-text-2); text-align: center; }
.bg-neu .bgn-hero-brand:hover {
    opacity: 1;
    border-color: var(--bg-line-strong);
    box-shadow: 0 2px 8px -2px rgba(21,32,43,.18);
    transform: translateY(-1px);
}
.bg-neu .bgn-hero-brand.is-active {
    opacity: 1;
    border-color: var(--bg-line-strong);
    box-shadow: 0 2px 10px -3px rgba(21,32,43,.22);
}
/* Bahn und Fuellung sitzen an der Unterkante der laufenden Platte: die Marke
   zeigt, WELCHE Aktion laeuft, ihre Unterkante WIE LANGE noch. Zwei Anzeigen
   fuer dasselbe waeren eine zu viel - die Strichreihe im Slider ist deshalb
   entfallen. */
.bg-neu .bgn-hero-brand.is-active::before {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
    height: 3px; border-radius: 3px;
    background: var(--bg-line);
}
.bg-neu .bgn-hero-brand.is-active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
    height: 3px; border-radius: 3px;
    background: var(--bg-blue);
    transform: scaleX(0); transform-origin: left center;
}
.bg-neu .bgn-hero-brand.is-active.is-playing::after {
    animation: bgn-fill var(--bgn-interval, 6s) linear forwards;
}
.bg-neu .is-paused .bgn-hero-brand.is-active::after { animation-play-state: paused; }
/* Ohne Selbstlauf gibt es nichts zu fuellen - der Strich zeigt dann nur, wo man steht. */
.bg-neu .no-autoplay .bgn-hero-brand.is-active::after { transform: scaleX(1); animation: none; }

/* --- Teaserreihe ---
   Feste drei Spalten, kein auto-fill: sonst macht der Browser bei zwei
   gebuchten Plaetzen fuenf Spalten auf und schrumpft sie auf ein Fuenftel. */
.bg-neu .bgn-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
/* 16/5, nicht 16/7 (17.09.2026). Das Motiv bleibt, die Reihe wird flacher:
   bei drei Spalten waren es rund 175px, jetzt sind es 122. Der Slider verliert
   damit keinen halben Bildschirm mehr an das Produkt, das darunter haengt -
   und "Unsere Top-Partner" steht wieder im Bild. Der Textkasten unten braucht
   rund 108px, passt also; die 40px Polster oben sind reine Verlaufsstrecke. */
.bg-neu .bgn-teaser-card {
    position: relative;
    aspect-ratio: 16 / 5;
    display: block;
    border-radius: var(--bg-radius);
    overflow: hidden;
    text-decoration: none;
    background: var(--bg-surface-2);
}
.bg-neu .bgn-teaser-card .bgn-hero-text {
    position: absolute; inset: auto 0 0 0;
    width: 100%;
    /* Oben 28px statt 40: das ist reine Verlaufsstrecke, und bei 16/5 wird sie
       zur Reserve gebraucht. Der Kasten haengt unten fest und waechst nach
       oben - bricht der Wert auf zwei Zeilen, frisst er diese Strecke auf. Mit
       40px lag die Karte bei 122px Hoehe nur 14px ueber dem Inhalt, dann haette
       schon eine Umbruchzeile oben angeschnitten. */
    padding: 28px 15px 14px;
    gap: 7px;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(9,17,26,.92) 0%, rgba(9,17,26,.74) 55%, rgba(9,17,26,0) 100%);
}
.bg-neu .bgn-teaser-card .bgn-hero-value { font-size: 15.5px; line-height: 1.3; }
.bg-neu .bgn-teaser-card .bgn-hero-value small { font-size: 13px; margin-left: 5px; }
.bg-neu .bgn-teaser-card .bgn-hero-title { display: none; }   /* siehe hero.php: doppelt zum Logo */
.bg-neu .bgn-teaser-card .bgn-hero-logo { --bw: 46; --bh: 15; padding: 6px 8px; border-radius: 6px; }
.bg-neu .bgn-teaser-card .bgn-hero-overlay { display: none; }
.bg-neu .bgn-teaser-card .bgn-hero-cta,
.bg-neu .bgn-teaser-card .bgn-chips { display: none; }
/* Der Satz aus Wert und Titel ist in der Motiv-Fassung kein eigenes Bauteil -
   dort steht nur der Wert. Also einfach durchreichen. */
.bg-neu .bgn-teaser-grid.is-image .bgn-teaser-text { display: contents; }

/* --- Teaserreihe, Fassung "geteilt" (17.09.2026) ---
   Vorbild retailmenot.com. Die Karte zerfaellt in zwei Haelften: links eine
   Textspalte auf Weiss, rechts das Motiv als Panel. Der Unterschied zur
   Motiv-Fassung ist nicht Geschmack, sondern Betriebssicherheit - liegt die
   Schrift AUF dem Bild, entscheidet jedes neue Kundenmotiv mit, ob der Text
   noch lesbar ist, und der dunkle Verlauf ist die Versicherung dagegen. Neben
   dem Bild stellt sich die Frage nicht, und der Verlauf darf weg.

   Aufbau: Die Karte bleibt ein Block, das Panel haengt absolut rechts. Kein
   Flex-Zweispalter - der wuerde die Textspalte an der Bildbreite messen, und
   die Bildbreite soll fest sein. Stattdessen haelt ein Innenabstand rechts von
   `--panel` die Textspalte frei. Eine Zahl, beide Seiten.

   Senkrecht gestapelt statt nebeneinander wie in "flach": von 390px Karte
   bleiben nach dem Panel rund 200px, und davon haette eine Logoplatte neben
   dem Text die Haelfte gefressen. Oben Logo und Kennzeichnung in einer Zeile,
   darunter Wert und Titel - das ist auch die Leserichtung. */
.bg-neu .bgn-teaser-grid.is-split {
    --panel: 38%;
}
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card {
    aspect-ratio: auto;
    min-height: 104px;
    display: block;
    padding: 13px 15px 14px;
    padding-right: calc(var(--panel) + 12px);
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    box-shadow: 0 1px 2px rgba(21,32,43,.05);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card:hover {
    border-color: var(--bg-line-strong);
    box-shadow: var(--bg-shadow);
}
/* Ohne hinterlegtes Motiv gibt es nichts zu teilen: dann sitzt der Text ueber
   die volle Breite und der Knopf rutscht an den rechten Rand. Sonst stuende
   rechts ein leeres graues Feld und die Karte saehe kaputt aus. */
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card.no-image { --panel: 0px; padding-right: 52px; }

/* Das Panel ist eine eingelegte Bildkachel, kein angeschnittener Rand: 8px
   Luft ringsum, eigene Rundung. Zwei Anlaeufe waren vorher daneben - eine
   harte Kante bis zum Kartenrand sah aus wie zwei zusammengeklebte Bausteine,
   und ein weicher Verlauf ins Weiss machte aus dem Motiv einen Schmier (die
   Auslaufstrecke frass die halbe Kachel). Eingelegt liest es sich als Foto,
   das in der Karte liegt - und das Bild bleibt vollstaendig sichtbar.

   `height: calc(100% - 16px)` und NICHT `top`+`bottom` mit `height: auto`:
   bei einem ersetzten Element (img) waere das ueberbestimmt, der Browser
   naehme die Eigenhoehe der Datei und ignorierte `bottom`. */
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-image {
    left: auto; right: 8px; top: 8px; bottom: auto;
    width: calc(var(--panel) - 8px); height: calc(100% - 16px);
    border-radius: 8px;
    object-fit: cover; object-position: center;
}
/* Der Schleier ist hier arbeitslos - das Motiv traegt keinen Text mehr.
   Selektor eine Stufe hoeher als noetig (`.bgn-teaser-card` mit drin), damit die
   Regeln der Motiv-Fassung weiter oben nicht bei gleicher Staerke gewinnen. */
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card .bgn-hero-overlay { display: none; }

/* Textspalte: aus dem Kasten mit Verlauf wird eine normale Spalte. */
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-text {
    position: static; inset: auto;
    width: auto; min-width: 0;
    padding: 0; gap: 9px;
    background: none;
    color: var(--bg-text);
    align-items: flex-start; justify-content: flex-start;
    /* Der geerbte Schlagschatten faengt in der Motiv-Fassung helle Bildstellen
       ab. Auf der weissen Karte gibt es nichts abzufangen - dort legt er nur
       einen grauen Schleier hinter jede Zeile. */
    text-shadow: none;
}
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-text {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; max-width: 100%;
}
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-value {
    font-size: 15.5px; font-weight: 700; line-height: 1.25;
    letter-spacing: -.01em; color: var(--bg-text);
}
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-value small {
    font-size: 12.5px; font-weight: 600; margin-left: 5px; color: var(--bg-text-2);
}
/* Eine Zeile, Rest abgeschnitten - die Titel kommen aus dem Buchungsformular
   und sind nicht laengenbegrenzt. Zweizeilig stuende die Reihe schief. */
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-title {
    display: block;
    font-size: 12.5px; font-weight: 500; line-height: 1.35;
    color: var(--bg-text-2);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-logo { --bw: 52; --bh: 20; padding: 7px 9px; border-radius: 7px; }

/* Der Knopf sitzt in der unteren Ecke der Bildkachel, nicht im Text: dort
   nimmt er der schmalen Textspalte keine Breite weg, und er markiert die
   Stelle, auf die der Blick nach dem Bild faellt. Weisse Scheibe, damit er auf
   jedem Motiv steht - dasselbe Argument wie bei der Logoplatte. Der Winkel als
   Hintergrundbild, weil sich eine Form IM Kreis nicht mit demselben ::after
   zeichnen laesst. 14px = 8px Kachelrand + 6px Einzug. */
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card::after {
    content: '';
    position: absolute; right: 14px; bottom: 14px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23375878' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    box-shadow: 0 1px 3px rgba(9,17,26,.22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card:hover::after {
    transform: translateX(2px);
    box-shadow: 0 2px 7px rgba(9,17,26,.28);
}
/* Ohne Motiv steht die Scheibe auf Weiss - dort braucht sie keinen Schatten,
   sonst schwebt sie grundlos. */
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card.no-image::after {
    background-color: var(--bg-blue-soft);
    box-shadow: none;
    top: 50%; bottom: auto; transform: translateY(-50%);
}
.bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card.no-image:hover::after { transform: translate(2px, -50%); }

/* Kennzeichnung oben rechts IN der Textspalte, auf Hoehe der Logoplatte. Auf
   dem Motiv stuende sie mal auf hell, mal auf dunkel - auf Weiss reicht Grau.
   `--panel` haelt sie vom Bild weg. */
.bg-neu .bgn-teaser-grid.is-split .bgn-hero-label {
    /* Ganz oben in die Ecke, NICHT auf Hoehe der Logoplatte: auf gleicher Hoehe
       las sie sich wie eine Bildunterschrift zum Logo. Buendig mit dessen
       Oberkante ist sie das, was sie sein soll - eine Randnotiz auf derselben
       Linie. 12px statt 13: die 9px-Versalien setzen optisch tiefer an als die
       Plattenkante. */
    top: 12px; right: calc(var(--panel) + 12px);
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0;
    font-size: 9px; font-weight: 500; letter-spacing: .1em;
    color: var(--bg-text-3);
}

/* --- Teaserreihe, Fassung "flach" (17.09.2026) ---
   Begruendung steht in hero.php beim Markup. Kurz: die Reihe ist das
   guenstigere Produkt und darf den Slider darueber nicht optisch schlagen. Ein
   Vollflaechen-Motiv tut aber genau das - ein buntes Bild zieht den Blick
   unabhaengig davon, wie gross es ist.

   Deshalb hier: keine Buehne, sondern eine Karte. Dieselbe Kante, derselbe
   Radius und dieselbe Logoplatte wie in den Listenzeilen weiter unten. Die
   Reihe liest sich damit als Fortsetzung der Seite und nicht als zweiter
   Werbeblock.

   `aspect-ratio` muss weg: die Karte soll sich nach ihrem Inhalt richten, nicht
   nach der Spaltenbreite. Bei drei Spalten waren das vorher rund 175px Hoehe,
   jetzt sind es 78 - die Reihe kostet den Slider keinen halben Bildschirm
   mehr. */
.bg-neu .bgn-teaser-grid.is-flat .bgn-teaser-card {
    aspect-ratio: auto;
    min-height: 78px;
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    box-shadow: 0 1px 2px rgba(21,32,43,.05);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bg-neu .bgn-teaser-grid.is-flat .bgn-teaser-card:hover {
    border-color: var(--bg-line-strong);
    box-shadow: var(--bg-shadow);
}
/* Sicherheitsnetz: hero.php gibt in dieser Fassung gar kein Bild aus. Bleibt in
   einem Zwischenspeicher altes Markup liegen, faellt es hier trotzdem weg -
   sonst legte sich das Motiv als position:absolute ueber die ganze Karte. */
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-image,
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-overlay { display: none; }
/* Aus dem Bildkasten mit Verlauf wird eine normale Textspalte.
   `min-width: 0` ist Pflicht, sonst laesst das Flexfeld den Titel nicht
   abschneiden, sondern die Karte wachsen. */
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-text {
    position: static; inset: auto;
    width: auto; min-width: 0; flex: 1 1 auto;
    padding: 0; gap: 0;
    background: none;
    color: var(--bg-text);
    justify-content: center; align-items: flex-start;
    text-shadow: none;   /* siehe "geteilt": auf Weiss wird er zum Schleier */
}
.bg-neu .bgn-teaser-grid.is-flat .bgn-teaser-text {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; max-width: 100%;
}
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-value {
    font-size: 16px; font-weight: 700; line-height: 1.25;
    letter-spacing: -.01em; color: var(--bg-text);
}
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-value small {
    font-size: 13px; font-weight: 600; margin-left: 5px; color: var(--bg-text-2);
}
/* Eine Zeile, Rest abgeschnitten. Zweizeilig waere die Karte mal 78 und mal
   96px hoch und die Reihe stuende schief - die Titel kommen aus dem
   Buchungsformular und sind nicht laengenbegrenzt. */
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-title {
    display: block;
    font-size: 12.5px; font-weight: 500; line-height: 1.35;
    color: var(--bg-text-2);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-logo { --bw: 58; --bh: 24; }
/* Der Winkel sitzt rechts und macht aus der Karte einen sichtbaren Weg. Als
   ::after statt als eigenes Element - das Markup traegt schon genug. */
.bg-neu .bgn-teaser-grid.is-flat .bgn-teaser-card::after {
    content: '';
    flex: none; margin-left: auto;
    width: 7px; height: 7px;
    border: solid var(--bg-action-text);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.bg-neu .bgn-teaser-grid.is-flat .bgn-teaser-card:hover::after { transform: rotate(45deg) translate(2px, -2px); }
/* Kennzeichnung: auf heller Karte braucht sie keine eigene Flaeche, nur
   Abstand. Klein und grau reicht - erkennbar muss sie sein, nicht laut. */
.bg-neu .bgn-teaser-grid.is-flat .bgn-hero-label {
    top: 7px; right: 9px;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0;
    font-size: 9px; color: var(--bg-text-3);
}

@media (max-width: 999px) {
    /* Parallaxe aus: der Anschnitt ist hier nur noch 32px breit, da bringt sie
       nichts - und acht Bilder auf eigenen Ebenen kosten auf dem Handy Speicher.
       Deshalb auch transform ganz weg und nicht nur auf Null gesetzt: sonst
       bekaeme jedes Bild trotzdem seine eigene Ebene. */
    .bg-neu .bgn-hero { --peek: 48px; --fade: 16px; --depth: 0; --overscan: 1; }
    .bg-neu .bgn-hero-slide .bgn-hero-image { transform: none; }
}
@media (max-width: 639px) {
    .bg-neu .bgn-hero { --peek: 26px; --slide-gap: 10px; --fade: 8px; }
    .bg-neu .bgn-hero-slide,
    .bg-neu .bgn-hero-slider { min-height: 300px; }
    .bg-neu .bgn-hero-overlay {
        background: linear-gradient(0deg, rgba(9,17,26,.95) 30%, rgba(9,17,26,.6) 58%, rgba(9,17,26,0) 82%);
    }
    /* Der senkrechte Verlauf oben endet selbst bei 82%; die Maske vom Desktop
       wuerde hier in den Textblock schneiden. */
    .bg-neu .bgn-hero-slide .bgn-hero-overlay { -webkit-mask-image: none; mask-image: none; }
    .bg-neu .bgn-hero-text {
        width: 100%;
        padding: 20px;
    }
    .bg-neu .bgn-hero-value { font-size: 30px; }
    .bg-neu .bgn-teaser-grid { grid-template-columns: 1fr; }
    .bg-neu .bgn-teaser-card { aspect-ratio: 16 / 6; }
    /* Vier Platten auf einem Telefon: schmaler, flacher, und das Logo mit
       !important, weil die Kastenbreite als style-Attribut aus hero.php kommt. */
    .bg-neu .bgn-hero-brand { flex: 1 1 0; min-width: 0; padding: 7px 6px; }
    .bg-neu .bgn-brand-logo { --bw: 66 !important; --bh: 22; }
    .bg-neu .bgn-hero-arrow { display: none; }   /* auf dem Telefon wird gewischt */
    /* Auf schmalen Schirmen steht der Text unten ueber die ganze Breite - der
       Halteknopf sitzt dort auf dem Knopf "Zum Gutschein". Also nach oben
       rechts; die Kennzeichnung weicht dafuer nach links aus, sonst stehen
       beide uebereinander. */
    .bg-neu .bgn-hero-progress { top: 12px; bottom: auto; right: 12px; }
    .bg-neu .bgn-hero-label { left: 14px; right: auto; }
}

/* Die flache Karte auf dem Telefon. Eigener Block, weil die Regeln oben fuer
   die Folie gedacht sind und der Karte sonst zwei davon in die Quere kommen:
   `aspect-ratio: 16/6` (die Karte misst sich am Inhalt) und
   `.bgn-hero-label { left: 14px }` - zusammen mit dem `right` der flachen
   Fassung spannte das die Kennzeichnung ueber die ganze Kartenbreite. */
@media (max-width: 639px) {
    .bg-neu .bgn-teaser-grid.is-flat { gap: 10px; }
    .bg-neu .bgn-teaser-grid.is-flat .bgn-teaser-card { min-height: 70px; padding: 11px 13px; gap: 11px; }
    .bg-neu .bgn-teaser-grid.is-flat .bgn-hero-label { left: auto; right: 9px; }
}

/* Die geteilte Karte auf schmalen Schirmen - eine Spalte statt drei.
   Gemessen bei 820px: drei Spalten lassen der Karte gut 245px. Davon nimmt das
   Panel seinen Anteil, der Wert bricht zweizeilig um, die Karte waechst, und
   weil das Panel ueber die volle Kartenhoehe laeuft, wird aus der Bildkachel
   ein Hochformat - ein Querformat-Motiv auf 65x100px ist nichts mehr. Ein
   schmaleres Panel verschiebt das Problem nur.

   Volle Breite loest beides auf einmal: der Text hat Platz, und die Kachel
   wird zum Querformat (bei 640px rund 150x76), also genau die Form, die ein
   Bannermotiv ohnehin hat. Kostet Hoehe, aber die Reihe steht unter dem
   Slider - dort wird gescrollt. */
@media (max-width: 900px) {
    .bg-neu .bgn-teaser-grid.is-split {
        grid-template-columns: minmax(0, 1fr);
        --panel: 26%;
        gap: 10px;
    }
    .bg-neu .bgn-teaser-grid.is-split .bgn-teaser-card { min-height: 92px; }
}
@media (max-width: 639px) {
    .bg-neu .bgn-teaser-grid.is-split { --panel: 32%; }
    /* Die Regel der Folie schiebt die Kennzeichnung auf Telefonen nach links.
       Zusammen mit dem `right` hier spannte sie ueber die ganze Karte. */
    .bg-neu .bgn-teaser-grid.is-split .bgn-hero-label { left: auto; }
}

/* ==========================================================================
   7. Startseite - Abschnitte
   Markup: Seite "Startseite 2027" + neu/inc/startseite.php
   ========================================================================== */

.bg-neu .bgn-home { overflow-x: hidden; }

/* Breite macht jeder Abschnitt selbst, nicht eine Huelle darum - nur so laeuft
   das graue Band ueber die volle Fensterbreite, waehrend der Inhalt in der
   Lesespalte bleibt. max() faengt schmale Fenster ab. */
.bg-neu .bgn-section {
    position: relative;
    padding: 44px max(18px, calc((100% - 1200px) / 2));
    margin: 0;
}
.bg-neu .bgn-section--compact { padding-top: 30px; padding-bottom: 30px; }
.bg-neu .bgn-section--top { padding-top: 20px; padding-bottom: 12px; }
.bg-neu .bgn-section > *:first-child { margin-top: 0; }

/* Durchgehendes Band hinter einem breitenbegrenzten Abschnitt: der Schatten mit
   riesigem Radius malt ueber den Elementrand hinaus, clip-path schneidet ihn
   oben und unten wieder auf Abschnittshoehe. Kein zusaetzliches Markup. */
.bg-neu .bgn-section--gray {
    background: var(--bg-surface-2);
    box-shadow: 0 0 0 100vmax var(--bg-surface-2);
    clip-path: inset(0 -100vmax);
}

/* --- Abschnittskopf: Ueberschrift links, Verweis rechts --- */
.bg-neu .bgn-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.bg-neu .bgn-h2 {
    margin: 0;
    font-size: 26px; font-weight: 700; line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--bg-text);
    text-wrap: balance;
}
.bg-neu .bgn-subtitle {
    margin: 5px 0 0;
    color: var(--bg-text-2); font-size: 14px;
    /* Vorher 62ch. Das ist ein guter Wert fuer Fliesstext, aber diese Zeilen
       sind keine Absaetze, sondern Bildunterschriften zu einer Ueberschrift -
       und die brachen dadurch mitten im Satz um, obwohl daneben 400px frei
       waren. Ohne Deckel stehen sie einzeilig und brechen erst, wenn das
       Fenster es verlangt. */
    max-width: none;
}

/* --- Seitentitel ---------------------------------------------------------
   Eigener Container, NICHT .bgn-section-head. Der ist display:flex mit
   space-between und fuer "Ueberschrift links, Verweis rechts" gebaut (siehe
   "Selbst getestet" mit seinem .bgn-more). Steht rechts nichts, bleibt die
   halbe Zeile sichtbar leer - der Titel sah dort aus wie vergessen.

   Zentriert und schmal, so wie Sparwelt, Savoo, Gutscheine.de und coupons.de
   es auf ihren Startseiten alle vier loesen. Der Unterschied ist nicht
   Geschmack: der Titel ist der Auftakt der ganzen Seite, keine
   Abschnittsueberschrift. Linksbuendig steht er in einer Flucht mit
   "Unsere Top-Partner" und liest sich wie noch eine Sektion.

   Steht bewusst UNTER dem Slider: der ist verkaufte Flaeche zum Hoechstpreis,
   eine Ueberschrift darueber schiebt ihn aus dem ersten Blick.

   NICHT .bgn-card-title nennen: der Name ist oben (Zeile 241) schon der
   Gutscheintitel auf der Karte, samt -webkit-line-clamp:2 und
   overflow:hidden. Auf diesen Kasten angewandt klemmt das den ganzen Block
   auf zwei Zeilen - die H1 bekommt ein "…" und die Unterzeile verschwindet
   ersatzlos.

   Die Breite ist auf "je eine Zeile" ausgelegt, nicht auf einen moeglichst
   schmalen Kasten: bei 720px brach die Ueberschrift auf zwei Zeilen und die
   Unterzeile auch, der Block stand vierzeilig und rund 170px hoch da. Jetzt
   26px Schrift in 880px Kasten - beide Zeilen passen einzeln, das Band ist
   etwa 100px hoch. Auf schmalen Fenstern bricht es von selbst um. */
.bg-neu .bgn-page-title {
    /* Keine eigene Breitenbegrenzung: die Ueberschrift soll auf EINER Zeile
       stehen, und der Abschnitt gibt mit 1200px genug her. Auf schmalen
       Fenstern bricht sie von selbst um - text-wrap:balance sorgt dann fuer
       zwei etwa gleich lange Zeilen statt einer langen und einem Wort. */
    margin: 0 auto;
    text-align: center;
}
/* Gross und LEICHT, nicht gross und fett. Vorher stand hier 26px/700 - exakt
   dasselbe wie .bgn-h2, der einzige Unterschied war die Ausrichtung. Damit las
   sich der Seitentitel wie eine weitere Abschnittsueberschrift, die zufaellig
   mittig steht.

   Die Richtung ist im Haus vorgegeben: die alte Startseite setzt ihre
   Top-Deals-Ueberschrift auf font-weight:300 (functions.php, .bg-td-title).
   Ein Seitentitel traegt durch Groesse, ein Abschnittstitel durch Gewicht -
   so stehen sie auf verschiedenen Ebenen statt nebeneinander.

   Enges Tracking passt nur zu fetter Schrift; bei 300 wirkt -.02em gequetscht,
   deshalb -.01em. */
.bg-neu .bgn-h1 {
    margin: 0;
    font-size: 34px; font-weight: 300; line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--bg-text);
    text-wrap: balance;
}
/* Die Zahl ist der einzige harte Fakt in der Zeile und bekommt deshalb den
   Fixpunkt - halbfett, nicht fett: gegen 300 wirkt schon 600 wie ein Ausrufezeichen. */
.bg-neu .bgn-h1 strong { font-weight: 600; }
.bg-neu .bgn-page-title .bgn-subtitle {
    margin: 8px auto 0;
    max-width: none;
    font-size: 15px;
}
/* Eigener Abstands-Modifikator statt --eng: das Band traegt nur zwei Zeilen
   und soll den Inhalt darunter nicht weiter nach hinten schieben als noetig. */
.bg-neu .bgn-section--title { padding-top: 20px; padding-bottom: 20px; }
.bg-neu .bgn-more {
    font-size: 14px; font-weight: 600;
    color: var(--bg-blue); text-decoration: none; white-space: nowrap;
}
.bg-neu .bgn-more:hover { text-decoration: underline; }

/* --- Partnerraster --- */
/* Grundfall vier Spalten; die Reihe zu acht steht weiter unten hinter einer
   Mindestbreite. 8 geht in 4 und in 2 auf, in 5 und 3 nicht - sonst bliebe
   eine Reihe mit einsamen Karten stehen. */
.bg-neu .bgn-partner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Gestrafft am 20.09.2026: die Karten waren rund 163px hoch, davon gut 55px
   Polster und Abstaende. Gekuerzt wurde NUR die Luft - Polster von 18/12/16 auf
   12/10/12, Abstand von 12 auf 8. */
.bg-neu .bgn-partner-card {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    padding: 12px 10px;
    text-align: center; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow: 0 1px 2px rgba(21,32,43,.05);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bg-neu .bgn-partner-card:hover {
    border-color: var(--bg-line-strong); transform: translateY(-2px);
    box-shadow: 0 8px 20px -12px rgba(21,32,43,.4);
}
/* Fester Logokasten: die Bilder sind unterschiedlich hoch (Wortmarke gegen
   quadratisches Signet), ohne Kasten stehen die Namen darunter versetzt.
   80x33 = halbe Dateigroesse, Massstab .5 - sauber auf 1x und 2x (siehe
   .bgn-logo img). Vorher 128x52 bzw. 100x41 in der Achterreihe, das ergab
   krumme Faktoren und weiche Marken.
   Groesser geht in EINER Reihe nicht: Originalgroesse (160px, wie auf der
   alten Startseite) braucht einen Kasten von 160x60 (160 x .94 / 150 ist
   gerade noch Massstab 1; mit 152 fielen ECOVACS, Metzler und FlexiSpot bei
   .99 auf die Haelfte) und damit Karten ab rund 200px - also hoechstens sechs
   je Reihe oder zwei Reihen zu vier. Beides war am 21.09.2026 kurz gebaut und
   vom Nutzer verworfen: die Reihe zu acht bleibt. Wer die Marken groesser
   will, braucht groessere Dateien (320x240 oder SVG), nicht groessere Kaesten. */
.bg-neu .bgn-partner-logo { --bw: 80; --bh: 33; }
.bg-neu .bgn-partner-name { font-size: 14px; font-weight: 600; color: var(--bg-text); line-height: 1.25; }
.bg-neu .bgn-partner-count {
    margin-top: auto;
    font-size: 12px; font-weight: 600;
    color: var(--bg-blue);
    font-variant-numeric: tabular-nums;
}

/* --- Acht Partner in EINER Reihe (20.09.2026, bestaetigt 21.09.2026) ---
   Zwei Reihen lesen sich als Rangliste: oben die wichtigen, unten der Rest.
   Eine Reihe ist eine Gruppe - gleichwertig, und genau das wird verkauft.
   Ab 1236px Fenster ist der Abschnitt 1200px breit, eine Karte
   (1200 - 7x10) / 8 = 141px, innen bleiben 123px: genug fuer den Logokasten
   (80 + 20px Polster und Rahmen = 100px) und einen Shopnamen in einer Zeile. */
@media (min-width: 1236px) {
    .bg-neu .bgn-partner { grid-template-columns: repeat(8, 1fr); gap: 10px; }
    .bg-neu .bgn-partner-card { padding: 12px 8px; }
    .bg-neu .bgn-partner-name { font-size: 13.5px; }
}

/* --- Drei Listen: exklusiv, neu, laeuft ab --- */
.bg-neu .bgn-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bg-neu .bgn-list {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    overflow: hidden;
}
.bg-neu .bgn-list h3 {
    margin: 0;
    font-size: 15px; font-weight: 600;
    padding: 13px 16px;
    border-bottom: 1px solid var(--bg-line);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: var(--bg-text);
}
.bg-neu .bgn-list-kicker {
    font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--bg-text-3);
}
.bg-neu .bgn-list-item {
    display: grid; grid-template-columns: 84px 1fr;
    gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--bg-line);
    text-decoration: none;
}
.bg-neu .bgn-list-item:last-child { border-bottom: 0; }
.bg-neu .bgn-list-item:hover { background: var(--bg-surface-2); }
.bg-neu .bgn-list-item .bgn-offer-logo { --bw: 84; --bh: 28; }
.bg-neu .bgn-list-no-logo { width: 84px; }
.bg-neu .bgn-list-value {
    display: block;
    font-weight: 700; font-size: 16px; line-height: 1.2;
    color: var(--bg-text);
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-list-title {
    display: block;
    font-size: 12.5px; line-height: 1.35;
    color: var(--bg-text-2);
    margin-top: 2px;
}
.bg-neu .bgn-list-meta {
    display: block;
    font-size: 11.5px; color: var(--bg-text-3);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-list-meta.is-urgent { color: var(--bg-urgent); font-weight: 600; }

/* --- Kategorien als Chips --- */
.bg-neu .bgn-categories { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bg-neu .bgn-category {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13.5px; font-weight: 500;
    text-decoration: none; color: var(--bg-text);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.bg-neu .bgn-category:hover { border-color: var(--bg-line-strong); color: var(--bg-blue); }
.bg-neu .bgn-category span { color: var(--bg-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- Einloesen in drei Schritten --- */
.bg-neu .bgn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bg-neu .bgn-step { display: flex; flex-direction: column; gap: 8px; }
.bg-neu .bgn-step .n {
    font-weight: 700; font-size: 13px;
    color: var(--bg-blue); letter-spacing: .1em;
}
.bg-neu .bgn-step h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--bg-text); }
.bg-neu .bgn-step p { margin: 0; color: var(--bg-text-2); font-size: 14px; line-height: 1.6; }

/* --- Haeufige Fragen --- */
.bg-neu .bgn-faq { border-top: 1px solid var(--bg-line); max-width: 78ch; }
.bg-neu .bgn-faq details { border-bottom: 1px solid var(--bg-line); }
.bg-neu .bgn-faq summary {
    cursor: pointer; padding: 15px 0;
    font-weight: 600; font-size: 16px;
    list-style: none;
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
    color: var(--bg-text);
}
.bg-neu .bgn-faq summary::-webkit-details-marker { display: none; }
.bg-neu .bgn-faq summary::after {
    content: "+"; color: var(--bg-blue);
    font-size: 20px; font-weight: 600; flex: none;
}
.bg-neu .bgn-faq details[open] summary::after { content: "\2212"; }
.bg-neu .bgn-faq p {
    margin: 0 0 16px;
    color: var(--bg-text-2); font-size: 14.5px; line-height: 1.65;
    max-width: 65ch;
}

/* --- Gutscheinraster "Unsere beliebtesten Gutscheine": 4 x 2 (21.09.2026) ---
   Vorher drei Spalten zu 375px und Karten von 259px Hoehe, davon 41px
   Plakettenspur ueber dem Logo, 18px Luft unter dem Kopf und ein 65px hoher
   Fuss - "zu viel Luft in den Feldern". Jetzt vier Spalten zu 288px mit acht
   Karten; die Karte selbst ist auf rund 175px gestrafft.

   Eigenes Raster statt ReHubs .col_wrap_fourth: dessen Floats mit 23% Breite
   und 1% Rand ergeben ungleiche Luecken und ragen 1,5% ueber den Abschnitt
   hinaus (gemessen: 1236px Raster in einem 1200px-Abschnitt). CSS-Grid haelt
   die Spalten gleich breit und jede Reihe gleich hoch; der Fuss steht dann in
   allen Karten einer Reihe auf derselben Linie (margin-top:auto im Fuss).

   Alles hier ist auf .bgn-coupon-grid begrenzt (Klasse aus dem Shortcode
   [bg_gutscheinraster]). Die allgemeine Karte oben in Abschnitt 2 bleibt fuer
   Kategorie- und Shopseiten unveraendert. */
.bg-neu .bgn-coupon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
.bg-neu .bgn-coupon-grid .col_item { width: auto; margin: 0; float: none; }
.bg-neu .bgn-coupon-grid .offer_grid.bgn-card {
    padding: 22px 16px 0;
    gap: 6px;
}
/* Die Plakette wandert aus dem Fluss in die obere rechte Ecke; die 41px hohe
   Spur, die jede Karte (auch ohne Plakette) frei liess, entfaellt.
   Sie sitzt im oberen Polster (7 bis 22px von der Kante), der Kopf beginnt in
   JEDER Karte erst bei 22px - deshalb oben 22px Polster statt der 16px an den
   Seiten. Der Wertblock haengt unten am Logokasten (align-items:flex-end),
   sein Shopname beginnt dadurch bei 27px: zwischen Plakette und Shopname
   bleiben gut 5px, egal wie lang der Name ist. Ein erster Stand mit 14px
   Polster liess die beiden bei 1100px Fenster ineinanderlaufen ("MOBIMATT"
   unter "Beliebt") - dort ist der Wertblock nur 98px breit und der Name reicht
   waagerecht bis unter die Plakette. Senkrecht getrennt ist die Breite egal. */
.bg-neu .bgn-coupon-grid .offer_grid.bgn-card:not(:has(.re-ribbon-badge)) { padding-top: 22px; }
.bg-neu .bgn-coupon-grid .bgn-card .re-ribbon-badge {
    position: absolute !important;
    top: 7px !important; right: 10px !important; left: auto !important;
    margin: 0 !important;
    z-index: 1;
    /* Als Flexkasten, damit die Huelle keine eigene Zeile aufmacht: ReHub
       vererbt line-height 28px, und der inline-block-Span sass auf deren
       Grundlinie - die Huelle war 30px hoch, der Span endete bei 29px und lag
       damit doch wieder auf dem Shopnamen. Als Flexelement ist der Span so hoch
       wie er selbst (15px). */
    display: flex;
    line-height: 0;
}
/* Schrift mit !important, weil rehub-blankchild/style.css:43 dem Span
   `font: bold 9px/24px Arial !important` gibt - die 24px Zeilenhoehe machten
   den Span 28px hoch, egal was hier ohne Vorrang stand. Die allgemeine Regel
   in Abschnitt 2 setzt seit 21.09.2026 dieselben Langformen mit 11px/1.5;
   hier nur kleiner (9.5px) und enger (1.2). */
.bg-neu .bgn-coupon-grid .bgn-card .re-ribbon-badge > span {
    display: block;
    padding: 2px 6px;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
}
/* Kopf: kleinerer Logokasten (80x30 statt 92x34 - mehr laesst der Deckel gegen
   das Hochrechnen ohnehin nicht zu), Wertblock unten buendig mit dem Kasten,
   weniger Luft darunter. Kein Umbruch im Kopf: mit flex-basis auto wanderte der
   Wertblock unter das Logo, sobald ein Shopname breiter war als der Rest der
   Zeile (109px hoher Kopf bei MobiMatter) - Basis 0 laesst ihn schrumpfen. */
.bg-neu .bgn-coupon-grid .bgn-card .bgn-card-head {
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-end;
    margin-bottom: 8px;
}
.bg-neu .bgn-coupon-grid .bgn-card .bgn-value-block { flex: 1 1 0; min-width: 0; }
.bg-neu .bgn-coupon-grid .bgn-card .bgn-logo--tile { --bw: 80; --bh: 30; padding: 6px 8px; }
/* line-height ausdruecklich: ReHub vererbt 28px, die Zeile war doppelt so hoch
   wie ihre Schrift. */
.bg-neu .bgn-coupon-grid .bgn-card-shop { font-size: 11px; line-height: 1.3; }
.bg-neu .bgn-coupon-grid .bgn-value { font-size: 22px; }
.bg-neu .bgn-coupon-grid .bgn-value .bgn-upto { font-size: 13px; }
.bg-neu .bgn-coupon-grid .bgn-card-title { font-size: 14px; line-height: 1.35; }
/* Die Bedingung bleibt lesbar, aber hoechstens zwei Zeilen - eine dritte
   wuerde die ganze Reihe strecken. */
.bg-neu .bgn-coupon-grid .bgn-note {
    font-size: 12.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Fuss: Knopf und Frist in EINER Zeile. Rechnung bei 288px Karte: 256px innen,
   Knopf rund 150px (12,5px Schrift, 12px Polster), Abstand 8px, "Ohne Enddatum"
   rund 88px - bleiben 10px Reserve. Mit 13px Schrift und 13px Polster war der
   Knopf 157px breit und die laengste Frist rutschte unter ihn (Metzler,
   DefShop, MobiMatter in der ersten Fassung). Unter 1236px Fenster reicht die
   Reserve nicht mehr, dort stapelt der Fuss in ALLEN Karten gleich (siehe
   Medienabfrage), statt in jeder zweiten anders umzubrechen. */
.bg-neu .bgn-coupon-grid .bgn-card-footer {
    margin-left: -16px; margin-right: -16px;
    padding: 10px 16px 12px;
    gap: 6px 8px;
}
.bg-neu .bgn-coupon-grid .bgn-btn .btn_offer_block { font-size: 12.5px; padding: 9px 12px; white-space: nowrap; }
.bg-neu .bgn-coupon-grid .bgn-expiry { font-size: 11.5px; }
@media (max-width: 1235px) {
    .bg-neu .bgn-coupon-grid .bgn-card-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* Acht Karten gehen in 4, 2 und 1 auf - deshalb kein Zwischenschritt mit drei
   Spalten, der eine Reihe mit zwei einsamen Karten liesse. Bei zwei Spalten
   sind die Karten wieder breit genug fuer den einzeiligen Fuss. */
@media (max-width: 1023px) {
    .bg-neu .bgn-coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bg-neu .bgn-coupon-grid .bgn-card-footer { flex-direction: row; align-items: center; gap: 6px 8px; }
}
@media (max-width: 559px) {
    .bg-neu .bgn-coupon-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 999px) {
    .bg-neu .bgn-lists  { grid-template-columns: 1fr; }
    .bg-neu .bgn-categories    { grid-template-columns: repeat(3, 1fr); }
    .bg-neu .bgn-steps{ grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
    .bg-neu .bgn-section { padding: 30px 16px; }
    .bg-neu .bgn-h2 { font-size: 21px; }
    .bg-neu .bgn-h1 { font-size: 25px; }
    .bg-neu .bgn-partner { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bg-neu .bgn-categories    { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   8. Was noch aussteht
     [x] Farbtoken
     [x] Gutscheinkarte  -> neu/inc/parts/compact_grid.php
     [x] Kopfzeile       -> neu/inc/header_layout/header_eight.php
     [x] Fusszeile -> neu/footer.php ueber die Weiche rehub-blankchild/
         footer.php (ReHubs footer.php delegiert nicht an rh_locate_template,
         RH_GRANDCHILD_DIR greift dort nicht). Abschnitt 9.
     [x] Startseite -> private Seite "Startseite 2027", Bausteine in
         neu/inc/hero.php und neu/inc/startseite.php
     [x] Shopseiten-Zeile -> neu/inc/parts/postlistpart.php
     [x] Shopseiten-Rahmen (Reiter, Randspalte, Ueberschriften) -> nur CSS,
         taxonomy-dealstore.php bleibt unangetastet
     [x] Gutschein-Popup -> neu/inc/gutschein-popup.php
     [x] Statische Seiten (Impressum, Datenschutz, Kontakt, Geld sparen),
         Suchergebnisse, Redaktion + Profile -> nur CSS, Abschnitt 10
     [x] /shops/ (A-Z, GreenShift-Taxonomiebox) und /kategorien/ (bg_kategorien-
         Shortcode mit eigenem <style> in functions.php) -> nur CSS, Abschnitt 11
     [x] Testberichte (Hub + Einzelseiten, bg-reviews/css/bg-review.css inline
         mit eigenen --bgr-Token) -> Token unter .bg-neu umgebogen, Abschnitt 12

   Offen an der Karte: Die Knopffarbe steht als Inline-<style> mit !important
   in den ReHub-Optionen (aktuell #375878, das Logo-Blau). Sobald ueber Gruen
   oder Orange entschieden ist, wird sie dort geaendert - nicht per Ueberschreiben.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Testberichte auf der Startseite
   Markup: bgn_testberichte_shortcode() in neu/inc/startseite.php

   Die Spaltenzahl kommt als --columns aus dem PHP und richtet sich nach der
   Zahl der Berichte. Kein auto-fill: bei zwei Berichten macht der Browser
   sonst drei Spalten auf und laesst eine leer stehen.
   -------------------------------------------------------------------------- */
.bg-neu .bgn-tests {
    display: grid;
    /* Gedeckelt auf Drittelbreite, nicht 1fr: bei zwei Berichten wuerden zwei
       Karten sonst die ganze Zeile fuellen und das Bild dominierte den halben
       Bildschirm. So haben sie dieselbe Breite wie die Karten darueber, egal
       ob zwei oder drei Berichte vorliegen. */
    grid-template-columns: repeat(var(--columns, 3), minmax(0, 373px));
    justify-content: start;
    gap: 20px;
}
.bg-neu .bgn-test {
    display: flex; flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(21,32,43,.05);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bg-neu .bgn-test:hover {
    border-color: var(--bg-line-strong); transform: translateY(-2px);
    box-shadow: 0 8px 20px -12px rgba(21,32,43,.4);
}
.bg-neu .bgn-test-image {
    position: relative; display: block;
    aspect-ratio: 32 / 15;              /* Mass der Teaserbilder: 320x150 */
    background: var(--bg-surface-2);
}
.bg-neu .bgn-test-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Die Wertung ist das Argument des Abschnitts - sie steht auf dem Bild, nicht
   irgendwo in der Fusszeile. */
.bg-neu .bgn-test-grade {
    position: absolute; left: 12px; bottom: 12px;
    display: inline-flex; align-items: baseline; gap: 2px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(9,17,26,.82);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-weight: 700; font-size: 17px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-test-grade small { font-size: 11px; font-weight: 600; opacity: .72; }
.bg-neu .bgn-test-body {
    display: flex; flex-direction: column; gap: 7px;
    padding: 14px 16px 16px;
    flex: 1 1 auto;
}
.bg-neu .bgn-test-type {
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--bg-text-3);
}
.bg-neu .bgn-test-title {
    font-size: 15.5px; font-weight: 600; line-height: 1.32;
    color: var(--bg-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bg-neu .bgn-test-summary {
    font-size: 13.5px; line-height: 1.45; color: var(--bg-text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bg-neu .bgn-test-footer {
    margin-top: auto; padding-top: 10px;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: baseline; justify-content: space-between;
    border-top: 1px dashed var(--bg-line);
}
.bg-neu .bgn-test-more { font-size: 13.5px; font-weight: 600; color: var(--bg-blue); }
.bg-neu .bgn-test:hover .bgn-test-more { text-decoration: underline; }
.bg-neu .bgn-test-date { font-size: 12px; color: var(--bg-text-3); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
    .bg-neu .bgn-tests { grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .bg-neu .bgn-tests { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Gutschein-Popup
   Markup: neu/inc/gutschein-popup.php (siehe dort, warum es nicht die
   Theme-Funktion ersetzt, sondern sich um sie herumlegt).

   Die Huelle kommt weiterhin von pgwModal (#pgwModal .pm-body/.pm-content) und
   traegt eine ID - deshalb braucht jede Regel dafuer das .bg-neu davor, sonst
   verliert sie gegen rehub-theme/style.css Zeile 1310ff.
   -------------------------------------------------------------------------- */

/* Der Hintergrund wird abgedunkelt statt entfaerbt. ReHub legt bei offenem
   Fenster ein grayscale(100%) ueber die halbe Seite - das sieht aus, als waere
   etwas kaputtgegangen, und kostet auf schwachen Geraeten eine Bildschirmlage. */
.bg-neu.pgwModalOpen .rh-container,
.bg-neu.pgwModalOpen #main_header { filter: none !important; }
.bg-neu #pgwModalBackdrop { background: #0a151f; opacity: .62; }

.bg-neu #pgwModal .pm-body {
    /* pgwModal schreibt max-width als Inline-Stil (650px aus custom.js), das
       laesst sich nur mit !important zuruecknehmen. 460px, weil das Fenster
       genau eine Handlung hat - breiter macht es nur leerer.
       Den senkrechten Abstand setzt pgwModal ebenfalls inline (margin-top),
       da lohnt kein Gegenhalten. */
    max-width: 460px !important;
    background: transparent;
    box-shadow: none;
}
.bg-neu #pgwModal .pm-content { padding: 0; background: transparent; }

/* Das Kreuz zeichnet sich selbst. ReHubs Markierung ist
   <i class="rhicon rhi-times whitebg roundborder50p rh-shadow4"> - eine weisse
   Scheibe, deren Zeichen aus der Symbolschrift kommt. Auf dem dunklen Kopf war
   davon nur die weisse Scheibe zu sehen. Zwei gedrehte Balken brauchen keine
   Schrift und koennen deshalb auch nicht ausfallen. */
.bg-neu #pgwModal .pm-close {
    top: 13px; right: 13px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    transition: background .15s ease;
}
.bg-neu #pgwModal .pm-close:hover { background: rgba(255,255,255,.32); }
.bg-neu #pgwModal .pm-close i { display: none; }
.bg-neu #pgwModal .pm-close::before,
.bg-neu #pgwModal .pm-close::after {
    content: "";
    position: absolute;
    top: 14px; left: 8px;
    width: 14px; height: 2px;
    border-radius: 2px;
    background: #fff;
}
.bg-neu #pgwModal .pm-close::before { transform: rotate(45deg); }
.bg-neu #pgwModal .pm-close::after  { transform: rotate(-45deg); }

.bg-neu .bgn-popup {
    text-align: left;
    background: var(--bg-surface);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(4,12,20,.65);
}

/* Kopf ---------------------------------------------------------------- */
.bg-neu .bgn-popup-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 52px 18px 18px;   /* rechts Platz fuer das Schliessen-Kreuz */
    background: var(--bg-blue-deep);
}
.bg-neu .bgn-popup-logo { --bw: 104; --bh: 38; flex: none; }
.bg-neu .bgn-popup-head-text { min-width: 0; flex: 1 1 auto; }
.bg-neu .bgn-popup-type {
    display: block;
    font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--bg-action);
    margin-bottom: 3px;
}
.bg-neu .bgn-popup-title {
    margin: 0;
    font-size: 15.5px; font-weight: 600; line-height: 1.32;
    color: #fff;
}
.bg-neu .bgn-popup-value {
    flex: none;
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--bg-action);
    color: var(--bg-on-action);
    font-size: 14px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mitte: der Code und der Weg zum Shop -------------------------------- */
.bg-neu .bgn-popup-body { padding: 20px 18px 18px; }
.bg-neu .bgn-popup-brand {
    margin: 0 0 8px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--bg-text-3);
}

/* Der Code ist ein Knopf, kein Feld. Gestrichelt, weil das die einzige Stelle
   im Fenster ist, die die Abriss-Metapher der Karte fortfuehrt. */
.bg-neu .bgn-popup-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 2px dashed var(--bg-line-strong);
    border-radius: 9px;
    background: var(--bg-blue-soft);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background .15s ease;
}
.bg-neu .bgn-popup-code:hover { border-color: var(--bg-action); background: #e3edf6; }
.bg-neu .bgn-popup-code-value {
    font-size: 21px; font-weight: 800;
    letter-spacing: .06em;
    color: var(--bg-blue-deep);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
.bg-neu .bgn-popup-code-action {
    flex: none;
    font-size: 12.5px; font-weight: 700;
    color: var(--bg-action-text);
    white-space: nowrap;
}
.bg-neu .bgn-popup-code.is-copied {
    border-style: solid;
    border-color: var(--bg-action);
    background: #f2f9e9;
}
.bg-neu .bgn-popup-code.is-copied .bgn-popup-code-action::before {
    content: "✓ ";
}
.bg-neu .bgn-popup-hint {
    margin: 9px 0 0;
    font-size: 13px; line-height: 1.45;
    color: var(--bg-text-2);
}

.bg-neu .bgn-popup-button {
    display: block;
    margin-top: 16px;
    padding: 13px 18px;
    border-radius: 9px;
    background: var(--bg-action);
    color: var(--bg-on-action);
    font-size: 15.5px; font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease;
}
.bg-neu .bgn-popup-button:hover { background: var(--bg-action-hover); color: var(--bg-on-action); }

/* Fakten --------------------------------------------------------------- */
.bg-neu .bgn-popup-facts {
    margin: 0;
    padding: 4px 18px 0;
    list-style: none;
}
.bg-neu .bgn-popup-facts li {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 9px 0;
    border-top: 1px dashed var(--bg-line);
    margin: 0;
}
.bg-neu .bgn-popup-facts li::before { content: none; }   /* ReHub setzt Punkte vor li */
.bg-neu .bgn-popup-fact-name {
    font-size: 12px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--bg-text-3);
}
.bg-neu .bgn-popup-fact-value { font-size: 13.5px; line-height: 1.4; color: var(--bg-text); }
.bg-neu .bgn-popup-facts li.is-urgent .bgn-popup-fact-value { color: var(--bg-urgent); font-weight: 600; }

.bg-neu .bgn-popup-fineprint {
    margin: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--bg-line);
    background: var(--bg-paper);
    font-size: 11.5px; line-height: 1.45;
    color: var(--bg-text-3);
}

@media (max-width: 479px) {
    .bg-neu #pgwModal .pm-body { margin-top: 3vh; }
    .bg-neu .bgn-popup-head { padding: 16px 46px 16px 14px; gap: 11px; }
    .bg-neu .bgn-popup-logo { --bw: 84; --bh: 32; }
    .bg-neu .bgn-popup-body { padding: 16px 14px 14px; }
    .bg-neu .bgn-popup-code-value { font-size: 18px; }
    .bg-neu .bgn-popup-facts { padding-left: 14px; padding-right: 14px; }
    .bg-neu .bgn-popup-facts li { grid-template-columns: 78px 1fr; gap: 10px; }
    .bg-neu .bgn-popup-fineprint { padding-left: 14px; padding-right: 14px; }
}

/* --------------------------------------------------------------------------
   Kategorie-Kopfbereich
   Markup: bg_category_header_block() in rehub-blankchild/functions.php:1208ff
   (Hero, Zaehler, Einleitung, Unterkategorien, Highlight-Shops).

   Zur Spezifitaet: die alten Regeln stehen in einem <style>-Block, den
   bg_category_header_css() auf wp_head (Prio 10) ausgibt - also NACH diesem
   Stilblatt (wp_print_styles laeuft auf Prio 8). Bei gleicher Spezifitaet
   gewinnt der spaetere. Jede Regel hier braucht deshalb das .bg-neu davor,
   auch die fuer :hover.

   Das Orange (#ee6c04) steckte an vier Stellen: Zaehlerplaettchen, Verlauf des
   Ersatz-Heros, Rahmen der Shopkachel beim Ueberfahren und Fuellung der
   Unterkategorie-Pille beim Ueberfahren.
   -------------------------------------------------------------------------- */

/* Dieselbe Luft nach dem dunklen Kopfblock wie auf den Shopseiten. Die
   Kategorie hat ihren eigenen Brotkrumen-Behaelter, deshalb hier nochmal. */
.bg-neu .bg-cat-crumbs { margin: 22px 0 14px; }

.bg-neu .bg-cat-hero {
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    margin: 0 0 22px;
}
/* Ohne eigenes Bild: Verlauf in den Hausfarben statt Blau nach Orange. */
.bg-neu .bg-cat-hero--plain {
    background-image: linear-gradient(120deg, var(--bg-blue-deep) 0%, var(--bg-blue) 58%, var(--bg-blue-light) 100%);
}
.bg-neu .bg-cat-hero-inner { padding: 24px 26px; }
.bg-neu .bg-cat-hero-title {
    /* Gleiche Groesse und Staerke wie die H1 der Shopseite - es ist dieselbe
       Rolle, nur auf einem Foto. */
    font-size: clamp(25px, 2.4vw, 33px);
    font-weight: 700;
    letter-spacing: -.02em;
    text-shadow: 0 1px 10px rgba(9,17,26,.45);
}
/* Der Zaehler ist die belegte Zahl, dieselbe Rolle wie der Rabattwert auf der
   Karte - also dieselbe Form: gruene Flaeche, dunkle Schrift. Weiss auf Gruen
   hat nur 2,38:1 und faellt durch. */
.bg-neu .bg-cat-hero-count {
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--bg-action);
    color: var(--bg-on-action);
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bg-neu .bg-cat-intro {
    color: var(--bg-text-2);
    font-size: 15px; line-height: 1.65;
    margin: 0 0 24px;
}

/* Unterkategorien: dieselben Plaettchen wie "Nach Kategorie stoebern" auf der
   Startseite (.bgn-category) - es ist dieselbe Handlung. */
.bg-neu .bg-subcats { margin: 0 0 24px; }
.bg-neu .bg-subcat-tile {
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    color: var(--bg-text);
    font-size: 13.5px; font-weight: 500;
    box-shadow: none;
}
.bg-neu .bg-subcat-tile:hover {
    background: var(--bg-surface);
    border-color: var(--bg-line-strong);
    color: var(--bg-blue);
    transform: none;
    box-shadow: none;
}

/* Shopkacheln: Rahmen und Schatten wie bei jeder anderen Kachel im neuen
   Design. Das Anheben beim Ueberfahren faellt weg - die Karten der Startseite
   heben auch nicht, sie werden nur deutlicher. */
.bg-neu .bg-cat-highlights { margin: 0 0 24px; }
.bg-neu .bg-cat-shopcard {
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    color: var(--bg-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bg-neu .bg-cat-shopcard:hover {
    transform: none;
    border-color: var(--bg-line-strong);
    box-shadow: var(--bg-shadow);
}
/* Der Rahmen bringt font-size:0 mit (der alt-Text soll nicht sichtbar sein).
   Shops ohne Logodatei zeigen an derselben Stelle aber ihren NAMEN als Text -
   der braucht seine Schriftgroesse zurueck, sonst steht dort eine leere
   Kachel. */
.bg-neu .bg-cat-shopcard-fallback {
    color: var(--bg-text);
    font-size: 13px; line-height: 1.25;
    white-space: normal; text-align: center;
}
.bg-neu .bg-cat-shopcard-name { color: var(--bg-text-2); font-size: 12.5px; }
/* Die Logokacheln bekommen denselben Rahmen wie ueberall sonst (Abschnitt 2:
   .bgn-logo). Der erste Versuch war width/height statt max-* mit
   object-fit:contain - der hat NICHTS geaendert, weil contain die LEINWAND
   einpasst und nicht die Tinte: die Dateien sind 160x120 mit eingebranntem
   weissem Rand, die Leinwand fuellte das Feld also schon vorher.
   Die Masse der Tinte liefert neu/inc/kategorie-logos.php serverseitig nach. */
.bg-neu .bg-cat-shopcard-logo { --bw: 112; --bh: 44; }
.bg-neu .bg-cat-shopcard { padding: 14px 8px 12px; gap: 10px; }


/* --- Mobil: Burgerleiste und Ausklappmenue (21.09.2026) ------------------
   Die Leiste mit Burger, Logo und Suchsymbol sowie das Ausklappmenue stellt
   ReHub (custom.js baut #slide-menu-mobile aus dem Hauptmenue, haengt das
   Logo-Panel #rhmobtoppnl davor und einen Schliessen-Knopf ans Ende). Die
   Farben kommen aus Theme-Optionen als Inline-CSS mit !important, deshalb
   hier ebenfalls !important. Alles unter .bg-neu, die Live-Seite bleibt. */
.bg-neu .bgn-navbar .responsive_nav_wrap { background: var(--bg-blue-deep) !important; }
.bg-neu .dl-menuwrapper button svg line { stroke: #fff; }
.bg-neu #mobile-menu-icons .icon-search-onclick i { color: #fff; }

.bg-neu #slide-menu-mobile ul.off-canvas {
    width: min(320px, 88vw);
    background-color: var(--bg-surface);
    box-shadow: 12px 0 34px rgba(11, 22, 36, .28);
}
/* Kopf des Menues: Kopfzeilenblau statt des helleren Theme-Blaus, Logo links */
.bg-neu #slide-menu-mobile #mobtopheaderpnl { border-bottom: 0 !important; }
.bg-neu #slide-menu-mobile #rhmobtoppnl {
    background-color: var(--bg-blue-deep) !important;
    padding: 22px 20px 20px !important;
}
.bg-neu #slide-menu-mobile #rhmobtoppnl .text-center { text-align: left; }
.bg-neu #slide-menu-mobile #mobpanelimg { height: 40px; width: auto; }
/* Eintraege */
.bg-neu #slide-menu-mobile ul li.menu-item { border-bottom: 1px solid var(--bg-line); }
.bg-neu #slide-menu-mobile ul li.menu-item > a {
    padding: 15px 20px;
    font-size: 15.5px; font-weight: 600; line-height: 1.3 !important;
    color: var(--bg-text);
}
.bg-neu #slide-menu-mobile ul li.menu-item > a i.rhicon { display: none; }   /* das einzelne Warenkorb-Symbol */
.bg-neu #slide-menu-mobile ul li.current-menu-item > a,
.bg-neu #slide-menu-mobile ul li.current_page_item > a {
    color: var(--bg-blue);
    box-shadow: inset 3px 0 0 var(--bg-action);
}
/* 50px, weil ReHub dem Link daneben calc(100% - 50px) gibt - ein Pixel mehr und der Pfeil rutscht in die naechste Zeile */
.bg-neu #slide-menu-mobile ul span.submenu-toggle { width: 50px; height: 50px; line-height: 50px; color: var(--bg-blue); }
.bg-neu #slide-menu-mobile ul span.submenu-toggle .rhicon { font-size: 13px; line-height: 50px; }
/* Untermenue (Kategorien): Symbol in Aktionsgruen, Zurueck-Zeile in Kopfzeilenblau */
.bg-neu #slide-menu-mobile ul ul.sub-menu { background-color: var(--bg-surface); }
.bg-neu #slide-menu-mobile ul ul.sub-menu li.menu-item > a { font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 12px; }
.bg-neu #slide-menu-mobile ul ul.sub-menu .bg-cat-i { display: inline-flex; flex: none; width: 22px; color: var(--bg-action); }
.bg-neu #slide-menu-mobile ul ul.sub-menu .bg-cat-svg { width: 20px; height: 20px; }
.bg-neu #slide-menu-mobile ul li.back-mb span {
    background-color: var(--bg-blue-deep); color: #fff;
    padding: 17px 20px; font-size: 14.5px; font-weight: 600;
}
/* Schliessen: oben rechts ueber dem blauen Kopf statt als Kreis unter den Eintraegen */
.bg-neu #slide-menu-mobile ul > li.close-menu {
    position: absolute !important; top: 12px; right: 12px;
    margin: 0 !important; width: 36px; height: 36px; line-height: 36px;
    z-index: 2;
}
.bg-neu #slide-menu-mobile ul > li.close-menu i {
    width: 36px; height: 36px; line-height: 36px; font-size: 15px;
    background: rgba(255,255,255,.14) !important; color: #fff !important;
    box-shadow: none !important;
}

/* ==========================================================================
   9. Fusszeile
   Markup: neu/footer.php, geladen ueber die Weiche rehub-blankchild/footer.php
   (in der Vorschau die neue, sonst die Elternvorlage).

   Kopf und Fuss klammern die Seite in derselben Farbe (--bg-blue-deep). Drei
   Baender von oben nach unten: Provisionshinweis (Abschnitt 3, .bgn-disclosure),
   Hauptteil mit Marke und drei Listen, Schlusszeile. Die Listen sind ReHubs
   Widget-Bereiche - deren Markup (.widget .title, .widget_recent_entries,
   .wpsm-one-half) bringt eigene Regeln mit, die hier neutralisiert werden.
   ========================================================================== */
.bg-neu .bgn-footer {
    background: var(--bg-blue-deep);
    color: #a9bccd;
    margin: 0;
}
/* Dieselbe Kante wie die Abschnitte der Startseite und der Provisionshinweis */
.bg-neu .bgn-footer-inner {
    padding-left:  max(18px, calc((100% - 1200px) / 2));
    padding-right: max(18px, calc((100% - 1200px) / 2));
}

/* --- Hauptteil: Marke | Gutscheine | Redaktion | Links --- */
.bg-neu .bgn-footer-main {
    padding: 40px 0 36px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.bg-neu .bgn-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: 32px 40px;
}
.bg-neu .bgn-footer-logo { display: inline-block; line-height: 0; }
.bg-neu .bgn-footer-logo img { width: 200px; height: auto; display: block; }
.bg-neu .bgn-footer-claim {
    margin: 16px 0 0; max-width: 36em;
    font-size: 14px; line-height: 1.6; color: #a9bccd;
}
/* Kennzahlen wie in der Vertrauensleiste, nur auf dunklem Grund. Untereinander,
   nicht nebeneinander: in der 1,7fr-Spalte (~430px) brach die dritte Zahl allein
   in die zweite Zeile - zwei oben, eine unten sieht nach Zufall aus. */
.bg-neu .bgn-footer-facts {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 13.5px; color: #a9bccd;
}
.bg-neu .bgn-footer-facts li { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; }
.bg-neu .bgn-footer-facts li::before { content: none; }
.bg-neu .bgn-footer-facts b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.bg-neu .bgn-footer-facts svg { width: 15px; height: 15px; flex: none; color: var(--bg-action); }

/* Spaltentitel: ReHub gibt .widget .title eine graue Unterlinie plus einen
   75px-Strich per ::after - beides weg, stattdessen Kapitaelchen-Zeile */
.bg-neu .bgn-footer-col .widget { margin: 0; padding: 0; overflow: visible; clear: none; }
.bg-neu .bgn-footer-col .widget .title,
.bg-neu .bgn-footer-col .widget h2,
.bg-neu .bgn-footer-title {
    margin: 0 0 14px; padding: 0; border: 0;
    font-size: 12.5px; font-weight: 700; line-height: 1.4;
    letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.bg-neu .bgn-footer-col .widget .title::after { content: none; }
/* Das Textwidget "Links" steckt in einer wpsm-one-half (48 % breit) und
   endet mit einem leeren Absatz */
.bg-neu .bgn-footer-col .wpsm-one-half { width: auto; float: none; margin: 0; }
.bg-neu .bgn-footer-col .textwidget p:empty { display: none; }
.bg-neu .bgn-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bg-neu .bgn-footer-col li { margin: 0 0 9px; padding: 0; font-size: 14.5px; line-height: 1.45; }
.bg-neu .bgn-footer-col li::before { content: none; }
.bg-neu .bgn-footer-col li a { color: #dfe8f1; text-decoration: none; }
.bg-neu .bgn-footer-col li a:hover,
.bg-neu .bgn-footer-col li a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Schlusszeile --- */
.bg-neu .bgn-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 14px 0;
    font-size: 12.5px; line-height: 1.5; color: #93a8bc;
}
.bg-neu .bgn-footer-bottom .bgn-footer-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
}
.bg-neu .bgn-footer-copy { color: #cbdaea; }
.bg-neu .bgn-footer-cookie { margin-left: auto; }
.bg-neu .bgn-footer-bottom a,
.bg-neu .bgn-footer-cookie a,
.bg-neu .bgn-footer-cookie button {
    color: #9dc4ea; text-decoration: underline; text-underline-offset: 3px;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; cursor: pointer;
}
.bg-neu .bgn-footer-bottom a:hover,
.bg-neu .bgn-footer-cookie a:hover,
.bg-neu .bgn-footer-cookie button:hover { color: #fff; }

/* --- Schmal --- */
@media (max-width: 999px) {
    .bg-neu .bgn-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
    .bg-neu .bgn-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
    .bg-neu .bgn-footer-main { padding: 28px 0 26px; }
    .bg-neu .bgn-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .bg-neu .bgn-footer-bottom .bgn-footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bg-neu .bgn-footer-cookie { margin-left: 0; }
}

/* ==========================================================================
   10. Seiten, Suche, Redaktion
   Markup: rehub-theme/page.php (Impressum, Datenschutz, Kontakt, Geld sparen),
   rehub-theme/search.php, rehub-blankchild/redaktion.php (Team + Profile).
   Die Vorlagen bleiben unangetastet - alt sind nur Farben und Formen, und die
   liegen in Reichweite der Kaskade, wie beim Shopseiten-Rahmen (Abschnitt 5).
   ========================================================================== */

/* --- Inhaltskarte der Seiten ---
   ReHub: body:not(.noinnerpadding) .rh-post-wrapper { #fff, 1px #e3e3e3,
   25px, Schatten }. Gleiche Kante wie jede andere Karte der Seite. */
.bg-neu.page .rh-post-wrapper,
.bg-neu.blog .rh-post-wrapper {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    padding: 30px 34px 34px;
}
.bg-neu.page .rh-post-wrapper .title { margin: 0 0 18px; padding: 0; border: 0; }
.bg-neu.page .rh-post-wrapper .title::after { content: none; }

/* Dieselbe H1 wie auf der Shopseite (Abschnitt 5), auf Seiten, in der Suche
   und auf der Redaktionsseite - ein Seitentitel, nicht drei. */
.bg-neu.page h1.entry-title,
.bg-neu .redaktion-h1,
.bg-neu.search .wpsm-cat-title .font140 {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--bg-text);
    margin: 0;
    text-wrap: balance;
}

/* Fliesstext: 15px statt ReHubs 14, Zeilen mit Luft, Verweise im Identitaetsblau */
.bg-neu.page .rh-post-wrapper { font-size: 15px; line-height: 1.65; color: var(--bg-text); }
.bg-neu.page .rh-post-wrapper p { margin: 0 0 16px; }
.bg-neu.page .rh-post-wrapper h2 { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--bg-text); margin: 28px 0 10px; }
.bg-neu.page .rh-post-wrapper h3 { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--bg-text); margin: 22px 0 8px; }
.bg-neu.page .rh-post-wrapper a:not(.bgn-btn):not(.btn_offer_block) { color: var(--bg-blue); text-decoration: underline; text-underline-offset: 2px; }
.bg-neu.page .rh-post-wrapper ul,
.bg-neu.page .rh-post-wrapper ol { margin: 0 0 16px; padding-left: 22px; }
.bg-neu.page .rh-post-wrapper li { margin: 0 0 6px; }
/* Zwischenueberschriften als fetter Absatz (klassischer Editor, z. B.
   /geld-sparen/): kein h2/h3 im Markup, nur <p><strong>...</strong></p>.
   Bekommen Abstand und Groesse einer Ueberschrift - fuer die Suchmaschine
   bleiben es Absaetze, das kann nur der Editor beheben. */
.bg-neu.page .rh-post-wrapper p:has(> strong:only-child) {
    margin: 26px 0 8px;
    font-size: 17px; line-height: 1.35;
    color: var(--bg-text);
}
.bg-neu.page .rh-post-wrapper p:has(> strong:only-child) strong { font-weight: 600; }
.bg-neu.page .rh-post-wrapper em { color: var(--bg-text-2); }

/* Tabellen im Fliesstext (z. B. /geld-sparen/, 22.09.2026): nackter <table>-Tag
   aus dem klassischen Editor, ohne thead/th - die Kopfzeile ist eine erste
   Zeile mit <strong>. ReHub stylt nur .wp-block-table, live sah die Tabelle
   deshalb nach nichts aus. Kopfzeile per :has() erkannt. */
.bg-neu.page .rh-post-wrapper table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    margin: 6px 0 22px;
    border: 1px solid var(--bg-line); border-radius: var(--bg-radius);
    overflow: hidden;
    font-size: 14.5px; line-height: 1.5;
}
.bg-neu.page .rh-post-wrapper table th,
.bg-neu.page .rh-post-wrapper table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bg-line);
    text-align: left; vertical-align: top;
    background: var(--bg-surface);
}
.bg-neu.page .rh-post-wrapper table th,
.bg-neu.page .rh-post-wrapper table tr:first-child:has(td > strong) td {
    background: var(--bg-surface-2);
    color: var(--bg-text); font-weight: 600;
}
.bg-neu.page .rh-post-wrapper table tr:first-child:has(td > strong) td strong { font-weight: 600; }
.bg-neu.page .rh-post-wrapper table tbody tr:nth-child(even) td { background: var(--bg-paper); }
.bg-neu.page .rh-post-wrapper table tr:last-child td,
.bg-neu.page .rh-post-wrapper table tr:last-child th { border-bottom: 0; }
/* Summenzeile ("Endpreis") ist meist fett gesetzt - Haarlinie darueber staerker */
.bg-neu.page .rh-post-wrapper table tr:last-child:has(td > strong) td { border-top: 1px solid var(--bg-line-strong); }
@media (max-width: 639px) {
    .bg-neu.page .rh-post-wrapper table { display: block; overflow-x: auto; font-size: 13.5px; }
    .bg-neu.page .rh-post-wrapper table th,
    .bg-neu.page .rh-post-wrapper table td { padding: 8px 10px; white-space: nowrap; }
}

/* --- Randspalte der Seiten: gleiche Form wie die Kaesten der Shopseite ---
   ReHub gibt .widget .title eine graue Unterlinie plus einen 75px-Strich per
   ::after in der Akzentfarbe - das ist das letzte Orange auf diesen Seiten. */
.bg-neu .sidebar .widget {
    background: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--bg-radius);
    box-shadow: none;
    padding: 16px;
    margin: 0 0 16px;
}
.bg-neu .sidebar .widget .title,
.bg-neu .sidebar .widget h2,
.bg-neu .sidebar .widget h3 {
    font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--bg-text);
    margin: 0 0 12px; padding: 0; border: 0;
}
.bg-neu .sidebar .widget .title::after { content: none; }
/* Kasten im Kasten ("Beliebte Shops" steckt in einer rh-cartbox): innen nackt */
.bg-neu .sidebar .widget .rh-cartbox { background: none; border: 0; box-shadow: none; padding: 0; }

/* --- Suche --- */
.bg-neu.search .wpsm-cat-title { margin: 4px 0 20px; padding: 0; border: 0; }
.bg-neu.search .wpsm-cat-title::after,
.bg-neu.search .wpsm-cat-title::before { content: none; }

/* --- Redaktion: Team und Profile ---
   Die Regeln stehen in rehub-blankchild/style.css mit eigenen Grautoenen und
   Orange als Akzent. Hier nur auf die Token gezogen; der Aufbau bleibt. */
.bg-neu .redaktion-breadcrumb { color: var(--bg-text-3); font-size: 12.5px; }
.bg-neu .redaktion-intro { color: var(--bg-text-2); font-size: 15px; line-height: 1.6; }
.bg-neu .redaktion-card,
.bg-neu .redaktion-aside-card,
.bg-neu .redaktion-shop { border-color: var(--bg-line); border-radius: var(--bg-radius); }
.bg-neu .redaktion-card:hover,
.bg-neu .redaktion-shop:hover { box-shadow: var(--bg-shadow); border-color: var(--bg-line-strong); }
.bg-neu .redaktion-card-photo,
.bg-neu .redaktion-aside-avatar { border-color: var(--bg-surface-2); }
.bg-neu .redaktion-card-name,
.bg-neu .redaktion-aside-name,
.bg-neu .redaktion-profile-name { color: var(--bg-text); }
.bg-neu .redaktion-card-pos,
.bg-neu .redaktion-aside-pos,
.bg-neu .redaktion-profile-pos,
.bg-neu .redaktion-profile-stats { color: var(--bg-text-2); }
.bg-neu .redaktion-card-link,
.bg-neu .redaktion-aside-all,
.bg-neu .redaktion-back a { color: var(--bg-blue); }
.bg-neu .redaktion-trust,
.bg-neu .redaktion-profile-head { background: var(--bg-paper); border: 1px solid var(--bg-line); border-radius: var(--bg-radius); }
.bg-neu .redaktion-trust li,
.bg-neu .redaktion-profile-bio,
.bg-neu .redaktion-tip-text { color: var(--bg-text); }
.bg-neu .redaktion-trust h2,
.bg-neu .redaktion-shops-title { font-size: 18px; font-weight: 500; color: var(--bg-text); padding-bottom: 0; }
/* Der kurze Strich unter Ueberschriften war die Akzentfarbe - faellt weg,
   auf der Shopseite tragen Ueberschriften auch keinen. */
.bg-neu .redaktion-trust h2::after,
.bg-neu .redaktion-shops-title::after { content: none; }
.bg-neu .redaktion-tip { background: var(--bg-blue-soft); border-left-color: var(--bg-blue); border-radius: var(--bg-radius); }
.bg-neu .redaktion-tip-head { color: var(--bg-blue); }

/* --- Formular (HappyForms auf /kontakt/) --- */
.bg-neu .happyforms-form .happyforms-part__label .label { font-size: 14px; font-weight: 600; color: var(--bg-text); }
.bg-neu .happyforms-form input[type="text"],
.bg-neu .happyforms-form input[type="email"],
.bg-neu .happyforms-form textarea {
    border: 1px solid var(--bg-line-strong);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit; font-size: 15px;
    color: var(--bg-text);
    background: var(--bg-surface);
    box-shadow: none;
}
.bg-neu .happyforms-form input[type="text"]:focus,
.bg-neu .happyforms-form input[type="email"]:focus,
.bg-neu .happyforms-form textarea:focus {
    border-color: var(--bg-blue);
    outline: 0;
    box-shadow: 0 0 0 3px var(--bg-blue-soft);
}
.bg-neu .happyforms-form .happyforms-submit {
    background: var(--bg-blue);
    color: #fff;
    border: 0; border-radius: 8px;
    padding: 11px 22px;
    font-weight: 600; font-size: 15px;
    cursor: pointer;
}
.bg-neu .happyforms-form .happyforms-submit:hover { background: var(--bg-blue-deep); }

@media (max-width: 639px) {
    .bg-neu.page .rh-post-wrapper,
    .bg-neu.blog .rh-post-wrapper { padding: 20px 16px 22px; }
}

/* ==========================================================================
   11. Shop-Uebersicht A-Z und Kategorien-Uebersicht
   /shops/ (Seite 342): GreenShift-Taxonomiebox (gspb-taxonomybox) mit
   Buchstabenleiste. Ihre Regeln kommen als Inline-<style> mit der Block-ID
   davor (#gspb_id-gsbp-6638f36c-24a6 ...), Spezifitaet 1,3,1 - das schlaegt
   keine Klassenkette. Deshalb tragen genau die Eigenschaften, die mit diesen
   ID-Regeln kollidieren, ein !important; die ID selbst steht hier nicht, damit
   ein neu gesetzter Block die Gestaltung nicht stumm verliert.
   /kategorien/ (Seite 239502): Shortcode aus rehub-blankchild/functions.php mit
   eigenem <style> im Rumpf (.bg-kathead, .bg-katcard, .bg-katseo). Orange steckt
   im Verlauf, in der Zaehl-Pille und im Chip-Hover.
   ========================================================================== */

/* --- A-Z: Ueberschrift mit Untertitel ---
   Der GreenShift-Block setzt Farbe (var(--rehub-sec-color)), Groesse und die
   Untertitelfarbe (#000 !important) mit seiner Block-ID - daher !important,
   nur fuer die H1. Die Black-Friday-Seite hat viele gspb_heading, die bleiben. */
.bg-neu h1.gspb_heading {
    font-size: clamp(24px, 2.2vw, 30px) !important;
    line-height: 1.2; font-weight: 500; letter-spacing: -.01em;
    color: var(--bg-text) !important;
    /* nur oben/unten: ReHub gibt den Kindern von .fullgutenberg .post unter
       768px 15px Seitenrand - "margin: 0" hatte den auf dem Telefon gekillt */
    margin-top: 22px !important;   /* dieselbe Luft unter dem Kopf wie die Brotkrume der Shopseite */
    margin-bottom: 22px !important;
}
.bg-neu h1.gspb_heading .gspb_heading_subtitle {
    display: block; margin-top: 8px !important;
    font-size: 14.5px !important; line-height: 1.6 !important; font-weight: 400; letter-spacing: 0;
    color: var(--bg-text-2) !important;
}

/* --- A-Z: Buchstabenleiste - dieselbe Form wie die Filterreiter (Abschnitt 5) --- */
.bg-neu .alphabet-filter .list-inline {
    background: var(--bg-surface-2);
    border: 1px solid var(--bg-line);
    border-radius: 11px;
    padding: 6px 8px;
    display: flex; flex-wrap: wrap; gap: 2px;
}
.bg-neu .alphabet-filter .list-inline > li { padding: 0; margin: 0; }
.bg-neu .alphabet-filter .list-inline a {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent !important;
    color: var(--bg-text-2) !important;
    font-size: 14px !important; font-weight: 600;
    transition: background-color .15s, color .15s;
}
.bg-neu .alphabet-filter .list-inline a:hover,
.bg-neu .alphabet-filter .list-inline a:focus-visible {
    background: var(--bg-blue) !important;
    color: #fff !important;
}
.bg-neu .alphabet-filter .head-wrapper { margin-bottom: 22px; }

/* --- A-Z: Buchstabenbloecke --- */
.bg-neu .alphabet-filter .single-letter {
    border-bottom: 0;
    margin-bottom: 26px;
}
.bg-neu .alphabet-filter .single-letter .letter_tag {
    font-size: 20px !important; font-weight: 600; line-height: 1.2;
    color: var(--bg-text) !important;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-line);
}
.bg-neu .alphabet-filter .return_to_letters span svg { fill: var(--bg-text-3); }
.bg-neu .alphabet-filter .return_to_letters:hover span svg { fill: var(--bg-blue); }
.bg-neu .alphabet-filter .tax-wrap { gap: 10px; margin-bottom: 0; }
.bg-neu .alphabet-filter a.single-letter-link {
    background: var(--bg-surface) !important;
    border: 1px solid var(--bg-line);
    border-radius: 8px;
    box-shadow: none !important;
    padding: 9px 12px !important;
    font-size: 14.5px !important; line-height: 1.3;
    color: var(--bg-text) !important;
    justify-content: flex-start;
    transition: border-color .15s, color .15s;
}
.bg-neu .alphabet-filter a.single-letter-link:hover,
.bg-neu .alphabet-filter a.single-letter-link:focus-visible {
    border-color: var(--bg-blue);
    color: var(--bg-blue) !important;
}
.bg-neu .alphabet-filter .count { color: var(--bg-text-3) !important; }
/* Telefon: GreenShift stellt das Raster auf eine Spalte (mit Block-ID) - bei
   390px passen zwei, und 1.778 Kacheln untereinander sind ein langer Weg. */
@media (max-width: 639px) {
    .bg-neu .alphabet-filter .tax-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .bg-neu .alphabet-filter a.single-letter-link { padding: 8px 10px !important; font-size: 13.5px !important; }
}

/* --- Kategorien: Kopf und Karten ---
   Der Verlauf lief bis ins Orange (Stop bei 160-165 %, also nur ein Hauch am
   rechten Rand) - jetzt rein blau, wie die Kopfzeile. */
.bg-neu .bg-kathead,
.bg-neu .bg-katcard { border-radius: var(--bg-radius); }
.bg-neu .bg-kathead--plain,
.bg-neu .bg-katcard-head--plain {
    background-image: linear-gradient(120deg, var(--bg-blue-deep) 0%, var(--bg-blue) 100%);
}
.bg-neu .bg-katcard {
    border: 1px solid var(--bg-line);
    box-shadow: none;
}
.bg-neu .bg-katcard:hover {
    transform: none;
    box-shadow: var(--bg-shadow);
    border-color: var(--bg-line-strong);
}
.bg-neu .bg-katcard-icon { color: var(--bg-blue); border-radius: 9px; }
/* Zaehl-Pille: war Orange auf Blau - jetzt eine helle Pille auf dem Verlauf,
   so wie die Plakette im Kopf (.bg-kathead-badge) */
.bg-neu .bg-katcard-count {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
}
.bg-neu .bg-katcard-subs a {
    color: var(--bg-text);
    background: var(--bg-surface-2);
    border-color: var(--bg-line);
    border-radius: 999px;
}
.bg-neu .bg-katcard-subs a:hover,
.bg-neu .bg-katcard-subs a:focus-visible {
    background: var(--bg-blue);
    border-color: var(--bg-blue);
    color: #fff;
}
/* SEO-Block unter den Karten: Shop-Chips und FAQ-Aufklapper */
.bg-neu .bg-katseo .bg-shop-list a { background: var(--bg-surface-2); border-color: var(--bg-line); color: var(--bg-text); }
.bg-neu .bg-katseo .bg-shop-list a:hover { background: var(--bg-blue); border-color: var(--bg-blue); color: #fff; }
.bg-neu .bg-katseo .bg-faq { border-color: var(--bg-line); border-radius: var(--bg-radius); }
.bg-neu .bg-katseo .bg-faq > summary::after { color: var(--bg-blue); }
.bg-neu .bg-katseo .bg-faq .bg-faq-a { color: var(--bg-text); }

/* ==========================================================================
   12. Testberichte (Hub /testberichte/ und Einzelberichte)
   Markup: rehub-blankchild/testberichte.php + Seiteninhalt; das Stilblatt
   bg-reviews/css/bg-review.css wird inline in die Seite geschrieben und
   definiert seine Farben als eigene Token auf .bgr (--bgr-orange, --bgr-blue,
   --bgr-ink ...). Statt 16 Fundstellen einzeln zu ueberschreiben, werden die
   Token hier umgebogen; die Sterne bleiben gold, das ist Bewertungssprache.
   ========================================================================== */
.bg-neu .bgr {
    --bgr-orange:      var(--bg-blue);        /* Verweise, Kicker, Balken, Kanten */
    --bgr-orange-dark: var(--bg-blue-deep);
    --bgr-orange-soft: var(--bg-blue-soft);
    --bgr-blue:        var(--bg-blue);
    --bgr-blue-dark:   var(--bg-blue-deep);
    --bgr-ink:         var(--bg-text);
    --bgr-muted:       var(--bg-text-2);
    --bgr-line:        var(--bg-line);
    --bgr-bg-soft:     var(--bg-paper);
    --bgr-radius:      var(--bg-radius);
    --bgr-shadow:      none;
}
/* Der Knopf "Zum Shop" ist eine Handlung - Handlungsgruen wie ueberall */
.bg-neu .bgr-btn { background: var(--bg-action); color: var(--bg-on-action); }
.bg-neu .bgr-btn:hover { background: var(--bg-action-hover); color: var(--bg-on-action); }
/* Kasten um den Knopf und Tipp-Box: statt Orange-Verlauf und Gelbrand die
   weiche Blauflaeche mit Haarlinie */
.bg-neu .bgr-cta { background: var(--bg-blue-soft); border-color: var(--bg-line-strong); }
.bg-neu .bgr-tip { border-color: var(--bg-line-strong); }
/* Messbalken: Verlauf lief ins Gelb (#ff9800) */
.bg-neu .bgr-bar span { background: linear-gradient(90deg, var(--bg-blue), var(--bg-blue-light)); }

/* --- Telefon: Suchfeld oben weg, Ueberschriften kleiner (22.09.2026, nach dem
   Schalter) ------------------------------------------------------------------
   Die Lupe in der Burgerleiste oeffnet ReHubs Splash-Suche (#rhSplashSearch mit
   Ajax Search Pro) - das Suchfeld darueber war damit doppelt und kostete 62px
   ueber dem Logo. Die H1 der Shopseite brach mit 24px zweizeilig um ("tink
   Rabattcode - September 2026") und nahm mit der H2 darunter die halbe erste
   Bildschirmseite. */
@media (max-width: 767px) {
    .bg-neu .bgn-header-row { display: none; }
}
@media (max-width: 639px) {
    .bg-neu .woo-tax-name h1 { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
    .bg-neu .woo-tax-name h2 { font-size: 16px; line-height: 1.35; margin: 16px 0 12px; }
    .bg-neu .bg_breadcrumb { margin-top: 14px; }
}

/* --- Suchfeld: Form aus dem Entwurf (22.09.2026, nach dem Schalter) ---
   Der Entwurf (Artefakt 79d192a7) hatte 8px Rundung, eine leichtere Flaeche und
   den gruenen Knopf als kleines Quadrat IM Feld - 5px Abstand, 6px Rundung -
   statt buendig ueber die volle Hoehe. Der User hat es so in Erinnerung, und
   es stimmt: die buendige Fassung war meine Abweichung. Gilt fuer Kopfzeile
   und Splash-Suche gleichermassen. */
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_w,
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_m,
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_w_container,
.bg-neu :is(.bgn-search, #rhSplashSearch) .asp_main_container { border-radius: 8px !important; }
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox {
    border-radius: 8px !important;
    padding: 0 5px 0 16px !important;
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.14) !important;
    align-items: center !important;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .promagnifier {
    width: 34px !important; min-width: 34px !important; max-width: 34px !important;
    height: 34px !important;
    align-self: center !important;
    border-radius: 6px !important;
    /* ASP legt einen Schatten (-1px 1px ...) und einen Rahmen um die Lupe -
       sah aus, als laege der Knopf auf einer zweiten, dunkleren Flaeche. */
    border: 0 !important; box-shadow: none !important; outline: 0 !important;
}
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .promagnifier .innericon { background: none !important; box-shadow: none !important; }
/* 14,5px war dem User zu klein - die Vorschlaege der Liste stehen in 15px */
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .proinput input.orig,
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox .proinput input.autocomplete { font-size: 15.5px !important; }
.bg-neu :is(.bgn-search, #rhSplashSearch) .probox:focus-within {
    background: rgba(255,255,255,.11) !important;
    border-color: var(--bg-action) !important;
    box-shadow: 0 0 0 2px rgba(124,185,44,.35) !important;
}

/* --- Ergebnisliste (Ajax Search Pro, Layout "vertical") ---
   ASP schreibt seine Optik als 30-KB-Inline-Block mit Instanz-Selektoren
   (#ajaxsearchpro1_1_res, .asp_r_1_1) - deshalb !important, wie beim Feld.
   Markup: div.asp_w.asp_r.vertical > .results > .resdrg > .item
   (.asp_image + .asp_content > h3 > a, Beschreibung als Text, span.highlighted)
   und p.showmore > a.asp_showmore. Vorher: weisser Kasten mit Trennlinien,
   Treffer rot markiert - Rot heisst auf dieser Seite "laeuft ab". */
.bg-neu div.asp_w.asp_r.vertical {
    background: var(--bg-surface) !important;
    border: 1px solid var(--bg-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(21,32,43,.05), 0 22px 44px -18px rgba(21,32,43,.35) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}
.bg-neu div.asp_w.asp_r.vertical .results .item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
}
.bg-neu div.asp_w.asp_r.vertical .results .item::after { display: none !important; }
.bg-neu div.asp_w.asp_r.vertical .results .item.hovered,
.bg-neu div.asp_w.asp_r.vertical .results .item:hover { background: var(--bg-surface-2) !important; }
/* Shoplogo: derselbe Rahmen wie die Logokacheln (Abschnitt 2). Der Kasten
   haengt an denselben Selektoren wie .bgn-logo (Tinte einpassen per
   --iw/--ih aus logo-passt.js, das auch die nachgeladenen Treffer misst);
   ASPs eigene Masse (float, width/height, img 100%) werden hier ueberstimmt.
   Vorher: 72x44 mit contain - die Datei bringt ihren weissen Rand mit, die
   Marke war winzig. */
.bg-neu div.asp_w.asp_r .asp_image {
    --bw: 84; --bh: 42;
    width: calc(var(--bw) * 1px) !important; height: calc(var(--bh) * 1px) !important;
    float: none !important; flex: none !important;
    margin: 0 12px 0 0 !important; padding: 5px 6px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important; box-sizing: content-box !important;
    border: 1px solid var(--bg-line) !important; border-radius: 8px !important;
    background: #fff !important; background-image: none !important;
}
.bg-neu div.asp_w.asp_r.vertical .results .item .asp_content,
.bg-neu div.asp_w.asp_r.vertical .results .item div.asp_content {
    padding: 2px 0 0 !important; height: auto !important;
    font-size: 13px !important; line-height: 1.4 !important; color: var(--bg-text-2) !important;
    font-family: inherit !important;
}
.bg-neu div.asp_w.asp_r.vertical .results .item .asp_content h3,
.bg-neu div.asp_w.asp_r.vertical .results .item .asp_content h3 a,
.bg-neu div.asp_w.asp_r.vertical .results .item .asp_content h3 a:hover {
    font-family: inherit !important;
    font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important;
    color: var(--bg-text) !important; text-decoration: none !important;
}
.bg-neu div.asp_w.asp_r.vertical .results .item .asp_content h3 a:hover { color: var(--bg-blue) !important; }
.bg-neu div.asp_w.asp_r.vertical .results .item div.etc { margin: 0 !important; }
.bg-neu div.asp_w.asp_r.vertical span.highlighted {
    color: var(--bg-blue) !important;
    background: transparent !important;
    font-weight: 700 !important;
}
.bg-neu div.asp_w.asp_r.vertical p.showmore { padding: 8px 0 4px !important; }
.bg-neu div.asp_w.asp_r.vertical p.showmore a,
.bg-neu div.asp_w.asp_r.vertical p.showmore a span {
    color: var(--bg-blue) !important;
    font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important;
}

/* --- Splash-Suche (Lupe in der Burgerleiste, ReHub #rhSplashSearch) ---
   ReHub legt einen schwarzen Schleier ueber die Seite und stellt darin die
   zweite ASP-Instanz; Feld und Liste bekommen dieselbe Form wie im Kopf. */
.bg-neu .search-header-contents {
    background: rgba(27,47,68,.94) !important;
    padding: 18px 16px !important;
    text-align: left !important;
}
.bg-neu .search-header-contents .asp_w_container {
    max-width: 640px;
    margin: 0 auto !important;
    padding-right: 54px !important;   /* Platz fuer den Schliessen-Knopf rechts */
}
.bg-neu #close-src-splash { margin: 12px 14px 0 0 !important; }
.bg-neu #close-src-splash .rhicon {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.bg-neu .search-header-contents p.asp-try { display: none !important; }