/*
 * Boni.tv – Design-Auffrischung 2026, gilt für alle Seiten.
 * Eingebunden in templates/header.tpl. Shopseiten laden zusätzlich css/shop-2026.css.
 * Reine Optik: keine Klassen, IDs oder Abläufe der bestehenden Seite werden ersetzt.
 * Schrift: Open Sans, selbst gehostet unter /css/woff/ (kein Google).
 */

:root {
    --bt-rot: #ac0e00;
    --bt-rot-2: #ac4700;
    --bt-verlauf: linear-gradient(#ac0e00, #ac4700);
    --bt-text: #1d1d1b; /* Fließtext und alle dunklen Texte, wie Shopnamen und Pillen */
    --bt-text-leise: #6e5252;
    --bt-dunkel: #1d1d1b;
    --bt-gelb: #f7eb7e;
    /* Linien und helle Flächen: helles Grau (früher rosa #f0e4e4 / #fbf4f4). Dasselbe Grau wie die Gutschein-Pillen. */
    --bt-linie: #e6e4e1;
    --bt-flaeche: #f1f0ee;
    /* Shoplisten (Entwurf "Anthrazit"): Rot nur noch für Logo, Überschriften und Knöpfe */
    --bt-name: #1d1d1b;
    --bt-stern: var(--bt-rot); /* Sterne auf hellem Grund; im dunklen Titelband gelb (Abschnitt Shoplisten) */
    --bt-stern-leer: #e7e3dd;
    --bt-pill-cashback-bg: #fff;
    --bt-pill-cashback-text: var(--bt-name); /* dunkle Schrift, Weiß wäre auf dem hellen Grau kaum lesbar */
    --bt-pill-gutschein-bg: #fff;
    --bt-schatten: 0 2px 4px rgba(49, 0, 0, .05), 0 16px 40px rgba(49, 0, 0, .10);
    --bt-radius: 20px;
}

/* Seitenbreite: ab 1400 px Fensterbreite 1320 px statt Bootstraps 1170 px (wie Bootstrap 5), für alle Seiten.
   Der Kopf hat im alten Theme zusätzlich max-width: 1170px (theme_critical.css). */
@media (min-width: 1400px) {
    body .container {
        width: 1320px;
    }

    body #header > .container {
        max-width: 1320px;
    }
}

/* Dunkler Text überall in --bt-text. Gleiche Selektoren wie im alten Theme-CSS (#310000, Überschriften #0e0e0e),
   diese Datei steht danach und gewinnt; gezieltere Regeln (z. B. weiße Überschrift im Titelband) bleiben unberührt. */
body,
p,
li,
h1, h2, h3, h4, h5, h6,
#header nav ul.nav-top li a,
#header nav ul.nav-top li span,
.cookie-consent__message .txt-div:not(a),
.featured-box ol, .featured-box ul, .featured-box li,
.featured.map h2,
h1.dark, h2.dark, h3.dark, h4.dark, h5.dark,
.feature-box.secundary h4 {
    color: var(--bt-text);
}

/* Bootstrap-Spaltenbreiten fürs Handy, identisch zum nachgeladenen CSS-Paket (/min/g=css).
   Ohne sie stehen z. B. Logo und Text der Cashback-Kachel bis zum Nachladen untereinander
   und springen dann nebeneinander (Layout Shift). Nur unter 768 px, damit col-sm-/col-md-Breiten
   darüber nicht überschrieben werden (diese Datei steht nach dem Paket). */
@media (max-width: 767px) {
    .col-xs-1 { width: 8.33333333%; }
    .col-xs-2 { width: 16.66666667%; }
    .col-xs-3 { width: 25%; }
    .col-xs-4 { width: 33.33333333%; }
    .col-xs-5 { width: 41.66666667%; }
    .col-xs-6 { width: 50%; }
    .col-xs-7 { width: 58.33333333%; }
    .col-xs-8 { width: 66.66666667%; }
    .col-xs-9 { width: 75%; }
    .col-xs-10 { width: 83.33333333%; }
    .col-xs-11 { width: 91.66666667%; }
    .col-xs-12 { width: 100%; }
}

/* Ebenfalls aus Bootstrap, gleiche Werte wie im nachgeladenen CSS-Paket. Fehlen sie bis zum Nachladen,
   springt die Seite: Screenreader-Texte in Pillen und Ticker wären kurz sichtbar, Tabellenköpfe (Kontoübersicht) 16 px zu niedrig. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
    padding: 8px;
    line-height: 1.42857143;
}

/* ---------- Header ---------- */

/* Eingeloggt gleich hoch wie ausgeloggt. custom_critical.css nimmt die Abstände nur für Gäste
   heraus (.body:not(.logged-in)); der zusätzliche Platz war für die frühere Admention-Toolbar. */
body .body > #header {
    padding: 0;
}

body:not(.sticky-menu-active) .body > #header > .container {
    margin-top: 0 !important;
}

body .body > #header > .container > .logo {
    padding: 0;
}

body #header #headSearch .form-control.search {
    border-radius: 999px 0 0 999px;
    border-color: #ddd9d5;
    box-shadow: none;
}

body #header #headSearch .input-group-btn .btn {
    border-radius: 0 999px 999px 0;
    border-color: #ddd9d5;
}

body #header .social-icons li a {
    border-radius: 50%;
}

body #header .nav-main > li > a {
    border-radius: 999px !important;
    transition: background-color .15s ease;
}

body #header .nav-main > li > a:hover,
body #header .nav-main > li.active > a {
    background-color: var(--bt-flaeche) !important;
    color: var(--bt-rot) !important;
}

/* ---------- Titelband ---------- */

body .main.shop .page-top {
    background: var(--bt-dunkel);
    border-top: 0;
    border-bottom: 4px solid var(--bt-rot);
    padding: 20px 0 18px;
}

body .main.shop .page-top h1 {
    border-bottom: 0;
    margin: 6px 0 0;
    padding-bottom: 0;
    line-height: 1.15;
}

/* Fluide Größe: ca. 25 px auf dem Handy bis 38 px auf großen Bildschirmen */
body .main.shop .page-top h1 {
    font-size: clamp(24px, 1.2rem + 1.6vw, 38px);
}

/* "(Stand: …)" bleibt Teil der H1, wird aber klein und heller dargestellt
   und rutscht bei Platzmangel als Ganzes in die nächste Zeile */
body .main.shop .page-top h1 .bt-h1-stand {
    display: inline-block;
    white-space: nowrap;
    font-size: .55em;
    color: #c9bfbf;
}

/* ---------- Boxen ---------- */

/* Ohne Mindesthöhe (Theme: 100 px): sonst bleibt unter niedrigen Boxen, z. B. dem eingeklappten Chat,
   mehr Platz frei als unter hohen. Der Abstand zwischen den Boxen kommt so überall nur vom gleichen Außenabstand. */
body .main.shop .featured-box {
    background: transparent !important;
    border: 0;
    box-shadow: none;
    min-height: 0;
}

/* Überall 20 px zwischen den Boxen: nur Rand oben. Mit Rand oben und unten (Theme: je 20 px) hinge der Abstand vom Aufbau ab:
   Boxen in Spalten nebeneinander addieren beide Ränder (40 px), Boxen direkt untereinander schieben sie zusammen (20 px).
   Das alte Theme gibt außerdem der zweiten Box in einem Container nur 12 px (.featured-box-primary:nth-child(2)). */
body .main.shop .featured-box,
body .main.shop .featured-box.featured-box-primary:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 0;
}

/* Nebeneinander ebenfalls 20 px: Bootstrap-Spalten haben innen je 15 px (zusammen 30), hier je 10 px auf der Seite zur
   Nachbarspalte; die Außenseiten bleiben, damit die Boxen bündig mit dem Rest der Seite stehen.
   .padding-md-left/-right sind die Abstände der Spalten im Mitgliederbereich und ähnlichen Seiten (templates/mitgliederbereich.tpl). */
@media (min-width: 992px) {
    body .main.shop .padding-md-left {
        padding-left: 10px;
    }

    body .main.shop .padding-md-right {
        padding-right: 10px;
    }

    body .main.shop [class*="col-md-"]:not(.col-md-12):has(> .featured-box):not(:last-child) {
        padding-right: 10px;
    }

    body .main.shop [class*="col-md-"]:not(.col-md-12):has(> .featured-box):not(:first-child) {
        padding-left: 10px;
    }

    /* In einer Hülle ohne Innenabstand (.padding-0, z. B. Impressum) stünden die Außenseiten sonst 15 px eingerückt
       gegenüber einer breiten Box darunter */
    body .main.shop .padding-0 > [class*="col-md-"]:not(.col-md-12):has(> .featured-box):first-child {
        padding-left: 0;
    }

    body .main.shop .padding-0 > [class*="col-md-"]:not(.col-md-12):has(> .featured-box):last-child {
        padding-right: 0;
    }
}

body .main.shop .featured-box .box-content {
    background: #fff;
    border-radius: var(--bt-radius);
    border-top: 4px solid var(--bt-rot);
    box-shadow: var(--bt-schatten);
    padding: 24px 28px 20px;
}

/* Boxtitel; Überschriften im Fließtext (.bt-text) stehen weiter unten */
body .main.shop .featured-box h2:not(.bt-text *) {
    color: var(--bt-text);
    font-size: 24px;
}

/* Angebotszeilen: Shopseite (.coupon-outer > .coupon) und Kategorieseite
   (#gutscheineBox > .gutschein, #cashbackBox > .cashback, templates/angebote_gutscheine.tpl und angebote_cashback.tpl) */
/* Kein will-change: sonst vergrößert der Browser beim Hover nur ein fertiges Bild der Kachel, Schrift und Screenshot werden unscharf */
body .main.shop .coupon-outer {
    margin: 14px 0;
}

/* Cashback-Box: beim Hover vom oberen Rand aus vergrößern, damit sie beim Auf-/Zuklappen
   der Cashback-Liste nicht nach oben springt (die Gutscheinliste hat die Klasse .coupons) */
body .main.shop .featured-box .box-content:not(.coupons) .coupon-outer {
    transform-origin: top center;
}

body .main.shop .coupon,
body .main.shop #gutscheineBox > .gutschein,
body .main.shop #cashbackBox > .cashback {
    border: 1px solid var(--bt-linie);
    border-radius: 16px;
    background: #fff;
    padding: 14px 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body .main.shop .coupon:hover,
body .main.shop #gutscheineBox > .gutschein:hover,
body .main.shop #cashbackBox > .cashback:hover {
    border-color: var(--bt-rot) !important;
    box-shadow: 0 8px 22px rgba(49, 0, 0, .08);
    cursor: pointer;
}

/* Gutschein-Titel (Shopseite und Kategorieseiten) höchstens 2 Zeilen, der volle Titel steht im Tooltip */
body .main.shop .box-content.coupons .row.coupon .coupon-text > h3,
body .main.shop #gutscheineBox > .gutschein .coupon-text > h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Kategorie-Zeilen: Knopf rechtsbündig wie in den Shop-Kacheln, damit alle Knöpfe rechts gleich enden
   (das Template zentriert ihn per style="margin: auto") */
body .main.shop #gutscheineBox > .gutschein > .col-lg-4 > div,
body .main.shop #cashbackBox > .cashback > .col-lg-4 > div {
    margin: auto 0 auto auto !important;
}

/* Kategorie-Zeilen haben keine eigene Hülle wie .coupon-outer: Abstand, Vergrößern beim Hover
   (wie .coupon-outer:hover in css/cashback_not_critical.css) und Theme-Reste direkt an der Zeile */
body .main.shop #gutscheineBox > .gutschein,
body .main.shop #cashbackBox > .cashback {
    position: relative;
    float: none;
    width: auto;
    margin: 14px 0;
    padding: 14px 6px 10px !important;
    transition: transform .2s ease, border-color .15s ease, box-shadow .15s ease;
}

body .main.shop #gutscheineBox > .gutschein:hover,
body .main.shop #cashbackBox > .cashback:hover {
    transform: scale(1.02);
    z-index: 1;
}

body .main.shop #gutscheineBox > .gutschein:hover h3,
body .main.shop #cashbackBox > .cashback:hover h3 {
    text-decoration: underline;
    color: var(--bt-rot);
}

body .main.shop #gutscheineBox > .gutschein > hr,
body .main.shop #cashbackBox > .cashback > hr {
    display: none;
}

/* "Jeden … Gutschein anzeigen" als Fußzeile in der Karte */
body .main.shop #gutscheineBox > .gutschein > .mt-10,
body .main.shop #cashbackBox > .cashback > .mt-10 {
    clear: both;
    float: none;
    width: auto;
    margin: 10px 12px 0;
    padding: 8px 0 0;
    border-top: 1px dashed var(--bt-linie);
    font-size: 13px;
}

body .main.shop #cashbackBox > .cashback > .mt-10 > div {
    float: none;
    width: auto;
    padding: 0;
}

body .main.shop .coupon.favorite {
    border: 1px solid #f3dc7a;
    background: #fffae0;
    box-shadow: none;
}

body .main.shop .coupon.favorite::before {
    top: -12px;
    left: 14px;
    border-radius: 999px;
    padding: 4px 10px;
    background-color: #f7d84a;
    color: #4a3a00;
}

/* Shop-Screenshots: überall 5 px weißer Rand rundum (4 px Innenabstand + 1 px Linie), wie im Original.
   Shopseite: Rahmen 110 × 85, Bild 100 × 75. Höhe automatisch, sonst sammelt sich der Rand unten. */
body .main.shop .coupon .thumbnail,
body .main.shop #gutscheineBox > .gutschein .thumbnail,
body .main.shop #cashbackBox > .cashback .thumbnail {
    border: 1px solid var(--bt-linie);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 4px;
    height: auto;
}

/* Screenshot selbst mit runden Ecken: Rahmenradius 12 px minus 5 px Rand */
body .main.shop .coupon .thumbnail img,
body .main.shop #gutscheineBox > .gutschein .thumbnail img,
body .main.shop #cashbackBox > .cashback .thumbnail img,
body section.featured.map .container.shop .row > .thumbnail img,
body .main.shop .gutscheinShop > .thumbnail img,
body .main.shop .cashbackShop > .thumbnail img {
    border-radius: 7px;
}

/* Etikett (Cashback/Code/Deal) in der linken unteren Ecke, 1 px im Screenshot, damit das Bild es umschließt.
   Basis-CSS hängt es per margin-top:-14px unter das Bild, das ragt mit dem Rand nach unten hinaus. */
body .main.shop .coupon .thumbnail {
    position: relative;
}

/* Etiketten an den Screenshots: Cashback wie die Cashback-Pillen, Deal/Code wie die Gutschein-Pillen */
body .main.shop .row.coupon.cashback .thumbnail .coupon-badge {
    background: var(--bt-pill-cashback-bg);
    color: var(--bt-pill-cashback-text);
}

body .main.shop .row.coupon.coupon-deal .thumbnail .coupon-badge,
body .main.shop .row.coupon.coupon-code .thumbnail .coupon-badge {
    background: var(--bt-pill-gutschein-bg);
    color: var(--bt-name);
}

body .main.shop .coupon .thumbnail .coupon-badge {
    left: 5px;
    bottom: 5px;
    margin: 0;
    border-radius: 0 6px 0 6px;
    padding: 2px 8px;
    line-height: 13px;
}

/* Basis-CSS setzt overflow:auto; bei Rundung um 1 px erscheint sonst ein Scrollbalken neben dem Logo */
body .main.shop .coupon-bild,
body .main.shop .coupon-text {
    overflow: visible;
}

/* Name, Beschreibung und Cashback-Pille untereinander (Mitgliederbereich); auf Shop- und Kategorieseiten steht hier nur die Überschrift.
   display:flex kommt dort aus dem kritischen CSS der Shopseite, im Mitgliederbereich fehlt es sonst (Pille würde volle Breite) */
body .main.shop .coupon-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

body .main.shop .coupon-text > h3 {
    margin: 0 0 6px;
}

/* Zweispaltiges Raster: Gutschein-/Cashback-Boxen im Shoptext (libs/locale/de.xml) und Kacheln im Mitgliederbereich */
body .main.shop .bt-textboxen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
}

/* Direkt in einer Box (Mitgliederbereich): Kacheln brauchen mehr Breite, höchstens zwei Spalten */
body .main.shop .box-content > .bt-textboxen {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* Kacheln im Raster: kein eigener Außenabstand, keine negativen Bootstrap-Ränder, Knöpfe unten bündig */
body .main.shop .bt-textboxen > .coupon-outer {
    margin: 0;
}

body .main.shop .bt-textboxen > .coupon-outer > .row.coupon {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
    margin: 0;
}

/* Bootstrap-Clearfix der .row wäre im Flex-Layout ein leeres Element */
body .main.shop .bt-textboxen > .coupon-outer > .row.coupon::before,
body .main.shop .bt-textboxen > .coupon-outer > .row.coupon::after {
    display: none;
}

/* Beschreibung höchstens drei Zeilen */
body .main.shop .coupon-text > p {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

body .main.shop .coupon-text > div.bt-pill {
    margin: 8px 0 16px;
}

/* Mitgliederbereich: Pillen rechts neben dem Shopnamen, vertikal mittig; reicht der Platz nicht, rutschen sie darunter.
   Pillen in .coupon-text gibt es nur dort (templates/mitgliederbereich_angebot.tpl), Shop- und Kategorieseiten bleiben unverändert. */
body .main.shop .coupon-text:has(> div.bt-pill) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    column-gap: 6px;
}

body .main.shop .coupon-text:has(> div.bt-pill) > h3 {
    flex: 1 1 auto;
    margin-bottom: 0;
}

body .main.shop .coupon-text:has(> div.bt-pill) > div.bt-pill {
    order: 1;
    margin: 0;
}

/* darunter die Sterne (bzw. "Noch nicht bewertet") statt der Beschreibung */
body .main.shop .coupon-text:has(> div.bt-pill) > p {
    order: 2;
    flex-basis: 100%;
    display: block;
    overflow: visible;
    margin: 6px 0 12px;
}

body .main.shop .coupon-text:has(> div.bt-pill) > h3 > a {
    color: inherit;
}

body .main.shop .coupon-text:has(> div.bt-pill) > h3 > a:hover {
    color: var(--bt-rot);
}

body .main.shop .coupon-text .star-rating-shop {
    display: block;
    width: 5.3em;
    height: 1.35em;
    margin: 0 !important;
    top: 0;
    font-size: 15px !important;
    line-height: 1.6em;
}

/* Ganze Kachel führt zur Shopseite: der Namens-Link legt eine unsichtbare Fläche über die Kachel.
   Knopf und Hinweis-Symbole liegen darüber: der Knopf bleibt eigenes Klickziel, die Symbole zeigen ihren Tooltip.
   Die Pillen bleiben darunter, sonst gäbe es dort Stellen ohne Klick. */
body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) {
    position: relative;
}

body .main.shop .coupon-text:has(> div.bt-pill) > h3 > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

body .main.shop .coupon-text:has(> div.bt-pill) > h3 > :not(a),
body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-button {
    position: relative;
    z-index: 2;
}

/* Neben dem schmalen Knopf geht der Klick zur Kachel durch */
body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-button {
    pointer-events: none;
}

body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-button .btn {
    pointer-events: auto;
}



body .main.shop .coupon-text > div.bt-pill .fa,
.bt-dock .bt-empf-wert > .bt-pill .fa,
body .bt-vorschlag-info > .bt-pill .fa,
body .main.shop .row.coupon > footer .fa {
    margin-right: 4px;
}

/* Handy: zu schmal für Name und Pillen nebeneinander; Pillen gemeinsam in eine Zeile unter den Namen */
@media (max-width: 767px) {
    body .main.shop .coupon-text:has(> div.bt-pill) > h3 {
        flex-basis: 100%;
        margin-bottom: 6px;
    }
}

/* Mitgliederbereich ab Tablet: Kachel als Raster. Links Logo (bestimmt die Höhe), Mitte Name und Sterne (mittig),
   rechts oben die Pillen bündig mit der Logo-Oberkante, rechts unten der Knopf bündig mit der Logo-Unterkante.
   .coupon-text gibt seine Kinder per display:contents direkt ans Raster weiter. */
@media (min-width: 768px) {
    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-rows: 1fr auto auto 1fr;
        column-gap: 6px;
        align-items: start;
        margin: 0;
        padding: 14px 20px;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill)::before,
    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill)::after {
        display: none;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-bild {
        grid-column: 1;
        grid-row: 1 / -1;
        width: auto;
        min-height: 0 !important;
        margin-right: 20px;
        padding: 0;
        float: none;
    }

    /* Rahmen als Block: als inline-block bliebe darunter Platz für die Unterlänge, die Kachel wäre höher als das Logo */
    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-bild .thumbnail {
        display: block;
        margin: 0;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-text {
        display: contents;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-text > h3 {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        margin: 0;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-text > p {
        grid-column: 2;
        grid-row: 3;
        margin: 3px 0 0;
        padding: 0;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-text > div.bt-pill {
        grid-row: 1 / -1;
        align-self: start;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-text > div.bt-pill-gutschein {
        grid-column: 3;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-text > div.bt-pill-cashback {
        grid-column: 4;
    }

    body .main.shop .row.coupon:has(> .coupon-text > div.bt-pill) > .coupon-button {
        grid-column: 3 / 5;
        grid-row: 1 / -1;
        align-self: end;
        justify-self: end;
        width: auto;
        padding: 0;
        float: none;
    }
}

/* Handy: Sterne direkt unter dem Namen, darunter die Pillen */
@media (max-width: 767px) {
    body .main.shop .coupon-text:has(> div.bt-pill) > p {
        order: 1;
        margin: 3px 0 8px;
    }
    body .main.shop .coupon-text:has(> div.bt-pill) > div.bt-pill {
        order: 2;
        margin-bottom: 12px;
    }
}

body .main.shop .coupon-text h3,
body .main.shop #gutscheineBox > .gutschein h3,
body .main.shop #cashbackBox > .cashback h3 {
    color: var(--bt-text);
    font-size: 20px;
}

body .main.shop .coupon-togglebtn {
    border-radius: 999px;
}

/* "…alle Cashback Aktionen" (templates/cashback.tpl, #showProvisionen, js/cashback.js) und Info-Fenster der Gutscheine.
   ID-Selektor nötig: css/cashback_critical.css setzt .coupon-togglebtn#showProvisionen auf position:static. */
/* Der Link sitzt rechts in der Fußleiste der Cashback-Kachel (Abschnitt Shop-Kopf in css/shop-2026.css) */
body .main.shop .row.coupon.cashback .row-provisionen {
    width: 100% !important;
    margin: 0;
}

body .main.shop .row.coupon > footer > #showProvisionen {
    position: static;
    float: none;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 0;
    background: none !important;
    color: var(--bt-rot) !important;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

/* Aufgeklappt: helle Fläche wie Inhaltsverzeichnis und Textboxen */
body .main.shop .coupon-info,
body .main.shop .cashback-info {
    margin: 14px 0 0;
    padding: 16px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--bt-flaeche);
    color: var(--bt-text);
}
body .main.shop .stand-provisionen {
    margin: 0 0 6px;
    text-align: left;
    font-size: 12px;
    color: var(--bt-text-leise);
}
body .main.shop .box-provisionen { margin: 0; padding: 0; }
body .main.shop .box-provisionen .provisionskategorie {
    display: grid;
    grid-template-columns: 170px repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 0;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--bt-linie);
    background: none !important;
    line-height: 1.5;
}
body .main.shop .box-provisionen .provisionskategorie:last-of-type { border-bottom: 0; }
body .main.shop .box-provisionen .provisionskategorie > div { display: none; }
body .main.shop .box-provisionen .provisionsbetrag {
    grid-column: 1;
    grid-row: span 60;
    align-self: start;
    justify-self: start;
    float: none;
    padding: 3px 10px;
    border: 1px solid var(--bt-linie);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    color: var(--bt-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}
body .main.shop .box-provisionen .provisionsgegenstand {
    float: none;
    clear: none;
    padding: 2px 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
}
body .main.shop .box-provisionen .vergmax-hint { grid-column: 1 / -1; color: var(--bt-text-leise); }
@media (max-width: 767px) {
    body .main.shop .row-provisionen #showProvisionen { position: static; display: inline-block; margin: 8px 0 0 15px; }
    body .main.shop .box-provisionen .provisionskategorie { grid-template-columns: minmax(0, 1fr); }
    body .main.shop .box-provisionen .provisionsbetrag { grid-row: auto; margin-bottom: 6px; }
}

/* Cashback-Kachel der Shopseite (eingeloggt): Favoriten-Stern links neben "Jetzt teilnehmen",
   der Stern so schmal wie nötig, der Teilnehmen-Button nimmt den Rest.
   font-size: 0 blendet das   zwischen den Buttons aus (templates/cashback.tpl) */
body .main.shop .gutbutton {
    display: flex;
    gap: 10px;
    align-items: stretch;
    font-size: 0;
}

body .main.shop .gutbutton .btn-primary,
body .main.shop .gutbutton .btn-default {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
}

body .main.shop .gutbutton #fav-button {
    order: -1;
    flex: 0 0 auto;
    min-width: 52px;
    padding-left: 16px;
    padding-right: 16px;
}

/* Knöpfe als Pillen. btn-primary: Hauptaktion (Cashback aktivieren, Gutschein nutzen, Jetzt teilnehmen),
   btn-default: Nebenaktion (Informationen, Mehr laden). Am Handy 40 px hoch, damit man sie gut trifft.
   Hauptaktion im Boni.tv-Rot, schlank. */
body .main.shop .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bt-verlauf) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    min-height: 36px;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}

body .main.shop .btn-primary:hover,
body .main.shop .btn-primary:focus {
    filter: brightness(1.08);
}

/* Shop-Kacheln: Knopf so breit wie sein Text, rechtsbündig */
body .main.shop .row.coupon .coupon-button {
    display: flex;
    justify-content: flex-end;
}

body .main.shop .row.coupon .gutbutton {
    justify-content: flex-end;
}

body .main.shop .row.coupon .gutbutton .btn-primary {
    flex: 0 0 auto;
    width: auto;
}

body .main.shop .btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 20px;
    border: 1px solid #dcd8d4 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--bt-text) !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    text-decoration: none;
}

body .main.shop .btn-default:hover,
body .main.shop .btn-default:focus {
    border-color: var(--bt-rot) !important;
    color: var(--bt-rot) !important;
}

@media (max-width: 767px) {
    body .main.shop .btn-primary,
    body .main.shop .btn-default {
        min-height: 40px;
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
}

/* Suche auf der Startseite: Feld und Knopf zusammen eine Pille, wie #headSearch im Header.
   Ohne das macht die btn-default-Regel oben den Knopf ringsum rund, das Feld bleibt eckig. */
body #search .form-control.search {
    border-radius: 999px 0 0 999px;
    padding-left: 24px;
}

body .main.shop #search .input-group-btn .btn {
    border-radius: 0 999px 999px 0 !important;
    padding-right: 24px;
}

/* ---------- Suche auf der Startseite: Gutscheine/Cashback als Auswahl-Pillen ----------
   Die Checkboxen bleiben im Formular (unsichtbar, per Tastatur bedienbar); der Zustand kommt über :has(). */
body #search #checks {
    margin: 14px 0 0 !important;
}

/* Schwarzer Bereich hat am Desktop eine feste Höhe: weniger Abstand über der Überschrift,
   damit oben und unter den Pillen gleich viel Platz bleibt (h1 ist auf dem Handy ausgeblendet) */
@media (min-width: 768px) {
    body #home-intro h1 {
        margin-top: 13px !important;
    }
}

body #search #checks .col-md-12 {
    float: none;
    width: 100%;
    padding: 0;
}

body #search #checks .checkbox {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
}

body #search #checks .checkbox label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    /* Größe und Schrift wie die übrigen Knöpfe (Abschnitt Knöpfe als Pillen) */
    min-height: 36px;
    margin: 0;
    padding: 7px 20px 7px 14px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body #search #checks .checkbox label input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

body #search #checks .checkbox label::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font: 700 10px/13px sans-serif;
    text-align: center;
}

body #search #checks .checkbox label:has(input:checked) {
    border-color: transparent;
    background: var(--bt-verlauf);
    color: #fff;
}

body #search #checks .checkbox label:has(input:checked)::before {
    content: "\2713";
    border-color: #fff;
    background: #fff;
    color: var(--bt-rot);
}

body #search #checks .checkbox label:has(input:focus-visible) {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body #search #checks .checkbox label .fa {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    body #search #checks .checkbox label {
        min-height: 40px;
    }
}

/* Kategorie- und Suchseite: Formular auf Weiß. Abgewählt wie die weißen Nebenknöpfe (btn-default),
   der helle Umriss oben gilt nur auf dem dunklen Band der Startseite (#home-intro) */
body #search:not(#home-intro #search) #checks .checkbox label:not(:has(input:checked)) {
    border: 1px solid #dcd8d4;
    background: #fff;
    color: var(--bt-text);
}

body #search:not(#home-intro #search) #checks .checkbox label:not(:has(input:checked)):hover {
    border-color: var(--bt-rot);
    color: var(--bt-rot);
}

body #search:not(#home-intro #search) #checks .checkbox label:has(input:focus-visible) {
    outline-color: var(--bt-rot);
}

/* ---------- Top-Listen auf der Startseite (templates/index2.tpl, section.featured.map) ----------
   Die Shopliste "Weitere …shops" der Kategorieseite (.gutscheinShop, .cashbackShop in templates/angebote_new.tpl)
   ist gleich aufgebaut und nutzt die Zeilenregeln mit */

/* Hintergrund (Weltkarte img/map-bottom.gif und graue Fläche) entfernen, Theme-Abstände (50/50/35 px) raus */
body section.featured.map {
    background: none;
    margin: 0;
    padding: 0;
}

body section.featured.map > .container.shop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: auto;
    /* oben weniger, weil der Text darüber eigenen Abstand mitbringt: ergibt oben und unten je ca. 40 px */
    padding: 18px 0 40px;
}

/* Bootstrap-Clearfix würde sonst als leere Gitterzelle zählen */
body section.featured.map > .container.shop::before,
body section.featured.map > .container.shop::after {
    display: none;
}

body section.featured.map > .container.shop > .col-md-4 {
    width: auto;
    float: none;
    padding: 22px 22px 14px;
    background: #fff;
    border-radius: var(--bt-radius);
    border-top: 4px solid var(--bt-rot);
    box-shadow: var(--bt-schatten);
}

body section.featured.map h2 {
    margin: 0 0 14px;
    font-size: 24px;
}

body section.featured.map .container.shop .row,
body .main.shop .gutscheinShop,
body .main.shop .cashbackShop {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--bt-linie);
}

body section.featured.map .container.shop h2 + .row,
body .main.shop .gutscheinShop:first-child,
body .main.shop .cashbackShop:first-child {
    border-top: 0;
}

body section.featured.map .container.shop .row > .thumbnail,
body .main.shop .gutscheinShop > .thumbnail,
body .main.shop .cashbackShop > .thumbnail {
    flex: 0 0 76px;
    width: 76px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--bt-linie);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* Bild im Seitenverhältnis 4:3 über die ganze Breite, damit der weiße Rand rundum gleich bleibt */
body section.featured.map .container.shop .row > .thumbnail img,
body .main.shop .gutscheinShop > .thumbnail img,
body .main.shop .cashbackShop > .thumbnail img {
    width: 100%;
    height: auto;
}

/* Name oben über die ganze Breite, darunter links Sterne, rechts der Wert als Etikett */
body section.featured.map .container.shop .row > div:last-child,
body .main.shop .gutscheinShop > div:last-child,
body .main.shop .cashbackShop > div:last-child {
    flex: 1 1 auto;
    width: auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}

body section.featured.map .container.shop .row > div:last-child > a,
body .main.shop .gutscheinShop > div:last-child > a,
body .main.shop .cashbackShop > div:last-child > a {
    grid-column: 1 / span 2;
    grid-row: 1;
    font-size: 16px;
}

body section.featured.map .container.shop .row > div:last-child > .product-quantity,
body .main.shop .gutscheinShop > div:last-child > .product-quantity,
body .main.shop .cashbackShop > div:last-child > .product-quantity {
    grid-column: 1;
    grid-row: 2;
}

body section.featured.map .container.shop .row > div:last-child > div:last-child,
body .main.shop .gutscheinShop > div:last-child > div:last-child,
body .main.shop .cashbackShop > div:last-child > div:last-child {
    grid-column: 2;
    grid-row: 2;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bt-flaeche);
    color: var(--bt-rot);
    font-size: 13px;
}

/* Kategorie-Seitenleiste: schmale Spalte und Inline-Stile aus dem Template */
body .main.shop #gutscheineShops,
body .main.shop #cashbackShops {
    padding-top: 6px !important;
}

body .main.shop .gutscheinShop > .thumbnail,
body .main.shop .cashbackShop > .thumbnail {
    flex-basis: 64px;
    width: 64px;
    margin: 0 !important;
    float: none;
}


body .main.shop .gutscheinShop > div:last-child,
body .main.shop .cashbackShop > div:last-child {
    float: none;
    min-width: 0;
    column-gap: 8px;
}

body .main.shop .gutscheinShop > div:last-child > a,
body .main.shop .cashbackShop > div:last-child > a {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Noch nicht bewertet" ausblenden, die Sterne bleiben */
body .main.shop .gutscheinShop .product-quantity,
body .main.shop .cashbackShop .product-quantity {
    font-size: 0;
    min-height: 1px;
}

body .main.shop .gutscheinShop .product-quantity .star-rating-shop,
body .main.shop .cashbackShop .product-quantity .star-rating-shop {
    font-size: 13px !important;
}

body .main.shop .gutscheinShop > div:last-child > div:last-child,
body .main.shop .cashbackShop > div:last-child > div:last-child {
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 991px) {
    body section.featured.map > .container.shop {
        grid-template-columns: 1fr;
    }
}

/* ---------- Fließtext, gilt auf allen Seiten ----------
   Jeder Textbereich bekommt im Template die Klasse bt-text (Startseite, Shop, Kategorie, Suche,
   Impressum, Datenschutz, Nutzungsbedingungen, Anleitung, Mitgliederbereich …).
   Neue Textseiten: nur die Klasse an die Hülle setzen, hier nichts ergänzen. */

body .bt-text {
    font-size: 16.5px;
    line-height: 1.75;
}

body .bt-text h2,
body .bt-text h3 {
    margin-top: 40px;
    font-size: 26px;
    line-height: 1.3;
    color: var(--bt-rot);
    text-transform: none;
}

body .bt-text > :first-child {
    margin-top: 0;
}

body .bt-text p,
body .bt-text ol > li {
    font-size: 16.5px;
    line-height: 1.75;
}

/* Aufzählungen als Checkliste, nummerierte Listen gleich mit der Zahl im Kreis
   (nur Listen ohne eigene Klasse, Menüs usw. bleiben unberührt) */
body .bt-text ul:not([class]),
body .bt-text ol:not([class]) {
    list-style: none;
    margin: 20px 0;
    padding: 22px 24px;
    border: 1px solid var(--bt-linie);
    border-radius: var(--bt-radius);
    box-shadow: 0 10px 28px rgba(49, 0, 0, .06);
}

body .bt-text ul:not([class]) > li,
body .bt-text ol:not([class]) > li {
    position: relative;
    padding-left: 36px;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
}

body .bt-text ul:not([class]) > li:last-child,
body .bt-text ol:not([class]) > li:last-child {
    margin-bottom: 0;
}

body .bt-text ul:not([class]) > li::before,
body .bt-text ol:not([class]) > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bt-verlauf);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

body .bt-text ol:not([class]) {
    counter-reset: bt-ol;
}

body .bt-text ol:not([class]) > li {
    counter-increment: bt-ol;
}

body .bt-text ol:not([class]) > li::before {
    content: counter(bt-ol);
}

/* Liste in der Liste: keine zweite Box */
body .bt-text li ul:not([class]),
body .bt-text li ol:not([class]) {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Footer ---------- */

/* Ein schmales Band: ohne den leeren oberen Bereich des Themes (70 px + 40 px) und ohne den hellen Streifen darunter (27 px).
   Für Gäste hängt oben das Fähnchen "Gratis anmelden" in die Zeile, dann mehr Platz über dem Text. */
body #footer {
    margin-bottom: 0;
    padding-top: 0;
}

body #footer .footer-copyright {
    margin-top: 0;
    padding: 20px 0;
}

body #footer:has(.footer-ribbon) .footer-copyright {
    padding-top: 44px;
}

/* Fähnchen wie bisher halb über der Oberkante (Theme: -90 px, gerechnet mit dem entfallenen Innenabstand oben) */
body #footer .footer-ribbon {
    margin-top: -20px;
}

/* ohne den Theme-Abstand unter den Spalten (25 px), sonst ist unten mehr frei als oben */
body #footer .footer-copyright .row > div {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    body #footer .footer-copyright .row > div + div {
        margin-top: 8px;
    }
}

body #footer .footer-ribbon {
    border-radius: 0 0 14px 14px;
    background: var(--bt-verlauf);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

body #footer .footer-ribbon::before {
    display: none;
}

/* ---------- Seitenboxen für eingeloggte Nutzer (templates/footer.tpl, js/dock-2026.js) ----------
   Links App und Top-Empfehlungen, rechts Konto und Zusatzprovision. Zugeklappt schaut nur der
   Pfeil-Griff heraus, gestaltet wie der Hochscroll-Button unten rechts. */

/* Die jeweils obere Box sitzt flach im dunklen Titelstreifen (Desktop 111–222 px, Handy 100–207 px),
   die untere beginnt darunter. */
.bt-dock-seite {
    position: fixed;
    top: 121px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 34px;
    pointer-events: none;
}

@media (max-width: 767px) {
    .bt-dock-seite {
        top: 110px;
        gap: 30px;
    }
}

.bt-dock-links {
    left: 0;
    align-items: flex-start;
}

.bt-dock-rechts {
    right: 0;
    align-items: flex-end;
}

.bt-dock {
    position: relative;
    box-sizing: border-box;
    width: 230px;
    max-width: calc(100vw - 44px);
    pointer-events: auto;
    background: #fff;
    color: var(--bt-text);
    border: 1px solid var(--bt-linie);
    border-top: 4px solid var(--bt-rot);
    box-shadow: var(--bt-schatten);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

.bt-dock[data-dock="empfehlungen"] {
    width: 260px;
}

.bt-dock-links .bt-dock {
    border-left: 0;
    border-radius: 0 var(--bt-radius) var(--bt-radius) 0;
}

.bt-dock-rechts .bt-dock {
    border-right: 0;
    border-radius: var(--bt-radius) 0 0 var(--bt-radius);
}

.bt-dock-bereit .bt-dock {
    transition: transform .3s ease, box-shadow .3s ease;
}

.bt-dock-links .bt-dock-zu {
    transform: translateX(-100%);
    box-shadow: none;
}

.bt-dock-rechts .bt-dock-zu {
    transform: translateX(100%);
    box-shadow: none;
}

.bt-dock[hidden],
.bt-dock [hidden] {
    display: none !important;
}

.bt-dock-inhalt {
    padding: 18px 20px 20px;
}

/* Kompakte Box im Titelstreifen: feste Höhe, etwas heller als der Streifen */
.bt-dock.bt-dock-kompakt {
    height: 88px;
    background: #2c2c29;
    border-color: rgba(255, 255, 255, .1);
    border-top-width: 1px; /* ohne roten Streifen, passt nicht in den dunklen Titelstreifen */
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.bt-dock.bt-dock-kompakt.bt-dock-zu {
    box-shadow: none;
}

.bt-dock-kompakt .bt-dock-inhalt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
}

/* App bereits installiert: Box unsichtbar, Platz bleibt, damit die untere Box nicht springt */
.bt-dock.bt-dock-weg {
    visibility: hidden;
    pointer-events: none;
}

/* Griff: gleiche Form und Farbe wie .scroll-to-top */
.bt-dock .bt-dock-griff {
    position: absolute;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 44px;
    padding: 0;
    border: 0;
    background: #404040;
    color: #fff;
    font-size: 13px;
    opacity: .75;
    cursor: pointer;
    transition: opacity .15s ease;
}

.bt-dock .bt-dock-griff:hover,
.bt-dock .bt-dock-griff:focus-visible {
    opacity: 1;
}

.bt-dock .bt-dock-griff:focus-visible {
    outline: 2px solid var(--bt-gelb);
    outline-offset: 2px;
}

.bt-dock-links .bt-dock-griff {
    right: -30px;
    border-radius: 0 7px 7px 0;
}

.bt-dock-rechts .bt-dock-griff {
    left: -30px;
    border-radius: 7px 0 0 7px;
}

.bt-dock .bt-dock-griff .fa {
    color: #fff;
}

/* Drehen erst nach dem ersten Zeichnen, sonst dreht sich der Pfeil beim Laden einmal */
.bt-dock-bereit .bt-dock-griff .fa {
    transition: transform .3s ease;
}

.bt-dock-zu .bt-dock-griff .fa {
    transform: rotate(180deg);
}

/* Texte: Absätze übernehmen die Farbe der Box (Basis-CSS färbt p sonst rot) */
body .bt-dock p {
    color: inherit;
}

.bt-dock .bt-dock-titel {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.bt-dock .bt-dock-text,
.bt-dock .bt-app-hilfe p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--bt-text-leise);
}

.bt-dock .bt-dock-klein {
    margin: 12px 0 0;
    font-size: 12px;
    opacity: .7;
}

.bt-dock .bt-dock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--bt-gelb);
    color: var(--bt-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.bt-dock .bt-app {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.bt-dock .bt-app-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
}

.bt-dock-kompakt .bt-dock-titel {
    margin: 0 0 6px;
    font-size: 15px;
    white-space: nowrap;
}

.bt-dock .bt-app .bt-dock-btn {
    width: auto;
    min-height: 30px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
}

/* Anleitung klappt unter der Box auf (die Box selbst bleibt im Streifen) */
.bt-dock .bt-app-hilfe {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 0 14px 14px 0;
    background: #fff;
    box-shadow: var(--bt-schatten);
}

.bt-dock .bt-app-hilfe p {
    margin: 0;
    color: var(--bt-text);
}

.bt-dock .bt-app-teilen {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    color: #007aff;
}

/* Top-Empfehlungen */
.bt-dock .bt-empf {
    margin: 0 -8px;
    padding: 0;
    list-style: none;
}

.bt-dock .bt-empf li {
    margin: 0;
    padding: 0;
    border: 0;
}

.bt-dock .bt-empf a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    color: var(--bt-text);
    text-decoration: none;
    transition: background-color .15s ease;
}

.bt-dock .bt-empf a:hover {
    background: var(--bt-flaeche);
}

.bt-dock .bt-empf-logo {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    padding: 4px;
    border: 1px solid var(--bt-linie);
    border-radius: 10px;
    background: #fff;
}

.bt-dock .bt-empf-logo img {
    display: block;
    border-radius: 5px;
    width: 100%;
    height: auto;
}

.bt-dock .bt-empf-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bt-dock .bt-empf-info > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

/* Breite aus den fünf Sternen selbst (overflow:hidden umschließt die Sterne), sonst wird der fünfte abgeschnitten */
.bt-dock .bt-empf .star-rating-shop {
    display: block;
    align-self: flex-start;
    width: auto;
    margin: 0;
    top: 0;
    font-size: 11px;
    line-height: 1.5em;
    height: 1.4em;
}

.bt-dock .bt-empf .star-rating-shop .rating,
body .main.shop .coupon-text .star-rating-shop .rating {
    visibility: hidden;
}

.bt-dock .bt-empf-leise {
    font-size: 12px;
    color: var(--bt-text-leise);
}

/* Cashback- und Gutschein-Pille nebeneinander; Aussehen wie im Mitgliederbereich (Abschnitt Shoplisten) */
.bt-dock .bt-empf-wert {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    line-height: 22px; /* wie im Mitgliederbereich: Pillen 28 px hoch */
}

.bt-dock .bt-konto-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #d8cfcf;
    text-decoration: none;
}

.bt-dock-kompakt .bt-konto-zeile {
    padding: 1px 0;
    border-bottom: 0;
    font-size: 13px;
}

.bt-dock-kompakt .bt-dock-klein {
    margin: 2px 0 0;
    font-size: 11px;
}

.bt-dock .bt-konto-zeile b {
    color: #fff;
    white-space: nowrap;
}

.bt-dock .bt-konto-zeile .bt-konto-betrag {
    font-size: 20px;
    color: var(--bt-gelb);
}

.bt-dock .bt-konto-zeile:hover b {
    text-decoration: underline;
}

.bt-dock .bt-bonus-ring {
    display: block;
    width: 120px;
    margin: 4px auto 6px;
    text-decoration: none;
}

.bt-dock .bt-bonus-ring svg {
    display: block;
    width: 120px;
    height: 120px;
}

.bt-dock .bt-ring-spur,
.bt-dock .bt-ring-wert {
    fill: none;
    stroke-width: 9;
}

.bt-dock .bt-ring-spur {
    stroke: var(--bt-linie);
}

.bt-dock .bt-ring-wert {
    stroke: var(--bt-rot);
    stroke-linecap: round;
}

.bt-dock .bt-ring-kern {
    fill: var(--bt-flaeche);
}

.bt-dock .bt-klasse-bronze .bt-ring-kern { fill: #cd7f32; }
.bt-dock .bt-klasse-silber .bt-ring-kern { fill: #c0c0c0; }
.bt-dock .bt-klasse-gold .bt-ring-kern { fill: #ffd700; }
.bt-dock .bt-klasse-platin .bt-ring-kern { fill: #e5e4e2; }

.bt-dock .bt-bonus-ring text {
    fill: var(--bt-text);
    font-size: 22px;
    font-weight: 700;
}

.bt-dock .bt-bonus-stufe {
    margin: 0;
    text-align: center;
    font-weight: 700;
}

.bt-dock .bt-bonus-runter { color: var(--bt-rot); }

.bt-dock .bt-bonus-rest {
    margin: 2px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--bt-text-leise);
}

.bt-dock .bt-bonus-punkte {
    margin: 12px 0;
}

.bt-dock .bt-bonus-punkte div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bt-linie);
    font-size: 13px;
}

.bt-dock .bt-bonus-punkte dt {
    font-weight: 400;
    color: var(--bt-text-leise);
}

.bt-dock .bt-bonus-punkte dd {
    margin: 0;
    font-weight: 700;
}

.bt-dock .bt-dock-link {
    font-size: 13px;
    color: var(--bt-rot);
}

@media print {
    .bt-dock-seite {
        display: none !important;
    }
}

/* ---------- Chat im Mitgliederbereich (templates/chatbox.tpl, js/chat-2026.js) ---------- */

/* Kompakter als die übrigen Boxen */
body .main.shop .featured-box .box-content:has(> .bt-chat) {
    padding: 16px 20px;
}

.bt-chat-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

body .main.shop .bt-chat h3 {
    margin: 0;
    color: var(--bt-text);
    font-size: 18px;
}

.bt-chat-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* Eingeklappt (Start): eine Zeile mit Titel, neuester Nachricht und "Chat öffnen" */
.bt-chat-vorschau {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--bt-text-leise);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-chat-zu .bt-chat-kopf {
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.bt-chat-zu .bt-chat-vorschau {
    display: block;
}

.bt-chat-zu .bt-chat-knoepfe,
.bt-chat-zu .bt-chat-inhalt {
    display: none;
}

/* Auf-/Zu-Knopf: Aussehen von btn-primary (zu) bzw. btn-default (offen), hier nur die Anordnung */
.bt-chat .bt-chat-umschalter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.bt-chat .bt-chat-umschalter .fa {
    transition: transform .2s ease;
}

.bt-chat:not(.bt-chat-zu) .bt-chat-umschalter .fa {
    transform: rotate(180deg);
}

.bt-chat .bt-chat-neu {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bt-gelb);
    color: var(--bt-text);
    font-size: 12px;
}

.bt-chat .bt-chat-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 12px;
    border: 1px solid var(--bt-linie);
    border-radius: 999px;
    background: #fff;
    color: var(--bt-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.bt-chat .bt-chat-info[aria-expanded="true"] {
    background: var(--bt-flaeche);
    border-color: #dcd8d4;
}

.bt-chat-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2fb36d;
}

.bt-chat-panel {
    margin-bottom: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--bt-flaeche);
    font-size: 14px;
    color: var(--bt-text);
}

.bt-chat-panel ol {
    margin: 0;
    padding-left: 20px;
}

.bt-chat-nutzer {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
}

.bt-chat [hidden] {
    display: none !important;
}

/* Verlauf: eine Zeile pro Nachricht, getrennt durch feine Linien */
.bt-chat-verlauf {
    height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 12px;
    border: 1px solid var(--bt-linie);
    border-radius: 14px;
    background: #fff;
}

.bt-chat-leer {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    color: var(--bt-text-leise);
}

.bt-chat-msg {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--bt-linie);
    text-align: left;
}

.bt-chat-msg:last-child {
    border-bottom: 0;
}

.bt-chat-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.bt-chat-meta strong {
    color: var(--bt-text);
}

.bt-chat-meta time {
    color: var(--bt-text-leise);
    font-size: 12px;
}

.bt-chat .bt-chat-loeschen {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--bt-text-leise);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.bt-chat .bt-chat-loeschen:hover {
    color: var(--bt-rot);
}

body .main.shop .bt-chat-msg p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--bt-text);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.bt-chat-admin .bt-chat-meta strong {
    color: var(--bt-rot);
}

/* Systemmeldungen (Tagesrally) klein und zurückhaltend */
.bt-chat-system .bt-chat-meta strong {
    color: #1f4fbf;
    font-weight: 600;
}

body .main.shop .bt-chat-system p {
    color: var(--bt-text-leise);
    font-size: 13px;
}

.bt-chat-form {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.bt-chat-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #dcd8d4;
    border-radius: 999px;
    background: #fff;
    color: var(--bt-text);
    font-size: 16px;
}

.bt-chat-form input:focus {
    outline: 2px solid var(--bt-rot);
    outline-offset: 1px;
}

.bt-chat .bt-chat-emoji-knopf {
    flex: 0 0 40px;
    height: 40px;
    border: 1px solid #dcd8d4;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* Senden: Aussehen von btn-primary */
.bt-chat .bt-chat-senden {
    flex: 0 0 auto;
}

.bt-chat .bt-chat-senden:disabled {
    opacity: .6;
    cursor: wait;
}

.bt-chat-emojis {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 4px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--bt-schatten);
}

.bt-chat-emojis button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 22px;
    cursor: pointer;
}

.bt-chat-emojis button:hover,
.bt-chat-emojis button:focus-visible {
    background: var(--bt-flaeche);
}

.bt-chat-fehler {
    margin: 8px 0 0;
    color: var(--bt-rot);
    font-size: 14px;
}

.bt-chat-hinweis {
    margin: 12px 0 0;
    color: var(--bt-text-leise);
}

@media (max-width: 480px) {
    /* Titel und Auf-/Zu-Knopf oben; eingeklappt die neueste Nachricht darunter, offen "online"/"Chatregeln" */
    .bt-chat-zu .bt-chat-kopf {
        flex-wrap: wrap;
    }

    .bt-chat .bt-chat-umschalter {
        margin-left: auto;
    }

    .bt-chat-knoepfe {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
    }

    .bt-chat-zu .bt-chat-vorschau {
        order: 3;
        flex-basis: 100%;
    }

    /* Handy: Name und Zeit über dem Text, sonst bleibt für den Text zu wenig Breite */
    .bt-chat-msg {
        flex-wrap: wrap;
        row-gap: 0;
    }

    body .main.shop .bt-chat-msg p {
        flex-basis: 100%;
        order: 3;
    }

    .bt-chat-emojis {
        grid-template-columns: repeat(6, 40px);
    }
}

/* ---------- Hauptmenü: Untermenüs einheitlich ----------
   Gilt für Top Cashback, Top Gutscheine, Kategorien, Spezial, Mein Boni.tv und Hilfe, als Gast und eingeloggt.
   Markup: templates/header.tpl, Einträge der Mega-Menüs aus libs/functions.php (menuEintrag).
   Die Theme-Dateien enthalten noch ältere Menüregeln; dieser Block legt die Optik fest (zwei IDs = höhere Spezifität). */

/* Oberpunkte sind Knöpfe (kein href), damit Google keine leeren #-Links sieht */
body #header #mainMenu > li > a[role="button"] {
    cursor: pointer;
}

body #header #mainMenu > li > a[role="button"]:focus-visible {
    outline: 2px solid var(--bt-rot);
    outline-offset: 2px;
}

/* Eine Schrift für alle Untermenü-Einträge, auch Hilfe */
body #header #mainMenu ul.sub-menu a,
body #header #mainMenu > li.dropdown:not(.mega-menu-item) > .dropdown-menu > li > a {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

/* Shop- und Kategorielisten: Raster statt Floats, Symbol + Text */
body #header #mainMenu .mmc_anbieter > ul.sub-menu,
body #header #mainMenu #mmc_special > ul.sub-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body #header #mainMenu .mmc_anbieter > ul.sub-menu > li,
body #header #mainMenu #mmc_special > ul.sub-menu > li {
    float: none;
    min-width: 0;
    margin: 0;
    border: 0;
}

body #header #mainMenu .mmc_anbieter > ul.sub-menu > li > a,
body #header #mainMenu #mmc_special > ul.sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 10px;
    text-decoration: none;
}

body #header #mainMenu ul.sub-menu > li > a > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Shop-Icon (Hintergrundbild, libs/functions.php): immer gleich breit, damit Einträge ohne Icon nicht verrutschen */
body #header #mainMenu ul.sub-menu .aktion-icon {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    background: center / contain no-repeat;
}

body #header #mainMenu ul.sub-menu > li > a > .fa {
    flex: 0 0 18px;
    width: 18px;
    min-width: 0;
    text-align: center;
    font-size: 16px;
    color: var(--bt-rot);
}

@media (min-width: 992px) {
    body #header #mainMenu ul.sub-menu > li > a {
        color: var(--bt-text-leise);
    }

    body #header #mainMenu ul.sub-menu > li > a:hover,
    body #header #mainMenu ul.sub-menu > li > a:focus-visible {
        background: var(--bt-flaeche) !important;
        color: var(--bt-rot);
    }

    /* Per Tastatur öffnen (sonst nur beim Überfahren mit der Maus) */
    body #header #mainMenu > li.dropdown:focus-within > .dropdown-menu {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body #header #mainMenu .mmc_anbieter > ul.sub-menu,
    body #header #mainMenu #mmc_special > ul.sub-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Handy/Tablet: aufgeklapptes Menü auf dunklem Grund, eine Spalte */
@media (max-width: 991px) {
    body #header #mainMenu .mmc_anbieter > ul.sub-menu,
    body #header #mainMenu #mmc_special > ul.sub-menu {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ---------- Suchvorschläge (js/suche-2026.js): Header, Startseite und Kategorie ----------
   Position und Größe ersetzen die alten Werte aus dem kritischen CSS (#searchSuggest/#searchSuggestHead). */
body #headSearch {
    position: relative;
}

body #searchSuggestHead {
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    width: min(440px, calc(100vw - 32px));
    margin: 0;
}

body #searchSuggest {
    left: 0;
    right: 0;
    width: auto;
}

body #searchSuggestHead,
body #searchSuggest {
    z-index: 1002;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid var(--bt-linie);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--bt-schatten);
    text-align: left;
}

body .bt-vorschlag-gruppe {
    margin: 6px 10px 4px;
    color: var(--bt-text-leise);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body .bt-vorschlag-hinweis {
    margin: 4px 10px 8px;
    color: var(--bt-text);
    font-size: 14px;
}

body a.bt-vorschlag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--bt-text);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}

body a.bt-vorschlag:hover,
body a.bt-vorschlag.bt-vorschlag-aktiv {
    background: var(--bt-flaeche);
    color: var(--bt-rot);
    text-decoration: none;
}

body .bt-vorschlag-symbol {
    flex: 0 0 18px;
    width: 18px;
    height: 16px;
    color: var(--bt-rot);
    text-align: center;
    object-fit: contain;
}

body .bt-vorschlag-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .bt-vorschlag-info {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* Pillen: gleiche Regeln wie Mitgliederbereich und Top-Empfehlungen (Abschnitt Shoplisten) */
body .bt-vorschlag-info {
    line-height: 22px;
}

body a.bt-vorschlag.bt-vorschlag-alle {
    justify-content: center;
    margin-top: 4px;
    border-top: 1px solid var(--bt-linie);
    border-radius: 0 0 10px 10px;
    color: var(--bt-rot);
    font-size: 14px;
}

@media (max-width: 480px) {
    body .bt-vorschlag-info > .bt-pill-gutschein {
        display: none;
    }
}

/* ---------- Shoplisten: Namen, Sterne, Pillen ----------
   Startseite (Top Gutscheine/Cashback/Favoriten), Kategorie-Seitenleiste; Suche und Top-Empfehlungen nutzen dieselben Farben.
   Farben aus :root (--bt-name, --bt-stern, --bt-pill-…). Markup: templates/index2.tpl, templates/angebote_new.tpl (.bt-pill). */
body .star-rating-shop,
body .star-rating-shop span.ratingHover {
    color: var(--bt-stern);
}

/* Zwei Sternfarben: rot auf hellem Grund, gelb im dunklen Titelband der Shopseiten (neben der Breadcrumb) */
body .page-top .star-rating-shop,
body .page-top .star-rating-shop span.ratingHover {
    color: var(--bt-gelb);
}

body .star-rating-shop:before {
    color: var(--bt-stern-leer);
}

body section.featured.map .container.shop .row > div:last-child > a,
body .main.shop .gutscheinShop > div:last-child > a,
body .main.shop .cashbackShop > div:last-child > a {
    color: var(--bt-name);
    font-weight: 700;
}

body section.featured.map .container.shop .row > div:last-child > a:hover,
body .main.shop .gutscheinShop > div:last-child > a:hover,
body .main.shop .cashbackShop > div:last-child > a:hover {
    color: var(--bt-rot);
}

body .bt-keine-bewertung {
    color: var(--bt-text-leise);
    font-size: 12px;
    white-space: nowrap;
}

/* Sterne kompakt, damit Sterne und Pille auch in schmalen Spalten nebeneinander passen */
body section.featured.map .container.shop .star-rating-shop,
body .main.shop .gutscheinShop .star-rating-shop,
body .main.shop .cashbackShop .star-rating-shop {
    display: block;
    width: 5.3em;
    height: 1.35em;
    margin: 0 !important;
    top: 0;
    font-size: 13px !important;
    line-height: 1.6em;
}

body section.featured.map .container.shop .row > div:last-child > div.bt-pill,
body .main.shop .gutscheinShop > div:last-child > div.bt-pill,
body .main.shop .cashbackShop > div:last-child > div.bt-pill,
body .main.shop .coupon-text > div.bt-pill,
.bt-dock .bt-empf-wert > .bt-pill,
body .bt-vorschlag-info > .bt-pill,
body .main.shop .row.coupon > footer > .bt-pill {
    padding: 3px 9px;
    /* weiß, heller Rahmen wie die Kacheln, rund wie die Knöpfe, Schatten nur angedeutet */
    border: 1px solid var(--bt-linie);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    font-size: 12px;
    white-space: nowrap;
}

body section.featured.map .container.shop .row > div:last-child > div.bt-pill.bt-pill-cashback,
body .main.shop .gutscheinShop > div:last-child > div.bt-pill.bt-pill-cashback,
body .main.shop .cashbackShop > div:last-child > div.bt-pill.bt-pill-cashback,
body .main.shop .coupon-text > div.bt-pill.bt-pill-cashback,
.bt-dock .bt-empf-wert > .bt-pill.bt-pill-cashback,
body .bt-vorschlag-info > .bt-pill.bt-pill-cashback {
    background: var(--bt-pill-cashback-bg);
    color: var(--bt-pill-cashback-text);
    font-weight: 400; /* gleiche Schrift wie die Gutschein-Pille */
}

body section.featured.map .container.shop .row > div:last-child > div.bt-pill.bt-pill-gutschein,
body .main.shop .gutscheinShop > div:last-child > div.bt-pill.bt-pill-gutschein,
body .main.shop .cashbackShop > div:last-child > div.bt-pill.bt-pill-gutschein,
body .main.shop .coupon-text > div.bt-pill.bt-pill-gutschein,
.bt-dock .bt-empf-wert > .bt-pill.bt-pill-gutschein,
body .bt-vorschlag-info > .bt-pill.bt-pill-gutschein,
body .main.shop .row.coupon > footer > .bt-pill {
    background: var(--bt-pill-gutschein-bg);
    color: var(--bt-name);
    font-weight: 400;
}

/* Ticker "Letzte Teilnahmen" (templates/ticker.tpl, nur eingeloggt). Ersetzt jquery.li-scroller + css/li-scroller.css.
   Linker Innenabstand = ganze Breite: die Einträge starten rechts außerhalb, -100 % schiebt sie links ganz hinaus, dann von vorn.
   Dauer setzt das Skript in ticker.tpl nach der Breite (gleiches Tempo). Desktop: unten fixiert. Handy: ruhig am Seitenende, wischbar. */
body .ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 36px;
    padding: 0 16px;
    background: #fff;
    border-top: 1px solid var(--bt-linie);
    font-size: 13px;
    line-height: 1;
}

body .ticker > strong {
    flex: none;
    color: var(--bt-name);
    font-weight: 600;
}

body .ticker > div {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

body .ticker ul.newsticker {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0 0 0 100%;
    list-style: none;
    animation: bt-ticker linear infinite;
}

body .ticker:hover ul.newsticker,
body .ticker:focus-within ul.newsticker {
    animation-play-state: paused;
}

body .ticker ul.newsticker li {
    padding-right: 32px;
    white-space: nowrap;
}

/* bestätigte Teilnahmen: Shopname grün (text-success im Template) */
body .ticker ul.newsticker a:not(.text-success) {
    color: var(--bt-text);
}

body .ticker ul.newsticker a:hover,
body .ticker ul.newsticker a:focus {
    color: var(--bt-rot);
}

body .ticker ul.newsticker a > span {
    color: var(--bt-text-leise);
}

@keyframes bt-ticker {
    to { transform: translateX(-100%); }
}

@media (min-width: 768px) {
    body .ticker {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
    }

    /* nur wenn der Ticker wirklich da ist (ohne Teilnahmen wird er nicht ausgegeben) */
    body:has(.ticker) {
        padding-bottom: 36px;
    }

    body:has(.ticker) .scroll-to-top {
        bottom: 36px;
    }
}

/* Handy und "Bewegung reduzieren": kein Lauf, die Liste steht links und lässt sich wischen */
@media (max-width: 767px) {
    body .ticker > div {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
    body .ticker ul.newsticker {
        padding-left: 0;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .ticker > div {
        overflow-x: auto;
    }
}