:root {
    --main-color: #000;
    --main-background: #fff;
    --main-border: 1px solid #ccc;

    --main-hover-color: #000;
    --main-hover-background: #ddd;
    --main-hover-border: 1px solid #ccc;

    --main-button-color: #000;
    --main-button-background: #fff;
    --main-button-border: 1px solid #ccc;

    --main-button-hover-color: #fff;
    --main-button-hover-background: #000;
    --main-button-hover-border: 1px solid #ccc;

    --main-largebutton-color: #fff;
    --main-largebutton-background: #000;
    --main-largebutton-border: 1px solid #000;

    --main-largebutton-hover-color: #fff;
    --main-largebutton-hover-background: #000;
    --main-largebutton-hover-border: 1px solid #000;

    --quickview-color: #000;
    --quickview-background: #fff;
    --quickview-border: 1px solid #ccc;

    --quickview-hover-color: #000;
    --quickview-hover-background: #ddd;
    --quickview-hover-border: 1px solid #ccc;

    --quickview-button-color: #000;
    --quickview-button-background: #fff;
    --quickview-button-border: 1px solid #ccc;

    --quickview-button-hover-color: #fff;
    --quickview-button-hover-background: #000;
    --quickview-button-hover-border: 1px solid #ccc;

    --quickview-largebutton-color: #fff;
    --quickview-largebutton-background: #000;
    --quickview-largebutton-border: 1px solid #000;

    --quickview-largebutton-hover-color: #fff;
    --quickview-largebutton-hover-background: #000;
    --quickview-largebutton-hover-border: 1px solid #000;



    --header-background: #ffffffe6 !important;
    --header-color: #000;

}

.darkmode {
    --main-color: #fff;
    --main-background: #000;
    --main-border: 1px solid #81818157;

    --main-hover-color: #3dffc1;
    --main-hover-background: #ff0000;
    --main-hover-border: #ff0000;

    --main-button-color: #fff;
    --main-button-background: #000;
    --main-button-border: 1px solid #81818157;

    --main-button-hover-color: #3dffc1;
    --main-button-hover-background: #000;
    --main-button-hover-border: 1px solid #3dffc1;

    --main-largebutton-color: #3dffc1;
    --main-largebutton-background: #000;
    --main-largebutton-border: 1px solid #3dffc1;

    --main-largebutton-hover-color: #3dffc1;
    --main-largebutton-hover-background: #000;
    --main-largebutton-hover-border: 1px solid #3dffc1;

    --quickview-color: #000;
    --quickview-background: #fff;
    --quickview-border: 1px solid #ccc;

    --quickview-hover-color: #000;
    --quickview-hover-background: #ddd;
    --quickview-hover-border: 1px solid #ccc;

    --quickview-button-color: #000;
    --quickview-button-background: #fff;
    --quickview-button-border: 1px solid #ccc;

    --quickview-button-hover-color: #fff;
    --quickview-button-hover-background: #000;
    --quickview-button-hover-border: 1px solid #ccc;

    --quickview-largebutton-color: #fff;
    --quickview-largebutton-background: #000;
    --quickview-largebutton-border: 1px solid #000;

    --quickview-largebutton-hover-color: #fff;
    --quickview-largebutton-hover-background: #000;
    --quickview-largebutton-hover-border: 1px solid #000;

    --header-background: #000000e6 !important;
    --header-color: #fff;
}








#all .link:hover .listing-name{color: var(--main-hover-color);}


#all{
    background: var(--main-background);
    font-family: Arial, sans-serif;
    /* Die Textfarbe steht HIER und wird vererbt – nicht mehr per "#all *" auf
       jedes Element einzeln geschrieben. Der Grund: "#all *" hat wegen der ID
       eine Spezifitaet, die keine Klasse mehr schlagen kann. Jede Komponente,
       die eine eigene Farbe braucht (Knopf auf dunklem Grund, aktive
       Seitenzahl), verlor damit den Farbkampf und wurde schwarz auf schwarz.
       Vererbung erreicht dieselben Elemente, laesst sich aber ueberschreiben. */
    color: var(--main-color);
}

#all  h1, #all h2, #all h3, #all h4, #all h5, #all h6, #all .u-body, #all *
{
    font-family: Arial, sans-serif;
}

/* Formularfelder erben die Textfarbe NICHT von selbst – der Browser setzt
   dort eigene Systemfarben. Solange "#all *" die Farbe ueberall hineinschrieb,
   fiel das nicht auf; jetzt muss es ausdruecklich dastehen, sonst steht im
   Dunkelmodus schwarze Schrift im dunklen Feld.
   Links sind nicht dabei: "#all a" setzt bereits color:inherit. */
#all input, #all select, #all textarea, #all button, #all optgroup, #all option {
    color: inherit;
}

#all .appointment-calendar, #all .shipping-appointment-calendar{display: none;}


#all flatpickr-rContainer, #all .flatpickr-rContainer{width: 100%;padding:0px 20px 0px 20px}

#all .flatpickr-day{    max-width: auto;
    height: auto;}

#all .dayContainer {

    width: 100%;
    min-width: 100%;
}


/* ---------------------------------------------------------------
   HEADER: Ebene und Platzhalter
   ---------------------------------------------------------------
   1) EBENE: Ohne eigene Ebene liegt die aufgeklappte Mega-Fläche HINTER dem
      Seiteninhalt, solange der Kopf noch nicht festgehalten ist (am Seiten-
      anfang). `position: relative` + z-index macht ihn zum eigenen Stapel,
      ohne ihn aus dem Fluss zu nehmen.
   --------------------------------------------------------------- */
#all #header { position: relative; z-index: 999; }

.allactive #header{
    /* KEIN SCHATTEN. Hier standen zwei weiche Schlagschatten nach unten
       (`0 5px 18px -15px` und `0 25px 42px -15px`). Sie legten beim Scrollen einen
       grauen Verlauf unter die Kopfzeile – gewuenscht ist ein schlicht weisser
       Kopf ohne Abheben. Wer sie zurueckholt: sie gehoeren an `.allactive`, nicht
       an `#header`, sonst sind sie schon am Seitenanfang da. */
    box-shadow: none !important;
    position: fixed !important;
    /* Balken durchgängig (volle Breite); der Inhalt (#topbar) bleibt innen zentriert.
       left/right statt width:100%, damit das Designer-Panel den Balken einrücken kann
       (editor.css: html.nfed-pal-push .allactive #header { right:300px }). */
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    /* KEIN hardcoded Hintergrund mehr: die Header-Hintergrundfarbe kommt aus dem Editor
       (nf-region-frame > Hintergrundfarbe), nicht aus dem CSS. #header ist die volle
       Flaeche, der Frame liegt darin und deckt sie mit der eingestellten Farbe ab.
       Der Frosted-Blur bleibt als Sicherheitsnetz (milchig statt Bleed), falls keine
       (oder eine transparente) Farbe gesetzt ist – wirkt nur, wenn etwas durchscheint. */
    top: 0px !important;
    z-index: 999!important;
}
/* Der Milchglas-Effekt gehoert an #header SELBST, nicht an .allactive. Sonst
   schaltet er sich im Moment des Festhaltens schlagartig zu – der Hintergrund
   „springt" beim ersten Scrollen sichtbar um. Am Seitenanfang liegt nichts
   hinter dem Header, dort ist der Effekt wirkungslos; sichtbar wird er genau
   dann, wenn Inhalt darunter durchlaeuft – also weich statt sprunghaft. */
/* KEIN MILCHGLAS MEHR. Hier stand `backdrop-filter: blur(14px) saturate(1.4)`.
   Beim Scrollen schimmerte der Inhalt verwaschen durch die Kopfzeile – zusammen
   mit dem Schatten darueber war das der graue, unscharfe Streifen. Gewuenscht ist
   ein schlicht weisser Kopf.
   ACHTUNG, das war ein Sicherheitsnetz: Ist am Kopf-Rahmen KEINE Hintergrundfarbe
   eingestellt (oder eine durchsichtige), scheint der Inhalt jetzt hart durch statt
   milchig. Die Farbe gehoert in die Einstellung (nf-region-frame > Hintergrund) –
   deshalb wird sie hier NICHT fest auf Weiss gesetzt. Der @supports-Block darunter
   bleibt als Ersatz fuer Browser ohne backdrop-filter unveraendert. */
#all #header {
    transition: box-shadow .18s ease;
}
/* Fallback: Browser ohne backdrop-filter bekommen einen (fast) deckenden Header,
   damit auch dort nichts durchscheint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Auch der Ersatz-Hintergrund darf nicht erst beim Scrollen erscheinen. */
    #all #header { background: #ffffff !important; }
    #all.large #header, .dark #header { background: #14131a !important; }
}

.allactive #header h1, .allactive #header h2, .allactive #header h3, .allactive #header h4, .allactive #header h5, .allactive #header h6, .allactive #header .u-body, .allactive #header *{var(--header-color);}


#all #quickview-content h1, #all #quickview-content h2, #all #quickview-content h3, #all #quickview-content h4, #all #quickview-content h5, #all #quickview-content h6, #all #quickview-content .u-body, #all #quickview-content *{color: #000;}
#all #quickview-content button span, #all #quickview-content #quickview-close, #all #quickview-content .property-option.active,#all #quickview-content .property-option:hover{color: #fff;} {color: #fff;}
#all #catOverlay h1, #all #catOverlay h2, #all #catOverlay h3, #all #catOverlay h4, #all #catOverlay h5, #all #catOverlay h6, #all #catOverlay .u-body, #all #catOverlay *{color: #000;}
#all .cart-content h1, #all .cart-content h2, #all .cart-content h3, #all .cart-content h4, #all .cart-content h5, #all .cart-content h6, #all .cart-content .u-body, #all .cart-content *,#all .quickview-window #quickview-close {color: #000;}


#all .flatpickr-day {
    margin: auto;
    width: 100%;
}

#all .dayContainer {
    width: 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

#all .flatpickr-days{width: 100%;}



#all .flatpickr-day.startRange, #all .flatpickr-day.endRange, #all .flatpickr-day.selected.inRange, #all .flatpickr-day.startRange.inRange, #all .flatpickr-day.endRange.inRange, #all .flatpickr-day.selected:focus, #all .flatpickr-day.startRange:focus, #all .flatpickr-day.endRange:focus, #all .flatpickr-day.selected:hover, #all .flatpickr-day.startRange:hover, #all .flatpickr-day.endRange:hover, #all .flatpickr-day.selected.prevMonthDay, #all .flatpickr-day.startRange.prevMonthDay, #all .flatpickr-day.endRange.prevMonthDay, #all .flatpickr-day.selected.nextMonthDay, #all .flatpickr-day.startRange.nextMonthDay, #all .flatpickr-day.endRange.nextMonthDay {
    background: #000000;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #000000;
}

#all .selected{color:#fff;background:#000;border-color:#000;}


#all .flatpickr-calendar{box-shadow: none;
    margin: auto;
    width: 100%;
    scale: 1.1;
    margin-top: 40px;
    margin-bottom: 30px;}


/* ENTZAUBERT: KEIN erzwungenes text-align fuer Ueberschriften mehr.
   Frueher stand hier `#all h1,h2,h3 { text-align:left }` – das schlug jede im
   Designer gesetzte Ausrichtung, „mittig" bei der Spalte blieb wirkungslos.
   Ohne die Regel erben Ueberschriften die Ausrichtung ihres Containers (links
   ist ohnehin der Browser-Standard), und alles laesst sich im Designer stellen. */

/* ENTZAUBERT: Abstände des Seiten-/Kategorie-Titels.
   Die Luft über und unter dem Titel kam bisher nicht von hier, sondern vom
   Browser-Standard für <h1> (margin: .67em 0 -> 21.44px bei 32px Schrift). Im
   Designer standen deshalb in „Außenabstand (margin)" lauter Nullen, obwohl
   sichtbar Abstand da war – und eine 0 konnte ihn nicht entfernen.
   Jetzt stehen die Abstände als Zahlen am Element (Designer -> Außen-/Innen-
   abstand, Standard 21/0/21/0); hier werden nur die Browser-Ränder auf 0
   gesetzt, damit die Felder die EINZIGE Quelle sind. Schriftgröße, Gewicht und
   Farbe bleiben unberührt. Freie <h1> ausserhalb der Titel-Bausteine (Fallback-
   Ausgabe von category.php/page.php) sind bewusst NICHT betroffen. */
#all .nf-lay-cname,
#all .nf-lay-pname,
#all .nf-lay-pgtitle{
    margin: 0;
    padding: 0;
}

#all .variant-option{
    cursor:pointer;
}

#all .button_vertrag_widerrufen{
    border: solid 1px #81818157;
}

/* Footer-Links: kompakter Text, KEIN Button-Look (kein Rahmen, wenig Polster). */
#all .page_links .link {
    padding: 3px 0;
    border: none;
    border-radius: 0;
}

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}


#loadContent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    font-size: 0;
    height: 100vh;
}

#loadContent::after {
    content: "";
    width: 42px;
    height: 42px;
    /* Neutral statt Hellblau (#018cff auf blaeulicher Spur): der Ring soll sich
       nicht als Fremdfarbe ins Bild draengen — auch die Spur mitgezogen, sonst
       bleibt sie blaustichig. Die anderen Ringe im System (.cat-loader, der
       Designer-Ring) sind ebenfalls neutral. */
    border: 4px solid rgba(35, 34, 39, 0.15);
    border-top: 4px solid #232227;
    border-radius: 50%;
    animation: Spin 0.8s linear infinite;
}

/* NACHLADEN: INHALT BLEIBT STEHEN.
   #loadContent ersetzte frueher den ganzen Inhalt (height:100vh) – beim Klick
   auf eine Variante war die Seite dadurch schlagartig leer. Derselbe Ring liegt
   jetzt als Schleier darueber, der alte Inhalt bleibt sichtbar und wird erst
   ausgetauscht, wenn die Antwort da ist. */
/* KEIN ABDUNKELN. Ein erster Versuch legte den Inhalt auf opacity .35 – das
   hellt die Seite beim Nachladen sichtbar auf und flackert bei kurzen Ladezeiten.
   Der Inhalt bleibt jetzt unveraendert stehen; nur der Ring kommt darueber. */

@keyframes Spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#all body{
    margin:0;
    font-family:Arial;
    background: #fff;
}



#all .link{
    color: inherit;
    text-decoration: none;
    cursor:pointer;
    transition:0.2s;
}

#all .link:hover{
    color: var(--main-hover-color);
    text-decoration: none;
    cursor:pointer;
    transition:0.2s;
}

#all a {
    color: inherit;
    text-decoration: none;
}

#all .agb-error {
    border: 1px solid red;
    padding: 6px;
    border-radius: 6px;
    background: #ffecec;
}



#all a:visited {
    color: inherit;
}


#all a:hover {
    color: inherit;

}

#all a:active {
    color: inherit;
}
#all .listing-text{
    height: 130px;
    text-overflow: ellipsis;
}

#all .listing-name{
    /* ENTZAUBERT: Schriftgroesse/-staerke, Hoehe und Zeilenhoehe stehen jetzt in der
       Kachel-Konfiguration (Designer) und sind dort stellbar. Hier bleibt nur die
       zweizeilige Kuerzung, die keine Einstellung im Panel hat. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===================================================================
   NOTKARTE – wenn ein Layout gar keine Kachel-Vorlage mitbringt
   ===================================================================
   Fehlt im c_grid die `data.card`, rendert layout_lib.php seine eingebaute
   Twig-Vorlage. Die trug bis zum 13.08.2026 keinerlei Halt: der Kurztext
   wuchs, wie er wollte, und schob Preis und Grundpreis UNTEN AUS DER KACHEL
   HERAUS – sichtbar, nicht abgeschnitten. Aufgefallen ist es, als ein neues
   Kategorie-Layout ohne Kachel-Vorlage produktiv ging.

   Die Regeln haengen an der eigenen Klasse `nf-card-std`, die NUR die
   eingebaute Vorlage traegt. Eine im Designer gebaute Kachel bekommt sie
   nicht – sonst wuerde das CSS Werte festnageln, die im Panel einstellbar
   sind, und das Panel waere wirkungslos.

   Mehr als Halt steht hier bewusst nicht: keine Farben, keine Groessen.
   Nur „nichts laeuft aus der Kachel heraus, und der Preis bleibt unten“. */
#all .card.nf-card-std{
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* was doch zu lang ist, wird geschnitten */
}
#all .card.nf-card-std .description_short_list{
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* wie beim Namen: zwei Zeilen, dann Schluss */
    -webkit-box-orient: vertical;
}

/* ENTZAUBERT: Ausrichtung, Groesse und Staerke des Preises kommen aus dem Designer. */
/* Preis ans untere Kachel-Ende NUR im Produkt-Grid (nicht im Warenkorb). */
#all .grid > .card .pricelist{
    margin-top: auto;
}
/* Visuelle Karten-Vorlage (Designer): sprechende Struktur-Klassen statt nf-Klassen.
   card-col = Spalte (Flex-Spalte, damit Preis mit margin-top:auto unten sitzt),
   card-row = Zeile (nebeneinander). */
#all .card .card-row{ display:flex; gap:10px; width:100%; }
#all .card .card-col{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
/* ===== Dunkel-Modus: Produkt-Karten lesbar (nur RUECKLAGE) =====
   KEIN !important: sonst schlaegt diese Ruecklage jede Farbe, die im Designer
   gesetzt wird (die kommt aus layout_card_mode_css und traegt !important).
   `.card` ist hart `color:black`; im Dunkel wird der Karten-Grund #000, dadurch waeren
   Name/Preis/Kurztext schwarz-auf-schwarz (unsichtbar). Die TEXT-Elemente direkt (nicht
   ueber .card-Vererbung) auf die Modus-Textfarbe heben – mit !important, damit sie sicher
   greifen; graue Hilfstexte aufhellen. Per-Element-Atomfarben gewinnen weiter ueber ihre
   eigenen gescopten !important-Regeln (hoehere Spezifitaet via [data-lay-el]). */
#all.darkmode .card,
#all.darkmode .card .listing-name,
#all.darkmode .card .pricelist,
#all.darkmode .card .description_short_list,
#all.darkmode .card .listing-text { color: var(--main-color, #ffffff); }
#all.darkmode .card .shorttext_list,
#all.darkmode .card .base-price,
#all.darkmode .card .baseprice,
#all.darkmode .card .nf-lay-vat,
#all.darkmode .card .nf-lay-saleunit { color: #b9b9c2; }
#all .baseprice{
    text-align: right;
}

#all .cart-body .active{
    border-color:#000 !important;
    color:#fff !important;
    background:#000 !important;
}

#all .listing-cart-btn,.listing-button-btn{    float: right;
    border: solid 1px #ededed;
    padding: 11px;
    color:#464646;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    margin-top: 20px;
    background: #f9f9f9;
    cursor:pointer;}

#all .product-properties .product-property-row:last-of-type {
    border-bottom: none;
}

#all #topbar{
    height:80px;
    display:flex;
    align-items:center;
    padding:0 15px;
    gap: 20px;
    line-height: 1.0;

}


#all #plus, #all #minus{padding: 5px 10px 5px 10px;
    font-size: 20px;}

#all #qty{padding: 10px;}

/* #mainPrice ist reiner JS-Anker – KEIN CSS an der ID. Farbe/Groesse/Fettung kommen
   ausschliesslich aus der Klasse .product_price (im CSS-Klasse-Feld editierbar). */

#all #quickview-modal #mainPrice{
    color:var(--quickview-hover-color);
    font-size: 32px;
    font-weight: bold;
}

/* MAIN CONTENT */
#all #content{
    flex: 1;
    /* Kein festes horizontales Padding mehr – der seitliche Abstand (auch von Haupt-
       /Vorschaubild) kommt aus dem Layout (Spalten-Padding/Margin im Designer). */
    padding: 0 0 20px 0;
    max-width: 1205px;
    margin: 0 auto;
}

#all .property-title{font-weight: bold;
    font-size: 17px;}


#close-cat{
    color: #000;
    border: none;
    background: none;
    font-size: 28px;
    cursor: pointer;
}

#all .close-x{
    margin-left:auto;
    font-size:28px;
    cursor:pointer;
}

#all .variant-tabs {
    display:flex;
    gap:8px;
    margin:15px 0;
    flex-wrap:wrap;
}

#all .variant-tab {
    padding:8px 12px;
    border:1px solid #81818157;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;

}

/* Ein Variantenreiter ist so breit wie sein Text – „42" braucht keine halbe Zeile.
   Im Quickview tragen die Reiter zusaetzlich .property-option (fuer die Optik),
   und `#all #quickview-modal .property-option` setzt width:49%, damit ECHTE
   Eigenschaften zu zweit nebeneinander stehen. Mit zwei IDs schlaegt diese Regel
   `#all .variant-tab` – die Groessen wurden dadurch halbseitenbreit. Hier steht
   die Breite mit derselben ID-Zahl plus einer Klasse mehr wieder gerade. */
#all .variant-tab.property-option,
#all #quickview-modal .variant-tab.property-option {
    width: auto;
}

#all .variant-tab:hover {
    color: var(--main-button-hover-color);
    background: var(--main-button-hover-background);
    border:var(--main-button-hover-border);

}

/* VARIANTE OHNE BESTAND.
   Der Reiter bleibt stehen und bleibt anklickbar – wer die Groesse sehen will,
   soll sie sehen duerfen. Nur durchgestrichen, damit auf einen Blick klar ist,
   dass es sie gerade nicht gibt.
   Der Doppelname (.variant-tab.variant-out) ist noetig: .variant-tab setzt
   text-decoration:none, und eine Regel mit gleichem Gewicht wuerde nicht
   gewinnen. */
/* EIGENSCHAFTEN DER VARIANTE – Beschreibung, keine Auswahl.
   Bewusst schlicht: zwei Spalten, Bezeichnung links, Wert rechts. Wer sie wie
   die Reiter aussehen liesse, lud zum Klicken ein, wo es nichts zu klicken gibt. */
#all .nf-eigenschaften { margin: 14px 0 4px; }
#all .nf-eig-liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 18px;
    margin: 0;
    font-size: 14px;
}
#all .nf-eig-liste dt { color: var(--nf-eig-label, #6b7688); }
#all .nf-eig-liste dd { margin: 0; }

/* Die #quickview-modal-Zeilen muessen mit: `#all #quickview-modal .property-option`
   (weiter unten) hat ZWEI IDs und schlaegt `#all .variant-tab.variant-out` mit
   einer. Seine `background`-Kurzform loescht dabei das background-image – also
   genau den Strich. Im Quickview stand eine ausverkaufte Groesse deshalb da wie
   jede andere: nicht durchgestrichen, aber durch pointer-events:none auch nicht
   anklickbar. Auf der Produktseite fiel das nie auf, dort gibt es die Regel nicht. */
#all .variant-tab.variant-out,
#all .variant-tab.variant-out:hover,
#all .variant-tab.variant-out.active,
#all #quickview-modal .variant-tab.variant-out,
#all #quickview-modal .variant-tab.variant-out:hover,
#all #quickview-modal .variant-tab.variant-out.active {
    /* EIN STRICH DURCH DEN GANZEN KASTEN, nicht durch die Ziffer.
       `line-through` streicht nur den Text – bei „42" sieht das aus wie ein
       Schreibfehler, nicht wie „gibt es nicht". Der diagonale Strich kommt als
       Verlauf ueber die ganze Flaeche: von unten links nach oben rechts, genau
       ein Pixel breit, unabhaengig von Textlaenge und Kastengroesse. */
    /* NICHT ANKLICKBAR. Der Reiter bleibt sichtbar – man soll sehen, dass es
       die Groesse gibt – aber ein Klick fuehrte auf eine Variante, die man
       nicht kaufen kann. `pointer-events:none` nimmt Klick UND Mauszeiger,
       das onclick am Element bleibt damit wirkungslos. */
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    background-color: var(--nf-variant-out-bg, #fbfbfc);
    background-image: linear-gradient(to top right,
        transparent calc(50% - 0.7px),
        var(--nf-variant-out-line, #c2c8d0) calc(50% - 0.7px),
        var(--nf-variant-out-line, #c2c8d0) calc(50% + 0.7px),
        transparent calc(50% + 0.7px));
    color: var(--nf-variant-out-color, #b3bac4);
    border: 1px solid var(--nf-variant-out-border, #e6e9ee);
}

#all .variant-tab.active {
    color: var(--main-button-hover-color);
    background: var(--main-button-hover-background);
    border:var(--main-button-hover-border);
}

/* ===================== PRODUCTS GRID ===================== */
#all .grid{
    /* Kein Abstand nach OBEN: das Listing soll direkt unter dem Titel/Inhalt sitzen.
       Der Abstand gehoert – wie bei jedem Element – in die Designer-Felder. */
    padding-top: 0;
    padding-bottom: 20px;
    display:grid;
    grid-template-columns:repeat(4, 1fr); /* FIX: stabile Desktop-Spalten */
    /* Von 15 auf 8: die Kacheln haben eigene Rahmen und Innenabstaende, der
       Zwischenraum kam optisch doppelt. */
    gap:8px;
}

/* PRODUCT CARD */
#all .card{

    text-decoration:none;
    color:black;
    display:block; /* FIX: wichtig für saubere Grid-Box */
    box-sizing:border-box;
    /* NUR Hover-/Theme-Eigenschaften animieren – NICHT alles. Sonst morpht die
       Karte beim Umschalten groß<->klein sichtbar (Größe/Layout). Größenwechsel
       soll sofort passieren, nur box-shadow/transform/Farben weich. */
    transition: box-shadow .2s ease, transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* ENTZAUBERT: Der INNENABSTAND der Kachel steht in der Kachel-Konfiguration
   (Designer -> Produkt-Kacheln -> Kachel -> Innenabstand) und kommt als Inline-Stil
   an der Kachel an. Kacheln MIT Vorlage tragen dafuer data-card-box.
   Diese Regel ist nur noch die Ruecklage fuer Kacheln OHNE Vorlage: Warenkorb,
   Quickview und Listings, deren Layout (noch) keine Kachel-Vorlage besitzt. */
#all .card:not([data-card-box]){
    padding:10px;
    /* ENTZAUBERT: Rahmen, Ecken und Schatten stehen bei Kacheln MIT Vorlage in der
       Kachel-Konfiguration (Designer). Hier bleiben sie nur als Ruecklage fuer
       Kacheln ohne Vorlage stehen. */
    border:1px solid #7979796b;
    border-radius:8px;
}

/* NUR die Produkt-Kacheln im Grid: Flex-Spalte -> gleich hoch, Preis unten.
   (Nicht global, sonst bricht der Warenkorb/Quickview, der .card ebenfalls nutzt.) */
#all .grid > .card{
    display:flex;
    flex-direction:column;
}

#all .checkout-grid select{    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    grid-column: 1 / 3;}

#all .card:hover{
    transform:translateY(-2px);
}
/* Schatten NUR bei Kacheln ohne Vorlage fest; mit Vorlage kommt er aus dem Designer. */
#all .card:not([data-card-box]):hover{
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
#all #main{    width: 100%;}

#all .img{display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;}


#all .product-properties{
    margin-top:35px;
    
    padding-top:20px;
}

#all .product-properties h3{
    margin:0 0 18px;
    font-size:22px;
    font-weight:600;
}

#all .product-property-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
    padding:10px 0;
    border-bottom:1px solid #81818157;
}

#all .product-property-name{
    width:100%;
    font-weight:600;
}

#all .base-price{
    text-align: inherit;
    letter-spacing: .1px;
    /* Groesse, Zeilenhoehe, Abstand und Mindesthoehe: im Designer stellbar. */
}



#all .description_short_list{
    opacity: 0.5;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    /* Abstaende, Hoehe und Zeilenhoehe: im Designer stellbar. */
}
/* .shorttext_list: Groesse/Farbe/Abstand kommen aus dem Designer. */
#all .price_list{margin-top:8px;font-weight:bold;}

/* Ja/Nein-Eigenschaft: erst der Schalter, das Wort steht daneben — so liest
   sich „[o—] Neupatient" wie ein Haken mit Beschriftung, statt Ueberschrift
   oben und Schalter darunter.
   `row-reverse` dreht nur die Anzeige: im HTML steht weiter der Titel zuerst,
   damit Vorlesegeraete und die alte Reihenfolge unberuehrt bleiben. */
#all .property-switch {
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
/* Reihenfolge nur fuer die Anzeige umgestellt (`order`) — im HTML steht
   weiter der Titel zuerst. `row-reverse` waere naheliegender gewesen, hat die
   beiden aber auseinandergezogen statt sie nebeneinander zu setzen. */
/* ACHTUNG: `.switch` und `.switch-slider` werden in dieser Datei mehrfach
   gesetzt (Kasse, Konto, Formulare) — spaetere Regeln machen daraus u. a.
   `width:100%` oder einen 24er-Kreis. Fuer die Ja/Nein-Eigenschaft gelten
   deshalb ausdruecklich DIESELBEN Masse wie beim Schalter in der Kasse:
   Pille 36x20, Knopf 16x16, gruen wenn an. */
#all .property-switch .switch {
    order: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
    top: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
}
#all .property-switch .property-title { order: 1; flex: 0 1 auto; cursor: pointer; user-select: none; }
#all .property-switch .switch-slider {
    position: relative;
    inset: auto;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    background: #e5e7eb;
    border: 0;
    border-radius: 999px;
    transition: .25s;
}
#all .property-switch .switch-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: .25s;
}
#all .property-switch .switch input:checked + .switch-slider { background: #22c55e; }
#all .property-switch .switch input:checked + .switch-slider::before { transform: translateX(16px); }

/* Der frühere Selektor hatte `#all` zweimal drin und griff nie. */
#all .property-switch .property-title {
    display: inline-block;
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}

#all .switch {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 32px;
    top:10px;

}

#all .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#all .switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 999px;
    transition: .25s ease;
}

#all .switch-slider::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    left: 3px;
    top: 3px;

    /* SCHWARZER KNOPF */
    background: #fff;

    border-radius: 50%;
    transition: .25s ease;
}

#all .switch input:checked + .switch-slider {
    background: #22c55e;
}

#all .switch input:checked + .switch-slider::before {
    transform: translateX(26px);
}



#all .product .img{height: 350px;
    background: #f9f9f9;display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;}

#all .card img{width:100%;
    object-fit:cover;}
#all .noimage{width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:#666;}

#all .img{width: 100%;
    padding: 0px;
    /* HÖHE ENTFERNT. Hier stand `height: 210px` – ein festes Maß für JEDE
       Produktkachel im ganzen Shop. Damit war die Bildhöhe im Designer zwar
       einstellbar (der schreibt einen Inline-Wert, der gewinnt), aber nicht
       WEGZUBEKOMMEN: wer keine Höhe setzte, bekam stumm 210 px. Die Höhe gehört
       an das Kachel-Teil „Bild" (Designer → Maße), nicht hierher.

       Ohne Angabe richtet sich die Höhe jetzt nach dem Bild. Wer wieder überall
       gleich hohe Kacheln will, setzt die Höhe einmal am Bild-Teil der Vorlage –
       dann gilt sie für alle Kacheln, weil alle aus derselben Vorlage kommen. */
    border: 1px solid #81818157;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom entfernt: der Abstand gehoert in die Kachel-Konfiguration
       (Designer -> Bild -> Außenabstand), damit man ihn stellen kann. */}

/* HELLER MODUS: Rahmen des Bildes WEISS. Der Dunkelmodus behaelt den grauen
   Rand aus der Grundregel — auf Schwarz waere Weiss zu hart. Die Regel muss
   `#all:not(.darkmode)` heissen, sonst schlaegt die Grundregel sie in der
   Kaskade (gleiche Spezifitaet, spaeter im Dokument gewinnt sonst nichts). */
#all:not(.darkmode) .img{
    border-color: #fff;}

#all .card img{

    max-width: 100%;
    min-height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px){
    #all .grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 800px){
    #all .grid{
        grid-template-columns:repeat(2, 1fr);
    }

    #all .product-layout {
        display: flow !important;
    }
}

@media (max-width: 600px){
    #all .grid{
        grid-template-columns:1fr;
    }
    /* NUR NOCH Kacheln OHNE Vorlage. Hier stand `#all .card` — die Regel hat
       Rahmen, Ecken und Strichfarbe (#7979796b, deutlich dunkler als der Rest
       des Shops) auf dem Handy festgenagelt und damit die Kachel-Einstellung
       aus dem Designer wirkungslos gemacht. Kacheln MIT Vorlage tragen
       [data-card-box]; fuer die kommt „unten ein Strich, keine Abrundung"
       jetzt aus der Einstellung (Handy-Stand bzw. Vorgabe im Kern). */
    #all .card:not([data-card-box]){
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #7979796b;
    }
    #all .grid .card:not([data-card-box]):last-child {
        border: none !important;
    }

    #all .card:hover {
        box-shadow: none;
        transform: none;
    }

    #all .grid {
        
        gap: 5px;
    }

}

#all .cat-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;


    visibility: hidden;
    transition: opacity 0.25s ease;
}

#all .cat-overlay.active {
    opacity: 1;
    visibility: visible;
}

#all .cat-box {
    width: 320px;
    height: 100%;
    background: #fff;
    overflow: hidden;

    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

#all .cat-overlay.active .cat-box {
    transform: translateX(0);
    margin-left: 0px;

}

/* ===================== MOBILE LAYOUT ===================== */
@media (max-width: 850px){

    #all #content {
        flex: 1;
        /* KEIN SEITLICHES POLSTER MEHR – wie in der Desktop-Regel weiter oben.
           Hier standen `20px` links und rechts. Die Inhalts-Spalte bringt aber
           ihr eigenes Polster aus dem Designer mit (c_content_inner, ebenfalls
           20px), sodass der Inhalt auf dem Handy DOPPELT eingerueckt war: von
           390px Flaeche blieben 294px fuer die Kachel. Und es war nicht
           abstellbar – wer im Designer auf 0 stellte, sah trotzdem 20px.
           Der seitliche Abstand gehoert in die Einstellung, nicht hierher. */
        padding: 0 0 20px 0;
    }

    #all .cat-box{width: 100% !important;}




}



/* =========================================================
   CAT OVERLAY POSITION FIX (wichtig für Loader)
========================================================= */

#all #catOverlay{
    position: fixed;
    inset: 0;
    width: 320px;

    z-index: 9999;
}

#all #catOverlay.active{

}

/* Container muss relativ sein, damit Loader zentriert ist */
#all #catStack{
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* =========================================================
   LOADER (Spinner)
========================================================= */

#all .cat-loader{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 44px;
    height: 44px;

    margin: -22px 0 0 -22px;

    border: 3px solid #e6e6e6;
    border-top: 3px solid #111;

    border-radius: 50%;

    animation: catSpin 0.8s linear infinite;

    display: none;

    z-index: 50;
}

/* Spinner Animation */
@keyframes catSpin{
    to{
        transform: rotate(360deg);
    }
}

#all .category-separator{
    border: solid 1px #ededed;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:120px;
    border-radius:12px;

    display:flex;
    align-items:center;

    padding:20px;

    margin: 0px 0px 0px 0px;

    position:relative;
    overflow:hidden;
}

#all .category-separator-overlay{
    position:absolute;
    inset:0;
    background: rgb(255 255 255 / 78%);
}

#all .category-separator-boxtext{
    position:relative;
    z-index:1;
    color:#000;

    margin:0;
    font-size:32px;
}

#all .category-separator-text{
    position:relative;
    z-index:1;
    padding-top:20px;
    margin:0;
    font-size:32px;
}

#all .cat-level{
    opacity: 1;
    transform: translateX(0);
    animation: catLevelIn .18s ease;
}

/* Nur einblenden – KEINE vertikale Bewegung, sonst wirkt es wie "von unten hoch". */
@keyframes catLevelIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

#all .cat-level.out{
    opacity: 0;
    transform: translateX(-10px);
}

/* =========================================================
   SCROLL FIX (optional)
========================================================= */

#all .cat-box{
    width: 320px;
    height: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Das Menue selbst faehrt auf und klingt aus – dieselbe Kurve wie alles
       andere im Menue (siehe --nf-nav-kurve weiter unten). Es darf etwas laenger
       brauchen als ein Hover, deshalb das Anderthalbfache der Grunddauer; die
       Kurve bleibt dieselbe, damit es sich nach EINER Bewegung anfuehlt.
       Bewusst weiter ohne Eigenschaftsnamen (gilt fuer alle): hier wandern
       `transform` UND `margin-left`, und liesse man eines davon aussen vor,
       spraenge das Menue beim Aufgehen. */
    transition: calc(var(--nf-nav-dauer) * 1.5) var(--nf-nav-kurve);
}

#all .cat-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

/* Stack scrollt sauber */
#all #catStack{
    flex: 1;
    overflow-y: auto;
}

#all #topbar{max-width: 1205px;
    margin: 0 auto;padding: 0 20px;}

/* Wenn #topbar als editierbare Header-REGION rendert, verhaelt es sich EXAKT wie der
   Content-Marker #content: schlichter Block ohne die alte Flex-Kopfzeile. Logo/Suche/
   Icons ordnet dann die Layout-Engine (nf-region-frame > nf-region-inner > Spalten) an –
   nicht mehr #topbar-Flex. Das verhindert den Flex-Ueberlauf (nowrap + min-width:auto),
   die leere Rand-Box mit gestricheltem Rahmen und die Ueberlappung mit dem Designer-Panel.
   Greift ueber die server-gerenderte Region-Kennung UND die Editor-Klasse. */
#all #topbar[data-nf-lay-region="header"],
#all #topbar.nfed-creg-header {
    display: block;
    height: auto;
    min-height: 0;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    align-items: initial;
    flex-wrap: initial;
}

#all main{max-width: 1250px;
    margin: 0 auto;}

#all .itemlist{padding: 0px 0px 14px 0px;
    font-size: 14px;}

/* ENTZAUBERT: Groesse kommt aus dem Designer, nicht aus dem Stylesheet.
   Der Knopf FUELLT sein Element; die Standardgroesse steht am Element und wird
   von einer im Designer gesetzten Breite/Hoehe (Inline-Stil) ueberschrieben.
   Aussehen (Rahmen, Radius, Schrift) bleibt hier – das ist kein Mass, sondern Optik,
   und laesst sich im Panel weiterhin gezielt aendern. */
/* Element als Flex-Kasten: der Knopf STRECKT sich dann auf die volle Hoehe des
   Elements. Ueber height:100% ging das nicht – eine Prozent-Hoehe braucht eine
   durchgehend definierte Elternkette, und die riss hier ab (der Knopf blieb auf
   seinem Mindestmass stehen, daher der graue Kasten kleiner als der orange Rahmen). */
#all .nf-lay-el:has(> .cat-btn),
#all .nf-lay-el:has(> * > .cat-btn),
#all .nf-lay-el:has(> .cart-icon),
#all .nf-lay-el:has(> * > .cart-icon) { display: flex; align-items: stretch; }
#all .cat-btn, #all .cart-icon { align-self: stretch; flex: 1 1 auto; }
#all .cat-btn {
    background: transparent;
    /* KEIN Rahmen und KEINE Rundung mehr aus dieser Datei – beides stellst du am
       Element im Designer ein. Hier stand `border: 1px solid #81818157` samt
       `border-radius: 4px`; das hat dem Burger einen Kasten gegeben, den man im
       Panel nicht wegbekam. */
    border: 0;
    width: 100%;
    height: 100%;
    /* KEIN Mindestmass mehr: 45x45 hat verhindert, dass man das Element im Designer
       auf 40x40 stellen kann – der Knopf blieb einfach groesser. Groesse kommt aus
       der Konfiguration. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
}
/* Symbol waechst mit dem Knopf mit. */
#all .cat-btn svg { width: 60%; height: 60%; max-width: 100%; max-height: 100%; }

/* ===========================================================================
   BEDIENELEMENTE DER KOPFZEILE: IMMER MITTIG, IMMER PASSEND
   ---------------------------------------------------------------------------
   Stellt man das Element im Designer auf 40x40 oder 50x50, soll das Symbol
   mittig darin sitzen und mitwachsen – ohne dass man je wieder eine Pixelzahl
   in dieser Datei nachpflegt. Das ist Verhalten, keine Groesse: WIE gross,
   entscheidet die Konfiguration.

   Umgesetzt ueber Container-Anfragen (`container-type: size`): die Einheit
   `cqmin` bezieht sich auf die kuerzere Seite DES ELEMENTS. 55cqmin heisst also
   „55 % der kuerzeren Elementseite" – bei 40x40 sind das 22px, bei 50x50 sind
   es 27px. Ein fester px-Wert koennte das nicht leisten.
   =========================================================================== */
#all #topbar .nf-lay-el:has(> .cat-btn),
#all #topbar .nf-lay-el:has(.cart-icon),
#all #topbar .nf-lay-el:has(.nf-search-lupe) { container-type: size; }

#all #topbar .cat-btn,
#all #topbar .cart-icon,
#all #topbar .nf-search-lupe {
    width: 100%; height: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
/* KEINE MASSE MEHR AUS DIESER DATEI.
   Hier standen Hoehe und Breite der Symbole (zuletzt `height: 72cqmin`). Sie sind
   entfernt – die Groesse kommt aus dem Designer. Die Symbole rendern damit in
   ihrer eigenen Groesse (alle drei SVGs sind 24x24 im viewBox 0 0 24 24, also
   gleich gross); wer sie anders haben will, stellt es am Element ein.
   Geblieben ist nur, was kein Mass ist: `scale: 1` hebt `.nfs-3{scale:1.25}` auf,
   sonst waere der Warenkorb 25% groesser als Konto und Lupe. */
#all #topbar .cat-btn svg,
#all #topbar .cart-icon svg,
#all #topbar .nf-search-lupe > svg {
    scale: 1;
    display: block;
}
/* KEIN SONDERWERT MEHR FUER DIE LUPE.
   Sie hatte einen kleineren Anteil (65 statt 72), weil ihr Symbol ein gefuellter
   Pfad im viewBox 0 0 512 512 war und die Flaeche randlos ausnutzte. Seit sie im
   selben Massstab gezeichnet ist wie Konto und Warenkorb (0 0 24 24, Strich,
   Strichstaerke 2.2), gilt fuer alle Symbole dieselbe Regel darueber. Das ist der
   einfachere Weg: gleiche Geometrie statt Ausgleichsrechnung im Stylesheet. */
/* DER BURGER IST JETZT AUCH EIN SVG (24x24, Strichstaerke 2.2 – identisch zu
   Konto, Warenkorb und Lupe, siehe header.php). Damit faellt sein Sonderweg weg:
   `font-size: 55cqmin` machte aus einem 40px-Knopf 22px Schrift, und die sichtbare
   Tinte eines Zeichens ist nochmal kleiner – neben den drei SVGs wirkte er zu
   klein, auf dem iPhone besonders. `line-height: 1` bleibt: es kostet nichts und
   haelt den Knopf ruhig, falls jemand doch ein Zeichen hineinschreibt.
   Ausserdem hier zuruecknehmen: die allgemeine Regel `#all .cat-btn svg
   {width:60%;height:60%}` (weiter oben) schrumpfte das Symbol auf 60 % des
   Knopfes. Die anderen drei rendern in ihrer eigenen Groesse; damit alle vier
   gleich gross sind, muss der Burger das auch. */
#all #topbar .cat-btn { line-height: 1; }
#all #topbar .cat-btn svg { width: auto; height: auto; }

/* Suchfeld: NUR die Hoehe folgt dem Element – die Breite steuert das Ausklappen
   (40px eingeklappt, 100% offen, mit Uebergang). Wuerde man sie hier festnageln,
   klappt die Suche nicht mehr auf. */
#all #topbar .nf-search-field { height: 100%; }
#all #topbar .nf-search-field input { height: 100%; box-sizing: border-box; }
#all .manuimg{width: 80px;
    padding: 10px;
    max-height: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 0px 15px 0px;
    /* Hersteller-Logo (z. B. NEOFIRE) ohne Hintergrund-Kaestchen: das Logo steht direkt
       auf der Seite (dunkel/hell = schwarz oder weiss je nach Motiv), kein weisser Kasten. */
    background: transparent;}

#all #logo{ font-weight:bold; font-size: 28px; white-space: nowrap;}

/* Header-Suchfeld: füllt die Mitte, mit Lupe-Icon; Logo bleibt einzeilig */
/* KEINE Mindestbreite und KEIN fester Rand mehr: `min-width:40px` und
   `margin:0 5px 0 12px` haben die Breite der Suche vorgegeben, obwohl sie im
   Designer eingestellt wird (dort standen 40px, gerendert wurden 50). Abstaende
   und Masse kommen aus der Konfiguration; hier bleibt nur die Anordnung. */
#all #topbar #core-search { flex: 1 1 auto; display: flex; justify-content: flex-end; position: relative; }
/* Icon-Container NICHT 100% breit im Topbar – sonst quetscht er das Suchfeld. */
#all #topbar #floating-cart { width: auto; flex: 0 0 auto; margin-left: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
/* Suchfeld (Theme-/Dark-Mode-basiert): innen Chips + Eingabe, rechts der Button */
/* Ausklappende Suche (Apple-Stil): eingeklappt nur die Lupe, offen ein Pillen-Feld.
   Rechts verankert -> das Feld wächst nach links, die Lupe wandert mit. */
#all #topbar .nf-search-field {
    display: flex; align-items: center;
    width: 40px; max-width: 100%; min-height: 40px; box-sizing: border-box;
    border: 0; border-radius: 20px;
    background: transparent; color: var(--main-color);
    overflow: hidden;
    transition: width .34s cubic-bezier(.22,.61,.36,1);
}
#all #topbar .nf-search-field.open {
    width: 100%;
}
/* Lupe folgt der HOEHE des Suchfeldes: macht man die Suche im Designer hoeher,
   waechst das Symbol mit. Die Breite bleibt quadratisch zur Hoehe, damit der
   Knopf rund bleibt. 40px sind das Mindestmass (Aussehen wie bisher). */
/* KEINE feste Groesse mehr aus dieser Datei: Hoehe, Mindesthoehe, Mindestbreite
   und aspect-ratio haben hier die Lupe festgenagelt – im Designer liess sie sich
   dadurch nicht verstellen. Groesse gehoert an das Element im Designer; hier
   bleibt nur, was Aussehen und Zentrierung betrifft. */
#all #topbar .nf-search-lupe {
    flex: 0 0 auto;
    /* Hoehe folgt dem Element (im Designer einstellbar), Breite ergibt sich aus dem
       Symbol. NICHT width:100% – die Lupe steht in derselben Flex-Reihe wie das
       Suchfeld und wuerde ihm die ganze Breite wegnehmen (genau das ist am
       2026-08-08 passiert: aufgeklappte Suche mit 14px breitem Eingabefeld). */
    height: 100%; width: auto;
    padding: 0; margin: 0; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--main-color); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
}
/* Das Symbol fuellt den Knopf – wie gross der ist, entscheidet der Designer.
   Vorher standen hier feste Werte (erst 60 %, dann px); damit war jede Eingabe
   im Panel wirkungslos. Die Deckelung auf 100 % verhindert nur das Ueberlaufen. */
/* Die Groesse der Lupe steht weiter unten bei den Bedienelementen (relativ zur
   Box, nicht in Pixeln). Hier stand zuletzt `height:auto` – als SPAETERE Regel
   mit gleichem Selektor hat sie die dortige Angabe ausgehebelt, und die Lupe fiel
   auf ihre SVG-Attribute (21px) zurueck. Keine zweite Angabe an dieser Stelle. */
/* Close-× – nur mobil bei offener Suche sichtbar (siehe Media-Query) */
#all #topbar .nf-search-close {
    display: none;
    flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0; margin: 0; border: 0;
    align-items: center; justify-content: center;
    background: transparent; color: var(--main-color); cursor: pointer;
    font-size: 28px; line-height: 1;
    -webkit-appearance: none; appearance: none;
}
#all #topbar .nf-search-inner {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 4px 12px 4px 2px; cursor: text;
    opacity: 0; transition: opacity .2s ease .06s;
}
#all #topbar .nf-search-field.open .nf-search-inner { opacity: 1; }
#all #topbar #core-search-input {
    flex: 1 1 90px; min-width: 90px; height: 36px;
    box-sizing: border-box; border: none; border-bottom: solid 1px #dcdcdc !important; border-radius: 0px; outline: none; background: transparent;
    padding: 12px; font-size: 15px; color: inherit; caret-color: var(--main-color);
    -webkit-appearance: none; appearance: none;
}
#all #topbar #core-search-input::-webkit-search-decoration,
#all #topbar #core-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
#all #topbar #core-search-input::placeholder { color: var(--main-color); opacity: .5; }

/* Wort-Chips: graue Tabs mit schwarzem × */
#all #topbar .nf-chip {
    display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
    padding: 9px 5px 9px 9px; border-radius: 11px;
    background: #f7f8f9; color: #222; border: 0.5px solid rgba(0,0,0,0.06);
    font-size: 13px; font-weight: 600; line-height: 1.4;
}
#all #topbar .nf-chip .nf-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#all #topbar .nf-chip .nf-chip-x {
    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 4px; background: none; color: #000;
    font-size: 15px; line-height: 1; cursor: pointer;
}
#all #topbar .nf-chip .nf-chip-x:hover { background: none; }

/* Live-Such-Dropdown: hängt an <body> (außerhalb #all) -> Schrift/Look explizit,
   sonst Browser-Standard (Serif) und wirkt „ungestylt". */
#core-search-dropdown { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.35; color: #222; }
#core-search-dropdown .core-search-item:hover { background: var(--core-search-hover, rgb(190 190 190 / 10%)); }
#core-search-dropdown .core-search-item:last-of-type { border-bottom: 0 !important; }
#core-search-dropdown .core-search-all:hover { background: rgba(43,108,255,0.06); }
@media (max-width: 640px) {
    #all #topbar { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
    /* OFFEN: Hamburger/Logo/Icons ganz ausblenden -> Suche über die ganze Breite. */
    #all #topbar.nf-search-expanded > .cat-btn,
    #all #topbar.nf-search-expanded > #logo,
    #all #topbar.nf-search-expanded > #floating-cart { display: none !important; }
    #all #topbar.nf-search-expanded #core-search { flex-basis: 100%; order: 0; margin: 0; }
    /* SCHLIESSEND: Icon-Platz nur unsichtbar (bleibt im Layout), damit das Feld genau
       bis zur Ausgangsposition der Lupe einklappt; danach werden sie wieder sichtbar.
       nowrap verhindert, dass der Icon-Block währenddessen umbricht (sonst bekäme die
       Suche kurz volle Breite und die Lupe schösse ganz nach rechts). */
    #all #topbar.nf-search-closing { flex-wrap: nowrap; }
    #all #topbar.nf-search-closing > .cat-btn,
    #all #topbar.nf-search-closing > #logo,
    #all #topbar.nf-search-closing > #floating-cart { visibility: hidden; }
    #all #topbar .nf-search-field.open { width: 100%; }
    /* × zum Schließen – nur im offenen Zustand; beim Klick sofort weg (nicht während des Einklappens) */
    #all #topbar.nf-search-expanded .nf-search-close { display: inline-flex; }

    /* Seit der Kopf aus dem Designer kommt, steckt jedes Element mehrere Ebenen
       tief in Reihen und Spalten (#topbar > .nf-lay-row > … > #core-search).
       Die Regeln oben sprechen direkte Kinder an und greifen dort ins Leere –
       die Suche klappte nur noch in ihrer Spalte auf. Statt die Nachbarn einzeln
       auszublenden (was ihre Verschachtelung kennen muesste), legt sich die Suche
       jetzt ueber die ganze Kopfzeile: Logo, Burger und Symbole verschwinden
       darunter, egal wie der Kopf gerade gebaut ist. */
    /* Bezugspunkt NUR waehrend des Aufklappens setzen. Unbedingt gesetzt wuerde
       er alles absolut Positionierte im Kopf (z. B. die Kategorie-Box) auf den
       Topbar umhaengen statt auf den bisherigen Vorfahren. */
    #all #topbar.nf-search-expanded,
    #all #topbar.nf-search-closing { position: relative; }
    #all #topbar.nf-search-expanded #core-search,
    #all #topbar.nf-search-closing  #core-search {
        position: absolute;
        inset: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 15px;
        box-sizing: border-box;
        background: var(--main-background, #ffffff);
    }
    /* Beim Einklappen laeuft die Breite zurueck – die Ueberlagerung bleibt so
       lange stehen, sonst springt das Feld mitten in der Bewegung zurueck in
       seine Spalte. */
    #all #topbar.nf-search-expanded #core-search .nf-search-field,
    #all #topbar.nf-search-closing  #core-search .nf-search-field { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   DIESELBE AUFKLAPP-SUCHE IN DER MOBIL-VORSCHAU DES DESIGNERS
   ---------------------------------------------------------------------------
   Der Block darueber haengt an `@media (max-width: 640px)`. Im Designer wird die
   Mobil-Ansicht aber nur durch eine schmale FLAECHE nachgestellt – das Browser-
   fenster bleibt breit, die Media Query feuert nie. Dort blieb die Suche deshalb
   in ihrer Spalte und verdeckte weder Logo noch Burger, obwohl es am echten
   Handy laengst funktionierte.
   Darum dieselben Regeln ein zweites Mal an der Vorschau-Klasse `nfed-vp-phone`
   (setzt der Editor an <html>). NUR Mobil – Tablet und Desktop bleiben, wie sie
   sind. Aendert jemand oben etwas, muss es hier mitgezogen werden. */
html.nfed-vp-phone #all #topbar { position: relative; }
html.nfed-vp-phone #all #topbar.nf-search-expanded > .cat-btn,
html.nfed-vp-phone #all #topbar.nf-search-expanded > #logo,
html.nfed-vp-phone #all #topbar.nf-search-expanded > #floating-cart { display: none !important; }
html.nfed-vp-phone #all #topbar.nf-search-closing { flex-wrap: nowrap; }
html.nfed-vp-phone #all #topbar.nf-search-closing > .cat-btn,
html.nfed-vp-phone #all #topbar.nf-search-closing > #logo,
html.nfed-vp-phone #all #topbar.nf-search-closing > #floating-cart { visibility: hidden; }
html.nfed-vp-phone #all #topbar .nf-search-field.open { width: 100%; }
html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-search-close { display: inline-flex; }
html.nfed-vp-phone #all #topbar.nf-search-expanded #core-search,
html.nfed-vp-phone #all #topbar.nf-search-closing  #core-search {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
    background: var(--main-background, #ffffff);
}
html.nfed-vp-phone #all #topbar.nf-search-expanded #core-search .nf-search-field,
html.nfed-vp-phone #all #topbar.nf-search-closing  #core-search .nf-search-field { flex: 1 1 auto; }



#all .cat-box{
    margin-left: -320px;
    width:320px;
    height:100%;
    background:#fff;
    overflow:hidden;
}



#all #catStack{
    height:calc(100% - 50px);
}


#all .cat-item{
    padding:12px;
    border-bottom:1px solid #eee;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
}



#all .back-btn{
    padding:12px;
    font-weight:bold;
    border-bottom:1px solid #ddd;
    cursor:pointer;
    background:#fafafa;
}

/* ---------------------------------------------------------------------------
   BEWEGUNG IM MENUE
   ---------------------------------------------------------------------------
   Zwei Gesten, mehr nicht:

   1. Menuepunkte bekommen einen Strich, der beim Betreten von LINKS einfaehrt
      und beim Verlassen nach RECHTS hinauslaeuft. Das ist ein einziger
      Umschlag von `transform-origin` – deshalb laeuft der Strich auch beim
      Weggehen weiter in die Bewegungsrichtung und springt nicht zurueck.
   2. Unterkategorien ruecken beim Ueberfahren ein Stueck nach rechts.

   3. Die Kategorie, auf der man gerade steht, BEHAELT ihren Strich.

   Farbe und Abstaende stehen hier bewusst NICHT drin: der Strich nimmt mit
   `currentColor` die Schriftfarbe an, die im Designer eingestellt ist. Eine
   feste Farbe wuerde das Farbfeld im Panel wirkungslos machen. Dasselbe gilt
   fuer die Hoehe des Striches in der Mega-Leiste – die kommt dort aus der
   Einstellung `--nf-mega-mh`.
   --------------------------------------------------------------------------- */

/* DAUER UND KURVE STEHEN NUR HIER.
   Das Menue soll auffahren und dabei ausklingen: zuegig herein, am Ende sanft
   auslaufen. Das ist eine Kurve mit Schwerpunkt am Ende – kein `linear`, kein
   `ease` (das bremst auch am Anfang) und kein hartes Stoppen.
   Beide Werte gelten fuer ALLES, was sich im Menue bewegt: Eintraege der
   Mega-Leiste, deren Striche, die Eintraege im Overlay und dessen Einfahren.
   Das Mega-Menue baut sein CSS in PHP zusammen (admin/includes/layout_lib.php)
   und greift auf genau diese beiden Variablen zu. Wer hier dreht, dreht ueberall
   – genau deshalb gibt es nur diese eine Stelle.
   Dauer und Kurve sind reine Gestaltung und duerfen fest stehen; alles, was der
   Nutzer im Designer einstellen kann, gehoert dagegen NICHT hierher. */
:root {
    --nf-nav-dauer: .28s;
    --nf-nav-kurve: cubic-bezier(.22, .61, .36, 1);
}

/* LINKS OHNE href BRAUCHEN DEN ZEIGER AUSDRUECKLICH.
   nf_nav()/nf_nav_open() geben ein `href` nur aus, wenn es eine SEO-Adresse
   gibt und der Shop nicht eingebettet laeuft. Sonst kommt ein
   `<a role="button" data-nav=… data-uuid=…>`, das per JavaScript oeffnet.
   Ein <a> OHNE href ist fuer den Browser aber kein Link: er zeigt darueber den
   TEXT-Cursor statt der Hand. Genau das sieht man in einer frischen
   Installation, denn deren Systemseiten haben noch keine SEO-Adressen
   (die Saat liefert `urls` bewusst nicht mit). Betrifft ebenso jede
   Einbettung, da laufen ALLE Links ueber data-Attribute. */
#all a.nf-link,
#all [data-nav],
#all .cat-btn {
    cursor: pointer;
}

/* --- 1. Menuepunkte in Kopf und Menue-Flaeche --- */
#all .nf-lay-navlink,
#all .cat-btn {
    position: relative;   /* Bezugspunkt fuer den Strich – sonst haengt er am Fenster */
}

#all [data-nf-lay-region="header"] .nf-lay-navlink::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: currentColor;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform var(--nf-nav-dauer) var(--nf-nav-kurve),
                opacity   var(--nf-nav-dauer) var(--nf-nav-kurve);
    pointer-events: none;
}

#all [data-nf-lay-region="header"] .nf-lay-navlink:hover::after,
#all [data-nf-lay-region="header"] .nf-lay-navlink:focus-visible::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink:hover::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

/* --- 3. WO BIN ICH: die aktive Seite behaelt ihren Strich ---------------------
   `is-current` setzt der Renderer beim Ausgeben (layout_ist_aktuelle_seite) –
   der Zustand haengt also NICHT am Zeiger. Faehrt man ueber einen anderen
   Punkt, bleibt dieser Strich stehen; die Ausblende-Bewegung trifft ihn nicht,
   weil seine Sichtbarkeit gar nicht aus der Hover-Regel kommt.
   Er tritt etwas zurueck (Deckkraft .55), damit „hier bin ich" und „hier zeige
   ich gerade hin" nicht gleich aussehen. Zeigt man auf ihn selbst, geht er auf
   volle Deckkraft.
   Der harte `text-decoration:underline` aus der Haus-Regel `.nf-lay-el
   a.is-current` wird hier zurueckgenommen – sonst laegen zwei Striche
   uebereinander, und der harte, unbewegte gewaenne optisch.
   `is-inpath` steht gleichberechtigt daneben: die gezeigte Seite liegt IM Ast
   dieses Punktes – man steht also in einer Unterkategorie davon und die
   Hauptkategorie oben bleibt markiert. Sie sehen absichtlich gleich aus; der
   Unterschied liegt allein in `aria-current`, das nur die wirklich aufgerufene
   Seite bekommt. */
#all [data-nf-lay-region="header"] .nf-lay-navlink.is-current,
#all [data-nf-lay-region="header"] .nf-lay-navlink.is-inpath,
#all [data-nf-lay-region="menu"] .nf-lay-navlink.is-current,
#all [data-nf-lay-region="menu"] .nf-lay-navlink.is-inpath {
    text-decoration: none;
}
#all [data-nf-lay-region="header"] .nf-lay-navlink.is-current::after,
#all [data-nf-lay-region="header"] .nf-lay-navlink.is-inpath::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink.is-current::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink.is-inpath::after {
    opacity: .55;
    transform: scaleX(1);
    transform-origin: 0 50%;
}
#all [data-nf-lay-region="header"] .nf-lay-navlink.is-current:hover::after,
#all [data-nf-lay-region="header"] .nf-lay-navlink.is-inpath:hover::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink.is-current:hover::after,
#all [data-nf-lay-region="menu"] .nf-lay-navlink.is-inpath:hover::after {
    opacity: 1;
}

/* --- 2. Unterkategorien im Menue --- */
#all .cat-item {
    transition: transform var(--nf-nav-dauer) var(--nf-nav-kurve),
                background-color var(--nf-nav-dauer) var(--nf-nav-kurve);
}
#all .cat-item:hover {
    transform: translateX(5px);
}

/* KEIN EINFAHRENDER STRICH IM KATEGORIE-BAUM.
   Die Menue-Leiste oben (Mega-Menue) zieht beim Ueberfahren einen Strich unter
   die Beschriftung – im Baum links wirkte dasselbe unruhig: dort steht Zeile
   unter Zeile, und der Strich las sich wie eine zweite Trennlinie. Die Zeile
   ruecken beim Ueberfahren weiterhin ein Stueck ein (`transform: translateX`),
   das reicht als Rueckmeldung.
   Die Regeln standen hier; entfernt sind sie ganz, nicht ueberschrieben –
   sonst haette man beim Suchen zwei Stellen gegeneinander zu lesen.
   Der frueher zusaetzlich markierte „hier stehst du"-Strich (`is-current`)
   faellt damit ebenfalls weg. */

/* Der Zurueck-Knopf gehoert zur selben Liste und soll sich gleich verhalten. */
#all .back-btn {
    transition: transform var(--nf-nav-dauer) var(--nf-nav-kurve);
}
#all .back-btn:hover {
    transform: translateX(5px);
}

/* Wer Bewegung abgeschaltet hat, bekommt keine: nichts rueckt ein, nichts faehrt
   ein. Der Strich verschwindet aber nicht – er steht schon in Ruhe auf voller
   Breite und wird nur weich ein- und ausgeblendet. Vorher stand hier bloss
   `transition: none`; dann sprang der Strich schlagartig auf volle Breite, was
   haerter wirkt als ein Blenden. Dieselbe Loesung wie beim Mega-Menue
   (admin/includes/layout_lib.php), damit sich Kopfleiste und Menue gleich
   verhalten.

   Reihenfolge ist hier tragend: dieser Block MUSS nach den Hover-Regeln stehen.
   Er hat dieselbe Genauigkeit, eine Media Query erhoeht sie nicht – es
   entscheidet allein, wer weiter unten steht. */
@media (prefers-reduced-motion: reduce) {
    #all [data-nf-lay-region="header"] .nf-lay-navlink::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink::after {
        transform: scaleX(1);
        transform-origin: 0 50%;
        opacity: 0;
        transition: opacity .12s ease;
    }
    #all [data-nf-lay-region="header"] .nf-lay-navlink:hover::after,
    #all [data-nf-lay-region="header"] .nf-lay-navlink:focus-visible::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink:hover::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink:focus-visible::after { opacity: 1; }

    /* Die aktive Seite bleibt auch ohne Bewegung markiert – sie faehrt nur
       nicht mehr ein, sondern steht einfach da. */
    #all [data-nf-lay-region="header"] .nf-lay-navlink.is-current::after,
    #all [data-nf-lay-region="header"] .nf-lay-navlink.is-inpath::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink.is-current::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink.is-inpath::after { opacity: .55; }
    #all [data-nf-lay-region="header"] .nf-lay-navlink.is-current:hover::after,
    #all [data-nf-lay-region="header"] .nf-lay-navlink.is-inpath:hover::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink.is-current:hover::after,
    #all [data-nf-lay-region="menu"] .nf-lay-navlink.is-inpath:hover::after { opacity: 1; }

    #all .cat-item,
    #all .back-btn { transition: none; }
    #all .cat-item:hover,
    #all .back-btn:hover { transform: none; }
}

html, body {

    margin: 0;
}

body {



}

/* =========================
   LAYOUT MUSS WACHSEN
========================= */


/* =========================
   FOOTER
========================= */
#all .site-footer {
    margin-top: auto;
    padding: 56px 24px 34px;
    border-top: none;
    /* Farbe wie die linke Admin-Navi (Verlauf #232227 -> #19181c). */
    background: linear-gradient(180deg, #232227, #19181c);
    font-size: 14px;
    color: #c9c9cf;
}
/* USt-/Rechtstext: rechts in der unteren Zeile, dezent. */
#all .footer-center{
    flex: 0 1 auto;
    padding-top: 0;
    /* KEINE feste Ausrichtung mehr – die kommt aus dem Designer (Element-Ausrichtung).
       Vorher: margin-left:auto + text-align:right haben die "mittig"-Einstellung
       ueberschrieben. */
    text-align: inherit;
    color: #8b8b93;
    font-size: 12.5px;
    letter-spacing: .01em;
}

#all .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 24px;
    row-gap: 12px;
}

/* Seiten-Links: mehrspaltig, linksbündig (Profi-Footer-Look), auf dunklem Grund.
   Flache Linkliste -> CSS-Spalten; darunter eine gestrichelte Trennlinie. */
#all .page_links {
    flex: 1 1 100%;
    columns: 4 190px;
    column-gap: 40px;
    margin: 0 0 26px;
    padding-bottom: 26px;
    border-bottom: 1px dashed #3a3a3a;
}
#all .checkout-grid textarea{

    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:14px;
    box-sizing:border-box;
    outline:none;
    resize:vertical;
    min-height:140px;
}

#all #requestBtn{margin-top: 15px;
    width: 100%;
    padding: 15px;
    background: black;
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;}

#all .page_links a {
    display: block;
    color: #c9c9cf;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.45;
    /* kompakt, KEIN Button-Look – nur Text. Kein Hintergrund/Rahmen/Breite. */
    padding: 3px 0;
    margin: 0;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    text-align: inherit;
    break-inside: avoid;
    transition: color .15s ease;
}
#all .page_links a:hover { color: #ffffff; text-decoration: none; }
/* Punkt-Trenner der alten einreihigen Navi entfaellt im Spalten-Layout. */
#all .page_links a + a::before { content: none; }

/* Copyright: untere Zeile links, dezent. */
#all .footer-bottom {
    flex: 1 1 auto;
    font-size: 13px;
    color: #8b8b93;
    /* KEINE feste Ausrichtung – die kommt aus dem Designer (Element-Ausrichtung).
       Vorher: text-align:left hat die "mittig"-Einstellung ueberschrieben. */
    text-align: inherit;
    margin-top: 0;
}

/* Mobil: mehrspaltig-linksbündig ist zu eng -> eine Spalte, zentriert. */
@media (max-width: 750px) {
    #all .page_links { columns: 1 !important; column-gap: 0; text-align: center; }
    #all .page_links a { text-align: center; padding: 5px 0; }
    #all .footer-bottom, #all .footer-center { text-align: center; margin-left: 0; flex-basis: 100%; }
}

/* ============================================================================
   FOOTER als freie Layout-Fläche (data-nf-lay-region="footer") – moderner,
   mehrspaltiger, mehrsprachiger Shop-Footer. Greift NUR, wenn im Designer ein
   Footer-Layout gesetzt ist (rows). Der klassische .page_links-Footer bleibt
   unberührt. Farbwelt = dunkles Footer-Schema (#232227→#19181c), Akzent #189eff.
   ============================================================================ */
/* Polster der Region: ENTFERNT – gehoert in die Konfiguration (Fussbereich
   anklicken -> Maße -> Innenabstand), nicht in diese Datei. */
/* AEUSSERE Bereichs-Spalte (Vollbreiten-Streifen): der Footer-Container darf die
   Frame-Spalte NICHT mehr auf 1200 einschnueren – die Maximalbreite kommt jetzt aus
   der INNEREN Spalte (.nf-region-inner, ueber die normale Spalten-Konfiguration).
   Greift NUR bei umschlossenem Footer (:has der Frame-Spalte); klassischer/nicht
   umgebauter Footer bleibt exakt wie bisher (deploy-sicher). */
#all .footer-inner:has(> .nf-lay-row > .nf-lay-col.nf-region-frame) { max-width: none; margin: 0; padding: 0; }
/* ALTE FUSSZEILEN-FLAECHE ENTFERNEN: sobald der Footer umgebaut ist (aeussere
   .nf-region-frame-Spalte vorhanden), darf .site-footer selbst KEINEN eigenen
   Hintergrund/Innenabstand mehr stellen – Farbe + vertikale Polsterung liefert
   jetzt die aeussere Spalte (bgcolor/pt/pb aus der Config, edge-to-edge). So sitzt
   der dunkle Streifen wirklich auf der Spalte und nicht mehr im hartcodierten CSS.
   Scope ueber :has(.nf-region-frame) -> klassische/nicht umgebaute Footer bleiben
   exakt wie bisher (deploy-sicher). */
#all .site-footer:has(.nf-region-frame),
#all .site-footer:has(> .footer-inner[data-nf-lay-region="footer"]) {
    background: none !important;
    padding: 0 !important;
    color: inherit;
}
/* Zweiter Haken NACHGEZOGEN: die Ausnahme hing an der Rahmenspalte. Auf dem
   Handy hat die Fusszeile keine — dort blieb der schwarze Streifen stehen,
   obwohl der Inhalt laengst aus dem Designer kommt. Jetzt zaehlt, dass die
   Fusszeile ueberhaupt aus einem Layout stammt. */
/* Auch die SCHRIFTFARBE gehoert zum alten dunklen Streifen: `.site-footer`
   traegt #c9c9cf aus der dunklen Fassung. Der Hintergrund wurde hier laengst
   neutralisiert, die Farbe nicht — auf der hellen Flaeche stand der Text
   dadurch hellgrau auf hellgrau. Ist eine Rahmenspalte da, kommt die Farbe aus
   dem Designer, sonst bleibt alles wie gehabt. */
/* Region-Wrapper-Spalten (Header/Content/Footer/Banner) sind reine Struktur-Huellen:
   KEIN 8px-Default-Padding (das war asymmetrisch, weil oben/unten separat auf 0 stand).
   Padding kommt AUSSCHLIESSLICH aus der Config (Innenabstand) und ist damit rundum gleich
   einstellbar. Default 0 = symmetrisch (0 rundum). Ueberschreibt den generischen 8px-Default. */
#all .nf-lay-col.nf-region-frame, #all .nf-lay-col.nf-region-inner { padding: 0; }
/* Region-Flaechen (Header/Content/Footer) NIE mit runden Ecken – weder die aeussere
   Vollbreiten-Flaeche (Frame, dient als Background) noch der max-width-Container (Inner).
   Eckig, immer. */
#all .nf-lay-col.nf-region-frame, #all .nf-lay-col.nf-region-inner { border-radius: 0; }
/* Backlink „neofire Core System": zentriert, Textfarbe/Hintergrund kommen inline aus
   footer.php (Kontrast zum Footer-Hintergrund). KEIN Hover-Farbwechsel – immer die
   Kontrastfarbe (color:inherit erbt die am Container gesetzte Kontrastfarbe). */
#all .nf-attribution { text-align: center; }
#all .nf-attribution a,
#all .nf-attribution a:hover,
#all .nf-attribution a:focus,
#all .nf-attribution a:visited { color: inherit !important; text-decoration: none !important; }
/* Spalten luftiger als der 8px-Default; letzte Reihe (Bottombar) ausgenommen.
   Trifft die INHALTS-Spalten – im nicht umgebauten Footer direkt (ohne Frame),
   im umgebauten Footer die Spalten INNERHALB der zentrierten Innen-Spalte. */
/* ENTZAUBERT: Beim UMGEBAUTEN Footer (Spalten innerhalb von .nf-region-inner) steht
   der Innenabstand jetzt in der Footer-Konfiguration (Designer -> Fusszeile -> Spalte
   -> Innenabstand, 6/22/24/22) und kommt als Inline-Stil an der Spalte an. Hier bleibt
   nur die Ruecklage fuer den NICHT umgebauten Footer (Spalten direkt in der Region,
   ohne Frame/Inner) – der hat keine Konfigurationsflaeche. */
/* Spalten-Polster (Desktop): ENTFERNT – steht jetzt an der Spalte im Designer. */
/* (Footer-Frame-Horizontal-Sonderregel entfernt: alle Region-Frames haben jetzt 0
   Default-Padding (config-gesteuert) und fluchten dadurch automatisch – Header, Content
   UND Footer.) */

/* --- Spaltentitel (heading in der Footer-Region) ---
   SCHRIFT GEHOERT DEM DESIGNER. Hier standen frueher Groesse (13px), Staerke
   (600), Farbe (#f3f3f6), Laufweite und GROSSSCHREIBUNG fest im Stylesheet.
   Damit liefen die Einstellungen aus dem Panel ins Leere: sie landen an der
   Huelle des Elements, die Ueberschrift darin holte sich ihre Werte weiter von
   hier. Geblieben sind nur Abstand und die Voraussetzung fuer den Strich
   darunter (position) – alles andere stellt man am Element ein. */
/* HIER STAND DIE UEBERSCHRIFT DES FUSSBEREICHS – mit Innenabstand und dem
   blauen Strich darunter (::after, 26x2 px, #189eff), beides fest im
   Stylesheet.

   BEIDES IST ENTFERNT. Abstand UND Strich sind Dinge, die man sieht und
   ändern will – sie gehoeren an das Element im Editor, nicht hierher. Eine
   CSS-Regel, die so etwas festhaelt, macht die Einstellung im Panel
   wirkungslos: man stellt etwas ein und nichts passiert.

   So baust du den Strich nach: am Titel-Baustein den unteren Rahmen setzen
   (Farbe #189eff, 2 px) oder eine schmale Trennlinie darunterlegen. Dann
   laesst er sich auch wieder wegnehmen. */

/* NUR DER BROWSER-STANDARD WIRD ABGERAEUMT. Eine <h3> bringt von sich aus
   1em Aussenabstand mit (hier gemessen: 27,93 px oben und unten). Der stammt
   nicht aus diesem Stylesheet, steht aber trotzdem im Weg: das Panel setzt
   seinen Wert an der Huelle des Bausteins, die Ueberschrift darin behielt
   ihren eigenen. Deshalb hier eine Null – KEIN Gestaltungswert, sondern das
   Wegraeumen einer fremden Vorgabe, damit die Einstellung im Editor
   ueberhaupt sichtbar wird. */
#all [data-nf-lay-region="footer"] h1,
#all [data-nf-lay-region="footer"] h2,
#all [data-nf-lay-region="footer"] h3,
#all [data-nf-lay-region="footer"] h4,
#all [data-nf-lay-region="footer"] p,
#all [data-nf-lay-region="footer"] ul,
#all [data-nf-lay-region="footer"] ol { margin: 0; padding: 0; }
#all [data-nf-lay-region="footer"] ul,
#all [data-nf-lay-region="footer"] ol { list-style: none; }

/* --- Link-Liste (navlink) --- */
/* DIE LINKS SCHLIESSEN LINKS AB, DAS DREIECK SETZT SICH DAVOR.
   Vorher lag das „›" IM Textfluss (`margin-right: 8px`): unsichtbar (opacity 0)
   belegte es trotzdem seinen Platz, und die Beschriftungen standen dauerhaft um
   Pfeilbreite + 8 px eingerueckt – sie fluchteten mit nichts.
   Jetzt haengt der Pfeil ABSOLUT LINKS NEBEN dem Text und ist damit aus dem
   Fluss heraus. Die Beschriftung steht immer an derselben Stelle – auch beim
   Ueberfahren; nur der Pfeil blendet daneben ein. Ein Zwischenstand hat den
   Text dabei nach rechts gerueckt: das Wort wanderte unter dem Zeiger weg und
   die Spalte wirkte unruhig. */
/* AUSGANGSWERTE GEHOEREN INS ELEMENT, ZUSTAENDE INS CSS.
   Hier standen Farbe (#c2c2c9), Groesse (13,5px), Zeilenhoehe und Laufweite.
   Sie trafen das <a> IM Baustein – die Einstellung am Baustein sitzt aber an
   seiner Huelle und kam deshalb nie an. Raus damit: ohne eigene Angabe erbt
   das <a> Farbe und Groesse von der Huelle, also von dem, was im Panel steht.

   GEBLIEBEN IST NUR MECHANIK UND DER ZUSTAND:
   `text-decoration: none` (sonst unterstreicht der Browser jeden Link),
   die Ausrichtung des Pfeils – und `:hover`. Ein Zustand laesst sich nicht als
   Zahl in ein Feld schreiben; dafuer gibt es kein Panel. Der gehoert hierher. */
#all [data-nf-lay-region="footer"] .nf-lay-navlink {
    position: relative;
    display: inline-flex; align-items: center;
    text-decoration: none;
    transition: color .16s ease;
}
#all [data-nf-lay-region="footer"] .nf-lay-navlink::before {
    /* Dunkelgrau statt des hellen Blaus: der Pfeil ist ein Hinweis, kein
       zweiter Blickfang neben der Schrift. Ueber eine Variable, damit er sich
       mitfaerben laesst, ohne diese Datei anzufassen. */
    content: "›"; color: var(--nf-navmark, #555555); font-weight: 700;
    position: absolute; left: -13px; top: 50%;
    opacity: 0; transform: translate(-4px, -50%);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}
/* WELCHE FLAECHE LOEST DEN ZUSTAND AUS – der BAUSTEIN, nicht der Link.
   Hier stand `.nf-lay-navlink:hover`, also der Link selbst. Die Farbe kommt
   aber aus den Farb-Regeln des Designers, und die haengen am Baustein-Rahmen
   (`[data-lay-el]:hover`) – der ist volle Spaltenbreite. Ergebnis: der Text
   faerbte sich schon, wenn der Zeiger weit neben der Schrift stand, waehrend
   der Pfeil erst ueber der Schrift erschien. Zwei Flaechen fuer denselben
   Zustand – das sieht aus wie ein Fehler, und genau so wurde es gemeldet.
   Jetzt loesen beide an derselben Flaeche aus: dem Baustein.
   Der Pfeil bleibt, wo er ist (links neben der Schrift) – er soll erscheinen,
   nicht wandern. `:focus-visible` bleibt am Link, denn die Tastatur landet
   auf dem Link und nicht auf dem Rahmen. */
#all [data-nf-lay-region="footer"] .nf-lay-el:hover .nf-lay-navlink,
#all [data-nf-lay-region="footer"] .nf-lay-navlink:focus-visible { color: #ffffff; }
#all [data-nf-lay-region="footer"] .nf-lay-el:hover .nf-lay-navlink::before,
#all [data-nf-lay-region="footer"] .nf-lay-navlink:focus-visible::before { opacity: 1; transform: translate(0, -50%); }

/* WO BIN ICH – im Fussbereich.
   `is-current` setzt der Renderer beim Ausgeben (layout_ist_aktuelle_seite), und
   auf Datenschutz/AGB/Impressum kam die Klasse auch korrekt an. Sichtbar war sie
   nur nicht: die allgemeine Regel `.nf-lay-el a.is-current{font-weight:600;
   text-decoration:underline}` verliert gegen die Zeile weiter oben
   (`#all [data-nf-lay-region="footer"] .nf-lay-navlink` – ID + Attribut + Klasse).
   Farbe und Unterstrich wurden damit zurueckgesetzt, uebrig blieb ein kaum
   erkennbarer Unterschied in der Schriftstaerke.
   Statt hier einen Unterstrich zu erzwingen, bekommt die aktuelle Seite genau den
   Zustand, den der Fussbereich ohnehin fuers Hervorheben benutzt: weiss, mit dem
   blauen Pfeil davor. Eine Bildsprache statt eines zweiten Zeichens – und der
   Pfeil steht schon im Markup, es wird nichts hinzugefuegt. */
#all [data-nf-lay-region="footer"] .nf-lay-navlink.is-current { color: #ffffff; }
#all [data-nf-lay-region="footer"] .nf-lay-navlink.is-current::before { opacity: 1; transform: translate(0, -50%); }

/* --- Hotline-Block (Spalte 1) --- */
#all [data-nf-lay-region="footer"] .footer-phone {
    display: inline-block;
    font-size: 23px; font-weight: 700; letter-spacing: .01em; line-height: 1.15;
    color: #ffffff; text-decoration: none;
    transition: color .16s ease;
}
#all [data-nf-lay-region="footer"] .footer-phone:hover { color: #189eff; }
#all [data-nf-lay-region="footer"] .footer-hotline-hours {
    font-size: 13.5px; font-weight: 600; color: #d9d9df;
}
#all [data-nf-lay-region="footer"] .footer-hotline-note {
    font-size: 12.5px; color: #8b8b93;
}
#all [data-nf-lay-region="footer"] .footer-claim {
    font-size: 13px; line-height: 1.55; color: #a7a7af; max-width: 26ch;
}

/* --- Kontakt-Block (Spalte 4) --- */
#all [data-nf-lay-region="footer"] .footer-contact-text {
    font-size: 13.5px; line-height: 1.6; color: #b9b9c0; max-width: 30ch;
}
#all [data-nf-lay-region="footer"] .footer-contact-brand {
    font-size: 14px; font-weight: 600; color: #f3f3f6;
}

/* --- Untere Zeile: feine Trennlinie über Copyright + MwSt, zentriert gestapelt --- */
#all [data-nf-lay-region="footer"] .footer-bottombar {
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex; flex-direction: column; align-items: center;
}
#all [data-nf-lay-region="footer"] .footer-bottombar .footer-bottom,
#all [data-nf-lay-region="footer"] .footer-bottombar .footer-center {
    flex: 0 0 auto;
}

/* --- Mobil (≤750px): Spalten gestapelt + zentriert --- */
@media (max-width: 750px) {
    /* Spalten-Polster (Handy): ENTFERNT – steht in der MOBIL-Variante am
       Spalten-Element (der Designer speichert pro Endgeraet). */
    /* HIER STAND: padding: 18px 16px !important fuer die Innen-Spalten des Footers –
       ausdruecklich, um den Inline-Wert aus der Konfiguration zu ueberstimmen.
       ENTFERNT. Genau diese Werte stehen jetzt in der MOBIL-VARIANTE des Footers
       (chrome.footer.layout_dev.phone) und kommen als Inline-Stil aus dem Designer.
       Abstaende und Hoehen gehoeren in die Konfiguration, nicht in diese Datei. */
    /* AUSRICHTUNG GEHOERT DEM DESIGNER.
       Hier stand `text-align: center !important` fuer Ueberschriften, Elemente und
       Links des Fussbereichs – auf dem Handy war damit alles zwangsweise mittig,
       und jede Einstellung aus dem Designer lief ins Leere. ENTFERNT: Wie der
       Fussbereich auf dem Handy ausgerichtet ist, stellt man in der MOBIL-Variante
       ein (Spalte/Element → Ausrichtung); der Designer speichert pro Endgeraet.
       Der Strich unter der Ueberschrift richtet sich jetzt nach dem Text statt
       fest nach der Mitte. */
    #all [data-nf-lay-region="footer"] .nf-lay-navlink::before { display: none; }
    #all [data-nf-lay-region="footer"] .nf-lay-el > a,
    #all [data-nf-lay-region="footer"] .nf-lay-navlink { display: block; }
    /* Ueberschriften ragten 4px ueber den rechten Rand hinaus (36..394 bei 390px
       Bildschirm), weil sie die Spaltenbreite ohne deren Polster rechneten. */
    #all [data-nf-lay-region="footer"] h1,
    #all [data-nf-lay-region="footer"] h2,
    #all [data-nf-lay-region="footer"] h3,
    #all [data-nf-lay-region="footer"] h4 { max-width: 100%; box-sizing: border-box; }

    /* FOOTER ALS AUFKLAPPER (Handy)
       Untereinander gestapelt ist der Footer auf dem Handy sehr lang – man scrollt
       an drei Blöcken vorbei, bevor die Seite zu Ende ist. Jede Spalte mit einer
       Überschrift wird deshalb zu einem Aufklapper: sichtbar bleibt die
       Überschrift, der Inhalt kommt auf Tipp. Spalten OHNE Überschrift (z. B. die
       untere Zeile mit Copyright) bleiben unverändert offen.
       Die Klassen setzt das kleine Skript in footer.php. */
    /* !important: der Renderer schreibt display:block als INLINE-Stil an jedes
       Element – ohne das bliebe der zugeklappte Inhalt sichtbar. */
    #all [data-nf-lay-region="footer"] .nf-facc > .nf-lay-el:not(.nf-facc-head) { display: none !important; }
    #all [data-nf-lay-region="footer"] .nf-facc.is-open > .nf-lay-el { display: block !important; }
    /* `padding-top/bottom: 4px !important` ENTFERNT – Abstand am Element. */
    #all [data-nf-lay-region="footer"] .nf-facc-head { cursor: pointer; position: relative; user-select: none; }
    /* Pfeil rechts neben der zentrierten Überschrift – im Fluss, damit er die
       Zentrierung nicht verschiebt. */
    #all [data-nf-lay-region="footer"] .nf-facc-head::after {
        content: '';
        position: absolute; right: 4px; top: 50%;
        width: 8px; height: 8px; margin-top: -6px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); opacity: .6;
        transition: transform .18s ease;
    }
    #all [data-nf-lay-region="footer"] .nf-facc.is-open > .nf-facc-head::after {
        transform: rotate(-135deg); margin-top: -2px;
    }

    /* ZUGEKLAPPT: Ueberschrift mittig, Trennlinie hell.

       Die Ueberschrift bringt aus dem Designer einen Abstand nach unten mit
       (fuer den Inhalt darunter). Ist der Aufklapper zu, steht darunter nichts
       mehr — der Titel sass dadurch sichtbar zu hoch in seiner Zeile. Zu
       bleibt der Abstand deshalb weg; offen gilt er wie gehabt.

       Die Linie ist eine EINSTELLUNG der Spalte (Designer) — sie wird dort
       geaendert, nicht hier ueberschrieben.*/
    #all [data-nf-lay-region="footer"] .nf-facc:not(.is-open) > .nf-facc-head {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #all [data-nf-lay-region="footer"] .nf-facc:not(.is-open) > .nf-facc-head > * {
        margin-top: 0;
        margin-bottom: 0;
    }
    #all [data-nf-lay-region="footer"] .nf-facc {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #all [data-nf-lay-region="footer"] .footer-claim,
    #all [data-nf-lay-region="footer"] .footer-contact-text { max-width: none; }
}

/* === Mobil-Kopfzeile: die freie Header-Fläche bei schmaler Breite in EINE Reihe
   zwingen (Logo schrumpft, Icons bleiben rechts) statt umzubrechen. Gilt für echte
   Handys (@media) UND die Designer-Mobil-Vorschau (html.nfed-vp-phone). === */
@media (max-width: 750px) {
    #all [data-nf-lay-region="header"] > .nf-lay-row { flex-wrap: nowrap !important; align-items: center; }
    #all [data-nf-lay-region="header"] > .nf-lay-row > .nf-lay-col { min-width: 0 !important; }
    /* Logo VERKLEINERN, nicht ZUSCHNEIDEN.
       Hier stand: width/max-width 22px, height 34px, object-fit: cover. Das hat
       jedes Bild in der Kopfzeile auf einen 22px-Ausschnitt beschnitten – vom Logo
       blieb die Flamme, der Schriftzug war weg. Und es hat jede Einstellung aus dem
       Designer ueberstimmt: was man im Admin eingab, kam nie an.
       Jetzt nur noch eine Hoehen-Grenze; die Breite ergibt sich aus dem Seiten-
       verhaeltnis, und eine im Designer gesetzte Breite gewinnt. */
    #all [data-nf-lay-region="header"] img { max-width: 100%; width: auto; height: auto; max-height: 34px; object-fit: contain; }
}
html.nfed-vp-phone #all [data-nf-lay-region="header"] > .nf-lay-row { flex-wrap: nowrap !important; align-items: center; }
html.nfed-vp-phone #all [data-nf-lay-region="header"] > .nf-lay-row > .nf-lay-col { min-width: 0 !important; }
html.nfed-vp-phone #all [data-nf-lay-region="header"] img { max-width: 100%; width: auto; height: auto; max-height: 34px; object-fit: contain; }

/* === Mobil-Standard: Inhalts-Spalten STAPELN (Bild oben, dann alles darunter),
   damit Layouts OHNE eigene Mobil-Variante nicht gequetscht nebeneinander stehen.
   Gilt für echte Handys (@media) UND die Designer-Mobil-Vorschau (html.nfed-vp-phone).
   Header-Region ausgenommen (behält ihre einreihige Regel). Ein per-Gerät
   ausgespieltes Custom-Layout (Marker .nf-dev-served) kann es später abschalten. === */
@media (max-width: 750px) {
    #all:not(.nf-dev-served) .nf-lay-row > .nf-lay-col { flex: 1 1 100% !important; max-width: 100% !important; }
    #all [data-nf-lay-region="header"] > .nf-lay-row > .nf-lay-col { flex: 0 1 auto !important; max-width: none !important; }
}
html.nfed-vp-phone #all:not(.nf-dev-served) .nf-lay-row > .nf-lay-col { flex: 1 1 100% !important; max-width: 100% !important; }
html.nfed-vp-phone #all [data-nf-lay-region="header"] > .nf-lay-row > .nf-lay-col { flex: 0 1 auto !important; max-width: none !important; }

/* === Standard-Innenabstand aller Layout-Spalten (8px), damit die Boxen auf
   Desktop/Tablet/Mobil sauber Abstand haben. Ein im Designer je Spalte gesetztes
   Padding (kommt als Inline-Style) ÜBERSCHREIBT diesen Default. Header-Region
   ausgenommen (behält ihre kompakte einreihige Kopfzeile). === */
/* ENTZAUBERT: die pauschalen 8px Polsterung an JEDER Spalte sind raus. Sie lagen
   als feste Vorgabe im Stylesheet und liessen sich im Designer nicht wegbekommen –
   eine Ueberschrift bekam dadurch links/rechts einen Abstand, den man nicht
   erklaeren konnte. Der Innenabstand einer Spalte kommt jetzt ausschliesslich aus
   der Spalten-Einstellung (Maße -> Innenabstand). */
#all .nf-lay-col { box-sizing: border-box; }
/* Header, Content UND Footer werden identisch behandelt: die Region-Wrapper-Spalten
   (nf-region-frame / nf-region-inner) tragen 0 vertikales Padding + 8px horizontal
   (siehe Regel oben bei nf-region-frame). Der Header bekommt KEINE Extrawurst mehr –
   dadurch fluchten Logo/Icons weiterhin mit den Content-Spalten und alle drei Bereiche
   verhalten sich gleich (Abstände frei über die Spalten-Config einstellbar). */
/* Feste px-Breite: das Maß gilt für den INHALT (content-box) – die 8px-Polsterung
   liegt außen drum, sonst frisst border-box die eingestellte px-Breite an. */
#all .nf-lay-col--fixw { box-sizing: content-box; }

/* === DAS LOGO SITZT MITTIG IN SEINER HÖHE ===================================
   Gemessen in der Handy-Ansicht: die Symbole (Burger/Suche/Konto/Korb) sind
   40px hohe Kästen mit mittigem Inhalt, das Logo-Element ist 50px hoch – aber
   das Bild darin ist nur 24px hoch und klebt am OBEREN Rand, weil das Element
   ein `display:block` ist. Das Logo stand dadurch sichtbar höher als alles
   daneben, und seine Spalte war mit 66px die höchste der Zeile und blähte sie
   auf (56px bei allen anderen).

   `height:100%` am Bild wäre falsch: bei `object-fit:contain` und freier Breite
   würde das Bild auf die volle Höhe hochskalieren (aus 118x24 würden ~246x50)
   und erst an `max-width` hängenbleiben – das Logo wäre plötzlich größer.
   Richtig ist, den KASTEN ausrichten zu lassen und das Bild in Ruhe zu lassen.

   `display` ist hier keine Einstellung aus dem Designer (das Logo-Panel kennt
   nur Bild, Alt-Text, Ziel, Min/Max-Maße und Position), deshalb darf `!important`
   den Inline-Stil überstimmen. Die WAAGERECHTE Ausrichtung ist dagegen sehr wohl
   einstellbar – sie kommt über `data-lay-align` an der Spalte und wird unten
   nach justify-content durchgereicht, sonst würde Flex sie verschlucken. */
#all [data-nf-lay-region] .nf-lay-el[data-lay-type="logo"],
/* … UND EINE EBENE TIEFER. Gemessen: das Element wurde zwar zum Flex-Kasten,
   sein Flex-Eintrag ist aber der LINK (a.nf-el-logo), und der ist selbst schon
   50px hoch. Zentriert wurde damit ein Kasten, der die volle Höhe hat – das
   24px-Bild klebte darin weiter oben. Deshalb muss auch der Link zentrieren. */
#all [data-nf-lay-region] .nf-lay-el[data-lay-type="logo"] > a {
    display: flex !important;
    align-items: center;
}
/* Der Link füllt die eingestellte Höhe – sonst hätte er nichts zu zentrieren. */
#all [data-nf-lay-region] .nf-lay-el[data-lay-type="logo"] > a { height: 100%; }
#all [data-nf-lay-region] .nf-lay-col[data-lay-align="center"] .nf-lay-el[data-lay-type="logo"] { justify-content: center; }
#all [data-nf-lay-region] .nf-lay-col[data-lay-align="right"]  .nf-lay-el[data-lay-type="logo"] { justify-content: flex-end; }

/* === Sichtbarkeit pro Endgerät („Anzeige:" im Designer) =====================
   Spalten/Elemente tragen bei Bedarf nf-hide-desktop/-tablet/-phone. Für ECHTE
   Besucher greifen die Viewport-Media-Queries (deckungsgleich mit dem Geräte-
   Renderer nfVp: Phone ≤750, Tablet 751–1023, Desktop ≥1024). Im DESIGNER
   emuliert der Editor das Gerät über html.nfed-vp-* (NICHT über die echte
   Fensterbreite) – dort greifen die Emulations-Selektoren. Während des
   Editierens (html.nfed-editing) sind die Media-Queries bewusst inaktiv
   (html:not(.nfed-editing)), damit ein desktop-verstecktes Element in der
   Mobil-Vorschau nicht doch von der Desktop-Media-Query mitgeblendet wird. === */
@media (min-width: 1024px) { html:not(.nfed-editing) #all .nf-hide-desktop { display: none !important; } }
@media (min-width: 751px) and (max-width: 1023px) { html:not(.nfed-editing) #all .nf-hide-tablet { display: none !important; } }
@media (max-width: 750px) { html:not(.nfed-editing) #all .nf-hide-phone { display: none !important; } }
/* LEER GEWORDENE ZEILE EINZIEHEN.
   Ausgeblendet wird nur noch die SPALTE. Eine Zeile, deren Spalten auf diesem
   Geraet alle weg sind, bliebe sonst als Luecke stehen – im Kopf sind das 48px
   (min-height an `.nf-region-inner > .nf-lay-row`, weiter unten), also ein
   sichtbarer Streifen unter dem Logo. Genau dafuer gab es einmal eine eigene
   „Anzeige" an der Zeile; die ist entfallen, weil sich dieselbe Sache damit an
   drei Ebenen verstecken liess und niemand mehr fand, welche es war. Jetzt
   macht es die Zeile von allein: keine sichtbare Spalte mehr -> weg.
   Im DESIGNER ausdruecklich nicht (html:not(.nfed-editing)) – dort muessen die
   Geister anklickbar bleiben, sonst kaeme man an die Einstellung nicht zurueck. */
@media (min-width: 1024px) { html:not(.nfed-editing) #all .nf-lay-row:not(:has(> .nf-lay-col:not(.nf-hide-desktop))) { display: none !important; } }
@media (min-width: 751px) and (max-width: 1023px) { html:not(.nfed-editing) #all .nf-lay-row:not(:has(> .nf-lay-col:not(.nf-hide-tablet))) { display: none !important; } }
@media (max-width: 750px) { html:not(.nfed-editing) #all .nf-lay-row:not(:has(> .nf-lay-col:not(.nf-hide-phone))) { display: none !important; } }
/* IM DESIGNER NICHT WEGBLENDEN, SONDERN ALS GEIST ZEIGEN.
   Frueher standen hier drei display:none-Regeln – deckungsgleich mit dem Shop.
   Damit war eine fuer dieses Geraet ausgeblendete Spalte im Designer aber
   VOLLSTAENDIG weg: nicht anklickbar, nicht anwaehlbar, und die Sichtbarkeit
   liess sich nicht mehr zurueckschalten („die Spalten sind alle drin, aber er
   zeigt sie nicht an"). Jetzt bleiben sie sichtbar – blass und orange gestrichelt,
   damit sofort klar ist: das sieht der Besucher auf diesem Geraet NICHT.
   Fuer echte Besucher gelten weiter die Media-Queries darueber, dort bleibt es
   hart ausgeblendet. */
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop,
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet,
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone {
    position: relative;
    /* KEINE Hoehenbegrenzung. Ein Versuch, ausgeblendete Bereiche auf einen
       schmalen Streifen zu legen (max-height: 26px), hat zwar den doppelt
       wirkenden Fussbereich beruhigt – aber echte Bausteine verstuemmelt: das
       Burger-Menue in der Kopfzeile wurde von 26 auf 10 px zusammengequetscht.
       Lieber die wahre Groesse zeigen; blass und mit durchgestrichenem
       Geraetesymbol ist ohnehin erkennbar, dass es hier nicht ausgespielt wird. */
    /* Der Schriftzug bleibt IM Baustein. Ohne das ragte er bei schmalen
       Bausteinen (z. B. einem Kopfzeilen-Knopf) links aus der Seite heraus. */
    overflow: hidden;
    /* MINDESTGROESSE, damit der Geist ueberhaupt zu sehen und zu treffen ist.
       Die Menue-Leiste fiel im Handy-Modus auf 16x16 px zusammen – ihr Inhalt
       (die Kategorie-Leiste) rendert auf 375px nichts, also blieb vom
       ausgeblendeten Baustein nur ein Puenktchen uebrig. Man sah weder, WAS da
       ausgeblendet ist, noch konnte man es anklicken.
       Nur min-*: das kann eine Flaeche vergroessern, nie zusammenquetschen –
       genau der Fehler, an dem der frueher hier probierte `max-height` gescheitert
       ist (er hat das Burger-Menue von 26 auf 10 px gestaucht).
       Die Regel gilt nur im Designer (html.nfed-editing); beim Besucher aendert
       sich nichts. */
    min-height: 34px !important;
    min-width: 34px !important;
    /* GESPERRT-OPTIK: leichter oranger Schleier ueber der Flaeche, in derselben
       Farbe wie die gestrichelten Linien des Designers. Ein weisser Schleier
       (wie bei der gesperrten Gruppe) waere auf weissem Grund unsichtbar. */
    background-color: rgba(245, 158, 11, .10);
    border-radius: 4px;
}
/* DIE BREITE DES GEISTES IN DER KOPFZEILE.
   Die Kopfzeilen-Regel fuer schmale Schirme gibt ihren Spalten ausdruecklich
   `min-width: 0 !important` (damit die Suche schrumpfen darf). Sie ist
   spezifischer als die allgemeine Geist-Regel oben – deshalb blieb die
   ausgeblendete Menue-Leiste 16 px schmal, und das durchgestrichene
   Handy-Symbol (22 px, mittig) wurde vom `overflow: hidden` weggeschnitten.
   Man sah nur ein Puenktchen. Hier dieselbe Kette noch einmal, nur fuer den
   Geist – wieder ausschliesslich im Designer. */
html.nfed-editing #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col.nf-hide-desktop,
html.nfed-editing #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col.nf-hide-tablet,
html.nfed-editing #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col.nf-hide-phone {
    min-width: 34px !important;
}
/* Der INHALT wird blass, nicht der ganze Knoten – sonst waere auch die
   Beschriftung darauf kaum zu lesen. Die Bedienleiste des Editors
   (.nfed-chrome: Griff, Zahnrad, x) bleibt ausgenommen: sie ist der einzige
   Weg zurueck, wenn die Flaeche sonst gesperrt ist (Regel darunter). */
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop > *:not(.nfed-chrome),
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet  > *:not(.nfed-chrome),
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone   > *:not(.nfed-chrome) {
    opacity: .12;
}
/* EINE FLAECHE, EIN ZIEL – DIE HAUBE.
   Was fuer dieses Geraet ausgeblendet ist, laesst sich nur noch ALS GANZES
   anfassen: der Inhalt liegt darunter wie unter einer Haube, sichtbar und
   schematisch, aber nicht anzuklicken. Vorher konnte man in eine ausgeblendete
   Spalte hineingreifen und einen Baustein bearbeiten, den man auf diesem Geraet
   gar nicht sieht – man stellte etwas ein, und im Bild passierte nichts. Wer die
   Bausteine bearbeiten will, schaltet oben auf ein Geraet um, auf dem die Spalte
   sichtbar ist.

   WARUM `*` UND NICHT `> *`: pointer-events vererbt sich zwar, aber ein
   ausdrueckliches `auto` an einem Nachfahren hebt das Erbe wieder auf – und
   davon gibt es zwei mit `!important`, beide fuer die Aufklappflaeche des
   Mega-Menues:
     editor.css:2460  html.nfed-editing.nfed-blow-any #all .nf-mega
                      .nf-mega-panel[data-nf-lay-region="megamenu"]      (1,5,1)
     editor.css:2530  … .nf-mega-panel[data-nf-lay-region="megamenu"] *  (1,4,1)
   Deshalb hier jeder Nachfahre einzeln, mit `!important` und mit Absicht
   spezifischer (1,6,1) – Spezifitaet schlaegt Ladereihenfolge, die Regel wirkt
   also auch von style.css aus gegen editor.css. Wer sie kuerzt, macht die
   Menue-Unterpunkte wieder anklickbar.

   AUSGENOMMEN ist nur die Bedienleiste des Editors an diesem Knoten samt ihrem
   Innenleben (`.nfed-chrome`): ohne sie waere die Spalte weder anzuwaehlen noch
   zu loeschen, und die Einstellung, die sie versteckt, waere unerreichbar –
   derselbe Fehler wie `display:none`, nur eine Ebene tiefer. */
html.nfed-editing.nfed-vp-desktop #all .nf-lay-col.nf-hide-desktop *:not(.nfed-chrome):not(.nfed-chrome *),
html.nfed-editing.nfed-vp-pad     #all .nf-lay-col.nf-hide-tablet  *:not(.nfed-chrome):not(.nfed-chrome *),
html.nfed-editing.nfed-vp-phone   #all .nf-lay-col.nf-hide-phone   *:not(.nfed-chrome):not(.nfed-chrome *) {
    pointer-events: none !important;
}
/* Die Ausnahme oben gilt fuer JEDE `.nfed-chrome` – also auch fuer die Leiste
   eines Bausteins TIEF IN der Haube, der eine haengengeblieben ist. Ueber sie
   waere der Baustein doch wieder zu loeschen oder zu oeffnen. Frei bleibt
   deshalb nur die Leiste der Spalte SELBST, und die ist ihr direktes Kind:
   `* .nfed-chrome` verlangt mindestens einen Knoten dazwischen und trifft ein
   direktes Kind nicht. Spezifitaet (1,5,2) – schlaegt die Ausnahme nicht, sie
   greift ja gar nicht erst am selben Knoten. */
/* … UND DASSELBE, WENN DAS MEGA-MENUE SICH SELBST AUSBLENDET.
   Die Leiste bringt einen EIGENEN Schalter mit („Auf dem Handy: ausblenden" ->
   data-mobile="off"). Dann zeichnet layout_lib.php zwar den Geist mit dem
   durchgestrichenen Symbol, die Spalte traegt aber KEIN nf-hide-phone – die Haube
   oben griff deshalb nicht, und man konnte die Menuepunkte weiter anklicken:
   gemessen `.nf-mega pointer-events:none`, aber `.nf-mega-link` wieder auf `auto`
   (editor.css gibt die Aufklappflaeche fuer die Bearbeitung frei).
   Gleiche Regel, gleicher Grund: was auf diesem Geraet nicht ausgespielt wird,
   nimmt keine Klicks an. Spezifitaet (1,6,2) – schlaegt die Freigabe in
   editor.css (1,4,1 bzw. 1,5,1). `.nfed-chrome` bleibt ausgenommen, sonst waere
   der Baustein nicht mehr anzuwaehlen. */
html.nfed-editing.nfed-vp-phone #all .nf-mega[data-mobile="off"] *:not(.nfed-chrome):not(.nfed-chrome *) {
    pointer-events: none !important;
}
html.nfed-editing.nfed-vp-phone #all .nf-mega[data-mobile="off"] * .nfed-chrome,
html.nfed-editing.nfed-vp-phone #all .nf-mega[data-mobile="off"] * .nfed-chrome * {
    pointer-events: none !important;
}

html.nfed-editing.nfed-vp-desktop #all .nf-lay-col.nf-hide-desktop * .nfed-chrome,
html.nfed-editing.nfed-vp-desktop #all .nf-lay-col.nf-hide-desktop * .nfed-chrome *,
html.nfed-editing.nfed-vp-pad     #all .nf-lay-col.nf-hide-tablet  * .nfed-chrome,
html.nfed-editing.nfed-vp-pad     #all .nf-lay-col.nf-hide-tablet  * .nfed-chrome *,
html.nfed-editing.nfed-vp-phone   #all .nf-lay-col.nf-hide-phone   * .nfed-chrome,
html.nfed-editing.nfed-vp-phone   #all .nf-lay-col.nf-hide-phone   * .nfed-chrome * {
    pointer-events: none !important;
}
/* Mittig drauf: das SYMBOL des aktuellen Geraets, durchgestrichen. Sagt ohne
   ein Wort, was gemeint ist – „auf DIESEM Geraet nicht". */
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop::after,
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet::after,
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Ueber ALLES, auch ueber den Schleier einer gesperrten Gruppe (der liegt
       bei 2147483000). Sonst deckte er das durchgestrichene Geraetesymbol zu –
       am Mega-Menue war dadurch nicht zu sehen, dass es auf dem Handy gar nicht
       ausgespielt wird. */
    z-index: 2147483002;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    pointer-events: none;
}
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9800' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4' width='19' height='12.5' rx='1.8'/><path d='M9 20.2h6M12 16.5v3.7'/><path d='M3.5 20.5 L20.5 3.5' stroke-width='2.1'/></svg>"); }
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet::after  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9800' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='2.5' width='15' height='19' rx='2'/><path d='M11 18.6h2'/><path d='M3.5 20.5 L20.5 3.5' stroke-width='2.1'/></svg>"); }
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone::after   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9800' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7.5' y='2.5' width='9' height='19' rx='1.8'/><path d='M11 18.6h2'/><path d='M3.5 20.5 L20.5 3.5' stroke-width='2.1'/></svg>"); }

/* NUR EIN GEIST JE FLAECHE.
   Ist eine Zeile fuer dieses Geraet ausgeblendet, sind ihre Spalte und deren
   Element es meist auch – dann zeichnete jede Ebene ihren eigenen Schleier und
   ihr eigenes durchgestrichenes Symbol uebereinander: zwei, drei Symbole
   nebeneinander, und weil jede Ebene die darunter nochmal auf 12% dimmt, wirkte
   die ganze Flaeche tot und man sah nicht mehr, wo man hinklicken soll.
   Deshalb: den Geist zeichnet nur die AEUSSERSTE ausgeblendete Ebene. Die
   inneren bleiben unveraendert – sie liegen ohnehin schon im Schleier des
   Aeusseren und sind ganz normal anklickbar. */
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop .nf-hide-desktop,
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet  .nf-hide-tablet,
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone   .nf-hide-phone {
    background: none;
}
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop .nf-hide-desktop > *,
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet  .nf-hide-tablet  > *,
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone   .nf-hide-phone   > * {
    opacity: 1;
}
html.nfed-editing.nfed-vp-desktop #all .nf-hide-desktop .nf-hide-desktop::after,
html.nfed-editing.nfed-vp-pad     #all .nf-hide-tablet  .nf-hide-tablet::after,
html.nfed-editing.nfed-vp-phone   #all .nf-hide-phone   .nf-hide-phone::after {
    display: none;
}

/* Hersteller-Logo passt in den vom Element (data.width, Standard 110px) gesetzten
   Rahmen .nf-lay-manulogo – sonst rendert es in voller Bilddatei-Größe. */
#all .nf-lay-manulogo img, #all .manuimg img { max-width: 100%; height: auto; display: block; }

/* Header-Elemente vertikal zentrieren – das Logo-<img> ist inline/baseline und saß
   sonst ~2px zu hoch (alles wirkte oben versetzt). Kette flex-zentriert, Logo als Block. */
#all [data-nf-lay-region="header"] > .nf-lay-row > .nf-lay-col { display: flex; align-items: center; }
#all [data-nf-lay-region="header"] .nf-lay-el { display: flex; align-items: center; }
#all [data-nf-lay-region="header"] a.logo { display: flex; align-items: center; }
#all [data-nf-lay-region="header"] img.nfs-109 { display: block; }

/* ============================================================================
   HEADER als freie Layout-Fläche MIT Vollbreiten-Hintergrund
   (data-nf-lay-region="header", umgebaut über nf-region-frame / nf-region-inner –
   analog zum Footer-Umbau). Äußere Spalte .nf-region-frame = 100% breiter, edge-to-
   edge-Streifen mit eigenem Hintergrund/pt/pb; darin eine zentrierte max-width-
   Spalte .nf-region-inner (float:center). DEPLOY-SICHER: sämtliche Regeln sind über
   :has(.nf-region-frame) bzw. .nf-region-inner gescoped – OHNE den Wrap existiert
   keine dieser Klassen, also byte-neutral (nicht umgebauter Header bleibt exakt wie
   bisher). Nur ERGÄNZUNGEN – die bestehenden Header-Ausrichtungs-Regeln oben werden
   NICHT verändert; hier wird nur nachgezogen, was der Wrap eine Ebene tiefer schiebt. */
/* #topbar darf die Vollbreiten-Frame-Spalte NICHT mehr auf 1205 einschnüren – die
   Maximalbreite/Zentrierung kommt jetzt aus der INNEREN Spalte (.nf-region-inner).
   So reicht der Hintergrund/pt/pb der Frame-Spalte edge-to-edge (analog
   .footer-inner:has(...) beim Footer). */
#all #topbar:has(> .nf-lay-row > .nf-lay-col.nf-region-frame) { max-width: none; margin: 0; padding: 0; }
/* Äußere Bereichs-Spalte immer über die volle Breite (Vollbreiten-Streifen) – schlägt
   die Mobil-Stapel-/Auto-Regeln (die die direkte Region-Spalte treffen). */
#all [data-nf-lay-region="header"] > .nf-lay-row > .nf-lay-col.nf-region-frame { flex: 1 1 100% !important; max-width: none !important; }
/* Zeile INNERHALB der Frame-Spalte (trägt die zentrierte Innen-Spalte): volle Breite,
   damit deren margin:auto (float:center) wirklich mittig sitzt. */
#all [data-nf-lay-region="header"] .nf-region-frame > .nf-lay-row { flex: 1 1 100%; width: 100%; align-items: center; }
/* Header-Standard-Hintergrund: WEISS. Ist im Editor keine Hintergrundfarbe fuer den
   Header-Frame gesetzt, ist der Header weiss (statt transparent) – auch beim Scrollen
   (fixe Kopfzeile) deckt das den durchscrollenden Inhalt ab. Eine im Editor gesetzte
   Farbe (inline am nf-region-frame) schlaegt diese Vorgabe. */
#all [data-nf-lay-region="header"] .nf-lay-col.nf-region-frame { background: var(--main-background, #ffffff); }
/* Die ORIGINAL-Header-Zeile liegt jetzt eine Ebene tiefer (in .nf-region-inner) – die
   Basis-Regeln [data-nf-lay-region]>.nf-lay-row (volle Breite + vertikale Zentrierung)
   treffen sie nach dem Wrap nicht mehr. Hier exakt dieselbe Wirkung nachziehen, damit
   Logo/Suche/Account/Warenkorb wie vorher auf einer Linie sitzen. */
#all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row { flex: 1 1 100%; width: 100%; align-items: center; min-height: 48px; }
/* HEADER-INNENSPALTE: Breite gehoert dem DESIGNER, nicht dem Stylesheet.
   Der Renderer schreibt `max-width` NUR, wenn im Designer eine Maximalbreite gesetzt
   ist – ohne Einstellung ist die Zeile ohnehin voll breit. Frueher stand hier ein
   `max-width:none !important` (+ margin:0), das die volle Breite erzwingen sollte:
   es hat aber JEDE im Designer gesetzte Maximalbreite ueberschrieben (und mit
   margin:0 auch die Zentrierung) -> "max-width geht nicht, immer ganze Breite".
   ENTZAUBERT: Auch das seitliche Polster (20px) steht nicht mehr hier, sondern in der
   Header-Konfiguration (Designer -> Kopfzeile -> innere Spalte -> Innenabstand
   links/rechts) und kommt als Inline-Stil an der Spalte an. */
/* Header-Zeile: die SUCHE holt sich den ganzen freien Platz, das LOGO ist nur so breit
   wie noetig (automatische Breite), Burger/Account/Warenkorb ebenfalls inhaltsbreit.
   (Zuvor teilten sich Logo + Suche als flex:1 den Platz gleichmaessig -> Logo zu breit.) */
/* Spalten der Kopfzeile so hoch wie ihr Inhalt – nicht auf Zeilenhoehe gedehnt.
   Vorher standen sie auf `stretch` und wurden 84–100px hoch, obwohl Burger, Logo
   und Symbole nur 50–60 messen. Im Designer sah man das sofort: der blaue
   Spalten-Rahmen war viel hoeher als der gelbe Rahmen des Elements darin. */
#all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col { flex: 0 0 auto; align-self: center; }
/* min-width: 60px ist hier entfallen – die Spalte der Suche bekam damit eine
   Mindestbreite aufgezwungen, die groesser war als der im Designer eingestellte
   Wert (40px eingestellt, 50 gerendert). Nur noch das Wachsen bleibt. */
#all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col:has(#core-search) { flex: 1 1 auto; }
/* Vertikale Zentrierung der Widget-Spalten: die Regel für die DIREKTE Region-Zeile
   (oben) trifft nach dem Wrap nur noch die Frame-Spalte – für die ORIGINAL-Spalten in
   der Innen-Spalte hier nachziehen. */
#all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col { display: flex; align-items: center; }
/* HOEHE DER SPALTEN kommt aus dem DESIGNER (Zeile -> „Höhe der Spalten").
   Die Zeile bekommt dafuer `align-items` als Inline-Stil; das allein reicht aber
   nicht, weil die Regel eine Zeile hoeher den Spalten ein `align-self: center`
   mitgibt – und align-self am Kind schlaegt align-items am Elternteil. Deshalb
   hier die Gegenregel, angehaengt an das Merkmal, das der Renderer setzt.
   Sie steht NACH der center-Regel und gewinnt damit bei gleicher Spezifitaet.
   Eine an der EINZELNEN Spalte gesetzte vertikale Ausrichtung kommt weiterhin
   inline und schlaegt beides – Spalte gewinnt vor Zeile, wie erwartet. */
#all .nf-lay-row[data-lay-valign="stretch"] > .nf-lay-col { align-self: stretch; }
#all .nf-lay-row[data-lay-valign="top"]     > .nf-lay-col { align-self: flex-start; }
#all .nf-lay-row[data-lay-valign="middle"]  > .nf-lay-col { align-self: center; }
#all .nf-lay-row[data-lay-valign="bottom"]  > .nf-lay-col { align-self: flex-end; }
/* Mobil: die ORIGINAL-Header-Spalten NICHT stapeln – die Basis-Mobilregel
   .nf-lay-row > .nf-lay-col{flex:1 1 100%} würde eine Ebene zu tief greifen und
   Logo/Icons untereinander werfen. Einreihig halten wie die nicht umgebaute Kopfzeile. */
/* `:not(.nf-lay-col--pct)` = Spalten MIT eingetragener Prozentbreite bleiben
   ausgenommen. Die Regel soll die Symbolzeile einreihig halten (deren Spalten
   haben keine Breite, sie richten sich nach ihrem Inhalt) – sie hat aber auch
   jede ausdrueckliche Breite aus dem Admin ueberstimmt: die Menue-Leiste stand
   auf 100 %, war auf dem Handy aber nur so breit wie ihr Text. Im Designer sah
   man eine 350 px breite Zeile, anklickbar war davon nur die linke Haelfte.
   Was im Admin steht, muss gelten. */
@media (max-width: 750px) {
    #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row { flex-wrap: nowrap !important; align-items: center; }
    #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col:not(.nf-lay-col--pct) { flex: 0 1 auto !important; max-width: none !important; min-width: 0 !important; }
    #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col.nf-lay-col--pct { min-width: 0 !important; }
}
html.nfed-vp-phone #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row { flex-wrap: nowrap !important; align-items: center; }
html.nfed-vp-phone #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col:not(.nf-lay-col--pct) { flex: 0 1 auto !important; max-width: none !important; min-width: 0 !important; }
html.nfed-vp-phone #all [data-nf-lay-region="header"] .nf-region-inner > .nf-lay-row > .nf-lay-col.nf-lay-col--pct { min-width: 0 !important; }

/* ============================================================================
   CONTENT-REGION („Background-Bereich" zwischen Header und Footer)
   ----------------------------------------------------------------------------
   Analog zu Header/Footer laesst sich die Flaeche zwischen Kopf und Fuss zu einem
   Vollbreiten-Streifen mit eigenem Hintergrund machen: die AEUSSERE Spalte
   (.nf-region-frame, 100% breit, bgcolor/pt/pb inline aus der Config) und darin die
   INNERE zentrierte max-width-Spalte (.nf-region-inner, maxw/float:center) – der
   bestehende Seiteninhalt (#content) sitzt in der inneren Spalte.
   DEPLOY-SICHER: saemtliche Regeln sind ueber .nf-region-frame / .nf-region-inner
   gescoped. OHNE aktive Content-Region existieren diese Knoten NICHT -> keine Regel
   greift, #content rendert EXAKT wie bisher (byte-neutral). Checkout unberuehrt.
   ============================================================================ */
/* Aeussere Frame-Zeile fuellt die volle Breite von #main (edge-to-edge Streifen). */
#all .nf-region-frame > .nf-lay-row { width: 100%; }
/* Ist der Content-Wrapper aktiv, uebernimmt die INNERE Spalte (.nf-region-inner,
   maxw + float:center) die Maximalbreite/Zentrierung. #content gibt dann seine
   EIGENE max-width + auto-Margin frei, damit die Spalte nicht doppelt beschneidet.
   Die klassische Regel (#all #content{max-width:1205px;margin:0 auto}) bleibt fuer
   den NICHT umschlossenen Fall unberuehrt; hier gewinnt die hoehere Spezifitaet
   (zusaetzliche Klasse) – und NUR, wenn .nf-region-inner als Vorfahr existiert. */
#all .nf-region-inner #content { max-width: none; margin-left: 0; margin-right: 0; }
/* Content-Region ~5px nach unten, damit sie BUENDIG unter dem Header sitzt (vorher lag
   der Content-Anfang ~4px im Header -> minimale Ueberlappung). Nur die Content-Region
   (Frame enthaelt #content), Header/Footer unberuehrt. */
/* (Abstand oben an der Inhalts-Flaeche entfernt – auf Wunsch.) */

/* ---- Backlink/Attribution (fix, nicht editierbar) ---- */
#all .nf-attribution {
    /* Backlink sitzt BUENDIG als unterste Leiste am Footer: kein Abstand nach oben,
       volle Breite (wie der Footer-Frame) – kein loser Streifen mit weisser Luecke mehr.
       Hintergrund + Kontrast-Textfarbe kommen inline aus footer.php (an den Footer-Frame
       gekoppelt: dunkel -> hell, hell -> dunkel). */
    margin: 0;
    width: 100%;
    box-sizing: border-box;   /* Padding (inline 6px) INNERHALB der 100% -> kein horizontaler Ueberlauf/Rechts-Scroll */
    padding-top: 0;
    border-top: none;
    text-align: center;
    font-size: 12px;
    /* KEIN eigener Hintergrund: der neofire-Streifen sitzt IN der nf-region-frame-
       Spalte und soll ausschliesslich deren Farbe durchscheinen lassen – nie einen
       eigenen (dunkleren) Balken bilden. Hart, damit keine Alt-/Fremdregel fuellt. */
    background: transparent !important;
}
#all .nf-attribution a { color: #c9c9cf; text-decoration: none; font-weight: 600; }
#all .nf-attribution a:hover { color: #ffffff; }
/* Fehler-Overlay, falls der Backlink entfernt wird. OHNE #all-Prefix (das Element
   haengt an body, ausserhalb von #all) + !important gegen fremde Regeln. */
#nf-attr-error {
    position: fixed !important; inset: 0 !important; z-index: 2147483000 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(17,24,39,.94) !important; color: #fff !important;
    font: 600 19px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: center !important; padding: 24px !important; margin: 0 !important;
}

#all .img-contain{object-fit: contain !important;max-width: 100% !important;
    max-height: 100% !important;
}

#all .img-cover{max-width: 100%;
    min-height: 100%;
    width: 100%;
    object-fit: cover;
}

#all .input-error{
    border:2px solid #dc3545 !important;
    background:#fff5f5 !important;
}

#all #agb_wrapper.input-error{
    border:2px solid #dc3545;
    background:#fff5f5;
    border-radius:8px;
    padding:10px;
}

#all #floating-cart{
    width: 100%;
}
#all .nopointer{
    pointer-events: none;
}

#all #open-cart svg,
#all #open-cart svg * {
    pointer-events: none;
}

#all button span{
    font-size: 20px;
    color:var(--main-largebutton-color);
   
}

#headercontent{

    height: 80px;

}







/* ENTZAUBERT (wie beim Kategorie-Knopf): Konto und Warenkorb hatten 40x40px fest
   im Stylesheet – im Designer eingestellte Breite/Hoehe kamen dagegen nicht an.
   Jetzt fuellen sie ihr Element; 40px bleiben als Mindestmass, damit ohne eigene
   Angabe alles aussieht wie bisher. Das Symbol waechst mit. */
#all .cart-icon{
    position: relative;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;          /* NICHT 100%: eine gesetzte Hoehe schlaegt das Strecken */
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    color: var(--header-color);
    cursor: pointer;
    font-size: 24px;
    box-sizing: border-box;
}
/* Symbol folgt der Knopfgroesse (wie beim Kategorie-Knopf). */
#all .cart-icon > svg { width: 60%; height: 60%; max-width: 100%; max-height: 100%; }

/* NUR das direkte Zähler-Span (#cart-count) bekommt den roten Badge – NICHT
   verschachtelte Spans wie die Editor-Mini-Leiste (.nfed-grip/.nfed-mtools sitzen
   in .nfed-chrome innerhalb von .cart-icon und würden sonst rot eingefärbt). */
#all .cart-icon > span {
    position: absolute;
    pointer-events: none;
    top: 2px;
    right: 2px;
    z-index: 1;
    /* Ueber Variablen, damit sich der Punkt spaeter mitfaerben laesst, ohne
       diese Datei anzufassen. Die Werte dahinter sind der bisherige Stand. */
    background: var(--nf-badge-bg, #e53935);
    color: var(--nf-badge-color, #fff);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#all #cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

#all #cart-overlay.open{
    opacity:1;
    visibility:visible;
}

#all .cart-content{
    position:fixed;
    width: min-content;
    top:0;
    right:-500px;

    bottom:0; height:auto;

    background:#fff;

    transition:right .3s ease; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;

    overflow:auto;

    box-shadow:
            -5px 0 20px rgba(0,0,0,.2);

    z-index:99999;
}



#all .cart-content.open{
    right:0;
}


#all .cart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;           /* exakt wie .cat-head (Kategorie-Kopf) */

    border-bottom:1px solid #eee;
    flex-shrink:0;          /* Kopfleiste nie stauchen */
    box-sizing:border-box;
}

#all .cart-header h3{
    margin:0;
    font-size: 26px;
    font-weight: bold;
}

#all #close-cart{
    color: #000;
    border:none;
    background:none;
    font-size:28px;
    cursor:pointer;
}

#all .flatpickr-day.today:hover, #all  .flatpickr-day.today:focus{color: #fff !important;}

#all .flatpickr-day {margin-bottom: 10px !important;border-radius:4px;}

#all .nextMonthDay{opacity:0.2;}
#all .prevMonthDay{opacity:0.2;}

#all .cart-body{
    padding:0 20px 20px
}

#all #cart-body{padding: 0 20px 0px;}

#all .cart-pulse{
    animation:pulse .4s;
}

#all .property-hidden{
    display:none;
}



#all .calendar-day-btn, #all .group-calendar-day-btn, #all .group-calendar-slot-btn, #all .shipping-calendar-day-btn, #all .shipping-calendar-slot-btn{
    margin: 3px;
    font-size: 16px;
    padding: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
    border-radius: 4px;
    cursor: pointer;
}

#all .calendar-slot-btn{
    margin: 3px;
    font-size: 16px;
    padding: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
    border-radius: 4px;
    cursor: pointer;
}
#all .shipping-calendar-slots{    display: grid;
    grid-template-columns: repeat(1, 1fr);}

#all .show-more-properties{

    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px dashed #81818157;
    background: #ffffff2e;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;

    margin-top: 5px;
    transition: .2s;
}

#all .show-more-properties:hover {
    background: #ffffff57;;
}

#all .gallery-main {
    width: 100%;
    max-width: 100%;
    height: 400px;
    /* KEINE feste Border UND KEIN fester Radius mehr – beides wird komplett über
       den Designer (Element › Rahmen) gesteuert. Default: eckig, kein Rahmen. */
    overflow: hidden;
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
}



#all .gallery-thumbs {
    display: flex;
    gap: 10px;
    /* Kein fester Abstand zum Hauptbild mehr – das macht man ueber den Editor
       (Element-Abstand/Spalten-Padding). Vorher: margin:15px 0. */
    margin: 0;
    flex-wrap: wrap;
}
/* Subbilder liegen in .gallery-thumbs (display:flex) – ein text-align der Spalte
   greift dort NICHT. Darum: die Spalten-Ausrichtung ("Ausrichtung Inhalt") wird
   über data-lay-align auf der Spalte in justify-content der Thumbs übersetzt, damit
   "mittig"/"rechts" die Vorschaubilder wirklich zentriert/rechtsbündig stellt. */
#all .nf-lay-col[data-lay-align="center"] .gallery-thumbs { justify-content: center; }
#all .nf-lay-col[data-lay-align="right"]  .gallery-thumbs { justify-content: flex-end; }

#all .gallery-thumb {
    width: 100px;
    height: 100px;
    /* KEINE feste Border UND KEIN fester Radius – beides aus dem Designer
       (Element › Rahmen). Default: eckig, kein Rahmen. Aktiv-Markierung über
       box-shadow, damit sie NICHT mit dem im Designer gesetzten border kollidiert. */
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s;
    background:#fff;
}

#all .gallery-thumb.active {
    box-shadow: 0 0 0 2px #000;
}

#all .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#all .buy-row{
    display:flex;
    gap:15px;
    align-items:center;
}

#all .qty-box{
    flex:0 0 auto;
}

#all #cartBtn{
    flex:1;
}

#all .buy-box{

    display:flex;
    align-items:center;
    gap:15px;

    margin:20px 0;
}

#all .qty-box{

    /* Modern + KOMPAKT: immer so breit wie der Inhalt (sonst schnitt overflow:hidden
       den +-Button ab, wenn die Spalte schmaler als der Inhalt war). */
    display:inline-flex;
    width:max-content;
    max-width:none;
    align-items:center;

    border:1px solid #e2e5ea;
    border-radius:12px;

    overflow:hidden;

    background: var(--main-background, #fff);
    /* nur Border, kein Schatten */
}

#all #minus,
#all #plus{
    text-align: center;
    flex:0 0 auto;   /* nicht schrumpfen – Breite haelt */
    width:60px;    /* breiter als hoch – nicht mehr hochkant */
    height:52px;   /* + 2px Rahmen = 54px Aussenhoehe, exakt wie der Button */

    border:none;

    /* Wie die Zahl: Flaeche und Schrift folgen dem Shop, damit der Zaehler im
       Dunkel-Modus nicht als weisser Block stehenbleibt. */
    background: var(--main-background, #fff);
    color: var(--main-color, #1a2736);

    cursor:pointer;

    font-size:22px;
    font-weight:600;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:background .15s ease, color .15s ease;
}

#all #minus{ border-right:1px solid #dedede; }
#all #plus{  border-left:1px solid #dedede; }

#all #minus:hover,
#all #plus:hover{

    background:#dedede;
    color:#000;
}

#all #qty{

    min-width:52px;

    text-align:center;

    font-size:17px;
    font-weight:700;
    /* FOLGT DER TEXTFARBE DES SHOPS statt fest #1a2736.
       Im Warenkorb und in der Kasse steckt der Zaehler in keinem Baustein –
       dort war die Zahl deshalb immer dunkelblau-schwarz, auch im Dunkel-Modus
       und auf einem dunklen Untergrund. Der Notnagel hinter dem Komma ist der
       alte Wert, falls keine Variable gesetzt ist. */
    color: var(--main-color, #1a2736);
}

#all #cartBtn{

    flex: 1;
    height: 54px;
    color: var(--main-largebutton-color);
    background: var(--main-largebutton-background);
    border:var(--main-largebutton-border);
    /* 4 px wie am Produkt-Baustein – dort kommt der Wert aus dem Editor, hier
       ist er die Vorgabe fuer die Stellen ohne Baustein (Quickview, Kasse). */
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .2s;


}

/* STECKT DER KAUF-KNOPF IN EINEM LAYOUT-BAUSTEIN, GESTALTET DER BAUSTEIN.
   Der Baustein `p_addtocart` ist die Huelle, der eigentliche <button id="cartBtn">
   liegt darin und fuellt sie vollstaendig aus. Bis zum 13.08.2026 brachte der
   Knopf seine eigene Flaeche mit (`--main-largebutton-background`, Radius 10) und
   deckte damit alles zu, was im Editor am Baustein eingestellt war: eine rote
   Flaeche blitzte nur als schmaler Rand am Rand hervor.
   Traegt der Baustein eine EIGENE Flaeche (Marke `nf-el-eigenflaeche`, gesetzt
   in layout_lib.php), ist der Knopf nur noch die Klickflaeche – Farbe, Rahmen
   und Radius kommen von aussen. Ohne eingestellte Farbe behaelt er seine eigene,
   sonst waere er unsichtbar. Der Nachfahren-Selektor (kein `>`) ist noetig, weil
   der Knopf im Quickview tiefer liegt (`.nfs-43 > button`). */
#all .nf-lay-el.nf-el-eigenflaeche #cartBtn,
#all .nf-lay-el.nf-el-eigenflaeche #cartBtn:hover{
    background: transparent;
    border: 0;
    border-radius: inherit;
}
/* ECKEN: DER BAUSTEIN BESCHNEIDET, STATT SIE WEITERZUREICHEN.
   `border-radius:inherit` nimmt den DIREKTEN Elternteil – im Quickview ist das
   eine Zwischenhuelle (`.nfs-43`) mit Radius 0, der Knopf blieb also eckig,
   obwohl am Baustein 4 px standen. Statt die Huellen einzeln durchzureichen
   schneidet der Baustein seinen Inhalt ab. Bewusst nur fuer Bausteine MIT
   Kauf-Knopf: `overflow:hidden` auf allen Bausteinen wuerde irgendwann ein
   Aufklapp-Menue abschneiden. */
#all .nf-lay-el.nf-el-eigenflaeche:has(#cartBtn){ overflow: hidden; }

/* UND DASSELBE IM QUICKVIEW-FENSTER.
   Dort gibt es eine zweite Regel `#all #quickview-modal #cartBtn` mit einem
   eigenen Satz Variablen (`--quickview-largebutton-*`). Drei IDs = Spezifitaet
   (3,0,0) – sie schlug die Regel darueber (2,2,0), der Knopf blieb schwarz,
   obwohl am Baustein eine Farbe stand. Deshalb hier dieselbe Aussage noch
   einmal MIT `#quickview-modal` davor: (3,2,0) gewinnt. */
#all #quickview-modal .nf-lay-el.nf-el-eigenflaeche #cartBtn,
#all #quickview-modal .nf-lay-el.nf-el-eigenflaeche #cartBtn:hover{
    background: transparent;
    border: 0;
    border-radius: inherit;
}

#all #cartBtn:hover{

    color: var(--main-largebutton-hover-color);
    background: var(--main-largebutton-hover-background);
    border:var(--main-largebutton-hover-border);

}

#all #quickview-modal #cartBtn{

    flex: 1;
    height: 54px;
    color: var(--quickview-largebutton-color);
    background: var(--quickview-largebutton-background);
    border:var(--quickview-largebutton-border);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .2s;


}

#all #quickview-modal #cartBtn:hover{

    color: var(--quickview-largebutton-hover-color);
    background: var(--quickview-largebutton-hover-background);
    border:var(--quickview-largebutton-hover-border);

}

#all #cartBtn:active{

    transform:translateY(0);
}

#all .checkout-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

#all .product-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding-top: 20px;
}

#all .quickview-window .product-layout{
    grid-template-columns: 0fr 1fr;
    gap: 20px;
    padding-top: 20px;
}


#all .product-image{
    height:300px;
    background:#eeeeee;
}

#all .price-box{
    border:1px solid #eee;
    border-radius:12px;
    padding:15px;
    background:#fafafa;
    font-size:14px;
    margin-bottom:15px;
}

#all .price-box .row{
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
}

#all .price-box .total{
    font-size:18px;
    font-weight:bold;
}

#all .checkout-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

#all .checkout-grid input{

    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

#all #diff_shipping{width: 20px;}

#all .full{
    grid-column:1 / 3;
}

/* BESTELL-BUTTON: Farben aus dem Editor, nicht aus dieser Datei.
   Hier stand `background:black; color:white` fest im Quelltext – und weil die
   Regel mit `#all #payBtn` (2,0,0) schwerer wiegt als alles, was der Editor
   erzeugt, blieb der Knopf schwarz, egal was der Haendler einstellte. Genau
   das ist in diesem Projekt ein Fehler: der Editor steht ueber dem CSS.
   Die Gruppe „Kaufen-Button“ gab es laengst (theme_tokens.php), sie wurde nur
   nirgends benutzt. Jetzt haengt der Knopf daran; die Werte hinter dem Komma
   sind bloss der Notnagel, falls kein Theme geladen ist. */
#all #payBtn{
    margin-top:15px;
    width:100%;
    padding:15px;
    /* EIGENE VARIABLEN, VORGABE SCHWARZ.
       Der Abschluss-Knopf hing kurzzeitig an der Gruppe „Kaufen-Button" und
       wurde damit blau wie der Knopf am Produkt. Er soll aber neutral bleiben:
       er steht am Ende der Kasse, wo Farbe eher stoert als hilft.
       Fest verdrahtet ist er trotzdem nicht – wer ihn faerben will, setzt
       `--nf-paybtn-bg` / `--nf-paybtn-color`. */
    background: var(--nf-paybtn-bg, #000);
    color:      var(--nf-paybtn-color, #fff);
    border:     var(--nf-paybtn-border, none);
    font-size:18px;
    cursor:pointer;
    border-radius:4px;
}
#all #payBtn:hover{
    background: var(--nf-paybtn-hover-bg, var(--nf-paybtn-bg, #000));
    color:      var(--nf-paybtn-hover-color, var(--nf-paybtn-color, #fff));
    border:     var(--nf-paybtn-border, none);
}

#all #error{
    color:red;
    margin-top:10px;
    font-size:13px;
}

/* ================= MOBILE ================= */
@media (max-width:850px){

    #all .product-layout{
        grid-template-columns:1fr;
    }

    #all .product-image{
        width:100%;
        height:250px;
    }

    #all .checkout-grid{
        grid-template-columns:1fr 50%;
    }

    #all .full{
        grid-column:1/3;
    }
}

#all .property-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:15px;
}

#all .property-tab{
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:8px;
    cursor:pointer;
    background:#fff;
    transition:0.2s;
    user-select:none;
}

#all .property-tab:hover{
    border-color:#000;
}

#all .property-tab.active{
    background:#000;
    color:#fff;
    border-color:#000;
}

#all .property-values{
    display: flex;
    flex-wrap: wrap;
    gap: 9px 2%;
    margin-top: 8px;
}

#all .property-values .active {

    color:var(--main-button-hover-color);
    border:var(--main-button-hover-border);
    background:var(--main-button-hover-background);
}



#all .property-option{
    background: var(--main-button-background);
    color: var(--main-button-color);
    border:var(--main-button-border);

    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    user-select:none;
    width: 49%;
    box-sizing: border-box;
    
}

/* EIGENSCHAFTEN-KNOEPFE IM DUNKEL: WEISSER RAND, WEISSE SCHRIFT.
   Im Hellen kommen beide aus den Button-Variablen (`--main-button-border` /
   `--main-button-color`), im Dunkel ergab das einen fast unsichtbaren grauen
   Rand (rgba(129,129,129,.34)) auf schwarzem Grund.
   Bewusst NUR an `.property-option` und NUR unter `.darkmode` – die Variablen
   selbst anzufassen haette jeden Knopf im Shop mitgezogen.
   `.active` und `:hover` behalten ihre eigene Kennzeichnung; sie stehen weiter
   unten und gewinnen per Reihenfolge. */
#all.darkmode .property-option,
#all.darkmode .property-option:hover,
#all.darkmode .property-option.active{
    border-color: #ffffff;
    color: #ffffff;
}
/* Der GEWAEHLTE Knopf bleibt unterscheidbar – aber ohne neue Farbe: gefuellt
   statt umrandet. Sonst saehen im Dunkel alle drei gleich aus, nachdem das
   Gruen (`--main-button-hover-*`, #3dffc1) hier nicht mehr gilt. */
#all.darkmode .property-option.active{
    background: #ffffff;
    color: #000000;
}

#all .property-option:hover{
    background: var(--main-button-hover-background);
    color: var(--main-button-hover-color);
    border:var(--main-button-hover-border);

    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    user-select:none;
    width: 49%;
    box-sizing: border-box;

}



#all #quickview-modal .property-option.active{
    background: var(--quickview-button-hover-background);
    color: var(--quickview-button-hover-color);
    border:var(--quickview-button-hover-border);
}


#all #quickview-modal .property-option .price{
    font-size:12px;
    opacity:0.8;
    margin-left:5px;
}


#all #quickview-modal .property-option{
    background: var(--quickview-button-background);
    color: var(--quickview-button-color);
    border:var(--quickview-button-border);

    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    user-select:none;
    width: 49%;
    box-sizing: border-box;

}

#all #quickview-modal .property-option:hover{
    background: var(--quickview-button-hover-background);
    color: var(--quickview-button-hover-color);
    border:var(--quickview-button-hover-border);
}

#all #quickview-modal .property-option.active{
    background: var(--quickview-button-hover-background);
    color: var(--quickview-button-hover-color);
    border:var(--quickview-button-hover-border);
}


#all #quickview-modal .property-option .price{
    font-size:12px;
    opacity:0.8;
    margin-left:5px;
}


#all .input-error {
    border: 2px solid red !important;
    background: #fff5f5;
}

#all .description_long{
    line-height: 30px;
    /* Farbe bewusst NICHT im CSS – kommt aus dem Feld am Atom (product_description)
       bzw. der Theme-Farbe, damit sie im Designer editierbar ist (hell/dunkel). */
    font-size: 17px;
    flex: 1;
    padding: 0px 20px 20px 20px;
    max-width: 1205px;
    margin: 0 auto;
}
/* Kein Abstand ueber der Langbeschreibung: der erste Absatz hatte margin-top:17px,
   das nach oben durchschlug (padding-top:0). Abstand macht man ueber den Editor. */
#all .description_long > *:first-child{margin-top:0}

#all .cart-property-group{
    margin-top: 10px;

    border-radius: 4px;
    padding: 4px 8px 4px 8px;
}

#all details summary {
    list-style: none;
}

#all details summary::-webkit-details-marker {
    display: none;
}

#all details summary::before {
    content: "\203A"; /* › – Chevron OHNE Font Awesome (das war raus -> ☐) */
    font-weight: 900;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    margin-right: 5px;
    vertical-align: middle;
    transform-origin: 50% 50%;   /* dreht auf der Stelle, quadratische Box */
    transition: transform .15s ease;
}

#all details[open] summary::before {
    transform: rotate(90deg); /* › nach unten = geöffnet */
}

#all #quickview-modal{
    position:fixed;
    inset:0;
    z-index:99999;

    display:none;
}

#all #quickview-modal.open{
    display:block;
}

#all .quickview-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5);
}

#all .large .quickview-window {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1200px, 95vw);
    max-height: min(95vh);
    overflow: auto;
    background: #fff;
    border-radius: 20px;
    padding: 0px;
}

#all .small .quickview-window {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 95vw);
    max-height: min(95vh);
    overflow: auto;
    background: #fff;
    border-radius: 20px;
    padding: 0px;
}

#all .small .quickview-window .product-layout {
    grid-template-columns: 0fr 1fr;
    gap: 0px;
}

#all .large .quickview-window .product-layout {
    grid-template-columns: 1fr 1fr;
}

#all .breadcrumb{
    /* ENTZAUBERT: war display:flex – dadurch lief die Ausrichtung der Spalte
       (links/mittig/rechts aus dem Designer) ins Leere, denn bei Flex wirkt
       text-align nicht auf die Kinder. Als inline-flex verhaelt sich die
       Breadcrumb wie Text: die Spalte kann sie mittig oder rechts setzen,
       der Abstand zwischen den Stationen bleibt erhalten. */
    display:inline-flex;
    align-items:center;
    gap:5px;
}

#all .breadcrumb p{
    margin:0;
}

#all #quickview-close {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 29px;
    border: solid 1px #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8px;
}

#all .large .quickview-window h1, #all .small .quickview-window h1  {
    padding-right: 40px;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.4);
    }

    100%{
        transform:scale(1);
    }
}

#all .half-description{
    padding: 20px 0px 0px 0px;
}

@media (min-width: 750px) {

    #all .half {
        box-sizing: border-box;
        float: right;
        width:50%;
    }

    #all .half-description{
        padding: 0px 0px 0px 20px;
    }

    #all .cart-content {
        width: 420px;
    }
}
@media (max-width: 750px) {
    #all .open.cart-content  {
        width: 100%;
    }


}

#all #themebutton{
    box-sizing: border-box;
    width: 48%;
    margin-right: 1%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px;
    float: left;
}

/* Einstellungs-Buttons (Darkmode + Listengröße): zwei gleiche, umrandete
   Buttons nebeneinander – Icon + Label. */
#all #largeListingThemeButton{
    width: auto;
    margin: 4px 0;
    float: none;
}
.themeButton {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    color: var(--main-color);
    user-select: none;
    margin: 0;
    /* Feste Höhe: Icon + Text wechseln beim Klick, der Button springt nicht. */
    height: 44px;
    line-height: 1;
    min-width: 0;
}
.themeButton #themeIcon,
.themeButton #largeListingThemeIcon { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; }
/* Beide Buttons je 50 % der Breite, nebeneinander – Größe bleibt konstant. */
.theme-buttons { display: flex; gap: 10px; margin-top: 8px; }
.theme-buttons .themeButton { flex: 1 1 0; min-width: 0; margin: 0; }
.themeButton:hover { background: rgba(0,0,0,0.03); }
#all #largeListingThemeButton #largeListingThemeIcon:empty,
#all #themeButton #themeIcon:empty { display: none; }

.themeButton svg {
    width: 20px;
    height: 20px;
    display: block;
}

#themeButton:hover{
    opacity:.7;
}

/* ===========================================================================
   KOMPAKTE ANSICHT – hier stand die alte Umsetzung, sie ist ERSATZLOS WEG.
   ---------------------------------------------------------------------------
   Sie bestand aus vier Regeln, die von aussen in die Kachel hineingriffen:

       .small .card .img               { width:140px!important; height:140px!important;
                                         float:left!important; }
       .small .card .pricelist         { text-align:left!important; font-size:20px!important; }
       .small .card .description_short_list { height:45px!important; }

   Zwei Dinge waren daran falsch.

   1. SIE WIRKTE NICHT MEHR. Seit die Kachel eine Designer-Vorlage ist, ist sie
      eine Flex-Struktur (`#all .card .card-col { display:flex; flex-direction:column }`).
      `float` hat auf ein Flex-Kind KEINE Wirkung – das Bild wanderte also nie
      neben den Text, es wurde nur auf 140x140 gestaucht, der Text blieb darunter
      und `height:45px` schnitt ihn ab. Halbe Kachel leer.

   2. SIE NAGELTE FEST, WAS EINSTELLBAR SEIN SOLL. Bildgroesse, Ausrichtung und
      Schriftgroesse gehoeren in den Designer, nicht in eine CSS-Regel mit
      `!important`.

   STATTDESSEN: zwei Vollvorlagen am Listing – `data.card` (normal) und
   `data.card_kompakt`. Welche gilt, entscheidet layout_karten_ansicht() aus
   demselben Cookie `nf_listsize`, das der Knopf in der Kopfzeile schon setzt.
   Beide werden im Designer gebaut; hier muss dafuer nichts mehr stehen.
   =========================================================================== */

#all .switch{
    background: transparent;
    position:relative;
    display:inline-block;
    width:48px;
    height:28px;
    flex-shrink:0;
    margin-right:12px;
    width: 100%;
}

#all .switch input{
    opacity:0;
    width:0;
    height:0;
    position:absolute;
}

#all .switch-slider{
    position:absolute;
    inset:0;
    cursor:pointer;
    background:#d5d5d5;
    border-radius:999px;
    transition:.25s;
}

#all .switch-slider:before{
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.25s;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}

#all .switch input:checked + .switch-slider{
    background:#16c15d;
}

#all .switch input:checked + .switch-slider:before{
    transform:translateX(20px);
}

#all .switch{

    display:flex;
    align-items:center;
    gap:16px;

   

    border:2px solid #e8e8e8;
    border-radius:14px;

    cursor:pointer;

    transition:.25s;

    margin:12px 0;

  

}

#all .switch:hover{

    border-color:#000;

}

#all .shipping-method-radio{

    display:none;

}

#all .switch-slider{

    width:24px;
    height:24px;

    border-radius:50%;

    border:2px solid #bbb;

    flex-shrink:0;

    position:relative;

    transition:.25s;

}





#all .shipping-method-radio:checked + .switch-slider:after{

    transform:translate(-50%,-50%) scale(1);

}

#all .shipping-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    gap:20px;

}

#all .shipping-text{

    flex:1;

}

#all .shipping-title{

    font-size:19px;

    font-weight:600;

    color:#222;

}

#all .shipping-desc{

    margin-top:4px;

    color:#777;

    font-size:13px;

}

#all .shipping-price{

    font-size:18px;

    font-weight:700;

    white-space:nowrap;

}



#all .switch{

    display:flex;
    align-items:center;
    gap:14px;

    padding:0px;

    border:none;
    border-radius:10px;

    cursor:pointer;

    margin-bottom:10px;

    transition:.2s;

}

#all .switch:hover{

    border-color:#999;

}

#all .switch input{

    opacity:0;
    width:0;
    height:0;
    position:absolute;

}

#all .switch-slider{

    position:relative;

    width:36px;
    height:20px;

    flex-shrink:0;

    background:#e5e7eb;

    /* Kein Rand – exakt wie der Zahlart-Schalter (.pm-switch). Ein frueherer
       Block setzt hier 2px grau; das muss hier ueberschrieben werden. */
    border:none;

    border-radius:999px;

    transition:.25s;

}

#all .switch-slider::before{

    content:"";

    position:absolute;

    left:2px;
    top:2px;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#fff;

    transition:.25s;

    box-shadow:0 2px 5px rgba(0,0,0,.2);

}

#all .switch input:checked + .switch-slider{

    background:#22c55e;

}

#all .switch input:checked + .switch-slider::before{

    transform:translateX(16px);

}

#all .shipping-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    gap:15px;

}

#all .shipping-text{

    flex:1;

}



#all .shipping-desc{

    margin-top:2px;

    color:#777;

    font-size:12px;

}

#all .shipping-price{

    font-size:18px;

    font-weight:bold;

    white-space:nowrap;

}

#all .shipping-content{

    display:flex;

    align-items:center;

    width:100%;

}

#all .shipping-text{

    flex:1;
    min-width:0;

}
#all .calendar-slot-start, #all .calendar-slot-end{padding-left:45px;}
#all .shipping-price{

    margin-left:auto;

    text-align:right;

    white-space:nowrap;

    font-size:17px;

    font-weight:700;

}

#all .property-option span{ color:#cdcdcd;}




#all .time-select{

    position:relative;
    width:100%;
    

}



#all .time-icon{

    position:absolute;

    left:16px;
    top:50%;

    width:22px;
    height:22px;

    transform:translateY(-50%);

    pointer-events:none;

}


#all .flatpickr-day:hover{
color: #fff !important;
background: #000 !important;
}

#all .selected {
    color: #fff !important;
    background: #000 !important;
   
}



.calendar-time-row{
    display:flex;
    gap:20px;
}

.calendar-time-col{
    flex:1;
}

.calendar-time-col label{
    display:block;
    font-size:14px;
    margin-bottom:8px;
    font-weight:600;
}

.calendar-slot-start,
.calendar-slot-end{

    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 17px;
    font-weight: 600;
    background: #fff;
}

.calendar-available{
    background: #e1ffe3 !important;
    color: #000000 !important;
}

.calendar-closed{
    background: #ebebeb !important;
    color: #000000 !important;
    
}

.flatpickr-day{
    position: relative;
    z-index: 2;
}

.flatpickr-trans{
    opacity: 0.3;
}

.flatpickr-day.inRange{
    background: #000 !important;
    color: #ffffff !important;
    box-shadow: -20px 0 0 #000, 20px 0 0 #000;
    z-index: 1;
    border: none;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange{
    z-index: 3;
}
.calendar-block-after{
    background:red !important;
    color:#fff !important;
}

.endRange{    box-shadow: -20px 0 0 #000, 0px 0 0 #000 !important;}
.inRange{    box-shadow: -20px 0 0 #000, 0px 0 0 #000 !important;}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover
{
    color: rgba(57, 57, 57, 0.3);
    background: #ff000026 !important;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
    cursor: not-allowed;
}

#all .flatpickr-day.startRange, #all .flatpickr-day.endRange, #all .flatpickr-day.selected.inRange, #all .flatpickr-day.startRange.inRange, #all .flatpickr-day.endRange.inRange, #all .flatpickr-day.selected:focus, #all .flatpickr-day.startRange:focus, #all .flatpickr-day.endRange:focus, #all .flatpickr-day.selected:hover, #all .flatpickr-day.startRange:hover, #all .flatpickr-day.endRange:hover, #all .flatpickr-day.selected.prevMonthDay, #all .flatpickr-day.startRange.prevMonthDay, #all .flatpickr-day.endRange.prevMonthDay, #all .flatpickr-day.selected.nextMonthDay, #all .flatpickr-day.startRange.nextMonthDay, #all .flatpickr-day.endRange.nextMonthDay {
    background: #000000;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border: none;
}
#all .flatpickr-day {
    margin-bottom: 10px !important;
    border-radius: 4px;
    border: none;
}
#all .flatpickr-day.startRange{box-shadow:none !important;}
/* ---------------------------------------------------------------------
   Checkout-Felder: gruener Haken, wenn ausgefuellt (siehe neofireCheckoutMemory)
   Nur bei Textfeldern – Selects haben schon ihren Pfeil rechts.
   --------------------------------------------------------------------- */
input.nf-fill.nf-filled{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
    padding-right:38px !important;
}

/* ---------------------------------------------------------------------
   Allgemeiner Kippschalter (AGB, abweichende Lieferadresse) – optisch
   identisch zum Zahlart-/Versand-Schalter.
   --------------------------------------------------------------------- */
#all .nf-toggle-input{ position:absolute; opacity:0; width:0; height:0; }
#all .nf-toggle{
    width:36px; height:20px; border-radius:999px;
    background:#e5e7eb; position:relative; transition:.2s;
    flex:0 0 auto; display:inline-block;
}
#all .nf-toggle::after{
    content:''; position:absolute; top:2px; left:2px;
    width:16px; height:16px; border-radius:50%;
    background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:.2s;
}
#all .nf-toggle-input:checked + .nf-toggle{ background:#22c55e; }
#all .nf-toggle-input:checked + .nf-toggle::after{ transform:translateX(16px); }

/* Pflicht-Schalter (AGB) nicht angehakt: erst ein weisser Ring, dann der rote –
   der weisse Abstand sieht sauberer aus. box-shadow statt border = kein Sprung. */
#all .nf-toggle.nf-toggle-error{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #e11d48; }

/* Pflicht-Textfelder: weisser Rahmen direkt am Feld, dann der rote Ring – und
   KEIN rotes Inneres mehr. Ueberschreibt die aelteren .input-error-Regeln. */
#all .input-error{
    border:2px solid #fff !important;
    background:#fff !important;
    box-shadow:0 0 0 2px #dc3545 !important;
}

/* Einheitlicher Aufklapp-Pfeil in ALLEN Auswahlfeldern im Shop – gleicher Pfeil
   und gleiche Position wie im Admin (right 18px). Mehrfachauswahl/Listen
   (size>1) bleiben ausgenommen. padding-right !important, weil viele Felder
   inline padding gesetzt haben. */
#all select:not([multiple]):not([size]){
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
    background-size:14px 14px;
    padding-right:42px !important;
}

/* ===================================================================== */
/* neofire blocks (nfb) — Storefront-Darstellung des Baukasten-Editors   */
/* Gerendert innerhalb von .description_long / .half-description.         */
/* Scoping unter #all wie im restlichen Shop.                            */
/* ===================================================================== */
#all .nfb{ margin:0 0 22px; }

#all .nfb-text[data-nfb-align="center"]{ text-align:center; }
#all .nfb-text[data-nfb-align="right"]{ text-align:right; }
#all .nfb-text .nfb-text-body>*:last-child{ margin-bottom:0; }

#all .nfb-image{ margin:0 0 22px; }
#all .nfb-image[data-nfb-align="center"]{ text-align:center; }
#all .nfb-image[data-nfb-align="right"]{ text-align:right; }
#all .nfb-image img{ max-width:100%; width:var(--nfb-w,100%); height:auto; display:inline-block; }
#all .nfb-caption{ font-size:.9em; color:#666; margin-top:6px; }
#all .nfb-caption:empty{ display:none; }

#all .nfb-cols{ display:grid; gap:var(--nfb-gap,24px); margin:0 0 22px; }
#all .nfb-cols-2{ grid-template-columns:repeat(2,1fr); }
#all .nfb-cols-3{ grid-template-columns:repeat(3,1fr); }
#all .nfb-cols-4{ grid-template-columns:repeat(4,1fr); }
#all .nfb-cell{ min-width:0; }
#all .nfb-cell>*:last-child{ margin-bottom:0; }
@media(max-width:640px){ #all .nfb-cols{ grid-template-columns:1fr; } }

#all .nfb-slider{ position:relative; overflow:hidden; margin:0 0 22px; }
#all .nfb-slider-track{ display:flex; transition:transform .4s ease; }
#all .nfb-slide{ flex:0 0 100%; min-width:0; margin:0; }
#all .nfb-slide img{ width:100%; height:auto; display:block; }
#all .nfb-slider-prev,
#all .nfb-slider-next{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border:0; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; font-size:24px; line-height:1;
    cursor:pointer; z-index:2;
}
#all .nfb-slider-prev{ left:10px; }
#all .nfb-slider-next{ right:10px; }
#all .nfb-slider-dots{
    position:absolute; left:0; right:0; bottom:10px;
    display:flex; gap:6px; justify-content:center; z-index:2;
}
#all .nfb-slider-dots button{
    width:8px; height:8px; padding:0; border:0; border-radius:50%;
    background:rgba(255,255,255,.6); cursor:pointer;
}
#all .nfb-slider-dots button.active{ background:#fff; }


/* ── Produkt-Boxen fahren beim Rendern sanft ein (gestaffelt) ───────────── */
#all .grid > .card{
    animation: nfCardIn .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nfCardIn{
    from{ opacity:0; transform:translateY(22px); }
    to  { opacity:1; transform:none; }
}
#all .grid > .card:nth-child(2){ animation-delay:.05s; }
#all .grid > .card:nth-child(3){ animation-delay:.10s; }
#all .grid > .card:nth-child(4){ animation-delay:.15s; }
#all .grid > .card:nth-child(5){ animation-delay:.20s; }
#all .grid > .card:nth-child(6){ animation-delay:.25s; }
#all .grid > .card:nth-child(7){ animation-delay:.30s; }
#all .grid > .card:nth-child(8){ animation-delay:.35s; }
#all .grid > .card:nth-child(n+9){ animation-delay:.40s; }
@media (prefers-reduced-motion:reduce){
    #all .grid > .card{ animation:none; }
}


/* ── Kein Schatten auf den Boxen (auch nicht beim Hover) ──────────────────
   ENTZAUBERT: die Rahmenfarbe stand hier fest im Stylesheet und liess sich im
   Designer nicht aendern – Breite, Ecken und Abstand kamen laengst aus der
   Kachel-Konfiguration, nur die Farbe nicht. Sie steht jetzt ebenfalls dort
   (Designer -> Listing-Kachel -> Style -> Rahmen). */
#all .grid > .card{
    box-shadow:none !important;
}
#all .grid > .card:hover{
    box-shadow:none !important;
}

/* Burger-Knopf. HIER STAND `padding-bottom:3px` als Ausgleich fuer das alte
   Text-Zeichen, das optisch zu tief sass. Das Symbol ist laengst ein SVG und in
   seinem Knopf sauber zentriert - die 3px haben es seitdem um 1,5px nach OBEN
   aus der Mitte geschoben. */
#all #open-cat{
    box-sizing:border-box;
    line-height:1;
}

/* ---- Aus Inline-Styles ausgelagert (SEO-/Clean-HTML-Aufräumen) ---- */
.nf-link{text-decoration:none;color:inherit}
a.view-card{display:block}
.clear-both{clear:both}

/* ==== Aus Inline-Styles ausgelagert (Clean-HTML/SEO) ==== */
.nfs-1.nfs-1{padding:12px;}
.nfs-2.nfs-2{scale:1.2;}
.nfs-3.nfs-3{scale:1.25;}
.nfs-4.nfs-4{display:none;
        position:fixed; left:16px; right:16px; bottom:16px;
        max-width:520px; margin:0 auto;
        background:#fff; color:#222;
        border:1px solid #e2e2e2; border-radius:12px;
        box-shadow:0 12px 34px rgba(0,0,0,.20);
        padding:18px 20px; z-index:9001;
        font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:1.5;}
.nfs-5.nfs-5{font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px;}
.nfs-6.nfs-6{color:#555;}
.nfs-7.nfs-7{color:#2563eb; text-decoration:underline;}
.nfs-8.nfs-8{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.nfs-9.nfs-9{flex:1; min-width:150px; padding:11px 14px; border:none; border-radius:8px; background:#000; color:#fff; font-weight:600; cursor:pointer;}
.nfs-10.nfs-10{flex:1; min-width:150px; padding:11px 14px; border:1px solid #ccc; border-radius:8px; background:#fff; color:#222; font-weight:600; cursor:pointer;}
.nfs-11.nfs-11{display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;}
.nfs-12.nfs-12{grid-column:1 / 3;
            width:100%;
            box-sizing:border-box;
            padding:12px;
            border:1px solid #ddd;
            border-radius:8px;}
.nfs-13.nfs-13{margin-top:15px;
    font-size:14px;}
.nfs-14.nfs-14{display:flex;
        align-items:center;
        gap:16px;
        cursor:pointer;
        line-height:1.35;}
.nfs-15.nfs-15{display:none;
        margin-top:15px;}
.nfs-16.nfs-16{display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;}
.nfs-17.nfs-17{margin-top:15px;font-size:13px;color:#555;background:#f6f7f9;border-radius:10px;padding:12px 14px;}
.nfs-18.nfs-18{margin-top:15px;font-size:14px;}
.nfs-19.nfs-19{display:flex;align-items:center;gap:16px;cursor:pointer;line-height:1.35;}
.nfs-20.nfs-20{display:none;margin-top:12px;}
.nfs-21.nfs-21{font-size:12px;color:#888;margin-top:6px;}
.nfs-22.nfs-22{margin-top:15px;}
.nfs-23.nfs-23{display:flex;flex-direction:column;gap:0;margin-bottom:12px;}
.nfs-24.nfs-24{color:red;
        text-align: center;
        margin-top:10px;
        font-size:22px;}
.nfs-25.nfs-25{margin-top:10px;font-size:12px;color:#888;text-align:center;}
.nfs-26.nfs-26{margin-top:15px;
        font-size:13px;}
.nfs-27.nfs-27{color:inherit;text-decoration:underline;cursor:pointer;}
/* Derselbe Knopf, zweite Regel (aus der Inline-CSS-Auslagerung uebernommen).
   Auch hier: Farbe kommt aus dem Editor. */
.nfs-28.nfs-28{width:100%;
        margin-top:15px;
        padding:15px;
        border: var(--nf-paybtn-border, none);
        border-radius:4px;
        background: var(--nf-paybtn-bg, #000);
        color: var(--nf-paybtn-color, #fff);
        cursor:pointer;
        font-size:16px;
        font-weight:bold;}
.nfs-29.nfs-29{display:none;}
.nfs-30.nfs-30{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100001;}
.nfs-31.nfs-31{background:#fff;max-width:720px;margin:5vh auto;max-height:88vh;overflow:auto;border-radius:12px;padding:24px 26px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.nfs-32.nfs-32{margin:0 0 14px;}
.nfs-33.nfs-33{position:absolute;
                left:-9999px;
                opacity:0;
                width:1px;
                height:1px;
                overflow:hidden;}
.nfs-34.nfs-34{margin-top:12px;font-size:13px;}
.nfs-35.nfs-35{margin-top:10px;color:green;}
.nfs-36.nfs-36{margin-top:10px;color:red;}
.nfs-37.nfs-37{color:#999;}
/* Preis-Box: sprechende Klasse product_price (kommt jetzt aus dem CSS-Klasse-Feld des
   p_price-Atoms, nicht mehr hardcodiert im Twig). .nfs-38 bleibt kurz als Uebergangs-
   Alias, bis alle Layouts neu gerendert/gespeichert sind. */
#all .product_price, .product_price, .nfs-38.nfs-38{font-size: 32px;
    font-weight: bold;
    color: var(--main-hover-color);
    margin: 0px;}
.nfs-39.nfs-39{text-align:right;color:#8a8a8a;font-size:14px;font-weight:normal;line-height:1.1;min-height:16px;margin-bottom:1px;}
.nfs-40.nfs-40{text-align: inherit;}
.nfs-41.nfs-41{margin-top:0;}
/* KEIN ABSTAND MEHR AUS DEM CSS. Beide Huellen des Kaufen-Blocks trugen je
   `margin-top: 20px` – zusammen 40 px ueber dem Bestellen-Knopf, festgenagelt
   in der Datei. Wer den Baustein „Kaufen-Button" hineinzieht, bekam den
   Abstand ungefragt mit und konnte ihn im Panel nicht wegstellen: eine
   CSS-Regel, die einen einstellbaren Wert festhaelt, macht die Einstellung
   wirkungslos. Abstand gehoert an die Spalte bzw. den Baustein.
   Geblieben ist nur die Mechanik der Zeile (nebeneinander, mittig, Luecke). */
.nfs-42.nfs-42{display:flex;
align-items:center;
gap:15px;}
.nfs-43.nfs-43{display:flex;
    align-items:center;
    gap:15px;
    width:100%;}
.nfs-44.nfs-44{padding:20px 0;color:#666;}
.nfs-45.nfs-45{padding:6px 0 14px;color:#666;}
.nfs-46.nfs-46{font-size: 31px;
    font-weight: bold;
    margin: 7px 0;
    text-align: right;
    width: 100%;}
.nfs-47.nfs-47{margin-top:10px;margin-bottom:5px;}
.nfs-48.nfs-48{display:flex;align-items:center;gap:8px;font-size:14px;}
.nfs-49.nfs-49{margin-top:20px;}
.nfs-50.nfs-50{padding:20px 0;}
.nfs-51.nfs-51{max-width:960px;margin:0 auto 22px;width:100%;}
.nfs-52.nfs-52{display:inline-flex;margin:0;}
.nfs-53.nfs-53{position:absolute;top:10px;right:14px;}
.nfs-54.nfs-54{display:flex;align-items:center;gap:10px;margin-top:6px;}
.nfs-55.nfs-55{width:auto;padding:11px 18px;}
.nfs-56.nfs-56{width:auto;padding:11px 18px;margin-left:auto;display:none;}
.nfs-57.nfs-57{display:none;margin-top:16px;width:100%;}
.nfs-58.nfs-58{width:auto;padding:12px 22px;}
.nfs-59.nfs-59{max-width:520px;}
.nfs-60.nfs-60{margin:0;}
.nfs-61.nfs-61{margin-right:7px;vertical-align:-2px;}
.nfs-62.nfs-62{width:auto;}
.nfs-63.nfs-63{margin-bottom:16px;}
.nfs-64.nfs-64{margin-bottom:22px;}
.nfs-65.nfs-65{max-width:440px;margin:0;}
.nfs-66.nfs-66{margin-top:4px;
            padding-left:15px;
            color:#666;
            font-size:13px;}
.nfs-67.nfs-67{padding:12px;
            border-bottom:1px solid #e5e5e5;
            vertical-align:top;}
.nfs-68.nfs-68{font-size:12px;
                color:#888;}
.nfs-69.nfs-69{border-collapse:collapse;}
.nfs-70.nfs-70{padding:0;}
.nfs-71.nfs-71{border:none;
            border-top:1px solid #ddd;}
.nfs-72.nfs-72{font-size:18px;
    font-weight:bold;}
.nfs-73.nfs-73{margin:0;
    padding:30px;
    background:#f5f5f5;
    font-family:Arial,Helvetica,sans-serif;}
.nfs-74.nfs-74{background:#fff;
        border:1px solid #ddd;}
.nfs-75.nfs-75{padding:30px;}
.nfs-76.nfs-76{max-height:90px;}
.nfs-77.nfs-77{border-collapse:collapse;}
.nfs-78.nfs-78{text-align:right;}
.nfs-79.nfs-79{border-collapse:collapse;}
.nfs-80.nfs-80{background:#f7f7f7;}
.nfs-81.nfs-81{padding:30px 30px 0px 30px;}
.nfs-82.nfs-82{background:#fff;
    padding:30px;
    font-size:12px;
    color:#777;}
.nfs-83.nfs-83{font-size:14px;
        color:#666;
        margin-top:2px;}
.nfs-84.nfs-84{display:flex;
    justify-content:space-between;
    align-items:flex-start;}
.nfs-85.nfs-85{font-weight:bold;
margin-top:15px;margin-right:30px;
            margin-bottom:5px;font-size: 21px;line-height:30px;}
.nfs-86.nfs-86{font-size:14px;
            color:#777;
            margin-bottom:8px;}
.nfs-87.nfs-87{margin-top:8px;
        padding:8px;

        font-size:13px;}
.nfs-88.nfs-88{margin-top:10px;}
.nfs-89.nfs-89{font-size:17px;
        font-weight:bold;
        cursor:pointer;
        padding:5px 0;}
.nfs-90.nfs-90{margin-top:8px;}
.nfs-91.nfs-91{display:block;
                font-size:14px;
                margin-bottom:4px;}
.nfs-92.nfs-92{width:100%;
                padding:8px;
                border:1px solid #ddd;
                border-radius:6px;}
.nfs-93.nfs-93{display:flex;
            justify-content:space-between;
            margin-top:10px;}
.nfs-94.nfs-94{display:flex;
    align-items:center;
    width: 100%;
    gap:6px;}
.nfs-95.nfs-95{color:#8a8a8a;font-size:13px;}
.nfs-96.nfs-96{width: 100%; text-align: right;font-size: 18px; font-weight: bold;}
.nfs-97.nfs-97{text-align: right;width: 100%;    font-weight: normal;}
.nfs-98.nfs-98{display:block;font-weight:600;margin-bottom:4px;}
.nfs-99.nfs-99{margin-top:10px;}
.nfs-100.nfs-100{padding:0px;
    border-radius:6px;}
.nfs-101.nfs-101{padding:0px;}
.nfs-102.nfs-102{display:none;}
.nfs-103.nfs-103{margin:20px 0;}
.nfs-104.nfs-104{display:none;
        color:#dc3545;
        font-size:20px;
        text-align:center;
        font-weight:bold;
        margin:30px 0;}
.nfs-105.nfs-105{margin-top:20px;
        font-size:14px;
        color:#666;}
.nfs-106.nfs-106{display:flex;
                justify-content:space-between;
                margin-bottom:4px;
                margin-top:4px;
                text-align: right;}
.nfs-107.nfs-107{color: #b1b1b1;}
.nfs-108.nfs-108{display:flex;
        justify-content:space-between;
        font-size:24px;margin-bottom: 30px;

        font-weight:bold;text-align: right;}
.nfs-109.nfs-109{max-height:60px;max-width:220px;}
.nfs-110.nfs-110{cursor:pointer;}
.nfs-111.nfs-111{display:none;
        align-items:center; justify-content:center;
        position:fixed; right:16px; bottom:16px;
        width:48px; height:48px; border-radius:50%;
        border:1px solid #e2e2e2; background:#fff;
        box-shadow:0 6px 18px rgba(0,0,0,.18);
        cursor:pointer; z-index:9000; padding:0;}
.nfs-112.nfs-112{width:100%;
            box-sizing:border-box;
            padding:12px;
            border:1px solid #ddd;
            border-radius:8px;}
.nfs-113.nfs-113{grid-column:1 / 3;
            width:100%;
            box-sizing:border-box;
            padding:12px;
            border:1px solid #ddd;
            border-radius:8px;}
.nfs-114.nfs-114{width:100%;box-sizing:border-box;padding:12px;border:1px solid #ddd;border-radius:8px;}
.nfs-115.nfs-115{position:absolute;top:10px;right:14px;border:none;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#333;}
.nfs-116.nfs-116{width:100%;object-fit:cover;}
.nfs-117.nfs-117{text-decoration:none;}
.nfs-118.nfs-118{border: none;
    background: #dc3545 !important;
    color: #fff !important;
    padding: 5px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    right: 20px;}
.nfs-119.nfs-119{display:flex;
        align-items:center;
        gap:6px;}
.nfs-120.nfs-120{width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px;
    line-height: 1px;}
.nfs-121.nfs-121{width:100%;box-sizing:border-box;padding:10px;border:1px solid #ddd;border-radius:8px;}
.nfs-122.nfs-122{display:none;}
.nfs-123.nfs-123{margin-top: 10px;
    color: #000;
    display: grid;
    text-align: center;
    gap: 3px;}
.nfs-124.nfs-124{width:100%;padding:10px;}
.nfs-125.nfs-125{width:100%;
                    padding:10px;
                    border:1px solid #ddd;
                    border-radius:6px;}
.nfs-126.nfs-126{margin-top:10px;}
.pay-hidden{display:none}

/* ==== Aus <style>-Blöcken der Templates zusammengeführt ==== */

/* aus right.php */
/* Trennstrich zwischen den Zahlarten (nur bei mehreren). */
                        .pm-item:not(:last-child){border-bottom:1px solid #e5e5e5;}
                        .pm-row{display:flex;align-items:center;gap:14px;cursor:pointer;padding:6px 2px;}
                        .pm-row .pm-switch-input{position:absolute;opacity:0;width:0;height:0;}
                        .pm-row .pm-switch{width:36px;height:20px;border-radius:999px;background:#e5e7eb;position:relative;transition:.2s;flex:0 0 auto;}
                        .pm-row .pm-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s;}
                        .pm-row .pm-switch-input:checked + .pm-switch{background:#22c55e;}
                        .pm-row .pm-switch-input:checked + .pm-switch::after{transform:translateX(16px);}
                        .pm-row .pm-logo{height:60px;width:auto;}
                        /* Zahlart ohne Logo: der Name statt eines nackten Schalters. */
                        .pm-row .pm-name{font-size:15px;font-weight:600;color:inherit;}
                        /* Feld der Zahlart (z. B. Stripe-Kartenfeld) direkt unter IHRER Zeile. */
                        .payment-fragment:not(:empty){padding:4px 2px 10px;}

/* aus konto.php */
.nfk-wrap{--nfk-accent:#111;--nfk-accent2:#111;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:center;padding:0;color:#1c1c1c;}
.nfk-card{position:relative;width:100%;max-width:440px;background:#fff;border:1px solid #ececec;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;}
.nfk-card--wide{max-width:820px;}
/* Konto als eigene Seite (kein Overlay) */
.nfk-wrap--page{align-items:flex-start;padding:40px 16px 60px;}
.nfk-wrap--page .nfk-card--wide{max-width:900px;}
.nfk-acc-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:0 30px;border-bottom:1px solid #eee;}
.nfk-acc-nav a{padding:14px 14px;font-size:14px;font-weight:600;color:#777;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none;}
.nfk-acc-nav a:hover{color:#111;}
.nfk-acc-nav a.active{color:#111;border-bottom-color:#111;}
.nfk-acc-nav .nfk-acc-logout{margin-left:auto;color:#c0392b;}
.nfk-sec-title{margin:0 0 16px;font-size:17px;}
/* Account als Seite: links Punkte, rechts Text + Inhalt */
.nfk-acc-inline{color:var(--main-color);font-family:Arial,Helvetica,sans-serif;font-size:15px;margin-top:26px;}
.nfk-acc-inline h4{font-size:16px;font-weight:700;color:var(--main-color);}
/* Bereichs-Überschrift rechts (Bestellungen / Adressen / Zugangsdaten) */
.nfk-sec-h{margin:0 0 18px;font-size:22px;font-weight:700;color:var(--main-color);}
/* Trennlinie unter der Bereichs-Überschrift (wie bei Bestellungen) für Adressen/Zugangsdaten */
.nfk-sec-body{border-top:1px solid #e4e7ec;padding-top:16px;min-height:460px;}
.darkmode .nfk-sec-body{border-top-color:#ffffff1f;}
/* Buttons links, Trennstrich, Inhalt rechts */
.nfk-acc-layout{display:grid;grid-template-columns:210px 1fr;align-items:start;}
.nfk-acc-side{padding-right:26px;}
.nfk-acc-main{padding-left:32px;border-left:var(--main-border);min-width:0;}
.nfk-side-nav{display:flex;flex-direction:column;gap:8px;}
/* Buttons wie die Größen-/Options-Buttons (.property-option) auf der Produktseite:
   Shop-Sekundär-Variablen, Rahmen, radius 8, padding 8px 12px, aktiv/hover = gefüllt. */
.nfk-side-btn{display:block;width:100%;text-align:left;background:var(--main-button-background);color:var(--main-button-color) !important;border:var(--main-button-border);padding:8px 12px;border-radius:8px;font-size:15px;cursor:pointer;user-select:none;font-family:inherit;box-sizing:border-box;transition:.2s;}
.nfk-side-btn:hover{background:var(--main-button-hover-background);color:var(--main-button-hover-color) !important;border:var(--main-button-hover-border);}
.nfk-side-btn.active{background:var(--main-button-hover-background) !important;color:var(--main-button-hover-color) !important;border:var(--main-button-hover-border);}
/* Abmelden = reiner Text im Stil der Footer-Links (.link) */
.nfk-side-logout,.nfk-side-logout:hover{background:none !important;border-color:transparent !important;opacity:1;font-weight:400;padding:7px 12px;text-decoration:none !important;transition:.2s;margin-top:10px;}
.nfk-side-logout{color:var(--main-color) !important;}
.nfk-side-logout:hover{color:var(--main-hover-color) !important;}
.nfk-acc-intro{margin:0 0 22px;font-size:15px;line-height:1.6;color:#444;}
.nfk-acc-content{min-height:120px;min-width:0;}
@media(max-width:760px){
    .nfk-acc-layout{grid-template-columns:1fr;}
    .nfk-acc-side{padding-right:0;}
    .nfk-acc-main{padding-left:0;border-left:none;border-top:var(--main-border);margin-top:14px;padding-top:18px;}
}
/* Bestellliste: klickbare Zeilen + Pagination */
.nfk-tbl-orders .nfk-row-click{cursor:pointer;transition:background .12s;}
.nfk-tbl-orders .nfk-row-click:hover{background:#f5f5f5;}
.darkmode .nfk-tbl-orders .nfk-row-click:hover{background:#ffffff14;}
.nfk-cell-arrow{text-align:right;color:var(--main-color);opacity:.35;font-size:20px;width:22px;}
.nfk-cell-center{text-align:center !important;}
.nfk-cell-right{text-align:right !important;}
.nfk-pg{position:relative;display:flex;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap;gap:10px;}
.nfk-pg-nav{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--main-color) !important;}
.nfk-pg-info{min-width:96px;text-align:center;}
.nfk-pg-arrow{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:var(--main-border);border-radius:10px;background:var(--main-background);color:var(--main-color) !important;cursor:pointer;text-decoration:none;transition:.2s;}
.nfk-pg-arrow:hover{background:var(--main-button-hover-background);border:var(--main-button-hover-border);color:var(--main-button-hover-color) !important;}
.nfk-pg-arrow--off{opacity:.3;pointer-events:none;}
.nfk-pg-limit{position:absolute;right:0;top:50%;transform:translateY(-50%);}
@media(max-width:640px){.nfk-pg-limit{position:static;transform:none;}}
.nfk-pg-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--main-color) !important;}
.nfk-pg-btn{display:inline-flex;align-items:center;gap:6px;border:var(--main-button-border);background:var(--main-button-background);color:var(--main-button-color) !important;padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px;line-height:1.4;text-decoration:none;transition:.2s;}
.nfk-pg-btn:hover{background:var(--main-button-hover-background);border:var(--main-button-hover-border);color:var(--main-button-hover-color) !important;}
.nfk-pg-sel{padding:9px 12px;font-size:14px;border:var(--main-border);border-radius:10px;background:var(--main-background);color:var(--main-color) !important;font-family:inherit;transition:.2s;}
.nfk-pg-sel:focus{outline:none;}
.nfk-pg-sel option{background:var(--main-background);color:var(--main-color);}
/* Bestell-Detail */
.nfk-od-top{margin-bottom:16px;}
.nfk-od-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
.nfk-od-nr{font-size:22px;font-weight:700;color:var(--main-color);}
.nfk-od-sums{max-width:360px;margin-left:auto;margin-bottom:24px;}
.nfk-od-sums>div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--main-color);opacity:.8;}
.nfk-od-sums .nfk-od-total{border-top:var(--main-border);margin-top:4px;padding-top:10px;font-size:16px;color:var(--main-color);opacity:1;font-weight:700;}
.nfk-od-cols{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:24px;}
.nfk-od-addr{font-size:14px;line-height:1.6;color:var(--main-color);opacity:.85;}
.nfk-od-addr h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;opacity:.6;}
.nfk-od-doch{margin:0 0 12px;font-size:15px;}
.nfk-doc-list{display:flex;flex-wrap:wrap;gap:10px;}
.nfk-doc{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:var(--main-button-border);background:var(--main-button-background);border-radius:10px;color:var(--main-button-color) !important;text-decoration:none;font-size:14px;font-weight:600;transition:.2s;}
.nfk-doc:hover{background:var(--main-button-hover-background);color:var(--main-button-hover-color) !important;border:var(--main-button-hover-border);}
/* Anmelden + Konto erstellen nebeneinander, Trennstrich in der Mitte */
.nfk-card--auth{max-width:760px;}
.nfk-cols{display:grid;grid-template-columns:1fr 1fr;}
.nfk-col{padding:8px 30px 30px;}
.nfk-col + .nfk-col{border-left:1px solid #ececec;}
@media(max-width:680px){
    .nfk-cols{grid-template-columns:1fr;}
    .nfk-col{padding:6px 26px 26px;}
    .nfk-col + .nfk-col{border-left:none;border-top:1px solid #ececec;padding-top:18px;}
}
.nfk-head{padding:30px 30px 6px;}
.nfk-head h2{margin:0 0 4px;font-size:26px;letter-spacing:-.3px;}
.nfk-head p{margin:0;color:#777;font-size:14px;line-height:1.5;}
/* Schließen-Button (X) oben rechts */
.nfk-x{position:absolute;top:12px;right:14px;border:none;background:transparent;font-size:30px;line-height:1;color:#999;cursor:pointer;z-index:2;}
.nfk-x:hover{color:#333;}
/* Umschalter Anmelden / Registrieren: Text mit gleitendem Strich darunter */
.nfk-tabs{position:relative;display:flex;margin:16px 30px 0;border-bottom:1px solid #ececec;}
.nfk-tab{flex:1;background:none;border:none;padding:13px 0;font-size:15px;font-weight:700;color:#9aa0a6;cursor:pointer;transition:color .15s;}
.nfk-tab:hover{color:#555;}
.nfk-tab.active{color:#111;}
.nfk-tab-slider{position:absolute;bottom:-1px;left:0;width:50%;height:2.5px;border-radius:2px;background:var(--nfk-accent2);transition:transform .25s ease;}
.nfk-tabs[data-active="register"] .nfk-tab-slider{transform:translateX(100%);}
.nfk-note--right{text-align:right;}
/* Bewegung beim Umschalten der Abschnitte (rein-/rausgleiten) */
@keyframes nfk-fade{from{opacity:0;}to{opacity:1;}}
.nfk-anim-right,.nfk-anim-left{animation:nfk-fade .2s ease;}
/* Alle Abschnitte in EINE Grid-Zelle stapeln: die Höhe richtet sich nach dem
   größten Abschnitt, egal welcher gerade sichtbar ist -> kein Springen. */
.nfk-authwrap{display:grid;}
.nfk-authwrap > [data-auth-section]{grid-area:1 / 1;min-width:0;visibility:hidden;}
.nfk-authwrap > [data-auth-section].nfk-active{visibility:visible;}
.nfk-sec-head{padding:20px 0 8px;}
.nfk-sec-head h2{margin:0 0 4px;font-size:24px;letter-spacing:-.3px;}
.nfk-sec-head p{margin:0;color:#777;font-size:14px;line-height:1.5;}
/* Wippschalter Anmelden <-> Registrieren */
.nfk-switcher{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 30px 0;font-size:14px;font-weight:600;}
.nfk-switcher .nfk-sw-label{color:#9aa0a6;transition:.15s;user-select:none;cursor:pointer;}
.nfk-switcher .nfk-sw-label.active{color:#111;}
/* Eigenständige Schalter-Optik (unabhängig vom Shop-#all-Scope) */
.nfk-switch-input{position:absolute;opacity:0;width:0;height:0;}
.nfk-switch{display:inline-block;width:40px;height:22px;border-radius:999px;background:#e5e7eb;position:relative;transition:.2s;flex:0 0 auto;cursor:pointer;}
.nfk-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:.2s;}
.nfk-switch-input:checked + .nfk-switch{background:#22c55e;}
.nfk-switch-input:checked + .nfk-switch::after{transform:translateX(18px);}
.nfk-switch.nfk-err{background:#fde2e7;box-shadow:inset 0 0 0 2px #e11d48;}
.nfk-privacy{display:flex;align-items:center;gap:14px;font-size:13px;color:#555;margin:2px 0 16px;line-height:1.35;cursor:pointer;}
/* Animiert eingeblendeter Bereich (Passwort/Registrierung), nachdem die E-Mail geprüft wurde */
.nfk-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .38s ease,opacity .3s ease .05s;}
.nfk-reveal.open{max-height:360px;opacity:1;}
.nfk-reveal-inner{padding-top:16px;}
.nfk-hint{font-size:13.5px;color:#555;margin-bottom:14px;}
/* Grüner Haken im E-Mail-Feld: "erkannt" (bestehendes Konto) */
.nfk-mailcheck{position:absolute;right:12px;top:50%;line-height:0;transform:translateY(-50%) scale(.3);opacity:0;transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .22s ease;pointer-events:none;}
.nfk-mailcheck.show{opacity:1;transform:translateY(-50%) scale(1);}
.nfk-mailcheck svg{display:block;}
.nfk-mailcheck svg path{stroke-dasharray:16;stroke-dashoffset:16;}
.nfk-mailcheck.show svg path{animation:nfk-draw .42s ease forwards .12s;}
@keyframes nfk-draw{to{stroke-dashoffset:0;}}
.nfk-authmail-check{position:relative;}
[data-authmail].nfk-checking{background-image:none;}
.nfk-body{padding:22px 30px 30px;}
.nfk-wrap form{margin:0;}
.nfk-field{margin-bottom:14px;}
.nfk-field label{display:block;font-size:12.5px;font-weight:600;color:var(--main-color);opacity:.75;margin-bottom:6px;}
.nfk-input{width:100%;box-sizing:border-box;padding:13px 14px;border:var(--main-border);border-radius:10px;font-size:15px;transition:.15s;background:var(--main-background);color:var(--main-color);}
.nfk-input:focus{outline:none;border-color:var(--main-color);box-shadow:inset 0 0 0 1px var(--main-color);}
.nfk-input.nfk-err{border-color:#e11d48;box-shadow:inset 0 0 0 1px #e11d48;}
.nfk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.nfk-pw{position:relative;}
.nfk-pw .nfk-eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);cursor:pointer;color:#999;font-size:15px;user-select:none;}
.nfk-pw .nfk-eye:hover{color:#555;}
.nfk-btn{width:100%;padding:14px;border:var(--main-largebutton-border);border-radius:10px;background:var(--main-largebutton-background) !important;color:var(--main-largebutton-color) !important;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;}
.nfk-btn:hover{background:var(--main-largebutton-hover-background) !important;color:var(--main-largebutton-hover-color) !important;border:var(--main-largebutton-hover-border);}
.nfk-btn[disabled]{opacity:.55;cursor:default;}
.nfk-btn--ghost{background:var(--main-button-background) !important;color:var(--main-button-color) !important;border:var(--main-button-border);}
.nfk-btn--ghost:hover{background:var(--main-button-hover-background) !important;color:var(--main-button-hover-color) !important;border:var(--main-button-hover-border);}
.nfk-note{margin-top:16px;text-align:center;font-size:13.5px;color:var(--main-color);opacity:.6;}
.nfk-link{color:var(--main-color);cursor:pointer;text-decoration:none;font-weight:600;}
.nfk-link:hover{text-decoration:underline;}
.nfk-msg{padding:12px 14px;border-radius:11px;font-size:13.5px;margin-bottom:16px;display:none;}
.nfk-msg.err{display:block;background:#fdecec;color:#c0392b;border:1px solid #f5c6c6;}
.nfk-msg.ok{display:block;background:#eafaf0;color:#1e8449;border:1px solid #bfe9cf;}
.nfk-check{display:flex;align-items:center;gap:10px;font-size:13px;color:#555;margin:2px 0 16px;cursor:pointer;}
.nfk-check input{width:17px;height:17px;}
.nfk-acc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 30px;border-bottom:1px solid #f0f0f0;}
.nfk-acc-hi{font-size:22px;font-weight:700;margin:0;}
.nfk-acc-sub{color:#888;font-size:13.5px;margin:3px 0 0;}
.nfk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 30px;}
.nfk-panel{border:var(--main-border);border-radius:12px;padding:18px;}
.nfk-panel h3{margin:0 0 12px;font-size:15px;}
.nfk-tbl{width:100%;border-collapse:collapse;font-size:14.5px;}
.nfk-tbl th,.nfk-tbl td{text-align:left;padding:11px 10px;border-bottom:var(--main-border);}
.nfk-tbl th:last-child,.nfk-tbl td:last-child{padding-right:0;}
.nfk-tbl th{color:var(--main-color) !important;opacity:.6;font-weight:700;font-size:14px;text-transform:none;letter-spacing:normal;}
.nfk-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;}
.nfk-badge.paid{background:#eafaf0;color:#1e8449 !important;}
.nfk-badge.open{background:var(--main-button-background);color:var(--main-button-color) !important;border:var(--main-button-border);}
.nfk-addr{padding:14px 0;font-size:13.5px;line-height:1.5;position:relative;}
.nfk-addr + .nfk-addr{border-top:var(--main-border);}
.nfk-addr .nfk-addr-act{position:absolute;top:10px;right:12px;display:flex;gap:8px;}
/* Bearbeiten/Löschen wie die Admin-.btn-icon (36x36, Font-Awesome fa-pen/fa-trash) */
.nfk-addr .nfk-addr-act .nfk-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:var(--main-button-border);background:var(--main-button-background);color:var(--main-color) !important;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;transition:.2s;}
.nfk-addr .nfk-addr-act .nfk-ic svg{fill:currentColor;}
.nfk-addr .nfk-addr-act .nfk-ic:hover{background:var(--main-button-hover-background);color:var(--main-button-hover-color) !important;border:var(--main-button-hover-border);}
.nfk-addr .nfk-addr-act .nfk-ic:hover svg{fill:var(--main-button-hover-color) !important;}
.nfk-addr .nfk-addr-act .nfk-ic-del:hover{background:#e5484d !important;color:#fff !important;border-color:#e5484d !important;}
.nfk-addr .nfk-addr-act .nfk-ic-del:hover svg{fill:#fff !important;}
.nfk-muted{color:var(--main-color) !important;opacity:.5;font-size:13px;}
.nfk-legal-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100002;}
.nfk-legal-box{background:#fff;max-width:720px;margin:5vh auto;max-height:86vh;overflow:auto;border-radius:14px;padding:24px 26px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.35);}
@media(max-width:720px){.nfk-grid2{grid-template-columns:1fr;}.nfk-row{grid-template-columns:1fr;}}

/* aus konto.php */
.nfk-sec-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;}.nfk-sec-akt{min-height:40px;}
        /* Filter-Button wie die anderen Shop-Buttons: Hover = gefüllt (schwarzer
           Grund, WEISSE Schrift) statt schwarz-auf-schwarz. Aktiv = ebenfalls gefüllt. */
.nfk-ofil-btn{display:inline-flex;align-items:center;background:var(--main-button-background);color:var(--main-button-color) !important;border:var(--main-button-border);border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s;}
        /* Hover/aktiv: schwarzer Grund mit WEISSER Schrift + weißem Icon – nie schwarz-auf-schwarz. */
.nfk-ofil-btn:hover,.nfk-ofil-btn--on{background:#111 !important;color:#fff !important;border:1px solid #111 !important;}
.nfk-ofil-btn:hover svg,.nfk-ofil-btn--on svg{fill:#fff;}
        /* Inline-Layout: Liste rückt bei offenem Filter nach links, Panel schiebt sich rechts rein.
           Trennlinie oben (sauberes Reinfahren) + Mindesthöhe, damit das Panel ordentlich Platz hat. */
.nfk-ord-body{position:relative;overflow:hidden;border-top:1px solid #e4e7ec;padding-top:16px;min-height:460px;}
.darkmode .nfk-ord-body{border-top-color:#ffffff1f;}
.nfk-ord-main{transition:margin-right .25s ease;min-width:0;}
.nfk-ord-body.nfk-fopen .nfk-ord-main{margin-right:280px;}
.nfk-ofil{position:absolute;top:0;bottom:0;right:0;width:260px;box-sizing:border-box;background:#fff;border:0;border-left:1px solid #e4e7ec;border-radius:0;padding:16px 4px 18px 22px;overflow-y:auto;transform:translateX(115%);opacity:0;transition:transform .25s ease,opacity .2s ease;}
.nfk-ord-body.nfk-fopen .nfk-ofil{transform:translateX(0);opacity:1;}
.nfk-ofil-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.nfk-ofil-head strong{font-size:16px;}
.nfk-ofil-x{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:#999;padding:0 4px;}
.nfk-ofil-body label{display:block;font-size:13px;color:#777;margin:14px 0 5px;}
.nfk-ofil-foot{display:flex;gap:10px;margin-top:18px;}
.nfk-ofil-foot .nfk-btn{flex:1;width:auto;padding:11px 0;}
        /* Mobil: Panel unter die Liste, volle Breite (kein Nebeneinander). */
@media(max-width:640px){.nfk-ord-body.nfk-fopen .nfk-ord-main{margin-right:0;}.nfk-ofil{position:static;width:100%;transform:none;opacity:1;margin-top:14px;display:none;}.nfk-ord-body.nfk-fopen .nfk-ofil{display:block;}}
.darkmode .nfk-ofil{background:#151515;border-color:#ffffff1f;color:#eee;}
.darkmode .nfk-ofil-body label{color:#9aa0aa;}

/* aus cart_content.php -- NF-KASSE-LEER (08.09.2026): der Kassen-Teil (Adresse, Zahlart, Bestellknopf) ist
   standardmaessig versteckt; refreshCart() in core.js setzt display:block nur bei gefuelltem Korb.
   Vorher stand hier zusaetzlich .checkout{display:block} (aus dem Nicht-leer-Zweig der alten Inline-Styles),
   dadurch war die Zahlart auch bei leerem Korb sichtbar. */
.checkout{display:none}

/* aus cart_content.php */
.input-error{
        border:2px solid #dc3545 !important;
        background:#fff5f5 !important;
    }

/* ==== flatpickr (Datepicker) CSS – gebündelt, MIT ==== */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/* --- Embed-Bausteine: der eingebettete <div id="core" data-…="0"> blendet selbst
   Header-Teile aus. Vom Partner-/Shop-Link gesteuert, keine Extra-Datei nötig. --- */
#core[data-nav="0"]    #open-cat,
#core[data-nav="0"]    #catOverlay        { display:none !important; }
#core[data-logo="0"]   #logo              { display:none !important; }
#core[data-search="0"] #core-search       { display:none !important; }
#core[data-cart="0"]   #open-cart         { display:none !important; }
#core[data-account="0"] #nf-account-btn   { display:none !important; }
#core[data-footer="0"] .site-footer       { display:none !important; }
#core[data-theme="0"]  #themeButton,
#core[data-theme="0"]  #largeListingThemeButton { display:none !important; }
#core[data-cookie="0"] #nf-cookie-banner,
#core[data-cookie="0"] #nf-cookie-toggle   { display:none !important; }

/* Cookie-Banner: garantierter Kontrast in Light UND Dark (Text + Buttons).
   Das Banner nutzte hart codierte Farben ohne Dark-Overrides -> unlesbar im
   Dark-Mode. #id schlägt die .nfs-*-Klassen, gilt also sicher. */
#nf-cookie-banner            { background:#ffffff; color:#1c1c1c; border:1px solid #e2e2e2; }
#nf-cookie-banner .nfs-5     { color:#111111; }
#nf-cookie-banner .nfs-6     { color:#4a4a4a; }
#nf-cookie-banner .nfs-7     { color:#2563eb; }
#nf-cookie-banner .nfs-9     { background:#111111; color:#ffffff; border:1px solid #111111; }
#nf-cookie-banner .nfs-10    { background:#ffffff; color:#1c1c1c; border:1px solid #c9c9c9; }
#nf-cookie-toggle            { background:#ffffff; color:#111111; border:1px solid #e2e2e2; }

.darkmode #nf-cookie-banner         { background:#1b1d21; color:#f1f1f1; border-color:#ffffff2b; }
.darkmode #nf-cookie-banner .nfs-5  { color:#ffffff; }
.darkmode #nf-cookie-banner .nfs-6  { color:#c8ccd2; }
.darkmode #nf-cookie-banner .nfs-7  { color:#7ab8ff; }
.darkmode #nf-cookie-banner .nfs-9  { background:#3dffc1; color:#04231a; border:1px solid #3dffc1; }
.darkmode #nf-cookie-banner .nfs-10 { background:transparent; color:#f1f1f1; border:1px solid #ffffff45; }
.darkmode #nf-cookie-toggle         { background:#1b1d21; color:#ffffff; border-color:#ffffff2b; }
/* Keks-Icon in Dark: Keks-Körper weiß, Streusel dunkel (schwarzer Keks wäre sonst unsichtbar). */
.darkmode #nf-cookie-banner .nfs-5 svg circle:first-child,
.darkmode #nf-cookie-toggle svg circle:first-child       { fill:#ffffff; }
.darkmode #nf-cookie-banner .nfs-5 svg circle:not(:first-child),
.darkmode #nf-cookie-toggle svg circle:not(:first-child) { fill:#1b1d21; }

/* Letzter Rest der alten kompakten Ansicht – ebenfalls weg. Abstand und
   Zeilenhöhe des Grundpreises gehören an das Kachel-Teil im Designer, nicht an
   eine Ansicht-Klasse. Siehe den Block bei „KOMPAKTE ANSICHT" weiter oben. */

/* Einstellungen (dunkel/klein): beide Boxen als echte Flex-Zeile, gleich hoch und
   OBEN-bündig – gegen den diagonalen Versatz. */
#all .theme-buttons { display: flex !important; align-items: stretch !important; flex-wrap: nowrap; gap: 10px; }
#all .theme-buttons .themeButton { flex: 1 1 0 !important; min-width: 0; margin: 0 !important; vertical-align: top; align-self: stretch; }
#core[data-content="0"] #content        { display:none !important; }
/* Header-Leiste aus: nur die Symbole stehen lose oben (kein 80px-Balken). */
/* Header-Leiste aus: der Kopfbalken verschwindet ganz — genauso wie es
   „Inhalt" (#content) und „Footer" (.site-footer) tun. Frueher wurden hier nur
   Hoehe, Polster und Hintergrund von #topbar zurueckgesetzt. Seit der Kopf aus
   dem Designer-Layout kommt (im #topbar liegt eine .nf-lay-row, die sichtbare
   Flaeche ist die .nf-region-frame DARIN), traf das ins Leere: der Schalter
   sah aus, als taete er nichts. */
#core[data-header="0"] #headercontent,
#core[data-header="0"] #topbar { display:none !important; }
/* Fixierter Header aus: Header klebt nicht oben fest (überschreibt .allactive). */
#core[data-fixed="0"] #all.allactive #header,
#core[data-fixed="0"] .allactive #header { position:static !important; box-shadow:none !important; }

/* Fixierter Header AN (Partner-Schalter im Embed): der Kopf bleibt oben stehen,
   auch wenn der Shop selbst keine Fixierung eingestellt hat. Bewusst `sticky`
   statt `fixed`:
     - es braucht kein `.allactive` (das setzt core.js erst ab dem ersten
       Scroll-Pixel — im Embed wurde es deshalb oft nie gesetzt),
     - der Kopf bleibt IM iframe stehen statt am Browserfenster zu kleben,
     - und er nimmt keinen Platz aus dem Fluss, es braucht also keinen
       Platzhalter (siehe die alte allactive-Falle: Seite sprang um 98 px).
   Steht NACH der data-fixed="0"-Regel, damit der Partner-Schalter die
   Shop-Einstellung ueberstimmt (gleiche Spezifitaet -> spaetere Regel gewinnt). */
#core[data-fixed="1"] #headercontent {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* Fusszeile festhalten (Chrome-Einstellung footer.fixed -> #core[data-footfixed]).
   Sie bleibt am unteren Fensterrand stehen, statt am Ende des Inhalts zu sitzen.
   Damit sie den Inhalt nicht verdeckt, bekommt die Seite unten genau so viel Luft,
   wie die Fusszeile hoch ist – die Hoehe misst footer.php und legt sie als
   --nf-footfix-h ab (eine feste Zahl waere hier falsch: der Fussbereich ist frei
   gestaltbar und auf dem Handy hoeher). */
#core[data-footfixed="1"] #footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
}
#core[data-footfixed="1"] {
    padding-bottom: var(--nf-footfix-h, 0px);
}
/* Im Designer schiebt die offene Schublade die Seite nach links – die festgehaltene
   Fusszeile muss mitwandern, sonst laege sie unter dem Panel. Gleiche Regel wie
   beim Header (editor.css). */
html.nfed-pal-push #core[data-footfixed="1"] #footer { right: 300px; }

/* Zeitintervall-Container (#saleUnit) – früher inline gestyltes DIV, jetzt als
   Klasse. Die Verkaufsarten-JS bzw. das Layout-Twig füllt den Inhalt. */
.nf-lay-saleunit {
    /* Farbe bewusst NICHT im CSS – wird im Designer am Atom (product_sale_unit) gesetzt. */
    font-size: 14px;
    font-weight: normal;
    line-height: 1.1;
    min-height: 16px;
    margin-bottom: 1px;
}

/* Mehrwertsteuer-Hinweis (Layout-Baustein) – grau/klein, KEIN text-align
   (Ausrichtung macht die Spalte). */
.nf-lay-vat {
    /* Farbe bewusst NICHT im CSS – wird im Designer am Atom (product_vat) gesetzt. */
    font-size: 13px;
    line-height: 1.2;
}

/* Hersteller-Bild im Layout: als inline-flex, damit die Spalten-Ausrichtung
   (text-align links/mittig/rechts) greift. MUSS `#all .manuimg{display:flex}`
   ueberbieten -> darum ebenfalls mit `#all` (hoehere Spezifitaet). */
#all .nf-lay-el .manuimg { display: inline-flex; }
/* Herstellerbild im Layout: KEINE feste Breite per CSS – die Breite kommt aus dem
   Editor (Element-/Spaltenbreite). Wir überschreiben nur die harte 80px-Breite;
   das Bild füllt die vom Editor gesetzte Breite. */
#all .nf-lay-el .manuimg { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Mengen-Aufzähler als Layout-Element: FLEXIBEL – füllt die Spaltenbreite, der
   Wert dehnt sich, die +/−-Knöpfe behalten ihre Größe (kein Überlauf in schmalen
   Spalten, kein fixes max-content mehr). Nur im Layout, die Kauf-Box bleibt kompakt. */
#all .nf-lay-el .qty-box {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    /* RAHMEN UND ECKEN KOMMEN AUS DEM BAUSTEIN, NICHT VON HIER.
       `#all .qty-box` brachte `1px solid #e2e5ea` und `border-radius:12px` fest
       mit – im Editor liess sich beides deshalb nicht wegstellen. Steckt der
       Zaehler in einem Layout-Baustein, gilt ab dem 13.08.2026: von Haus aus
       KEIN Rahmen, und die Ecken erbt er von der Huelle. Wer einen Rahmen will,
       stellt ihn am Baustein ein.
       Ohne Baustein (Kasse, Quickview) bleibt der graue Rahmen wie bisher. */
    border: 0;
    border-radius: inherit;

    /* … UND DIE FLAECHE AUCH NICHT.
       `#all .qty-box{background:#fff}` und `#all #minus,#plus{background:#fff}`
       deckten jede Farbe zu, die am Baustein eingestellt war – dieselbe Falle
       wie beim Kauf-Knopf, nur eine Ebene tiefer. Im Baustein ist der Zaehler
       jetzt durchsichtig; was man sieht, kommt von aussen.
       Ohne Baustein (Kasse, Quickview) bleibt es beim weissen Feld. */
    background: transparent;
}
#all .nf-lay-el .qty-box > #minus,
#all .nf-lay-el .qty-box > #plus,
#all .nf-lay-el .qty-box > #qty{
    background: transparent;
    color: inherit;
}
#all .nf-lay-el .qty-box > #minus:hover,
#all .nf-lay-el .qty-box > #plus:hover{
    background: #dedede;
}
/* Die beiden Trennstriche zwischen −, Zahl und +. */
#all .nf-lay-el .qty-box > #minus{ border-right: 1px solid #dedede; }
#all .nf-lay-el .qty-box > #plus { border-left:  1px solid #dedede; }

#all .nf-lay-el .qty-box > #qty   { flex: 1 1 auto; min-width: 0; text-align: center; }
/* KEINE FESTEN BREITEN IM BAUSTEIN.
   `#minus`/`#plus` hatten `width:60px` und `#qty` ein `min-width:52px` fest im
   CSS – zusammen 172 px, unter die der Zaehler nicht ging, egal was im Panel
   stand. Die Breite gehoert an den Baustein, nicht hierher.
   Die Knoepfe behalten ein Polster, damit sie mit dem Finger treffbar bleiben;
   die Zahl in der Mitte nimmt den Rest. Ohne Baustein (Kasse, Quickview)
   bleiben die festen 60/52 px, dort gibt es nichts zum Einstellen. */
#all .nf-lay-el .qty-box > #minus,
#all .nf-lay-el .qty-box > #plus,
#all .nf-lay-el .qty-box > #qty   {
    /* GLEICHE ANTEILE STATT EIGENER BREITEN.
       Mit `width:auto` wurde jeder Knopf so breit wie sein Zeichen – und „−“
       ist schmaler als „+“, also standen die drei Felder schief. `flex:1 1 0`
       teilt die Breite zu gleichen Teilen, unabhaengig vom Zeichen. Bei den
       frueher fest verdrahteten 180 px sind das wieder 60 px je Feld, nur
       eben mitwachsend. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0;
}

/* Grundpreis als EIGENSTÄNDIGES Layout-Element mittig. Zeitintervall wurde
   bewusst wieder entfernt – es folgt jetzt der Spalten-Ausrichtung (kein
   erzwungenes Mittig mehr). */
/* (Grundpreis: keine erzwungene Ausrichtung – kommt aus dem Designer.) */

/* Staffelpreise (Mengenrabatt) – entzaubert wie der Preis: sprechende Klassen (kein nf-).
   Die Box-Optik haengt an product_price_tiers, das als CSS-Klasse-Feld auf dem
   p_pricetiers-Atom (Wrapper-Element) sitzt; Titel/Zeile sind product_price_tiers_title /
   product_price_tier. So steht jede gestaltete Klasse sichtbar im Designer-Feld. */
#all .product_price_tiers, .product_price_tiers { margin-top: 10px; text-align: left; font-size: 13px; color: #666; line-height: 1.5; clear: both; }
.product_price_tiers_title { font-weight: 600; margin-bottom: 2px; }

/* ===== Logo: eigenes Bild fuer den Dunkel-Modus =====
   Ein Logo mit schwarzer Schrift verschwindet auf dunklem Grund. Ist im Designer
   ein zweites Logo hinterlegt (Feld „Logo-Bild (Dunkel-Modus)"), zeigen wir je
   Modus genau eines. Ohne zweites Bild bleibt alles wie bisher. */
#all .nf-el-logo.hat-dunkel .nf-logo-dunkel { display: none; }
#all.darkmode .nf-el-logo.hat-dunkel .nf-logo-hell { display: none; }
#all.darkmode .nf-el-logo.hat-dunkel .nf-logo-dunkel { display: inline-block; }

/* ===== Logo passt sich der Spalte an =====
   Das Logo nimmt die Breite seiner Spalte an und bleibt dabei im Seitenverhaeltnis;
   ueber die Hoehe der Spalte waechst es nie hinaus. Damit sitzt es sofort richtig –
   auch wenn man ein Logo NEU in eine Spalte zieht, ohne dass man Maße setzen muss.
   Eine im Designer gesetzte Breite/Hoehe am Element gewinnt weiterhin (Inline-Stil). */
#all .nf-el-logo {
    display: block;
    max-width: 100%;
    /* Hoehe DURCHREICHEN: das Bild begrenzt sich mit max-height:100% – eine
       Prozent-Grenze braucht aber einen Elternteil mit fester Hoehe. Der Link
       dazwischen hatte keine, deshalb lief das Logo ueber die im Designer
       gesetzten 28px hinaus (47px gerendert). */
    height: 100%;
    max-height: 100%;
    line-height: 0;          /* keine Zeilen-Luecke unter dem Bild */
}
#all .nf-el-logo img {
    /* KEIN width:100% mehr. Das hat das Bild auf die volle Elementbreite gezogen,
       die Hoehe folgte dem Seitenverhaeltnis – eine im Designer gesetzte HOEHE war
       damit wirkungslos (28px eingestellt, 47px gerendert). Jetzt begrenzt das
       Element, das Bild passt sich ein: Hoehe ODER Breite im Designer setzen, das
       jeweils andere ergibt sich. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;     /* nie verzerren, nie ueberlaufen */
    display: block;
}

/* ===== Kopfzeile: alle Spalten gleich hoch =====
   Vorher richtete sich jede Spalte nach ihrem eigenen Inhalt – die Logo-Spalte war
   dadurch niedriger als die von Suche/Konto/Warenkorb. Jetzt spannen sich alle
   Spalten auf dieselbe Hoehe (stretch) und ihr Inhalt sitzt mittig darin. Damit
   passt auch das Logo, das sich seiner Spalte anpasst. */
#all #topbar .nf-lay-row { align-items: stretch; }
#all #topbar .nf-lay-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== Spalten IN der Kachel: Abstand dazwischen =====
   Die Zeile-mit-Spalten (Baustein ci_row) ist eine Flex-Zeile. Ohne Abstand kleben
   ihre Spalten aneinander. 12px sowohl waagerecht als auch – wenn sie umbrechen
   oder untereinander stehen – senkrecht. Ein im Designer gesetzter Wert
   („Abstand zwischen Elementen") gewinnt weiterhin, der kommt als Inline-Stil. */
#all .card .card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}
#all .card .card-row > .card-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Zwischenraum zwischen nebeneinanderliegenden Spalten. Der GLEICHE Wert steht in
   layout_col_gutter() (admin/includes/layout_lib.php) und wird dort von jeder
   Prozent-Breite abgezogen – nur so bleiben 2x50% in EINER Zeile. Wer hier etwas
   aendert, muss ihn dort mitziehen. */
#all .nf-lay-row { column-gap: 12px; }

/* Kein fester Aussenabstand fuer die Zeile-mit-Spalten in der Kachel mehr:
   der Abstand gehoert in den Designer (Aussenabstand am Baustein), nicht in
   diese Datei – sonst laesst er sich dort nicht auf 0 stellen. */

/* ===== Suche: Hoehe bis zur Lupe durchreichen =====
   Die Suche ist tiefer verschachtelt als die anderen Icons
   (Element -> .core-search -> .nf-search-field -> Lupe). Damit eine im Designer
   gesetzte Hoehe unten ankommt, streckt sich jede Ebene auf ihren Elternteil –
   Strecken statt Prozent, weil Prozent-Hoehen an so einer Kette abreissen.
   Die Lupe bleibt quadratisch zur Hoehe, das Symbol waechst mit. */
#all .nf-lay-el:has(.core-search) { display: flex; align-items: stretch; }
/* Das Element traegt display:block INLINE vom Renderer – eine Flex-Regel aus dem
   Stylesheet kommt dagegen nicht an. Da die Elementhoehe fest ist, reicht hier
   eine Prozenthoehe, um sie an das Suchfeld weiterzugeben. */
#all .core-search { display: flex; flex: 1 1 auto; align-items: stretch; height: 100%; }
#all #topbar .nf-search-field { align-self: stretch; height: auto; }
/* Hier stand zuletzt eine feste Breite (40 px) und davor aspect-ratio: beides hat
   die Lupe im Designer unverstellbar gemacht. Groesse kommt jetzt vom Element. */

/* ---------------------------------------------------------------------------
   Automatisch nachladen: Ring unter dem Listing
   Dieselbe Geometrie und dieselbe Animation wie .cat-loader (der Ring, den der
   Shop beim Kategoriewechsel zeigt) – nur steht dieser hier IM FLUSS unter den
   Kacheln statt mittig ueber der Seite. Zwei Ringe mit verschiedenem Aussehen
   waeren an derselben Stelle zwei verschiedene Sprachen fuer dieselbe Sache.
--------------------------------------------------------------------------- */
#all .nf-lay-more{ text-align: center; }
#all .nf-lay-spin{
    display: block;
    width: 44px;
    height: 44px;
    margin: 18px auto;
    border: 3px solid #e6e6e6;
    border-top: 3px solid #111;
    border-radius: 50%;
    animation: catSpin 0.8s linear infinite;
}
/* Muss NACH der Regel oben stehen – sonst gewinnt display:block. */
#all .nf-lay-spin[hidden]{ display: none; }

/* ---------------------------------------------------------------------------
   Seiten-Formulare (Kontakt, Widerruf)
   Bewusst zurueckhaltend und ohne eigene Farben: Schrift und Textfarbe erbt das
   Formular vom Shop, Abstaende und Breite kommen aus der Spalte, in der es im
   Designer liegt. Hier steht nur, was ein Formular zum Funktionieren braucht.
--------------------------------------------------------------------------- */
/* DAS FORMULAR NIMMT DIE BREITE SEINER SPALTE.
   Hier stand ein Deckel von 560px. Damit war die Breite im CSS entschieden und
   nicht im Layout: eine Spalte ueber die volle Seite zeigte trotzdem ein
   schmales Formular, und keine Einstellung kam dagegen an. Wie breit es wird,
   bestimmt jetzt die Spalte, in der es steht – oder die Breite am Baustein. */
#all .nf-form{ display: flex; flex-direction: column; gap: 14px; width: 100%; }
#all .nf-form-feld{ display: flex; flex-direction: column; gap: 5px; }
#all .nf-form-label{ font-size: 13.5px; opacity: .85; }
#all .nf-form input,
#all .nf-form textarea{
    font: inherit; color: inherit; background: transparent;
    border: 1px solid rgba(128,128,128,.45); border-radius: 8px;
    padding: 10px 12px; width: 100%; box-sizing: border-box;
}
#all .nf-form textarea{ resize: vertical; min-height: 90px; }
#all .nf-form input:focus,
#all .nf-form textarea:focus{ outline: 2px solid #189eff; outline-offset: 1px; border-color: transparent; }
#all .nf-form-senden{
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 11px 22px; border: 0; border-radius: 8px;
    background: var(--main-color, #111); color: var(--main-background, #fff);
    align-self: flex-start;
}
#all .nf-form-senden[disabled]{ opacity: .55; cursor: default; }
/* Der Honigtopf muss fuer Menschen unsichtbar sein, fuer Skripte aber wie ein
   normales Feld aussehen – deshalb aus dem Bild schieben statt display:none. */
#all .nf-form-topf{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#all .nf-form-hinweis{ margin: 0; min-height: 1.2em; font-size: 14px; }
#all .nf-form-hinweis.is-ok{ color: #12a150; }
#all .nf-form-hinweis.is-fehler{ color: #e5484d; }

/* ============================================================
   UMSCHALTER am Produkt (p_tabs)
   ============================================================
   Beschreibung, Eigenschaften, Herstellerangaben, Technische Daten und
   Sicherheitshinweise liegen uebereinander; oben stehen die Reiter.

   OHNE JAVASCRIPT: die Auswahl haengt an verborgenen Radio-Knoepfen. Damit
   funktioniert der Wechsel auch, wenn ein Skript scheitert – und er ist sofort
   da, ohne auf Code zu warten. Die Bewegung macht der Uebergang: der Balken
   unter den Reitern faehrt mit, der Inhalt blendet auf. Dieselbe Sprache wie
   die Menue-Flaeche im Kopf.
   ------------------------------------------------------------ */
#all .nf-tabs{ margin: 24px 0; }

/* KEIN DURCHGEHENDER STRICH. Er lag als Linie unter der ganzen Reihe und sah
   aus wie ein Kasten, in dem die Reiter sitzen. Der Strich gehoert dorthin, wo
   man IST – und dorthin, wo man gerade hinzeigt. */
#all .nf-tabs-head{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Die Knoepfe selbst sieht niemand – sie tragen nur den Zustand. */
#all .nf-tabs-radio{ position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

#all .nf-tabs-tab{
    position: relative;
    padding: 10px 16px 12px;
    cursor: pointer;
    font-weight: 600;
    opacity: .6;
    transition: opacity .18s ease;
    user-select: none;
}

/* DER STRICH FAEHRT MIT. Er sitzt am Reiter selbst und waechst aus der Mitte
   nach aussen – dieselbe Bewegung wie die Menue-Flaeche im Kopf, nur kleiner.
   Beim Ueberfahren zeigt er blass, wohin man kaeme; beim gewaehlten steht er
   voll da. Ohne JavaScript: die Breite ist die des Reiters, und die kennt der
   Browser besser als jede gerechnete Kennzahl. */
/* Kein Wachsen aus der Mitte: der Strich liegt unter dem Wort und blendet nur
   auf. Die Bewegung macht der fahrende Balken – zwei Bewegungen uebereinander
   sind eine zu viel. */
#all .nf-tabs-tab::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: currentColor;
    transition: opacity .28s cubic-bezier(.22,.61,.36,1);
    opacity: 0;
}

#all .nf-tabs-tab:hover{ opacity: .9; }
#all .nf-tabs-tab:hover::after{ opacity: .45; }

/* Der gewaehlte Reiter: voll da, Strich bleibt stehen. */
#all .nf-tabs-radio:checked + .nf-tabs-tab{ opacity: 1; }
#all .nf-tabs-radio:checked + .nf-tabs-tab::after{ opacity: 1; }

/* ---- DER BALKEN, DER MITFAEHRT ----
   Genau wie im Mega-Menue (.nf-mega-ink): ein eigenes Stueck, das von Reiter zu
   Reiter GLEITET statt an jedem einzeln zu wachsen. Der Unterschied ist der
   Weg – man sieht, woher man kommt und wohin man geht.
   Solange er laeuft, sind die einzelnen Striche aus: sonst laegen zwei
   Markierungen uebereinander. Ohne JavaScript bleibt es beim wachsenden Strich,
   der Reiter ist also nie ohne Kennzeichnung. */
#all .nf-tabs-ink{
    position: absolute;
    /* Oben verankert und ueber transform bewegt – nicht unten festgemacht.
       Auf schmalen Bildschirmen liegen die Reiter in mehreren Zeilen; ein am
       unteren Rand haengender Balken staende dann unter der letzten Zeile,
       waehrend der gewaehlte Reiter in der ersten steht. */
    left: 0; top: 0; bottom: auto;
    width: 0;
    height: 3px;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.22,.61,.36,1),
                width     .28s cubic-bezier(.22,.61,.36,1),
                opacity   .28s cubic-bezier(.22,.61,.36,1);
}
#all .nf-tabs.has-ink .nf-tabs-tab::after{ display: none; }

/* Alle Inhalte liegen zunaechst weg. */
#all .nf-tabs-panel{ display: none; }

/* Und der zum gewaehlten Reiter kommt herein – kurz von unten, wie die
   Menue-Flaeche. Keine Hoehen-Animation: die Inhalte sind unterschiedlich lang,
   und ein springender Seitenfluss ist unruhiger als ein ruhiges Aufblenden. */
#all .nf-tabs-body{ padding-top: 18px; }
#all .nf-tabs-panel{ animation: nf-tabs-auf .22s ease both; }

@keyframes nf-tabs-auf{
    from{ opacity: 0; transform: translateY(6px); }
    to  { opacity: 1; transform: none; }
}

/* Welcher Inhalt gehoert zu welchem Reiter? Ueber die Reihenfolge:
   das n-te :checked schaltet das n-te Feld frei. */
#all .nf-tabs-radio:nth-of-type(1):checked ~ .nf-tabs-ink{ --nf-tab: 1; }

/* ZUORDNUNG REITER -> INHALT: UEBER DEN SCHLUESSEL, NICHT UEBER DIE POSITION.
   Hier stand `…head:has(…:nth-of-type(N)) ~ .nf-tabs-body > …:nth-child(N)`.
   Das setzte zweierlei voraus: gleiche Reihenfolge auf beiden Seiten UND dass
   Leiste und Inhalt Geschwister sind. Seit dem 13.08.2026 sind sie zwei eigene
   Bausteine (`p_tabs_nav` / `p_tabs_content`), die in ganz verschiedenen Zeilen
   liegen duerfen – der Geschwister-Pfeil `~` erreicht sie dann nicht mehr.
   Deshalb: `:has()` auf dem gemeinsamen Vorfahren `#all`, verbunden ueber
   `data-tab`. Reihenfolge und Ort sind damit egal. */
#all:has(.nf-tabs-radio[data-tab="desc"]:checked)    .nf-tabs-panel[data-tab="desc"],
#all:has(.nf-tabs-radio[data-tab="props"]:checked)   .nf-tabs-panel[data-tab="props"],
#all:has(.nf-tabs-radio[data-tab="manu"]:checked)    .nf-tabs-panel[data-tab="manu"],
#all:has(.nf-tabs-radio[data-tab="technic"]:checked) .nf-tabs-panel[data-tab="technic"],
#all:has(.nf-tabs-radio[data-tab="secure"]:checked)  .nf-tabs-panel[data-tab="secure"],
/* Der Reiter „Bewertungen" fehlte in dieser Liste — er liess sich anklicken,
   die Flaeche darunter blieb aber verborgen. */
#all:has(.nf-tabs-radio[data-tab="reviews"]:checked) .nf-tabs-panel[data-tab="reviews"]{
    display: block;
}

/* LIEGT KEINE REITERLEISTE AUF DER SEITE, zeigt der Inhalt den ersten Eintrag.
   Sonst waere kein Radio gewaehlt und der Baustein bliebe leer – jemand zieht
   den Inhalt hinein und sieht nichts. */
#all:not(:has(.nf-tabs-radio)) .nf-tabs-body > .nf-tabs-panel:first-child{
    display: block;
}

/* Eigenschaften als schlichte Tabelle. */
#all .nf-lay-proptable{ width: 100%; border-collapse: collapse; }
#all .nf-lay-proptable th,
#all .nf-lay-proptable td{
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(128,128,128,.18);
    vertical-align: top;
}
#all .nf-lay-proptable th{ width: 34%; font-weight: 600; }

/* Herstellerangaben: eine Anschrift, keine Kursivschrift. */
#all .nf-lay-manuinfo{ font-style: normal; line-height: 1.7; }


/* ---- HERSTELLERANGABEN: Zeichen und Anschrift links, Text rechts ----
   Logo und Anschrift stehen linksbuendig untereinander – sie beschreiben
   denselben Absender. Die Beschreibung steht daneben; fehlt sie, nimmt die
   linke Spalte den Platz nicht ein, sondern bleibt schmal. */
#all .nf-lay-manubox{
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
}
#all .nf-lay-manuside{
    flex: 0 0 auto;
    max-width: 260px;
    text-align: left;
}
#all .nf-lay-manulogo{
    max-width: 180px;
    margin-bottom: 12px;
}
#all .nf-lay-manulogo img{
    display: block;
    max-width: 100%;
    height: auto;
}
#all .nf-lay-manuinfo{
    font-style: normal;
    line-height: 1.6;
}
#all .nf-lay-manudesc{
    flex: 1 1 320px;
    min-width: 0;
}
@media (max-width: 600px){
    #all .nf-lay-manubox{ gap: 16px; }
    #all .nf-lay-manuside{ max-width: 100%; }
    #all .nf-lay-manulogo{ max-width: 120px; }
}


/* ---- REITER AUF SCHMALEN BILDSCHIRMEN ----
   Vier Reiter passen auf 375px nicht nebeneinander. Statt sie auf drei Zeilen
   zu verteilen (140px allein fuer die Kopfleiste), bleiben sie in EINER Zeile
   und die Leiste laesst sich wischen. Der Balken faehrt mit, weil er im selben
   scrollenden Kasten liegt. */
@media (max-width: 768px){
    #all .nf-tabs-head{
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #all .nf-tabs-head::-webkit-scrollbar{ display: none; }
    #all .nf-tabs-tab{ white-space: nowrap; flex: 0 0 auto; }
}

/* ---- BROTKRUME AUF SCHMALEN BILDSCHIRMEN ----
   Dieselbe Loesung wie bei den Reitern darueber. „Home › Damen › Jacken ›
   Softshelljacken" passt auf 375px nicht in eine Zeile; der Text brach in den
   Verweisen um und die Brotkrume stand ploetzlich zwei- oder dreizeilig da –
   mitten im Kopf der Seite und ohne erkennbare Ordnung.

   Jetzt bleibt sie EINE Zeile und laesst sich wischen. Zwei Dinge gehoeren
   dazu, sonst wirkt es nicht:
     max-width:100%  – die Brotkrume ist inline-flex (damit die Spalte sie
                       links/mittig/rechts setzen kann). Ohne Deckel waechst
                       sie ueber die Spalte hinaus, statt zu scrollen.
     white-space am KIND – der Umbruch passiert im Verweis selbst, nicht
                       zwischen den Stationen. flex-wrap allein reicht nicht. */
#all .nf-lay-bc.breadcrumb,
#all .breadcrumb{ max-width: 100%; }

@media (max-width: 768px){
    #all .nf-lay-bc.breadcrumb,
    #all .breadcrumb{
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #all .nf-lay-bc.breadcrumb::-webkit-scrollbar,
    #all .breadcrumb::-webkit-scrollbar{ display: none; }
    #all .nf-lay-bc.breadcrumb > *,
    #all .breadcrumb > *{ white-space: nowrap; flex: 0 0 auto; }
}

/* Geraete-Vorschau im Designer: dort gibt es keine schmale Fensterbreite,
   die Klasse am <html> steht stellvertretend dafuer. Ohne diese Wiederholung
   sieht der Bearbeiter im Handy-Modus etwas anderes als der Besucher. */
html.nfed-vp-phone #all .nf-lay-bc.breadcrumb,
html.nfed-vp-phone #all .breadcrumb{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
html.nfed-vp-phone #all .nf-lay-bc.breadcrumb::-webkit-scrollbar,
html.nfed-vp-phone #all .breadcrumb::-webkit-scrollbar{ display: none; }
html.nfed-vp-phone #all .nf-lay-bc.breadcrumb > *,
html.nfed-vp-phone #all .breadcrumb > *{ white-space: nowrap; flex: 0 0 auto; }


/* =========================================================================
   AUS DEM HTML HIERHER GEHOLT (12.08.2026)
   -------------------------------------------------------------------------
   Diese Regeln standen bis heute als <style>-Bloecke IN JEDER SEITE –
   zusammen 18,4 KB, bei jedem Aufruf neu uebertragen. Sie sind statische
   Zeichenketten im Quelltext: keine PHP-Variable, kein Wert aus der
   Datenbank, auf jeder Seite und in jedem Shop identisch. Es gab also
   keinen Grund, sie mitzuschicken statt sie einmal cachen zu lassen.

   Herkunft der Bloecke (dort ist die Ausgabe jetzt abgeschaltet):
     Layout-Basis          admin/includes/layout_lib.php  (Block ohne id)
     nf-chrome-css         header.php
     nf-mega-css / -p / -m admin/includes/layout_lib.php

   WER HIER ETWAS AENDERT, muss die Kennung in index.php hochzaehlen
   (css/style.css?v=…), sie laeuft NICHT ueber filemtime.

   NICHT hierher gehoert, was von Einstellungen abhaengt: die Theme-Farben
   (<style id="nf-theme">) und die erzeugten Regeln je Baustein stehen
   weiterhin dynamisch in css/<shop-uuid>.css bzw. in der Seite.
   ========================================================================= */

/* ===== Layout-Basis (Zeilen/Spalten/Slider) ===== */
.nf-lay-row{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0}.nf-lay-col{min-width:0;flex:1 1 100%}@media(min-width:751px){.nf-lay-col{flex:1 1 auto}.nf-lay-col--auto{flex:1 1 0;min-width:0}}@media(max-width:750px){.nf-lay-col:not(.m-keep){flex:1 1 100%!important;max-width:100%!important}[data-nf-lay-region] .nf-lay-col:not(.m-keep):not(.nf-lay-col--pct){flex:0 1 auto!important;max-width:none!important}.nf-lay-col.m-1-2{flex:1 1 50%!important;max-width:50%!important}.nf-lay-col.m-1-3{flex:1 1 33.3333%!important;max-width:33.3333%!important}}[data-nf-lay-region]>.nf-lay-row{flex:1 1 100%;width:100%;min-width:0}[data-nf-lay-region="header"]>.nf-lay-row{align-items:center;min-height:48px}[data-nf-lay-region="header"] .cat-btn,[data-nf-lay-region="header"] #nf-account-btn,[data-nf-lay-region="header"] #open-cart{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.nf-lay-el{margin:0;padding:0}.nf-lay-img{max-width:100%;height:auto;display:block}.nf-lay-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:.2s;box-sizing:border-box}.nf-lay-btn--primary,#all .nf-lay-btn--primary{background:var(--main-largebutton-background);color:var(--main-largebutton-color);border:var(--main-largebutton-border)}.nf-lay-btn--primary:hover,#all .nf-lay-btn--primary:hover{background:var(--main-largebutton-hover-background);color:var(--main-largebutton-hover-color);border:var(--main-largebutton-hover-border)}.nf-lay-btn--outline,#all .nf-lay-btn--outline{background:var(--main-button-background);color:var(--main-button-color);border:var(--main-button-border)}.nf-lay-btn--outline:hover,#all .nf-lay-btn--outline:hover{background:var(--main-button-hover-background);color:var(--main-button-hover-color);border:var(--main-button-hover-border)}.nf-lay-btn--link,#all .nf-lay-btn--link{background:none;border:0;color:var(--main-color);text-decoration:underline;padding:10px 0}.nf-lay-btn--link:hover,#all .nf-lay-btn--link:hover{color:var(--main-hover-color)}.nf-lay-pag{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.nf-lay-pag a,.nf-lay-pag span{min-width:40px;height:40px;padding:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;transition:.2s}.nf-lay-pag a,.nf-lay-pag span,#all .nf-lay-pag a,#all .nf-lay-pag span{border:var(--main-button-border);background:var(--main-button-background);color:var(--main-button-color)}.nf-lay-pag a:hover,#all .nf-lay-pag a:hover{border:var(--main-button-hover-border);background:var(--main-button-hover-background);color:var(--main-button-hover-color)}.nf-lay-pag .is-now,#all .nf-lay-pag .is-now{border:var(--main-largebutton-border);background:var(--main-largebutton-background);color:var(--main-largebutton-color)}.nf-lay-pag .is-off{opacity:.35}.nf-lay-el a.is-current{font-weight:600;text-decoration:underline}#all .nf-lay-col[data-lay-align="right"]>.nf-lay-el{margin-left:auto}#all .nf-lay-col[data-lay-align="center"]>.nf-lay-el{margin-left:auto;margin-right:auto}.nf-lay-gone{grid-template-columns:minmax(0,340px)}.nf-lay-grid{display:grid}.nf-lay-grid img{width:100%;display:block;object-fit:cover;aspect-ratio:1/1}.nf-lay-slider{position:relative;overflow:hidden}.nf-lay-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%}.nf-lay-track::-webkit-scrollbar{display:none}.nf-lay-track>img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;display:block}.nf-lay-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:var(--main-button-border);border-radius:50%;background:var(--main-button-background);color:var(--main-button-color);font-size:18px;line-height:36px;cursor:pointer;padding:0}.nf-lay-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}.nf-lay-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.7);cursor:pointer}.nf-lay-dots button[aria-current="true"]{background:#fff}

/* ===== Chrome-Vertraeglichkeit (Kopf)  [nf-chrome-css] ===== */
#all #topbar > .cart-icon{flex:0 0 auto;}
    #all #topbar > .cart-icon + .cart-icon{margin-left:-14px;}
    #all #topbar.nf-search-expanded > #nf-account-btn,
    #all #topbar.nf-search-expanded > #open-cart{display:none !important;}
    #all #topbar.nf-search-closing > #nf-account-btn,
    #all #topbar.nf-search-closing > #open-cart{visibility:hidden;}
    #all .nf-banner{width:100%;box-sizing:border-box;padding:8px 20px;text-align:center;line-height:1.4;}
    #all .nf-banner:empty{display:none;}
    /* HANDY: Der Banner sitzt ganz oben und soll die volle Breite bekommen. Die
       20px Seitenpolster kosten auf 390px Bildschirm ueber 10% der Flaeche und
       zwingen laengeren Text in eine zusaetzliche Zeile. Bild/Hintergrund gehen
       jetzt bis an den Rand, der Text bekommt sein Polster nur noch innen.
       Zweimal notiert: einmal fuer echte Handys (Media Query), einmal fuer die
       Mobil-Vorschau des Designers (nfed-vp-phone) – dort ist die Flaeche schmal,
       das Fenster aber breit, deshalb feuert die Media Query nicht. */
    @media (max-width: 640px){
        #all .nf-banner{padding-left:0;padding-right:0;}
        #all .nf-banner > *{max-width:100%;box-sizing:border-box;}
        #all .nf-banner img{width:100%;height:auto;display:block;}
    }
    /* HIER STANDEN FESTE HANDY-MASSE FUER DIE KOPFZEILE:
       Hoehe 40px fuer Burger/Suche/Konto/Korb, Mindestmasse und Schriftgroesse des
       Burgers, Obergrenzen fuer die Symbole, 6px Spaltenabstand und feste 40px
       Breite fuer die Symbolspalten – alles mit !important.
       ENTFERNT. Sie haben genau die Werte ueberstimmt, die im Designer fuer das
       Handy gepflegt werden. Seit der Shop die Geraete-Variante direkt ausspielt
       (nf_device_erkennen + shop_chrome_region_layout), kommen diese Masse aus der
       Konfiguration – als Inline-Stil, den kein Stylesheet mehr ueberschreibt.
       Was hier stand, gehoert in den Designer, nicht in diese Datei. */
    /* HIER STAND EIN FESTER RAND FUER DIE KOPFZEILE (margin der aeussersten Spalte
       auf 0, dafuer 12px padding am #topbar – beides mit !important).
       ENTFERNT: Er hat den Designer ueberstimmt. Der seitliche Rand der Kopfzeile
       gehoert in die Einstellungen (Aussen-/Innenabstand der Header-Spalte), und
       seit die Chrome-Bereiche pro Endgeraet speichern, laesst er sich fuer Mobil
       getrennt vom Desktop setzen. Was im Admin steht, muss gelten – nicht das,
       was hier fest verdrahtet ist. */
    /* HANDY – Luft zwischen Kopfzeile und Inhalt. Der Inhalt begann 8px BEVOR die
       Kopfzeile zu Ende war; die erste Zeile (meist der Breadcrumb) lag damit
       angeschnitten darunter. */
    @media (max-width: 640px){
        #all #content{margin-top:12px;}
    }
    html.nfed-vp-phone #all #content{margin-top:12px;}
    /* HANDY – aufgeklappte Suche: das Eingabefeld muss die gewonnene Breite auch
       NUTZEN. Die Ueberlagerung war zwar 390px breit, das Feld blieb aber bei 90px:
       .nf-search-inner fiel auf 14px zusammen (min-width der Flexbox) und das Input
       hing an einer festen Breite. Damit war die aufgeklappte Suche unbrauchbar. */
    @media (max-width: 640px){
        #all #topbar.nf-search-expanded .nf-search-inner{flex:1 1 auto!important;min-width:0!important;width:auto!important;}
        #all #topbar.nf-search-expanded #core-search-input{width:100%!important;flex:1 1 auto!important;min-width:0!important;}
        #all #topbar.nf-search-expanded .nf-lay-el:has(.core-search),
        #all #topbar.nf-search-expanded .nf-lay-col:has(.core-search){width:100%!important;flex:1 1 auto!important;}
    }
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-search-inner{flex:1 1 auto!important;min-width:0!important;width:auto!important;}
    html.nfed-vp-phone #all #topbar.nf-search-expanded #core-search-input{width:100%!important;flex:1 1 auto!important;min-width:0!important;}
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-lay-el:has(.core-search),
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-lay-col:has(.core-search){width:100%!important;flex:1 1 auto!important;}

    /* HANDY – Chips neben dem Feld, nicht darueber.
       `width:100%` am Eingabefeld beansprucht die volle Zeile; mit
       `flex-wrap:wrap` am Umschlag rutschen die Wort-Chips dadurch in eine
       eigene Zeile UEBER die Leiste. Auf dem Handy bleibt deshalb alles in
       EINER Zeile und wird bei Bedarf seitlich geschoben — das Feld nimmt den
       Rest, statt alles zu verdraengen. */
    @media (max-width: 640px){
        #all #topbar.nf-search-expanded .nf-search-inner{
            flex-wrap:nowrap!important; overflow-x:auto; overflow-y:hidden;
            -webkit-overflow-scrolling:touch; scrollbar-width:none;
        }
        #all #topbar.nf-search-expanded .nf-search-inner::-webkit-scrollbar{display:none;}
        /* SUCHE OFFEN: Menue-Knopf, Sprachwahl und die aufklappbare Menueleiste
       treten zurueck — auf dem Handy braucht das Suchfeld die ganze Zeile.
       Sie werden NICHT hart ausgeblendet, sondern schrumpfen weg: `display:none`
       laesst sich nicht weich schalten, Breite und Deckkraft schon. */
    #all #topbar .cat-btn,
    #all #topbar .nf-lang {
        max-width: 140px; opacity: 1;
        transition: max-width .26s ease, opacity .18s ease, transform .26s ease,
                    margin .26s ease, padding .26s ease;
    }
    #all #topbar.nf-search-expanded .cat-btn,
    #all #topbar.nf-search-expanded .nf-lang {
        max-width: 0 !important; opacity: 0 !important; transform: scale(.92);
        margin-left: 0 !important; margin-right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
        overflow: hidden !important; pointer-events: none !important;
    }
    #all [data-lay-type="nav_mega"] {
        transition: max-height .3s ease, opacity .2s ease, margin .3s ease;
    }
    #all:has(#topbar.nf-search-expanded) [data-lay-type="nav_mega"] {
        max-height: 0 !important; opacity: 0 !important; overflow: hidden !important;
        margin-top: 0 !important; margin-bottom: 0 !important; pointer-events: none !important;
    }
    /* Das Feld waechst mit, statt zu springen. */
    #all #topbar .nf-search-field,
    #all #topbar .nf-search-inner { transition: width .26s ease, flex-basis .26s ease; }
    #all #topbar.nf-search-expanded .nf-chip{flex:0 0 auto; max-width:55vw;}
        #all #topbar.nf-search-expanded #core-search-input{
            width:auto!important; flex:1 0 90px!important; min-width:90px!important;
        }
    }
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-search-inner{
        flex-wrap:nowrap!important; overflow-x:auto; overflow-y:hidden;
        -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-search-inner::-webkit-scrollbar{display:none;}
    html.nfed-vp-phone #all #topbar.nf-search-expanded .cat-btn,
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-lang {
        max-width: 0 !important; opacity: 0 !important; overflow: hidden !important;
        margin-left: 0 !important; margin-right: 0 !important; pointer-events: none !important;
    }
    html.nfed-vp-phone #all:has(#topbar.nf-search-expanded) [data-lay-type="nav_mega"] {
        max-height: 0 !important; opacity: 0 !important; overflow: hidden !important;
    }
    html.nfed-vp-phone #all #topbar.nf-search-expanded .nf-chip{flex:0 0 auto; max-width:55vw;}
    html.nfed-vp-phone #all #topbar.nf-search-expanded #core-search-input{
        width:auto!important; flex:1 0 90px!important; min-width:90px!important;
    }

    html.nfed-vp-phone #all #topbar .nf-lay-el:has(> .cat-btn),
    html.nfed-vp-phone #all #topbar .nf-lay-el:has(> * > .cat-btn),
    html.nfed-vp-phone #all #topbar .nf-lay-el:has(.core-search),
    html.nfed-vp-phone #all #topbar .nf-lay-el:has(#nf-account-btn),
    html.nfed-vp-phone #all #topbar .nf-lay-el:has(#open-cart){height:40px!important;}
    html.nfed-vp-phone #all .cat-btn{min-width:40px!important;min-height:40px!important;font-size:20px!important;}
    html.nfed-vp-phone #all #topbar .nf-search-lupe > svg{max-height:24px;}
    html.nfed-vp-phone #all #topbar #nf-account-btn svg,
    html.nfed-vp-phone #all #topbar #open-cart svg{max-height:24px;}
    html.nfed-vp-phone #all .nf-banner{padding-left:0;padding-right:0;}
    html.nfed-vp-phone #all .nf-banner > *{max-width:100%;box-sizing:border-box;}
    html.nfed-vp-phone #all .nf-banner img{width:100%;height:auto;display:block;}
    /* Zahlart-Logos ({{ payment_logos|raw }}): kleine Logo-Reihe, standardmaessig rechts. */
    #all .nf-pay-logos{display:inline-flex;align-items:center;gap:8px;float:right;}
    #all .nf-pay-logo{height:22px;width:auto;max-width:52px;object-fit:contain;display:block;}

/* ===== Mega-Menue  [nf-mega-css] ===== */
.nf-mega{position:relative}.nf-mega-bar{position:relative;display:flex;flex-wrap:nowrap;align-items:stretch;list-style:none;margin:0;padding:0;gap:0;justify-content:var(--nf-mega-just,flex-start);overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scrollbar-width:none}/* KEIN -webkit-overflow-scrolling:touch: Safari macht aus so einer Leiste einen eigenen Bezugsrahmen — die aufgeklappte Mega-Flaeche (position:fixed) wurde darin auf die Hoehe der Leiste beschnitten. Am iPhone drehte sich nur das Pfeilchen, zu sehen war nichts. Seit iOS 13 scrollt es auch ohne diese Angabe weich. */.nf-mega-bar::-webkit-scrollbar{display:none}.nf-mega-item{flex:0 0 auto}.nf-mega-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:61;width:34px;height:34px;border:0;border-radius:50%;padding:0;cursor:pointer;background:#fff;color:#1a2736;box-shadow:none;display:none;align-items:center;justify-content:center;transition:opacity .18s ease,background .18s ease}.nf-mega.is-scroll .nf-mega-arrow{display:flex}.nf-mega-arrow[disabled]{opacity:0;pointer-events:none}.nf-mega-arrow:hover{background:#fff}.nf-mega-arrow svg{width:18px;height:18px}.nf-mega-aprev{left:0}.nf-mega-anext{right:0}.nf-mega.is-drag .nf-mega-bar a{-webkit-user-drag:none;user-drag:none}.nf-mega.is-drag .nf-mega-bar{cursor:grab;scroll-behavior:auto}.nf-mega.is-dragging .nf-mega-bar{cursor:grabbing;user-select:none}.nf-mega-item{position:relative;list-style:none}.nf-mega-link{display:block;position:relative;text-decoration:none;cursor:pointer;color:var(--nf-mega-col,inherit);font-size:var(--nf-mega-fs,inherit);white-space:nowrap}.nf-mega-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--nf-mega-mh,2px);background:currentColor;opacity:0;transform:scaleX(0);transform-origin:100% 50%;pointer-events:none;transition:transform var(--nf-nav-dauer) var(--nf-nav-kurve),opacity var(--nf-nav-dauer) var(--nf-nav-kurve)}.nf-mega-ink{position:absolute;left:0;bottom:0;width:0;opacity:0;height:var(--nf-mega-mh,3px);background:currentColor;list-style:none;pointer-events:none;will-change:transform,width;transition:transform var(--nf-nav-dauer) var(--nf-nav-kurve),width var(--nf-nav-dauer) var(--nf-nav-kurve),opacity var(--nf-nav-dauer) var(--nf-nav-kurve)}.nf-mega-bar.has-ink .nf-mega-link::after{display:none}.nf-mega-bgimg{position:absolute;inset:0;z-index:1;pointer-events:none;background-position:center;background-repeat:no-repeat}.nf-mega-panel .nf-lay-col > *{position:relative;z-index:2}.nf-mega-panel[data-imgpos="right"] .nf-lay-row:has(> .nf-lay-col .nf-mn-img),.nf-mega-panel[data-imgpos="right"] .nf-lay-row:has(> .nf-lay-col .nf-mn-imglink),.nf-mega-panel[data-imgpos="right"] .nf-lay-row:has(> .nf-lay-col .nf-mn-imgph){flex-direction:row-reverse}.nf-mega-panel{position:fixed;left:0;z-index:60;text-align:left;min-width:100%;box-sizing:border-box;min-height:var(--nf-mega-minh,0);background-image:var(--nf-mega-bg,none);background-size:var(--nf-mega-bgsize,cover);background-repeat:var(--nf-mega-bgrep,no-repeat);background-position:var(--nf-mega-bgpos,center center);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .16s ease .22s,transform .16s ease .22s,visibility 0s linear .38s;box-shadow:none}.nf-mega[data-flow="push"] .nf-mega-panel{position:static;display:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;left:auto;width:auto;margin-left:0;box-shadow:none}.nf-mega[data-flow="push"] .nf-mega-item.is-open>.nf-mega-panel{display:block}.nf-mega[data-panelw="full"] .nf-mega-panel{left:0;width:100vw}/* Im Schub-Betrieb (Finger) steht die Flaeche im Textfluss — dort waere 100vw zu breit und die Seite liesse sich seitlich schieben. */.nf-mega[data-flow="push"][data-panelw="full"] .nf-mega-panel{left:auto;width:auto;margin-left:0}/* Waehrend die Leiste gezogen wird, klappt nichts auf. */.nf-mega.is-zieht .nf-mega-item:hover>.nf-mega-panel,.nf-mega.is-zieht .nf-mega-item.is-open>.nf-mega-panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}.nf-mega[data-flow="overlay"][data-trigger="hover"] .nf-mega-item:hover>.nf-mega-panel,.nf-mega[data-flow="overlay"][data-trigger="hover"] .nf-mega-item:focus-within>.nf-mega-panel,.nf-mega[data-flow="overlay"] .nf-mega-item.is-open>.nf-mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none;/* Erst dreht sich das Pfeilchen (0,15 s), dann kommt die Flaeche — sonst klappt das Menue auf, waehrend der Pfeil noch nach oben zeigt. */transition:opacity .16s ease .17s,transform .16s ease .17s,visibility 0s linear .17s}@media(prefers-reduced-motion:reduce){.nf-mega-panel{transform:none;transition:opacity .01s linear .22s,visibility 0s linear .22s}}.nf-mega[data-trigger="hover"] .nf-mega-item:hover>.nf-mega-link,.nf-mega[data-trigger="hover"] .nf-mega-item:focus-within>.nf-mega-link,.nf-mega .nf-mega-item.is-open>.nf-mega-link{color:var(--nf-mega-colact,var(--nf-mega-col,inherit))}.nf-mega-item:hover>.nf-mega-link::after,.nf-mega-item:focus-within>.nf-mega-link::after,.nf-mega .nf-mega-item.is-open>.nf-mega-link::after{opacity:1;transform:scaleX(1);transform-origin:0 50%}.nf-mega .nf-mega-link.is-current,.nf-mega .nf-mega-link.is-inpath,.nf-mega .nf-mn-h.is-current,.nf-mega .nf-mn-h.is-inpath,.nf-mega .nf-mn-s.is-current,.nf-mega .nf-mn-s.is-inpath,.nf-mega .nf-mn-all.is-current,.nf-mega .nf-mn-all.is-inpath{text-decoration:none;font-weight:inherit}.nf-mega .nf-mega-link.is-current::after,.nf-mega .nf-mega-link.is-inpath::after{opacity:.55;transform:scaleX(1);transform-origin:0 50%}.nf-mega-item:hover>.nf-mega-link.is-current::after,.nf-mega-item:hover>.nf-mega-link.is-inpath::after,.nf-mega-item:focus-within>.nf-mega-link.is-current::after,.nf-mega-item:focus-within>.nf-mega-link.is-inpath::after{opacity:1}/* AUF DEM FINGER GILT NUR EIN TIPP. Safari setzt beim Ziehen und Antippen auch den Hover-Zustand — die Hover-Regel ist genauer als die Gegenregel und hat gewonnen: die Flaeche ging schon beim Wischen ueber die Leiste auf. Darum hier ausdruecklich mit !important. */@media(hover:none){.nf-mega .nf-mega-item:hover>.nf-mega-panel,.nf-mega[data-flow="overlay"][data-trigger="hover"] .nf-mega-item:hover>.nf-mega-panel,.nf-mega[data-trigger="hover"] .nf-mega-item:focus-within>.nf-mega-panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}/* Der offene Zustand muss GENAUSO GENAU sein wie die Hover-Sperre darueber (sonst gewinnt die Sperre, und auf dem iPhone bleibt das Menue zu: nach dem Tippen haelt Safari den Hover-Zustand fest). */.nf-mega[data-flow="overlay"][data-trigger="hover"] .nf-mega-item.is-open>.nf-mega-panel,.nf-mega[data-trigger="hover"] .nf-mega-item.is-open>.nf-mega-panel,.nf-mega .nf-mega-item.is-open>.nf-mega-panel{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .16s ease .17s,transform .16s ease .17s,visibility 0s linear .17s}}.nf-mn-subs{column-gap:var(--nf-mn-cg,24px)}.nf-mn-grp{break-inside:avoid;page-break-inside:avoid}.nf-mn-h,.nf-mn-s{display:block;position:relative;z-index:1;text-decoration:none;cursor:pointer;transition:transform var(--nf-nav-dauer) var(--nf-nav-kurve)}.nf-mn-h:hover,.nf-mn-s:hover,.nf-mn-h:focus-visible,.nf-mn-s:focus-visible{transform:translateX(5px)}#all .nf-mega .nf-mn-img{display:block;width:100%;height:auto;max-height:none;max-width:100%}.nf-mn-all{display:inline-block;position:relative;text-decoration:none;font-weight:600}.nf-mn-all::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;opacity:1;pointer-events:none;transition:transform var(--nf-nav-dauer) var(--nf-nav-kurve),opacity var(--nf-nav-dauer) var(--nf-nav-kurve)}.nf-mn-all:hover::after,.nf-mn-all:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}.nf-mega .nf-mn-all.is-current::after,.nf-mega .nf-mn-all.is-inpath::after{opacity:.55;transform:scaleX(1);transform-origin:0 50%}.nf-mega .nf-mn-all.is-current:hover::after,.nf-mega .nf-mn-all.is-inpath:hover::after{opacity:1}.nf-mega-hg{position:fixed;inset:0;z-index:59;display:none;background:transparent}.nf-mega-caret{display:none;float:right;transition:transform .15s}/* Zu: das Pfeilchen zeigt nach OBEN, offen zeigt es nach UNTEN — so wie es der Bewegung folgt, die der Tipp ausloest. */.nf-mega-caret{transform:rotate(180deg)}.nf-mega-item.is-open>.nf-mega-link .nf-mega-caret{transform:none}@media(prefers-reduced-motion:reduce){.nf-mega-link::after{transform:scaleX(1);transform-origin:0 50%;transition:opacity .12s ease}.nf-mn-h,.nf-mn-s{transition:none}.nf-mn-h:hover,.nf-mn-s:hover,.nf-mn-h:focus-visible,.nf-mn-s:focus-visible{transform:none}.nf-mn-all::after{transform:scaleX(1);transform-origin:0 50%;opacity:0;transition:opacity .12s ease}.nf-mn-all:hover::after,.nf-mn-all:focus-visible::after{opacity:1}.nf-mega .nf-mega-link.is-current::after,.nf-mega .nf-mega-link.is-inpath::after,.nf-mega .nf-mn-all.is-current::after,.nf-mega .nf-mn-all.is-inpath::after{transform:scaleX(1);opacity:.55}.nf-mega-item:hover>.nf-mega-link.is-current::after,.nf-mega-item:hover>.nf-mega-link.is-inpath::after,.nf-mega .nf-mn-all.is-current:hover::after,.nf-mega .nf-mn-all.is-inpath:hover::after{opacity:1}}

/* ===== Mega-Menue · Handy  [nf-mega-css-p] ===== */
html.nfed-vp-phone .nf-mega-bar{flex-direction:row;flex-wrap:nowrap}html.nfed-vp-phone .nf-mega-item{width:auto;flex:0 0 auto}html.nfed-vp-phone .nf-mega-link{white-space:nowrap}html.nfed-vp-phone .nf-mega-caret{display:inline-block}html.nfed-vp-phone .nf-mn-subs{column-count:1!important}html.nfed-vp-phone .nf-mega[data-mobile="off"]{display:block;position:relative;min-height:34px;min-width:34px;background:rgba(245,158,11,.10);border-radius:4px}html.nfed-vp-phone .nf-mega[data-mobile="off"]>*{opacity:.12}html.nfed-vp-phone .nf-mega[data-mobile="off"]::after{content:"";position:absolute;inset:0;z-index:2147483002;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:22px 22px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9800' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7.5' y='2.5' width='9' height='19' rx='1.8'/><path d='M11 18.6h2'/><path d='M3.5 20.5 L20.5 3.5' stroke-width='2.1'/></svg>")}html.nfed-vp-phone .nf-hide-phone .nf-mega[data-mobile="off"]{background:none}html.nfed-vp-phone .nf-hide-phone .nf-mega[data-mobile="off"]>*{opacity:1}html.nfed-vp-phone .nf-hide-phone .nf-mega[data-mobile="off"]::after{display:none}

/* ===== Mega-Menue · Mobil  [nf-mega-css-m] ===== */
@media(max-width:640px){.nf-mega-bar{flex-direction:row;flex-wrap:nowrap}.nf-mega-item{width:auto;flex:0 0 auto}.nf-mega-link{white-space:nowrap}.nf-mega-caret{display:inline-block}.nf-mega[data-mobile="off"]{display:none}.nf-mn-subs{column-count:1!important}}


/* ---- Struktur-Vorgaben der Layout-Bausteine (12.08.2026) ----
   `display:block; width:100%; box-sizing:border-box` stand als style-Attribut an
   JEDEM Baustein – auf der Startseite dreissigmal derselbe Text, zusammen rund
   1,1 KB je Seite. Es ist keine Einstellung, sondern der Normalfall des
   Renderers, also gehoert es hierher. Wer eine eigene Breite setzt, bekommt sie
   weiterhin inline und sticht diese Regel; `auto` schreibt inline-block inline. */
/* ZURUECKGENOMMEN: siehe layout_lib.php. `display:block;width:100%` gilt NICHT
   fuer Bausteine mit `inline = start|end` – die stehen zu zweit in einer Zeile.
   Eine Regel ohne diese Ausnahme machte volle Kaesten daraus. */

/* ---- Beschriftung von Artikelnummer und EAN (17.08.2026) ----
   „Artikelnummer:" und „EAN:" sollen fett sein, und zwar ALS NORMALFALL — auch
   bei einem Baustein, den man frisch hereinzieht, nicht nur in der vorhandenen
   Vorlage. Deshalb hier und nicht als Einstellung an der einzelnen Instanz.

   Der Renderer setzt die Beschriftung schon in ein eigenes `span.nf-lay-lbl`
   (layout_lib.php, p_number/p_ean/p_price_rrp) — es braucht also keine Aenderung
   am Markup, nur diese Regel.

   Bewusst NICHT `.nf-lay-lbl` allein: dieselbe Klasse traegt auch das „UVP" vor
   dem Streichpreis, und das soll unveraendert bleiben. */
#all .nf-lay-number .nf-lay-lbl,
#all .nf-lay-ean .nf-lay-lbl {
    font-weight: 700;
}

#all .nf-lang{position:relative;display:inline-block}
#all .nf-lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:50px;padding:0 4px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:16px;font-weight:700;line-height:1;cursor:pointer;box-shadow:none;transition:opacity .15s}
#all .nf-lang-btn:hover{opacity:.65}
#all.darkmode .nf-lang-btn{border:0}
#all.darkmode .nf-lang-btn:hover{opacity:.7}
#all .nf-lang-fahne{display:block;width:26px;height:18px;border-radius:2px;flex:0 0 auto;box-shadow:none;object-fit:cover}
#all .nf-lang-btn span,#all .nf-lang-btn .nf-lang-code,#all .nf-lang-btn .nf-lang-caret{color:inherit}
#all .nf-lang-code{letter-spacing:.02em;font-size:16px;font-weight:700;line-height:30px}
#all .nf-lang-caret{display:block;flex:0 0 auto;width:14px;height:14px;opacity:.55;transition:transform .18s}
#all .nf-lang.is-open .nf-lang-caret{transform:rotate(180deg)}
#all .nf-lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:140px;padding:6px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;z-index:60}
#all .nf-lang-menu--links{right:auto;left:0}
#all .nf-lang-menu[hidden]{display:none}
#all.darkmode .nf-lang-menu{background:#111827;border-color:rgba(255,255,255,.14)}
#all .nf-lang-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit;font-size:13px;font-weight:600;white-space:nowrap}
#all .nf-lang-item:hover{background:rgba(0,0,0,.05)}
#all.darkmode .nf-lang-item:hover{background:rgba(255,255,255,.08)}
#all .nf-lang-label{flex:1 1 auto}
#all .nf-lang-haken{opacity:0;font-size:13px}
#all .nf-lang-item.is-active .nf-lang-haken{opacity:.75}
#all .nf-lang--reihe{display:inline-flex;gap:4px}
#all .nf-lang--reihe .nf-lang-item{padding:5px 8px;border:1px solid transparent}
#all .nf-lang--reihe .nf-lang-item.is-active{border-color:rgba(0,0,0,.18);border-radius:999px}
@media (max-width:750px){#all .nf-lang-menu{right:0;left:auto;min-width:160px}}

/* Ja/Nein im Warenkorb: schmaler als auf der Produktseite, der Aufpreis steht
   daneben. Das Auswahlfeld darunter ist versteckt und traegt den Wert. */
#all .cart-property-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 6px;
}

/* Der Schalter der Produktseite bringt eigene Abstaende mit (top: 10px und
   12px/10px Rand). Im Warenkorb sitzt er direkt unter der Zeile und braucht
   sie nicht — sonst klafft eine Luecke unter dem Gruppennamen. */
#all .cart-property-switch .switch {
    top: 0;
    margin: 0;
}

#all .cart-property-switch-price {
    font-size: 13px;
    opacity: .75;
}

/* VERFUEGBARKEITS-AMPEL. Gruen, gelb, rot — mit Punkt davor, damit man den
   Zustand auf einen Blick sieht und nicht erst lesen muss. */
#all .nf-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; }
#all .nf-stock-punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #9ca3af; }
#all .nf-stock--gruen .nf-stock-punkt { background: #16a34a; }
#all .nf-stock--gelb  .nf-stock-punkt { background: #f59e0b; }
#all .nf-stock--rot   .nf-stock-punkt { background: #dc2626; }
#all .nf-stock--gruen .nf-stock-text { color: #15803d; }
#all .nf-stock--gelb  .nf-stock-text { color: #b45309; }
#all .nf-stock--rot   .nf-stock-text { color: #b91c1c; }
#all.darkmode .nf-stock--gruen .nf-stock-text { color: #4ade80; }
#all.darkmode .nf-stock--gelb  .nf-stock-text { color: #fbbf24; }
#all.darkmode .nf-stock--rot   .nf-stock-text { color: #f87171; }

/* NEWSLETTER-BAUSTEIN. Schlicht gehalten: er soll sich in Fuss und Inhalt
   einfuegen, nicht dagegen anschreien. Farben kommen aus den Shop-Variablen. */
#all .nf-nl { max-width: 360px; }
#all .nf-nl-titel { font-weight: 700; margin: 0 0 6px; }
#all .nf-nl-text { font-size: 14px; opacity: .8; margin: 0 0 10px; }
/* Nur das Eingabefeld — abgeschickt wird mit Enter. Der Hinweis steht darunter. */
#all .nf-nl-form { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; align-items: stretch; }
#all .nf-nl-feld {
    flex: 1 1 160px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--main-border-color, #d6d9e0);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font-size: 13px;
}
#all .nf-nl-feld.nf-nl-kurz { flex: 0 0 90px; }
#all .nf-nl-knopf {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 0 8px 8px 0;
    border: var(--main-button-border, 0);
    background: var(--main-button-color, #111);
    color: var(--main-button-text-color, #fff);
    cursor: pointer;
    font-size: 14px;
}
/* Hinweis auf AGB und Datenschutz — eine Zeile unter den Feldern, ohne Haken. */
#all .nf-nl-recht {
    flex: 1 1 100%;
    font-size: 12px;
    line-height: 1.45;
    opacity: .75;
}
#all .nf-nl-recht a { text-decoration: underline; }
#all .nf-nl-hinweis { font-size: 12px; opacity: .7; margin-top: 8px; }

/* Zahlungsarten-Logos: alle gleich hoch, umbrechend. */
#all .nf-pays-titel { font-weight: 700; margin: 0 0 12px; color: inherit; }
/* Auf dem Handy ist die Fusszeile aufklappbar. Bei den Zahlungsarten sitzt die
   Überschrift IM Baustein — zugeklappt muss darum der Inhalt des Kopfes selbst
   verschwinden, sonst stehen die Logos auch bei geschlossenem Menü da. */
@media (max-width: 640px) {
    /* ZAHLUNGSARTEN: hier ist der ganze Baustein der Kopf (Titel UND Logos),
       er waechst also beim Aufklappen. Ein Pfeilchen auf halber Hoehe wandert
       dann nach unten — es bleibt deshalb fest auf der Hoehe der Ueberschrift,
       genau wie bei den drei anderen Klappmenues. */
    #all [data-nf-lay-region="footer"] .nf-facc-head[data-lay-type="f_payments"]::after { top: 5px; margin-top: 0; }
    #all [data-nf-lay-region="footer"] .nf-facc.is-open > .nf-facc-head[data-lay-type="f_payments"]::after { top: 9px; margin-top: 0; }

    #all [data-nf-lay-region="footer"] .nf-facc:not(.is-open) > .nf-facc-head .nf-pays { display: none !important; }
    #all [data-nf-lay-region="footer"] .nf-facc:not(.is-open) > .nf-facc-head .nf-pays-titel { margin-bottom: 0; }
}
#all .nf-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#all .nf-pay { display: inline-flex; align-items: center; gap: 6px; }
#all .nf-pay-logo {
    height: var(--nf-pay-h, 28px);
    width: auto;
    max-width: 90px;
    object-fit: contain;
    display: block;
}
#all .nf-pay-name { font-size: 13px; opacity: .8; }
#all .nf-nl-meldung { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
#all .nf-nl-meldung.ok { background: #f0faf3; border: 1px solid #bfe3cb; color: #1f7a3d; }
#all .nf-nl-meldung.fehler { background: #fdecec; border: 1px solid #f5b5b5; color: #8a1c1c; }
#all.darkmode .nf-nl-feld { background: #131a26; border-color: #2a3446; }

@media (max-width: 600px) {
    /* Auch auf dem Handy bleiben Feld und Knopf in EINER Zeile. */
    #all .nf-nl-feld.nf-nl-kurz { flex: 1 1 90px; }
}

/* Umschalter Anmelden/Abmelden: als schlichter Textknopf unter dem Formular. */
#all .nf-nl-wechsel {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: .7;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
#all .nf-nl-wechsel:hover { opacity: 1; }

/* Knopf auf ein Produkt oder eine Kategorie. Farben vom Shop, Breite vom
   Inhalt — er soll neben Text stehen koennen. */
#all .nf-lay-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:9px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:.2s;
  color:var(--main-largebutton-color);background:var(--main-largebutton-background);border:var(--main-largebutton-border)}
#all .nf-lay-btn:hover{color:var(--main-largebutton-hover-color);background:var(--main-largebutton-hover-background);border-color:currentColor}
#all.darkmode .nf-lay-btn{color:#fff !important;border-color:#fff !important}

/* Terminkalender als Baustein (p_booking) — bewusst kompakt: der steht in der
   schmalen Spalte neben dem Produktbild, nicht auf einer eigenen Seite.
   Der Kalender selbst kommt aus flatpickr und traegt dieselben Tagesfarben
   wie im Warenkorb. */
/* So breit wie die Bausteine darueber und darunter (die Spalte), nur zehn
   Pixel schmaler — sonst steht der Kalender wie ein Fremdkoerper daneben. */
/* FESTE BREITE, MITTIG. Der Kalender skaliert nicht mit der Spalte — sonst
   werden aus den Tageskacheln breite Pillen. Er behaelt sein Mass und stellt
   sich in die Mitte; alles andere im Baustein richtet sich danach. */
/* Volle Spaltenbreite, damit die Woche sicher hineinpasst — der Kalender
   hat links und rechts KEIN Polster mehr. */
#all .nf-bk{width:100%;max-width:100%;font-size:14px}
/* Steht der Baustein mitten im Text, gehoert er an den linken Rand. */
#all .nf-lay-el:not(:only-child) > .nf-bk{margin-left:0;margin-right:0}
/* Steht der Produktname da, braucht er Luft nach unten — sonst klebt er
   am Monatskopf des Kalenders. */
#all .nf-bk-titel{font-weight:700;font-size:19px;line-height:1.25;margin:0;padding:0 0 12px}
/* So gross wie eine Zwischenueberschrift im Text (h3) — der Name ist die
   Ueberschrift des Kalenders, wenn kein eigener Titel gesetzt ist. */
#all .nf-bk-name{font-weight:700;font-size:19px;line-height:1.25;margin:0;padding:0 0 12px}
/* Stehen Titel UND Name da, braucht es dazwischen weniger Luft. */
#all .nf-bk-titel + .nf-bk-name{padding-top:0}
#all .nf-bk-titel:has(+ .nf-bk-name){padding-bottom:4px}
#all .nf-bk-hinweis{margin:0 0 8px;font-size:13px;opacity:.65}
#all .nf-bk-kalwahl{width:100%;height:38px;margin:0 0 10px;border:1px solid #ececec;border-radius:9px;padding:0 10px;font-size:14px;background:#fff;box-sizing:border-box}
/* Der Eigenschaften-Block bringt eigene Abstaende mit — der erste faellt
   weg, sonst steht er doppelt so weit unter der Ueberschrift. */
#all .nf-bk-eig{margin:0 0 6px}
#all .nf-bk-eig > *:first-child,#all .nf-bk-eig > *:first-child > *:first-child{margin-top:0}
#all .nf-bk-eig .property-title{font-weight:600;font-size:13px}
/* Polster oben und unten grosszuegig: die Tageskacheln sind runde Pillen und
   sassen sonst direkt auf dem Rahmen. Links und rechts bleibt es bei 0 —
   der Kalender soll die volle Breite nutzen. */
/* Kein Rahmen und kein Hintergrund — der Kalender steht frei in der Spalte.
   Das Polster bleibt, damit die runden Tageskacheln Luft haben. */
#all .nf-bk-kal{max-width:100%;border:0;border-radius:0;padding:12px 0 16px}
.nf-bk-tag{display:none}
/* Die Einblend-Bewegung von flatpickr (fpFadeInDown) schiebt den Kalender
   beim Zeichnen 20 Pixel nach oben. Fest eingebaut ist das nur stoerend —
   und in einem Hintergrund-Tab laeuft sie nie zu Ende, dann sitzt der
   Kalender dauerhaft ueber seinem Rahmen. */
/* Kein eigener Hintergrund: flatpickr legt ein weisses Blatt unter den
   Kalender und deckt damit die Farbe der Spalte zu. Die Tageskacheln
   behalten ihre Farben — sie sagen, was frei ist. */
#all .nf-bk-kal .flatpickr-calendar{box-shadow:none;margin:0;width:100%;font-size:13px;animation:none;top:0;background:transparent}
#all .nf-bk-kal .flatpickr-months{padding:2px 0 4px}
#all .nf-bk-kal .flatpickr-current-month{font-size:14px;font-weight:600;padding:0}
#all .nf-bk-kal .flatpickr-monthDropdown-months{font-size:14px;font-weight:600}
#all .nf-bk-kal .flatpickr-weekday{font-size:11px;font-weight:600;letter-spacing:.04em;opacity:.55}
/* Die ganze Kette auf volle Breite — sonst sitzt das Tageraster schmal in der
   Mitte und die Zeilen darunter wirken breiter als der Kalender. */
#all .nf-bk-kal .flatpickr-calendar,
#all .nf-bk-kal .flatpickr-innerContainer,
#all .nf-bk-kal .flatpickr-rContainer,
#all .nf-bk-kal .flatpickr-weekdays,
#all .nf-bk-kal .flatpickr-days{width:100% !important;min-width:0 !important;max-width:100% !important}
#all .nf-bk-kal .flatpickr-days{height:auto !important}
/* flatpickr schneidet den Innenraum ab (`overflow:hidden`) — die sechste
   Tagesreihe stand damit halb im Rahmen. Hier darf er wachsen. */
#all .nf-bk-kal .flatpickr-innerContainer{overflow:visible}
#all .nf-bk-kal .flatpickr-rContainer{height:auto}
/* Sieben gleiche Spalten, die Kachel darin fest und mittig: so wird aus dem
   Tag nie eine breite Pille und nichts laeuft aus dem Kalender heraus. */
#all .nf-bk-kal .dayContainer{width:100%;min-width:100%;max-width:100%;height:auto !important;display:grid;grid-template-columns:repeat(7,1fr);justify-items:center;gap:3px;align-content:start;padding:1px;box-sizing:border-box}
#all .nf-bk-kal .flatpickr-day{width:32px;max-width:32px;height:32px;line-height:32px;margin:0;border:none;border-radius:6px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:13px;flex:0 0 32px}
/* Die Wochentagskoepfe stehen ueber denselben Spalten wie die Tage. */
#all .nf-bk-kal .flatpickr-weekdaycontainer{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center;gap:3px;width:100%}
#all .nf-bk-kal .flatpickr-weekday{width:32px;max-width:32px;flex:0 0 32px}
#all .nf-bk-kal .calendar-available{background:#e1ffe3 !important;color:#000 !important}
#all .nf-bk-kal .calendar-closed{background:#ebebeb !important;color:#000 !important}
#all .nf-bk-kal .flatpickr-day.flatpickr-disabled,
#all .nf-bk-kal .flatpickr-day.flatpickr-disabled:hover{color:rgba(57,57,57,.3);background:#ff000021 !important;border-color:transparent;cursor:not-allowed;pointer-events:none}
#all .nf-bk-kal .flatpickr-day.selected,#all .nf-bk-kal .flatpickr-day.selected:hover,#all .nf-bk-kal .flatpickr-day:hover,
#all .nf-bk-kal .flatpickr-day.startRange,#all .nf-bk-kal .flatpickr-day.endRange{background:#111 !important;color:#fff !important;border-color:#111 !important}
/* ZEITRAUM BEI MIETE. Alle Tage von Anfang bis Ende in EINER Farbe — aber
   jeder bleibt ein Kreis. Ein durchgehender Balken liess das Raster wie
   zerbrochene Spalten aussehen. */
/* MEHRERE TAGE (Miete): kein Punkteteppich, sondern EIN durchgehender Balken.
   Die Tage im Zeitraum fuellen ihre ganze Zelle, nur Anfang und Ende sind
   abgerundet — wie eine Textmarkierung. Damit dazwischen keine Luecke bleibt,
   steht der Spaltenabstand des Rasters auf 0 (die runden Pillen der uebrigen
   Tage sitzen ohnehin mittig in ihrer Zelle und bleiben unberuehrt). */
#all .nf-bk-kal .dayContainer{column-gap:0}
#all .nf-bk-kal .flatpickr-weekdaycontainer{column-gap:0}

#all .nf-bk-kal .flatpickr-day.inRange,
#all .nf-bk-kal .flatpickr-day.startRange,
#all .nf-bk-kal .flatpickr-day.endRange{
    background:#111 !important; color:#fff !important; border-color:#111 !important;
    box-shadow:none !important;
    width:100% !important; max-width:none !important; flex:1 1 auto !important;
    border-radius:0 !important;
}
/* HAARLINIEN. Die sieben Spalten sind 1fr breit, also krumm (43,68 px). Die
   Kaesten stossen zwar auf 0,000 px aneinander, der Bildschirm zeichnet an
   den halben Pixeln aber einen hellen Strich. Ein 1 px breiter Schatten nach
   rechts ueberdeckt ihn — nicht am Zeilenende und nicht am letzten Tag, sonst
   stuende dort ein Stummel ueber die runde Ecke hinaus. */
#all .nf-bk-kal .flatpickr-day.inRange,
#all .nf-bk-kal .flatpickr-day.startRange{ box-shadow:1px 0 0 0 #111 !important; }
#all .nf-bk-kal .dayContainer .flatpickr-day.inRange:nth-child(7n),
#all .nf-bk-kal .dayContainer .flatpickr-day.startRange:nth-child(7n){ box-shadow:none !important; }
#all .nf-bk-kal .flatpickr-day.startRange{border-radius:6px 0 0 6px !important}
#all .nf-bk-kal .flatpickr-day.endRange{border-radius:0 6px 6px 0 !important}
/* Nur ein einziger Tag gewaehlt: dann ist es wieder eine runde Pille. */
#all .nf-bk-kal .flatpickr-day.startRange.endRange{border-radius:6px !important;width:32px !important;max-width:32px !important;flex:0 0 32px !important}
/* Am Zeilenrand darf die Ecke nicht eckig stehen bleiben. */
#all .nf-bk-kal .dayContainer .flatpickr-day.inRange:nth-child(7n+1){border-top-left-radius:6px !important;border-bottom-left-radius:6px !important}
#all .nf-bk-kal .dayContainer .flatpickr-day.inRange:nth-child(7n){border-top-right-radius:6px !important;border-bottom-right-radius:6px !important}
#all .nf-bk-kal .prevMonthDay,#all .nf-bk-kal .nextMonthDay{opacity:.25}
/* Die Monatspfeile so gross wie eine Tageskachel, aber ohne Kreis drumherum. */
#all .nf-bk-kal .flatpickr-months .flatpickr-prev-month,
#all .nf-bk-kal .flatpickr-months .flatpickr-next-month{box-sizing:border-box;border:0;background:none;border-radius:0;width:30px;height:30px;padding:8px;top:-5px;display:flex;align-items:center;justify-content:center}
#all .nf-bk-kal .flatpickr-months .flatpickr-prev-month:hover,
#all .nf-bk-kal .flatpickr-months .flatpickr-next-month:hover{background:none;opacity:.6}
#all .nf-bk-kal .flatpickr-months .flatpickr-prev-month svg,
#all .nf-bk-kal .flatpickr-months .flatpickr-next-month svg{width:11px;height:11px}
#all .nf-bk-leer{font-size:13px;opacity:.65;margin-top:8px}
#all .nf-bk-gewaehlt{margin-top:8px;font-size:13px;font-weight:600}
#all .nf-bk-zeiten{margin-top:10px}
#all .nf-bk .calendar-time-row{display:flex;gap:10px}
#all .nf-bk .calendar-time-col{flex:1 1 0;min-width:0}
#all .nf-bk .calendar-time-col label{display:block;font-size:12px;margin:0 0 4px;font-weight:600;opacity:.7}
#all .nf-bk .time-select{position:relative;width:100%}
#all .nf-bk .time-icon{position:absolute;left:10px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;opacity:.55}
#all .nf-bk .calendar-slot-start,#all .nf-bk .calendar-slot-end{width:100%;height:38px;border:1px solid #ececec;border-radius:9px;padding:0 8px 0 32px;font-size:14px;font-weight:600;background:#fff;box-sizing:border-box;margin:0}
#all .nf-bk .calendar-slot-end:disabled{background:#f6f7f8;opacity:1}
/* Buchen-Leiste: Menge links, Knopf daneben — der Knopf traegt die Farben des
   Shops, nicht eigene. */
#all .nf-bk-leiste{display:flex;align-items:stretch;gap:8px;margin-top:12px;max-width:calc(100% - 10px)}
/* Miniatur-Ansicht: erst nur der Knopf, der Rest klappt darunter auf. */
/* Der Knopf ist so breit wie der Kalender — zehn Pixel schmaler, damit er
   nicht bis an die Kante stoesst. */
#all .nf-bk-oeffnen{display:inline-flex;align-items:center;justify-content:center;width:calc(100% - 10px);max-width:100%;
  height:44px;padding:0 20px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;transition:.2s;
  color:var(--main-largebutton-color);background:var(--main-largebutton-background);border:var(--main-largebutton-border)}
#all .nf-bk-oeffnen:hover{color:var(--main-largebutton-hover-color);background:var(--main-largebutton-hover-background);border-color:currentColor}
/* Titel als Aufklapper: der Kopf sieht aus wie die Ueberschrift, traegt aber
   rechts ein Pfeilchen und schaltet die Flaeche. */
#all .nf-bk-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;
  padding:0 0 4px;margin:0;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
#all .nf-bk-kopf .nf-bk-titel,#all .nf-bk-kopf .nf-bk-name{display:block;padding:0}
/* Der Kopf des Aufklappers ist ein <button> - die allgemeine Regel
   #all button span faerbte seinen Titel mit der Knopf-Schriftfarbe (weiss)
   und machte ihn auf hellem Grund unsichtbar. Er erbt jetzt die Textfarbe. */
#all .nf-bk-kopf span{color:inherit}
#all .nf-bk-kopf .nf-bk-name{font-weight:600;opacity:.8;font-size:15px}
#all .nf-bk-pfeil{flex:0 0 auto;width:10px;height:10px;margin-top:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6;transition:transform .18s ease}
#all .nf-bk--klapp.is-open .nf-bk-pfeil{transform:rotate(-135deg)}
#all .nf-bk--klapp > .nf-bk-inhalt{display:none}
#all .nf-bk--klapp.is-open > .nf-bk-inhalt{display:block;margin-top:16px}
/* „Nur der Knopf": die Flaeche klappt als KASTEN darueber auf — wie die
   Sprachauswahl. Im Seitenaufbau nimmt dadurch nur der Knopf Platz weg, der
   Kalender schiebt nichts auseinander. */
/* Nur-der-Knopf steht oft mitten im Text - dort darf er nicht ueber die
   ganze Spalte laufen. Er ist so breit wie der Kasten, den er oeffnet. */
#all .nf-bk--mini{position:relative;width:320px;max-width:100%}
#all .nf-bk--mini > .nf-bk-inhalt{display:none}
#all .nf-bk--mini.is-open > .nf-bk-inhalt{
    display:block; position:absolute; z-index:70; top:calc(100% + 8px); left:0;
    /* GENAU so breit wie der Knopf darueber — der Knopf ist 10 Pixel schmaler
       als die Spalte, also der Kasten auch. Vorher stand hier die volle Breite
       (320 statt 310) und der Kasten stand rechts ueber den Knopf hinaus. */
    width:calc(100% - 10px); max-width:calc(100vw - 24px);
    background:#fff; border:1px solid #e4e6ea; border-radius:12px;
    box-shadow:0 14px 38px rgba(0,0,0,.18); padding:10px; box-sizing:border-box;
    /* Notnagel, wenn weder oben noch unten genug Platz ist. */
    max-height:calc(100vh - 24px); overflow-y:auto;
}
/* Kein Platz nach unten: der Kasten klappt nach OBEN auf. Die Klasse setzt
   das Skript beim Aufklappen, nachdem es gemessen hat. */
#all .nf-bk--mini.is-oben.is-open > .nf-bk-inhalt{top:auto; bottom:calc(100% + 8px);}
#all.darkmode .nf-bk--mini.is-open > .nf-bk-inhalt{background:#0f1420;border-color:#2a2f3a;box-shadow:0 14px 38px rgba(0,0,0,.6)}
/* Im Kasten sind die Tageskacheln eine Spur kleiner, damit die Woche in die
   Breite des Knopfes passt. */
#all .nf-bk--mini .nf-bk-kal{padding:10px 0 12px}
/* Nur ZEILEN-Abstand: waagerecht muessen die Zellen aneinander stossen,
   sonst zerfaellt der Mietzeitraum wieder in einzelne Kaestchen. */
#all .nf-bk--mini .nf-bk-kal .dayContainer{row-gap:2px;column-gap:0}
#all .nf-bk--mini .nf-bk-kal .flatpickr-day{width:32px;max-width:32px;height:32px;line-height:32px;flex:0 0 32px}
#all .nf-bk--mini .nf-bk-kal .flatpickr-weekday{width:32px;max-width:32px;flex:0 0 32px}
#all .nf-bk--mini .nf-bk-kal .flatpickr-weekdaycontainer{row-gap:2px;column-gap:0}

/* „Bestaetigen" im Kasten: heller Knopf mit hellgrauem Rahmen — der schwarze
   Block war im Kasten zu schwer. Mit !important, weil sowohl die erzeugte
   Shop-Datei als auch die Dunkelmodus-Regel oben die Farben setzen. */
#all .nf-bk--mini .nf-bk-knopf,
#all.darkmode .nf-bk--mini .nf-bk-knopf{background:#fff !important;color:#111 !important;border:1px solid #e0e3e8 !important}
#all .nf-bk--mini .nf-bk-knopf:hover,
#all.darkmode .nf-bk--mini .nf-bk-knopf:hover{background:#f3f4f6 !important;color:#111 !important;border-color:#d5d9e0 !important}
/* Der Kalender bleibt rechts stehen, auch wenn es enger wird — erst auf dem
   Handy (unter 600 px) rutscht er unter den Text. */
@media (min-width:600px){
  /* NUR die Zeile, in der der Baustein WIRKLICH steht — `:has(.nf-bk)` ohne
     Kindzeichen traf auch alle Zeilen darueber und quetschte den halben
     Seitenaufbau auf 320 Pixel. */
  /* NUR eine Spalte, in der AUSSCHLIESSLICH der Kalender steht, bekommt die
     feste Breite. Steht er mitten im Text (eine Spalte mit mehreren
     Bausteinen), gilt die Breite der Spalte — sonst schnurrte die Textspalte
     auf Kalenderbreite zusammen. */
  #all .nf-lay-row:has(> .nf-lay-col > .nf-lay-el:only-child .nf-bk){flex-wrap:nowrap}
  #all .nf-lay-col:has(> .nf-lay-el:only-child .nf-bk){flex:0 0 320px;max-width:320px;min-width:320px}
  #all .nf-lay-row:has(> .nf-lay-col > .nf-lay-el:only-child .nf-bk) > .nf-lay-col:not(:has(> .nf-lay-el:only-child .nf-bk)){flex:1 1 auto;max-width:none;min-width:0}
}
/* `hidden` muss staerker sein als das display:flex hier drueber. */
#all .nf-bk-leiste[hidden]{display:none}
#all .nf-bk-menge{flex:0 0 auto;display:inline-flex;align-items:center;border:1px solid #ececec;border-radius:9px;overflow:hidden}
#all .nf-bk-menge button{width:32px;height:44px;border:0;background:transparent;font-size:17px;line-height:1;cursor:pointer;color:inherit}
#all .nf-bk-menge button:hover{background:#0000000d}
#all .nf-bk-anz{min-width:26px;text-align:center;font-weight:600;font-size:14px}
/* Miete: die Anzahl ist das Ergebnis des Zeitraums, kein Aufzaehler. */
#all .nf-bk-menge--fest button{display:none}
#all .nf-bk-menge--fest .nf-bk-anz{padding:0 14px;white-space:nowrap}
#all .nf-bk-knopf{flex:1 1 auto;padding:0 22px;height:44px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;
  color:var(--main-largebutton-color);background:var(--main-largebutton-background);border:var(--main-largebutton-border)}
/* Hover wie beim Kaufen-Knopf des Shops: dieselben Farben, dazu der helle
   Ring. Im Original kommt der aus den Editor-Einstellungen des Bausteins
   (Rahmenfarbe weiss) — hier nimmt er einfach die Schriftfarbe. */
#all .nf-bk-knopf{transition:.2s}
#all .nf-bk-knopf:hover{
  color:var(--main-largebutton-hover-color);
  background:var(--main-largebutton-hover-background);
  border-color:currentColor;
}
#all .nf-bk-knopf[disabled]{opacity:.6;cursor:progress}
/* DUNKLER MODUS. Der Kalender kam von flatpickr in Weiss — auf dunklem Grund
   ein leuchtender Kasten. Hier bekommt er dieselben Toene wie der Rest:
   dunkler Grund, helle Schrift, gedaempfte Tagesfarben, und das gewaehlte
   Band andersherum (hell auf dunkel). */
#all.darkmode .nf-bk-menge,
#all.darkmode .nf-bk .calendar-slot-start,#all.darkmode .nf-bk .calendar-slot-end{border-color:#2a2f3a}
#all.darkmode .nf-bk .calendar-slot-start,#all.darkmode .nf-bk .calendar-slot-end{background:#151a23;color:#e8ecf3}
#all.darkmode .nf-bk-kal{background:transparent}
#all.darkmode .nf-bk-kal .flatpickr-calendar{background:transparent;color:#e8ecf3}
#all.darkmode .nf-bk-kal .flatpickr-current-month,
#all.darkmode .nf-bk-kal .flatpickr-current-month input.cur-year,
#all.darkmode .nf-bk-kal .flatpickr-monthDropdown-months{color:#e8ecf3;background:transparent}
#all.darkmode .nf-bk-kal .flatpickr-monthDropdown-months option{color:#111}
#all.darkmode .nf-bk-kal .flatpickr-weekday{color:#8b95a5}
#all.darkmode .nf-bk-kal .flatpickr-day{color:#e8ecf3}
#all.darkmode .nf-bk-kal .calendar-available{background:#16351f !important;color:#dff5e4 !important}
#all.darkmode .nf-bk-kal .calendar-closed{background:#232833 !important;color:#c9d1dc !important}
#all.darkmode .nf-bk-kal .flatpickr-day.flatpickr-disabled,
#all.darkmode .nf-bk-kal .flatpickr-day.flatpickr-disabled:hover{background:#3a1f22 !important;color:#ffffff40}
#all.darkmode .nf-bk-kal .flatpickr-day.selected,
#all.darkmode .nf-bk-kal .flatpickr-day.selected:hover,
#all.darkmode .nf-bk-kal .flatpickr-day:hover,
#all.darkmode .nf-bk-kal .flatpickr-day.inRange,
#all.darkmode .nf-bk-kal .flatpickr-day.startRange,
#all.darkmode .nf-bk-kal .flatpickr-day.endRange{background:#e8ecf3 !important;color:#111 !important;border-color:#e8ecf3 !important}
#all.darkmode .nf-bk-kal .flatpickr-day.inRange,
#all.darkmode .nf-bk-kal .flatpickr-day.startRange{box-shadow:1px 0 0 0 #e8ecf3 !important}
#all.darkmode .nf-bk-kal .flatpickr-day.endRange{box-shadow:none !important}
#all.darkmode .nf-bk-kal .dayContainer .flatpickr-day.inRange:nth-child(7n),
#all.darkmode .nf-bk-kal .dayContainer .flatpickr-day.startRange:nth-child(7n){box-shadow:none !important}
#all.darkmode .nf-bk-kal .flatpickr-months .flatpickr-prev-month svg,
#all.darkmode .nf-bk-kal .flatpickr-months .flatpickr-next-month svg{fill:#e8ecf3}

/* Im dunklen Modus faerbt das Thema den grossen Knopf mintgruen (Schrift und
   Rahmen). Beim Buchen-Knopf soll beides WEISS sein. */
/* Mit !important, weil die erzeugte Shop-Datei den Rahmen der Knoepfe in
   diesem Baustein ausdruecklich setzt (`border-color … !important`). */
#all.darkmode .nf-bk-knopf,#all.darkmode .nf-bk-oeffnen{color:#fff !important;border-color:#fff !important}
#all.darkmode .nf-bk-knopf:hover,#all.darkmode .nf-bk-oeffnen:hover{color:#fff !important;border-color:#fff !important;background:#1b1b1b}

/* Die Pfeile der Mega-Leiste waren weisse Kreise auf dunklem Grund. */
#all.darkmode .nf-mega-arrow{background:#151a23;color:#e8ecf3}
#all.darkmode .nf-mega-arrow:hover{background:#1d2431}
.nf-bk-gewaehlt{margin-top:12px;font-weight:600}


/* GUTSCHEIN IM WARENKORB. Schlicht gehalten: eine Zeile Eingabe, darunter
   der Nachlass in derselben Optik wie die Steuerzeilen. */
#all .nf-gs-feld{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
#all .nf-gs-code{flex:1 1 140px;min-width:0;height:40px;padding:0 12px;border:1px solid #ececec;border-radius:9px;
  font-size:14px;background:#fff;box-sizing:border-box}
#all .nf-gs-los,#all .nf-gs-weg{flex:0 0 auto;height:40px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:600;
  cursor:pointer;color:var(--main-button-color);background:var(--main-button-background);border:var(--main-button-border)}
#all .nf-gs-los:hover,#all .nf-gs-weg:hover{color:var(--main-button-hover-color);background:var(--main-button-hover-background)}
#all .nf-gs-fehler{flex:1 1 100%;font-size:13px;color:#b91c1c}
#all .nf-gs-zeile{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;margin:4px 0}
#all.darkmode .nf-gs-code{background:#151a23;color:#e8ecf3;border-color:#2a2f3a}


/* BEWERTUNGEN auf der Produktseite. Schlicht: Sterne, Text, ein Formular, das
   erst auf Klick erscheint. */
#all .nf-rev{font-size:14px}
#all .nf-rev-titel{font-weight:700;font-size:19px;line-height:1.25;margin:0 0 10px}
/* STERNE-ZUSAMMENFASSUNG (Baustein „Sterne"): graue Sterne, darueber die
   gelben, beschnitten auf den Anteil des Schnitts. */
/* Bewertungen im Produkt: Kopf mit Filterknopf, Liste, Blaettern — die
   Bedienteile kommen aus dem Kundenkonto (.nfk-*), damit es überall gleich
   aussieht. Der Kasten braucht nur weniger Mindesthoehe als dort. */
/* Bewertungen im Produkt: schlichte Liste, darunter das Blaettern (nur wenn es
   mehr als eine Seite gibt). */
#all .nf-rev-liste .nf-rev-eintrag:first-child{border-top:0}
#all .nf-rev-kopf{margin:0 0 14px}
#all .nf-rev .nfk-pg{margin-top:16px}
#all .nf-rev-leer{padding:18px 0;opacity:.65}
#all .nf-rate{display:inline-flex;align-items:center;gap:8px;line-height:1}
#all .nf-rate-sterne{position:relative;display:inline-block;color:#d9dde3;letter-spacing:2px;white-space:nowrap}
#all .nf-rate-voll{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f59e0b;letter-spacing:2px}
#all .nf-rate-wert{font-size:.62em;font-weight:700}
#all .nf-rate-zahl{font-size:.58em;opacity:.6}
#all.darkmode .nf-rate-sterne{color:#39404c}
#all .nf-rev-kopf{display:flex;align-items:center;gap:10px;margin:0 0 14px}
#all .nf-rev-sterne{color:#f59e0b;letter-spacing:1px;white-space:nowrap}
#all .nf-rev-zahl{opacity:.7;font-size:13px}
#all .nf-rev-eintrag{padding:12px 0;border-top:1px solid #ececec}
#all .nf-rev-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#all .nf-rev-autor{font-weight:600}
#all .nf-rev-datum{opacity:.55;font-size:12px}
#all .nf-rev-kopfzeile{font-weight:600;margin:4px 0 2px}
#all .nf-rev-text{line-height:1.55}
#all .nf-rev-antwort{margin-top:8px;padding:8px 12px;border-radius:9px;background:#f6f7f8;font-size:13px}
#all .nf-rev-auf{margin-top:14px;height:40px;padding:0 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;
  color:var(--main-button-color);background:var(--main-button-background);border:var(--main-button-border)}
#all .nf-rev-auf:hover{color:var(--main-button-hover-color);background:var(--main-button-hover-background)}
#all .nf-rev-form{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-width:520px}
#all .nf-rev-form[hidden]{display:none}
#all .nf-rev-wahl{display:flex;flex-wrap:wrap;gap:10px}
#all .nf-rev-opt{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
#all .nf-rev-opt span{color:#f59e0b;letter-spacing:1px}
#all .nf-rev-form input[type="text"],#all .nf-rev-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;
  border:1px solid #ececec;border-radius:9px;font-size:14px;font-family:inherit;background:#fff}
#all .nf-rev-senden{align-self:flex-start;height:40px;padding:0 20px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;
  color:var(--main-largebutton-color);background:var(--main-largebutton-background);border:var(--main-largebutton-border)}
#all .nf-rev-meldung{font-size:13px}
#all .nf-rev-meldung.is-gut{color:#15803d}
#all .nf-rev-meldung.is-fehler{color:#b91c1c}
#all.darkmode .nf-rev-eintrag{border-color:#2a2f3a}
#all.darkmode .nf-rev-antwort{background:#151a23}
#all.darkmode .nf-rev-form input[type="text"],#all.darkmode .nf-rev-form textarea{background:#151a23;color:#e8ecf3;border-color:#2a2f3a}


/* Bewerten im Kundenkonto — das Formular klappt unter der Bestellzeile auf. */
#all .nfk-rev-zeile > td{background:#fafbfc;padding:14px 12px}
#all .nfk-rev-form{display:flex;flex-direction:column;gap:8px;max-width:520px}
#all .nfk-rev-form input[type="text"],#all .nfk-rev-form textarea{width:100%;box-sizing:border-box;padding:9px 12px;
  border:1px solid #ececec;border-radius:9px;font-size:14px;font-family:inherit;background:#fff}
#all .nfk-rev-akt{display:flex;align-items:center;gap:12px}
#all .nfk-rev-meldung{font-size:13px}
#all .nfk-rev-meldung.is-gut{color:#15803d}
#all .nfk-rev-meldung.is-fehler{color:#b91c1c}
#all .nfk-rev-fertig{font-size:15px;color:#f59e0b;letter-spacing:1px}
/* Kontopunkt „Bewertungen": Liste der gekauften Artikel. */
#all .nfk-tbl-revs td:last-child{white-space:nowrap;text-align:right}
#all .nfk-tbl-revs td:last-child .nfk-btn{width:auto;display:inline-block;padding:6px 14px;font-size:13.5px;font-weight:600}
/* Sterne zum Draufzeigen: bis zum Zeiger gelb, der Rest blass. */
#all .nfk-stars{display:inline-flex;gap:5px;cursor:pointer;font-size:26px;line-height:1;user-select:none}
#all .nfk-star{color:#d9dde3;transition:color .1s}
#all .nfk-star.an{color:#f59e0b}
#all.darkmode .nfk-star{color:#39404c}
#all .nfk-rev-warte{display:block;font-size:12px;opacity:.7;letter-spacing:0}
#all.darkmode .nfk-rev-zeile > td{background:#151a23}
#all.darkmode .nfk-rev-form input[type="text"],#all.darkmode .nfk-rev-form textarea{background:#151a23;color:#e8ecf3;border-color:#2a2f3a}

/* Fliegender Kopf (Standard, Chrome header.fixed AN): der Kopf schwebt von
   Anfang an ueber dem Inhalt und belegt KEINE Hoehe im Fluss. Der Inhalt
   beginnt ganz oben; den Standard-Abstand bestimmt das Layout im Editor. */
#core:not([data-fixed="0"]) #headercontent { height: 0 !important; }

/* Standard-Abstand unter dem fliegenden Kopf: Seiten, die NICHT mit einer
   Vollbreit-Farbflaeche (Spalte .nf-breit in der ersten Zeile) beginnen,
   erhalten den klassischen Abstand zum Kopf. Je Installation/Theme aenderbar
   ueber die Variable --nf-kopf-abstand. Seiten MIT Vollbreit-Start (Hero)
   laufen bewusst bis ganz nach oben. */
#core:not([data-fixed="0"]) #content:not(:has(> .nf-lay-row:first-child > .nf-lay-col.nf-breit)) {
    padding-top: var(--nf-kopf-abstand, 96px);
}

/* Fliegender Kopf: von Anfang an fest — nicht erst ab dem ersten Scroll-Pixel.
   Vorher stand der Kopf bei Scroll 0 auf `relative` und wurde erst durch
   .allactive (Scroll-Listener, einen Frame spaeter) `fixed`: beim Anscrollen
   wanderte er kurz mit und schnappte dann zurueck — das war das Stolpern. */
#core:not([data-fixed="0"]) #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 999 !important;
}
/* Designer-Panel darf den festen Kopf weiterhin einruecken (wie bei .allactive). */
html.nfed-pal-push #core:not([data-fixed="0"]) #header { right: 300px !important; }


/* NF-KASSE-IOS (Kern, 08.09.2026) -- Warenkorb-Schublade auf dem iPhone:
   - Schublade wird ueber top:0 + bottom:0 aufgespannt statt height:100vh (100vh war hoeher als der
     sichtbare Bereich: der Bestell-/Buchen-Knopf lag hinter der Safari-Leiste). Safari haelt bottom:0
     an der jeweils sichtbaren Unterkante, ob mit oder ohne Leiste.
   - transition nur fuer right (die Alles-Transition liess die Schublade beim Oeffnen haengen).
   - overscroll-behavior:contain: am Ende der Schublade laeuft das Scrollen nicht auf die Seite weiter.
   - Dunkle Flaeche: touch-action:none, Wischen darauf scrollt nicht die Seite dahinter.
   - Polster unten inkl. Home-Balken, Knopf mobil groesser. Letzte Sicherung: offene Schublade nie verschoben. */
#all #cart-overlay.open{touch-action:none;}
#all .cart-body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));}
@media (max-width:750px){
  #all .cart-body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));}
  #all #payBtn{padding:17px;font-size:16px;}
}
#all .cart-content.open{transform:none !important;animation:none !important;right:0 !important;}
/* NF-KASSE-IOS:END */

/* ==== NeofireCss:START – automatisch erzeugt, nicht von Hand ändern ==== */
/* ==== NF-SV24-DESIGN: Sport-Onlineshop.de – Sportscheck-Aufbau, Palette #2F2E33 / #D5D6D2 / #FFFFFF / #20C9A6 ==== */
/* Überschriften: Größe/Zeilenhöhe kommen aus dem Editor-Feld am Baustein, das h1-h4 darin erbt sie (Browser-Standard wäre 2em). */
#all .nf-sv-titel h1,#all .nf-sv-titel h2,#all .nf-sv-titel h3{font-size:inherit;line-height:inherit;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;margin:0}
#all .nf-sv-titel h4{font-size:inherit;line-height:inherit;font-weight:700;text-transform:uppercase;margin:0}
#all .nf-sv-topbar .nf-lay-el span{display:inline-block;margin:0 16px;letter-spacing:.04em;text-transform:uppercase}
#all .nf-sv-topbar .nf-lay-el span::before{content:"\2713";margin-right:6px;color:#9A9BA0}
#all .nf-sv-eyebrow{text-transform:uppercase;letter-spacing:.16em}
/* Knöpfe: der sichtbare Knopf ist das Kind im Baustein – Pillenform und Polster hier, Farben aus den Theme-Tokens (gefüllt/umrandet). */
#all .nf-sv-btn .nf-lay-btn{border-radius:999px;padding:14px 28px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
#all .nf-sv-chips .nf-lay-btn{padding:9px 18px;font-size:12px}
#all .nf-sv-tile{overflow:hidden}
#all .nf-sv-uspbar .nf-sv-usp+.nf-sv-usp{border-left:1px solid rgba(47,46,51,.22);box-shadow:inset 1px 0 0 #FFFFFF}
/* Kategorie-Karussell: Kategorien ohne Bild bekommen eine farbige Platzhalter-Kachel in den Palettenfarben. */
#all .nf-lay-catcard{border:0;border-radius:16px;overflow:hidden;background:transparent}
#all .nf-lay-catcard .img{min-height:150px;border-radius:16px;overflow:hidden}
#all .nf-lay-catcard .img .noimage{display:block;height:150px;background:#2F2E33}
#all .nf-lay-catcard:nth-child(3n+2) .img .noimage{background:#EEEFEC}
#all .nf-lay-catcard:nth-child(3n) .img .noimage{background:#20C9A6}
#all .nf-lay-catcard .listing-name{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:12px 4px 4px;color:#2F2E33}
#all .nf-lay-catcard:hover .img .noimage{filter:brightness(1.08)}
/* Marken-Laufband: die Logos laufen endlos von rechts nach links; Inhalt (Logo-Liste) ist das HTML-Feld des Text-Bausteins. */
#all .nf-sv-marquee{overflow:hidden}
#all .nf-sv-marquee .nf-sv-marquee-band{overflow:hidden;white-space:nowrap}
#all .nf-sv-marquee .nf-sv-marquee-lauf{display:inline-flex;align-items:center;gap:72px;padding-right:72px;animation:nfSvLauf 40s linear infinite;will-change:transform}
#all .nf-sv-marquee:hover .nf-sv-marquee-lauf{animation-play-state:paused}
#all .nf-sv-marquee .nf-sv-marquee-lauf span{display:inline-flex;align-items:center;height:48px}
#all .nf-sv-marquee .nf-sv-marquee-lauf img{height:40px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.75;transition:filter .25s ease,opacity .25s ease}
#all .nf-sv-marquee .nf-sv-marquee-lauf img:hover{filter:none;opacity:1}
@keyframes nfSvLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){#all .nf-sv-marquee .nf-sv-marquee-lauf{animation:none}}
#all [data-nf-lay-region="footer"] input[type="email"],#all [data-nf-lay-region="footer"] input[type="text"]{background:#FFFFFF;border:1px solid #E3E4E0;color:#2F2E33;border-radius:999px}
#all [data-nf-lay-region="footer"] button,#all [data-nf-lay-region="footer"] .nf-lay-btn{border-radius:999px}
#all #topbar .core-search input[type="search"]{border-radius:999px;border:1px solid #E3E4E0;background:#F6F6F4;color:#2F2E33}
@media (max-width:750px){#all .nf-sv-topbar .nf-lay-el span:nth-child(n+3){display:none}#all .nf-sv-hero{padding-left:24px !important;padding-right:24px !important}#all .nf-sv-uspbar .nf-sv-usp+.nf-sv-usp{border-left:0;box-shadow:inset 0 1px 0 #FFFFFF;border-top:1px solid rgba(47,46,51,.22)}#all .nf-sv-marquee .nf-sv-marquee-lauf{gap:40px;padding-right:40px}}

/* ==== NF-SV24-OUTLINE: Stil „umrandet“ wirklich umrandet. style.css setzt spaeter „#all .nf-lay-btn“ auf die Kaufen-Farben und schlaegt damit die Outline-Regel; hier gewinnt die Token-Farbe (btn_*) zurueck. ==== */
#all .nf-lay-btn.nf-lay-btn--outline{background:var(--main-button-background);color:var(--main-button-color);border:var(--main-button-border);height:auto}
#all .nf-lay-btn.nf-lay-btn--outline:hover{background:var(--main-button-hover-background);color:var(--main-button-hover-color);border:var(--main-button-hover-border)}
#all .nf-lay-btn.nf-lay-btn--primary{height:auto}
#all.darkmode .nf-lay-btn.nf-lay-btn--outline{color:var(--main-button-color) !important;border-color:var(--main-button-border) !important}
#all .nf-sv-chips .nf-lay-btn.nf-lay-btn--outline{border-width:1.5px}
/* ==== ENDE OUTLINE ==== */

/* ==== NF-SV24-GHOST: „umrandet“ auf dunklen/cobalt Flächen (Hero, Kategorie-Kacheln, Deals-Banner) = nur weißer Rand, weißer Text, transparent. Hover fuellt leicht auf. ==== */
#all .nf-sv-hero .nf-lay-btn.nf-lay-btn--outline,#all .nf-sv-tile .nf-lay-btn.nf-lay-btn--outline,#all .nf-sv-deals .nf-lay-btn.nf-lay-btn--outline{background:transparent;border:1.5px solid #FFFFFF;color:#FFFFFF}
#all .nf-sv-hero .nf-lay-btn.nf-lay-btn--outline:hover,#all .nf-sv-tile .nf-lay-btn.nf-lay-btn--outline:hover,#all .nf-sv-deals .nf-lay-btn.nf-lay-btn--outline:hover{background:rgba(255,255,255,.18);border-color:#FFFFFF;color:#FFFFFF}
/* ==== ENDE GHOST ==== */
/* ==== NF-SV24-PFEILE: Menüleiste und Mega-Menü schlicht (Chevron). Produkt-/Kategorie-Slider behalten die Kern-Pfeile (weißer Kreis) – Kundenwunsch. ==== */
#all .nf-mega-arrow,#all .nf-mega-arrow:hover,#all.darkmode .nf-mega-arrow{background:transparent !important;border:0;border-radius:0;box-shadow:none;color:#FFFFFF}
#all .nf-mega-panel .nf-sv-mega-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:44px;border:0;border-radius:0;background:#FFFFFF;color:#2F2E33;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:none;font-size:34px;line-height:1;font-weight:300;padding:0;transition:color .2s ease}
#all .nf-mega-panel .nf-sv-mega-arrow:hover{color:#20C9A6;background:transparent}
#all .nf-mega-panel .nf-sv-mega-prev{left:6px}
#all .nf-mega-panel .nf-sv-mega-next{right:6px}
#all .nf-mega-panel .nf-sv-mega-arrow[disabled]{opacity:.25;cursor:default}

@media (max-width:750px){#all .nf-mega-panel .nf-sv-mega-arrow{display:flex !important /* 05.09.: mobil wie Desktop */}}
/* ==== ENDE PFEILE ==== */

/* ==== NF-SV24-MEGA-BREIT: Ohne Bildspalte (kein Menübild links/rechts) darf die Unterkategorien-Spalte die volle Breite der Menüfläche (1200er-Container) nutzen – style.css deckelt sie sonst auf 72 % für das Bild. ==== */
#all .nf-mega-panel [data-lay-col="cmegasubs"]:only-child{max-width:none !important;flex:1 1 100% !important;width:100%}
/* ==== ENDE MEGA-BREIT ==== */

/* ==== NF-SV24-MEGA: Mega-Menü als Slider – weiße Fläche, Gruppen (Unterkategorie + Kinder) nebeneinander, nur durch senkrechte Linien getrennt, keine Kästen, keine Unterlinien. Pfeile aus NeofireJs. ==== */
#all .nf-mega-panel .nf-mn-subs{column-count:auto !important;columns:auto !important;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 0 10px;scrollbar-width:none;-ms-overflow-style:none}
#all .nf-mega-panel .nf-mn-subs::-webkit-scrollbar{display:none}
#all .nf-mega-panel .nf-mn-grp{flex:0 0 220px;scroll-snap-align:start;break-inside:auto;background:transparent;border:0;border-left:1px solid #E3E4E0;border-radius:0;padding:4px 20px 8px;max-height:290px;overflow:hidden;box-shadow:none}
#all .nf-mega-panel .nf-mn-grp:first-child{border-left:0}
#all .nf-mega-panel .nf-mn-grp .mi_head{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:#2F2E33 !important;margin:0 0 10px;padding:0;border:0}
#all .nf-mega-panel .nf-mn-grp .mi_head:hover{color:#20C9A6 !important}
#all .nf-mega-panel .nf-mn-grp .mi_sub{display:block;font-size:13px;line-height:1.4;color:#2F2E33 !important;padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none}
#all .nf-mega-panel .nf-mn-grp .mi_sub:hover{color:#20C9A6 !important}
#all .nf-mega-panel .nf-mn-grp .mi_sub:nth-of-type(n+8){display:none}
#all .nf-mega-panel .nf-sv-mega-wrap{position:relative}
@media (max-width:750px){#all .nf-mega-panel .nf-mn-grp{flex-basis:180px}}
/* ==== ENDE MEGA ==== */

/* ==== NF-SV24-KERBEN: Zwischen den Menüpunkten der dunklen Leiste je eine dunkle und eine helle senkrechte Linie (Kerben-Optik). Sitzt mittig im 30-px-Abstand (Editor-Feld mr am Menüpunkt). ==== */
#all .nf-mega-bar .nf-mega-item{position:relative}
#all .nf-mega-bar .nf-mega-item + .nf-mega-item::before{content:"";position:absolute;left:-16px;top:11px;bottom:11px;width:1px;background:#1A191D;box-shadow:1px 0 0 rgba(255,255,255,.16);pointer-events:none}
#all.darkmode .nf-mega-bar .nf-mega-item + .nf-mega-item::before{background:#0E0D10;box-shadow:1px 0 0 rgba(255,255,255,.12)}
@media (max-width:750px){#all .nf-mega-bar .nf-mega-item + .nf-mega-item::before{display:none}}
/* ==== ENDE KERBEN ==== */

/* ==== NF-SV24-HELL: helle Kachel (Hartware) – Rahmen-Knopf dunkel auf hell, gleiche Geister-Optik wie auf den farbigen Kacheln. Trennlinien der USP-Leiste heller. ==== */
#all .nf-sv-tile--hell .nf-lay-btn.nf-lay-btn--outline{background:transparent;border:1.5px solid #2F2E33;color:#2F2E33}
#all .nf-sv-tile--hell .nf-lay-btn.nf-lay-btn--outline:hover{background:rgba(47,46,51,.08);border-color:#2F2E33;color:#2F2E33}
#all .nf-sv-uspbar .nf-sv-usp+.nf-sv-usp{border-left-color:rgba(47,46,51,.22)}
/* ==== ENDE HELL ==== */

/* ==== NF-SV24-SUBCATS: Unterkategorien-Slider oben im Listing (Standard-Kategorie-Layout 131, Baustein g_catslider Quelle „Unterkategorien der aktuellen Seite“). Kacheln wie „Shop nach Kategorie“: farbige Fläche, Name darin. ==== */
#all .nf-sv-subcats .nf-lay-catcard{position:relative}
#all .nf-sv-subcats .nf-lay-catcard .img{min-height:120px}
#all .nf-sv-subcats .nf-lay-catcard .img .noimage{height:120px}
#all .nf-sv-subcats .nf-lay-catcard .listing-name{position:absolute;left:18px;right:18px;bottom:16px;padding:0;color:#FFFFFF;font-size:16px}
#all .nf-sv-subcats .nf-lay-catcard:nth-child(3n) .listing-name{color:#2F2E33}
#all .nf-sv-subcats .nf-lay-catcard .img img{height:120px;object-fit:cover;width:100%}
/* ==== ENDE SUBCATS ==== */
/* ==== NF-SV24-LOOP: Endlos-Slider – der Fortschrittsbalken passt bei geklonten Karten nicht mehr, daher aus. ==== */
#all .nf-lay-gslider[data-loop="1"] [data-nf-pbarwrap]{display:none !important}
/* ==== ENDE LOOP ==== */
/* ==== NF-SV24-PFEIL-MITTE: Pfeile mittig zur Kachel. style.css rechnet 20 px fuer den Fortschrittsbalken ab – ohne Balken (Endlos-Slider, Kategorie-Slider) sitzen sie sonst zu hoch. ==== */
#all .nf-lay-gslider[data-loop="1"] .nf-lay-gnav,#all [data-lay-type="g_catslider"] .nf-lay-gslider .nf-lay-gnav{top:50%}
/* ==== ENDE PFEIL-MITTE ==== */
/* ==== NF-SV24-BILDER: Bildflaechen wie beim Vorbild – Hero, vier Kategorie-Kacheln und Kampagnen-Banner tragen ein Hintergrundbild (Editor-Feld bgimage der Spalte). Ein dunkler Verlauf davor haelt den weissen Text lesbar; Kacheln quadratisch, Text unten. ==== */
#all .nf-sv-hero,#all .nf-sv-tile,#all .nf-sv-deals{position:relative;isolation:isolate;overflow:hidden}
#all .nf-sv-hero::before,#all .nf-sv-tile::before,#all .nf-sv-deals::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit}
#all .nf-sv-hero::before{background:linear-gradient(90deg,rgba(47,46,51,.88) 0%,rgba(47,46,51,.55) 45%,rgba(47,46,51,.15) 100%)}
#all .nf-sv-tile::before{background:linear-gradient(180deg,rgba(47,46,51,0) 30%,rgba(47,46,51,.85) 100%)}
#all .nf-sv-deals::before{background:linear-gradient(90deg,rgba(47,46,51,.85) 0%,rgba(47,46,51,.35) 60%,rgba(47,46,51,.1) 100%)}
#all .nf-sv-hero > *,#all .nf-sv-tile > *,#all .nf-sv-deals > *{position:relative;z-index:1}
#all .nf-sv-hero{min-height:520px;display:flex;flex-direction:column;justify-content:center}
#all .nf-sv-tile{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;transition:none}
#all .nf-sv-tile .nf-lay-el:first-child{margin-top:auto}
@media (max-width:1023px){#all .nf-sv-hero{min-height:420px}}
@media (max-width:750px){#all .nf-sv-hero{min-height:360px}#all .nf-sv-tile{aspect-ratio:4/3}}
/* ==== ENDE BILDER ==== */
/* ==== NF-SV24-SUBBOX: Unterkategorie-Box im Produktraster – gleiche Huelle wie die Produktkarte (Radius 16, feine Linie), Verlauf in den Shopfarben, Name unten. ==== */
#all .grid .nf-sv-subbox{display:flex;flex-direction:column;padding:0;border-radius:16px;border:1px solid #ECEDEA;color:#FFFFFF !important;text-decoration:none;min-height:320px;align-self:stretch;position:relative;overflow:hidden;background:#20C9A6;box-shadow:none}
#all .grid .nf-sv-subbox--1{background:#2F2E33}
#all .grid .nf-sv-subbox--2{background:#EEEFEC}
#all .grid .nf-sv-subbox--2 .nf-sv-subbox-link,#all .grid .nf-sv-subbox--2 .nf-sv-subbox-link > span{color:#2F2E33 !important}
#all .grid .nf-sv-subbox .nf-sv-subbox-link,#all .grid .nf-sv-subbox .nf-sv-subbox-link > span{color:#FFFFFF !important}
#all .grid .nf-sv-subbox-link{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px;flex:1 1 auto;color:#FFFFFF !important;text-decoration:none}
#all .grid .nf-sv-subbox-link > span{color:#FFFFFF}
#all .grid .nf-sv-subbox-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
#all .grid .nf-sv-subbox-name{font-size:22px;line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
#all .grid .nf-sv-subbox-cta{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:transform .2s ease}
#all .grid .nf-sv-subbox:hover .nf-sv-subbox-cta{transform:translateX(4px)}
#all.darkmode .grid .nf-sv-subbox{border-color:#3A393F}
/* ==== ENDE SUBBOX ==== */
/* ==== NF-SV24-TEASER: Bild-Teaser (Spalte nf-sv-teaser, Hintergrundbild = Editor-Feld) – Eyebrow, Ueberschrift, Kurztext und Pfeil-Link unten. Zwei breite = 3:2, drei kleine = 1:1. ==== */
#all .nf-sv-teaser{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/2;border-radius:18px;color:#FFFFFF}
#all .nf-lay-row > .nf-sv-teaser:nth-child(1):nth-last-child(3),#all .nf-lay-row > .nf-sv-teaser:nth-child(2):nth-last-child(2),#all .nf-lay-row > .nf-sv-teaser:nth-child(3):nth-last-child(1){aspect-ratio:1/1}
#all .nf-sv-teaser::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(47,46,51,0) 35%,rgba(47,46,51,.88) 100%)}
#all .nf-sv-teaser > *{position:relative;z-index:1}
#all .nf-sv-teaser .nf-lay-el:first-child{margin-top:auto}
#all .nf-sv-teaser .nf-lay-btn.nf-lay-btn--link{color:#FFFFFF;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 0 0;display:inline-flex;align-items:center;gap:8px;border:0;background:none;height:auto}
#all .nf-sv-teaser .nf-lay-btn.nf-lay-btn--link::after{content:"→";font-size:18px;line-height:1;transition:transform .2s ease}
#all .nf-sv-teaser:hover .nf-lay-btn.nf-lay-btn--link::after{transform:translateX(6px)}
#all .nf-sv-teaser .nf-lay-btn.nf-lay-btn--link:hover{color:#D5D6D2}
@media (max-width:750px){#all .nf-sv-teaser{aspect-ratio:4/3 !important}}
/* ==== ENDE TEASER ==== */
/* ==== NF-SV24-GCOL: Kartenbreite der Slider schon im CSS – ohne das stehen die Karten bis zum Skriptstart auf 210 px und springen danach auf die echte Breite (Stolpern beim Laden). Formel wie im Slider-Skript: (100% - (n-1)*14px) / n mit n = 4 / 3 / 2 / 1. ==== */
#all .nf-lay-gtrack{--nf-gcol:calc((100% - 42px) / 4)}
@media (max-width:1200px){#all .nf-lay-gtrack{--nf-gcol:calc((100% - 28px) / 3)}}
@media (max-width:800px){#all .nf-lay-gtrack{--nf-gcol:calc((100% - 14px) / 2)}}
@media (max-width:600px){#all .nf-lay-gtrack{--nf-gcol:100%}}
#all .nf-lay-gslider .nf-lay-gtrack > .card{animation:none}
/* ==== ENDE GCOL ==== */
/* ==== NF-SV24-MEGA-AKTIV: Aktiver Menüpunkt behält Schriftgröße/-stärke. Nach einem SPA-Klick rendert der Shop die Kopfzeile ohne die Inline-Werte des Editors (font-size 15 / font-weight 700 am mb_name); dann greift für .is-current „font-weight:inherit“ = 400 und der Punkt wirkt dünner. Werte hier = Editor-Werte des Bausteins mb_name. ==== */
#all .nf-mega-bar .nf-mega-link.mb_name,#all .nf-mega-bar .nf-mega-link.mb_name.is-current,#all .nf-mega-bar .nf-mega-link.mb_name.is-inpath{font-size:15px;font-weight:700;text-decoration:none}
/* ==== ENDE MEGA-AKTIV ==== */
/* ==== NF-SV24-FOOTER: Fussbereich – Newsletter-Band (Spalte nf-sv-nlband, Farben/Radius = Editor), vier Spalten, grosse dezente Wortmarke, Bodenzeile. Formularteile des Newsletter-Bausteins hier nur in Form gebracht. ==== */
#all [data-nf-lay-region="footer"]{overflow:hidden}
#all .nf-sv-nlband{position:relative;isolation:isolate;overflow:hidden}
#all .nf-sv-nlband::after{display:none}
#all .nf-sv-nlband > *{position:relative;z-index:1}
#all .nf-sv-nlband .nf-sv-nl-h,#all .nf-sv-nlband .nf-sv-nl-h *{color:#FFFFFF !important;line-height:1.1}
#all .nf-sv-nl-form form,#all .nf-sv-nl-form .footer-newsletter{display:flex;gap:10px;align-items:stretch}
#all .nf-sv-nl-form input[type=email],#all .nf-sv-nl-form input[type=text]{flex:1 1 auto;min-width:0;height:44px;border-radius:999px;border:1px solid #FFFFFF;padding:0 18px;background:#FFFFFF;color:#2F2E33;font-size:14px;box-shadow:none;outline:none;max-width:360px}
#all .nf-sv-nl-form button,#all .nf-sv-nl-form input[type=submit]{height:50px;border-radius:999px;border:0;padding:0 24px;background:#2F2E33;color:#FFFFFF;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;cursor:pointer;white-space:nowrap}
#all .nf-sv-nl-form button:hover{background:#F4F4F2}
#all .nf-sv-nl-form .nf-nl-knopf{display:inline-flex !important;align-items:center;justify-content:center;border-radius:999px !important;height:44px !important;padding:0 22px !important;background:#FFFFFF !important;color:#2F2E33 !important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;border:0 !important}
#all .nf-sv-nl-form input[type=email],#all .nf-sv-nl-form input[type=text]{border-radius:999px !important;height:44px !important;box-sizing:border-box !important}
#all .nf-sv-nl-form form{align-items:center;justify-content:flex-end}
#all .nf-sv-nl-form label,#all .nf-sv-nl-form small,#all .nf-sv-nl-form p{color:rgba(255,255,255,.8) !important;font-size:12px}
#all [data-nf-lay-region="footer"] .nf-sv-foot-h{color:#FFFFFF !important;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:16px}
#all [data-nf-lay-region="footer"] .nf-lay-navlink{color:#D5D6D2;display:block;padding:0;margin:0;line-height:inherit;font-size:14px;text-decoration:none;transition:color .15s ease,transform .15s ease}
#all [data-nf-lay-region="footer"] .nf-sv-foot-usp li{padding:0 0 0 22px;margin:0 0 9px;line-height:1.35}
#all [data-nf-lay-region="footer"] .nf-sv-foot-usp li::before{top:5px}
#all [data-nf-lay-region="footer"] .nf-lay-navlink:hover{color:#FFFFFF;transform:translateX(4px)}
#all [data-nf-lay-region="footer"] .footer-phone{font-size:26px;font-weight:900;color:#FFFFFF !important;text-decoration:none;letter-spacing:-.01em;display:inline-block;margin:2px 0 6px}
#all .nf-sv-foot-usp{list-style:none;margin:0 0 16px;padding:0}
#all .nf-sv-foot-usp li{position:relative;padding:5px 0 5px 22px;color:#D5D6D2;font-size:14px}
#all .nf-sv-foot-usp li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:7px;border-left:2px solid #20C9A6;border-bottom:2px solid #20C9A6;transform:rotate(-45deg)}
#all [data-nf-lay-region="footer"] .footer_copyright,#all [data-nf-lay-region="footer"] .footer_vatinfo{font-size:13px;color:#9A9BA0}
@media (max-width:1023px){#all [data-nf-lay-region="footer"] .nf-lay-row > .nf-lay-col{flex:0 0 50% !important;max-width:50% !important}#all .nf-sv-nlband .nf-lay-row > .nf-lay-col{flex:0 0 100% !important;max-width:100% !important}}
@media (max-width:750px){#all [data-nf-lay-region="footer"] .nf-lay-row > .nf-lay-col{flex:0 0 100% !important;max-width:100% !important}#all .nf-sv-nlband{padding:24px !important}#all .nf-sv-nl-form form{flex-direction:column}}
/* ==== ENDE FOOTER ==== */
/* ==== NF-SV24-CATCARD-TEXT: Kategorie-Kacheln im Slider einfarbig (dunkel / hellgrau / tuerkis, jede dritte tuerkis); Name auf der hellen Kachel dunkel, sonst weiss. ==== */
#all .nf-lay-catcard .listing-name{color:#FFFFFF !important}
#all .nf-lay-catcard:nth-child(3n+2) .listing-name{color:#2F2E33 !important}
/* ==== ENDE CATCARD-TEXT ==== */
/* ==== NF-SV24-GNAV: Slider-Pfeile vor und hinter dem Slider, ohne Kreis/Umrandung/Schatten – nur Chevron. ==== */
#all .nf-lay-gslider .nf-lay-gnav,#all .nf-lay-gslider .nf-lay-gnav:hover,#all .nf-lay-gslider .nf-lay-gnav:active{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;width:40px;height:40px;color:#2F2E33;opacity:1;transform:translateY(-50%) scale(1)}
#all .nf-lay-gslider .nf-lay-gnav:hover{color:#20C9A6}
#all .nf-lay-gslider .nf-lay-gnav svg{width:28px;height:28px}
#all .nf-lay-gslider .nf-lay-gprev{left:-48px}
#all .nf-lay-gslider .nf-lay-gnext{right:-48px}
@media (max-width:1300px){#all .nf-lay-gslider .nf-lay-gprev{left:-6px}#all .nf-lay-gslider .nf-lay-gnext{right:-6px}}
/* ==== ENDE GNAV ==== */
/* ==== NF-SV24-HOVERRAND: Boxen im Raster (Produkte + Unterkategorie) zeigen beim Ueberfahren einen Rand in der Akzentfarbe. ==== */
#all .grid .card{transition:border-color .15s ease}
#all .grid .card:hover,#all .nf-lay-gtrack .card:hover{border-color:#20C9A6 !important}
#all .grid .nf-sv-subbox--0:hover{border-color:#2F2E33 !important}
/* ==== ENDE HOVERRAND ==== */
/* ==== NF-SV24-FLACH: Startseiten-Kacheln flach wie die Boxen auf den Kategorieseiten – kein Bild, kein Verlauf, Farbe = Editor-Feld der Spalte. ==== */
#all .nf-sv-tile--flat::before{display:none}
#all .nf-sv-tile--flat{aspect-ratio:4/3;border:1px solid #ECEDEA}
#all .nf-sv-tile--flat .nf-lay-btn.nf-lay-btn--outline{border-color:currentColor;color:inherit}
#all .nf-sv-tile--flat .nf-lay-btn.nf-lay-btn--outline:hover{border-color:currentColor;color:inherit;background:rgba(47,46,51,.06)}
/* ==== ENDE FLACH ==== */
/* ==== NF-SV24-MEGA-SPUR: Zugbalken unter dem Mega-Slider (Spur + Griff), Optik wie der Balken der Produkt-Slider. ==== */
#all .nf-mega-panel .nf-sv-mega-spur{position:relative;height:4px;border-radius:0;background:#ECEDEA;margin:14px 0 2px;cursor:pointer}
#all .nf-mega-panel .nf-sv-mega-griff{position:absolute;top:0;left:0;height:4px;border-radius:0;background:#9A9BA0;cursor:grab;transition:background .15s ease}
#all .nf-mega-panel .nf-sv-mega-griff:hover,#all .nf-mega-panel .nf-sv-mega-spur.is-grab .nf-sv-mega-griff{background:#2F2E33;cursor:grabbing}
/* ==== ENDE MEGA-SPUR ==== */
/* ==== NF-SV24-MEGA-PFEILE2: Pfeile des Mega-Sliders INNERHALB der Box (die Box schneidet aussen ab); Track bekommt seitlich Luft. ==== */
#all .nf-mega-panel .nf-sv-mega-next{background:#FFFFFF}
#all .nf-mega-panel .nf-mn-subs{padding-left:64px;padding-right:64px;scroll-padding-left:64px}
#all .nf-mega-panel .nf-mn-grp:first-child{padding-left:20px}
/* ==== ENDE MEGA-PFEILE2 ==== */
/* ==== NF-SV24-MEGA-BLENDE: weisse Blenden links/rechts im Mega-Slider, damit unter den Pfeilen kein durchlaufender Text sichtbar ist. ==== */
#all .nf-mega-panel .nf-sv-mega-wrap::before,#all .nf-mega-panel .nf-sv-mega-wrap::after{content:"";position:absolute;top:0;bottom:22px;width:66px;background:#FFFFFF;z-index:2;pointer-events:none}
#all .nf-mega-panel .nf-sv-mega-wrap::before{left:0}
#all .nf-mega-panel .nf-sv-mega-wrap::after{right:0;width:96px;background:linear-gradient(270deg,#FFFFFF 70%,rgba(255,255,255,0))}
#all .nf-mega-panel .nf-sv-mega-arrow{z-index:3}
/* ==== ENDE MEGA-BLENDE ==== */
/* ==== NF-SV24-MEGA-VOLL: Menüleiste und Mega-Fläche wieder volle Breite (wie vorher), Pfeile bleiben innen; Zugbalken eckig; kein nativer Scroller auf Desktop. ==== */
#all .nf-mega-panel [data-lay-col="cmegaframe"]{border-radius:0 !important;box-shadow:none}
@media (min-width:751px){#all .nf-mega-panel .nf-mn-subs{overflow-x:hidden;scrollbar-width:none}}
/* ==== ENDE MEGA-VOLL ==== */
/* ==== NF-SV24-CATCARD-HOVER: helle Kategorie-Kachel wird beim Ueberfahren nur einen Hauch heller (1.08 machte sie weiss). ==== */
#all .nf-lay-catcard:nth-child(3n+2):hover .img .noimage{filter:brightness(1.025)}
/* ==== ENDE CATCARD-HOVER ==== */
/* ==== NF-SV24-SUBBOX-HELL: hellgraue Unterkategorie-Box mit DUNKLER Schrift (die generische Weiss-Regel steht spaeter und gewann). ==== */
#all .grid .nf-sv-subbox.nf-sv-subbox--2 .nf-sv-subbox-link,#all .grid .nf-sv-subbox.nf-sv-subbox--2 .nf-sv-subbox-link > span{color:#2F2E33 !important}
/* ==== ENDE SUBBOX-HELL ==== */
/* ==== NF-SV24-FOOT-TUERKIS: Footer-Akzent Tuerkis. Telefonnummer + Link-Hover kommen aus den Editor-Feldern (color/color_hover); hier nur Haekchen der Vorteilsliste und Hover fuer freie Links im Text. ==== */
#all [data-nf-lay-region="footer"] .nf-sv-foot-usp li::before{border-color:#20C9A6}
#all [data-nf-lay-region="footer"] .nf-lay-el .footer-phone:hover{color:#7FE8D2 !important}
#all [data-nf-lay-region="footer"] .footer_copyright a:hover,#all [data-nf-lay-region="footer"] .footer_vatinfo a:hover{color:#20C9A6 !important}
/* ==== ENDE FOOT-TUERKIS ==== */
/* ==== NF-SV24-MEGA-DRAG: Kachelband im Mega-Menue ist mit der Maus ziehbar. ==== */
#all .nf-mega-panel .nf-mn-subs{cursor:grab;user-select:none}
#all .nf-mega-panel .nf-mn-subs.is-dragging{cursor:grabbing;scroll-snap-type:none}
#all .nf-mega-panel .nf-mn-subs.is-dragging a{pointer-events:none}
/* ==== ENDE MEGA-DRAG ==== */
/* ==== NF-SV24-GRID-WIE-SLIDER: Produktraster mit denselben Abstaenden wie die Startseiten-Slider (Luecke 14 px; Kartenvorlage = Slider-Karte, per Layout kopiert). ==== */
#all .grid{gap:14px}
/* ==== ENDE GRID-WIE-SLIDER ==== */
/* ==== NF-SV24-MENUE-KARTE: Der gleitende Balken (.nf-mega-ink) IST die Karteikarte: faehrt flach zum Punkt (0,2 s) und ploppt dort schnell nach oben (0,12 s; JS setzt is-up). Weiss, oben rund, Menuefeld-breit; Text unter der Karte dunkel. ==== */
#all .nf-mega-bar .nf-mega-link{position:relative;z-index:2;background:transparent !important;transition:color .1s ease 0s}
#all .nf-mega-bar .nf-mega-link::after{display:none !important}
#all .nf-mega-bar .nf-mega-ink{z-index:1;height:calc(100% + 14px);bottom:0;background:#EEEFEC;border-radius:10px 10px 0 0;box-sizing:content-box;padding:0 14px;margin-left:-14px;transition:none}
#all .nf-mega-bar .nf-mega-ink.is-fade{animation:nfSvKarteAuf .16s ease}
@keyframes nfSvKarteAuf{from{opacity:0}to{opacity:1}}
#all .nf-mega-bar .nf-mega-link.mb_name{color:#FFFFFF !important}
#all .nf-mega-bar .nf-mega-item.is-karte > a.nf-mega-link.mb_name,#all .nf-mega-bar .nf-mega-item.is-karte > a.nf-mega-link.mb_name:hover,#all .nf-mega-bar .nf-mega-item.is-karte > a.nf-mega-link.mb_name.is-current{color:#2F2E33 !important}
#all .nf-mega-bar .nf-mega-item:has(> .is-current) + .nf-mega-item::before,#all .nf-mega-bar .nf-mega-item:hover + .nf-mega-item::before{opacity:0}
/* ==== ENDE MENUE-KARTE ==== */
/* ==== NF-SV24-GRAUSTREIFEN: hellgrauer Streifen (Spalte csvgrau, 14 px, Editor-Farbe) unter der Menueleiste; die weisse Karteikarte reicht 14 px in den Streifen hinein und durchbricht ihn. ==== */
#all [data-nf-lay-region="header"] .nav_mega{position:relative;z-index:6}
#all [data-nf-lay-region="header"] [data-lay-col="cmsqj3hwn3"]{overflow:visible}
#all .nf-mega-bar .nf-mega-ink{bottom:-14px}
@media (min-width:1024px){#all .nf-mega,#all .nf-mega-bar{overflow:visible !important}}
/* ==== ENDE GRAUSTREIFEN ==== */
/* ==== NF-SV24-NL-GHOST: Newsletter-Feld und -Knopf wie die Rahmen-Knoepfe (Ghost): transparent, 1,5 px weisser Rand, weisse Schrift; Knopf fuellt sich beim Ueberfahren weiss. ==== */
#all .nf-sv-nl-form input[type=email],#all .nf-sv-nl-form input[type=text]{background:transparent !important;border:1.5px solid #FFFFFF !important;color:#FFFFFF !important;caret-color:#FFFFFF}
#all .nf-sv-nl-form input[type=email]::placeholder,#all .nf-sv-nl-form input[type=text]::placeholder{color:rgba(255,255,255,.75)}
#all .nf-sv-nl-form input[type=email]:focus,#all .nf-sv-nl-form input[type=text]:focus{background:rgba(255,255,255,.12) !important;outline:none}
#all .nf-sv-nl-form .nf-nl-knopf{background:transparent !important;border:1.5px solid #FFFFFF !important;color:#FFFFFF !important}
#all .nf-sv-nl-form .nf-nl-knopf:hover{background:#FFFFFF !important;color:#2F2E33 !important}
/* ==== ENDE NL-GHOST ==== */
/* ==== NF-SV24-MEGA-PFEIL-SLIDER: Mega-Slider-Pfeile exakt wie die Produkt-Slider-Pfeile (40x40, Chevron 28 px, dunkel, Hover tuerkis, kein Hintergrund). ==== */
#all .nf-mega-panel .nf-sv-mega-arrow,#all .nf-mega-panel .nf-sv-mega-arrow:hover{width:40px;height:40px;background:transparent !important;border:0;border-radius:0;box-shadow:none;color:#2F2E33;font-size:0;line-height:0;padding:0;display:flex;align-items:center;justify-content:center}
#all .nf-mega-panel .nf-sv-mega-arrow:hover{color:#20C9A6}
#all .nf-mega-panel .nf-sv-mega-arrow svg{width:28px;height:28px}
#all .nf-mega-panel .nf-sv-mega-arrow[disabled]{opacity:.25}
/* ==== ENDE MEGA-PFEIL-SLIDER ==== */

/* ==== NF-SV24-PFEIL-HOVER: Pfeilfarben. Die Farb-Engine der Spalte schreibt color per :where(...):not(...) mit Spezifitaet 1,4,0 !important in den Body – deshalb hier doppelte Klasse (1,5,0). Produkt-Slider und Mega-Slider identisch: dunkel, Hover tuerkis. ==== */
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav,#all .nf-mega-panel .nf-sv-mega-arrow.nf-sv-mega-arrow.nf-sv-mega-arrow{color:#2F2E33 !important}
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav:hover,#all .nf-mega-panel .nf-sv-mega-arrow.nf-sv-mega-arrow.nf-sv-mega-arrow:hover{color:#20C9A6 !important}
#all .nf-lay-gslider .nf-lay-gnav svg,#all .nf-mega-panel .nf-sv-mega-arrow svg{stroke:currentColor}
/* ==== ENDE PFEIL-HOVER ==== */
/* ==== NF-SV24-KARTE-FEST: Die Karte des AKTIVEN Punkts steht fest (::before am is-current-Link, gleiche Optik wie der Ink); der bewegliche Ink zeigt nur den ueberfahrenen Punkt und ist unsichtbar, solange er beim aktiven Punkt parkt (is-park). ==== */
#all .nf-mega-bar .nf-mega-link.mb_name.is-current::before{content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:-14px;background:#EEEFEC;border-radius:10px 10px 0 0;z-index:-1;display:block !important}
#all .nf-mega-bar .nf-mega-item > a.nf-mega-link.mb_name.is-current.is-current,#all .nf-mega-bar .nf-mega-item > a.nf-mega-link.mb_name.is-current.is-current:hover{color:#2F2E33 !important}
#all .nf-mega-bar .nf-mega-ink.is-park{opacity:0 !important}
/* ==== ENDE KARTE-FEST ==== */
/* ==== NF-SV24-FLAT-ALLE: Hero, Teaser und Deals-Banner flach in den Kachelfarben (dunkel / hellgrau / tuerkis, Editor-Felder) – keine Bilder, keine Verlaeufe; Rahmen-Knoepfe in Textfarbe. ==== */
#all .nf-sv-flat::before{display:none !important}
#all .nf-sv-flat .nf-lay-btn.nf-lay-btn--outline{border-color:currentColor;color:inherit;background:transparent}
#all .nf-sv-flat .nf-lay-btn.nf-lay-btn--outline:hover{border-color:currentColor;color:inherit;background:rgba(0,0,0,.06)}
#all .nf-sv-flat .nf-lay-btn.nf-lay-btn--link{color:inherit}
/* ==== ENDE FLAT-ALLE ==== */
/* ==== NF-SV24-MEGA-RAD: Ausklapp-Menue laesst sich scrollen (Trackpad/Wischen nativ, Mausrad -> waagerecht per JS-Block MEGA-RAD), Leiste bleibt unsichtbar. ==== */
@media (min-width:0px) /* 05.09.: gilt auch mobil */{
#all .nf-mega-panel .nf-mn-subs{overflow-x:auto !important;overflow-y:hidden !important;scrollbar-width:none !important;-ms-overflow-style:none !important;overscroll-behavior-x:contain}
#all .nf-mega-panel .nf-mn-subs::-webkit-scrollbar{display:none !important;width:0;height:0}
}
/* ==== ENDE MEGA-RAD ==== */
/* ==== NF-SV24-BLINK: Nach dem SPA-Klick rendert der Kern den Kopf neu; der aktive Menuepunkt stand fuer einen Frame weiss auf der grauen Karte (Farbe kam erst per JS) = "blinkt einmal". Farbe jetzt rein per CSS mit Spezifitaet ueber der Farb-Engine, keine Uebergaenge. is-inpath: auf Unterseiten parkt der Kern die Karte unter dem Pfad-Punkt. ==== */
#all .nf-mega-bar .nf-mega-item > a.nf-mega-link.mb_name.is-current.is-current.is-current.is-current,
#all .nf-mega-bar .nf-mega-item > a.nf-mega-link.mb_name.is-current.is-current.is-current.is-current:hover,
#all .nf-mega-bar .nf-mega-item > a.nf-mega-link.mb_name.is-inpath.is-inpath.is-inpath.is-inpath,
#all .nf-mega-bar .nf-mega-item > a.nf-mega-link.mb_name.is-inpath.is-inpath.is-inpath.is-inpath:hover,
#all .nf-mega-bar .nf-mega-item.is-karte > a.nf-mega-link.mb_name.mb_name.mb_name.mb_name,
#all .nf-mega-bar .nf-mega-item.is-karte > a.nf-mega-link.mb_name.mb_name.mb_name.mb_name:hover{color:#2F2E33 !important;transition:none !important}
#all .nf-mega-bar .nf-mega-link.mb_name{transition:none !important}
/* ==== ENDE BLINK ==== */
/* ==== NF-SV24-MEGA-LINIEN: Trennlinien zwischen den Gruppen sind der border-left der Gruppen und so hoch wie die Spur. Bei kurzen Menues (Teamsport: 1 Link je Gruppe) war die Linie nur 35px. Spur bekommt die Hoehe des laengsten Menues (Schuhe 238px), Gruppen strecken sich mit. ==== */
@media (min-width:0px) /* 05.09.: gilt auch mobil */{
#all .nf-mega-panel .nf-mn-subs{min-height:238px;align-items:stretch}
#all .nf-mega-panel .nf-mn-subs > .nf-mn-grp{align-self:stretch}
}
/* ==== ENDE MEGA-LINIEN ==== */
/* ==== NF-SV24-MEGA-OBEN: Bei fester Rahmenhoehe (380px) zentrierte der Kern den Inhalt senkrecht (Spalten = flex column, justify-content:center; kein Editor-Feld dafuer, valign wirkt nur auf die Spalte in der Zeile). Inhalt sitzt jetzt oben an. ==== */
@media (min-width:0px) /* 05.09.: gilt auch mobil */{
#all .nf-mega-panel [data-lay-col="cmegaframe"],#all .nf-mega-panel [data-lay-col="cmegainner"],#all .nf-mega-panel [data-lay-col="cmegasubs"]{justify-content:flex-start !important}
}
/* ==== ENDE MEGA-OBEN ==== */
/* ==== NF-SV24-MOBIL-CARET: Ausklapp-Symbol (Caret) im Menue unterhalb Desktop ausgeblendet; Hero/Teaser/Deals ohne Verlaufs-Hintergrundbild (flach). ==== */
@media (max-width:1023px){
#all .nf-mega-bar .nf-mega-caret{display:none !important}
}
#all .nf-sv-flat{background-image:none !important}
/* ==== ENDE MOBIL-CARET ==== */
/* ==== NF-SV24-LEGAL: Rechtliches-Zeile im Fuss (Impressum, AGB, Datenschutz, Widerruf, Vertrag widerrufen) immer sichtbar, auch auf dem Handy (dort liegen die Fuss-Spalten im Akkordeon). Links nebeneinander, umbrechend. ==== */
#all .nf-sv-legal{display:flex !important;flex-wrap:wrap;gap:6px 24px;align-items:center}
#all .nf-sv-legal .nf-lay-el{margin:0 !important;width:auto !important}
/* ==== ENDE LEGAL ==== */
/* ==== NF-SV24-CATCARD-INNEN: Kategorie-Kacheln ueberall (auch Startseiten-Slider "Entdecke alle Kategorien") wie im Listing: Name IN der farbigen Flaeche (weiss, auf hellgrau dunkel). Vorher stand der Name unter der Flaeche und war weiss auf weiss. Listing (nf-sv-subcats) behaelt seine eigenen Regeln. ==== */
#all .nf-lay-catcard:not(.nf-sv-subcats .nf-lay-catcard){position:relative}
#all .nf-lay-catcard:not(.nf-sv-subcats .nf-lay-catcard) .listing-name{position:absolute;left:18px;right:18px;bottom:16px;padding:0;color:#FFFFFF !important;font-size:16px}
#all .nf-lay-catcard:not(.nf-sv-subcats .nf-lay-catcard):nth-child(3n+2) .listing-name{color:#2F2E33 !important}
/* ==== ENDE CATCARD-INNEN ==== */
/* ==== NF-SV24-MEGA-MOBIL (05.09. v3): Unter 1024px verhaelt sich das Mega-Menue wie am Desktop (gleiches Panel, gleicher Slider, Karteikarte). Hier nur noch: Menue-Spalte pt 8 / pb 0, Punkte 20px Abstand, Ink (Hover-Karte) aus – die Karte beim Tipp kommt per CSS ueber is-open (siehe MEGA-MOBIL-KARTE). ==== */
@media (max-width:1023px){
#all .nf-mega-bar .nf-mega-ink{display:none !important}
#all .nf-mega-link.mb_name{margin-right:20px !important}
#all [data-lay-col="cmsqj3hwn3"]{padding-top:8px !important;padding-bottom:0 !important}
}
/* ==== ENDE MEGA-MOBIL ==== */
/* ==== NF-SV24-MOBIL: Handy-Feinschliff (Startseite). Kein Handy-Slot: die Slots waren veraltet und sind geleert, es gelten die Desktop-Reihen plus diese Media-Queries. Massliste vom 04.09. (Mess-Agent). ==== */
@media (max-width:767px){
#all .nf-sv-topbar .nf-lay-el,#all .nf-sv-topbar span{line-height:18px !important}
#all .nf-sv-hero{padding:40px 24px !important}
#all .nf-sv-hero .heading h1{font-size:44px !important;line-height:1.08 !important}
#all .nf-sv-hero *:has(> .nf-lay-btn){display:block !important;width:100% !important;margin-right:0 !important}
#all .nf-sv-hero .nf-lay-btn{display:flex !important;width:100%;justify-content:center;align-items:center;box-sizing:border-box;min-height:48px;padding-top:0 !important;padding-bottom:0 !important}
#all .nf-sv-tile--flat > .nf-lay-el:first-child,#all .nf-sv-teaser > .nf-lay-el:first-child{margin-top:0 !important}
#all .nf-sv-tile--flat,#all .nf-sv-teaser{aspect-ratio:auto !important;min-height:0 !important;padding:28px 24px !important}
#all .nf-lay-row:has(> .nf-sv-tile--flat),#all .nf-lay-row:has(> .nf-sv-teaser){row-gap:20px !important} /* Luecke gestapelter Boxen = Seitenrand 20px (Wunsch 04.09.) */
#all .nf-sv-deals{padding:40px 28px !important}
#all .nf-sv-deals .heading h2{font-size:40px !important;line-height:1.05 !important}
#all .nf-sv-deals .nf-lay-btn{white-space:nowrap}
#all .heading h2{font-size:30px !important;line-height:1.1 !important}
#all .nf-sv-usp{padding:16px 20px !important}
#all .nf-nl-form{flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important}
#all .nf-nl-form .nf-nl-feld{width:100% !important;flex:1 1 auto !important;box-sizing:border-box}
#all .nf-nl-form .nf-nl-knopf{width:100% !important;justify-content:center}
#all footer .nf-facc{padding:14px 0 !important;border-bottom:1px solid #45444B !important;border-radius:0}
#all footer .nf-facc > .nf-lay-el.heading{margin:0 !important;padding:0 !important}
#all .nf-lay-col:not(:has(*))[style*="height:64px"],#all .nf-lay-col:not(:has(*))[style*="height:56px"],#all .nf-lay-col:not(:has(*))[style*="height:48px"]{height:40px !important}
}
/* ==== ENDE MOBIL ==== */
/* ==== NF-SV24-KARTE-VERLAUF: Karteikarte oben weiss, unten das Grau des Balkens darunter (#EEEFEC). Gilt fuer die feste Karte (is-current::before) und die Hover-Karte (Ink). ==== */
@media (min-width:1024px){
#all .nf-mega-bar .nf-mega-ink{background:linear-gradient(180deg,#FFFFFF 0%,#EEEFEC 100%) !important}
#all .nf-mega-bar .nf-mega-link.mb_name.is-current::before{background:linear-gradient(180deg,#FFFFFF 0%,#EEEFEC 100%) !important}
}
/* ==== ENDE KARTE-VERLAUF ==== */


/* ==== NF-SV24-TOPBAR-WECHSEL: Versandbanner mobil EINE Zeile; die vier Vorteile liegen uebereinander und wechseln per JS-Block TOPBAR-WECHSEL (Einblenden). Desktop unveraendert. ==== */
@media (max-width:767px){
#all .nf-sv-topbar .nf-lay-el > div{position:relative;height:20px;overflow:hidden;text-align:center}
#all .nf-sv-topbar .nf-lay-el > div > span{display:block !important;position:absolute;left:0;right:0;top:0;line-height:20px !important;opacity:0;transition:opacity .45s ease;margin:0 !important;white-space:nowrap}
#all .nf-sv-topbar .nf-lay-el > div > span.is-on{opacity:1}
#all .nf-sv-topbar .nf-lay-el > div > span:first-child:not(.is-on):not(.is-off){opacity:1}
}
/* ==== ENDE TOPBAR-WECHSEL ==== */
/* ==== NF-SV24-GNAV-TOUCH: Slider-Laschen auf Touch-Geraeten sicher tippbar (kein Drag-Start, kein Tap-Highlight, ueber der Spur). ==== */
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav{touch-action:manipulation !important;-webkit-tap-highlight-color:transparent;z-index:6 !important;pointer-events:auto !important;cursor:pointer}
/* ==== ENDE GNAV-TOUCH ==== */
/* ==== NF-SV24-NL-IOS: iOS-Safari malt input[type=email] mit appearance:auto IMMER weiss – Text/Platzhalter/Rahmen sind weiss => "weiss auf weiss" im Newsletter (nur iPhone, in Chrome transparent). Native Optik aus, Farben fest, Autofill-Gelb ueberdeckt. ==== */
#all .nf-sv-nlband .nf-nl-feld,#all .nf-sv-nl-form .nf-nl-feld,#all .nf-nl-form .nf-nl-feld{-webkit-appearance:none !important;appearance:none !important;background-color:transparent !important;background-image:none !important;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;caret-color:#FFFFFF;border:1.5px solid #FFFFFF !important;border-radius:999px !important;box-shadow:none !important;outline:none}
#all .nf-nl-form .nf-nl-feld::placeholder{color:rgba(255,255,255,.8) !important;-webkit-text-fill-color:rgba(255,255,255,.8) !important;opacity:1}
#all .nf-nl-form .nf-nl-feld:-webkit-autofill,#all .nf-nl-form .nf-nl-feld:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #20C9A6 inset !important;-webkit-text-fill-color:#FFFFFF !important;caret-color:#FFFFFF}
#all .nf-nl-form .nf-nl-knopf{-webkit-appearance:none !important;appearance:none !important}
/* ==== ENDE NL-IOS ==== */
/* ==== NF-SV24-MEGA-MOBIL-KARTE: Unter 1024px bleibt die feste Karteikarte des aktiven Punktes (is-current::before, Text dunkel per BLINK) sichtbar; sie endet an der Leisten-Unterkante und geht in den grauen Streifen (rsvgrau, jetzt auch im Handy-Stand) ueber. Kern-Pfeile der Leiste als dunkle Laschen links/rechts ueber volle Hoehe, Leiste innen 34px Luft. ==== */
@media (max-width:1023px){
#all .nf-mega-bar .nf-mega-link.mb_name.is-current::before{display:block !important;bottom:0 !important;left:-12px;right:-12px}
#all .nf-mega-bar{padding:0 34px !important;scroll-padding:0 34px}
#all .nf-mega-arrow,#all .nf-mega.is-scroll .nf-mega-arrow{display:flex !important;position:absolute;top:0 !important;bottom:0;height:auto !important;width:34px !important;transform:none !important;border-radius:0 !important;background:#2F2E33 !important;color:#FFFFFF !important;align-items:center;justify-content:center;z-index:61;opacity:1;box-shadow:none}
#all .nf-mega-arrow.nf-mega-aprev{left:0;border-right:1px solid rgba(255,255,255,.12)}
#all .nf-mega-arrow.nf-mega-anext{right:0;border-left:1px solid rgba(255,255,255,.12)}
#all .nf-mega-arrow[disabled]{opacity:.35 !important;pointer-events:none}
#all .nf-mega-arrow svg{width:20px !important;height:20px !important}
#all .nf-mega::after{display:none}
#all [data-nf-lay-region="header"] .nf-region-frame{padding-left:0 !important;padding-right:0 !important}
#all [data-lay-col="cmsqj3hwn3"]{border-width:0 !important}
#all .nf-mega-bar .nf-mega-item.is-open > a.nf-mega-link.mb_name::before{content:"";position:absolute;left:-12px;right:-12px;top:0;bottom:0;background:linear-gradient(180deg,#FFFFFF 0%,#EEEFEC 100%);border-radius:10px 10px 0 0;z-index:-1;display:block}
#all .nf-mega-bar .nf-mega-item.is-open > a.nf-mega-link.mb_name.mb_name.mb_name.mb_name.mb_name.mb_name{color:#2F2E33 !important}
#all .nf-mega-panel{max-height:calc(100vh - 120px);overflow-y:auto}
}
/* ==== ENDE MEGA-MOBIL-KARTE ==== */
/* ==== NF-SV24-TOPBAR-HELL: Versandbanner mobil ohne dunklen Balken: Woerter dunkel (#2F2E33) auf Weiss, ohne Linie (05.09. Korrektur) (Editor-Felder im Handy-/Tablet-Stand: bgcolor leer, color #20C9A6, pt/pb 11), Wechsel bleibt. ==== */
@media (max-width:1023px){
#all .nf-sv-topbar{background:#FFFFFF !important;border:0 !important}
#all .nf-sv-topbar .nf-lay-el,#all .nf-sv-topbar span{color:#2F2E33 !important;font-weight:800;letter-spacing:.04em}
#all .nf-sv-topbar .nf-lay-el > div{height:22px}
#all .nf-sv-topbar .nf-lay-el > div > span{line-height:22px !important;font-size:13px !important}
}
/* ==== ENDE TOPBAR-HELL ==== */
/* ==== NF-SV24-KARTE-RUHIG: Auf Unterseiten hat nur der Pfad-Punkt (is-inpath) die Karte – bisher NUR ueber die Ink, die erst nach dem JS erschien (mit Einblende-Animation) = sichtbares Nachjustieren beim Laden (schlecht fuer CLS). Jetzt: feste ::before-Karte auch fuer is-inpath, und die Ink bleibt unsichtbar, bis das JS sie freigibt (is-live). ==== */
#all .nf-mega-bar .nf-mega-link.mb_name.is-inpath::before{content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:-14px;background:linear-gradient(180deg,#FFFFFF 0%,#EEEFEC 100%);border-radius:10px 10px 0 0;z-index:-1;display:block !important}
#all .nf-mega-bar .nf-mega-ink:not(.is-live){opacity:0 !important}
@media (max-width:1023px){#all .nf-mega-bar .nf-mega-link.mb_name.is-inpath::before{bottom:0 !important;left:-12px;right:-12px}}
/* ==== ENDE KARTE-RUHIG ==== */
/* ==== NF-SV24-LOGO-MOBIL: Logo auf dem Handy kleiner (40px statt 54px hoch). ==== */
@media (max-width:767px){
#all .nf-el-logo img{height:40px !important;width:auto !important;max-width:none}
}
/* ==== ENDE LOGO-MOBIL ==== */

/* ==== NF-SV24-MEGA-MOBIL-SLIDER (v2): Unter 1024px zeigt der Unterkategorien-Slider genau EINE Gruppe je Bildbreite (volle Breite, Snap je Gruppe), ohne Blenden/Streifen links und rechts; Pfeile bleiben und liegen ueber dem Gruppen-Innenabstand. ==== */
@media (max-width:1023px){
#all .nf-mega-panel .nf-sv-mega-arrow.nf-sv-mega-arrow{display:flex !important}
#all .nf-mega-panel .nf-sv-mega-wrap::before,#all .nf-mega-panel .nf-sv-mega-wrap::after{display:none !important;content:none !important}
#all .nf-mega-panel .nf-mn-subs{padding:0 !important;scroll-snap-type:x mandatory;scroll-padding:0;gap:0 !important;column-gap:0 !important}
#all .nf-mega-panel .nf-mn-grp{flex:0 0 100% !important;width:100% !important;min-width:100% !important;max-width:100% !important;scroll-snap-align:start;border-left:0 !important;border-right:0 !important;padding:4px 52px 12px 52px !important;box-sizing:border-box}
}
/* ==== ENDE MEGA-MOBIL-SLIDER ==== */
/* ==== NF-SV24-GNAV-RUND (v5, 05.09.): Slider-Pfeile unter 1360px OHNE Flaeche: schlichte Chevrons im Seitenabstand NEBEN den Karten (der 20px-Rand ist immer da), kein Hintergrund, kein Rahmen; Hover/Tipp tuerkis. ==== */
@media (max-width:1360px){
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav,#all .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav.nf-lay-gnav{width:20px !important;height:44px !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;display:flex !important;align-items:center !important;justify-content:center !important;color:#2F2E33 !important;top:50% !important;transform:translateY(-50%) !important;margin:0 !important;padding:0 !important;opacity:1}
#all .nf-lay-gslider .nf-lay-gprev.nf-lay-gprev.nf-lay-gprev{left:-20px !important;right:auto !important}
#all .nf-lay-gslider .nf-lay-gnext.nf-lay-gnext.nf-lay-gnext{right:-20px !important;left:auto !important}
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav svg{width:18px !important;height:18px !important}
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav:hover,#all .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav.nf-lay-gnav:hover{background:transparent !important;color:#20C9A6 !important}
}
/* ==== ENDE GNAV-RUND ==== */
/* ==== NF-SV24-HERO-OBEN: Mobil Abstand Kopf→Hero = Seitenrand 20px (war 32 = Inhaltsrahmen pt 12 + Inhalt mt 12 + Leerzeile 8). Inhaltsrahmen-Polster oben mobil 0. ==== */
@media (max-width:767px){
#all [data-lay-col="c_content_inner"]{padding-top:0 !important}
#all [data-lay-col="c_content_inner"]:not(:has(.nf-sv-hero)) > :first-child{margin-top:20px !important} /* alle Seiten ausser Startseite: erster Inhalt 20px unter dem Streifen (Inhalts-Wrapper hatte mt 12) */
}
/* ==== ENDE HERO-OBEN ==== */
/* ==== NF-SV24-MENGE-MOBIL: Produktseite Handy – Mengenzaehler (- 1 +) so breit wie der Bestellen-Knopf, Zahlenfeld in der Mitte dehnt sich. ==== */
@media (max-width:767px){
#all .nf-lay-el:has(> .qty-box){width:100% !important;max-width:none !important}
#all .qty-box{display:flex !important;width:100% !important;max-width:none !important}
#all .qty-box #minus,#all .qty-box #plus{flex:0 0 60px !important}
#all .qty-box #qty{flex:1 1 auto !important;text-align:center;display:flex;align-items:center;justify-content:center}
}
/* ==== ENDE MENGE-MOBIL ==== */
/* ==== NF-SV24-GALERIE-MOBIL: Produktbilder Handy – Vorschaubilder in EINER Reihe, waagerecht scrollbar mit Einrasten, schlichte Pfeile im Seitenrand und Zugbalken (JS-Block GALERIE-MOBIL), statt zweizeiligem Raster. ==== */
@media (max-width:767px){
#all .gallery-thumbs{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden;gap:10px !important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 4px 4px 4px;scroll-padding-left:4px;position:relative} /* 4px Luft oben/unten/links, damit der Rahmen des markierten Bildes in Ruhelage nicht abgeschnitten wird (nur beim Wischen darf er anschneiden) */
#all .gallery-thumbs::-webkit-scrollbar{display:none}
#all .gallery-thumbs .gallery-thumb{flex:0 0 100px !important;width:100px !important;scroll-snap-align:start;margin:0 !important}
#all .nf-sv-gal-wrap{position:relative}
#all .nf-sv-gal-arrow{position:absolute;top:50px;transform:translateY(-50%);width:20px;height:44px;border:0;background:transparent;color:#2F2E33;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:3}
#all .nf-sv-gal-arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
#all .nf-sv-gal-prev{left:-20px}#all .nf-sv-gal-next{right:-20px}
#all .nf-sv-gal-arrow[disabled]{opacity:.3}
#all .nf-sv-gal-spur{position:relative;height:4px;border-radius:0;background:#ECEDEA;margin:14px 0 2px;cursor:pointer}
#all .nf-sv-gal-griff{position:absolute;left:0;top:0;height:4px;border-radius:0;background:#9A9BA0;width:30%;transition:background .15s ease}
#all .nf-sv-gal-griff:hover{background:#2F2E33}
}
/* ==== ENDE GALERIE-MOBIL ==== */
/* ==== NF-SV24-GNAV-MOBIL: NUR unter 768px kommen die Slider-Knoepfe als Flaeche zurueck (32x48, Rahmen, innen Radius 10, aussen eckig, buendig an der Kartenkante) – der 20px-Rand ist fuer blanke Chevrons zu klein. 768–1360px bleiben die schlichten Chevrons (GNAV-RUND). ==== */
@media (max-width:767px){
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav,#all .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav.nf-lay-gnav{width:32px !important;height:48px !important;background:#FFFFFF !important;border:1px solid #D5D6D2 !important}
#all .nf-lay-gslider .nf-lay-gprev.nf-lay-gprev.nf-lay-gprev{left:0 !important;border-radius:0 10px 10px 0 !important}
#all .nf-lay-gslider .nf-lay-gnext.nf-lay-gnext.nf-lay-gnext{right:0 !important;border-radius:10px 0 0 10px !important}
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav svg{width:20px !important;height:20px !important}
#all .nf-lay-gslider .nf-lay-gnav.nf-lay-gnav.nf-lay-gnav:hover{background:#FFFFFF !important;border-color:#20C9A6 !important}
}
/* ==== ENDE GNAV-MOBIL ==== */
/* ==== NF-SV24-TOPBAR-DESKTOP: Versandbanner auch am Desktop weiss mit dunklen Woertern (Editor-Felder: bgcolor leer, color #2F2E33, pt/pb 9), Haken grau, keine Linie. ==== */
#all .nf-sv-topbar{background:#FFFFFF !important;border:0 !important}
#all .nf-sv-topbar .nf-lay-el,#all .nf-sv-topbar span{color:#2F2E33 !important;font-weight:800}
/* ==== ENDE TOPBAR-DESKTOP ==== */
/* ==== NeofireCss:ENDE ==== */