/* Farben aus den Layout-Variablen — damit passt sich die Ebene je Instanz
       und im Dunkelmodus von selbst an (shop.blade.php:1487-1494). */
    .sel-ta {
        position: fixed;
        left: 22px;
        /* Wird vom JS gesetzt: gemessene Hoehe der Kaufleiste + Abstand.
           Der Wert hier ist nur der Ausgangspunkt. */
        bottom: 22px;
        width: 384px;
        max-width: calc(100vw - 24px);
        /* 55, nicht 45: die Kaufleiste auf der Produktseite hat z-50
           (`sticky-buy-bar`) und hat die Figur mittendurch geschnitten —
           Kopf oben sichtbar, Rumpf hinter der Leiste (Thomas, 31.08.2026).
           Die Karte selbst sitzt ueber der Leiste, weil das Skript ihren
           Abstand aus der gemessenen Leistenhoehe setzt; die Figur ist
           `pointer-events: none` und verdeckt daher keinen Knopf. */
        z-index: 55;
        /* GLAS. Die Karte selbst traegt keinen Hintergrund mehr — jeder Block
           bringt seinen eigenen mit. Nur so kann die Figur (z-index -1) unter
           dem Kopfteil durchscheinen; ein deckender Hintergrund an dieser
           Stelle wuerde sie verschlucken.
           Der ERSTE Versuch am 31.08.2026 hat nichts gebracht, weil die Figur
           die Karte gar nicht ueberlappte (Schnitt bei 76,5 %, 10 px Kontakt) —
           hinter dem Band lag die Seite, nicht die Frau. Deshalb jetzt ein
           tieferer Bildschnitt (90 %) UND echte Ueberlappung. */
        background: transparent;
        border: 1px solid var(--border-light, #e8e8ed);
        border-radius: 20px;
        /* Deutlich kraeftiger als zuvor — die Ebene ging sonst unter. */
        box-shadow: 0 24px 60px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.10);
        border-color: color-mix(in srgb, var(--accent, #FB7701) 30%, transparent);
        /* NICHT clippen: die Figur ragt oben aus der Karte heraus. Die Rundung
           kommt statt dessen von den Bloecken selbst (Regeln unten). */
        overflow: visible;
        font-family: inherit;
        opacity: 0;
        transform: translateY(16px);
        /* Weich statt schnell (Thomas, 31.08.2026: „blende das angebot und die
           frau viel weicher ein"). 0,85 s mit sanft auslaufender Kurve. */
        transition: opacity 1.2s cubic-bezier(.16,.7,.24,1),
                    transform 1.2s cubic-bezier(.16,.7,.24,1);
    }
    /* Ab hier steht Text, der gelesen werden muss — deckender Grund, kein Glas.
       Der Preis darf nicht ueber einer Bluse liegen. */
    .sel-ta__leib,
    .sel-ta__knoepfe,
    .sel-ta__kategorie,
    .sel-ta__kihinweis,
    .sel-ta__ausverkauft {
        background: var(--bg-card, #fff);
        position: relative; z-index: 1;
    }
    .sel-ta > *:last-child { border-radius: 0 0 19px 19px; }

    @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
        /* Ohne Unschaerfe waere das Kopfteil einfach nur durchsichtig und
           schlecht lesbar — dann lieber wie bisher deckend. */
        .sel-ta__band { background: var(--accent, #FB7701); }
        .sel-ta__vorteil { background: #eaf5ee; }
        .sel-ta__person { display: none; }
    }

    .sel-ta[hidden] { display: none; }        /* noetig, weil unten display gesetzt wird */
    .sel-ta.sel-ta--da { opacity: 1; transform: translateY(0); }

    .sel-ta__band {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 12px 12px 16px;
        background: color-mix(in srgb, var(--accent, #FB7701) 74%, transparent);
        -webkit-backdrop-filter: blur(9px) saturate(1.5);
        backdrop-filter: blur(9px) saturate(1.5);
        border-radius: 19px 19px 0 0;
        position: relative; z-index: 1;
    }
    .sel-ta__marke {
        font-size: 15px; font-weight: 800; letter-spacing: .06em;
        text-transform: uppercase; color: #fff;
    }
    .sel-ta__frist {
        font-size: 12.5px; font-weight: 600; color: #fff;
        margin-left: auto; font-variant-numeric: tabular-nums;
        background: rgba(0,0,0,.18); padding: 3px 10px; border-radius: 999px;
        white-space: nowrap;
    }
    .sel-ta__band .sel-ta__knopf-klein { color: rgba(255,255,255,.85); }
    .sel-ta__band .sel-ta__knopf-klein:hover { background: rgba(0,0,0,.18); color: #fff; }

    /* Der Vorteil — der groesste Block, sobald er zulaessig ist. */
    .sel-ta__vorteil {
        display: flex; align-items: baseline; gap: 10px;
        padding: 11px 16px;
        /* Weiss unterlegt, damit das Gruen ueber der Figur nicht kippt, aber
           duenn genug, dass sie durchkommt. */
        background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
                    rgba(10,125,60,.14);
        -webkit-backdrop-filter: blur(9px) saturate(1.4);
        backdrop-filter: blur(9px) saturate(1.4);
        border-bottom: 1px solid rgba(10,125,60,.18);
        position: relative; z-index: 1;
    }
    .sel-ta__vorteil-prozent {
        font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #0a7d3c;
        line-height: 1;
    }
    .sel-ta__vorteil-euro {
        font-size: 15px; font-weight: 700; color: #0a7d3c;
    }
    /* Kein Orange auf hellem Grund — das war auf dem Handy kaum lesbar.
       Dunkles Braun auf hellem Feld, Kontrast > 7:1. */
    /* Person, die die Karte haelt: sitzt OBEN und ragt heraus. Die Karte
       bleibt echtes Markup — lesbar, uebersetzbar, mit funktionierenden
       Knoepfen. Nur die Person ist Bild. */
    .sel-ta:has(.sel-ta__person) { overflow: visible; }
    .sel-ta__person {
        position: absolute;
        left: 50%; transform: translateX(-50%);
        bottom: 100%;
        width: 52%; max-width: 200px; height: auto;
        /* Nie ueber den oberen Fensterrand hinaus. Bei niedrigen Fenstern ragte
           die Figur sonst halb aus dem Bild (Thomas, 31.08.2026). Die Karte
           selbst bleibt davon unberuehrt. */
        max-height: min(330px, 30vh); object-fit: contain; object-position: bottom;
        /* Das Bild endet knapp UNTER den Haenden (bei 76,5 % der Originalhoehe
           abgeschnitten, dort ist die Silhouette am breitesten). Deshalb genuegt
           eine kleine Ueberlappung, damit die Finger auf der Karte liegen —
           vorher hing die Karte unter den Haenden in der Luft. */
        /* Reicht jetzt 120 px IN die Karte hinein — vorher waren es 10 px, und
           genau deshalb konnte Glas nichts zeigen. z-index -1 legt sie hinter
           die Bloecke; sichtbar wird sie dort, wo Band und Vorteilszeile
           durchscheinend sind. */
        /* 30 px. Bei 70 versank die Figur hinter der Karte und sah aus, als
           verstecke sie sich dahinter (Thomas, 31.08.2026); bei 120 waren die
           Haende ganz weg. Mit 30 und dem 82-%-Bildschnitt liegen die Haende
           auf der Bandoberkante — sie HAELT die Tafel.
           Der Glaseffekt zeigt dadurch weniger. Das ist der Tausch: Haende
           sichtbar geht vor durchscheinender Bluse. */
        margin-bottom: -30px;
        /* z-index 0, NICHT -1. Mit -1 war die Figur ganz verschwunden
           (31.08.2026 live gemeldet). Sie liegt jetzt wieder auf Ebene 0 —
           die Textbloecke darueber holen sich mit z-index 1 den Vortritt, und
           dort wo Band und Vorteilszeile durchscheinend sind, kommt sie durch. */
        pointer-events: none; display: block; z-index: 0;
        /* Sanft einblenden statt hart dastehen. Die Figur kommt eine Spur
           NACH der Karte (0,18 s) und gleitet dabei von unten hoch — sonst
           springt sie im selben Moment ins Bild wie das Schild und wirkt
           abrupt (Thomas, 31.08.2026). */
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
        /* Exakt dieselbe Dauer und Kurve wie die Karte und OHNE Verzoegerung —
           Thomas 31.08.2026: „zuerst springt die tafel rein und dann die frau,
           das muss miteinander passieren nicht getrennt". Beide bewegen sich
           als ein Stueck. */
        transition: opacity 1.2s cubic-bezier(.16,.7,.24,1),
                    transform 1.2s cubic-bezier(.16,.7,.24,1);
    }
    .sel-ta--da .sel-ta__person {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* Stil „zeigt": die Figur steht als GANZE Person rechts NEBEN der Karte
       und deutet darauf. Sie traegt nichts, deshalb darf sie die Karte auch
       nicht beruehren — sonst sieht es aus, als sei ihr das Schild aus der
       Hand gefallen (Thomas, 31.08.2026).
       WAS DAS NICHT KANN: Die Person braucht rechts der Karte rund 150 px
       freien Platz. Auf schmalen Fenstern ist der nicht da — dort wird sie
       ausgeblendet (siehe Handy-Block unten), die Karte bleibt vollstaendig. */
    .sel-ta--figur-zeigt .sel-ta__person {
        left: 100%; bottom: 0;
        transform: translateY(16px);
        margin-bottom: 0; margin-left: 10px;
        width: 150px; max-width: none;
        /* Hoehe an die Karte gekoppelt: die Figur soll neben ihr stehen,
           nicht ueber sie hinauswachsen. */
        max-height: 300px; object-fit: contain; object-position: bottom;
    }
    .sel-ta--da.sel-ta--figur-zeigt .sel-ta__person { transform: translateY(0); }

    .sel-ta__knapp {
        margin: 9px 0 0; font-size: 13.5px; font-weight: 700; color: #8a4b00;
        display: inline-flex; align-items: center; gap: 6px;
        background: #fff3e0; border: 1px solid #f0c48a;
        padding: 5px 11px; border-radius: 999px;
    }
    /* Ab drei Stueck deutlicher — ohne Blinken, ohne Bewegung. */
    .sel-ta__knapp--eng { color: #a30d05; background: #ffeceb; border-color: #f5b3ae; }
    .sel-ta__knopf-klein {
        background: none; border: 0; cursor: pointer; padding: 0;
        color: var(--text-tertiary, #86868b);
        width: 28px; height: 28px; border-radius: 8px;
        display: grid; place-items: center; flex: 0 0 auto;
    }
    .sel-ta__knopf-klein:hover { background: rgba(0,0,0,.05); color: var(--text-primary, #1d1d1f); }
    .sel-ta__knopf-klein:focus-visible { outline: 2px solid var(--accent, #FB7701); outline-offset: 2px; }

    .sel-ta__ton-an { display: none; }
    .sel-ta[data-ton="an"] .sel-ta__ton-aus { display: none; }
    .sel-ta[data-ton="an"] .sel-ta__ton-an { display: inline; }

    .sel-ta__leib { display: flex; gap: 13px; padding: 13px 15px 4px; }
    /* Freigestellt lassen — kein Kasten um das Produktbild. */
    .sel-ta__bild {
        width: 96px; height: 96px; flex: 0 0 auto;
        display: grid; place-items: center;
    }
    .sel-ta__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .sel-ta__text { min-width: 0; }
    .sel-ta__name {
        font-size: 15.5px; font-weight: 600; line-height: 1.32;
        letter-spacing: -.01em; margin: 0; color: var(--text-primary, #1d1d1f);
    }
    .sel-ta__preise { display: flex; align-items: baseline; gap: 9px; margin: 9px 0 0; flex-wrap: wrap; }
    .sel-ta__alt {
        font-size: 13px; color: var(--text-tertiary, #86868b); text-decoration: line-through;
    }
    .sel-ta__neu {
        font-size: 27px; font-weight: 800; letter-spacing: -.03em;
        color: var(--text-primary, #1d1d1f);
    }
    .sel-ta__spar {
        margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 600; color: #0a7d3c;
        background: rgba(10,125,60,.09); padding: 3px 9px; border-radius: 999px;
    }
    .sel-ta__sr {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* Kennzeichnung synthetischer Inhalte. Ein Zeichen ALLEIN reicht nicht —
       niemand liest daraus „KI-erzeugt", und die Kennzeichnung muss verstaendlich
       sein. Deshalb Zeichen + kurzes Wort, beides in derselben grauen Farbe wie
       bisher. */
    /* Dritter Weg, bewusst als Textzeile und nicht als dritter Knopf: drei
       gleich starke Knoepfe nebeneinander verwaessern die Entscheidung
       „Zum Artikel" / „Kein Interesse". */
    .sel-ta__kategorie {
        display: block; text-align: center; text-decoration: none;
        padding: 2px 15px 10px;
        font-size: 13px; font-weight: 600;
        color: var(--accent, #FB7701);
    }
    .sel-ta__kategorie:hover { text-decoration: underline; }

    .sel-ta__kihinweis {
        margin: 0; padding: 0 15px 11px;
        display: flex; align-items: center; justify-content: center; gap: 4px;
        font-size: 9px; line-height: 1.3; text-align: center;
        color: var(--text-tertiary, #86868b); opacity: .75; letter-spacing: .02em;
    }
    .sel-ta__knoepfe { display: flex; gap: 9px; padding: 12px 15px 10px; }
    .sel-ta__ja {
        flex: 1; background: var(--text-primary, #1d1d1f); color: #fff;
        border: 0; border-radius: 11px; padding: 13px 14px;
        font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
        text-align: center; text-decoration: none; line-height: 1.4;
    }
    /* Gleich gross und gleich deutlich wie „Zum Artikel". Ein unscheinbarer
       Knopf fuehrt dazu, dass der Kunde irgendwo klickt und das Angebot
       ungewollt verliert. */
    .sel-ta__nein {
        background: var(--bg-secondary, #f1f1f4);
        border: 1px solid var(--border, #d2d2d7); border-radius: 11px;
        color: var(--text-primary, #1d1d1f); padding: 13px 16px;
        font-size: 15px; font-weight: 600; cursor: pointer;
        font-family: inherit; white-space: nowrap;
    }
    .sel-ta__nein:hover { background: var(--bg-tertiary, #e8e8ed); }
    .sel-ta__ja:focus-visible, .sel-ta__nein:focus-visible,
    .sel-ta__nein-ja:focus-visible, .sel-ta__nein-nein:focus-visible {
        outline: 2px solid var(--accent, #FB7701); outline-offset: 2px;
    }

    .sel-ta__rueckfrage[hidden] { display: none; }
    .sel-ta__rueckfrage { align-items: center; }
    .sel-ta__frage-text {
        flex: 1; font-size: 15px; font-weight: 700;
        color: var(--text-primary, #1d1d1f);
    }
    .sel-ta__nein-ja {
        background: var(--bg-secondary, #f1f1f4);
        border: 1px solid var(--border, #d2d2d7); border-radius: 11px;
        color: var(--text-primary, #1d1d1f); padding: 13px 22px;
        font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
    }
    .sel-ta__nein-nein {
        background: var(--text-primary, #1d1d1f); color: #fff;
        border: 0; border-radius: 11px; padding: 13px 22px;
        font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
    }

    /* Handy: Blatt am unteren Rand, Knoepfe in Daumenreichweite, Trefferflaechen
       mindestens 44 px. Es sitzt UEBER der Tab-Leiste (60px + safe-area) und auf
       Produktseiten zusaetzlich ueber der Kaufleiste — body.has-buybar gibt es
       bereits (mobile-tabbar.blade.php:60). */
    /* ── Kleine Bildschirme: iPad, MacBook Air, jedes niedrige Fenster ──────
       Gemeldet am 31.08.2026: „bei kleinem monitor ist die dame und das
       angebot penetrant und ueberdeckt das menue".

       Gestaffelt nach dem, was tatsaechlich fehlt — Platz nach OBEN und Platz
       zur SEITE sind zwei verschiedene Probleme:

       1. Zu wenig Hoehe  -> die FIGUR faellt weg. Sie braucht am meisten Platz
          und traegt am wenigsten Information. Die Karte bleibt vollstaendig.
       2. Zu wenig Breite -> die KARTE wird schmaler und die Schrift kleiner,
          damit sie nicht in die Kategorie-Spalte ragt.
       Beides greift unabhaengig voneinander. */

    @media (max-height: 860px) {
        .sel-ta__person { display: none; }
    }

    @media (max-width: 1280px) {
        .sel-ta { width: 330px; }
        .sel-ta__vorteil-prozent { font-size: 26px; }
        .sel-ta__vorteil { padding: 9px 14px; }
        .sel-ta__leib { padding: 11px 13px 4px; gap: 11px; }
        .sel-ta__bild { width: 74px; height: 74px; }
        .sel-ta__name { font-size: 14px; }
        .sel-ta__neu { font-size: 21px; }
        .sel-ta__knoepfe { padding: 10px 13px 8px; }
        .sel-ta__ja, .sel-ta__nein { padding: 11px 12px; font-size: 14px; }
        /* Bei wenig Breite steht die Figur der Navigation im Weg — auch dann,
           wenn die Hoehe reichen wuerde. */
        .sel-ta__person { display: none; }
    }

    @media (max-width: 640px) {
        .sel-ta {
            left: 10px; right: 10px;
            width: auto; max-width: none; border-radius: 22px;
        }
        .sel-ta__vorteil-prozent { font-size: 30px; }
        /* Auf dem Handy etwas kleiner, damit Tafel und Figur nebeneinander
           passen, ohne den Text zu verdraengen. */
        /* Auf dem Handy schmaler, damit die Person nicht den halben Schirm
           einnimmt und die Karte selbst lesbar bleibt. */
        .sel-ta__person { width: 46%; max-width: 160px; margin-bottom: -8px; }
        /* Rechts neben der Karte ist am Handy nichts — die Figur waere
           ausserhalb des Bildschirms. Weg damit, statt sie zu quetschen. */
        .sel-ta--figur-zeigt .sel-ta__person { display: none; }
        .sel-ta__knopf-klein { width: 44px; height: 44px; }
        .sel-ta__knoepfe { flex-direction: column-reverse; padding: 13px 14px 16px; }
        .sel-ta__ja, .sel-ta__nein { width: 100%; padding: 14px; font-size: 15.5px; }
        /* Die Rueckfrage bleibt EINE Zeile — untereinander saehe sie aus wie
           zwei getrennte Aktionen statt wie eine Frage mit zwei Antworten. */
        .sel-ta__rueckfrage { flex-direction: row; flex-wrap: wrap; }
        .sel-ta__nein-ja, .sel-ta__nein-nein { flex: 1; padding: 14px; }
    }

    /* Kein Blinken, kein Pulsieren — und wer Bewegung abbestellt hat, bekommt keine. */
    @media (prefers-reduced-motion: reduce) {
        .sel-ta { transition: none; opacity: 1; transform: none; }
        .sel-ta__person { transition: none; opacity: 1; }
    }