/*
 * 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: #310000;
    --bt-text-leise: #6e5252;
    --bt-dunkel: #1d1d1b;
    --bt-gelb: #f7eb7e;
    --bt-linie: #f0e4e4;
    --bt-flaeche: #fbf4f4;
    --bt-schatten: 0 2px 4px rgba(49, 0, 0, .05), 0 16px 40px rgba(49, 0, 0, .10);
    --bt-radius: 20px;
}

/* 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%; }
}

/* ---------- 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: #ead9d9;
    box-shadow: none;
}

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

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: #fbf0f0 !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 ---------- */

body .main.shop .featured-box {
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

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) */
body .main.shop .coupon-outer {
    margin: 14px 0;
    will-change: transform;
}

/* 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: #fffdfc;
    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;
}

/* 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;
    will-change: transform;
}

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

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

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

/* 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 {
    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;
}

/* Buttons: eure Farben, modernere Form */
body .main.shop .btn-primary {
    background: var(--bt-verlauf) !important;
    border: 0 !important;
    border-radius: 14px !important;
    min-height: 48px;
    padding: 12px 22px;
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(172, 14, 0, .25);
    text-shadow: none;
}

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

/* ---------- 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;
    min-height: 38px;
    margin: 0;
    padding: 8px 18px 8px 14px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    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 18px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font: 700 11px/15px sans-serif;
    text-align: center;
}

body #search #checks .checkbox label:has(input:checked) {
    border-color: transparent;
    background: var(--bt-verlauf);
    color: #fff;
    box-shadow: 0 6px 14px rgba(172, 14, 0, .35);
}

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: 16px;
    line-height: 1 !important;
}

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

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);
    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);
    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;
    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 {
    visibility: hidden;
}

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

.bt-dock .bt-empf-wert {
    font-weight: 700;
    color: var(--bt-rot);
}

/* Dunkle Boxen rechts, wie "Noch kein Konto?" auf den Shopseiten */
.bt-dock.bt-dock-dunkel {
    background: var(--bt-dunkel);
    border-color: var(--bt-dunkel);
    color: #fff;
}

.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: rgba(255, 255, 255, .14);
}

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

.bt-dock .bt-ring-kern {
    fill: #fff;
}

.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-hoch { color: #5fd38a; }
.bt-dock .bt-bonus-runter { color: #ff8a80; }

.bt-dock .bt-bonus-rest {
    margin: 2px 0 0;
    text-align: center;
    font-size: 12px;
    color: #d8cfcf;
}

.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 rgba(255, 255, 255, .12);
    font-size: 13px;
}

.bt-dock .bt-bonus-punkte dt {
    font-weight: 400;
    color: #d8cfcf;
}

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

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

@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;
}

.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: #e6cfcf;
}

.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 #e6cfcf;
    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 #e6cfcf;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
}

.bt-chat .bt-chat-senden {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--bt-verlauf);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.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) {
    .bt-chat .bt-chat-senden {
        padding: 0 16px;
    }

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

/* Symbol immer gleich breit, damit Einträge ohne Shop-Icon nicht verrutschen */
body #header #mainMenu ul.sub-menu .aktion-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    object-fit: contain;
}

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