/*
 * Aurora Erlebniswelt
 *
 * Jede Regel steht unter einer Klasse zs-<teil>. Die setzt die Vorlage am
 * <body> (Modus "an") oder das Vorschau-Skript am <html>. Ohne Klasse wirkt
 * hier nichts - abgeschaltet sieht der Shop aus wie ohne Plugin.
 *
 * Elemente, die das Plugin selbst ausgibt (Lauftext, Kaufleiste, Zusatzzeile,
 * Treuepass-Link), sind ohne ihre Klasse versteckt.
 */

/* ======================================================================
 * Palette - alles aus den Farben des Themes Aurora
 *
 * Zwei Ausgangsfarben: Primaerfarbe (--aurora-color-primary) und
 * Akzentfarbe (--aurora-color-accent). Alle Toene hier werden daraus
 * berechnet; im restlichen Stylesheet steht keine feste Farbe ausser Weiss.
 * Die Namen (blau, eis, stempel ...) stammen aus dem ersten Einsatz bei
 * zeckenklatsche und bleiben, weil Erlebniswelten sie per CSS-Klasse nutzen.
 *
 * Helle Flaechen: color-mix mit Weiss - gemessen bei Primaerfarbe #213A8F
 * hoechstens Delta E 0,9 zu den frueher festen Toenen. Leuchtende und graue
 * Toene brauchen eine eigene Helligkeit und Saettigung: relative Farbsyntax
 * (oklch(from ...)), exakt bis auf Rundung. Browser ohne diese Syntax
 * bekommen die Mischung darueber - etwas matter, aber im selben Farbton.
 * ==================================================================== */
:root {
    --zs-blau: var(--aurora-color-primary);
    --zs-stempel: var(--aurora-color-accent);

    --zs-blau-tief: color-mix(in oklab, var(--zs-blau) 80%, black);
    --zs-nacht: color-mix(in oklab, var(--zs-blau) 62%, black);

    --zs-eis: color-mix(in oklab, var(--zs-blau) 6%, white);
    --zs-hellblau: color-mix(in oklab, var(--zs-blau) 7%, white);
    --zs-flaeche: color-mix(in oklab, var(--zs-blau) 10%, white);
    --zs-media-oben: color-mix(in oklab, var(--zs-blau) 4%, white);
    --zs-media-unten: color-mix(in oklab, var(--zs-blau) 9%, white);
    --zs-rand: color-mix(in srgb, var(--zs-blau) 14%, white);
    --zs-rand-kraeftig: color-mix(in oklab, var(--zs-blau) 19%, white);
    --zs-strich: color-mix(in srgb, var(--zs-blau) 45%, white);

    /* Rueckfall fuer Browser ohne relative Farbsyntax */
    --zs-himmel: color-mix(in oklab, var(--zs-blau) 82%, white);
    --zs-konfetti: color-mix(in oklab, var(--zs-blau) 60%, white);
    --zs-glow: color-mix(in oklab, var(--zs-blau) 49%, white);
    --zs-footer-text: color-mix(in oklab, var(--zs-blau) 15%, white);
    --zs-grau-hell: var(--aurora-color-text-muted);
    --zs-grau: color-mix(in srgb, var(--zs-blau) 22%, var(--aurora-color-text-muted));
    --zs-tinte: color-mix(in oklab, var(--zs-blau) 30%, var(--aurora-color-text));
    --zs-kohle: var(--aurora-color-heading);
    --zs-stempel-hell: color-mix(in oklab, var(--zs-stempel) 74%, white);

    --zs-display: 'ZS Anton', Impact, 'Arial Narrow Bold', sans-serif;
    --zs-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
}

@supports (color: oklch(from red l c h)) {
    :root {
        --zs-himmel: oklch(from var(--zs-blau) calc(l + .129) calc(c * 1.33) calc(h - 1.9));
        --zs-konfetti: oklch(from var(--zs-blau) calc(l + .27) calc(c * 1.085) calc(h - 4.3));
        --zs-glow: oklch(from var(--zs-blau) calc(l + .333) calc(c * 1.013) calc(h - 1.2));
        --zs-footer-text: oklch(from var(--zs-blau) .914 calc(c * .246) calc(h + 3.1));
        --zs-grau-hell: oklch(from var(--zs-blau) .566 calc(c * .344) calc(h + 4));
        --zs-grau: oklch(from var(--zs-blau) .499 calc(c * .273) calc(h + 5.4));
        --zs-tinte: oklch(from var(--zs-blau) .386 calc(c * .243) calc(h + 4.8));
        --zs-kohle: oklch(from var(--zs-blau) .205 calc(c * .072) calc(h + 1.3));
        --zs-stempel-hell: oklch(from var(--zs-stempel) calc(l + .146) calc(c * 1.027) calc(h - 4.1));
    }
}

/* Vom Plugin ausgegebene Elemente: ohne ihren Schalter unsichtbar ---------- */
.zs-ticker,
.zs-dosis,
.zs-buybar,
.zs-impfpass-link,
.zs-vorschau-hinweis {
    display: none !important;
}

/* Vorschau-Hinweis ------------------------------------------------------- */
.zs-vorschau-an .zs-vorschau-hinweis {
    display: block !important;
    position: fixed;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1090;
    background: var(--zs-stempel);
    color: #fff;
    font: 700 12px/1.2 var(--zs-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 10px;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
}

/* ======================================================================
 * Punkte im Bild mit Markierungen (Aurora-Baustein): Ring in der
 * Primaerfarbe, damit helle Punkte auch auf hellem Bild stehen. Farbe und
 * Groesse der Punkte stellt die Erlebniswelt ein.
 *
 * Bis 1.3.0 stand hier der Schalter "Farben statt Orange": Akzent, Hover-
 * und Sale-Farben ueberschrieb das Plugin. Die kommen jetzt aus dem Theme.
 * ==================================================================== */
.zs-farbe .au-hotspot__dot {
    box-shadow: 0 0 0 3px var(--zs-blau), 0 4px 12px rgba(0, 0, 0, .35);
}

/* ======================================================================
 * Produktkarten
 * ==================================================================== */
.zs-karten .au-card__description {
    display: none;
}

.zs-karten .zs-dosis {
    display: block !important;
    font: 400 .78rem/1.35 var(--zs-mono);
    color: var(--zs-grau);
    margin-top: .2rem;
}

/* Weisser Bildhintergrund wird hellblau - multiply laesst das Produkt
   unveraendert und faerbt nur das Weiss. */
.zs-karten .au-card__media {
    background: var(--zs-hellblau);
}

.zs-karten .au-card__media img {
    mix-blend-mode: multiply;
}

/* "Tipp" als Stempel */
.zs-karten .au-badge--topseller {
    background: #fff !important;
    color: var(--zs-stempel) !important;
    border: 2px solid var(--zs-stempel);
    border-radius: 3px;
    font-family: var(--zs-mono);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    margin-top: 9px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .zs-karten .au-card {
        transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
    }

    .zs-karten .au-card:hover {
        transform: translateY(-4px) rotate(-.6deg);
        box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--zs-blau) 55%, transparent);
    }
}

/* ======================================================================
 * Stempel beim In-den-Warenkorb
 * ==================================================================== */
/*
 * Der Abdruck springt gross in die Mitte des Bildschirms - ueber allem, auch
 * ueber dem seitlichen Warenkorb (Bootstrap-Offcanvas: 1045), der im selben
 * Moment aufgeht. Dazu Konfetti in den Theme-Farben (Skript, nur ohne "Bewegung
 * reduzieren").
 */
.zs-stempel-buehne {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.zs-stempel-abdruck {
    display: grid;
    gap: .35rem;
    justify-items: center;
    padding: 1.1rem 2rem 1rem;
    font: 700 clamp(2rem, 7vw, 3.4rem)/1 var(--zs-mono);
    letter-spacing: .1em;
    color: var(--zs-stempel);
    background: rgba(255, 255, 255, .96);
    border: 5px solid var(--zs-stempel);
    border-radius: 10px;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--zs-stempel), 0 24px 60px -18px color-mix(in srgb, var(--zs-blau-tief) 55%, transparent);
    opacity: 0;
    transform: scale(2.4) rotate(-16deg);
    animation: zs-stempel 1.9s cubic-bezier(.3, 1.6, .5, 1) forwards;
}

.zs-stempel-abdruck small {
    font-size: .32em;
    letter-spacing: .12em;
    color: var(--zs-blau);
}

@keyframes zs-stempel {
    0% { opacity: 0; transform: scale(2.4) rotate(-16deg); }
    16% { opacity: 1; transform: scale(.94) rotate(-8deg); }
    22% { transform: scale(1) rotate(-8deg); }
    78% { opacity: 1; transform: scale(1) rotate(-8deg); }
    100% { opacity: 0; transform: scale(1.04) rotate(-8deg); }
}

.zs-konfetti {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 16px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .zs-stempel-abdruck {
        animation: zs-stempel-ruhig 1.6s linear forwards;
        transform: rotate(-8deg);
    }

    @keyframes zs-stempel-ruhig {
        0%, 85% { opacity: 1; }
        100% { opacity: 0; }
    }
}

/* ======================================================================
 * Lauftext
 * ==================================================================== */
.zs-lauftext .zs-ticker {
    display: block !important;
    background: var(--zs-kohle);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    border-top: 3px solid #fff;
    position: relative;
    z-index: 1;
}

.zs-ticker__spur {
    display: inline-flex;
    animation: zs-ticker 40s linear infinite;
}

.zs-ticker:hover .zs-ticker__spur {
    animation-play-state: paused;
}

.zs-ticker__liste {
    display: inline-flex;
    gap: 2rem;
    margin: 0;
    padding: .55rem 1rem .55rem 0;
    list-style: none;
    font-family: var(--zs-display);
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.zs-ticker__liste li {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
}

.zs-ticker__liste li::after {
    content: '\271A';
    color: var(--zs-stempel-hell);
    font-size: .9em;
}

@keyframes zs-ticker {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .zs-ticker__spur { animation: none; }
}

/* ======================================================================
 * Abschnitts-Stile (Klasse am Abschnitt der Erlebniswelt)
 * ==================================================================== */

/* Schraege Unterkante wie ein Stadionbanner */
.zs-abschnitte .cms-section.zs-schraeg {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
    padding-bottom: calc(3.2vw + 1rem);
}

/*
 * Schraege Oberkante, die genau in die Unterkante des Abschnitts darueber
 * greift: Der Abschnitt rueckt um die Schraeghoehe nach oben und schneidet
 * seine Oberkante parallel zu. Der Streifen, den der obere Abschnitt
 * freilaesst, wird so von diesem gefuellt - kein Spalt, keine Stufe.
 * 1 px Ueberlappung gegen Haarlinien beim Runden.
 */
.zs-abschnitte .cms-section.zs-schraeg-oben {
    position: relative;
    margin-top: calc(-3.2vw - 1px) !important;
    padding-top: 3.2vw;
    clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%);
}

.zs-abschnitte .cms-section.zs-schraeg-oben.zs-schraeg {
    clip-path: polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
}

/* Baender schliessen ohne Abstand an den Abschnitt darueber an
   (Aurora gibt jedem Abschnitt sonst 32 px Abstand nach oben). */
.zs-abschnitte .cms-section:is(.zs-kohle, .zs-countdown) {
    margin-top: 0;
}

/* Dunkles Band */
.zs-abschnitte .cms-section.zs-kohle {
    background-color: var(--zs-kohle) !important;
    color: #fff;
}

.zs-abschnitte .cms-section.zs-kohle :is(h1, h2, h3, h4, p, .au-counter__label) {
    color: #fff;
}

/* Grosse Zahlen (Aurora-Block "Zaehler") */
.zs-abschnitte .zs-zahlen .au-counter__value,
.zs-abschnitte .zs-zahlen .au-counter__suffix {
    font-family: var(--zs-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1;
}

.zs-abschnitte .zs-zahlen .au-counter__item {
    background: transparent;
    padding-block: .5rem;
}

.zs-abschnitte .zs-kohle.zs-zahlen .au-counter__value {
    color: #fff;
}

.zs-abschnitte .zs-zahlen .au-counter__label {
    font-size: .95rem;
    opacity: .8;
}

/* Countdown als rotes Band */
.zs-abschnitte .cms-section.zs-countdown {
    background-color: var(--zs-stempel) !important;
    color: #fff;
}

.zs-abschnitte .zs-countdown :is(.au-countdown__headline, .au-countdown__until, .au-countdown__expired, .au-countdown__unit) {
    color: #fff;
}

.zs-abschnitte .zs-countdown .au-countdown__field {
    background: rgba(0, 0, 0, .22);
    border-color: transparent;
}

.zs-abschnitte .zs-countdown .au-countdown__number {
    font-family: var(--zs-display);
    font-weight: 400;
    color: #fff;
}

/* Fan-Wand (Aurora-Galerie in einem Abschnitt mit Klasse zs-fanwand) */
.zs-abschnitte .cms-section.zs-fanwand {
    background-color: var(--zs-kohle) !important;
}

.zs-abschnitte .zs-fanwand :is(h2, h3, p) {
    color: #fff;
}

.zs-abschnitte .zs-fanwand .au-gallery-cms__item img {
    border-radius: 6px;
}

.zs-abschnitte .zs-fanwand .au-gallery-cms__caption {
    background: #fff;
    color: var(--aurora-color-heading);
    font-weight: 600;
    font-size: .75rem;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Kneipen-Karten (Markup im HTML-Block, siehe README) */
.zs-kneipen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.zs-kneipe {
    background: #fff;
    border: 1px solid var(--zs-rand);
    border-top: 5px solid var(--zs-blau);
    padding: 1rem 1.1rem 1.1rem;
    display: grid;
    gap: .35rem;
    align-content: start;
}

.zs-abschnitte .zs-kneipe__name {
    margin: 0;
    color: var(--zs-blau);
}

.zs-kneipe__adresse {
    font-style: normal;
    color: var(--zs-tinte);
    font-size: .95rem;
}

.zs-kneipe__route {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zs-stempel);
    text-decoration: none;
    margin-top: .25rem;
}

.zs-kneipe__route:hover {
    text-decoration: underline;
}

/* ======================================================================
 * Geschenk-Finder
 * ==================================================================== */
.zs-gf {
    display: grid;
    gap: 1.1rem;
    max-width: 760px;
    margin-inline: auto;
}

.zs-gf__frage {
    display: grid;
    gap: .5rem;
    border: 0;
    margin: 0;
    padding: 0;
    transition: opacity .2s ease;
}

.zs-gf__frage[disabled] {
    opacity: .4;
}

.zs-gf__frage legend {
    font-family: var(--aurora-font-family-heading, inherit);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--aurora-color-heading, var(--aurora-color-heading));
    margin-bottom: .2rem;
}

.zs-gf__optionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.zs-gf__option {
    font-weight: 600;
    font-size: .95rem;
    border: 2px solid var(--zs-blau);
    background: #fff;
    color: var(--zs-blau);
    border-radius: 999px;
    padding: .35rem .95rem;
    cursor: pointer;
}

.zs-gf__option[aria-pressed="true"] {
    background: var(--zs-blau);
    color: #fff;
}

.zs-gf__option:focus-visible {
    outline: 3px solid var(--zs-stempel);
    outline-offset: 2px;
}

.zs-gf__ergebnis {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
    background: var(--zs-hellblau);
    border-radius: 12px;
    padding: 1rem;
}

.zs-gf__ergebnis img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
}

.zs-gf__name {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--zs-blau);
    margin: 0 0 .3rem;
}

.zs-gf__text {
    font-size: .92rem;
    color: var(--zs-tinte);
    margin: 0 0 .5rem;
}

.zs-gf__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}

.zs-gf__preis {
    font-weight: 700;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .zs-gf__ergebnis { grid-template-columns: 1fr; }
    .zs-gf__ergebnis img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

/* ======================================================================
 * Kaufleiste am Handy
 * ==================================================================== */
@media (max-width: 767.98px) {
    .zs-kaufleiste .zs-buybar.is-sichtbar {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        align-items: center;
        gap: .75rem;
        padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--zs-rand);
        box-shadow: 0 -10px 24px -14px color-mix(in srgb, var(--zs-blau-tief) 45%, transparent);
        animation: zs-hoch .25s ease-out;
    }

    .zs-kaufleiste.zs-kaufleiste-offen .scroll-up-container,
    .zs-kaufleiste.zs-kaufleiste-offen .au-scrollup {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@keyframes zs-hoch {
    from { transform: translateY(100%); }
}

.zs-buybar__text {
    display: grid;
    min-width: 0;
    flex: 1;
}

.zs-buybar__name {
    font-size: .8rem;
    color: var(--zs-grau);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zs-buybar__preis {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--zs-blau);
    font-variant-numeric: tabular-nums;
}

.zs-buybar__knopf {
    flex: 0 0 auto;
    background: var(--zs-blau);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    padding: .7rem 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
    .zs-kaufleiste .zs-buybar.is-sichtbar { animation: none; }
}

/* ======================================================================
 * Treuepass (Kundenkonto)
 * ==================================================================== */
.zs-impfpass .zs-impfpass-link {
    display: block !important;
}

.zs-pass {
    display: grid;
    gap: 1.25rem;
    max-width: 720px;
}

.zs-pass__titel {
    color: var(--zs-blau);
    margin-bottom: .35rem;
}

.zs-pass__intro {
    color: var(--zs-tinte);
    margin: 0;
}

.zs-pass__raster {
    list-style: none;
    margin: 0;
    padding: 1.1rem;
    background: var(--zs-hellblau);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(min(var(--zs-schwelle, 4), 4), 1fr);
    gap: .7rem;
}

.zs-pass__feld {
    aspect-ratio: 1;
    border: 2px dashed var(--zs-strich);
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: 400 .75rem/1.25 var(--zs-mono);
    color: var(--zs-grau-hell);
    padding: .3rem;
}

.zs-pass__feld.is-bonus {
    border-color: var(--zs-stempel);
    color: var(--zs-stempel);
}

.zs-pass__feld.is-gestempelt {
    border: 3px solid var(--zs-stempel);
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--zs-stempel);
    color: var(--zs-stempel);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    transform: rotate(-6deg);
}

.zs-pass__feld.is-gestempelt:nth-child(even) {
    transform: rotate(4deg);
}

.zs-pass__stand {
    margin: 0;
    color: var(--zs-tinte);
}

.zs-pass__codes ul {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: grid;
    gap: .5rem;
}

.zs-pass__codes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.zs-pass__codes li.is-eingeloest {
    opacity: .55;
}

.zs-pass__code {
    font: 700 1.05rem/1 var(--zs-mono);
    background: #fff;
    border: 2px dashed var(--zs-blau);
    color: var(--zs-blau);
    padding: .45rem .7rem;
    border-radius: 6px;
}

.zs-pass__los {
    justify-self: start;
}

/* ======================================================================
 * Farbiges Einkaufserlebnis (Schalter "farbe")
 *
 * Nur Flaechen, Karten, Knoepfe und Baender - Ueberschriften bleiben wie im
 * Original. Grundidee: getoenter Grund als Seitengrund, damit weisse Karten
 * herausstehen; Flutlicht in der Primaerfarbe fuer das Produkt-Schaufenster;
 * dunkler Footer in der Primaerfarbe; die Akzentfarbe nur als Funke.
 * ==================================================================== */
.zs-farbe {
    --zs-glanz: linear-gradient(180deg, var(--zs-himmel) 0%, var(--zs-blau) 100%);

    --aurora-body-background-color: var(--zs-eis);
    --aurora-color-surface-alt: var(--zs-flaeche);
    --aurora-card-radius: 16px;
    --aurora-card-border-color: transparent;
    --aurora-card-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 10px 28px -18px color-mix(in srgb, var(--zs-blau-tief) 45%, transparent);
    --aurora-card-image-bg: #ffffff;

    --aurora-footer-bg: var(--zs-blau-tief);
    --aurora-footer-text: var(--zs-footer-text);
    --aurora-footer-headline-color: #ffffff;
    --aurora-footer-link-color: var(--zs-footer-text);
    --aurora-footer-link-hover-color: #ffffff;
    --aurora-footer-border-color: rgba(255, 255, 255, .14);
    --aurora-footer-newsletter-bg: transparent;
    --aurora-social-icon-bg: var(--zs-himmel);
    --aurora-social-icon-color: #ffffff;
    --aurora-social-icon-hover-color: var(--zs-blau-tief);
}

/* Seitengrund: getoenter Grund statt Weiss - Aurora malt den Inhalt sonst weiss drueber */
.zs-farbe body,
body.zs-farbe {
    background-color: var(--zs-eis);
}

.zs-farbe main,
.zs-farbe .content-main,
.zs-farbe .cms-page {
    background-color: transparent;
}

/* Footer: Links und Texte in hellem Blau auf Tiefblau */
.zs-farbe :is(.footer-main, .au-footer) {
    background: var(--aurora-footer-bg);
    color: var(--aurora-footer-text);
}

.zs-farbe :is(.footer-main, .au-footer) :is(a, .footer-link) {
    color: var(--aurora-footer-link-color);
}

.zs-farbe :is(.footer-main, .au-footer) a:hover {
    color: #ffffff;
}

.zs-farbe :is(.footer-main, .au-footer) .form-check-label {
    color: var(--aurora-footer-text);
}

/* ---------------------------------------------------------------------
 * Knoepfe: Pille mit Farbverlauf und Glanzstreifen beim Ueberfahren
 * ------------------------------------------------------------------- */
.zs-farbe :is(.btn-primary, .btn-buy) {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--zs-glanz);
    color: #fff;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--zs-blau) 75%, transparent);
}

.zs-farbe :is(.btn-primary, .btn-buy)::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}

.zs-farbe :is(.btn-primary, .btn-buy):is(:hover, :focus-visible) {
    background: var(--zs-glanz);
    color: #fff;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .zs-farbe :is(.btn-primary, .btn-buy) {
        transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
    }

    .zs-farbe :is(.btn-primary, .btn-buy):hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--zs-blau) 85%, transparent);
    }

    .zs-farbe :is(.btn-primary, .btn-buy):hover::after {
        opacity: 1;
        animation: zs-glanz .7s cubic-bezier(.16, 1, .3, 1);
    }
}

@keyframes zs-glanz {
    from { left: -60%; }
    to { left: 120%; }
}

/* Zweitknoepfe ("Details") als blaue Umrisspille */
.zs-farbe .au-card__action :is(.btn-light, .btn-outline-primary, .btn-secondary) {
    border-radius: 999px;
    border: 2px solid var(--zs-blau);
    background: #fff;
    color: var(--zs-blau);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Produktkarten
 * ------------------------------------------------------------------- */
.zs-farbe .au-card__media img {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.zs-farbe .au-card__price {
    font-size: 1.15rem;
    font-weight: 700;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .zs-farbe .au-card:hover {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--zs-himmel) 55%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--zs-blau-tief) 60%, transparent);
    }

    .zs-farbe .au-card:hover .au-card__media img {
        transform: scale(1.05);
    }

    /* Aurora "Umrandung beim Ueberfahren" eingeschaltet: Die Umrandung kommt
       aus dem Theme (Staerke, Farbe), hier bleibt nur der weiche Schatten. */
    :is(.zs-farbe.au-card-hover-ring, .zs-farbe .au-card-hover-ring) .au-card:hover {
        box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--zs-blau-tief) 60%, transparent);
    }
}

/* Karten-Bildflaeche: mit Schalter "karten" hellblau, sonst weiss - beides
   passt zum getoenter Grund; multiply greift weiter. */
.zs-farbe.zs-karten .au-card__media,
.zs-farbe .zs-karten .au-card__media {
    background: linear-gradient(180deg, var(--zs-media-oben) 0%, var(--zs-media-unten) 100%);
}

/* Video-Badge blau, Rabatt rot - als Pille */
.zs-farbe .au-badge {
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * Abschnitt "Flutlicht": Produkt-Schaufenster auf Primaerfarbe
 * (CSS-Klasse zs-flutlicht am Abschnitt)
 * ------------------------------------------------------------------- */
.zs-farbe .cms-section.zs-flutlicht {
    background:
        radial-gradient(60% 70% at 15% 0%, color-mix(in srgb, var(--zs-glow) 45%, transparent), transparent 60%),
        radial-gradient(55% 65% at 85% 0%, color-mix(in srgb, var(--zs-glow) 38%, transparent), transparent 60%),
        linear-gradient(180deg, var(--zs-blau) 0%, var(--zs-blau-tief) 100%);
    padding-block: 2.5rem 3rem;
}

.zs-farbe .cms-section.zs-flutlicht :is(h1, h2, h3, p) {
    color: #fff;
}

/* Slider-Pfeile auf dem dunklen Grund weiss */
.zs-farbe .cms-section.zs-flutlicht :is(.base-slider-controls-prev, .base-slider-controls-next, .product-slider-controls-prev, .product-slider-controls-next) {
    background: #fff;
    color: var(--zs-blau);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * Blaues Textband (Abschnitt mit Hintergrundfarbe): Schal-Streifen
 * ------------------------------------------------------------------- */
.zs-farbe .cms-section.bg-color:not(.zs-flutlicht):not(.zs-countdown):not(.zs-kohle):not(.zs-fanwand) {
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 22px, transparent 22px 44px);
}

/* ---------------------------------------------------------------------
 * Lauftext wie ein Fanschal: weiss, blaue Schrift, rote Kreuze
 * ------------------------------------------------------------------- */
.zs-farbe.zs-lauftext .zs-ticker,
.zs-farbe .zs-lauftext .zs-ticker,
.zs-lauftext.zs-farbe .zs-ticker {
    background: #fff;
    color: var(--zs-blau);
    border-top: 0;
    border-bottom: 3px solid var(--zs-blau);
}

.zs-farbe .zs-ticker__liste li::after {
    color: var(--zs-stempel);
}

/* ---------------------------------------------------------------------
 * Weisse Inseln auf getoenter Grund: Finder, Kneipen, Kundenstimmen
 * ------------------------------------------------------------------- */
.zs-farbe .zs-gf {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .zs-gf__option[aria-pressed="true"] {
    background: var(--zs-glanz);
    border-color: transparent;
}

.zs-farbe .zs-kneipe {
    border: 0;
    border-top: 5px solid var(--zs-blau);
    box-shadow: 0 10px 26px -20px color-mix(in srgb, var(--zs-blau-tief) 60%, transparent);
}

.zs-farbe .au-testimonials__item,
.zs-farbe .au-quote {
    background: #fff;
}

/* ---------------------------------------------------------------------
 * Seitlicher Warenkorb: blaue Kopfzeile
 * ------------------------------------------------------------------- */
.zs-farbe .offcanvas.cart-offcanvas .offcanvas-cart-header,
.zs-farbe .offcanvas .offcanvas-cart-header {
    background: var(--zs-glanz);
    color: #fff;
    margin: -1rem -1rem 1rem;
    padding: 1rem;
}

.zs-farbe .offcanvas-cart-header,
.zs-farbe .offcanvas-cart-header * {
    color: #fff;
}

/* ---------------------------------------------------------------------
 * Produktseite: Kaufbereich als weisse Insel
 * ------------------------------------------------------------------- */
.zs-farbe .au-detail__buybox {
    background: #fff;
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .product-detail-price {
    color: var(--zs-blau);
}

@media (prefers-reduced-motion: reduce) {
    .zs-farbe :is(.btn-primary, .btn-buy)::after { display: none; }
    .zs-farbe .au-card__media img { transition: none; }
}

/* ---------------------------------------------------------------------
 * Produktseite: Reiter "Beschreibung / Bewertungen" und Produktbild als
 * weisse Inseln wie der Kaufbereich - runde Ecken, Schatten, Luft innen.
 * Die Querverkauf-Reiter (product-detail-cross-selling) bleiben flach.
 * ------------------------------------------------------------------- */
.zs-farbe .product-detail-tabs .card.card-tabs {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .product-detail-tabs .card-header {
    padding: .35rem 1.75rem 0;
    background: #fff;
    border-radius: 0;
}

/* Der aktive Reiter brachte eine eigene weisse, eckige Flaeche mit
   (Bootstrap nav-tabs) - sie verdeckte die runde Ecke oben links. */
.zs-farbe .product-detail-tabs .product-detail-tab-navigation-link,
.zs-farbe .product-detail-tabs .product-detail-tab-navigation-link.active {
    background: transparent;
    border-radius: 0;
}

.zs-farbe .product-detail-tabs .product-detail-tabs-content.card-body {
    padding: 1.75rem 1.75rem 2rem;
}

.zs-farbe .au-detail__media .gallery-slider-row {
    background: #fff;
    border-radius: 18px;
    padding: 1.25rem .75rem;
    margin-inline: 0;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .au-detail__media :is(.gallery-slider-image, .gallery-slider-single-image img) {
    border-radius: 12px;
}

.zs-farbe .au-detail__media .gallery-slider-thumbnails-item-inner {
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .zs-farbe .product-detail-tabs .card-header {
        padding-inline: 1.1rem;
    }

    .zs-farbe .product-detail-tabs .product-detail-tabs-content.card-body {
        padding: 1.25rem 1.1rem 1.5rem;
    }

    .zs-farbe .au-detail__media .gallery-slider-row {
        padding: .75rem .25rem;
    }
}

/* ======================================================================
 * Kategorie-Kacheln (Schalter "abschnitte")
 *
 * Markup im Aurora-Block "Eigenes HTML", siehe README. Ganze Kachel ist der
 * Link; Text unten auf einem blauen Verlauf, damit er auf jedem Foto lesbar
 * bleibt. Ohne Plugin stehen Bild und Text schlicht untereinander.
 * ==================================================================== */
.zs-abschnitte .zs-kacheln {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.zs-abschnitte .zs-kachel {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    text-decoration: none;
    background: var(--zs-blau-tief);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 8%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--zs-blau-tief) 70%, transparent);
}

.zs-abschnitte .zs-kachel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Verlauf von unten: Text bleibt auf hellen wie dunklen Bildern lesbar */
.zs-abschnitte .zs-kachel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, color-mix(in srgb, var(--zs-nacht) 94%, transparent) 0%, color-mix(in srgb, var(--zs-nacht) 62%, transparent) 30%, color-mix(in srgb, var(--zs-nacht) 0%, transparent) 58%);
}

.zs-abschnitte .zs-kachel__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: .3rem;
    justify-items: start;
    padding: 1.4rem 1.6rem 1.5rem;
}

.zs-abschnitte .zs-kachel__titel {
    font-family: var(--aurora-font-family-heading, inherit);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.zs-abschnitte .zs-kachel__zeile {
    font-size: .98rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
    max-width: 34ch;
}

.zs-abschnitte .zs-kachel__los {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .55rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: #fff;
    color: var(--zs-blau);
    font-weight: 700;
    font-size: .92rem;
}

.zs-abschnitte .zs-kachel__pfeil {
    display: inline-block;
}

.zs-abschnitte .zs-kachel:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
    box-shadow: 0 0 0 3px var(--zs-blau);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .zs-abschnitte .zs-kachel {
        transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
    }

    .zs-abschnitte .zs-kachel img {
        transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    }

    .zs-abschnitte .zs-kachel__pfeil {
        transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    }

    .zs-abschnitte .zs-kachel:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--zs-himmel) 55%, transparent), 0 26px 48px -24px color-mix(in srgb, var(--zs-blau-tief) 80%, transparent);
    }

    .zs-abschnitte .zs-kachel:hover img {
        transform: scale(1.05);
    }

    .zs-abschnitte .zs-kachel:hover .zs-kachel__pfeil {
        transform: translateX(4px);
    }
}

@media (max-width: 767.98px) {
    .zs-abschnitte .zs-kacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .zs-abschnitte .zs-kachel__text {
        padding: 1rem 1.1rem 1.1rem;
        gap: .15rem;
    }

    /* Am Handy nur Name und Knopf - sonst deckt der Text das halbe Bild zu */
    .zs-abschnitte .zs-kachel__zeile {
        display: none;
    }

    .zs-abschnitte .zs-kachel::before {
        background: linear-gradient(to top, color-mix(in srgb, var(--zs-nacht) 90%, transparent) 0%, color-mix(in srgb, var(--zs-nacht) 45%, transparent) 24%, color-mix(in srgb, var(--zs-nacht) 0%, transparent) 44%);
    }

    .zs-abschnitte .zs-kachel__los {
        margin-top: .35rem;
        padding: .4rem .9rem;
        font-size: .88rem;
    }
}

/* ---------------------------------------------------------------------
 * Kategorieseite: Filter
 *
 * Aurora zeichnet die Filterknoepfe ohne eigene Flaeche - auf dem
 * eisblauen Grund verschwanden sie darin. Jetzt weisse Pillen mit Rand.
 *
 * Ueberlappen: Aurora setzt fuer die Einblend-Animation dauerhaft
 * will-change: transform auf jeden Block. Jeder Block wird damit eine
 * eigene Ebene, und der spaetere Block (Sortierleiste, Produktkacheln) liegt
 * ueber dem frueheren - das aufgeklappte Filterfenster rutschte darunter,
 * trotz z-index 1000. Der Block mit den Filtern wird deshalb nach vorn geholt.
 * ------------------------------------------------------------------- */
.zs-farbe .cms-block:has(.cms-element-sidebar-filter) {
    position: relative;
    z-index: 30;
}

/* Farben ueber Aurora-Variablen: Aurora faerbt Knoepfe beim Ueberfahren mit
   .btn:hover:not(:disabled):not(.disabled) - spezifischer als jede Regel hier.
   Ohne diese Variablen wurde der Knopf beim Ueberfahren durchsichtig. */
.zs-farbe .filter-panel-item-toggle {
    --au-btn-bg: #fff;
    --au-btn-border: var(--zs-rand-kraeftig);
    --au-btn-hover-bg: var(--zs-blau);
    --au-btn-hover-border: var(--zs-blau);
    background-color: #fff;
    border-color: var(--zs-rand-kraeftig);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 6px 14px -10px color-mix(in srgb, var(--zs-blau-tief) 45%, transparent);
}

/* Gleiche Spezifitaet wie Auroras Regel plus Klasse - sonst bleibt die
   Schrift dunkel auf Blau */
.zs-farbe .filter-panel-item-toggle.btn:hover:not(:disabled):not(.disabled) {
    border-color: var(--zs-blau);
    background-color: var(--zs-blau);
    color: #fff;
}

/* Pfeil im Knopf: Shopware gibt dem Symbol eine eigene graue Farbe */
.zs-farbe .filter-panel-item-toggle:hover :is(.icon, svg, svg use, svg path) {
    color: #fff;
    fill: #fff;
}

.zs-farbe .filter-panel-item-toggle[aria-expanded='true'] {
    border-color: var(--zs-blau);
    background-color: #fff;
}

.zs-farbe .filter-panel-item-dropdown {
    border-color: var(--zs-rand-kraeftig);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 8%, transparent), 0 22px 44px -18px color-mix(in srgb, var(--zs-blau-tief) 55%, transparent);
}

/* Telefon: Filter liegen dort im seitlichen Fenster - keine Pillen-Schatten */
@media (max-width: 991.98px) {
    .zs-farbe .filter-panel-item-dropdown {
        box-shadow: none;
        border-radius: 0;
    }
}

/* ---------------------------------------------------------------------
 * Kasse (Aurora "Kasse auf einer Seite", Aufbau "Geteilt"):
 * Abschnitte als weisse Inseln wie auf der Produktseite
 *
 * Links stehen Kontakt und Adressen, Versandart, Zahlungsart und "Pruefen &
 * Bestellen" je in einer Karte auf dem getoenter Grund; Aurora trennt sie sonst mit
 * Linien. "Bereits registriert?" steht oben in der ersten Karte - es kommt
 * aus demselben Block des Standards wie das Formular.
 *
 * Rechts verliert die Spalte ihr eigenes Grau und den Strich zur Mitte: Sie
 * steht auf demselben Grund, Bestellung, Summe, Gutschein und Vorteile
 * liegen in einer Karte. Logo und Fussbereich bleiben auf dem Grund.
 * ------------------------------------------------------------------- */
.zs-farbe {
    --aurora-checkout-split-aside-bg: transparent;
}

.zs-farbe .au-checkout--split .au-checkout__section {
    padding: 1.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .au-checkout--split .au-checkout__section + .au-checkout__section {
    margin-top: 1.25rem;
    padding-top: 1.75rem;
    border-top: 0;
}

.zs-farbe .checkout-container:has(.au-checkout--split) > .checkout-aside {
    border-left: 0;
}

.zs-farbe .checkout-container:has(.au-checkout--split) .checkout-aside-container {
    padding: 1.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

/* Klappbox "Bestelluebersicht" auf dem Telefon: dieselbe Insel */
.zs-farbe .au-checkout--split .au-checkout__mobile-summary {
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

@media (max-width: 991.98px) {
    .zs-farbe .au-checkout--split .au-checkout__section,
    .zs-farbe .au-checkout--split .au-checkout__section + .au-checkout__section,
    .zs-farbe .checkout-container:has(.au-checkout--split) .checkout-aside-container {
        padding: 1.25rem 1.1rem;
    }

    /* Am Telefon stehen Positionen, Summe und Gutschein oben in der Klappbox;
       in der Karte bleiben nur die Vorteile - ohne Abstand ueber dem Titel. */
    .zs-farbe .checkout-container:has(.au-checkout--split) .au-split__trust-title {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------
 * Anmelden / Registrieren (/account/login) und Passwort vergessen
 * (/account/recover): weisse Inseln wie auf der Produktseite
 *
 * Links "Ich bin bereits Kunde" und darunter die Vorteile, rechts "Ich bin
 * Neukunde!" - je eine Karte. Die Seitenueberschrift bleibt auf dem Grund.
 * Die Karte der Kasse (register-card im geteilten Aufbau) steht nicht in
 * .account-register und bekommt keine zweite Karte.
 * ------------------------------------------------------------------- */
.zs-farbe .account-register :is(.login-card, .register-card, .login-advantages),
.zs-farbe .account-recover-password-form.card {
    padding: 1.75rem;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .account-register .login-card {
    margin-bottom: 1.25rem !important;
}

/* Der Kasten traegt den Abstand - innen keiner mehr doppelt */
.zs-farbe .account-register :is(.login-card, .register-card) > .card-body,
.zs-farbe .account-recover-password-form.card > :is(.card-title, .card-body) {
    padding-inline: 0;
}

.zs-farbe .account-register :is(.login-card, .register-card) > .card-body {
    padding-block: 0;
}

.zs-farbe .account-recover-password-form.card > .card-title {
    padding-top: 0;
}

.zs-farbe .account-recover-password-form.card > .card-body {
    padding-bottom: 0;
}

/* Vorteile: Ueberschrift ohne Abstand nach oben, Liste ohne Rest unten */
.zs-farbe .account-register .login-advantages > ul {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .zs-farbe .account-register :is(.login-card, .register-card, .login-advantages),
    .zs-farbe .account-recover-password-form.card {
        padding: 1.25rem 1.1rem;
    }

    /* Untereinander: Abstand zwischen Vorteilen und Neukunden-Karte */
    .zs-farbe .account-register .login-advantages {
        margin-bottom: 1.25rem;
    }
}

/* ---------------------------------------------------------------------
 * Kasse (geteilter Aufbau), Feinschliff
 *
 * - Kein Logo ueber dem Formular: Beide Spalten beginnen auf einer Hoehe.
 * - Formular und rechte Karte ruecken zusammen. Aurora zentriert das
 *   Formular in seiner Spalte und setzt die Karte mit breitem Rand in die
 *   rechte - gemessen 134 px Luecke bei 1440 px. Jetzt 32 px, etwa so viel
 *   wie zwischen Bild und Kaufbereich auf der Produktseite.
 * - "Die mit einem Stern (*) markierten Felder ..." steht am Ende des
 *   Formulars (dort gibt ihn der Standard aus), nicht unter dem Knopf.
 * - Rechtslinks, "Vertrag widerrufen" und die Hinweise unten in einer Karte,
 *   der Knopf mit Abstand unter den Links.
 * ------------------------------------------------------------------- */
.zs-farbe .au-checkout--split .au-split__logo {
    display: none;
}

@media (min-width: 992px) {
    /* Unten kein Rand: Der Abstand zur Fusskarte kommt von dort, 20 px wie
       zwischen den Karten (vorher 32 + 16 px). */
    .zs-farbe .checkout-container:has(.au-checkout--split) > .checkout-main {
        padding-inline-end: 16px;
        padding-bottom: 0;
    }

    .zs-farbe .checkout-container:has(.au-checkout--split) > .checkout-main > :is(.flashbags, .au-checkout--split) {
        margin-inline: auto 0;
    }

    .zs-farbe .checkout-container:has(.au-checkout--split) > .checkout-aside {
        padding-inline-start: 16px;
    }

    .zs-farbe .checkout-container:has(.au-checkout--split) > .au-split__footer {
        max-width: calc(640px + 16px + clamp(24px, 4vw, 64px));
        margin-inline: auto 0;
        padding-top: 1.25rem;
        padding-inline-end: 16px;
    }
}

.zs-farbe .au-checkout--split #auroraCheckoutForm .register-required-info {
    display: block;
    margin: 1.25rem 0 0;
    color: var(--aurora-color-text-muted);
    font-size: var(--aurora-font-size-small);
}

.zs-farbe .au-checkout--split .au-split__review .au-checkout__required {
    display: none;
}

.zs-farbe .checkout-container > .au-split__footer {
    margin-top: 0;
    padding-top: 1.25rem;
    border-top: 0;
}

.zs-farbe .checkout-container > .au-split__footer > footer {
    padding: 1.5rem 1.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-container > .au-split__footer .au-checkout__legal {
    padding-top: 0;
}

.zs-farbe .checkout-container > .au-split__footer .au-footer__revocation {
    margin-top: 1.25rem;
    padding-bottom: 0;
}

/* Unter dem Knopf 20 px bis zu den Hinweisen. Die Zeile fuer Zahlungs- und
   Versandlogos ist hier leer, stand aber mit 32 px Hoehe dazwischen
   (gemessen 68 px Luecke). */
.zs-farbe .checkout-container > .au-split__footer .au-footer__bottom {
    padding-top: 1.25rem;
}

.zs-farbe .checkout-container > .au-split__footer .au-footer__bottom-inner:not(:has(img, svg, li)):not(:has(:not(ul, div))) {
    display: none;
}

.zs-farbe .checkout-container > .au-split__footer .au-footer__bottom-inner {
    padding-block: 0;
}

@media (max-width: 991.98px) {
    /* Einzug wie die Spalten darueber (12 statt 16 px) - sonst stand die
       Karte 4 px schmaler als die anderen. */
    .zs-farbe .checkout-container:has(.au-checkout--split) > .au-split__footer {
        padding-inline: 12px;
    }

    .zs-farbe .checkout-container > .au-split__footer > footer {
        padding: 1.25rem 1.1rem;
    }
}

/* ---------------------------------------------------------------------
 * Bestellung abschliessen (/checkout/confirm): Inseln wie Kasse und
 * Produktseite
 *
 * Aurora setzt die Abschnitte hier in hellblaue Kaesten mit Rahmen und
 * blauem Balken links. Jetzt: EU-Gewaehrleistungshinweis, "Kontakt und
 * Adresse", Versandart und Zahlungsart je als weisse Karte. Rechts liegen
 * Bestellung, Summe, Gutschein, AGB und der Bestellknopf in einer Karte; der
 * AGB-Kasten bleibt darin hellblau, damit das Pflicht-Haekchen auffaellt.
 * ------------------------------------------------------------------- */
.zs-farbe .au-checkout--confirm :is(.au-checkout__section, .au-checkout__section + .au-checkout__section),
.zs-farbe .au-checkout--confirm .tzit-eu-guarantee-confirm .tzit-eu-notice__box {
    margin-bottom: 1.25rem;
    padding: 1.75rem;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .au-checkout--confirm .tzit-eu-guarantee-confirm {
    margin-bottom: 1.25rem;
}

.zs-farbe .au-checkout--confirm .confirm-payment-shipping {
    margin-bottom: 0;
}

.zs-farbe .au-checkout--confirm .confirm-address {
    margin-bottom: 0;
}

.zs-farbe .checkout-container:has(.au-checkout--confirm) .checkout-aside-container {
    padding: 1.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-container:has(.au-checkout--confirm) .checkout-aside-summary {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.zs-farbe .checkout-container:has(.au-checkout--confirm) .au-checkout__tos {
    border: 0;
    border-radius: 12px;
}

.zs-farbe .checkout-container:has(.au-checkout--confirm) .checkout-aside-action {
    margin-bottom: 0;
}

/* Symbole der Vorteile in kleinen Kaesten wie auf der Kassenseite */
.zs-farbe .checkout-container:has(.au-checkout--confirm) .au-checkout__trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--aurora-color-border);
    border-radius: var(--aurora-radius-sm);
    background-color: #fff;
}

.zs-farbe .checkout-container:has(.au-checkout--confirm) .au-checkout__trust-item {
    align-items: center;
}

/* Rechtslinks unter der Kasse: Die Farbe ist fuer den dunklen Fuss gedacht
   und stand hell auf dem getoenter Grund - kaum lesbar. */
:is(.zs-farbe.au-checkout-minimal, .zs-farbe .au-checkout-minimal) .footer-minimal > .au-checkout__legal a {
    color: var(--aurora-color-text-muted);
}

@media (max-width: 991.98px) {
    .zs-farbe .au-checkout--confirm :is(.au-checkout__section, .au-checkout__section + .au-checkout__section),
    .zs-farbe .au-checkout--confirm .tzit-eu-guarantee-confirm .tzit-eu-notice__box,
    .zs-farbe .checkout-container:has(.au-checkout--confirm) .checkout-aside-container {
        padding: 1.25rem 1.1rem;
    }

    /* Untereinander: Luft zwischen Liefer- und Rechnungsadresse */
    .zs-farbe .au-checkout--confirm .confirm-address .card-col:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    /* Die Links brechen um und standen 5 px vom Bildschirmrand */
    :is(.zs-farbe.au-checkout-minimal, .zs-farbe .au-checkout-minimal) .footer-minimal > .au-checkout__legal {
        padding-inline: 16px;
    }

    /* Kasse (geteilt): Dort stehen die Links in der Fusskarte mit eigenem Rand */
    :is(.zs-farbe.au-checkout-minimal, .zs-farbe .au-checkout-minimal) .au-split__footer > .footer-minimal > .au-checkout__legal {
        padding-inline: 0;
    }
}

/* ---------------------------------------------------------------------
 * Warenkorb (/checkout/cart): Inseln wie Kasse und Bestaetigung
 *
 * Produkttabelle, die Zeile mit Produktnummer und Versanddetails und rechts
 * Zusammenfassung, Gutschein und "Zur Kasse" je als weisse Karte. Vorher
 * lag die Tabelle flach auf dem getoenter Grund, die Zusammenfassung grau.
 * ------------------------------------------------------------------- */
.zs-farbe .checkout-main > .checkout-product-table {
    padding: .5rem 1.75rem;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-main > .checkout-product-table > .card-body {
    padding-inline: 0;
}

.zs-farbe .checkout-main > .row:has(> .cart-add-product-container) {
    margin: 1.25rem 0 0;
    padding: 1.25rem .5rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-container:has(> .checkout-main > .checkout-product-table) .checkout-aside-container {
    padding: 1.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-container:has(> .checkout-main > .checkout-product-table) .checkout-aside-summary {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.zs-farbe .checkout-container:has(> .checkout-main > .checkout-product-table) .checkout-aside-action:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .zs-farbe .checkout-main > .checkout-product-table {
        padding: .25rem 1.1rem;
    }

    .zs-farbe .checkout-main > .row:has(> .cart-add-product-container) {
        padding: 1rem .35rem;
    }

    .zs-farbe .checkout-container:has(> .checkout-main > .checkout-product-table) .checkout-aside-container {
        padding: 1.25rem 1.1rem;
    }
}

/* ---------------------------------------------------------------------
 * Kasse im klassischen Aufbau (Aurora "Kasse auf einer Seite", Aufbau
 * "Klassisch"): dieselben Inseln wie im geteilten Aufbau
 *
 * Bis 2.0.0 galten die Karten nur fuer den geteilten Aufbau. Im klassischen
 * standen die Abschnitte mit Trennlinien flach auf dem Grund, rechts eine
 * graue Zusammenfassung mit losem Gutscheinfeld darunter (gemessen bei
 * equine-microtec). Jetzt: jeder Abschnitt eine weisse Karte, rechts
 * Bestellung, Zusammenfassung und Gutschein in einer.
 * ------------------------------------------------------------------- */
.zs-farbe .au-checkout:not(.au-checkout--split):not(.au-checkout--confirm) :is(.au-checkout__section, .au-checkout__section + .au-checkout__section) {
    margin-bottom: 1.25rem;
    padding: 1.75rem;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-container:has(.au-checkout:not(.au-checkout--split):not(.au-checkout--confirm)) .checkout-aside-container {
    padding: 1.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--zs-blau-tief) 6%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--zs-blau-tief) 50%, transparent);
}

.zs-farbe .checkout-container:has(.au-checkout:not(.au-checkout--split):not(.au-checkout--confirm)) .checkout-aside-summary {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .zs-farbe .au-checkout:not(.au-checkout--split):not(.au-checkout--confirm) :is(.au-checkout__section, .au-checkout__section + .au-checkout__section),
    .zs-farbe .checkout-container:has(.au-checkout:not(.au-checkout--split):not(.au-checkout--confirm)) .checkout-aside-container {
        padding: 1.25rem 1.1rem;
    }
}