/* omaneo — Redesign nach design-webseite.jpg
   Tokens & Komponenten werden in inc/header.php als separate <link>-Tags geladen:
   1) design-tokens.css → 2) style.css → 3) components.css
   Reihenfolge wichtig: components.css zuletzt = Komponenten-Klassen
   gewinnen bei gleicher Spezifität gegen globale .form-group input etc.
   Regelwerk: 00 Kontext/Webseiten-CI.md */
/* ⛔ 25.08.2026: Hier stand ein @import von Google Fonts. Er ist entfernt, weil die
   Schriften jetzt selbst gehostet sind (`design-tokens.css` §0). Google Fonts überträgt
   die IP des Besuchers in die USA — das LG München hat das 2022 für unzulässig erklärt
   (Az. 3 O 17493/20). Alle acht Schnitte, die dieser Import holte, liegen unter
   `/assets/fonts/` — Inter 300/400/500/600/700, Playfair 400/400-italic/600. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-h)}
ul{list-style:none}
button{cursor:pointer;font-family:var(--font)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;line-height:1.2}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ── Announcement Bar ────────────────────────────────── */
.announce-bar{background:var(--text);color:#ffffff;font-size:11px;letter-spacing:.8px;text-transform:uppercase;padding:9px 0}
.announce-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.announce-center{display:flex;align-items:center;gap:40px;flex:1;justify-content:center}
.announce-item{display:flex;align-items:center;gap:7px;opacity:.9}
.announce-item svg{flex-shrink:0;opacity:.7}
.announce-right{display:flex;align-items:center;gap:20px;flex-shrink:0}
.announce-right a{color:rgba(255,255,255,.75);font-size:11px;letter-spacing:.6px;text-transform:uppercase;transition:color .2s}
.announce-right a:hover{color:#ffffff}

/* ── Nav ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:#ffffff;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.nav-logo{display:inline-flex;align-items:center;color:var(--text);flex-shrink:0;text-decoration:none}
.nav-logo img{height:56px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:0;flex:1;justify-content:center}
.nav-links a{color:var(--text);font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;padding:0 18px;height:68px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;gap:4px}
.nav-links a:hover,.nav-links a.active{color:var(--accent-h);border-bottom-color:var(--accent-h)}
.nav-icons{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nav-icon-btn{background:none;border:none;color:var(--text);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);transition:background .2s,color .2s;position:relative}
.nav-icon-btn:hover{background:var(--surface);color:var(--accent)}
.cart-badge{position:absolute;top:6px;right:6px;background:var(--accent);color:#ffffff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.nav-mobile-toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;padding:8px;cursor:pointer;-webkit-appearance:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}

/* Mobile nav toggle */
.nav-toggle-input{display:none}

/* Nav dropdown arrow */
.nav-arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;margin-top:1px;opacity:.6}

/* Nav dropdown menu */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{background:none;border:none;color:var(--text);font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;padding:0 18px;height:68px;display:inline-flex;align-items:center;cursor:pointer;gap:4px;transition:color .2s;border-bottom:2px solid transparent}
.nav-dropdown-toggle:hover{color:var(--accent-h)}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#ffffff;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);min-width:180px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:200}
.nav-dropdown-menu.open{display:flex}
.nav-dropdown-menu a{color:var(--text);font-size:12px;font-weight:400;padding:12px 20px;border:none;height:auto;border-bottom:1px solid var(--border);transition:background .2s,color .2s}
.nav-dropdown-menu a:last-child{border-bottom:none}
.nav-dropdown-menu a:hover{background:var(--surface);color:var(--accent)}
/* „Über uns"-Dropdown: kurze Eintraege nebeneinander statt gestapelt */
#ueberMenu{/* 2026-07-25: war eine 1003px breite Querleiste (flex-direction:row) und sah damit anders aus als alle anderen Menüs. Jetzt senkrecht wie Wissen/Download — nur rechtsbündig, weil es das letzte Menü der Leiste ist. */left:auto;right:0;transform:none;}
#ueberMenu a{border-bottom:1px solid var(--border);border-right:none}
#ueberMenu a:last-child{border-bottom:none}

/* ── Hero ────────────────────────────────────────────── */
.hero{position:relative;min-height:580px;display:flex;align-items:stretch}
.hero-bg,.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transition:opacity 1.5s ease-in-out;z-index:0}
.hero-bg.active,.page-hero-bg.active{opacity:1}
.hero-overlay,.page-hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(248,246,243,1) 0%,rgba(248,246,243,1) 32%,rgba(248,246,243,0.82) 50%,rgba(248,246,243,0.5) 66%,rgba(248,246,243,0.3) 100%)}
.hero-left{display:flex;flex-direction:column;align-items:stretch;padding:52px 80px 0 8vw;width:56%;position:relative;z-index:2}
.hero-left-inner{flex:1;display:flex;flex-direction:column;max-width:480px}
.hero-main-content{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:24px;font-family:var(--font);font-weight:500}
.hero h1{font-family:var(--font-head);font-size:clamp(2rem,3.5vw,3rem);font-weight:400;line-height:1.18;margin-bottom:10px;color:var(--text)}
.hero-rule{width:48px;height:2px;background:var(--accent);margin:20px 0 28px}
.hero p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:36px;max-width:440px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-gudrun{position:absolute;right:28px;bottom:4px;z-index:3;font-size:13px;font-weight:700;color:var(--accent);background:rgba(248,246,243,0.85);padding:8px 14px;border-radius:4px;backdrop-filter:blur(4px);transition:background .2s,color .2s;text-decoration:none}
.hero-gudrun:hover{background:rgba(248,246,243,1);color:var(--accent-h)}
/* ── Page Hero (sub-pages, halbe Höhe) ───────────────── */
.page-hero{position:relative;min-height:290px;display:flex;align-items:stretch}
.page-hero-content{display:flex;flex-direction:column;justify-content:center;padding:44px 8vw 0;position:relative;z-index:2;width:60%;min-height:290px}
.page-hero-content h1{font-family:var(--font-head);font-size:clamp(1.6rem,2.5vw,2.4rem);font-weight:400;color:var(--text);margin:0 0 10px}
.page-hero-rule{width:36px;height:2px;background:var(--accent);margin:12px 0 16px}
.page-hero-content .hero-eyebrow{color:var(--accent)}
.page-hero-content p{font-size:14px;color:var(--muted);line-height:1.6;margin:0;max-width:420px}

/* ── Buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r);font-size:11px;font-family:var(--font);font-weight:600;letter-spacing:1.5px;border:none;transition:all .2s;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--text);color:#ffffff}
.btn-primary:hover{background:#333;color:#ffffff}
.btn-accent{background:var(--accent);color:#ffffff}
.btn-accent:hover{background:var(--accent-h);color:#ffffff}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--text);color:var(--text);background:transparent}
.btn-sm{padding:9px 18px;font-size:10px;letter-spacing:1px}
.btn-lg{padding:16px 36px;font-size:12px}
.btn-ghost{background:none;border:none;color:var(--muted);padding:8px}
.btn-ghost:hover{color:var(--danger)}

/* ── Cart Icon Button ───────────────────────────────────── */
.cart-icon-btn{background:none;color:var(--text);border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}
.cart-icon-btn svg{stroke:currentColor;flex-shrink:0}
.cart-icon-btn:hover{color:#333;transform:scale(1.15)}
.cart-icon-btn:active{transform:scale(0.95)}

/* ── USP Bar ─────────────────────────────────────────── */
.usp-bar{background:#ffffff;border-bottom:1px solid var(--border);padding:28px 0}
.usp-bar-inner{display:flex;justify-content:center;gap:0;flex-wrap:wrap}
.usp-item{display:flex;align-items:center;gap:14px;padding:10px 40px;border-right:1px solid var(--border);flex:1;min-width:200px;justify-content:center}
.usp-item:last-child{border-right:none}
.usp-icon{width:36px;height:36px;flex-shrink:0;color:var(--text);opacity:.7}
.usp-text strong{display:block;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text);margin-bottom:2px}
.usp-text span{font-size:11px;color:var(--muted)}

/* ── Sections ────────────────────────────────────────── */
.section{padding:80px 0}
.section-sm{padding:48px 0}
.section-header{margin-bottom:48px}
.section-header h2{font-family:var(--font-head);font-size:clamp(1.6rem,2.5vw,2.2rem);margin-bottom:12px;font-weight:400;color:var(--text)}
.section-header p{color:var(--muted);max-width:560px;font-size:15px;line-height:1.7}
.section-header.center{text-align:center}
.section-header.center p{margin:0 auto}
.eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px;font-family:var(--font);font-weight:600}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px}
.section-top .section-header{margin-bottom:0}

/* ── Category Cards ──────────────────────────────────── */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.category-card{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:3/4;background:var(--surface-2);cursor:pointer;group:true}
.category-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 50%,transparent 100%)}
.category-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.category-card:hover img{transform:scale(1.04)}
.category-card-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e0d8cc 0%,#c8bfb0 100%)}
.category-card-body{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:24px 20px}
.category-card-name{display:block;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;margin-bottom:4px}
.category-card-sub{display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.75);font-size:12px}
.category-card-sub svg{flex-shrink:0}

/* ── Brand Section ───────────────────────────────────── */
.brands-section{background:var(--surface);padding:64px 0}
.brands-inner{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:center}
.brands-left h2{font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:12px}
.brands-left p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:28px}
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.brand-item{background:#ffffff;display:flex;align-items:center;justify-content:center;padding:28px 24px;min-height:90px}
.brand-item:hover{background:var(--surface)}
.brand-name{font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:1px;color:var(--muted);text-align:center;line-height:1.2}
/* Special brand styles */
.brand-lamarzocco .brand-name{font-size:13px;letter-spacing:.5px}

/* ── Product Cards ───────────────────────────────────── */
.product-card{background:#ffffff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.product-image{aspect-ratio:1;background:#ffffff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:8%;container-type:inline-size}
.product-image svg{width:80px;height:80px;opacity:.15;color:var(--muted)}
.product-image img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.product-card:hover .product-image img{transform:scale(1.03)}
.product-badge{position:absolute;top:12px;left:12px;background:var(--text);color:#ffffff;font-size:9px;font-weight:700;letter-spacing:1px;padding:4px 10px;border-radius:2px;text-transform:uppercase}
.product-badge.sale{background:#c0392b}
.product-body{padding:16px 20px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
.product-category{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-weight:500}
.product-name{font-family:var(--font-head);font-size:16px;font-weight:400;color:var(--text);line-height:1.3}
.product-name a{color:inherit}
.product-name a:hover{color:var(--accent)}
.product-desc{font-size:12px;color:var(--muted);flex:1;line-height:1.6}
.product-stars{display:flex;align-items:center;gap:6px;margin-top:2px}
.stars{display:flex;gap:1px}
.star{color:#e8c96e;font-size:13px}
.star.half{color:#e8c96e;opacity:.5}
.star.empty{color:var(--border)}
.rating-count{font-size:11px;color:var(--muted)}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.product-price{font-size:17px;font-weight:600;color:var(--text);font-family:var(--font)}
.product-price-old{font-size:12px;color:var(--subtle);text-decoration:line-through;margin-left:4px}

/* Bestseller carousel wrapper */
.bestseller-wrap{position:relative}
.bestseller-scroll{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1200px){.bestseller-scroll{grid-template-columns:repeat(4,1fr)}}

/* ── CTA Teasers ──────────────────────────────────────── */
.cta-teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:64px}
.cta-teaser{background:#ffffff;padding:36px 32px;display:flex;align-items:flex-start;gap:20px}
.cta-icon{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta-icon svg{color:#ffffff}
.cta-body h4{font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--text);margin-bottom:6px;text-transform:uppercase}
.cta-body p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.cta-body a{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:4px}
.cta-body a:hover{color:var(--accent-h)}

/* ── Product Detail ──────────────────────────────────── */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.product-detail-image{aspect-ratio:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-detail-image svg{width:160px;height:160px;opacity:.15;color:var(--muted)}
.product-detail-image img{width:100%;height:100%;object-fit:cover}
.product-detail-info{display:flex;flex-direction:column;gap:24px}
.product-detail-price{font-size:32px;font-weight:600;color:var(--text);font-family:var(--font)}
.product-detail-price span{font-size:14px;color:var(--muted);font-weight:normal}
.qty-row{display:flex;align-items:center;gap:16px}
.qty-control{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.qty-control button{background:var(--surface);border:none;color:var(--text);width:36px;height:40px;font-size:18px;transition:background .2s}
.qty-control button:hover{background:var(--border)}
.qty-control input{width:52px;height:40px;background:#ffffff;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);color:var(--text);text-align:center;font-size:16px}
.features-list{display:flex;flex-direction:column;gap:10px}
.features-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted)}
.features-list li::before{content:'✓';color:var(--accent);font-weight:bold;flex-shrink:0;margin-top:1px}

/* ── Cart ────────────────────────────────────────────── */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:0 0 16px;border-bottom:1px solid var(--border);font-weight:500}
.cart-table td{padding:20px 0;border-bottom:1px solid var(--border);vertical-align:middle}
.cart-item-info{display:flex;align-items:center;gap:16px}
.cart-item-img{width:60px;height:60px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.cart-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px}
.cart-summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.cart-summary-row:last-child{border-bottom:none}
.cart-summary-total{font-size:18px;font-weight:600;color:var(--text)}

/* ── Forms ───────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;font-weight:500}
.form-group input,.form-group select,.form-group textarea{background:#ffffff;border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font);font-size:14px;padding:11px 14px;transition:border-color .2s;width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-section{background:#ffffff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:20px}
.form-section h3{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--muted);text-transform:uppercase;padding-bottom:16px;border-bottom:1px solid var(--border);font-family:var(--font)}

/* ── Blog Cards ──────────────────────────────────────── */
.blog-card{background:#ffffff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.blog-card-image{aspect-ratio:16/9;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.blog-card-image svg{width:64px;height:64px;opacity:.13;color:var(--muted)}
.blog-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-meta{display:flex;align-items:center;gap:16px;font-size:11px;color:var(--muted)}
.blog-tag{color:var(--accent);font-weight:500}
.blog-card h3{font-family:var(--font-head);font-size:17px;line-height:1.35;font-weight:400}
.blog-card h3 a{color:var(--text)}
.blog-card h3 a:hover{color:var(--accent)}
.blog-card p{font-size:13px;color:var(--muted);line-height:1.7}
.blog-card .read-more{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:6px;margin-top:auto}

/* ── Post ────────────────────────────────────────────── */
.post-header{padding:64px 0 48px;border-bottom:1px solid var(--border);margin-bottom:48px}
.post-header h1{font-family:var(--font-head);font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.2;margin-bottom:20px;font-weight:400}
.post-meta{display:flex;gap:24px;color:var(--muted);font-size:13px}
.post-body h2{font-family:var(--font-head);font-size:22px;font-weight:400;color:var(--text);margin:40px 0 16px}
.post-body h3{font-family:var(--font-head);font-size:18px;font-weight:400;color:var(--accent);margin:28px 0 12px}
.post-body p{color:var(--muted);line-height:1.85;margin-bottom:20px;font-size:15px}
.post-body ul,.post-body ol{color:var(--muted);line-height:1.85;margin-bottom:20px;padding-left:24px;font-size:15px}
.post-body li{margin-bottom:6px}
.post-body strong{color:var(--text)}
.post-body .callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);padding:20px 24px;border-radius:0 var(--r) var(--r) 0;margin:28px 0}

/* ── Shop / Filter ───────────────────────────────────── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filter-btn{padding:8px 18px;border-radius:20px;font-size:11px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;font-family:var(--font);font-weight:500;letter-spacing:.5px}
.filter-btn:hover,.filter-btn.active{background:var(--text);color:#ffffff;border-color:var(--text)}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:10px 16px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);font-weight:500}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted)}

/* ── Misc ────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:20px 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--subtle)}
.alert{padding:14px 20px;border-radius:var(--r);font-size:13px;margin-bottom:20px}
.alert-success{background:rgba(39,174,96,.08);border:1px solid rgba(39,174,96,.2);color:#1e8449}
.alert-error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.2);color:#c0392b}
.page-header{padding:56px 0 40px;border-bottom:1px solid var(--border);margin-bottom:56px}
.page-header h1{font-family:var(--font-head);font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:10px;font-weight:400}
.page-header p{color:var(--muted)}
.empty-state{text-align:center;padding:80px 0}
.empty-state svg{width:64px;height:64px;color:var(--border);margin:0 auto 24px}
.empty-state h3{font-family:var(--font-head);font-size:22px;margin-bottom:12px;font-weight:400}
.empty-state p{color:var(--muted);margin-bottom:32px}
.divider{height:1px;background:var(--border);margin:0}

/* ── Toast ───────────────────────────────────────────── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:10px}
.toast{background:#ffffff;border:1px solid var(--border);padding:14px 20px;border-radius:var(--r);font-size:13px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg);min-width:260px;animation:slideIn .3s ease}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Nav auth ────────────────────────────────────────── */
.nav-auth{display:flex;align-items:center;gap:.45rem;margin-left:.5rem}
.nav-auth .hbtn{background:none;border:1px solid var(--border);border-radius:4px;padding:.28rem .65rem;font-family:var(--font);font-size:.75rem;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.nav-auth .hbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.nav-auth .hbtn-logout{border-color:rgba(192,57,43,.4);color:var(--danger)}
.nav-auth .hbtn-logout:hover{background:rgba(192,57,43,.07)}
.nav-auth .pw-input{padding:.28rem .65rem;border:1px solid var(--border);border-radius:4px;font-family:var(--font);font-size:.75rem;color:var(--text);background:#ffffff;width:130px;transition:border-color .15s}
.nav-auth .pw-input:focus{outline:none;border-color:var(--accent)}
.nav-auth .pw-input.wrong{animation:nav-shake .35s ease;border-color:var(--danger)}
@keyframes nav-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ── Footer ──────────────────────────────────────────── */
.trust-bar{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 0}
.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.trust-item{background:var(--surface);display:flex;align-items:center;gap:14px;padding:20px 28px}
.trust-icon{width:32px;height:32px;flex-shrink:0;color:var(--muted)}
.trust-text strong{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--text);margin-bottom:2px}
.trust-text span{font-size:11px;color:var(--muted)}
.footer{background:#ffffff;border-top:1px solid var(--border);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
/* Rasterfelder duerfen schrumpfen: ohne min-width:0 nimmt ein Feld die Breite seines
   breitesten Kindes als Untergrenze — die Symbolreihe (nowrap, 382 px) sprengte so auf
   dem Telefon den Fuss und schob die ganze Seite seitwaerts (gemessen 11.08.2026). */
.footer-grid>*{min-width:0}
.footer-brand p{color:var(--muted);font-size:13px;line-height:1.7;margin-top:16px;max-width:280px}
.footer-social{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#ffffff;border:1.5px solid var(--border);transition:transform .2s,box-shadow .2s}
.footer-social a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.footer-social svg{width:28px;height:28px}
.footer-logo{display:inline-block;color:var(--text);text-decoration:none}
.footer-logo img{height:48px;width:auto;display:block}
.footer-col h4{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text);margin-bottom:18px;font-family:var(--font)}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col li a{font-size:13px;color:var(--muted);transition:color .2s}
.footer-col li a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between}
.footer-bottom p{font-size:12px;color:var(--subtle)}

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:1100px){
  .hero{min-height:500px}
  .hero-left{width:70%;padding:48px 40px 24px 5vw}
  .hero-left-inner{max-width:none}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .brands-inner{grid-template-columns:1fr}
  .brands-grid{grid-template-columns:repeat(3,1fr)}
  .bestseller-scroll{grid-template-columns:repeat(3,1fr)}
  .trust-inner{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .product-detail{grid-template-columns:1fr;gap:32px}
  .usp-item{min-width:160px;padding:10px 20px}
  .cta-teasers{grid-template-columns:1fr}
  .bestseller-scroll{grid-template-columns:repeat(2,1fr)}
  .announce-center{gap:16px}
  .announce-right{display:none}
}
/* ── Kopfleiste: das Klappmenue beginnt bei 1150 px, nicht erst bei 640 ──────────────
   Gemessen am 11.08.2026: Die Leiste (Menuepunkte + Sprachwaehler + Benutzermenue +
   story-web) passt nur bis etwa 1150 px in eine Zeile. Darunter lief sie ueber den
   rechten Rand, und die ganze Seite scrollte waagerecht — bei 1100 px um 25, bei 980
   um 145, bei 760 um 365 Pixel. Sichtbar war das nie als Fehler, nur als Seite, die
   sich seitwaerts schieben laesst.
   Die Regeln standen frueher im 640er-Block und sind hierher gezogen (nicht kopiert —
   eine Wahrheit, R-75). Was dort blieb, betrifft das Logo und den uebrigen Seitenbau. */
@media(max-width:1150px){
  /* Die geoeffnete Klappe haengt UNTER der Leiste, nicht in ihr: im Fluss stand sie neben
     Logo und Griff und schob die Seite seitwaerts (gemessen 11.08.2026 bei 760 und 390 px,
     nur im geoeffneten Zustand — deshalb faellt es beim blossen Ansehen nicht auf). */
  .nav-inner{position:relative}
  .nav-links{display:none;flex-direction:column;background:#ffffff;border-bottom:1px solid var(--border);padding:16px 24px;gap:0;box-shadow:var(--shadow-lg);position:absolute;top:100%;left:0;right:0;z-index:150}
  .nav-toggle-input:checked ~ .nav-links{display:flex}
  .nav-links a{height:44px;border-bottom:1px solid var(--border);padding:0 4px}
  .nav-dropdown{width:100%}
  .nav-dropdown-toggle{width:100%;justify-content:flex-start;height:44px;padding:8px 4px;color:var(--text)}
  .nav-dropdown-menu{position:static;top:auto;left:auto;transform:none;background:transparent;border:none;border-top:none;border-radius:0;min-width:auto;box-shadow:none;display:none;flex-direction:column;z-index:auto;padding-left:16px}
  .nav-dropdown-toggle.open ~ .nav-dropdown-menu{display:flex}
  .nav-dropdown-menu a{border-bottom:1px solid var(--border);padding:8px 4px;background:transparent;color:var(--muted);font-size:11px;height:auto}
  .nav-mobile-toggle{display:block;flex-shrink:0;width:44px;height:44px;padding:8px;font-size:22px;cursor:pointer;background:none;border:none;color:var(--text);line-height:1;z-index:201}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .nav-logo{flex:1;font-size:16px}
  .section{padding:48px 0}
  .form-grid{grid-template-columns:1fr}
  .usp-bar-inner{flex-direction:column;gap:0}
  .usp-item{border-right:none;border-bottom:1px solid var(--border);justify-content:flex-start}
  /* Hero – Startseite */
  .hero{min-height:400px}
  .hero-overlay{background:linear-gradient(to bottom,rgba(248,246,243,0.88) 0%,rgba(248,246,243,0.72) 50%,rgba(248,246,243,0.45) 100%)}
  .hero-left{width:100%;padding:40px 24px 32px 24px}
  .hero-left-inner{max-width:100%}
  .hero-gudrun{font-size:11px;right:12px;bottom:12px;padding:6px 10px}
  .hero-cta{flex-direction:column}
  /* Page Hero – Unterseiten */
  .page-hero{min-height:220px}
  .page-hero-overlay{background:linear-gradient(to bottom,rgba(248,246,243,0.90) 0%,rgba(248,246,243,0.70) 60%,rgba(248,246,243,0.40) 100%)}
  .page-hero-content{width:100%;padding:32px 24px;min-height:220px}
  .page-hero-content h1{font-size:clamp(1.4rem,7vw,2rem)}
  /* Layout */
  .trust-inner{grid-template-columns:1fr}
  .bestseller-scroll{grid-template-columns:1fr 1fr}
  .announce-center{gap:12px;font-size:10px}
}

/* Flagschiffe: horizontal scrollend (Dieter 2026-07-31) */
.fs-scroll{display:flex !important;grid-template-columns:none !important;overflow-x:auto;gap:20px;scroll-snap-type:x proximity;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.fs-scroll > *{flex:0 0 clamp(240px,24vw,290px);scroll-snap-align:start}
.fs-scroll{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.fs-scroll::-webkit-scrollbar{height:8px}
.fs-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.fs-scroll::-webkit-scrollbar-track{background:transparent}

/* Neuerscheinungen: Jahr gross auf der Kachel (Dieter 2026-07-31) */
.product-card .product-jahr{position:absolute;top:-22px;left:-6%;width:112%;text-align:center;z-index:0;font-family:var(--font-head);font-size:84cqw;font-weight:900;color:var(--accent);opacity:.75;line-height:.72;letter-spacing:-.07em;-webkit-text-stroke:5px var(--accent);pointer-events:none;white-space:nowrap}
.product-card .product-image img{position:relative;z-index:1}

/* ── Stufe 1+3 der Konsolidierung, 04.08.2026 ─────────────────────────────────────────
   R3  Die aktive Klappgruppe hatte KEINE Anzeige: nav.php setzt `active` auf die Knöpfe
       "Wissen", "Download" und "Über uns", das Stylesheet kannte die Klasse nicht. Wer auf
       /wissen.php oder /downloads.php stand, sah nicht, wo er ist. Die Gestalt ist die des
       aktiven Menüpunkts nebenan — kein neuer Entwurf, dieselbe Regel.
   R4  Sichtbarer Tastaturfokus (WCAG 2.1 AA 2.4.7). Es gab auf dem ganzen Auftritt keine
       einzige :focus-Regel. :focus-visible heisst: für den Mausbenutzer ändert sich nichts. */
.nav-dropdown-toggle.active{color:var(--accent-h);border-bottom-color:var(--accent-h)}
.nav-links a:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-icon-btn:focus-visible,
.nav-dropdown-menu a:focus-visible,
.nav-logo:focus-visible{outline:3px solid var(--accent-h);outline-offset:2px;border-radius:2px}