/* =====================================================================
 * SHOP: PRODUKT-POPUP UND ANFRAGEKORB
 *
 * Optik des Popups (includes/produkt-dialog.php) und des Korb-Panels mit
 * Schwebe-Knopf (includes/anfragekorb.php). Gebraucht auf jeder Seite, die
 * Produkte zeigt: Paketshop, Startseite, saunamusik.php.
 *
 * Dazu die Beschriftungsklassen der Produktkarten (.product-card-kicker,
 * -title, -price, -bundle-*), weil das Popup sie in seiner Produktauswahl
 * wiederverwendet.
 *
 * Alles, was nur das Raster und die Referenzen des Paketshops betrifft,
 * steht in pages/pakete.css.
 * ===================================================================== */

/*
 * Liquid-Glass-Label - Kategorie in Blau (Signalfarbe
 * für Information), Produktname weiß, Preis in Orange (Signalfarbe Preis).
 */

/*
 * Einspaltiger, vollbreiter Stapel statt zweispaltigem Grid (Info links,
 * Schlagwörter rechts) - klare Lesereihenfolge von oben nach unten:
 * Kategorie, Titel, Preis, ganz unten die Schlagwörter als eigene, volle
 * Zeile. Titel/Kategorie haben dadurch die volle Breite zur Verfügung
 * (weniger Umbruch-Risiko), Schlagwörter stören die Zeilen darüber nicht
 * mehr, da sie eine eigene Reihe sind statt sich die Breite zu teilen.
 */

.product-card-label {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border-radius: 16px;
    background: color-mix(in srgb, #fff 16%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    text-align: left;
    overflow: hidden;
}

/* Kicker als eigenes, kleines "eingestempeltes" Glas-Element statt Textrand-Trick - dunklerer Untergrund sorgt für Lesbarkeit auf jedem Motiv, größer als vorher. */

.product-card-kicker {
    display: inline-block;
    justify-self: start;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    /*
     * 85 % statt 45 % (3.5.0-p21, Befund Lars: "Individualauftrag in
     * pakete sind die Karten zu dunkel").
     *
     * Die Pille lag ueber dem Cover und war zu durchsichtig: Auf einem
     * hellen Motiv erreichte der Kicker nur 1,4. Mit 85 % traegt sie
     * auf jedem Cover.
     *
     * Derselbe Weg wie bei den Hoerproben-Kickern (3.4.0-p62).
     */
    background: rgba(8, 12, 18, .85);
    border: 1px solid rgba(255, 255, 255, .25);

    /*
     * Die HELLE Fassung: Auf einer dunklen Pille ist das abgedunkelte
     * Blau zu dunkel (2,58). So sind es 5,1.
     */
    color: var(--blue-auf-dunkel, #388eab);
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* Verhindert den Umbruch zu "WELLNESS" / "MUSIK" auf zwei Zeilen - mal war genug Platz, mal nicht, je nach Kartenbreite. Jetzt immer eine Zeile. */
    white-space: nowrap;
}

.product-card-title {
    font-size: 1.15rem;
    line-height: 1.2;
}

.product-card-price {
    /* Helle Fassung - steht auf Cover-Glas (3.5.0-p21). */
    color: var(--orange-auf-dunkel, #ec5830);
    font-weight: 950;
    font-size: 1.1rem;
    /* Korrektur 30.08.2026: .product-card-label ist nur ein LEICHTES Glas
       (16% Weiß, siehe .product-card-label) - auf warmtonigen Covern (z. B.
       "Italiano") war der orangene Preis dadurch kaum lesbar, gleiche
       Grundursache wie B1 beim Play-Button, hier bisher nicht mitgefixt.
       Fester dunkler Schatten statt Hintergrund-Pille, damit die
       Glas-Optik der Karte erhalten bleibt. */
    text-shadow: 0 1px 5px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
}

/* Bundle-Hinweis unter dem Playlist-Preis - zeigt, dass diese Playlist Teil eines günstigeren Themenpakets ist. */

/*
 * BUNDLE-HINWEIS: PREIS RECHTS, NAME SCHNEIDET AB (3.4.0-p19)
 * ---------------------------------------------------------------------
 *
 * Befund Lars: "Es gibt Kacheln, die haben durch die lange
 * Paketbeschreibung den Preis in einer neuen Zeile. Das Fenster ist
 * hoeher als bei anderen."
 *
 * Vorher war beides EIN Text: 'Bundle „Mentale Gesundheit" = 127,50 €'.
 * Bei langen Produktnamen brach er um, das Label wuchs nach oben, und die
 * Kachel stand hoeher als ihre Nachbarn.
 *
 * Jetzt zwei Elemente in einer Zeile. Der Preis ist die Angabe, auf die
 * es ankommt - er behaelt seinen Platz. Der Name darf abschneiden, denn
 * er steht als Ueberschrift ohnehin darueber.
 */

.product-card-bundle-hint {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: rgba(255, 255, 255, .75);
    font-size: .7rem;
    font-weight: 700;
}

/*
 * min-width: 0 ist der entscheidende Teil.
 *
 * Ein Flex-Kind ist von sich aus mindestens so breit wie sein Inhalt -
 * text-overflow greift dann nie, weil nichts ueberlaeuft. Erst min-width:0
 * erlaubt dem Element, schmaler zu werden als sein Text.
 */

.product-card-bundle-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Preis weicht nicht und bricht nicht um. */

.product-card-bundle-price {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #fff;
}

/*
 * 3.2.5-p34 (Block A): "background: transparent" ist hier ENTFALLEN.
 *
 * Es stand nur da, um die deckende Flaeche der zentralen .modal-Regel
 * abzuwehren. Seit der Dialog data-layout="frei" traegt, bekommt er
 * diese Flaeche gar nicht mehr - es gibt nichts zurueckzunehmen. Die
 * eigentliche Glasflaeche liegt ohnehin auf .modal-shell weiter unten.
 *
 * Auch die Hoehenangaben stehen jetzt aus eigenem Recht: Die zentrale
 * Deckelung auf min(88dvh, 760px) greift beim abgemeldeten Dialog nicht
 * mehr, die 92dvh sind seine eigene Entscheidung.
 */

#productDialog.modal {
    /*
     * DER PRODUKTDIALOG BRAUCHT SEIN EIGENES GLAS (3.5.0-p40).
     *
     * Befund Lars: "Die Cover kommen nicht am Popup durch."
     *
     * DIE URSACHE LAG SEIT p28 IM CODE: Dieser Dialog traegt
     * data-layout="frei". Alle Glasregeln stehen aber in
     * .modal:not([data-layout="frei"]) - sie haben ihn nie erreicht.
     *
     * In p28 hatte ich die Glasflaeche von .modal-shell entfernt, in
     * der Annahme, der Rahmen darunter liefere sie. Fuer die anderen
     * Dialoge stimmt das. Fuer diesen nicht - seitdem zeigte er die
     * weisse Voreinstellung des Browsers fuer <dialog>.
     *
     * DESHALB STANDEN ALLE AENDERUNGEN DER LETZTEN PATCHES INS LEERE:
     * 84/74, 66/56, 55/45, der kleinere Weichzeichner. Sie galten fuer
     * die anderen Dialoge - und dort haben sie gewirkt, weshalb die
     * Patchnotes glaesern aussahen und dieser hier nicht.
     *
     * Jetzt dieselben Werte, direkt an ihm.
     */
    background:
        linear-gradient(168deg,
            color-mix(in srgb, var(--dialog-grund, var(--surface)) 52%, transparent),
            color-mix(in srgb, var(--dialog-grund, var(--surface)) 44%, transparent));
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid color-mix(in srgb, #fff 62%, transparent);

    /* Korrektur 31.08.2026: kein fester 960px-Deckel mehr, konsistent mit
       .modal-shell darin - vorher kappte der aeussere Dialog-Rahmen die
       Groesse auf jedem Bildschirm ueber ca. 1040px Hoehe wieder auf
       960px zurueck, selbst wenn .modal-shell schon auf die volle 92dvh
       gesetzt war. */
    height: 92dvh;
    max-height: 92dvh;
}

#productDialog .modal-shell {
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    /* Korrektur 31.08.2026: feste height statt nur max-height - vorher
       schrumpfte der Dialog je nach Playlist-Anzahl des Produkts auf seine
       Inhaltshoehe und sprang beim Durchblaettern sichtbar in der Groesse.
       Jetzt konstant; .pakete-dialog-body scrollt intern, bei wenig Inhalt
       bleibt unten Leerraum statt Groessensprung. Kein fester 960px-Deckel
       mehr (Absprache 31.08.2026) - reine Prozentangabe der Fensterhoehe,
       damit auf hohen/grossen Bildschirmen tatsaechlich mehr Platz fuer die
       Playlisten-Liste entsteht statt bei 960px zu kappen. */
    height: 92dvh;
    max-height: 92dvh;
    overflow: hidden;
    /*
     * KEINE ZWEITE SCHICHT (3.5.0-p28).
     *
     * Hier standen 40 Prozent --surface. Zusammen mit dem Dialog
     * darunter (84 Prozent) ergab das 90 Prozent Deckung - der Gewinn
     * aus dem duenneren Dialog waere fast verpufft.
     *
     * Das Material kommt vom Dialog, die Schale ordnet nur den Inhalt.
     * Auch der zweite Weichzeichner faellt weg: Blur auf Blur ist teuer
     * und bringt nichts (Designformel - nie stapeln).
     */
    background: transparent;

    /*
     * Bezugsrahmen fuer den Lichtverlauf darunter (3.5.0-p38).
     */
    position: relative;
}

/*
 * LICHT AUF DER FREIEN FLAECHE (3.5.0-p38, Wunsch Lars: "Auch wenn die
 * freien Flaechen ruhig mehr Liquid Glas Design vertragen koennten").
 *
 * Unter den Playlisten bleibt Leerraum - die Hoehe ist bewusst fest,
 * damit der Dialog beim Durchblaettern nicht springt (Befund Lars vom
 * 31.08.2026). Diese Flaeche war bisher nur Grund.
 *
 * Jetzt liegt ein weicher Lichtverlauf darueber: hell an der oberen
 * linken Kante, zum unteren Rand hin auslaufend. Das ist, was eine
 * Glasscheibe ausmacht - sie faengt Licht.
 *
 * WARUM AN DER SCHALE UND NICHT AM KOERPER: Der Koerper scrollt. Ein
 * Verlauf darin wuerde mitwandern und waere kein Licht mehr, sondern
 * ein Fleck, der sich bewegt.
 *
 * SEHR ZURUECKHALTEND: 7 Prozent Weiss oben, nichts unten. Genug, um
 * Material zu zeigen, zu wenig, um vom Inhalt abzulenken. Auf den
 * Kontrast wirkt es nicht - die Zeilen tragen ihren eigenen Grund.
 */

#productDialog .modal-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(158deg,
        color-mix(in srgb, #fff 7%, transparent) 0%,
        transparent 62%);
    pointer-events: none;

    /*
     * Unter dem Inhalt: Die Kinder der Schale sind im Fluss und liegen
     * damit ohnehin darueber, solange dieses Element keinen eigenen
     * Stapelwert bekommt.
     */
    z-index: 0;
}

/*
 * 3.2.5-p34: padding steht jetzt HIER.
 *
 * Der Rumpf trug bis p33 die 20px aus der zentralen .modal-scroll-Regel -
 * unbemerkt, weil sie nie jemand hier gesucht haette. Mit der Abmeldung
 * vom Dialog-Muster faellt sie weg, also bekommt der Dialog sie aus
 * eigenem Recht. Gegenprobe vor dem Bauen: Es gab keine zweite Quelle und
 * keine Media Query, die den Wert veraendert.
 */

#productDialog .pakete-dialog-body {
    flex: 1;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
}

/*
 * VERSCHOBEN NACH components.css (3.2.5-p2).
 *
 * Hier stand die Scroll-Sperre fuer geoeffnete Dialoge. Sie greift ueber
 * "body:has(dialog[open])" auf JEDEN Dialog - also auch auf die der
 * Startseite (Referenzen, Datenschutz). Dort wird diese Datei aber gar
 * nicht geladen: Beim Oeffnen scrollte die Seite dahinter weiter.
 *
 * Eine seitenweite Regel gehoert in die zentrale Datei. Die Angabe zum
 * Anfragekorb bleibt hier - der ist Sache des Paketshops.
 */

body:has(.pakete-cart-drawer.open) {
    overflow: hidden;
}

#productDialog .pakete-dialog-body,
#productDialog .pakete-dialog-products,
.pakete-cart-drawer section {
    overscroll-behavior: contain;
}

#productDialog .copy {
    color: var(--ink);
}

#productDialog #dialogType:empty {
    display: none;
}

/* Kategorie-Pille ist klickbar (Lars, 31.08.2026) - Wechsel zur anderen
   Kategorie. Wechsel-Symbol nur auf dem Smartphone, wo der
   Desktop-Umschalter fehlt. */

#productDialog #dialogType {
    display: inline-block;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    /*
     * HELLE PILLE IM HELLMODUS (3.5.0-p27, Befund Lars: "kann man kaum
     * Wellness Musik lesen").
     *
     * Hier stand eine dunkle Pille mit blauer Schrift - von den
     * Coverkarten uebernommen. Auf dem hellen Dialog ergab das einen
     * grauen Fleck mit 1,43 Kontrast.
     *
     * Die Tokens wechseln mit dem Modus: hell ein Hauch Blau, dunkel
     * die dunkle Flaeche.
     */
    background: var(--pille-blau, #eaf2f4);
    border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
    color: var(--pille-blau-schrift, #2c768e);
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    /* Etwas Luft zum Produktnamen darunter (Lars, 31.08.2026) */
    margin-bottom: 5px;
}

/* Fokusring nur per Tastatur - nach Tipp/Klick bleibt der Fokus auf der
   Pille (seit sie tabindex hat) und zeigte sonst den globalen Ring. */

#productDialog #dialogType:focus:not(:focus-visible) {
    outline: none;
}

@media (max-width: 650px) {
#productDialog #dialogType::after {
        content: " ⇄";
        opacity: .8;
    }
}

/* Kategoriefarbe im Kicker (Absprache 31.08.2026): Event = Orange.
   data-tone statt data-category, damit selectCategory() das Label nicht
   wie einen Tab mit .active/aria-selected behandelt. */

#productDialog #dialogType[data-tone="event"] {
    color: var(--orange-text, #d23b12);
}

#productDialog .icon-button,
.pakete-cart-drawer .icon-button {
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border: 1px solid rgba(255, 255, 255, .35);
}

#productDialog .pakete-dialog-top {
    /* Positionsanker für das Produkt-Popover (Absprache 31.08.2026): die
       Kopfzeile ist so breit wie der Dialog, dadurch kann das Popover auf
       2/3 der Dialogbreite laufen statt nur so breit wie die rechte Ecke. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

/*
 * Zurueck-Knopf als Glas (F5, 01.09.2026): Er stand als einziges
 * Bedienelement im Dialogkopf auf transparent - neben dem verglasten
 * Schliessen-Kreuz und dem Pager wirkte er wie ein blosser Textlink.
 * Jetzt dieselbe Glasflaeche wie die uebrigen Bedienelemente, in der
 * Aktionsfarbe: halbtransparenter Orange-Ton, weichgezeichneter
 * Hintergrund, helle Oberkante fuer die Materialdicke.
 */

.pakete-dialog-back {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--orange) 14%, transparent);
    backdrop-filter: blur(16px) saturate(175%);
    -webkit-backdrop-filter: blur(16px) saturate(175%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
    color: var(--orange-text, #d23b12);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

html[data-theme=dark] .pakete-dialog-back {
    border-color: color-mix(in srgb, var(--orange) 62%, transparent);
    background: color-mix(in srgb, var(--orange) 22%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

@media (hover: hover) and (pointer: fine) {
.pakete-dialog-back:hover {
        border-color: var(--orange);
        background: color-mix(in srgb, var(--orange) 28%, transparent);
    }
}

.pakete-dialog-title {
    /* Feste Breite statt flex:1 (Lars, 31.08.2026): der Titel gab dem
       Umschalter nur den Rest - je nach Länge des Produktnamens rutschten
       die Kategorie-Pillen mit. Jetzt fixer Startpunkt, langer Name wird
       per Ellipsis abgeschnitten (siehe h2 unten). */
    flex: 0 0 clamp(180px, 24vw, 300px);
    min-width: 0;
}

.pakete-dialog-title h2 {
    margin: 0;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Umschalter (Absprache 31.08.2026): sitzt in der zuvor ungenutzten
 * Fläche zwischen Titel und Pager - nur Tablet/Desktop (siehe
 * @media max-width:650px weiter unten, wo er wieder ausgeblendet wird,
 * damit die mobile Drilldown-Ebene-1 unverändert bleibt).
 */

.pakete-dialog-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Übernimmt den flexiblen Restplatz und beginnt direkt nach dem Titel -
       dadurch stehen die Kategorie-Pillen weiter links und die Position
       ändert sich nicht mehr mit dem Produktnamen. */
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    margin-left: 12px;
}

.pakete-dialog-switcher-categories {
    display: flex;
    gap: 6px;
}

.pakete-dialog-switcher-tab {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* Wellness = Blau, Event = Orange (Absprache 31.08.2026) - so von Anfang
   an geplant, bislang aber nirgends umgesetzt gewesen. Gilt nur für den
   aktiven Zustand der Pille, damit inaktive Kategorien optisch zurückhaltend
   bleiben. */

.pakete-dialog-switcher-tab[data-category="wellness"].active {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.pakete-dialog-switcher-tab[data-category="event"].active {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
}

.pakete-dialog-switcher-product {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    /* Feste, viewport-relative Breite statt max-width: der Trigger darf
       nicht mit dem Namen wachsen und die Pillen verschieben. Chevron
       bleibt rechts, der Name läuft in Ellipsis (siehe span:first-child). */
    width: clamp(150px, 16vw, 230px);
    justify-content: space-between;
    transition: border-color .15s ease;
}

.pakete-dialog-switcher-product span:first-child {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pakete-dialog-switcher-product:hover,
.pakete-dialog-switcher-product[aria-expanded="true"] {
    border-color: var(--orange);
}

.pakete-dialog-switcher-popover {
    position: absolute;
    top: calc(100% + 8px);
    /* 2/3 der Dialogbreite, mittig (Absprache 31.08.2026) - Anker ist
       .pakete-dialog-top, nicht mehr der Umschalter. */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    /* Korrektur 31.08.2026: auto-fill fiel in der 2/3-Breite auf 2 Spalten
       zurück (riesige Kacheln, Scrollen nötig). Jetzt feste 3 Spalten und
       breiter - alle 6 Produkte in 2 Reihen, Kacheln bleiben quadratisch. */
    width: 88%;
    max-height: min(78vh, 720px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    /* Glas wie .modal-shell (Designformel): halbtransparent + Blur.
       Vorher deckendes var(--surface) - der Blur lief ins Leere, die
       Fläche stand als weiße Kachel im Dialog (Lars, 31.08.2026). */
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

/* Hausregel 3: display:grid schlägt [hidden] - ohne diese Begleitregel
   stand das Popover im geschlossenen Zustand als leerer Balken im Header
   (Bild 2, 31.08.2026). */

.pakete-dialog-switcher-popover[hidden] {
    display: none;
}

/*
 * Nase zum Trigger-Button (Absprache 31.08.2026): rotiertes Quadrat als
 * ::after der Kopfzeile, per clip-path auf die obere Hälfte beschnitten,
 * damit nichts ins Popover hineinragt und der Glas-Ton dort nicht doppelt
 * wird. X-Position setzt positionDialogSwitcherArrow() in pakete.js.
 * Gleicher Hintergrund/Rahmen wie .pakete-dialog-switcher-popover.
 */

#productDialog .pakete-dialog-top::after {
    content: "";
    position: absolute;
    top: calc(100% + 1px);
    left: var(--switcher-arrow-x, 50%);
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    /*
     * Leichter (3.5.0-p37, Wunsch Lars: mehr Glas). Der Schleier ueber
     * dem Kopf ist reine Rahmung - er muss sich nicht absetzen, nur den
     * Text tragen. Bei 48 Prozent erreicht der noch 15,8.
     */
    background: color-mix(in srgb, var(--surface) 48%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 6;
    pointer-events: none;
    display: none;
}

#productDialog[data-switcher-open="true"] .pakete-dialog-top::after {
    display: block;
}

/*
 * Kacheln im Popover (Absprache 31.08.2026): dieselbe Optik wie die
 * Produktkarten auf der Pakete-Seite - Cover volle Fläche, Glas-Label
 * unten mit Kicker/Titel/Preis. Die Label-Klassen (.product-card-label,
 * -kicker, -title, -price, -bundle-hint) werden 1:1 wiederverwendet,
 * nur .product-card selbst nicht (daran hängt Karussell-/Play-Logik in
 * pakete.js). Verlauf unten wie .product-card::before, damit das Label
 * auf hellen Covern lesbar bleibt.
 */

.pakete-dialog-switcher-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, transparent), color-mix(in srgb, var(--orange) 30%, transparent));
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.pakete-dialog-switcher-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 45%, transparent 70%);
    pointer-events: none;
}

.pakete-dialog-switcher-tile:hover {
    border-color: color-mix(in srgb, var(--orange) 60%, transparent);
    transform: translateY(-1px);
}

.pakete-dialog-switcher-tile.active {
    border-color: var(--orange);
}

.pakete-dialog-switcher-tile img,
.pakete-dialog-switcher-tile .pakete-dialog-products-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kleinere Kachel als auf der Pakete-Seite - Label kompakter, Typo eine
   Stufe kleiner, Schriftschnitte/Farben bleiben die der Karten. */

.pakete-dialog-switcher-tile .product-card-label {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
}

.pakete-dialog-switcher-tile .product-card-kicker {
    font-size: .72rem;
    padding: 3px 9px;
}

.pakete-dialog-switcher-tile .product-card-title {
    font-size: 1.05rem;
}

.pakete-dialog-switcher-tile .product-card-price {
    font-size: 1.05rem;
}

/* Kategoriefarbe im Kicker (Absprache 31.08.2026): Event = Orange. */

.product-card-kicker[data-tone="event"] {
    /* Helle Fassung - steht auf Cover-Glas (3.5.0-p21). */
    color: var(--orange-auf-dunkel, #ec5830);
}

.pakete-product-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pakete-product-pager span {
    font-size: .8rem;
    color: var(--ink);
    min-width: 58px;
    text-align: center;
}

.pakete-product-pager button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.pakete-product-pager button:hover {
    border-color: var(--orange);
    color: var(--orange-text, #d23b12);
}

#productDialog .pakete-dialog-top .icon-button {
    flex-shrink: 0;
}

.pakete-dialog-products {
    display: none;
}

.pakete-dialog-category-tabs {
    display: none;
    gap: 8px;
    padding: 12px 14px 4px;
    flex-shrink: 0;
}

.pakete-dialog-category-tabs button {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: .84rem;
    cursor: pointer;
}

.pakete-dialog-category-tabs button.active {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
}

/* Kategoriefarbe (Absprache 31.08.2026): Wellness = Blau, Event = Orange */

.pakete-dialog-category-tabs button[data-category="wellness"].active {
    border-color: var(--blue);
    background: var(--blue);
}

.pakete-dialog-products button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pakete-dialog-products img,
.pakete-dialog-products-cover {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, transparent), color-mix(in srgb, var(--orange) 30%, transparent));
}

.pakete-dialog-products-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pakete-dialog-products-text small {
    font-size: .76rem;
    color: var(--ink);
}

.pakete-dialog-products b {
    font-size: 1.3rem;
    color: var(--orange-text, #d23b12);
}

#productDialog .pakete-dialog-player {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

#dialogCover {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 18%, transparent);
}

.pakete-dialog-player-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pakete-dialog-player-title {
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pakete-player-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pakete-preview-cycle,
.pakete-preview-tabs button {
    padding: 8px 16px;
    border: 1px solid var(--blue);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--ink);
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

html[data-theme=dark] .pakete-preview-cycle,
html[data-theme=dark] .pakete-preview-tabs button {
    background: color-mix(in srgb, var(--blue) 22%, rgba(8, 12, 18, .35));
    color: var(--blue);
    text-shadow: 0 1px 2px rgba(8, 12, 18, .6);
}

.pakete-preview-tabs {
    display: flex;
    gap: 8px;
}

.pakete-preview-tabs button {
    width: 108px;
    flex: none;
    text-align: center;
}

.pakete-preview-tabs button.active {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
    text-shadow: none;
}

.pakete-preview-cycle {
    display: none;
}

.pakete-preview-cycle b {
    font-size: .95rem;
}

.pakete-preview-cycle[hidden] {
    display: none;
}

#productSkipBack,
#productSkipForward {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: .78rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

#productSkipBack:hover,
#productSkipForward:hover {
    border-color: var(--orange);
    color: var(--orange-text, #d23b12);
}

.pakete-player-toggle {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--orange) 45%, transparent);
    transition: transform .15s ease;
}

.pakete-player-toggle:hover {
    transform: scale(1.06);
}

.pakete-player-toggle:active {
    transform: scale(.94);
}

.pakete-dialog-value {
    margin-left: auto;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pakete-dialog-value strong {
    font-size: 1.25rem;
}

.pakete-dialog-value-hint {
    font-size: .76rem;
    color: var(--ink);
}

.pakete-playlist-list {
    display: grid;
    gap: 9px;
    margin: 18px 0;
}

.pakete-playlist-row {
    display: grid;
    grid-template-columns: auto 52px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    background: color-mix(in srgb, #fff 45%, transparent);
    box-shadow: 0 4px 14px rgba(15, 30, 50, .08);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

@media (hover: hover) and (pointer: fine) {
.pakete-playlist-row:hover {
        border-color: var(--orange);
    }
}

html[data-theme=dark] .pakete-playlist-row {
    background: linear-gradient(165deg, #142433, #0c1c2c);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.pakete-playlist-row.active {
    border-color: var(--blue);
    /*
     * Die aktuelle Playlist faellt auch dann auf, wenn sie zugleich gewaehlt
     * ist (.checked setzt einen orangen Rahmen): Der blaue Balken links und
     * die leichte Toenung hangen nicht am Rahmen.
     */
    background: color-mix(in srgb, var(--blue) 9%, transparent);
    box-shadow: inset 5px 0 0 var(--blue);
}

/*
 * LAUFENDE PLAYLIST: Tonbalken vor dem Titel, rein ueber CSS. Drei Balken
 * aus Verlaeufen, deren Hoehe wechselt. Bei reduzierter Bewegung stehen sie
 * still.
 */
.pakete-playlist-row.playing .pakete-playlist-row-text strong::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -1px;
    color: var(--blue);
    background:
        linear-gradient(currentColor, currentColor) 0 100% / 4px 60% no-repeat,
        linear-gradient(currentColor, currentColor) 6px 100% / 4px 100% no-repeat,
        linear-gradient(currentColor, currentColor) 12px 100% / 4px 40% no-repeat;
    animation: playlist-ton 1s ease-in-out infinite;
}

@keyframes playlist-ton {
    0%   { background-size: 4px 60%, 4px 100%, 4px 40%; }
    33%  { background-size: 4px 100%, 4px 45%, 4px 80%; }
    66%  { background-size: 4px 35%, 4px 85%, 4px 100%; }
    100% { background-size: 4px 60%, 4px 100%, 4px 40%; }
}

@media (prefers-reduced-motion: reduce) {
    .pakete-playlist-row.playing .pakete-playlist-row-text strong::before {
        animation: none;
    }
}

.pakete-playlist-row.checked {
    border-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 6%, transparent);
}

.pakete-playlist-row input {
    width: 22px;
    height: 22px;
    accent-color: var(--orange);
}

.pakete-playlist-row-cover {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--soft);
}

.pakete-calculation-price strong,
.pakete-dialog-footer-summary b,
.pakete-dialog-value strong,
.pakete-playlist-row.checked .pakete-playlist-row-text strong,
.pakete-playlist-row.checked > b {
    display: inline-block;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 999px;
    /*
     * PREIS-PILLEN (3.5.0-p27).
     *
     * Hier stand eine dunkle Flaeche mit oranger Schrift, dazu eine
     * Hellmodus-Ausnahme mit blauer Schrift auf 82 Prozent dunkel. Im
     * hellen Dialog erreichten beide nur 1,5 bzw. 2,6.
     *
     * Die Tokens wechseln jetzt mit dem Modus - die Ausnahme darunter
     * ist damit entfallen.
     */
    background: var(--pille-orange, #fbebe7);
    border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent);
    color: var(--pille-orange-schrift, #c73811);
}

.pakete-playlist-row-text strong {
    display: block;
    color: var(--orange-text, #d23b12);
    font-size: .98rem;
}

.pakete-playlist-row-text small {
    display: block;
    color: var(--ink);
    font-weight: 700;
    font-size: .82rem;
}

html[data-theme=dark] .pakete-playlist-row-text small {
    color: var(--blue);
    text-shadow: 0 1px 2px rgba(8, 12, 18, .55);
}

.pakete-playlist-row > b {
    font-size: .95rem;
    white-space: nowrap;
}

.pakete-calculation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    margin: 18px 0;
    background: linear-gradient(165deg, color-mix(in srgb, var(--orange) 8%, transparent), color-mix(in srgb, #fff 42%, transparent));
    box-shadow: 0 4px 14px rgba(15, 30, 50, .08);
}

html[data-theme=dark] .pakete-calculation {
    border-color: var(--line);
    background: linear-gradient(165deg, #142433, #0c1c2c);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}

.pakete-calculation h3 {
    margin: 0 0 4px;
}

.pakete-discount-note {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: .78rem;
}

.pakete-calculation-price {
    text-align: right;
}

.pakete-calculation-price s {
    display: block;
    color: var(--muted);
}

#selectionBefore[hidden] {
    display: none;
}

.pakete-calculation-saving {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    font-weight: 750;
    color: var(--muted);
}

.pakete-calculation-saving[hidden] {
    display: none;
}

.pakete-calculation-price strong {
    font-size: 1.4rem;
}

.pakete-dialog-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    /*
     * ANGEGLICHEN (3.5.0-p36). Hier standen 92 Prozent - gegenueber dem
     * Dialog mit 52 war das ein weisser Balken statt einer Leiste.
     * Jetzt 74: sie setzt sich noch ab, ohne zu erschlagen.
     */
    background: color-mix(in srgb, var(--surface) 58%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.pakete-dialog-footer-summary {
    min-width: 0;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pakete-dialog-footer-summary s {
    opacity: .55;
    margin-right: 4px;
}

.pakete-dialog-footer-summary b {
    font-size: 1rem;
}

.pakete-dialog-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#selectAll {
    border-color: var(--blue);
    color: var(--blue);
}

#clearSelection {
    border-color: var(--ink);
    color: var(--ink);
}

/*
 * REIHENFOLGE BEACHTEN (p27): Dieser Block steht bewusst VOR dem
 * 650px-Block weiter unten. Beide haben dieselbe Spezifitaet; auf einem
 * Smartphone treffen beide zu, und der spaetere gewinnt. Stuende er danach,
 * bekaeme der Dialog dort wieder den 8px-Versatz statt bündig zu sitzen -
 * also genau der Fehler aus 3.2.3-F3.
 */

/*
 * PRODUKTDIALOG: VOLLE ZUSTAENDIGKEIT HIER (3.2.4-p27).
 *
 * Diese Regeln standen zuvor in responsive.css, waehrend pakete.css denselben
 * Dialog ebenfalls positionierte. Aus dieser Doppelzustaendigkeit entstand
 * der Fehler 3.2.3-F3: Die Regel hier gewann per ID-Spezifitaet nur die
 * BREITE, den Versatz von 8px erbte der Dialog still von dort. Auf dem
 * Smartphone stand er dadurch zu weit rechts.
 *
 * Jetzt gilt: Alles, was den Produktdialog positioniert, steht in dieser
 * Datei - und zwar VOLLSTAENDIG, nie nur teilweise. Wer hier die Breite
 * aendert, sieht auf denselben Blick auch Position und Raender.
 *
 * Tablet und schmaler Desktop (bis 1000px): Der Dialog fuellt den Bildschirm
 * mit einem schmalen Rand ringsum, die sichere Flaeche des Geraets wird dabei
 * beruecksichtigt (Notch, Home-Indikator).
 */

@media (max-width: 1000px) {
#productDialog.modal {
        position: fixed;
        /*
         * MEHR RAND (3.5.0-p37). Vorher 8 px - der Dialog klebte am
         * Bildschirmrand, und von der Seite dahinter war nichts zu
         * sehen. Mit 24 px bleibt links und rechts ein Streifen, auf
         * dem die Seite durchscheint. Genau das macht den
         * Patchnotes-Dialog glaeserner: Er ist schmaler.
         */
        inset: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0;
    }
#productDialog .modal-shell {
        height: 100%;
        max-height: none;
    }
}

@media (max-width: 650px) {
.pakete-dialog-back {
        display: inline-flex;
    }
#productDialog[data-level="2"] .pakete-dialog-back {
        display: inline-flex;
    }
/* Umschalter nur Tablet/Desktop - Mobile nutzt weiterhin die
       Drilldown-Ebene-1 (#dialogCategoryTabs/#dialogProductList). */
.pakete-dialog-switcher {
        display: none;
    }
#productDialog[data-level="1"] .pakete-dialog-products {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
#productDialog[data-level="1"] .pakete-dialog-category-tabs {
        display: flex;
    }
#productDialog[data-level="1"] .pakete-dialog-player,
    #productDialog[data-level="1"] .pakete-dialog-body,
    #productDialog[data-level="1"] .pakete-dialog-footer-summary,
    #productDialog[data-level="1"] #selectAll,
    #productDialog[data-level="1"] #clearSelection {
        display: none;
    }
/*
     * BUGFIX F3 (01.09.2026) - Dialog ragte rechts aus dem Bildschirm.
     *
     * Hier stand width:100vw. Gleichzeitig setzt responsive.css fuer
     * Bildschirme bis 1000px:
     *     .modal.product-modal { position: fixed; inset: 8px 8px 8px; width: auto }
     * Diese Regel positioniert den Dialog also 8px vom linken Rand. Da
     * unsere Regel per ID-Spezifitaet gewinnt, blieb "links 8px" bestehen,
     * die Breite wurde aber auf die VOLLE Fensterbreite gesetzt - der
     * Dialog stand damit um mindestens diese 8px zu weit rechts. Genau
     * dort liegen Pager und Schliessen-Kreuz, die deshalb nicht mehr
     * erreichbar waren. (100vw zaehlt auf manchen Geraeten zusaetzlich die
     * Scrollleiste mit und vergroessert den Ueberstand.)
     *
     * Loesung: Die Position wird hier vollstaendig selbst gesetzt statt
     * halb von responsive.css geerbt - inset:0 statt einer Breitenangabe.
     * Der Dialog fuellt den Bildschirm damit exakt, ohne Versatz und ohne
     * Ueberstand. Das passt auch zum border-radius:0 direkt darunter, das
     * eine randlose Darstellung ohnehin voraussetzt.
     */
#productDialog.modal {
        position: fixed;
        inset: 0;
        width: auto;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
#productDialog .modal-shell {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
.pakete-preview-tabs {
        display: none;
    }
#productDialog .pakete-dialog-player {
        padding: 12px 14px;
    }
#dialogCover {
        width: 72px;
        height: 72px;
    }
.pakete-player-controls {
        justify-content: center;
    }
.pakete-preview-cycle {
        display: block;
        flex-basis: 100%;
        text-align: center;
    }
.pakete-dialog-value {
        display: none;
    }
.pakete-dialog-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    }
.pakete-dialog-footer-summary {
        text-align: center;
    }
.pakete-dialog-actions {
        margin-left: 0;
        flex-wrap: nowrap;
        gap: 8px;
    }
.pakete-dialog-actions .btn {
        flex: 1;
        justify-content: center;
        padding: 9px 8px;
        font-size: .78rem;
        white-space: nowrap;
    }
}

.pakete-cart-float {
    position: fixed;
    right: 20px;
    top: calc(var(--header, 84px) + 12px);
    z-index: 850;
    padding: 12px 20px;
    border: 1px solid #ff8666;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(236, 88, 48, .32);
}

.pakete-cart-float[hidden] {
    display: none;
}

.pakete-cart-float b {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.pakete-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 900;
    visibility: hidden;
    pointer-events: none;
}

.pakete-cart-drawer.open {
    visibility: visible;
    pointer-events: auto;
}

.pakete-cart-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 18, .22);
    opacity: 0;
    transition: opacity .25s ease;
}

.pakete-cart-drawer.open .pakete-cart-backdrop {
    opacity: 1;
}

.pakete-cart-saving {
    color: var(--orange-text, #d23b12);
    font-weight: 750;
}

/*
 * DER KORB ALS SCHWEBENDE GLASPLATTE (Wunsch Lars: durchlaessiger, edler)
 * Abstand zum Rand und runde Ecken statt einer Wand am Bildrand; die Flaeche
 * ist duenn getoent und stark weichgezeichnet, ein heller Lichtsaum an der
 * Kante gibt ihr Materialstaerke. Der Hintergrund wird nur leicht
 * abgedunkelt - die Seite bleibt sichtbar.
 */
.pakete-cart-drawer section {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(420px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, #fff 60%, transparent);
    border-radius: 26px;
    background: linear-gradient(160deg, color-mix(in srgb, #fff 46%, transparent), color-mix(in srgb, var(--blue) 8%, transparent));
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent), 0 24px 60px rgba(8, 14, 22, .28);
    transform: translateX(calc(100% + 24px)) translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    overflow-x: hidden;
    overflow-y: auto;
}

html[data-theme=dark] .pakete-cart-drawer section {
    border-color: color-mix(in srgb, #fff 16%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, #1a2c3d 62%, transparent), color-mix(in srgb, #0a1724 70%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 24px 60px rgba(0, 0, 0, .45);
}

.pakete-cart-drawer.open section {
    transform: translateX(0) translateZ(0);
}

.pakete-cart-drawer header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pakete-cart-drawer header h2 {
    margin: 0;
}

.pakete-cart-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.pakete-cart-nav[hidden] {
    display: none;
}

.pakete-cart-nav button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    color: var(--ink);
    cursor: pointer;
}

.pakete-cart-nav select {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    color: var(--ink);
}

.pakete-cart-items {
    display: grid;
    gap: 8px;
}

.pakete-cart-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #fff 65%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, #fff 34%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 6px 18px rgba(15, 30, 50, .08);
    transition: border-color .18s ease;
}

html[data-theme=dark] .pakete-cart-item {
    border-color: color-mix(in srgb, #fff 14%, transparent);
    background: color-mix(in srgb, #fff 6%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 4px 14px rgba(0, 0, 0, .25);
}

.pakete-cart-item.highlighted {
    border-color: var(--blue);
}

.pakete-cart-item button {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.pakete-cart-discount {
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--orange-text, #d23b12);
    font-weight: 800;
    font-size: .88rem;
}

.pakete-cart-discount[hidden] {
    display: none;
}

.pakete-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-weight: 900;
}

.pakete-cart-total strong {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    /* Helle Pille im Hellmodus (3.5.0-p27), siehe tokens.css. */
    background: var(--pille-orange, #fbebe7);
    border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent);
    color: var(--pille-orange-schrift, #c73811);
    font-size: 1.2rem;
}

@media (max-width: 1000px) {
.pakete-dialog-actions {
        justify-content: stretch;
    }
.pakete-dialog-actions .btn {
        flex: 1;
    }
}

@media (max-width: 650px) {
.pakete-calculation {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
.pakete-calculation-price {
        text-align: left;
    }
}

/* =====================================================================
 * SMARTPHONE-KORREKTUR PRODUKTDIALOG (3.2.3-F2, 01.09.2026)
 *
 * Gemeldeter Fehler: Auf dem Handy stand der Dialog-Kopf breiter als das
 * Fenster - Pager und Schliessen-Kreuz waren rechts nicht mehr erreichbar,
 * die Aktionsleiste unten war abgeschnitten ("Anfragekor..."). Beides
 * erzeugt zugleich seitliches Scrollen der ganzen Seite.
 *
 * Ursache: Kopfzeile und Aktionsleiste standen beide auf einer Zeile ohne
 * Umbruch (flex-wrap: nowrap) und mit white-space: nowrap auf den
 * Beschriftungen. Was nicht passte, lief einfach hinaus. Auf dem Desktop
 * ist genug Platz, deshalb fiel es dort nie auf.
 *
 * Bewusst am DATEIENDE: Die zu korrigierenden Regeln stehen weiter oben
 * und haben dieselbe Spezifitaet - eine frueher notierte Regel wuerde
 * verlieren (Hausregel Cascade-Ordnung, in dieser Version bereits zweimal
 * getroffen).
 * ===================================================================== */

@media (max-width: 650px) {
/*
     * KOPFZEILE ALS RASTER (F4, 01.09.2026).
     *
     * In F2 stand hier flex-wrap:wrap. Das hat den Ueberlauf zwar
     * beseitigt, aber ohne Ordnung: Das Schliessen-Kreuz ist als letztes
     * Element in die zweite Zeile gerutscht und landete dort ganz links -
     * an der unerwartetsten Stelle ueberhaupt. Gleichzeitig blieb in der
     * ersten Zeile Platz ungenutzt.
     *
     * Statt eines Umbruchs nach Zufall jetzt zwei bewusste Zeilen:
     *
     *   Zeile 1:  [Zurueck]  [Kategorie-Pille]  [Pager]  [X]
     *   Zeile 2:  [Produktname]
     *
     * (Die Pille steht seit p20 in Zeile 1 - siehe unten.)
     *
     * Der Titel bekommt die volle Breite der zweiten Zeile - genau der
     * Platz, der vorher verschenkt wurde. Bedienelemente stehen dort, wo
     * man sie erwartet: Zurueck links, Schliessen rechts aussen.
     *
     * Ausgeblendete Elemente (z. B. der Umschalter, auf dem Smartphone
     * display:none) belegen im Raster keine Zelle - die Aufteilung bleibt
     * also auch auf Ebene 1 des Drilldowns korrekt.
     */
#productDialog .pakete-dialog-top {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "back mitte pager close"
            "title title title title";
        align-items: center;
        gap: 8px;
        row-gap: 4px;
        padding: 10px 12px;
    }
#productDialog .pakete-dialog-top .icon-button {
        grid-area: close;
    }
/*
     * KATEGORIE-PILLE IN DIE OBERE LEISTE (3.2.4-p20, Wunsch Lars).
     *
     * Bisher standen Pille und Produktname zusammen in der zweiten Zeile,
     * waehrend in der ersten zwischen "Zurueck" und dem Pager Platz frei
     * blieb. Die Pille wandert dorthin; der Produktname rueckt dadurch
     * hoch und der Dialog gewinnt rund einen Zentimeter Hoehe.
     *
     * Umgesetzt mit display:contents auf dem Titelblock: Seine Kinder -
     * Pille und Ueberschrift - werden dadurch selbst zu Rasterfeldern und
     * lassen sich einzeln platzieren, ohne dass am Markup etwas geaendert
     * werden muss. Der Umschalter haengt weiterhin an der Pille, das
     * Aufklapp-Fenster oeffnet also unveraendert an der richtigen Stelle.
     */
#productDialog .pakete-dialog-title {
        display: contents;
    }
#productDialog .pakete-dialog-top h2 {
        grid-area: title;
        min-width: 0;
    }
#productDialog .pakete-dialog-title h2 {
        font-size: 1.02rem;
    }
/* Auf dem Handy nur kompakter - Farbe und Glasflaeche kommen jetzt aus
       der Grundregel (F5), nicht mehr doppelt von hier. */
#productDialog .pakete-dialog-back {
        grid-area: back;
        padding: 6px 12px;
        font-size: .8rem;
    }
/* Pager kompakter, damit Titel und Kreuz nebeneinander Platz haben. */
#productDialog .pakete-product-pager {
        grid-area: pager;
        gap: 6px;
        font-size: .82rem;
    }
#productDialog .pakete-product-pager button {
        width: 34px;
        height: 34px;
    }
/* Kategorie-Pille kleiner - sie stand auf dem Handy fast so gross wie
       der Produktname darunter. */
#productDialog #dialogType {
        grid-area: mitte;
        justify-self: center;
        margin: 0;
        font-size: .68rem;
        padding: 3px 8px;
        margin-bottom: 3px;
    }
/*
     * Aktionsleiste: darf jetzt umbrechen und die Beschriftungen duerfen
     * schrumpfen. Vorher zwang nowrap alle drei Knoepfe auf eine Zeile,
     * der dritte lief aus dem Bild.
     */
#productDialog .pakete-dialog-actions {
        flex-wrap: wrap;
        row-gap: 8px;
    }
#productDialog .pakete-dialog-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        padding: 9px 10px;
        font-size: .76rem;
        line-height: 1.2;
    }
/* Sicherheitsnetz: nichts im Dialog darf ueber die Fensterbreite
       hinausragen - so entsteht auch kein seitliches Scrollen mehr. */
#productDialog,
    #productDialog .modal-shell {
        max-width: 100vw;
        overflow-x: hidden;
    }
}