/* ==========================================================================
   Filvaro — Child-Template auf NOVA
   Weiss-gruen: viel Papier, Gruen traegt Marke und Aktion, Messing als Feinheit.
   Farben abgenommen vom Logo (Fassung "frisch"): Wortmarke #22633A,
   Blatt #6BA046, Henkel-Messing #D9BA76.
   ========================================================================== */

/* Unter beiden Namen registriert: 'Filvaro Grotesk' fuer unsere eigenen Regeln
   und 'Montserrat', damit NOVAs vorhandene Verwendung dieselbe Datei nimmt und
   die 85-KB-Fassung aus themes/base nicht zusaetzlich geladen wird. */
@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url('fonts/montserrat-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Filvaro Grotesk';
    /* Variabler Font, ein File fuer alle Schnitte. Ohne die Gewichtsspanne
       faelscht der Browser bei 800 kuenstlich fett und verschmiert die Formen. */
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url('fonts/montserrat-var.woff2') format('woff2');
}

:root {
    /* Sachlicher Handelsauftritt: der Grund ist neutral, Gruen traegt nur noch
       Marke und Aktion. Vorher stand alles in Gruentoenen — das las sich als
       Oeko-Seite, nicht als Haushaltswaren-Shop. */
    /* Schwarz und Signalgruen. Das Neongruen traegt Flaechen — Knoepfe,
       Abzeichen, Akzente auf Dunkel — immer mit dunkler Schrift darauf
       (9,4:1). Als Schrift auf Weiss ist es mit 1,9:1 unbrauchbar; dafuer
       gibt es --fv-signal-tief. */
    /* Seitengrund getoent (09.10.2026, Kundenwunsch "zu weiss, zu leer"):
       ein heller Stein mit einem Hauch Logogruen. Karten bleiben weiss —
       die Artikelfotos haben fast alle weissen Grund und stehen so als
       saubere Kachel auf der Flaeche, statt mit ihr zu verschwimmen. */
    --fv-papier:      #F1F2EC;   /* Seitengrund */
    --fv-weiss:       #FFFFFF;   /* Karten, Eingabefelder */
    --fv-nebel:       #EAECE5;   /* Flaechen auf dem Grund: Suche, Chips, Kaesten */
    --fv-kante:       #DFE2D9;   /* Linien */
    /* Zurueck auf das Gruen des Logos (Kundenwunsch 22.08.): Wald traegt
       Schrift und Knoepfe, Blatt die hellen Akzente auf Dunkel. Das
       Signalgruen #7FD14A war zu grell, sobald es Flaeche bekam. */
    --fv-signal:      #22633A;   /* Knoepfe und Flaechen — weisse Schrift darauf */
    --fv-signal-an:   #1B5230;   /* ueberfahren */
    --fv-signal-tief: #22633A;   /* Schrift und Links auf Weiss — 8,0:1 */
    --fv-blatt-hell:  #9BCA6A;   /* helle Akzente auf dunklem Grund */
    --fv-dunkel:      #16181C;   /* Kontrastflaechen, Fusszeile, Schrift auf Neon */
    --fv-dunkel-hell: #23262C;   /* Karten auf der Kontrastflaeche */
    --fv-tinte:       #16181C;   /* Ueberschriften und Fliesstext */
    --fv-grau:        #5F6469;   /* Nebentext — 6,4:1 auf Weiss */

    /* Alte Namen bleiben als Verweis bestehen, damit bestehende Regeln
       weiterlaufen, ohne dass jede einzeln umgeschrieben werden muss. */
    --fv-wald:      var(--fv-dunkel);
    --fv-wald-tief: var(--fv-dunkel);
    --fv-blatt:     var(--fv-blatt-hell);
    --fv-aktion:    var(--fv-signal-tief);
    --fv-aktion-an: #3C731D;
    --fv-messing:   #C9A15B;
    --fv-rund:      14px;      /* Karten */
    --fv-rund-weich: 999px;    /* Bedienelemente: Suche, Buttons, Pillen */
    --fv-schatten:  0 1px 2px rgba(22, 69, 42, .04), 0 8px 24px rgba(22, 69, 42, .06);
}

/* --- Grundlage ----------------------------------------------------------- */

body {
    background: var(--fv-papier);
    color: var(--fv-tinte);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: 'Filvaro Grotesk', 'Open Sans', system-ui, sans-serif;
    /* Ueberschriften stehen in Tinte, nicht in der Markenfarbe. Gruene
       Ueberschriften faerben die ganze Seite ein; die Marke wirkt staerker,
       wenn sie den Knoepfen vorbehalten bleibt. */
    color: var(--fv-tinte);
    letter-spacing: -.015em;
}

h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 800; }
h3, .h3 { font-weight: 600; }

a { color: var(--fv-aktion); }
a:hover, a:focus { color: var(--fv-aktion-an); }

hr { border-color: var(--fv-kante); }

/* --- Kopfzeile ----------------------------------------------------------- */

/* NOVA klappt beim Runterscrollen die Zeile mit Logo, Suche und Warenkorb
   weg (.hide-navbar -> display:none), nur die Kategorien bleiben. Manuel will
   den ganzen Kopf stehen lassen. */
@media (min-width: 992px) {
    header .hide-navbar { display: block !important; }
}

/* Serviceleiste ueber dem Logo: wirkt veraltet, die Links stehen im Fuss. */
.topbar-main { display: none !important; }

header,
.navbar-brand-wrapper,
#shop-nav {
    background: var(--fv-weiss);
}

header {
    border-bottom: 1px solid var(--fv-kante);
}

/* 78 px: die Wortbildmarke traegt den Claim unter dem Wort. Zusammen mit der
   eigenen Kopfsperrung (Bildmarke und Textblock gleich hoch, siehe
   design/logo_klassisch.py) steht der Claim damit auf gut 10 px statt auf 4. */
.navbar-brand img,
.navbar-brand-image {
    max-height: 78px;
    width: auto;
}

/* Suche nimmt den freien Platz zwischen Logo und Icons. */
#shop-nav > #search {
    flex: 1 1 0;
    max-width: 640px;
    margin: 0 2rem;
}

/* Die Autovervollstaendigung legt einen Wrapper mit fester Breite um das Feld —
   ohne diese Zeilen steht die Lupe mitten im Kasten. */
#shop-nav .twitter-typeahead {
    flex: 1 1 0;
    width: auto !important;
}

/* Weiche Suchleiste: das harte Rechteck ist der staerkste Alt-Marker. */
#search .form-control,
#search .input-group,
.search-wrapper .form-control {
    border-radius: var(--fv-rund-weich) !important;
    border-color: var(--fv-kante);
    background: var(--fv-nebel);
    box-shadow: none;
    height: 46px;
    padding-left: 1.25rem;
}

#search .form-control:focus {
    background: var(--fv-weiss);
    border-color: var(--fv-blatt);
    box-shadow: 0 0 0 4px rgba(107, 160, 70, .16);
}

#search .btn,
#search .input-group-append .btn {
    border-radius: var(--fv-rund-weich) !important;
    background: var(--fv-signal);
    border-color: var(--fv-signal);
    color: var(--fv-dunkel);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

#search .btn:hover { background: var(--fv-signal-an); border-color: var(--fv-signal-an); }

/* Betrag im Kopf ist ein Alt-Merkmal — steht weiterhin im Warenkorb-Dropdown. */
.cart-icon-dropdown-price { display: none !important; }

/* --- Linien-Icons statt gefuellter Glyphen -------------------------------
   Die Font-Awesome-Solid-Symbole wirken wie 2018. Statt die Templates
   anzufassen: Glyphe per font-size:0 ausblenden, ::before traegt das SVG als
   Maske, currentColor faerbt es. Der Zaehler-Badge liegt im selben Element und
   braucht deshalb eine eigene Schriftgroesse mit !important.
   ------------------------------------------------------------------------ */

#shop-nav .fas.fa-user,
#shop-nav .fas.fa-heart,
#shop-nav .fas.fa-shopping-cart,
#shop-nav .fa-user,
#shop-nav .fa-heart,
#shop-nav .fa-shopping-cart {
    font-size: 0 !important;
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--fv-tinte);
}

#shop-nav .fa-user::before,
#shop-nav .fa-heart::before,
#shop-nav .fa-shopping-cart::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -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;
}

#shop-nav .fa-user::before {
    -webkit-mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
            mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

#shop-nav .fa-heart::before {
    -webkit-mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.8 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
            mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.8 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

/* Einkaufstasche statt Wagen — im Handel die uebliche Metapher, und sie
   zitiert die Tasche aus dem Logo. */
#shop-nav .fa-shopping-cart::before {
    -webkit-mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
            mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* Zaehler am Warenkorb: liegt im selben Element wie die ausgeblendete Glyphe. */
#shop-nav .cart-quantity,
#shop-nav .badge {
    font-size: 11px !important;
    font-weight: 700;
    background: var(--fv-signal);
    color: var(--fv-dunkel);
}

/* --- Hauptnavigation ----------------------------------------------------- */

.navbar-nav .nav-link,
#mainNavigation .nav-link {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--fv-wald);
}

.navbar-nav .nav-link:hover,
#mainNavigation .nav-link:hover {
    color: var(--fv-aktion);
}

/* --- Bedienelemente ------------------------------------------------------ */

.btn {
    border-radius: var(--fv-rund-weich);
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .6rem 1.5rem;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

/* Waldgruen traegt weisse Schrift mit 8,0:1. (Beim hellen Signalgruen war es
   umgekehrt: dort trug nur dunkle Schrift.) */
.btn-primary {
    background: var(--fv-signal);
    border-color: var(--fv-signal);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--fv-signal-an) !important;
    border-color: var(--fv-signal-an) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--fv-aktion);
    border-color: var(--fv-aktion);
}

.btn-outline-primary:hover {
    background: var(--fv-aktion);
    border-color: var(--fv-aktion);
}

.btn-secondary {
    background: var(--fv-nebel);
    border-color: var(--fv-kante);
    color: var(--fv-wald);
}

.form-control {
    border-radius: 10px;
    border-color: var(--fv-kante);
}

.form-control:focus {
    border-color: var(--fv-blatt);
    box-shadow: 0 0 0 4px rgba(107, 160, 70, .16);
}

/* --- Suche am Handy ------------------------------------------------------
   Am Desktop ist der Suchknopf eine gruene Pille. Im schmalen Kopf rendert
   NOVA stattdessen einen grauen Knopf mit rechten Winkeln — genau die
   "viereckige Suchleiste", die auf Anhieb alt aussieht.
   ------------------------------------------------------------------------ */

.input-group .input-group-append .btn,
.navbar-search .input-group-append .btn {
    border-radius: var(--fv-rund-weich) !important;
    background: var(--fv-signal);
    border-color: var(--fv-signal);
    color: #FFFFFF;
    margin-left: .4rem;
}

.input-group .input-group-append .btn:hover,
.navbar-search .input-group-append .btn:hover {
    background: var(--fv-signal-an);
    border-color: var(--fv-signal-an);
    color: #FFFFFF;
}

/* --- Karten und Artikel -------------------------------------------------- */

.card,
.product-wrapper,
.productbox {
    border-radius: var(--fv-rund);
    border-color: var(--fv-kante);
    background: var(--fv-weiss);
}

.product-wrapper:hover,
.productbox:hover {
    box-shadow: var(--fv-schatten);
}

.badge-primary,
.label-primary {
    background: var(--fv-aktion);
}

.price,
.product-price {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 800;
    color: var(--fv-tinte);
}

/* --- Fusszeile ----------------------------------------------------------- */

footer,
.footer-main {
    background: var(--fv-wald-tief);
    color: #D6E4D3;
}

footer a,
.footer-main a {
    color: #E7F0E3;
}

footer a:hover,
.footer-main a:hover {
    color: #fff;
}

footer h1, footer h2, footer h3, footer h4, footer h5,
.footer-main h1, .footer-main h2, .footer-main h3, .footer-main h4, .footer-main h5 {
    color: #fff;
}

/* Messing-Linie als feiner Abschluss — das einzige Gold auf der Seite. */
footer {
    border-top: 3px solid var(--fv-blatt-hell);
}

/* --- Ruecksicht auf Bewegungsempfindliche -------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   Startseite
   ========================================================================== */

/* --- Buehne --------------------------------------------------------------
   Links die Aussage, rechts eine Schau aus drei echten Artikeln: ein grosses
   Motiv, zwei kleine, versetzt auf einer Signalflaeche. Die Flaeche traegt die
   Farbe (nicht ein gruener Knopf irgendwo), die Ware traegt das Grafische —
   ein Stimmungsfoto braucht die Seite dafuer nicht.
   ------------------------------------------------------------------------ */

.fv-buehne {
    position: relative;
    /* NOVA gibt jedem <section> unten 64 px Polster. */
    padding: 0;
    background: var(--fv-papier);
    overflow: hidden;
}

.fv-buehne-innen {
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(2.5rem, 4.5vw, 4rem) 1.5rem clamp(2.5rem, 4.5vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.fv-buehne-marke {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fv-signal-tief);
    margin: 0 0 1.1rem;
}

.fv-buehne-titel {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2.35rem, 5vw, 4.1rem);
    line-height: .96;
    letter-spacing: -.035em;
    color: var(--fv-tinte);
    text-wrap: balance;
    margin: 0 0 1.1rem;
}

.fv-buehne-text {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.6;
    color: var(--fv-grau);
    max-width: 38ch;
    margin: 0 0 1.9rem;
}

.fv-buehne-text b { font-weight: 700; color: var(--fv-tinte); }

.fv-buehne-knoepfe {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.7rem);
    flex-wrap: wrap;
}

.fv-btn-gross {
    padding: .95rem 2.1rem;
    font-size: 1.02rem;
}

.fv-buehne-link {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--fv-tinte);
    text-decoration: none;
    border-bottom: 2px solid rgba(22, 24, 28, .28);
    padding-bottom: 2px;
    transition: border-color .2s ease;
}

.fv-buehne-link:hover,
.fv-buehne-link:focus-visible {
    color: var(--fv-tinte);
    border-bottom-color: var(--fv-tinte);
    text-decoration: none;
}

/* --- Warenschau in der Buehne --------------------------------------------
   Drei Zellen in einem Raster: links gross ein Artikel, rechts oben ein
   zweiter, rechts unten der Preisvorteil als gruene Flaeche. Die Farbe traegt
   damit eine ganze Zelle statt als Schild ueber einem Foto zu schweben, und
   die ungleichen Groessen nehmen dem Block das Baukastenraster.
   ------------------------------------------------------------------------ */

.fv-schau {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(.7rem, 1.2vw, 1rem);
    aspect-ratio: 1.2 / 1;
    min-height: 330px;
}

.fv-schau-feld {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--fv-nebel);
    border-radius: 18px;
    padding: clamp(.85rem, 1.4vw, 1.2rem);
    text-decoration: none;
    overflow: hidden;
    transition: background-color .3s ease;
}

/* Das erste Feld traegt die Schau: doppelt hoch, damit kein Vierkantraster
   entsteht. */
.fv-schau-feld:first-of-type { grid-row: span 2; }

.fv-schau-feld:hover,
.fv-schau-feld:focus-visible {
    background: #EDEEF0;
    text-decoration: none;
}

.fv-schau-bild {
    flex: 1;
    display: block;
    min-height: 0;
    margin-bottom: .7rem;
}

.fv-schau-bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: scale .45s cubic-bezier(.2, .7, .3, 1);
}

.fv-schau-feld:hover .fv-schau-bild img { scale: 1.05; }

.fv-schau-name {
    display: block;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--fv-grau);
}

.fv-schau-feld:first-of-type .fv-schau-name { font-size: .92rem; }

.fv-schau-feld:hover .fv-schau-name { color: var(--fv-signal-tief); }

/* Der Preisvorteil ist die dritte Zelle: gruene Flaeche, weisse Schrift. */
.fv-stempel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: clamp(.9rem, 1.5vw, 1.3rem);
    background: var(--fv-signal);
    border-radius: 18px;
    color: #FFFFFF;
}

.fv-stempel b {
    display: block;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1;
    letter-spacing: -.045em;
    color: #FFFFFF;
    white-space: nowrap;
}

.fv-stempel span {
    display: block;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin-top: .6rem;
}

/* Ohne Ware im Shop faellt die Schau weg — dann steht der Vorteil schlicht
   neben der Aussage, ohne Flaeche. */
.fv-stempel-solo {
    background: none;
    padding: 0;
    text-align: right;
    align-items: flex-end;
}

.fv-stempel-solo b { color: var(--fv-signal-tief); }
.fv-stempel-solo span { color: var(--fv-grau); }

.fv-buehne-ohne-ware .fv-buehne-innen {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

@media (max-width: 991px) {
    .fv-schau { aspect-ratio: 1.5 / 1; min-height: 260px; }
}

@media (max-width: 575px) {
    .fv-schau {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 150px;
        aspect-ratio: auto;
        min-height: 0;
    }
    .fv-schau-feld:first-of-type { grid-row: span 1; grid-column: span 2; }
    /* Im schmalen Feld bleibt fuer den Namen nur Platz fuer zwei Zeilen. */
    .fv-schau-feld:not(:first-of-type) .fv-schau-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .74rem;
    }
    .fv-stempel b { font-size: 1.75rem; }
    .fv-stempel span { font-size: .6rem; margin-top: .35rem; }
}

/* --- Zusagenband --------------------------------------------------------- */

.fv-zusagen {
    background: var(--fv-weiss);
    border-bottom: 1px solid var(--fv-kante);
}

.fv-zusagen-innen {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.35rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.fv-zusage {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--fv-grau);
}

.fv-zusage strong {
    color: var(--fv-tinte);
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
}

.fv-zusage-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background-color: var(--fv-grau);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 24px;
    mask-size: 24px;
}

.fv-icon-lkw {
    -webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='11' rx='1'/%3E%3Cpath d='M14 9h4l3 3v5h-7z'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='17.5' cy='19' r='2'/%3E%3C/svg%3E");
            mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='11' rx='1'/%3E%3Cpath d='M14 9h4l3 3v5h-7z'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='17.5' cy='19' r='2'/%3E%3C/svg%3E");
}

.fv-icon-pfeil {
    -webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E");
            mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E");
}

.fv-icon-schild {
    -webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4 6v6c0 5 3.4 8.6 8 9.5 4.6-.9 8-4.5 8-9.5V6z'/%3E%3Cpolyline points='9 12 11.2 14.2 15.5 9.9'/%3E%3C/svg%3E");
            mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4 6v6c0 5 3.4 8.6 8 9.5 4.6-.9 8-4.5 8-9.5V6z'/%3E%3Cpolyline points='9 12 11.2 14.2 15.5 9.9'/%3E%3C/svg%3E");
}

/* Lupe statt Blatt: "geprueft" ist eine Handelsaussage, kein Oeko-Versprechen. */
.fv-icon-blatt {
    -webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3Cpolyline points='8.5 11 10.5 13 13.5 9.5'/%3E%3C/svg%3E");
            mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3Cpolyline points='8.5 11 10.5 13 13.5 9.5'/%3E%3C/svg%3E");
}

/* --- Kopf des Warenblocks ------------------------------------------------
   Grosse Ueberschrift links, Nebensatz und Weiterfuehrung rechts unten
   angeschlagen. Der Groessenunterschied macht die Hierarchie, nicht ein
   Mini-Kapitaelchen darueber.
   ------------------------------------------------------------------------ */

.fv-frisch { padding: clamp(3.25rem, 5.5vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

.fv-frisch-kopf {
    max-width: 1320px;
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: end;
}

.fv-frisch-kopf h2 {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2.15rem, 5vw, 3.9rem);
    line-height: .96;
    letter-spacing: -.035em;
    color: var(--fv-tinte);
    margin: 0;
}

.fv-frisch-neben {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    padding-bottom: .4rem;
}

.fv-frisch-neben p {
    color: var(--fv-grau);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .fv-frisch-kopf { grid-template-columns: 1fr; align-items: start; }
}

/* --- Sprungziele unter der festen Kopfzeile -------------------------------
   Die Kopfzeile bleibt beim Scrollen stehen. Ohne Rand ueber dem Sprungziel
   landet die Ueberschrift dahinter — daher fuer alle Anker der Startseite.
   ------------------------------------------------------------------------ */

#fv-frisch,
#fv-skala { scroll-margin-top: clamp(5.5rem, 9vw, 7.5rem); }

/* --- Schlusswort ---------------------------------------------------------
   Dunkle Flaeche mit Signalgruen — dieselbe Sprache wie die Ablaufstrecke.
   Links die Behauptung, rechts die Belege.
   ------------------------------------------------------------------------ */

.fv-haltung {
    /* Einen Hauch tiefer als die Ablaufstrecke darueber, dazu eine feine Kante:
       zwei dunkle Abschnitte hintereinander verschmelzen sonst zu einem Block. */
    background: #101216;
    color: #A9B0BA;
    margin-top: 0;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(107, 160, 70, .14), transparent 45%),
        radial-gradient(circle at 6% 90%, rgba(34, 99, 58, .12), transparent 40%);
}

.fv-haltung-innen {
    max-width: 1320px;
    margin: 0 auto;
    padding: 3.75rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    grid-template-rows: auto 1fr;
    column-gap: 3.5rem;
    row-gap: 2.5rem;
    align-items: start;
}

.fv-haltung-aussage h2 {
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 4rem);
    text-wrap: balance;
    line-height: 1.04;
    letter-spacing: -.03em;
    margin-bottom: 1.2rem;
}

/* Der zweite Teil der Aussage bekommt die Signalfarbe — auf Dunkel traegt sie
   mit 9,4:1 muehelos. */
.fv-haltung-hervor { color: var(--fv-blatt-hell); }

.fv-haltung-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #A9B0BA;
    max-width: 42ch;
    margin-bottom: 1.8rem;
}

.fv-haltung-knopf {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    font-size: .98rem;
    color: var(--fv-dunkel);
    background: var(--fv-blatt-hell);
    border-radius: var(--fv-rund-weich);
    padding: .8rem 1.6rem;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;
}

.fv-haltung-knopf:hover {
    background: #8CBE59;
    color: var(--fv-dunkel);
    transform: translateY(-1px);
}

.fv-haltung-pfeil {
    width: 18px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h20'/%3E%3Cpolyline points='16 2 21 7 16 12'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h20'/%3E%3Cpolyline points='16 2 21 7 16 12'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .25s ease;
}

.fv-haltung-knopf:hover .fv-haltung-pfeil { transform: translateX(3px); }

/* Die Belege bleiben oben beieinander. Ueber die volle Hoehe verteilt
   (space-between) riss die Spalte auseinander — zwei Absaetze mit einem
   Bildschirm Abstand lesen sich nicht mehr als Paar. Die Hoehe traegt links
   das Bild. */
.fv-haltung-punkte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    align-content: start;
    gap: 1.75rem;
}

.fv-haltung-punkte > li {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.fv-haltung-punkte > li:last-child { border-bottom: 0; padding-bottom: 0; }

.fv-haltung-punkte h3 {
    color: #fff;
    font-size: 1.12rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.fv-haltung-punkte p {
    color: #99A0AA;
    line-height: 1.6;
    font-size: .95rem;
    margin: 0;
}

/* Links die Aussage, rechts die Belege. Das Lagerfoto (Kartons) ist am
   09.10.2026 rausgeflogen — es zeigte Verpackung, verkauft wird die Ware. */
.fv-haltung-innen { grid-template-rows: auto; align-items: center; }
.fv-haltung-aussage { grid-column: 1; grid-row: 1; }
.fv-haltung-punkte  { grid-column: 2; grid-row: 1; }

/* #content traegt unten 48 px weissen Innenabstand; nach der dunklen
   Schlussflaeche stand dadurch ein weisser Balken vor der Fusszeile. */
#content:has(> .fv-haltung) { padding-bottom: 0; }

/* --- Am Handy ------------------------------------------------------------ */

@media (max-width: 991px) {
    .fv-zusagen-innen   { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
    .fv-haltung-innen {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 2.25rem;
        padding: 3rem 1.25rem;
    }
    .fv-haltung-aussage,
    .fv-haltung-punkte { grid-column: 1; grid-row: auto; }
    /* Gestapelt: Satz, darunter die Ersparnis linksbuendig. */
    .fv-buehne-innen {
        grid-template-columns: 1fr;
        padding: 2.25rem 1.25rem 1.75rem;
        gap: 1.5rem;
        align-items: start;
    }
    .fv-stempel { text-align: left; }
}

/* --- Fusszeile: NOVA setzt die Farbe ueber #footer, deshalb die ID -------- */

#footer {
    background: var(--fv-dunkel) !important;
    color: #A9B0BA;
}

/* NOVA setzt die Fussfarbe mit "#footer a:not(.btn)" — mit demselben Selektor
   gewinnt unsere Datei, weil sie spaeter geladen wird. */
#footer a:not(.btn),
#footer .box-normal-link,
#footer .newsletter-footer-heading { color: #D7DBE1; }

#footer a:not(.btn):hover { color: #fff; }

/* Das schmale Band ganz unten ("Powered by") bleibt sonst grau. */
.footer-additional-wrapper,
#footer .footer-additional-wrapper {
    background: #0E1013;
    color: #7C838D;
}

.footer-additional-wrapper a { color: #C9DCC7 !important; }

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5,
#footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5 {
    color: #fff;
}

#footer hr { border-color: rgba(255, 255, 255, .14); }

/* Weisse Schrift auf Knoepfen — NOVA setzt sonst sein eigenes Dunkel. */
.btn-primary { color: #fff !important; }

/* ==========================================================================
   Artikelkacheln, Listen und Detailseite
   ========================================================================== */

/* --- Kachel -------------------------------------------------------------- */

.product-wrapper.product-wrapper-product {
    background: var(--fv-weiss);
    border: 1px solid var(--fv-kante);
    border-radius: var(--fv-rund);
    padding: 1rem 1rem 1.25rem;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.product-wrapper.product-wrapper-product:hover {
    border-color: #CFE0C2;
    box-shadow: var(--fv-schatten);
    transform: translateY(-2px);
}

/* Bildflaeche: neutraler heller Grund, Motiv wird eingepasst statt beschnitten —
   bei Werkzeug und Beschlaegen sind die Freisteller unterschiedlich
   proportioniert. */
.productbox-image .inner {
    background: var(--fv-weiss);
    border-radius: 10px;
    overflow: hidden;
}

/* WICHTIG: NOVA legt bei Artikeln mit mehr als einem Bild einen zweiten
   Wrapper deckungsgleich UEBER den ersten (.second-wrapper, das Bild darin
   blendet beim Ueberfahren ein). Bekommt dessen .inner denselben deckenden
   Grund, verdeckt er das erste Bild vollstaendig — der Artikel sah dann leer
   aus und das Foto erschien erst beim Ueberfahren. Nur der erste Wrapper
   traegt die Flaeche. */
.productbox-image.second-wrapper .inner,
.list-gallery .second-wrapper .inner {
    background: transparent;
}

/* Freisteller stehen fast immer auf Weiss — multiply laesst das im neutralen
   Grund verschwinden, statt ein weisses Rechteck darauf zu setzen. */
.productbox-image img.product-image,
.productbox-image .inner img.first,
.productbox-image .inner img.second {
    mix-blend-mode: multiply;
    transition: scale .5s cubic-bezier(.2, .7, .3, 1), opacity .35s linear;
}

/* Vergroessern ueber die eigenstaendige scale-Eigenschaft, NICHT ueber
   transform: NOVA zentriert das Bild mit transform: translate(-50%, -50%).
   Ein transform: scale() beim Ueberfahren wirft diese Zentrierung weg und das
   Foto springt nach unten rechts. scale komponiert dagegen sauber mit dem
   bestehenden transform. */
.product-wrapper:hover .productbox-image img.product-image,
.productbox:hover .productbox-image .inner img {
    scale: 1.04;
}

/* Titel: NOVA unterstreicht ihn im Slider — das sieht nach Textlink aus,
   nicht nach Ware. */
.item-slider-desc,
.productbox-title,
.productbox .text-clamp-2,
.product-wrapper .text-clamp-2,
.product-title {
    text-decoration: none !important;
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .96rem;
    line-height: 1.35;
    color: var(--fv-tinte);
    margin-top: .85rem;
    display: block;
}

a:hover .item-slider-desc,
.productbox-title a:hover,
.product-title a:hover {
    color: var(--fv-aktion);
    text-decoration: none !important;
}

.price.productbox-price,
.item-slider-price .price {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 1.22rem;
    color: var(--fv-tinte);
    margin-top: .4rem;
}

.price-note,
.footnote-reference {
    color: var(--fv-grau);
    font-size: .78rem;
}

/* Wenige Artikel: JTL schiebt die Reihe mit ml-auto in die Mitte, dann stehen
   zwei Kacheln verloren im Raum. Links anfangen, wie im Rest der Seite. */
.fv-frisch .product-wrapper.ml-auto-util,
.fv-frisch .product-wrapper.mr-auto-util {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fv-frisch .slick-slider-other .row {
    justify-content: flex-start;
}

.fv-frisch .product-slider-wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 1rem;
}

/* --- Artikelliste -------------------------------------------------------- */

.productlist-filter-headline,
.productlist-headline {
    font-family: 'Filvaro Grotesk', sans-serif;
    color: var(--fv-wald);
}

.filter-wrapper .btn,
.productlist-filter .btn {
    border-radius: var(--fv-rund-weich);
}

/* --- Artikeldetailseite -------------------------------------------------- */

.product-detail .product-title,
h1[itemprop="name"] {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.2;
}

.product-detail .price,
.price_wrapper .price {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    color: var(--fv-tinte);
}

/* Der Kaufen-Knopf ist der wichtigste Punkt der Seite — er darf Platz haben. */
.product-detail .btn-primary,
#buy_form .btn-primary {
    padding: .85rem 2rem;
    font-size: 1.05rem;
}

.availability,
.delivery-status {
    font-size: .9rem;
}

/* Verfuegbarkeitspunkt in unserer Palette statt NOVA-Standardgruen. */
.delivery-status .status-icon.status-icon-1,
.status-available { color: var(--fv-aktion) !important; }

/* Reiter unter dem Artikel */
.nav-tabs { border-bottom-color: var(--fv-kante); }

.nav-tabs .nav-link {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    color: var(--fv-grau);
    border: none;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link.active {
    color: var(--fv-wald);
    background: transparent;
    border-bottom-color: var(--fv-aktion);
}

/* --- Warenkorb und Kasse ------------------------------------------------- */

.basket-wrapper .card,
.checkout-wrapper .card {
    border-color: var(--fv-kante);
    border-radius: var(--fv-rund);
}

.progress-bar { background-color: var(--fv-aktion); }

/* --- Hinweise ------------------------------------------------------------ */

.alert-info {
    background: var(--fv-nebel);
    border-color: var(--fv-kante);
    color: var(--fv-tinte);
}

.alert-success {
    background: #EEF6E8;
    border-color: #CFE3BF;
    color: #1F5D34;
}

/* --- Brotkrumen ---------------------------------------------------------- */

.breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: .86rem;
}

.breadcrumb a { color: var(--fv-grau); }
.breadcrumb a:hover { color: var(--fv-aktion); }

/* --- Artikelraster auf der Startseite ------------------------------------ */

.fv-artikel-raster {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.fv-artikel-raster .productbox {
    background: var(--fv-weiss);
    border: 1px solid var(--fv-kante);
    border-radius: var(--fv-rund);
    padding: 1rem;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.fv-artikel-raster .productbox:hover {
    border-color: #CFE0C2;
    box-shadow: var(--fv-schatten);
    transform: translateY(-2px);
}

/* Titel als Ware lesen, nicht als Textlink: NOVA unterstreicht ihn sonst. */
.fv-artikel-raster .productbox a,
.fv-artikel-raster .productbox-title,
.fv-artikel-raster .productbox-title a {
    text-decoration: none !important;
}

.fv-artikel-raster .productbox-title {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fv-tinte);
}

.fv-artikel-raster .productbox-title a:hover { color: var(--fv-aktion); }

.fv-artikel-raster-wenig {
    grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
    justify-content: start;
}

@media (max-width: 991px) {
    .fv-artikel-raster,
    .fv-artikel-raster-wenig { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 575px) {
    /* Zwei Spalten statt einer: acht Artikel untereinander ergeben am Handy
       eine endlose Bahn, und eine einzelne Kachel pro Zeile wirkt wie ein
       Katalog von 2012. */
    .fv-artikel-raster,
    .fv-artikel-raster-wenig { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .fv-artikel-raster .productbox { padding: .6rem; }

    .fv-artikel-raster .productbox-title,
    .fv-artikel-raster .productbox-title > a { font-size: .82rem; }

    .fv-artikel-raster .price.productbox-price { font-size: .95rem; }
}

/* --- Kacheln auf eine Linie bringen ---------------------------------------
   NOVA gibt dem Titel zwar .text-clamp-2, setzt aber kein display: -webkit-box
   — die Klemme greift dadurch nicht. Ein dritter Zeilenumbruch schob in jeder
   Reihe einzelne Preise nach unten; das war der unruhige Eindruck. Titel auf
   zwei Zeilen festnageln, Preis unten ausrichten, dann stehen Bild, Name und
   Preis ueber alle Kacheln auf derselben Hoehe.
   ------------------------------------------------------------------------ */

.fv-artikel-raster .productbox,
.productbox.productbox-column {
    display: flex;
    flex-direction: column;
}

.fv-artikel-raster .productbox > form.form-basket,
.productbox.productbox-column > form.form-basket {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fv-artikel-raster .productbox-inner,
.productbox.productbox-column .productbox-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fv-artikel-raster .productbox-inner > .row,
.productbox.productbox-column .productbox-inner > .row {
    flex: 1;
}

/* Die zweite Spalte traegt Titel und Preis — der Preis geht ans untere Ende. */
.fv-artikel-raster .productbox-inner > .row > .col:last-child,
.productbox.productbox-column .productbox-inner > .row > .col:last-child {
    display: flex;
    flex-direction: column;
}

.fv-artikel-raster .price_wrapper,
.productbox.productbox-column .price_wrapper {
    margin-top: auto;
}

/* NOVA setzt .text-clamp-2 spaeter auf display: block zurueck — deshalb hier
   ueber den Elternselektor und mit !important, sonst waechst der Titel auf
   drei Zeilen und schiebt einzelne Preise aus der Reihe. */
.fv-artikel-raster .productbox-title > a,
.productbox.productbox-column .productbox-title > a,
.product-wrapper .productbox-title > a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Zwei Zeilen Hoehe freihalten, auch wenn der Name nur eine braucht. */
.fv-artikel-raster .productbox-title,
.productbox.productbox-column .productbox-title {
    min-height: calc(2 * 1.35em);
}

/* --- NOVAs Restgelb ------------------------------------------------------
   NOVA definiert genau eine Farbvariable in :root — #F8BF00. Sie steckt in
   Sprunglinks, Fussnotenzeichen, Ribbons und Fokusringen. Einmal umgesetzt
   statt an einem Dutzend Stellen nachgebessert.
   ------------------------------------------------------------------------ */

:root {
    --primary: #2F7A45;
}

/* --- Lesbarkeit der Artikelbeschreibung ---------------------------------- */

.product-info .tab-content,
#tab-description,
.productdetails-description {
    max-width: 78ch;      /* ueber die ganze Breite laufende Zeilen ermueden */
    color: var(--fv-tinte);
    line-height: 1.7;
}

#tab-description h1, #tab-description h2, #tab-description h3,
#tab-description h4, #tab-description strong {
    color: var(--fv-wald);
}

#tab-description ul { padding-left: 1.2rem; }
#tab-description li { margin-bottom: .25rem; }

/* --- Hauptnavigation -----------------------------------------------------
   Die Leiste ist nie leer: fehlen Kategorien, springt die Ersatznavigation aus
   layout/header_categories.tpl ein.
   ------------------------------------------------------------------------ */

#mainNavigation .nav-link {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    color: var(--fv-tinte);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

#mainNavigation .nav-link:hover,
#mainNavigation .nav-link:focus { color: var(--fv-aktion); }

/* Feine Linie unter dem Kopf, damit die Leiste als eigenes Band liest. */
#mainNavigation { border-top: 1px solid var(--fv-kante); }

/* --- Fusszeile: Ueberschriften deutlicher ------------------------------- */

/* Im Fuss gibt es die Ueberschrift zweimal: eine aufklappbare fuer Mobil
   (.box-normal-link) und eine feste fuer Desktop (.productlist-filter-headline).
   NOVA faerbt beide grau — sichtbar ist am Desktop die zweite. Wer nur die
   erste anfasst, sieht am grossen Bildschirm keine Wirkung. */
#footer .productlist-filter-headline,
#footer .box-normal-link,
#footer .box .h3,
#footer .box-normal-title {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    color: #FFFFFF !important;
    margin-bottom: .35rem;
}

/* Die Trennlinien im Fuss sind auf Dunkelgruen fast unsichtbar. */
#footer .box-normal-hr { border-color: rgba(255, 255, 255, .16); }

/* --- Fusszeile: eigene Spalten ------------------------------------------
   Die zwei Backend-Boxen fuellen nur die linke Haelfte des Vierer-Rasters.
   Betrieb und Zusagen stehen deshalb als eigene Spalten daneben (Markup in
   layout/footer.tpl).
   ------------------------------------------------------------------------ */

#footer .fv-fuss-eigen {
    margin-top: 0;
}

#footer .fv-fuss-titel {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #FFFFFF;
    margin-bottom: .75rem;
}

#footer .fv-fuss-adresse {
    font-style: normal;
    line-height: 1.7;
    margin-bottom: .9rem;
}

#footer .fv-fuss-liste,
#footer .fv-fuss-zusagen {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.75;
}

#footer .fv-fuss-liste a {
    text-decoration: none;
    transition: color .2s ease;
}

#footer .fv-fuss-liste a:hover { color: var(--fv-blatt-hell); }

/* Ein Haken statt eines Aufzaehlungspunkts — dieselbe Aussage wie im Laufband,
   nur ruhiger. */
#footer .fv-fuss-zusagen li {
    position: relative;
    padding-left: 1.4rem;
}

#footer .fv-fuss-zusagen li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 12px;
    height: 8px;
    background-color: var(--fv-blatt-hell);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 5.5 5.5 10 15 1'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 5.5 5.5 10 15 1'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 767px) {
    #footer .fv-fuss-eigen { margin-top: 1.25rem; }
}

/* --- Ganz unten: das Band mit "Powered by" ------------------------------- */

#copyright {
    background: #0E1013;
    color: #7C838D;
}

#copyright a,
#copyright .text-white { color: #A9B0BA !important; }

/* --- Abstaende ----------------------------------------------------------
   NOVA setzt an Sektionen grosszuegige Aussenabstaende; zusammen mit unseren
   eigenen entstehen leere Baender von mehreren hundert Pixeln.
   ------------------------------------------------------------------------ */

/* Oben wieder Luft: mit 0 klebte "Frisch eingetroffen" am Laufband. */
.fv-frisch { padding-top: clamp(3rem, 5.5vw, 5rem); padding-bottom: .5rem; }

.fv-frisch .product-slider-wrapper,
.fv-artikel-raster { margin-bottom: 1.5rem; }


.fv-haltung { margin-top: 0; }

/* Der Inhaltsbereich der Startseite braucht keinen zusaetzlichen Rahmen —
   unsere Sektionen bringen ihre Abstaende selbst mit. */
/* NOVA haelt mit padding-top am #content-wrapper Platz unter der Kopfzeile frei.
   Auf der Startseite soll die Buehne randlos anschliessen — die Regel greift
   ueber :has() nur dort, wo unsere Buehne wirklich steht, und wirkt auf allen
   anderen Seiten unveraendert weiter. */
#content-wrapper:has(.fv-buehne),
#content-wrapper:has(.fv-strecke) { padding-top: 0; }

.fv-buehne { padding-top: 0; }


/* --- Kasse --------------------------------------------------------------
   Der Fortschrittsbalken faerbt den aktiven Schritt ueber ein Pseudoelement;
   die :root-Variable erreicht ihn nicht.
   ------------------------------------------------------------------------ */

.step-content::after { background: var(--fv-aktion) !important; }

.step-content .step-number,
.checkout-nav .active .step-number { background: var(--fv-aktion); }

/* Sprunglink fuer Tastaturnutzer — sichtbar nur beim Fokussieren. */
.btn-skip-to {
    border-color: var(--fv-aktion) !important;
    color: var(--fv-wald) !important;
}

/* --- Warenkorb ----------------------------------------------------------- */

/* "Fuer den aktuellen Inhalt existiert kein verfuegbarer Coupon" steht ueber
   der Bestellsumme und verunsichert mehr, als es hilft. Das Gutscheinfeld
   selbst bleibt erreichbar. */
.cart-coupon-info,
#cart-coupon .alert-info:only-child { display: none; }

/* Artikelnamen im Warenkorb sind Ware, keine Textlinks. */
.basket-item-title,
.cart-item-title,
#warenkorb .product-title a,
.basket-wrapper a.product-title { text-decoration: none !important; }

.basket-wrapper a:hover .product-title { color: var(--fv-aktion); }

/* Mengenfeld: NOVA laesst die Gruppe umbrechen, in der schmalen Warenkorb-
   Spalte rutschte das "+" dann unter das Feld. Eine Zeile, das Feld gibt nach. */
.cart-items-quantity .form-counter { flex-wrap: nowrap; }
.cart-items-quantity .form-counter .quantity {
    flex: 1 1 auto;
    width: 1%;
    min-width: 2.5rem;
}

/* --- Seite nicht gefunden ------------------------------------------------ */

.fv-404-innen {
    max-width: 640px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 2rem;
    text-align: center;
}

.fv-404-auge {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fv-aktion);
    margin-bottom: .9rem;
}

.fv-404-titel {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.fv-404-punkt { color: var(--fv-blatt); }

.fv-404-text {
    color: var(--fv-grau);
    line-height: 1.65;
    margin-bottom: 2rem;
}

.fv-404-suche {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.fv-404-suche .form-control {
    border-radius: var(--fv-rund-weich);
    background: var(--fv-nebel);
    border-color: var(--fv-kante);
    height: 48px;
    padding-left: 1.25rem;
}

.fv-404-suche .form-control:focus {
    background: var(--fv-weiss);
    border-color: var(--fv-blatt);
    box-shadow: 0 0 0 4px rgba(107, 160, 70, .16);
}

.fv-404-wege {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Die Seitenliste bleibt erreichbar, draengt sich aber nicht auf. */
.fv-404-seiten {
    max-width: 1320px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}

.fv-404-seiten > summary {
    cursor: pointer;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    color: var(--fv-wald);
    padding: .9rem 0;
    border-top: 1px solid var(--fv-kante);
    list-style-position: inside;
}

.fv-404-seiten > summary:hover { color: var(--fv-aktion); }

@media (max-width: 575px) {
    .fv-404-suche { flex-direction: column; }
    .fv-404-suche .btn { width: 100%; }
}

/* Der globale Fehlerkasten sagt oberhalb dasselbe wie unsere Ueberschrift.
   Nur auf dieser Seite ausblenden — auf allen anderen bleibt er wichtig. */
#content:has(.fv-404) .alert-danger,
#content:has(.fv-404) .alert-warning { display: none; }

/* --- Leere Herstellerangabe ---------------------------------------------
   Ist am Artikel kein Hersteller gepflegt, setzt JTL kHersteller auf 0 statt
   NULL — NOVA rendert daraufhin die Zeile "Hersteller:" ohne Wert, samt Link
   auf ?h=0 und einem schema.org/Brand ohne Namen. Der Selektor trifft genau
   diesen Fall: sobald ein echter Hersteller gepflegt ist, zeigt der Link
   woandershin und die Zeile erscheint von selbst wieder.
   ------------------------------------------------------------------------ */

li.product-manufacturer:has(a[href$="?h=0"]) { display: none; }

/* --- Auswahlknoepfe und Haken ------------------------------------------
   NOVA faerbt jede angehakte Checkbox und jeden gewaehlten Radio in seinem
   Gelb. Das faellt vor allem in der Kasse auf, wo Versand- und Zahlungsart
   ausgewaehlt werden.
   ------------------------------------------------------------------------ */

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--fv-signal-tief) !important;
    border-color: var(--fv-signal-tief) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(107, 160, 70, .25) !important;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--fv-aktion-an) !important;
    border-color: var(--fv-aktion-an) !important;
}

/* Der Haken im Fortschritt der Kasse ("Schritt erledigt") steckt im selben Gelb. */
.step-content .fa-check,
.checkout-nav .fa-check { color: var(--fv-aktion) !important; }

/* --- Lagerabzeichen an der Kachel -----------------------------------------
   NOVA setzt ein Wimpelband mit Zipfel und Schlagschatten oben links in die
   Kachel — die Form ist der Grund, warum die Kacheln nach Katalog von 2015
   aussehen. Daraus wird eine schlichte Pille in Markenfarbe, die auf der
   Bildflaeche liegt statt sie zu ueberlagern.
   ------------------------------------------------------------------------ */

.productbox-ribbon,
.ribbon.productbox-ribbon {
    left: .55rem !important;
    top: .55rem !important;
    padding: .28rem .65rem !important;
    background: rgba(22, 24, 28, .82) !important;
    color: #FFFFFF !important;
    border-radius: var(--fv-rund-weich) !important;
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .66rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Zipfel und Schatten der NOVA-Fahne wegnehmen. */
.productbox-ribbon::before,
.productbox-ribbon::after,
.ribbon.productbox-ribbon::before,
.ribbon.productbox-ribbon::after {
    display: none !important;
}

/* --- Unterkategorien in der Kategorieuebersicht ---------------------------
   Fuer die 294 Kategorien ist kein einziges Bild gepflegt. NOVA setzt dann
   ueberall denselben Platzhalter — auf "Heimwerker" waren das 14 gleiche graue
   Kaesten mit je 235 px Hoehe, und die Seite las sich als kaputt.

   Deshalb: Kategorien OHNE eigenes Bild zeigen kein Bildfeld, sondern eine
   ruhige Textkarte. Sobald in der Wawi ein Kategoriebild gepflegt ist, greift
   :has() nicht mehr und das Bild erscheint von allein — hier ist dann nichts
   zurueckzubauen.
   ------------------------------------------------------------------------ */

.content-cats-small .sub-categories {
    height: 100%;
    background: var(--fv-nebel);
    border-radius: var(--fv-rund);
    padding: 1.15rem 1.25rem 1.35rem;
    transition: background-color .25s ease;
}

.content-cats-small .sub-categories:hover { background: #EDEEF0; }

.subcategories-image:has(img[src*="keinBild"]) { display: none !important; }

/* Der Name traegt die Karte, wenn kein Bild da ist. */
.content-cats-small .sub-categories .caption {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: .35rem;
    /* NOVA zentriert die Beschriftung — neben einer linksbuendigen Liste liest
       sich das unruhig. */
    text-align: left;
}

.content-cats-small .sub-categories .caption a {
    color: var(--fv-tinte);
    text-decoration: none;
}

.content-cats-small .sub-categories .caption a:hover { color: var(--fv-signal-tief); }

.content-cats-small .sub-categories hr {
    border-color: var(--fv-kante);
    margin: .75rem 0 .65rem;
}

.content-cats-small .sub-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-cats-small .sub-categories ul li { margin-bottom: .2rem; }

.content-cats-small .sub-categories ul a {
    font-size: .86rem;
    line-height: 1.45;
    color: var(--fv-grau);
    text-decoration: none;
}

.content-cats-small .sub-categories ul a:hover {
    color: var(--fv-signal-tief);
    text-decoration: underline;
}

/* Die Karten einer Reihe gleich hoch — NOVAs row-eq-height greift nur, wenn
   die Spalte selbst streckt. */
.content-cats-small > [class*="col-"] {
    display: flex;
    margin-bottom: 1.25rem;
}

/* --- Fehlende Artikelbilder ---------------------------------------------
   Solange in der Wawi kein Bild gepflegt ist, liefert JTL gfx/keinBild.gif —
   ersetzt durch ein zurueckhaltendes Blattmotiv in unseren Farben (Originale
   liegen daneben als *.jtl-original). Das <img> traegt feste Maße 130x130 aus
   dem alten Platzhalter, deshalb muss es hier auf die Kachelflaeche gezogen
   werden, sonst schwimmt ein Briefmarkenbild in der Mitte.
   ------------------------------------------------------------------------ */

img[src*="keinBild"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    mix-blend-mode: normal;
    /* Das Bild wird ueber CSS ersetzt statt nur die Datei getauscht: JTL bindet
       gfx/keinBild.gif ohne Versionsnummer ein, und der Vhost cacht Bilder mit
       "expires max" — wer die alte Kameragrafik einmal geladen hat, saehe sie
       sonst noch monatelang. Ueber content greift der Austausch sofort, weil die
       Stylesheet-URL die Template-Version traegt. */
    content: url('/bilder/filvaro/kein-bild.jpg?v=2');
}

/* ==========================================================================
   B-Ware-Bausteine: Laufband, Zustandsklassen, Ablaufstrecke, Bewegung
   ========================================================================== */

:root {
    --fv-dunkel:      #16181C;   /* Kontrastflaeche */
    --fv-dunkel-hell: #23262C;   /* Karten auf der Kontrastflaeche */
}

/* --- Bewegung ------------------------------------------------------------
   Genau ein Moment auf der ganzen Seite: die Balken der Pruefskala wachsen,
   sobald die Leiter ins Bild kommt. Vorher blendete jeder Abschnitt beim
   Scrollen ein — das ist der Reflex, den jede zweite Seite hat, und er macht
   nichts sichtbar, was nicht ohnehin da waere.

   Die Endbreite steht im Grundzustand. Die Klasse "fv-animiert" setzt nur
   JavaScript; ohne Skript, beim Drucken oder mit "Bewegung reduzieren" steht
   die Leiter sofort fertig da.
   ------------------------------------------------------------------------ */

/* --- Laufband ------------------------------------------------------------ */

.fv-laufband {
    background: var(--fv-dunkel);
    color: #fff;
    overflow: hidden;
    padding: .85rem 0;
    /* Die Kanten weich auslaufen lassen, sonst schneidet der Text hart ab. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.fv-laufband-spur {
    display: flex;
    width: max-content;
    animation: fv-laufen 42s linear infinite;
}

.fv-laufband-spur > span {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.fv-laufband b {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .04em;
    padding: 0 1.6rem;
}

/* Trennpunkt zwischen den Zusagen */
.fv-laufband i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fv-blatt-hell);
    display: inline-block;
}

@keyframes fv-laufen {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.fv-laufband-spur:hover { animation-play-state: paused; }

/* --- Pruefskala ----------------------------------------------------------
   Die tragende Idee. Keine vier gleichen Karten nebeneinander, sondern eine
   Leiter: der Balken wird nach rechts breiter und dicker, das Gruen heller,
   der Preis niedriger. Der Verlauf IST die Aussage — man versteht die
   Einstufung, ohne einen Satz gelesen zu haben.

   --fv-ton und --fv-breite stehen am <li> im Template.
   ------------------------------------------------------------------------ */

.fv-skala {
    background: var(--fv-dunkel);
    color: #A9B0BA;
    padding: clamp(3.75rem, 6.5vw, 6.5rem) 0;
}

.fv-skala-innen {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.fv-skala-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}

.fv-skala-kopf h2 {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: .99;
    letter-spacing: -.035em;
    color: #fff;
    text-wrap: balance;
    margin: 0;
}

.fv-skala-kopf p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #A9B0BA;
    max-width: 62ch;
    margin: 0;
}

.fv-skala-leiter {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2.2vw, 2.25rem);
}

.fv-skala-stufe { display: flex; flex-direction: column; }

.fv-skala-balken {
    display: block;
    width: var(--fv-breite);
    height: var(--fv-hoehe, 10px);
    background: var(--fv-ton);
    margin-bottom: 1.35rem;
}

.fv-skala-stufe:nth-child(1) { --fv-hoehe: 6px; }
.fv-skala-stufe:nth-child(2) { --fv-hoehe: 10px; }
.fv-skala-stufe:nth-child(3) { --fv-hoehe: 15px; }
.fv-skala-stufe:nth-child(4) { --fv-hoehe: 21px; }

.fv-skala-name {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    color: #fff;
    margin-bottom: .3rem;
}

.fv-skala-wert {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.1vw, 1.95rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--fv-ton);
    margin-bottom: .85rem;
}

.fv-skala-stufe p {
    font-size: .95rem;
    line-height: 1.65;
    color: #99A0AA;
    margin: 0;
}

/* Der eine Bewegungsmoment: die Leiter waechst auf ihre Breiten. */
.fv-animiert .fv-skala-balken {
    width: 0;
    transition: width .85s cubic-bezier(.16, 1, .3, 1);
}

.fv-animiert .fv-skala-leiter.fv-gewachsen .fv-skala-balken { width: var(--fv-breite); }
.fv-animiert .fv-gewachsen .fv-skala-stufe:nth-child(2) .fv-skala-balken { transition-delay: .09s; }
.fv-animiert .fv-gewachsen .fv-skala-stufe:nth-child(3) .fv-skala-balken { transition-delay: .18s; }
.fv-animiert .fv-gewachsen .fv-skala-stufe:nth-child(4) .fv-skala-balken { transition-delay: .27s; }

@media (max-width: 991px) {
    .fv-skala-kopf   { grid-template-columns: 1fr; }
    .fv-skala-leiter { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
}

@media (max-width: 479px) {
    .fv-skala-leiter { grid-template-columns: 1fr; }
}

/* --- Kopf: die Prüfstrecke ------------------------------------------------
   Buehne der Startseite. 180 Blender-Bilder eines Rasenmaehers, an die
   Scrollposition gekoppelt (Skript am Ende von page/index.tpl, Quelle
   blender/maeher.py). Dazu Schilder mit Linien zu den Bauteilen und links
   eine Beispielrechnung, die sich mitaufbaut.

   Grundzustand = ohne Skript: Standbild, Ueberschrift, fertige Rechnung.
   .fv-strecke-live (setzt das Skript) macht daraus die stehende Buehne.
   ------------------------------------------------------------------------ */

.fv-strecke {
    /* Bilder sind seit v5 transparent — der Grund darf sich bewegen */
    background: var(--fv-dunkel);
    color: #A9B0BA;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* --- lebendiger Grund: Licht in Logofarben, Raster, Blaetter --- */
.fv-strecke-deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.fv-strecke-deko::before {
    /* feines Raster, nach aussen ausgeblendet */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(155, 202, 106, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(155, 202, 106, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 62% 50%, #000 30%, transparent 75%);
}

.fv-licht {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: fv-treiben 18s ease-in-out infinite alternate;
}
.fv-licht-1 { width: 38rem; height: 38rem; left: 48%; top: 8%;  background: #22633A; }
.fv-licht-2 { width: 24rem; height: 24rem; left: 70%; top: 50%; background: #6BA046; opacity: .35; animation-duration: 23s; }
.fv-licht-3 { width: 18rem; height: 18rem; left: 4%;  top: 60%; background: #C9A15B; opacity: .16; animation-duration: 27s; }

@keyframes fv-treiben {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-4rem, 2.5rem) scale(1.12); }
    100% { transform: translate(3rem, -2rem) scale(.94); }
}

.fv-blatt {
    position: absolute;
    fill: none;
    stroke: var(--fv-blatt-hell);
    stroke-width: 1.6;
    opacity: .16;
    animation: fv-blatt 16s ease-in-out infinite alternate;
}
.fv-blatt-1 { width: 7rem;  left: 42%; top: 9%;  transform: rotate(-24deg); }
.fv-blatt-2 { width: 4.5rem; left: 90%; top: 16%; transform: rotate(28deg); animation-duration: 21s; }
.fv-blatt-3 { width: 5.5rem; left: 86%; top: 72%; transform: rotate(-60deg); animation-duration: 19s; opacity: .1; }

@keyframes fv-blatt {
    from { translate: 0 0; rotate: 0deg; }
    to   { translate: 0 -1.4rem; rotate: 8deg; }
}

/* --- Knopf am Karton --- */
.fv-oeffnen-knopf { display: none; }

.fv-strecke-live .fv-oeffnen-knopf {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    position: absolute;
    left: 56%;
    top: 14%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: var(--fv-signal);
    border: 0;
    border-radius: 999px;
    padding: .75rem 1.35rem .75rem 1.1rem;
    box-shadow: 0 0 0 6px rgba(155, 202, 106, .18), 0 14px 30px rgba(0, 0, 0, .4);
    cursor: pointer;
    animation: fv-knopf 2.4s ease-in-out infinite;
    transition: opacity .25s ease, background-color .2s ease;
}
.fv-strecke-live .fv-oeffnen-knopf:hover { background: var(--fv-signal-an); }
.fv-oeffnen-knopf svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--fv-blatt-hell); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes fv-knopf {
    0%, 100% { box-shadow: 0 0 0 6px rgba(155, 202, 106, .18), 0 14px 30px rgba(0, 0, 0, .4); }
    50%      { box-shadow: 0 0 0 12px rgba(155, 202, 106, .08), 0 14px 30px rgba(0, 0, 0, .4); }
}

.fv-strecke-live.fv-spielt .fv-oeffnen-knopf,
.fv-strecke-live.fv-gespielt .fv-oeffnen-knopf { opacity: 0; pointer-events: none; }

.fv-strecke-buehne {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
    align-items: center;
}

.fv-strecke-text { display: grid; gap: 1.1rem; align-content: center; }

.fv-strecke-schritte { list-style: none; margin: 0; padding: 0; }
.fv-strecke-schritte > li + li { margin-top: 2rem; }

.fv-strecke .fv-buehne-marke { color: var(--fv-blatt-hell); }
.fv-strecke .fv-buehne-titel { color: #fff; margin-bottom: .9rem; font-size: clamp(2rem, 3.3vw, 3rem); }
.fv-strecke .fv-btn-gross { padding: .75rem 1.6rem; font-size: .95rem; }

.fv-strecke-schritte h2 {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.3vw, 2.05rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #fff;
    margin: 0 0 .8rem;
}

.fv-strecke-schritte p {
    font-size: .97rem;
    line-height: 1.6;
    color: #A9B0BA;
    max-width: 40ch;
    margin: 0 0 1.3rem;
}

.fv-strecke-link {
    display: inline-block;
    font-weight: 700;
    color: var(--fv-blatt-hell);
    border-bottom: 2px solid currentColor;
    padding-bottom: .15rem;
}
.fv-strecke-link:hover { color: #fff; text-decoration: none; }

/* --- Beispielrechnung --- */

.fv-rechnung {
    background: var(--fv-dunkel-hell);
    border: 1px solid #30343B;
    border-radius: var(--fv-rund);
    padding: .8rem 1.05rem .9rem;
    max-width: 25rem;
    background: rgba(35, 38, 44, .82);
    backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
}

.fv-rechnung-kopf {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7E8691;
    margin: 0 0 .7rem;
}

.fv-rechnung ul { list-style: none; margin: 0; padding: 0; }

.fv-rechnung li,
.fv-rechnung-summe {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.fv-rechnung li {
    font-size: .84rem;
    color: #C9CED6;
    padding: .24rem 0;
    border-bottom: 1px solid #2E3238;
}

.fv-rechnung li b { font-weight: 700; color: #fff; white-space: nowrap; }
.fv-rechnung li.fv-minus b { color: #F2A38C; }
.fv-rechnung li.fv-ok b { color: var(--fv-blatt-hell); }
.fv-rechnung li.fv-ok span::before { content: '✓  '; color: var(--fv-blatt-hell); font-weight: 700; }

.fv-rechnung-summe {
    margin: .8rem 0 0;
    color: #fff;
    font-family: 'Filvaro Grotesk', sans-serif;
}

.fv-rechnung-summe span { font-weight: 700; font-size: 1.05rem; }

.fv-rechnung-summe b {
    font-weight: 800;
    font-size: clamp(1.55rem, 2.3vw, 2rem);
    letter-spacing: -.03em;
    color: var(--fv-blatt-hell);
    line-height: 1;
}

.fv-rechnung-summe output { font: inherit; color: inherit; }

/* --- Bild, Schilder, Stempel --- */

.fv-strecke-bild { position: relative; width: 100%; max-width: 780px; justify-self: center; }

.fv-strecke-standbild { display: block; width: 100%; height: auto; }

.fv-strecke-leinwand,
.fv-schilder-linien,
.fv-schilder,
.fv-strecke-stempel,
.fv-strecke-weiter { display: none; }

/* ================= stehende Buehne (mit Skript) ================= */


/* feste Hoehe, damit beim Abspielen nichts springt */
.fv-strecke-live .fv-strecke-buehne {
    /* Kopfzeile oben 147 px: so steht die ganze Buehne samt Rechnung im Fenster */
    min-height: clamp(32rem, calc(100svh - 147px), 50rem);
    padding-top: clamp(1rem, 2.5vh, 2rem);
    padding-bottom: clamp(1rem, 2.5vh, 2rem);
}

/* Vor dem Klick schwebt der Karton leicht — die Buehne lebt, ohne zu drängeln */
.fv-strecke-live:not(.fv-spielt):not(.fv-gespielt) .fv-strecke-leinwand {
    animation: fv-schweben 4.2s ease-in-out infinite;
}

@keyframes fv-schweben {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(-.6deg); }
}

/* Knoepfe: Retoure pruefen nur mit Skript, waehrend des Ablaufs gesperrt */
.fv-pruef-knopf, .fv-nochmal-knopf { display: none; }
.fv-strecke-live .fv-pruef-knopf { display: inline-block; }
.fv-strecke-live .fv-nochmal-knopf {
    display: inline-block;
    background: none;
    border: 0;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    padding: 0 0 2px;
    cursor: pointer;
}

.fv-strecke .fv-buehne-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }
.fv-strecke .fv-buehne-link:hover { color: var(--fv-blatt-hell); }

/* ohne Skript nur der Start und die fertige Rechnung */
.fv-strecke:not(.fv-strecke-live) .fv-strecke-schritte > li:not(.fv-strecke-start) { display: none; }

.fv-strecke-live .fv-strecke-standbild { display: none; }

.fv-strecke-live .fv-strecke-leinwand {
    display: block;
    width: 100%;
    height: auto;
}

/* Schritte im selben Rasterfeld: Hoehe = laengster, nichts springt */
.fv-strecke-live .fv-strecke-schritte { display: grid; }

.fv-strecke-live .fv-strecke-schritte > li {
    grid-area: 1 / 1;
    margin: 0;
    align-self: end;
    opacity: 0;
    transform: translateY(1rem);
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}

.fv-strecke-live .fv-strecke-schritte > li.fv-aktiv {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .35s ease .15s, transform .45s cubic-bezier(.16, 1, .3, 1) .15s, visibility 0s .15s;
}

/* Rechnung: erscheint nach dem Start, Zeilen kommen einzeln dazu */
.fv-strecke-live .fv-rechnung {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.fv-strecke-live .fv-rechnung.fv-da { opacity: 1; transform: none; }

.fv-strecke-live .fv-rechnung li,
.fv-strecke-live .fv-rechnung-summe {
    opacity: .14;
    transition: opacity .35s ease;
}
.fv-strecke-live .fv-rechnung li.fv-da,
.fv-strecke-live .fv-rechnung-summe.fv-da { opacity: 1; }

.fv-strecke-live .fv-rechnung.fv-fertig .fv-rechnung-neu {
    text-decoration: line-through;
    color: #7E8691;
}

/* Linien und Punkte (SVG, Koordinaten 1000 x 667 wie das Bild) */
.fv-strecke-live .fv-schilder-linien {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.fv-schilder-linien line,
.fv-schilder-linien circle {
    opacity: 0;
    transition: opacity .3s ease;
}

.fv-schilder-linien line {
    stroke: var(--fv-blatt-hell);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.fv-schilder-linien circle {
    fill: var(--fv-dunkel);
    stroke: var(--fv-blatt-hell);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.fv-schilder-linien .fv-sichtbar { opacity: 1; }

.fv-strecke-live .fv-schilder {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fv-schilder span {
    position: absolute;
    transform: translate(0, -50%) scale(.92);
    white-space: nowrap;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(.68rem, .85vw, .82rem);
    color: #fff;
    background: rgba(22, 24, 28, .92);
    border: 1.5px solid var(--fv-blatt-hell);
    border-radius: 999px;
    padding: .32rem .8rem;
    opacity: 0;
    transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* Seite l: das Schild endet am Linienende, steht also links davon */
.fv-schilder span[data-seite="l"] { transform: translate(-100%, -50%) scale(.92); }

.fv-schilder span.fv-sichtbar { opacity: 1; transform: translate(0, -50%) scale(1); }
.fv-schilder span[data-seite="l"].fv-sichtbar { transform: translate(-100%, -50%) scale(1); }

.fv-schilder span.fv-schild-mangel { border-color: #F2A38C; }

/* Stempel: landet am Ende oben in der Mitte. Links bei 2 %/22 % deckte er
   die Schilder auf der linken Seite zu, seit die nach dem Ablauf stehen
   bleiben (Motor beim Maeher, Abluftschlauch beim Klimageraet). */
.fv-strecke-live .fv-strecke-stempel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 56%;
    top: 3%;
    width: clamp(5.5rem, 8vw, 7.5rem);
    aspect-ratio: 1;
    margin: 0;
    border-radius: 50%;
    background: var(--fv-signal);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(155, 202, 106, .25), 0 18px 40px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: rotate(-14deg) scale(1.8);
    transition: opacity .25s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.fv-strecke-stempel b {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1;
    letter-spacing: -.02em;
}

.fv-strecke-stempel span {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fv-blatt-hell);
    margin-top: .3rem;
}

.fv-strecke-live.fv-gestempelt .fv-strecke-stempel {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
}

/* Hinweis am Start: hier passiert etwas beim Scrollen */
.fv-strecke-live .fv-strecke-weiter {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9AA1AB;
    transition: opacity .3s ease;
}

.fv-strecke-live .fv-strecke-weiter::after {
    content: '';
    display: block;
    width: 2px;
    height: 1.6rem;
    margin: .5rem auto 0;
    background: linear-gradient(var(--fv-blatt-hell), transparent);
    animation: fv-weiter 1.6s ease-in-out infinite;
}

@keyframes fv-weiter {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(.45rem); opacity: .5; }
}

.fv-strecke-live.fv-unterwegs .fv-strecke-weiter { opacity: 0; visibility: hidden; }

/* NOVA gibt jedem <section> Polster — die Buehne bringt ihre eigenen Abstaende. */
.fv-strecke { padding: 0; }

/* Desktop: die Buehne steht unter der Kopfzeile (oben 141 px mit Logo, beim
   Scrollen 70 px). So passt sie beim Laden ganz ins Fenster. */


/* --- schmalere Bildschirme --- */

@media (max-width: 1199px) {
    .fv-rechnung li { font-size: .88rem; padding: .3rem 0; }
}

@media (max-width: 991px) {
    .fv-strecke-buehne { grid-template-columns: 1fr; }
    .fv-strecke-bild { order: -1; }
    .fv-strecke-live .fv-strecke-buehne {
        align-content: start;
        gap: .9rem;
        min-height: 0;
        padding-top: 1.5rem;
    }
    /* Nur der aktive Schritt nimmt Platz ein — sonst bestimmt die hohe
       Startueberschrift die Hoehe und reisst ueber kurzen Schritten ein Loch. */
    .fv-strecke-live .fv-strecke-schritte > li { display: none; transition: none; transform: none; }
    .fv-strecke-live .fv-strecke-schritte > li.fv-aktiv { display: block; }
    .fv-strecke-live .fv-rechnung:not(.fv-da) { display: none; }
    .fv-strecke-live .fv-strecke-bild { width: fit-content; max-width: 100%; margin: 0 auto; }
    .fv-strecke-live .fv-strecke-leinwand { max-height: 32svh; width: auto; max-width: 100%; }
    .fv-strecke-text { gap: .9rem; }
    .fv-strecke-schritte h2,
    .fv-strecke .fv-buehne-titel { font-size: clamp(1.55rem, 6.6vw, 2.2rem); margin-bottom: .5rem; }
    .fv-strecke .fv-buehne-marke { margin-bottom: .5rem; }
    .fv-strecke-schritte p { font-size: .93rem; margin-bottom: .8rem; }
    .fv-strecke-live .fv-strecke-schritte > li:not(.fv-strecke-start) p { display: none; }
    .fv-rechnung { padding: .75rem .95rem .85rem; max-width: none; }
    .fv-rechnung-kopf { margin-bottom: .35rem; }
    .fv-rechnung li { font-size: .8rem; padding: .2rem 0; }
    .fv-rechnung-summe { margin-top: .45rem; }
    .fv-rechnung-summe b { font-size: 1.6rem; }
    /* Schilder sind am Handy zu klein zum Lesen: nur Punkte und Linien */
    .fv-strecke-live .fv-schilder { display: none; }
    .fv-schilder-linien line { display: none; }
    .fv-strecke-live .fv-strecke-stempel { width: 5.2rem; top: 8%; }
    .fv-strecke-stempel b { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fv-strecke-live .fv-strecke-schritte > li,
    .fv-strecke-live .fv-strecke-stempel,
    .fv-schilder span { transition: none; }
}

/* --- Am Handy ------------------------------------------------------------ */

@media (max-width: 991px) {
    .fv-laufband b { font-size: .85rem; padding: 0 1.1rem; }
}

/* Auf schmalen Geraeten stehen Knopf und Link nebeneinander gerade nicht mehr
   nebeneinander — untereinander statt am Rand abgeschnitten. */
@media (max-width: 440px) {
    .fv-buehne-knoepfe {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
    }
    .fv-buehne-knoepfe .btn { width: 100%; text-align: center; }
    .fv-stempel { align-self: stretch; }
}

/* --- Bewegung abschaltbar halten ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fv-laufband-spur { animation: none; transform: none; }
}

/* --- Kontaktkarten -------------------------------------------------------
   JTL gibt auf der Kontaktseite nur das Formular aus; ohne diesen Block
   stuenden Anschrift und Telefon nur im Impressum.
   ------------------------------------------------------------------------ */

.fv-kontakt-karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 2.5rem;
}

.fv-kontakt-karte {
    display: flex;
    gap: .9rem;
    background: var(--fv-nebel);
    border: 1px solid var(--fv-kante);
    border-radius: var(--fv-rund);
    padding: 1.2rem 1.25rem;
}

.fv-kontakt-karte strong {
    display: block;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 600;
    color: var(--fv-tinte);
    margin-bottom: .2rem;
}

.fv-kontakt-karte a {
    display: block;
    font-weight: 600;
    color: var(--fv-signal-tief);
    margin-bottom: .35rem;
    word-break: break-word;
}

.fv-kontakt-karte span:not(.fv-kontakt-icon) {
    display: block;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--fv-grau);
}

.fv-kontakt-adresse {
    color: var(--fv-tinte) !important;
    font-size: .94rem !important;
    margin-bottom: .35rem;
}

.fv-kontakt-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: .15rem;
    background-color: var(--fv-signal-tief);
}

.fv-kontakt-mail { -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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2.5 6 12 13 21.5 6'/%3E%3C/svg%3E") no-repeat center / contain; 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2.5 6 12 13 21.5 6'/%3E%3C/svg%3E") no-repeat center / contain; }
.fv-kontakt-tel  { -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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2.5 1.5a12 12 0 0 0 5 5L15 12l5 2v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E") no-repeat center / contain;  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2.5 1.5a12 12 0 0 0 5 5L15 12l5 2v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E") no-repeat center / contain;  }
.fv-kontakt-haus { -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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") no-repeat center / contain; 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") no-repeat center / contain; }

@media (max-width: 767px) {
    .fv-kontakt-karten { grid-template-columns: 1fr; }
}

/* --------------------------------------------- Herstellerinformationen (GPSR)
   Unter Beschreibung und Merkmalen, siehe productdetails/details.tpl.
   Pflichtangabe, aber leise: Trennlinie, kleine Ueberschrift, Adressblock. */
.fv-gpsr {
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fv-kante);
}
.fv-gpsr-titel {
    font-family: 'Filvaro Grotesk', 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fv-tinte);
    margin-bottom: 1rem;
}
.fv-gpsr-block {
    display: inline-block;
    vertical-align: top;
    min-width: 15rem;
    margin: 0 3rem 1rem 0;
}
.fv-gpsr-rolle {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fv-grau);
    margin-bottom: .25rem;
}
.fv-gpsr-adresse {
    margin: 0;
    font-style: normal;
    line-height: 1.55;
    color: var(--fv-tinte);
}
.fv-gpsr-adresse a { color: var(--fv-signal-tief); }
@media (max-width: 575px) {
    .fv-gpsr-block { display: block; margin-right: 0; }
}

/* --- Alle Artikel (/?pf=0_100000, productlist/header.tpl) ---------------- */
.fv-alle-kopf { margin: 0 0 1.5rem; }
.fv-alle-kopf h1 {
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    letter-spacing: -.03em;
    color: var(--fv-tinte);
    margin: 0 0 .4rem;
}
.fv-alle-kopf p { color: var(--fv-grau); margin: 0; }

/* Knopf unter "Frisch eingetroffen" */
.fv-frisch-alle { text-align: center; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }

@media (max-width: 991px) {
    .fv-strecke-live .fv-oeffnen-knopf { left: 50%; top: auto; bottom: 8%; font-size: .88rem; padding: .6rem 1.1rem .6rem .9rem; }
    .fv-licht-1 { width: 22rem; height: 22rem; left: 20%; top: 2%; }
    .fv-blatt-1 { left: 72%; top: 4%; width: 4.5rem; }
    .fv-blatt-2, .fv-blatt-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fv-licht, .fv-blatt, .fv-strecke-live .fv-oeffnen-knopf { animation: none; }
}

/* --- Zustandsabzeichen (snippets/fv_zustand.tpl) --------------------------
   B-Ware gruen, Gebraucht orange, Ersatzteil/defekt rot. */
.fv-zustand {
    display: inline-block;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .02em;
    line-height: 1;
    color: #fff;
    border-radius: 999px;
    padding: .38rem .7rem;
    white-space: nowrap;
}
.fv-zustand-bware     { background: var(--fv-signal); }
.fv-zustand-gebraucht { background: #D9731A; }
.fv-zustand-defekt    { background: #C0362C; }

/* In der Kachel: schraeges Eckband oben rechts — links oben sitzt NOVAs
   Lagerabzeichen. Das Bildfeld schneidet das Band an der Ecke ab. */
.productbox-image { position: relative; overflow: hidden; }
.fv-zustand.fv-zustand-kachel {
    position: absolute;
    top: 1.55rem;
    right: -2.45rem;
    z-index: 3;
    width: 10.5rem;
    text-align: center;
    transform: rotate(45deg);
    border-radius: 0;
    padding: .36rem 0;
    font-size: .64rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.fv-zustand-detail { font-size: .8rem; margin-bottom: .6rem; }

/* --- Pruefstrecke: drei Szenen, Label-Ring, Kamera, Stempelfarben --------- */
.fv-strecke-live [data-szene]:not(.fv-szene-an) { display: none !important; }
.fv-strecke:not(.fv-strecke-live) [data-szene]:not([data-szene="maeher"]) { display: none; }
.fv-nur-live { display: none; }
.fv-strecke-live .fv-nur-live { display: inline; font-weight: 600; color: #fff; }

/* Ring auf dem gerenderten Label "RETOURE ÖFFNEN" — der eigentliche Knopf */
.fv-label-ring { display: none; }
.fv-strecke-live .fv-label-ring {
    display: block;
    position: absolute;
    width: clamp(4.5rem, 9vw, 7rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}
.fv-label-ring::before,
.fv-label-ring span {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--fv-blatt-hell);
    animation: fv-ring 1.8s ease-out infinite;
}
.fv-label-ring span { animation-delay: .9s; }
@keyframes fv-ring {
    0%   { transform: scale(.55); opacity: .95; }
    100% { transform: scale(1.35); opacity: 0; }
}
.fv-strecke-live:not(.fv-spielt):not(.fv-gespielt) .fv-strecke-leinwand { cursor: pointer; }
.fv-strecke-live.fv-spielt .fv-label-ring,
.fv-strecke-live.fv-gespielt .fv-label-ring { display: none; }

/* Kamera faehrt ein und blitzt */
.fv-blitz {
    position: absolute;
    inset: 0;
    /* closest-side: laeuft vor dem Rand aus, sonst sieht man das Rechteck */
    background: radial-gradient(closest-side at 55% 45%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease-out;
    z-index: 4;
}
.fv-blitz.fv-blitz-an { opacity: .9; transition: opacity .04s; }
.fv-kamera { display: none; }
.fv-strecke-live .fv-kamera {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    position: absolute;
    right: 2%;
    top: 3%;
    margin: 0;
    z-index: 5;
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(.7rem, .85vw, .82rem);
    color: #fff;
    background: rgba(22, 24, 28, .9);
    border: 1.5px solid #fff;
    border-radius: 999px;
    padding: .4rem .85rem .4rem .55rem;
    opacity: 0;
    transform: translateY(-.6rem) scale(.95);
    transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.fv-kamera svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.fv-strecke-live.fv-kamera-an .fv-kamera { opacity: 1; transform: none; }

/* Schilder und Stempel je Zustand */
.fv-schilder span.fv-schild-gebraucht { border-color: #E89040; }
.fv-schilder span.fv-schild-defekt { border-color: #E2574C; background: rgba(120, 28, 22, .92); }
.fv-strecke-stempel.fv-stempel-gebraucht { background: #D9731A; }
.fv-strecke-stempel.fv-stempel-defekt { background: #C0362C; }
.fv-strecke-stempel.fv-stempel-gebraucht span,
.fv-strecke-stempel.fv-stempel-defekt span { color: #fff; opacity: .85; }
.fv-rechnung li.fv-hinweis span { font-style: italic; color: #F2A38C; }
.fv-strecke-schritte .fv-zustand-detail { margin-bottom: .55rem; }

@media (max-width: 991px) {
    .fv-strecke-live .fv-kamera { font-size: .66rem; top: 2%; }
}
@media (prefers-reduced-motion: reduce) {
    .fv-label-ring::before, .fv-label-ring span { animation: none; }
}


/* --- Frisch eingetroffen: blaettern -------------------------------------- */

.fv-blaetter-raster:not(.fv-blaettern-an) > :nth-child(n+9) { display: none; }
.fv-blaetter-raster > [hidden] { display: none !important; }

.fv-blatt-ein { animation: fv-blatt-ein .35s cubic-bezier(.2, .7, .3, 1) both; }
.fv-blatt-ein:nth-child(8n+2) { animation-delay: .03s; }
.fv-blatt-ein:nth-child(8n+3) { animation-delay: .06s; }
.fv-blatt-ein:nth-child(8n+4) { animation-delay: .09s; }
.fv-blatt-ein:nth-child(8n+5) { animation-delay: .12s; }
.fv-blatt-ein:nth-child(8n+6) { animation-delay: .15s; }
.fv-blatt-ein:nth-child(8n+7) { animation-delay: .18s; }
.fv-blatt-ein:nth-child(8n)   { animation-delay: .21s; }
@keyframes fv-blatt-ein { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .fv-blatt-ein { animation: none; } }

.fv-blaettern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin: .25rem 0 0;
}
.fv-blaettern[hidden] { display: none; }

.fv-blaettern-seiten {
    display: flex;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fv-blaettern button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 .9rem;
    border-radius: var(--fv-rund-weich);
    border: 1px solid var(--fv-kante);
    background: var(--fv-weiss);
    color: var(--fv-tinte);
    font-family: 'Filvaro Grotesk', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.fv-blaettern button:hover { border-color: var(--fv-signal); color: var(--fv-signal); }
.fv-blaettern button.fv-aktiv {
    background: var(--fv-signal);
    border-color: var(--fv-signal);
    color: #fff;
}
.fv-blaettern button:focus-visible { outline: 3px solid var(--fv-blatt-hell); outline-offset: 2px; }

.fv-blaettern-pfeil svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}

/* --- Getoenter Grund: was darauf steht, wird weiss ------------------------ */

.content-cats-small .sub-categories { background: var(--fv-weiss); }

/* NOVA malt #main-wrapper weiss und deckt damit den Seitengrund zu. */
#main-wrapper { background: var(--fv-papier); }

/* Artikelliste: NOVA faerbt die Spalte selbst (.product-wrapper) — auf dem
   getoenten Grund stiessen die weissen Spalten lueckenlos aneinander. Die
   Spalte wird durchsichtig, die Karte darin traegt Weiss, Kante und Rundung. */
#product-list > .product-wrapper {
    background: transparent;
    margin-bottom: 1.5rem;
}
#product-list > .product-wrapper > .productbox {
    height: 100%;
    background: var(--fv-weiss);
    border: 1px solid var(--fv-kante);
    border-radius: var(--fv-rund);
    padding: 1rem;
}

/* Artikelseite: Fotos haben unterschiedliche Formate. Ein weisses Feld mit
   Rundung gibt allen denselben Rahmen auf dem getoenten Grund. */
.js-gallery-images.square-image {
    background: var(--fv-weiss);
    border-radius: var(--fv-rund);
    overflow: hidden;
}


/* --- Beim Laden nichts Fremdes zeigen (09.10.2026) ------------------------
   Der Ring "Retoure öffnen" stand vor dem Laden der Ankerdaten an seiner
   Grundposition frei im Bild, und das Lagerabzeichen lief als schwarzer
   Balken ueber die ganze Kachelbreite, bis NOVA es vermessen hatte. */
.fv-strecke-live .fv-label-ring { opacity: 0; transition: opacity .3s ease; }
.fv-strecke-live.fv-ring-da.fv-bild-da .fv-label-ring { opacity: 1; }
.fv-strecke-live .fv-strecke-leinwand { opacity: 0; transition: opacity .35s ease; }
.fv-strecke-live.fv-bild-da .fv-strecke-leinwand { opacity: 1; }

.productbox-ribbon,
.ribbon.productbox-ribbon {
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 1.1rem);
}

/* --- Filterspalte: Preis und Zustand nach oben ---------------------------
   NOVA stellt Zustand, dann den ganzen Kategoriebaum (15 Bereiche), dann den
   Preis. Wer filtern will, sucht zuerst den Preis. */
#sidepanel_left { display: flex; flex-direction: column; }
#sidepanel_left > .box-filter-price           { order: -2; }
#sidepanel_left > .box-filter-characteristics { order: -1; }
#sidepanel_left > .box { margin-bottom: 1.25rem !important; }

#sidepanel_left .btn-filter-box,
#sidepanel_left .productlist-filter-headline {
    font-family: 'Filvaro Grotesk', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--fv-tinte);
    padding-left: 0;
    padding-right: 0;
}
#sidepanel_left .box-filter-hr { border-color: var(--fv-kante); }

/* --- Preisspanne ------------------------------------------------------------
   Vorher: zwei eckige Felder mit grauem "EUR"-Kasten und ein gelber Regler
   (NOVA-Grundfarbe, passt zu nichts hier). Jetzt: zwei Pillen mit €-Zeichen,
   Regler in Markengruen. */
.box-filter-price .price-range-inputs { gap: .6rem; justify-content: space-between; margin-bottom: 1.3rem; }
.box-filter-price .price-range-inputs > .col { flex: 1 1 0; max-width: none; }
.box-filter-price .input-group {
    flex-wrap: nowrap;
    align-items: center;
    background: var(--fv-weiss);
    border: 1px solid var(--fv-kante);
    border-radius: var(--fv-rund-weich);
    padding: 0 .9rem;
    height: 42px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.box-filter-price .input-group:focus-within {
    border-color: var(--fv-signal);
    box-shadow: 0 0 0 3px rgba(34, 99, 58, .14);
}
.box-filter-price .price-range-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto;
    font-weight: 600;
    font-size: .95rem;
    color: var(--fv-tinte);
    min-width: 0;
}
.box-filter-price .input-group-prepend { margin: 0; order: 2; }
.box-filter-price .input-group-text {
    border: 0;
    background: none;
    padding: 0 0 0 .3rem;
    font-size: 0;           /* "EUR" ausblenden … */
    color: var(--fv-grau);
}
.box-filter-price .input-group-text::after {
    content: '€';            /* … und als Zeichen setzen */
    font-size: .95rem;
    font-weight: 600;
}

.box-filter-price .noUi-target {
    height: 4px;
    margin: 0 10px .5rem;
    border: 0;
    border-radius: 99px;
    background: var(--fv-kante);
    box-shadow: none;
}
.box-filter-price .noUi-connect { background: var(--fv-signal); }
.box-filter-price .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    top: -8px !important;
    right: -10px !important;
    border-radius: 50%;
    border: 2px solid var(--fv-signal);
    background: var(--fv-weiss);
    box-shadow: 0 2px 6px rgba(22, 24, 28, .18);
    cursor: grab;
}
.box-filter-price .noUi-handle::before,
.box-filter-price .noUi-handle::after { display: none; }
.box-filter-price .noUi-handle:focus-visible { outline: 3px solid var(--fv-blatt-hell); outline-offset: 2px; }


/* --- Handy: Schilder als Pillen unter dem Bild (10.10.2026) ----------------
   Ueber dem Bild sind sie am Handy zu klein. Unter dem Bild erscheinen
   dieselben Texte nacheinander als Pillen und bleiben bis zur naechsten
   Retoure stehen. Am Rechner bleibt alles wie gehabt. */
.fv-schilder-leiste { display: none; }

@media (max-width: 991px) {
    .fv-strecke-live .fv-schilder-leiste {
        order: -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .35rem;
        margin-top: -.3rem;
    }
    .fv-schilder-leiste span {
        display: none;
        font-family: 'Filvaro Grotesk', sans-serif;
        font-weight: 700;
        font-size: .72rem;
        line-height: 1.2;
        color: #fff;
        background: rgba(22, 24, 28, .9);
        border: 1px solid var(--fv-blatt-hell);
        border-radius: var(--fv-rund-weich);
        padding: .3rem .65rem;
        white-space: nowrap;
    }
    .fv-schilder-leiste span.fv-sichtbar {
        display: inline-block;
        animation: fv-pille-ein .3s cubic-bezier(.2, .7, .3, 1) both;
    }
    .fv-schilder-leiste span.fv-schild-mangel { border-color: #F2A38C; }
    .fv-schilder-leiste span.fv-schild-gebraucht { border-color: #E8892F; }
    .fv-schilder-leiste span.fv-schild-defekt { border-color: #E5533D; }
}

@keyframes fv-pille-ein { from { opacity: 0; transform: translateY(4px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .fv-schilder-leiste span.fv-sichtbar { animation: none; } }