/* Startseiten-Hero (Hero-Ersatz) + CMS-Widget (kompaktes Banner). */

/* ── Hero-Ersatz auf der Startseite ── */
.solutioo-degr-hero--replace {
    --solutioo-degr-panel-bg: #f3ede6;
    position: relative;
    /* isolation:isolate -> eigener Stacking-Context fuer die Section. Dadurch bleibt der
       hohe Hotspot-z-index (:6, siehe unten) auf die Section beschränkt und "sticht" nicht
       am Root-Stacking durch (z. B. über spaetere Seitenbereiche). Gleichzeitig konkurrieren
       Media/Panel/Countdown/Hotspot sauber INNERHALB der Section. */
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: var(--solutioo-degr-min-height, clamp(420px, 52vw, 620px));
    margin: 0 0 24px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--solutioo-degr-panel-bg);
    color: #00446a;
    text-align: left;
}

.solutioo-degr-hero--replace.solutioo-degr-hero--no-image {
    min-height: var(--solutioo-degr-min-height, 420px);
}

.solutioo-degr-hero--replace .solutioo-degr-hero__media {
    position: absolute;
    inset: 0;
    /* BEWUSST KEIN z-index (auto): mit z-index:0 wurde die Media ein eigener Stacking-Context
       und "sperrte" den darin liegenden Produkt-Hotspot (z-index:6) UNTER das Panel (z-index:1)
       -> Panel fing Hover/Klick ab, Hotspot-Tooltip liess sich nicht oeffnen. Ohne eigenen
       Media-Stacking-Context konkurriert der Hotspot(:6) direkt im Section-Context und liegt
       damit ueber Panel(:1) und Countdown(:2); Bild/Verlauf(::after :1) bleiben unter dem Panel. */
}

.solutioo-degr-hero--replace .solutioo-degr-hero__media picture,
.solutioo-degr-hero--replace .solutioo-degr-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.solutioo-degr-hero--replace .solutioo-degr-hero__media img {
    object-fit: cover;
    object-position: center right;
}

.solutioo-degr-hero--replace:not(.solutioo-degr-hero--no-image) .solutioo-degr-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--solutioo-degr-panel-bg) 0%,
        var(--solutioo-degr-panel-bg) 34%,
        color-mix(in srgb, var(--solutioo-degr-panel-bg) 80%, transparent) 50%,
        transparent 72%
    );
    pointer-events: none;
    z-index: 1;
}

/* Produkt-Hotspot auf dem Hero-Bild (Modus „Hero ersetzen"): ueber Bild UND
   Verlaufs-Overlay (::after, z-index 1). Der Hotspot liegt bewusst im Bildbereich
   (rechts), das Text-Panel (z-index 1 der Section) bleibt links unberuehrt. */
.solutioo-degr-hero--replace .solutioo-degr-hero__media .bs-hotspot {
    z-index: 6;
}

/*
 * Tooltip + Fokus-Ring nicht abschneiden.
 * Section behält overflow:hidden fuer border-radius; bei Fokus/--open sichtbar.
 * Media-Banner (≤991) sonst immer overflow:hidden → Karte abgeschnitten.
 */
.solutioo-degr-hero--replace:has(.bs-hotspot:focus-within),
.solutioo-degr-hero--replace:has(.bs-hotspot.bs-hotspot--open) {
    overflow: visible;
}
.solutioo-degr-hero--replace:has(.bs-hotspot) .solutioo-degr-hero__media {
    overflow: visible;
}

/* Klarer Tastatur-Fokus am Punkt (Button selbst ohne globalen Doppelring). */
.solutioo-degr-hero .bs-hotspot__trigger {
    scroll-margin-top: 120px;
}
.solutioo-degr-hero .bs-hotspot__trigger:focus-visible .bs-hotspot__dot,
.solutioo-degr-hero .bs-hotspot:focus-within .bs-hotspot__dot {
    transform: scale(1.15);
    animation: none;
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 7px #00446a,
        0 3px 16px rgba(0, 0, 0, 0.35);
}

/* Schmale Viewports: Karte unter dem Punkt (ueber dem Text-Panel), nicht nach oben
   aus dem kurzen Bild-Banner hinaus. */
@media (max-width: 1199px) {
    .solutioo-degr-hero--replace .bs-hotspot__tooltip {
        top: calc(100% + 14px);
        bottom: auto;
        transform: translateX(-50%) translateY(-6px);
    }
    .solutioo-degr-hero--replace .bs-hotspot:focus-within .bs-hotspot__tooltip,
    .solutioo-degr-hero--replace .bs-hotspot.bs-hotspot--open .bs-hotspot__tooltip {
        transform: translateX(-50%) translateY(0) !important;
    }
    .solutioo-degr-hero--replace .bs-hotspot__tooltip::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #fff;
    }
}

.solutioo-degr-hero--replace .solutioo-degr-hero__panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: inherit;
    padding: 48px 32px 120px;
    max-width: 58%;
}

.solutioo-degr-hero--replace.solutioo-degr-hero--no-image .solutioo-degr-hero__panel {
    max-width: 100%;
}

.solutioo-degr-hero--replace .solutioo-degr-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 520px;
}

.solutioo-degr-hero--replace .solutioo-degr-hero__headline {
    margin: 0;
    /* !important: schlaegt die generische Theme-Regel `.column.main h2 { color: var(--bs-font-color) }`
       (customdesign.css), die sonst Farbe/Groesse der <h2>-Headline ueberschreibt. */
    color: var(--solutioo-degr-text, #00446a) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(28px, 4.4vw, 48px) !important;
    line-height: 1.06;
    font-weight: 600 !important;
    letter-spacing: -0.5px;
}

.solutioo-degr-hero--replace .solutioo-degr-hero__amount {
    white-space: nowrap;
}

/* Aktions-Meta-Zeile (Enddatum + Aktionshinweise) folgt der konfigurierten Textfarbe.
   Der Aktionshinweise-Trigger erbt bereits (color: inherit). */
.solutioo-degr-hero--replace .solutioo-promo-meta {
    color: var(--solutioo-degr-text, #4a6886);
}

.solutioo-degr-hero--replace .solutioo-degr-hero__subline {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(17px, 1.7vw, 23px);
    line-height: 1.45;
    color: var(--solutioo-degr-text, #23465f);
}

.solutioo-degr-hero--replace .solutioo-degr-hero__cta {
    display: inline-block;
    margin-top: 8px;
    background: var(--solutioo-degr-cta-bg, #e85d1a);
    color: var(--solutioo-degr-cta-text, #fff);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    padding: 16px 38px;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.solutioo-degr-hero--replace .solutioo-degr-hero__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 68, 106, .22);
    filter: brightness(.93);
    color: var(--solutioo-degr-cta-text, #fff);
    text-decoration: none;
}

.solutioo-degr-hero--replace .solutioo-degr-hero__promo-corner {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    max-width: min(560px, calc(100% - 32px));
}

/* Bleibt der Aktionsslider unter dem Hero-Ersatz sichtbar (Modus replace_inject oder
   replace + „Aktionsslider trotz Aktions-Hero anzeigen = Ja"), wird die Section mit der
   Modifier-Klasse .solutioo-degr-hero--with-slider gerendert. Der Slider (.bs-hero__fader)
   sitzt per margin-top:-70px bewusst ueber dem Hero-Boden (ueberlappt ihn um ~46px,
   z-index:3) und verdeckte so die untere Reihe der absolut positionierten Staffel-Kacheln.
   -> Staffel-Ecke nach oben ziehen (bottom 24 -> 70px) und die Copy-Reserve unten
   entsprechend erhoehen, damit Text-Panel und Kacheln nicht kollidieren. Nur Desktop:
   auf Tablet/Handy sitzt die Staffel im normalen Fluss (position:static) und ist nicht
   betroffen (bottom/padding-Override dort wirkungslos bzw. per Media-Query geregelt). */
@media (min-width: 992px) {
    .solutioo-degr-hero--replace.solutioo-degr-hero--with-slider .solutioo-degr-hero__promo-corner {
        bottom: 70px;
    }

    .solutioo-degr-hero--replace.solutioo-degr-hero--with-slider .solutioo-degr-hero__panel {
        padding-bottom: 166px;
    }
}

/* Weiße Staffel-Kacheln im Hero-Ersatz: Rabattbetrag groesser, Abstand zwischen
   Betrag und Staffel-Schwelle enger (Betrag td + Threshold td stossen fast aneinander).
   Bewusst auf .solutioo-degr-hero--replace gescoped -> Fader/Widget bleiben unberuehrt.
   Spezifitaet (0,2,0) schlaegt die td-Basisregel `.solutioo-promo-cd__table td` (0,1,1). */
.solutioo-degr-hero--replace .solutioo-promo-cd__amount {
    font-size: 24px;
    padding: 10px 12px 1px;
}

.solutioo-degr-hero--replace .solutioo-promo-cd__threshold {
    padding: 0 12px 10px;
}

/* ── CMS-Widget: helles Panel, Staffeln wie Aktionshinweise-Popup ── */
.solutioo-promo-widget.solutioo-promo-widget--notes {
    --sale-navy: #00446a;
    --sale-muted: #5a7388;
    --sale-border: #d5e2eb;
    --sale-navy-soft: #e8f1f6;
    background: transparent;
    color: var(--sale-navy);
    border: 0;
    border-radius: 0;
    margin: 0 0 24px;
    padding: 8px 0 16px;
    text-align: center;
    font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.solutioo-promo-widget__inner {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.solutioo-promo-widget__headline {
    margin: 0;
    color: var(--sale-navy);
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.15;
    font-weight: 800;
}

.solutioo-promo-widget__subline {
    margin: 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--sale-muted);
}

.solutioo-promo-widget__cta {
    display: inline-block;
    margin-top: 4px;
    background: #e85d1a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 999px;
}

.solutioo-promo-widget__cta:hover {
    color: #fff;
    text-decoration: none;
    filter: brightness(.95);
}

/* Legacy-Klasse am Widget (falls alte Markup-Caches): gleiche Optik ohne Aussenkontur */
.solutioo-promo-widget.solutioo-degr-hero:not(.solutioo-promo-widget--notes) {
    background: transparent;
    color: #00446a;
    border: 0;
    border-radius: 0;
    margin: 0 0 24px;
    padding: 8px 0 16px;
    text-align: center;
}

/* ── Gemeinsamer Countdown-/Staffel-Baustein ── */
.solutioo-promo-cd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.solutioo-degr-hero--replace .solutioo-promo-cd {
    align-items: flex-end;
}

.solutioo-promo-cd__countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #00446a;
}

.solutioo-degr-hero--replace .solutioo-promo-cd__countdown {
    justify-content: flex-end;
    flex-wrap: wrap;
    /* Countdown als kompakte weisse Box mit blauer Schrift (Label + Timer). Auf dem
       dunkelblauen Aktions-Panel war die transparente Variante mit heller Schrift + blauer
       Timer-Pille schwer lesbar. align-self:flex-end -> die Box umschliesst nur ihren Inhalt
       (kein Vollbreite-Balken), auch wenn .solutioo-promo-cd auf Mobile/Tablet align-items:
       stretch steht. */
    align-self: flex-end;
    background: #fff;
    color: #00446a;
    border-radius: 999px;
    /* Asymmetrisch: links mehr Platz fuer das Label „Rabatte sinken in", rechts = oben/unten
       (7px), damit der Timer-Chip rundum gleichmaessig von der weissen Pille umschlossen ist. */
    padding: 7px 7px 7px 16px;
}

/* Desktop: Countdown-Pille rechtsbuendig auf die Kachel-Kante ziehen. Die Kacheln sitzen durch
   das Tabellen-`border-spacing:8px` 8px innerhalb der Tabellenkante, die Pille aber genau an der
   Kante -> ohne Korrektur stuende die Pille 8px weiter rechts als die Kacheln. margin-right:8px
   -> Pille endet auf derselben Linie wie die Kacheln (rechter Abstand = unterer Abstand: 32px). */
@media (min-width: 992px) {
    .solutioo-degr-hero--replace .solutioo-promo-cd__countdown {
        margin-right: 8px;
    }
}

/* Timer im Hero-Ersatz: reiner Hellblau-Chip (Marken-Hellblau #e1edf5) mit blauem Text ->
   hebt sich innerhalb der weissen Countdown-Box klar ab, bleibt im "blaue Schrift auf Weiss"-Schema. */
.solutioo-degr-hero--replace .solutioo-promo-cd__timer {
    background: #e1edf5;
    color: #00446a;
    /* Feste Breite fuer den Timer, damit die Countdown-Pille nicht jede Sekunde springt:
       Quicksand liefert KEINE Tabellenziffern (font-variant-numeric:tabular-nums bleibt wirkungslos),
       daher variieren Ziffernbreiten (z.B. „1" schmaler als „0"). min-width deckt die breiteste
       HH:MM:SS-Kombination ab (Content-Box, zentriert). */
    min-width: 74px;
    box-sizing: content-box;
    text-align: center;
}

.solutioo-promo-cd__label {
    font-weight: 600;
}

.solutioo-promo-cd__timer {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    background: #00446a;
    color: #fff;
    border-radius: 999px;
    padding: 6px 14px;
    letter-spacing: .04em;
}

.solutioo-promo-widget .solutioo-promo-cd {
    align-items: center;
    gap: 8px;
}

/* CMS-Widget: Staffeln mittig — NICHT Hero-`flex-end` (rechts unten im Hero-Bild). */
.solutioo-promo-widget .solutioo-promo-cd__table tbody,
.solutioo-promo-widget .solutioo-promo-cd__footnote {
    justify-content: center;
    text-align: center;
}

.solutioo-promo-widget .solutioo-promo-cd__countdown {
    font-size: 16px;
    color: #00446a;
    background: #e8f1f6;
    border-radius: 999px;
    padding: 7px 7px 7px 16px;
}

.solutioo-promo-widget .solutioo-promo-cd__timer {
    background: #00446a;
    color: #fff;
}

/* Staffel-Kacheln wie Aktionshinweise: groesserer Preis, enger zu „ab … Bestellwert". */
.solutioo-promo-widget .solutioo-promo-notes-tiers {
    margin: 0;
}

.solutioo-promo-widget .solutioo-promo-notes-tiers__item {
    padding: 16px 12px;
}

.solutioo-promo-widget .solutioo-promo-notes-tiers__value {
    margin-bottom: 2px;
    font-size: 28px;
    line-height: 1.05;
}

.solutioo-promo-widget .solutioo-promo-notes-tiers__order {
    font-size: 13px;
    line-height: 1.3;
}

/* Fallback: alte Tabellen-Staffeln im Widget ebenfalls Aktionshinweise-nah. */
.solutioo-promo-widget .solutioo-promo-cd__table tr {
    box-shadow: none;
}

.solutioo-promo-widget .solutioo-promo-cd__amount {
    font-size: 28px;
    padding: 14px 12px 1px;
}

.solutioo-promo-widget .solutioo-promo-cd__threshold {
    font-size: 13px;
    padding: 0 12px 14px;
}

.solutioo-promo-widget .solutioo-promo-cd__footnote {
    margin-top: 2px;
}

.solutioo-promo-cd__table {
    border-collapse: separate;
    border-spacing: 8px;
    background: transparent;
    min-width: 0;
    max-width: 100%;
}

.solutioo-promo-cd__table thead {
    display: none;
}

.solutioo-promo-cd__table tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.solutioo-promo-cd__table tr {
    display: flex;
    flex-direction: column;
    min-width: 108px;
    background: #fff;
    border: 1px solid rgba(0, 68, 106, .12);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 68, 106, .08);
}

.solutioo-promo-cd__table td {
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    border: 0;
}

.solutioo-promo-cd__amount {
    order: -1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #00446a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.solutioo-promo-cd__threshold {
    color: #4a6886;
    font-size: 13px;
}

.solutioo-promo-cd__footnote {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.3;
    color: #4a6886;
    opacity: .85;
}

.solutioo-degr-hero--replace .solutioo-promo-cd__footnote {
    text-align: right;
}

/* Fade-up-Einblendung des Countdown-/Staffel-Blocks im Startseiten-Hero
   (Countdown-Zeile zuerst, danach die Kacheln gestaffelt, zuletzt die Fussnote).
   Scoped auf .solutioo-degr-hero--replace -> Widget/Fader bleiben unberuehrt. */
@keyframes solutioo-degr-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.solutioo-degr-hero--replace .solutioo-promo-cd__countdown,
.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr,
.solutioo-degr-hero--replace .solutioo-promo-cd__footnote {
    opacity: 0;
    animation: solutioo-degr-fade-up 0.55s ease-out forwards;
}

.solutioo-degr-hero--replace .solutioo-promo-cd__countdown {
    animation-delay: 0.15s;
}

.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr:nth-child(1) { animation-delay: 0.28s; }
.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr:nth-child(2) { animation-delay: 0.36s; }
.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr:nth-child(3) { animation-delay: 0.44s; }
.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr:nth-child(4) { animation-delay: 0.52s; }
.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr:nth-child(5) { animation-delay: 0.60s; }
.solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr:nth-child(n+6) { animation-delay: 0.68s; }

.solutioo-degr-hero--replace .solutioo-promo-cd__footnote {
    animation-delay: 0.8s;
}

/* Barrierefreiheit: bei reduzierter Bewegung sofort sichtbar, keine Animation. */
@media (prefers-reduced-motion: reduce) {
    .solutioo-degr-hero--replace .solutioo-promo-cd__countdown,
    .solutioo-degr-hero--replace .solutioo-promo-cd__table tbody tr,
    .solutioo-degr-hero--replace .solutioo-promo-cd__footnote {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

.solutioo-promo-widget .solutioo-promo-cd__footnote {
    color: #5a7388;
}

/* ── Aktionsslider-Override (statischer Container in .bs-hero__fader) ── */
.page-wrapper .bs-hero__fader .solutioo-degr-fader.badshop-fader-container {
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    overflow: visible;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader {
    width: 100%;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card {
    aspect-ratio: 3 / 1;
    min-height: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card.badshop-fader {
    /* Original-Aktionsslider: overflow:hidden clippt Bild/Hintergrund an 20px-Rundung */
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Aktionsslider ohne Bild: fester Standard-Fallback (Badshop-Blau + dezente Kreise/Blasen),
   analog zur "Gestaltungs-Tipps vom Profi"-Box auf der Bad-des-Monats-Seite. Nicht einstellbar. */
.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback {
    background: #00446a;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    pointer-events: none;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble--1 {
    top: -38%;
    right: -6%;
    width: 230px;
    height: 230px;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble--2 {
    bottom: -52%;
    left: -3%;
    width: 190px;
    height: 190px;
    background: rgba(255, 255, 255, .085);
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble--3 {
    top: 26%;
    right: 16%;
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, .09);
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__inner {
    position: relative;
    z-index: 2;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__media,
.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__media img {
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__inner {
    position: relative;
    z-index: 2;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__headline,
.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-degr-fader__subline,
.page-wrapper .bs-hero__fader .solutioo-degr-fader__card--has-image .solutioo-promo-cd__countdown {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 32px;
    text-align: center;
    width: 100%;
    max-width: 960px;
    box-sizing: border-box;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__headline {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    font-weight: 800;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__subline {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    opacity: .92;
    max-width: 720px;
}

/* „Jetzt sparen"-Button: Orange mit weisser Schrift (wie im Hero-Ersatz), statt
   weiss mit orangem Text. */
.page-wrapper .bs-hero__fader .solutioo-degr-fader__cta {
    display: inline-block;
    margin-top: 4px;
    background: var(--solutioo-degr-cta-bg, #e85d1a);
    color: var(--solutioo-degr-cta-text, #fff);
    font-weight: 700;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__cta:hover {
    color: var(--solutioo-degr-cta-text, #fff);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    filter: brightness(.93);
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader__inner:has(.solutioo-promo-cd__table) {
    max-width: 100%;
    gap: 14px;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__table tbody {
    justify-content: center;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd {
    align-items: center;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__countdown {
    color: #fff;
    font-size: 18px;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__timer {
    background: rgba(0, 0, 0, .18);
    color: #fff;
}

/* Staffel-Kacheln wie im Hero-Ersatz (.solutioo-degr-hero--replace): weisse Karten mit
   Markenblau-Text statt durchscheinend auf Blau. Groessen/Padding analog (Betrag 24px,
   engerer Abstand Betrag<->Schwelle). */
.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__table tr {
    background: #fff;
    border-color: rgba(0, 68, 106, .12);
    box-shadow: 0 8px 24px rgba(0, 68, 106, .08);
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__amount {
    color: #00446a;
    font-size: 24px;
    padding: 10px 12px 1px;
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__threshold {
    color: #4a6886;
    padding: 0 12px 10px;
}

/* Tablet/Handy: der Aktionsslider-Ersatz (Fader) mit Staffel-Tabelle wird hoeher als das
   3:1-Kartenformat -> feste aspect-ratio aufheben, damit die Karte mit dem Inhalt waechst
   (sonst clippt overflow:hidden die unteren Kacheln + CTA + Meta). Nur die Promo-Karte
   (die die Staffel-Tabelle enthaelt), damit andere Fader-Slides unveraendert bleiben.
   Zusaetzlich: Staffel-Kacheln + CTA kompakter — identische Groessen wie im Hero-Ersatz
   (.solutioo-degr-hero--replace) auf Tablet/Handy. */
@media (max-width: 991px) {
    .page-wrapper .bs-hero__fader .solutioo-degr-fader__card:has(.solutioo-promo-cd__table) {
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
    }

    .page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__amount {
        font-size: 17px;
        padding: 7px 6px 1px;
    }

    .page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__threshold {
        font-size: 13px;
        padding: 0 6px 7px;
    }

    .page-wrapper .bs-hero__fader .solutioo-degr-fader__cta {
        padding: 10px 22px;
        font-size: 14px;
    }
}

.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-cd__footnote {
    color: rgba(255, 255, 255, .85);
    text-align: center;
}

/* ── Aktions-Meta-Zeile (Enddatum + Aktionshinweise-Popup-Trigger) ── */
.solutioo-promo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.3;
    color: #4a6886;
}

.solutioo-promo-meta__sep {
    opacity: .5;
}

.solutioo-promo-meta__notes-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    /* 1px transparenten Rand reservieren: das globale Theme-`button:hover` setzt sonst
       border:1px solid -> der Trigger wuerde um 2px wachsen und (im vertikal zentrierten
       Copy-Block) das ganze Layout verschieben (CTA springt). */
    border: 1px solid transparent;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.solutioo-promo-meta__notes-trigger:hover {
    text-decoration: none;
    /* Theme-`button:hover` (Rand/Hintergrund) neutralisieren -> kein Layout-Sprung. */
    border-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

.solutioo-promo-meta__notes-icon {
    flex: 0 0 auto;
    opacity: .8;
}

/* Heller Text auf dunklem Hintergrund (Fader/Widget). */
.solutioo-promo-widget .solutioo-promo-meta,
.page-wrapper .bs-hero__fader .solutioo-degr-fader .solutioo-promo-meta {
    color: rgba(255, 255, 255, .9);
    justify-content: center;
}

/* ── Aktions-Slide im bestehenden Aktionsslider (Modi slider_inject/replace_inject) ──
   Die Promo-Karte wird als eigener .badshop-banner-item.bs-promo-slide eingefuegt und
   rotiert normal mit. Sie nutzt bewusst dieselben .solutioo-degr-fader__card-Styles wie
   der Vollersatz (--single) — ABER ohne die Container-Overrides, die den ganzen Slider
   ersetzen. Die Karte selbst traegt hier die Klasse .solutioo-degr-fader, damit die
   Countdown-/Meta-Regeln (die auf .solutioo-degr-fader ... zielen) auch hier greifen. */
.page-wrapper .bs-hero__fader .badshop-banner-item.solutioo-degr-slide {
    /* Wie .bs-promo-slide (absolute Stapelung) — Hoehe kommt aus der 3:1-Karte. */
    box-sizing: border-box;
}

.page-wrapper .bs-hero__fader .solutioo-degr-slide .solutioo-degr-fader__card {
    /* Karte fuellt die Slide-Flaeche; Rundung kommt aus der bestehenden Card-Regel. */
    width: 100%;
    margin: 0;
}

/* Bild formatfuellend: schlaegt die generische Slider-Regel
   `.badshop-banner-item img { height:auto !important }`, die sonst das Cover-Verhalten
   der Hero-Karte aushebeln wuerde. */
.page-wrapper .bs-hero__fader .solutioo-degr-slide .solutioo-degr-fader__media img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* ── Aktionshinweise-Popup (Modal) ── */
html.solutioo-promo-notes-open {
    overflow: hidden;
}

/* Hero-/Slider-Hotspots liegen in einem eigenen Stacking-Context, der ueber dem
   (im Fader gerenderten) fixed-Modal liegt -> sie "stechen" sonst durch das
   abdunkelnde Overlay. Solange das Modal offen ist, ausblenden. */
html.solutioo-promo-notes-open .bs-hotspot {
    visibility: hidden !important;
}

.solutioo-promo-notes[hidden] {
    display: none;
}

.solutioo-promo-notes {
    position: fixed;
    inset: 0;
    /* Ueber Mega-Menue/Header (bis z-index ~70001) und Hero-Kacheln. Das Modal
     * wird beim Oeffnen per JS an <body> portiert, damit dieser z-index nicht in
     * einem Hero-Stacking-Context "eingesperrt" wird. */
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #00446a;
    text-align: left;
}

.solutioo-promo-notes__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 68, 106, .6);
}

.solutioo-promo-notes__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    padding: 28px 32px 32px;
    -webkit-overflow-scrolling: touch;
}

.solutioo-promo-notes__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.solutioo-promo-notes__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b8197;
}

.solutioo-promo-notes__close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: -6px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bs-hotspot-navy, #00446a);
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

/* Magento-Core setzt global `button:focus, button:active { background: rgba(0,68,106,.6) }`
   (styles-m.min.css) -> ausgegrautes Navy. Beim Maus-Betrieb soll es nur „normal" + „hover"
   geben: Maus-/Programm-Fokus (z. B. der Fokus beim Öffnen) und Klick/gedrueckt bleiben in
   der Normalfarbe, ohne Extra-Rahmen. Steht bewusst VOR der :hover/:focus-visible-Regel, damit
   der Spezifitaets-Gleichstand (0,2,0) per Quell-Reihenfolge zugunsten von Hover bzw. echtem
   Tastatur-Fokus aufgeloest wird. */
.solutioo-promo-notes__close:focus,
.solutioo-promo-notes__close:active {
    background: var(--bs-hotspot-navy, #00446a);
    outline: none;
    box-shadow: none;
}

.solutioo-promo-notes__close:hover,
.solutioo-promo-notes__close:focus-visible {
    background: #003355;
}

.solutioo-promo-notes__close:focus-visible {
    /* Einzelner Fokusring: navy Ring mit Abstand zum Button; der weisse
     * Dialog-Hintergrund bildet den Zwischenraum. Kein zweiter (weisser)
     * box-shadow-Ring mehr -> kein "doppelter Rahmen". */
    outline: 2px solid #00446a;
    outline-offset: 3px;
    box-shadow: none;
}

.solutioo-promo-notes__body {
    font-size: 15px;
    line-height: 1.5;
    color: #23465f;
}

.solutioo-promo-notes__body :first-child {
    margin-top: 0;
}

.solutioo-promo-notes__body :last-child {
    margin-bottom: 0;
}

.solutioo-promo-notes__body h1,
.solutioo-promo-notes__body h2,
.solutioo-promo-notes__body h3 {
    color: #00446a;
    line-height: 1.2;
}

.solutioo-promo-notes__body ul,
.solutioo-promo-notes__body ol {
    padding-left: 20px;
    margin: 12px 0;
}

.solutioo-promo-notes__body li {
    margin: 6px 0;
}

.solutioo-promo-notes__body a {
    color: #e85d1a;
}

/* Summer-Sale / Aktionshinweise-Inhalt (WYSIWYG + dynamische {{tiers}}) */
.solutioo-promo-notes__dialog:has(.solutioo-promo-notes-sale),
.solutioo-promo-notes__dialog:has(.solutioo-promo-notes-tiers) {
    max-width: 880px;
}

.solutioo-promo-notes__dialog:has(.solutioo-promo-notes-sale) {
    padding: 0;
    overflow: hidden;
}

.solutioo-promo-notes__dialog:has(.solutioo-promo-notes-sale) .solutioo-promo-notes__header {
    margin: 0;
    padding: 18px 24px 0;
}

.solutioo-promo-notes__dialog:has(.solutioo-promo-notes-sale) .solutioo-promo-notes__body {
    padding: 0 0 8px;
}

.solutioo-promo-notes-sale {
    --sale-navy: #00446a;
    --sale-navy-soft: #e8f1f6;
    --sale-orange: #e85d1a;
    --sale-muted: #5a7388;
    --sale-border: #d5e2eb;
    --sale-sand: #f3ede6;
    color: var(--sale-navy);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.55;
}

.solutioo-promo-notes-sale__header {
    padding: 8px 28px 28px;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 68, 106, .98), rgba(0, 90, 130, .92)),
        var(--sale-navy);
}

.solutioo-promo-notes-sale__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sale-navy);
    background: #fff;
    border-radius: 999px;
}

.solutioo-promo-notes-sale__header h2 {
    margin: 0 0 10px;
    font-size: clamp(26px, 4.5vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.solutioo-promo-notes-sale__header p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
    color: rgba(255, 255, 255, .92);
}

.solutioo-promo-notes-sale__content {
    padding: 26px 28px 30px;
}

.solutioo-promo-notes-sale__highlight {
    margin: 0 0 22px;
    padding: 14px 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--sale-navy);
    background: var(--sale-navy-soft);
    border-radius: 8px;
}

/* Div-Grid (nicht table — display:grid auf <table> zerlegt das Layout). */
.solutioo-promo-notes-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 8px 0 26px;
    box-sizing: border-box;
}

table.solutioo-promo-notes-tiers {
    display: table;
    border-collapse: separate;
    border-spacing: 12px;
    table-layout: fixed;
}

.solutioo-promo-notes-tiers__item {
    padding: 18px 12px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sale-border, #d5e2eb);
    border-radius: 12px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.solutioo-promo-notes-tiers__item:hover {
    transform: translateY(-2px);
    border-color: var(--sale-navy, #00446a);
    box-shadow: 0 8px 18px rgba(0, 68, 106, .1);
}

.solutioo-promo-notes-tiers__value {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sale-navy, #00446a);
    white-space: nowrap;
}

.solutioo-promo-notes-tiers__order {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sale-muted, #5a7388);
}

.solutioo-promo-notes-sale__section {
    margin-top: 22px;
}

.solutioo-promo-notes-sale__section h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sale-navy);
}

.solutioo-promo-notes-sale__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.solutioo-promo-notes-sale__list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
}

.solutioo-promo-notes-sale__list li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 800;
    color: var(--sale-orange);
}

.solutioo-promo-notes-sale__footer {
    margin-top: 24px;
    padding: 16px 18px;
    text-align: center;
    color: #fff;
    background: var(--sale-navy);
    border-radius: 10px;
}

.solutioo-promo-notes-sale__footer strong {
    display: block;
    margin-bottom: 2px;
    font-size: 17px;
}

@media (max-width: 720px) {
    .solutioo-promo-notes-tiers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solutioo-promo-notes-sale__header,
    .solutioo-promo-notes-sale__content {
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 460px) {
    .solutioo-promo-notes-tiers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .solutioo-promo-notes__dialog {
        padding: 22px 18px 24px;
        border-radius: 12px;
    }

    .solutioo-promo-notes__dialog:has(.solutioo-promo-notes-sale) {
        padding: 0;
    }
}

@media (max-width: 991px) {
    /* Tablet/Handy: vom Overlay-Layout (Copy ueber Bild, Staffel absolut in der Ecke)
       auf einen sauberen vertikalen Stapel umstellen — Bild-Banner oben, dann Copy,
       dann Countdown/Staffel im normalen Fluss. Sonst ueberlappt die absolut
       positionierte, hohe Staffel (6 Kacheln) die Subline/Meta-Zeile und das Bild
       bleibt hinter dem Verlauf unsichtbar. */
    .solutioo-degr-hero--replace {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    /* Bild als sichtbares Banner oben (nicht mehr als verdecktes Hintergrundbild). */
    .solutioo-degr-hero--replace:not(.solutioo-degr-hero--no-image) .solutioo-degr-hero__media {
        position: relative;
        inset: auto;
        height: clamp(150px, 40vw, 240px);
        flex: 0 0 auto;
        overflow: hidden;
        /* 1px Ueberlappung: der Verlauf endet unten in der Panelfarbe, durch subpixel-
           gerundete Bannerhoehe (clamp/vw) blieb an der Naht Bild/Panel eine duenne Linie.
           Das solide Panel darunter deckt die Naht. */
        margin-bottom: -1px;
    }

    /* Bild exakt auf die Banner-Hoehe klippen. Ohne erzwungene Hoehe behaelt das <img>
       hier seine natuerliche Hoehe (Theme setzt height:auto) und quillt unter das Banner
       -> das Bild erschien hinter der Ueberschrift und der Verlauf (::after, nur Bannerhoehe)
       wirkte "verschoben". Mit height:100% + object-fit:cover greift der Verlauf ueber das
       gesamte sichtbare Bild. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__media img {
        height: 100%;
        object-position: center 30%;
        min-height: 0;
    }

    /* Weicher Verlauf vom Panel-Blau nach oben ins Bild: unten deckt die Panelfarbe,
       nach oben transparent -> Bild-Banner und Blau-Panel verschmelzen nahtlos.
       Nutzt dieselbe Variable wie der Panel-Hintergrund, folgt also der eingestellten Farbe. */
    .solutioo-degr-hero--replace:not(.solutioo-degr-hero--no-image) .solutioo-degr-hero__media::after {
        display: block;
        /* Mehrstufiger, laengerer Verlauf -> weicher Uebergang Bild -> Panelfarbe ohne harte
           Kante (vorher nur 3 Stops, sichtbare Naht). */
        background: linear-gradient(
            to top,
            var(--solutioo-degr-panel-bg) 0%,
            var(--solutioo-degr-panel-bg) 6%,
            color-mix(in srgb, var(--solutioo-degr-panel-bg) 68%, transparent) 26%,
            color-mix(in srgb, var(--solutioo-degr-panel-bg) 30%, transparent) 52%,
            transparent 84%
        );
    }

    /* Copy im normalen Fluss unter dem Bild; keine 180px-Reserve fuer die Ecke mehr. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__panel {
        max-width: 100%;
        min-height: 0;
        padding: 24px 20px 0;
    }

    /* Countdown + Staffel unter der Copy (statt absolut in der Ecke). */
    .solutioo-degr-hero--replace .solutioo-degr-hero__promo-corner {
        position: static;
        inset: auto;
        max-width: none;
        padding: 16px 20px 24px;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd {
        align-items: stretch;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__countdown {
        justify-content: flex-start;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__footnote {
        text-align: left;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__table {
        width: 100%;
    }

    /* Restliche Kacheln der letzten (nicht vollen) Zeile mittig zentrieren. */
    .solutioo-degr-hero--replace .solutioo-promo-cd__table tbody {
        justify-content: center;
    }

    /* border-box: die 1px-Border der Kachel zaehlt in die flex-basis hinein, sonst
       ueberschreitet die Zeile 100% und es passt je eine Kachel weniger pro Zeile. */
    .solutioo-degr-hero--replace .solutioo-promo-cd__table tr {
        min-width: 0;
        box-sizing: border-box;
    }

    /* Kleinerer „Jetzt sparen"-Button auf Tablet. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__cta {
        padding: 12px 30px;
        font-size: 15px;
    }
}

/* Tablet (768–991 px): die Tablet-Breite besser nutzen und das Banner niedriger machen.
   - Copy nutzt die volle Panel-Breite -> Headline bleibt einzeilig (vorher auf 520px
     gedeckelt -> ~250px rechts leer + unnoetiger Zeilenumbruch).
   - Bild-Banner etwas flacher.
   - Alle Staffel-Kacheln in EINER Reihe (6 statt 4+2) -> spart eine Kachelzeile Hoehe
     und fuellt die Breite; kompaktere Schrift wie auf dem Handy, damit "ab 6.250,00 €"
     in die schmaleren Kacheln passt. */
@media (min-width: 768px) and (max-width: 991px) {
    /* Bild-Banner hoeher -> es ist mehr vom Hero-Bild sichtbar (vorher auf 200px gedeckelt). */
    .solutioo-degr-hero--replace:not(.solutioo-degr-hero--no-image) .solutioo-degr-hero__media {
        height: clamp(200px, 34vw, 300px);
    }

    /* Copy als Overlay in den unteren (abgedunkelten) Bildbereich hochziehen (margin-top am
       Panel) und auf 60% Breite begrenzen -> Headline/Subline sitzen oben links ueber dem
       Bild, rechts bleibt das Foto sichtbar. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__copy {
        max-width: 60%;
    }

    /* padding-left/right 24px = gleiche Kante wie die Staffel-Kacheln darunter (vorher 12px ->
       Copy/CTA/Meta sassen naeher am Rand als die Kacheln). margin-top zieht die Copy als
       Overlay ueber den unteren Bildbereich. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__panel {
        padding: 24px 24px 0;
        margin-top: -110px;
    }

    .solutioo-degr-hero--replace .solutioo-degr-hero__promo-corner {
        padding: 8px 12px 20px;
    }

    /* Countdown „Rabatte sinken in …" auf dieselbe Zeile wie die Aktionshinweise-Meta
       ziehen (rechtsbuendig). Nur wenn die Meta-Zeile existiert (:has), sonst wuerde der
       negative Abstand den Countdown in den CTA-Bereich schieben. Panel und Promo-Corner
       sind direkte Geschwister. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__panel:has(.solutioo-promo-meta)
        + .solutioo-degr-hero__promo-corner .solutioo-promo-cd__countdown {
        justify-content: flex-end;
        margin-top: -38px;
        /* Rechte Kante der Countdown-Pille auf 24px = gleiche Kante wie Kacheln/Meta
           (promo-corner padding-right bleibt 12px fuer die zentrierten Kacheln). */
        margin-right: 12px;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__table tr {
        flex: 0 0 calc(16.666% - 8px);
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__table tbody {
        flex-wrap: wrap;
        justify-content: center;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__amount {
        font-size: 17px;
        padding: 7px 6px 1px;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__threshold {
        font-size: 13px;
        padding: 0 6px 7px;
    }
}

@media (max-width: 767px) {
    .solutioo-promo-widget.solutioo-promo-widget--notes,
    .solutioo-promo-widget.solutioo-degr-hero {
        padding: 4px 0 12px;
    }

    .solutioo-promo-widget__headline {
        font-size: 22px;
    }

    .solutioo-promo-widget .solutioo-promo-notes-tiers__value,
    .solutioo-promo-widget .solutioo-promo-cd__amount {
        font-size: 24px;
    }

    /* Gleiche Seitenraender wie das Text-Panel darueber (padding-left/right 20px).
       padding-bottom klein halten: Da die Meta-Zeile per order UNTER die promo-corner rutscht,
       ist dieses padding-bottom der Abstand Kacheln→Meta — sonst steht die Meta zu weit unten. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__promo-corner {
        padding: 16px 20px 10px;
    }

    /* Countdown-Box auf dem Handy linksbuendig (kein rechtsbuendiger Sitz wie auf Tablet). */
    .solutioo-degr-hero--replace .solutioo-promo-cd__countdown {
        align-self: flex-start;
    }

    /* Meta-Zeile („Aktion endet am … | Aktionshinweise") ans Ende UNTER die Staffel-Kacheln
       schieben: panel + copy per display:contents zu Flex-Items des Hero „aufloesen", dann die
       Meta per order hinter die promo-corner ziehen. Die Abstaende/Paddings, die vorher an
       panel/copy hingen, werden dabei auf die einzelnen Elemente uebertragen. */
    .solutioo-degr-hero--replace .solutioo-degr-hero__panel,
    .solutioo-degr-hero--replace .solutioo-degr-hero__copy {
        display: contents;
    }

    .solutioo-degr-hero--replace .solutioo-degr-hero__headline {
        margin: 0;
        padding: 24px 20px 0;
    }

    .solutioo-degr-hero--replace .solutioo-degr-hero__subline {
        margin: 0;
        padding: 12px 20px 0;
    }

    .solutioo-degr-hero--replace .solutioo-promo-meta {
        order: 1;
        margin: 0;
        /* Oben wenig (promo-corner liefert bereits ~10px), unten mehr Luft zum Hero-Rand. */
        padding: 6px 20px 16px;
    }

    /* Handy: 3 Staffel-Kacheln pro Zeile, die die volle Breite fuellen (flex-grow) und links/
       rechts buendig zum Text darueber sitzen. border-spacing:0, weil der Flex-`gap:8px` die
       Abstaende liefert (border-spacing haette die Kacheln zusaetzlich ~8px vom Rand eingerueckt). */
    .solutioo-degr-hero--replace .solutioo-promo-cd__table {
        border-spacing: 0;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__table tr {
        flex: 1 1 calc(33.333% - 6px);
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__amount {
        font-size: 17px;
        padding: 7px 6px 1px;
    }

    .solutioo-degr-hero--replace .solutioo-promo-cd__threshold {
        font-size: 13px;
        padding: 0 6px 7px;
    }

    /* „Jetzt sparen"-Button auf dem Handy deutlich kompakter. align-self/margin, weil die Copy
       per display:contents aufgeloest ist (sonst wuerde der Inline-Button als Flex-Item strecken). */
    .solutioo-degr-hero--replace .solutioo-degr-hero__cta {
        align-self: flex-start;
        margin: 16px 0 0 20px;
        padding: 10px 22px;
        font-size: 14px;
    }
}

/* Deko-Kreise (Fallback-Fader ohne Bild) auf Tablet + Handy neu verteilt:
   grosser Kreis oben rechts, kleiner oben links und ein dritter unten links.
   px-Offsets statt %, da die Karte hier mit dem Inhalt waechst (variable Hoehe)
   und %-Werte den Kreis sonst weit ausserhalb der Karte schieben. Karte hat
   overflow:hidden -> die Kreise „lugen" nur aus den abgerundeten Ecken. */
@media (max-width: 991px) {
    .page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble--1 {
        top: -55px;
        right: -55px;
        left: auto;
        bottom: auto;
        width: 180px;
        height: 180px;
    }

    .page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble--2 {
        bottom: -45px;
        left: -45px;
        top: auto;
        right: auto;
        width: 150px;
        height: 150px;
    }

    .page-wrapper .bs-hero__fader .solutioo-degr-fader__card--fallback .solutioo-degr-fader__bubble--3 {
        /* oben rechts, etwas nach innen -> leichte Ueberlappung mit dem grossen --1 */
        top: 0;
        right: 100px;
        left: auto;
        bottom: auto;
        width: 100px;
        height: 100px;
    }
}