/**
 * kauf-ui.css — Vertikaler Button-Stack der Zusammenfassung (AP4, UI-Integrationspaket)
 *
 * SANIO-FREIGABE 23.07.2026 (verbindlich): Buttons werden VERTIKAL von oben nach unten
 * gestapelt; Layout/Aufteilung/Farben des Konfigurators bleiben ansonsten UNVERÄNDERT.
 *
 * ZIEL-PFAD IM KONFIGURATOR: css/kauf-ui.css
 * EINBINDUNG: index.php <head> NACH css/style.css (und nach css/preis-anzeige.css) —
 *             siehe kauf-button.patch.md, Änderung 7a. BEWUSST eigenes Stylesheet:
 *             Julians css/style.css (_scss/) wird NICHT angefasst.
 *
 * Die Klasse .jcc-btn-stack wird serverseitig NUR im Hersteller-Modus an den .btn-wrap
 * der #overview-Zusammenfassung gehängt (jcc_ist_hersteller(), Änderung 7b) —
 * Händler-iframes (haendler_id > 1) behalten ihr horizontales Bestand-Layout 1:1.
 *
 * Überschriebene Bestand-Regeln (css/style.css, kompiliert aus _scss/):
 *   - _btn.scss Z.6:  .btn { margin-left: 1.5rem }  (mobil Z.19: 1rem) — horizontaler
 *     Abstand, im vertikalen Stack falsch → margin-left: 0.
 *   - style.scss Z.1079ff: .btn-wrap { display:flex; flex-wrap:wrap; … } (Desktop) und
 *     .btn { margin-bottom: 1.5rem } → flex-direction:column + gap statt margins.
 *   Specificity: .btn-wrap.jcc-btn-stack (0-2-0) bzw. .btn-wrap.jcc-btn-stack .btn (0-3-0)
 *   schlägt die Bestand-Selektoren unabhängig von der Ladereihenfolge.
 *
 * MOBIL (< 1280px, scripts.js breakpoint Z.30): showOverview() (scripts.js Z.996–1001)
 * hängt die komplette .btn-bar in die fixe .mbl-btnbar (Höhe 4rem, _mbl-btnbar.scss) um.
 * Dort erzwingt der Bestand-Selektor .mbl-btnbar .btn-wrap { display:flex; height:4rem }
 * weiterhin die kompakte horizontale Bottom-Bar — der Stack gilt also auf dem Desktop;
 * die mobile Bottom-Bar bleibt Bestand-Layout (Freigabe Punkt 1: „Layout unverändert",
 * TODO Design-Review Sanio: mobile Darstellung final abnehmen). Deshalb wird der
 * Erreichbarkeits-Hinweis in der 4rem-Bar ausgeblendet (s. unten).
 */

/* Vertikaler Stack (Desktop): rechtsbündig wie die bisherige Button-Zeile */
.btn-wrap.jcc-btn-stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: .75rem;
}

/* Einheitliche Button-Breite im Stack; horizontale Bestand-Margins neutralisieren */
.btn-wrap.jcc-btn-stack .btn {
    margin-left: 0;          /* _btn.scss Z.6/Z.19 setzt margin-left fürs Nebeneinander */
    margin-bottom: 0;        /* style.scss .btn-wrap .btn { margin-bottom:1.5rem } → gap */
    min-width: 19rem;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Erreichbarkeits-Hinweis: eigene, LETZTE Zeile des Stacks (Sanio Punkte 3+4) */
.jcc-btn-stack .jcc-service-hint {
    display: block;
    max-width: 19rem;
    font-size: .75rem;
    line-height: 1.35;
    opacity: .8;
    text-align: right;
}

/* Kauf-Feedback (#buy-feedback, kauf-flow.js) + disabled-Zustand des Kauf-Buttons —
   hier statt in Julians style.css (vgl. kauf-button.patch.md 2d) */
.jcc-buy-feedback {
    display: block;
    max-width: 19rem;
    color: #b00020;
    font-size: .8rem;
    text-align: right;
}
#buy.disabled {
    opacity: .5;
    pointer-events: none;
    cursor: default;
}

/* Mobile Bottom-Bar (.mbl-btnbar, feste Höhe 4rem): Bestand-Layout bleibt horizontal —
   der mehrzeilige Hinweis würde die 4rem-Bar sprengen → dort ausblenden.
   (Desktop-Zusammenfassung zeigt ihn; mobile Platzierung = TODO Design-Review Sanio.) */
.mbl-btnbar .jcc-service-hint {
    display: none;
}

/* Kauf-Fehlermeldung MUSS auch mobil sichtbar bleiben (kauf-flow.js zeigt sie per
   style.display — NICHT ausblenden!): als Overlay direkt ÜBER der 4rem-Bar rendern.
   Kollision mit der Preis-Badge (#jcc-preis-bar, bottom:4.25rem) ist unkritisch:
   die Meldung erscheint nur im Fehlerfall für 10 s und liegt mit höherem z-index oben. */
.mbl-btnbar .jcc-buy-feedback {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: 4.25rem;
    z-index: 95;              /* über #jcc-preis-bar (z-index:90) */
    max-width: none;
    padding: .4rem .6rem;
    background: #fff;
    border: 1px solid #b00020;
    border-radius: .4rem;
    text-align: center;
}

/* ===========================================================================
   FIX 20.08.2026 (Sichtprüfung Alen): kompakterer Button-Stack
   ---------------------------------------------------------------------------
   Sanios Freigabe verlangt Buttons untereinander. Mit den Original-Maßen
   (18px / padding .75rem 2rem / gap .75rem) wuchs die Seite über die
   Bildschirmhöhe hinaus — man musste scrollen, obwohl der Konfigurator auf
   „alles auf einen Blick" ausgelegt ist (html,body { height:100% }).
   Diese Maße sind optisch identisch im Stil, sparen aber ~35 % Stack-Höhe.
   =========================================================================== */
.btn-wrap.jcc-btn-stack {
    gap: .5rem;
}

.btn-wrap.jcc-btn-stack .btn {
    font-size: 17px;
    padding: .55rem 1.5rem;
    line-height: 1.25;
}

/* Erreichbarkeits-Hinweis kompakter (steht direkt unter „Persönlicher Bestpreis") */
.btn-wrap.jcc-btn-stack .jcc-erreichbarkeit {
    margin-top: .35rem;
    font-size: .78rem;
    line-height: 1.35;
}

/* ===========================================================================
   FIX 20.08.2026 (2. Sichtprüfung Alen): „Alles auf einen Blick" —
   Buttons immer sichtbar, nur die Artikelliste scrollt
   ---------------------------------------------------------------------------
   Alens Anforderung: „Wenn man scrollen muss, soll der Rahmen stehen bleiben
   und nur der Inhalt scrollen." Bei vielen Positionen (5+ Artikel) wuchs die
   Zusammenfassung bisher über die Bildschirmhöhe hinaus — „Jetzt kaufen"
   rutschte aus dem sichtbaren Bereich.

   Lösung (reines Flexbox, kein JS): `.overview-wrap` bekommt die verfügbare
   Höhe, der Listen-Container darf schrumpfen und scrollt intern
   (`min-height: 0` ist dabei Pflicht, sonst ignoriert Flexbox das Scrollen);
   „Konfiguration bearbeiten“, Preis und Buttons bleiben fix am unteren Rand.

   Greift NUR im Hersteller-Modus (`:has(.jcc-btn-stack)`) — Händler-iframes
   behalten exakt das Bestandsverhalten. Browser ohne `:has()`-Unterstützung
   verhalten sich wie bisher (reines Progressive Enhancement).
   =========================================================================== */
@supports selector(:has(*)) {
    #overview:has(.jcc-btn-stack) .overview-wrap {
        max-height: 100%;
        min-height: 0;
    }

    /* Der erste Kind-Container hält die <ul class="positions"> */
    #overview:has(.jcc-btn-stack) .overview-wrap > div:first-child {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;   /* Scrollen bleibt in der Liste */
        padding-right: .25rem;          /* Platz für die Scrollleiste */
    }

    /* Aktionsbereich bleibt immer sichtbar */
    #overview:has(.jcc-btn-stack) .edit-wrapper,
    #overview:has(.jcc-btn-stack) .btn-flex {
        flex: 0 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    /* Mobil bleibt das natürliche Seiten-Scrollen (Bestandsverhalten). */
    @supports selector(:has(*)) {
        #overview:has(.jcc-btn-stack) .overview-wrap > div:first-child {
            overflow-y: visible;
            min-height: auto;
        }
    }
}

/* ===========================================================================
   FIX 20.08.2026 (Alen, Enterprise-UX): Nicht bestellbare Konfiguration
   ---------------------------------------------------------------------------
   Der Kunde erfährt jetzt BEIM KONFIGURIEREN, dass ein gewähltes Modell nicht
   online bestellbar ist (Produkt im Shop nicht angelegt/aktiv) — statt erst
   nach dem Klick im Warenkorb. „Jetzt kaufen" wird dann gesperrt und ein
   Hinweis verweist auf „Persönlicher Bestpreis" (der weiterhin nutzbar ist).
   =========================================================================== */
.btn-wrap.jcc-btn-stack .btn#buy.disabled {
    background: #b3c4cf;
    color: #f4f7fa;
    cursor: not-allowed;
    pointer-events: none;   /* Klick kommt gar nicht erst an */
}

.btn-wrap.jcc-btn-stack .btn#buy.disabled svg {
    fill: #f4f7fa;
}

#jcc-nicht-bestellbar {
    width: 19rem;
    max-width: 100%;
    margin-top: .35rem;
    padding: .5rem .6rem;
    border-radius: 4px;
    background: #fff6e5;
    border: 1px solid #f0d9ae;
    color: #6b4d12;
    font-size: .78rem;
    line-height: 1.35;
    text-align: left;
}

/* Zwei Zeilen: betroffene Position (fett) + Handlungsempfehlung (ruhiger). */
#jcc-nicht-bestellbar strong,
#jcc-nicht-bestellbar span {
    display: block;
}

#jcc-nicht-bestellbar span {
    margin-top: .2rem;
    font-weight: 400;
    opacity: .85;
}

@media only screen and (max-width: 767px) {
    #jcc-nicht-bestellbar { width: 100%; }
}

/* ---------------------------------------------------------------------------
   ÜBERLAPPUNGS-FIX 20.08.2026 (durch Messung belegt, nicht geschätzt)
   ---------------------------------------------------------------------------
   Befund: Der Kauf-Stack ist mit Preis-Box, drei Buttons, Erreichbarkeits-Zeile
   und Hinweis rund 310 px hoch. `.btn-bar` sitzt am unteren Ende seines
   Containers (`align-items: flex-end`) und wächst deshalb nach OBEN — ab etwa
   900 px Fensterhöhe schob er sich über „Konfiguration bearbeiten" und die
   Positionsliste (gemessen: 304 × 46 px bzw. 300 × 121 px).

   Zwei Maßnahmen greifen zusammen:
     1. „Konfiguration bearbeiten" wandert per JS in den Stack (siehe
        preis-anzeige.js, holeEditInDenStack) — alle Aktionen in einer Spalte.
     2. Der Stack darf nicht mehr schrumpfen (`flex-shrink: 0`), dafür gibt die
        Positionsliste darüber nach und scrollt bei Bedarf in sich. Der Platz
        wird damit VERTEILT statt überlagert.
   --------------------------------------------------------------------------- */
#overview .btn-bar {
    flex-shrink: 0;
}

#overview .btn-wrap.jcc-btn-stack {
    flex-shrink: 0;
}

/* Die Positionsliste gibt nach, statt überlagert zu werden. */
#overview ul.positions {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* „Konfiguration bearbeiten" im Stack: gleiche Breite wie die anderen Aktionen. */
.edit-wrapper.jcc-edit-im-stack {
    width: 19rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Unter 1280 px blendet Julians CSS die Button-Symbole ein
   (`@media (min-width:1280px) { .dsk-hidden { display:none } }`, style.css).
   Mit `display:block` rutschte das Stift-Symbol dann in eine ZWEITE ZEILE unter
   die Beschriftung — der Knopf wurde doppelt so hoch und sah defekt aus
   (Befund Alen, 02.09.2026, Fenster < 1280 px).
   Flex-Zeile statt Block: Symbol steht neben dem Text, Höhe bleibt einzeilig.
   Julians Markup und sein Symbol bleiben unangetastet. */
.edit-wrapper.jcc-edit-im-stack #edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    text-align: center;
}

.edit-wrapper.jcc-edit-im-stack #edit > svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

@media only screen and (max-width: 767px) {
    .edit-wrapper.jcc-edit-im-stack { width: 100%; }
    #overview ul.positions { overflow-y: visible; }
}

/* ---------------------------------------------------------------------------
   KERNURSACHE der Überlappung (durch Messung ermittelt, 20.08.2026)
   ---------------------------------------------------------------------------
   Julians `.btn-bar` richtet ihre Kinder am UNTEREN Rand aus
   (`align-items: flex-end`, style.scss Z.1028-1032). Das ist für die originale
   einzeilige Button-Reihe richtig. Unser vertikaler Stack ist mit Preis-Box,
   drei Buttons, Erreichbarkeits-Zeile und Hinweis jedoch ~357 px hoch, während
   die Leiste selbst nur ~203 px misst — der Überschuss von exakt 154 px ragte
   nach OBEN in die Positionsliste (gemessen: Stack top=457 statt top=611,
   Preis-Box überlappte die Liste um 53 px).

   Der Platzhalter `.btn-anchor` reserviert den Platz bereits korrekt
   (top=611, height=357, von Julians fixButtons() gesetzt) — er wurde durch die
   Ausrichtung nur nicht genutzt.

   FIX: Im Hersteller-Stack von oben ausrichten, dann füllt der Stack exakt
   seinen reservierten Bereich (611 → 968). Zusätzlich wird Julians
   `bottom: -1.5rem`-Versatz (style.scss Z.1083, für die einzeilige Reihe
   gedacht) im Stack-Modus neutralisiert.

   Wirkt NUR auf den Hersteller-Stack — die originale Button-Reihe und die
   Händler-iframes behalten `align-items: flex-end` unverändert.
   --------------------------------------------------------------------------- */
#overview .btn-bar:has(.jcc-btn-stack) {
    align-items: flex-start;
}

/* ---------------------------------------------------------------------------
   SCHWEBENDE LEISTE — sauber deckend statt halbtransparent überlappend
   ---------------------------------------------------------------------------
   Julians fixButtons() (scripts.js Z.429-438) setzt `.btn-bar.fixed`
   (position: fixed; bottom: 10px; z-index: 3, style.scss Z.1045), sobald die
   Leiste sonst unter den sichtbaren Bereich rutschen würde — die Buttons
   bleiben so immer erreichbar. Das ist bei der originalen EINZEILIGEN Reihe
   (~46 px) unauffällig.

   Unser vertikaler Stack ist jedoch ~357 px hoch. Ohne eigenen Hintergrund
   schwebte er sichtbar ÜBER der Positionsliste (gemessen bei 800 px
   Fensterhöhe: 91 px Überdeckung) — das wirkte wie ein Layoutfehler.

   FIX: Im schwebenden Zustand bekommt der Stack eine eigene, deckende Fläche
   mit weichem Schatten. Er liest sich dann als bewusste Aktionsleiste, die
   über dem Inhalt liegt — so wie man es aus Shop-Oberflächen kennt.
   Die Fläche ist nur so breit wie die Buttons (fit-content) und bleibt
   rechtsbündig; das freigegebene Layout ändert sich nicht.

   Greift ausschließlich, wenn Julian selbst `fixed` gesetzt hat. Steht die
   Leiste normal im Fluss (genug Platz), bleibt alles unverändert.
   --------------------------------------------------------------------------- */
.btn-bar.fixed .btn-wrap.jcc-btn-stack {
    width: fit-content;
    margin-left: auto;
    padding: .8rem 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 18px rgba(0, 37, 61, .16);
}

/* Der Hinweis sitzt innerhalb der Fläche — eigener Rahmen wäre doppelt. */
.btn-bar.fixed .btn-wrap.jcc-btn-stack #jcc-nicht-bestellbar {
    margin-bottom: 0;
}

/* Letzte 8 px: Julians `.btn-wrap { bottom: -1.5rem }` (style.scss Z.1083) schiebt
   die Leiste bewusst etwas nach unten — beim höheren Stack reichte sie dadurch in
   den Footer (gemessen: 8 px bei 1080 px Fensterhöhe). Etwas Luft darunter. */
#overview .btn-flex {
    margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------------------
   Mobile bottom bar (< 1280px), JuCad 2026-10-09
   ---------------------------------------------------------------------------
   On phones and tablets showOverview() (scripts.js) moves the whole .btn-bar into
   the fixed .mbl-btnbar, which is one row of 4rem. The desktop stack rules above
   (column, min-width 19rem, compact padding) still applied there, and
   preis-anzeige.js put the price box and "Konfiguration bearbeiten" into the
   stack as well: a 282px column inside a 64px bar, so "Jetzt kaufen",
   "Persoenlicher Bestpreis" and "Konfiguration bearbeiten" sat below the screen
   edge, clipped by #wrp and unreachable.

   Inside the mobile bar the stack is the original row again: the two actions side
   by side at half width (mbl-w50, icon above the label). The price box and
   "Konfiguration bearbeiten" stay in the overview panel, the price right above the
   edit button (preis-anzeige.js, platziereBar and holeEditInDenStack), so nothing
   floats over the panel or the bar. */
.mbl-btnbar .btn-wrap.jcc-btn-stack {
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    height: 4rem;
}

.mbl-btnbar .btn-wrap.jcc-btn-stack .btn {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    height: 4rem;
    padding: .5rem .25rem;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
}

@media (max-width: 1279px) {
    #overview #jcc-preis-bar.jcc-preis-inline {
        flex: 0 0 auto;
        width: auto;
        margin: .5rem 1rem 0;
        box-shadow: none;
    }
}

/* The overview list has a fixed height on phones (style.css), and the rule above
   (max-width 767px) switched its scrolling off in favour of page scrolling, but the
   page frame #wrp clips instead of scrolling: from the sixth article on, the list
   was cut off and unreachable. In the shop configurator the list scrolls again;
   dealer iframes keep their layout. */
@media (max-width: 1279px) {
    body:has(.mbl-btnbar .jcc-btn-stack) #overview ul.positions {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* The "not orderable" note sits above the bar like the purchase error message. */
.mbl-btnbar #jcc-nicht-bestellbar {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: 4.25rem;
    z-index: 95;
    width: auto;
    margin: 0;
}