/*
 * Gestaltung des Shops.
 *
 * Stand bis 17.08.2026 im Layout als <style>-Block: 69 KB, die bei JEDEM
 * Seitenaufruf neu ueber die Leitung gingen und 44 Prozent des Quelltextes
 * ausmachten. Als eigene Datei laedt der Browser sie einmal und behaelt sie.
 *
 * Nebenbei entfaellt damit die Blade-Falle: @media in einem <style>-Block
 * im Template ist fuer Blade eine Direktive.
 */
:root{
            /* Exakte Marken-Farben aus dem Shopware-Theme (voelk-solar.de) */
            --navy:#102a4d; --navy-dark:#0b2038; --blue:#1e6fd9; --blue-dark:#1a5fb8; --accent:#f5a623;
            --accent-dark:#cf8a12; --announce:#354b67; --nav-fg:#14213a; --nav-pill:#eff5fc;
            --blue-100:#dbe9fb; --blue-50:#eff5fc; --line:#e2e8f0; --line-2:#cbd5e1;
            --fg:#102a4d; --muted:#64748b; --muted-2:#758ca3; --bg:#ffffff; --bg-2:#f6f9fd; --green:#16a34a;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg-2);line-height:1.5}
        a{color:inherit;text-decoration:none}
        img{max-width:100%}
        .container{max-width:1240px;margin:0 auto;padding:0 1.25rem}

        /* Announcement top-bar */
        .announce{background:var(--announce);color:#fff;font-size:.82rem}
        .announce .container{display:flex;align-items:center;justify-content:center;gap:2rem;height:36px;flex-wrap:wrap;overflow:hidden}
        .announce .item{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
        .announce .dot{color:var(--accent)}
        .announce a{color:#fff}

        /* White header */
        .header{background:#fff;border-bottom:1px solid var(--line)}
        .header .container{display:flex;align-items:center;gap:1.25rem;padding:1rem 1.5rem}
        .logo img{height:56px;width:auto;display:block}
        .search{flex:1;max-width:600px;display:flex;align-items:center;background:#fff;border:2px solid rgba(16,42,77,.16);border-radius:9999px;padding:5px 6px;box-shadow:0 10px 24px rgba(11,32,56,.06)}
        .search input{flex:1;min-width:0;border:none;background:transparent;padding:0 18px;font-size:1rem;font-weight:600;color:var(--nav-fg);outline:none}
        .search input::placeholder{color:#94a3b8;font-weight:400}
        .search button{border:none;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;font-weight:800;font-size:.95rem;padding:0 28px;height:44px;border-radius:9999px;cursor:pointer;box-shadow:0 10px 20px rgba(207,138,18,.24)}
        .head-actions{display:flex;gap:.7rem;align-items:center;font-size:.88rem;white-space:nowrap;margin-left:auto}
        .head-actions .link{display:flex;gap:.4rem;align-items:center;background:#fff;border:1px solid rgba(16,42,77,.12);border-radius:9999px;padding:0 20px;height:44px;color:var(--nav-fg);font-weight:800}
        .head-actions .link:hover{background:var(--nav-pill)}
        .head-actions .cart{background:var(--accent);color:#fff;font-weight:800;padding:0 20px;height:44px;border-radius:9999px;display:flex;gap:.45rem;align-items:center;box-shadow:0 10px 22px rgba(11,32,56,.22)}
        .head-actions .cart:hover{filter:brightness(1.04)}
        .head-actions .hic{width:18px;height:18px;flex:0 0 18px}
        /* Kundenmenü-Dropdown */
        .acct-menu{position:relative}
        .acct-dd{position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(16,42,77,.15);min-width:230px;padding:.5rem;display:none;z-index:60}
        .acct-menu:hover .acct-dd{display:block}
        .acct-dd .acct-hd{color:var(--muted);font-size:.78rem;padding:.5rem .7rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
        .acct-dd a,.acct-dd button{display:flex;width:100%;gap:.55rem;align-items:center;padding:.6rem .7rem;color:var(--navy);font-size:.9rem;border:none;background:none;cursor:pointer;text-align:left;border-radius:7px;font-family:inherit}
        .acct-dd a:hover,.acct-dd button:hover{background:var(--bg-2)}

        /* Main nav with mega-menu */
        .mainnav{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:40}
        .mainnav .container{display:flex;flex-wrap:wrap;gap:.3rem;padding:.55rem 1.5rem}
        .navitem{position:relative}
        .navitem>a{display:flex;align-items:center;gap:.4rem;color:var(--nav-fg);font-size:.92rem;font-weight:600;padding:.5rem .9rem;border-radius:9999px}
        .navitem>a:hover{background:var(--nav-pill);color:var(--navy)}
        .navitem.active>a{background:var(--nav-pill);color:var(--navy);font-weight:800}
        .navitem.boxed>a{background:var(--navy);color:#fff;border:2px solid var(--accent);border-radius:8px;margin:0;padding:.4rem .85rem;font-weight:700}
        .navitem.boxed>a .ic{color:var(--accent)}

        /* Mega dropdown */
        .mega{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 20px 40px rgba(16,42,77,.15);padding:1.5rem;display:none;z-index:50}
        .navitem:hover .mega{display:block}
        .mega .mega-head{font-weight:700;color:var(--navy);margin-bottom:1rem;font-size:.95rem;display:flex;justify-content:space-between;gap:2rem;align-items:center}
        .mega .mega-head a{color:var(--blue);font-size:.82rem;font-weight:600}
        .mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem 2rem;min-width:640px}
        /* Frueher ein h4. Die Beschriftung einer Menuespalte ist aber keine
           Ueberschrift des Dokuments: 40 davon im Mega-Menue standen in jeder
           Seitengliederung und verdeckten die echten Abschnitte. Gleiche
           Gestaltung, nur ohne Rang. */
        .mega-col .spaltentitel{margin:0 0 .5rem;color:var(--navy);font-size:.88rem;border-bottom:2px solid var(--accent);padding-bottom:.35rem;display:inline-block}
        .mega-col a{display:block;color:var(--muted);font-size:.85rem;padding:.28rem 0}
        .mega-col a:hover{color:var(--blue)}
        @media(max-width:900px){.mega{position:static;display:block;box-shadow:none;border:none;border-top:1px solid var(--line);border-radius:0;padding:1rem 0}.mega-cols{min-width:0}.navitem:hover .mega{display:block}}

        /* Hero card */
        /* ---- Werbe-Slider (Startseite oben) ------------------------------
           Der Wechsel laeuft ueber Scroll-Snap: Wischen macht der Browser,
           JavaScript steuert nur Pfeile, Punkte und den Selbstlauf. */
        /* ---- Rechts- und Kontaktseiten -----------------------------------
           Struktur statt Textwand: nummerierte Abschnitte, Symbole, Karten. */
        .rs-wrap{max-width:900px;margin:0 auto;padding:2rem 0 3rem}
        .rs-kopf{margin-bottom:1.75rem}
        .rs-kopf .rs-eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.09em;
            text-transform:uppercase;color:var(--blue);background:var(--blue-100);padding:.2rem .7rem;border-radius:999px}
        .rs-kopf h1{font-size:2rem;margin:.6rem 0 .5rem;color:var(--navy);letter-spacing:-.01em}
        .rs-kopf p{color:var(--muted);margin:0;font-size:1rem;line-height:1.6;max-width:70ch}
        .rs-stand{font-size:.82rem;color:var(--muted-2);margin-top:.6rem}

        .rs-inhalt{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;margin-bottom:1.5rem}
        .rs-inhalt h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 .6rem}
        .rs-inhalt ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
        .rs-inhalt li{margin:.2rem 0}
        .rs-inhalt a{color:var(--blue);text-decoration:none}
        .rs-inhalt a:hover{text-decoration:underline}

        .rs-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem;margin-bottom:1rem}
        .rs-block > h2{display:flex;align-items:center;gap:.65rem;font-size:1.15rem;color:var(--navy);margin:0 0 .8rem}
        .rs-nr{flex:0 0 30px;height:30px;border-radius:9px;background:var(--blue-100);color:var(--blue);
            display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800}
        .rs-block h3{font-size:1rem;color:var(--navy);margin:1.1rem 0 .35rem}
        .rs-block p, .rs-block li{line-height:1.65;color:#3d4753}
        .rs-block p{margin:0 0 .7rem}
        .rs-block ul{margin:0 0 .7rem;padding-left:1.15rem}
        .rs-block li{margin:.25rem 0}
        .rs-block a{color:var(--blue)}

        /* Kleine Merkkarte fuer Rechtsgrundlage/Speicherdauer */
        .rs-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin:.9rem 0}
        .rs-fakt{background:var(--bg-2);border-radius:10px;padding:.6rem .8rem}
        .rs-fakt b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.15rem}
        .rs-fakt span{font-size:.88rem;color:var(--navy);font-weight:600}

        /* Anbieterliste: wer bekommt welche Daten */
        .rs-anbieter{display:grid;gap:.6rem;margin:.8rem 0}
        .rs-anbieter .a{display:grid;grid-template-columns:36px 1fr;gap:.8rem;align-items:start;
            border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;background:#fff}
        .rs-anbieter .ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
        .rs-anbieter .nm{font-weight:700;color:var(--navy)}
        .rs-anbieter .de{font-size:.88rem;color:var(--muted);line-height:1.5;margin-top:.15rem}
        .rs-anbieter .ort{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:.1rem .55rem;margin-top:.35rem}
        .ort-de{background:#e6f7ec;color:#15803d}
        .ort-eu{background:#e7effe;color:#1e6fd9}
        .ort-us{background:#fff4e0;color:#b45309}

        /* Inhalte aus dem CMS-Editor: sie bringen nur h3/p/ul/table mit,
           die Gestaltung kommt von hier. */
        .rs-cms h3{font-size:1rem;color:var(--navy);margin:1.2rem 0 .4rem;display:flex;align-items:center;gap:.55rem}
        /* Schrittzahlen aus dem Import: standen als nackte Ziffer in eigener Zeile */
        .rs-schritt{flex:0 0 24px;height:24px;border-radius:7px;background:var(--accent);color:#fff;
            display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
        .rs-cms h4{font-size:.94rem;color:var(--navy);margin:1rem 0 .3rem}
        .rs-cms p{margin:0 0 .75rem;line-height:1.65;color:#3d4753}
        .rs-cms ul,.rs-cms ol{margin:0 0 .8rem;padding-left:1.2rem}
        .rs-cms li{margin:.3rem 0;line-height:1.6;color:#3d4753}
        .rs-cms a{color:var(--blue)}
        .rs-cms strong,.rs-cms b{color:var(--navy)}
        .rs-cms table{width:100%;border-collapse:collapse;margin:.6rem 0 1rem;font-size:.92rem}
        .rs-cms th,.rs-cms td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
        .rs-cms th{background:var(--bg-2);color:var(--navy);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
        .rs-cms tr:last-child td{border-bottom:0}
        .rs-cms hr{border:0;border-top:1px solid var(--line);margin:1.2rem 0}
        .rs-cms blockquote{margin:1rem 0;padding:.8rem 1.1rem;border-left:4px solid var(--blue);
            background:var(--blue-100);border-radius:0 10px 10px 0;color:#173a6b}
        .rs-cms > *:first-child{margin-top:0}
        .rs-cms > *:last-child{margin-bottom:0}
        /* Die importierten Seiten bringen teils eigene Abschnitts-Ueberschriften
           als h1 mit - die wuerden neben der Seitenueberschrift doppelt wirken. */
        .rs-cms h1{font-size:1.1rem;color:var(--navy);margin:1rem 0 .5rem}

        .rs-hinweis{border-left:4px solid var(--blue);background:var(--blue-100);border-radius:0 10px 10px 0;
            padding:.85rem 1.1rem;margin:1rem 0;font-size:.92rem;line-height:1.6;color:#173a6b}
        .rs-hinweis.warn{border-color:#f59e0b;background:#fffbeb;color:#78350f}

        /* Kontaktseite */
        .k-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.25rem;align-items:start}
        .k-wege{display:grid;gap:.7rem}
        .k-weg{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:center;background:#fff;
            border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;text-decoration:none;transition:.15s}
        .k-weg:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(30,111,217,.12);transform:translateY(-1px)}
        .k-weg .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
        .k-weg .t{font-weight:700;color:var(--navy)}
        .k-weg .s{font-size:.86rem;color:var(--muted);margin-top:.1rem}
        .k-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem}
        .k-form h2{margin:0 0 .3rem;font-size:1.15rem;color:var(--navy)}
        .k-form .sub{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
        .k-form label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin:.75rem 0 .25rem}
        .k-form input,.k-form select,.k-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;
            padding:.7rem .85rem;font:inherit;font-size:.95rem;background:#fff;color:var(--text)}
        .k-form input:focus,.k-form select:focus,.k-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
        .k-form .zeile{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
        .k-form .check{display:flex;gap:.55rem;align-items:flex-start;margin:.9rem 0 .2rem;font-size:.86rem;color:var(--muted)}
        .k-form .check input{width:auto;margin-top:.2rem}
        .k-fehler{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:9px;padding:.6rem .8rem;font-size:.88rem;margin-bottom:.8rem}
        .k-ok{background:#e6f7ec;border:1px solid #bbf7d0;color:#15803d;border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1rem}
        .k-ok b{display:block;font-size:1.05rem;margin-bottom:.25rem}
        @media(max-width:820px){
            .k-grid{grid-template-columns:1fr}
            .rs-inhalt ol{columns:1}
            .rs-kopf h1{font-size:1.6rem}
            .k-form .zeile{grid-template-columns:1fr}
        }

        .vs-slider-wrap{padding-top:1.5rem}
        /* Der Slider laeuft auf Content-Breite, nicht randlos - so sitzt er
           buendig zu den Karten darunter. */
        .vs-slider{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(16,42,77,.10)}
        .vs-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
        .vs-slides::-webkit-scrollbar{display:none}
        .vs-slide{flex:0 0 100%;scroll-snap-align:start;background-size:cover;background-position:center;
            display:flex;align-items:center;min-height:270px;padding:2rem 0}
        .vs-slide-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.75rem;
            align-items:center;width:100%;padding:0 2.25rem}
        .vs-slide-text{max-width:640px}
        /* Ohne Bild braucht der Text die ganze Breite - sonst klafft rechts ein Loch */
        .vs-slide-inner.ohne-bild{grid-template-columns:1fr}
        .vs-slide-inner.ohne-bild .vs-slide-text{max-width:760px}
        .vs-slide h1,.vs-slide h2{font-size:2rem;line-height:1.15;margin:.15rem 0 .6rem;font-weight:800;letter-spacing:-.01em}
        .vs-slide p{margin:0;font-size:1.02rem;line-height:1.5;opacity:.92}
        .vs-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;
            font-weight:800;padding:.2rem .7rem;border-radius:999px;background:rgba(255,255,255,.16)}
        .vs-slide-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
        /* Produktfotos sind auf Weiss freigestellt. Auf farbigem Grund stuende
           sonst ein weisser Kasten - deshalb bewusst als weisse Karte. */
        .vs-slide-bild{background:#fff;border-radius:14px;padding:1rem;box-shadow:0 6px 24px rgba(0,0,0,.18)}
        .vs-slide-bild img{width:100%;height:auto;max-height:190px;object-fit:contain;display:block}
        .vs-slide.thema-navy{background:linear-gradient(115deg,#102a4d,#1e4d8f);color:#fff}
        .vs-slide.thema-orange{background:linear-gradient(115deg,#cf8a12,#f5a623);color:#fff}
        .vs-slide.thema-orange .vs-eyebrow{background:rgba(0,0,0,.18)}
        .vs-slide.thema-hell{background:var(--bg-2);color:var(--navy)}
        .vs-slide.thema-hell .vs-eyebrow{background:rgba(16,42,77,.10)}
        .vs-slide.thema-hell p{color:var(--muted)}
        /* .btn-outline ist fuer dunklen Grund gemacht (weisser Text). Auf der
           hellen Flaeche waere er unsichtbar - hier dunkel umfaerben. */
        .vs-slide.thema-hell .btn-outline{color:var(--navy);border-color:rgba(16,42,77,.35);background:#fff}
        .vs-slide.thema-hell .btn-outline:hover{border-color:rgba(16,42,77,.6)}
        .vs-slide.thema-bild{color:#fff}
        /* Schriftfarbe folgt der Helligkeit des Hintergrunds, nicht der
           Gestaltung - so bleibt jede frei gewaehlte Farbe lesbar. */
        .vs-slide.schrift-hell{color:#fff}
        .vs-slide.schrift-hell p{color:rgba(255,255,255,.92)}
        .vs-slide.schrift-hell .vs-eyebrow{background:rgba(255,255,255,.18);color:#fff}
        .vs-slide.schrift-hell .btn-outline{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
        .vs-slide.schrift-dunkel{color:var(--navy)}
        .vs-slide.schrift-dunkel p{color:#3d4753}
        .vs-slide.schrift-dunkel .vs-eyebrow{background:rgba(16,42,77,.12);color:var(--navy)}
        .vs-slide.schrift-dunkel .btn-outline{color:var(--navy);border-color:rgba(16,42,77,.35);background:rgba(255,255,255,.7)}
        .vs-slide.schrift-dunkel .btn-outline:hover{background:#fff}
        /* Platz fuer die Pfeile schaffen - sonst liegen sie im Text.
           Nur bei mehreren Flaechen, sonst waere der Text grundlos eingerueckt. */
        .vs-slider.hat-mehrere .vs-slide-inner{padding-left:4.25rem;padding-right:4.25rem}
        .vs-slider.hat-mehrere .vs-slide{padding-bottom:2.6rem}
        .vs-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;
            border-radius:999px;border:0;cursor:pointer;background:rgba(255,255,255,.85);color:#102a4d;
            font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;
            box-shadow:0 2px 10px rgba(0,0,0,.18)}
        .vs-pfeil:hover{background:#fff}
        .vs-pfeil.links{left:14px}
        .vs-pfeil.rechts{right:14px}
        .vs-punkte{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:.4rem;z-index:2}
        /* Die Punkte liegen ueber wechselnden Hintergruenden (navy, orange, hell).
           Deshalb Kontrast in BEIDE Richtungen: heller Punkt mit dunklem Rand,
           aktiv in der Markenfarbe - das sitzt auf jedem Untergrund. */
        .vs-punkte button{width:9px;height:9px;padding:0;border-radius:999px;cursor:pointer;
            background:rgba(255,255,255,.55);border:1px solid rgba(16,42,77,.28);transition:width .2s}
        .vs-punkte button.aktiv{background:#fff;border-color:rgba(16,42,77,.45);width:24px}
        .hero-wrap{padding:1.75rem 0}
        .hero{background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 100%);color:#fff;border-radius:16px;padding:2.5rem;display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:center}
        @media(max-width:820px){.hero{grid-template-columns:1fr;padding:1.75rem}}
        @media(max-width:820px){
            .vs-slider-wrap{padding-top:1rem}
            .vs-slide-inner{grid-template-columns:1fr;padding:0 1.4rem}
            .vs-slide-bild{display:none}
            .vs-slide{min-height:230px;padding:1.6rem 0}
            .vs-slide h1,.vs-slide h2{font-size:1.5rem}
            .vs-slide p{font-size:.95rem}
            /* Auf dem Handy wird gewischt - Pfeile waeren nur im Weg */
            .vs-pfeil{display:none}
        }
        .hero .badge-line{display:inline-block;background:rgba(245,166,35,.15);color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:.35rem .75rem;border-radius:999px;margin-bottom:1rem}
        .hero h1{font-size:2.1rem;margin:0 0 .75rem;line-height:1.15}
        .hero p{color:var(--blue-100);margin:0 0 1.5rem;max-width:520px}
        .hero .btns{display:flex;gap:.75rem;flex-wrap:wrap}
        .btn-accent{background:var(--accent);color:var(--navy-dark);font-weight:700;padding:.8rem 1.5rem;border-radius:8px;border:none;cursor:pointer}
        .btn-accent:hover{filter:brightness(1.05)}
        .btn-outline{background:transparent;color:#fff;font-weight:600;padding:.8rem 1.5rem;border-radius:8px;border:1px solid rgba(255,255,255,.4)}
        .btn-outline:hover{background:rgba(255,255,255,.1)}
        .hero-badges{display:flex;flex-direction:column;gap:.75rem}
        .hero-badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:.85rem 1.1rem}
        .hero-badge b{display:block;font-size:.95rem}
        .hero-badge span{color:var(--blue-100);font-size:.8rem}

        /* Sections */
        section.block{padding:2rem 0}
        .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap}
        .sec-head h2{font-size:1.5rem;margin:0;color:var(--navy)}
        .sec-head .hint{color:var(--muted);font-size:.9rem}

        /* Chips */
        .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
        .chip{border:1px solid var(--line-2);border-radius:999px;padding:.4rem .95rem;font-size:.85rem;color:var(--navy);background:#fff}
        .chip:hover{border-color:var(--blue);color:var(--blue)}
        .chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}

        /* Product grid */
        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
        .card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s,border-color .15s}
        .card:hover{box-shadow:0 12px 30px rgba(16,42,77,.12);transform:translateY(-3px);border-color:var(--blue-100)}
        /* Einheitliche Kachelgroesse fuer ALLE Produkte: gleiche Flaeche, weisser
           Rahmen, Motiv wird eingepasst statt beschnitten (object-fit:contain).
           Vorher schnitt „cover" hohe Produkte wie Module oder Speicher an. */
        .card .thumb{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:.82rem;border-bottom:1px solid var(--line);overflow:hidden;padding:.6rem}
        .card .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .25s ease}
        .card:hover .thumb img{transform:scale(1.06)}
        .card .body{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
        .badge{align-self:flex-start;font-size:.68rem;font-weight:600;padding:.18rem .55rem;border-radius:999px;background:var(--blue-100);color:var(--navy)}
        .card .name{font-weight:600;color:var(--navy);margin:.1rem 0 0}
        .card .mf{color:var(--muted);font-size:.82rem}
        .card .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:.5rem}
        .price{font-size:1.2rem;font-weight:700;color:var(--navy)}
        .price small{display:block;color:var(--muted);font-weight:400;font-size:.68rem}
        .price .mwst{color:var(--green);font-weight:600;font-size:.72rem}
        .to-cart{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:.5rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer}
        .to-cart:hover{background:var(--blue-dark)}
        .empty{color:var(--muted);padding:3rem 0;text-align:center;grid-column:1/-1}

        /* Why us */
        .why{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
        .why-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:1.5rem}
        .why-card .ic{font-size:1.8rem;margin-bottom:.6rem}
        .why-card h3{margin:0 0 .4rem;color:var(--navy);font-size:1.1rem}
        .why-card p{margin:0;color:var(--muted);font-size:.9rem}

        /* ===== Warenkorb ===== */
        .cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.75rem;align-items:start}
        @media(max-width:900px){.cart-layout{grid-template-columns:1fr}}
        .cart-items{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 12px rgba(16,42,77,.04);overflow:hidden}
        .cart-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
        .cart-row:last-child{border-bottom:none}
        .cart-thumb{width:72px;height:72px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:1.4rem}
        .cart-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
        .cart-info .nm{color:var(--navy);font-weight:600;font-size:.98rem;line-height:1.3}
        .cart-info .meta{font-size:.76rem;color:var(--muted-2);margin-top:.15rem}
        .cart-info .taxbadge{display:inline-block;margin-top:.4rem;font-size:.72rem;font-weight:600;padding:.12rem .5rem;border-radius:999px}
        .cart-info .taxbadge.pv{background:#dcfce7;color:#15803d}
        .cart-info .taxbadge.std{background:var(--bg-2);color:var(--muted)}
        .cart-right{display:flex;align-items:center;gap:1.25rem}
        .cart-qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
        .cart-qty button{border:none;background:var(--bg-2);width:30px;height:34px;font-size:1rem;cursor:pointer;color:var(--navy)}
        .cart-qty input{border:none;width:44px;height:34px;text-align:center;font-size:.9rem;font-weight:600}
        .cart-price{text-align:right;min-width:90px}
        .cart-price .single{font-size:.76rem;color:var(--muted-2)}
        .cart-price .total{font-weight:800;color:var(--navy);font-size:1.05rem}
        .cart-rm{border:none;background:none;color:#c2410c;cursor:pointer;font-size:1.1rem;padding:.2rem}
        .cart-foot{padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;background:var(--bg-2)}
        .cart-foot a{color:var(--muted);font-size:.88rem}
        .cart-foot button{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:.5rem .9rem;font-size:.85rem;font-weight:600;color:var(--navy);cursor:pointer}
        /* Zusammenfassung */
        .cart-summary{position:sticky;top:1rem;display:flex;flex-direction:column;gap:1.25rem}
        @media(max-width:900px){.cart-summary{position:static}}
        .sum-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;box-shadow:0 2px 12px rgba(16,42,77,.04)}
        .sum-card h3{margin:0 0 1rem;font-size:1.1rem;color:var(--navy)}
        .sum-line{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.9rem;color:var(--muted)}
        .sum-line .v{color:var(--navy);font-weight:500}
        .sum-line.tax{font-size:.84rem}
        .sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--line);margin-top:.6rem;padding-top:.75rem}
        .sum-total .lbl{font-size:1.05rem;font-weight:700;color:var(--navy)}
        .sum-total .val{font-size:1.6rem;font-weight:800;color:var(--navy)}
        .sum-cta{display:block;width:100%;text-align:center;background:var(--accent);color:var(--navy-dark);border:none;border-radius:10px;padding:.9rem;font-size:1.02rem;font-weight:700;cursor:pointer;margin-top:1rem}
        .sum-cta:hover{filter:brightness(1.04)}
        .sum-pvnote{font-size:.78rem;color:var(--green);margin:.75rem 0 0;display:flex;gap:.4rem}
        /* Anfrage-Modus: sperrige, guenstige Ware, bei der der Versand den
           Einzelpreis sprengt. Bewusst zurueckhaltend gestaltet - es ist kein
           Fehler, sondern ein normaler Bestellweg. */
        .preis-anfrage{color:var(--blue);font-weight:700;white-space:nowrap}
        .cart-info .taxbadge.anfrage{background:#e0eaff;color:#0042a0}
        .sum-anfragenote{font-size:.78rem;color:var(--muted);margin:.75rem 0 0;display:flex;gap:.4rem;
            background:var(--bg-2);border-radius:8px;padding:.6rem .7rem}
        .sum-nurange{font-size:.85rem;color:var(--muted);margin:.9rem 0 0;text-align:center;line-height:1.5}
        .anfrage-hinweis{font-size:.86rem;color:var(--muted);line-height:1.55;margin:.4rem 0 .2rem;
            background:var(--bg-2);border-left:3px solid var(--blue);border-radius:8px;padding:.7rem .9rem}
        .sum-trust{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;color:var(--muted)}
        .sum-trust div{display:flex;gap:.5rem;align-items:center} .sum-trust .ic{color:var(--green)}
        .offer-card .field{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:.65rem;margin-bottom:.55rem;font-family:inherit;font-size:.9rem}
        .cart-empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:3.5rem 2rem;text-align:center;box-shadow:0 2px 12px rgba(16,42,77,.04)}
        .cart-empty .ic{font-size:3rem;opacity:.35;margin-bottom:.75rem}
        /* Formulare (Konto/Registrierung) */
        .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem}
        @media(max-width:560px){.form-grid{grid-template-columns:1fr}}
        .fl{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--navy)}
        .fl .field,.fl select,.fl input{font-weight:400}
        .field,select.field{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:.6rem .7rem;font-family:inherit;font-size:.92rem;color:var(--fg);background:#fff}
        .field:focus{outline:none;border-color:var(--blue)}
        .channels{display:flex;flex-wrap:wrap;gap:.5rem}
        .chan{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line-2);border-radius:8px;padding:.45rem .8rem;font-size:.85rem;color:var(--navy);cursor:pointer;font-weight:500}
        /* Checkout: Versand/Zahlungs-Optionen */
        .ship-opt{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line-2);border-radius:10px;padding:.85rem 1rem;margin-bottom:.6rem;cursor:pointer}
        .ship-opt:has(input:checked){border-color:var(--blue);background:var(--blue-50)}
        .ship-opt .so-main{flex:1;display:flex;flex-direction:column;color:var(--navy)}
        .ship-opt .so-note{font-size:.78rem;color:var(--muted);font-weight:400}
        .ship-opt .so-cost{font-weight:700;color:var(--navy);white-space:nowrap}

        /* Pagination */
        .pagination{display:flex;gap:.4rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}
        .pagination a,.pagination span{padding:.4rem .8rem;border:1px solid var(--line-2);border-radius:8px;font-size:.85rem;color:var(--navy);background:#fff}

        /* Detail */
        .back{color:var(--muted);font-size:.9rem;display:inline-block;margin-bottom:1.25rem}
        .back:hover{color:var(--blue)}
        .detail{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
        @media(max-width:768px){.detail{grid-template-columns:1fr}.hero h1{font-size:1.7rem}}
        /* Produktbild in der Detailansicht: groesser, immer vollstaendig zu sehen.
           Beim Darueberfahren wird in das Bild hineingezoomt (Lupe) – der
           Zoompunkt folgt dem Mauszeiger (siehe zoom-Skript in show.blade). */
        .detail .thumb{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted-2);overflow:hidden;padding:1rem;cursor:zoom-in;position:relative}
        .detail .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;transition:transform .18s ease;transform-origin:center center}
        .detail .thumb.zoom img{transform:scale(2.2);cursor:zoom-in}
        .detail .thumb .zoom-hinweis{position:absolute;right:.6rem;bottom:.6rem;background:rgba(16,42,77,.72);color:#fff;font-size:.72rem;padding:.2rem .55rem;border-radius:999px;pointer-events:none;opacity:.9}
        .detail .thumb.zoom .zoom-hinweis{opacity:0}
        .detail h1{color:var(--navy);font-size:1.7rem;margin:.4rem 0 .8rem}
        .detail .price-lg{font-size:1.9rem;font-weight:700;color:var(--navy);margin-bottom:1rem}
        .detail .price-lg small{font-size:.8rem;color:var(--muted);font-weight:400}
        .buy{background:var(--accent);color:var(--navy-dark);border:none;border-radius:8px;padding:.85rem 1.7rem;font-size:1rem;font-weight:700;cursor:pointer;margin-top:1rem}
        .buy:hover{filter:brightness(1.05)}
        .spec{border-top:1px solid var(--line);padding:.6rem 0;display:flex;justify-content:space-between;font-size:.92rem}
        .spec span:first-child{color:var(--muted)}
        .spec span:last-child{color:var(--navy);font-weight:500}
        .desc{color:var(--muted);margin:0 0 1rem}
        .detail-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2rem}

        /* ===== Produkt-Detail: professionelles Layout ===== */
        .pd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.5rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:0 4px 24px rgba(16,42,77,.05)}
        @media(max-width:900px){.pd-top{grid-template-columns:1fr;gap:1.5rem}}
        /* Galerie */
        /* Grosses Produktbild: immer gleiche Flaeche, Motiv vollstaendig sichtbar.
           Beim Darueberfahren wird hineingezoomt, der Ausschnitt folgt dem
           Mauszeiger (Skript in shop/show.blade.php). */
        .gallery .main{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted-2);overflow:hidden;position:relative;cursor:zoom-in}
        .gallery .main img{width:100%;height:100%;object-fit:contain;padding:1.5rem;transition:transform .15s ease;transform-origin:center center;will-change:transform}
        .gallery .main.zoomt img{transform:scale(2.4);padding:0}
        .gallery .main .lupe{position:absolute;right:.7rem;bottom:.7rem;background:rgba(16,42,77,.75);color:#fff;font-size:.74rem;padding:.22rem .6rem;border-radius:999px;pointer-events:none;transition:opacity .15s}
        .gallery .main.zoomt .lupe{opacity:0}
        @media (pointer: coarse) { .gallery .main{cursor:default} .gallery .main.zoomt img{transform:none;padding:1.5rem} }
        .gallery .main .ph{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted-2);font-size:.85rem}
        .gallery .main .ph .ic{font-size:2.5rem;opacity:.4}
        .gallery .thumbs{display:flex;gap:.6rem;margin-top:.75rem;flex-wrap:wrap}
        .gallery .thumbs .t{width:66px;height:66px;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;padding:3px;transition:border-color .12s;display:flex;align-items:center;justify-content:center}
        .gallery .thumbs .t img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
        .gallery .thumbs .t.active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
        .gallery .thumbs .t img{width:100%;height:100%;object-fit:contain}
        /* Kaufpanel (rechts oben) */
        .pd-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
        .pd-brand img{height:26px;max-width:120px;object-fit:contain}
        .pd-brand .badge{margin:0}
        .pd-title{font-size:1.65rem;line-height:1.2;color:var(--navy);margin:0 0 .5rem;font-weight:700}
        .pd-sku{color:var(--muted-2);font-size:.82rem;margin-bottom:1.1rem}
        .pd-price{font-size:2.1rem;font-weight:800;color:var(--navy);line-height:1}
        .pd-taxnote{color:var(--muted);font-size:.82rem;margin:.35rem 0 1.25rem}
        .pd-actions{display:flex;gap:.75rem;align-items:stretch;margin-bottom:.5rem}
        .pd-actions .buy{flex:1;margin:0;font-size:1.02rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
        .pd-minnote{font-size:.82rem;color:#c2410c;margin:.25rem 0 0}
        .pd-added{color:var(--green);font-size:.88rem;margin:.5rem 0 0}
        /* Vorteil/Trust-Zeile als Grid */
        .pd-trust{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
        .pd-trust div{display:flex;gap:.5rem;align-items:center;font-size:.84rem;color:var(--fg)}
        .pd-trust .ic{color:var(--green);flex:0 0 auto}
        @media(max-width:520px){.pd-trust{grid-template-columns:1fr}}
        /* MwSt-Befreiung Box */
        .pvbox{background:linear-gradient(180deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;border-radius:12px;padding:1rem 1.1rem;margin-bottom:1.25rem}
        .pvbox .hd{display:flex;align-items:center;gap:.5rem;color:#15803d;font-weight:700;font-size:.92rem;margin-bottom:.6rem}
        .pvbox label{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:#166534;cursor:pointer;line-height:1.45}
        .pvbox label input{margin-top:.15rem}
        .pvbox .info{display:inline-block;margin-top:.6rem;color:#15803d;font-weight:600;font-size:.82rem;cursor:pointer;text-decoration:underline}
        /* Mengen-Stepper */
        .stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff}
        .stepper button{border:none;background:var(--bg-2);width:44px;height:48px;font-size:1.3rem;cursor:pointer;color:var(--navy)}
        .stepper button:hover{background:var(--blue-100)}
        .stepper input{border:none;width:60px;height:48px;text-align:center;font-size:1.05rem;font-weight:600;color:var(--navy)}
        .buy{background:var(--accent);color:var(--navy-dark);border:none;border-radius:10px;padding:0 1.7rem;height:48px;font-size:1rem;font-weight:700;cursor:pointer}
        .buy:hover{filter:brightness(1.04)}
        /* Unterer Bereich: Inhalt + Sidebar */
        .pd-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start;margin-top:1.75rem}
        @media(max-width:900px){.pd-body{grid-template-columns:1fr}}
        .pd-rail{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:1rem}
        @media(max-width:900px){.pd-rail{position:static}}
        .card-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.75rem;margin-bottom:1.5rem;box-shadow:0 2px 12px rgba(16,42,77,.04)}
        .card-block h2{margin:0 0 1.1rem;font-size:1.25rem;color:var(--navy);padding-bottom:.6rem;border-bottom:2px solid var(--blue-100)}
        .card-block h3{color:var(--navy);margin:1.5rem 0 .6rem;font-size:1.05rem}
        /* Rail-Karten */
        .rail-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.35rem;box-shadow:0 2px 12px rgba(16,42,77,.04)}
        .rail-card .kick{color:var(--accent);font-weight:700;font-size:.7rem;letter-spacing:.06em;margin-bottom:.5rem}
        .rail-card h4{margin:0 0 .6rem;color:var(--navy);font-size:1.02rem}
        .rail-card p{margin:.25rem 0;color:var(--muted);font-size:.86rem}
        .rail-card ul{margin:.3rem 0 0;padding:0;list-style:none}
        .rail-card li{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;color:var(--fg);padding:.28rem 0}
        .rail-card li .ic{color:var(--green);flex:0 0 auto}
        .rail-card .btn{display:block;text-align:center;margin-top:.75rem;background:var(--navy);color:#fff;border-radius:9px;padding:.65rem;font-size:.88rem;font-weight:600}
        .rail-card .btn:hover{background:var(--navy-dark)}
        .rail-card .pm{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem;font-size:.76rem;color:var(--navy);font-weight:600;margin:.15rem .25rem .15rem 0}
        .rail-line{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.85rem;border-bottom:1px solid var(--line)}
        .rail-line:last-child{border-bottom:none}
        .rail-line span:first-child{color:var(--muted)} .rail-line span:last-child{color:var(--navy);font-weight:500;text-align:right}
        /* Tabellen & Prose */
        .specs-table{width:100%;border-collapse:collapse}
        .specs-table tr:nth-child(even){background:var(--bg-2)}
        .specs-table td{padding:.55rem .9rem;font-size:.9rem}
        .specs-table td:first-child{color:var(--muted);width:42%}
        .specs-table td:last-child{color:var(--navy);font-weight:500}
        .prose{color:#334155;font-size:.95rem;line-height:1.7}
        .prose h2,.prose h3{color:var(--navy);font-size:1.05rem;margin:1.2rem 0 .5rem}
        .prose ul{padding-left:1.2rem}
        .prose li{margin:.3rem 0}
        /* Hersteller-Karte */
        .mfcard{display:flex;gap:1.75rem;align-items:flex-start}
        .mfcard .mf-logo{flex:0 0 150px;height:80px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.85rem}
        .mfcard .mf-logo img{max-width:100%;max-height:100%;object-fit:contain}
        .mfcard .mf-logo span{font-weight:700;color:var(--navy);text-align:center;font-size:.95rem}
        .mfcard .mf-text{flex:1;min-width:0}
        .mfcard .mf-text .kick{color:var(--accent);font-weight:700;font-size:.7rem;letter-spacing:.06em;margin-bottom:.25rem}
        .mfcard h3{margin:0 0 .5rem;color:var(--navy);font-size:1.2rem;padding:0;border:none}
        .mfcard p{margin:0 0 .7rem;color:var(--muted);font-size:.9rem;line-height:1.65}
        .mfcard a{color:var(--blue);font-weight:600;font-size:.88rem}
        @media(max-width:520px){.mfcard{flex-direction:column;gap:1rem}.mfcard .mf-logo{flex-basis:auto;width:100%}}
        .hazard{background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:.55rem .8rem;font-size:.82rem;color:#92400e;margin-bottom:1rem}
        .stepper input{border:none;width:56px;height:42px;text-align:center;font-size:1rem}
        /* Trust-Zeile */
        .trust{margin-top:1rem;display:flex;flex-direction:column;gap:.45rem}
        .trust div{display:flex;gap:.55rem;align-items:center;font-size:.83rem;color:var(--muted)}
        .trust .ic{color:var(--green)}
        /* Zahlarten */
        .paymethods{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
        .paymethods .lbl{font-size:.72rem;color:var(--muted-2);letter-spacing:.04em;margin-bottom:.4rem}
        .paymethods .badges{display:flex;gap:.4rem;flex-wrap:wrap}
        .paymethods .pm{border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem;font-size:.78rem;color:var(--navy);background:#fff;font-weight:600}
        /* Artikeldetails */
        .artdetails{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
        .artdetails .lbl{font-size:.72rem;color:var(--muted-2);letter-spacing:.04em;margin-bottom:.4rem}
        /* Sidebar-Boxen */
        .side-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.25rem;margin-bottom:1.25rem}
        .side-card .kick{color:var(--accent);font-weight:700;font-size:.72rem;letter-spacing:.05em;margin-bottom:.5rem}
        .side-card h4{margin:0 0 .5rem;color:var(--navy);font-size:1rem}
        .side-card p{margin:.2rem 0;color:var(--muted);font-size:.85rem}
        .side-card ul{margin:.3rem 0 0;padding:0;list-style:none}
        .side-card li{display:flex;gap:.45rem;align-items:flex-start;font-size:.85rem;color:var(--fg);padding:.2rem 0}
        .side-card li .ic{color:var(--green)}
        .side-card .btn{display:inline-block;margin-top:.6rem;background:var(--navy);color:#fff;border-radius:8px;padding:.5rem .9rem;font-size:.85rem;font-weight:600}
        /* Gefahrgut-Hinweis */
        .hazard{background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:.5rem .8rem;font-size:.8rem;color:#92400e;margin-bottom:.75rem}
        /* Modal */
        .modal-bg{display:none;position:fixed;inset:0;background:rgba(11,32,56,.6);z-index:100;align-items:center;justify-content:center;padding:1.5rem}
        .modal-bg.open{display:flex}
        .modal{background:#fff;border-radius:18px;max-width:920px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
        .modal .close{position:absolute;top:1rem;right:1.1rem;border:none;background:rgba(255,255,255,.2);color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer;z-index:2}
        /* MwSt-Info Inhalt (Nachbau voelk-solar) */
        .vat-header{background:linear-gradient(135deg,#0057b8,#0074e8);padding:2.75rem 3rem;color:#fff}
        .vat-header h2{margin:0 0 .5rem;font-size:1.7rem;color:#fff;line-height:1.2}
        .vat-header p{margin:0;color:#dbe9fb;font-size:1rem;max-width:640px}
        .vat-tags{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}
        .vat-tags span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:.4rem}
        .vat-body{padding:2.25rem 3rem 2.5rem}
        @media(max-width:640px){.vat-header,.vat-body{padding-left:1.5rem;padding-right:1.5rem}}
        .vat-body h3{color:var(--navy);font-size:1.15rem;margin:1.75rem 0 .6rem;padding-bottom:.4rem;border-bottom:2px solid var(--blue-100)}
        .vat-body h3:first-child{margin-top:0}
        .vat-body p{color:#334155;font-size:.94rem;line-height:1.7;margin:.5rem 0}
        .vat-note{background:#fef3c7;border:1px solid #fde68a;border-radius:10px;padding:.9rem 1.1rem;margin:1rem 0;color:#92400e;font-size:.9rem}
        .vat-list{list-style:none;padding:0;margin:.75rem 0}
        .vat-list li{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem;color:#334155;line-height:1.55}
        .vat-list li:last-child{border-bottom:none}
        .vat-list li .ck{color:var(--green);font-weight:800;flex:0 0 auto;margin-top:.05rem}
        .vat-stand{margin-top:1.75rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted-2);font-size:.82rem}

        /* Footer */
        footer{background:var(--navy-dark);color:#aec3de;margin-top:2rem}
        .foot-top{padding:2.5rem 0 1.5rem}
        .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
        @media(max-width:768px){.foot-grid{grid-template-columns:1fr 1fr}}
        .foot-grid .spaltentitel{color:#fff;font-size:.95rem;margin:0 0 .8rem}
        .foot-grid a,.foot-grid p{color:#aec3de;font-size:.86rem;display:block;margin:.3rem 0}
        .foot-grid a:hover{color:#fff}
        .motto{color:var(--accent);font-weight:700;font-size:1.05rem;margin-bottom:.6rem}
        .foot-bottom{border-top:1px solid #21344f;padding:1rem 0;font-size:.8rem;color:#7c93b3}
        .foot-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

        /* Bestell-Status & Detailseite */
        .ostatus{display:inline-block;color:#fff;font-size:.72rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;letter-spacing:.02em}
        .order-row{transition:box-shadow .15s,transform .15s}
        .order-row:hover{box-shadow:0 6px 20px rgba(16,42,77,.12);transform:translateY(-1px)}
        .ostepper{display:flex;justify-content:space-between;margin-top:1.4rem;position:relative}
        .ostepper::before{content:"";position:absolute;top:13px;left:8%;right:8%;height:2px;background:#e2e8f0;z-index:0}
        .ostep{position:relative;z-index:1;text-align:center;flex:1}
        .odot{width:28px;height:28px;border-radius:50%;background:#e2e8f0;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;margin:0 auto .4rem}
        .ostep.done .odot{background:var(--blue)}
        .olabel{font-size:.8rem;font-weight:600;color:var(--navy)}
        .ostep:not(.done) .olabel{color:#94a3b8}
        .ots{font-size:.72rem;color:var(--muted);margin-top:.15rem}
        .track-card{border-left:4px solid #0f766e}
        .oitem{display:flex;gap:1rem;align-items:center;padding:.85rem 0;border-bottom:1px solid #eef2f7}
        .oitem:last-of-type{border-bottom:none}
        .oitem-img{width:64px;height:64px;flex:0 0 64px;border:1px solid #eef2f7;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
        .oitem-img img{max-width:100%;max-height:100%;object-fit:contain}
        .oitem-img span{font-size:.65rem;color:#cbd5e1;text-align:center}
        .oitem-main{flex:1;min-width:0}
        .oitem-name{display:block;font-weight:600;color:var(--navy);text-decoration:none;font-size:.95rem}
        a.oitem-name:hover{color:var(--blue)}
        .oitem-sku{font-size:.75rem;color:#94a3b8;margin-top:.1rem}
        .oitem-qty{font-size:.82rem;color:var(--muted);margin-top:.25rem}
        .oitem-sum{font-weight:700;color:var(--navy);white-space:nowrap}
        /* Startseite */
        .home-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1.25rem}
        .cat-tile{position:relative;display:block;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;text-decoration:none;min-height:120px;padding:1.1rem;transition:transform .15s,box-shadow .15s}
        .cat-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,42,77,.22)}
        .cat-tile .ct-name{font-weight:700;font-size:1.05rem;position:relative;z-index:1;hyphens:auto;overflow-wrap:break-word;padding-right:1.4rem}
        .cat-tile .ct-count{font-size:.8rem;opacity:.85;position:relative;z-index:1;margin-top:.2rem}
        .cat-tile .ct-arrow{position:absolute;right:1rem;bottom:.9rem;font-size:1.3rem;opacity:.7;z-index:1}
        .cat-tile::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(245,166,35,.18)}
        .home-cta{background:linear-gradient(135deg,var(--navy),var(--navy-dark));border-radius:16px;padding:2.5rem;color:#fff;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;margin:2rem 0}
        .home-cta h2{color:#fff;margin:0 0 .5rem}
        .home-cta p{color:#aec3de;margin:0;max-width:520px}
        .mf-strip{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:center;margin-top:1.25rem}
        .mf-strip img{height:38px;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .15s,opacity .15s}
        .mf-strip img:hover{filter:none;opacity:1}
        @media(max-width:640px){.ostepper{font-size:.72rem}.home-cta{padding:1.5rem;text-align:center;justify-content:center}}
        /* Verfügbarkeit / Lieferzeit */
        .pd-avail{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:.1rem 0 1rem}
        .avail{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--navy);font-size:.9rem}
        .avail .dot,.card-avail .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
        .pd-avail .dt{color:var(--muted);font-size:.85rem}
        .card-avail{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--muted);margin:.15rem 0 0}
        /* Sortierung */
        .sec-tools{display:flex;align-items:center;gap:1rem}
        .sortbox label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
        .sortbox select{border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;font-size:.85rem;color:var(--navy);background:#fff;cursor:pointer}
        /* Breadcrumb */
        .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted);margin-bottom:1.1rem}
        .breadcrumb a{color:var(--blue);text-decoration:none}
        .breadcrumb a:hover{text-decoration:underline}
        .breadcrumb .sep{color:var(--muted-2)}
        .breadcrumb .cur{color:var(--navy);font-weight:600}
        .b2b-badge{display:inline-block;background:#eef4ff;color:#1e40af;border:1px solid #c7dbff;border-radius:8px;padding:.35rem .7rem;font-size:.8rem;font-weight:600;margin:.2rem 0 1rem}

        /* ===== Shop-Listing (Banner + Filter-Sidebar) ===== */
        .shop-banner .container{padding-top:1.25rem}
        .sb-inner{background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 100%);color:#fff;border-radius:16px;padding:2rem 2.25rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
        .sb-inner h1{margin:0;font-size:2rem;line-height:1.15}
        .sb-crumb{font-size:.82rem;margin-bottom:.55rem;display:flex;gap:.4rem;flex-wrap:wrap;color:#c7dbff}
        .sb-crumb a{color:#c7dbff}.sb-crumb a:hover{color:#fff}
        .sb-sub{margin:.5rem 0 0;color:#c7dbff;font-size:.9rem}
        .sb-badges{display:flex;flex-direction:column;gap:.5rem}
        .sb-badges span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.42rem .95rem;font-size:.82rem;font-weight:600;white-space:nowrap}
        .sb-badges span::before{content:"●";color:var(--accent);margin-right:.5rem}
        .shop-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.75rem;align-items:start}
        .filter-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;position:sticky;top:1rem}
        .filter-toggle{display:none}
        .filter-group{padding:.3rem 0}
        .filter-group + .filter-group{border-top:1px solid var(--line);margin-top:.5rem;padding-top:1rem}
        .filter-group h4{margin:.2rem 0 .7rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}
        .cat-link{display:block;padding:.5rem .7rem;border-radius:8px;color:var(--navy);font-size:.9rem;font-weight:500}
        .cat-link:hover{background:var(--bg-2)}
        .cat-link.on{background:var(--navy);color:#fff}
        .fp-select{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:.55rem .6rem;font-size:.88rem;color:var(--navy);background:#fff;cursor:pointer}
        .price-row{display:flex;align-items:center;gap:.5rem}
        .price-row input{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:8px;padding:.55rem;font-size:.88rem}
        .fp-apply{width:100%;margin-top:.85rem;background:var(--navy);color:#fff;border:none;border-radius:8px;padding:.6rem;font-weight:600;cursor:pointer}
        .fp-apply:hover{background:var(--navy-dark)}
        .fp-reset{display:block;text-align:center;margin-top:.65rem;color:var(--blue);font-size:.85rem}
        .shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;gap:1rem;flex-wrap:wrap}
        .st-count{color:var(--muted);font-size:.9rem;font-weight:600}
        .shop-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--muted)}
        .shop-empty .ic{font-size:2.5rem;margin-bottom:.5rem}

        /* ===== Startseite: Sortiment-Karten & Kontakt-Band ===== */
        .sec-sub{color:var(--muted);margin:-.6rem 0 1.4rem;max-width:640px}
        .scard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
        .scard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;display:block;text-decoration:none;transition:box-shadow .15s,transform .15s,border-color .15s}
        .scard:hover{box-shadow:0 12px 30px rgba(16,42,77,.1);transform:translateY(-2px);border-color:var(--blue-100)}
        .scard .sic{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
        .scard .sic svg{width:26px;height:26px}
        .scard h3{margin:0 0 .4rem;color:var(--navy);font-size:1.1rem}
        .scard p{margin:0 0 1rem;color:var(--muted);font-size:.88rem;line-height:1.5}
        .scard-link{color:var(--blue);font-weight:600;font-size:.9rem}
        .scard:hover .scard-link{color:var(--blue-dark)}
        .contact-band{background:linear-gradient(120deg,var(--navy),var(--blue));border-radius:16px;padding:2.25rem 2.5rem;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
        .contact-band .cb-text h2{color:#fff;margin:0 0 .4rem;font-size:1.4rem}
        .contact-band .cb-text p{color:#c7dbff;margin:0}
        .cb-btns{display:flex;gap:.75rem;flex-wrap:wrap}
        .cb-btn{display:flex;flex-direction:column;gap:.1rem;padding:.7rem 1.2rem;border-radius:10px;color:#fff;text-decoration:none;font-size:.95rem;line-height:1.2}
        .cb-btn small{font-size:.75rem;opacity:.9;font-weight:400}
        .cb-btn.mail{background:var(--accent);color:var(--navy-dark)}
        .cb-btn.wa{background:#25a244}
        .cb-btn.call{background:#1e6fd9}
        .cb-btn:hover{filter:brightness(1.05)}

        /* ===== Solar-Planer ===== */
        .planner-hero{background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 100%);color:#fff;border-radius:16px;padding:2.25rem 2.5rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem}
        .planner-hero h1{margin:.4rem 0 .6rem;font-size:1.9rem;line-height:1.15}
        .planner-hero p{color:#c7dbff;margin:0;max-width:560px}
        .planner-hero .badge-line{background:rgba(245,166,35,.18)}
        .planner-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;min-width:230px}
        .planner-steps li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:#eaf1fb;font-weight:600}
        .planner-steps span{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--navy-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex:0 0 26px}
        .metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
        .metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem}
        .metric.big{grid-column:span 2;background:linear-gradient(135deg,var(--navy),var(--blue));border:none;color:#fff}
        .metric .mv{font-size:1.7rem;font-weight:800;color:var(--navy);line-height:1.1}
        .metric.big .mv{color:#fff;font-size:2.1rem}
        .metric .ml{margin-top:.35rem;font-weight:600;color:var(--fg)}
        .metric.big .ml{color:#fff}
        .metric .ms{margin-top:.2rem;font-size:.82rem;color:var(--muted)}
        .metric.big .ms{color:#c7dbff}
        /* Assistent */
        .wiz-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
        .anlagen-badge{background:var(--navy);color:#fff;border-radius:9999px;padding:.5rem 1rem;font-size:.8rem;white-space:nowrap}
        .anlagen-badge strong{color:#ffd27a;letter-spacing:.03em}
        .wiz-steps{display:flex;gap:.25rem;margin-top:1.25rem;overflow-x:auto;padding-bottom:.25rem}
        .wstep{flex:1;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;color:var(--muted-2);font-size:.72rem;text-align:center}
        .wstep .wn{width:30px;height:30px;border-radius:50%;background:#e2e8f0;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex:0 0 30px}
        .wstep.done .wn{background:var(--blue)}
        .wstep.cur .wn{background:var(--accent);color:var(--navy-dark)}
        .wstep.cur .wl{color:var(--navy);font-weight:700}
        .wstep.done .wl{color:var(--navy)}
        .wiz-bar{height:6px;background:#e2e8f0;border-radius:999px;margin-top:1rem;overflow:hidden}
        .wiz-bar span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
        .wiz-count{font-size:.8rem;color:var(--muted);margin-top:.4rem;font-weight:600}
        .planner-map{height:460px;border-radius:12px;border:1px solid var(--line-2);overflow:hidden;margin-top:.5rem}
        .area-readout{margin-top:.75rem;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:8px;padding:.65rem .9rem;font-size:.95rem;color:var(--navy)}
        .areas-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1rem}
        .area-card{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:1rem 1.1rem;background:var(--bg-2)}
        .area-card .ac-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
        .area-card .ac-head strong{color:var(--navy)}
        .area-card .ac-m2{background:var(--navy);color:#fff;border-radius:999px;padding:.2rem .7rem;font-size:.8rem;font-weight:700}
        .area-card .ac-grid{grid-template-columns:repeat(3,1fr)}
        .ac-auto{display:inline-block;background:#eef4ff;color:#1e40af;border-radius:999px;padding:.1rem .55rem;font-size:.68rem;font-weight:600;margin-left:.35rem}
        .ac-hint{display:block;color:var(--muted-2);font-size:.72rem;margin-top:.2rem}
        .ac-help{margin-top:.6rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;font-size:.85rem}
        .ac-help summary{cursor:pointer;color:var(--blue);font-weight:600}
        .ac-help p{margin:.5rem 0;color:#334155;line-height:1.55}
        @media(max-width:640px){.area-card .ac-grid{grid-template-columns:1fr}}
        .review-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
        .review-grid>div{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;font-size:.92rem;color:var(--fg)}
        .review-grid>div span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2);margin-bottom:.2rem}
        .wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;gap:1rem}
        /* Konto-/Auswahl-Karten (Schritt 1, 6, 7, 8) */
        .konto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
        .konto-card{display:block;border:2px solid var(--line);border-radius:12px;padding:1rem 1.1rem;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
        .konto-card:hover{border-color:var(--blue-100)}
        .konto-card:has(input:checked){border-color:var(--accent);background:#fffaf0}
        .konto-card input{float:right;accent-color:var(--accent);width:18px;height:18px}
        .konto-card strong{display:block;color:var(--navy);font-size:.98rem}
        .konto-card span{color:var(--muted);font-size:.85rem}
        .konto-card.slim{padding:.7rem 1rem}
        .konto-sub{margin-top:1rem;border:1px solid var(--line);border-radius:10px;padding:1rem;background:var(--bg-2)}
        /* Flächen zeichnen (Schritt 4) */
        .draw-btns{display:flex;gap:.6rem;margin-bottom:.75rem;flex-wrap:wrap}
        .draw-btns button{border:none;border-radius:8px;padding:.65rem 1.2rem;font-weight:700;cursor:pointer;font-size:.92rem}
        .db-new{background:var(--accent);color:#fff}
        .db-undo{background:#fff;color:var(--navy);border:1px solid var(--line-2) !important}
        .db-done{background:#16a34a;color:#fff}
        .draw-btns button:hover{filter:brightness(1.05)}
        .flat-list{margin-top:.9rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
        .flat-list:empty{display:none}
        .flat-row{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--navy)}
        .flat-row:last-child{border-bottom:none}
        .flat-row .dot{width:12px;height:12px;border-radius:3px;flex:0 0 12px}
        .flat-del{color:#dc2626;font-weight:600;font-size:.85rem}
        /* Flächen zeichnen: dickes Fadenkreuz statt Hand (präzise Eckpunkte) */
        .draw-cursor,
        .draw-cursor.leaflet-container,
        .draw-cursor .leaflet-grab,
        .draw-cursor .leaflet-interactive,
        .draw-cursor.leaflet-container.leaflet-drag-target{
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M14 3v22M3 14h22'/%3E%3C/g%3E%3Cg stroke='%23f5a623' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M14 3v22M3 14h22'/%3E%3C/g%3E%3C/svg%3E") 14 14, crosshair !important;
        }
        /* Foto-Uploads (Planer) */
        .upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
        @media(max-width:640px){.upload-grid{grid-template-columns:1fr}}
        .upload-card{display:block;border:1px dashed var(--line-2);border-radius:10px;padding:.9rem 1rem;background:var(--bg-2)}
        .upload-card strong{display:block;color:var(--navy);font-size:.92rem;margin-bottom:.15rem}
        .upload-card .up-hint{display:block;color:var(--muted);font-size:.8rem;margin-bottom:.55rem}
        .upload-card input[type=file]{font-size:.82rem;width:100%}
        .up-important{background:#fef3c7;color:#92400e;border-radius:999px;padding:.1rem .55rem;font-size:.68rem;font-weight:700;margin-left:.3rem}
        /* Nachrichtenverlauf (Kundenportal Planung) */
        .msg-thread{display:flex;flex-direction:column;gap:.7rem;max-height:420px;overflow-y:auto;padding-right:.25rem}
        .msg{background:var(--bg-2);border:1px solid var(--line);border-radius:10px 10px 10px 2px;padding:.7rem .9rem;max-width:85%}
        .msg.mine{align-self:flex-end;background:#eef4ff;border-color:#c7dbff;border-radius:10px 10px 2px 10px}
        .msg-head{font-size:.72rem;color:var(--muted-2);font-weight:600;margin-bottom:.25rem}
        .msg-body{font-size:.92rem;color:var(--fg);white-space:pre-line}
        .ov-count{display:inline-block;background:var(--accent);color:var(--navy-dark);border-radius:999px;padding:.05rem .55rem;font-size:.78rem;font-weight:800;vertical-align:middle;margin-left:.3rem}

        /* ===== Mobile / Responsive ===== */
        .navtoggle{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;font-size:1.35rem;line-height:1;color:var(--navy);padding:.3rem .6rem;cursor:pointer}
        .head-spacer{display:none}
        @media(max-width:820px){
            .header .container{flex-wrap:wrap;gap:.7rem .5rem;padding:.75rem 1rem}
            .navtoggle{display:block;order:0;width:46px;flex:0 0 46px;height:42px}
            /* Logo exakt mittig: Burger links, gleich breiter Spacer rechts */
            .logo{order:1;flex:1;display:flex;justify-content:center;margin:0}
            .logo img{height:52px}
            .head-spacer{display:block;order:2;width:46px;flex:0 0 46px}
            /* Konto + Warenkorb zentriert in eigener Zeile */
            .head-actions{order:3;flex-basis:100%;justify-content:center;gap:.7rem;margin-left:0}
            .head-actions .beratung{display:none}
            .head-actions .cart{padding:.5rem .8rem}
            /* flex-basis:100% allein liess die Leiste ueber den Container
               hinauswachsen - die Seite liess sich dadurch seitlich schieben. */
            .search{order:4;flex:1 1 100%;max-width:100%;min-width:0}
            /* Kategorie-Navigation als aufklappbares Menü */
            .mainnav .container{display:none;flex-direction:column;gap:0;padding:.25rem 1rem}
            .mainnav.open .container{display:flex}
            .navitem{width:100%;border-bottom:1px solid var(--line)}
            .navitem:last-child{border-bottom:none}
            /* Im Klappmenue sind die Eintraege Zeilen, keine Pillen. Die runde
               Hintergrundflaeche der aktiven Seite sprengte die Liste optisch -
               stattdessen markiert ein schmaler Balken am Rand, wo man steht. */
            .navitem>a{padding:.9rem .25rem;font-size:.95rem;border-radius:0}
            .navitem.active>a{background:transparent;color:var(--navy);font-weight:800;
                              box-shadow:inset 3px 0 0 var(--accent);padding-left:.75rem}
            .navitem.boxed>a{margin:.5rem 0;border-radius:8px}
            .mega{display:none !important}
            /* Shop-Listing: Sidebar über dem Raster, per Toggle aufklappbar */
            .shop-layout{grid-template-columns:1fr;gap:1rem}
            .filter-panel{position:static;padding:0;border:none;background:transparent}
            .filter-toggle{display:block;width:100%;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:.75rem;font-weight:600;cursor:pointer}
            .fp-body{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.25rem;margin-top:.75rem}
            .filter-panel.open .fp-body{display:block}
            .sb-inner{padding:1.5rem}
            .sb-inner h1{font-size:1.6rem}
            .sb-badges{flex-direction:row;flex-wrap:wrap;gap:.4rem}
            .sb-badges span{font-size:.75rem;padding:.3rem .7rem}
        }
        @media(max-width:480px){
            .announce .item:nth-child(2),.announce .item:nth-child(3){display:none}
            .hero{padding:1.5rem}.hero h1{font-size:1.6rem}
            .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem}
            .home-cats{grid-template-columns:1fr;gap:.75rem}
            .cat-tile{min-height:0;padding:1rem 1.1rem}
            .cat-tile .ct-arrow{bottom:auto;top:50%;transform:translateY(-50%)}
            .sec-tools{width:100%;justify-content:space-between}
            .cart-row{grid-template-columns:56px minmax(0,1fr);gap:.65rem 1rem}
            .cart-row .cart-right{grid-column:1 / -1;justify-content:space-between;gap:.75rem}
            .cart-price{min-width:0}
            .home-cta .btns{width:100%}.home-cta .btns a{flex:1;text-align:center}
            .contact-band{padding:1.5rem;text-align:center;justify-content:center}
            .cb-btns{width:100%;flex-direction:column}
            .cb-btn{align-items:center}
            .planner-hero{padding:1.5rem}.planner-hero h1{font-size:1.5rem}
            .metric.big{grid-column:auto}
            .review-grid{grid-template-columns:1fr}
            .planner-map{height:340px}
            /* Produktkarten-Fuß stapeln, Preis nicht mehr umbrechen */
            .card .foot{flex-direction:column;align-items:stretch;gap:.55rem}
            .card .foot .price{white-space:nowrap}
            .card .to-cart{text-align:center}
        }