/* =========================================================================
   THEME «PREISHIT» — Schweizer Discount-Onlineshop
   Datei: /templates/theme-webseite/assets/theme.css

   Aufbau der Startseite:

     +--------------------------------------------------+
     |  Logo   Sprache      Suche         Symbole       |  Kopf, weiss
     +--------------------------------------------------+  gelbe Linie
     |                             NEU  SALE  ANGEBOTE  |  zweite Zeile
     +------------+-------------------------------------+
     | Kategorien |  Slider                             |
     | (Spalte)   |  3 Themenkacheln                    |
     |            |  Breites Banner                     |
     |            |  Produktreihen (seitlich scrollbar) |
     |            |  Blogkacheln                        |
     +------------+-------------------------------------+

   Die Kategorien stehen links als Spalte, nicht in einem Aufklappmenue.
   Bei einem Universalsortiment ist die Kategorieliste die eigentliche
   Navigation - sie muss sichtbar sein, ohne dass jemand klickt.

   WICHTIG: Diese Datei wird VOR den <style>-Bloecken der einzelnen
   Seiten geladen. Damit sie trotzdem gewinnt, stehen die
   Deklarationen mit !important.

   Nach jeder Aenderung in header.php die Zahl hochzaehlen:
   theme.css?v=1  ->  ?v=2
   ========================================================================= */

/* =========================================================================
   1. MARKENFARBEN — nur hier anpassen
   ========================================================================= */
:root {
    /* BÄCKEREI IBO BECK — Anschluss an ibo-beck.ch

       ACHTUNG: Diese Farbwerte sind ABGELEITET, nicht ausgelesen.
       Ich konnte den Aufbau Ihrer Seite lesen, aber nicht die
       style.css - der Abruf liefert nur den Text, nicht das
       Stylesheet.

       Die Werte stammen aus Ihrem Logo (Gold auf Schwarz) und den
       Screenshots. Wenn der Shop exakt zur Webseite passen soll,
       schicken Sie mir Ihre style.css; dann setze ich die drei
       Werte unten auf Ihre echten.

       Zu ändern sind nur diese drei:
         --marke-primaer   das Schwarz von Kopf und Fusszeile
         --marke-akzent    das Gold Ihres Logos
         --marke-hell      der cremefarbene Grund
    */
    --marke-primaer:      #3B2A1B;   /* Warmes Dunkelbraun - Kopfband, Fusszeile */
    --marke-primaer-tief: #2A1D12;
    --marke-akzent:       #C8A24A;   /* Gold aus dem Logorahmen */
    --marke-akzent-text:  #1A1613;   /* dunkle Schrift auf Gold */
    --marke-hover:        #0E0B09;
    --marke-linie:        #C9A227;

    --marke-gruen:        #4E7A3E;
    --marke-warn:         #C9A227;
    --marke-rot:          #9E2B25;

    --marke-dunkel:       #3B2A1B;
    --marke-dunkler:      #2A1D12;
    --marke-hell:         #FDF8F3;   /* Creme wie auf der Webseite */
    --marke-fuss:         #3B2A1B;
    --marke-rand:         #E8DFD2;

    /* Zwei Radien statt einem: Knoepfe und Felder 5px, Stoerer 2px.
       Ein einheitlicher Wert laesst entweder die kleinen Labels zu rund
       oder die Knoepfe zu kantig wirken. */
    --marke-radius:       4px;
    --marke-radius-klein: 2px;

    /* Breite der Seite und der Kategoriespalte.
       Beide werden im Admin unter Einstellungen -> Layout gesetzt und
       von header.php ueberschrieben. Die Werte hier sind nur der
       Rueckfall, falls die Einstellung fehlt. */
    --seiten-breite:      1320px;
    --spalte-breite:      232px;

    /* Schrift. Kommt ebenfalls aus dem Admin
       (Einstellungen -> Layout & Schrift), Katalog in
       /includes/schriften.php. Die Werte hier sind nur der Rueckfall. */
    --schrift-text:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;
    --schrift-titel:   var(--schrift-text);
    --schrift-groesse: 16px;

    /* ---------- SEMANTISCHE WERTE (nicht aendern) ---------- */
    --c-akzent:       var(--marke-primaer);
    --c-akzent-dark:  var(--marke-primaer-tief);

    --c-text:         #404040;
    --c-text-2:       #575758;
    --c-text-leise:   #777777;

    --c-rand:         var(--marke-rand);
    --c-flaeche:      #FFFFFF;
    --c-flaeche-hell: var(--marke-hell);

    --c-rot:          var(--marke-rot);
    --c-rot-dark:     #A80216;
    --c-rot-hell:     #E8425E;

    --c-gruen:        var(--marke-gruen);
    --c-gruen-dark:   #1F8B3A;
    --c-gruen-hell:   #4CC06B;

    --card-radius:    var(--marke-radius);
}

body.dark, body.dark-mode, [data-theme="dark"] body, body[data-theme="dark"] {
    --c-text:         #E7EAEC;
    --c-text-2:       #C2C7CB;
    --c-text-leise:   #8A9095;
    --c-flaeche:      #1B1F23;
    --c-flaeche-hell: #14171A;
    --c-rand:         #2C3238;
}

/* =========================================================================
   2. VARIABLEN DER EINZELSEITEN ÜBERSCHREIBEN
   Warenkorb, Kasse, Konto und Produkt rechnen mit --saas-*. Wir setzen
   sie hier auf die Markenfarben, damit der ganze Shop einheitlich
   aussieht, ohne dass jede Datei angefasst werden muss.
   ========================================================================= */
:root {
    --saas-primary:       var(--marke-primaer) !important;
    --saas-primary-hover: var(--marke-primaer-tief) !important;

    --saas-bg:          #ffffff !important;
    --saas-text:        var(--c-text) !important;
    --saas-text-main:   var(--c-text) !important;
    --saas-text-muted:  var(--c-text-leise) !important;
    --saas-gray:        var(--c-text-leise) !important;
    --saas-dark:        var(--marke-dunkel) !important;
    --saas-light:       var(--marke-hell) !important;
    --saas-light-bg:    var(--marke-hell) !important;
    --saas-body-bg:     #ffffff !important;
    --saas-card-bg:     #ffffff !important;
    --saas-border:      var(--marke-rand) !important;
    --saas-input-bg:    #ffffff !important;
    --saas-footer-bg:   var(--marke-dunkel) !important;
    --saas-header-bg:   #ffffff !important;
    --saas-topbar-bg:   var(--marke-hell) !important;
    --saas-topbar-text: var(--c-text-2) !important;

    --shadow-soft: 0 1px 3px rgba(0,0,0,.06) !important;
}

body.dark, body.dark-mode {
    --saas-bg:        #14171A !important;
    --saas-text:      #E7EAEC !important;
    --saas-text-main: #E7EAEC !important;
    --saas-light-bg:  #1B1F23 !important;
    --saas-body-bg:   #14171A !important;
    --saas-card-bg:   #1B1F23 !important;
    --saas-border:    #2C3238 !important;
    --saas-input-bg:  #1B1F23 !important;
    --saas-header-bg: #1B1F23 !important;
}

/* =========================================================================
   3. GRUNDLAGE
   ========================================================================= */
/* ---------------------------------------------------------------
   GRUNDSCHRIFTGROESSE

   Sie muss auf <html> stehen, nicht auf <body>.

   Fast alle Groessen in diesem Theme sind in rem angegeben - und rem
   bezieht sich immer auf das WURZELELEMENT, also <html>, nie auf den
   Elternteil. Stand der Wert auf body, aenderte sich beim Umstellen im
   Admin nur der Text, der zufaellig keine eigene Groesse hatte: ein
   paar Absaetze. Produktnamen, Preise, Knoepfe, Ueberschriften - alles
   in rem - blieben unveraendert. Es sah aus, als tue die Einstellung
   gar nichts.

   Auf <html> gesetzt skalieren alle rem-Werte mit, so wie es der
   Hinweis im Admin verspricht: «Bezugsgroesse fuer den ganzen Shop,
   alles andere rechnet in Vielfachen davon.»
   --------------------------------------------------------------- */
html {
    font-size: var(--schrift-groesse, 16px);
}

body {
    background: #ffffff !important;
    color: var(--c-text) !important;
    font-family: var(--schrift-text) !important;
    font-size: 1rem;
    line-height: 1.5;
}
body.dark-mode { background: #14171A !important; }

/* Titel duerfen eine eigene Schrift haben. Ist im Admin dieselbe
   gewaehlt, faellt das nicht auf - es kostet aber auch nichts. */
h1, h2, h3, h4, h5, h6,
.saas-headline, .saas-footer-title,
.reihe-kopf h2, .abschnitt-kopf h2,
.main-header .navbar-brand,
.thema-kachel .tk-titel, .blog-kachel .bk-titel,
.breit-banner .bb-titel {
    font-family: var(--schrift-titel) !important;
    letter-spacing: 0 !important;
}

/* Produktnamen und Preise bleiben bewusst beim Fliesstext: Sie stehen
   in Listen dicht beieinander, und ein Schriftwechsel pro Karte macht
   die Trefferliste unruhig. */
.p-name, .saas-product-title, .product-title, .p-preis {
    font-family: var(--schrift-text) !important;
}
.saas-headline {
    background: none !important;
    -webkit-text-fill-color: var(--c-text) !important;
    color: var(--c-text) !important;
    font-weight: 700 !important;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
}
body.dark-mode .saas-headline { -webkit-text-fill-color: #E7EAEC !important; }

/* Breiterer Innenbereich: Mit Kategoriespalte plus vier Produkten
   nebeneinander reichen die 1140 px von Bootstrap nicht.
   Der Wert kommt aus dem Admin (Einstellungen -> Layout). */
.container { max-width: var(--seiten-breite, 1320px) !important; }

/* =========================================================================
   4. KOPFZEILE
   Zeile 1 weiss: Logo | Sprache | Suche | Symbole
   Darunter die gelbe Linie, dann Zeile 2 mit den Aktionslinks rechts.
   ========================================================================= */
.main-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--marke-rand) !important;
    box-shadow: none !important;
    position: sticky; top: 0; z-index: 1030;
}
body.dark-mode .main-header { background: #1B1F23 !important; }

.kopf-zeile {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
    border-bottom: 2px solid var(--marke-linie);
}

.main-header .navbar-brand {
    margin: 0; padding: 0;
    font-weight: 900; font-size: 1.25rem;
    text-decoration: none !important;
    color: var(--c-text) !important;
    flex: 0 0 auto;
}
/* ---------------------------------------------------------------
   LOGO

   Hier stand vorher max-height: 44px !important. Das !important hat
   die Groesse aus dem Admin ueberstimmt - eine Inline-Angabe verliert
   immer gegen !important. Der Schieberegler tat also etwas, man sah
   es nur nie.

   Der Regler im Admin bestimmt laut Hinweistext die BREITE des
   Bildes, deshalb max-width. Die Hoehe ist zusaetzlich gedeckelt:
   Ein hohes, schmales Logo wuerde sonst den ganzen Kopf aufblaehen.
   --------------------------------------------------------------- */
.main-header .navbar-brand img {
    max-width: var(--logo-breite, 160px);
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
}

/* ---------- Sprach- und Standortpille ---------- */
.kopf-pille {
    display: flex; align-items: center;
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    overflow: hidden;
    flex: 0 0 auto;
}
.kopf-pille > * {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 10px;
    font-size: .76rem; font-weight: 600;
    color: var(--c-text-2) !important;
    text-decoration: none !important;
    border-right: 1px solid var(--marke-rand);
    background: transparent;
}
.kopf-pille > *:last-child { border-right: 0; }
.kopf-pille a:hover { background: var(--marke-hell); color: var(--marke-primaer) !important; }
.kopf-pille .aktiv { color: var(--c-text) !important; font-weight: 700; }

/* ---------- Suche ----------
   Steht mittig und ist das breiteste Element im Kopf: Bei mehreren
   tausend Artikeln sucht die Mehrheit, statt sich durchzuklicken. */
.kopf-suche {
    position: relative;
    flex: 1 1 auto;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
}
.kopf-suche input {
    width: 100%; height: 38px;
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 0 40px 0 14px;
    font-size: .85rem;
    background: #fff; color: var(--c-text);
    outline: none;
}
body.dark-mode .kopf-suche input { background: #14171A; color: #E7EAEC; }
.kopf-suche input::placeholder { color: #9AA0A5; }
.kopf-suche input:focus { border-color: var(--marke-primaer); }
.kopf-suche button {
    position: absolute; right: 0; top: 0;
    width: 40px; height: 38px;
    border: 0; background: transparent;
    color: var(--c-text-2);
    font-size: 1rem; cursor: pointer;
}
.kopf-suche button:hover { color: var(--marke-primaer); }

/* ---------- Symbolreihe rechts ---------- */
.kopf-aktionen { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.kopf-knopf {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: var(--c-text-2) !important;
    background: transparent; border: 0;
    text-decoration: none !important;
    border-radius: var(--marke-radius);
    font-size: 1.15rem;
}
.kopf-knopf:hover { background: var(--marke-hell); color: var(--marke-primaer) !important; }
body.dark-mode .kopf-knopf:hover { background: #232A31; }
.kopf-zaehler {
    position: absolute; top: 3px; right: 3px;
    background: var(--marke-primaer); color: #fff;
    font-size: .6rem; font-weight: 700;
    min-width: 16px; height: 16px; line-height: 16px;
    text-align: center; border-radius: 8px; padding: 0 4px;
}

/* ---------- Zweite Zeile: Aktionslinks rechtsbuendig ---------- */
.kopf-nav {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 28px;
    min-height: 40px;
}
.kopf-nav a {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--c-text-2) !important;
    text-decoration: none !important;
    padding: 11px 0;
    border-bottom: 3px solid transparent;
}
.kopf-nav a:hover, .kopf-nav a.aktiv {
    color: var(--marke-primaer) !important;
    border-bottom-color: var(--marke-primaer);
}

/* Reste des Basis-Themes ausblenden */
.cat-bar, .top-bar { display: none !important; }

/* =========================================================================
   5. SEITENAUFTEILUNG MIT KATEGORIESPALTE
   ========================================================================= */
.seiten-raster {
    display: grid;
    grid-template-columns: var(--spalte-breite) minmax(0, 1fr);
    gap: 26px;
    padding: 22px 0 40px;
}

.kat-spalte { padding-top: 4px; }
.kat-spalte a.kat-link {
    display: block;
    padding: 11px 4px;
    font-size: .84rem;
    color: var(--c-text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--marke-rand);
}
.kat-spalte a.kat-link:hover,
.kat-spalte a.kat-link.aktiv { color: var(--marke-primaer) !important; }
.kat-spalte .kat-extra { margin-top: 2px; }
.kat-spalte .kat-extra a.kat-link { font-weight: 600; }

.hilfe-knopf {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 22px;
    padding: 9px 16px;
    border: 1px solid var(--marke-primaer);
    border-radius: 20px;
    color: var(--marke-primaer) !important;
    background: #fff;
    font-size: .82rem; font-weight: 600;
    text-decoration: none !important;
}
.hilfe-knopf:hover { background: var(--marke-primaer); color: #fff !important; }

/* =========================================================================
   6. THEMENKACHELN UND BANNER
   ========================================================================= */
/* auto-fit statt fester 3 Spalten: Der Admin erlaubt zwei bis vier
   Kacheln, und bei einer festen Zahl bliebe sonst eine Luecke oder es
   entstuende eine zweite Zeile mit einer einzelnen Kachel. */
.thema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.thema-kachel {
    position: relative; display: block;
    min-height: 160px;
    border-radius: var(--marke-radius);
    overflow: hidden;
    text-decoration: none !important;
    background: var(--marke-hell);
}
.thema-kachel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.thema-kachel .tk-verlauf {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 62%);
}
.thema-kachel .tk-text {
    position: absolute; left: 16px; right: 16px; bottom: 14px;
    color: #fff;
}
/* display:block ist noetig: Beides sind <span>, und ohne die Angabe
   laufen Titel und Untertitel in einer Zeile zusammen. */
.thema-kachel .tk-titel { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.thema-kachel .tk-unter { display: block; font-size: .8rem; opacity: .92; margin-top: 2px; }

.breit-banner {
    position: relative; display: block;
    margin-top: 16px;
    border-radius: var(--marke-radius);
    overflow: hidden;
    background: linear-gradient(100deg, var(--marke-primaer) 0%, #00A6E8 100%);
    color: #fff !important;
    text-decoration: none !important;
    padding: 34px 30px;
    min-height: 150px;
}
.breit-banner .bb-titel { font-size: 1.5rem; font-weight: 700; }
.breit-banner .bb-text  { font-size: .95rem; opacity: .95; margin-top: 4px; }
.breit-banner img {
    position: absolute; right: 0; bottom: 0; height: 100%;
    width: auto; object-fit: contain;
}

.blog-knopf-zeile { display: flex; justify-content: flex-end; margin-top: 16px; }
.blog-knopf {
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 9px 18px;
    font-size: .82rem; font-weight: 600;
    color: var(--c-text) !important;
    background: #fff;
    text-decoration: none !important;
}
.blog-knopf:hover { border-color: var(--marke-primaer); color: var(--marke-primaer) !important; }

/* =========================================================================
   7. PRODUKTREIHE (seitlich scrollbar)
   ========================================================================= */
.reihe { margin-top: 40px; position: relative; }

.reihe-kopf {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 14px;
}
.reihe-kopf h2 {
    margin: 0;
    font-size: 1.32rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .01em;
    color: var(--c-text);
}
.reihe-kopf .reihe-anzahl {
    display: block;
    font-size: .78rem; font-weight: 400;
    text-transform: none; letter-spacing: 0;
    color: var(--c-text-leise);
    margin-top: 2px;
}
.reihe-kopf .alle-zeigen {
    font-size: .82rem;
    color: var(--c-text-2) !important;
    text-decoration: underline !important;
    white-space: nowrap;
}
.reihe-kopf .alle-zeigen:hover { color: var(--marke-primaer) !important; }

.reihe-spur {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 16px) / 4);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.reihe-spur::-webkit-scrollbar { display: none; }
.reihe-spur > * { scroll-snap-align: start; }

/* Pfeile. Bleiben aus, solange nichts zu scrollen ist - dafuer setzt
   das Skript in home.php die Klasse .aus. */
.reihe-pfeil {
    position: absolute; top: 46%;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--marke-rand);
    border-radius: 50%;
    color: var(--c-text-2);
    box-shadow: 0 2px 6px rgba(0,0,0,.10);
    cursor: pointer; z-index: 4;
}
.reihe-pfeil:hover { color: var(--marke-primaer); border-color: var(--marke-primaer); }
.reihe-pfeil.links  { left: -14px; }
.reihe-pfeil.rechts { right: -14px; }
.reihe-pfeil.aus { display: none; }

/* Fortschrittsbalken unter der Reihe */
.reihe-balken {
    height: 4px; margin-top: 14px;
    background: var(--marke-hell);
    border-radius: 2px;
    overflow: hidden;
}
.reihe-balken span {
    display: block; height: 100%;
    background: #C7CACD;
    border-radius: 2px;
    width: 25%;
}

/* =========================================================================
   8. PRODUKTKARTE
   Aufbau: Stoerer + Lagerstatus — Bild — Marke — Name — Symbole —
   Preisleiste unten.

   Die Preisleiste ist farbig abgesetzt, weil sie im Discount die
   eigentliche Botschaft traegt: Blau bei Aktion, weiss bei
   Normalpreis. Damit ist eine Aktion schon aus drei Meter Abstand
   erkennbar, ohne dass man den Text liest.
   ========================================================================= */
.saas-product-card, .product-card, .p-karte {
    position: relative;
    background: #fff !important;
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    height: 100%;
    display: flex !important; flex-direction: column !important;
    transition: box-shadow .15s !important;
}
body.dark-mode .saas-product-card, body.dark-mode .p-karte { background: #1B1F23 !important; }
.saas-product-card:hover, .product-card:hover, .p-karte:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.12) !important;
    transform: none !important;
}

/* ---------- Kopfzeile der Karte ---------- */
.p-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; padding: 8px 8px 0;
    min-height: 28px;
}

/* Mehrere Aktionen: untereinander statt nebeneinander. Nebeneinander
   waeren zwei Stoerer auf einer 180px breiten Karte breiter als das
   Bild darunter. */
.p-stoerer-reihe { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.p-stoerer {
    font-size: .81rem; font-weight: 600;
    padding: 3px 7px; border-radius: var(--marke-radius-klein);
    color: #FEFEFE; white-space: nowrap;
}
.p-stoerer-sale { background: var(--marke-primaer); }

/* Weisse Schrift auf Gelb ergibt einen Kontrast von rund 1.7:1 und ist
   kaum lesbar. Deshalb hier dunkle Schrift, sonst identisch. */
.p-stoerer-neu  { background: var(--marke-akzent); color: var(--marke-akzent-text); }

@media (max-width: 1023.98px) {
    .p-stoerer { font-size: .69rem; padding: 1px 7px; }
}

.p-lager { font-size: .81rem; font-weight: 600; line-height: 21px; text-align: right; }
.p-lager-da   { color: var(--marke-gruen); }
.p-lager-bald { color: var(--marke-warn); }
.p-lager-leer { color: var(--c-text-leise); }

/* ---------- Bild ---------- */
.saas-img-frame, .saas-img-wrapper, .img-wrapper, .p-bild {
    position: relative;
    background: #fff !important;
    border-radius: 0 !important;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    cursor: pointer;
}
body.dark-mode .saas-img-frame, body.dark-mode .p-bild { background: #fff !important; }
.saas-img-frame img, .saas-img-wrapper img, .pkg-img, .p-bild img {
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
}
.saas-quick-view {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(43,47,51,.85); color: #fff;
    font-size: .72rem; font-weight: 600;
    text-align: center; padding: 6px;
    opacity: 0; transition: opacity .15s;
}
.saas-img-frame:hover .saas-quick-view, .p-bild:hover .saas-quick-view { opacity: 1; }

/* ---------- Text ---------- */
.p-text, .saas-product-info {
    padding: 0 12px 10px !important;
    display: flex !important; flex-direction: column !important;
    flex: 1 1 auto;
}
.p-marke, .saas-cat-badge {
    font-size: .74rem !important; font-weight: 400 !important;
    color: var(--c-text-leise) !important;
    background: none !important; padding: 0 !important;
    text-transform: none; letter-spacing: 0;
    margin-bottom: 2px;
}
.p-name, .saas-product-title, .product-title {
    font-size: .875rem !important; font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--c-text) !important;
    text-decoration: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
    margin-bottom: 8px;
}
.p-name:hover, .saas-product-title:hover { color: var(--marke-primaer) !important; }
.saas-product-attributes {
    font-size: .72rem !important; color: var(--c-text-leise) !important;
    margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* Symbolzeile: Merken links, Sparhinweis rechts */
.p-symbole {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: auto; padding-top: 4px;
}
.p-symbole .p-merken {
    color: var(--c-text-leise) !important;
    font-size: .95rem; text-decoration: none !important;
    line-height: 1;
}
.p-symbole .p-merken:hover, .p-symbole .p-merken.aktiv { color: var(--marke-primaer) !important; }
.p-sparen {
    font-size: .68rem; font-weight: 700;
    background: var(--marke-akzent); color: #fff;
    padding: 2px 7px; border-radius: var(--marke-radius);
}

/* ---------- Preisleiste ---------- */
.p-preisleiste {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--marke-rand);
    background: #fff;
}
.p-preisleiste.aktion {
    background: var(--marke-primaer);
    border-top-color: var(--marke-primaer);
}
.p-preis { display: flex; flex-direction: column; min-width: 0; }
.p-preis .p-alt {
    font-size: .7rem; color: var(--c-text-leise);
    text-decoration: line-through;
    line-height: 1.2;
}
.p-preisleiste.aktion .p-preis .p-alt { color: rgba(255,255,255,.8); }
.p-preis .p-jetzt {
    font-size: 1.12rem; font-weight: 700;
    color: var(--c-text); line-height: 1.2;
    white-space: nowrap;
}
.p-preisleiste.aktion .p-preis .p-jetzt { color: #FEFEFE; }

.p-korb {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: var(--marke-radius);
    background: var(--marke-akzent);
    color: var(--marke-akzent-text) !important;
    font-size: 1.05rem;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.p-korb:hover { background: var(--marke-hover); color: #fff !important; }

/* Auf der blauen Aktionsleiste wird der Knopf weiss: Gelb auf Blau
   waere auffaellig, aber die beiden Farben flimmern nebeneinander. */
.p-preisleiste.aktion .p-korb { background: #FEFEFE; color: var(--marke-dunkel) !important; }
.p-preisleiste.aktion .p-korb:hover { background: var(--marke-hover); color: #fff !important; }
.p-korb.aus { background: var(--marke-hell); color: var(--c-text-leise) !important; cursor: not-allowed; }

/* =========================================================================
   8b. PRODUKTKARTEN-DESIGNS

   Zehn Varianten. Gewaehlt wird im Admin unter Einstellungen ->
   Layout & Schrift; der Schluessel landet als Klasse am <body>.
   Katalog: /includes/kartenstile.php

   Die Varianten unterscheiden sich im AUFBAU, nicht nur in Farbe:
   Wo der Preis steht, ob der Kaufknopf dauerhaft sichtbar ist, ob
   Bild und Text neben- oder untereinander liegen. Das Markup bleibt
   dabei gleich - deshalb wirkt jede Umstellung sofort auf
   Startseite, Suche und Kategorieseiten zugleich.
   ========================================================================= */

/* ---------- 2. Minimal ----------
   Kein Rahmen, kein Schatten, kein Dauerknopf. Der Kaufknopf
   erscheint erst beim Ueberfahren als Balken unter dem Preis.

   Auf Geraeten ohne Maus gibt es kein Ueberfahren - dort ist der
   Knopf deshalb dauerhaft sichtbar (siehe Handy-Block unten). Sonst
   koennte man auf dem Handy nichts in den Warenkorb legen. */
.karten-stil-minimal .p-karte {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.karten-stil-minimal .p-karte:hover { box-shadow: none !important; }
.karten-stil-minimal .p-kopf { padding: 0 0 6px; }
.karten-stil-minimal .p-lager { display: none; }
.karten-stil-minimal .p-bild { padding: 0; background: var(--marke-hell) !important; }
.karten-stil-minimal .p-text { padding: 10px 0 0 !important; }
.karten-stil-minimal .p-marke {
    font-size: .68rem !important;
    text-transform: uppercase; letter-spacing: .1em;
}
.karten-stil-minimal .p-name { font-size: .9rem !important; }
.karten-stil-minimal .p-symbole { display: none; }
.karten-stil-minimal .p-preisleiste {
    border-top: 0 !important;
    background: transparent !important;
    padding: 6px 0 0 !important;
    display: block;
    position: relative;
}
.karten-stil-minimal .p-preis .p-jetzt { font-size: 1rem; }
.karten-stil-minimal .p-korb {
    width: 100%; height: 40px;
    margin-top: 10px;
    background: var(--marke-dunkel);
    color: #fff !important;
    border-radius: var(--marke-radius);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s, background .15s;
}
.karten-stil-minimal .p-karte:hover .p-korb { opacity: 1; transform: translateY(0); }
.karten-stil-minimal .p-korb:hover { background: var(--marke-primaer); }

/* ---------- 3. Weiche Karte ----------
   Das Bild zoomt beim Ueberfahren. Dafuer braucht der Bildrahmen
   overflow:hidden, sonst waechst das Bild ueber die Karte hinaus. */
.karten-stil-schatten .p-karte {
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 16px -8px rgba(0,0,0,.12) !important;
    overflow: hidden;
}
.karten-stil-schatten .p-karte:hover { box-shadow: 0 8px 30px -8px rgba(0,0,0,.22) !important; }
.karten-stil-schatten .p-bild { overflow: hidden; }
.karten-stil-schatten .p-bild img { transition: transform .35s ease; }
.karten-stil-schatten .p-karte:hover .p-bild img { transform: scale(1.06); }
.karten-stil-schatten .p-preisleiste { border-top: 0; }
.karten-stil-schatten .p-korb { border-radius: 50%; width: 40px; }

/* ---------- 4. Knopf im Bild ---------- */
.karten-stil-overlay .p-karte { position: relative; overflow: hidden; }
.karten-stil-overlay .p-bild { position: relative; }
.karten-stil-overlay .p-preisleiste {
    border-top: 0 !important;
    background: transparent !important;
    padding: 4px 12px 12px !important;
}
.karten-stil-overlay .p-korb {
    position: absolute;
    right: 10px; bottom: 10px;
    z-index: 4;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--marke-dunkel);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s, background .15s;
}
.karten-stil-overlay .p-karte:hover .p-korb { opacity: 1; transform: translateY(0); }
.karten-stil-overlay .p-korb:hover { background: var(--marke-primaer); }
.karten-stil-overlay .p-preis .p-jetzt { font-size: 1.05rem; }

/* ---------- 5. Quer ----------
   Bild links, Text rechts. Die Karte wird dadurch breit und flach -
   im Raster passen dann sinnvollerweise nur ein bis zwei pro Reihe.
   Deshalb wird die Spaltenbreite hier ueberschrieben. */
.karten-stil-quer .row > [class*="col-"] { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
.karten-stil-quer .reihe-spur { grid-auto-columns: minmax(0, 420px); }
.karten-stil-quer .p-karte { flex-direction: row !important; align-items: stretch; }
.karten-stil-quer .p-kopf {
    position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3;
    padding: 0;
}
.karten-stil-quer .p-bild {
    width: 38%; flex: 0 0 38%;
    aspect-ratio: auto;
    border-right: 1px solid var(--marke-rand);
}
.karten-stil-quer .p-text { padding: 14px 14px 6px !important; }
.karten-stil-quer .p-name { font-size: .95rem !important; -webkit-line-clamp: 3; min-height: 0; }
.karten-stil-quer .p-preisleiste { border-top: 0; }

/* ---------- 6. Preisband ---------- */
.karten-stil-band .p-preisleiste {
    background: var(--marke-primaer) !important;
    border-top-color: var(--marke-primaer) !important;
    padding: 14px 12px !important;
}
.karten-stil-band .p-preis .p-jetzt { color: #FEFEFE !important; font-size: 1.25rem; }
.karten-stil-band .p-preis .p-alt   { color: rgba(255,255,255,.8) !important; }
.karten-stil-band .p-korb { background: #FEFEFE !important; color: var(--marke-dunkel) !important; }
.karten-stil-band .p-korb:hover { background: var(--marke-hover) !important; color: #fff !important; }

/* ---------- 7. Eckfahne ----------
   Der Aktionsstoerer wird diagonal in die Ecke gedreht. Nur der
   erste - bei zwei gedrehten Fahnen uebereinander wird es unlesbar. */
.karten-stil-ribbon .p-karte { position: relative; overflow: hidden; }
.karten-stil-ribbon .p-stoerer-reihe {
    position: absolute; top: 16px; left: -34px;
    transform: rotate(-45deg);
    z-index: 5;
    width: 140px;
    align-items: center;
}
.karten-stil-ribbon .p-stoerer {
    width: 100%;
    text-align: center;
    border-radius: 0;
    padding: 4px 0;
    font-size: .66rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.karten-stil-ribbon .p-stoerer-reihe .p-stoerer:nth-child(n+2) { display: none; }
.karten-stil-ribbon .p-kopf { justify-content: flex-end; }

/* ---------- 8. Dunkle Karte ----------
   Das Bild bleibt auf weissem Grund: Freigestellte Produktfotos
   haben fast immer weisse Raender und wuerden auf Dunkel als heller
   Kasten erscheinen. */
.karten-stil-dunkel .p-karte {
    background: #23272B !important;
    border: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.karten-stil-dunkel .p-kopf { padding-top: 10px; }
.karten-stil-dunkel .p-bild { background: #fff !important; margin: 0 10px; border-radius: 6px; }
.karten-stil-dunkel .p-name  { color: #F2F4F5 !important; }
.karten-stil-dunkel .p-marke { color: #9AA2A9 !important; }
.karten-stil-dunkel .p-lager-da { color: #6FDA8C !important; }
.karten-stil-dunkel .p-preisleiste { background: transparent !important; border-top-color: rgba(255,255,255,.12) !important; }
.karten-stil-dunkel .p-preis .p-jetzt { color: #fff !important; }
.karten-stil-dunkel .p-preis .p-alt   { color: #9AA2A9 !important; }
.karten-stil-dunkel .p-merken { color: #9AA2A9 !important; }

/* ---------- 9. Magazin ---------- */
.karten-stil-magazin .p-karte {
    border: 0 !important;
    border-top: 2px solid var(--c-text) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.karten-stil-magazin .p-karte:hover { box-shadow: none !important; }
.karten-stil-magazin .p-kopf { padding: 10px 0 0; }
.karten-stil-magazin .p-lager { display: none; }
.karten-stil-magazin .p-bild { padding: 16px 0; }
.karten-stil-magazin .p-text { padding: 0 !important; }
.karten-stil-magazin .p-marke {
    font-size: .68rem !important;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--c-text) !important;
    margin-bottom: 8px;
}
.karten-stil-magazin .p-name {
    font-size: 1.1rem !important; font-weight: 600 !important;
    line-height: 1.3 !important; min-height: 2.6em;
}
.karten-stil-magazin .p-preisleiste {
    border-top: 0 !important;
    background: transparent !important;
    padding: 12px 0 18px !important;
}
.karten-stil-magazin .p-preis .p-jetzt { font-size: 1.3rem; font-weight: 400; }
.karten-stil-magazin .p-korb {
    width: auto; padding: 0 18px; height: 40px;
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--c-text) !important;
    color: var(--c-text) !important;
}
.karten-stil-magazin .p-korb:hover { background: var(--c-text); color: #fff !important; }

/* ---------- 10. Vollbild ----------
   Bild randlos, Text als heller Overlay im Verlauf. Der Verlauf ist
   nicht Zierde: Ohne ihn steht weisse Schrift auf hellen Fotos auf
   weissem Grund. */
.karten-stil-vollbild .p-karte {
    border: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
    position: relative;
    background: #23272B !important;
}
.karten-stil-vollbild .p-kopf {
    position: absolute; top: 0; left: 0; right: 0; z-index: 4;
    padding: 10px;
}
.karten-stil-vollbild .p-lager { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.karten-stil-vollbild .p-bild {
    padding: 0;
    aspect-ratio: 3 / 4;
    background: #23272B !important;
}
.karten-stil-vollbild .p-bild img { object-fit: cover !important; mix-blend-mode: normal; }
.karten-stil-vollbild .p-bild::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.karten-stil-vollbild .p-text {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 12px 14px !important;
}
.karten-stil-vollbild .p-marke { color: rgba(255,255,255,.75) !important; }
.karten-stil-vollbild .p-name  { color: #fff !important; }
.karten-stil-vollbild .p-symbole { display: none; }
.karten-stil-vollbild .p-preisleiste {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    background: transparent !important;
    border-top: 0 !important;
    padding: 0 14px 12px !important;
}
.karten-stil-vollbild .p-preis .p-jetzt { color: #fff !important; }
.karten-stil-vollbild .p-preis .p-alt   { color: rgba(255,255,255,.7) !important; }

/* ---------- Handy ----------
   Ohne Maus gibt es kein Ueberfahren. Die Varianten, die den
   Kaufknopf erst dabei zeigen, muessen ihn hier dauerhaft anzeigen -
   sonst kann man auf dem Handy nichts bestellen. */
@media (hover: none), (max-width: 767.98px) {
    .karten-stil-minimal .p-korb,
    .karten-stil-overlay .p-korb { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 767.98px) {
    /* Quer wird wieder untereinander: Bei 360 Pixeln blieben sonst
       rund 130 Pixel fuer den Text. */
    .karten-stil-quer .p-karte { flex-direction: column !important; }
    .karten-stil-quer .p-bild {
        width: 100%; flex: none; aspect-ratio: 1 / 1;
        border-right: 0; border-bottom: 1px solid var(--marke-rand);
    }
    .karten-stil-quer .p-name { -webkit-line-clamp: 2; }
    .karten-stil-quer .p-kopf { position: static; padding: 8px 8px 0; }

    .karten-stil-magazin .p-name { font-size: .95rem !important; }
    .karten-stil-vollbild .p-bild { aspect-ratio: 1 / 1; }
    .karten-stil-ribbon .p-stoerer-reihe { top: 12px; left: -38px; }
}

/* =========================================================================
   9. BLOGKACHELN
   ========================================================================= */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.blog-kachel {
    position: relative; display: block;
    min-height: 190px;
    border-radius: var(--marke-radius);
    overflow: hidden;
    text-decoration: none !important;
    background: var(--marke-hell);
}
.blog-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-kachel .bk-verlauf { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.08) 65%); }
.blog-kachel .bk-text { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.blog-kachel .bk-titel { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.blog-kachel .bk-anriss { font-size: .78rem; opacity: .9; margin: 4px 0 0; }

/* =========================================================================
   10. KNOEPFE, FORMULARE, RASTER DER UEBRIGEN SEITEN
   ========================================================================= */
.saas-btn-buy, .btn-saas-primary, .btn-buy, .btn-add-cart {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 45px;
    background: var(--marke-akzent) !important;
    color: var(--marke-akzent-text) !important;
    border: 0 !important;
    border-radius: var(--marke-radius) !important;
    padding: 10px 12px !important;
    font-size: .875rem !important; font-weight: 500 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .15s, color .15s !important;
}
.saas-btn-buy:hover, .btn-saas-primary:hover, .btn-buy:hover, .btn-add-cart:hover {
    background: var(--marke-hover) !important;
    color: #fff !important;
    transform: none !important;
}
.saas-btn-buy:disabled, .saas-btn-buy[disabled] {
    background: var(--marke-hell) !important;
    color: var(--c-text-leise) !important;
    cursor: not-allowed !important;
}

.btn-saas-cta, .saas-btn-newsletter, .saas-btn-cookie-accept, .btn-primary {
    background: var(--marke-primaer) !important;
    border-color: var(--marke-primaer) !important;
    color: #fff !important;
    border-radius: var(--marke-radius) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.btn-saas-cta:hover, .saas-btn-newsletter:hover,
.saas-btn-cookie-accept:hover, .btn-primary:hover {
    background: var(--marke-hover) !important;
    border-color: var(--marke-hover) !important;
    transform: none !important;
}
.btn-saas-login {
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
}
.btn-saas-logout, .saas-btn-cookie-decline {
    background: transparent !important;
    border: 1px solid var(--marke-rand) !important;
    color: var(--c-text-2) !important;
    border-radius: var(--marke-radius) !important;
}

.saas-toolbar {
    background: #fff !important;
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    padding: 9px 13px !important;
    box-shadow: none !important;
}
body.dark-mode .saas-toolbar { background: #1B1F23 !important; }
.saas-view-btn {
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    color: var(--c-text-2) !important;
}
.saas-view-btn.active, .saas-view-btn:hover {
    background: var(--marke-primaer) !important;
    border-color: var(--marke-primaer) !important;
    color: #fff !important;
}
.form-control, .form-select, .saas-limit-select {
    min-height: 44px;
    border-radius: var(--marke-radius) !important;
    border-color: rgba(0,0,0,.2) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--marke-primaer) !important;
    box-shadow: 0 0 0 .15rem rgba(0,141,207,.15) !important;
}
.card, .pkg-card, .modal-content { border-radius: var(--marke-radius) !important; }
.page-link { color: var(--marke-primaer) !important; border-radius: var(--marke-radius) !important; }
.page-item.active .page-link {
    background: var(--marke-primaer) !important;
    border-color: var(--marke-primaer) !important;
    color: #fff !important;
}
.saas-product-price, .product-price, .saas-price, .price {
    color: var(--c-text) !important; font-weight: 700 !important;
}
.saas-old-price, .price-old, del { color: var(--c-text-leise) !important; font-weight: 400 !important; }
.saas-badge-sale {
    position: absolute !important; top: 8px !important; left: 8px !important;
    background: var(--marke-primaer) !important;
    color: #fff !important;
    font-size: .68rem !important; font-weight: 600 !important;
    padding: 3px 9px !important; border-radius: var(--marke-radius) !important;
    box-shadow: none !important;
}
.saas-favorite-btn {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    color: var(--c-text-leise) !important;
    text-decoration: none; font-size: .85rem;
}
.saas-favorite-btn:hover, .saas-favorite-btn.is-favorite {
    color: var(--marke-primaer) !important; border-color: var(--marke-primaer) !important;
}
.shipping-pill {
    background: #fff !important;
    border: 1px solid var(--marke-rand) !important;
    color: var(--c-text) !important;
    border-radius: var(--marke-radius) !important;
    box-shadow: none !important;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px; font-size: .84rem;
}
.shipping-pill i { color: var(--marke-primaer); }
.saas-stock-notice { border-radius: var(--marke-radius) !important; font-weight: 600; }
.stock-in  { color: var(--marke-gruen) !important; }
.stock-out { color: var(--c-text-leise) !important; }
.icon-badge { background: var(--marke-primaer) !important; color: #fff !important; border-radius: 8px !important; }

.saas-description-text p  { margin-bottom: .9rem; }
.saas-description-text ul,
.saas-description-text ol { margin: 0 0 1rem 1.2rem; }
.saas-description-text li { margin-bottom: .35rem; }
.saas-description-text h3,
.saas-description-text h4 { font-size: 1.02rem; font-weight: 700; margin: 1.4rem 0 .6rem; color: var(--c-text); }

/* =========================================================================
   11. NEWSLETTER-BAND
   ========================================================================= */
/* ---------------------------------------------------------------
   ZURZEIT UNBENUTZT: .newsletter-band und .nl-form

   Das Band wurde aus home.php entfernt, weil die Fusszeile
   bereits eine Newsletter-Spalte hat - auf der Startseite
   standen sonst zwei Anmeldeformulare uebereinander.

   Die Regeln bleiben ABSICHTLICH stehen: Wer das Band lieber
   hat als die Fussspalte, holt es aus der Versionsgeschichte
   zurueck und braucht die Gestaltung dann sofort. Geloescht
   muesste man sie neu schreiben.
   --------------------------------------------------------------- */
.newsletter-band { background: var(--marke-hell); border-top: 1px solid var(--marke-rand); padding: 30px 0; }
body.dark-mode .newsletter-band { background: #1B1F23; }
.newsletter-band h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 3px; color: var(--c-text); }
.newsletter-band p { margin: 0; font-size: .84rem; color: var(--c-text-leise); }
.newsletter-band .nl-form { display: flex; max-width: 440px; width: 100%; }
.newsletter-band .nl-form input {
    flex: 1 1 auto; height: 40px;
    border: 1px solid var(--marke-rand); border-right: 0;
    padding: 0 13px;
    border-radius: var(--marke-radius) 0 0 var(--marke-radius);
    font-size: .86rem;
}
.newsletter-band .nl-form button {
    border: 0; padding: 0 20px;
    background: var(--marke-primaer); color: #fff;
    font-weight: 600; font-size: .84rem;
    border-radius: 0 var(--marke-radius) var(--marke-radius) 0;
    cursor: pointer;
}
.newsletter-band .nl-form button:hover { background: var(--marke-primaer-tief); }

/* =========================================================================
   12. FUSSZEILE
   ========================================================================= */
.saas-footer {
    background: var(--marke-fuss) !important;
    color: #888888 !important;
    border-top: 2px solid rgba(255,187,0,.71) !important;
    font-size: .875rem;
}
body.dark-mode .saas-footer { background: #1B1F23 !important; }
.saas-footer-title {
    color: var(--marke-primaer) !important;
    font-weight: 700 !important; font-size: .88rem !important;
    text-transform: none; letter-spacing: 0;
}
.saas-footer-link { color: var(--c-text-2) !important; font-size: .82rem !important; text-decoration: none !important; }
.saas-footer-link:hover { color: var(--marke-primaer) !important; text-decoration: underline !important; }
.saas-copyright-bar { border-top: 1px solid var(--marke-rand) !important; background: transparent !important; }
.saas-copyright-text, .saas-copyright-text strong { color: var(--c-text-leise) !important; }
.saas-social-link {
    background: transparent !important;
    color: var(--c-text-2) !important;
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
}
.saas-social-link:hover { background: var(--marke-primaer) !important; color: #fff !important; border-color: var(--marke-primaer) !important; }
.saas-footer .saas-newsletter-input {
    background: #fff !important;
    border: 1px solid var(--marke-rand) !important;
    color: var(--c-text) !important;
    border-radius: var(--marke-radius) !important;
}
.saas-footer .saas-newsletter-input::placeholder { color: var(--c-text-leise) !important; }

.zahlarten { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.zahlart {
    background: #fff; color: var(--c-text-2);
    border: 1px solid var(--marke-rand);
    font-size: .66rem; font-weight: 700;
    padding: 5px 9px; border-radius: 3px;
}

/* =========================================================================
   12b. SEITENRAHMEN — alle Unterseiten wie die Startseite

   Die Unterseiten stammen aus dem Basis-Theme und bringen jede ihren
   eigenen Rahmen mit: mal .container, mal .container-fluid ueber die
   volle Breite, mal ein 80 Pixel hoher Kopfbereich, mal py-5 und mal
   gar kein Abstand. Nebeneinander sieht das aus wie drei verschiedene
   Shops.

   Statt 28 Dateien anzufassen, wird der Rahmen hier zentral
   gleichgezogen. Das hat den Nebeneffekt, dass es auch fuer Seiten
   gilt, die spaeter dazukommen.
   ========================================================================= */

/* Volle Breite zuruecknehmen. Betrifft vor allem die Suchergebnisse:
   Die standen randlos ueber den ganzen Bildschirm, waehrend Startseite
   und Warenkorb bei der eingestellten Seitenbreite endeten. */
.container-fluid {
    max-width: var(--seiten-breite, 1320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Einheitlicher senkrechter Abstand. Die Startseite verwendet
   22px oben und 40px unten - die uebrigen Seiten jetzt auch. */
.container.py-5,
.container.my-5,
.saas-page-section,
.saas-info-section,
.saas-json-section,
.saas-blog-article,
.search-matrix-container {
    padding-top: 22px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Kopfbereiche der Unterseiten.
   Der Blog hatte einen 80 Pixel hohen, mittig gesetzten Block mit
   eigener Hintergrundfarbe. Die Startseite arbeitet mit einer
   schlichten Zeile plus Linie darunter - das gilt jetzt ueberall. */
.saas-blog-hero,
.saas-post-hero,
.saas-news-hero {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 22px 0 0 !important;
    text-align: left !important;
}
.saas-blog-hero .container,
.saas-post-hero .container,
.saas-news-hero .container {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--marke-rand);
}
.saas-blog-hero h1, .saas-blog-hero h2,
.saas-news-hero h1, .saas-news-hero h2 {
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin: 0 !important;
    color: var(--c-text) !important;
}
.saas-blog-hero p, .saas-news-hero p {
    font-size: .82rem !important;
    color: var(--c-text-leise) !important;
    margin: 4px 0 0 !important;
}

/* Ueberschrift der Unterseiten auf dieselbe Groesse wie die
   Abschnittstitel der Startseite. */
.saas-page-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid var(--marke-rand);
    padding-bottom: 10px;
    margin-bottom: 20px !important;
}
.saas-page-header .saas-headline,
.saas-page-header h1 {
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin: 0 !important;
}

/* Karten und Kaesten der Unterseiten auf denselben Rand und Radius
   wie die Produktkarten. Runde Ecken von 20px sahen neben den
   4px-Karten der Startseite aus wie ein Fremdkoerper. */
.saas-filter-sidebar,
.saas-premium-toolbar,
.saas-blog-card,
.saas-account-card,
.saas-cart-card,
.saas-checkout-card,
.saas-info-card {
    border-radius: var(--marke-radius) !important;
    border: 1px solid var(--marke-rand) !important;
    box-shadow: none !important;
}

/* Die Seiten mit einem einzelnen zentrierten Kasten (Anmelden,
   Registrieren, Passwort) sollen nicht ueber die ganze Hoehe gehen -
   sonst steht die Fusszeile weit unter dem Bildschirmrand. */
.container.d-flex.justify-content-center.align-items-center {
    min-height: 0 !important;
    padding-top: 40px;
    padding-bottom: 60px;
}

@media (max-width: 991.98px) {
    .container-fluid.px-4.px-md-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* -------------------------------------------------------------------------
   SUCHE UND KATEGORIESEITE

   Die Seite bringt eine eigene Werkzeugleiste und eine eigene
   Filterspalte mit. Die Produktkarten sind seit dem Umbau dieselben wie
   auf der Startseite - hier wird noch der Rahmen darum angeglichen.
   ------------------------------------------------------------------------- */
.search-matrix-container .saas-premium-toolbar {
    background: #fff !important;
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    margin-bottom: 20px !important;
}
body.dark-mode .search-matrix-container .saas-premium-toolbar { background: #1B1F23 !important; }

.search-matrix-container .saas-toolbar-btn {
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    background: #fff !important;
    color: var(--c-text-2) !important;
    box-shadow: none !important;
}
.search-matrix-container .saas-toolbar-btn.active,
.search-matrix-container .saas-toolbar-btn:hover {
    background: var(--marke-primaer) !important;
    border-color: var(--marke-primaer) !important;
    color: #fff !important;
}
.search-matrix-container .saas-toolbar-select { min-height: 40px; }

/* Filterspalte wie die Kategoriespalte der Startseite:
   keine Box mit Schatten, sondern eine schlichte Liste mit
   duennen Trennlinien. */
.search-matrix-container .saas-filter-sidebar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
}
.search-matrix-container .saas-sidebar-title {
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-leise) !important;
    padding-bottom: 8px;
    margin: 22px 0 0 !important;
    border-bottom: 2px solid var(--marke-rand);
}
.search-matrix-container .saas-sidebar-title:first-child { margin-top: 0 !important; }
.search-matrix-container .saas-filter-list { list-style: none; margin: 0; padding: 0; }
.search-matrix-container .saas-filter-link {
    display: block !important;
    padding: 11px 4px !important;
    font-size: .84rem !important;
    color: var(--c-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--marke-rand) !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
.search-matrix-container .saas-filter-link:hover,
.search-matrix-container .saas-filter-link.active {
    color: var(--marke-primaer) !important;
    background: transparent !important;
    font-weight: 600;
}
.search-matrix-container .saas-search-wrapper { margin-bottom: 18px; }
.search-matrix-container .saas-search-input {
    border: 1px solid var(--marke-rand) !important;
    border-radius: var(--marke-radius) !important;
    min-height: 44px;
    box-shadow: none !important;
}

/* Listenansicht: Bild links, Text rechts - wie im Vollraster der
   Startseite. */
.matrix-list-layout .p-karte { flex-direction: row !important; }
.matrix-list-layout .p-bild  { width: 190px; flex: 0 0 190px; aspect-ratio: auto; }
.matrix-list-layout .p-text  { border-left: 1px solid var(--marke-rand); }
@media (max-width: 767.98px) {
    .matrix-list-layout .p-karte { flex-direction: column !important; }
    .matrix-list-layout .p-bild  { width: 100%; flex: none; aspect-ratio: 1 / 1; }
    .matrix-list-layout .p-text  { border-left: 0; }
}

/* =========================================================================
   13. MOBILES SCHUBFACH
   ========================================================================= */
.mobil-menu {
    position: fixed; top: 0; left: -300px; bottom: 0;
    width: 288px; z-index: 1060;
    background: #fff;
    border-right: 1px solid var(--marke-rand);
    overflow-y: auto;
    transition: left .22s ease;
}
body.dark-mode .mobil-menu { background: #1B1F23; }
.mobil-menu.offen { left: 0; }
.mobil-menu-kopf {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--marke-primaer); color: #fff;
    padding: 13px 16px; font-weight: 700; font-size: .88rem;
}
.mobil-menu-kopf button { background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1; }
.mobil-menu a {
    display: block; padding: 11px 16px;
    color: var(--c-text) !important; text-decoration: none !important;
    font-size: .85rem;
    border-bottom: 1px solid var(--marke-rand);
}
.mobil-menu a:hover { background: var(--marke-hell); color: var(--marke-primaer) !important; }
.mobil-menu .mm-titel {
    padding: 12px 16px 5px; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--c-text-leise);
}
.mobil-schatten { position: fixed; inset: 0; z-index: 1055; background: rgba(0,0,0,.45); display: none; }
.mobil-schatten.offen { display: block; }

/* =========================================================================
   14. KLEINERE BILDSCHIRME

   Unter 992px faellt die Kategoriespalte weg und wandert ins
   Schubfach. Sie stehen zu lassen hiesse, dass Slider und Produkte
   auf einem Handy nur noch die halbe Breite haetten.
   ========================================================================= */
@media (max-width: 1199.98px) {
    .reihe-spur { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}

@media (max-width: 991.98px) {
    .seiten-raster { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 14px; }
    .kat-spalte { display: none; }
    .kopf-zeile { flex-wrap: wrap; gap: 8px; padding: 10px 0; }
    .kopf-suche { order: 3; flex: 1 0 100%; max-width: 100%; margin: 6px 0 0; }
    .kopf-pille { display: none; }
    .kopf-nav { justify-content: flex-start; gap: 18px; overflow-x: auto; scrollbar-width: none; }
    .kopf-nav::-webkit-scrollbar { display: none; }
    .reihe-spur { grid-auto-columns: calc((100% - 16px) / 2); }
    .reihe-pfeil { display: none; }
    .thema-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
    .breit-banner img { display: none; }
}

@media (min-width: 992px) {
    .mobil-menu, .mobil-schatten, .mobil-oeffner { display: none !important; }
}

@media (max-width: 575.98px) {
    .reihe-spur { grid-auto-columns: 74%; }
    .thema-grid, .blog-grid { grid-template-columns: 1fr; }
    .reihe-kopf h2 { font-size: 1.08rem; }
    /* Auf dem Handy kleiner, aber relativ zur Einstellung - eine feste
       Zahl wuerde den Regler wieder aushebeln. */
    .main-header .navbar-brand img { max-width: calc(var(--logo-breite, 160px) * .7); max-height: 52px; }
    .p-preis .p-jetzt { font-size: 1rem; }
    .newsletter-band .nl-form { max-width: 100%; }
}

/* =========================================================================
   18. BAUSTEINE — KOPF, FUSS, SLIDER, KATEGORIESPALTE

   Je zehn Varianten, gewaehlt im Admin unter Einstellungen ->
   Bausteine. Die Schluessel stehen als Klassen am <body>.
   Katalog: /includes/bausteine.php

   Aufbau: Erst die Desktop-Regeln aller Varianten eines Bereichs,
   danach ein gemeinsamer Handy-Block. Getrennt, weil sonst zwischen
   jeder Variante ein @media-Block staende und die Datei unlesbar
   wuerde.
   ========================================================================= */

/* -------------------------------------------------------------------------
   18.1 KOPFZEILE
   ------------------------------------------------------------------------- */

/* --- Logo mittig --- */
.kopf-stil-mittig .kopf-zeile { flex-wrap: wrap; justify-content: center; }
.kopf-stil-mittig .navbar-brand { order: 2; margin: 0 auto !important; }
.kopf-stil-mittig .kopf-pille   { order: 1; }
.kopf-stil-mittig .kopf-aktionen{ order: 3; margin-left: 0 !important; }
.kopf-stil-mittig .kopf-suche   { order: 4; flex: 1 0 100%; max-width: 100%; margin: 12px 0 0; }

/* --- Dunkler Kopf --- */
.kopf-stil-dunkel .main-header { background: var(--marke-dunkel) !important; }
.kopf-stil-dunkel .kopf-zeile  { border-bottom-color: rgba(255,255,255,.15); }
.kopf-stil-dunkel .navbar-brand,
.kopf-stil-dunkel .kopf-knopf  { color: #F2F4F5 !important; }
.kopf-stil-dunkel .kopf-knopf:hover { background: rgba(255,255,255,.10); color: #fff !important; }
.kopf-stil-dunkel .kopf-nav a  { color: #C3C9CE !important; }
.kopf-stil-dunkel .kopf-nav a:hover { color: #fff !important; border-bottom-color: #fff; }
.kopf-stil-dunkel .kopf-pille  { border-color: rgba(255,255,255,.25); }
.kopf-stil-dunkel .kopf-pille > * { color: #C3C9CE !important; border-color: rgba(255,255,255,.25); }
.kopf-stil-dunkel .kopf-pille .aktiv { color: #fff !important; }

/* --- Schlank: alles in einer Zeile --- */
.kopf-stil-schlank .kopf-zeile { padding: 6px 0; }
.kopf-stil-schlank .kopf-nav   { display: none; }
.kopf-stil-schlank .kopf-knopf { width: 34px; height: 34px; font-size: 1rem; }
.kopf-stil-schlank .kopf-suche input { height: 32px; }
.kopf-stil-schlank .kopf-suche button { height: 32px; }

/* --- Suche gross --- */
.kopf-stil-suchegross .kopf-suche { max-width: 620px; }
.kopf-stil-suchegross .kopf-suche input {
    height: 46px;
    border: 2px solid var(--marke-primaer);
    border-right: 0;
    padding-right: 62px;
}
.kopf-stil-suchegross .kopf-suche button {
    width: 58px; height: 46px;
    background: var(--marke-primaer); color: #fff;
    border-radius: 0 var(--marke-radius) var(--marke-radius) 0;
}
.kopf-stil-suchegross .kopf-suche button:hover { background: var(--marke-hover); }

/* --- Menue neben dem Logo --- */
.kopf-stil-linksnav .kopf-nav {
    justify-content: flex-start;
    min-height: 0;
    margin-left: 18px;
    order: 2;
}
.kopf-stil-linksnav .kopf-zeile { flex-wrap: wrap; }
.kopf-stil-linksnav .kopf-nav a { padding: 4px 0; border-bottom: 0; }
.kopf-stil-linksnav .kopf-suche { order: 5; flex: 1 0 100%; max-width: 100%; margin: 10px 0 0; }

/* --- Zweifarbig --- */
.kopf-stil-zweifarbig .kopf-zeile { border-bottom: 0; }
.kopf-stil-zweifarbig .kopf-nav {
    background: var(--marke-primaer);
    margin: 0 -12px;
    padding: 0 12px;
    justify-content: flex-start;
    gap: 22px;
}
.kopf-stil-zweifarbig .kopf-nav a { color: #fff !important; }
.kopf-stil-zweifarbig .kopf-nav a:hover,
.kopf-stil-zweifarbig .kopf-nav a.aktiv { color: #fff !important; border-bottom-color: var(--marke-akzent); }

/* --- Randlos --- */
.kopf-stil-randlos .main-header { border-bottom: 0 !important; box-shadow: none !important; }
.kopf-stil-randlos .kopf-zeile  { border-bottom: 0; }
.kopf-stil-randlos .kopf-suche input { border-color: transparent; background: var(--marke-hell); }
.kopf-stil-randlos .kopf-suche input:focus { border-color: var(--marke-rand); background: #fff; }

/* --- Gerahmt --- */
.kopf-stil-rahmen .kopf-aktionen {
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 2px;
}
.kopf-stil-rahmen .kopf-suche input {
    background: var(--marke-hell);
    border-color: var(--marke-rand);
}
.kopf-stil-rahmen .kopf-nav { background: var(--marke-hell); padding: 0 12px; margin: 0 -12px; }

/* --- Grosszuegig --- */
.kopf-stil-gross .kopf-zeile { padding: 22px 0; gap: 22px; }
.kopf-stil-gross .navbar-brand img { max-height: 68px !important; }
.kopf-stil-gross .kopf-knopf { width: 46px; height: 46px; font-size: 1.3rem; }
.kopf-stil-gross .kopf-suche input { height: 48px; }
.kopf-stil-gross .kopf-suche button { height: 48px; }

/* -------------------------------------------------------------------------
   18.2 FUSSZEILE
   ------------------------------------------------------------------------- */

/* --- Dunkel --- */
.fuss-stil-dunkel .saas-footer { background: var(--marke-dunkel) !important; color: #B8BFC5 !important; }
.fuss-stil-dunkel .saas-footer-title { color: #fff !important; }
.fuss-stil-dunkel .saas-footer-link  { color: #B8BFC5 !important; }
.fuss-stil-dunkel .saas-footer-link:hover { color: var(--marke-akzent) !important; }
.fuss-stil-dunkel .saas-copyright-bar { background: rgba(0,0,0,.25) !important; border-top-color: rgba(255,255,255,.10) !important; }
.fuss-stil-dunkel .saas-copyright-text { color: #8F979E !important; }
.fuss-stil-dunkel .saas-social-link { border-color: rgba(255,255,255,.20) !important; color: #fff !important; }
.fuss-stil-dunkel .zahlart { background: rgba(255,255,255,.12); color: #E7EAEC; border-color: rgba(255,255,255,.18); }

/* --- Minimal: nur das Noetigste --- */
.fuss-stil-minimal .saas-footer > .container > .row > [class*="col-"]:not(:last-child) { display: none; }
.fuss-stil-minimal .saas-footer { padding-top: 0 !important; }
.fuss-stil-minimal .saas-copyright-bar { border-top: 0 !important; }

/* --- Zentriert --- */
.fuss-stil-mittig .saas-footer,
.fuss-stil-mittig .saas-footer [class*="col-"] { text-align: center !important; }
.fuss-stil-mittig .zahlarten,
.fuss-stil-mittig .social-links { justify-content: center; }

/* --- Kompakt --- */
.fuss-stil-kompakt .saas-footer { font-size: .8rem; }
.fuss-stil-kompakt .saas-footer .container { padding-top: 20px; padding-bottom: 10px; }
.fuss-stil-kompakt .saas-footer-title { font-size: .8rem !important; margin-bottom: 6px !important; }
.fuss-stil-kompakt .saas-footer-link  { font-size: .78rem !important; line-height: 1.7; }
.fuss-stil-kompakt .saas-footer ul li { margin-bottom: 0 !important; }

/* --- Trennlinien zwischen den Spalten --- */
.fuss-stil-trennlinien .saas-footer [class*="col-md"]:not(:last-child),
.fuss-stil-trennlinien .saas-footer [class*="col-lg"]:not(:last-child) {
    border-right: 1px solid var(--marke-rand);
}

/* --- Spalten als Kaesten --- */
.fuss-stil-karten .saas-footer [class*="col-md"] > *,
.fuss-stil-karten .saas-footer [class*="col-lg"] > * { position: relative; }
.fuss-stil-karten .saas-footer [class*="col-md"],
.fuss-stil-karten .saas-footer [class*="col-lg"] {
    padding: 16px !important;
}
.fuss-stil-karten .saas-footer [class*="col-md"]::before,
.fuss-stil-karten .saas-footer [class*="col-lg"]::before {
    content: ""; position: absolute; inset: 4px;
    background: #fff; border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius); z-index: 0;
}
.fuss-stil-karten .saas-footer [class*="col-md"] > *,
.fuss-stil-karten .saas-footer [class*="col-lg"] > * { z-index: 1; }

/* --- Farbband oben --- */
.fuss-stil-farbband .saas-footer { border-top: 6px solid var(--marke-primaer) !important; }

/* --- Grosszuegig --- */
.fuss-stil-gross .saas-footer .container { padding-top: 56px; padding-bottom: 30px; }
.fuss-stil-gross .saas-footer-title { font-size: 1.05rem !important; margin-bottom: 16px !important; }
.fuss-stil-gross .saas-footer-link { font-size: .92rem !important; line-height: 2.1; }

/* --- Ohne Linien --- */
.fuss-stil-ohnelinien .saas-footer { border-top: 0 !important; }
.fuss-stil-ohnelinien .saas-copyright-bar { border-top: 0 !important; background: transparent !important; }

/* -------------------------------------------------------------------------
   18.3 SLIDER
   ------------------------------------------------------------------------- */

.slider-stil-randlos .saas-carousel-container { border-radius: 0; }

.slider-stil-gerahmt .saas-carousel-container {
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px var(--marke-rand);
}

.slider-stil-dunkel .carousel-overlay {
    background: linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 100%) !important;
}

.slider-stil-klartext .saas-caption-box:not(.no-bg) {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}
.slider-stil-klartext .saas-caption-box h2,
.slider-stil-klartext .saas-caption-box p { text-shadow: 0 2px 12px rgba(0,0,0,.75); }

/* Textbalken unten: der Kasten wird zum durchgehenden Band. Die
   freie Position aus dem Slider-Manager wird dabei ueberstimmt -
   sonst haetten wir zwei Regeln, die sich widersprechen. */
.slider-stil-balken .saas-caption-box {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: 100% !important; max-width: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    background: rgba(15,20,26,.72) !important;
    padding: 18px 26px !important;
}

.slider-stil-seite .saas-caption-box:not(.no-bg) {
    background: var(--marke-primaer) !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}
.slider-stil-seite .carousel-overlay { background: none !important; }

.slider-stil-weich .saas-carousel-container {
    border-radius: 22px;
    box-shadow: 0 14px 40px -12px rgba(0,0,0,.35);
}
.slider-stil-weich .saas-caption-box:not(.no-bg) { border-radius: 14px !important; }

/* Flach: Hoehe halbieren. Der Wert aus dem Slider-Manager bleibt die
   Grundlage, hier wird nur skaliert. */
.slider-stil-schmal .saas-carousel-container { height: 190px !important; }
.slider-stil-schmal .size-lg h2 { font-size: 1.9rem; }
.slider-stil-schmal .size-md h2 { font-size: 1.6rem; }
.slider-stil-schmal .size-sm h2 { font-size: 1.3rem; }

.slider-stil-ruhig .carousel-overlay { display: none !important; }

/* -------------------------------------------------------------------------
   18.4 KATEGORIESPALTE
   ------------------------------------------------------------------------- */

.spalte-stil-kasten .kat-spalte {
    background: var(--marke-hell);
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 10px 14px;
}
.spalte-stil-kasten .kat-link:last-child { border-bottom: 0; }

.spalte-stil-pillen .kat-link {
    border-bottom: 0 !important;
    border-radius: 20px;
    padding: 9px 14px !important;
    margin-bottom: 3px;
}
.spalte-stil-pillen .kat-link:hover,
.spalte-stil-pillen .kat-link.aktiv {
    background: var(--marke-hell);
    color: var(--marke-primaer) !important;
}

.spalte-stil-ohnelinien .kat-link { border-bottom: 0 !important; padding: 8px 4px !important; }

.spalte-stil-balken .kat-link {
    border-bottom: 0 !important;
    border-left: 3px solid transparent !important;
    padding-left: 12px !important;
}
.spalte-stil-balken .kat-link:hover,
.spalte-stil-balken .kat-link.aktiv { border-left-color: var(--marke-primaer) !important; }

.spalte-stil-dunkel .kat-spalte {
    background: var(--marke-dunkel);
    border-radius: var(--marke-radius);
    padding: 10px 14px;
}
.spalte-stil-dunkel .kat-link {
    color: #C9CFD4 !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
}
.spalte-stil-dunkel .kat-link:hover,
.spalte-stil-dunkel .kat-link.aktiv { color: #fff !important; }
.spalte-stil-dunkel .hilfe-knopf { background: transparent; border-color: rgba(255,255,255,.3); color: #fff !important; }

.spalte-stil-kompakt .kat-link { padding: 7px 4px !important; font-size: .78rem !important; }

.spalte-stil-gross .kat-link { padding: 14px 4px !important; font-size: 1rem !important; font-weight: 500; }

.spalte-stil-nummern .kat-link {
    display: flex !important;
    align-items: center; justify-content: space-between;
}
.spalte-stil-nummern .kat-link::after {
    content: "\203A";
    color: var(--c-text-leise);
    font-size: 1.1rem; line-height: 1;
}

.spalte-stil-versal .kat-link {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem !important;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   18.5 HANDY

   Unter 992px faellt die Kategoriespalte ohnehin weg, deshalb steht
   hier nichts dazu. Beim Kopf muss dagegen fast jede Variante
   zurueckgenommen werden: Was auf 1300 Pixeln luftig wirkt, frisst
   auf 360 Pixeln die halbe Ansicht.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Kopf: mittiges Logo und Menue-neben-Logo greifen nicht mehr,
       die Reihenfolge macht auf schmalen Schirmen das Schubfach. */
    .kopf-stil-mittig .navbar-brand,
    .kopf-stil-mittig .kopf-pille,
    .kopf-stil-mittig .kopf-aktionen,
    .kopf-stil-linksnav .kopf-nav,
    .kopf-stil-linksnav .kopf-suche { order: 0; }
    .kopf-stil-mittig .kopf-zeile { justify-content: space-between; }
    .kopf-stil-mittig .navbar-brand { margin: 0 !important; }

    /* Grosszuegig: Logo und Symbole zurueck auf normale Groesse */
    .kopf-stil-gross .kopf-zeile { padding: 10px 0; gap: 8px; }
    .kopf-stil-gross .navbar-brand img { max-height: 40px !important; }
    .kopf-stil-gross .kopf-knopf { width: 38px; height: 38px; font-size: 1.15rem; }
    .kopf-stil-gross .kopf-suche input,
    .kopf-stil-gross .kopf-suche button { height: 40px; }

    /* Suche gross: das breite Feld passt nicht, Hoehe bleibt */
    .kopf-stil-suchegross .kopf-suche { max-width: 100%; }
    .kopf-stil-suchegross .kopf-suche input,
    .kopf-stil-suchegross .kopf-suche button { height: 42px; }

    /* Zweifarbig: das Farbband ueber die volle Breite */
    .kopf-stil-zweifarbig .kopf-nav { margin: 0 -12px; padding: 0 12px; }

    /* Fusszeile: Trennlinien und Kaesten ergeben untereinander
       keinen Sinn mehr - Spalten stehen dann gestapelt. */
    .fuss-stil-trennlinien .saas-footer [class*="col-md"],
    .fuss-stil-trennlinien .saas-footer [class*="col-lg"] { border-right: 0 !important; }
    .fuss-stil-karten .saas-footer [class*="col-md"],
    .fuss-stil-karten .saas-footer [class*="col-lg"] { padding: 10px !important; }
    .fuss-stil-gross .saas-footer .container { padding-top: 30px; padding-bottom: 20px; }
    .fuss-stil-gross .saas-footer-link { line-height: 1.9; }

    /* Slider: Rahmen und grosse Radien schrumpfen */
    .slider-stil-gerahmt .saas-carousel-container { border-width: 4px; }
    .slider-stil-weich .saas-carousel-container { border-radius: 12px; }
    .slider-stil-balken .saas-caption-box { padding: 12px 16px !important; }
    .slider-stil-schmal .saas-carousel-container { height: 140px !important; }
    .slider-stil-seite .saas-caption-box:not(.no-bg) { padding: 14px 16px !important; }
}

@media (max-width: 575.98px) {
    .kopf-stil-schlank .kopf-suche input,
    .kopf-stil-schlank .kopf-suche button { height: 36px; }
    .slider-stil-schmal .saas-carousel-container { height: 120px !important; }
    .fuss-stil-kompakt .saas-footer { font-size: .76rem; }
}

/* =========================================================================
   19. KOMPLETT-DESIGNS — FARBWELTEN

   Jedes Design bringt eigene Farben mit. Sie werden als Klasse am
   <body> gesetzt und ueberschreiben die Marken-Variablen fuer alles
   darunter. Katalog: /includes/designs.php

   Nur die Farben stehen hier - Kopf, Fuss, Slider, Spalte und
   Karten kommen aus den Bausteinen (Abschnitt 8b und 18), die das
   Design beim Uebernehmen in den Einstellungen setzt.

   Wer nach dem Uebernehmen einzelne Bausteine aendert, behaelt die
   Farbwelt. Das ist gewollt: Die Farbe ist die Marke, die Anordnung
   ist Geschmack.
   ========================================================================= */

/* --- Preis-Discounter: Blau/Gelb, der Ausgangszustand --- */
body.design-discount { /* absichtlich leer - Farben aus :root */ }

/* --- Modern Commerce: fast farblos, Schwarz als Akzent --- */
body.design-commerce {
    --marke-primaer: #1A1A1A;  --marke-primaer-tief: #000000;
    --marke-akzent:  #1A1A1A;  --marke-akzent-text:  #FFFFFF;
    --marke-hover:   #444444;  --marke-linie:        #E5E5E5;
    --marke-dunkel:  #1A1A1A;  --marke-rand:         #E5E5E5;
    --marke-hell:    #FAFAFA;  --marke-radius:       8px;
}

/* --- Klassisch strukturiert: Behoerdenblau --- */
body.design-struktur {
    --marke-primaer: #1F4E79;  --marke-primaer-tief: #163B5C;
    --marke-akzent:  #C8102E;  --marke-akzent-text:  #FFFFFF;
    --marke-hover:   #163B5C;  --marke-linie:        #1F4E79;
    --marke-dunkel:  #2E3B45;  --marke-hell:         #F2F4F6;
    --marke-radius:  3px;
}

/* --- Magazin: warmes Papierweiss, Tiefgruen --- */
body.design-magazin {
    --marke-primaer: #2C5F4F;  --marke-primaer-tief: #1E4437;
    --marke-akzent:  #B8874B;  --marke-akzent-text:  #FFFFFF;
    --marke-hover:   #1E4437;  --marke-linie:        #D9CDBB;
    --marke-dunkel:  #2B2A28;  --marke-hell:         #F7F4EF;
    --marke-rand:    #E3DCD1;  --marke-radius:       2px;
}

/* --- Freundlicher Baukasten: warmes Gruen, runde Formen --- */
body.design-baukasten {
    --marke-primaer: #2E9E5B;  --marke-primaer-tief: #23803F;
    --marke-akzent:  #FF9F1C;  --marke-akzent-text:  #2B2118;
    --marke-hover:   #23803F;  --marke-linie:        #FF9F1C;
    --marke-dunkel:  #33403A;  --marke-hell:         #F4F8F5;
    --marke-radius:  14px;
}

/* --- Konditorei: Karamell, Creme und ein Hauch Rose ---
   Warme, gedeckte Toene statt Signalfarben. Der Kaufknopf ist
   dunkles Karamell, nicht Gelb: Bei Backwaren konkurriert ein
   greller Knopf mit den Produktbildern, die selbst schon warm sind. */
body.design-konditorei {
    --marke-primaer: #8C5A3C;  --marke-primaer-tief: #6E4530;
    --marke-akzent:  #C98474;  --marke-akzent-text:  #FFFFFF;
    --marke-hover:   #4A3226;  --marke-linie:        #D9B08C;
    --marke-dunkel:  #4A3226;  --marke-dunkler:      #3A271E;
    --marke-hell:    #FBF6F0;  --marke-rand:         #E8DDD2;
    --marke-gruen:   #7A9C5B;  --marke-radius:       12px;
}

/* Die Konditorei bekommt zusaetzlich eine cremefarbene Grundflaeche.
   Reines Weiss laesst Gebaeckfotos blass wirken - die Bilder sind
   selbst hell und beige. */
body.design-konditorei { background: #FBF6F0 !important; }
body.design-konditorei .p-bild { background: #fff !important; }
body.design-konditorei .saas-footer { background: #FFFFFF !important; }

/* --- Elektronik: Gelb auf Dunkelgrau ---
   Die Aufteilung, die Elektronikshops fast alle verwenden: Ein
   dunkler Kopf traegt Logo, Suche und Warenkorb, ein kraeftiges
   Gelb gehoert allein den Handlungsknoepfen und den Rabattfahnen.

   Gelb als Flaechenfarbe funktioniert nur mit dunkler Schrift -
   weisse Schrift auf Gelb ergibt Kontrast 1.7:1 und ist praktisch
   unlesbar. Deshalb ist --marke-akzent-text hier dunkel. */
body.design-elektronik {
    --marke-primaer: #1A1A1A;  --marke-primaer-tief: #000000;
    --marke-akzent:  #FFD200;  --marke-akzent-text:  #1A1A1A;
    --marke-hover:   #000000;  --marke-linie:        #FFD200;
    --marke-dunkel:  #1A1A1A;  --marke-dunkler:      #000000;
    --marke-hell:    #F5F5F5;  --marke-rand:         #E3E3E3;
    --marke-rot:     #E02B20;  --marke-gruen:        #1F7A34;
    --marke-radius:  4px;      --marke-radius-klein: 2px;
}

/* Der Kaufknopf ist gelb mit dunkler Schrift, nicht dunkel:
   Er soll aus dem grauen Raster herausstechen. */
body.design-elektronik .p-korb,
body.design-elektronik .saas-btn-cart {
    background: var(--marke-akzent) !important;
    color: #1A1A1A !important;
    border-color: var(--marke-akzent) !important;
    font-weight: 800;
}
body.design-elektronik .p-korb:hover,
body.design-elektronik .saas-btn-cart:hover { background: #E6BD00 !important; }

/* Rabattfahne links oben, wie im Vorbild */
body.design-elektronik .p-stoerer { border-radius: 0 3px 3px 0 !important; }

/* Countdown-Ziffern gelb auf schwarz statt weiss */
body.design-elektronik .cd-teil b { color: var(--marke-akzent); }

/* --- Mega Store: Marineblau, Signalorange, viel Ware ---
   Die Aufteilung grosser Kaufhaus-Shops: dunkles Blau traegt Kopf
   und Fusszeile, Orange gehoert allein dem Kaufknopf und den
   Preisen. Zwei Farben, klar getrennte Aufgaben - deshalb wirkt es
   voll, aber nicht bunt.

   Ecken bei 3px statt 12: Bei acht Produkten pro Reihe kostet jede
   runde Ecke sichtbar Flaeche, und die Karten sollen wie ein Raster
   wirken, nicht wie einzelne Kacheln. */
body.design-megastore {
    --marke-primaer: #14315E;  --marke-primaer-tief: #0E2447;
    --marke-akzent:  #FF6B00;  --marke-akzent-text:  #FFFFFF;
    --marke-hover:   #0E2447;  --marke-linie:        #FF6B00;
    --marke-dunkel:  #14315E;  --marke-dunkler:      #0A1B36;
    --marke-hell:    #F2F5F9;  --marke-rand:         #DDE3EC;
    --marke-rot:     #E02B20;  --marke-gruen:        #1F7A34;
    --marke-radius:  3px;      --marke-radius-klein: 2px;
}

/* Preis in Signalfarbe statt in der Hausfarbe: Im Kaufhaus-Aufbau
   ist der Preis das Argument, nicht die Marke. */
body.design-megastore .p-preis,
body.design-megastore .p-preis-aktion { color: var(--marke-akzent) !important; }

/* Die Kategoriespalte wird zur tragenden Navigation - dichter,
   ohne Abstaende zwischen den Eintraegen. */
body.design-megastore .saas-filter-item { margin: 0 !important; }
body.design-megastore .saas-filter-link { padding-top: 7px !important; padding-bottom: 7px !important; }

/* --- Dunkel & Kontrast: Tuerkis auf Anthrazit --- */
body.design-dunkel {
    --marke-primaer: #17B8A6;  --marke-primaer-tief: #129587;
    --marke-akzent:  #17B8A6;  --marke-akzent-text:  #0E1418;
    --marke-hover:   #0E1418;  --marke-linie:        #17B8A6;
    --marke-dunkel:  #14191D;  --marke-dunkler:      #0E1418;
    --marke-hell:    #F1F3F4;  --marke-radius:       6px;
}

/* --- Traditionell: Dunkelrot und Beige --- */
body.design-traditionell {
    --marke-primaer: #8C1D2C;  --marke-primaer-tief: #6B1421;
    --marke-akzent:  #C9A227;  --marke-akzent-text:  #2A2118;
    --marke-hover:   #6B1421;  --marke-linie:        #C9A227;
    --marke-dunkel:  #33291F;  --marke-hell:         #FAF6EF;
    --marke-rand:    #E4DACA;  --marke-radius:       3px;
}

/* --- Kompakt: nuechternes Graublau, kleine Radien --- */
body.design-kompakt {
    --marke-primaer: #34618E;  --marke-primaer-tief: #274B6E;
    --marke-akzent:  #E8930C;  --marke-akzent-text:  #1B1B1B;
    --marke-hover:   #274B6E;  --marke-linie:        #CDD5DC;
    --marke-dunkel:  #2B3238;  --marke-hell:         #F4F6F8;
    --marke-radius:  2px;
}

/* --- Boutique: Altrosa auf gebrochenem Weiss --- */
body.design-boutique {
    --marke-primaer: #A8746B;  --marke-primaer-tief: #8A5B53;
    --marke-akzent:  #2B2B2B;  --marke-akzent-text:  #FFFFFF;
    --marke-hover:   #2B2B2B;  --marke-linie:        #E7DDD8;
    --marke-dunkel:  #2B2B2B;  --marke-hell:         #FBF8F6;
    --marke-rand:    #EAE2DE;  --marke-radius:       0px;
}

/* --- Handwerk: Signalrot auf Anthrazit --- */
body.design-handwerk {
    --marke-primaer: #C8102E;  --marke-primaer-tief: #9E0C24;
    --marke-akzent:  #FFC72C;  --marke-akzent-text:  #1C1C1C;
    --marke-hover:   #2B2F33;  --marke-linie:        #FFC72C;
    --marke-dunkel:  #2B2F33;  --marke-hell:         #F3F4F5;
    --marke-radius:  3px;
}

/* -------------------------------------------------------------------------
   Feinschliff je Design

   Ein paar Dinge lassen sich nicht ueber Farbvariablen loesen. Sie
   stehen hier, bewusst wenige Zeilen - je mehr ein Design fest
   vorschreibt, desto weniger laesst es sich nachher anpassen.
   ------------------------------------------------------------------------- */

/* Commerce und Boutique leben von Weissraum */
body.design-commerce .seiten-raster,
body.design-boutique .seiten-raster { padding: 34px 0 60px; }
body.design-commerce .reihe,
body.design-boutique .reihe { margin-top: 56px; }

/* Magazin: Ueberschriften nicht in Versalien - mit Serifen wirkt das
   gedrungen statt vornehm. */
body.design-magazin .reihe-kopf h2,
body.design-magazin .abschnitt-kopf h2 { text-transform: none; letter-spacing: -.01em; }
body.design-magazin .reihe-kopf { border-bottom-width: 1px; }

/* Kompakt: engeres Raster, damit die schmalere Schrift auch wirkt */
body.design-kompakt .seiten-raster { padding: 14px 0 30px; }
body.design-kompakt .reihe { margin-top: 26px; }
body.design-kompakt .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }

/* Traditionell: Grossbuchstaben in den Abschnittstiteln zuruecknehmen */
body.design-traditionell .reihe-kopf h2 { text-transform: none; }

/* Dunkel: der Seitenhintergrund darf mitgehen, sonst schwimmen die
   dunklen Bausteine auf Weiss. */
body.design-dunkel { background: #F1F3F4 !important; }
body.design-dunkel .reihe-kopf h2 { letter-spacing: .02em; }

/* =========================================================================
   20. AUFBAU DER SEITE

   Bis hierher haben die Designs nur Farben und Details getauscht -
   die Anordnung war bei allen dieselbe: Spalte links, Slider rechts,
   Reihen darunter. Dieser Abschnitt aendert die Anordnung selbst.

   Gesteuert ueber eine Klasse am <body>: layout-...
   Zugeordnet werden sie in /includes/designs.php.

   Das Raster ist ein CSS-Grid mit zwei Spalten. Damit lassen sich
   Reihenfolge und Anwesenheit der Spalte ohne PHP aendern - und die
   Vorschau im Admin zeigt automatisch dasselbe, weil sie dieselbe
   Klasse setzt.
   ========================================================================= */

/* ---------- Waagrechte Kategorieleiste ----------
   Steht immer im HTML, sichtbar nur in den Aufbauten ohne Spalte.
   Sonst waeren die Kategorien dort gar nicht mehr erreichbar. */
.kat-leiste { display: none; }

.kat-leiste .kat-chip {
    display: inline-block;
    padding: 8px 15px;
    font-size: .84rem;
    color: var(--c-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.kat-leiste .kat-chip:hover,
.kat-leiste .kat-chip.aktiv { color: var(--marke-primaer) !important; }

/* =========================================================================
   1. SPALTE LINKS  (Ausgangszustand, keine eigene Klasse noetig)
   ========================================================================= */

/* =========================================================================
   2. SPALTE RECHTS
   Der Inhalt beginnt am linken Rand, die Navigation steht rechts.
   Im Web ungewohnt, in Katalogen und bei Filterlisten aber verbreitet.
   ========================================================================= */
.layout-spalte-rechts .seiten-raster {
    grid-template-columns: minmax(0, 1fr) var(--spalte-breite);
}
.layout-spalte-rechts .kat-spalte    { order: 2; }
.layout-spalte-rechts .inhalt-spalte { order: 1; }

/* =========================================================================
   3. OHNE SPALTE — Kategorien als Leiste unter dem Kopf
   Der Inhalt bekommt die volle Breite. Passt, wenn es wenige
   Kategorien gibt: Ab etwa zwoelf wird die Leiste zur Schlange.
   ========================================================================= */
.layout-breit .seiten-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
.layout-breit .kat-spalte { display: none; }
.layout-breit .kat-leiste {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--marke-rand);
    padding-top: 10px;
}
.layout-breit .kat-leiste::-webkit-scrollbar { display: none; }
.layout-breit .kat-leiste .kat-chip { border-bottom: 3px solid transparent; }
.layout-breit .kat-leiste .kat-chip.aktiv { border-bottom-color: var(--marke-primaer); }

/* =========================================================================
   4. HERO ÜBER DIE VOLLE BREITE
   Der Slider bricht aus dem Raster aus und laeuft randlos ueber den
   Bildschirm. Darunter wieder normale Breite.

   Technisch ueber negative Aussenabstaende in Vierteln der
   Bildschirmbreite - so bleibt es unabhaengig von der eingestellten
   Seitenbreite.
   ========================================================================= */
.layout-hero .seiten-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
.layout-hero .kat-spalte { display: none; }
.layout-hero .kat-leiste {
    display: flex; gap: 4px; justify-content: center;
    flex-wrap: wrap;
    padding: 12px 0 0;
}
.layout-hero .saas-carousel-container {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    height: 60vh;
    min-height: 340px;
}
.layout-hero .usp-streifen {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0; border-right: 0;
    margin-top: 0;
}

/* =========================================================================
   5. KACHELN ZUERST
   Statt einer Spalte stehen die Kategorien als grosse Kacheln oben.
   Der Slider ist kleiner und tritt hinter die Kategorien zurueck.
   ========================================================================= */
.layout-kacheln .seiten-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
.layout-kacheln .kat-spalte { display: none; }
.layout-kacheln .kat-leiste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 18px 0 0;
}
.layout-kacheln .kat-leiste .kat-chip {
    text-align: center;
    padding: 22px 12px;
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    font-weight: 600;
    background: #fff;
}
.layout-kacheln .kat-leiste .kat-chip:hover { border-color: var(--marke-primaer); }
.layout-kacheln .saas-carousel-container { height: 240px !important; }
.layout-kacheln .thema-grid { margin-top: 26px; }

/* =========================================================================
   6. SCHMAL UND MITTIG
   Kein Slider ueber die Breite, kein Seitenmenue - ein schmaler
   Lesestreifen. Fuer kleine, ausgewaehlte Sortimente.
   ========================================================================= */
.layout-schmal .seiten-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
.layout-schmal .kat-spalte { display: none; }
.layout-schmal .kat-leiste {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 2px; padding: 14px 0 0;
}
/* Schmales Layout: 1040px als VORSCHLAG, nicht als Vorschrift.

   Hier stand ein festes max-width mit !important - damit war die
   Seitenbreite aus den Einstellungen wirkungslos, sobald ein Design
   mit diesem Layout aktiv war. Man stellt 1600 ein, speichert, und
   nichts passiert.

   Jetzt greift der eigene Wert, sobald er gesetzt ist: --seiten-breite
   kommt aus dem Admin, 1040px ist nur der Rueckfall. */
.layout-schmal .container { max-width: var(--seiten-breite, 1040px) !important; }
.layout-schmal .saas-carousel-container { height: 300px !important; }
.layout-schmal .reihe-spur { grid-auto-columns: calc((100% - 2 * 16px) / 3); }

/* =========================================================================
   7. RASTER ZUERST
   Das Vollraster wandert nach oben, die scrollbaren Reihen darunter.
   Fuer Shops, in denen das Stoebern im Sortiment wichtiger ist als
   die Aktionen.
   ========================================================================= */
.layout-raster .inhalt-spalte { display: flex; flex-direction: column; }
.layout-raster .inhalt-spalte > .reihe:last-of-type { order: -1; }
.layout-raster .saas-carousel-container { height: 260px !important; }

/* =========================================================================
   8. LISTE
   Produkte untereinander statt im Raster, Bild links. Zeigt lange
   Produktnamen und viele Artikel auf einmal.
   ========================================================================= */
.layout-liste .row > [class*="col-"] {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
}
.layout-liste .p-karte { flex-direction: row !important; }
.layout-liste .p-bild {
    width: 160px; flex: 0 0 160px; aspect-ratio: auto;
    border-right: 1px solid var(--marke-rand);
}
.layout-liste .p-kopf { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; padding: 0; }
.layout-liste .p-karte { position: relative; }
.layout-liste .p-text { padding: 14px !important; }
.layout-liste .p-name { -webkit-line-clamp: 2; min-height: 0; }
.layout-liste .p-preisleiste { border-top: 0; min-width: 200px; justify-content: flex-end; gap: 16px; }

/* =========================================================================
   9. ZWEISPALTIG — Spalte links, Aktionen rechts
   Der Inhalt wird schmaler, dafuer steht rechts dauerhaft die
   Themenspalte. Wie eine Zeitung mit Anzeigenrand.
   ========================================================================= */
.layout-zeitung .seiten-raster {
    grid-template-columns: var(--spalte-breite) minmax(0, 1fr) 240px;
}
.layout-zeitung .thema-grid {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: 1fr;
    margin-top: 0;
    align-self: start;
}
.layout-zeitung .inhalt-spalte { display: contents; }
.layout-zeitung .inhalt-spalte > *:not(.thema-grid) { grid-column: 2; }
.layout-zeitung .saas-carousel-container { height: 280px !important; }

/* =========================================================================
   10. GESTAPELT
   Alles untereinander, volle Breite, grosse Abstaende. Der Aufbau,
   den Baukastensysteme erzeugen - jeder Abschnitt ein eigener Block.
   ========================================================================= */
.layout-stapel .seiten-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
.layout-stapel .kat-spalte { display: none; }
.layout-stapel .kat-leiste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px; padding: 16px 0 0;
}
.layout-stapel .kat-leiste .kat-chip {
    text-align: center; padding: 14px 10px;
    background: var(--marke-hell);
    border-radius: var(--marke-radius);
}
.layout-stapel .reihe { margin-top: 64px; }
.layout-stapel .thema-grid { margin-top: 34px; gap: 24px; }
.layout-stapel .saas-carousel-container { height: 420px !important; }
.layout-stapel .reihe-kopf { justify-content: center; text-align: center; border-bottom: 0; }
.layout-stapel .reihe-kopf .alle-zeigen { display: none; }

/* =========================================================================
   AUFBAU AUF DEM HANDY

   Unter 992px wird aus jedem Aufbau dasselbe: eine Spalte,
   untereinander. Alles andere waere auf 360 Pixeln unbenutzbar -
   drei Rasterspalten ergaeben rund 100 Pixel pro Spalte.

   Die waagrechte Kategorieleiste bleibt aber sichtbar, wo sie es
   auch auf dem Desktop ist: Sonst haetten diese Aufbauten auf dem
   Handy gar keine Kategorienavigation ausser dem Schubfach.
   ========================================================================= */
@media (max-width: 991.98px) {
    .layout-spalte-rechts .seiten-raster,
    .layout-zeitung .seiten-raster {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .layout-zeitung .inhalt-spalte { display: block; }
    .layout-zeitung .thema-grid {
        grid-column: auto; grid-row: auto;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        margin-top: 18px;
    }

    /* Hero: 60vh sind auf dem Handy fast der ganze Bildschirm */
    .layout-hero .saas-carousel-container { height: 260px; min-height: 0; }

    .layout-stapel .saas-carousel-container { height: 240px !important; }
    .layout-stapel .reihe { margin-top: 40px; }

    .layout-kacheln .kat-leiste,
    .layout-stapel .kat-leiste { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .layout-kacheln .kat-leiste .kat-chip { padding: 14px 8px; font-size: .78rem; }

    .layout-schmal .container { max-width: 100% !important; }

    /* Liste: bei 360px blieben neben dem Bild 130px fuer den Text */
    .layout-liste .p-karte { flex-direction: column !important; }
    .layout-liste .p-bild {
        width: 100%; flex: none; aspect-ratio: 1 / 1;
        border-right: 0; border-bottom: 1px solid var(--marke-rand);
    }
    .layout-liste .p-kopf { position: static; padding: 8px 8px 0; }
    .layout-liste .p-preisleiste { min-width: 0; justify-content: space-between; }
}

/* =========================================================================
   20b. AUFBAU AUF DEN ÜBRIGEN SEITEN

   Abschnitt 20 aendert nur die Startseite - dort gibt es das
   .seiten-raster. Suche, Kategorie, Produkt, Warenkorb, Konto und
   Blog haben eigene Rahmen und blieben deshalb bei jedem Design
   gleich. Das wird hier nachgezogen.

   Betroffen sind vor allem zwei Dinge:
     1. Die Filterspalte der Suchseite - links, rechts oder oben
     2. Die Breite und die Abstaende aller Inhaltsseiten

   Die Suchseite nutzt das Bootstrap-Raster (col-xl-3 / col-xl-9),
   nicht CSS-Grid. Umsortiert wird deshalb ueber "order", und die
   Zeile bekommt dafuer display:flex - eine Bootstrap-Zeile ist
   bereits flex, das kostet also nichts.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SPALTE RECHTS
   Auf der Suchseite wandert die Filterspalte nach rechts, passend
   zur Kategoriespalte auf der Startseite.
   ------------------------------------------------------------------------- */
.layout-spalte-rechts .search-matrix-container .row > .col-xl-3 { order: 2; }
.layout-spalte-rechts .search-matrix-container .row > .col-xl-9 { order: 1; }

/* -------------------------------------------------------------------------
   OHNE SEITENSPALTE — breit, hero, kacheln, stapel

   Die Filter verschwinden nicht, sie wandern nach oben und stehen
   waagrecht. Sie ganz auszublenden waere bequem, wuerde aber die
   Suche unbrauchbar machen: Ohne Kategorie- und Attributfilter
   bleibt bei tausend Artikeln nur das Suchfeld.
   ------------------------------------------------------------------------- */
.layout-breit   .search-matrix-container .row > .col-xl-3,
.layout-hero    .search-matrix-container .row > .col-xl-3,
.layout-kacheln .search-matrix-container .row > .col-xl-3,
.layout-stapel  .search-matrix-container .row > .col-xl-3,
.layout-schmal  .search-matrix-container .row > .col-xl-3 {
    flex: 0 0 100%; max-width: 100%; width: 100%;
    margin-bottom: 22px;
}
.layout-breit   .search-matrix-container .row > .col-xl-9,
.layout-hero    .search-matrix-container .row > .col-xl-9,
.layout-kacheln .search-matrix-container .row > .col-xl-9,
.layout-stapel  .search-matrix-container .row > .col-xl-9,
.layout-schmal  .search-matrix-container .row > .col-xl-9 {
    flex: 0 0 100%; max-width: 100%; width: 100%;
}

/* Waagrecht heisst: Filterlisten nebeneinander statt untereinander */
.layout-breit   .search-matrix-container .saas-filter-list,
.layout-hero    .search-matrix-container .saas-filter-list,
.layout-kacheln .search-matrix-container .saas-filter-list,
.layout-stapel  .search-matrix-container .saas-filter-list,
.layout-schmal  .search-matrix-container .saas-filter-list {
    display: flex; flex-wrap: wrap; gap: 2px;
}
.layout-breit   .search-matrix-container .saas-filter-link,
.layout-hero    .search-matrix-container .saas-filter-link,
.layout-kacheln .search-matrix-container .saas-filter-link,
.layout-stapel  .search-matrix-container .saas-filter-link,
.layout-schmal  .search-matrix-container .saas-filter-link {
    border-bottom: 0 !important;
    padding: 7px 14px !important;
    border: 1px solid var(--marke-rand) !important;
    border-radius: 20px;
}
.layout-breit   .search-matrix-container .saas-sidebar-title,
.layout-hero    .search-matrix-container .saas-sidebar-title,
.layout-kacheln .search-matrix-container .saas-sidebar-title,
.layout-stapel  .search-matrix-container .saas-sidebar-title,
.layout-schmal  .search-matrix-container .saas-sidebar-title {
    margin-top: 14px !important;
    border-bottom: 0;
    padding-bottom: 4px;
}

/* -------------------------------------------------------------------------
   HERO — randlose Kopfflaeche auch auf Unterseiten
   ------------------------------------------------------------------------- */
.layout-hero .search-matrix-container,
.layout-hero .saas-page-section {
    padding-top: 26px !important;
}

/* -------------------------------------------------------------------------
   KACHELN — Filter als Kacheln, passend zur Startseite
   ------------------------------------------------------------------------- */
.layout-kacheln .search-matrix-container .saas-filter-link {
    border-radius: var(--marke-radius);
    padding: 12px 16px !important;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   SCHMAL — gilt fuer ALLE Seiten, nicht nur die Startseite
   ------------------------------------------------------------------------- */
.layout-schmal .container,
.layout-schmal .container-fluid {
    max-width: var(--seiten-breite, 1040px) !important;
}
.layout-schmal .search-matrix-container .row > .col-xl-9 .row > [class*="col-"] {
    flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important;
}

/* -------------------------------------------------------------------------
   LISTE — Produkte untereinander, auf jeder Seite

   Abschnitt 20 regelt das nur fuer die Startseite. Suchergebnisse,
   Merkliste und Kategorieseiten benutzen dieselbe Karte, also gelten
   dieselben Regeln - sie muessen nur auch dort greifen.
   ------------------------------------------------------------------------- */
.layout-liste .search-matrix-container .row > .col-xl-9 .row > [class*="col-"],
.layout-liste .saas-wishlist-grid > [class*="col-"] {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}

/* -------------------------------------------------------------------------
   STAPEL — grosse Abstaende auf allen Seiten
   ------------------------------------------------------------------------- */
.layout-stapel .search-matrix-container,
.layout-stapel .saas-page-section,
.layout-stapel .saas-product-detail-section,
.layout-stapel .container.py-5 {
    padding-top: 44px !important;
    padding-bottom: 60px !important;
}
.layout-stapel .saas-product-detail-section .row { row-gap: 40px; }

/* -------------------------------------------------------------------------
   ZEITUNG — dreispaltig nur auf der Startseite

   Auf Unterseiten waere eine dritte Spalte sinnlos: Im Warenkorb
   und in der Kasse braucht man Platz fuer die Eingaben, nicht fuer
   Themenkacheln. Dort bleibt es deshalb zweispaltig, aber mit
   derselben schmaleren Inhaltsbreite.
   ------------------------------------------------------------------------- */
.layout-zeitung .container { max-width: var(--seiten-breite, 1240px) !important; }
.layout-zeitung .search-matrix-container .row > .col-xl-3 { border-right: 1px solid var(--marke-rand); }

/* -------------------------------------------------------------------------
   RASTER — Toolbar zuerst
   Auf der Suchseite steht die Werkzeugleiste ueber den Filtern,
   damit die Ansichtsumschaltung sofort erreichbar ist.
   ------------------------------------------------------------------------- */
.layout-raster .search-matrix-container .saas-premium-toolbar { order: -1; }

/* -------------------------------------------------------------------------
   PRODUKTSEITE

   Die Detailseite hat kein Raster mit Spalten, nur Bild und Text
   nebeneinander. Hier wirkt vor allem die Breite - und bei den
   ruhigen Aufbauten ein grosszuegigerer Abstand.
   ------------------------------------------------------------------------- */
.layout-schmal .saas-product-detail-section { max-width: var(--seiten-breite, 1040px) !important; }
.layout-hero   .saas-product-detail-section,
.layout-breit  .saas-product-detail-section { max-width: var(--seiten-breite, 1320px) !important; }

/* -------------------------------------------------------------------------
   HANDY

   Wie bei Abschnitt 20: Unter 992px wird ueberall eine Spalte
   daraus. Die waagrechten Filter bleiben waagrecht - sie sind dort
   sogar praktischer als eine lange Liste.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .layout-spalte-rechts .search-matrix-container .row > .col-xl-3,
    .layout-spalte-rechts .search-matrix-container .row > .col-xl-9 { order: 0; }

    .layout-zeitung .search-matrix-container .row > .col-xl-3 { border-right: 0; }

    .layout-schmal .search-matrix-container .row > .col-xl-9 .row > [class*="col-"] {
        flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important;
    }

    .layout-stapel .search-matrix-container,
    .layout-stapel .saas-page-section,
    .layout-stapel .saas-product-detail-section,
    .layout-stapel .container.py-5 {
        padding-top: 24px !important;
        padding-bottom: 32px !important;
    }
}

@media (max-width: 575.98px) {
    .layout-schmal .search-matrix-container .row > .col-xl-9 .row > [class*="col-"] {
        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    }
}

/* =========================================================================
   20c. AUFBAU AUF ALLEN ÜBRIGEN SEITEN

   Abschnitt 20 deckt die Startseite ab, 20b die Suche und die
   Produktseite. Hier kommen die restlichen dazu:

     Warenkorb      .saas-cart-section
     Kasse          .saas-checkout-section
     Konto          .saas-account-section
     Anmelden       .saas-login-section
     Registrieren   .saas-reg-section
     Bestätigen     .saas-verify-section
     Bestellt       .saas-success-section
     Kontakt        .saas-contact-section
     Merkliste      .saas-wishlist-section
     Blog           .saas-blog-hero, .saas-blog-article
     News           .saas-journal-card
     Info / Seiten  .saas-info-section, .saas-page-section

   Alle diese Seiten sind einspaltig - es gibt dort nichts
   umzusortieren. Was der Aufbau bei ihnen aendert, ist die BREITE
   und der ABSTAND. Das klingt wenig, ist aber genau der Unterschied
   zwischen "wirkt wie derselbe Shop" und "wirkt wie eine fremde
   Seite": Wenn die Startseite 1040 Pixel breit ist und der
   Warenkorb 1520, faellt das beim Wechsel sofort auf.

   Zusammengefasst in einer Liste statt einzeln je Seite - sonst
   waeren es zwoelfmal dieselben drei Zeilen, und beim naechsten
   neuen Seitentyp wuerde man eine davon vergessen.
   ========================================================================= */

/* Sammelbegriff fuer alle Inhaltsbereiche ausserhalb der Startseite */
.saas-cart-section,
.saas-checkout-section,
.saas-account-section,
.saas-login-section,
.saas-reg-section,
.saas-verify-section,
.saas-success-section,
.saas-contact-section,
.saas-wishlist-section,
.saas-blog-article,
.saas-info-section,
.saas-page-section,
.search-matrix-container,
.saas-product-detail-section {
    /* Grundzustand: nichts erzwingen, die Seiten bringen ihre
       eigenen Abstaende mit. Die Aufbauten unten ueberschreiben. */
}

/* -------------------------------------------------------------------------
   SCHMAL — alles auf Lesebreite

   Gilt bewusst auch fuer Kasse und Konto. Formulare ueber 1500
   Pixel Breite sind schwerer auszufuellen, nicht leichter: Das Auge
   verliert die Zuordnung zwischen Beschriftung und Feld.
   ------------------------------------------------------------------------- */
.layout-schmal .saas-cart-section > .container,
.layout-schmal .saas-checkout-section > .container,
.layout-schmal .saas-account-section > .container,
.layout-schmal .saas-contact-section > .container,
.layout-schmal .saas-wishlist-section,
.layout-schmal .saas-blog-article,
.layout-schmal .saas-info-section,
.layout-schmal .saas-page-section,
.layout-schmal .saas-success-section > .container {
    max-width: var(--seiten-breite, 1040px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* -------------------------------------------------------------------------
   BREIT / HERO — volle Seitenbreite auch auf den Unterseiten
   ------------------------------------------------------------------------- */
.layout-breit .saas-cart-section > .container,
.layout-breit .saas-account-section > .container,
.layout-breit .saas-wishlist-section,
.layout-hero  .saas-cart-section > .container,
.layout-hero  .saas-account-section > .container,
.layout-hero  .saas-wishlist-section {
    max-width: var(--seiten-breite, 1320px) !important;
}

/* Die Kasse bleibt ausgenommen: Ein Bestellformular ueber die volle
   Breite eines 1920er-Bildschirms ist keine Verbesserung. */
.layout-breit .saas-checkout-section > .container,
.layout-hero  .saas-checkout-section > .container {
    max-width: var(--seiten-breite, 1240px) !important;
}

/* -------------------------------------------------------------------------
   STAPEL — grosszuegige Abstaende ueberall
   ------------------------------------------------------------------------- */
.layout-stapel .saas-cart-section,
.layout-stapel .saas-checkout-section,
.layout-stapel .saas-account-section,
.layout-stapel .saas-contact-section,
.layout-stapel .saas-wishlist-section,
.layout-stapel .saas-blog-article,
.layout-stapel .saas-info-section,
.layout-stapel .saas-success-section {
    padding-top: 44px !important;
    padding-bottom: 60px !important;
}
.layout-stapel .saas-blog-hero { padding: 40px 0 16px !important; }

/* -------------------------------------------------------------------------
   KOMPAKT / LISTE — enger, mehr auf einen Blick
   ------------------------------------------------------------------------- */
.layout-liste .saas-cart-section,
.layout-liste .saas-account-section,
.layout-liste .saas-wishlist-section,
.layout-liste .saas-info-section,
.layout-liste .saas-page-section {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
}
.layout-liste .saas-blog-card,
.layout-liste .saas-journal-card { display: flex; align-items: stretch; }
.layout-liste .saas-blog-card img,
.layout-liste .saas-journal-card img {
    width: 200px; flex: 0 0 200px; height: auto; object-fit: cover;
}

/* Merkliste folgt der Liste ebenso wie die Suchergebnisse */
.layout-liste .saas-wishlist-section .row > [class*="col-"],
.layout-liste #wishlist-container > [class*="col-"] {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}

/* -------------------------------------------------------------------------
   ZEITUNG — schmalere Inhaltsbreite, aber nicht so eng wie «schmal»
   ------------------------------------------------------------------------- */
.layout-zeitung .saas-cart-section > .container,
.layout-zeitung .saas-checkout-section > .container,
.layout-zeitung .saas-account-section > .container,
.layout-zeitung .saas-contact-section > .container,
.layout-zeitung .saas-wishlist-section,
.layout-zeitung .saas-blog-article,
.layout-zeitung .saas-info-section,
.layout-zeitung .saas-page-section {
    max-width: var(--seiten-breite, 1240px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* -------------------------------------------------------------------------
   KACHELN — Blog- und Newskarten als gleichmaessiges Raster
   ------------------------------------------------------------------------- */
.layout-kacheln .saas-blog-card,
.layout-kacheln .saas-journal-card {
    border-radius: var(--marke-radius) !important;
    height: 100%;
}

/* -------------------------------------------------------------------------
   SPALTE RECHTS — Blog mit Beitraegen links, Randspalte rechts
   Auf den Formularseiten aendert sich nichts: Dort gibt es keine
   zweite Spalte, die man tauschen koennte.
   ------------------------------------------------------------------------- */
.layout-spalte-rechts .saas-blog-article .row > [class*="col-lg-8"] { order: 1; }
.layout-spalte-rechts .saas-blog-article .row > [class*="col-lg-4"] { order: 2; }

/* -------------------------------------------------------------------------
   HANDY
   Die Breitenbegrenzungen wirken hier ohnehin nicht mehr - der
   Bildschirm ist schmaler als jeder dieser Werte. Zurueckgenommen
   werden muessen nur die grossen Abstaende und die Querkarten.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .layout-stapel .saas-cart-section,
    .layout-stapel .saas-checkout-section,
    .layout-stapel .saas-account-section,
    .layout-stapel .saas-contact-section,
    .layout-stapel .saas-wishlist-section,
    .layout-stapel .saas-blog-article,
    .layout-stapel .saas-info-section,
    .layout-stapel .saas-success-section {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    .layout-liste .saas-blog-card,
    .layout-liste .saas-journal-card { display: block; }
    .layout-liste .saas-blog-card img,
    .layout-liste .saas-journal-card img { width: 100%; flex: none; }
}

/* -------------------------------------------------------------------------
   ANMELDEN UND REGISTRIEREN

   Diese beiden sind bewusst schmal - ein Anmeldeformular ueber die
   halbe Bildschirmbreite hat niemand gern. Der Aufbau aendert hier
   deshalb nur den Abstand nach oben und unten, nicht die Breite.

   Einzige Ausnahme: «Stapel» setzt auch hier mehr Luft, damit der
   Wechsel von der Startseite nicht abrupt wirkt.
   ------------------------------------------------------------------------- */
.layout-stapel .saas-login-section,
.layout-stapel .saas-reg-section,
.layout-stapel .saas-verify-section {
    padding-top: 56px !important;
    padding-bottom: 72px !important;
}

.layout-liste .saas-login-section,
.layout-liste .saas-reg-section,
.layout-liste .saas-verify-section,
.layout-schmal .saas-login-section,
.layout-schmal .saas-reg-section,
.layout-schmal .saas-verify-section {
    padding-top: 24px !important;
    padding-bottom: 36px !important;
}

/* Die Kaesten selbst folgen den Ecken des Designs, damit sie nicht
   als einzige runden Formen im ganzen Shop stehen. */
.saas-login-section .card,
.saas-reg-section .card,
.saas-verify-section .card { border-radius: var(--marke-radius) !important; }

@media (max-width: 767.98px) {
    .layout-stapel .saas-login-section,
    .layout-stapel .saas-reg-section,
    .layout-stapel .saas-verify-section {
        padding-top: 28px !important;
        padding-bottom: 36px !important;
    }
}

/* =========================================================================
   21. FARBEN AN DIE UNTERSEITEN DURCHREICHEN

   HIER LAG DER FEHLER, WARUM PRODUKTSEITE UND WARENKORB BEI JEDEM
   DESIGN GLEICH AUSSAHEN.

   Der Weg der Farbe ist eine Kette:

       body.design-konditorei   setzt --marke-primaer
       :root                    setzt --saas-primary: var(--marke-primaer)
       product.php              benutzt var(--saas-primary)

   Das zweite Glied sitzt auf :root, also auf <html>. Dort ist
   --marke-primaer aber gar nicht gesetzt - die Designfarben haengen
   eine Ebene tiefer an <body>. :root sieht deshalb nur den
   Standardwert aus Abschnitt 1, und genau der wurde weitergereicht:
   immer dasselbe Blau, egal welches Design.

   Zusaetzlich bringt jede Unterseite ein eigenes
       :root { --saas-primary: <?= $primary_color ?>; }
   in ihrem <style> mit. Das laedt nach theme.css und gewinnt.

   Beides ist mit derselben Massnahme erledigt: Die Zuordnung
   nochmals auf <body> wiederholen. Eine Deklaration am eigenen
   Element schlaegt den geerbten Wert, und dort sind die
   Designfarben verfuegbar.
   ========================================================================= */
body {
    --saas-primary:       var(--marke-primaer) !important;
    --saas-primary-hover: var(--marke-primaer-tief) !important;
    --saas-accent:        var(--marke-akzent) !important;
    --saas-dark:          var(--marke-dunkel) !important;
    --saas-light:         var(--marke-hell) !important;
    --saas-light-bg:      var(--marke-hell) !important;
    --saas-border:        var(--marke-rand) !important;
    --saas-text:          var(--c-text) !important;
    --saas-text-main:     var(--c-text) !important;
    --saas-text-muted:    var(--c-text-leise) !important;
    --saas-gray:          var(--c-text-leise) !important;
    --saas-footer-bg:     var(--marke-dunkel) !important;
    --saas-header-bg:     #ffffff !important;
    --saas-success:       var(--marke-gruen) !important;
    --saas-danger:        var(--marke-rot) !important;
}

/* Die Ecken ebenso: Die Unterseiten setzen 12px oder 20px fest, das
   passt bei einem Design mit 2px Radius nicht zusammen. */
body .saas-cart-card,
body .saas-checkout-card,
body .saas-account-card,
body .saas-order-box,
body .saas-form-box,
body .saas-info-card,
body .saas-blog-card,
body .saas-journal-card,
body .saas-empty-box,
body .saas-product-gallery,
body .saas-thumb,
body .saas-btn-checkout,
body .saas-btn-place-order,
body .saas-btn-login-dark,
body .saas-btn-reg,
body .saas-btn-submit,
body .saas-btn-home,
body .saas-btn-read-more,
body .saas-btn-back {
    border-radius: var(--marke-radius) !important;
}

/* Preis und Hauptknopf auf der Produktseite folgen der Hausfarbe */
body .saas-price-tag,
body .saas-product-price,
body .saas-price-current { color: var(--marke-primaer) !important; }

body .saas-btn-cart,
body .saas-btn-checkout,
body .saas-btn-place-order {
    background: var(--marke-primaer) !important;
    border-color: var(--marke-primaer) !important;
    color: #fff !important;
}
body .saas-btn-cart:hover,
body .saas-btn-checkout:hover,
body .saas-btn-place-order:hover {
    background: var(--marke-hover) !important;
    border-color: var(--marke-hover) !important;
}

/* Die Kategorie-Plakette auf der Produktseite */
body .saas-cat-pill,
body .saas-category-badge {
    background: var(--marke-hell) !important;
    color: var(--marke-primaer) !important;
    border-radius: var(--marke-radius) !important;
}

/* =========================================================================
   22. BEWEGUNG AUF DEN PRODUKTKARTEN

   Drei Stufen, gewaehlt im Admin unter Layout & Schrift:

     anim-aus       gar nichts
     anim-dezent    kurze Uebergaenge beim Ueberfahren (Standard)
     anim-lebhaft   zusaetzlich ein Einblenden beim Scrollen

   ZWEI REGELN, DIE HIER GELTEN

   1. Nur transform und opacity animieren. Beides berechnet der
      Browser auf der Grafikkarte. Animiert man dagegen height,
      width oder margin, muss das ganze Seitenlayout bei jedem Bild
      neu gerechnet werden - auf einem aelteren Handy ruckelt dann
      eine Trefferliste mit 48 Karten.

   2. Alles bleibt unter 300 ms. Laenger fuehlt sich nicht
      hochwertiger an, sondern langsam: Wer durch einen Katalog
      scrollt, wartet sonst bei jeder Karte auf das Ende der
      Bewegung.
   ========================================================================= */

/* ---------- Grundzustand: nur Uebergaenge, keine Effekte ---------- */
.anim-dezent .p-karte,
.anim-lebhaft .p-karte {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}
.anim-dezent .p-karte:hover,
.anim-lebhaft .p-karte:hover { transform: translateY(-3px); }

/* Bild zoomt leicht im Rahmen */
.anim-dezent .p-bild,
.anim-lebhaft .p-bild { overflow: hidden; }
.anim-dezent .p-bild img,
.anim-lebhaft .p-bild img { transition: transform .28s ease; }
.anim-dezent .p-karte:hover .p-bild img,
.anim-lebhaft .p-karte:hover .p-bild img { transform: scale(1.05); }

/* Warenkorb-Knopf */
.anim-dezent .p-korb,
.anim-lebhaft .p-korb { transition: transform .15s ease, background .15s ease, color .15s ease; }
.anim-dezent .p-korb:hover,
.anim-lebhaft .p-korb:hover { transform: scale(1.08); }
.anim-dezent .p-korb:active,
.anim-lebhaft .p-korb:active { transform: scale(.94); }

/* Merken-Herz: kurzer Schlag beim Ueberfahren */
.anim-dezent .p-merken,
.anim-lebhaft .p-merken { transition: transform .15s ease, color .15s ease; }
.anim-dezent .p-merken:hover,
.anim-lebhaft .p-merken:hover { transform: scale(1.2); }

/* Der Name unterstreicht sich von links nach rechts, statt einfach
   die Farbe zu wechseln. */
.anim-dezent .p-name,
.anim-lebhaft .p-name {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size .25s ease, color .15s ease;
}
.anim-dezent .p-karte:hover .p-name,
.anim-lebhaft .p-karte:hover .p-name { background-size: 100% 1px; }

/* ---------- Nur lebhaft ---------- */

/* Stoerer klappt beim ersten Erscheinen kurz auf */
.anim-lebhaft .p-stoerer {
    animation: stoerer-auf .32s ease both;
}
@keyframes stoerer-auf {
    from { opacity: 0; transform: translateX(-6px) scale(.9); }
    to   { opacity: 1; transform: none; }
}

/* Preisleiste faehrt beim Ueberfahren minim hoch */
.anim-lebhaft .p-preisleiste { transition: transform .18s ease; }
.anim-lebhaft .p-karte:hover .p-preisleiste { transform: translateY(-1px); }

/* Karten blenden beim Scrollen ein. Die Klasse setzt das Skript in
   header.php - ohne Javascript bleibt alles sichtbar, das ist der
   wichtige Teil: Ein Ausblenden per CSS allein wuerde die Karten bei
   abgeschaltetem Javascript dauerhaft verstecken. */
.anim-lebhaft .p-karte.kommt-rein {
    opacity: 0;
    transform: translateY(14px);
}
.anim-lebhaft .p-karte.ist-da {
    opacity: 1;
    transform: none;
    transition: opacity .38s ease, transform .38s ease;
}

/* Der Kaufknopf pulsiert einmal, wenn die Karte erscheint - nur bei
   Artikeln mit Aktionspreis, sonst zappelt die ganze Seite. */
.anim-lebhaft .p-preisleiste.aktion .p-korb { animation: korb-puls 2.4s ease 1s 2; }
@keyframes korb-puls {
    0%, 92%, 100% { transform: scale(1); }
    95%           { transform: scale(1.12); }
}

/* ---------- Bewegung abschalten ----------

   Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat,
   bekommt gar keine Animationen. Das ist keine Nettigkeit: Fuer
   Menschen mit vestibulaerer Stoerung koennen bewegte Oberflaechen
   Schwindel und Uebelkeit ausloesen. Windows, macOS, iOS und
   Android bieten diese Einstellung alle an.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .anim-dezent *,
    .anim-lebhaft * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .anim-lebhaft .p-karte.kommt-rein { opacity: 1; transform: none; }
}

/* Auf dem Handy bleibt der Einblendeffekt, der Rest nicht: Ohne
   Maus gibt es kein Ueberfahren, und die Zoom-Regeln wuerden beim
   Antippen haengenbleiben. */
@media (hover: none) {
    .anim-dezent .p-karte:hover,
    .anim-lebhaft .p-karte:hover { transform: none; }
    .anim-dezent .p-karte:hover .p-bild img,
    .anim-lebhaft .p-karte:hover .p-bild img { transform: none; }
    .anim-dezent .p-karte:hover .p-name,
    .anim-lebhaft .p-karte:hover .p-name { background-size: 0 1px; }
}

/* Gruppentitel in der Filterspalte: trennt «Grösse» von «Farbe»,
   wenn beide ihre Werte darunter auflisten. */
.filter-gruppe {
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--c-text-leise);
    padding: 14px 4px 4px;
    list-style: none;
}
.filter-gruppe:first-child { padding-top: 0; }
.saas-filter-link.filter-zuruecksetzen { color: var(--marke-primaer) !important; font-weight: 600; }

/* =========================================================================
   23. AKTIONEN DER WOCHE

   Der Streifen mit Countdown, wie ihn grosse Elektronikshops oben auf
   der Startseite haben. Die Zahlen laufen aus dem Enddatum der Aktion -
   siehe home.php.
   ========================================================================= */
.deals {
    background: var(--marke-hell);
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 20px 20px 24px;
    margin: 0 0 26px;
}
.deals-kopf {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.deals-kopf h2 {
    font-size: 1.15rem; font-weight: 800; margin: 0;
    font-family: var(--schrift-titel);
    color: var(--c-text);
}

/* Der Countdown ist der Grund, warum der Streifen wirkt: Eine Frist
   macht aus einem Preis ein Angebot. Deshalb steht er gleichwertig
   neben der Ueberschrift und nicht klein darunter. */
.countdown { display: flex; align-items: center; gap: 3px; }
.cd-teil {
    display: flex; flex-direction: column; align-items: center;
    background: var(--marke-dunkel); color: #fff;
    border-radius: var(--marke-radius-klein, 3px);
    padding: 5px 9px; min-width: 46px;
}
.cd-teil b {
    font-size: 1.05rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;   /* Ziffern springen sonst */
}
.cd-teil i { font-style: normal; font-size: .58rem; opacity: .75; margin-top: 2px; text-transform: uppercase; }
.cd-punkt { font-weight: 800; color: var(--marke-dunkel); opacity: .5; }

/* Waagrechte Spur wie bei den uebrigen Reihen */
.deals-spur {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
}
.deals-spur > * { scroll-snap-align: start; }

/* Artikelanzahl auf der Kategoriekachel */
.tk-zahl {
    display: inline-block; margin-top: 5px;
    font-size: .68rem; font-weight: 700;
    background: rgba(255,255,255,.22); color: #fff;
    padding: 1px 8px; border-radius: 20px;
    backdrop-filter: blur(2px);
}

@media (max-width: 575.98px) {
    .deals { padding: 14px 12px 18px; }
    .deals-kopf h2 { font-size: 1rem; }
    .cd-teil { min-width: 38px; padding: 4px 6px; }
    .cd-teil b { font-size: .9rem; }
    .deals-spur { grid-auto-columns: minmax(150px, 1fr); }
}

/* =========================================================================
   24. STERNE

   Auf der Karte unter dem Namen, auf der Produktseite neben dem Titel.
   Die Farbe ist bewusst nicht die Hausfarbe: Sterne sind ueberall gelb,
   und was ueberall gleich aussieht, versteht man ohne hinzusehen.
   ========================================================================= */
.sterne {
    display: inline-flex; align-items: center; gap: 1px;
    color: #F5A623; font-size: .78rem; line-height: 1;
    margin: 4px 0 0;
}
.sterne b {
    color: var(--c-text-leise); font-weight: 500;
    font-size: .72rem; margin-left: 5px;
}
.p-karte .sterne { padding: 0 12px; }

/* Auf der Produktseite groesser - dort ist Platz und dort wird
   entschieden. */
.saas-detail-info .sterne { font-size: 1rem; margin: 0 0 14px; }
.saas-detail-info .sterne b { font-size: .82rem; }

/* =========================================================================
   25. MARKEN UND KUNDENSTIMMEN
   ========================================================================= */
.vitrine-titel {
    font-family: var(--schrift-titel);
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 16px; padding-bottom: 9px;
    border-bottom: 2px solid var(--marke-rand);
    color: var(--c-text);
}

/* ---------- Markenleiste ---------- */
.marken { margin: 0 0 34px; }
.marken-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.marke {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 18px 16px; min-height: 84px;
    text-decoration: none;
}

/* Logos in Graustufen, erst beim Ueberfahren farbig.

   Nicht Geschmack, sondern Notwendigkeit: Zwoelf Markenlogos in
   ihren Originalfarben nebeneinander ergeben ein Farbchaos, das
   den Blick vom Sortiment wegzieht. Deshalb macht das praktisch
   jeder grosse Shop so. */
.marke img {
    max-width: 100%; max-height: 42px; object-fit: contain;
    filter: grayscale(100%); opacity: .62;
    transition: filter .2s, opacity .2s;
}
.marke:hover img { filter: none; opacity: 1; }

/* ---------- Kundenstimmen ---------- */
.stimmen { margin: 0 0 34px; }
.stimmen-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.stimme {
    background: #fff; border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 20px 22px; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.st-sterne { color: #F5A623; font-size: .82rem; }
.stimme blockquote {
    margin: 0; font-size: .88rem; line-height: 1.7;
    color: var(--c-text);
    /* Kein Kursiv: Laengere kursive Absaetze lesen sich schlechter,
       und die Anfuehrungszeichen markieren das Zitat schon. */
}
.stimme blockquote::before { content: '\201E'; }
.stimme blockquote::after  { content: '\201C'; }
.stimme figcaption {
    margin-top: auto; padding-top: 8px;
    border-top: 1px solid var(--marke-rand);
    font-size: .78rem;
}
.stimme figcaption b { display: block; color: var(--c-text); }
.stimme figcaption span { color: var(--c-text-leise); font-size: .74rem; }

@media (max-width: 575.98px) {
    .marken-raster { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .marke { min-height: 66px; padding: 12px; }
    .marke img { max-height: 32px; }
}

/* =========================================================================
   26. KATEGORIEBAUM IN DER SEITENSPALTE

   Unterkategorien klappen unter ihrer Oberkategorie auf. Offen ist nur
   der Zweig, in dem man gerade steht - alles offen macht die Spalte bei
   zwanzig Kategorien unbrauchbar lang.
   ========================================================================= */
.kat-baum, .kat-unter { list-style: none; margin: 0; padding: 0; }

.kat-ast > .kat-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 2px;
    color: var(--c-text); text-decoration: none;
    font-size: .86rem; line-height: 1.35;
    border-bottom: 1px solid var(--marke-rand);
}
.kat-ast > .kat-link:hover { color: var(--marke-primaer); }
.kat-ast > .kat-link.aktiv { color: var(--marke-primaer); font-weight: 700; }

/* Die Zahl steht rechts und ist bewusst leise: Sie hilft beim
   Einschaetzen, soll aber nicht mit dem Namen konkurrieren. */
.kat-zahl {
    font-size: .68rem; color: var(--c-text-leise);
    background: var(--marke-hell); border-radius: 20px;
    padding: 1px 8px; flex: 0 0 auto;
}

/* Unterkategorien: eingerueckt, kleiner, mit Linie als Fuehrung */
.kat-unter {
    display: none;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--marke-rand);
}
.kat-ast.offen > .kat-unter { display: block; }

.kat-unter .kat-link {
    font-size: .8rem;
    padding: 6px 2px;
    border-bottom: 0;
    color: var(--c-text-leise);
}
.kat-unter .kat-link:hover,
.kat-unter .kat-link.aktiv { color: var(--marke-primaer); }

/* Auf dem Handy laeuft die Spalte als waagrechte Leiste - dort waere
   ein aufklappbarer Baum unbedienbar. Dann nur die Hauptkategorien. */
@media (max-width: 991.98px) {
    .kat-unter { display: none !important; }
    .kat-ast > .kat-link { border-bottom: 0; }
}

/* =========================================================================
   27. KATEGORIEBAUM IN FILTERSPALTE UND HANDY-MENUE

   Derselbe Baum wie in der Seitenspalte, aber in zwei anderen Umgebungen.
   Beide brauchen eigene Regeln, weil sie andere Grundklassen mitbringen.
   ========================================================================= */

/* ---------- Filterspalte der Suche ---------- */
.f-unter {
    display: none;
    list-style: none;
    margin: 0 0 0 12px;
    padding-left: 10px;
    border-left: 2px solid var(--marke-rand);
}
.f-ast.offen > .f-unter { display: block; }

.f-unter .saas-filter-link {
    font-size: .82rem;
    padding-top: 5px; padding-bottom: 5px;
    opacity: .85;
}
.f-unter .saas-filter-link:hover,
.f-unter .saas-filter-link.active { opacity: 1; }

/* Die Zahl rechts, damit sie den Namen nicht wegdrueckt */
.f-zahl {
    float: right;
    font-size: .68rem; color: var(--c-text-leise);
    background: var(--marke-hell); border-radius: 20px;
    padding: 0 7px; margin-left: 6px;
}

/* ---------- Handy-Menue ---------- */
.mm-baum, .mm-unter { list-style: none; margin: 0; padding: 0; }

/* Das Menue setzt seine Links ueber den Elementnamen (a), nicht ueber
   eine Klasse. Deshalb hier dieselbe Darstellung nochmals - sonst
   faellt der Baum aus dem Raster der uebrigen Eintraege. */
.mm-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 0;
    color: inherit; text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.mm-link.aktiv { font-weight: 700; color: var(--marke-primaer); }

/* Im Handy-Menue bleibt alles aufgeklappt: Wer es oeffnet, sucht -
   und soll nicht erst zweimal tippen muessen, um eine
   Unterkategorie zu sehen. */
.mm-unter {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 2px solid rgba(0,0,0,.08);
}
.mm-unter .mm-link { font-size: .88rem; opacity: .8; padding: 9px 0; border-bottom: 0; }

[data-bs-theme="dark"] .mm-link { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .mm-unter { border-left-color: rgba(255,255,255,.12); }

/* =========================================================================
   28. DRITTE EBENE: PFAD UND UNTERKATEGORIEN

   Ab drei Ebenen reicht der Baum in der Spalte nicht mehr. Wer ueber
   Google direkt in einer Unter-Unterkategorie landet, sieht die Spalte
   gar nicht - der Pfad ueber der Liste beantwortet dann die Frage
   «wo bin ich».
   ========================================================================= */
.kat-pfad {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: .78rem; margin: 0 0 14px;
    color: var(--c-text-leise);
}
.kat-pfad a { color: var(--marke-primaer); text-decoration: none; }
.kat-pfad a:hover { text-decoration: underline; }
.kat-pfad span { opacity: .45; }
.kat-pfad b {
    font-weight: 600; color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}

/* ---------- Leiste der Unterkategorien ---------- */
.kind-leiste {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 18px;
}
.kind-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff;
    border: 1px solid var(--marke-rand);
    border-radius: var(--marke-radius);
    padding: 8px 14px;
    font-size: .84rem; font-weight: 600;
    color: var(--c-text); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.kind-chip:hover { border-color: var(--marke-primaer); color: var(--marke-primaer); }

/* Die Zahl zaehlt die Artikel samt tieferer Ebenen mit - anders als in
   der Spalte links, wo die eigene Zahl steht. Hier ist es die richtige
   Angabe: Ein Klick fuehrt genau zu dieser Menge. */
.kind-chip span {
    font-size: .7rem; font-weight: 500;
    color: var(--c-text-leise);
    background: var(--marke-hell);
    border-radius: 20px; padding: 1px 8px;
}

/* Dritte Ebene in der Spalte etwas zurueckgenommen, damit die
   Verschachtelung ohne Zaehlen erkennbar bleibt. */
.kat-unter .kat-unter .kat-link,
.f-unter .f-unter .saas-filter-link { font-size: .76rem; opacity: .8; }

@media (max-width: 575.98px) {
    .kat-pfad { font-size: .72rem; gap: 5px; }
    .kat-pfad b { max-width: 150px; }
    .kind-chip { padding: 7px 11px; font-size: .78rem; }
}

/* =========================================================================
   29. SPALTENSTILE MIT UNTERKATEGORIEN

   Die neun Stile aus dem Baukasten wurden fuer eine FLACHE Liste
   gebaut. Ihre Regeln greifen auf .kat-link - und damit seit den
   Unterkategorien auch auf die verschachtelten Eintraege.

   Bei den meisten faellt das kaum auf. Bei dreien schon:

     nummern   Der Pfeil erschien auf jeder Ebene, auch dort, wo es
               nicht weitergeht.
     versal    Versalien mit weiter Sperrung sind auf der dritten
               Ebene bei 11 Pixeln nicht mehr lesbar.
     gross     14 Pixel Innenabstand je Eintrag ergeben bei drei
               Ebenen eine Spalte, die laenger ist als die Seite.

   Grundsatz hier: Jede Ebene wird eine Spur ruhiger. Die erste traegt
   den Stil, die tieferen ordnen sich unter - sonst konkurrieren drei
   Ebenen um dieselbe Aufmerksamkeit.
   ========================================================================= */

/* ---------- Kasten: Unterliste ohne eigenen Rahmen ---------- */
.spalte-stil-kasten .kat-unter {
    border-left-color: rgba(0, 0, 0, .08);
    margin-left: 6px;
    padding-left: 10px;
}
.spalte-stil-kasten .kat-unter .kat-link { border-bottom: 0 !important; }

/* ---------- Pillen: tiefere Pillen kleiner ---------- */
.spalte-stil-pillen .kat-unter .kat-link {
    padding: 6px 12px !important;
    font-size: .8rem !important;
}
.spalte-stil-pillen .kat-unter .kat-unter .kat-link {
    padding: 5px 11px !important;
    font-size: .76rem !important;
}
/* Die Fuehrungslinie stoert neben runden Pillen - sie laeuft an der
   Rundung vorbei und wirkt wie ein Zeichenfehler. */
.spalte-stil-pillen .kat-unter { border-left: 0; padding-left: 14px; }

/* ---------- Balken: Fuehrungslinie statt zweiter Balken ---------- */
.spalte-stil-balken .kat-unter { border-left-width: 1px; }
.spalte-stil-balken .kat-unter .kat-link {
    border-left: 0 !important;
    padding-left: 10px !important;
}

/* ---------- Nummern: Pfeil nur, wo es weitergeht ----------
   Vorher stand er hinter jedem Eintrag, auch hinter solchen ohne
   Unterkategorien. Ein Pfeil, der nirgends hinfuehrt, ist ein
   Versprechen, das die Seite nicht haelt. */
.spalte-stil-nummern .kat-link::after { content: none; }
.spalte-stil-nummern .kat-ast.hat-kinder > .kat-link::after {
    content: "\203A";
    color: var(--c-text-leise);
    font-size: 1.1rem; line-height: 1;
}

/* ---------- Versal: nur die erste Ebene ----------
   Versalien mit Sperrung brauchen Groesse. Auf der dritten Ebene bei
   kleiner Schrift werden sie zu einer Buchstabenreihe, die man
   entziffert statt liest. */
.spalte-stil-versal .kat-unter .kat-link {
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem !important;
}
.spalte-stil-versal .kat-unter .kat-unter .kat-link { font-size: .78rem !important; }

/* ---------- Gross: tiefere Ebenen normal ---------- */
.spalte-stil-gross .kat-unter .kat-link { padding: 9px 4px !important; font-size: .88rem !important; }
.spalte-stil-gross .kat-unter .kat-unter .kat-link { padding: 7px 4px !important; font-size: .82rem !important; }

/* ---------- Kompakt: noch enger, aber mit Grenze ----------
   Unter 5 Pixel wird die Trefferflaeche zu klein - auf dem Handy
   trifft man dann den Nachbarn. */
.spalte-stil-kompakt .kat-unter .kat-link { padding: 5px 4px !important; font-size: .75rem !important; }

/* ---------- Dunkel: Linien und Zahlen anpassen ---------- */
.spalte-stil-dunkel .kat-unter { border-left-color: rgba(255, 255, 255, .18); }
.spalte-stil-dunkel .kat-unter .kat-link { color: rgba(255, 255, 255, .72); }
.spalte-stil-dunkel .kat-unter .kat-link:hover,
.spalte-stil-dunkel .kat-unter .kat-link.aktiv { color: #fff; }
.spalte-stil-dunkel .kat-zahl {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
}

/* ---------- Ohne Linien: auch die Fuehrungslinie weg ---------- */
.spalte-stil-ohnelinien .kat-unter { border-left: 0; padding-left: 14px; }

/* ---------- Fuer alle: der aktive Zweig bleibt erkennbar ----------
   Wenn eine Unterkategorie gewaehlt ist, soll man die Oberkategorie
   nicht suchen muessen. Sie wird nicht farbig - das waere zweimal
   dieselbe Auszeichnung - sondern nur kraeftiger. */
.kat-ast.offen > .kat-link { font-weight: 600; }

/* =========================================================================
   30. KACHELGROESSEN

   Vier Groessen im selben Raster. Umgesetzt ueber grid-column und
   grid-row, nicht ueber feste Pixel: Die Kachel waechst dadurch mit
   der Spaltenbreite mit, statt aus dem Raster zu fallen.

   Wichtig ist die Reihenfolge der Regeln - die Handy-Ausnahme ganz
   unten hebt alles wieder auf. Auf 380 Pixel Breite gibt es keine
   zwei Spalten, ueber die sich etwas erstrecken koennte.
   ========================================================================= */
.thema-kachel.gr-breit { grid-column: span 2; }
.thema-kachel.gr-hoch  { grid-row: span 2; }
.thema-kachel.gr-gross { grid-column: span 2; grid-row: span 2; }

/* Bei «hoch» und «gross» darf das Bild nicht verzerren. Ohne diese
   Regel zieht der Browser es auf die neue Hoehe. */
.thema-kachel.gr-hoch img,
.thema-kachel.gr-gross img { height: 100%; object-fit: cover; }

/* Der Titel darf in einer grossen Kachel groesser sein - sonst wirkt
   sie leer, und die Groesse haette keinen Zweck. */
.thema-kachel.gr-gross .tk-titel { font-size: 1.35rem; }
.thema-kachel.gr-breit .tk-titel { font-size: 1.15rem; }

/* Das Raster muss Luecken selbst fuellen duerfen, sonst reisst eine
   hohe Kachel ein Loch in die Reihe daneben. */
.thema-grid { grid-auto-flow: dense; }

@media (max-width: 767.98px) {
    /* Auf dem Handy alle gleich gross. Eine Kachel ueber zwei von zwei
       Spalten ist keine Gestaltung mehr, sondern nur ein Balken. */
    .thema-kachel.gr-breit,
    .thema-kachel.gr-hoch,
    .thema-kachel.gr-gross { grid-column: auto; grid-row: auto; }
    .thema-kachel.gr-gross .tk-titel,
    .thema-kachel.gr-breit .tk-titel { font-size: 1rem; }
}

/* =========================================================================
   31. FEHLENDE BILDER

   Eine Karte ohne Bild ist keine kaputte Karte - sie soll nur zeigen,
   dass hier nichts hinterlegt ist. Vorher blieb die Flaeche leer, und
   der ganze Shop sah aus, als wuerde er nicht laden.
   ========================================================================= */
.p-bild.ohne-bild {
    background: var(--marke-hell);
    position: relative;
}
.p-bild.ohne-bild::after {
    content: "Kein Bild";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--c-text-leise);
    letter-spacing: .04em;
}

/* Markenlogo, dessen Datei fehlt: dieselbe Behandlung. Ein leerer
   weisser Kasten in der Markenleiste sieht aus wie ein Ladefehler. */
.marke.ohne-bild::after {
    content: "Logo fehlt";
    font-size: .68rem; color: var(--c-text-leise);
}
/* Marke ohne Logodatei: Name statt leerem Kasten */
.marke-ersatz {
    font-size: .76rem; font-weight: 700;
    color: var(--c-text-leise); text-align: center;
    letter-spacing: .03em;
}

/* =========================================================================
   LOGO: Schrift und Farbe aus dem Admin

   Die Variablen werden nur gesetzt, wenn im Admin etwas gewaehlt wurde.
   Der Rueckfall in var() ist deshalb der Normalfall, nicht die Ausnahme:
   ohne Wahl erbt das Logo Schrift und Farbe der Kopfzeile.
   ========================================================================= */
.sg-logo span,
.main-header .navbar-brand span {
    font-family: var(--logo-schrift, var(--schrift-titel));
    color: var(--logo-farbe, inherit);
}

/* =========================================================================
   32. MODERNE KARTENSTILE MIT BEWEGUNG

   Sechs Stile, die staerker auf Animation setzen. Drei Regeln gelten
   fuer alle sechs:

   1. Bewegt werden nur transform und opacity. Alles andere - Hoehe,
      Rand, Schatten als Eigenschaft - zwingt den Browser zum
      Neuberechnen des Layouts und ruckelt sichtbar.
   2. Uebergaenge dauern 0.22 bis 0.28s. Was laenger dauert, stoert,
      sobald man zwanzig Karten ueberfaehrt.

      Eine Ausnahme: Der Glanzstreifen laeuft 0.55s. Er ist eine
      einmalige Bewegung ueber die ganze Bildbreite, keine Reaktion
      auf das Ueberfahren - bei 0.25s waere er ein Zucken statt eines
      Streifens. Ihn kuerzer zu machen hiesse, ihn wegzulassen.
   3. Am Ende dieses Abschnitts steht EIN Block, der bei
      «prefers-reduced-motion» alle sechs stilllegt.
   ========================================================================= */

/* ---------- Anheben ---------- */
.karten-stil-heben .p-karte {
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
}
.karten-stil-heben .p-karte:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.22);
}

/* ---------- Aufdecken ---------- */
.karten-stil-aufdecken .p-bild { position: relative; overflow: hidden; }
.karten-stil-aufdecken .p-aktionen,
.karten-stil-aufdecken .p-korb-schwebend {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: center; gap: 8px;
    padding: 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.45));
    transform: translateY(100%);
    opacity: 0;
    transition: transform .24s ease, opacity .24s ease;
}
.karten-stil-aufdecken .p-karte:hover .p-aktionen,
.karten-stil-aufdecken .p-karte:hover .p-korb-schwebend {
    transform: translateY(0);
    opacity: 1;
}

/* Ohne Zeigegeraet dauerhaft sichtbar. Auf einem Handy gibt es kein
   «Ueberfahren» - dort waeren die Knoepfe sonst unerreichbar. */
@media (hover: none) {
    .karten-stil-aufdecken .p-aktionen,
    .karten-stil-aufdecken .p-korb-schwebend { transform: none; opacity: 1; }
}

/* ---------- Zweites Bild ----------
   Das zweite Bild liegt darunter und wird durch Ausblenden des
   ersten sichtbar. Kein Nachladen: Beide sind schon da, sonst
   entstuende beim Ueberfahren eine Wartezeit.

   HIER FEHLTE DIE WICHTIGSTE REGEL.

   Die Karte gibt das zweite Bild IMMER aus - aber sichtbar machen
   darf es nur dieser Kartenstil. Ohne die Grundregel unten stand es
   in allen anderen Stilen als ganz normales Bild neben dem ersten:
   zwei Fotos in einer Karte.

   Aufgefallen ist es erst im fertigen Shop. Der Grund: Ich habe die
   Sichtbarkeit im Stil geregelt, statt sie zuerst grundsaetzlich
   abzuschalten. */
.p-bild-zwei { display: none; }
.karten-stil-zweitbild .p-bild-zwei { display: block; }

.karten-stil-zweitbild .p-bild { position: relative; }
.karten-stil-zweitbild .p-bild img { transition: opacity .28s ease; }
.karten-stil-zweitbild .p-bild .p-bild-zwei {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
}
.karten-stil-zweitbild .p-karte:hover .p-bild-zwei { opacity: 1; }
.karten-stil-zweitbild .p-karte { transition: transform .22s ease; }
.karten-stil-zweitbild .p-karte:hover { transform: translateY(-4px); }

/* ---------- Rahmen laeuft ----------
   Zwei Pseudoelemente statt eines Rahmens: Ein animierter border
   wuerde die Kartengroesse aendern und die Nachbarn verschieben. */
.karten-stil-rahmenlauf .p-karte { position: relative; }
.karten-stil-rahmenlauf .p-karte::before,
.karten-stil-rahmenlauf .p-karte::after {
    content: "";
    position: absolute; left: 0; right: 0;
    height: 2px;
    background: var(--marke-akzent);
    transform: scaleX(0);
    transition: transform .26s ease;
}
.karten-stil-rahmenlauf .p-karte::before { top: 0; transform-origin: left; }
.karten-stil-rahmenlauf .p-karte::after  { bottom: 0; transform-origin: right; }
.karten-stil-rahmenlauf .p-karte:hover::before,
.karten-stil-rahmenlauf .p-karte:hover::after { transform: scaleX(1); }

/* ---------- Kippen ---------- */
.karten-stil-kippen .p-karte {
    transition: transform .25s ease, box-shadow .25s ease;
    transform-style: preserve-3d;
}
.karten-stil-kippen .p-karte:hover {
    transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-4px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.3);
}

/* ---------- Glanz ----------
   Der Streifen laeuft EINMAL beim Ueberfahren durch, nicht in
   Dauerschleife. Eine Endlosanimation auf zwanzig Karten zieht
   Aufmerksamkeit vom Sortiment ab und kostet Akku. */
.karten-stil-glanz .p-bild { position: relative; overflow: hidden; }
.karten-stil-glanz .p-bild::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 45%;
    background: linear-gradient(100deg,
        transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.karten-stil-glanz .p-karte:hover .p-bild::after {
    animation: glanz-lauf .55s ease forwards;
}
@keyframes glanz-lauf {
    0%   { left: -60%; opacity: 0; }
    15%  { opacity: 1; }
    100% { left: 115%; opacity: 0; }
}
.karten-stil-glanz .p-karte { transition: transform .22s ease; }
.karten-stil-glanz .p-karte:hover { transform: translateY(-4px); }

/* =========================================================================
   Weniger Bewegung: alle sechs stilllegen

   Nicht Feinheit, sondern Notwendigkeit: Fuer Menschen mit
   vestibulaeren Beschwerden koennen bewegte Flaechen Uebelkeit
   ausloesen. Wer das im Betriebssystem eingestellt hat, bekommt die
   Karten ohne Animation - Knoepfe bleiben dabei sichtbar und
   bedienbar.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .karten-stil-heben .p-karte,
    .karten-stil-zweitbild .p-karte,
    .karten-stil-kippen .p-karte,
    .karten-stil-glanz .p-karte {
        transition: none !important;
        transform: none !important;
    }
    .karten-stil-heben .p-karte:hover,
    .karten-stil-zweitbild .p-karte:hover,
    .karten-stil-kippen .p-karte:hover,
    .karten-stil-glanz .p-karte:hover { transform: none !important; }

    .karten-stil-aufdecken .p-aktionen,
    .karten-stil-aufdecken .p-korb-schwebend {
        transform: none !important; opacity: 1 !important; transition: none !important;
    }
    .karten-stil-rahmenlauf .p-karte::before,
    .karten-stil-rahmenlauf .p-karte::after { transition: none !important; transform: scaleX(1); }
    .karten-stil-glanz .p-karte:hover .p-bild::after { animation: none !important; }
    .karten-stil-zweitbild .p-bild img { transition: none !important; }
}

/* =========================================================================
   33. PRODUKTREIHE ALS RASTER

   Alternative zur waagrechten Spur, einstellbar je Reihe im Admin.
   Die Pfeile werden dabei ausgeblendet - sie haetten nichts zu tun,
   und ein Knopf ohne Wirkung ist schlimmer als keiner.
   ========================================================================= */
.reihe-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
/* Beim Raster gibt es nichts zu blaettern - die Pfeile werden
   ausgeblendet. Der richtige Klassenname ist «reihe-pfeil»; mein
   erster Versuch hiess «spur-pfeil» und griff ins Leere. Solche
   Regeln fallen nicht auf, weil nichts kaputtgeht - es passiert
   nur nichts. */
/* Klasse am Abschnitt statt :has(): Das koennen erst neuere Browser,
   und auf einem aelteren staenden Pfeile ohne Wirkung da. Der Server
   weiss die Darstellung ohnehin - also setzt er die Klasse. */
.reihe.raster-modus .reihe-pfeil { display: none !important; }

@media (max-width: 575.98px) {
    .reihe-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* =========================================================================
   ANSCHLUSS AN DIE WEBSEITE

   Ziel: Wer von ibo-beck.ch in den Shop wechselt, soll den Uebergang
   nicht bemerken. Deshalb dieselbe Farbwelt, derselbe Kopfaufbau
   (Logo links, Menue rechts) und dieselbe Fusszeile.
   ========================================================================= */

body { background: #FBF7F1; }

/* ---------- Kopf ----------
   Dunkles Band mit Goldlinie darunter - wie auf der Webseite. */
.main-header {
    background: var(--marke-dunkel) !important;
    border-bottom: 3px solid var(--marke-akzent) !important;
}
.main-header .navbar-brand span,
.main-header .kopf-nav a,
.main-header .kopf-knopf { color: #F5EFE6 !important; }
.main-header .kopf-nav a:hover { color: var(--marke-akzent) !important; }

/* Der Shop-Punkt ist der aktive - er bekommt die Goldlinie, wie das
   aktive Menue auf der Webseite. */
.kopf-nav .nav-shop {
    color: var(--marke-akzent) !important;
    border-bottom: 2px solid var(--marke-akzent);
}

/* Trennstrich zwischen Webseiten- und Shop-Punkten. Ohne ihn liest
   sich das Menue als eine einzige Liste, obwohl die vier ersten auf
   eine andere Seite fuehren. */
.nav-trenner {
    display: inline-block;
    width: 1px; height: 16px;
    background: rgba(245,239,230,.28);
    margin: 0 6px;
    vertical-align: middle;
}

/* ---------- Ueberschriften ----------
   Serifenschrift wie auf der Webseite. Sie ist der auffaelligste
   einzelne Unterschied zu einem Standardshop - eine Baeckerei mit
   Tradition schreibt nicht in derselben Schrift wie ein
   Elektronikversand. */
.reihe-kopf h2, .vitrine-titel, h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -.01em;
}

/* ---------- Karten ---------- */
.p-karte {
    background: #fff;
    border: 1px solid var(--marke-rand) !important;
    border-radius: 4px;
}
.p-karte:hover { border-color: var(--marke-akzent) !important; }
.p-marke { color: #9A8B76 !important; }

/* Kaufknopf in Gold mit dunkler Schrift. Gold traegt keine weisse
   Schrift - der Kontrast reicht nicht. */
.p-korb, .saas-btn-cart {
    background: var(--marke-akzent) !important;
    border-color: var(--marke-akzent) !important;
    color: var(--marke-akzent-text) !important;
    font-weight: 700 !important;
}
.p-korb:hover, .saas-btn-cart:hover { background: #B08E1E !important; }

/* ---------- Fusszeile ---------- */
.saas-footer { background: var(--marke-dunkel) !important; color: #B8AA96; }
.saas-footer a { color: #CFC2AC; }
.saas-footer a:hover { color: var(--marke-akzent); }
.saas-footer h5, .saas-footer h6, .saas-footer strong { color: #F5EFE6; }

@media (max-width: 991.98px) {
    /* Auf dem Handy nur die Shop-Punkte: Vier Webseiten-Links plus
       Shop-Menue passen nicht in eine Zeile, und das Schubladenmenue
       hat die Webseiten-Links ohnehin nicht. */
    .kopf-nav a[href^="http"], .nav-trenner { display: none; }
}

/* =========================================================================
   KOPF WIE AUF IBO-BECK.CH

   Die alte Shop-Kopfzeile wird ausgeblendet, aber NICHT entfernt: Sie
   traegt das Schubladenmenue fuer das Handy und die Suchvorschlaege.
   Loeschen haette an mehreren Stellen Folgefehler ergeben.
   ========================================================================= */
.main-header { display: none !important; }

/* Das Braun bleibt als Grundfarbe stehen, auch wenn eine Grafik
   gesetzt ist: Waehrend das Bild laedt - und falls es fehlt - ist der
   Kopf sonst weiss, und weisse Schrift darauf unsichtbar. */
.web-band {
    background-color: #3B2A1B;
    background-repeat: repeat-x;      /* Kachelt waagrecht bei breiten Bildschirmen */
    background-position: center;
    background-size: auto 100%;       /* Hoehe fuellen, Breite laufen lassen */
}
.web-innen {
    max-width: 1320px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: stretch; justify-content: space-between; gap: 20px;
}

/* ---------- Logo ----------
   Auf der Webseite sitzt es in einem Goldrahmen und ragt ueber das
   Band hinaus. Das negative margin-bottom bildet das nach, ohne die
   Bandhoehe zu vergroessern. */
.web-logo {
    display: flex; align-items: center;
    padding: 8px 0;
    text-decoration: none;
}
.web-logo img {
    max-height: 78px; width: auto; display: block;
    border: 2px solid #C8A24A;
    border-radius: 3px;
}
.web-logo-ersatz {
    display: inline-block;
    border: 2px solid #C8A24A; border-radius: 3px;
    padding: 10px 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem; font-weight: 700; color: #C8A24A;
    background: #241810;
}

/* ---------- Menue ----------
   Rechts im Band, Versalien, klein gesetzt. Der aktive Punkt
   bekommt einen hellen Block - nicht nur eine andere Schriftfarbe.
   Auf einem dunklen Band ist ein Farbwechsel allein zu leise. */
.web-nav { display: flex; align-items: stretch; }
.web-nav a {
    display: flex; align-items: center;
    padding: 0 18px;
    color: #E8DCC8; text-decoration: none;
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.web-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.web-nav a.aktiv { background: #E8A33D; color: #3B2A1B; }

/* ---------- Shopleiste ----------
   Alles, was ein Shop braucht und eine Baeckereiseite nicht.
   Getrennt vom Band, damit dieses seinen Wiedererkennungswert
   behaelt. */
.web-shopleiste {
    background: #FDF8F3;
    border-bottom: 1px solid var(--marke-rand);
}
.web-shopleiste .web-innen { align-items: center; min-height: 54px; }

/* Rueckweg zur Hauptseite. Steht links vor der Suche, weil das
   Zurueck auf Deutsch links liegt - dieselbe Richtung wie der Pfeil
   im Browser. */
.web-zurueck {
    display: inline-flex; align-items: center; gap: 7px;
    color: #6B5A48; text-decoration: none;
    font-size: .8rem; font-weight: 600;
    padding-right: 18px; margin-right: 4px;
    border-right: 1px solid var(--marke-rand);
    white-space: nowrap;
}
.web-zurueck:hover { color: var(--marke-akzent); }

.web-suche { display: flex; flex: 1; max-width: 460px; margin: 0; }
.web-suche input {
    flex: 1; min-width: 0;
    border: 1px solid var(--marke-rand); border-right: 0;
    border-radius: 3px 0 0 3px;
    padding: 8px 14px; font-size: .88rem;
    background: #fff;
}
.web-suche input:focus { outline: 0; border-color: var(--marke-akzent); }
.web-suche button {
    border: 0; background: var(--marke-akzent); color: #3B2A1B;
    border-radius: 0 3px 3px 0; padding: 0 18px; cursor: pointer;
}
.web-suche button:hover { background: #B08E1E; }

.web-symbole { display: flex; align-items: center; gap: 18px; }
.web-symbole a { color: #6B5A48; font-size: 1.1rem; text-decoration: none; position: relative; }
.web-symbole a:hover { color: var(--marke-akzent); }
.web-korb span {
    position: absolute; top: -6px; right: -9px;
    background: var(--marke-akzent); color: #3B2A1B;
    border-radius: 999px; font-size: .6rem; font-weight: 800;
    padding: 1px 5px; min-width: 16px; text-align: center;
}

@media (max-width: 991.98px) {
    /* Auf dem Handy wieder die Shop-Kopfzeile mit Schubladenmenue -
       fuenf Menuepunkte im Band passen dort nicht nebeneinander. */
    .main-header { display: block !important; }
    .web-band, .web-shopleiste { display: none; }
}

/* =========================================================================
   UNTERSEITEN AUF DIE DICHTE DER STARTSEITE BRINGEN

   Die Startseite kommt aus dem Rasterteil des Templates und ist dicht
   gesetzt. Produktseite, Warenkorb, Kasse, Konto und Merkliste haben
   ihre eigene Gestaltung mitgebracht - mit 60px oben, 100px unten,
   50px Innenabstand je Kasten und Ueberschriften bis 4rem.

   Auf einem Bildschirm nebeneinander wirken das wie zwei Shops. Die
   Startseite ist der Massstab: Sie sieht der Webseite aehnlicher, und
   sie ist die Seite, die jeder zuerst sieht.

   ALLE REGELN MIT !important. Die Angaben der Unterseiten stehen in
   einem <style>-Block INNERHALB der jeweiligen Datei, also nach dieser
   Datei im Dokument. Ohne !important gewinnen sie - unabhaengig davon,
   wie genau der Selektor ist.
   ========================================================================= */

/* ---------- Aussenabstaende der Abschnitte ----------
   60/100 wird zu 32/56. Das ist immer noch Luft, aber nicht mehr eine
   halbe Bildschirmhoehe, bevor der Inhalt beginnt. */
.saas-product-detail-section,
.saas-cart-section,
.saas-checkout-section,
.saas-account-section,
.saas-wishlist-section,
.saas-info-section,
.saas-page-section {
    padding-top: 32px !important;
    padding-bottom: 56px !important;
}

/* ---------- Kaesten ---------- */
.saas-cart-card, .saas-summary-card, .saas-account-card,
.saas-card, .saas-payment-option, .saas-empty-box {
    padding: 22px !important;
    border-radius: 6px !important;
}
.saas-detail-image { padding: 22px !important; }

/* ---------- Ueberschriften ----------
   4rem sind rund 64 Pixel - so gross wie fuenf Zeilen Fliesstext.
   Auf der Startseite ist die groesste Ueberschrift 1.5rem. */
.saas-cart-header h1, .saas-checkout-header h1,
.saas-account-header h1, .saas-wishlist-header h1,
.saas-section-title, .saas-summary-title {
    font-size: 1.6rem !important;
    margin-bottom: 6px !important;
}
.saas-product-title { font-size: 1.5rem !important; line-height: 1.25 !important; }
.saas-price-tag     { font-size: 1.6rem !important; }

/* ---------- Bedienelemente ----------
   Knoepfe und Felder werden schmaler, aber nicht kleiner als 40px
   Hoehe: Darunter trifft man sie auf dem Handy nicht mehr zuverlaessig. */
.saas-btn-add-cart, .saas-btn-checkout, .saas-btn-place-order,
.saas-btn-save, .saas-btn-buy {
    padding: 11px 22px !important;
    font-size: .92rem !important;
    min-height: 42px;
}
.saas-form-control, .saas-form-select, .saas-qty-input {
    padding: 9px 13px !important;
    font-size: .92rem !important;
}
.saas-form-label { font-size: .74rem !important; margin-bottom: 4px !important; }

/* ---------- Zeilen und Abstaende ---------- */
.saas-cart-item     { padding: 14px 0 !important; }
.saas-summary-row   { padding: 7px 0 !important; font-size: .9rem !important; }
.saas-history-item  { padding: 12px 0 !important; }
.saas-description-text { font-size: .92rem !important; line-height: 1.7 !important; }

/* ---------- Miniaturbilder der Galerie ----------
   80px waren fuer die alte, grosse Buehne gedacht. */
.saas-thumb-gallery img { width: 62px !important; height: 62px !important; border-radius: 6px !important; }

@media (max-width: 767.98px) {
    .saas-product-detail-section, .saas-cart-section, .saas-checkout-section,
    .saas-account-section, .saas-wishlist-section {
        padding-top: 20px !important;
        padding-bottom: 36px !important;
    }
    .saas-cart-card, .saas-summary-card, .saas-account-card, .saas-card { padding: 16px !important; }
}

/* =========================================================================
   ZONENBÜHNE

   Hintergrund steht still, nur die rechte Zone wechselt. Nachgebaut
   nach der Machart grosser Schweizer Haendler.

   Der Aufbau ist bewusst zweigeteilt: Links traegt das Motiv die
   Stimmung, rechts wechselt das Angebot. Ein gewoehnlicher Slider
   tauscht das ganze Bild - dabei springt bei jedem Wechsel alles,
   und der Blick muss sich neu orientieren.
   ========================================================================= */
.zonen-buehne {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 34%;   /* Motiv | Angebotszone */
    /* Nur Rueckfall: Die echte Hoehe kommt aus den Einstellungen und
       wird von home.php als eigener <style>-Block ausgegeben - der
       steht spaeter im Dokument und gewinnt. Diese Zeile greift nur,
       wenn die Konstanten fehlen (etwa auf einer Unterseite, die die
       Buehne einbindet). */
    min-height: 320px;
    margin: 0 0 26px;
    border-radius: var(--marke-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--marke-hell);
}

/* Der weisse Rahmen der Vorlage - er haelt beide Haelften zusammen,
   ohne sie zu trennen. */
.zb-rahmen {
    position: absolute; inset: 14px;
    border: 3px solid rgba(255,255,255,.9);
    pointer-events: none;
    z-index: 2;
}

/* ---------- Angebotszone ---------- */
.zb-zone {
    position: relative;
    grid-column: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

/* Alle Angebote liegen uebereinander; sichtbar ist immer nur eines.
   Uebereinander statt nebeneinander, damit die Zone ihre Groesse
   behaelt - sonst wuerde sie bei jedem Wechsel springen, und genau
   das soll die Zonenbuehne ja vermeiden. */
/* ---------- Übergang der Angebote ----------

   Nachgebaut nach der Vorlage, Bild fuer Bild aus der Aufnahme
   abgelesen. Drei Beobachtungen, drei Regeln:

   1. Das AUSGEHENDE Angebot zieht leicht nach rechts weg und wird
      dabei weichgezeichnet - es verschwindet nicht einfach.
   2. Das EINGEHENDE kommt von links und wird scharf.
   3. Die Bestandteile erscheinen NACHEINANDER, nicht gemeinsam:
      erst die Rabattmarke, dann das Bild, dann Name und Preis.
      Das ist der Unterschied, der teuer aussieht - eine
      gemeinsame Blende wirkt flach.

   Bewegt werden nur transform, opacity und filter. Alles andere
   wuerde das Layout neu berechnen lassen und ruckeln. */
.zb-angebot {
    position: absolute; inset: 24px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    text-decoration: none; text-align: center;

    opacity: 0; visibility: hidden;
    transform: translateX(26px) scale(.985);
    filter: blur(7px);
    transition: opacity .42s ease, transform .52s cubic-bezier(.22,.61,.36,1), filter .42s ease;
}
.zb-angebot.an {
    opacity: 1; visibility: visible;
    transform: none;
    filter: none;
}

/* Der Reihe nach: Marke, Bild, Name, Preis, Altpreis.
   70 Millisekunden Abstand - genug, um die Staffelung zu sehen,
   zu wenig, um auf das letzte Teil zu warten. */
.zb-angebot.an > * {
    animation: zb-auf .46s cubic-bezier(.22,.61,.36,1) both;
}
.zb-angebot.an > *:nth-child(1) { animation-delay: .05s; }
.zb-angebot.an > *:nth-child(2) { animation-delay: .12s; }
.zb-angebot.an > *:nth-child(3) { animation-delay: .19s; }
.zb-angebot.an > *:nth-child(4) { animation-delay: .26s; }
.zb-angebot.an > *:nth-child(5) { animation-delay: .33s; }

@keyframes zb-auf {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.zb-angebot img {
    max-width: 78%; max-height: 58%;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.18));
}
.zb-angebot b {
    font-size: 1.05rem; font-weight: 700; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.zb-angebot span {
    font-size: .84rem; color: rgba(255,255,255,.9);
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* ---------- Pausetaste ----------
   Sie ist der Grund, warum Selbstlauf hier vertretbar ist. Sichtbar
   wird sie beim Ueberfahren; auf Geraeten ohne Zeiger bleibt sie
   dauerhaft da, sonst waere sie unerreichbar. */
.zb-pause {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(0,0,0,.35); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer;
    opacity: 0; transition: opacity .2s ease, background .2s ease;
    z-index: 4;
}
.zonen-buehne:hover .zb-pause { opacity: 1; }
.zb-pause:hover { background: rgba(0,0,0,.55); }
.zb-pause.aus { opacity: 1; }
@media (hover: none) { .zb-pause { opacity: 1; } }

/* ---------- Punkte ---------- */
.zb-punkte {
    position: absolute; bottom: 16px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 7px;
    z-index: 4;
}
.zb-punkte button {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
}
.zb-punkte button.an { background: #fff; width: 22px; border-radius: 20px; }

@media (max-width: 767.98px) {
    /* Auf dem Handy untereinander: 34% Breite waeren dort rund
       130 Pixel - zu wenig fuer ein Produktbild mit Text. */
    .zonen-buehne { grid-template-columns: 1fr; min-height: 380px; }
    .zb-zone { grid-column: 1; grid-row: 2; min-height: 170px; }
    .zb-angebot { inset: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Alles ohne Bewegung, aber vollstaendig sichtbar. Nicht nur die
       Uebergaenge abschalten - auch die gestaffelte Einblendung, sonst
       bleiben Teile auf opacity 0 stehen und das Angebot ist halb
       unsichtbar. */
    .zb-angebot { transition: none !important; filter: none !important; transform: none !important; }
    .zb-angebot.an > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* ---------- Zone: Rabattmarke, Preis, Altpreis ---------- */
.zb-marke {
    position: absolute; top: 0; right: 0;
    background: var(--marke-rot); color: #fff;
    font-size: .82rem; font-weight: 800;
    padding: 4px 12px; border-radius: 3px;
    letter-spacing: .01em;
}
.zb-preis {
    font-size: 1.5rem; font-weight: 800; color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
    line-height: 1.1;
}
/* Der Altpreis ist durchgestrichen und kleiner - er soll den neuen
   Preis stuetzen, nicht mit ihm konkurrieren. */
.zb-alt {
    font-size: .84rem; color: rgba(255,255,255,.75);
    text-decoration: line-through;
    text-decoration-color: var(--marke-rot);
    text-decoration-thickness: 2px;
}
@media (max-width: 767.98px) {
    .zb-preis { font-size: 1.25rem; }
    .zb-marke { font-size: .74rem; padding: 3px 9px; }
}
/* ---------- Text auf der linken Seite ----------
   Er sitzt im Motivbereich, nicht in der Zone. Ein dunkler Verlauf
   von links sorgt dafuer, dass helle Schrift auf jedem Bild lesbar
   bleibt - ohne das Bild insgesamt abzudunkeln. */
.zb-text {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 62%;
    display: flex; flex-direction: column; justify-content: center;
    gap: 10px;
    padding: 40px 48px;
    z-index: 3;
}
.zb-text::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 60%, transparent 100%);
    z-index: -1;
}
.zb-text h2 {
    margin: 0;
    font-size: 1.9rem; font-weight: 800; line-height: 1.15;
    color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.zb-text p {
    margin: 0;
    font-size: .95rem; color: rgba(255,255,255,.92);
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
    max-width: 30em;
}
.zb-knopf {
    align-self: flex-start;
    margin-top: 6px;
    background: var(--marke-akzent); color: var(--marke-akzent-text, #fff);
    border-radius: var(--marke-radius);
    padding: 10px 22px;
    font-size: .88rem; font-weight: 700; text-decoration: none;
}
.zb-knopf:hover { filter: brightness(.92); color: var(--marke-akzent-text, #fff); }

/* ---------- Notbehelf gegen weisse Bildkaesten ----------
   Nur fuer JPG. «multiply» laesst Weiss verschwinden und dunkle
   Bildteile stehen. Auf hellen und farbigen Buehnen wirkt es gut,
   auf dunklen nicht - dort hilft nur ein freigestelltes PNG. */
.zb-weiss-raus { mix-blend-mode: multiply; }

@media (max-width: 767.98px) {
    .zb-text { position: static; width: 100%; padding: 22px 20px 8px; }
    .zb-text::before { background: none; }
    .zb-text h2 { font-size: 1.3rem; }
    .zb-text p  { font-size: .86rem; }
}
/* ---------- Hintergrundebenen (Modus «wechselt») ----------
   Uebereinander statt ausgetauscht: Ein Austausch waere ein harter
   Schnitt, und das neue Bild muesste erst laden - sichtbar als
   kurzes Aufblitzen. Alle Ebenen sind von Anfang an da und werden
   nur ueberblendet.

   Laenger als der Angebotswechsel (.7s statt .42s): Ein Motiv
   wechselt langsamer als eine Preisangabe, sonst wirkt die ganze
   Buehne hektisch. */
.zb-grund {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity .7s ease;
    z-index: 0;
}
.zb-grund.an { opacity: 1; }

/* Bei wechselndem Hintergrund muessen Rahmen, Text und Zone darueber
   liegen - sonst verdeckt die naechste Ebene sie. */
.zonen-buehne.bg-wechselt .zb-rahmen,
.zonen-buehne.bg-wechselt .zb-text { z-index: 3; }
.zonen-buehne.bg-wechselt .zb-zone { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    .zb-grund { transition: none !important; }
}

/* =========================================================================
   ZONENBÜHNE AUF DEM HANDY

   Am Bildschirm stehen Motiv und Angebot NEBENeinander. Auf 390 Pixel
   Breite geht das nicht: Die Zone waere 130 Pixel breit, und Text,
   Produktbild und Preis lagen uebereinander - genau das war zu sehen.

   Auf dem Handy also UNTEREINANDER, in drei klaren Blöcken:

     1. Motiv, feste Hoehe, mit dem Text darauf
     2. Angebot darunter auf ruhigem Grund
     3. Punkte ganz unten

   Diese Regeln stehen bewusst am Ende der Datei: Sie muessen die
   frueheren ueberschreiben, und bei gleicher Genauigkeit gewinnt die
   spaetere. Das erspart ein Dutzend !important.
   ========================================================================= */
@media (max-width: 767.98px) {

    .zonen-buehne {
        display: block;
        position: relative;
        overflow: hidden;
    }

    /* 1. Motivbereich mit Text */
    .zb-text {
        position: relative;
        width: 100%;
        min-height: 190px;
        padding: 22px 18px;
        justify-content: flex-end;
        z-index: 3;
    }
    .zb-text::before {
        background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
    }
    .zb-text h2 { font-size: 1.35rem; }
    .zb-text p  { font-size: .85rem; }
    .zb-knopf   { padding: 8px 18px; font-size: .82rem; }

    /* Die Hintergrundebenen decken nur den oberen Teil ab, nicht die
       ganze Buehne - sonst laege das Angebot wieder auf dem Motiv. */
    .zb-grund { bottom: auto; height: 100%; }

    /* 2. Angebot darunter, auf eigenem Grund */
    .zb-zone {
        position: relative;
        width: 100%;
        min-height: 210px;
        padding: 16px 14px 34px;
        background: var(--c-flaeche, #fff);
        z-index: 4;
    }
    .zb-angebot {
        inset: 16px 14px 34px;
        gap: 4px;
    }
    .zb-angebot img { max-height: 46%; }

    /* Auf hellem Grund braucht die Schrift keinen Schatten mehr -
       und Weiss auf Weiss waere unlesbar. */
    .zb-angebot b     { color: var(--c-text); text-shadow: none; }
    .zb-preis         { color: var(--c-text); text-shadow: none; font-size: 1.2rem; }
    .zb-alt           { color: var(--c-text-leise); }
    .zb-marke         { top: 6px; right: 6px; }

    /* 3. Punkte am unteren Rand der Angebotszone */
    .zb-punkte button      { background: rgba(0,0,0,.22); }
    .zb-punkte button.an   { background: var(--marke-primaer); }

    /* Der weisse Rahmen umschliesst nur noch das Motiv. Ueber beide
       Bloecke gezogen sieht er aus wie ein Fehler. */
    .zb-rahmen { inset: 10px; bottom: auto; height: 170px; }
}

@media (max-width: 400px) {
    /* Sehr schmale Geraete: Das Motiv wird flacher, damit das Angebot
       ohne Scrollen sichtbar bleibt. */
    .zb-text   { min-height: 160px; padding: 18px 14px; }
    .zb-rahmen { height: 140px; }
    .zb-text h2 { font-size: 1.2rem; }
}

/* =========================================================================
   AUFKLAPPBARE FILTERGRUPPEN

   <details>/<summary> statt JavaScript: Der Browser kann das von sich
   aus, es funktioniert ohne Skript, und die Tastaturbedienung ist
   eingebaut.
   ========================================================================= */
.filter-gruppe-halter { list-style: none; }

.filter-klapp summary.filter-gruppe {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    list-style: none;              /* Standarddreieck weg */
    user-select: none;
    padding: 9px 4px 9px 0;
}
.filter-klapp summary::-webkit-details-marker { display: none; }
.filter-klapp summary.filter-gruppe span:first-child { flex: 1; }

.klapp-pfeil {
    font-size: .7rem;
    color: var(--c-text-leise);
    transition: transform .18s ease;
}
.filter-klapp[open] .klapp-pfeil { transform: rotate(180deg); }

/* Ein Punkt zeigt, dass in einer ZUGEKLAPPTEN Gruppe gefiltert wird.
   Ohne ihn sucht man, warum nur noch drei Artikel erscheinen. */
.filter-punkt {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--marke-akzent);
    flex: 0 0 auto;
}

.filter-klapp > .saas-filter-list { padding-left: 6px; padding-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
    .klapp-pfeil { transition: none; }
}

/* =========================================================================
   ZONE AUF VOLLE HÖHE, PRODUKTBILD GRÖSSER

   Vorher hatte die Zone 24 Pixel Innenabstand und das Bild durfte nur
   58 Prozent der Hoehe einnehmen. Bei einer 850 Pixel hohen Buehne
   blieb das Produkt dadurch klein, waehrend rundherum Platz leer
   stand.

   Jetzt: Die Zone reicht von oben bis unten, und das Bild nimmt, was
   uebrig bleibt. Text und Preis behalten ihren Platz, weil sie feste
   Zeilenhoehen haben und das Bild mit flex den Rest bekommt.
   ========================================================================= */
.zonen-buehne .zb-zone {
    align-self: stretch;
    height: 100%;
    padding: 0;                 /* Der Abstand sitzt jetzt im Angebot */
}

.zonen-buehne .zb-angebot {
    inset: 0;
    padding: 26px 20px 42px;    /* unten mehr Platz für die Punkte */
    gap: 8px;
}

/* Das Bild bekommt den Rest der Hoehe. min-height 0 ist noetig, damit
   ein flex-Kind ueberhaupt schrumpfen darf - ohne das waechst die
   Zone ueber die Buehne hinaus. */
.zonen-buehne .zb-angebot img {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    max-width: 100%;
    object-fit: contain;
}

/* Text und Preise schrumpfen nicht mit. */
.zonen-buehne .zb-angebot b,
.zonen-buehne .zb-angebot span { flex: 0 0 auto; }

@media (max-width: 767.98px) {
    /* Auf dem Handy bleibt es bei der gestapelten Anordnung; dort
       teilt sich das Bild die Hoehe mit dem Text im Block darunter. */
    .zonen-buehne .zb-angebot { inset: 16px 14px 34px; padding: 0; }
    .zonen-buehne .zb-angebot img { flex: 1 1 auto; max-height: none; }
}

/* =========================================================================
   TEXTFARBE UND -GRÖSSE IN DER ZONENBÜHNE

   Die Farbe kommt als style-Angabe vom Slide und wird hier VERERBT -
   deshalb «color: inherit» statt fester Werte. Vorher stand hier
   überall #fff, und die Einstellung im Admin lief ins Leere.

   Die Grössen nutzen dieselben Stufen wie die klassische Bühne
   (sm/md/lg), damit ein Slide in beiden Modi gleich gross wirkt.
   ========================================================================= */
.zb-text h2,
.zb-text p          { color: inherit; }
.zb-angebot b,
.zb-angebot .zb-preis,
.zb-angebot > span  { color: inherit; }

/* Der Altpreis bleibt gedämpft, egal welche Farbe gewählt ist -
   sonst konkurriert er mit dem gültigen Preis. */
.zb-angebot .zb-alt { color: inherit; opacity: .7; }

/* Grössenstufen der Angebotszone. Kleiner als links: In einer 34 %
   breiten Spalte bricht ein 3-rem-Text nach zwei Wörtern um. */
.zbg-sm b { font-size: .9rem; }   .zbg-sm .zb-preis { font-size: 1.15rem; }
.zbg-md b { font-size: 1.05rem; } .zbg-md .zb-preis { font-size: 1.5rem; }
.zbg-lg b { font-size: 1.3rem; }  .zbg-lg .zb-preis { font-size: 1.9rem; }

@media (max-width: 767.98px) {
    .zbg-sm b { font-size: .82rem; } .zbg-sm .zb-preis { font-size: 1rem; }
    .zbg-md b { font-size: .92rem; } .zbg-md .zb-preis { font-size: 1.2rem; }
    .zbg-lg b { font-size: 1.05rem; } .zbg-lg .zb-preis { font-size: 1.4rem; }
}

/* =========================================================================
   RABATTMARKE INNERHALB DER ZONE

   Die Marke sass auf «top: 0; right: 0» - bezogen auf das Angebot.
   Seit das Angebot die ganze Zone ausfuellt (inset: 0), landete sie
   damit genau in der Ecke und ragte ueber den weissen Rahmen hinaus.

   Jetzt sitzt sie innerhalb des Innenabstands, also sichtbar in der
   Zone statt an ihrer Kante.
   ========================================================================= */
.zonen-buehne .zb-marke {
    top: 18px;
    right: 16px;
    z-index: 5;
}

@media (max-width: 767.98px) {
    .zonen-buehne .zb-marke { top: 10px; right: 10px; }
}

/* Sicherheitsnetz: Nichts darf ueber die Buehne hinausragen. Bei
   overflow: hidden schneidet der Browser ab, statt die Seite breiter
   werden zu lassen. */
.zonen-buehne { overflow: hidden; }

/* =========================================================================
   BÜHNE ÜBER DIE VOLLE BREITE

   Die Buehne steht in der Inhaltsspalte. Um sie trotzdem bis an die
   Fensterkante zu ziehen, wird sie auf 100vw gesetzt und um ihren
   eigenen Abstand zum Rand nach links geschoben.

   Warum 50% und 50vw und nicht einfach negative Ränder: Die Spalte ist
   je nach Bildschirm unterschiedlich breit und eingerueckt. Feste
   negative Raender muessten geraten werden und wuerden bei jeder
   anderen Seitenbreite danebenliegen. Diese Rechnung stimmt immer.

   100vw statt 100%: vw ist die Breite des FENSTERS, % die des
   Elternelements - und genau da soll die Buehne ja heraus.
   ========================================================================= */
.zonen-buehne.randlos {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
}

/* Der weisse Rahmen rueckt weiter nach innen: An der Fensterkante
   wirkt er sonst wie ein Fehler statt wie Gestaltung. */
.zonen-buehne.randlos .zb-rahmen { inset: 22px; }

/* Inhalt nicht bis an die Kante laufen lassen. Auf einem breiten
   Bildschirm stuende der Text sonst ganz aussen, waehrend alles
   andere auf der Seite eingerueckt ist. */
.zonen-buehne.randlos .zb-text { padding-left: max(48px, calc((100vw - var(--seiten-breite, 1240px)) / 2 + 48px)); }

@media (max-width: 767.98px) {
    .zonen-buehne.randlos .zb-rahmen { inset: 12px; bottom: auto; }
    .zonen-buehne.randlos .zb-text   { padding-left: 18px; }
}

/* Den waagrechten Scrollbalken verhindert home.php mit einem eigenen
   <style>-Block, wenn die Buehne randlos ist. Hier stand zuerst
   «body:has(...)» - dasselbe :has(), das ich beim Rastermodus schon
   ersetzt habe. Der Server weiss ohnehin, ob randlos gilt; dann muss
   der Browser es nicht herausfinden. */

/* =========================================================================
   PRODUKTANGABEN IM KLASSISCHEN SLIDER

   Dieselben Bausteine wie in der Zonenbühne, an die andere Anordnung
   angepasst: Der klassische Slider hat den Text frei platziert, die
   Marke sitzt deshalb an der Bühnenecke statt im Angebot.
   ========================================================================= */
.saas-carousel-container { position: relative; }

.ks-marke {
    position: absolute; top: 18px; right: 18px;
    z-index: 20;
    background: var(--marke-rot, #DC2626); color: #fff;
    font-size: .82rem; font-weight: 800;
    letter-spacing: .01em;
    padding: 5px 14px; border-radius: 3px;
}

.ks-preiszeile {
    display: flex; align-items: baseline; gap: 10px;
    margin-top: 14px;
}
.ks-preis {
    font-size: 1.9rem; font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
    line-height: 1.1;
}
/* Der Altpreis erbt die Textfarbe, bleibt aber gedämpft - sonst
   konkurriert er mit dem gültigen Preis. */
.ks-alt {
    font-size: .95rem; opacity: .7;
    text-decoration: line-through;
    text-decoration-color: var(--marke-rot, #DC2626);
    text-decoration-thickness: 2px;
}

@media (max-width: 767.98px) {
    .ks-marke { top: 10px; right: 10px; font-size: .72rem; padding: 3px 10px; }
    .ks-preis { font-size: 1.35rem; }
    .ks-alt   { font-size: .82rem; }
}

/* =========================================================================
   KLASSISCHE BÜHNE ÜBER DIE VOLLE BREITE

   Dieselbe Rechnung wie bei der Zonenbühne. Sie steht getrennt, weil
   die klassische Bühne andere Kinder hat: Der Textkasten ist frei
   platziert und darf nicht mit einem festen Innenabstand versehen
   werden - sonst verschiebt sich, was der Betreiber im Designer
   gezogen hat.
   ========================================================================= */
.saas-carousel-container.randlos {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
}

/* Die Pfeile weiter nach innen: An der Fensterkante trifft man sie
   auf einem breiten Bildschirm kaum, und sie stehen dann ausserhalb
   des Blickfelds. */
.saas-carousel-container.randlos .carousel-control-prev { left: 2%; }
.saas-carousel-container.randlos .carousel-control-next { right: 2%; }