/* =============================================================================
   KOMPONENTEN - BUTTONS, HEADER, NAVIGATION, FOOTER, FAB, PARTNER, BILD, DIALOG, AKKORDEON,
   UMSCHALTER, SLIDER, KENNZAHLEN, PRODUKTKARTE, MODULKARTE, CTA (der Admin hat eigenes CSS: admin.css)
   Alles hier ist auf jeder Seite nutzbar; Media Queries stehen direkt bei der jeweiligen Komponente.
   ============================================================================= */

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--ls-wide);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal),
                background-color var(--transition-normal), color var(--transition-normal),
                border-color var(--transition-normal);
}

.btn svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-normal);
}

.btn:hover svg {
    transform: translateX(4px);
}

.btn--primaer {
    background: var(--gradient-rot);
    color: var(--farbe-weiss);
    box-shadow: var(--schatten-rot);
}

.btn--primaer:hover {
    transform: translateY(-2px);
    box-shadow: var(--schatten-rot-hover);
}

.btn--sekundaer {
    background-color: transparent;
    color: var(--farbe-rot);
    border-color: var(--farbe-rot);
}

.btn--sekundaer:hover {
    background-color: var(--farbe-rot);
    color: var(--farbe-weiss);
    transform: translateY(-2px);
    box-shadow: var(--schatten-rot);
}

/* Sekundär auf dunklem Grund */
.btn--sekundaer.btn--hell {
    color: var(--farbe-weiss);
    border-color: rgb(255 255 255 / 0.5);
}

.btn--sekundaer.btn--hell:hover {
    background-color: var(--farbe-weiss);
    border-color: var(--farbe-weiss);
    color: var(--farbe-rot);
}

.btn--weiss {
    background: var(--farbe-weiss);
    color: var(--farbe-rot);
    box-shadow: var(--schatten-md);
}

.btn--weiss:hover {
    background: var(--farbe-creme);
    transform: translateY(-2px);
    box-shadow: var(--schatten-lg);
}

.btn--umriss-hell {
    background: transparent;
    color: var(--farbe-weiss);
    border-color: rgb(255 255 255 / 0.6);
}

.btn--umriss-hell:hover {
    background: rgb(255 255 255 / 0.12);
    border-color: var(--farbe-weiss);
}

.btn--klein {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-xs);
}

.btn--gross {
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--text-base);
}

.btn:active {
    transform: translateY(0);
}

/* Gesperrt (z. B. "Auf die Merkliste" bei einem Modul ohne Ausstattung): gedämpft, flach und ohne die Bewegung beim
   Überfahren. Ohne diese Regel sah der Knopf aus wie ein aktiver, und beim Antippen passierte nichts. */
.btn:disabled,
.btn:disabled:hover {
    opacity: 0.45;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.btn:disabled:hover svg {
    transform: none;
}

/* -------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.header {
    /* Zustand des Headers: Standard (weiß, grauer Text). Die Hero-Variante und das
       aufgeklappte Mobil-Menü setzen nur diese Variablen um. */
    --header-text: var(--farbe-grau);
    --header-text-aktiv: var(--farbe-grau); /* Hover/aktiv und Menü-Symbol */
    --header-hover: rgb(0 0 0 / 0.06);
    --header-logo-hoehe: 32px;
    --header-kontakt: 0; /* 0/1: Kontaktzeile nur im großen Hero-Header, animiert über Höhe und Deckung */
    --header-kontakt-sichtbar: hidden; /* eingeklappt auch für Tastatur und Screenreader unsichtbar */
    --header-polster: 0;
    --header-grund: rgb(255 255 255 / 0.85);
    --header-linie: var(--farbe-linie);
    --header-glas: blur(20px);
    --header-icon: var(--farbe-rot); /* Telefon und Mail in der Kontaktzeile */
    --header-logo-filter: none; /* über dem Video wird daraus Weiss */
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    background: var(--header-grund);
    backdrop-filter: var(--header-glas);
    -webkit-backdrop-filter: var(--header-glas);
    border-bottom: 1px solid var(--header-linie);
    transition: background-color var(--transition-normal), border-color var(--transition-normal),
                backdrop-filter var(--transition-normal);
}

.header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "logo kontakt kontakt"
        "logo nav     extras";
    align-items: center;
    column-gap: var(--space-md);
    min-height: var(--header-hoehe);
    padding-block: var(--header-polster);
    transition: padding var(--transition-normal);
}

/* Kontaktzeile über dem Menü: Telefon und E-Mail, rechtsbündig (nur Hero-Header) */
.header__kontakt {
    grid-area: kontakt;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-xl);
    height: calc(var(--header-kontakt) * var(--space-xl));
    padding-inline-end: var(--space-md);
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--header-text);
    opacity: var(--header-kontakt);
    visibility: var(--header-kontakt-sichtbar);
    transition: height var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
}

.header__kontakt-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-underline-offset: 0.2em;
}

.header__kontakt-link:hover {
    text-decoration: underline;
}

.header__kontakt-link svg {
    width: 16px;
    height: 16px;
    color: var(--header-icon);
    transition: color var(--transition-normal);
}

.header__logo-link {
    grid-area: logo;
}

.header__logo {
    height: var(--header-logo-hoehe);
    width: auto;
    /* brightness(0) macht alles Schwarz, invert(1) daraus Weiss - ein Logo in einer Farbe,
       ohne eine zweite Datei pflegen zu müssen. */
    filter: var(--header-logo-filter);
    transition: height var(--transition-normal), filter var(--transition-normal);
}

/* Hero-Seite: große Leiste über dem Video. DUNKEL, nicht hell (Mirko und Bastian, 02.10.2026):
   das Hero-Video ist dunkel, eine helle Milchglasleiste lag wie ein Fremdkörper darauf. Das zweifarbige
   Logo (#3D3D3C Schrift, #BE1622 Marke) ging darin unter - das Dunkelgrau verschwand, das Rot wirkte hart.
   Über dem Video darum ein weisses Logo und weisse Icons; beim Scrollen kommt die Farbe zurück.
   Weiss auf dunklem Glas liegt klar über 4,5:1, unabhängig davon, wie hell das Video gerade ist. */
.seite--hero .header:not(.header--scrolled) {
    --header-text: rgb(255 255 255 / 0.92);
    --header-text-aktiv: var(--farbe-weiss);
    --header-hover: rgb(255 255 255 / 0.16);
    --header-logo-hoehe: 56px;
    --header-kontakt: 1;
    --header-kontakt-sichtbar: visible;
    --header-polster: var(--space-sm);
    --header-grund: rgb(24 24 23 / 0.32);
    --header-linie: transparent; /* Rand nur im kleinen Header */
    --header-glas: blur(20px) saturate(1.1);
    --header-icon: var(--farbe-weiss);
    --header-logo-filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------------------- */
.nav {
    grid-area: nav;
    justify-self: end;
}

.nav__liste {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--header-text);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-schnell), color var(--transition-schnell);
}

.nav__link:hover,
.nav__link--aktiv {
    color: var(--header-text-aktiv);
    background: var(--header-hover);
}

/* Sinnbild vor jedem Menüpunkt, beim Hover rot */
.nav__link svg {
    width: 16px;
    height: 16px;
    transition: color var(--transition-schnell);
}

.nav__link:hover svg,
.nav__link--aktiv svg {
    color: var(--farbe-rot);
}

.nav__link--icon {
    padding: var(--space-sm);
}

.nav__link--icon svg {
    width: 18px;
    height: 18px;
}

.nav__social {
    display: flex;
    gap: var(--space-xs);
    margin-left: var(--space-sm);
}

/* Rechts neben dem Menü: Merkliste (immer) und Hamburger (nur mobil) */
.header__extras {
    grid-area: extras;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    justify-self: end;
}

.header__merkliste {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 44px;
    padding-inline: 14px;
    color: var(--header-text-aktiv);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-schnell), color var(--transition-schnell);
}

.header__merkliste:hover { background: var(--header-hover); color: var(--header-icon); }
.header__merkliste svg { width: 20px; height: 20px; }

/* Das Wort dazu: ein Herz allein wird nicht als Merkliste gelesen (Mirko, 21.09.2026).
   Auf schmalen Bildschirmen bleibt es beim Symbol - dort zählt jeder Pixel in der Leiste. */
.header__merkliste-wort { font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap; }

@media (max-width: 30em) {
    .header__merkliste { width: 44px; padding-inline: 0; }
    .header__merkliste-wort { display: none; }
}

.header__merkliste-zahl {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 18px;
    text-align: center;
    color: var(--farbe-weiss);
    background: var(--farbe-rot);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 2px var(--farbe-weiss);
}

.header__merkliste--puls .header__merkliste-zahl { animation: merkliste-puls 0.5s var(--ease); }

@keyframes merkliste-puls {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Hamburger (nur mobil sichtbar) */
.header__menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
}

.header__menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--header-text-aktiv);
    transition: transform var(--transition-schnell), opacity var(--transition-schnell);
}

.header__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Bis 72em (1152 px) das aufklappbare Menü: darunter passen sieben Menüpunkte mit Icons, Social-Icons und
   Logo nicht nebeneinander (iPad hochkant, kleine Laptop-Fenster). Gleicher Wert wie MOBIL_MENUE in main.js. */
@media (max-width: 72em) {
    .header__menu-btn {
        display: flex;
    }

    /* Kontaktzeile nur auf großen Bildschirmen */
    .header__kontakt {
        display: none;
    }

    /* Ohne Kontaktzeile hat der Hero-Header nur eine Zeile; 56px Logo würden ihn aufblähen. */
    .seite--hero .header:not(.header--scrolled) {
        --header-logo-hoehe: 44px;
    }

    /* Vollbild-Menü unter dem Header: blendet ein und fährt leicht herunter, Punkte folgen gestaffelt */
    .nav {
        --nav-staffel: 40ms; /* Verzögerung je Menüpunkt bei der Einblendung */
        position: absolute;
        inset: 100% 0 auto;
        max-height: calc(100vh - 100%);
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        padding: var(--space-lg);
        border-bottom: 1px solid var(--farbe-linie);
        box-shadow: var(--schatten-lg);
        /* Deckend: über dem dunklen Hero-Video würde sonst weiße Schrift durchscheinen.
           Deshalb hier immer graue Schrift, auch auf der Hero-Seite. Kein Milchglas: der Header darüber
           hat selbst eines, ein zweites im Kind würde nur den Header verwischen, nicht die Seite. */
        --header-text: var(--farbe-grau);
        --header-text-aktiv: var(--farbe-rot);
        --header-hover: rgb(var(--farbe-rot-rgb) / 0.06);
        /* Fläche der Seite mit einem weichen roten Lichtfleck unten wie in den Sektionen. --farbe-flaeche statt festem
           Weiß: im dunklen Partnershop ist --farbe-grau hell, die Schrift stünde sonst weiß auf Weiß. */
        background-color: var(--farbe-flaeche);
        background-image: radial-gradient(60% 40% at 50% 100%, rgb(var(--farbe-rot-rgb) / 0.12), transparent 70%);
        opacity: 0;
        visibility: hidden;
        translate: 0 calc(-1 * var(--space-md));
        transition: opacity var(--transition-normal), translate var(--transition-normal), visibility var(--transition-normal);
    }

    .nav--offen {
        opacity: 1;
        visibility: visible;
        translate: 0;
    }

    .nav__liste {
        flex-direction: column;
        align-items: stretch;
    }

    .nav__liste > li {
        opacity: 0;
        translate: 0 var(--space-sm);
        transition: opacity var(--transition-normal), translate var(--transition-normal);
    }

    .nav--offen .nav__liste > li {
        opacity: 1;
        translate: 0;
        transition-delay: calc(var(--nav-index, 1) * var(--nav-staffel));
    }

    /* Staffelung: 7 Menüpunkte + Social-Zeile (sibling-index() kennen Firefox und Safari noch nicht) */
    .nav__liste > li:nth-child(2) { --nav-index: 2; }
    .nav__liste > li:nth-child(3) { --nav-index: 3; }
    .nav__liste > li:nth-child(4) { --nav-index: 4; }
    .nav__liste > li:nth-child(5) { --nav-index: 5; }
    .nav__liste > li:nth-child(6) { --nav-index: 6; }
    .nav__liste > li:nth-child(7) { --nav-index: 7; }
    .nav__liste > li:nth-child(8) { --nav-index: 8; }

    .nav__link {
        width: 100%;
        gap: var(--space-sm);
        padding: var(--space-md) var(--space-lg);
        font-family: var(--schrift-headlines);
        font-size: var(--text-xl);
        font-weight: var(--fw-headline);
        letter-spacing: var(--ls-headline);
        word-spacing: var(--ws-headline);
        text-transform: var(--schrift-gross);
        border-radius: var(--radius-md);
    }

    .nav__link svg {
        width: 20px;
        height: 20px;
    }

    .nav__social {
        justify-content: center;
        margin: var(--space-sm) 0 0;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--farbe-linie);
    }

    .nav__link--icon {
        width: auto;
        padding: var(--space-md);
    }
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.footer {
    position: relative;
    padding-block: var(--space-4xl);
    background: var(--gradient-nacht);
    color: var(--farbe-creme);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--farbe-rot-rgb) / 0.4), transparent);
}

.footer a {
    color: var(--farbe-weiss-gedaempft);
    transition: color var(--transition-schnell);
}

.footer a:hover {
    color: var(--farbe-weiss);
}

/* Die Kontaktspalte bekommt eine Untergrenze statt eines gleichen Anteils: bei vier gleichen Spalten blieben ihr
   am 1320er-Container nur ~213 px und knapp über 64em sogar ~154 px - zu wenig für eine E-Mail-Adresse, die
   dann mitten im Wort umbrach. 15rem fasst eine übliche Adresse in einer Zeile; der Rest teilt sich wie bisher. */
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr minmax(15rem, 1.2fr);
    gap: var(--space-3xl);
}

/* Spalten dürfen schmaler werden als ihr längstes Wort (sonst laufen sie auf Tablets über den Rand) */
.footer__grid > * {
    min-width: 0;
}

.footer__logo {
    height: 36px;
    width: auto;
    margin-bottom: var(--space-lg);
    filter: brightness(0) invert(1);
}

.footer__tagline {
    max-width: 280px;
    font-size: var(--text-sm);
    color: var(--farbe-weiss-gedaempft);
}

.footer__social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--farbe-linie-hell);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal), border-color var(--transition-normal),
                color var(--transition-normal), transform var(--transition-normal);
}

.footer__social-link svg {
    width: 20px;
    height: 20px;
}

.footer__social-link:hover {
    background: var(--farbe-rot);
    border-color: var(--farbe-rot);
    color: var(--farbe-weiss);
    transform: translateY(-2px);
}

.footer__title {
    margin-bottom: var(--space-lg);
    font-family: var(--schrift);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.6);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: var(--text-sm);
}

/* Roter Unterstrich fährt bei Hover von links ein */
.footer__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
}

.footer__links svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--farbe-rot);
}

.footer__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--farbe-rot);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-normal);
}

.footer__links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.footer__adresse {
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    line-height: var(--lh-loose);
    color: var(--farbe-weiss-gedaempft);
}

.footer__adresse strong {
    color: var(--farbe-weiss);
}

.footer__kontakt-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Icon an der ersten Zeile, nicht in der Mitte: bricht eine sehr lange Adresse doch einmal um,
   steht es sonst zwischen den Zeilen statt neben der Adresse. */
.footer__kontakt-link {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
}

.footer__kontakt-link svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.1em; /* optisch auf der Grundlinie der ersten Zeile */
    color: var(--farbe-rot);
}

/* E-Mail-Adresse darf in schmalen Spalten umbrechen */
.footer__kontakt-link span {
    overflow-wrap: anywhere;
}

/* Unterste Zeile: Copyright links, Urheber rechts */
.footer__unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--farbe-linie-hell);
}

.footer__copyright {
    font-size: var(--text-xs);
    letter-spacing: var(--ls-wide);
    color: rgb(255 255 255 / 0.6);
}

.footer__urheber {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.footer__herz {
    width: 14px;
    height: 14px;
    color: var(--farbe-rot);
}

/* Bis 64em zwei Spalten: vier Spalten quetschen auf Tablets Adresse und E-Mail in Silben */
@media (max-width: 64em) {
    .footer {
        padding-block: var(--space-3xl);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 30em) {
    /* Navigation und Rechtliches nebeneinander, Marke und Kontakt volle Breite und zentriert */
    .footer__grid {
        gap: var(--space-xl);
    }

    .footer__brand,
    .footer__kontakt {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer__logo,
    .footer__tagline {
        margin-inline: auto;
    }

    .footer__social,
    .footer__kontakt-links,
    .footer__unten {
        align-items: center;
        justify-content: center;
    }

    .footer__unten {
        flex-direction: column;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   SCHWEBENDE BUTTONS - Nach oben & Chat
   ------------------------------------------------------------------------- */
.fab {
    --fab-groesse: 48px;
    --fab-abstand: var(--space-md); /* Lücke zwischen Chat- und Nach-oben-Button */
    position: fixed;
    right: var(--space-lg);
    z-index: var(--z-fab);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-width: var(--fab-groesse);
    height: var(--fab-groesse);
    padding-inline: var(--space-md);
    background: var(--farbe-rot);
    color: var(--farbe-weiss);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgb(var(--farbe-rot-rgb) / 0.3), 0 8px 24px rgb(0 0 0 / 0.15);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    transition: background-color var(--transition-normal), transform var(--transition-normal),
                opacity var(--transition-normal), visibility var(--transition-normal);
}

.fab svg {
    width: 22px;
    height: 22px;
}

.fab:hover {
    background: var(--farbe-rot-hover);
    transform: translateY(-3px);
}

.fab--chat {
    bottom: var(--space-lg);
}

/* Der Berater sitzt links unten - rechts ist der Jivo-Chat, zwei Blasen in derselben Ecke wären albern */
.fab--berater {
    right: auto;
    left: var(--space-lg);
    bottom: var(--space-lg);
    background: var(--farbe-nacht);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.15);
}
.fab--berater:hover { background: var(--farbe-nacht-2); }
/* Solange das Fenster offen ist, wäre der Knopf nur im Weg */
/* Solange das Fenster offen ist, wäre der Knopf nur im Weg (main.js setzt die Klasse) */
.fab--weg { opacity: 0; pointer-events: none; transform: scale(0.8); }

.fab--oben {
    /* gleicher Abstand nach rechts wie nach unten: sitzt diagonal links über dem Chat-Button */
    bottom: calc(var(--space-lg) + var(--fab-groesse) + var(--fab-abstand));
    right: calc(var(--space-lg) + var(--fab-groesse) + var(--fab-abstand));
    width: var(--fab-groesse);
    padding-inline: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.fab--oben.fab--sichtbar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab--oben.fab--sichtbar:hover {
    transform: translateY(-3px);
}

@media (max-width: 48em) {
    .fab {
        --fab-groesse: 44px;
        --fab-abstand: var(--space-sm);
        right: var(--space-md);
    }

    /* Muss hinter .fab stehen: dessen `right` gilt bei gleicher Spezifität sonst auch für den
       Berater, und mit `left` und `right` zusammen zieht sich der Knopf über die ganze Breite
       und verdeckt den Chat-Knopf (Audit 2026-10-05). */
    .fab--berater {
        right: auto;
    }

    .fab--oben {
        right: calc(var(--space-md) + var(--fab-groesse) + var(--fab-abstand));
    }

    /* Nur Icon, kein "Chat"-Text */
    .fab--chat {
        width: var(--fab-groesse);
        padding-inline: 0;
    }

    .fab--chat span {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   PARTNER - Karte für den Partner-Slider: Logo (grau, bei Hover farbig), Name, Text, Link
   ------------------------------------------------------------------------- */
.partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    height: 100%;
    padding: var(--space-2xl);
    text-align: center;
    background: var(--farbe-flaeche);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-karte);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.partner:hover,
.partner:focus-within {
    transform: translateY(-4px);
    border-color: var(--farbe-rot);
    box-shadow: var(--schatten-karte-hover);
}

.partner__logo {
    display: grid;
    place-items: center;
    width: 100%;
    padding: var(--space-md);
    background: var(--farbe-creme);
    border-radius: var(--radius-md);
}

.partner__logo img {
    width: auto;
    max-width: 100%;
    height: 64px;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--transition-normal), opacity var(--transition-normal);
}

.partner:hover .partner__logo img,
.partner:focus-within .partner__logo img {
    filter: none;
    opacity: 1;
}

.partner__name {
    font-size: var(--text-lg);
}

.partner__text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
}

/* -------------------------------------------------------------------------
   BILD - einheitliche Bildbehandlung im ganzen System: oben rechts wird eine runde
   Ecke ausgestanzt (der Hintergrund scheint durch), darin sitzt das Signet.
   .bild = Wrapper (trägt Signet und Schatten), .bild__flaeche = das Ausgestanzte
   (ein Bild oder eine ganze Karte). Der Schatten ist ein drop-shadow auf dem Wrapper,
   damit er der ausgestanzten Form folgt - ein box-shadow würde von der Maske abgeschnitten.
   ------------------------------------------------------------------------- */
.bild {
    --bild-schatten: drop-shadow(0 2px 4px rgb(0 0 0 / 0.03)) drop-shadow(0 12px 24px rgb(0 0 0 / 0.08));
    position: relative;
    filter: var(--bild-schatten);
    transition: filter var(--transition-normal);
}

.bild__flaeche {
    mask: radial-gradient(circle at 100% 0, transparent 63px, black 64px) no-repeat;
    -webkit-mask: radial-gradient(circle at 100% 0, transparent 63px, black 64px) no-repeat;
}

/* Rand entlang der Ausstanzung: die Maske schneidet den Kartenrand dort weg, der Bogen zeichnet ihn nach */
.bild::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0, transparent 61.5px, var(--bild-rand, transparent) 62px 64px, transparent 64.5px);
    pointer-events: none;
}

.bild::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    aspect-ratio: 633 / 589;
    background: url('../images/favicon.svg') no-repeat center / contain;
    rotate: 10deg; /* leicht gekippt, als drückte der Fächer die Ecke ein (Richtung ca. „8 Uhr“) */
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   DIALOG - natives <dialog>, geöffnet per showModal(); Hintergrund als Milchglas
   ------------------------------------------------------------------------- */
.dialog {
    width: min(100% - var(--space-xl), 32rem);
    margin: auto; /* zentriert; der Reset in base.css entfernt sonst das Browser-Margin */
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--farbe-flaeche);
    color: var(--farbe-grau);
    box-shadow: var(--schatten-lg);
    opacity: 0;
    translate: 0 16px;
    transition: opacity var(--transition-normal), translate var(--transition-normal),
                display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;
}

.dialog[open] {
    opacity: 1;
    translate: 0;
}

@starting-style {
    .dialog[open] {
        opacity: 0;
        translate: 0 16px;
    }
}

.dialog::backdrop {
    background: rgb(15 15 15 / 0.55); /* = --farbe-tinte; ältere Browser reichen Custom Properties nicht an ::backdrop weiter */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dialog__inhalt {
    padding: var(--space-2xl);
    text-align: center;
}

.dialog__titel {
    margin-bottom: var(--space-md);
    font-size: var(--text-2xl);
}

.dialog p {
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
}

.dialog__hinweis {
    font-size: var(--text-xs);
}

.dialog__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

@media (max-width: 30em) {
    .dialog__inhalt {
        padding: var(--space-xl) var(--space-lg);
    }
}

/* -------------------------------------------------------------------------
   AKKORDEON - natives <details>/<summary>. name="…" hält nur einen Punkt offen,
   die Aufklapp-Animation greift, wo der Browser Höhe "auto" animieren kann.
   ------------------------------------------------------------------------- */
.akkordeon {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 820px;
    margin-inline: auto;
    counter-reset: akkordeon;
    interpolate-size: allow-keywords;
}

.akkordeon__punkt {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-md);
    box-shadow: var(--schatten-sm);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.akkordeon__punkt[open] {
    border-color: rgb(var(--farbe-rot-rgb) / 0.35);
    box-shadow: var(--schatten-karte);
}

.akkordeon__frage {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    cursor: pointer;
    list-style: none;
    font-family: var(--schrift-headlines);
    font-size: var(--text-lg);
    font-weight: var(--fw-headline);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-headline);
    word-spacing: var(--ws-headline);
    text-transform: var(--schrift-gross);
    border-radius: var(--radius-md);
    transition: color var(--transition-schnell);
}

/* Laufende Nummer 01, 02, … */
.akkordeon__frage::before {
    counter-increment: akkordeon;
    content: counter(akkordeon, decimal-leading-zero);
    flex-shrink: 0;
    font-family: var(--schrift);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    font-variant-numeric: tabular-nums;
    color: var(--farbe-rot);
}

.akkordeon__text {
    flex: 1;
}

.akkordeon__frage:hover,
.akkordeon__punkt[open] .akkordeon__frage {
    color: var(--farbe-rot);
}

.akkordeon__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--farbe-rot);
    transition: transform var(--transition-normal);
}

.akkordeon__punkt[open] .akkordeon__icon {
    transform: rotate(45deg);
}

.akkordeon__antwort {
    padding: 0 var(--space-xl) var(--space-lg) calc(var(--space-xl) + 2ch + var(--space-md));
    color: var(--farbe-grau-gedaempft);
}

@supports (interpolate-size: allow-keywords) {
    .akkordeon__punkt::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--transition-normal), content-visibility var(--transition-normal) allow-discrete;
    }

    .akkordeon__punkt[open]::details-content {
        block-size: auto;
    }
}

@media (max-width: 30em) {
    .akkordeon__frage {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-base);
    }

    .akkordeon__antwort {
        padding: 0 var(--space-lg) var(--space-md);
    }
}

/* -------------------------------------------------------------------------
   UMSCHALTER - Button mit aria-pressed und zwei Symbolen: eines für den
   Normalzustand, eines für den gedrückten (Pause/Play, Ton aus/an)
   ------------------------------------------------------------------------- */
.umschalter__gedrueckt,
[aria-pressed="true"] .umschalter__standard {
    display: none;
}

[aria-pressed="true"] .umschalter__gedrueckt {
    display: block;
}

/* -------------------------------------------------------------------------
   SLIDER - natives Scroll-Snap, JS nur für Buttons, Punkte und Autoplay
   ------------------------------------------------------------------------- */
/* Innenabstand + negativer Außenabstand geben Schatten und Hover-Lift Platz,
   ohne dass die Karten am Scroll-Container beschnitten werden. */
.slider__spur {
    --slider-luft-x: var(--space-md);
    --slider-luft-y: var(--space-2xl);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-xl)) / 3);
    gap: var(--space-xl);
    padding: var(--slider-luft-y) var(--slider-luft-x);
    margin: calc(-1 * var(--slider-luft-y)) calc(-1 * var(--slider-luft-x));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--slider-luft-x);
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.slider__spur::-webkit-scrollbar {
    display: none;
}

.slider__folie {
    scroll-snap-align: start;
    display: flex;
}

.slider__folie > * {
    width: 100%;
}

.slider__steuerung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--farbe-flaeche);
    border: 2px solid var(--farbe-linie);
    border-radius: var(--radius-full);
    box-shadow: var(--schatten-sm);
    transition: background-color var(--transition-schnell), border-color var(--transition-schnell),
                color var(--transition-schnell), transform var(--transition-schnell);
}

.slider__btn svg {
    width: 24px;
    height: 24px;
}

.slider__btn:hover {
    background: var(--farbe-rot);
    border-color: var(--farbe-rot);
    color: var(--farbe-weiss);
    transform: scale(1.05);
}

.slider__btn--pause svg {
    width: 18px;
    height: 18px;
}

.slider__punkte {
    display: flex;
    gap: var(--space-xs);
}

.slider__punkte:empty {
    display: none;
}

.slider__punkt {
    position: relative;
    width: 24px; /* Tippziel mindestens 24px, der sichtbare Punkt sitzt darin */
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    transition: width var(--transition-schnell);
}

.slider__punkt::before {
    content: '';
    position: absolute;
    inset: 7px;
    background: rgb(0 0 0 / 0.45); /* Bedienelement: mindestens 3:1 auf Weiß */
    border-radius: var(--radius-full);
    transition: background-color var(--transition-schnell);
}

.slider__punkt[aria-current="true"] {
    width: 42px;
}

.slider__punkt[aria-current="true"]::before {
    background: var(--farbe-rot);
}

/* Ohne JS: Steuerung ausblenden, die Spur bleibt per Wischen/Scrollen nutzbar */
.no-js .slider__steuerung {
    display: none;
}

@media (max-width: 64em) {
    .slider__spur {
        grid-auto-columns: calc((100% - var(--space-xl)) / 2);
    }
}

@media (max-width: 40em) {
    .slider__spur {
        grid-auto-columns: 100%;
        gap: var(--space-md);
    }
}

/* -------------------------------------------------------------------------
   KENNZAHLEN - animierte Zähler (partial kennzahlen); das Raster kommt vom Elternteil (Parameter "klasse")
   ------------------------------------------------------------------------- */
.kennzahl {
    min-width: 180px;
    padding-inline: var(--space-xl); /* kein Polster oben, damit der Abstand Bild → Zahlen dem Abstand Logo → Bild entspricht */
    text-align: center;
}

.kennzahl__wert {
    display: block;
    font-family: var(--schrift-headlines);
    font-size: var(--text-5xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: var(--ls-tight);
}

.kennzahl__label {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--farbe-grau-gedaempft);
}

/* -------------------------------------------------------------------------
   PRODUKTKARTE - Bild mit Kategorie, Name, Preis, Button (partials produkte-grid / produkt-karte)
   ------------------------------------------------------------------------- */
.produkte-grid {
    display: grid;
    /* auto-fill, nicht auto-fit: leere Spalten bleiben stehen, damit eine einzelne Karte (ein Suchtreffer,
       ein Zubehör) so breit ist wie jede andere und nicht die ganze Zeile füllt (Mirko, 2026-10-10) */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--space-lg);
}

.produkt-karte {
    height: 100%;
    transition: transform var(--transition-normal), filter var(--transition-normal);
    /* Eigene Compositor-Ebene: Bild und Inhalt teilen beim Hover-Lift dasselbe Pixelraster,
       sonst flackert an der unteren Bildkante eine Subpixel-Naht. */
    will-change: transform;
}

.produkt-karte__flaeche {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--farbe-flaeche);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-normal);
}

.produkt-karte:hover,
.produkt-karte:focus-within {
    --bild-schatten: drop-shadow(0 4px 8px rgb(0 0 0 / 0.03)) drop-shadow(0 24px 48px rgb(0 0 0 / 0.12));
    --bild-rand: var(--farbe-rot);
    transform: translateY(-8px);
}

.produkt-karte:hover .produkt-karte__flaeche,
.produkt-karte:focus-within .produkt-karte__flaeche {
    border-color: var(--farbe-rot);
}

.produkt-karte__bild-container {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--farbe-weiss);
}

/* Produktfotos werden nie beschnitten - weder hier noch im Partnershop. Sie sind Freisteller auf Weiß:
   Ein hoher, schmaler Artikel (Plakatständer, Stehtisch) bliebe beim Beschneiden als Streifen übrig.
   Das Seitenverhältnis des Rahmens darf ein Partner wählen (--karten-format), den Zuschnitt nicht. */
.produkt-karte__bild {
    width: 100%;
    aspect-ratio: var(--karten-format);
    object-fit: contain;
    will-change: transform;
    transition: transform var(--transition-langsam);
}

.produkt-karte:hover .produkt-karte__bild,
.produkt-karte:focus-within .produkt-karte__bild {
    transform: scale(1.05);
}

.produkt-karte__kategorie {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: 6px 12px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    color: var(--farbe-weiss);
    background: rgb(0 0 0 / 0.7);
    border-radius: var(--radius-full);
}

.produkt-karte__inhalt {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-xl);
}

.produkt-karte__name {
    margin-bottom: var(--space-xs);
    font-size: var(--text-lg);
}

.produkt-karte__preis {
    margin-bottom: var(--space-lg);
    font-weight: var(--fw-bold);
}

/* Set-Marke: wie die Kategorie, aber rot und unten rechts im Bild. Oben rechts stanzt .bild__flaeche die Ecke
   für das Signet aus - dort blieb von der Marke nur ein Splitter übrig (Audit 2026-10-10). */
.produkt-karte__kategorie--rechts {
    top: auto;
    right: var(--space-md);
    bottom: var(--space-md);
    left: auto;
    background: var(--farbe-rot);
}

/* Namen als Link in Karten und Listen: unauffällig, beim Zeigen rot */
.produkt-karte__name a,
.ausstattung__name a {
    color: inherit;
    text-decoration: none;
}

.produkt-karte__name a:hover,
.ausstattung__name a:hover {
    color: var(--anlass-akzent, var(--farbe-rot));
}

/* Knopfzeile: Details (füllt) und Herz (rund) nebeneinander */
/* „Details“ und „Merkliste“ exakt hälftig in einer Zeile, ohne Umbruch (Mirko, 21.09.2026).
   Grid statt Flex: zwei gleiche Spalten stehen fest, egal wie lang die Beschriftung ist -
   bei Flex hätte der längere Text die breitere Hälfte bekommen. */
.produkt-karte__aktionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-sm);
    margin-top: auto;
}

/* Das Rasterkind ist bei „Merkliste“ das Formular, nicht der Knopf - beide müssen schrumpfen dürfen */
.produkt-karte__aktionen > * { min-width: 0; }
.produkt-karte__aktionen .btn { width: 100%; min-width: 0; }

/* Merken-Knopf: trägt das Wort „Merkliste“, weil das Herz allein nicht erkannt wurde - es sitzt ja
   auf jeder Karte. Knappe Innenabstände, damit auf schmalen Karten beides nebeneinander passt. */
.produkt-karte__aktionen .btn { padding-inline: var(--space-sm); white-space: nowrap; }
.merken[aria-pressed="true"] {
    color: var(--farbe-weiss);
    background: var(--anlass-akzent, var(--farbe-rot));
    border-color: var(--anlass-akzent, var(--farbe-rot));
}

/* Ruhiger Umriss-Button ohne Schatten und ohne eigenes Anheben: die Karte schwebt schon (Mirko, 2026-09-06) */
.produkt-karte .btn {
    flex: 1;
}

.produkt-karte .btn:hover {
    transform: none;
    box-shadow: none;
}


/* -------------------------------------------------------------------------
   MODULKARTE - dunkle Karte, Bild oben, Overlay mit Button schiebt sich beim Hover von unten ein
   (partials module-grid / modul-karte)
   ------------------------------------------------------------------------- */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-lg);
}

.modul-karte {
    --bild-schatten: drop-shadow(0 8px 32px rgb(0 0 0 / 0.2));
    --bild-rand: var(--farbe-linie-hell);
    height: 100%;
    transition: transform var(--transition-normal), filter var(--transition-normal);
    will-change: transform; /* wie Produktkarte: keine Subpixel-Naht beim Hover-Lift */
}

.modul-karte:hover,
.modul-karte:focus-within {
    --bild-schatten: drop-shadow(0 32px 64px rgb(0 0 0 / 0.3)) drop-shadow(0 0 40px rgb(var(--farbe-rot-rgb) / 0.2));
    --bild-rand: var(--farbe-rot);
    transform: translateY(-8px);
}

.modul-karte__flaeche {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--farbe-nacht-2);
    border: 2px solid var(--farbe-linie-hell);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-normal);
}

.modul-karte:hover .modul-karte__flaeche,
.modul-karte:focus-within .modul-karte__flaeche {
    border-color: var(--farbe-rot);
}

.modul-karte__bild-container {
    position: relative;
    overflow: hidden;
}

.modul-karte__bild {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    /* Im Ruhezustand 3 % größer als der Rahmen und mit eigener Ebene: liegt die Bildkante beim Start des Zooms
       genau auf der Beschnittkante, blitzt dort ein Frame lang ein Streifen auf */
    transform: scale(1.03);
    will-change: transform;
    transition: transform var(--transition-langsam);
}

.modul-karte:hover .modul-karte__bild,
.modul-karte:focus-within .modul-karte__bild {
    transform: scale(1.08);
}

.modul-karte .leerbild { color: rgb(255 255 255 / 0.25); background: none; }

/* Overlay liegt im Ruhezustand unterhalb des Bildausschnitts (unsichtbar) und fährt beim Hover hoch */
.modul-karte__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-xl);
    background: linear-gradient(180deg, transparent 40%, var(--farbe-nacht-2) 100%);
    transform: translateY(100%);
    transition: transform var(--transition-langsam);
    will-change: transform;
}

.modul-karte:hover .modul-karte__overlay,
.modul-karte:focus-within .modul-karte__overlay {
    transform: translateY(0);
}

@media (hover: none) {
    .modul-karte__overlay {
        transform: none;
    }
}

.modul-karte__inhalt {
    padding: var(--space-xl);
}

.modul-karte__name {
    margin-bottom: var(--space-xs);
    font-size: var(--text-xl);
    color: var(--farbe-weiss);
}

.modul-karte__beschreibung {
    font-size: var(--text-sm);
    color: var(--farbe-weiss-gedaempft);
}

.modul-karte__anzahl {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--farbe-weiss-gedaempft);
}

/* -------------------------------------------------------------------------
   CALL TO ACTION - Inhalt der roten Sektion (partial cta)
   ------------------------------------------------------------------------- */
.cta {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}

.cta__titel {
    margin-bottom: var(--space-lg);
    font-size: var(--text-5xl);
    color: var(--farbe-weiss);
}

.cta__akzent {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: rgb(255 255 255 / 0.6);
    text-underline-offset: 6px;
}

.cta__text {
    margin-bottom: var(--space-2xl);
    font-size: var(--text-xl);
    color: rgb(255 255 255 / 0.9);
}

.cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
}

@media (max-width: 30em) {
    .cta__buttons {
        flex-direction: column;
        gap: var(--space-md);
    }

    .cta__buttons .btn {
        width: 100%;
    }
}


/* -------------------------------------------------------------------------
   ANLASSKARTE - helle Bildkarte, ganze Karte ist der Link (partials anlaesse-grid / anlass-karte)
   ------------------------------------------------------------------------- */
.anlaesse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); /* auto-fill: gefilterte Karten werden nicht breiter */
    gap: var(--space-lg);
}

.anlass-karte {
    height: 100%;
    transition: transform var(--transition-normal), filter var(--transition-normal);
    will-change: transform;
}

.anlass-karte:hover,
.anlass-karte:focus-within {
    --bild-schatten: drop-shadow(0 4px 8px rgb(0 0 0 / 0.03)) drop-shadow(0 24px 48px rgb(0 0 0 / 0.12));
    --bild-rand: var(--farbe-rot);
    transform: translateY(-8px);
}

.anlass-karte__flaeche {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    background: var(--farbe-flaeche);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-normal);
}

.anlass-karte:hover .anlass-karte__flaeche,
.anlass-karte:focus-within .anlass-karte__flaeche {
    border-color: var(--farbe-rot);
}

.anlass-karte__bild-container {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--farbe-creme);
}

.anlass-karte__bild {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transform: scale(1.03); /* siehe Produktkarte: Kante nie auf der Beschnittkante */
    will-change: transform;
    transition: transform var(--transition-langsam);
}

/* Bereichskacheln zeigen oft freigestellte Produktfotos - die dürfen nicht angeschnitten werden.
   Gleiche Behandlung wie die Produktkarten im Equipment: contain auf weissem Grund. */
.anlass-karte--bereich .anlass-karte__bild-container { background: var(--farbe-weiss); }
.anlass-karte--bereich .anlass-karte__bild { object-fit: contain; }

.anlass-karte:hover .anlass-karte__bild,
.anlass-karte:focus-within .anlass-karte__bild {
    transform: scale(1.08);
}

.anlass-karte__inhalt {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-sm);
    padding: var(--space-xl);
}

.anlass-karte__name { font-size: var(--text-xl); }
.anlass-karte__text { font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }

.anlass-karte__fuss {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: auto;
    padding-top: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--farbe-rot);
}

.anlass-karte__fuss svg { width: 16px; height: 16px; transition: transform var(--transition-normal); }
.anlass-karte:hover .anlass-karte__fuss svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   SCHRITTE-LEISTE - Anlass · Module · Anfrage (partial schritte); aktueller Schritt gefüllt, erledigte umrandet
   ------------------------------------------------------------------------- */
.schritte-leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-xl);
    margin-bottom: clamp(var(--space-2xl), 6vw, var(--space-3xl));
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
}

.schritte-leiste__schritt > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: inherit;
    opacity: 0.6;
}

.schritte-leiste__schritt--aktiv > *,
.schritte-leiste__schritt--fertig > * { opacity: 1; }
.schritte-leiste a { text-decoration: none; }
.schritte-leiste a:hover { color: var(--farbe-rot); }

.schritte-leiste__nummer {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    border: 2px solid currentColor;
    border-radius: 50%;
}

.schritte-leiste__schritt--aktiv .schritte-leiste__nummer {
    color: var(--farbe-weiss);
    background: var(--farbe-rot);
    border-color: transparent;
}

.schritte-leiste__schritt--fertig .schritte-leiste__nummer {
    color: var(--farbe-rot);
    border-color: var(--farbe-rot);
}

/* -------------------------------------------------------------------------
   RÜCKWEG - benannter Weg zurück zur Herkunft (Artikel- und Modulseite, partial rueckweg)
   ------------------------------------------------------------------------- */
.rueckweg {
    display: inline-flex;
    justify-self: start; /* in Raster-Köpfen (Equipment) sonst auf volle Breite gezogen */
    align-items: center;
    gap: 2px;
    margin-bottom: var(--space-sm);
    padding: 4px 12px 4px 6px;
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
    text-decoration: none;
    background: var(--farbe-creme);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-full);
    transition: color var(--transition-schnell), border-color var(--transition-schnell);
}

.rueckweg:hover { color: var(--farbe-rot); border-color: currentColor; }
.rueckweg svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Im dunklen Anlass-Kopf (Modulseite) hell statt creme */
.anlass-kopf .rueckweg {
    color: var(--farbe-weiss-gedaempft);
    background: rgb(255 255 255 / 0.12);
    border-color: var(--farbe-linie-hell);
}

.anlass-kopf .rueckweg:hover { color: var(--farbe-weiss); border-color: var(--farbe-weiss); }

/* -------------------------------------------------------------------------
   PFAD - „Sie sind hier“ (Artikelseite, Equipment); der Anlass-Kopf hat seine eigene helle Fassung
   ------------------------------------------------------------------------- */
.pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
}

.pfad a { color: inherit; text-decoration: none; }
.pfad a:hover { color: var(--farbe-rot); text-decoration: underline; text-underline-offset: 0.15em; }
.pfad svg { width: 14px; height: 14px; flex-shrink: 0; }
.pfad span { color: var(--farbe-grau); }

/* -------------------------------------------------------------------------
   SEITENZAHLEN - Blättern in Listen (Equipment)
   ------------------------------------------------------------------------- */
.seitenzahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
}

.seitenzahlen a,
.seitenzahlen span {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--space-sm);
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
}

.seitenzahlen a { color: var(--farbe-grau); transition: background-color var(--transition-schnell), color var(--transition-schnell); }
.seitenzahlen a:hover { color: var(--farbe-rot); background: rgb(var(--farbe-rot-rgb) / 0.06); }
.seitenzahlen a svg { width: 18px; height: 18px; }
.seitenzahlen [aria-current] { color: var(--farbe-weiss); background: var(--farbe-rot); }
.seitenzahlen span[aria-hidden] { min-width: 0; color: var(--farbe-grau-gedaempft); }

/* -------------------------------------------------------------------------
   MERKLISTE - Schublade von rechts (partial merkliste-schublade, Inhalt partial merkliste-inhalt, main.js initMerkliste);
   dieselben Bausteine auf der Seite /merkliste in einer Karte. Positionen: Bild · Text · Menge · Zeilenpreis · Entfernen.
   ------------------------------------------------------------------------- */
.merkliste-schleier {
    position: fixed;
    inset: 0;
    z-index: var(--z-merkliste);
    background: rgb(15 15 15 / 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.merkliste-schleier--offen { opacity: 1; }

.merkliste {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: calc(var(--z-merkliste) + 1);
    display: grid;
    grid-template-rows: auto auto 1fr;
    width: min(100%, max(38vw, 640px)); /* wie die Admin-Schublade: mindestens gut ein Drittel des Bildschirms */
    background: var(--farbe-flaeche);
    color: var(--farbe-grau);
    box-shadow: var(--schatten-lg);
    translate: 100% 0;
    transition: translate var(--transition-langsam);
}

.merkliste--offen { translate: 0 0; }
.merkliste-offen { overflow: hidden; }

.merkliste__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--farbe-linie);
}

.merkliste__titel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xl);
}

.merkliste__titel svg { width: 22px; height: 22px; color: var(--farbe-rot); }

.merkliste__meldung {
    margin: 0;
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--farbe-weiss);
    background: var(--farbe-grau);
}

.merkliste__meldung--erfolg { background: var(--farbe-rot); }
.merkliste__meldung--fehler { background: var(--farbe-rot-tief); }

.merkliste__inhalt {
    container-type: inline-size; /* Positionen richten sich nach der Breite des Inhalts, nicht des Fensters */
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl) var(--space-2xl);
}

.merkliste__laedt {
    padding: var(--space-xl) 0;
    text-align: center;
    color: var(--farbe-grau-gedaempft);
}

.merkliste__leer {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) 0;
    text-align: center;
    color: var(--farbe-grau-gedaempft);
}

.merkliste__leer .sektion__icon { margin-bottom: var(--space-sm); }
.merkliste__leer strong { color: var(--farbe-grau); }
.merkliste__leer .btn { margin-top: var(--space-md); }

.merkliste__liste {
    display: grid;
    container-type: inline-size;   /* die Positionen richten sich nach der Breite der Liste, nicht des Fensters */
}

/* Namen und Herkunft sind Links, sollen aber wie Text aussehen (sonst greift die rote Grundregel für Links) */
.merkliste__name,
.merkliste__herkunft { color: inherit; text-decoration: none; }
.merkliste__name:hover,
.merkliste__herkunft:hover { color: var(--farbe-rot); text-decoration: underline; text-underline-offset: 0.15em; }

.merkliste__position {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
    grid-template-areas: "bild text menge zeile weg";
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--farbe-linie);
}

.merkliste__bild {
    grid-area: bild;
    width: 64px;
    height: 48px;
    padding: 2px;
    object-fit: contain; /* Erkennbarkeit vor Einheitlichkeit: eine beschnittene Miniatur verwechselt man */
    border-radius: var(--radius-sm);
    background: var(--farbe-weiss);
}

.merkliste__text {
    grid-area: text;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.merkliste__text strong { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.merkliste__text small { font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }

.merkliste__menge {
    grid-area: menge;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Minus/Plus: runder Knopf mit Zeichen statt Icon */
.merkliste__schritt { --rund-groesse: 32px; font-size: var(--text-lg); line-height: 1; border: 1px solid var(--farbe-linie); }
.merkliste__schritt:hover { border-color: var(--farbe-rot); }
.merkliste__menge .feld-eingabe { width: 3.25rem; height: 32px; font-size: var(--text-sm); text-align: center; border-radius: var(--radius-sm); }

.merkliste__zeile {
    grid-area: zeile;
    min-width: 5.5rem;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.merkliste__anfrage { font-weight: var(--fw-normal); color: var(--farbe-grau-gedaempft); }

.merkliste__entfernen { grid-area: weg; }

/* Schmale Liste (Anfrage-Formular, kleine Schublade): zwei Zeilen statt fünf Spalten, sonst bleibt für den Namen nichts übrig */
@container (max-width: 30rem) {
    .merkliste__position {
        grid-template-columns: 48px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "bild text menge weg"
            "bild text menge weg"
            "bild zeile zeile zeile";
        align-items: start;
        gap: 2px var(--space-sm);
        padding-block: var(--space-sm);
    }

    .merkliste__bild { width: 48px; height: 36px; align-self: start; }
    .merkliste__text { align-self: center; }
    .merkliste__text strong { display: -webkit-box; font-size: var(--text-sm); line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .merkliste__text small { display: block; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .merkliste__einzeln { display: none; }
    .merkliste__menge { align-self: center; gap: 1px; }
    .merkliste__schritt { --rund-groesse: 26px; font-size: var(--text-base); }
    .merkliste__menge .feld-eingabe { width: 2.75rem; height: 26px; padding: 0 2px; font-size: var(--text-sm); }
    .merkliste__entfernen { align-self: center; }
    .merkliste__entfernen .rund { --rund-groesse: 26px; }
    .merkliste__zeile { min-width: 0; font-size: var(--text-xs); text-align: left; white-space: normal; }
}

.merkliste__entfernen .rund { color: var(--farbe-grau-gedaempft); }

.merkliste__fuss {
    display: grid;
    gap: var(--space-md);
    padding-top: var(--space-lg);
}

/* Gesamtpreis mit Mehrwertsteuer, klein unter dem Nettopreis (Preis::brutto) */
.preis-brutto { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: var(--fw-normal); line-height: 1.35; color: var(--anlass-text-2, var(--farbe-grau-gedaempft)); -webkit-text-fill-color: var(--anlass-text-2, var(--farbe-grau-gedaempft)); }

.merkliste__summe { margin: 0; }
.merkliste__summe span { color: var(--farbe-grau-gedaempft); }
.merkliste__summe strong { font-size: var(--text-xl); }
.merkliste__summe small { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }

.merkliste__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.merkliste__aktionen form { margin-left: auto; }

/* Seite /merkliste: dieselben Bausteine in einer Karte */
.merkliste-seite .container { max-width: 56rem; }

.merkliste-seite__karte {
    padding: var(--space-xl);
    background: var(--farbe-flaeche);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-karte);
}

/* Modul-Knopf mit Hinweis darunter */
.anlass-modul__aktionen { display: grid; gap: var(--space-xs); justify-items: start; }
.anlass-modul__aktionen-hinweis { font-size: var(--text-xs); color: var(--anlass-text-2, var(--farbe-grau-gedaempft)); }

/* Schmaler Inhalt (Handy, schmale Schublade): Menge und Zeilenpreis in eine zweite Zeile */
@container (max-width: 36rem) {
    .merkliste__position {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "bild text weg"
            "bild menge zeile";
    }
    .merkliste__bild { width: 56px; height: 42px; }
}

@media (max-width: 48em) {
    .merkliste__kopf, .merkliste__meldung { padding-inline: var(--space-lg); }
    .merkliste__inhalt { padding-inline: var(--space-lg); }
    .merkliste-seite__karte { padding: var(--space-lg); }
}

/* -------------------------------------------------------------------------
   AUSSTATTUNG - Artikel einer Stückliste als Karten (partial ausstattung): Bild · Name, Kurztext, Preis · Menge + Plus.
   Auf Anlass-Seiten färben die --anlass-*-Variablen mit, sonst gelten die Website-Farben.
   ------------------------------------------------------------------------- */
.ausstattung {
    display: grid;
    gap: var(--space-sm);
    font-size: var(--text-sm);
}

.ausstattung__artikel {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    border-top: 1px dashed var(--anlass-linie, var(--farbe-linie));
}

.ausstattung__bild {
    display: block;
    width: 96px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--farbe-weiss);
}

/* Wie in der Merkliste: ganz zeigen, sonst sind die Artikel einer Stückliste nicht auseinanderzuhalten */
.ausstattung__bild img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
    will-change: transform;
    transition: transform var(--transition-langsam);
}

.ausstattung__artikel:hover .ausstattung__bild img { transform: scale(1.05); }

.ausstattung__text { display: grid; gap: 2px; min-width: 0; }
.ausstattung__name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

.ausstattung__marke {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 1px 8px;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    vertical-align: middle;
    color: var(--anlass-akzent, var(--farbe-rot));
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
}

.ausstattung__info { margin: 0; font-size: var(--text-xs); color: var(--anlass-text-2, var(--farbe-grau-gedaempft)); }
.ausstattung__preis { margin: 0; font-weight: var(--fw-semibold); color: var(--anlass-akzent, var(--farbe-rot)); font-variant-numeric: tabular-nums; }

.ausstattung__menge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--anlass-text-2, var(--farbe-grau-gedaempft));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Freistehende Fassung mit Rahmen (Modulseite, Set-Inhalt der Artikelseite) */
.ausstattung--karte {
    max-width: 900px;
    margin-inline: auto;
    padding: var(--space-md) var(--space-xl);
    /* Rückfall über --farbe-flaeche, nicht --farbe-weiss: sonst bleibt die Karte im dunklen
       Partnershop weiß (Projektregel, Audit 2026-10-05). Anlass-Seiten setzen die Variable selbst. */
    background: var(--anlass-flaeche, var(--farbe-flaeche));
    border: 1px solid var(--anlass-linie, var(--farbe-linie));
    border-radius: var(--anlass-radius, var(--radius-xl));
}

@media (max-width: 30em) {
    .ausstattung__artikel { grid-template-columns: 72px minmax(0, 1fr); }
    .ausstattung__bild { width: 72px; height: 54px; }
    .ausstattung__menge { grid-column: 2; justify-self: end; }
}

/* -------------------------------------------------------------------------
   RUND - runder Icon-Knopf (Schließen, Entfernen, Plus, Herz, Suche leeren, Suchen). Größe über --rund-groesse,
   Farbe über --rund-farbe (Anlass-Seiten färben über --anlass-akzent mit).
   Standard: leise (nur Icon, beim Zeigen roter Hauch) · --umriss: Rand, füllt beim Zeigen oder gedrückt · --voll: gefüllt
   ------------------------------------------------------------------------- */
.rund {
    --rund-groesse: 40px;
    --rund-farbe: var(--anlass-akzent, var(--farbe-rot));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--rund-groesse);
    height: var(--rund-groesse);
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-schnell), color var(--transition-schnell), border-color var(--transition-schnell);
}

.rund svg { width: calc(var(--rund-groesse) * 0.45); height: calc(var(--rund-groesse) * 0.45); }
.rund:hover { color: var(--rund-farbe); background: rgb(var(--farbe-rot-rgb) / 0.06); }

.rund--umriss {
    color: var(--rund-farbe);
    border: 1.5px solid color-mix(in srgb, var(--rund-farbe) 50%, transparent);
}

.rund--umriss:hover,
.rund--umriss[aria-pressed="true"],
.rund--voll {
    color: var(--farbe-weiss);
    background: var(--rund-farbe);
    border-color: var(--rund-farbe);
}

.rund--voll:hover { background: var(--farbe-rot-hover); }

/* -------------------------------------------------------------------------
   LEERBILD - Platzhalter, wenn ein Artikel, Modul oder Anlass kein Bild hat: Icon auf Creme, Größe vom Behälter
   ------------------------------------------------------------------------- */
.leerbild {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgb(var(--farbe-rot-rgb) / 0.3);
    background: var(--farbe-creme);
    transform: none;
}

.leerbild svg { width: 40%; max-width: 72px; height: auto; stroke-width: 1; }

/* -------------------------------------------------------------------------
   FELD-EINGABE - Eingabefeld der Website (Suche, Menge); Größe und Rundung setzt die Komponente, der Fokusring kommt von hier
   ------------------------------------------------------------------------- */
.feld-eingabe {
    width: 100%;
    color: var(--farbe-grau);
    background: var(--farbe-flaeche);
    border: 1.5px solid var(--farbe-linie);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    -webkit-appearance: none;
    appearance: none;
}

.feld-eingabe:focus { outline: none; border-color: var(--farbe-rot); box-shadow: var(--schatten-fokus); }
.feld-eingabe::-webkit-search-cancel-button,
.feld-eingabe::-webkit-outer-spin-button,
.feld-eingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feld-eingabe[type="number"] { -moz-appearance: textfield; appearance: textfield; font-weight: var(--fw-semibold); }

.feld-eingabe { height: 48px; padding: 0 var(--space-md); }
textarea.feld-eingabe { height: auto; padding: var(--space-sm) var(--space-md); resize: vertical; }
select.feld-eingabe {
    padding-right: 44px;
    background: var(--farbe-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5f5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}

/* -------------------------------------------------------------------------
   FORMULAR - Website-Formulare (Anfrage): Gruppen mit Überschrift, Felder mit Beschriftung oben, Hinweise klein
   ------------------------------------------------------------------------- */
.formular { display: grid; gap: var(--space-xl); }

/* Honigtopf: aus dem Sichtfeld geschoben statt display:none - ein verstecktes Feld füllen Passwortmanager
   gern aus, ein weggeschobenes nicht. Stand bis 21.09.2026 nur in pages/anfrage.css; seit das
   Kontaktformular denselben Schutz nutzt, gehört es hierher - sonst stünde der Honigtopf sichtbar da. */
.formular__falle { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.formular__fehler {
    padding: var(--space-md) var(--space-lg);
    color: var(--farbe-rot-tief);
    background: rgb(var(--farbe-rot-rgb) / 0.08);
    border-left: 3px solid var(--farbe-rot);
    border-radius: var(--radius-md);
}

.formular__fehler ul { margin-top: var(--space-xs); padding-left: 1.25rem; list-style: disc; }

.formular__erfolg {
    padding: var(--space-lg) var(--space-xl);
    color: #1f6f3d;
    background: #eef7f1;
    border-left: 3px solid #2e8b57;
    border-radius: var(--radius-md);
}

.formular__erfolg strong { display: block; margin-bottom: var(--space-xs); font-size: var(--text-lg); }
.formular__erfolg a { color: inherit; }

/* Das Formular als Blatt auf dem Farbband - dieselbe Geste wie beim Rechtstext */
.kontaktformular {
    max-width: 56rem;
    margin-inline: auto;
    padding: clamp(var(--space-lg), 4vw, var(--space-3xl));
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-karte);
}
.formular__gruppe { display: grid; gap: var(--space-md); padding: 0; border: 0; min-width: 0; }
.formular__gruppe > legend { margin-bottom: var(--space-sm); padding: 0; font-size: var(--text-xl); }
.formular__hinweis { margin: 0; font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }
.formular__aktionen { display: grid; gap: var(--space-sm); justify-items: start; }
.formular__optional > summary { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: var(--fw-semibold); color: var(--farbe-rot); cursor: pointer; }
.formular__optional > summary svg { width: 18px; height: 18px; transition: transform var(--transition-normal); }
.formular__optional[open] > summary svg { transform: rotate(45deg); }
.formular__optional[open] > summary { margin-bottom: var(--space-md); }
.formular__optional > * + * { margin-top: var(--space-md); }

.feld { display: grid; gap: var(--space-xs); min-width: 0; }
.feld > span { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.feld small { display: block; font-weight: var(--fw-normal); color: var(--farbe-grau-gedaempft); }
.feld--zeile { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.feld--zeile-schmal { grid-template-columns: 3fr 1fr; }
.feld--haken { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-sm); font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }
.feld--haken input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--farbe-rot); }
.feld--haken span { font-weight: var(--fw-normal); }

@media (max-width: 30em) {
    .feld--zeile { grid-template-columns: 1fr; }
    .feld--zeile-schmal { grid-template-columns: 2fr 1fr; }
}

/* -------------------------------------------------------------------------
   KONTRASTMODUS - Zustände, die nur über Farbe sichtbar sind, bekommen Umrisse
   ------------------------------------------------------------------------- */
@media (forced-colors: active) {
    [aria-current],
    [aria-pressed="true"],
    .ist-gemerkt .merken,
    .ist-gemerkt .rund {
        outline: 2px solid Highlight;
    }

    .produkt-karte__kategorie,
    .ausstattung__marke,
    .anlass-modul__nummer,
    .header__merkliste-zahl {
        border: 1px solid CanvasText;
    }
}

/* -------------------------------------------------------------------------
   VORSTELLUNG - Bild links, Text rechts, darunter Kennzahlen.
   Stand bis 21.09.2026 in pages/startseite.css; „Über uns“ braucht denselben Block,
   und zwei Kopien pflegt niemand. Die Klassennamen bleiben, damit die Startseite unberührt ist.
   ------------------------------------------------------------------------- */
.willkommen {
    text-align: center;
}

.willkommen__logo {
    height: clamp(44px, 10vw, 100px);
    width: auto;
    margin: 0 auto var(--space-3xl);
}

/* Bild links, Text rechts */
.willkommen__raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-3xl);
    text-align: left;
}

.willkommen__bild {
    width: 100%;
    border-radius: var(--radius-xl);
}

/* Text neben dem Bild: ein oder mehrere Absätze (im CMS bearbeitbar) */
.willkommen__text p {
    margin-bottom: var(--space-lg);
    font-size: var(--text-lg);
    line-height: var(--lh-loose);
}

.willkommen__kennzahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-3xl);
}

@media (max-width: 48em) {
    .willkommen__raster {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}



/* -------------------------------------------------------------------------
   RECHTSTEXT - lange Fließtexte (Impressum, Datenschutz, AGB, Mietbedingungen).
   Eine schmale Spalte, weite Zeilen: solche Seiten werden gelesen, nicht überflogen.
   Gilt auf dem eigenen Auftritt und im Partnershop (dort mit seinem Text).
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   RECHTSSEITE - Verzeichnis links, Text rechts. Bei zwölf Paragraphen ist das Springen
   wichtiger als Zierde, und die Breite des Bandes wird für etwas Nützliches verwendet.
   ------------------------------------------------------------------------- */
.rechtsseite {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 56rem);
    justify-content: center;
    align-items: start;
    gap: var(--space-2xl);
}

.rechtsseite--ohne-nav { grid-template-columns: minmax(0, 56rem); }

.rechtsseite__nav {
    position: sticky;
    top: calc(var(--header-hoehe) + var(--space-md));
    font-size: var(--text-sm);
}

.rechtsseite__aufklapp > summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-weight: var(--fw-semibold);
    color: var(--farbe-text);
    cursor: pointer;
    list-style: none;
}

.rechtsseite__aufklapp > summary svg { width: 18px; height: 18px; color: var(--farbe-rot); }

.rechtsseite__liste {
    display: grid;
    gap: 2px;
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: gliederung;
}

.rechtsseite__liste a {
    display: block;
    padding: 6px var(--space-sm);
    color: var(--farbe-grau-gedaempft);
    text-decoration: none;
    border-left: 2px solid var(--farbe-linie);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: color var(--transition-schnell), background-color var(--transition-schnell), border-color var(--transition-schnell);
}

.rechtsseite__liste a:hover {
    color: var(--farbe-rot);
    background: rgb(var(--farbe-rot-rgb) / 0.05);
    border-left-color: var(--farbe-rot);
}

/* Abstand für die klebende Kopfleiste, sonst verschwindet die angesprungene Überschrift darunter */
.rechtstext h2 { scroll-margin-top: calc(var(--header-hoehe) + var(--space-lg)); }

@media (max-width: 62em) {
    .rechtsseite { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .rechtsseite__nav { position: static; }
    .rechtsseite__aufklapp {
        padding: var(--space-sm) var(--space-lg);
        background: var(--farbe-flaeche);
        border: 1px solid var(--farbe-linie);
        border-radius: var(--radius-md);
    }
}

/* Ein Blatt Papier auf dem Farbband. Die Zeilenlänge bleibt bei rund 80 Zeichen - breiter liest sich
   ein Rechtstext schlechter, nicht besser. Ohne die Fläche darum stand die schmale Spalte aber verloren
   im breiten Band (Mirko, 21.09.2026); als Karte ist die Breite eine Entscheidung statt ein Versehen. */
.rechtsseite .rechtstext { max-width: none; }   /* im Raster bestimmt die Spalte die Breite */

.rechtstext {
    max-width: 56rem;
    margin-inline: auto;
    padding: clamp(var(--space-lg), 4vw, var(--space-3xl));
    line-height: var(--lh-loose);
    color: var(--farbe-grau-gedaempft);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-karte);
}

.rechtstext p + p { margin-top: var(--space-md); }
.rechtstext ul, .rechtstext ol { margin: var(--space-md) 0; padding-left: 1.4rem; }
/* Aufzählungen in Fließtexten (Rechtstexte, im CMS gepflegte Absätze) bekommen ihre Punkte zurück - base.css nimmt sie
   allen Listen, weil Menüs und Karten auch Listen sind */
.rechtstext ul, .willkommen__text ul { list-style: disc; }
.rechtstext ol, .willkommen__text ol { list-style: decimal; }
.rechtstext li::marker, .willkommen__text li::marker { color: var(--farbe-rot); }
.willkommen__text ul, .willkommen__text ol { margin: 0 0 var(--space-lg); padding-left: 1.4rem; font-size: var(--text-lg); line-height: var(--lh-loose); }
.rechtstext li + li { margin-top: var(--space-xs); }
.rechtstext strong { color: var(--farbe-text); }
/* Nur Textlinks einfärben - ohne :not(.btn) bekäme ein roter Knopf im Fließtext rote Schrift
   auf rotem Grund und wäre unlesbar (auf /kontakt genau so passiert, 21.09.2026). */
.rechtstext a:not(.btn) { color: var(--farbe-rot); }

/* Gliederung: h2 trägt die Nummer, h3 die Unterpunkte. Der Abstand nach oben ist groß genug,
   dass ein Abschnitt sichtbar neu beginnt, ohne dass es zerfällt. */
.rechtstext h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    font-size: var(--text-xl);
    color: var(--farbe-text);
}

.rechtstext h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
    text-transform: none;
    letter-spacing: var(--ls-tight);
    word-spacing: normal;
    color: var(--farbe-text);
}

.rechtstext > :first-child { margin-top: 0; }

/* Adressblock und Datenzeilen (Impressum, Verantwortlicher) */
.rechtstext dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: var(--space-xs) var(--space-md); margin: var(--space-md) 0; }
.rechtstext dt { color: var(--farbe-text); font-weight: var(--fw-medium); }
.rechtstext dd { margin: 0; }
/* Zeile aus dt und dd in einem <div> (Erreichbarkeit auf der Kontaktseite): nimmt am Raster teil, als gäbe es sie nicht */
.rechtstext__zeile { display: contents; }

/* Stand-Zeile am Ende eines Rechtstextes */
.rechtstext__stand {
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--farbe-linie);
    font-size: var(--text-sm);
}


@media (max-width: 40em) {
    .rechtstext dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .rechtstext dt { margin-top: var(--space-sm); }
}

/* -------------------------------------------------------------------------
   KARTEN - ein Baustein für alle Kacheln außerhalb des Shops: Kontaktwege, Team,
   Zertifikate, Leistungsversprechen. Vorher gab es dafür drei fast gleiche Bausteine
   (kontaktweg, team__person, siegel__eintrag); genau so werden Seiten uneinheitlich.

   Radius, Rand und Schatten sind dieselben wie bei der Produktkarte - dadurch gehören
   alle Kacheln der Seite sichtbar zusammen. Die ausgestanzte Ecke mit dem Fächer bleibt
   bewusst den Bildkarten vorbehalten (.bild): Sie gehört zum Bild, nicht zum Text.
   ------------------------------------------------------------------------- */
.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--karten-breite, 16rem), 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding: 0;
    list-style: none;
}


.infokarte {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
    padding: var(--space-xl);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-karte);
}

.infokarte--mitte { justify-items: center; text-align: center; }

/* Wie der Sektionskopf, nur kleiner - dasselbe Zeichen in derselben Sprache */
.infokarte__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-xs);
    color: var(--farbe-rot);
    background: rgb(var(--farbe-rot-rgb) / 0.06);
    border-radius: var(--radius-md);
}

.infokarte__icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

.infokarte__titel {
    font-size: var(--text-base);
    text-transform: none;
    letter-spacing: var(--ls-tight);
    word-spacing: normal;
}

/* Die herausgehobene Angabe: Rufnummer, Anschrift, Norm. Zwei Zeilen hoch reserviert, damit
   der Text darunter in allen Kacheln einer Reihe auf gleicher Höhe beginnt. */
.infokarte__wert {
    display: block;
    min-height: 2.8em;
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    font-style: normal;
    line-height: 1.4;
    color: var(--farbe-text);
    text-decoration: none;
}

.infokarte__wert--eng { min-height: 0; color: var(--farbe-rot); font-variant-numeric: tabular-nums; }
a.infokarte__wert:hover { color: var(--farbe-rot); }

.infokarte p { font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }
.infokarte__rolle { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--farbe-rot); }

/* Porträt in der Team-Karte: rund, Ausschnitt über den Fokuspunkt; ohne Foto die Initialen in der Farbe der Icon-Kachel */
.infokarte__foto {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin-bottom: var(--space-xs);
    object-fit: cover;
    border-radius: 50%;
    color: var(--farbe-rot);
    background: rgb(var(--farbe-rot-rgb) / 0.06);
    font-family: var(--schrift-headlines);
    font-size: var(--text-xl);
    font-weight: var(--fw-headline);
}

/* -------------------------------------------------------------------------
   FOKUS - Buttons mit eigenem Schatten überschreiben sonst den Ring aus base.css.
   Steht am Ende, damit die Regel nach allen Hover-Schatten kommt.
   ------------------------------------------------------------------------- */
.btn:focus-visible,
.fab:focus-visible,
.slider__btn:focus-visible {
    box-shadow: var(--schatten-fokus);
}

/* -------------------------------------------------------------------------
   ZERTIFIKATE (/nachhaltigkeit) - Urkunde als Vorschau, Klartext darunter.
   Höchstens drei nebeneinander: bei vier Kacheln wird die Urkunde sonst so
   schmal, dass man nicht mehr erkennt, was für ein Blatt das ist.
   Die Kachel selbst bleibt unverlinkt - sie ist im Editor bearbeitbar, ein
   Link darüber würde das Anklicken zum Bearbeiten abfangen.
   ------------------------------------------------------------------------- */
.zertifikate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 60em) {
    .zertifikate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38em) {
    .zertifikate { grid-template-columns: minmax(0, 1fr); }
}

/* <picture> ist von Haus aus inline - als Rasterzelle muss es ein Block sein, sonst stimmt die Höhe nicht */
.zertifikat picture { display: block; }

/* Füllt die Kachelbreite. contain, nicht cover: eine Urkunde wird nicht beschnitten, sie gilt ganz oder gar nicht.
   Das Seitenverhältnis ist das des A4-Blatts, damit beim Laden nichts springt. */
.zertifikat__bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.414;
    object-fit: contain;
    margin-bottom: var(--space-xs);
    background: #fff;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-sm);
    box-shadow: var(--schatten-sm);
}

.zertifikat__was {
    margin-top: calc(var(--space-xs) * -1);
    color: var(--farbe-rot);
    font-size: var(--text-sm);
    font-weight: 600;
}

.zertifikat__text {
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
}

/* Sitzt am unteren Rand, damit der Hinweis in allen Kacheln einer Reihe auf einer Linie steht */
.zertifikat__pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    align-self: end;
    padding-top: var(--space-sm);
    color: var(--farbe-rot);
    font-size: var(--text-sm);
    font-weight: 600;
}

.zertifikat__pdf svg { width: 16px; height: 16px; }

/* Die beiden Dateipfade gehören ins Werkzeug, nicht auf die Seite: sie erscheinen erst,
   wenn der Bearbeiten-Modus läuft, und sind sonst auch für Angemeldete unsichtbar. */
.zertifikat__quelle { display: none; }

.cms-an .zertifikat__quelle {
    display: grid;
    gap: 2px;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--farbe-linie);
    color: var(--farbe-grau-gedaempft);
    font-size: var(--text-xs);
    text-align: left;
    word-break: break-all;
}

.zertifikat__quelle b { font-weight: 400; color: var(--farbe-text); }

/* -------------------------------------------------------------------------
   BEITRAGSKARTE - Blog-Übersicht, Kategorieseite, Modulseite („Aus dem Blog“) und Startseite.
   Steht hier und nicht in pages/blog.css, weil sie auch auf Seiten erscheint, die ein anderes
   Seiten-CSS laden. Gebaut wie die Anlasskarte: der Schatten kommt aus .bild (filter), die Fläche
   trägt Rand, Rundung und overflow - auf der Karte selbst darf nichts davon stehen, sonst
   schneidet sie die Bögen der Ausstanzung ab und wirft einen zweiten Schatten.
   ------------------------------------------------------------------------- */
.beitrag-karte {
    height: 100%;
    transition: transform var(--transition-normal), filter var(--transition-normal);
    will-change: transform;
}

.beitrag-karte:hover,
.beitrag-karte:focus-within {
    --bild-schatten: drop-shadow(0 4px 8px rgb(0 0 0 / 0.03)) drop-shadow(0 24px 48px rgb(0 0 0 / 0.12));
    --bild-rand: var(--farbe-rot);
    transform: translateY(-8px);
}

.beitrag-karte__flaeche {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--farbe-flaeche);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.beitrag-karte:hover .beitrag-karte__flaeche,
.beitrag-karte:focus-within .beitrag-karte__flaeche {
    border-color: var(--farbe-rot);
}

.beitrag-karte__bild-container {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--farbe-weiss);
}

/* Wie die Produktkarte: ganz zeigen statt beschneiden. Beitragsbilder sind oft Logos und Grafiken,
   die beschnitten unkenntlich werden - vom Vereinswappen blieb der halbe Schriftzug übrig
   (Mirko, 02.10.2026). Darum contain, weißer Grund wie die Karte und kein Vorab-scale(1.03),
   das bei contain nur wieder über den Rahmen hinausschöbe. */
.beitrag-karte__bild {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    padding: var(--space-sm);
    will-change: transform;
    transition: transform var(--transition-langsam);
}

.beitrag-karte:hover .beitrag-karte__bild,
.beitrag-karte:focus-within .beitrag-karte__bild {
    transform: scale(1.05);
}

.beitrag-karte__inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xl);
}

/* Datum, Lesezeit, Autor - auch im Kopf der Beitragsseite (pages/blog.css ordnet sie dort mittig) */
.beitrag-karte__stand,
.beitrag__stand {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    font-size: var(--text-xs);
    color: var(--farbe-grau-gedaempft);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

.beitrag-karte__stand span + span::before,
.beitrag__stand span + span::before { content: "·"; margin-right: var(--space-sm); }

.beitrag-karte__titel { margin: 0; font-size: var(--text-xl); }
.beitrag-karte__teaser { margin: 0; font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }

.beitrag-karte__themen { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; font-size: var(--text-xs); color: var(--farbe-rot); }
.beitrag-karte__themen span::after { content: ","; }
.beitrag-karte__themen span:last-child::after { content: ""; }

.beitrag-karte__weiter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: auto;
    padding-top: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--farbe-rot);
}

.beitrag-karte__weiter svg { width: 16px; height: 16px; transition: transform var(--transition-normal); }
.beitrag-karte:hover .beitrag-karte__weiter svg { transform: translateX(4px); }

/* Das Raster, in dem die Karten stehen */
.beitraege-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* -------------------------------------------------------------------------
   SEITENWECHSEL (main.js: initSeitenwechsel). Beim Klick auf einen internen Link wird der Inhalt
   unscharf und die Palme aus dem Logo pulsiert, bis die neue Seite steht.

   Die Schicht liegt über allem, nimmt aber keine Klicks an: wer sich verklickt hat, soll die
   Zurück-Taste noch treffen. Der Kopf bleibt scharf - er ist auf der neuen Seite derselbe,
   und ein mitwanderndes Logo beruhigt beim Warten.
   ------------------------------------------------------------------------- */
.seitenwechsel {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: color-mix(in srgb, var(--farbe-hintergrund) 72%, transparent);
    opacity: 0;
    transition: opacity 260ms var(--ease, ease);
}
.seitenwechsel--an { opacity: 1; }

.seitenwechsel__palme {
    width: 72px;
    height: auto;
    animation: palme-puls 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
    filter: drop-shadow(0 6px 18px rgb(0 0 0 / 12%));
}

@keyframes palme-puls {
    0%, 100% { scale: 1; opacity: 0.55; }
    50%      { scale: 1.14; opacity: 1; }
}

/* Der Inhalt tritt zurück, der Kopf bleibt stehen */
body.wechselt main {
    filter: blur(7px);
    opacity: 0.55;
    transition: filter 300ms var(--ease, ease), opacity 300ms var(--ease, ease);
}

/* Weniger Bewegung: nur ruhig abblenden, kein Pulsieren und keine Unschärfe */
@media (prefers-reduced-motion: reduce) {
    .seitenwechsel__palme { animation: none; opacity: 0.85; }
    body.wechselt main { filter: none; opacity: 0.6; }
}

/* -------------------------------------------------------------------------
   MERKLISTE TEILEN (main.js: initMerklisteTeilen). Der Link trägt die Liste in sich,
   darum kommt der Hinweis gleich mit - das ist ein Verkaufsargument, kein Kleingedrucktes.
   ------------------------------------------------------------------------- */
.merkliste__teilen { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--farbe-linie); }
.merkliste__teilen-titel { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.merkliste__teilen-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.merkliste__teilen-hinweis { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }
.merkliste__teilen [data-stand="kopiert"] { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }

/* Eine geteilte Liste wird nie still übernommen - der Besucher entscheidet */
.empfang { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-left: 3px solid var(--farbe-akzent); border-radius: var(--radius-md); }
.empfang__text { margin-bottom: var(--space-sm); }
.empfang__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* -------------------------------------------------------------------------
   EVENTY - der Berater (main.js: initEventy). Angedockt LINKS, weil rechts der Jivo-Chat sitzt.
   Auf dem Handy nimmt er die ganze Breite, dort ist für zwei Spalten kein Platz.
   ------------------------------------------------------------------------- */
.eventy {
    position: fixed;
    left: var(--space-md);
    bottom: var(--space-md);
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(calc(100vw - 2 * var(--space-md)), 400px);
    max-height: min(78vh, 640px);
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 48px rgb(0 0 0 / 22%);
    opacity: 0;
    translate: 0 12px;
    transition: opacity 200ms var(--ease), translate 200ms var(--ease);
}
.eventy--offen { opacity: 1; translate: 0 0; }

/* Die ganze Kopfzeile klappt zu (main.js) - deshalb der Zeigefinger */
.eventy__kopf { display: flex; align-items: center; gap: 11px; padding: 13px 14px; color: var(--farbe-weiss); background: var(--farbe-nacht); border-radius: var(--radius-md) var(--radius-md) 0 0; cursor: pointer; }
.eventy__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: rgb(255 255 255 / 0.12); border-radius: 50%; }
.eventy__avatar svg { width: 19px; height: 19px; }
.eventy__titel { display: grid; line-height: 1.25; }
.eventy__name { font-weight: var(--fw-semibold); }
.eventy__rolle { font-size: var(--text-xs); color: var(--farbe-weiss-gedaempft); }
.eventy__kopfknopf { display: grid; place-items: center; width: 30px; height: 30px; color: var(--farbe-weiss-gedaempft); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.eventy__kopfknopf:first-of-type { margin-left: auto; }
.eventy__kopfknopf svg { width: 16px; height: 16px; }
.eventy__kopfknopf:hover { color: var(--farbe-weiss); background: rgb(255 255 255 / 0.12); }
/* Zuklappen ist die häufigste Handlung - der Pfeil darf deutlicher sein als das Neu-Zeichen */
.eventy__kopfknopf--zu { color: var(--farbe-weiss); background: rgb(255 255 255 / 0.1); }
.eventy__kopfknopf--zu:hover { background: rgb(255 255 255 / 0.22); }

.eventy__verlauf { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--farbe-creme); }

.eventy__blase { max-width: 88%; min-width: 0; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.eventy__blase p + p { margin-top: 8px; }
.eventy__blase--gast { align-self: flex-end; background: var(--farbe-akzent); color: var(--farbe-weiss); border-bottom-right-radius: 4px; }
.eventy__blase--eventy { align-self: flex-start; background: var(--farbe-creme); border-bottom-left-radius: 4px; }
.eventy__blase--fehler { background: #fdeaea; color: #8c1d18; }
.eventy__blase a { color: var(--farbe-akzent); text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.eventy__blase--gast a { color: inherit; }

/* Drei Punkte, solange gedacht wird */
.eventy__punkte { display: inline-flex; gap: 4px; }
.eventy__punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-grau-gedaempft); animation: eventy-punkt 1200ms ease-in-out infinite; }
.eventy__punkte i:nth-child(2) { animation-delay: 160ms; }
.eventy__punkte i:nth-child(3) { animation-delay: 320ms; }
@keyframes eventy-punkt { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* Vorgeschlagene Artikel: der Berater nennt sie, auf die Liste legt sie der Besucher */
.eventy__artikel { display: grid; gap: 6px; }
.eventy__artikel-karte { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--farbe-weiss); border: 1px solid var(--farbe-linie); border-radius: 10px; }
.eventy__artikel-bild { flex: none; width: 56px; height: 42px; overflow: hidden; border-radius: 6px; background: var(--farbe-creme); }
.eventy__artikel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eventy__artikel-leer { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #eef0f3 0 6px, #f7f8fa 6px 12px); }
.eventy__artikel-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.eventy__artikel-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.eventy__artikel-name:hover { color: var(--farbe-akzent); }
.eventy__artikel-preis { font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }
.eventy__merken { flex: none; align-self: center; padding: 6px 11px; font-size: var(--text-xs); white-space: nowrap; color: var(--farbe-weiss); background: var(--farbe-akzent); border: 0; border-radius: 999px; cursor: pointer; }
.eventy__merken[disabled] { opacity: 0.75; cursor: default; }
.eventy__merken--drin { background: #1f8a4c; }

.eventy__quellen { font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }
.eventy__quellen a { color: inherit; }

.eventy__fuss { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--farbe-linie); }
.eventy__fuss textarea { flex: 1; min-height: 38px; max-height: 120px; padding: 9px 11px; font: inherit; font-size: 14.5px; line-height: 1.4; resize: none; border: 1px solid var(--farbe-linie); border-radius: 10px; }
.eventy__fuss textarea:focus { outline: none; border-color: var(--farbe-akzent); }
.eventy__senden { flex: none; width: 38px; height: 38px; font-size: 17px; color: var(--farbe-weiss); background: var(--farbe-akzent); border: 0; border-radius: 50%; cursor: pointer; }

/* Handy: volle Breite, bis zur sicheren Unterkante, und die Schriftgrösse im Eingabefeld
   mindestens 16 px - darunter zoomt iOS beim Antippen in die Seite hinein. */
@media (max-width: 36em) {
    .eventy {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 85dvh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .eventy__fuss textarea { font-size: 16px; }
    .eventy__blase { max-width: 92%; }
    .fab--berater { left: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .eventy { transition: none; }
    .eventy__punkte i { animation: none; opacity: 0.6; }
}

/* =============================================================================
   BEREICHSBILD - das im Kontrollpult zum Ordnernamen hinterlegte Bild (Bereichsbilder) im Shop eines
   Partnershops: im Katalog und auf der Artikelseite. Es wechselt mit der Kategorie, Unterordner erben es vom Elternordner.

   Wie es aussieht, wählt jeder Partner selbst (Partner::BEREICHSBILD_STILE, Schema 027). Die Klasse steht am
   <body> (partner-bereichsbild--…), das Markup ist für alle Stile dasselbe: ein Bild über der ganzen Sektion,
   dahinter der Katalog. Nur Höhe, Stärke, Schleier und die Fläche darunter unterscheiden sich. „aus“ kommt gar
   nicht erst in die Seite - dafür gibt es hier nichts.

   Allen gemeinsam: das Bild ist Stimmung, kein Inhalt. Über ihm steht Text, der lesbar bleiben muss.
   ============================================================================= */
.sektion--bereichsbild {
    /* Eigener Stapelraum: nur so liegt das Bild über der Sektionsfläche und trotzdem hinter allem Inhalt
       (dasselbe Vorgehen wie bei .sektion--wasserzeichen in layout.css). */
    isolation: isolate;
    overflow: clip;
}

.bereichsbild {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.bereichsbild img {
    width: 100%;
    object-fit: cover;
    filter: saturate(1.15) contrast(1.04);
}

/* Kopf auf dem Bild: Überschrift und Untertitel bekommen einen weichen Rückhalt in der Grundfarbe des Shops,
   sonst verschwimmt der gedämpfte Fließtext auf einem hellen Foto. Kein Kasten - der Kopf soll auf dem Bild
   stehen, nicht davor. Im dunklen Shop trägt derselbe Schatten, weil er aus --grund-rgb kommt. */
.sektion--bereichsbild .sektion__header {
    text-shadow: 0 1px 2px rgb(var(--grund-rgb, 255 255 255) / 0.9), 0 2px 12px rgb(var(--grund-rgb, 255 255 255) / 0.7);
}

.sektion--bereichsbild .sektion__header p { color: var(--farbe-text); }

/* -----------------------------------------------------------------------------
   BÜHNE (Vorgabe) - das Bild steht beim Scrollen still und füllt das Fenster; die Artikel liegen auf einer
   eigenen, deckenden Fläche und gleiten darüber. So bleibt das Bild Rahmen und Stimmung, statt zwischen den
   Karten durchzuscheinen. position: sticky statt background-attachment: fixed - letzteres ruckelt auf iOS.
   ----------------------------------------------------------------------------- */
.partner-bereichsbild--buehne .bereichsbild img {
    position: sticky;
    top: 0;
    height: 100vh;
    opacity: var(--bereichsbild-staerke, 0.55);
    /* Oben voll, nach unten zurückgenommen - aber nie ganz weg, sonst stünde der Katalog unten im Nichts. */
    mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 55%, rgb(0 0 0 / 0.4) 100%);
}

.partner-bereichsbild--buehne .equipment__layout,
    .partner-bereichsbild--buehne .artikel {
    padding: var(--space-xl);
    background: var(--farbe-flaeche);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-karte);
}

/* -----------------------------------------------------------------------------
   HAUCH - dasselbe stehende Bild, nur sehr blass und ohne eigene Fläche: der Katalog sieht aus wie immer,
   das Bild tönt ihn nur. Für Shops, denen die Bühne zu viel ist.
   ----------------------------------------------------------------------------- */
.partner-bereichsbild--hauch .bereichsbild img {
    position: sticky;
    top: 0;
    height: 100vh;
    opacity: var(--bereichsbild-staerke, 0.14);
    mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.55) 40%, transparent 85%);
}

/* -----------------------------------------------------------------------------
   BAND und KOPFBILD - das Bild bleibt oben am Kopf der Seite und scrollt mit: ein Streifen hinter Kopf, Pfad
   und Kategoriename. „band“ ist schmal und zurückhaltend, „kopf“ hoch und kräftig. Beide legen einen Schleier
   in der Grundfarbe darüber, der nach unten dicht wird - darauf steht der Text, und das Bild läuft ohne Kante aus.
   ----------------------------------------------------------------------------- */
.partner-bereichsbild--band .bereichsbild img,
.partner-bereichsbild--kopf .bereichsbild img {
    height: var(--bereichsbild-hoehe, 340px);
}

.partner-bereichsbild--kopf .bereichsbild img { --bereichsbild-hoehe: 560px; }

.partner-bereichsbild--band .bereichsbild::after,
.partner-bereichsbild--kopf .bereichsbild::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: var(--bereichsbild-hoehe, 340px);
    background: linear-gradient(
        to bottom,
        rgb(var(--grund-rgb, 255 255 255) / var(--bereichsbild-schleier, 0.45)) 0%,
        rgb(var(--grund-rgb, 255 255 255) / 0.8) 70%,
        rgb(var(--grund-rgb, 255 255 255)) 100%
    );
}

.partner-bereichsbild--kopf .bereichsbild::after {
    --bereichsbild-hoehe: 560px;
    --bereichsbild-schleier: 0.2;
}

/* „Weniger Bewegung“: ein beim Scrollen stehendes Bild ist genau das, was damit gemeint ist - also mitlaufen lassen. */
@media (prefers-reduced-motion: reduce) {
    .bereichsbild img { position: static; height: 100%; }
}

/* Auf dem Telefon bleibt der Rand für ein Rahmenbild zu schmal: dort nur der Kopf auf dem Bild, der Katalog
   randlos auf der Fläche wie bisher. */
@media (max-width: 720px) {
    .partner-bereichsbild--buehne .equipment__layout,
    .partner-bereichsbild--buehne .artikel {
        padding: var(--space-md) 0 0;
        background: none;
        box-shadow: none;
    }
}

/* -----------------------------------------------------------------------------
   MERKLISTE DRUCKEN (Knopf „Drucken / PDF“ auf /merkliste)
   Auf dem Papier stehen nur Name, Datum, Positionen und Summe - Schwarz auf Weiß, auch im dunklen
   Partnershop, dessen helle Schrift sonst verschwände. In der Schublade gibt es den Knopf nicht:
   gedruckt wird die Seite.
   ----------------------------------------------------------------------------- */
.druck-kopf,
#merkliste [data-teilen="drucken"] { display: none; }

@media print {
    body:has(.merkliste-seite) .footer,
    body:has(.merkliste-seite) .vorschau-band,
    .merkliste-seite .rueckweg,
    .merkliste-seite .sektion__header,
    .merkliste-seite [data-merkliste-empfang],
    .merkliste-seite .merkliste__schritt,
    .merkliste-seite .merkliste__entfernen,
    .merkliste-seite .merkliste__aktionen,
    .merkliste-seite .merkliste__teilen { display: none !important; }

    .merkliste-seite,
    .merkliste-seite * { color: #000 !important; background: none !important; box-shadow: none !important; }

    /* Ein dunkler Shop (color-scheme: dark) druckte sonst einen dunklen Seitenrand */
    html:has(.merkliste-seite) { color-scheme: light !important; background: #fff !important; }
    .merkliste-seite .merkliste__position { border-color: #ccc !important; }

    .merkliste-seite { padding: 0; }
    .merkliste-seite .druck-kopf { display: block; margin: 0 0 var(--space-lg); font-size: var(--text-lg); }
    .merkliste-seite .reveal { opacity: 1 !important; transform: none !important; }
    .merkliste-seite__karte { padding: 0; }
    .merkliste-seite .merkliste__position { break-inside: avoid; }
    .merkliste-seite .merkliste__menge::before { content: "Menge:"; }   /* ohne Minus und Plus stünde da nur eine Zahl */
    .merkliste-seite .merkliste__menge .feld-eingabe { width: 3rem; border: 0; appearance: textfield; }
}