: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;

    height:100vh;

    background:#fff;

    transition:.3s ease;

    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 (gemessen: 22px Luft oben, 25px unten,
   waehrend Logo, Navigation und Icons exakt symmetrisch sassen). */
#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;}
        /* 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 */
.checkout{display:none}

/* aus cart_content.php */
.checkout{display:block}

/* 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;
}

/* 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
   (c_content_inner-Polster bzw. die erste Zeile der Seite). Nur wenn die
   Fixierung im Chrome AUS ist (data-fixed="0"), haelt der Platzhalter wie
   frueher die Kopfhoehe frei (siehe sync() in core.js). */
#core:not([data-fixed="0"]) #headercontent { height: 0 !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}
/* 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; }

/* ==== NeofireCss:START – automatisch erzeugt, nicht von Hand ändern ==== */
/* =====================================================================
   neofire Core - Storefront
   Werte aus vermessenen Vorlagen + Design-Kritik.
   REGEL FUER DIE AKZENTFARBE: Petrol erscheint NUR bei primaerem Knopf,
   aktiven Zustaenden, wichtigen Zahlen und kleinen Markierungen.
   Nicht fuer Flaechen, Ueberschriften, Symbole oder Striche.
   GRUNDSATZ: Hier steht nur, was der Designer nicht kann - Flaeche, Ecken,
   Rahmen, Polster und Breiten sind Felder an Spalte und Baustein.
   ===================================================================== */

#all {
  --nf-akzent: #0B7D8C;
  --nf-navy:   #0D1F33;
  --nf-text:   #52606D;
  --nf-linie:  #DDE3E7;
  --nf-flaeche:#F5F7F8;
}
#all.darkmode { --nf-akzent:#4ECDC4; --nf-navy:#FFFFFF; --nf-text:rgba(255,255,255,.72); --nf-linie:rgba(255,255,255,.14); --nf-flaeche:rgba(255,255,255,.04); }

/* ---------- EINFAHREN BEIM SCROLLEN ---------- */
@supports (animation-timeline: view()) {
  @keyframes nfEin       { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform:none; } }
  @keyframes nfEinLinks  { from { opacity:0; transform: translateX(-24px); } to { opacity:1; transform:none; } }
  @keyframes nfEinRechts { from { opacity:0; transform: translateX(24px); }  to { opacity:1; transform:none; } }
  #all .nf-ein { animation: nfEin .45s cubic-bezier(.16,.84,.28,1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  #all .nf-ein-links  { animation-name: nfEinLinks; }
  #all .nf-ein-rechts { animation-name: nfEinRechts; }
  #all .nf-ein-2 { animation-range: entry 0% cover 38%; }
  #all .nf-ein-3 { animation-range: entry 0% cover 46%; }
  #all .nf-ein-4 { animation-range: entry 0% cover 54%; }
}
@media (prefers-reduced-motion: reduce) { #all [class*="nf-ein"] { animation: none !important; } }

/* ---------- DREI EBENEN, MEHR NICHT ---------- */
#all .nf-h1 > :is(h1,h2,h3,h4) { font-size: clamp(34px, 4.4vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--nf-navy); margin: 0; }
#all .nf-h2 > :is(h1,h2,h3,h4) { font-size: clamp(28px, 3.4vw, 48px); font-weight: 600; line-height: 1.1;  letter-spacing: -.02em; color: var(--nf-navy); margin: 0; max-width: 18ch; }
#all .nf-mitte .nf-h2 > :is(h1,h2,h3,h4) { max-width: none; }
#all .nf-kt > :is(h1,h2,h3,h4) { font-size: 26px; font-weight: 600; line-height: 1.22; letter-spacing: -.01em; color: var(--nf-navy); margin: 0; }
#all .nf-lead { font-size: 18px; line-height: 1.55; color: var(--nf-text); max-width: 640px; }
#all .nf-mitte .nf-lead { margin-left: auto; margin-right: auto; }
#all .nf-strich .nf-lay-el { font-size: 16px; line-height: 1.6; color: var(--nf-text); max-width: 62ch; }

/* Auszeichnung: neutral, NICHT in der Akzentfarbe. */
#all .nf-augen { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nf-text); }

/* Zahlen duerfen den Akzent tragen. */
#all .nf-zahl { font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--nf-akzent); }
#all .nf-zahl-text { font-size: 15px; color: var(--nf-text); }

/* ---------- STRICH STATT KASTEN ----------
   Neutral, nicht dekorativ eingefaerbt. */
#all .nf-strich { border-top: 1px solid var(--nf-linie); }

/* ---------- FARBIGES BAND ---------- */
#all .nf-band :is(h1,h2,h3,h4) { color: #fff !important; }
#all .nf-band .nf-lead, #all .nf-band .nf-lay-el { color: rgba(255,255,255,.78); }
#all .nf-band .nf-augen { color: rgba(255,255,255,.62); }

/* ---------- BAND ÜBER DIE GANZE BREITE ----------
   NICHT mehr ueber 50vw-Minusraender: 100vw zaehlt die Scrollleiste mit,
   das Band ragte einseitig heraus und der Inhalt stand nicht mehr mittig
   (auf Windows um die halbe Scrollleistenbreite). Stattdessen bleibt die
   Spalte im Raster und der Hintergrund laeuft als Schatten beidseitig
   hinaus, vertikal auf Elementhoehe beschnitten. */
#all .nf-voll { border-radius: 0 !important; clip-path: inset(0 -100vmax); position: relative; isolation: isolate; }
/* Die Flaeche ERBT die Hintergrundfarbe der Spalte - einstellbar im EDITOR (Spalte -> Style -> Hintergrundfarbe). */
#all .nf-voll::before { content:""; position:absolute; top:0; bottom:0; left:-100vmax; right:-100vmax; background:inherit; z-index:-1; }
#all .nf-voll-hell   { background: var(--nf-flaeche); } /* Rueckfall, wenn im Editor keine Farbe gesetzt ist */
#all .nf-voll-dunkel { background: var(--nf-navy); }    /* Rueckfall, wenn im Editor keine Farbe gesetzt ist */

/* Trennstrich nur ZWISCHEN Kartenreihen - ueber der ersten Reihe eines
   Abschnitts trennt er nichts und haengt sinnlos unter der Ueberschrift. */
#all .nf-erst { border-top: 0 !important; }
/* ---------- ZWEI KNÖPFE, ZWEI ROLLEN ----------
   Der Shop zeichnet 'primary' UND 'outline' schwarz gefuellt. */
#all .nf-lay-btn--primary { background: var(--nf-akzent) !important; border: 1.5px solid var(--nf-akzent) !important; color: #fff !important; }
#all .nf-lay-btn--primary:hover { filter: brightness(1.12); }
#all .nf-lay-btn--outline { background: transparent !important; border: 1.5px solid var(--nf-linie) !important; color: var(--nf-navy) !important; }
#all .nf-lay-btn--outline:hover { border-color: var(--nf-navy) !important; }
#all .nf-voll-dunkel .nf-lay-btn--outline, #all .nf-band .nf-lay-btn--outline { border-color: rgba(255,255,255,.34) !important; color: #fff !important; }
#all .nf-voll-dunkel .nf-lay-btn--outline:hover { background: rgba(255,255,255,.10) !important; border-color: #fff !important; }

/* ---------- ZEILENFLUSS ---------- */
#all .nf-chip { display: inline-block !important; width: auto !important; vertical-align: middle; font-size: 15px; color: var(--nf-text); }
#all .nf-knopfzeile .nf-lay-el.button { display: inline-block !important; width: auto !important; vertical-align: middle; margin-right: 12px; }
#all .nf-knopfzeile .nf-lay-el.button:last-child { margin-right: 0; }

/* ---------- AUFZAEHLUNG ---------- */
#all .nf-liste { list-style: none; margin: 0; padding: 0; }
#all .nf-liste li { position: relative; padding: 9px 0 9px 26px; font-size: 16px; line-height: 1.55; color: var(--nf-text); }
#all .nf-liste li + li { border-top: 1px solid var(--nf-linie); }
#all .nf-liste li::before { content: ''; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--nf-akzent); }

/* ---------- ZUSTANDS-MARKER (duerfen Akzent tragen) ---------- */
#all .nf-ja, #all .nf-bald { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#all .nf-ja   { background: rgba(11,125,140,.12); color: var(--nf-akzent); }
#all .nf-bald { background: #EDF1F3; color: var(--nf-text); }

/* ---------- SCHRITT-ZIFFER: neutral ---------- */
#all .nf-schritt { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--nf-linie); color: var(--nf-navy); font-weight: 700; font-size: 15px; margin-bottom: 16px; }

/* ---------- QUELLTEXT ---------- */
#all .nf-code { display: block; background: var(--nf-navy); color: #cfd8e0; border-radius: 14px; padding: 24px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75; overflow-x: auto; white-space: pre; }

/* ---------- PRODUKTBILD ----------
   Inszeniert wie ein Produkt, nicht beschriftet wie eine Akte. */
#all .nf-bildplatz {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: var(--nf-ar, 16/9); margin: 0;
  border: 1px solid var(--nf-linie); border-radius: 14px;
  background: #fff; box-shadow: 0 24px 80px rgba(13,31,51,.12);
}
#all .nf-bildplatz-inhalt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; }
#all .nf-bildplatz-text { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #93A1AC; }
#all .nf-bildplatz-mass { display: none; }

/* ---------- GEZEICHNETE SHOP-VERWALTUNG ---------- */
#all .nfm { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.42); transform: perspective(1600px) rotateY(-5deg); }
#all .nfm-bar { display: flex; align-items: center; gap: 6px; padding: 11px 13px; background: #EDF1F5; border-bottom: 1px solid #E1E7ED; }
#all .nfm-dot { width: 9px; height: 9px; border-radius: 50%; background: #C9D3DC; }
#all .nfm-url { flex: 1; height: 14px; margin-left: 10px; border-radius: 7px; background: #fff; border: 1px solid #E1E7ED; }
#all .nfm-body { display: flex; min-height: 280px; }
#all .nfm-side { flex: 0 0 62px; background: var(--nf-navy); padding: 15px 11px; display: flex; flex-direction: column; gap: 11px; }
#all .nfm-nav { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); }
#all .nfm-nav.nfm-on { background: var(--nf-akzent); }
#all .nfm-main { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
#all .nfm-cards { display: flex; gap: 12px; }
#all .nfm-card { flex: 1; border: 1px solid #E8EDF2; border-radius: 8px; padding: 11px; }
#all .nfm-card b { display: block; font-size: 16px; font-weight: 700; color: var(--nf-navy); letter-spacing: -.01em; }
#all .nfm-card i { display: block; height: 6px; width: 60%; margin-top: 7px; border-radius: 3px; background: #EDF1F5; }
#all .nfm-chart { border: 1px solid #E8EDF2; border-radius: 8px; padding: 11px; }
#all .nfm-chart svg { display: block; width: 100%; height: 66px; }
#all .nfm-chart polyline { fill: none; stroke: var(--nf-akzent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#all .nfm-list { display: flex; flex-direction: column; gap: 9px; }
#all .nfm-row { display: flex; align-items: center; gap: 9px; }
#all .nfm-th { width: 24px; height: 24px; border-radius: 6px; background: #EDF1F5; flex: none; }
#all .nfm-l { height: 7px; border-radius: 4px; background: #E3E9EE; }
#all .nfm-l2 { background: #EDF1F5; }
#all .nfm-tag { margin-left: auto; width: 36px; height: 12px; border-radius: 6px; background: rgba(11,125,140,.16); flex: none; }
#all .nfm-tag.warte { background: rgba(234,179,8,.22); }
@media (max-width: 900px) { #all .nfm { transform: none; } }

/* ---------- AUSRICHTUNG ---------- */
#all .nf-mitte, #all .nf-schluss { text-align: center; }
#all .nf-hero .nf-augen { color: rgba(255,255,255,.62); }
#all .nf-hero .nf-h1 > :is(h1,h2,h3,h4) { color: #fff; }
#all .nf-hero .nf-lead { color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.45; max-width: 620px; }


/* ---------- OBERFLAECHEN-AUSSCHNITTE ----------
   Echte Ansichten als Markup nachgebaut. */
#all .nfp { background:#fff; border:1px solid var(--nf-linie); border-radius:14px; padding:20px; box-shadow:0 24px 80px rgba(13,31,51,.12); font-size:14px; color:var(--nf-navy); }
#all .nfp-kopf { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
#all .nfp-titel { font-weight:700; font-size:15px; }
#all .nfp-pill { font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:#EDF1F3; color:var(--nf-text); }
#all .nfp-pill.nfp-ok { background:rgba(11,125,140,.12); color:var(--nf-akzent); }
#all .nfp-kal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:16px; }
#all .nfk { display:block; aspect-ratio:1; border-radius:6px; background:#F1F5F7; }
#all .nfk.aus { background:#F8FAFB; }
#all .nfk.aktiv { background:var(--nf-akzent); }
#all .nfp-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
#all .nfb-slot { display:block; text-align:center; padding:9px 0; border-radius:8px; border:1px solid var(--nf-linie); font-size:13px; font-weight:600; }
#all .nfb-slot.weg { color:#B6C0C9; border-color:#EDF1F3; text-decoration:line-through; }
#all .nfp-zeile { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
#all .nfp-lab { width:34px; font-size:12px; color:var(--nf-text); }
#all .nfp-feld { flex:1; padding:9px 12px; border:1px solid var(--nf-linie); border-radius:8px; font-size:13px; font-weight:600; }
#all .nfp-balken { position:relative; height:8px; border-radius:4px; background:#F1F5F7; margin:14px 0 16px; }
#all .nfp-balken span { position:absolute; top:0; height:8px; border-radius:4px; background:var(--nf-akzent); }
#all .nfp-liste { border-top:1px solid var(--nf-linie); }
#all .nfp-li { display:flex; justify-content:space-between; padding:9px 0; font-size:13px; color:var(--nf-text); border-bottom:1px solid var(--nf-linie); }
#all .nfp-li b { color:var(--nf-navy); font-variant-numeric:tabular-nums; }
#all .nfp-li.nfp-summe { border-bottom:0; font-weight:700; color:var(--nf-navy); }
#all .nfp-tab { border-top:1px solid var(--nf-linie); margin-bottom:14px; }
#all .nfp-tr { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--nf-linie); font-size:13px; }
#all .nfp-av { width:22px; height:22px; border-radius:50%; background:#EDF1F3; flex:none; }
#all .nfp-nm { flex:1; font-weight:600; }
#all .nfp-um, #all .nfp-pr { font-variant-numeric:tabular-nums; color:var(--nf-text); }
#all .nfp-pr { font-weight:700; color:var(--nf-navy); }
#all .nfp-st { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; background:rgba(11,125,140,.12); color:var(--nf-akzent); }
#all .nfp-st.offen { background:#EDF1F3; color:var(--nf-text); }
#all .nfp-fuss { display:flex; align-items:center; justify-content:space-between; }
#all .nfp-hint { font-size:12px; color:var(--nf-text); }
#all .nfp-btn { font-size:12px; font-weight:700; padding:7px 14px; border-radius:8px; background:var(--nf-akzent); color:#fff; }


/* ---------- AUFKLAPPBARE FRAGEN ----------
   Bewegung ohne JavaScript: <details> mit weicher Hoehenanimation ueber
   interpolate-size. Kann der Browser das nicht, klappt es hart auf -
   der Inhalt bleibt in jedem Fall erreichbar. */
@supports (interpolate-size: allow-keywords) {
  #all .nf-faq { interpolate-size: allow-keywords; }
  #all .nf-fq::details-content {
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size .32s cubic-bezier(.2,.7,.2,1), opacity .26s ease, content-visibility .32s allow-discrete;
  }
  #all .nf-fq[open]::details-content { block-size: auto; opacity: 1; }
}
#all .nf-faq { max-width: 820px; margin: 0 auto; }
#all .nf-fq { border-bottom: 1px solid var(--nf-linie); }
#all .nf-fq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--nf-navy);
  transition: color .18s ease;
}
#all .nf-fq summary::-webkit-details-marker { display: none; }
/* der Shop haengt an jedes summary ein "\203A" - hier nicht */
#all .nf-fq summary::before { content: none !important; display: none !important; }
#all .nf-fq summary:hover { color: var(--nf-akzent); }
/* Plus, das sich beim Oeffnen zum Minus dreht. */
#all .nf-fq-x { position: relative; flex: none; width: 22px; height: 22px; }
#all .nf-fq-x::before, #all .nf-fq-x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 2px; margin: -1px 0 0 -7.5px; border-radius: 1px;
  background: var(--nf-navy); transition: transform .3s cubic-bezier(.2,.7,.2,1), background .18s ease;
}
#all .nf-fq-x::after { transform: rotate(90deg); }
#all .nf-fq[open] .nf-fq-x::after { transform: rotate(0deg); }
#all .nf-fq[open] .nf-fq-x::before, #all .nf-fq[open] .nf-fq-x::after { background: var(--nf-akzent); }
#all .nf-fq-a { padding: 2px 44px 26px 0; max-width: 68ch; }
#all .nf-fq-a p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--nf-text); }
@media (prefers-reduced-motion: reduce) {
  #all .nf-fq::details-content { transition: none; }
  #all .nf-fq-x::before, #all .nf-fq-x::after { transition: none; }
}


/* ---------- VERTRAUENSKARTE IM ABSCHLUSS ---------- */
#all .nf-vertrauen { background:#fff; border:1px solid var(--nf-linie); border-radius:16px; padding:28px; box-shadow:0 24px 80px rgba(13,31,51,.10); }
#all .nf-vertrauen ul { list-style:none; margin:0 0 20px; padding:0; }
#all .nf-vertrauen li { position:relative; padding:11px 0 11px 32px; font-size:16px; line-height:1.5; color:var(--nf-navy); border-bottom:1px solid var(--nf-linie); }
#all .nf-vertrauen li:last-child { border-bottom:0; }
#all .nf-vertrauen li::before { content:''; position:absolute; left:2px; top:16px; width:16px; height:9px; border-left:2px solid var(--nf-akzent); border-bottom:2px solid var(--nf-akzent); transform:rotate(-45deg); }
#all .nf-vertrauen-fuss { display:block; font-size:13px; color:var(--nf-text); }


/* ---------- TARIFKARTE ---------- */
#all .nf-preis { background:#fff; border:1px solid var(--nf-linie); border-radius:18px; padding:32px; box-shadow:0 24px 80px rgba(13,31,51,.10); }
#all .nf-preis-kopf { padding-bottom:24px; border-bottom:1px solid var(--nf-linie); margin-bottom:8px; }
#all .nf-preis-name { display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--nf-text); margin-bottom:14px; }
#all .nf-preis-zahl { display:flex; align-items:baseline; gap:10px; }
#all .nf-preis-zahl b { font-size:48px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--nf-navy); font-variant-numeric:tabular-nums; }
#all .nf-preis-zahl span { font-size:16px; color:var(--nf-text); }
#all .nf-preis-hint { display:block; margin-top:10px; font-size:13px; color:var(--nf-text); }
#all .nf-preis-liste { list-style:none; margin:0; padding:0; }
#all .nf-preis-liste li { position:relative; padding:12px 0 12px 30px; font-size:16px; line-height:1.5; color:var(--nf-navy); border-bottom:1px solid var(--nf-linie); }
#all .nf-preis-liste li:last-child { border-bottom:0; }
#all .nf-preis-liste li::before { content:''; position:absolute; left:1px; top:17px; width:15px; height:8px; border-left:2px solid var(--nf-akzent); border-bottom:2px solid var(--nf-akzent); transform:rotate(-45deg); }

/* ---- TEMPO-LEISTE (Punkt 4: schnelle Leistungszeile statt Textblock) ---- */
#all .nf-tempo .nf-chip { margin:7px 0; font-size:15px; font-weight:500; color:var(--nf-navy); }
#all .nf-tempo .nf-chip > * { display:inline; }
/* Punkt haengt am Wort davor, damit er beim Umbruch nicht die naechste Zeile anfuehrt */
#all .nf-tempo .nf-chip:has(+ .nf-chip)::after { content:'\00B7'; display:inline-block; margin:0 14px; font-weight:400; color:#B7C0C7; }
/* ohne :has() bleibt die Zeile durch Abstaende lesbar */
@supports not selector(:has(+ *)) { #all .nf-tempo .nf-chip { margin:7px 13px; } }
#all .nf-tempo-satz { margin-top:16px; font-size:15px; color:var(--nf-grau); }
@media (max-width:720px){ #all .nf-tempo .nf-chip::after { display:none !important; } #all .nf-tempo .nf-chip { margin:6px 11px; } }
/* ---- SCHNITTSTELLEN: Ablauf statt Doku ---- */
#all .nf-flow { display:flex; align-items:stretch; justify-content:center; gap:0; max-width:720px; margin:0 auto; text-align:left; }
#all .nf-flow-b { flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--nf-linie); border-radius:14px; padding:20px 18px; display:flex; flex-direction:column; gap:5px; }
#all .nf-flow-m { border-color:var(--nf-akzent); box-shadow:0 6px 26px rgba(13,31,51,.07); }
#all .nf-flow-k { font-size:15px; font-weight:600; color:var(--nf-navy); line-height:1.3; }
#all .nf-flow-m .nf-flow-k { color:var(--nf-akzent); }
#all .nf-flow-s { font-size:13px; color:var(--nf-grau); line-height:1.4; }
#all .nf-flow-p { flex:0 0 34px; position:relative; align-self:center; height:1px; background:var(--nf-linie); }
#all .nf-flow-p::after { content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid var(--nf-linie); border-right:1px solid var(--nf-linie); transform:rotate(45deg); }
#all .nf-stat { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:34px; }
#all .nf-stat-c { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--nf-navy); }
#all .nf-stat-c b { font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--nf-grau); border:1px solid var(--nf-linie); border-radius:999px; padding:3px 10px; }
#all .nf-stat-ja b { color:var(--nf-akzent); border-color:var(--nf-akzent); }
@media (max-width:780px){ #all .nf-flow { flex-direction:column; gap:14px; } #all .nf-flow-p { width:1px; height:22px; align-self:center; flex:0 0 22px; } #all .nf-flow-p::after { right:-3px; top:auto; bottom:0; transform:rotate(135deg); } }
/* ---- EINBINDUNG: Adresse als Merkmal der Karte ---- */
#all .nf-lay-el.text.nf-wo-url { display:inline-block !important; width:auto !important; }
#all .nf-wo-url { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:var(--nf-grau); background:#F5F7F8; border:1px solid var(--nf-linie); border-radius:8px; padding:6px 11px; }
/* ---- BERATUNG: was danach passiert ---- */
#all .nf-danach { max-width:430px; font-size:14px; line-height:1.55; color:var(--nf-grau); }
/* ---- DESIGNER-MOCKUP: WYSIWYG statt Behauptung ---- */
#all .nfd { max-width:1080px; margin:0 auto; background:#fff; border:1px solid var(--nf-linie); border-radius:18px; box-shadow:0 24px 80px rgba(13,31,51,.12); overflow:hidden; text-align:left; }
#all .nfd-top { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--nf-linie); background:#FAFBFC; }
#all .nfd-dot { width:9px; height:9px; border-radius:50%; background:#DDE3E7; }
#all .nfd-titel { margin-left:8px; font-size:13px; color:var(--nf-grau); }
#all .nfd-geraete { margin-left:auto; display:inline-flex; gap:4px; }
#all .nfd-geraete b, #all .nfd-geraete i { font-style:normal; font-weight:500; font-size:12px; padding:4px 11px; border-radius:7px; color:var(--nf-grau); }
#all .nfd-geraete b { background:var(--nf-akzent); color:#fff; }
#all .nfd-body { display:grid; grid-template-columns:168px 1fr 208px; }
#all .nfd-seite { border-right:1px solid var(--nf-linie); padding:16px 14px; background:#FCFDFD; }
#all .nfd-kap { display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9AA5AE; font-weight:700; margin:14px 0 6px; }
#all .nfd-seite .nfd-kap:first-child { margin-top:0; }
#all .nfd-nav { display:block; font-size:13px; color:var(--nf-navy); padding:6px 9px; border-radius:7px; }
#all .nfd-nav-an { background:#EAF3F4; color:var(--nf-akzent); font-weight:600; }
#all .nfd-bsr { display:flex; flex-wrap:wrap; gap:5px; }
#all .nfd-bs { font-size:11.5px; color:var(--nf-navy); border:1px dashed #C9D2D8; border-radius:7px; padding:5px 8px; background:#fff; }
#all .nfd-buehne { padding:20px 18px; background:#F5F7F8; display:flex; flex-direction:column; gap:16px; }
#all .nfd-abs { position:relative; background:#fff; border:1px solid var(--nf-linie); border-radius:12px; padding:22px 20px; }
#all .nfd-marke { position:absolute; top:-8px; left:14px; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:#9AA5AE; background:#F5F7F8; padding:0 7px; }
#all .nfd-hero { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
#all .nfd-gewaehlt { position:relative; border:2px solid var(--nf-akzent); border-radius:8px; padding:5px 10px; }
#all .nfd-fahne { position:absolute; top:-11px; left:-2px; font-size:9.5px; font-weight:600; background:var(--nf-akzent); color:#fff; padding:2px 7px; border-radius:5px; white-space:nowrap; }
#all .nfd-h { display:block; font-size:26px; font-weight:700; color:var(--nf-navy); line-height:1.15; }
#all .nfd-p { font-size:13px; color:var(--nf-grau); }
#all .nfd-btn { font-size:12px; font-weight:600; background:var(--nf-navy); color:#fff; border-radius:8px; padding:9px 15px; }
#all .nfd-h2 { display:block; font-size:15px; font-weight:600; color:var(--nf-navy); margin-bottom:13px; }
#all .nfd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
#all .nfd-grid i { display:block; height:74px; border-radius:9px; background:linear-gradient(180deg,#EEF2F4,#E2E9ED); }
#all .nfd-plus { text-align:center; font-size:12px; color:#9AA5AE; border:1px dashed #C9D2D8; border-radius:10px; padding:12px; }
#all .nfd-panel { border-left:1px solid var(--nf-linie); padding:16px 14px; background:#FCFDFD; }
#all .nfd-panel-k { display:block; font-size:13px; font-weight:600; color:var(--nf-navy); padding-bottom:10px; border-bottom:1px solid var(--nf-linie); }
#all .nfd-z { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:8px 0; border-bottom:1px solid #EEF1F3; }
#all .nfd-z b { font-weight:500; color:var(--nf-grau); }
#all .nfd-z i { font-style:normal; color:var(--nf-navy); font-weight:600; }
#all .nfd-farbe { display:inline-block; width:16px; height:16px; border-radius:5px; background:var(--nf-navy); border:1px solid var(--nf-linie); }
#all .nfd-tabs { display:flex; gap:5px; margin-top:16px; }
#all .nfd-tabs b, #all .nfd-tabs i { flex:1; font-style:normal; font-weight:500; text-align:center; font-size:11px; padding:7px 0; border-radius:7px; border:1px solid var(--nf-linie); color:var(--nf-grau); }
#all .nfd-tabs b { background:var(--nf-navy); color:#fff; border-color:var(--nf-navy); }
@media (max-width:900px){ #all .nfd-body { grid-template-columns:1fr; } #all .nfd-seite { display:none; } #all .nfd-panel { border-left:0; border-top:1px solid var(--nf-linie); } }
/* ---- PREIS-FUSS ---- */
#all .nf-preis-fuss { font-size:13.5px; color:var(--nf-grau); }
/* ---- TAEGLICHE ARBEIT: vier kleine Arbeits-UIs ---- */
#all .nft-ui { background:#fff; border:1px solid var(--nf-linie); border-radius:12px; padding:12px 13px; display:flex; flex-direction:column; gap:7px; min-height:132px; box-shadow:0 6px 20px rgba(13,31,51,.05); }
#all .nft-kopf { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#9AA5AE; font-weight:700; padding-bottom:6px; border-bottom:1px solid #EEF1F3; }
#all .nft-z { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
#all .nft-z i { font-style:normal; color:var(--nf-navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#all .nft-z b { font-weight:600; color:var(--nf-navy); white-space:nowrap; }
#all .nft-z b.nft-ok { color:var(--nf-akzent); }
#all .nft-z b.nft-grau { font-weight:500; color:var(--nf-grau); }
#all .nft-bl { display:block; height:15px; border-radius:5px; background:#EEF2F4; }
#all .nft-bl.nft-halb { width:62%; }
#all .nft-bl.nft-an { background:#fff; border:2px solid var(--nf-akzent); height:26px; }
#all .nft-bars { display:flex; align-items:flex-end; gap:6px; height:74px; }
#all .nft-bars i { flex:1; border-radius:3px 3px 0 0; background:#DDE6EA; }
#all .nft-bars i:last-child { background:var(--nf-akzent); }
@media (max-width:720px){ #all .nft-ui { min-height:auto; } }
/* ---- ANKER: Sprungziele hinter der festen Kopfzeile ---- */
/* Landepunkt der Spruenge: Kopfleiste (81px) + Luft, damit die kleine
   Ueberschrift frei steht statt an der Leiste zu kleben. */
#all .nf-anker { display:block; height:0; scroll-margin-top:132px; }
#all .nf-lay-el:has(> .nf-anker) { height:0; margin:0; padding:0; }
/* ---- KOPFLEISTE: Produktnavigation + Beratungsknopf ---- */
/* Vorrang vor der Suchspalte, die ebenfalls waechst */
#all .nf-topnav-sp { flex:20 1 auto !important; width:auto !important; min-width:0; }
#all .nf-topnav { display:flex; align-items:center; gap:26px; white-space:nowrap; }
#all .nf-topnav a { font-size:14px; font-weight:500; color:var(--nf-navy); text-decoration:none; cursor:pointer; }
#all .nf-topnav a:hover { color:var(--nf-akzent); }
#all .nf-topnav .nf-topnav-cta { margin-left:auto; background:var(--nf-akzent); color:#fff; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border-radius:9px; font-weight:600; }
#all .nf-topnav .nf-topnav-cta:hover { background:var(--nf-navy); color:#fff; }
@media (max-width:1180px){ #all .nf-topnav { gap:18px; margin-left:22px; } #all .nf-topnav a { font-size:13px; } }
/* 780-980px: Links weg, Knopf bleibt in der Zeile */
@media (max-width:980px){ #all .nf-topnav a:not(.nf-topnav-cta) { display:none; } #all .nf-topnav { margin-left:16px; } #all .nf-topnav .nf-topnav-cta { height:36px; padding:0 15px; font-size:14px; } }
/* Unter 780px traegt die Kopfzeile schon Menue, Logo und drei Symbole.
   Ein Textknopf passt dort nicht mehr - er schob den Warenkorb aus dem Bild.
   Die Beratung steht auf dem Handy im Hero, im Preisblock und im Abschluss. */
@media (max-width:780px){ #all .nf-topnav-sp { display:none !important; } }
/* ---- SPRUNGNAVIGATION auf der Funktionsseite ---- */
#all .nf-sprung { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
#all .nf-sprung a { font-size:14px; font-weight:500; color:var(--nf-navy); text-decoration:none; cursor:pointer; border:1px solid var(--nf-linie); border-radius:999px; padding:8px 16px; background:#fff; }
#all .nf-sprung a:hover { border-color:var(--nf-akzent); color:var(--nf-akzent); }
/* ---- SUCHE AUFGEKLAPPT: Menuepunkte weichen dem Suchfeld ---- */
#all #topbar.nf-search-expanded .nf-topnav-sp { display:none !important; }
/* beim Einklappen nur unsichtbar, damit das Feld sauber zurueckfaehrt */
#all #topbar.nf-search-closing .nf-topnav-sp { visibility:hidden; }
/* ---- SCHUBLADE: weitere Funktionen hinter einem Knopf ---- */
#all .nf-schub { text-align:center; }
#all .nf-schub > summary { list-style:none; cursor:pointer; display:inline-block; }
#all .nf-schub > summary::-webkit-details-marker { display:none; }
/* der Shop setzt an jedes summary ein "\203A" davor - hier nicht */
#all .nf-schub > summary::before { content:none !important; display:none !important; }

#all .nf-schub-knopf { display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 22px; border:1px solid var(--nf-linie); border-radius:10px; background:#fff; font-size:14px; font-weight:600; color:var(--nf-navy); }
#all .nf-schub-knopf:hover { border-color:var(--nf-akzent); color:var(--nf-akzent); }
#all .nf-schub-knopf::after { content:''; width:8px; height:8px; margin-top:-4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
#all .nf-schub[open] .nf-schub-knopf::after { margin-top:4px; transform:rotate(-135deg); }
#all .nf-schub .nf-auf { display:none; }
#all .nf-schub[open] .nf-zu { display:none; }
#all .nf-schub[open] .nf-auf { display:inline; }
/* weiches Aufziehen ohne JavaScript */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  #all .nf-schub::details-content { block-size:0; overflow:hidden; opacity:0; transition:block-size .35s ease, opacity .25s ease, content-visibility .35s allow-discrete; }
  #all .nf-schub[open]::details-content { block-size:auto; opacity:1; }
}
@media (max-width:900px){ #all .nf-schub-inhalt { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ #all .nf-schub-inhalt { grid-template-columns:1fr; } }
/* ---- LISTEN MODERN: keine Trennstriche, kein Punkt, Haken statt Aufzaehlung ---- */
#all .nf-liste li, #all .nf-preis-liste li,
#all .nf-liste li + li, #all .nf-preis-liste li + li { border-top:0 !important; border-bottom:0 !important; }
#all .nf-liste li::before, #all .nf-preis-liste li::before { content:none !important; }
#all .nf-liste li, #all .nf-preis-liste li { position:relative; padding:0 0 0 30px; margin:0 0 14px; font-size:16px; line-height:1.55; color:var(--nf-text); }
#all .nf-liste li:last-child, #all .nf-preis-liste li:last-child { margin-bottom:0; }
/* Haken als eigene Ebene, damit er nicht am Text klebt */
#all .nf-liste li::after, #all .nf-preis-liste li::after { content:''; position:absolute; left:2px; top:8px; width:13px; height:7px; border-left:2px solid var(--nf-akzent); border-bottom:2px solid var(--nf-akzent); transform:rotate(-45deg); }
#all .nf-preis-liste li { font-size:16px; color:var(--nf-navy); }
/* ---- PAKETKARTEN ---- */
#all .nf-pk-preis { display:flex; align-items:baseline; gap:9px; }
#all .nf-pk-preis b { font-size:40px; font-weight:700; letter-spacing:-.02em; color:var(--nf-navy); line-height:1.1; }
#all .nf-pk-preis span { font-size:15px; color:var(--nf-grau); }
#all .nf-pk-zeile { font-size:14px; color:var(--nf-grau); }
#all .nf-paket { box-shadow:0 6px 24px rgba(13,31,51,.05); }
#all .nf-paket-an { box-shadow:0 14px 44px rgba(13,31,51,.10); }
#all .nf-paket .nf-lay-btn { width:100%; }
/* ---- SCHUBLADE GROSS: gleiche Groesse wie die Kacheln darueber, Knopf darunter ---- */
#all .nf-schub-inhalt { text-align:left; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:0; }
#all .nf-schub-gruppe { border-top:1px solid var(--nf-linie); padding-top:22px; }
#all .nf-schub-gruppe b { display:block; font-size:26px; font-weight:600; line-height:1.22; letter-spacing:-.01em; color:var(--nf-navy); margin:0 0 8px; }
#all .nf-schub-gruppe i { display:block; font-style:normal; font-size:16px; line-height:1.6; color:var(--nf-text); max-width:62ch; }
/* aufgeklappt: Knopf wandert unter den Inhalt */
#all .nf-schub[open] { display:flex; flex-direction:column-reverse; align-items:center; }
#all .nf-schub[open] > summary { margin-top:44px; }
#all .nf-schub[open]::details-content { width:100%; }
@media (max-width:900px){ #all .nf-schub-inhalt { grid-template-columns:repeat(2,1fr); gap:32px; } #all .nf-schub-gruppe b { font-size:22px; } }
@media (max-width:620px){ #all .nf-schub-inhalt { grid-template-columns:1fr; gap:26px; } }

/* ---- KERN-SCHRITTE: nummerierte Erklaerung ---- */
#all .nf-kern .nf-kern-nr { font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--nf-akzent); margin-bottom:10px; font-variant-numeric:tabular-nums; }
#all .nf-kern > .nf-lay-el { max-width:52ch; }

/* ---- VERGLEICHSTABELLE der Pakete ---- */
#all .nf-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#all .nf-verg-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
#all table.nf-verg { width:100%; min-width:640px; border-collapse:collapse; text-align:left; font-size:15px; }
#all table.nf-verg thead th { padding:0 18px 18px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nf-grau); vertical-align:bottom; text-align:center; }
#all table.nf-verg thead th.leer { text-align:left; }
#all table.nf-verg thead th span { display:block; margin-top:6px; font-size:22px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--nf-navy); }
#all table.nf-verg thead th.an span { color:var(--nf-akzent); }
#all table.nf-verg tbody th { padding:15px 18px 15px 0; font-weight:500; color:var(--nf-navy); border-top:1px solid var(--nf-linie); }
#all table.nf-verg tbody td { padding:15px 18px; text-align:center; color:var(--nf-text); border-top:1px solid var(--nf-linie); font-variant-numeric:tabular-nums; }
#all table.nf-verg tbody tr:hover th, #all table.nf-verg tbody tr:hover td { background:#F7F9FA; }
#all table.nf-verg td.an, #all table.nf-verg thead th.an { background:rgba(11,125,140,.045); }
#all table.nf-verg tbody tr:last-child td.an { border-radius:0 0 10px 10px; }
#all table.nf-verg td.ja i { display:inline-block; width:14px; height:8px; border-left:2px solid var(--nf-akzent); border-bottom:2px solid var(--nf-akzent); transform:rotate(-45deg); vertical-align:middle; margin-top:-4px; }
#all table.nf-verg td.nein i { display:inline-block; width:14px; height:2px; background:#C6CED4; vertical-align:middle; }
@media (max-width:620px){ #all table.nf-verg { font-size:14px; } #all table.nf-verg thead th span { font-size:18px; } }

/* ---- WEICHES SCROLLEN: bewusst NICHT gesetzt ----
   html{scroll-behavior:smooth} laesst den Shop bei jedem Anker-Klick die Seite
   neu laden statt zu springen (nachgemessen: mit smooth 0 -> 0 und Neuladen,
   ohne smooth 0 -> 2567). Ein gleitender Sprung braucht eine Aenderung am
   Klick-Abfang des Shops - also an JavaScript, nicht an CSS. ---- */

/* ---- STANDARD-PAKET hervorheben: steht oben heraus und ist eine Spur groesser ---- */
/* Hervorhebung des Standard-Pakets: die Abstaende (mt-26/mb-26/pt38/pb38) stehen jetzt IM EDITOR an der Paket-Spalte - hier nur noch Stapelung. */
#all .nf-paket-an { z-index:2; position:relative; }
#all .nf-paket-an .nf-pk-preis b { font-size:46px; }
#all .nf-paket-an .nf-lay-el { font-size:16px; }
@media (max-width:900px){ #all .nf-paket-an { margin-top:0; margin-bottom:0; padding-top:28px !important; padding-bottom:28px !important; }
  #all .nf-paket-an .nf-pk-preis b { font-size:40px; } }

/* ---- EINFAHREN ----
   Zeitbasiert per Beobachter (NeofireJs), NICHT mehr an die Scroll-Position
   gekoppelt: view()-Timelines wanderten nur solange man scrollt und froren
   beim Anhalten halb ein - das fuehlte sich hakelig an. Versteckt wird erst,
   wenn das JS da ist (html.nf-anim-bereit), sonst bliebe ohne JS alles leer.
   Die view()-Animation des Kerns auf .nf-ein wird stillgelegt. ---- */
#all [class*="nf-ein"] { animation: none !important; }
#all #content [data-nfein] { transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.28,1); }
#all #content [data-nfein-nr="1"] { transition-delay: .12s; }
#all #content [data-nfein-nr="2"] { transition-delay: .24s; }
#all #content [data-nfein-nr="3"] { transition-delay: .36s; }
html.nf-anim-bereit #all #content [data-nfein]:not(.nf-drin) { opacity: 0; transform: translateY(56px); }
html.nf-anim-bereit #all #content [data-nfein].nf-ein-links:not(.nf-drin) { transform: translateX(-56px); }
html.nf-anim-bereit #all #content [data-nfein].nf-ein-rechts:not(.nf-drin) { transform: translateX(56px); }
/* stand beim Laden schon im Bild: zeigen ohne Bewegung */
#all #content [data-nfein].nf-sofort { transition: none; }
@media (prefers-reduced-motion: reduce) { #all #content [data-nfein] { opacity:1 !important; transform:none !important; transition:none !important; } }




/* ---- KOPFLEISTE ----
   Die Spalten-Polster stehen im Kopf-Layout (Editor). Hier NUR das,
   was der Editor nicht kennt: das Kern-Polster am #topbar selbst
   und der Landepunkt der Anker-Spruenge. */
/* Das Kern-Polster am #topbar liegt AUSSERHALB der weiss hinterlegten
   Editor-Spalte - es war als transparenter Streifen (Loch) ueber und unter
   der Leiste sichtbar. Ganz auf 0; die Hoehe macht die Spalte im Editor. */
#all #topbar { padding-top: 0 !important; padding-bottom: 0 !important; }
#all .nf-anker { scroll-margin-top:70px !important; }

/* ---- TERMIN: schwebender Kalender (Darstellung "nur der Buchen-Knopf") ---- */
#all .nf-termin-block [data-lay-type="p_booking"] { text-align:center; }
#all .nf-termin-block .nf-bk--mini { display:inline-block; text-align:left; }
#all .nf-termin-block .nf-bk-oeffnen {
  background:var(--nf-akzent) !important; border-color:var(--nf-akzent) !important; color:#fff !important;
  border-radius:10px !important; font-weight:600; height:46px; padding:0 26px; }
#all .nf-termin-block .nf-bk-oeffnen:hover { filter:brightness(1.08); }
#all .nf-termin-block .nf-bk-oeffnen span { color:#fff !important; }
#all .nf-bk-knopf { background:var(--nf-akzent) !important; border-color:var(--nf-akzent) !important; color:#fff !important; border-radius:10px !important; font-weight:600; }
#all .nf-bk-minus, #all .nf-bk-plus { background:#fff !important; color:var(--nf-navy) !important; border:1px solid var(--nf-linie) !important; border-radius:8px !important; }

/* Einfahr-Animation: seitliches Ueberlaufen (translateX) auf schmalen Screens abschneiden */
#all { overflow-x: clip; }


/* ---- ZEILEN-SYSTEM: Content-Huelle laeuft 100 Prozent, Zeilen mittig ----
   Jede Inhalts-Zeile steht standardmaessig mittig auf 1200px (wie frueher die
   Chrome-Huelle). Traegt eine SPALTE die Klasse nf-breit (Editor: CSS Klasse),
   laeuft ihre Zeile ueber die volle Breite; die Hintergrundfarbe der Spalte
   (Editor-Feld) fuellt die ganze Bahn. Unterzeilen einer nf-breit-Spalte
   stehen wieder mittig auf 1200px. */
#all .nf-lay-col.nf-breit { border-radius: 0 !important; }
#all #content > .nf-lay-row { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
#all #content > .nf-lay-row:has(> .nf-lay-col.nf-breit) { max-width: none; padding-left: 0; padding-right: 0; }
#all .nf-lay-col.nf-breit > .nf-lay-row { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }

/* ---- HERO-HOEHE: erster Bildschirm wird gefuellt (Kopf 110px). Das
   minh-Feld im Editor verwirft calc()-Werte - darum hier. ---- */
#all .nf-hero { min-height:100dvh; display: flex; flex-direction: column; justify-content: center; }

/* KOPF-FREI: Seiten, die mit einer Vollbreit-Farbflaeche beginnen, laufen bis unter den Kopf */
#core:has(#content > .nf-lay-row:first-child > .nf-lay-col.nf-breit) #headercontent{height:0 !important;}

/* Vergleich: die hervorgehobene Standard-Spalte als abgerundete Kappe */
#all table.nf-verg thead th.an { border-radius:10px 10px 0 0; padding-top:14px; }

/* Aufklapp-Liste: mehr Luft ueber jedem Eintragstitel */
#all .nf-schub-gruppe { display:block; }
#all .nf-schub-inhalt { row-gap:28px; }
#all .nf-schub-gruppe b { display:block; margin-bottom:6px; }

/* Downloads-Seite: Versionskarte + drei Installationswege */
#all .nf-dl-karte{background:#fff;border:1px solid #E7EAEE;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;text-align:left;max-width:860px;margin:0 auto;}
#all .nf-dl-karte b{display:block;font-size:20px;margin-bottom:6px;color:var(--nf-navy);}
#all .nf-dl-karte i{display:block;font-style:normal;color:var(--nf-grau);line-height:26px;}
#all .nf-dl-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;margin:12px auto 0;max-width:1200px;padding:0 20px;box-sizing:border-box;}
#all .nf-dl-weg{background:#fff;border:1px solid #E7EAEE;padding:24px;display:flex;flex-direction:column;}
#all .nf-dl-weg b{display:block;font-size:17px;margin-bottom:8px;color:var(--nf-navy);}
#all .nf-dl-weg p{margin:0 0 16px;line-height:26px;color:var(--nf-text);flex:1;}
#all .nf-dl-knopf{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;background:#0B7D8C;color:#fff !important;font-weight:600;font-size:14px;text-decoration:none;align-self:flex-start;}
#all .nf-dl-knopf:hover{filter:brightness(1.08);}
@media(max-width:760px){#all .nf-dl-wege{grid-template-columns:1fr;}}


/* WEICHES GLEITEN zu Ankern - reine Browser-Sache, kein JavaScript.
   Respektiert die Systemeinstellung 'Bewegung reduzieren'. */
@media (prefers-reduced-motion: no-preference){ html { scroll-behavior: smooth; } }

/* Kopf-Navigation: aktueller Abschnitt (Klasse kommt aus der Mitlauf-Markierung) */
#all #header .nf-topnav a.nf-akt{color:#0B7D8C;}

/* Aufklapp-Liste: die Eintraege fahren nacheinander ein - wie die
   Bloecke der Seite beim Hereinscrollen. */
@keyframes nfSchubEin{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
#all .nf-schub[open] .nf-schub-gruppe{animation:nfSchubEin .45s cubic-bezier(.16,.84,.28,1) both;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(1){animation-delay:0.05s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(2){animation-delay:0.10s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(3){animation-delay:0.15s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(4){animation-delay:0.20s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(5){animation-delay:0.25s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(6){animation-delay:0.30s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(7){animation-delay:0.35s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(8){animation-delay:0.40s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(9){animation-delay:0.45s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(10){animation-delay:0.50s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(11){animation-delay:0.55s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(12){animation-delay:0.60s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(13){animation-delay:0.65s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(14){animation-delay:0.70s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(15){animation-delay:0.75s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(16){animation-delay:0.80s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(17){animation-delay:0.85s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(18){animation-delay:0.90s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(19){animation-delay:0.95s;}
#all .nf-schub[open] .nf-schub-gruppe:nth-child(20){animation-delay:1.00s;}
@media (prefers-reduced-motion: reduce){#all .nf-schub[open] .nf-schub-gruppe{animation:none;}}

/* abo-schalter mittig setzen */
#all .nf-lay-el:has(.nf-abo-schalter){text-align:center;}

/* preis bricht nicht um, auch nicht mit dem laengeren Jahres-Zusatz */
#all .nf-pk-preis{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
#all .nf-pk-preis b{white-space:nowrap;}
#all .nf-pk-preis span{white-space:normal;}

/* Abo-Schalter: zwei Felder, der farbige Knopf faehrt beim Klicken hin und her. */
#all .nf-abo-schalter{position:relative;display:inline-flex;padding:4px;background:#fff;border:1px solid #E7EAEE;border-radius:999px;}
#all .nf-abo-lauf{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#0B7D8C;border-radius:999px;transition:transform .28s cubic-bezier(.16,.84,.28,1);}
#all .nf-abo-schalter[data-abo-akt="jahr"] .nf-abo-lauf{transform:translateX(100%);}
#all .nf-abo-knopf{position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--nf-navy,#0D1F33);padding:10px 26px;border-radius:999px;line-height:1;min-width:130px;text-align:center;transition:color .2s;}
#all .nf-abo-knopf.is-an{color:#fff;}
#all .nf-abo-knopf:not(.is-an):hover{color:#0B7D8C;}
@media (prefers-reduced-motion: reduce){#all .nf-abo-lauf{transition:none;}}

/* Vergleichstabelle: Zahlungstakt unter dem Preis */
#all table.nf-verg thead th em.nf-verg-takt{display:block;margin-top:4px;font-style:normal;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--nf-grau,#6B7A88);}

/* navi: hover faerbt, der aktive Punkt bleibt gefaerbt */
#all #header .nf-topnav a:hover{color:#0B7D8C;}

/* schalter wirklich mittig, unabhaengig von der Huelle */
#all .nf-abo-schalter{margin-left:auto;margin-right:auto;}
#all .nf-lay-el:has(.nf-abo-schalter){text-align:center;display:block;}

/* Die geoeffnete Suche soll nicht am Logo kleben. */
#all #topbar.nf-search-expanded .core-search,
#all #topbar .core-search.open,
#all #topbar .core-search{margin-left:36px;}

/* Funktionsverzeichnis A bis Z mit Suche */
#all .nf-az-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:32px;}
#all .nf-az-suche{flex:1 1 260px;min-width:220px;height:46px;padding:0 16px;border:1px solid #E7EAEE;border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--nf-navy,#0D1F33);}
#all .nf-az-suche:focus{outline:none;border-color:#0B7D8C;}
#all .nf-az-bahn{display:flex;flex-wrap:wrap;gap:2px;}
#all .nf-az-bahn a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--nf-grau,#6B7A88);}
#all .nf-az-bahn a:hover{background:#0B7D8C;color:#fff;}
#all .nf-az-block{scroll-margin-top:120px;margin-bottom:28px;}
#all .nf-az-block h3{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.12em;color:#0B7D8C;}
#all .nf-az-block dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;}
#all .nf-az-eintrag{padding:14px 0;border-top:1px solid #E7EAEE;}
#all .nf-az-eintrag dt{font-weight:600;color:var(--nf-navy,#0D1F33);margin:0 0 4px;}
#all .nf-az-eintrag dd{margin:0;color:var(--nf-text,#4A5A68);line-height:26px;}
#all .nf-az-leer{margin-top:8px;color:var(--nf-grau,#6B7A88);}
@media(max-width:760px){#all .nf-az-block dl{grid-template-columns:1fr;}}
/* Hinweis unter der Funktionsliste der Startseite */
#all .nf-schub-mehr{grid-column:1 / -1;margin:26px 0 0;text-align:center;color:var(--nf-grau,#6B7A88);}
#all .nf-schub-mehr a{color:#0B7D8C;font-weight:600;}

/* AI-Zeichen vor der KI-Sektion */
#all .nf-ai-kreis{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:2px solid currentColor;font-size:17px;font-weight:700;letter-spacing:.06em;line-height:1;}
/* KI-Eintrag der Aufklappliste steht allein in der letzten Zeile */
#all .nf-schub-gruppe.nf-schub-voll{grid-column:1 / -1;}

/* FAQ: die offene Frage bleibt farbig, nicht nur beim Zeigen */
#all details[open] > summary, #all details[open] > summary *{color:#0B7D8C;}
#all .nf-faq details[open] > summary, #all .nf-faq details[open] > summary *{color:#0B7D8C;}
/* KI-Sektion: Zeichen links, Text rechts linksbuendig */
#all .nf-ai-kreis{margin:0;}

/* KI-Sektion: Text buendig unter der Ueberschrift, nicht auf Textbreite zentriert */
#all .nf-ki-text .nf-lead, #all .nf-ki-text p, #all .nf-ki-text .nf-lay-el{margin-left:0;margin-right:0;}


/* AI-Zeichen auf Texthoehe: die Zeile muss dafuer strecken, sonst bleibt das
   Zeichen so klein wie sein eigener Inhalt (gemessen: 44px statt 120px). */
#all .nf-lay-row:has(> .nf-ki-zeichen){align-items:stretch;}
#all .nf-ki-zeichen{align-self:stretch;display:flex;}
#all .nf-ki-zeichen > .nf-lay-el{flex:1 1 auto;display:flex;align-items:stretch;}
#all .nf-ki-zeichen .nf-ai-kreis{align-self:stretch;height:auto;width:auto;aspect-ratio:1/1;font-size:clamp(20px,2.2vw,32px);border-width:3px;}
@media(max-width:760px){#all .nf-lay-row:has(> .nf-ki-zeichen){align-items:flex-start;}#all .nf-ki-zeichen .nf-ai-kreis{height:64px;width:64px;aspect-ratio:auto;font-size:20px;}}

/* Zeichen-Kette erzwingen: Zeile strecken, Huelle voll hoch, Kreis quadratisch */
#all .nf-lay-row:has(> .nf-ki-zeichen){align-items:stretch !important;}
#all .nf-ki-zeichen{align-self:stretch !important;display:flex !important;}
#all .nf-ki-zeichen > .nf-lay-el{height:100% !important;display:flex !important;align-items:stretch !important;}
#all .nf-ki-zeichen .nf-ai-kreis{height:100% !important;width:auto !important;aspect-ratio:1/1 !important;box-sizing:border-box;}
@media(max-width:760px){#all .nf-lay-row:has(> .nf-ki-zeichen){align-items:flex-start !important;}#all .nf-ki-zeichen .nf-ai-kreis{height:64px !important;width:64px !important;}}

/* KI-Block mittig und blass: Zeichen nur angedeutet, Block als Ganzes zentriert */
#all .nf-ki-zeichen .nf-ai-kreis{color:rgba(255,255,255,.30);border-color:rgba(255,255,255,.30);}
#all .nf-lay-row:has(> .nf-ki-zeichen){justify-content:center;}

@media(max-width:760px){#all .nf-lay-row:has(> .nf-ki-zeichen){justify-content:flex-start;}}

/* Spaltenbreite auf Inhalt: sonst bleibt die rechte Spalte 10 von 12 breit und der Block sitzt links */
#all .nf-lay-row:has(> .nf-ki-zeichen){justify-content:center !important;}
#all .nf-ki-zeichen{flex:0 0 auto !important;}
#all .nf-ki-text{flex:0 1 auto !important;}

/* Zeichenspalte feste Breite: mit width:auto kollabierte sie auf 0 und der Kreis lag ueber dem Text */
#all .nf-ki-zeichen{flex:0 0 auto !important;}
#all .nf-ki-zeichen > .nf-lay-el{justify-content:center !important;}
#all .nf-ki-zeichen .nf-ai-kreis{margin:0 auto;}

/* Kreis dicker, AI groesser, beides weiterhin blass */
#all .nf-ki-zeichen .nf-ai-kreis{border-width:8px !important;font-size:clamp(34px,4.4vw,58px) !important;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.30) !important;border-color:rgba(255,255,255,.30) !important;}
@media(max-width:760px){#all .nf-ki-zeichen .nf-ai-kreis{border-width:5px !important;font-size:26px !important;}}

/* Kreis als Ganzes blass: die Schriftfarbe allein reichte nicht, die Sektion
   faerbt ihre Kinder weiss. Deshalb Deckkraft auf dem ganzen Zeichen. */
#all .nf-ki-zeichen .nf-ai-kreis{color:#fff !important;border-color:#fff !important;opacity:.28;}

/* KI-Block: Maße stehen im Editor (Spaltenbreite, Textbreite, Spaltenabstand).
   Hier bleibt nur, was der Editor nicht kennt: Streckung der Zeile, das runde
   Zeichen mit Seitenverhältnis 1:1 und die Zentrierung des Blocks. */

/* Schatten zurueckhaltend: die weichen 80px-Wolken wirkten wie eine Vorlage
   von der Stange. Flach und knapp, damit die Flaechen ruhig bleiben. */
#all #content .nfm,#all #content .nfd,#all #content .nf-vertrauen,#all #content .nf-flow-b,#all #content .nft-ui{box-shadow:0 2px 10px rgba(13,31,51,.06) !important;}
#all #content [class*="nf-s1-l132-pk"]{box-shadow:0 2px 10px rgba(13,31,51,.06) !important;}
#all #content .nfp{box-shadow:0 2px 10px rgba(13,31,51,.06) !important;}
#all #content .nf-lay-gnav{box-shadow:0 1px 4px rgba(16,24,40,.10) !important;}

/* Konto: gesperrte Felder (etwa die E-Mail bei den Zugangsdaten) grau
   hinterlegen - so sieht man, dass dort nichts zu tippen ist. */
#all .nfk-input--fest{background:#f1f3f5;color:#6b7688;cursor:not-allowed;}
#all .nfk-hint{display:block;margin-top:6px;font-size:13px;line-height:20px;color:#6b7688;}


/* ==== HERO-FILM (Startseite) ====
   Video als Hintergrund der dunklen Hero-Flaeche, Ladeanzeige davor.
   Der Hero-Text wird erst nach dem Film eingeblendet - die Zustaende
   setzt NeofireJs als data-film am .nf-hero. */
#all .nf-hero{position:relative;overflow:hidden;}
#all .hero_film{position:absolute;inset:0;z-index:0;}
#all .hero_film_video{display:block;width:100%;height:100%;object-fit:cover;}
#all .hero_film_laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#19181c;transition:opacity .45s ease;}
#all .hero_film_laden span{width:38px;height:38px;border-radius:50%;border:3px solid rgba(209,254,23,.22);border-top-color:#d1fe17;animation:hero_film_dreh .8s linear infinite;}
@keyframes hero_film_dreh{to{transform:rotate(1turn)}}
#all .nf-hero[data-film="laeuft"] .hero_film_laden,
#all .nf-hero[data-film="fertig"] .hero_film_laden{opacity:0;pointer-events:none;}

/* Bildspalte nimmt keinen Platz mehr ein, seit der Film als Hintergrund liegt.
   NICHT display:none - der Film haengt darin, und mit ausgeblendetem Elter
   waere auch er weg (war er kurzzeitig: 0x0). */
#all .nf-hero .nf-hero-bild{flex:0 0 0;width:0;min-width:0;padding:0;}
/* Hero-Text unten links UEBER dem Film. Absolut gesetzt, weil die Zeile
   sonst auf die Breite der leeren Bildspalte zusammenfaellt. */
#all .nf-hero > .nf-lay-row{position:static;}
#all .nf-hero .nf-hero-text{position:absolute;left:56px;right:56px;bottom:48px;z-index:2;width:auto;max-width:640px;padding:0;opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
#all .nf-hero[data-film="fertig"] .nf-hero-text{opacity:1;transform:none;}

/* Lautsprecher oben rechts im Film */
/* 96px: die feste Kopfleiste ist ~77px hoch - bei top:20 lag der Knopf dahinter. */
#all .hero_film_ton{position:absolute;top:96px;right:24px;z-index:3;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(25,24,28,.55);color:#fff;transition:background .2s ease,border-color .2s ease,color .2s ease;}
#all .hero_film_ton:hover{background:rgba(25,24,28,.85);border-color:#d1fe17;color:#d1fe17;}
#all .hero_film_ton:focus-visible{outline:2px solid #d1fe17;outline-offset:3px;}
#all .hero_film_ton svg{width:20px;height:20px;display:block;}
#all .hero_film_ton .ton_an{display:none;}
#all .hero_film_ton[aria-pressed="true"] .ton_aus{display:none;}
#all .hero_film_ton[aria-pressed="true"] .ton_an{display:block;}
#all .hero_film_ton[aria-pressed="true"]{color:#d1fe17;border-color:rgba(209,254,23,.55);}


/* ==== KNOPF-FARBEN ====
   Gelb #d1fe17 als Signalfarbe, Dunkelblau #19181c als Gegenstueck.
   --primary : voll gelb mit dunkelblauer Schrift (Hauptaufforderung)
   --outline : der weisse Umriss aus dem Video bleibt unveraendert,
               bekommt beim Ueberfahren nur gelbe Schrift und gelben Rand. */
#all .nf-lay-btn--primary{background:#d1fe17!important;border:1.5px solid #d1fe17!important;color:#19181c!important;}
#all .nf-lay-btn--primary:hover{background:#c2ee0a!important;border-color:#c2ee0a!important;color:#19181c!important;filter:none;}
/* Umriss auf dunklem Grund: weiss wie bisher, gelb beim Ueberfahren */
#all .nf-hero .nf-lay-btn--outline,
#all .nf-voll-dunkel .nf-lay-btn--outline,
#all .nf-band .nf-lay-btn--outline{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important;}
#all .nf-hero .nf-lay-btn--outline:hover,
#all .nf-voll-dunkel .nf-lay-btn--outline:hover,
#all .nf-band .nf-lay-btn--outline:hover{background:transparent!important;border-color:#d1fe17!important;color:#d1fe17!important;}
/* Umriss auf hellem Grund: dunkelblau, beim Ueberfahren gefuellt mit gelber Schrift */
#all .nf-lay-btn--outline{border:1.5px solid #19181c!important;color:#19181c!important;}
#all .nf-lay-btn--outline:hover{background:#19181c!important;border-color:#19181c!important;color:#d1fe17!important;}
/* Aufforderung in der Kopfleiste mitziehen */
#all .nf-topnav-cta{background:#d1fe17!important;border-color:#d1fe17!important;color:#19181c!important;}
#all .nf-topnav-cta:hover{background:#c2ee0a!important;border-color:#c2ee0a!important;color:#19181c!important;}

/* Die Hero-Regeln setzen fuer alle Knoepfe weisse Schrift und sind
   spezifischer als eine einzelne Klasse. Deshalb hier die Knopfklasse
   doppelte Klasse notiert - gleiche Staerke, steht aber spaeter und gewinnt. */
#all .nf-lay-btn.nf-lay-btn--primary{background:#d1fe17!important;border-color:#d1fe17!important;color:#19181c!important;}
#all .nf-lay-btn.nf-lay-btn--primary:hover{background:#c2ee0a!important;border-color:#c2ee0a!important;color:#19181c!important;}
#all .nf-hero .nf-lay-btn--primary{color:#19181c!important;}
#all .nf-hero .nf-lay-btn--primary:hover{color:#19181c!important;}

/* Zweitknopf: dunkelblauer Balken mit gelber Schrift. */
#all .nf-lay-btn.nf-lay-btn--outline,
#all .nf-hero .nf-lay-btn--outline,
#all .nf-voll-dunkel .nf-lay-btn--outline,
#all .nf-band .nf-lay-btn--outline{background:#19181c!important;border:1.5px solid #19181c!important;color:#d1fe17!important;}
#all .nf-lay-btn.nf-lay-btn--outline:hover,
#all .nf-hero .nf-lay-btn--outline:hover,
#all .nf-voll-dunkel .nf-lay-btn--outline:hover,
#all .nf-band .nf-lay-btn--outline:hover{background:#0f0e11!important;border-color:#0f0e11!important;color:#d1fe17!important;}

/* Der weisse Umriss aus dem Video bleibt erhalten: einfach knopf_weiss
   in das Feld "CSS Klasse" des Knopfes eintragen. */
#all .nf-lay-btn.knopf_weiss{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important;}
#all .nf-lay-btn.knopf_weiss:hover{background:transparent!important;border-color:#d1fe17!important;color:#d1fe17!important;}

/* Die Hero-Spalte hat im Editor die Textfarbe Weiss und faerbt damit
   pauschal ALLE Links darin - auch die Knoepfe:
     #all:not(.darkmode) .nf-s1-l132-c11q31u :where(a,...){color:#fff!important}
   Diese Spaltenfarbe schlaegt eine einfache Knopfklasse. Deshalb hier
   gezielt hoeher gewichtet - nur fuer Knoepfe, der uebrige Text bleibt weiss. */
#all:not(.darkmode) .nf-hero .nf-lay-btn.nf-lay-btn--primary{color:#19181c!important;}
#all:not(.darkmode) .nf-hero .nf-lay-btn.nf-lay-btn--primary:hover{color:#19181c!important;}
#all:not(.darkmode) .nf-hero .nf-lay-btn.nf-lay-btn--outline{color:#d1fe17!important;}
#all:not(.darkmode) .nf-hero .nf-lay-btn.nf-lay-btn--outline:hover{color:#d1fe17!important;}
#all:not(.darkmode) .nf-hero .nf-lay-btn.knopf_weiss{color:#fff!important;}
#all:not(.darkmode) .nf-hero .nf-lay-btn.knopf_weiss:hover{color:#d1fe17!important;}

/* Die Spaltenfarbe-Regel des Layouts endet auf :not(#cart-count) und bringt
   damit eine ZWEITE ID mit - sie liegt bei etwa (2,6,0) und schlaegt jede
   normale Knopfregel. Hier deshalb drei IDs voranstellen, damit die
   Knopffarben gewinnen. Der uebrige Hero-Text bleibt unberuehrt weiss. */
#core #all #content .nf-hero .nf-lay-btn.nf-lay-btn--primary{color:#19181c!important;}
#core #all #content .nf-hero .nf-lay-btn.nf-lay-btn--primary:hover{color:#19181c!important;}
#core #all #content .nf-hero .nf-lay-btn.nf-lay-btn--outline{color:#d1fe17!important;}
#core #all #content .nf-hero .nf-lay-btn.nf-lay-btn--outline:hover{color:#d1fe17!important;}
#core #all #content .nf-hero .nf-lay-btn.knopf_weiss{color:#fff!important;}
#core #all #content .nf-hero .nf-lay-btn.knopf_weiss:hover{color:#d1fe17!important;}

/* ==== KORREKTUR Kopf-Knopf und zweiter Hero-Knopf ====
   Kopfleiste: dunkel wie die Flaeche, weisse Schrift.
   Zweiter Hero-Knopf: wieder weisser Umriss mit weisser Schrift. */
#all .nf-topnav-cta{background:#19181c!important;border-color:#19181c!important;color:#fff!important;}
#all .nf-topnav-cta:hover{background:#0f0e11!important;border-color:#0f0e11!important;color:#d1fe17!important;}

#all .nf-hero .nf-lay-btn--outline,
#all .nf-voll-dunkel .nf-lay-btn--outline,
#all .nf-band .nf-lay-btn--outline{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important;}
#all .nf-hero .nf-lay-btn--outline:hover,
#all .nf-voll-dunkel .nf-lay-btn--outline:hover,
#all .nf-band .nf-lay-btn--outline:hover{background:transparent!important;border-color:#fff!important;color:#fff!important;}
#core #all #content .nf-hero .nf-lay-btn.nf-lay-btn--outline{color:#fff!important;}
#core #all #content .nf-hero .nf-lay-btn.nf-lay-btn--outline:hover{color:#fff!important;}

/* ==== Fortschrittsleiste im Film ====
   Gelber Balken mit weissem Strich als Griff. Erscheint, sobald die Maus
   ueber der Videoflaeche ist; ziehen verschiebt die Stelle im Film.
   Die Leiste ist bewusst 26px hoch (der sichtbare Balken nur 4-8px) -
   sonst muesste man millimetergenau treffen. */
#all .hero_film_leiste{position:absolute;left:0;right:0;bottom:0;z-index:4;height:26px;
  cursor:pointer;opacity:0;transition:opacity .25s ease;touch-action:none;}
#all .nf-hero:hover .hero_film_leiste,
#all .hero_film_leiste.zieht{opacity:1;}
#all .hero_film_leiste::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(255,255,255,.25);transition:height .15s ease;}
#all .hero_film_fortschritt{position:absolute;left:0;bottom:0;height:4px;width:0;
  background:#d1fe17;transition:height .15s ease;pointer-events:none;}
#all .hero_film_griff{position:absolute;right:-1px;bottom:-4px;width:2px;height:12px;
  background:#fff;border-radius:1px;box-shadow:0 0 4px rgba(0,0,0,.45);}
#all .hero_film_leiste:hover::before,
#all .hero_film_leiste.zieht::before,
#all .hero_film_leiste:hover .hero_film_fortschritt,
#all .hero_film_leiste.zieht .hero_film_fortschritt{height:7px;}
#all .hero_film_leiste:hover .hero_film_griff,
#all .hero_film_leiste.zieht .hero_film_griff{height:16px;bottom:-5px;width:3px;}

/* Kopf-Knopf: dezentes Graublau statt hartem Schwarz. */
#all .nf-topnav-cta{background:#5b6672!important;border-color:#5b6672!important;color:#fff!important;}
#all .nf-topnav-cta:hover{background:#4a545e!important;border-color:#4a545e!important;color:#fff!important;}

/* Leiste mit 20px Abstand ringsum statt bündig am Rand. */
#all .hero_film_leiste{left:20px!important;right:20px!important;bottom:20px!important;}

/* ==== Wortmarke vor der Ueberschrift ====
   Statt "neofire" in der Hausschrift steht dort das echte Logo als SVG.
   Die Datei ist schwarz, deshalb wird sie als Maske benutzt und mit
   weisser Flaeche eingefaerbt - so bleibt sie in jeder Farbe scharf.
   Die Ueberschrift selbst enthaelt nur noch das Wort "Core". */
#all .nf-hero .nf-h1 h1{display:flex;align-items:baseline;gap:.22em;flex-wrap:wrap;}
#all .nf-hero .nf-h1 h1::before{content:"";display:block;flex:0 0 auto;
  height:.78em;aspect-ratio:147.95 / 36;background-color:#fff;
  -webkit-mask:url("/media/2026/08/neofire.svg") no-repeat left center / contain;
  mask:url("/media/2026/08/neofire.svg") no-repeat left center / contain;
  transform:translateY(.06em);}

/* kein senkrechter Griff - nur die Linie. */
#all .hero_film_griff{display:none!important;}

/* ==== Filmflaeche im Videoschwarz #030509 ==== */
#all .hero_film,
#all .hero_film_laden{background:#030509!important;}
#all .hero_film_video{background:#030509;}

/* Wortmarke schmaler: war breiter als der Absatz darunter. */
#all .nf-hero .nf-h1 h1{font-size:clamp(34px,5vw,54px);line-height:1.06;}

/* Kopf-Knopf als heller grauer Balken mit dunkler Schrift. */
#all .nf-topnav-cta{background:#dfe3e8!important;color:#19181c!important;border:0!important;box-shadow:none!important;}
#all .nf-topnav-cta:hover{background:#cdd3da!important;color:#19181c!important;}

/* Vorzeile groesser: sie traegt die Aussage, nicht die Wortmarke. */
#all .nf-hero .nf-s1-l132-eyuug92{font-size:clamp(22px,2.6vw,34px)!important;line-height:1.18!important;}

/* ==== Pausezeichen in der Mitte ====
   Erscheint nur, wenn der Besucher selbst ins Bild klickt und damit
   anhaelt (NeofireJs setzt dann data-pause am Filmkasten). Nicht am
   Filmende und nicht beim Anhalten durchs Wegscrollen.
   Die zwei weissen Balken sind zwei Farbverlaeufe im Hintergrund -
   so braucht es kein zusaetzliches Element im Baustein. */
#all .hero_film::after{content:"";position:absolute;left:50%;top:50%;
  width:78px;height:78px;margin:-39px 0 0 -39px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:14px 52px,14px 52px;
  background-position:calc(50% - 13px) 50%,calc(50% + 13px) 50%;
  background-repeat:no-repeat;
  opacity:0;transform:scale(.86);pointer-events:none;
  transition:opacity .18s ease-out,transform .18s ease-out;}
#all .hero_film[data-pause="1"]::after{opacity:1;transform:none;}

/* ==== Hero faehrt nicht ein und nicht wieder aus ====
   Das Theme laesst Bloecke beim Scrollen einfahren (opacity 0 +
   translateY) und nimmt die Klasse wieder weg, sobald der Block den
   Bildschirm verlaesst. Beim Hero heisst das: der Film blendet beim
   Runterscrollen aus. Der Hero ist das Erste auf der Seite - er soll
   einfach stehen. */
#all .nf-hero{opacity:1!important;transform:none!important;}

/* ==== Kein Tuerkis mehr ====
   Die Seite hatte #0B7D8C als Akzent - an Haken, Nav-Hover, Aufklapp-
   Titeln und dem Abo-Schalter. Der Akzent wird das Dunkelblau; Gelb
   bleibt den Flaechen vorbehalten, auf denen es traegt. */
#all{--nf-akzent:#0D1F33;}

/* ==== Paketabschnitt auf dunkel ====
   Flaeche und Schrift stehen im Editor. Hier stehen nur die Dinge,
   die der Designer nicht kann: Haken, Schalter, gedaempfte Texte. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-liste li::after{border-left-color:#D1FE17;border-bottom-color:#D1FE17;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen{color:#8FA3B8;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-zeile,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis span{color:#9FB2C6;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis b{color:#fff;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-liste li{color:#E6EDF4;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-paket{box-shadow:none;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-paket-an{box-shadow:0 18px 50px rgba(0,0,0,.45);}

/* Abo-Schalter steht jetzt auf dunklem Grund. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-schalter{background:transparent;border-color:rgba(255,255,255,.22);}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-lauf{background:#D1FE17;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf{color:#fff;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an{color:#0D1F33;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf:not(.is-an):hover{color:#D1FE17;}

/* Der letzte tuerkise Knopf der Seite - grau wie der im Kopf. */
#all .nf-dl-knopf{background:#DFE3E8;color:#19181C !important;}
#all .nf-dl-knopf:hover{background:#CDD3DA;filter:none;}

/* ==== Knoepfe der Paketkarten ====
   Aussen grau wie der Knopf im Kopf, in der Mitte gelb mit dunkler
   Schrift. Weiss auf Gelb war nicht zu lesen. Die Regeln der Spalten
   aus dem Designer sind sehr spitz, deshalb hier mit Nachdruck. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v{background:#DFE3E8 !important;color:#19181C !important;border:0 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v:hover{background:#CDD3DA !important;color:#19181C !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v{background:#D1FE17 !important;color:#0D1F33 !important;border:0 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v:hover{background:#C2ED12 !important;color:#0D1F33 !important;}

/* Der laufende Knopf im Abo-Schalter ist gelb - die Schrift darauf dunkel. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an{color:#0D1F33 !important;}

/* Die Vorzeile traegt den Akzent. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen{color:#D1FE17 !important;}

/* Die Beschriftung liegt in einem eigenen Kind-Element, das der Designer
   direkt einfaerbt. Eine Farbe am Knopf allein vererbt sich deshalb nicht
   dorthin - sie muss die Kinder ausdruecklich mitnehmen. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v *{color:#19181C !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen, #core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen *{color:#D1FE17 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf, #core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf *{color:#fff !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an, #core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an *{color:#0D1F33 !important;}

/* ==== Paketkarten: gleiche Flaeche wie der Abschnitt, weisser Rand ====
   Ein zweites Blau gibt es im Layout nicht. Die Karten stehen deshalb
   auf demselben #030509 und heben sich nur ueber den Rand ab - genau
   wie der Knopf "Termin vereinbaren" im Hero. Die mittlere Karte behaelt
   ihren gelben Rand, sie ist die hervorgehobene. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{background:#030509 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{border-color:#FFFFFF !important;}

/* ==== Knoepfe: der sichtbare Knopf ist das A darin ====
   Das Editor-Element ist nur die Huelle; gefaerbt werden muss das
   .nf-lay-btn darin, sonst schimmert die Huelle als Rand durch. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v{background:transparent !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn{background:#DFE3E8 !important;border-color:#DFE3E8 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn *{color:#19181C !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover{background:#CDD3DA !important;border-color:#CDD3DA !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn{background:#D1FE17 !important;border-color:#D1FE17 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn:hover{background:#C2ED12 !important;border-color:#C2ED12 !important;}

/* ==== Restliche Tuerkis-Stellen ====
   Diese Stellen tragen #0B7D8C fest im Text und werden von der
   Akzent-Variablen nicht erfasst: Navigation, Aufklapp-Titel, das
   A-Z-Verzeichnis und der Verweis unter den Funktionen. Alle bekommen
   das Dunkelblau. */
#core #all #header .nf-topnav a.nf-akt,
#core #all #header .nf-topnav a:hover{color:#0D1F33 !important;}
#core #all .nf-schub-mehr a{color:#0D1F33 !important;}
#core #all .nf-az-block h3{color:#0D1F33 !important;}
#core #all .nf-az-suche:focus{border-color:#0D1F33 !important;}
#core #all .nf-az-bahn a:hover{background:#0D1F33 !important;}
#core #all details[open] > summary,
#core #all details[open] > summary *,
#core #all .nf-faq details[open] > summary,
#core #all .nf-faq details[open] > summary *{color:#0D1F33 !important;}
#core #all .nf-abo-knopf:not(.is-an):hover{color:#0D1F33;}

/* ==== Knoepfe unten buendig, Ecken bleiben rund ====
   Die drei Karten sind unterschiedlich voll, dadurch sassen die Knoepfe
   33, 64 und 58 px ueber dem Kartenrand. Als Spalte gesetzt schiebt
   margin-top:auto den Knopf nach unten - dann entscheidet allein das
   Polster der Karte, und das ist bei allen dreien gleich.
   Der Radius steht ausdruecklich in jedem Zustand, weil die Hover-Regel
   des Themes den Rahmen neu setzt und die Ecken dabei hart wurden. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{display:flex !important;flex-direction:column !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v{margin-top:auto !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:focus,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:active{border-radius:9px !important;border-style:solid !important;border-width:1.5px !important;}

/* Gleiches Polster unten: die mittlere Karte hatte 38 statt 32 px,
   dadurch stand ihr Knopf 6 px hoeher als die beiden anderen. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{padding-bottom:32px !important;}

/* Mindestluft ueber dem Knopf: in der vollsten Karte schob margin-top:auto
   den Knopf sonst direkt unter die letzte Zeile. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v{padding-top:20px !important;}

/* ==== KI-Abschnitt mit Chip im Hintergrund ====
   Das Foto hat rechts den Chip und links eine ruhige dunkle Flaeche.
   Genau dort steht der Text. Der Verlauf davor zieht die linke Haelfte
   noch etwas zu, damit die Schrift auf jedem Bildschirm traegt.
   Der gezeichnete AI-Kreis faellt weg, den ersetzt jetzt das Bild. */
#core #all .nf-s1-l132-c143y3pp{
  background-color:#030509 !important;
  background-image:linear-gradient(90deg,#030509 0%,rgba(3,5,9,.94) 30%,rgba(3,5,9,.45) 58%,rgba(3,5,9,0) 100%),
    url("/media/2026/08/ki-chip.jpg") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center center,right center !important;
  background-size:cover,cover !important;
  min-height:440px !important;
  display:flex !important;align-items:center !important;}
#core #all .nf-s1-l132-ki21787924745274{display:none !important;}
#core #all .nf-s1-l132-ki101787924745274{max-width:600px !important;}
@media(max-width:900px){
#core #all   .nf-s1-l132-c143y3pp{background-position:center center,center right !important;
   background-image:linear-gradient(180deg,rgba(3,5,9,.92) 0%,rgba(3,5,9,.72) 100%),
    url("/media/2026/08/ki-chip.jpg") !important;min-height:360px !important;}}

/* Text links am Raster ausrichten: ohne den AI-Kreis stand die Zeile
   sonst mittig und lief in den Chip hinein. */
#core #all .nf-s1-l132-kir1787924745273{justify-content:flex-start !important;width:100% !important;max-width:1240px !important;margin-left:auto !important;margin-right:auto !important;flex:1 1 auto !important;}
#core #all .nf-s1-l132-ki101787924745274{max-width:540px !important;flex:0 1 540px !important;}

/* ==== Tiefe im Preis-Abschnitt ====
   Eine einzige Farbe wirkte flach. Jetzt liegen drei Ebenen uebereinander:
   1. ein weicher gelber Schein hinter der mittleren Karte - er hebt das
      empfohlene Paket, ohne eine Flaeche zu sein,
   2. ein feines Raster aus 1-px-Linien bei 3% Weiss, das dem Schwarz
      Struktur gibt, ohne sich vorzudraengen,
   3. ein Verlauf von oben nach unten, damit der Abschnitt nach unten
      hin abtaucht.
   Die Karten selbst bleiben unveraendert. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm{
  background-color:#030509 !important;
  background-image:
    radial-gradient(58% 46% at 50% 42%, rgba(209,254,23,.10) 0%, rgba(209,254,23,.04) 42%, rgba(255,255,255,0) 72%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 0%, #0D1F33 0%, rgba(13,31,51,.35) 38%, rgba(3,5,9,0) 70%),
    linear-gradient(180deg, #060A12 0%, #030509 62%, #020407 100%) !important;
  background-size:auto,64px 64px,64px 64px,auto,auto !important;
  background-position:center 0,center,center,center top,center !important;
  background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat !important;}

/* Auf schmalen Schirmen ist das Raster zu unruhig - dort nur Schein und Verlauf. */
@media(max-width:760px){
#core #all #layout #main #content   .nf-s1-l132-c15p3pm{background-image:
    radial-gradient(80% 34% at 50% 30%, rgba(209,254,23,.10) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #060A12 0%, #030509 70%, #020407 100%) !important;
    background-size:auto,auto !important;background-repeat:no-repeat,no-repeat !important;}}

/* ==== Preis-Abschnitt aufgehellt ====
   Reines Schwarz war zu hart. Der Abschnitt steht jetzt auf dem
   Dunkelblau der Marke, die Karten eine Stufe heller darueber - so
   bleibt es dunkel, wirkt aber nicht mehr wie ein Loch. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm{
  background-color:#0D1F33 !important;
  background-image:
    radial-gradient(58% 46% at 50% 42%, rgba(209,254,23,.12) 0%, rgba(209,254,23,.05) 42%, rgba(255,255,255,0) 72%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, #16304D 0%, #0D1F33 55%, #0A1929 100%) !important;
  background-size:auto,64px 64px,64px 64px,auto !important;
  background-position:center 0,center,center,center !important;
  background-repeat:no-repeat,repeat,repeat,no-repeat !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{background:#16283D !important;}
@media(max-width:760px){
#core #all #layout #main #content   .nf-s1-l132-c15p3pm{background-image:
    radial-gradient(80% 34% at 50% 30%, rgba(209,254,23,.12) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #16304D 0%, #0D1F33 70%, #0A1929 100%) !important;
    background-size:auto,auto !important;background-repeat:no-repeat,no-repeat !important;}}

/* ==== Preis-Abschnitt hell mit dunklen Raendern ====
   Dunkel war zu schwer. Jetzt heller Grund, weisse Karten mit dunklem
   Rand - der Rand traegt die Abgrenzung, nicht die Flaeche. Gelb bleibt
   dem empfohlenen Knopf und dem Schein hinter der Mitte vorbehalten. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm{
  background-color:#F5F7F8 !important;
  background-image:
    radial-gradient(56% 44% at 50% 40%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 44%, rgba(255,255,255,0) 72%),
    linear-gradient(rgba(13,31,51,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,31,51,.045) 1px, transparent 1px),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7F8 55%, #EDF1F4 100%) !important;
  background-size:auto,64px 64px,64px 64px,auto !important;
  background-position:center 0,center,center,center !important;
  background-repeat:no-repeat,repeat,repeat,no-repeat !important;}

/* Karten: weiss, dunkler Rand, dunkle Schrift. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{background:#FFFFFF !important;border-color:#0D1F33 !important;
  border-style:solid !important;border-width:1.5px !important;
  box-shadow:0 10px 30px rgba(13,31,51,.07) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{border-width:2.5px !important;}

/* Schrift im hellen Abschnitt. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm,
#core #all #layout #main #content .nf-s1-l132-c15p3pm h1,#core #all #layout #main #content .nf-s1-l132-c15p3pm h2,#core #all #layout #main #content .nf-s1-l132-c15p3pm h3,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis b{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-liste li{color:#3B4A5A !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-zeile,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis span{color:#5A6B7D !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-liste li::after{border-left-color:#0D1F33 !important;border-bottom-color:#0D1F33 !important;}

/* Abo-Schalter auf hellem Grund. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-schalter{background:#fff !important;border-color:#D6DDE4 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-lauf{background:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an *{color:#fff !important;}

/* Knoepfe: aussen dunkel mit weisser Schrift, Mitte gelb mit dunkler. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn{background:#0D1F33 !important;border-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn *{color:#FFFFFF !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover{background:#16304D !important;border-color:#16304D !important;}

@media(max-width:760px){
#core #all #layout #main #content   .nf-s1-l132-c15p3pm{background-image:
    radial-gradient(80% 34% at 50% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7F8 70%, #EDF1F4 100%) !important;
    background-size:auto,auto !important;background-repeat:no-repeat,no-repeat !important;}}

/* ==== Alle Texte im hellen Preisteil ====
   Die Schriftfarbe des Abschnitts steht im Editor auf Weiss - das faerbt
   ueber :where() jedes Kind. Auf hellem Grund verschwindet damit die
   Einleitung und die Zeile unter dem Preis. Hier wird alles dunkel
   gesetzt; die Knopfbeschriftungen kommen danach wieder eigens. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4,h5){color:#3B4A5A !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm h1,#core #all #layout #main #content .nf-s1-l132-c15p3pm h2,#core #all #layout #main #content .nf-s1-l132-c15p3pm h3,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis b{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen *{color:#0D1F33 !important;}

/* Knopfbeschriftungen zuletzt, damit sie nicht mitgefaerbt werden. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn *{color:#FFFFFF !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an *{color:#FFFFFF !important;}

/* ==== Dunkle Karten auf hellem Grund ====
   Der Abschnitt bleibt hell, die drei Karten werden dunkel. Damit
   traegt der Kontrast die Abgrenzung und Gelb kann auf den Karten
   wieder als Akzent arbeiten - Haken, Vorzeile, empfohlener Knopf. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{background:#0D1F33 !important;border-color:#0D1F33 !important;
  box-shadow:0 14px 40px rgba(13,31,51,.16) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{border-color:#D1FE17 !important;border-width:2.5px !important;
  box-shadow:0 18px 50px rgba(13,31,51,.22) !important;}

/* Schrift auf den Karten wieder hell. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4),
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4),
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4){color:#E6EDF4 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-pk-preis b,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-pk-preis b,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-pk-preis b{color:#FFFFFF !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-pk-zeile,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-pk-preis span,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-pk-zeile,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-pk-preis span,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-pk-zeile,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-pk-preis span{color:#A8B0BC !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen *{color:#D1FE17 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-liste li::after,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-liste li::after,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-liste li::after{border-left-color:#D1FE17 !important;border-bottom-color:#D1FE17 !important;}

/* Knoepfe: aussen hellgrau wie im Kopf, Mitte gelb. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn{background:#DFE3E8 !important;border-color:#DFE3E8 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn *{color:#19181C !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover{background:#CDD3DA !important;border-color:#CDD3DA !important;}

/* Listentexte auf den Karten hell halten - die allgemeine Regel fuer den
   hellen Abschnitt hatte sie mitgefaerbt. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-liste li *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-liste li *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-liste li *{color:#E6EDF4 !important;}

/* ==== Raster raus, Ecken fest ====
   Das Kaestchenmuster war unruhig - es faellt weg, es bleibt ein ruhiger
   Verlauf mit einem weichen Licht hinter der Mitte.
   Dazu die Ecken der Knoepfe: die Hover-Regel des Themes setzt den Rahmen
   als Kurzschreibweise neu und nimmt dabei den Radius mit. Hier steht er
   deshalb fuer jeden Zustand ausdruecklich, samt Rahmenbreite. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm{
  background-color:#F5F7F8 !important;
  background-image:
    radial-gradient(64% 52% at 50% 40%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7F8 55%, #EDF1F4 100%) !important;
  background-size:auto,auto !important;
  background-position:center 0,center !important;
  background-repeat:no-repeat,no-repeat !important;}

#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:focus,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:active,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:focus-visible{
  border-radius:10px !important;border-style:solid !important;border-width:1.5px !important;
  outline:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-schalter,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-lauf,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf{border-radius:999px !important;}
@media(max-width:760px){
#core #all #layout #main #content .nf-s1-l132-c15p3pm{background-image:
    radial-gradient(90% 40% at 50% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7F8 70%, #EDF1F4 100%) !important;}}

/* ==== Keine eckigen Schattenkaesten um Textbausteine ====
   Einzelne Textelemente hatten einen Schatten bei Radius 0 - das sah aus
   wie ein Kasten hinter der Zeile. Schatten gibt es nur noch an den
   Karten, dort mit runden Ecken. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-el{box-shadow:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v{box-shadow:0 14px 40px rgba(13,31,51,.16) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{box-shadow:0 14px 40px rgba(13,31,51,.16) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{box-shadow:0 18px 50px rgba(13,31,51,.22) !important;}

/* ==== Empfohlen-Abzeichen und Feinschliff ====
   Nach der Durchsicht: das mittlere Paket bekommt ein Abzeichen statt nur
   einen Rand, die Karten mehr Luft innen, der Preis eine klarere
   Rangfolge und der Abo-Schalter wird kompakter. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{position:relative !important;overflow:visible !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v::before{content:"EMPFOHLEN";position:absolute;top:-14px;left:50%;
  transform:translateX(-50%);background:#D1FE17;color:#0D1F33;
  font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1;
  padding:7px 16px;border-radius:999px;white-space:nowrap;z-index:2;}

/* Mehr Luft in den Karten. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{padding:36px 32px 32px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{padding:42px 32px 32px !important;}

/* Preis zuerst, Zeitraum kleiner daneben. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis b{font-size:46px !important;line-height:1.05 !important;letter-spacing:-.02em !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-pk-preis span{font-size:14px !important;}

/* Abstand zwischen Einleitung und Karten. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-rpakete{margin-top:26px !important;}

/* Schalter kompakter. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf{padding:9px 22px !important;min-width:112px !important;font-size:13px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-schalter{padding:3px !important;}

/* ==== Standard angehoben, aussen weiss beim Hover ====
   Die mittlere Karte sitzt hoeher und liegt vorn - damit ist sie der
   Mittelpunkt, ohne lauter zu sein. Die beiden aeusseren Karten drehen
   beim Ueberfahren ins Weisse mit dunkler Schrift. Uebergang 250 ms. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{
  transition:transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{position:relative !important;z-index:2 !important;transform:translateY(-24px) !important;}

/* Hover: Karte wird weiss. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover{background:#FFFFFF !important;border-color:#FFFFFF !important;
  box-shadow:0 20px 54px rgba(13,31,51,.20) !important;transform:translateY(-6px) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4),
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4){color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-liste li *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-liste li *{color:#3B4A5A !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-pk-zeile,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-pk-preis span,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-pk-zeile,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-pk-preis span{color:#5A6B7D !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-liste li::after,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-liste li::after{border-left-color:#0D1F33 !important;border-bottom-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-augen *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-augen *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn{background:#0D1F33 !important;border-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn *{color:#FFFFFF !important;}

/* Auf dem Handy stehen die Karten untereinander - dort nicht anheben. */
@media(max-width:900px){#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{transform:none !important;}}

/* ==== Dunkler Fuss ====
   Der Fuss steht jetzt auf dem Schwarz der Marke. Ueberschriften weiss,
   Fliesstext und Links gedaempft, Trennlinien nur angedeutet. Die
   Zahlungs-Logos bekommen eine helle Platte, damit sie auf dunklem
   Grund nicht absaufen - die Marken bleiben unveraendert. */
#core #all .site-footer{background:#030509 !important;color:#A8B0BC !important;}
#core #all .site-footer :where(h1,h2,h3,h4,b,strong){color:#FFFFFF !important;}
#core #all .site-footer a{color:#C6D0DB !important;}
#core #all .site-footer a:hover{color:#D1FE17 !important;}
#core #all .site-footer p,#core #all .site-footer span,#core #all .site-footer div,#core #all .site-footer li{color:#A8B0BC !important;}
#core #all .site-footer input,#core #all .site-footer textarea{background:#0D1F33 !important;border-color:rgba(255,255,255,.18) !important;color:#FFFFFF !important;}
#core #all .site-footer input::placeholder{color:#7E8C9B !important;}
#core #all .site-footer hr,#core #all .site-footer [class*=trenn]{border-color:rgba(255,255,255,.12) !important;}

/* Marken-Logos auf heller Platte, damit sie lesbar bleiben. */
#core #all .site-footer img{background:#FFFFFF;border-radius:8px;padding:8px 10px;}

/* Die neofire-Wortmarke im Fuss in Weiss. */
#core #all .site-footer svg{fill:#FFFFFF !important;color:#FFFFFF !important;}
#core #all .site-footer svg path{fill:#FFFFFF !important;}

/* Fuss-Spalten durchsichtig: der Fuss ist ein eigenes Layout und bringt
   eine helle Spaltenflaeche mit, die das Schwarz ueberdeckt hat. */
#core #all .site-footer .nf-lay-col,#core #all .site-footer .nf-lay-row,#core #all .site-footer .nf-lay-el{background-color:transparent !important;}
#core #all .site-footer img.nf-lay-img{background:#FFFFFF !important;}

/* ==== Alle Fuss-Texte hell ====
   Der Fuss ist ein eigenes Layout und faerbt seine Bausteine selbst dunkel.
   Auf schwarzem Grund verschwanden dadurch Ueberschriften und Rufnummer. */
#core #all .site-footer :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4,h5,label){color:#A8B0BC !important;}
#core #all .site-footer :where(h1,h2,h3,h4,h5),#core #all .site-footer b,#core #all .site-footer strong{color:#FFFFFF !important;}
#core #all .site-footer a,#core #all .site-footer a *{color:#C6D0DB !important;}
#core #all .site-footer a:hover,#core #all .site-footer a:hover *{color:#D1FE17 !important;}
#core #all .site-footer input,#core #all .site-footer input::placeholder{color:#FFFFFF !important;}
#core #all .site-footer input::placeholder{color:#7E8C9B !important;}

/* Fuss-Ueberschriften ausdruecklich: die Bausteine des Fuss-Layouts
   faerben ihre Ueberschriften mit eigener Regel dunkel. */
#core #all #layout .site-footer h1,#core #all #layout .site-footer h2,#core #all #layout .site-footer h3,#core #all #layout .site-footer h4,#core #all #layout .site-footer h5,
#core #all #layout .site-footer .heading,#core #all #layout .site-footer .heading *{color:#FFFFFF !important;}
#core #all #layout .site-footer .nf-lay-el:not(.heading) :where(p,div,span,li){color:#A8B0BC !important;}
#core #all #layout .site-footer a,#core #all #layout .site-footer a *{color:#C6D0DB !important;}
#core #all #layout .site-footer a:hover,#core #all #layout .site-footer a:hover *{color:#D1FE17 !important;}

/* ==== Vertrauens-Karton unter dem Video ====
   Drei kurze Zusagen, nebeneinander in einem hellen Karton mit dunklem
   Rand. Er sitzt zwischen Video und "Im Lieferumfang" und faengt den
   Blick auf, bevor die Funktionsliste beginnt. Jeder Punkt bekommt einen
   gelben Haken - dieselbe Handschrift wie in den Paketen. */
#core #all .nf-vertrauen{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 40px;max-width:1000px;margin:0 auto 8px;padding:20px 28px;
  background:#FFFFFF;border:1.5px solid #0D1F33;border-radius:16px;position:relative;z-index:1;
  box-shadow:0 10px 30px rgba(13,31,51,.07);}
#core #all .nf-vertrauen__p{position:relative;padding-left:30px;font-size:16px;font-weight:600;
  color:#0D1F33;line-height:1.4;white-space:nowrap;}
#core #all .nf-vertrauen__p::after{content:"";position:absolute;left:4px;top:6px;width:13px;height:7px;
  border-left:2.5px solid #D1FE17;border-bottom:2.5px solid #D1FE17;transform:rotate(-45deg);}
@media(max-width:760px){
#core #all   .nf-vertrauen{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px;margin:0 16px 8px;}
#core #all   .nf-vertrauen__p{white-space:normal;font-size:15px;}}

/* Karton nicht auf die Vorzeile schieben: der Baustein liegt im
   Funktionsblock ganz oben, deshalb braucht die Ueberschrift darunter
   Platz. */
#core #all .nf-vertrauen{margin-bottom:46px !important;}
#core #all .nf-s1-l132-cusxl1d .nf-augen{margin-top:0 !important;}

/* ==== Vertrauenszeile ohne Rahmen ====
   Kein Karton, kein Schatten - nur drei Zusagen nebeneinander, jede mit
   einem runden Haken davor. So steht es auch im Entwurf. */
#core #all .nf-vertrauen{background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;margin:0 auto 54px !important;
  gap:16px 56px !important;max-width:1100px !important;}
#core #all .nf-vertrauen__p{padding-left:38px !important;font-size:15px !important;font-weight:600 !important;
  color:#0D1F33 !important;}
#core #all .nf-vertrauen__p::before{content:"";position:absolute;left:0;top:50%;margin-top:-11px;
  width:22px;height:22px;border-radius:50%;border:1.5px solid #0D1F33;box-sizing:border-box;}
#core #all .nf-vertrauen__p::after{left:6px !important;top:50%!important;margin-top:-3px;
  width:9px !important;height:5px !important;
  border-left:2px solid #0D1F33 !important;border-bottom:2px solid #0D1F33 !important;}
@media(max-width:760px){#core #all .nf-vertrauen{gap:14px !important;margin-bottom:36px !important;}}

/* ==== Icons in den Paketkarten und Pfeil im Knopf ====
   Der Kasten und das Zeichen sind ZWEI Ebenen: ::before traegt den
   runden Rahmen, ::after das Zeichen darin. Beides an einem Element
   ginge nicht - eine Maske schneidet den Rahmen mit weg.
   Gilt nur fuer die Vorzeilen IN den Karten, nicht fuer die Vorzeile
   ueber dem Abschnitt. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen{position:relative !important;display:flex !important;align-items:center !important;
  min-height:38px !important;padding-left:52px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen::before,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen::before,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen::before{content:"";position:absolute;left:0;top:50%;margin-top:-19px;
  width:38px;height:38px;border-radius:11px;border:1.5px solid rgba(255,255,255,.30);
  background:transparent;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen::after,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen::after,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen::after{content:"";position:absolute;left:11px;top:50%;margin-top:-8px;
  width:16px;height:16px;background-color:#D1FE17;border:0;transform:none;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3 1.3-6.2L3 9.5l6.3-.7z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3 1.3-6.2L3 9.5l6.3-.7z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6.6 8.2a3.8 3.8 0 100 7.6c2.5 0 3.3-1.9 5.4-3.8s2.9-3.8 5.4-3.8a3.8 3.8 0 110 7.6c-2.5 0-3.3-1.9-5.4-3.8S9.1 8.2 6.6 8.2z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6.6 8.2a3.8 3.8 0 100 7.6c2.5 0 3.3-1.9 5.4-3.8s2.9-3.8 5.4-3.8a3.8 3.8 0 110 7.6c-2.5 0-3.3-1.9-5.4-3.8S9.1 8.2 6.6 8.2z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}

/* Beim Hover wird die Karte weiss - Rahmen und Zeichen ziehen mit. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-augen::before,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-augen::before{border-color:rgba(13,31,51,.25);}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-augen::after,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-augen::after{background-color:#0D1F33;}

/* Pfeil im Knopf, rechts. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn{position:relative !important;padding-right:44px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn::after{content:"";position:absolute;right:16px;top:50%;margin-top:-8px;
  width:16px;height:16px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}

/* ==== Karton auf weisser Flaeche ueber "Im Lieferumfang" ====
   Links die drei Zusagen mit Unterzeile, rechts die Softwarebox.
   Die Flaeche ist weiss und laeuft ueber die volle Breite, damit der
   Bereich sich vom grauen Funktionsblock darunter absetzt.
   Das Bild hat einen weissen Grund - multiply loescht ihn weg, so
   braucht es keine freigestellte Datei. */
#core #all .nf-korb{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:48px;max-width:1200px;margin:0 auto;padding:8px 20px 24px;}
#core #all .nf-korb::before{content:"";position:absolute;left:50%;top:-72px;bottom:0;width:100vw;
  margin-left:-50vw;background:#FFFFFF;z-index:0;}
#core #all .nf-korb__text,#core #all .nf-korb__bild{position:relative;z-index:1;}
#core #all .nf-korb__bild{width:340px;max-width:38%;height:auto;mix-blend-mode:multiply;
  filter:drop-shadow(0 18px 34px rgba(13,31,51,.14));}

/* Zusagen untereinander, jede mit Unterzeile. */
#core #all .nf-korb .nf-vertrauen{display:flex !important;flex-direction:column !important;
  align-items:flex-start !important;gap:22px !important;margin:0 !important;max-width:none !important;}
#core #all .nf-korb .nf-vertrauen__p{display:block !important;white-space:normal !important;padding-left:44px !important;}
#core #all .nf-korb .nf-vertrauen__p b{display:block;font-size:16px;font-weight:600;color:#0D1F33;line-height:1.35;}
#core #all .nf-korb .nf-vertrauen__p i{display:block;font-style:normal;font-size:14px;color:#5A6B7D;line-height:1.4;margin-top:2px;}
#core #all .nf-korb .nf-vertrauen__p::before{top:2px !important;margin-top:0 !important;width:26px;height:26px;border-radius:50%;
  border:1.5px solid #0D1F33;}
#core #all .nf-korb .nf-vertrauen__p::after{left:8px !important;top:10px !important;margin-top:0 !important;
  width:10px !important;height:5px !important;
  border-left:2px solid #0D1F33 !important;border-bottom:2px solid #0D1F33 !important;}

@media(max-width:860px){
#core #all   .nf-korb{flex-direction:column-reverse;gap:28px;padding:8px 18px 20px;}
#core #all   .nf-korb__bild{width:220px;max-width:60%;}
#core #all   .nf-korb .nf-vertrauen{gap:18px !important;}}

/* ==== Karton im Fluss statt als Auflage ====
   Die weisse Flaeche lag vorher absolut ueber dem Funktionsblock und hat
   ihn verdeckt. Jetzt ist der Streifen ein normaler Block in voller
   Breite - er schiebt den Inhalt darunter korrekt weiter. */
#core #all .nf-korb::before{display:none !important;}
#core #all .nf-korb{background:#FFFFFF !important;max-width:none !important;
  margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;
  padding:56px max(24px, calc(50vw - 600px)) 56px !important;
  align-items:center !important;gap:56px !important;}
#core #all .nf-korb__bild{width:300px !important;max-width:34% !important;mix-blend-mode:multiply !important;}

/* Der Funktionsblock beginnt danach ohne zusaetzliche Luecke. */
#core #all .nf-s1-l132-cusxl1d{padding-top:0 !important;}
#core #all .nf-s1-l132-cusxl1d .nf-s1-l132-azmtcvl0ag7{padding-top:56px !important;}

@media(max-width:860px){
#core #all   .nf-korb{padding:36px 20px 36px !important;gap:26px !important;}
#core #all   .nf-korb__bild{width:200px !important;max-width:56% !important;}}

/* Hoehe der Ankerspalte loesen: sie stand auf festen 56 px, der Karton
   lief darueber hinaus und legte sich auf den Funktionsblock. */
#core #all .nf-s1-l132-azmtcvl0ac1,
#core #all .nf-s1-l132-acmtcvl0ac2,
#core #all .nf-s1-l132-aemtcvl0ac3{height:auto !important;min-height:0 !important;max-height:none !important;}
#core #all .nf-s1-l132-acmtcvl0ac2{align-items:stretch !important;}

/* Karton ohne eigenen Schatten: das Foto bringt seinen Schatten schon
   mit. Ein zweiter per filter wurde durch multiply zu einem grauen Hof
   und liess die Box aufgeklebt wirken. */
#core #all .nf-korb__bild{filter:none !important;}

/* Karton ohne multiply: das JPEG hat kein reines Weiss, multiply hat
   daraus ein sichtbares graues Rechteck gemacht. Ohne die Mischung
   verschwindet die Kante auf der weissen Flaeche. */
#core #all .nf-korb__bild{mix-blend-mode:normal !important;}

/* ==== Abschnitt "Mehr als nur ein Shop-System" ====
   Vier Karten mit Strichzeichen. Die Zeichen liegen als Maske vor,
   dadurch bleiben sie bei jeder Groesse scharf und die Farbe steuert
   eine einzige Eigenschaft. */
#all .nf-why{background:#F5F7F8;padding:72px 20px;}
#all .nf-why,#all .nf-why *,#all .nf-why *::before,#all .nf-why *::after{box-sizing:border-box;}
#all .nf-why__inner{max-width:1200px;margin:0 auto;}
#all .nf-why__eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5A6B7D;text-align:center;}
#all .nf-why__title{margin:0 0 36px;font-size:clamp(26px,3.2vw,36px);line-height:1.2;font-weight:700;color:#0D1F33;text-align:center;}
#all .nf-why__grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:640px){#all .nf-why__grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){#all .nf-why__grid{grid-template-columns:repeat(4,1fr);}}
#all .nf-why__card{height:100%;background:#FFFFFF;border:1px solid #E2E7EC;border-radius:16px;padding:28px 26px 30px;box-shadow:0 1px 2px rgba(13,31,51,.04),0 8px 20px rgba(13,31,51,.04);}
#all .nf-why__iconbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #E2E7EC;border-radius:12px;background:#FFFFFF;margin-bottom:18px;}
/* Neon-Punkt als Akzent, der weisse Ring hebt ihn vom Rahmen ab. */
#all .nf-why__iconbox::after{content:"";position:absolute;top:-3px;right:-3px;width:6px;height:6px;border-radius:50%;background:#D1FE17;box-shadow:0 0 0 2px #FFFFFF;}
#all .nf-why__icon{display:block;width:24px;height:24px;background-color:#0D1F33;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px 24px;mask-size:24px 24px;}
#all .nf-why__icon--puzzle{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5a2 2 0 0 1 4 0h4a1 1 0 0 1 1 1v4a2 2 0 0 0 0 4v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-4a2 2 0 0 0 0-4V6a1 1 0 0 1 1-1h4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5a2 2 0 0 1 4 0h4a1 1 0 0 1 1 1v4a2 2 0 0 0 0 4v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-4a2 2 0 0 0 0-4V6a1 1 0 0 1 1-1h4z'/%3E%3C/svg%3E");}
#all .nf-why__icon--shield{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.5c0 4.3-2.9 7.6-7 9.5-4.1-1.9-7-5.2-7-9.5V6z'/%3E%3Cpath d='M9 11.8l2.2 2.2 3.8-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.5c0 4.3-2.9 7.6-7 9.5-4.1-1.9-7-5.2-7-9.5V6z'/%3E%3Cpath d='M9 11.8l2.2 2.2 3.8-4'/%3E%3C/svg%3E");}
#all .nf-why__icon--rocket{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");}
#all .nf-why__icon--headset{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='14' width='4' height='6' rx='1.6'/%3E%3Crect x='17.5' y='14' width='4' height='6' rx='1.6'/%3E%3Cpath d='M20 20v.6a2 2 0 0 1-2 2h-3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='14' width='4' height='6' rx='1.6'/%3E%3Crect x='17.5' y='14' width='4' height='6' rx='1.6'/%3E%3Cpath d='M20 20v.6a2 2 0 0 1-2 2h-3'/%3E%3C/svg%3E");}
#all .nf-why__cardtitle{margin:0 0 8px;font-size:17px;line-height:1.3;font-weight:700;color:#0D1F33;}
#all .nf-why__text{margin:0;font-size:15px;line-height:1.55;color:#5A6B7D;}

/* ==== Social-Zeile im Fuss ====
   Runde Schaltflaechen mit duennem Rand; die Zeichen sind Masken,
   damit der Wechsel auf Gelb eine einzige Farbregel ist. */
#all .site-footer .nf-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 6px;}
#all .site-footer .nf-social__link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(198,208,219,.28);background-color:transparent;text-decoration:none;transition:border-color .18s ease,background-color .18s ease;}
#all .site-footer .nf-social__link:hover,#all .site-footer .nf-social__link:focus-visible{border-color:#D1FE17;background-color:rgba(209,254,23,.10);}
#all .site-footer .nf-social__ico{display:block;width:18px;height:18px;background-color:#C6D0DB;transition:background-color .18s ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
#all .site-footer .nf-social__link:hover .nf-social__ico,#all .site-footer .nf-social__link:focus-visible .nf-social__ico{background-color:#D1FE17;}
#all .site-footer .nf-social__ico--instagram{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.3' fill='white' stroke='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.3' fill='white' stroke='none'/%3E%3C/svg%3E");}
#all .site-footer .nf-social__ico--facebook{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.4 7.6h-2c-.7 0-.9.35-.9 1v1.8h2.9l-.38 3.2h-2.52v8.4h-3.4v-8.4h-2.3v-3.2h2.3v-2.15c0-2.3 1.3-3.65 3.6-3.65h2.7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.4 7.6h-2c-.7 0-.9.35-.9 1v1.8h2.9l-.38 3.2h-2.52v8.4h-3.4v-8.4h-2.3v-3.2h2.3v-2.15c0-2.3 1.3-3.65 3.6-3.65h2.7z'/%3E%3C/svg%3E");}
#all .site-footer .nf-social__ico--google{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 12.2A8.4 8.4 0 1 1 17.9 6.1' fill='none' stroke='white' stroke-width='2.7'/%3E%3Cpath d='M12 10.85h8.6v2.7H12z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 12.2A8.4 8.4 0 1 1 17.9 6.1' fill='none' stroke='white' stroke-width='2.7'/%3E%3Cpath d='M12 10.85h8.6v2.7H12z' fill='white'/%3E%3C/svg%3E");}
#all .site-footer .nf-social__ico--x{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.9'%3E%3Cpath d='M3.9 3.2L20.1 20.8M20.1 3.2L3.9 20.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.9'%3E%3Cpath d='M3.9 3.2L20.1 20.8M20.1 3.2L3.9 20.8'/%3E%3C/svg%3E");}
#all .site-footer .nf-social__ico--tiktok{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.7 2h3.2c.25 1.9 1.35 3.6 3 4.5.9.5 1.9.8 2.9.85v3.3a9.6 9.6 0 0 1-5.5-1.85v6.6a6.85 6.85 0 1 1-6.85-6.85c.36 0 .72.03 1.07.09v3.36a3.55 3.55 0 1 0 2.48 3.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.7 2h3.2c.25 1.9 1.35 3.6 3 4.5.9.5 1.9.8 2.9.85v3.3a9.6 9.6 0 0 1-5.5-1.85v6.6a6.85 6.85 0 1 1-6.85-6.85c.36 0 .72.03 1.07.09v3.36a3.55 3.55 0 1 0 2.48 3.4z'/%3E%3C/svg%3E");}
@media (max-width:400px){#all .site-footer .nf-social{gap:8px}#all .site-footer .nf-social__link{width:34px;height:34px}#all .site-footer .nf-social__ico{width:16px;height:16px}}

/* ==== Kopfblock ueber den Paketen: Text links, Karton rechts ====
   Nachgebaut nach dem Entwurf: Vorzeile, zweizeilige Ueberschrift,
   Absatz, zwei Knoepfe, darunter die drei Zusagen nebeneinander. */
#all .nf-korb{align-items:center !important;gap:64px !important;padding:72px max(24px, calc(50vw - 600px)) 72px !important;}
#all .nf-korb__text{flex:1 1 auto;max-width:620px;}
#all .nf-korb__augen{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5A6B7D;}
#all .nf-korb__titel{margin:0 0 20px;font-size:clamp(30px,3.6vw,46px);line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#0D1F33;}
#all .nf-korb__lead{margin:0 0 30px;font-size:16px;line-height:1.7;color:#5A6B7D;max-width:460px;}
#all .nf-korb__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 40px;}
/* Erster Knopf dunkel mit gelbem Blitz, zweiter nur mit Rand. */
#all .nf-korb__cta,#all .nf-korb__zweit{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease;}
#all .nf-korb__cta{background:#0D1F33;color:#FFFFFF;border:1.5px solid #0D1F33;}
#all .nf-korb__cta:hover{background:#16304D;border-color:#16304D;color:#FFFFFF;}
#all .nf-korb__cta::after{content:"";width:15px;height:15px;background-color:#D1FE17;-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/contain;}
#all .nf-korb__zweit{background:#FFFFFF;color:#0D1F33;border:1.5px solid #D8DFE6;}
#all .nf-korb__zweit:hover{border-color:#0D1F33;color:#0D1F33;}

/* Zusagen wieder nebeneinander, wie im Entwurf unter den Knoepfen. */
#all .nf-korb .nf-vertrauen{flex-direction:row !important;flex-wrap:wrap !important;gap:14px 34px !important;}
#all .nf-korb .nf-vertrauen__p{padding-left:34px !important;}
#all .nf-korb .nf-vertrauen__p b{font-size:13px;font-weight:700;color:#0D1F33;}
#all .nf-korb .nf-vertrauen__p i{font-size:12px;color:#7E8C9B;}
#all .nf-korb .nf-vertrauen__p::before{width:20px;height:20px;top:1px !important;}
#all .nf-korb .nf-vertrauen__p::after{left:6px !important;top:7px !important;width:8px !important;height:4px !important;}
#all .nf-korb__bild{width:400px !important;max-width:44% !important;}

/* Der ungewollte Abschnitt bleibt vorsichtshalber unsichtbar, falls */
/* noch eine alte JS-Fassung im Umlauf ist. */
#all .nf-why{display:none !important;}

@media(max-width:900px){
#all   .nf-korb{flex-direction:column-reverse !important;gap:32px !important;padding:44px 20px 44px !important;}
#all   .nf-korb__text{max-width:none;}
#all   .nf-korb__bild{width:220px !important;max-width:62% !important;}
#all   .nf-korb .nf-vertrauen{flex-direction:column !important;gap:14px !important;}}

/* ==================================================================
   ENDSTAND nach Vorlage: Kopfblock und Preise
   Ersetzt alles Vorherige in diesen beiden Bereichen. Steht bewusst
   ganz am Ende, damit es die frueheren Versuche aussticht.
   ================================================================== */

/* --- Kopfblock: Text links, grosse Box rechts --- */
#core #all .nf-korb{gap:40px !important;padding:64px max(24px, calc(50vw - 640px)) 56px !important;align-items:center !important;}
#core #all .nf-korb__text{flex:1 1 auto;max-width:640px;}
#core #all .nf-korb__titel{font-size:clamp(32px,4.4vw,58px) !important;line-height:1.08 !important;letter-spacing:-.025em !important;margin:0 0 22px !important;}
#core #all .nf-korb__lead{font-size:17px !important;line-height:1.75 !important;max-width:430px !important;margin:0 0 34px !important;}
#core #all .nf-korb__bild{width:46% !important;max-width:560px !important;}
/* Zusagen als schmale Zeile unter den Knoepfen, klein gesetzt. */
#core #all .nf-korb .nf-vertrauen{flex-direction:row !important;flex-wrap:wrap !important;gap:12px 38px !important;margin:44px 0 0 !important;}
#core #all .nf-korb .nf-vertrauen__p{padding-left:32px !important;}
#core #all .nf-korb .nf-vertrauen__p b{font-size:12.5px !important;font-weight:700 !important;color:#0D1F33 !important;}
#core #all .nf-korb .nf-vertrauen__p i{font-size:12px !important;color:#8A97A5 !important;}
#core #all .nf-korb .nf-vertrauen__p::before{width:19px !important;height:19px !important;top:2px !important;border-color:#0D1F33 !important;}
#core #all .nf-korb .nf-vertrauen__p::after{left:5.5px !important;top:8px !important;width:8px !important;height:4px !important;}

/* --- Preise: weisse Karten auf sehr hellem Grund --- */
#core #all #layout #main #content .nf-s1-l132-c15p3pm{background-color:#F7F8FA !important;background-image:linear-gradient(180deg,#FFFFFF 0%,#F7F8FA 40%,#F2F4F7 100%) !important;background-size:auto !important;background-repeat:no-repeat !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{background:#FFFFFF !important;border:1px solid #E8ECF0 !important;border-radius:18px !important;
  box-shadow:0 1px 2px rgba(13,31,51,.04),0 10px 26px rgba(13,31,51,.05) !important;padding:34px 30px 32px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{background:#FFFFFF !important;border:2px solid #0D1F33 !important;border-radius:20px !important;
  box-shadow:0 18px 46px rgba(13,31,51,.14) !important;padding:40px 30px 32px !important;transform:translateY(-26px) !important;}

/* Abzeichen dunkelblau mit weisser Schrift, nicht gelb. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v::before{background:#0D1F33 !important;color:#FFFFFF !important;font-size:11px !important;letter-spacing:.12em !important;padding:8px 18px !important;top:-15px !important;}

/* Alle Texte dunkel auf Weiss. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4),
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4),
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4){color:#3B4A5A !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-pk-preis b{color:#0D1F33 !important;font-size:36px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-pk-preis span{color:#8A97A5 !important;font-size:14px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-pk-zeile{color:#5A6B7D !important;font-size:15px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-liste li *{color:#3B4A5A !important;font-size:15px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-liste li::after{border-left-color:#0D1F33 !important;border-bottom-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen *{color:#0D1F33 !important;font-size:13px !important;letter-spacing:.1em !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen::before{border:0 !important;background:#F3F5F8 !important;width:44px !important;height:44px !important;border-radius:12px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen::after{background-color:#0D1F33 !important;left:13px !important;width:18px !important;height:18px !important;margin-top:-9px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-pk-preis b{color:#0D1F33 !important;font-size:36px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-pk-preis span{color:#8A97A5 !important;font-size:14px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-pk-zeile{color:#5A6B7D !important;font-size:15px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-liste li *{color:#3B4A5A !important;font-size:15px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-liste li::after{border-left-color:#0D1F33 !important;border-bottom-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen *{color:#0D1F33 !important;font-size:13px !important;letter-spacing:.1em !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen::before{border:0 !important;background:#F3F5F8 !important;width:44px !important;height:44px !important;border-radius:12px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen::after{background-color:#0D1F33 !important;left:13px !important;width:18px !important;height:18px !important;margin-top:-9px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-pk-preis b{color:#0D1F33 !important;font-size:36px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-pk-preis span{color:#8A97A5 !important;font-size:14px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-pk-zeile{color:#5A6B7D !important;font-size:15px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-liste li,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-liste li *{color:#3B4A5A !important;font-size:15px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-liste li::after{border-left-color:#0D1F33 !important;border-bottom-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen *{color:#0D1F33 !important;font-size:13px !important;letter-spacing:.1em !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen::before{border:0 !important;background:#F3F5F8 !important;width:44px !important;height:44px !important;border-radius:12px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen::after{background-color:#0D1F33 !important;left:13px !important;width:18px !important;height:18px !important;margin-top:-9px !important;}
/* Gelber Akzentpunkt oben rechts am Icon-Kasten. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen{position:relative !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v .nf-augen,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v .nf-augen{padding-left:58px !important;min-height:44px !important;}

/* Knoepfe: aussen umrandet, Mitte dunkelblau, beide mit Pfeil. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn{background:#FFFFFF !important;border:1.5px solid #D8DFE6 !important;height:52px !important;border-radius:12px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn *,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover,
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover{background:#F5F7F9 !important;border-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn{background:#0D1F33 !important;border:1.5px solid #0D1F33 !important;height:52px !important;border-radius:12px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn *{color:#FFFFFF !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn:hover{background:#16304D !important;border-color:#16304D !important;}

/* Kein Weiss-Umschlag beim Ueberfahren mehr - die Karten sind schon weiss. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover{background:#FFFFFF !important;border-color:#C9D3DC !important;transform:translateY(-4px) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover :where(p,div,span,li,b,strong,h1,h2,h3,h4),
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover :where(p,div,span,li,b,strong,h1,h2,h3,h4){color:#3B4A5A !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn{background:#F5F7F9 !important;border-color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn *,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn *{color:#0D1F33 !important;}

/* Schalter dunkelblau aktiv. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-schalter{background:#FFFFFF !important;border-color:#E2E7EC !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-lauf{background:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf *{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-knopf.is-an *{color:#FFFFFF !important;}

/* Ueberschrift und Einleitung des Abschnitts. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm :where(p,div,span,li,b,strong,em,i,h1,h2,h3,h4,h5){color:#5A6B7D !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm h1,#core #all #layout #main #content .nf-s1-l132-c15p3pm h2,#core #all #layout #main #content .nf-s1-l132-c15p3pm h3{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-augen{color:#0D1F33 !important;}

@media(max-width:900px){
#core #all   .nf-korb{flex-direction:column-reverse !important;gap:30px !important;padding:40px 20px !important;}
#core #all   .nf-korb__bild{width:220px !important;max-width:60% !important;}
#core #all   .nf-korb .nf-vertrauen{flex-direction:column !important;gap:14px !important;margin-top:30px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm   .nf-s1-l132-pk13v{transform:none !important;}}

/* Bildkante weich ausblenden: das Foto hat einen eigenen Schatten-
   verlauf im Hintergrund, der sich auf der weissen Flaeche als Kasten
   abzeichnete. Die Maske laesst die Raender ins Weiss auslaufen, oben
   am staerksten, weil dort der Verlauf am dunkelsten ist. */
#core #all .nf-korb__bild{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 94%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 94%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
#core #all .nf-korb{background:#FEFEFE !important;}

/* ==== Eigene Zeichen fuer die drei Zusagen ====
   Jede Zusage bekommt ihr passendes Bild statt dreimal denselben
   Haken: Haken im Kreis fuer die Testphase, Kreispfeil mit Zeiger
   fuer die Kuendbarkeit, Schild fuer den Datenschutz. Das Zeichen
   ist jetzt EIN Element - der frueher getrennte Rahmen faellt weg. */
#core #all .nf-korb .nf-vertrauen__p::before{background:none !important;border:0 !important;border-radius:0 !important;
  width:22px !important;height:22px !important;top:1px !important;left:0 !important;
  background-color:#0D1F33 !important;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:22px 22px;mask-size:22px 22px;}
#core #all .nf-korb .nf-vertrauen__p::after{display:none !important;}
#core #all .nf-korb .nf-vertrauen__p:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.2 12.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.2 12.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E");}
#core #all .nf-korb .nf-vertrauen__p:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 4.2v4.3h-4.3'/%3E%3Cpath d='M12 7.6V12l2.8 1.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 4.2v4.3h-4.3'/%3E%3Cpath d='M12 7.6V12l2.8 1.7'/%3E%3C/svg%3E");}
#core #all .nf-korb .nf-vertrauen__p:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 5.9v5.4c0 4.2-2.9 7.5-7 9.3-4.1-1.8-7-5.1-7-9.3V5.9z'/%3E%3Cpath d='M9.1 11.9l2.1 2.1 3.7-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 5.9v5.4c0 4.2-2.9 7.5-7 9.3-4.1-1.8-7-5.1-7-9.3V5.9z'/%3E%3Cpath d='M9.1 11.9l2.1 2.1 3.7-4'/%3E%3C/svg%3E");}

/* Der graue Block beginnt jetzt mit Abstand: die Vorzeile klebte
   direkt an der Kante der weissen Flaeche darueber. */
#core #all #layout #main #content .nf-s1-l132-cusxl1d .nf-augen{padding-top:0 !important;}
#core #all .nf-s1-l132-cusxl1d .nf-s1-l132-azmtcvl0ag7{padding-top:88px !important;}

/* Luft im grauen Block: die Vorzeile "IM LIEFERUMFANG" klebte an der
   Kante der weissen Flaeche darueber. Der Abstand gehoert an die Zeile,
   in der sie steht - nicht an den Abschnitt, der beginnt weiter oben. */
#core #all .nf-s1-l132-re4x8w6{padding-top:78px !important;}

/* ==== Fehlende Grundfarbe nachtragen ====
   --nf-grau wird an 16 Stellen benutzt, war aber nirgends definiert.
   Ohne Wert faellt der Text auf Schwarz zurueck - dadurch wirkte unter
   anderem der Aufklapper "Mehr Funktionen anzeigen" hart und falsch. */
#all{--nf-grau:#6B7A88;}

/* Aufklapper: geschlossen gedaempft, offen dunkelblau. */
#core #all .nf-schub > summary{color:#5A6B7D !important;}
#core #all .nf-schub[open] > summary,
#core #all .nf-schub[open] > summary *{color:#0D1F33 !important;}

/* ==== Karton fährt von hinten heran ====
   Ausgangslage klein und blass, Endlage volle Größe. Bewegt werden
   nur transform und opacity - beides kostet den Browser nichts und
   ruckelt deshalb auch auf schwächeren Geräten nicht. */
#core #all .nf-korb__bild.faehrt-ein{
  opacity:0;
  transform:scale(.78) translateY(18px);
  transition:opacity .7s cubic-bezier(.16,.84,.28,1), transform .9s cubic-bezier(.16,.84,.28,1);
  will-change:transform,opacity;
}
#core #all .nf-korb__bild.faehrt-ein.ist-da{
  opacity:1;
  transform:none;
}

/* ==== Karton mit Schriftzug und Stufenschalter ====
   Bild und Schriftzug liegen übereinander in einer Bühne, damit der
   Text mitwächst, wenn die Box größer oder kleiner wird. Alle Maße
   sind deshalb in Prozent der Bühne, nicht in Pixeln. */
#core #all .nf-korb__buehne{
  position:relative;
  flex:0 0 auto;
  width:46%;
  max-width:560px;
  align-self:center;
}
#core #all .nf-korb__buehne .nf-korb__bild{
  width:100% !important;
  max-width:none !important;
  display:block;
}

/* Der Schriftzug sitzt auf der Vorderseite unter dem Wort Core.
   Die Werte sind am Foto abgemessen. */
#core #all .nf-karton__stufe{
  position:absolute;
  left:34%;
  top:52%;
  font-size:clamp(11px,1.55vw,19px);
  font-weight:600;
  letter-spacing:.01em;
  color:#1A1A1A;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .14s ease;
}
#core #all .nf-karton__stufe.wechselt{opacity:0;}

/* Schalter unter dem Karton, gleiche Sprache wie der Abo-Schalter. */
#core #all .nf-stufe{
  display:flex;
  justify-content:center;
  gap:4px;
  margin:18px auto 0;
  padding:4px;
  background:#FFFFFF;
  border:1px solid #E2E7EC;
  border-radius:999px;
  width:fit-content;
}
#core #all .nf-stufe__b{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:600;
  color:#0D1F33;
  padding:9px 20px;
  border-radius:999px;
  line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
#core #all .nf-stufe__b:hover{background:#F2F5F8;}
#core #all .nf-stufe__b.is-an{background:#0D1F33;color:#FFFFFF;}

@media(max-width:900px){
  #core #all .nf-korb__buehne{width:100%;max-width:320px;}
  #core #all .nf-stufe__b{padding:8px 15px;font-size:12px;}
}

/* ==== Schriftzug richtig platziert und gleitender Regler ====
   Das Wort saß bei 34 Prozent - das ist rechts neben der Box. "Core"
   beginnt bei rund 4 Prozent, der Zusatz gehört direkt darunter.
   Der Regler bekommt einen Läufer, der zur gewählten Stufe gleitet;
   die Knoepfe wechseln dann nur noch die Schriftfarbe. */
#core #all .nf-karton__stufe{
  left:4.5% !important;
  top:56% !important;
  font-size:clamp(10px,1.35vw,17px) !important;
  font-weight:500 !important;
  color:#2A2A2A !important;
  z-index:2;
}

#core #all .nf-stufe{position:relative;}
#core #all .nf-stufe__lauf{
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  border-radius:999px;
  background:#0D1F33;
  transition:transform .3s cubic-bezier(.16,.84,.28,1), width .3s cubic-bezier(.16,.84,.28,1);
  z-index:0;
  pointer-events:none;
}
#core #all .nf-stufe__b{position:relative;z-index:1;background:transparent !important;}
#core #all .nf-stufe__b.is-an{background:transparent !important;color:#FFFFFF !important;}
#core #all .nf-stufe__b:hover{background:transparent !important;}
#core #all .nf-stufe__b:not(.is-an):hover{color:#5A6B7D !important;}

/* ==== Zusagen und Stufenschalter auf eine Höhe ====
   Beide Spalten werden auf volle Höhe gezogen, danach schiebt
   margin-top:auto die jeweils unterste Zeile an denselben Fußpunkt.
   Dadurch stimmt die Linie unabhängig davon, wie lang der Text oder
   wie hoch das Bild gerade ist. */
#core #all .nf-korb{align-items:stretch !important;}
#core #all .nf-korb__text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
#core #all .nf-korb__buehne{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
#core #all .nf-korb .nf-vertrauen{margin-top:44px !important;margin-bottom:0 !important;}
#core #all .nf-stufe{margin:22px auto 0 !important;}

/* Beide Zeilen gleich hoch, damit die Mitten aufeinander liegen. */
#core #all .nf-korb .nf-vertrauen__p{min-height:38px;display:flex !important;flex-direction:column;justify-content:center;}
#core #all .nf-stufe__b{padding:10px 20px !important;}

/* ==== Schriftzug auf die Vorderseite, unten links ====
   Vorher stand er links neben der Box, weil die Bühne inzwischen eine
   Spalte ist und der Bezugspunkt dadurch verrutscht war. Die Bahn wird
   jetzt ausdrücklich auf das Bild bezogen. Die leichte Neigung nimmt
   die Perspektive der Schachtel auf, damit der Text aufliegt statt
   davorzuschweben. */
#core #all .nf-korb__buehne{position:relative !important;}
#core #all .nf-karton__stufe{
  position:absolute !important;
  left:10.5% !important;
  top:auto !important;
  bottom:23% !important;
  transform:rotate(-2.4deg) skewY(-1.2deg);
  transform-origin:left bottom;
  font-size:clamp(11px,1.5vw,19px) !important;
  font-weight:700 !important;
  letter-spacing:.005em !important;
  color:#1F1F1F !important;
  z-index:2;
}
#core #all .nf-karton__stufe.wechselt{opacity:0;}

/* Beim Überfahren einer nicht gewählten Stufe wieder die graue Pille. */
#core #all .nf-stufe__b:not(.is-an):hover{
  background:#EEF1F5 !important;
  color:#0D1F33 !important;
}

/* Der Schriftzug bezieht sich jetzt auf den Bildkasten, nicht auf die
   ganze Bahn - so sitzt er zuverlässig auf der Vorderseite. */
#core #all .nf-korb__bildbox{position:relative;display:block;width:100%;}
#core #all .nf-korb__bildbox .nf-korb__bild{display:block;width:100% !important;max-width:none !important;}
#core #all .nf-karton__stufe{
  left:11% !important;
  bottom:20% !important;
  top:auto !important;
}

/* ==== Drei Korrekturen ====
   1. Der Schriftzug lag links neben der Schachtel. Die Vorderseite
      beginnt erst bei rund 29 Prozent der Bilddatei - davor ist leerer
      Raum. Ausgemessen an der gerenderten Box, nicht geschätzt.
   2. Der linke Knopf hatte dunkle Schrift auf dunklem Grund.
   3. Nichts weiter. */
#core #all .nf-karton__stufe{
  left:29% !important;
  bottom:19% !important;
  top:auto !important;
}

#core #all .nf-korb__cta,
#core #all .nf-korb__cta *{color:#FFFFFF !important;}
#core #all .nf-korb__cta:hover,
#core #all .nf-korb__cta:hover *{color:#FFFFFF !important;}

/* Neigung nach rechts: die Schachtel faellt nach rechts ab, der
   Schriftzug muss dieselbe Richtung nehmen, sonst liegt er nicht auf. */
#core #all .nf-karton__stufe{transform:rotate(2.6deg) skewY(1.3deg) !important;transform-origin:left top !important;}

/* ==== Scroll-Hinweis unter dem Film ====
   Erscheint erst, wenn der Film durch ist - vorher soll nichts vom
   Video ablenken. Die Bewegung ist bewusst klein und langsam; sie
   verschwindet, wenn im System weniger Bewegung eingestellt ist. */
#core #all .nf-runter{
  position:absolute;
  left:50%;
  bottom:52px;
  width:46px;
  height:46px;
  margin-left:-23px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(3,5,9,.35);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
  z-index:4;
  padding:0;
}
#core #all .nf-hero[data-film="fertig"] .nf-runter{
  opacity:1;
  visibility:visible;
  transform:none;
  animation:nfRunterWippt 2.2s ease-in-out .6s infinite;
}
#core #all .nf-runter::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:11px;
  margin:-7px 0 0 -6px;
  border-right:2px solid #FFFFFF;
  border-bottom:2px solid #FFFFFF;
  transform:rotate(45deg);
}
#core #all .nf-runter:hover{
  background:rgba(209,254,23,.18);
  border-color:#D1FE17;
}
#core #all .nf-runter:hover::after{border-color:#D1FE17;}

@keyframes nfRunterWippt{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(7px);}
}
@media (prefers-reduced-motion: reduce){
  #core #all .nf-hero[data-film="fertig"] .nf-runter{animation:none;}
}
@media(max-width:760px){
  #core #all .nf-runter{bottom:38px;width:40px;height:40px;margin-left:-20px;}
}

/* Der Karton fährt jetzt wirklich heran - die Werte brauchen Nachdruck,
   weil die Breitenregel des Bildes ebenfalls mit Nachdruck steht. */
#core #all .nf-korb__bild.faehrt-ein{
  opacity:0 !important;
  transform:scale(.8) translateY(16px) !important;
}
#core #all .nf-korb__bild.faehrt-ein.ist-da{
  opacity:1 !important;
  transform:none !important;
}

/* Der Schriftzug fährt mit dem Karton heran - er gehört optisch auf
   die Schachtel, also darf er nicht schon dastehen, während die Box
   noch unterwegs ist. Er startet minimal später, dann wirkt es, als
   wäre er aufgedruckt. */
#core #all .nf-korb__bild.faehrt-ein ~ .nf-karton__stufe{
  opacity:0;
  transform:rotate(2.6deg) skewY(1.3deg) scale(.8) translateY(16px) !important;
  transition:opacity .6s ease .15s, transform .9s cubic-bezier(.16,.84,.28,1) .1s;
}
#core #all .nf-korb__bild.faehrt-ein.ist-da ~ .nf-karton__stufe{
  opacity:1;
  transform:rotate(2.6deg) skewY(1.3deg) !important;
}

/* Der Schriftzug kam schräg von links herein, weil er aus seiner
   linken oberen Ecke skaliert wurde. Ohne Skalierung fährt er - wie
   der Karton - schlicht von unten auf. */
#core #all .nf-korb__bild.faehrt-ein ~ .nf-karton__stufe{
  transform:rotate(2.6deg) skewY(1.3deg) translateY(20px) !important;
}
#core #all .nf-korb__bild.faehrt-ein.ist-da ~ .nf-karton__stufe{
  transform:rotate(2.6deg) skewY(1.3deg) !important;
}

/* Gleich viel Luft oben und unten im Block "Im Lieferumfang". */
#core #all .nf-s1-l132-re4x8w6{padding-top:104px !important;}
#core #all .nf-s1-l132-cusxl1d{padding-bottom:104px !important;}

/* ==== Scroll-Hinweis: zwei Winkel, der untere größer ====
   Kein Rahmen, keine Fläche, kein Gelb. Zwei weisse Winkel
   übereinander, der obere kleiner und blasser, der untere größer
   und voll deckend - das erzeugt Richtung und Tiefe zugleich. */
#core #all .nf-runter{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  width:46px !important;
  height:42px !important;
  margin-left:-23px !important;
}
#core #all .nf-runter::before,
#core #all .nf-runter::after{
  content:"";
  position:absolute;
  left:50%;
  transform:rotate(45deg);
  box-sizing:border-box;
  border-right-style:solid;
  border-bottom-style:solid;
  border-right-color:#FFFFFF;
  border-bottom-color:#FFFFFF;
}
/* oben: kleiner, zurückgenommen */
#core #all .nf-runter::before{
  top:2px;
  width:13px;
  height:13px;
  margin-left:-6.5px;
  border-right-width:3px;
  border-bottom-width:3px;
  opacity:.5;
}
/* unten: größer und kräftiger */
#core #all .nf-runter::after{
  top:14px;
  width:20px;
  height:20px;
  margin-left:-10px;
  border-right-width:4px;
  border-bottom-width:4px;
  opacity:1;
}
#core #all .nf-runter:hover{background:transparent !important;border:0 !important;}
#core #all .nf-runter:hover::before{opacity:.8;}

/* Der Schriftzug kommt jetzt leicht von oben rechts herein - als würde
   er sich auf die Schachtel legen, statt von unten aufzutauchen. */
#core #all .nf-korb__bild.faehrt-ein ~ .nf-karton__stufe{
  transform:rotate(2.6deg) skewY(1.3deg) translate(22px,-16px) !important;
}
#core #all .nf-korb__bild.faehrt-ein.ist-da ~ .nf-karton__stufe{
  transform:rotate(2.6deg) skewY(1.3deg) translate(0,0) !important;
}

/* Der Schriftzug legte einen zu weiten Weg zurück und war länger
   unterwegs als der Karton. Jetzt nur noch ein kurzer Versatz und eine
   Dauer, die vor dem Karton endet - so wirkt er aufgedruckt statt
   nachträglich angeflogen. */
#core #all .nf-korb__bild.faehrt-ein ~ .nf-karton__stufe{
  transform:rotate(2.6deg) skewY(1.3deg) translate(9px,-6px) !important;
  transition:opacity .32s ease .1s, transform .38s cubic-bezier(.16,.84,.28,1) .1s !important;
}
#core #all .nf-korb__bild.faehrt-ein.ist-da ~ .nf-karton__stufe{
  transform:rotate(2.6deg) skewY(1.3deg) translate(0,0) !important;
}

/* ==== Platz für die feste Kopfzeile beim Anspringen ====
   Wer per Anker oder Pfeil hierher kommt, landete direkt unter der
   Kopfzeile - die Zeile IM LIEFERUMFANG klebte daran. scroll-margin-top
   hält den Browser auf Abstand, ohne den Abstand im Fluss zu
   verändern. Zusätzlich etwas mehr Polster oben im Block. */
#core #all #funktionen,
#core #all .nf-korb,
#core #all .nf-s1-l132-cusxl1d,
#core #all .nf-s1-l132-re4x8w6{
  scroll-margin-top:110px;
}
#core #all .nf-s1-l132-re4x8w6{padding-top:132px !important;}
#core #all .nf-s1-l132-cusxl1d{padding-bottom:132px !important;}

/* NF-CORE-PFEIL-CHEVRON v1 */
#core #all .nf-runter::before,
#core #all .nf-hero[data-film="fertig"] .nf-runter::before,
#core #all .nf-runter:hover::before{display:none!important;content:none!important;width:0!important;height:0!important;border:0!important;}
#core #all .nf-runter::after,
#core #all .nf-hero[data-film="fertig"] .nf-runter::after{content:""!important;display:block!important;position:absolute!important;left:50%!important;top:44%!important;width:22px!important;height:22px!important;border:0!important;border-right:4px solid #fff!important;border-bottom:4px solid #fff!important;background:none!important;opacity:.95!important;border-radius:2px!important;transform:translate(-50%,-50%) rotate(45deg)!important;}
#core #all .nf-runter:hover::after{opacity:1!important;}

/* NF-CORE-GESTALTUNG v1 */
#core #all .nf-gest{display:flex;align-items:center;gap:56px;max-width:1200px;margin:0 auto;padding:0 20px;}
#core #all .nf-gest__text{flex:1 1 40%;max-width:480px;}
#core #all .nf-gest__bild{flex:1 1 60%;min-width:0;}
#core #all .nf-gest__bild img{width:100%;height:auto;display:block;}
#core #all .nf-gest__augen{display:block;font-size:13px;letter-spacing:.14em;font-weight:600;color:#6B7A88;margin-bottom:14px;}
#core #all .nf-gest__titel{font-size:clamp(30px,3.4vw,46px);line-height:1.08;font-weight:700;color:#0D1F33;margin:0 0 18px;}
#core #all .nf-gest__lead{font-size:18px;line-height:1.6;color:#48586a;margin:0 0 24px;}
#core #all .nf-gest__punkte{list-style:none;margin:0;padding:0;}
#core #all .nf-gest__punkte li{position:relative;padding-left:32px;margin:12px 0;font-size:16px;color:#3a4756;}
#core #all .nf-gest__punkte li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;background:#0D1F33;}
#core #all .nf-gest__punkte li::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(43deg);}
@media(max-width:900px){#core #all .nf-gest{flex-direction:column;gap:30px;align-items:flex-start;}#core #all .nf-gest__text,#core #all .nf-gest__bild{max-width:100%;flex-basis:auto;width:100%;}}

/* NF-CORE-GESTDRAG-CSS v1 */
#core #all .nf-gest__bild{cursor:grab;touch-action:pan-y;}
#core #all .nf-gest__bild:active{cursor:grabbing;}
#core #all .nf-gest__bild img{will-change:transform;user-select:none;-webkit-user-drag:none;}

/* NF-CORE-NUTZE-ABSTAND v1 */
#core #all .nf-s1-l132-e119y18r{margin-bottom:60px !important;}

/* NF-CORE-GEST-BTN v1 */
#core #all .nf-gest__btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:14px 24px;background:#FFFFFF;color:#0D1F33;border:1.5px solid #D8DFE6;border-radius:10px;font-weight:600;font-size:16px;line-height:1;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
#core #all .nf-gest__btn:hover{border-color:#0D1F33;box-shadow:0 8px 24px rgba(13,31,51,.10);transform:translateY(-1px);color:#0D1F33;}
#core #all .nf-gest__btn .nf-gest__pfeil{transition:transform .18s ease;}
#core #all .nf-gest__btn:hover .nf-gest__pfeil{transform:translateX(3px);}

/* NF-CORE-FOOTER-HEADER v1 */
#core #all .nf-topnav-cta{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;border-radius:10px !important;box-shadow:none !important;transition:border-color .18s ease,box-shadow .18s ease !important;}
#core #all .nf-topnav-cta:hover{border-color:#0D1F33 !important;box-shadow:0 6px 18px rgba(13,31,51,.10) !important;color:#0D1F33 !important;background:#FFFFFF !important;}
#core #all .site-footer img[alt*="PayPal" i]{background:transparent !important;padding:0 !important;}
#core #all .nf-gest__hint{margin:10px 0 0;font-size:15px;line-height:1.5;color:#6B7A88;}

/* NF-CORE-PAYPAL-TRANSP v1 */
#core #all .site-footer .nf-s1-f-e0c63e6de0,#core #all .site-footer .nf-s1-f-e0c63e6de0 img.nf-lay-img{background:transparent !important;background-color:transparent !important;padding:0 !important;}

/* NF-CORE-GEST-SOLO v1 */
#core #all .nf-gest-solo{max-width:820px;margin:16px auto 0;text-align:center;}
#core #all .nf-gest-solo .nf-gest__bild{width:100%;margin:0 auto;}
#core #all .nf-gest-solo .nf-gest__bild img{width:100%;height:auto;display:block;}
#core #all .nf-gest-solo .nf-gest__hint{margin:22px 0 0;}
#core #all .nf-gest-solo .nf-gest__btn{margin-top:16px;}

/* NF-CORE-GEST-FEAT v1 */
#core #all .nf-gest__feat{list-style:none;margin:24px 0 6px;padding:0;}
#core #all .nf-gest__feat li{display:flex;gap:14px;align-items:flex-start;margin:16px 0;}
#core #all .nf-gest__feat li::before,#core #all .nf-gest__feat li::after{content:none !important;}
#core #all .nf-gest__feat .nf-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#0D1F33;display:flex;align-items:center;justify-content:center;}
#core #all .nf-gest__feat .nf-ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#core #all .nf-gest__feat .nf-tx{display:block;}
#core #all .nf-gest__feat strong{display:block;color:#0D1F33;font-size:16px;font-weight:600;line-height:1.25;}
#core #all .nf-gest__feat em{display:block;font-style:normal;color:#6B7A88;font-size:14.5px;line-height:1.45;margin-top:2px;}

/* NF-CORE-GEST-CENTER v1 */
#core #all .nf-gest-c{max-width:1120px;margin:0 auto;padding:0 20px;text-align:center;}
#core #all .nf-gest-c .nf-gest__augen{margin-bottom:12px;}
#core #all .nf-gest-c .nf-gest__titel{margin:0 0 16px;}
#core #all .nf-gest-c .nf-gest__lead{max-width:720px;margin:0 auto 30px;}
#core #all .nf-gest-c .nf-gest__bild{max-width:900px;margin:0 auto;}
#core #all .nf-gest-c .nf-gest__feat--row{display:flex;gap:32px;justify-content:center;align-items:flex-start;margin:34px 0 0;flex-wrap:wrap;padding:0;list-style:none;}
#core #all .nf-gest-c .nf-gest__feat--row li{flex:1 1 260px;max-width:320px;text-align:left;margin:0;}
#core #all .nf-gest-c .nf-gest__hint{margin:26px 0 0;}
#core #all .nf-gest-c .nf-gest__btn{margin-top:16px;}
#core #all .nf-gest__feat .nf-ic svg{stroke:#D1FE17 !important;}
@media(max-width:760px){#core #all .nf-gest-c .nf-gest__feat--row{flex-direction:column;align-items:stretch;}}

/* NF-CORE-PK-EDITION v1 */
#core #all .nf-s1-l132-pk4v::before,#core #all .nf-s1-l132-pk4v::after,#core #all .nf-s1-l132-pk14v::before,#core #all .nf-s1-l132-pk14v::after,#core #all .nf-s1-l132-pk24v::before,#core #all .nf-s1-l132-pk24v::after{display:none !important;content:none !important;}
#core #all .nf-s1-l132-pk4v,#core #all .nf-s1-l132-pk14v,#core #all .nf-s1-l132-pk24v{text-transform:none !important;font-size:19px !important;font-weight:700 !important;color:#0D1F33 !important;letter-spacing:0 !important;gap:0 !important;}

/* NF-CORE-GEST-IC-PLAIN v1 */
#core #all .nf-gest__feat .nf-ic{background:none !important;background-color:transparent !important;width:auto !important;height:auto !important;border-radius:0 !important;flex:0 0 auto !important;}
#core #all .nf-gest__feat .nf-ic svg{width:26px !important;height:26px !important;stroke:#0D1F33 !important;}
#core #all .nf-gest__feat li{gap:13px !important;align-items:center !important;}

/* NF-CORE-PK-LAYOUT v1 */
#core #all .nf-s1-l132-pk3v,#core #all .nf-s1-l132-pk23v{margin-top:-40px !important;}
#core #all .nf-s1-l132-pk13v{transform:translateY(-40px) scale(1.06) !important;z-index:6 !important;position:relative !important;}

/* NF-CORE-PK-FIX v2 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk4v::before,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk4v::after,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk14v::before,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk14v::after,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk24v::before,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk24v::after{display:none !important;content:none !important;width:0 !important;height:0 !important;background:none !important;margin:0 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk4v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk14v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk24v{font-size:19px !important;font-weight:700 !important;text-transform:none !important;color:#0D1F33 !important;letter-spacing:0 !important;gap:0 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v{margin-top:-40px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v{transform:translateY(-40px) scale(1.06) !important;z-index:6 !important;position:relative !important;}

/* NF-CORE-PK-BTN v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn::after{-webkit-mask:none !important;mask:none !important;background:none !important;content:"\203A" !important;width:auto !important;height:auto !important;font-size:1.25em !important;line-height:1 !important;margin-left:8px !important;transition:transform .18s ease !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn{justify-content:center !important;gap:2px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:hover::after{transform:translateX(3px) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn:hover{border-radius:12px !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v:hover{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #0D1F33 !important;border-radius:12px !important;box-shadow:0 8px 22px rgba(13,31,51,.10) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v:hover{background:#0a1826 !important;color:#FFFFFF !important;border:1.5px solid #0a1826 !important;border-radius:12px !important;}

/* NF-CORE-PK-LEFT v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk4v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk14v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk24v{justify-content:flex-start !important;text-align:left !important;width:100% !important;}

/* NF-CORE-PK-BTNHOVER v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover{background:#0D1F33 !important;color:#FFFFFF !important;border:1.5px solid #0D1F33 !important;border-radius:12px !important;box-shadow:none !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn:hover{background:#0a1826 !important;color:#FFFFFF !important;border:1.5px solid #0a1826 !important;border-radius:12px !important;box-shadow:none !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover::after,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover::after,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v .nf-lay-btn:hover::after{color:#FFFFFF !important;background:none !important;}

/* NF-CORE-PK-PAD v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk4v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk14v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk24v{padding-left:0 !important;}

/* NF-CORE-PK-PAD2 v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk4v.nf-s1-l132-pk4v.nf-s1-l132-pk4v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk14v.nf-s1-l132-pk14v.nf-s1-l132-pk14v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk24v.nf-s1-l132-pk24v.nf-s1-l132-pk24v{padding-left:0 !important;padding-right:0 !important;}

/* NF-CORE-CTA v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-e6s4f5 .nf-lay-btn{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;border-radius:10px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-e6s4f5 .nf-lay-btn:hover{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #0D1F33 !important;border-radius:10px !important;box-shadow:0 6px 18px rgba(13,31,51,.10) !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-e5s5pc .nf-lay-btn::before{content:"" !important;display:inline-block !important;width:17px !important;height:17px !important;margin-right:9px !important;vertical-align:-2px !important;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/contain !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/contain !important;}

/* NF-CORE-TERMIN-WHITE v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-e6s4f5.nf-s1-l132-e6s4f5.nf-s1-l132-e6s4f5 .nf-lay-btn.nf-lay-btn{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;border-radius:10px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-e6s4f5.nf-s1-l132-e6s4f5.nf-s1-l132-e6s4f5 .nf-lay-btn.nf-lay-btn:hover{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #0D1F33 !important;border-radius:10px !important;box-shadow:0 6px 18px rgba(13,31,51,.10) !important;filter:none !important;}

/* NF-CORE-CTA2 v1 */
#core #all .nf-s1-l132-e5s5pc .nf-lay-btn::before{content:"" !important;display:inline-block !important;width:17px !important;height:17px !important;margin-right:9px !important;vertical-align:-2px !important;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/contain !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E") no-repeat center/contain !important;}
#core #all .nf-s1-l132-e6s4f5 .nf-lay-btn{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;border-radius:10px !important;}
#core #all .nf-s1-l132-e6s4f5 .nf-lay-btn:hover{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #0D1F33 !important;border-radius:10px !important;box-shadow:0 6px 18px rgba(13,31,51,.10) !important;filter:none !important;}

/* NF-CORE-PK-TOP v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v.nf-s1-l132-pk3v.nf-s1-l132-pk3v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v.nf-s1-l132-pk23v.nf-s1-l132-pk23v{padding-top:18px !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v.nf-s1-l132-pk13v.nf-s1-l132-pk13v{padding-top:26px !important;}

/* NF-CORE-PK-LEADH v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-r17p2kq.nf-s1-l132-r17p2kq.nf-s1-l132-r17p2kq,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-c5p4aa.nf-s1-l132-c5p4aa.nf-s1-l132-c5p4aa{height:auto !important;min-height:0 !important;}

/* NF-CORE-PK-LEADPB v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-c5p4aa.nf-s1-l132-c5p4aa.nf-s1-l132-c5p4aa{padding-bottom:8px !important;}

/* NF-CORE-PK-ADJ v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v.nf-s1-l132-pk3v.nf-s1-l132-pk3v,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v.nf-s1-l132-pk23v.nf-s1-l132-pk23v{margin-top:0 !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v.nf-s1-l132-pk13v.nf-s1-l132-pk13v{transform:translateY(-26px) scale(1.05) !important;}

/* NF-CORE-PK-LEADW v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk2v.nf-s1-l132-pk2v.nf-s1-l132-pk2v{max-width:720px !important;}

/* NF-CORE-SEG-VH v1 */
#core #all #layout #main #content .nf-s1-l132-cusxl1d,
#core #all #layout #main #content .nf-s1-l132-c101y7gf,
#core #all #layout #main #content .nf-s1-l132-c15p3pm,
#core #all #layout #main #content .nf-s1-l132-c_outcome,
#core #all #layout #main #content .nf-s1-l132-c74y6u2,
#core #all #layout #main #content .nf-s1-l132-c149y1hr,
#core #all #layout #main #content .nf-s1-l132-c_schnitt{min-height:100svh !important;justify-content:flex-start !important;}

/* NF-CORE-SEG-VH2 v1 */
#core #all #layout #main #content .nf-s1-l132-coutcome,
#core #all #layout #main #content .nf-s1-l132-cschnitt{min-height:100svh !important;justify-content:flex-start !important;}

/* NF-CORE-HEADER-W v1 */
#core #all .nf-s1-h-clzppu8yd{max-width:1240px !important;}

/* NF-CORE-SEG-NOMINH v1 */
#core #all #layout #main #content .nf-s1-l132-coutcome,#core #all #layout #main #content .nf-s1-l132-c74y6u2,#core #all #layout #main #content .nf-s1-l132-cschnitt,#core #all #layout #main #content .nf-s1-l132-c101y7gf,#core #all #layout #main #content .nf-s1-l132-c149y1hr{min-height:0 !important;}

/* NF-CORE-PK-NOBORDER v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v.nf-s1-l132-pk13v.nf-s1-l132-pk13v{border:0 !important;outline:none !important;box-shadow:0 18px 46px rgba(13,31,51,.12) !important;}

/* NF-CORE-PK-WRAPHOVER v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk22v:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v:hover{background:transparent !important;border:0 !important;outline:none !important;box-shadow:none !important;filter:none !important;transform:none !important;}

/* NF-CORE-PK-SIDEHOVER v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #0D1F33 !important;border-radius:12px !important;box-shadow:0 8px 22px rgba(13,31,51,.10) !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk12v .nf-lay-btn:hover::after,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk32v .nf-lay-btn:hover::after{color:#0D1F33 !important;background:none !important;}

/* NF-CORE-PK-CARDHOVER v1 */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;box-shadow:none !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk13v:hover .nf-lay-btn{background:#0D1F33 !important;color:#FFFFFF !important;border:1.5px solid #0D1F33 !important;box-shadow:none !important;filter:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn:hover,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn:hover{background:#FFFFFF !important;color:#0D1F33 !important;border:1.5px solid #0D1F33 !important;box-shadow:0 8px 22px rgba(13,31,51,.10) !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk3v:hover .nf-lay-btn:hover::after,#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-s1-l132-pk23v:hover .nf-lay-btn:hover::after{color:#0D1F33 !important;}


/* ===================== NF-CORE-DL-REDESIGN v1 =====================
   Downloads-Seite an das Design der Startseiten-Preiskarten angleichen:
   runde weisse Karten mit weichem Schatten, dunkelblaue Knoepfe mit
   Chevron, primaerer ZIP-Knopf gruen. Kein Tuerkis, kein eckiger Look.
   Hohe Spezifitaet (#core #all #layout #main #content), da
   css/layout-generated.css NACH style.css laedt. */

/* Karten: weiss, radius 18px, dezenter Rahmen, weicher Schatten */
#core #all #layout #main #content .nf-dl-karte,
#core #all #layout #main #content .nf-dl-weg{
  background:#FFFFFF !important;
  border:1px solid #E8ECF0 !important;
  border-radius:18px !important;
  box-shadow:0 6px 24px rgba(13,31,51,.05) !important;
}
#core #all #layout #main #content .nf-dl-karte{padding:28px 30px !important;}
#core #all #layout #main #content .nf-dl-weg{padding:28px 28px !important;}
#core #all #layout #main #content .nf-dl-weg:hover,
#core #all #layout #main #content .nf-dl-karte:hover{
  box-shadow:0 14px 44px rgba(13,31,51,.10) !important;
}
/* Kartentexte in den Marken-Farben */
#core #all #layout #main #content .nf-dl-karte b,
#core #all #layout #main #content .nf-dl-weg b{color:#0D1F33 !important;}
#core #all #layout #main #content .nf-dl-karte i,
#core #all #layout #main #content .nf-dl-weg p{color:#6B7A88 !important;}

/* Knopf-Grundform: dunkelblau, rund, mit Chevron - wie die Preiskarten */
#core #all #layout #main #content .nf-dl-knopf{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:48px !important;padding:0 24px !important;
  background:#0D1F33 !important;color:#FFFFFF !important;
  border:1.5px solid #0D1F33 !important;border-radius:11px !important;
  font-weight:600 !important;font-size:15px !important;text-decoration:none !important;
  transition:.2s !important;filter:none !important;
}
#core #all #layout #main #content .nf-dl-knopf:hover{
  background:#16304D !important;border-color:#16304D !important;color:#FFFFFF !important;filter:none !important;
}
#core #all #layout #main #content .nf-dl-knopf::after{
  content:"\203A" !important;font-size:1.25em !important;line-height:1 !important;
  margin-left:8px !important;transition:transform .18s ease !important;
}
#core #all #layout #main #content .nf-dl-knopf:hover::after{transform:translateX(3px) !important;}

/* Primaerer CTA (ZIP in der Versionskarte): gruener Akzent, sparsam */
#core #all #layout #main #content .nf-dl-karte .nf-dl-knopf{
  background:#D1FE17 !important;border-color:#D1FE17 !important;color:#19181C !important;
}
#core #all #layout #main #content .nf-dl-karte .nf-dl-knopf:hover{
  background:#C2ED12 !important;border-color:#C2ED12 !important;color:#19181C !important;
}
/* ===================== /NF-CORE-DL-REDESIGN v1 ===================== */

/* NF-CORE-PFEIL-FIX v1 -- Die Einblende-Transition des Runter-Pfeils blieb im
   Zusammenspiel mit Video-/Einfahr-System bei opacity:0 haengen. Ohne
   Transition erscheint der Pfeil zuverlaessig, sobald der Film fertig ist. */
#core #all .nf-runter{transition:none !important;}
/* NF-CORE-PFEIL-FIX:END */

/* NF-CORE-HEROBTN v1 -- linker Hero-Button (Kostenlos testen) in Navy mit
   weisser Schrift, wie die anderen dunklen Buttons der Seite. */
#core #all #layout #main #content .nf-s1-l132-e6q3yf .nf-lay-btn{background:#0D1F33 !important;color:#FFFFFF !important;border:0 !important;}
#core #all #layout #main #content .nf-s1-l132-e6q3yf .nf-lay-btn:hover{background:#16304D !important;color:#FFFFFF !important;}
/* NF-CORE-HEROBTN:END */

/* NF-CORE-KORB-ALIGN v1 -- Box-Streifen (.nf-korb) auf dieselbe Inhaltsbreite
   wie alle anderen Sektionen: 1200px, Einzug 168px (statt 1280/128, das stand
   links raus). -600px = halbe Inhaltsbreite. */
#core #all .nf-korb{padding-left:max(24px, -600px + 50vw) !important;padding-right:max(24px, -600px + 50vw) !important;}
/* NF-CORE-KORB-ALIGN:END */

/* NF-CORE-SZENE-VH v5 */
#core #all #layout #main #content .nf-s1-l132-c11q31u,
#core #all #layout #main #content .nf-s1-l132-azmtcvl0ac1,
#core #all #layout #main #content .nf-s1-l132-c101y7gf,
#core #all #layout #main #content .nf-s1-l132-cschnitt,
#core #all #layout #main #content .nf-s1-l132-c15p3pm,
#core #all #layout #main #content .nf-s1-l132-c215y753,
#core #all #layout #main #content .nf-s1-l132-c10s505{ min-height:100svh !important; }
/* NF-CORE-SZENE-VH:END */

/* NF-CORE-SYSTEM-WEISS v1 */
#core #all #layout #main #content .nf-s1-l132-cusxl1d{background:#FFFFFF !important;}
#core #all #layout #main #content .nf-korb{background:#FFFFFF !important;}
/* NF-CORE-SYSTEM-WEISS:END */

/* NF-CORE-VERTRAUEN v1 */
#core #all #layout #main #content .nf-korb .nf-vertrauen{column-gap:20px !important;row-gap:12px !important;}
/* NF-CORE-VERTRAUEN:END */

/* NF-CORE-KICHIP-VIDEO v1 */
#core #all .nf-s1-l132-c143y3pp{position:relative;overflow:hidden;}
#core #all .nf-kichip-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .6s ease;pointer-events:none;}
#core #all .nf-s1-l132-c143y3pp.nf-kichip-playing .nf-kichip-video{opacity:1;}
#core #all .nf-s1-l132-c143y3pp > *:not(.nf-kichip-video):not(.nf-kichip-bar){position:relative;z-index:2;}
#core #all .nf-kichip-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:3;opacity:0;transition:opacity .3s ease;}
#core #all .nf-s1-l132-c143y3pp.nf-kichip-loading .nf-kichip-bar{opacity:1;}
#core #all .nf-kichip-bar span{display:block;height:100%;width:0;background:#D1FE17;transition:width .25s ease;}
/* NF-CORE-KICHIP-VIDEO:END */

/* NF-CORE-TERMIN v2 */
#core #all #layout #main #content .nf-termin-sektion .nf-lay-row{align-items:stretch;}
#core #all #layout #main #content .nf-termin-links{align-self:stretch !important;border-right:1px solid #E2E6EA;display:flex;flex-direction:column;justify-content:center;}
#core #all #layout #main #content .nf-termin-rechts{align-self:stretch !important;display:flex;flex-direction:column;justify-content:center;}
/* NF-CORE-TERMIN:END */

/* NF-CORE-TERMIN-CAL v1 */
#core #all .nf-termin-rechts .flatpickr-day.flatpickr-disabled{background:#FFFFFF !important;}
/* NF-CORE-TERMIN-CAL:END */
/* NF-CORE-PK-NOSHADOW v1 -- weisse Rand-Buttons (Basic/Ultimate Paket waehlen)
   bekommen beim Hover KEINEN Schatten. */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-btn--outline:hover{box-shadow:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-el:has(.nf-lay-btn--outline):hover{box-shadow:none !important;}
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-lay-el:has(.nf-lay-btn--outline):hover .nf-lay-btn{box-shadow:none !important;}
/* NF-CORE-PK-NOSHADOW:END */
/* NF-CORE-NFSZENE v1 -- jede gewrappte Szene fuellt die Fensterhoehe, Inhalt oben. */
#core #all #layout #main #content .nf-szene{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;}
/* NF-CORE-NFSZENE:END */
/* NF-CORE-SZENE-PAD v1 -- einheitliches Oben-Padding (72px) im Content-Div
   jeder Szene; Hero-Video ausgenommen. */
#core #all #layout #main #content .nf-szene,
#core #all #layout #main #content .nf-s1-l132-cusxl1d,
#core #all #layout #main #content .nf-s1-l132-c101y7gf,
#core #all #layout #main #content .nf-s1-l132-c143y3pp,
#core #all #layout #main #content .nf-s1-l132-c15p3pm,
#core #all #layout #main #content .nf-s1-l132-c215y753,
#core #all #layout #main #content .nf-termin-sektion{ padding-top:72px !important; }
/* NF-CORE-SZENE-PAD:END */

/* NF-CORE-LINIE-UNTEN v1 -- EINE feste Kontroll-Linie am unteren Bildschirmrand,
   sonst keine. Header ohne Border. System-Block exakt fensterhoch. */
#core #all #header{border-bottom:0 !important;}
/* System "Ein System"-Block exakt eine Fensterhoehe (Padding rein, border-box) */
#core #all #layout #main #content .nf-s1-l132-cusxl1d{padding-top:0 !important;}
#core #all #layout #main #content .nf-s1-l132-azmtcvl0ac1{box-sizing:border-box !important;padding-top:72px !important;min-height:100svh !important;border-bottom:0 !important;}
#core #all #layout #main #content .nf-korb{border-bottom:0 !important;}
/* Video/Hero, Gestaltung, Integration, Preise mind. Fensterhoehe */
#core #all #layout #main #content .nf-s1-l132-c11q31u,
#core #all #layout #main #content .nf-s1-l132-c101y7gf,
#core #all #layout #main #content .nf-s1-l132-cschnitt,
#core #all #layout #main #content .nf-szene,
#core #all #layout #main #content .nf-s1-l132-c15p3pm{min-height:100svh !important;}
/* NF-CORE-LINIE-UNTEN:END */

/* NF-CORE-EYEBROW-ALIGN v1 */
#core #all #layout #main #content .nf-s1-l132-azmtcvl0ac1.nf-s1-l132-azmtcvl0ac1{padding-top:60px!important}
#core #all #layout #main #content .nf-s1-l132-c101y7gf.nf-s1-l132-c101y7gf{padding-top:104px!important}
#core #all #layout #main #content .nf-s1-l132-re4x8w6.nf-s1-l132-re4x8w6{padding-top:56px!important}
/* NF-CORE-EYEBROW-ALIGN:END */

/* NF-CORE-PREISE-EYEBROW v1 -- PREISE-Ueberschrift grau wie die anderen Eyebrows */
#core #all #layout #main #content .nf-s1-l132-e1p74s.nf-s1-l132-e1p74s,#core #all #layout #main #content .nf-s1-l132-e1p74s.nf-s1-l132-e1p74s *{color:#52606D !important}
/* NF-CORE-PREISE-EYEBROW:END */

/* NF-CORE-EINSATZ-LUECKE v1 -- 132px padding-bottom an cusxl1d raus, sonst zwei rote Linien (Funktion-Unterkante + EINSATZBEREICHE-Oberkante) mit Luecke */
#core #all #layout #main #content .nf-s1-l132-cusxl1d{padding-bottom:0 !important}
/* NF-CORE-EINSATZ-LUECKE:END */

/* NF-CORE-PAKET-INFO v1 -- zentrierter grauer Link "mehr Informationen" ueber jedem Paket-waehlen-Button */
#core #all #layout #main #content .nf-paket-info{display:block !important;width:100%;text-align:center;color:#52606D;font-size:14px;line-height:1.4;margin:0 0 12px;cursor:pointer;text-decoration:none;transition:color .12s ease}
#core #all #layout #main #content .nf-paket-info:hover{color:#0D1F33;text-decoration:underline}
/* NF-CORE-PAKET-INFO:END */

/* NF-CORE-PAKET-INFO v2 -- grauer, zentrierter Link "mehr Informationen" direkt am Kartentext, 40px Abstand darunter */
#core #all #layout #main #content a.nf-paket-info.nf-paket-info{display:block !important;width:100%;text-align:center !important;color:#52606D !important;font-size:14px;line-height:1.4;margin:0 0 40px !important;cursor:pointer;text-decoration:none}
#core #all #layout #main #content a.nf-paket-info.nf-paket-info:hover{color:#0D1F33 !important;text-decoration:underline}
/* NF-CORE-PAKET-INFO:END */

/* NF-CORE-PAKET-INFO v3 -- grauer (helles Karten-Grau) zentrierter Link am Kartentext, 10px oben / 40px unten; hoehere Spezifitaet (c15p3pm) gegen Link-Farbregel */
#core #all #layout #main #content .nf-s1-l132-c15p3pm a.nf-paket-info.nf-paket-info{display:block !important;width:100%;text-align:center !important;color:#8A97A5 !important;font-size:14px;line-height:1.4;margin:10px 0 40px !important;cursor:pointer;text-decoration:none}
#core #all #layout #main #content .nf-s1-l132-c15p3pm a.nf-paket-info.nf-paket-info:hover{color:#0D1F33 !important;text-decoration:underline}
/* NF-CORE-PAKET-INFO:END */

/* NF-CORE-TERMIN-VORTEILE v1 -- Vorteils-Liste mit Icons in der linken Termin-Spalte */
#core #all #layout #main #content .nf-termin-vorteile{margin-top:30px;display:flex;flex-direction:column;max-width:460px}
#core #all #layout #main #content .nf-tv-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid rgba(13,31,51,.10)}
#core #all #layout #main #content .nf-tv-item:first-child{border-top:0;padding-top:0}
#core #all #layout #main #content .nf-tv-ico{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:rgba(13,31,51,.06);display:flex;align-items:center;justify-content:center;color:#0D1F33}
#core #all #layout #main #content .nf-tv-ico svg{width:22px;height:22px}
#core #all #layout #main #content .nf-tv-txt{display:flex;flex-direction:column}
#core #all #layout #main #content .nf-tv-txt strong{color:#0D1F33;font-size:16px;font-weight:600;line-height:1.3}
#core #all #layout #main #content .nf-tv-txt span{color:#52606D;font-size:14px;line-height:1.45;margin-top:3px}
/* NF-CORE-TERMIN-VORTEILE:END */

/* NF-CORE-TERMIN-VORTEILE v2 -- Icons ohne Box, linksbuendig, keine Trennlinien; Untertitel grau; Kalender max-Breite zentriert; Button weiss/outline mittig */
#core #all #layout #main #content .nf-termin-vorteile{margin-top:24px;display:flex;flex-direction:column;max-width:460px}
#core #all #layout #main #content .nf-tv-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:0}
#core #all #layout #main #content .nf-tv-ico{flex:0 0 auto;width:24px;height:24px;background:none;border-radius:0;color:#0D1F33;display:flex;align-items:center;justify-content:center;margin-top:1px}
#core #all #layout #main #content .nf-tv-ico svg{width:24px;height:24px}
#core #all #layout #main #content .nf-tv-txt{display:flex;flex-direction:column}
#core #all #layout #main #content .nf-tv-txt strong{color:#0D1F33;font-size:16px;font-weight:600;line-height:1.3}
#core #all #layout #main #content .nf-tv-txt span{color:#52606D;font-size:14px;line-height:1.45;margin-top:3px}
#core #all #layout #main #content .nf-s1-l132-etmh2,#core #all #layout #main #content .nf-s1-l132-etmh2 *{color:#52606D !important}
#core #all #layout #main #content .nf-s1-l132-etmcal{max-width:400px !important;margin-left:auto !important;margin-right:auto !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .flatpickr-calendar{max-width:100% !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .nf-bk-knopf{display:block !important;width:auto !important;min-width:0 !important;margin:18px auto 0 !important;background:#fff !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;border-radius:12px !important;padding:13px 30px !important;font-weight:600 !important;font-size:15px !important;box-shadow:none !important}
/* NF-CORE-TERMIN-VORTEILE:END */

/* NF-CORE-TERMIN-VORTEILE v3 -- Icon+Titel eine Zeile, Untertitel flush links (linksbuendig), keine Boxen/Linien; Untertitel grau; Kalender max-Breite; Button weiss/outline mittig */
#core #all #layout #main #content .nf-termin-vorteile{margin-top:24px;display:flex;flex-direction:column;max-width:460px}
#core #all #layout #main #content .nf-termin-vorteile,#core #all #layout #main #content .nf-tv-item,#core #all #layout #main #content .nf-tv-zeile,#core #all #layout #main #content .nf-tv-sub{text-align:left !important}
#core #all #layout #main #content .nf-tv-item{display:block !important;padding:11px 0;border-top:0}
#core #all #layout #main #content .nf-tv-zeile{display:flex !important;align-items:center;gap:10px}
#core #all #layout #main #content .nf-tv-ico{flex:0 0 auto;width:22px;height:22px;background:none;border-radius:0;color:#0D1F33;display:flex}
#core #all #layout #main #content .nf-tv-ico svg{width:22px;height:22px}
#core #all #layout #main #content .nf-tv-zeile strong{color:#0D1F33;font-size:16px;font-weight:600;line-height:1.3}
#core #all #layout #main #content .nf-tv-sub{display:block;color:#52606D;font-size:14px;line-height:1.45;margin-top:4px}
#core #all #layout #main #content .nf-s1-l132-etmh2,#core #all #layout #main #content .nf-s1-l132-etmh2 *{color:#52606D !important}
#core #all #layout #main #content .nf-s1-l132-etmcal{max-width:400px !important;margin-left:auto !important;margin-right:auto !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .flatpickr-calendar{max-width:100% !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .nf-bk-knopf{display:block !important;width:auto !important;min-width:0 !important;margin:18px auto 0 !important;background:#fff !important;color:#0D1F33 !important;border:1.5px solid #D8DFE6 !important;border-radius:12px !important;padding:13px 30px !important;font-weight:600 !important;font-size:15px !important;box-shadow:none !important}
/* NF-CORE-TERMIN-VORTEILE:END */

/* NF-CORE-TERMIN-VORTEILE v4 -- Text 18px (wie Absatz), Icon+Titel eine Zeile linksbuendig; Button uebernimmt Header-CTA-Look */
#core #all #layout #main #content .nf-termin-vorteile{margin-top:24px;display:flex;flex-direction:column;max-width:460px}
#core #all #layout #main #content .nf-termin-vorteile,#core #all #layout #main #content .nf-tv-item,#core #all #layout #main #content .nf-tv-zeile,#core #all #layout #main #content .nf-tv-sub{text-align:left !important}
#core #all #layout #main #content .nf-tv-item{display:block !important;padding:11px 0;border-top:0}
#core #all #layout #main #content .nf-tv-zeile{display:flex !important;align-items:center;gap:10px}
#core #all #layout #main #content .nf-tv-ico{flex:0 0 auto;width:22px;height:22px;background:none;border-radius:0;color:#0D1F33;display:flex}
#core #all #layout #main #content .nf-tv-ico svg{width:22px;height:22px}
#core #all #layout #main #content .nf-tv-zeile strong{color:#0D1F33;font-size:18px !important;font-weight:600;line-height:1.35}
#core #all #layout #main #content .nf-tv-sub{display:block;color:#52606D;font-size:15px !important;line-height:1.5;margin-top:3px}
#core #all #layout #main #content .nf-s1-l132-etmh2,#core #all #layout #main #content .nf-s1-l132-etmh2 *{color:#52606D !important}
#core #all #layout #main #content .nf-s1-l132-etmcal{max-width:400px !important;margin-left:auto !important;margin-right:auto !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .flatpickr-calendar{max-width:100% !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .nf-bk-knopf{display:block !important;width:auto !important;min-width:0 !important;height:auto !important;line-height:1.2 !important;margin:18px auto 0 !important;padding:12px 26px !important;font-size:14px !important}
#core #all #layout #main #content .nf-logo-link{display:inline-block;cursor:pointer}
/* NF-CORE-TERMIN-VORTEILE:END */

/* NF-CORE-CTA-NOSHADOW v1 -- Header-CTA (und Termin-Button) ohne Schatten beim Hover */
#all .nf-topnav-cta,#all .nf-topnav-cta:hover,#all .nf-topnav .nf-topnav-cta:hover{box-shadow:none !important}
/* NF-CORE-CTA-NOSHADOW:END */

/* NF-CORE-TERMIN-VORTEILE v5 -- Icon links, Titel+Untertitel als Spalte (Untertitel unter dem Titel); Titel 18px, Untertitel 15px; Abschnitts-Untertitel 15px */
#core #all #layout #main #content .nf-termin-vorteile{margin-top:24px;display:flex;flex-direction:column;max-width:460px}
#core #all #layout #main #content .nf-termin-vorteile,#core #all #layout #main #content .nf-tv-item,#core #all #layout #main #content .nf-tv-txt,#core #all #layout #main #content .nf-tv-txt *{text-align:left !important}
#core #all #layout #main #content .nf-tv-item{display:flex !important;align-items:flex-start;gap:12px;padding:11px 0;border-top:0}
#core #all #layout #main #content .nf-tv-ico{flex:0 0 auto;width:22px;height:22px;background:none;border-radius:0;color:#0D1F33;display:flex;margin-top:2px}
#core #all #layout #main #content .nf-tv-ico svg{width:22px;height:22px}
#core #all #layout #main #content .nf-tv-txt{display:flex;flex-direction:column}
#core #all #layout #main #content .nf-tv-txt strong{color:#0D1F33;font-size:18px !important;font-weight:600;line-height:1.35}
#core #all #layout #main #content .nf-tv-sub{display:block;color:#52606D;font-size:15px !important;line-height:1.5;margin-top:3px}
#core #all #layout #main #content .nf-s1-l132-etmh2,#core #all #layout #main #content .nf-s1-l132-etmh2 *{color:#52606D !important;font-size:15px !important}
#core #all #layout #main #content .nf-s1-l132-etmcal{max-width:400px !important;margin-left:auto !important;margin-right:auto !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .flatpickr-calendar{max-width:100% !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .nf-bk-knopf{display:block !important;width:auto !important;min-width:0 !important;height:auto !important;line-height:1.2 !important;margin:18px auto 0 !important;padding:12px 26px !important;font-size:14px !important}
#core #all #layout #main #content .nf-logo-link{display:inline-block;cursor:pointer}
/* NF-CORE-TERMIN-VORTEILE:END */

/* NF-CORE-TERMIN-VORTEILE v6 -- Icon+Titel/Untertitel-Spalte; Button konstant/mittig + Hover wie Header (Navy-Border, kein Schatten); Divider gerade; Abo-Switch weisser Rahmen */
#core #all #layout #main #content .nf-termin-vorteile{margin-top:24px;display:flex;flex-direction:column;max-width:460px}
#core #all #layout #main #content .nf-termin-vorteile,#core #all #layout #main #content .nf-tv-item,#core #all #layout #main #content .nf-tv-txt,#core #all #layout #main #content .nf-tv-txt *{text-align:left !important}
#core #all #layout #main #content .nf-tv-item{display:flex !important;align-items:flex-start;gap:12px;padding:11px 0;border-top:0}
#core #all #layout #main #content .nf-tv-ico{flex:0 0 auto;width:22px;height:22px;background:none;border-radius:0;color:#0D1F33;display:flex;margin-top:2px}
#core #all #layout #main #content .nf-tv-ico svg{width:22px;height:22px}
#core #all #layout #main #content .nf-tv-txt{display:flex;flex-direction:column}
#core #all #layout #main #content .nf-tv-txt strong{color:#0D1F33;font-size:18px !important;font-weight:600;line-height:1.35}
#core #all #layout #main #content .nf-tv-sub{display:block;color:#52606D;font-size:15px !important;line-height:1.5;margin-top:3px}
#core #all #layout #main #content .nf-s1-l132-etmh2,#core #all #layout #main #content .nf-s1-l132-etmh2 *{color:#52606D !important;font-size:15px !important}
#core #all #layout #main #content .nf-s1-l132-ctmlinks{border-radius:0 !important}
#core #all #layout #main #content .nf-s1-l132-etmcal{max-width:400px !important;margin-left:auto !important;margin-right:auto !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .flatpickr-calendar{max-width:100% !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .nf-bk-knopf{display:block !important;width:100% !important;height:auto !important;line-height:1.2 !important;margin:18px 0 0 !important;padding:12px 30px !important;font-size:14px !important}
#core #all #layout #main #content .nf-s1-l132-etmcal .nf-bk-knopf:hover{background:#fff !important;color:#0D1F33 !important;border-color:#0D1F33 !important;box-shadow:none !important}
#core #all #layout #main #content .nf-logo-link{display:inline-block;cursor:pointer}
/* NF-CORE-TERMIN-VORTEILE:END */

/* NF-CORE-ABOSWITCH v1 -- groesserer weisser Rahmen um den Monatlich/Jaehrlich-Schalter (hohe Spezifitaet, schlaegt c15p3pm-Regeln) */
#core #all #layout #main #content .nf-s1-l132-c15p3pm .nf-abo-schalter.nf-abo-schalter{padding:6px !important;border:3px solid #ffffff !important;box-shadow:0 0 0 1px #E2E7EC, 0 8px 22px rgba(13,31,51,.10) !important}
/* NF-CORE-ABOSWITCH:END */

/* NF-CORE-EMPFOHLEN-WEG v1 -- EMPFOHLEN-Label ueber der Pro-Karte entfernen */
#core #all #layout #main #content .nf-s1-l132-pk13v::before{content:none !important;display:none !important}
/* NF-CORE-EMPFOHLEN-WEG:END */

/* NF-CORE-CTA-NOSHADOW v2 -- Header-CTA (und Termin-Button) ohne Schatten, auch beim Hover */
#core #all .nf-topnav-cta,#core #all .nf-topnav-cta:hover,#core #all .nf-topnav .nf-topnav-cta:hover{box-shadow:none !important}
/* NF-CORE-CTA-NOSHADOW:END */

/* NF-CORE-TEILUNGEN v3 -- waagerechte Trennlinien pro Szene in hellgrau (oben + unten) */
#core #all #layout #main #content .nf-szene,
#core #all #layout #main #content .nf-s1-l132-azmtcvl0ac1,
#core #all #layout #main #content .nf-s1-l132-c11q31u,
#core #all #layout #main #content .nf-s1-l132-c101y7gf,
#core #all #layout #main #content .nf-s1-l132-c143y3pp,
#core #all #layout #main #content .nf-s1-l132-c15p3pm,
#core #all #layout #main #content .nf-s1-l132-c215y753,
#core #all #layout #main #content .nf-termin-sektion{ border-top:1px solid #D8DFE6 !important; border-bottom:1px solid #D8DFE6 !important; }
/* NF-CORE-TEILUNGEN:END */

/* NF-CORE-FOOTER v1 -- Social-Icons ohne Kreise + Newsletter-Feld neutral (kein Bläulich) */
#core #all .site-footer .nf-social{gap:20px !important;align-items:center !important}
#core #all .site-footer .nf-social__link{border:0 !important;border-radius:0 !important;background:transparent !important;width:auto !important;height:auto !important;padding:0 !important;color:#C6D0DB !important;transition:color .15s ease}
#core #all .site-footer .nf-social__link:hover{color:#ffffff !important;background:transparent !important;border:0 !important;box-shadow:none !important}
#core #all .site-footer .nf-social__link svg{width:20px !important;height:20px !important}
#core #all .site-footer .nf-nl-form{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;border-radius:10px !important}
#core #all .site-footer .nf-nl-form input{background:transparent !important;color:#ffffff !important;border:0 !important}
#core #all .site-footer .nf-nl-form input::placeholder{color:rgba(255,255,255,.5) !important}
/* NF-CORE-FOOTER:END */

/* NF-CORE-FOOTER v2 -- Social ohne Kreise, Newsletter neutral, unterer Balken zentriert: Copyright -> Icons -> inkl. MwSt */
#core #all .site-footer .nf-social{gap:20px !important;align-items:center !important}
#core #all .site-footer .nf-social__link{border:0 !important;border-radius:0 !important;background:transparent !important;width:auto !important;height:auto !important;padding:0 !important;color:#C6D0DB !important;transition:color .15s ease}
#core #all .site-footer .nf-social__link:hover{color:#ffffff !important;background:transparent !important;border:0 !important;box-shadow:none !important}
#core #all .site-footer .nf-social__link svg{width:20px !important;height:20px !important}
#core #all .site-footer .nf-nl-form{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;border-radius:10px !important}
#core #all .site-footer .nf-nl-form input{background:transparent !important;color:#ffffff !important;border:0 !important}
#core #all .site-footer .nf-nl-form input::placeholder{color:rgba(255,255,255,.5) !important}
#core #all .site-footer .nf-s1-f-rmsfohawj3{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:12px !important}
#core #all .site-footer .nf-s1-f-cmsfohawj2{display:flex !important;flex-direction:column !important;align-items:center !important;gap:12px !important;width:auto !important}
#core #all .site-footer .nf-s1-f-cmsfohawj2 .nf-s1-f-emshh7gll1{order:-1 !important}
#core #all .site-footer .nf-s1-f-rmsfohawj3 .nf-s1-f-cmsfohawj1{width:100% !important;text-align:center !important;margin:0 !important}
#core #all .site-footer .nf-s1-f-rmsfohawj3 .nf-s1-f-cmsfohawj1 *{text-align:center !important}
/* NF-CORE-FOOTER:END */

/* NF-CORE-MOBILE-SEARCH v1 -- Such-Lupe auf echtem Handy nicht mehr abgeschnitten (container-type/size + margin fix als echte @media, nicht nur nfed-vp-phone) */
@media (max-width: 768px){
  #core #all #topbar .nf-lay-el:has(.nf-search-lupe){container-type:normal !important;overflow:visible !important;min-width:0 !important;}
  #core #all #topbar .core-search{margin-left:0 !important;overflow:visible !important;}
  #core #all #topbar .nf-search-field,#core #all #topbar .nf-search-lupe,#core #all #topbar .nf-search-inner{overflow:visible !important;}
  #core #all #topbar .nf-search-lupe{width:auto !important;min-width:36px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
  #core #all #topbar .nf-search-lupe > svg{width:22px !important;height:22px !important;max-height:22px !important;}
}
/* NF-CORE-MOBILE-SEARCH:END */
/* ==== NeofireCss:ENDE ==== */