@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');
img,button,a{outline:none;-webkit-tap-highlight-color:transparent}
:root{
  --teal:#457B81;
  --teal-dark:#2d5a60;
  --teal-light:#60ADA8;
  --teal-pale:#A5C2BD;
  --teal-bg:#EBF3F2;
  --anthracite:#454444;
  --anthracite2:#2a2a2a;
  --border:#D1D1D1;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --text:#454444;
  --text-light:#666666;
  --white:#FFFFFF;
  --danger:#DC2626;
  --warning:#D97706;
  --success:#85B645;
  --header-bg:#3d3d3d;
  --price-color:#60ADA8;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:'Cairo',sans-serif;background:#fff;color:var(--text);overflow-x:hidden;max-width:100%;font-size:14px;line-height:1.8}
h1,h2,h3,h4,h5{font-family:'Cairo',sans-serif;font-weight:700}a{text-decoration:none;color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:7px;border:none;cursor:pointer;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;transition:background .2s,transform .15s}
.btn:hover{transform:translateY(-1px)}.btn-primary{background:#457B81;color:#fff;border-radius:3px}.btn-primary:hover{background:#A5C2BD;color:#454444}
.btn-outline{background:transparent;color:var(--teal);border:2px solid var(--teal)}.btn-outline:hover{background:var(--teal-bg)}
.btn-ghost{background:transparent;color:var(--text-light);border:1px solid var(--border)}.btn-ghost:hover{background:#fff}
.btn-sm{padding:6px 12px;font-size:12px}.btn-lg{padding:14px 28px;font-size:16px}.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.topbar{display:none}
.topbar span{margin:0 18px}.topbar strong{color:#73ABA7}
/* ══ HEADER – Exakt nach Muster ════════════════════════════════ */
.site-header{background:#3d3d3d;border-bottom:none;position:relative;top:0;z-index:1000;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.header-inner{max-width:1600px;margin:0 auto;padding:0 32px 14px;display:flex;align-items:flex-end;gap:20px;height:110px;}
/* Logo */
.logo{display:flex;align-items:center;gap:14px;cursor:pointer;transition:opacity .2s;flex-shrink:0}
.logo:hover{opacity:.88}
.logo-img{height:90px;width:auto;display:block;flex-shrink:0;margin-bottom:-28px}
.logo-text{display:none}
.logo-text span{color:rgba(255,255,255,.55);font-weight:300;letter-spacing:.08em}
.logo-box{display:none}

/* Nav */
.nav-item{position:relative}
.site-nav{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:0}
.nav-link{font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);padding:6px 14px;transition:color .15s;display:flex;align-items:center;gap:4px;cursor:pointer;background:none;border:none;white-space:nowrap;line-height:1}
.nav-link:hover{color:#fff}
.nav-link.active{color:#60ADA8;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#60ADA8;font-weight:700}
.nav-dropdown{display:none;position:absolute;top:100%;left:0;background:#3a3a3a;border-top:3px solid var(--teal);border-radius:0 0 4px 4px;min-width:240px;box-shadow:0 10px 36px rgba(0,0,0,.35);z-index:200}
.nav-item:hover .nav-dropdown{display:block}
.nav-dropdown-group{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.08)}.nav-dropdown-group:last-child{border-bottom:none}
.nav-dropdown-title{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-light);padding:5px 16px 2px}
.nav-dropdown a{display:block;padding:5px 16px 5px 22px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);transition:background .15s,color .15s;cursor:pointer}
.nav-dropdown a:hover{background:rgba(255,255,255,.08);color:#fff}

/* Header Actions — einheitliches Icon-oben / Label-unten Design */
.header-actions{display:flex;align-items:center;gap:16px;margin-left:8px;flex-shrink:0}

/* Gemeinsames Basis-Layout für Anmelden & Warenkorb */
/* ── Header Buttons (Anmelden + Warenkorb) ── */
.acc-btn {
  background: transparent;
  border: none;
  color: #fff;
  padding: 4px 8px;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: background .18s;
  white-space: nowrap;
  line-height: 1;
}
.acc-btn:hover { background: rgba(255,255,255,.22); }

.acc-avatar {
  width: 30px; height: 30px;
  background: var(--teal);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.cart-btn {
  background: transparent;
  border: none;
  color: #fff;
  padding: 4px 8px;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background .18s;
  white-space: nowrap;
  line-height: 1;
}
.cart-btn:hover { background: rgba(255,255,255,.12); }

/* Icon-Wrapper — gleichmäßige Größe */
.hdr-icon-wrap{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}

/* Account-Icon bekommt Teal-Kreis */
.acc-btn .hdr-icon-wrap{background:var(--teal);border-radius:50%}

/* Label unter dem Icon */
.hdr-btn-label{font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:#fff;text-transform:uppercase}

.acc-btn svg,.cart-btn svg{display:block;flex-shrink:0}

/* Cart-Badge */
.cart-count{background:#fff;color:var(--teal-dark);border-radius:50%;width:22px;height:22px;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;position:absolute;top:-4px;right:-6px;line-height:1}

/* Rückwärts-Kompatibilität */
.acc-btn-label{font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:#fff}
.acc-arrow{display:none}
.acc-avatar{width:32px;height:32px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff}


/* Search strip */
.search-bar{display:flex;align-items:center;background:#fff;border-radius:4px;overflow:hidden}
.search-strip{background:#457B81;padding:12px 32px}
.search-strip-inner{max-width:1600px;margin:0 auto}
.search-strip .search-bar{width:100%;border-radius:4px;border:none}
.search-strip .search-bar input{width:100%;color:#454444;font-size:14px;padding:10px 18px;font-family:'Cairo',sans-serif;background:#fff;border:none;outline:none;letter-spacing:.3px}
.search-strip .search-bar input::placeholder{color:#aaa}
.search-strip .search-bar button{background:var(--teal);padding:10px 16px;font-size:15px;border:none;color:#fff;cursor:pointer;transition:background .15s}
.search-strip .search-bar button:hover{background:var(--teal-dark)}
.search-bar input{background:none;border:none;outline:none;color:var(--anthracite);font-size:14px;padding:8px 12px;width:200px}
.search-bar button{background:var(--teal);border:none;color:#fff;padding:8px 12px;cursor:pointer;font-size:15px}
.hero{background:linear-gradient(90deg,rgba(55,55,55,0.92) 0%,rgba(100,100,100,0.60) 48%,rgba(200,200,200,0) 100%),linear-gradient(to right,#545454 0%,#b8b8b8 55%,#e5e5e5 100%);position:relative;overflow:hidden;height:520px;display:flex;align-items:stretch}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 50%,rgba(69,123,129,.09) 0%,transparent 55%)}
.hero-inner{max-width:1600px;margin:0 auto;position:relative;z-index:2;display:flex;width:100%;align-items:center}
.hero-text{flex:1;padding:0;display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-img-col{flex:0 0 420px;position:relative;overflow:visible}
.hero-img-col::after{display:none}
.hero-product-img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transform:scaleX(-1);mask-image:linear-gradient(to left, black 0%, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 62%, rgba(0,0,0,0.08) 78%, transparent 100%);-webkit-mask-image:linear-gradient(to left, black 0%, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 62%, rgba(0,0,0,0.08) 78%, transparent 100%)}
@media(max-width:1100px){.hero-img-col{flex:0 0 400px}}
@media(max-width:900px){.hero-img-col{flex:0 0 300px}}

@media(max-width:768px){
  .header-inner{height:90px;padding:0 16px;gap:12px;align-items:center}
  .logo-img{height:66px}
  .hdr-btn-label{display:none}
  .hdr-icon-wrap{width:26px;height:26px}
  .hdr-icon-wrap svg{width:16px;height:16px}
  .acc-btn,.cart-btn{padding:4px 6px}
  .header-actions{gap:0}
  /* Hero mobile: Bild oben, Text unten */
  .hero{height:auto;min-height:0;flex-direction:column}
  .hero-inner{flex-direction:column;align-items:stretch}
  .hero-text{padding:20px 16px;order:2}
  .hero-img-col{flex:0 0 200px;height:200px;width:100%;order:1;display:flex !important}
  .hero-img-col::after{display:none}
  .hero-stats-strip{gap:12px;margin-top:16px;flex-wrap:wrap}
  .hero-stat-val{font-size:22px}
  .cat-sub-tile-img{width:100% !important;height:100px !important}
  .cat-sub-tile{padding:12px 4px 10px}
}
@media(max-width:480px){
  .hero-img-col{flex:0 0 160px;height:160px}
  .cat-sub-tile-img{width:100% !important;height:80px !important}
  .cat-sub-tile{padding:10px 2px 8px}
}
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 12px;border-radius:3px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:clamp(36px,4.5vw,62px);font-weight:900;line-height:1.05;text-transform:uppercase;color:#fff;margin-bottom:18px;font-family:'Cairo',sans-serif}
.hero h1 em{font-style:normal;color:var(--teal-light)}
.hero p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.85);max-width:460px;margin-bottom:32px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.finder-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-top:4px solid var(--teal);border-radius:7px;padding:26px}
.finder-card h3{font-size:22px;font-weight:800;text-transform:uppercase;color:#fff;margin-bottom:4px;font-family:'Cairo',sans-serif}
.finder-card>p{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:18px}
.finder-select{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);color:#fff;padding:10px 14px;border-radius:4px;font-family:'Cairo',sans-serif;font-size:14px;margin-bottom:10px;outline:none}
.finder-select option{background:var(--anthracite)}
.stats-bar{background:var(--teal);padding:18px 32px;display:none}
.stats-inner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{text-align:center;padding:0 16px;border-right:1px solid rgba(255,255,255,.3);color:#fff}
.stat-item:last-child{border-right:none}
.stat-num{font-size:34px;font-weight:900;line-height:1;font-family:'Cairo',sans-serif}.stat-label{font-size:12px;opacity:.85;margin-top:3px}
.section{padding:80px 32px}.section-inner{max-width:1600px;margin:0 auto}
.section-header{margin-bottom:44px;text-align:center}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.section-title{font-size:clamp(22px,3vw,36px);font-weight:900;text-transform:uppercase;line-height:1.05;color:#457B81;font-family:'Cairo',sans-serif;letter-spacing:.8px}
.section-title em{font-style:normal;color:var(--teal)}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* Section ausblenden wenn catGrid leer (API noch nicht geladen) */
#kategorien:has(#catGrid:empty){display:none}
.cat-card{background:#fff;border:1px solid #cccccc;border-radius:7px;overflow:hidden;cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .2s;position:relative}
.cat-card:hover{border-color:var(--teal);box-shadow:0 10px 36px rgba(69,123,129,.18);transform:translateY(-4px)}.cat-card:focus{outline:none}.cat-card:active{outline:none}
.cat-card.wide{grid-column:span 1}
.cat-card::before{display:none}
.cat-card:hover::before{transform:scaleX(1)}
.cat-card-img{background:#f0f4f4;height:235px;display:flex;align-items:center;justify-content:center;font-size:54px;transition:background .25s;border-bottom:1px solid #eee;overflow:hidden;position:relative}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cat-card:hover .cat-card-img img{transform:scale(1.04)}
.cat-card-img .cat-icon-fallback{font-size:72px;position:absolute}
.cat-card.wide .cat-card-img{height:235px}
.cat-card:hover .cat-card-img{background:#f0f9f9}
.cat-card-content{padding:18px 22px 22px}
.cat-card-title{font-size:28px;font-weight:700;text-transform:uppercase;color:var(--anthracite);margin-bottom:10px;letter-spacing:1.2px;font-family:'Cairo',sans-serif}
.cat-card.wide .cat-card-title{font-size:24px}
.cat-card-sub{display:flex;gap:8px;flex-wrap:wrap}
.cat-sub-tag{font-size:12px;font-weight:700;color:var(--teal);background:var(--teal-bg);border:1px solid #C0E0DB;padding:3px 9px;border-radius:3px;letter-spacing:.4px}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.usp-item{padding:28px 22px;border-right:1px solid var(--border);background:var(--card);position:relative;transition:background .2s}
.usp-item:last-child{border-right:none}.usp-item:hover{background:#F7FDFB}
.usp-item::after{content:'';position:absolute;bottom:0;left:0;height:3px;width:100%;background:var(--teal);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.usp-item:hover::after{transform:scaleX(1)}
.usp-icon{font-size:30px;margin-bottom:12px;display:block}
.usp-item h4{font-size:17px;font-weight:800;text-transform:uppercase;color:var(--text);margin-bottom:6px}
.usp-item p{font-size:13px;color:var(--text-light);line-height:1.6}
.product-filters{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.filter-btn{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--card);border:1px solid var(--border);color:var(--text-light);padding:8px 16px;border-radius:4px;cursor:pointer;transition:all .2s}
.filter-btn:hover,.filter-btn.active{background:#457B81;border-color:#457B81;color:#fff}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.product-card{background:#fff;border:1px solid #D1D1D1;border-radius:7px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;position:relative}
.product-card:hover{border-color:var(--teal);box-shadow:0 12px 40px rgba(69,123,129,.22);transform:translateY(-5px)}
.product-badge{position:absolute;top:10px;left:10px;background:var(--teal);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;z-index:2}
.product-badge.neu{background:#E67E22}
.product-img{background:#f5f5f5;height:135px;display:flex;align-items:center;justify-content:center;font-size:45px;transition:background .2s;border-bottom:1px solid #eee}
.product-card:hover .product-img{background:#f0f9f9}
.product-info{padding:14px 16px 16px}
.product-cat{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.product-artnr{font-size:11px;color:var(--text-light);margin-bottom:3px}
.product-name{font-size:16px;font-weight:700;line-height:1.3;margin-bottom:4px;color:var(--anthracite);letter-spacing:.3px;font-family:'Cairo',sans-serif}
.product-desc{font-size:12px;color:var(--text-light);line-height:1.6;margin-bottom:10px}
.product-variants{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.variant-chip{font-size:11px;padding:3px 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f5f5f5;cursor:pointer;transition:all .15s;color:var(--anthracite)}
.variant-chip:hover,.variant-chip.active{border-color:var(--teal);background:var(--teal-bg);color:var(--teal)}
.product-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eee;padding-top:12px}
.product-price{font-size:22px;font-weight:800;color:#60ADA8;letter-spacing:.6px}
.product-price-note{font-size:11px;color:#888;margin-top:-2px;letter-spacing:.3px}
.stock-label{font-size:11px;margin-top:4px;display:flex}
.add-cart-btn{background:var(--teal);border:none;color:#fff;width:36px;height:36px;border-radius:5px;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;flex-shrink:0}
.add-cart-btn:hover{background:var(--teal-dark);transform:scale(1.1)}
.add-cart-btn:disabled{background:#ddd;color:#aaa;cursor:not-allowed;transform:none}
/* CART */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1999;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-drawer{position:fixed;top:0;right:0;width:420px;max-width:100vw;height:100vh;background:var(--card);border-left:3px solid var(--teal);z-index:2000;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.14)}
.cart-drawer.open{transform:translateX(0)}
.drawer-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--teal)}
.drawer-header h2{font-size:22px;font-weight:800;text-transform:uppercase;color:#fff}
.drawer-close{background:none;border:none;color:rgba(255,255,255,.55);font-size:26px;cursor:pointer;line-height:1;transition:color .2s}
.drawer-close:hover{color:#fff}
.cart-items-wrap{flex:1;overflow-y:auto;padding:14px;background:#fff}
.cart-empty{text-align:center;padding:50px 20px;color:var(--text-light)}
.cart-empty-icon{font-size:56px;margin-bottom:14px;display:block}
.cart-item{display:flex;gap:12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:8px;position:relative}
.cart-item-img{width:56px;height:56px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-variant{font-size:11px;color:var(--text-light);margin-bottom:2px}
.cart-item-price{font-size:14px;color:var(--teal-dark);font-weight:700}
.cart-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-btn{background:#fff;border:1px solid var(--border);color:var(--text);width:26px;height:26px;border-radius:3px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.qty-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.qty-val{font-size:14px;font-weight:600;min-width:22px;text-align:center}
.cart-remove{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text-light);cursor:pointer;font-size:16px;line-height:1;transition:color .2s}
.cart-remove:hover{color:var(--danger)}
.cart-footer{padding:18px 22px;border-top:1px solid var(--border);background:var(--card)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cart-total-label{font-size:16px;font-weight:700;text-transform:uppercase}
.cart-total-price{font-size:28px;font-weight:900;color:var(--teal-dark)}
.cart-note{font-size:11px;color:var(--text-light);text-align:center;margin-top:9px}
/* PRODUKTSEITE */
.product-page{display:none;background:#fff;min-height:100vh}
.product-page.active{display:block}
.shop-page.hidden{display:none}
.product-detail{max-width:1200px;margin:0 auto;padding:36px 24px 80px}
.breadcrumb{font-size:13px;color:var(--text-light);margin-bottom:28px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:#457B81;cursor:pointer;font-weight:600;letter-spacing:.3px}.breadcrumb a:hover{text-decoration:underline}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.detail-img-box{background:var(--card);border:1px solid var(--border);border-radius:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:140px;position:sticky;top:88px}
.detail-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.badge{display:inline-block;padding:3px 10px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.badge-teal{background:var(--teal-bg);color:var(--teal-dark);border:1px solid #C0E0DB}
.badge-orange{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}
.badge-green{background:#DCFCE7;color:#15803D;border:1px solid #86EFAC}
.badge-red{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
.detail-cat{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.detail-title{font-size:clamp(28px,4vw,46px);font-weight:900;text-transform:uppercase;line-height:1;color:var(--text);margin-bottom:6px;font-family:'Cairo',sans-serif}
.detail-artnr{font-size:13px;color:var(--text-light);margin-bottom:16px}
.detail-desc{font-size:15px;line-height:1.75;color:var(--text-light);margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:24px}
.variants-section{margin-bottom:24px}
.variants-label{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-light);margin-bottom:10px}
.variants-grid{display:flex;gap:8px;flex-wrap:wrap}
.variant-btn{padding:8px 14px;border:2px solid var(--border);border-radius:4px;background:var(--card);font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--text);text-align:center}
.variant-btn:hover{border-color:var(--teal);background:var(--teal-bg)}
.variant-btn.active{border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dark)}
.variant-btn.out{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.variant-price{font-size:11px;color:var(--teal-dark);font-weight:700;display:block;margin-top:2px}
.price-box{background:#fff;border-radius:6px;border:1px solid var(--border);padding:18px 20px;margin-bottom:20px}
.price-main{font-size:38px;font-weight:800;color:#60ADA8;line-height:1;font-family:'Cairo',sans-serif;letter-spacing:.6px}
.price-note{font-size:12px;color:var(--text-light);margin-top:4px}
.price-original{font-size:18px;color:var(--text-light);text-decoration:line-through;margin-left:10px;font-weight:400}
.price-saving{font-size:13px;color:var(--success);font-weight:700;margin-top:4px}
/* MENGENRABATT */
.discount-table{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.discount-table-title{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-light);margin-bottom:8px}
.discount-rows{display:flex;flex-direction:column;gap:5px}
.discount-row{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-radius:4px;font-size:13px;border:1px solid var(--border);background:var(--card);transition:background .2s}
.discount-row.active-tier{background:var(--teal-bg);border-color:var(--teal)}
.discount-row .tier-qty{font-weight:600;color:var(--text)}
.discount-row .tier-pct{font-weight:700;color:var(--teal-dark)}
.discount-row .tier-price{font-weight:700;color:var(--text)}
.discount-row .tier-save{font-size:11px;color:var(--success)}
.qty-section{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.qty-box{display:flex;align-items:center;border:2px solid var(--border);border-radius:4px;overflow:hidden}
.qty-box button{background:#fff;border:none;color:var(--text);width:40px;height:48px;cursor:pointer;font-size:20px;font-weight:700;transition:background .2s}
.qty-box button:hover{background:var(--teal);color:#fff}
.qty-box input{border:none;outline:none;width:60px;height:48px;text-align:center;font-family:'Cairo',sans-serif;font-size:22px;font-weight:700;color:var(--text)}
.add-to-cart-main{flex:1;height:48px;font-size:16px}
.specs-table{margin-top:28px}
.specs-table h4{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--border)}
.specs-table table{width:100%;border-collapse:collapse}
.specs-table td{padding:9px 12px;font-size:14px;border-bottom:1px solid var(--border)}
.specs-table tr:last-child td{border-bottom:none}
.specs-table td:first-child{color:var(--text-light);width:45%}
.specs-table td:last-child{font-weight:600}
.specs-table tr:nth-child(even){background:#FAFAFA}
.related-section{margin-top:60px;padding-top:40px;border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.service-img{background:#fff;border:1px solid var(--border);border-radius:8px;height:380px;display:flex;align-items:center;justify-content:center;font-size:110px}
.service-list{list-style:none;margin:20px 0 28px}
.service-list li{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.5}
.service-list li::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-bottom:5px}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 13px;border-radius:4px;font-family:'Cairo',sans-serif;font-size:14px;outline:none;transition:border-color .2s;resize:vertical}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(78,155,143,.12)}
.form-group textarea{min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.info-icon{width:40px;height:40px;background:var(--teal);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.info-label{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-light);margin-bottom:3px}
.info-value{font-size:14px;line-height:1.5}
.gewerbe-box{margin-top:24px;padding:18px;background:var(--teal-bg);border-radius:6px;border-left:3px solid var(--teal)}
.gewerbe-box h4{font-size:16px;font-weight:800;text-transform:uppercase;color:var(--teal-dark);margin-bottom:6px}
.gewerbe-box p{font-size:13px;color:var(--text-light);line-height:1.6}
.site-footer{background:#3d3d3d;border-top:3px solid #457B81;padding:36px 48px 24px}
.footer-inner{max-width:1400px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.footer-brand p{font-size:13px;font-weight:400;color:rgba(255,255,255,.65);line-height:1.65;margin:8px 0 14px;max-width:240px;font-family:'Cairo',sans-serif}
.footer-col h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-light);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col a{display:block;font-size:13px;font-weight:400;color:rgba(255,255,255,.6);padding:3px 0;transition:color .2s;cursor:pointer;font-family:'Cairo',sans-serif}
.footer-col a:hover{color:var(--teal-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.35);flex-wrap:wrap;gap:8px}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--anthracite);border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--teal);color:#fff;padding:13px 22px;border-radius:6px;font-size:14px;font-weight:600;z-index:9999;transition:transform .35s cubic-bezier(.4,0,.2,1);white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{border-left-color:var(--danger)}.toast.success{border-left-color:var(--success)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s,transform .55s}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.site-nav{display:none}.hero-inner,.detail-grid{grid-template-columns:1fr}.finder-card{display:none}.cat-grid{grid-template-columns:1fr 1fr}.cat-card.wide{grid-column:span 1}.stats-inner{grid-template-columns:repeat(2,1fr)}.usp-grid{grid-template-columns:1fr 1fr}.service-grid,.kontakt-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;padding:0 24px}.footer-inner{padding:56px 24px 28px}.detail-img-box{position:static;max-width:400px;margin:0 auto}.burger-btn{display:flex}.search-bar input{width:130px}.acc-btn-label{display:none}.logo-text{display:none}.logo-img{height:120px}}

/* ══ BURGER + MOBILE NAV ══════════════════════════════════ */
.burger-btn{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;flex-shrink:0}
.burger-btn span{display:block;height:2px;background:#333;border-radius:2px;transition:all .3s}
.burger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-btn.open span:nth-child(2){opacity:0}
.burger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1100}
.mobile-nav-overlay.open{display:block}

.mobile-nav{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;background:#3d3d3d;z-index:1200;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.4)}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:2px solid var(--teal);background:var(--anthracite)}
.mobile-nav-links{flex:1;overflow-y:auto;padding:12px 0}
.mobile-nav-links a,.mobile-nav-links button.mnl-item{display:flex;align-items:center;gap:10px;width:100%;padding:14px 20px;color:rgba(255,255,255,.85);font-family:'Cairo',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:none;border:none;cursor:pointer;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);transition:background .2s}
.mobile-nav-links a:hover,.mobile-nav-links button.mnl-item:hover{background:rgba(78,155,143,.15);color:var(--teal-light)}
.mobile-nav-links .mnl-sub{padding:8px 20px 8px 36px;font-size:14px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.04)}
.mobile-nav-links .mnl-sub:hover{background:rgba(78,155,143,.1);color:var(--teal-light)}
.mobile-nav-links .mnl-section{padding:10px 20px 4px;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-top:4px}
.mobile-nav-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr 1fr;gap:10px}.cat-card.wide{grid-column:span 1}.usp-grid{grid-template-columns:1fr}.cat-sub-tile{padding:10px 4px 10px;border:none !important}.cat-card-header{font-size:14px;padding:12px 10px 10px;letter-spacing:.8px;border-bottom:none !important}.cat-sub-tile-label{font-size:10px;letter-spacing:.06em}.cat-card{border-radius:3px}}
/* ═══════════════════════════════════════════════
   KUNDENBEREICH CSS
═══════════════════════════════════════════════ */

/* Account button im Header */
.acc-btn{background:transparent;border:none;color:#fff;border-radius:5px;padding:4px 10px;font-size:13px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .2s;white-space:nowrap}
.acc-btn:hover{opacity:.8}
.acc-arrow{font-size:10px;opacity:.7;transition:transform .2s}
.acc-dropdown-wrap{position:relative}
.acc-dropdown-wrap:hover .acc-dropdown.has-user{opacity:1;pointer-events:all;transform:translateY(0)}
.acc-dropdown-wrap:hover .acc-arrow{transform:rotate(180deg)}
.acc-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);border:1px solid #E5E7EB;min-width:200px;z-index:2000;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .2s}
.acc-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0)}
.acc-dropdown-header{padding:12px 16px 8px;font-size:12px;font-weight:800;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #F3F4F6}
.acc-dropdown-item{padding:10px 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;display:flex;align-items:center;gap:9px;transition:background .15s}
.acc-dropdown-item:hover{background:var(--teal-bg);color:var(--teal-dark)}
.acc-dropdown-divider{height:1px;background:#F3F4F6;margin:4px 0}
.acc-dropdown-logout{color:#EF4444!important}
.acc-dropdown-logout:hover{background:#FEF2F2!important}
.acc-btn:hover{opacity:.8}
.acc-btn .acc-avatar{width:32px;height:32px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}

/* Auth Modal (Login / Registrierung) */




.auth-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9000;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s,visibility .25s;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px}
.auth-backdrop.open{visibility:visible;opacity:1;pointer-events:all}
.auth-modal{position:relative;width:460px;max-width:calc(100vw - 32px);background:#fff;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.4);display:flex;flex-direction:column;margin:auto;flex-shrink:0;transition:transform .25s;transform:translateY(-10px)}
.auth-backdrop.open .auth-modal{transform:translateY(0)}
.auth-header{background:linear-gradient(135deg,#454444,#2a2a2a);padding:18px 30px 14px;text-align:center;position:relative;flex-shrink:0;border-radius:12px 12px 0 0}
.auth-header .auth-logo{font-size:13px;font-weight:800;color:var(--teal-light);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.auth-header h2{color:#fff;font-size:20px;font-weight:800;margin-bottom:2px}
.auth-header p{color:rgba(255,255,255,.6);font-size:12px}
.auth-close{position:absolute;top:14px;right:16px;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:20px;line-height:1;transition:color .15s}
.auth-close:hover{color:#fff}
.auth-tabs{display:flex;border-bottom:1px solid #E5E7EB;flex-shrink:0;background:#fff}
.auth-tab{flex:1;padding:11px;text-align:center;cursor:pointer;font-size:13px;font-weight:600;color:#9CA3AF;border-bottom:2px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none}
.auth-tab.active{color:var(--teal-dark);border-bottom-color:var(--teal)}
.auth-body{padding:14px 22px 20px;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.auth-form-group{margin-bottom:9px}
.auth-form-group label{display:block;font-size:11px;font-weight:700;color:#374151;margin-bottom:3px;letter-spacing:.03em}
.auth-form-group input{width:100%;padding:8px 12px;border:1.5px solid #D1D5DB;border-radius:6px;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s;box-sizing:border-box}
.auth-form-group input:focus{border-color:var(--teal)}
.auth-form-group input.error{border-color:#EF4444}
.auth-submit{width:100%;padding:11px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:4px}
.auth-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.auth-msg{font-size:12px;text-align:center;margin-top:12px;padding:9px;border-radius:5px;display:none}
.auth-msg.error{background:#FEE2E2;color:#991B1B;display:block}
.auth-msg.success{background:#D1FAE5;color:#065F46;display:block}


/* ═══════════════════════════════════════════════
   COOKIE BANNER & EINSTELLUNGEN
═══════════════════════════════════════════════ */

/* Banner unten */
#cookieBanner{
  position:fixed;bottom:0;left:0;right:0;z-index:9000;
  background:#1a1f2e;color:#fff;
  box-shadow:0 -4px 30px rgba(0,0,0,.4);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  border-top:2px solid rgba(78,155,143,.5);
}
#cookieBanner.show{transform:translateY(0)}
.cb-inner{max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cb-text{flex:1;min-width:280px}
.cb-text h3{font-size:14px;font-weight:800;margin:0 0 5px;color:#fff;display:flex;align-items:center;gap:7px}
.cb-text p{font-size:12px;color:rgba(255,255,255,.65);margin:0;line-height:1.6}
.cb-text a{color:var(--teal-light);text-decoration:underline;cursor:pointer}
.cb-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.cb-btn{padding:9px 18px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .2s;white-space:nowrap}
.cb-btn-all{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff}
.cb-btn-all:hover{filter:brightness(1.1)}
.cb-btn-select{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.cb-btn-select:hover{background:rgba(255,255,255,.18)}
.cb-btn-deny{background:transparent;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.15);font-size:11px;padding:7px 12px}
.cb-btn-deny:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* Cookie-Einstellungen Modal */
.ck-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9100;opacity:0;pointer-events:none;transition:opacity .25s}
.ck-backdrop.open{opacity:1;pointer-events:all}
.ck-modal{position:fixed;bottom:0;left:0;right:0;max-height:90vh;background:#fff;z-index:9200;border-radius:14px 14px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
.ck-modal.open{transform:translateY(0)}
.ck-header{background:linear-gradient(135deg,#454444,#2a2a2a);padding:20px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ck-header h2{color:#fff;font-size:18px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.ck-header-sub{color:rgba(255,255,255,.6);font-size:12px;margin-top:3px}
.ck-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:22px;cursor:pointer;padding:4px 8px;transition:color .15s;line-height:1}
.ck-close:hover{color:#fff}
.ck-body{overflow-y:auto;padding:20px 28px;flex:1}
.ck-category{background:#F9FAFB;border:1px solid #E5E7EB;border-radius:8px;padding:16px 18px;margin-bottom:12px;transition:border-color .2s}
.ck-category:hover{border-color:#D1D5DB}
.ck-cat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:12px}
.ck-cat-title{display:flex;align-items:center;gap:9px;flex:1}
.ck-cat-icon{font-size:20px;width:28px;text-align:center}
.ck-cat-name{font-size:14px;font-weight:700;color:#111}
.ck-cat-desc{font-size:12px;color:#6B7280;line-height:1.6;margin:0}
.ck-cat-required{font-size:10px;font-weight:700;color:#059669;background:#D1FAE5;padding:2px 8px;border-radius:10px;white-space:nowrap}
/* Toggle Switch */
.ck-toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.ck-toggle input{opacity:0;width:0;height:0;position:absolute}
.ck-toggle-slider{position:absolute;inset:0;background:#D1D5DB;border-radius:24px;cursor:pointer;transition:background .2s}
.ck-toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ck-toggle input:checked + .ck-toggle-slider{background:var(--teal)}
.ck-toggle input:checked + .ck-toggle-slider::before{transform:translateX(20px)}
.ck-toggle input:disabled + .ck-toggle-slider{opacity:.6;cursor:not-allowed}
/* Details Accordion */
.ck-details-toggle{font-size:11px;color:var(--teal-dark);cursor:pointer;font-weight:600;margin-top:6px;display:inline-block}
.ck-cookie-list{display:none;margin-top:10px;border-top:1px solid #E5E7EB;padding-top:10px}
.ck-cookie-list.open{display:block}
.ck-cookie-item{display:grid;grid-template-columns:140px 1fr;gap:6px;font-size:11px;padding:4px 0;border-bottom:1px solid #F3F4F6;color:#374151}
.ck-cookie-item:last-child{border:none}
.ck-cookie-label{font-weight:600;color:#6B7280}
/* Footer */
.ck-footer{padding:14px 28px;border-top:1px solid #E5E7EB;background:#F9FAFB;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.ck-btn-save{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border:none;padding:10px 24px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer}
.ck-btn-all2{background:#3A3D42;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer}
.ck-btn-deny2{background:#fff;color:#6B7280;border:1px solid #D1D5DB;padding:10px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}
/* Cookie-Einstellungen Knopf (immer sichtbar) */
#cookieSettingsBtn{position:fixed;bottom:14px;left:14px;z-index:8900;background:#3A3D42;color:#fff;border:none;border-radius:20px;padding:7px 13px;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:all .2s;display:none;align-items:center;gap:6px}
#cookieSettingsBtn:hover{background:var(--teal);transform:translateY(-1px)}
#cookieSettingsBtn.visible{display:flex}
/* Consent-Status Badge */
.ck-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px}
.ck-status.on{background:#D1FAE5;color:#065F46}
.ck-status.off{background:#FEE2E2;color:#991B1B}


/* REGISTRIERUNG — Kundenkategorie + Newsletter */
.reg-type-select{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.reg-type-btn{border:2px solid #E5E7EB;border-radius:8px;padding:8px 12px;cursor:pointer;transition:all .2s;background:#fff;display:flex;align-items:center;gap:8px;text-align:left}
.reg-type-btn:hover{border-color:var(--teal-light);background:var(--teal-bg,#F0FDF9)}
.reg-type-btn.active{border-color:var(--teal);background:#F0FDF9;box-shadow:0 0 0 1px var(--teal)}
.reg-type-icon{font-size:20px;display:block;flex-shrink:0}
.reg-type-label{font-size:13px;font-weight:800;color:#111;line-height:1.2}
.reg-type-sub{font-size:10px;color:#6B7280;margin-top:1px}
.reg-netto-info{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:6px;padding:10px 12px;font-size:12px;color:#1D4ED8;margin-bottom:12px;line-height:1.6}
.reg-newsletter-box{background:linear-gradient(135deg,#1a1f2e,#2d3561);border-radius:8px;padding:8px 12px;margin-bottom:8px}
.reg-nl-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.reg-nl-check{width:16px;height:16px;cursor:pointer;accent-color:var(--teal);flex-shrink:0;margin-top:2px}
.reg-nl-title{font-size:12px;font-weight:800;color:#fff;margin-bottom:2px}
.reg-nl-desc{font-size:10px;color:rgba(255,255,255,.65);line-height:1.4}
/* Preis-Anzeige: Netto/Brutto Toggle */
.price-netto-badge{background:#1D4ED8;color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;vertical-align:middle;letter-spacing:.05em}


.google-login-btn{width:100%;padding:11px;background:#fff;border:1.5px solid #D1D5DB;border-radius:7px;font-size:14px;font-weight:600;color:#374151;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;font-family:inherit}
.google-login-btn:hover{background:#F9FAFB;border-color:#9CA3AF;box-shadow:0 2px 8px rgba(0,0,0,.08)}
/* Produkt-Verlauf im Kundendashboard */
.view-hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.view-hist-card{background:#fff;border:1px solid var(--border);border-radius:7px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}
.view-hist-card:hover{border-color:var(--teal);background:var(--teal-bg)}
.view-hist-icon{font-size:32px;margin-bottom:6px}
.view-hist-name{font-size:11px;font-weight:700;line-height:1.3;color:var(--text)}
.view-hist-count{font-size:10px;color:var(--text-light);margin-top:3px}
.view-hist-badge{font-size:9px;background:var(--teal);color:#fff;padding:1px 6px;border-radius:8px;font-weight:700;display:inline-block;margin-top:4px}
/* NPS Score buttons */
button[data-q="recommend"]:hover{background:var(--teal-bg)!important;border-color:var(--teal)!important}

/* PASSWORT VERGESSEN */
.pw-forgot-link{display:block;text-align:right;font-size:12px;color:var(--teal-dark);font-weight:600;cursor:pointer;margin-top:-8px;margin-bottom:14px;text-decoration:none}
.pw-forgot-link:hover{text-decoration:underline}
.pwf-step{display:none}
.pwf-step.active{display:block}
.pwf-code-display{background:#1a1f2e;border-radius:8px;padding:16px 18px;margin:12px 0;text-align:center;border:1px dashed rgba(78,155,143,.5)}
.pwf-code-display .pwf-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.pwf-code-display .pwf-token{font-family:monospace;font-size:22px;font-weight:800;color:#FFD700;letter-spacing:.15em}
.pwf-email-preview{background:#F9FAFB;border:1px solid #E5E7EB;border-radius:8px;padding:16px;font-size:12px;line-height:1.8;color:#374151;margin:12px 0}
.pwf-email-preview .pwf-email-subject{font-weight:700;font-size:13px;color:#111;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #E5E7EB}
.pwf-timer{font-size:11px;color:#9CA3AF;text-align:center;margin-top:8px}

.auth-pw-strength{height:4px;border-radius:2px;margin-top:5px;transition:all .3s;background:#E5E7EB}
.auth-divider{text-align:center;color:#9CA3AF;font-size:12px;margin:14px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:#E5E7EB}
.auth-divider::before{left:0}.auth-divider::after{right:0}

/* Kunden-Dashboard */
.kd-page{display:none;min-height:100vh;background:#fff}
.kd-page.active{display:block}
.kd-header{background:var(--teal);padding:28px 0;margin-bottom:0}
.kd-header-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.kd-welcome{color:#fff}
.kd-welcome .kd-name{font-size:22px;font-weight:800;margin-bottom:2px}
.kd-welcome .kd-sub{font-size:13px;color:rgba(255,255,255,.6)}
.kd-layout{max-width:1100px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
.kd-sidebar{background:var(--card);border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.kd-nav-shop{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;font-size:13px;font-weight:700;color:#fff;background:var(--teal);transition:all .15s;border-bottom:1px solid rgba(255,255,255,.15)}
.kd-nav-shop:hover{background:var(--teal-dark)}
.kd-nav-logout{color:#EF4444!important;border-top:2px solid var(--border);margin-top:4px}
.kd-nav-logout:hover{background:#FEF2F2!important;border-left-color:#EF4444!important}
.kd-nav-item{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);transition:all .15s;border-left:3px solid transparent;border-bottom:1px solid var(--border)}
.kd-nav-item:last-child{border-bottom:none}
.kd-nav-item:hover{background:var(--teal-bg);color:var(--teal-dark);border-left-color:var(--teal)}
.kd-nav-item.active{background:var(--teal-bg);color:var(--teal-dark);border-left-color:var(--teal)}
.kd-nav-item .kd-nav-icon{font-size:18px;width:24px;text-align:center}
.kd-content{background:var(--card);border-radius:8px;border:1px solid var(--border);padding:24px}
.kd-section{display:none}
.kd-section.active{display:block}
.kd-section-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--teal);display:flex;align-items:center;gap:9px;font-family:'Cairo',sans-serif}

/* Bestellverlauf */
.order-card{background:#fff;border:1px solid var(--border);border-radius:7px;padding:16px;margin-bottom:12px;transition:box-shadow .2s}
.order-card:hover{box-shadow:0 3px 14px rgba(0,0,0,.08)}
.order-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.order-nr{font-weight:800;font-size:14px;color:var(--teal-dark)}
.order-date{font-size:12px;color:var(--text-light)}
.order-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px}
.os-new{background:#FEF3C7;color:#92400E}
.os-processing{background:#DBEAFE;color:#1E40AF}
.os-shipped{background:#E0F2FE;color:#0369A1}
.os-delivered{background:#D1FAE5;color:#065F46}
.os-cancelled{background:#FEE2E2;color:#991B1B}
.order-items{font-size:12px;color:var(--text-light);margin-bottom:8px;line-height:1.7}
.order-total{font-size:15px;font-weight:800;color:var(--text)}

/* Rabatte */
.coupon-card{background:linear-gradient(135deg,#1a1f2e,#2d3561);border-radius:9px;padding:18px 20px;margin-bottom:12px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.coupon-code{font-family:monospace;font-size:20px;font-weight:800;color:#FFD700;letter-spacing:.1em}
.coupon-desc{font-size:12px;color:rgba(255,255,255,.7);margin-top:3px}
.coupon-copy-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:5px;padding:7px 14px;cursor:pointer;font-size:12px;font-weight:700;transition:all .2s;white-space:nowrap}
.coupon-copy-btn:hover{background:var(--teal);border-color:var(--teal)}
.coupon-expiry{font-size:11px;color:rgba(255,255,255,.45);margin-top:4px}
.coupon-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(78,155,143,.3);color:var(--teal-light);border:1px solid rgba(78,155,143,.4);margin-bottom:6px;display:inline-block}

/* Kundendaten Formular */
.kd-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.kd-form-group{margin-bottom:14px}
.kd-form-group label{display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:5px}
.kd-form-group input,.kd-form-group select{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:5px;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s;background:#fff;box-sizing:border-box}
.kd-form-group input:focus,.kd-form-group select:focus{border-color:var(--teal)}
.kd-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.kd-stat{background:#fff;border:1px solid var(--border);border-radius:7px;padding:14px;text-align:center}
.kd-stat-val{font-size:24px;font-weight:900;color:var(--teal-dark);margin-bottom:3px}
.kd-stat-label{font-size:11px;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:.06em}

@media(max-width:700px){
  .kd-layout{grid-template-columns:1fr}
  .kd-form-row{grid-template-columns:1fr}
  .kd-stat-grid{grid-template-columns:repeat(2,1fr)}
}



/* ── PARTNER SECTION ───────────────────────────────────── */
.partner-section{background:var(--anthracite);padding:64px 24px;position:relative;overflow:hidden;border-top:3px solid var(--teal)}
.partner-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(78,155,143,.07) 0%,transparent 60%)}
.partner-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:2}
.partner-label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-light);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.partner-label::before{content:'';display:inline-block;width:28px;height:2px;background:var(--teal-light)}
.partner-section h2{font-size:clamp(28px,3.5vw,46px);font-weight:900;text-transform:uppercase;color:#fff;line-height:1.05;margin-bottom:14px}
.partner-section h2 em{font-style:normal;color:var(--teal-light)}
.partner-section p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.58);margin-bottom:28px;max-width:420px}
.partner-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}
.partner-feat{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.75)}
.partner-feat-icon{width:28px;height:28px;background:rgba(78,155,143,.2);border:1px solid rgba(78,155,143,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.partner-cta{display:inline-flex;align-items:center;gap:10px;background:var(--teal);color:#fff;padding:14px 28px;border-radius:5px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .25s}
.partner-cta:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(78,155,143,.35)}
.partner-cta-arrow{font-size:18px;transition:transform .2s}
.partner-cta:hover .partner-cta-arrow{transform:translateX(4px)}
.partner-visual{position:relative}
.partner-card-mock{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--teal);border-radius:8px;padding:24px;backdrop-filter:blur(4px)}
.partner-card-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.partner-logo-box{width:52px;height:52px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.partner-card-title{color:#fff;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.partner-card-sub{color:rgba(255,255,255,.5);font-size:12px;margin-top:2px}
.partner-product-list{display:flex;flex-direction:column;gap:10px}
.partner-prod-item{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:5px;transition:border-color .2s}
.partner-prod-item:hover{border-color:rgba(78,155,143,.4)}
.partner-prod-icon{font-size:22px;width:32px;text-align:center}
.partner-prod-name{font-size:13px;color:rgba(255,255,255,.85);font-weight:600;flex:1;margin:0 10px}
.partner-prod-tag{font-size:10px;background:rgba(78,155,143,.2);color:var(--teal-light);padding:2px 8px;border-radius:3px;font-weight:700;white-space:nowrap}
.partner-badge-strip{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.partner-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 12px;font-size:11px;color:rgba(255,255,255,.6);font-weight:600}
@media(max-width:900px){.partner-inner{grid-template-columns:1fr}.partner-visual{display:none}}

/* ── INSTAGRAM SECTION ─────────────────────────────────── */
.ig-section{background:linear-gradient(135deg,#405DE6 0%,#833AB4 35%,#C13584 55%,#E1306C 75%,#FD1D1D 90%,#F77737 100%);padding:56px 24px;position:relative;overflow:hidden}
.ig-section::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25)}
.ig-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ig-left h2{font-size:clamp(32px,4vw,52px);font-weight:900;text-transform:uppercase;color:#fff;line-height:1;margin-bottom:12px}
.ig-left h2 em{font-style:normal;color:#FFDC80}
.ig-left p{font-size:15px;color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:24px;max-width:380px}
.ig-handle-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:50px;padding:10px 20px;margin-bottom:24px}
.ig-handle-badge .ig-icon{width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
.ig-handle-badge span{color:#fff;font-size:16px;font-weight:800;letter-spacing:.04em}
.ig-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#833AB4;padding:13px 28px;border-radius:50px;font-size:15px;font-weight:800;text-decoration:none;transition:all .25s;letter-spacing:.04em}
.ig-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3);background:#FFDC80;color:#833AB4}
.ig-btn .ig-btn-icon{font-size:20px}
.ig-perks{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.ig-perk{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.9);font-size:14px}
.ig-perk-dot{width:8px;height:8px;background:#FFDC80;border-radius:50%;flex-shrink:0}
.ig-mockup{position:relative}
.ig-phone{width:240px;margin:0 auto;display:block}
.ig-posts-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ig-post{aspect-ratio:1;background:rgba(255,255,255,.1);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:36px;border:1px solid rgba(255,255,255,.1);transition:transform .2s}
.ig-post:hover{transform:scale(1.05)}
.ig-post-overlay{position:absolute;inset:0;background:rgba(131,58,180,.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;border-radius:2px}
.ig-post:hover .ig-post-overlay{opacity:1}
.ig-profile-bar{background:rgba(0,0,0,.3);backdrop-filter:blur(8px);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:16px;border:1px solid rgba(255,255,255,.1)}
.ig-profile-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#FFDC80,#E1306C);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ig-profile-name{color:#fff;font-weight:800;font-size:14px}
.ig-profile-sub{color:rgba(255,255,255,.6);font-size:11px;margin-top:1px}
.ig-follow-btn{margin-left:auto;background:linear-gradient(135deg,#833AB4,#E1306C);color:#fff;border:none;border-radius:6px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
@media(max-width:900px){.ig-inner{grid-template-columns:1fr}.ig-right{display:none}}

/* ── WILLKOMMENS-BANNER ─────────────────────────── */
#welcomeBanner{
  background:linear-gradient(135deg,#1a1200 0%,#3d2b00 30%,#7a5500 50%,#3d2b00 70%,#1a1200 100%);
  color:#fff;
  padding:0;
  overflow:hidden;
  position:relative;
  border-bottom:2px solid rgba(255,215,0,.5);
  box-shadow:0 2px 20px rgba(255,180,0,.15);
}
#welcomeBanner .wb-inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;gap:14px;flex-wrap:nowrap;
}
#welcomeBanner .wb-badge{
  background:linear-gradient(135deg,#FFD700,#FFA500,#FFD700);
  background-size:200% auto;
  color:#3d2b00;font-size:11px;font-weight:900;
  padding:5px 12px;border-radius:20px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;
  animation:wb-badge-shine 2.5s linear infinite, wb-pulse-gold 2s ease-in-out infinite;
  box-shadow:0 0 14px rgba(255,215,0,.6);
}
@keyframes wb-badge-shine{0%{background-position:0%}100%{background-position:200%}}
@keyframes wb-pulse-gold{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.5)}50%{box-shadow:0 0 22px rgba(255,215,0,.9)}}
#welcomeBanner .wb-text{font-size:13px;line-height:1.45;flex:1;min-width:0;color:#f5e6bb;overflow:hidden;}
#welcomeBanner .wb-text strong{color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.4)}
#welcomeBanner .wb-counter{
  display:flex;align-items:stretch;white-space:nowrap;flex-shrink:0;
  background:rgba(255,215,0,.06);
  border:2px solid rgba(255,215,0,.7);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 18px rgba(255,215,0,.2), inset 0 0 8px rgba(255,215,0,.04);
}
#welcomeBanner .wb-counter-inner{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-right:1px solid rgba(255,215,0,.3);
}
#welcomeBanner .wb-counter-num{
  font-size:20px;font-weight:900;color:#FFD700;
  text-shadow:0 0 12px rgba(255,215,0,.7);
  animation:wb-num-pulse 1.8s ease-in-out infinite;
}
@keyframes wb-num-pulse{0%,100%{text-shadow:0 0 8px rgba(255,215,0,.5)}50%{text-shadow:0 0 20px rgba(255,215,0,1)}}
#welcomeBanner .wb-counter-label{font-size:10px;color:#d4af60;line-height:1.3;min-width:55px;max-width:65px}
#welcomeBanner .wb-coupon{
  display:flex;align-items:stretch;gap:0;
  background:transparent;border:none;overflow:hidden;white-space:nowrap;
}
#welcomeBanner .wb-code{
  font-family:monospace;font-size:16px;font-weight:900;
  color:#FFD700;letter-spacing:.12em;padding:8px 16px;
  text-shadow:0 0 10px rgba(255,215,0,.5);
  border-left:1px solid rgba(255,215,0,.3);
  display:flex;align-items:center;
}
#welcomeBanner .wb-copy{
  background:linear-gradient(135deg,#c8860a,#FFD700,#c8860a);
  background-size:200% auto;
  border:none;color:#2a1a00;cursor:pointer;
  padding:8px 16px;font-size:12px;font-weight:800;
  transition:background .2s;display:flex;align-items:center;gap:5px;
  animation:wb-btn-shine 2s linear infinite;
  border-radius:0;
}
@keyframes wb-btn-shine{0%{background-position:0%}100%{background-position:200%}}
#welcomeBanner .wb-copy:hover{filter:brightness(1.15)}
#welcomeBanner .wb-copy.copied{background:linear-gradient(135deg,#16A34A,#22c55e);color:#fff}
#welcomeBanner .wb-close{
  background:none;border:none;color:rgba(255,215,0,.45);
  cursor:pointer;font-size:20px;padding:4px 8px;line-height:1;
  transition:color .2s;flex-shrink:0;
}
#welcomeBanner .wb-close:hover{color:#FFD700}
#welcomeBanner .wb-stars{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.wb-star{
  position:absolute;border-radius:50%;
  animation:wb-twinkle var(--d,2s) ease-in-out infinite var(--delay,0s);opacity:.2;
}
.wb-star.gold{background:#FFD700;width:3px;height:3px;}
.wb-star.white{background:#fff;width:2px;height:2px;}
.wb-star.large{width:4px;height:4px;background:#FFD700;filter:blur(0.5px);}
@keyframes wb-twinkle{0%,100%{opacity:.05;transform:scale(1)}50%{opacity:.8;transform:scale(2)}}

/* Willkommens-Banner Mobile */
@media(max-width:768px){
  #welcomeBanner .wb-inner{flex-wrap:wrap;gap:6px;padding:8px 12px}
  #welcomeBanner .wb-text{font-size:11px;line-height:1.35}
  #welcomeBanner .wb-counter{display:none}
  #welcomeBanner .wb-badge{font-size:10px;padding:3px 9px}
  #welcomeBanner .wb-close{margin-left:auto}
}
@media(max-width:480px){
  #welcomeBanner .wb-text{display:none}
  #welcomeBanner .wb-inner{justify-content:space-between;align-items:center;padding:7px 12px}
}

/* ══════════════════════════════════════════════════════════
   CHATBOT
══════════════════════════════════════════════════════════ */
#chatToggleBtn{position:fixed;bottom:28px;right:28px;z-index:8000;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));border:none;cursor:pointer;box-shadow:0 4px 20px rgba(78,155,143,.5);font-size:26px;display:flex;align-items:center;justify-content:center;transition:all .25s;color:#fff}
#chatToggleBtn:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(78,155,143,.6)}
.chat-notif-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;background:#DC2626;border-radius:50%;border:2px solid #fff;display:none;animation:chat-pulse 1.5s ease infinite}
@keyframes chat-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
#chatToggleBtn.has-notif .chat-notif-dot{display:block}
#chatWindow{position:fixed;bottom:100px;right:28px;z-index:8001;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 140px);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;transform:scale(.92) translateY(20px);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:bottom right}
#chatWindow.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
.chat-header{background:linear-gradient(135deg,var(--anthracite),#2a2d32);padding:14px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;border-bottom:2px solid var(--teal)}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;position:relative}
.chat-avatar-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;background:#22C55E;border-radius:50%;border:2px solid #2a2d32}
.chat-header-info{flex:1}
.chat-header-name{color:#fff;font-size:14px;font-weight:800}
.chat-header-sub{color:rgba(255,255,255,.55);font-size:11px;margin-top:1px}
.chat-close-btn{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;padding:4px;line-height:1;transition:color .15s}
.chat-close-btn:hover{color:#fff}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#F8FAFC}
.chat-msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-msg-avatar{width:28px;height:28px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-bottom:2px}
.chat-bubble{padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.55;max-width:100%;word-break:break-word}
.chat-msg.bot .chat-bubble{background:#fff;border:1px solid #E5E7EB;border-bottom-left-radius:4px;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.chat-msg.user .chat-bubble{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-bottom-right-radius:4px}
.chat-bubble a{color:var(--teal-dark);text-decoration:underline;cursor:pointer}
.chat-typing{display:flex;gap:5px;align-items:center;padding:10px 14px}
.chat-typing span{width:7px;height:7px;background:var(--teal);border-radius:50%;animation:typing-dot .9s ease infinite}
.chat-typing span:nth-child(2){animation-delay:.18s}
.chat-typing span:nth-child(3){animation-delay:.36s}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.chat-quick-btns{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.chat-quick-btn{background:#EAF5F3;border:1px solid #C0E0DB;color:var(--teal-dark);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.chat-quick-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.chat-input-area{padding:12px 14px;border-top:1px solid #E5E7EB;display:flex;gap:8px;background:#fff;flex-shrink:0}
.chat-input{flex:1;border:1.5px solid #E5E7EB;border-radius:22px;padding:9px 14px;font-size:13px;font-family:inherit;outline:none;resize:none;transition:border-color .2s;line-height:1.4}
.chat-input:focus{border-color:var(--teal)}
.chat-send-btn{width:38px;height:38px;border-radius:50%;background:var(--teal);border:none;color:#fff;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.chat-send-btn:hover{background:var(--teal-dark);transform:scale(1.08)}
.chat-send-btn:disabled{background:#D1D5DB;cursor:not-allowed;transform:none}
.chat-product-card{background:#F0FDF9;border:1px solid #C0E0DB;border-radius:8px;padding:10px 12px;margin-top:6px;cursor:pointer;transition:border-color .2s}
.chat-product-card:hover{border-color:var(--teal)}
.chat-product-card-name{font-weight:700;font-size:12px;color:var(--text);margin-bottom:2px}
.chat-product-card-meta{font-size:11px;color:var(--text-light)}
.chat-product-card-price{font-size:13px;font-weight:800;color:var(--teal-dark);margin-top:4px}

/* ══════════════════════════════════════════════════════
   ARTIKEL TEILEN
══════════════════════════════════════════════════════ */
.share-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.share-bar-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-right:2px}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;text-decoration:none}
.share-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.share-btn-wa   {background:#25D366;color:#fff}
.share-btn-mail {background:#EA4335;color:#fff}
.share-btn-copy {background:#fff;border:1.5px solid var(--border);color:var(--text)}
.share-btn-copy.copied{background:#D1FAE5;border-color:#86EFAC;color:#065F46}
.share-btn-more {background:var(--anthracite);color:#fff}
.share-btn-tg   {background:#229ED9;color:#fff}

/* Share Modal */
.share-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:5000;opacity:0;pointer-events:none;transition:opacity .25s}
.share-modal-backdrop.open{opacity:1;pointer-events:all}
.share-modal{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;z-index:5001;padding:24px 20px 36px;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);max-width:480px;margin:0 auto}
.share-modal.open{transform:translateY(0)}
.share-modal-handle{width:40px;height:4px;background:#E5E7EB;border-radius:2px;margin:0 auto 20px}
.share-modal h3{font-size:17px;font-weight:800;text-align:center;margin-bottom:6px}
.share-modal-sub{font-size:12px;color:var(--text-light);text-align:center;margin-bottom:20px;line-height:1.5}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.share-grid-btn{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;transition:transform .15s}
.share-grid-btn:hover{transform:scale(1.08)}
.share-grid-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px}
.share-grid-label{font-size:11px;font-weight:700;color:var(--text-light)}
.share-url-box{background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:11px 14px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.share-url-text{flex:1;font-size:12px;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-url-copy-btn{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s}
.share-url-copy-btn:hover{background:var(--teal-dark)}
.share-url-copy-btn.copied{background:#16A34A}

/* Karten-Teilen Button (oben rechts auf Produktkarte) */
.prod-share-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:30px;height:30px;font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:3;transition:all .2s;backdrop-filter:blur(4px)}
.product-card:hover .prod-share-btn{display:flex}
.prod-share-btn:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.1)}

/* ══════════════════════════════════════════════════════════
   ANGEBOTE SECTION
══════════════════════════════════════════════════════════ */
.offers-section{background:linear-gradient(160deg,#1a1f2e 0%,#2d1f3d 50%,#1a2d1f 100%);padding:72px 24px;position:relative;overflow:hidden}
.offers-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(220,38,38,.07),transparent 55%),radial-gradient(ellipse at 80% 30%,rgba(78,155,143,.06),transparent 50%)}
.offers-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.offers-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:14px}
.offers-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(220,38,38,.15);border:1px solid rgba(220,38,38,.35);color:#FCA5A5;padding:5px 13px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.offers-title{font-size:clamp(28px,4vw,52px);font-weight:900;text-transform:uppercase;color:#fff;line-height:1;margin-bottom:8px}
.offers-title em{font-style:normal;color:#FCA5A5}
.offers-sub{font-size:14px;color:rgba(255,255,255,.5);max-width:460px;line-height:1.6}
.offers-countdown{text-align:right}
.offers-countdown-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px}
.offers-countdown-timer{display:flex;gap:8px;justify-content:flex-end}
.offers-timer-block{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:8px 12px;text-align:center;min-width:54px}
.offers-timer-num{font-size:24px;font-weight:900;color:#fff;font-family:'Cairo',sans-serif;line-height:1}
.offers-timer-unit{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px}

/* Angebots-Karten */
.offers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:0 auto}
.offer-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;transition:all .3s;cursor:pointer;position:relative}
.offer-card:hover{border-color:rgba(220,38,38,.5);box-shadow:0 12px 40px rgba(220,38,38,.15);transform:translateY(-4px)}
.offer-card-ribbon{position:absolute;top:16px;left:-8px;background:linear-gradient(135deg,#DC2626,#B91C1C);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px 5px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);z-index:3;box-shadow:0 2px 8px rgba(220,38,38,.4)}
.offer-card-ribbon.hot{background:linear-gradient(135deg,#F59E0B,#D97706)}
.offer-card-badge{position:absolute;top:14px;right:14px;z-index:3;background:#DC2626;color:#fff;font-size:14px;font-weight:900;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1.1;text-align:center;box-shadow:0 4px 14px rgba(220,38,38,.5);animation:badge-pulse 2s ease infinite}
@keyframes badge-pulse{0%,100%{box-shadow:0 4px 14px rgba(220,38,38,.5)}50%{box-shadow:0 4px 22px rgba(220,38,38,.8)}}
.offer-card-img{background:rgba(255,255,255,.06);height:180px;display:flex;align-items:center;justify-content:center;font-size:70px;position:relative;overflow:hidden;transition:background .3s}
.offer-card:hover .offer-card-img{background:rgba(255,255,255,.09)}
.offer-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.3))}
.offer-card-body{padding:18px 20px 20px}
.offer-card-cat{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px}
.offer-card-name{font-size:17px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:6px}
.offer-card-artnr{font-size:11px;color:rgba(255,255,255,.35);margin-bottom:10px}
.offer-card-desc{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.offer-card-price-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.offer-price-new{font-size:32px;font-weight:900;color:#FCA5A5;font-family:'Cairo',sans-serif;line-height:1}
.offer-price-old{font-size:16px;color:rgba(255,255,255,.35);text-decoration:line-through;font-weight:500}
.offer-price-save{background:rgba(220,38,38,.25);border:1px solid rgba(220,38,38,.4);color:#FCA5A5;font-size:11px;font-weight:800;padding:3px 9px;border-radius:4px;white-space:nowrap}
.offer-card-stock{font-size:11px;color:rgba(255,255,255,.4);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.offer-stock-bar{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.offer-stock-fill{height:100%;background:linear-gradient(90deg,#DC2626,#F59E0B);border-radius:2px;transition:width .5s}
.offer-card-btn{width:100%;padding:12px;background:linear-gradient(135deg,#DC2626,#B91C1C);border:none;color:#fff;border-radius:6px;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.offer-card-btn:hover{background:linear-gradient(135deg,#EF4444,#DC2626);transform:scale(1.02)}
.offer-card-btn:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.3);cursor:not-allowed;transform:none}
.offer-card-share{position:absolute;bottom:72px;right:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50%;width:32px;height:32px;display:none;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s}
.offer-card:hover .offer-card-share{display:flex}
.offer-card-share:hover{background:rgba(255,255,255,.2)}
@media(max-width:900px){.offers-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.offers-grid{grid-template-columns:1fr}.offers-countdown{display:none}}
/* Offer-Cards Mobile */
@media(max-width:600px){
  .offers-grid{gap:14px}
  .offer-card-img{height:140px}
  .offer-card-body{padding:12px 14px 14px}
  .offer-price-new{font-size:24px}
  .offer-price-old{font-size:14px}
  .offer-card-btn{font-size:13px;padding:10px}
  .offer-card-badge{width:42px;height:42px;font-size:12px}
  .offer-card-name{font-size:14px !important}
}
/* Header auf Mobil: Suche volle Breite */
@media(max-width:600px){
  .search-strip-inner > div{margin:0 10px}
  .header-inner{padding:0 12px}
  .logo-img{height:36px !important}
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════════════════════ */
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;display:none;align-items:center;justify-content:center;padding:16px}
.checkout-overlay.open{display:flex}
.checkout-modal{background:var(--card);border-radius:12px;width:100%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column}
.checkout-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:2}
.checkout-header h2{font-size:18px;font-weight:900}
.checkout-header .close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-light);padding:4px 8px;border-radius:4px;transition:background .2s}
.checkout-header .close-btn:hover{background:#fff}
.checkout-body{padding:20px 24px;display:flex;flex-direction:column;gap:18px}
.checkout-step{display:none}
.checkout-step.active{display:block}

/* Zahlungsart-Auswahl */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pay-method-card{border:2px solid var(--border);border-radius:8px;padding:14px 16px;cursor:pointer;transition:all .2s;text-align:center;position:relative}
.pay-method-card:hover{border-color:var(--teal);background:var(--teal-bg)}
.pay-method-card.selected{border-color:var(--teal);background:var(--teal-bg)}
.pay-method-card.selected::after{content:'✓';position:absolute;top:8px;right:10px;font-size:14px;font-weight:900;color:var(--teal)}
.pay-method-icon{font-size:28px;margin-bottom:6px}
.pay-method-label{font-size:13px;font-weight:800}
.pay-method-sub{font-size:11px;color:var(--text-light);margin-top:2px}

/* Felder */
.checkout-label{font-size:12px;font-weight:700;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light)}
.checkout-input{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;background:var(--card);color:var(--text)}
.checkout-input:focus{border-color:var(--teal)}
.checkout-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkout-field{display:flex;flex-direction:column;gap:5px}

/* Order Summary */
.checkout-summary{background:#fff;border-radius:8px;padding:14px 16px}
.checkout-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.checkout-summary-row.total{font-weight:900;font-size:15px;border-top:1px solid var(--border);padding-top:10px;margin-top:6px;color:var(--teal-dark)}

/* EPC QR Section */
.epc-section{background:linear-gradient(135deg,#1a2a3a,#0f1e2e);border-radius:10px;padding:20px;color:#fff}
.epc-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.epc-badge{background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:8px;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.epc-title{font-size:16px;font-weight:900}
.epc-sub{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.epc-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.epc-qr-wrap{background:#fff;border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.epc-qr-wrap canvas{border-radius:4px}
.epc-qr-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#555;text-align:center}
.epc-details{display:flex;flex-direction:column;gap:8px}
.epc-detail-row{display:flex;flex-direction:column;gap:2px}
.epc-detail-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.epc-detail-val{font-size:13px;font-weight:700;color:#fff;word-break:break-all}
.epc-detail-val.amount{font-size:20px;font-weight:900;color:#6EE7B7}
.epc-banks{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.epc-bank-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:3px 9px;font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}
.epc-copy-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 12px;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;margin-top:6px;transition:background .2s;width:100%}
.epc-copy-btn:hover{background:rgba(255,255,255,.18)}

/* Bestätigung */
.confirm-hero{text-align:center;padding:10px 0 20px}
.confirm-icon{font-size:56px;margin-bottom:12px;animation:badge-pulse 2s ease infinite}
.confirm-title{font-size:22px;font-weight:900;margin-bottom:6px}
.confirm-sub{font-size:14px;color:var(--text-light);line-height:1.6}
.confirm-ordernr{background:var(--teal-bg);border:1px solid var(--teal-light);border-radius:6px;padding:10px 16px;font-size:14px;font-weight:800;color:var(--teal-dark);text-align:center;margin:14px 0;letter-spacing:.08em}

@media(max-width:480px){
  .pay-methods{grid-template-columns:1fr}
  .checkout-grid-2{grid-template-columns:1fr}
  .epc-body{grid-template-columns:1fr}
  .epc-qr-wrap{align-self:center}
}


.addr-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:7px;cursor:pointer;transition:background .2s;user-select:none;margin-top:10px;border:1.5px solid var(--border);background:#fff}
.addr-toggle-row:hover,.addr-toggle-row.active{background:#EAF5F3;border-color:var(--teal);color:var(--teal-dark)}
.addr-toggle-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.addr-toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}
.addr-toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.addr-toggle-track{position:absolute;inset:0;background:var(--border);border-radius:10px;transition:background .25s}
.addr-toggle-switch input:checked + .addr-toggle-track{background:var(--teal)}
.addr-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.addr-toggle-switch input:checked ~ .addr-toggle-thumb{transform:translateX(16px)}
.addr-collapsible{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.addr-collapsible.open{max-height:700px;opacity:1}
.addr-section-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-dark);margin:14px 0 10px;display:flex;align-items:center;gap:7px;padding-bottom:6px;border-bottom:2px solid #EAF5F3}
.erechnung-box{background:linear-gradient(135deg,#EFF6FF,#EDE9FE);border:1.5px solid #BFDBFE;border-radius:8px;padding:14px 16px;margin-top:10px}
.erechnung-box.active{border-color:var(--teal);background:linear-gradient(135deg,#EAF5F3,#F0FDF9)}
.erechnung-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.erechnung-title{font-size:13px;font-weight:800;color:#1E40AF;display:flex;align-items:center;gap:8px}
.erechnung-box.active .erechnung-title{color:var(--teal-dark)}
.erechnung-body{margin-top:10px;font-size:12px;color:#374151;line-height:1.65;display:none}
.erechnung-body.show{display:block}
.erechnung-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.erechnung-format{border:1.5px solid #BFDBFE;border-radius:6px;padding:10px 12px;cursor:pointer;transition:all .2s;background:#fff}
.erechnung-format:hover,.erechnung-format.selected{border-color:var(--teal);background:#EAF5F3}
.erechnung-format-name{font-size:12px;font-weight:800;margin-bottom:2px}
.erechnung-format-desc{font-size:10px;color:var(--text-light)}

/* ── Widerrufsbutton (EU-Pflicht ab 19.06.2026) ─────────── */
.widerruf-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1.5px solid #DC2626;color:#DC2626;font-size:12px;font-weight:700;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit}
.widerruf-btn:hover{background:#DC2626;color:#fff}
.widerruf-btn-sm{font-size:11px;padding:4px 10px}

/* Widerrufs-Modal */
#widerrufModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:16px}
#widerrufModal.open{display:flex}
.wm-box{background:#fff;border-radius:14px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.wm-header{background:linear-gradient(135deg,#457B81,#2d5f64);padding:20px 24px;color:#fff}
.wm-header-title{font-size:18px;font-weight:900;margin-bottom:3px}
.wm-header-sub{font-size:12px;opacity:.8}
.wm-body{padding:24px}
.wm-step{display:none}
.wm-step.active{display:block}
.wm-label{font-size:12px;font-weight:700;color:#374151;margin-bottom:5px;display:block}
.wm-input{width:100%;border:1.5px solid #D1D5DB;border-radius:7px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s}
.wm-input:focus{border-color:var(--teal)}
.wm-field{margin-bottom:14px}
.wm-info{background:#FEF2F2;border:1px solid #FECACA;border-radius:7px;padding:12px 14px;font-size:12px;color:#991B1B;line-height:1.6;margin-bottom:16px}
.wm-confirm-box{background:#F0FDF4;border:1.5px solid #86EFAC;border-radius:10px;padding:16px;text-align:center;margin-bottom:16px}
.wm-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.wm-btn-cancel{background:transparent;border:1.5px solid #D1D5DB;color:#6B7280;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit}
.wm-btn-cancel:hover{background:#F9FAFB}
.wm-btn-confirm{background:#DC2626;border:none;color:#fff;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit}
.wm-btn-confirm:hover{background:#B91C1C}
.wm-btn-next{background:#DC2626;border:none;color:#fff;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit}
.wm-btn-next:hover{background:#B91C1C}
.wm-step-dots{display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.wm-dot{width:8px;height:8px;border-radius:50%;background:#E5E7EB;transition:background .3s}
.wm-dot.active{background:var(--teal)}
.wm-success-icon{font-size:48px;margin-bottom:12px}
.wm-success-title{font-size:18px;font-weight:900;margin-bottom:6px;color:#166534}
.wm-success-sub{font-size:13px;color:#6B7280;line-height:1.6}
.wm-footer-note{font-size:11px;color:#9CA3AF;text-align:center;margin-top:14px;line-height:1.5}

/* ══ NACHSCHLEIFSERVICE ═══════════════════════════════════ */
.service-banner-section{display:block}
.service-banner-divider{height:3px;background:linear-gradient(90deg,var(--teal),var(--teal-dark))}

.grinding-banner{background:linear-gradient(160deg,#1a1f2e 0%,#0f2d20 60%,#1a2d1f 100%);padding:72px 24px;position:relative;overflow:hidden}
.grinding-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(78,155,143,.1),transparent 55%)}
.grinding-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.grinding-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(78,155,143,.15);border:1px solid rgba(78,155,143,.4);color:var(--teal-light);padding:5px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.grinding-title{font-family:'Cairo',sans-serif;font-size:clamp(42px,5vw,70px);font-weight:900;line-height:.95;text-transform:uppercase;color:#fff;margin-bottom:14px}
.grinding-title em{font-style:normal;color:var(--teal-light)}
.grinding-subtitle{font-size:15px;line-height:1.7;color:rgba(255,255,255,.58);max-width:440px;margin-bottom:22px}
.grinding-region{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.grinding-region-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:4px}
.grinding-region-pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600}
.grinding-region-pill.highlight{background:rgba(78,155,143,.2);border-color:rgba(78,155,143,.5);color:var(--teal-light);font-weight:700}
.grinding-ctas{display:flex;gap:10px;flex-wrap:wrap}
.grinding-cta-mail{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;padding:12px 22px;border-radius:5px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all .2s}
.grinding-cta-mail:hover{background:var(--teal-dark);transform:translateY(-2px)}
.grinding-cta-sms{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 22px;border-radius:5px;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s}
.grinding-cta-sms:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.grinding-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--teal);border-radius:10px;padding:28px}
.grinding-card-header{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.grinding-card-header-icon{width:50px;height:50px;background:var(--teal);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.grinding-card-header-title{font-family:'Cairo',sans-serif;font-size:18px;font-weight:800;text-transform:uppercase;color:#fff}
.grinding-card-header-sub{font-size:12px;color:rgba(255,255,255,.45);margin-top:3px}
.grinding-items{display:flex;flex-direction:column;gap:14px}
.grinding-item{display:flex;align-items:flex-start;gap:12px}
.grinding-item-icon{width:38px;height:38px;background:rgba(78,155,143,.15);border:1px solid rgba(78,155,143,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.grinding-item-text{display:flex;flex-direction:column;gap:2px}
.grinding-item-text strong{font-size:14px;color:#fff;font-weight:700}
.grinding-item-text span{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}

/* ══ NETZWERK ════════════════════════════════════════════ */
.network-banner{background:linear-gradient(160deg,#0f1e2e 0%,#1a1f2e 100%);padding:72px 24px;position:relative;overflow:hidden}
.network-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.network-header{text-align:center;margin-bottom:44px}
.network-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(78,155,143,.15);border:1px solid rgba(78,155,143,.4);color:var(--teal-light);padding:5px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.network-title{font-family:'Cairo',sans-serif;font-size:clamp(32px,4.5vw,56px);font-weight:900;text-transform:uppercase;color:#fff;line-height:1;margin-bottom:12px}
.network-title em{font-style:normal;color:var(--teal-light)}
.network-sub{font-size:15px;color:rgba(255,255,255,.55);line-height:1.7;max-width:620px;margin:0 auto}
.network-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:36px}
.network-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:24px 20px;transition:all .25s}
.network-card:hover{border-color:rgba(78,155,143,.4);background:rgba(78,155,143,.06);transform:translateY(-3px)}
.network-card-icon{font-size:32px;margin-bottom:12px}
.network-card-title{font-family:'Cairo',sans-serif;font-size:18px;font-weight:800;text-transform:uppercase;color:#fff;margin-bottom:8px}
.network-card-text{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65}
.network-cta-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.network-cta-text{display:flex;flex-direction:column;gap:6px}
.network-cta-text strong{font-size:16px;color:#fff;font-weight:800}
.network-cta-text span{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6}
.network-cta-btns{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}

/* Stock badges */
.stock-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700}
.stock-badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stock-badge.instock .dot{background:#22C55E}
.stock-badge.instock{color:#16A34A}
.stock-badge.lowstock .dot{background:#F59E0B}
.stock-badge.lowstock{color:#D97706}
.stock-badge.outstock .dot{background:#DC2626}
.stock-badge.outstock{color:#DC2626}

/* Stock bar */
.stock-bar{background:#f5f5f5;border-bottom:1px solid #ddd;border-top:1px solid #ddd;padding:10px 32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.stock-bar-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#555}
.stock-bar-item .dot{width:9px;height:9px;border-radius:50%;background:#22C55E;display:inline-block;box-shadow:0 0 6px #22C55E}
.stock-bar-divider{width:1px;height:20px;background:rgba(255,255,255,.15)}
.stock-bar-link{font-size:12px;font-weight:700;color:var(--teal);cursor:pointer;margin-left:auto;white-space:nowrap}
.stock-bar-link:hover{text-decoration:underline}

/* Hero stats strip */
.hero-stats-strip{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap;align-items:flex-start}
.hero-stat{text-align:left}
.hero-stat-val{font-family:'Cairo',sans-serif;font-size:22px;font-weight:700;line-height:1;color:rgba(255,255,255,.9)}
.hero-stat-val.green{color:rgba(110,231,183,.85)}
.hero-stat-val.teal{color:rgba(96,173,168,.85)}
.hero-stat-val.white{color:rgba(255,255,255,.8)}
.hero-stat-val.yellow{color:rgba(253,230,138,.85)}
.hero-stat-label{font-size:11px;color:rgba(255,255,255,.4);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;font-family:'Cairo',sans-serif}

@media(max-width:900px){
  .grinding-inner{grid-template-columns:1fr}
  .grinding-card{display:none}
  .network-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
  .network-grid{grid-template-columns:1fr}
  .network-cta-box{flex-direction:column}
}

@keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
/* ── Kategorie-Filter Sub-Buttons ── */
.filter-btn-sub {
  font-size: 11px !important;
  padding: 4px 12px !important;
  background: var(--bg) !important;
  color: var(--teal-dark) !important;
  border-color: var(--teal-light) !important;
  margin-left: 8px !important;
}
.filter-btn-sub:hover, .filter-btn-sub.active {
  background: var(--teal-light) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
}
.filter-btn-cat.active {
  background: var(--teal) !important;
  color: #fff !important;
}
/* ── Kategorie-Karten Neues Layout ─────────────────── */
.cat-card-new {
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.cat-card-header {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #222222;
  padding: 18px 20px 16px;
  border-bottom: none;
  font-family: 'Cairo', sans-serif;
  text-align: center;
}
.cat-sub-tiles {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  min-height: 220px;
  border: none;
}
.cat-sub-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 20px 8px 18px;
  transition: background .18s;
  border: none !important;
  outline: none;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.cat-sub-tile:last-child { border: none !important; }
.cat-sub-tile:hover { background: transparent; }
.cat-sub-tile:active, .cat-sub-tile:focus { outline: none; background: transparent; }

.cat-sub-tile-img {
  width: 100%;
  height: 130px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.cat-sub-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transition: transform .35s ease;
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
  border: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  display: block;
  max-height: 130px;
}
.cat-sub-tile:hover .cat-sub-tile-img img { transform: scale(1.06); }
.cat-sub-tile:active .cat-sub-tile-img img,
.cat-sub-tile:focus .cat-sub-tile-img img { outline: none; box-shadow: none; }
.cat-sub-tile-placeholder {
  width: 85%;
  height: 140px;
  background: #457B81;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #fff;
}
.cat-sub-tile-placeholder span { display: none; }
.cat-sub-tile-soon {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
}
.cat-sub-tile-label {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #457B81;
  text-align: center;
  font-family: 'Cairo', sans-serif;
  margin-top: 10px;
}

/* Grid: immer 2×2 — Handy und Desktop */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── UNSERE MARKEN ── */
.marken-section {
  background: #fff;
  border-top: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
  padding: 52px 0 48px;
}
.marken-inner {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}
.marken-title {
  font-size: 24px;
  font-weight: 900;
  color: #222;
  margin-bottom: 36px;
  font-family: 'Cairo', sans-serif;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.marken-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.marken-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  flex-shrink: 0;
}
.marken-logo-item img {
  max-height: 80px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: opacity .2s, transform .2s;
}
.marken-logo-item img:hover {
  opacity: 1;
  transform: scale(1.05);
}
@media(max-width:900px) {
  .marken-logos { gap: 32px; }
  .marken-logo-item { height: 44px; }
  .marken-logo-item img { max-height: 44px; max-width: 130px; }
}
@media(max-width:640px) {
  .marken-inner { padding: 0 16px; }
  .marken-logos { gap: 24px; }
  .marken-logo-item { height: 36px; }
  .marken-logo-item img { max-height: 36px; max-width: 100px; }
}

/* ══ LEGAL PAGES (agb / datenschutz / impressum) ══════════════════════════ */
.legal-hero{background:linear-gradient(135deg,var(--anthracite),#2C2F33);padding:48px 24px 40px;text-align:center}
.legal-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-light);margin-bottom:10px}
.legal-hero h1{font-size:clamp(28px,5vw,52px);font-weight:900;text-transform:uppercase;color:#fff;line-height:1}
.legal-hero-sub{font-size:14px;color:rgba(255,255,255,.5);margin-top:10px}
.breadcrumb-bar{background:var(--card);border-bottom:1px solid var(--border);padding:10px 24px;font-size:12px;color:var(--text-light)}
.breadcrumb-bar a{color:var(--teal-dark);text-decoration:none}
.breadcrumb-bar a:hover{text-decoration:underline}
.legal-wrap{max-width:900px;margin:0 auto;padding:40px 24px 80px}
.legal-nav-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap}
.legal-tab{padding:9px 18px;border-radius:5px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s;border:1.5px solid var(--border);color:var(--text-light);background:var(--card)}
.legal-tab:hover,.legal-tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.legal-card{background:var(--card);border-radius:8px;border:1px solid var(--border);overflow:hidden;margin-bottom:20px}
.legal-card-header{padding:16px 22px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer}
.legal-card-header h2{font-size:16px;font-weight:800;flex:1}
.legal-card-header .para-nr{font-size:22px;font-weight:900;color:var(--teal);font-family:'Barlow Condensed',sans-serif}
.legal-card-icon{font-size:20px;flex-shrink:0}
.legal-card-body{padding:22px;font-size:14px;line-height:1.8;color:var(--text)}
.legal-card-body h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-dark);margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--border)}
.legal-card-body h3:first-child{margin-top:0;border-top:none;padding-top:0}
.legal-card-body p{margin-bottom:10px}
.legal-card-body ol,.legal-card-body ul{padding-left:20px;margin-bottom:10px}
.legal-card-body li{margin-bottom:6px}
.legal-card-body a{color:var(--teal-dark)}
.legal-highlight{background:#EAF5F3;border-left:3px solid var(--teal);padding:12px 16px;border-radius:0 6px 6px 0;margin:14px 0;font-size:13px}
.legal-warn{background:#FEF2F2;border-left:3px solid #DC2626;padding:12px 16px;border-radius:0 6px 6px 0;margin:14px 0;font-size:13px}
.legal-address{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:16px 20px;font-style:normal;line-height:2;font-size:14px;margin:12px 0}
.legal-address strong{color:var(--text)}
.legal-updated{font-size:11px;color:var(--text-light);margin-top:8px;text-align:right}
.legal-footer{background:var(--anthracite);color:rgba(255,255,255,.45);text-align:center;padding:24px;font-size:12px}
.legal-footer a{color:var(--teal-light);text-decoration:none;margin:0 8px}
.legal-footer a:hover{text-decoration:underline}
/* ── iPhone 16 Pro Max & kleine Mobilgeräte (≤430px) ─── */
@media(max-width:768px){
  .section{padding:40px 20px !important}
}
@media(max-width:430px){
  .site-header{padding:0 12px}
  .logo-img{height:48px !important}
  .hero-inner{padding:24px 16px 20px;gap:16px}
  .hero h1{font-size:clamp(24px,7vw,36px)}
  .hero p{font-size:14px;margin-bottom:20px}
  .hero-img-col{display:none}
  .hero-stats-strip{gap:10px;padding:0 4px;flex-wrap:wrap}
  .hero-stat{min-width:calc(50% - 5px)}
  .hero-stat-val{font-size:22px !important}
  .cat-grid{grid-template-columns:1fr 1fr !important;gap:8px}
  .section{padding:28px 16px !important}
  .section-inner{padding:0 12px}
  .offers-section{padding:40px 12px}
  .offers-title{font-size:clamp(24px,8vw,38px)}
  .offers-grid{grid-template-columns:1fr !important;max-width:100% !important;gap:16px}
  .offer-card-name{font-size:14px !important}
  .offer-price-new{font-size:24px !important}
  .offers-header{flex-direction:column;gap:16px}
  .offers-countdown{text-align:left;width:100%}
  .offers-countdown-timer{justify-content:flex-start;gap:6px}
  .offers-timer-block{min-width:44px;padding:6px 8px}
  .offers-timer-num{font-size:18px !important}
  .site-footer{padding:28px 16px 20px}
  .footer-top{grid-template-columns:1fr 1fr;gap:18px 14px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:100%;font-size:12px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;font-size:10px}
  .kontakt-grid{grid-template-columns:1fr}
  .usp-grid{grid-template-columns:1fr 1fr}
  .btn-lg{padding:12px 20px;font-size:14px}
  .toast{white-space:normal;max-width:calc(100vw - 32px);text-align:center}
}
@media(hover:none) and (pointer:coarse){
  .btn,.offer-card-btn{min-height:44px}
  .footer-col a{padding:6px 0;min-height:36px;display:flex;align-items:center}
  .acc-dropdown-item{min-height:44px;display:flex;align-items:center}
}

/* ══ MOBILE GLOBAL OVERFLOW & PACK-KARTEN ════════════════════ */
/* Verhindert horizontales Scrollen auf ALLEN Seiten */
img,iframe,video{max-width:100%}

/* Pack-Karten (1er/5er/10er) auf Mobil untereinander statt nebeneinander */
@media(max-width:600px){
  #price-boxes-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  /* Detail-Panel / Produkt-Panel auf volle Breite */
  #detail-panel{
    width:100% !important;
    max-width:100vw !important;
    margin:0 !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  /* Varianten-Tabelle scrollbar, nie breiter als Viewport */
  #detail-panel .table-scroll-wrap,
  #detail-panel > div[style*="overflow-x"],
  [id="detail-table"]{
    max-width:calc(100vw - 0px) !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  /* Wrapper-Divs innerhalb Panel nicht zu breit */
  #detail-panel > div{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* Varianten-Tabelle: ab 768px bereits scrollbar */
@media(max-width:768px){
  #detail-panel{max-width:100vw !important;overflow-x:hidden}
  #detail-panel table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100% !important}
  #detail-panel table thead,#detail-panel table tbody{display:table;width:100%}
}
/* Detail-Ansicht: Produktliste ausblenden wenn Varianten offen */
.page-layout.wd-hidden{display:none !important}
/* Filter IMMER nach Produktliste zeigen auf Mobil (alle Produktseiten) */
@media(max-width:900px){
  .page-layout{display:flex !important;flex-direction:column !important}
  .filter-sidebar{order:2 !important;position:static !important}
  .results-area{order:1 !important;position:static !important;max-height:none !important;overflow:visible !important}
}
/* Filter-Sidebar standardmäßig eingeklappt auf kleinen Mobil-Bildschirmen */
@media(max-width:600px){
  .filter-sidebar{display:none !important}
  .filter-sidebar.open{display:block !important}
  #filterToggleBtn{display:block !important}
}

/* ═══ PRODUCT CATEGORY PAGES ══════════════════════════════════════ */
/* from bohrwerkzeuge-metall.html */
.site-header{background:var(--anthracite);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1600px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}
.page-layout{max-width:1600px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.filter-reset{font-size:11px;color:var(--teal);cursor:pointer;font-weight:700;border:none;background:none;padding:0}.filter-reset:hover{text-decoration:underline}
.filter-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px}
.filter-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;cursor:pointer;gap:8px}
.filter-item:last-child{margin-bottom:0}
.filter-item label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);flex:1}
.filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.filter-count{font-size:11px;color:#fff;background:var(--teal);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;min-width:22px;text-align:center}
.filter-count.zero{background:#e5e7eb;color:#9ca3af}
.mat-chip-filter{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}
.results-area{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
#productList{overflow-y:auto;flex:1;padding-right:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.results-count strong{color:var(--text)}
.sort-select{font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer}
.product-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s;display:grid;grid-template-columns:200px 1fr auto;min-height:180px}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}
.card-img{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px;position:relative}
.card-img img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-placeholder{width:140px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-info{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.card-subtitle{font-size:13px;color:var(--text-light);font-weight:600;margin-top:1px}
.card-anwendung{font-size:12px;color:var(--text-light);margin-top:-4px}
.specs-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.spec-group{min-width:80px}
.spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700;margin-bottom:5px}
.spec-chips{display:flex;flex-wrap:wrap;gap:4px}
.mat-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-size:12px;font-weight:900;color:#fff}
.tag-chip{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;background:#1a2a2a;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tag-chip.geo{background:#e8f4f4;color:var(--teal-dark);border:1px solid var(--teal)}
.card-actions{padding:20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:12px}
.card-varianten{font-size:11px;color:var(--text-light);font-weight:600;text-align:right}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:.2s;text-align:center;white-space:nowrap}
.btn-detail:hover{background:var(--teal-dark)}
.card-price-val{font-size:20px;font-weight:800;color:var(--teal-dark)}
/* MAPAL-Badge — klein, diskret */
.mapal-badge{position:absolute;bottom:8px;right:8px;background:#002F6C;color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:3px;letter-spacing:.04em;opacity:.8}
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results h3{font-size:18px;margin-bottom:8px;color:var(--text)}
/* Info-Banner */
.info-hinweis{background:#eaf5f3;border-left:3px solid var(--teal);border-radius:0 6px 6px 0;padding:10px 16px;margin-bottom:16px;font-size:12px;color:#2a6358}
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .results-area{position:static;max-height:none;overflow:visible}
  #productList{overflow-y:visible}
  .product-card{grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center}
}
@media(max-width:600px){
  .product-card{grid-template-columns:1fr}
  .card-img{border-right:none;border-bottom:1px solid var(--border)}
}
/* from fraeswerk.html */
.site-header{background:var(--anthracite);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.header-back{display:none}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logo-box{width:40px;height:40px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.logo-text{font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.logo-text span{color:var(--teal-light)}
.header-back{margin-left:auto;display:flex;align-items:center;gap:8px;color:#9ca3af;font-size:13px;cursor:pointer;text-decoration:none;transition:.2s}
.header-back:hover{color:#fff}

/* BREADCRUMB */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1600px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}

/* LAYOUT */
.page-layout{max-width:1600px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* FILTER SIDEBAR */
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.filter-reset{font-size:11px;color:var(--teal);cursor:pointer;font-weight:700;border:none;background:none;padding:0}.filter-reset:hover{text-decoration:underline}
.filter-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px}
.filter-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;cursor:pointer;gap:8px}
.filter-item:last-child{margin-bottom:0}
.filter-item label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);flex:1}
.filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.filter-count{font-size:11px;color:#fff;background:var(--teal);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;min-width:22px;text-align:center}
.filter-count.zero{background:#e5e7eb;color:#9ca3af}

/* Material Chips in Filter */
.mat-chip-filter{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}

/* RESULTS AREA */
.results-area{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
#productList{overflow-y:auto;flex:1;padding-right:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.results-count strong{color:var(--text)}
.sort-select{font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer}

/* PRODUKT KARTE */
.product-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s;display:grid;grid-template-columns:200px 1fr auto;min-height:200px}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}

/* Bild-Spalte */
.card-img{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px}
.card-img img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-placeholder{width:140px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-img-placeholder svg{width:48px;height:48px;opacity:.4}
.card-img-placeholder span{font-size:10px;color:#9ca3af}

/* Info-Spalte */
.card-info{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.card-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.card-subtitle{font-size:13px;color:var(--text-light);font-weight:600;margin-top:1px}
.card-anwendung{font-size:12px;color:var(--text-light);margin-top:-4px}

/* Specs Row */
.specs-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.spec-group{min-width:80px}
.spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700;margin-bottom:5px}
.spec-chips{display:flex;flex-wrap:wrap;gap:4px}

/* Material Chips */
.mat-chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:5px;font-size:13px;font-weight:900;color:#fff}
.mat-P{background:#4A90D9}.mat-K{background:#C0392B}.mat-H{background:#555}
.mat-M{background:#F39C12}.mat-S{background:#8E44AD}.mat-N{background:#27AE60}

/* Beschichtung / Geometrie Chips */
.tag-chip{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;background:#1a2a2a;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tag-chip.geo{background:#e8f4f4;color:var(--teal-dark);border:1px solid var(--teal)}
.tag-chip.anw{background:#f0fdf4;color:#16a34a;border:1px solid #86efac;font-size:10px}
.tag-chip.schneid{background:#fefce8;color:#a16207;border:1px solid #fde047;font-size:10px}

/* Rechte Aktions-Spalte */
.card-actions{padding:20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:12px}
.card-varianten{font-size:11px;color:var(--text-light);font-weight:600;text-align:right}
.card-varianten strong{color:var(--text)}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:.2s;text-align:center;white-space:nowrap}
.btn-detail:hover{background:var(--teal-dark)}
.card-d-range{font-size:12px;color:var(--text-light);text-align:right}
.card-d-range strong{color:var(--text);font-size:14px}
.lager-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;text-align:center}
.lager-ja{background:#dcfce7;color:#16a34a}
.lager-nein{background:#fee2e2;color:#dc2626}
.lager-unbekannt{background:#f3f4f6;color:#6b7280}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* EMPTY */
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results h3{font-size:18px;margin-bottom:8px;color:var(--text)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .results-area{position:static;max-height:none;overflow:visible}
  #productList{overflow-y:visible}
  .product-card{grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center}
}
@media(max-width:600px){
  .product-card{grid-template-columns:1fr}
  .card-img{border-right:none;border-bottom:1px solid var(--border)}
}
/* ── Mobile Varianten-Tabelle ── */
@media(max-width:768px){
  #detail-table th, #detail-table td { padding:6px 8px!important; font-size:11px!important; white-space:nowrap; }
  .detail-section { padding:12px!important; }
  .pack-boxes { grid-template-columns:1fr!important; }
  .pack-box { padding:14px!important; }
  #productDetail { padding:0 12px!important; }
  .product-header { flex-direction:column!important; gap:16px; padding:16px!important; }
  .product-gallery { width:100%!important; max-width:100%!important; }
  #productList { overflow-y:visible!important; max-height:none!important; }
  .page-layout { gap:0!important; }
  .filter-sidebar { padding:12px!important; }
  .filter-sidebar .filter-section { margin-bottom:8px; }
}

.wishlist-heart{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9CA3AF;transition:all .2s;box-shadow:0 1px 6px rgba(0,0,0,.15);z-index:5;padding:0}
.wishlist-heart:hover{background:#fff;color:#EF4444;transform:scale(1.12)}
.wishlist-heart.active,.wishlist-heart.wl-active{color:#EF4444;background:#fff}
.wishlist-heart.wl-active svg,.wishlist-heart.active svg{fill:#EF4444}
.wishlist-heart svg{pointer-events:none;transition:fill .2s}

.card-price-val{font-size:22px!important;font-weight:900!important;color:#0F6E56!important;font-family:'Raleway',sans-serif!important;line-height:1.1}
/* from fraeswerk-holz.html */
.site-header{background:var(--anthracite);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.header-back{display:none}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logo-box{width:40px;height:40px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.logo-text{font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.logo-text span{color:var(--teal-light)}
.header-back{margin-left:auto;display:flex;align-items:center;gap:8px;color:#9ca3af;font-size:13px;cursor:pointer;text-decoration:none;transition:.2s}
.header-back:hover{color:#fff}

/* BREADCRUMB */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1600px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}

/* LAYOUT */
.page-layout{max-width:1600px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* FILTER SIDEBAR */
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.filter-reset{font-size:11px;color:var(--teal);cursor:pointer;font-weight:700;border:none;background:none;padding:0}.filter-reset:hover{text-decoration:underline}
.filter-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px}
.filter-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;cursor:pointer;gap:8px}
.filter-item:last-child{margin-bottom:0}
.filter-item label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);flex:1}
.filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.filter-count{font-size:11px;color:#fff;background:var(--teal);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;min-width:22px;text-align:center}
.filter-count.zero{background:#e5e7eb;color:#9ca3af}

/* Material Chips in Filter */
.mat-chip-filter{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}

/* RESULTS AREA */
.results-area{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
#productList{overflow-y:auto;flex:1;padding-right:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.results-count strong{color:var(--text)}
.sort-select{font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer}

/* PRODUKT KARTE */
.product-card{position:relative;}
.wishlist-heart{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9CA3AF;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:2;padding:0}
.wishlist-heart:hover{background:#fff;color:#EF4444;transform:scale(1.1)}
.wishlist-heart.active{color:#EF4444;background:#fff}
.wishlist-heart svg{pointer-events:none}
.product-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s;display:grid;grid-template-columns:200px 1fr auto;min-height:200px}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}

/* Bild-Spalte */
.card-img{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px}
.card-img img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-placeholder{width:140px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-img-placeholder svg{width:48px;height:48px;opacity:.4}
.card-img-placeholder span{font-size:10px;color:#9ca3af}

/* Info-Spalte */
.card-info{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.card-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.card-subtitle{font-size:13px;color:var(--text-light);font-weight:600;margin-top:1px}
.card-anwendung{font-size:12px;color:var(--text-light);margin-top:-4px}

/* Specs Row */
.specs-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.spec-group{min-width:80px}
.spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700;margin-bottom:5px}
.spec-chips{display:flex;flex-wrap:wrap;gap:4px}

/* Material Chips */
.mat-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-size:12px;font-weight:900;color:#fff}
.mat-P{background:#4A90D9}.mat-K{background:#C0392B}.mat-H{background:#555}
.mat-M{background:#F39C12}.mat-S{background:#8E44AD}.mat-N{background:#27AE60}

/* Beschichtung / Geometrie Chips */
.tag-chip{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;background:#1a2a2a;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tag-chip.geo{background:#e8f4f4;color:var(--teal-dark);border:1px solid var(--teal)}
.tag-chip.anw{background:#f0fdf4;color:#16a34a;border:1px solid #86efac;font-size:10px}
.tag-chip.schneid{background:#fefce8;color:#a16207;border:1px solid #fde047;font-size:10px}

/* Rechte Aktions-Spalte */
.card-actions{padding:20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:12px}
.card-varianten{font-size:11px;color:var(--text-light);font-weight:600;text-align:right}
.card-varianten strong{color:var(--text)}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:.2s;text-align:center;white-space:nowrap}
.btn-detail:hover{background:var(--teal-dark)}
.card-d-range{font-size:12px;color:var(--text-light);text-align:right}
.card-d-range strong{color:var(--text);font-size:14px}
.lager-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;text-align:center}
.lager-ja{background:#dcfce7;color:#16a34a}
.lager-nein{background:#fee2e2;color:#dc2626}
.lager-unbekannt{background:#f3f4f6;color:#6b7280}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* EMPTY */
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results h3{font-size:18px;margin-bottom:8px;color:var(--text)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-layout{display:flex;flex-direction:column}
  .filter-sidebar{position:static;order:2;margin-top:16px}
  .results-area{position:static;max-height:none;overflow:visible;order:1}
  #productList{overflow-y:visible}
  .product-card{grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center}
}
/* Filter auf Mobil einklappbar: Standard ausgeblendet, Toggle-Button zeigt ihn */
@media(max-width:600px){
  .filter-sidebar{display:none}
  .filter-sidebar.open{display:block}
  #filterToggleBtn{display:block !important}
  .product-card{grid-template-columns:1fr}
  .card-img{border-right:none;border-bottom:1px solid var(--border)}
}
/* from ksb-dia-hw.html */
.site-header{background:var(--anthracite);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.header-back{display:none}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logo-box{width:40px;height:40px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.logo-text{font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.logo-text span{color:var(--teal-light)}
.header-back{margin-left:auto;display:flex;align-items:center;gap:8px;color:#9ca3af;font-size:13px;cursor:pointer;text-decoration:none;transition:.2s}
.header-back:hover{color:#fff}

/* BREADCRUMB */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1600px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}

/* LAYOUT */
.page-layout{max-width:1600px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* FILTER SIDEBAR */
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.filter-reset{font-size:11px;color:var(--teal);cursor:pointer;font-weight:700;border:none;background:none;padding:0}.filter-reset:hover{text-decoration:underline}
.filter-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px}
.filter-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;cursor:pointer;gap:8px;padding:3px 6px;border-radius:5px;border-left:3px solid transparent;transition:background .15s}
.filter-item:last-child{margin-bottom:0}
.filter-item label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);flex:1}
.filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.filter-item:has(input:checked){background:#e0f2f1;border-left:3px solid var(--teal)}
.filter-count{font-size:11px;color:#fff;background:var(--teal);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;min-width:22px;text-align:center}
.filter-count.zero{background:#e5e7eb;color:#9ca3af}

/* Material Chips in Filter */
.mat-chip-filter{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}

/* RESULTS AREA */
.results-area{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
#productList{overflow-y:auto;flex:1;padding-right:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.results-count strong{color:var(--text)}
.sort-select{font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer}

/* PRODUKT KARTE */
.product-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s;display:grid;grid-template-columns:200px 1fr auto;min-height:200px}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}

/* Bild-Spalte */
.card-img{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px}
.card-img img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-placeholder{width:140px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-img-placeholder svg{width:48px;height:48px;opacity:.4}
.card-img-placeholder span{font-size:10px;color:#9ca3af}

/* Info-Spalte */
.card-info{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.card-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.card-subtitle{font-size:13px;color:var(--text-light);font-weight:600;margin-top:1px}
.card-anwendung{font-size:12px;color:var(--text-light);margin-top:-4px}

/* Specs Row */
.specs-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.spec-group{min-width:80px}
.spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700;margin-bottom:5px}
.spec-chips{display:flex;flex-wrap:wrap;gap:4px}

/* Material Chips */
.mat-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-size:12px;font-weight:900;color:#fff}
.mat-P{background:#4A90D9}.mat-K{background:#C0392B}.mat-H{background:#555}
.mat-M{background:#F39C12}.mat-S{background:#8E44AD}.mat-N{background:#27AE60}

/* Beschichtung / Geometrie Chips */
.tag-chip{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;background:#1a2a2a;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tag-chip.geo{background:#e8f4f4;color:var(--teal-dark);border:1px solid var(--teal)}
.tag-chip.anw{background:#f0fdf4;color:#16a34a;border:1px solid #86efac;font-size:10px}
.tag-chip.schneid{background:#fefce8;color:#a16207;border:1px solid #fde047;font-size:10px}

/* Rechte Aktions-Spalte */
.card-actions{padding:20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:12px}
.card-varianten{font-size:11px;color:var(--text-light);font-weight:600;text-align:right}
.card-varianten strong{color:var(--text)}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:.2s;text-align:center;white-space:nowrap}
.btn-detail:hover{background:var(--teal-dark)}
.card-d-range{font-size:12px;color:var(--text-light);text-align:right}
.card-d-range strong{color:var(--text);font-size:14px}
.lager-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;text-align:center}
.lager-ja{background:#dcfce7;color:#16a34a}
.lager-nein{background:#fee2e2;color:#dc2626}
.lager-unbekannt{background:#f3f4f6;color:#6b7280}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* EMPTY */
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results h3{font-size:18px;margin-bottom:8px;color:var(--text)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .results-area{position:static;max-height:none;overflow:visible}
  #productList{overflow-y:visible}
  .product-card{grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center}
}
@media(max-width:600px){
  .product-card{grid-template-columns:1fr}
  .card-img{border-right:none;border-bottom:1px solid var(--border)}
}
/* ── Mobile Varianten-Tabelle ── */
@media(max-width:768px){
  #detail-table th, #detail-table td { padding:6px 8px!important; font-size:11px!important; white-space:nowrap; }
  .detail-section { padding:12px!important; }
  .pack-boxes { grid-template-columns:1fr!important; }
  .pack-box { padding:14px!important; }
  #productDetail { padding:0 12px!important; }
  .product-header { flex-direction:column!important; gap:16px; padding:16px!important; }
  .product-gallery { width:100%!important; max-width:100%!important; }
  #productList { overflow-y:visible!important; max-height:none!important; }
  .page-layout { gap:0!important; }
  .filter-sidebar { padding:12px!important; }
  .filter-sidebar .filter-section { margin-bottom:8px; }
}

.wishlist-heart{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9CA3AF;transition:all .2s;box-shadow:0 1px 6px rgba(0,0,0,.15);z-index:5;padding:0}
.wishlist-heart:hover{background:#fff;color:#EF4444;transform:scale(1.12)}
.wishlist-heart.active,.wishlist-heart.wl-active{color:#EF4444;background:#fff}
.wishlist-heart.wl-active svg,.wishlist-heart.active svg{fill:#EF4444}
.wishlist-heart svg{pointer-events:none;transition:fill .2s}

.card-price-val{font-size:22px!important;font-weight:900!important;color:#0F6E56!important;font-family:'Raleway',sans-serif!important;line-height:1.1}
/* from ksb-hss-vhm.html */
.site-header{background:var(--anthracite);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.header-back{display:none}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logo-box{width:40px;height:40px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.logo-text{font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.logo-text span{color:var(--teal-light)}
.header-back{margin-left:auto;display:flex;align-items:center;gap:8px;color:#9ca3af;font-size:13px;cursor:pointer;text-decoration:none;transition:.2s}
.header-back:hover{color:#fff}

/* BREADCRUMB */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1600px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}

/* LAYOUT */
.page-layout{max-width:1600px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* FILTER SIDEBAR */
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.filter-reset{font-size:11px;color:var(--teal);cursor:pointer;font-weight:700;border:none;background:none;padding:0}.filter-reset:hover{text-decoration:underline}
.filter-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px}
.filter-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;cursor:pointer;gap:8px}
.filter-item:last-child{margin-bottom:0}
.filter-item label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);flex:1}
.filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.filter-count{font-size:11px;color:#fff;background:var(--teal);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;min-width:22px;text-align:center}
.filter-count.zero{background:#e5e7eb;color:#9ca3af}

/* Material Chips in Filter */
.mat-chip-filter{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}

/* RESULTS AREA */
.results-area{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
#productList{overflow-y:auto;flex:1;padding-right:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.results-count strong{color:var(--text)}
.filter-dropdown{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer;outline:none;margin-bottom:2px}
.filter-dropdown:focus{border-color:var(--teal)}
.sort-select{font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer}

/* PRODUKT KARTE */
.product-card{position:relative;}
.wishlist-heart{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9CA3AF;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:2;padding:0}
.wishlist-heart:hover{background:#fff;color:#EF4444;transform:scale(1.1)}
.wishlist-heart.active{color:#EF4444;background:#fff}
.wishlist-heart svg{pointer-events:none}
.product-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s;display:grid;grid-template-columns:200px 1fr auto;min-height:200px}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}
/* ── KSB-Karte HSS/VHM ─── */
.ksb-card{grid-template-columns:200px 1fr auto!important;min-height:200px}
.ksb-main-col{display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;}
/* Bild normal */
.card-img-half{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px;width:200px;flex-shrink:0}
.card-img-half img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-half::after{display:none}
/* Mittelspalte: Name + Subtitle */
.ksb-title-col{padding:20px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border)}
.ksb-title-col .card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.ksb-title-col .card-subtitle{font-size:13px;color:var(--text);font-weight:600;margin-top:4px}
.ksb-title-col .card-sub2{font-size:12px;color:#888;margin-top:3px;letter-spacing:.4px}
/* Specs-Spalte */
.ksb-specs-col{display:none}
.ksb-spec-row{display:none}
.ksb-spec-label{display:none}
.ksb-spec-vals{display:none}

/* Bild-Spalte */
.card-img{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px}
.card-img img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-placeholder{width:140px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-img-placeholder svg{width:48px;height:48px;opacity:.4}
.card-img-placeholder span{font-size:10px;color:#9ca3af}

/* Info-Spalte */
.card-info{padding:20px 24px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.card-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.card-subtitle{font-size:13px;color:var(--text-light);font-weight:600;margin-top:1px}
.card-anwendung{font-size:12px;color:var(--text-light);margin-top:-4px}

/* Specs Row */
.specs-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.spec-group{min-width:80px}
.spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700;margin-bottom:5px}
.spec-chips{display:flex;flex-wrap:wrap;gap:4px}

/* Material Chips */
.mat-chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;font-size:12px;font-weight:900;color:#fff}
.mat-P{background:#4A90D9}.mat-K{background:#C0392B}.mat-H{background:#555}
.mat-M{background:#F39C12}.mat-S{background:#8E44AD}.mat-N{background:#27AE60}

/* Beschichtung / Geometrie Chips */
.tag-chip{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;background:#1a2a2a;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tag-chip.geo{background:#e8f4f4;color:var(--teal-dark);border:1px solid var(--teal)}
.tag-chip.anw{background:#f0fdf4;color:#16a34a;border:1px solid #86efac;font-size:10px}
.tag-chip.schneid{background:#fefce8;color:#a16207;border:1px solid #fde047;font-size:10px}

/* Rechte Aktions-Spalte */
.card-actions{padding:20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:12px}
.card-varianten{font-size:11px;color:var(--text-light);font-weight:600;text-align:right}
.card-varianten strong{color:var(--text)}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:.2s;text-align:center;white-space:nowrap}
.btn-detail:hover{background:var(--teal-dark)}
.card-d-range{font-size:12px;color:var(--text-light);text-align:right}
.card-d-range strong{color:var(--text);font-size:14px}
.lager-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;text-align:center}
.lager-ja{background:#dcfce7;color:#16a34a}
.lager-nein{background:#fee2e2;color:#dc2626}
.lager-unbekannt{background:#f3f4f6;color:#6b7280}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* EMPTY */
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results h3{font-size:18px;margin-bottom:8px;color:var(--text)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .results-area{position:static;max-height:none;overflow:visible}
  #productList{overflow-y:visible}
  .product-card{grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center}
}
@media(max-width:600px){
  .product-card{grid-template-columns:1fr}
  .card-img{border-right:none;border-bottom:1px solid var(--border)}
}
.card-price-val{font-size:22px!important;font-weight:900!important;color:#0F6E56!important;font-family:'Raleway',sans-serif!important;line-height:1.1}
/* from saegebaender.html */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1400px;margin:0 auto;padding:0 24px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}

/* LAYOUT */
.page-layout{max-width:1400px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* FILTER SIDEBAR */
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.filter-reset{background:none;border:none;color:var(--teal);font-size:12px;font-weight:700;cursor:pointer;font-family:Cairo,sans-serif}
.filter-reset:hover{text-decoration:underline}
.filter-group{border-bottom:1px solid var(--border)}
.filter-group:last-child{border-bottom:none}
.filter-group-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.filter-group-header:hover{background:#f9fafb}
.filter-group-body{padding:8px 16px 14px}
.filter-item{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:13px}
.filter-item input[type=checkbox]{accent-color:var(--teal);width:15px;height:15px;cursor:pointer}
.filter-item label{cursor:pointer;flex:1}
.filter-count{background:#f3f4f6;color:#6b7280;border-radius:10px;font-size:11px;padding:1px 7px;font-weight:700}

/* RESULTS AREA */
.results-area{min-width:0}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.sort-select{border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px;font-family:Cairo,sans-serif;color:var(--text);background:#fff;cursor:pointer}

/* PRODUKTKARTE */
.product-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s;display:grid;grid-template-columns:180px 1fr auto;min-height:180px;cursor:pointer}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}
.card-img{padding:16px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:160px}
.card-img img{max-width:150px;max-height:120px;object-fit:contain}
.card-img-placeholder{width:140px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-info{padding:18px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--teal)}
.card-name{font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;text-transform:uppercase;color:var(--teal-dark);line-height:1.2}
.card-subtitle{font-size:14px;font-weight:700;color:var(--text)}
.card-desc{font-size:13px;color:var(--text-light);line-height:1.5}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.card-tag{background:var(--teal-bg);color:var(--teal-dark);font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px}
.card-actions{padding:18px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:10px}
.card-price{text-align:right}
.card-price-ab{font-size:11px;color:var(--text-light);margin-bottom:2px}
.card-price-val{font-size:22px;font-weight:900;color:var(--teal-dark)}
.card-price-vat{font-size:11px;color:var(--text-light);font-weight:700;margin-top:2px}
.card-variants{font-size:12px;color:var(--teal);font-weight:700;text-align:right}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 16px;font-size:12px;font-weight:800;cursor:pointer;font-family:Cairo,sans-serif;text-transform:uppercase;letter-spacing:.06em;width:100%;transition:background .2s}
.btn-detail:hover{background:var(--teal-dark)}

/* DETAIL PANEL */
#detailOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;overflow-y:auto;padding:20px}
#detailOverlay.open{display:flex;align-items:flex-start;justify-content:center}
#detailPanel{background:#fff;border-radius:12px;width:100%;max-width:900px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:auto}

/* DETAIL INHALT */
.detail-breadcrumb{padding:10px 20px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-light);border-bottom:1px solid var(--border);background:#fafafa}
.detail-back{background:none;border:none;color:var(--teal);font-size:12px;font-weight:700;cursor:pointer;font-family:Cairo,sans-serif;display:flex;align-items:center;gap:4px}
.detail-main{display:grid;grid-template-columns:340px 1fr}
.detail-img-col{border-right:1px solid var(--border);padding:24px;display:flex;flex-direction:column;gap:12px;background:#fafafa}
.detail-img-wrap{background:#fff;border-radius:8px;border:1px solid var(--border);padding:16px;display:flex;align-items:center;justify-content:center;min-height:200px;position:relative}
.detail-img-wrap img{max-width:100%;max-height:200px;object-fit:contain}
.detail-zoom{position:absolute;top:8px;right:8px;background:#fff;border:1px solid var(--border);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.detail-info-col{padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:85vh}
.detail-title{font-family:'Raleway',sans-serif;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--teal-dark);line-height:1.2}
.detail-subtitle{font-size:15px;font-weight:800;color:var(--text);margin-top:4px}
.detail-desc-short{font-size:13px;color:var(--text-light);line-height:1.6}

/* VARIANTEN-KONFIGURATOR */
.konfigurator{background:#f9fafb;border:1px solid var(--border);border-radius:8px;padding:18px}
.konfigurator-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);margin-bottom:14px}
.konfig-field{margin-bottom:14px}
.konfig-label{font-size:13px;font-weight:700;color:var(--teal-dark);margin-bottom:6px;display:block}
.konfig-input{width:100%;border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:14px;font-family:Cairo,sans-serif;color:var(--text);background:#fff;transition:border-color .2s}
.konfig-input:focus{outline:none;border-color:var(--teal)}
.konfig-select{width:100%;border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:14px;font-family:Cairo,sans-serif;color:var(--text);background:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23457B81' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .2s}
.konfig-select:focus{outline:none;border-color:var(--teal)}

/* SPECS */
.detail-specs{display:flex;flex-direction:column;gap:10px}
.spec-row{display:flex;align-items:flex-start;gap:10px;font-size:13px}
.spec-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.spec-label{font-weight:800;color:var(--teal-dark);min-width:80px}
.spec-val{color:var(--text-light)}

/* PREISBOX */
.price-section{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px}
.price-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);margin-bottom:10px}
.price-boxes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.price-box{border:2px solid var(--border);border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}
.price-box:hover,.price-box.selected{border-color:var(--teal);background:var(--teal-bg)}
.price-box-pack{font-size:12px;font-weight:800;color:var(--text);margin-bottom:4px}
.price-box-rabatt{font-size:11px;color:var(--teal);font-weight:700;margin-bottom:6px}
.price-box-preis{font-size:18px;font-weight:900;color:var(--teal-dark)}
.price-box-unit{font-size:10px;color:var(--text-light);margin-top:2px}

/* WARENKORB ZEILE */
.cart-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.qty-btn{background:#f3f4f6;border:1px solid var(--border);border-radius:4px;width:30px;height:30px;font-size:16px;cursor:pointer;font-weight:700;display:flex;align-items:center;justify-content:center}
.qty-input{width:50px;border:1px solid var(--border);border-radius:6px;padding:5px;font-size:14px;font-family:Cairo,sans-serif;text-align:center}
.btn-cart{flex:1;background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px;font-size:12px;font-weight:800;cursor:pointer;font-family:Cairo,sans-serif;text-transform:uppercase;letter-spacing:.05em;transition:background .2s}
.btn-cart:hover{background:var(--teal-dark)}
.btn-wish{background:#fff;border:1px solid var(--border);border-radius:6px;padding:10px 11px;font-size:16px;cursor:pointer;transition:all .2s;flex-shrink:0}
.btn-wish:hover{border-color:#ef4444;background:#fff5f5}

/* BESCHREIBUNG */
.detail-section{border-top:1px solid var(--border)}
.detail-section-header{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#fafafa}
.detail-section-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-dark)}
.detail-section-body{padding:16px 20px;font-size:13px;line-height:1.8}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr:nth-child(even){background:#f9fafb}
.spec-table td{padding:6px 10px;font-size:13px}
.spec-table td:first-child{font-weight:700;color:var(--text);width:40%;white-space:nowrap}
.spec-table td:last-child{color:var(--text-light)}
.anw-list{list-style:none;padding:0}
.anw-list li{padding:4px 0;padding-left:16px;position:relative;color:var(--text-light)}
.anw-list li::before{content:'•';position:absolute;left:0;color:var(--teal)}

/* NO RESULTS */
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results-icon{font-size:48px;margin-bottom:16px}

/* RESPONSIVE */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
}
@media(max-width:768px){
  .page-layout{padding:12px}
  .product-card{grid-template-columns:110px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center;padding:12px 14px}
  .card-img{border-right:none;border-bottom:1px solid var(--border);min-height:100px;padding:12px}
  .card-img img{max-width:90px;max-height:80px}
  .card-name{font-size:14px}
  .card-price-val{font-size:18px}
  .detail-main{grid-template-columns:1fr}
  .detail-img-col{border-right:none;border-bottom:1px solid var(--border);padding:16px}
  .detail-img-wrap{min-height:150px}
  .detail-info-col{padding:16px;max-height:none}
  .detail-title{font-size:18px}
  .price-boxes-grid{grid-template-columns:1fr}
  #detailOverlay{padding:0}
  #detailPanel{border-radius:0;min-height:100vh}
  #cartDropdown{width:calc(100vw - 16px) !important;right:8px !important;left:8px !important}
}
/* from saegebaender-holz.html */
.site-header{background:var(--anthracite);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.header-back{display:none}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logo-box{width:40px;height:40px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.logo-text{font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.logo-text span{color:var(--teal-light)}
.header-back{margin-left:auto;display:flex;align-items:center;gap:8px;color:#9ca3af;font-size:13px;cursor:pointer;text-decoration:none;transition:.2s}
.header-back:hover{color:#fff}

/* BREADCRUMB */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-inner{max-width:1600px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-light);text-decoration:none}.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:#d1d5db}

/* LAYOUT */
.page-layout{max-width:1600px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* FILTER SIDEBAR */
.filter-sidebar{background:#fff;border-radius:10px;border:1px solid var(--border);position:sticky;top:84px;overflow:hidden}
.filter-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-header h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.filter-reset{font-size:11px;color:var(--teal);cursor:pointer;font-weight:700;border:none;background:none;padding:0}.filter-reset:hover{text-decoration:underline}
.filter-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.filter-section:last-child{border-bottom:none}
.filter-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px}
.filter-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;cursor:pointer;gap:8px}
.filter-item:last-child{margin-bottom:0}
.filter-item label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);flex:1}
.filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.filter-count{font-size:11px;color:#fff;background:var(--teal);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;min-width:22px;text-align:center}
.filter-count.zero{background:#e5e7eb;color:#9ca3af}

/* Material Chips in Filter */
.mat-chip-filter{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}

/* RESULTS AREA */
.results-area{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
#productList{overflow-y:auto;flex:1;padding-right:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.results-count{font-size:13px;color:var(--text-light);font-weight:600}
.results-count strong{color:var(--text)}
.sort-select{font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;cursor:pointer}

/* PRODUKT KARTE */
.product-card{position:relative;}
.wishlist-heart{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9CA3AF;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:2;padding:0}
.wishlist-heart:hover{background:#fff;color:#EF4444;transform:scale(1.1)}
.wishlist-heart.active{color:#EF4444;background:#fff}
.wishlist-heart svg{pointer-events:none}
.product-card{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s;display:grid;grid-template-columns:200px 1fr auto;min-height:200px}
.product-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--teal)}

/* Bild-Spalte */
.card-img{padding:20px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#fafafa;min-height:180px}
.card-img img{max-width:160px;max-height:140px;object-fit:contain}
.card-img-placeholder{width:140px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#d1d5db}
.card-img-placeholder svg{width:48px;height:48px;opacity:.4}
.card-img-placeholder span{font-size:10px;color:#9ca3af}

/* Info-Spalte */
.card-info{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.card-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-name{font-size:17px;font-weight:800;color:var(--text);text-transform:uppercase;font-family:'Raleway',sans-serif;letter-spacing:.02em}
.card-subtitle{font-size:13px;color:var(--text-light);font-weight:600;margin-top:1px}
.card-anwendung{font-size:12px;color:var(--text-light);margin-top:-4px}

/* Specs Row */
.specs-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.spec-group{min-width:80px}
.spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700;margin-bottom:5px}
.spec-chips{display:flex;flex-wrap:wrap;gap:4px}

/* Material Chips */
.mat-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-size:12px;font-weight:900;color:#fff}
.mat-P{background:#4A90D9}.mat-K{background:#C0392B}.mat-H{background:#555}
.mat-M{background:#F39C12}.mat-S{background:#8E44AD}.mat-N{background:#27AE60}

/* Beschichtung / Geometrie Chips */
.tag-chip{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;background:#1a2a2a;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tag-chip.geo{background:#e8f4f4;color:var(--teal-dark);border:1px solid var(--teal)}
.tag-chip.anw{background:#f0fdf4;color:#16a34a;border:1px solid #86efac;font-size:10px}
.tag-chip.schneid{background:#fefce8;color:#a16207;border:1px solid #fde047;font-size:10px}

/* Rechte Aktions-Spalte */
.card-actions{padding:20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;border-left:1px solid var(--border);min-width:160px;gap:12px}
.card-varianten{font-size:11px;color:var(--text-light);font-weight:600;text-align:right}
.card-varianten strong{color:var(--text)}
.btn-detail{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:.2s;text-align:center;white-space:nowrap}
.btn-detail:hover{background:var(--teal-dark)}
.card-d-range{font-size:12px;color:var(--text-light);text-align:right}
.card-d-range strong{color:var(--text);font-size:14px}
.lager-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;text-align:center}
.lager-ja{background:#dcfce7;color:#16a34a}
.lager-nein{background:#fee2e2;color:#dc2626}
.lager-unbekannt{background:#f3f4f6;color:#6b7280}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* EMPTY */
.no-results{text-align:center;padding:60px 20px;color:var(--text-light)}
.no-results h3{font-size:18px;margin-bottom:8px;color:var(--text)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .results-area{position:static;max-height:none;overflow:visible}
  #productList{overflow-y:visible}
  .product-card{grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .card-actions{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;align-items:center}
}
@media(max-width:600px){
  .product-card{grid-template-columns:1fr}
  .card-img{border-right:none;border-bottom:1px solid var(--border)}
}


/* ═══ INDEX / HOMEPAGE ════════════════════════════════════════════ */
/* ══ KATEGORIE-GRID MOBILE ══ */
.cat-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Reveal-Animation für catGrid deaktivieren — IntersectionObserver ist auf Mobile unzuverlässig
   wenn #kategorien vorher display:none war (JS lädt erst async) */
#catGrid { opacity: 1 !important; transform: none !important; }
#kategorien { display: block !important; }
.cat-card {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid #457B81 !important;
  border-radius: 3px !important;
}
.cat-sub-tiles {
  display: flex !important;
  gap: 0 !important;
  border: none !important;
}
.cat-sub-tile { border: none !important; }
.cat-card-header { border-bottom: none !important; }
.cat-sub-tile {
  transition: transform 0.18s ease, background 0.18s ease !important;
}
.cat-sub-tile-img img[style*="scale(1.6)"] {
  transform: scale(1.55) translateY(-8%) !important;
  max-height: 145px !important;
}
.cat-sub-tile-img img:not([style*="scale(1.6)"]) {
  transform: scale(0.9) !important;
}
.cat-sub-tile-img:has(img[style*="scale(1.6)"]) {
  overflow: visible !important;
  clip-path: inset(-100% -100% 0 -100%) !important;
}
.cat-sub-tile:hover {
  transform: scale(1.04) !important;
  z-index: 1 !important;
  position: relative !important;
}
.cat-sub-tile {
  width: 100% !important;
  min-width: 0 !important;
}

@media (min-width: 900px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  .cat-card-header { font-size: 15px !important; }
}

/* ══ HERO MOBILE ══ */
@media (max-width: 768px) {
  .hero { min-height: auto !important; padding: 0 !important; }
  .hero-inner { 
    flex-direction: column !important; 
    padding: 28px 16px !important;
    text-align: center;
    gap: 20px;
  }
  .hero-text { max-width: 100% !important; }
  .hero-title, .hero h1 { font-size: 26px !important; line-height: 1.2 !important; }
  .hero-sub, .hero p  { font-size: 14px !important; }
  .hero-ctas { 
    justify-content: center !important; 
    flex-wrap: wrap !important; 
    gap: 10px !important;
  }
  .hero-ctas .btn { width: auto !important; min-width: 140px; }
  .hero-stats-strip { 
    flex-wrap: wrap !important; 
    gap: 14px !important; 
    justify-content: center !important;
    padding: 16px !important;
  }
  .hero-product-img { max-width: 280px !important; margin: 0 auto !important; }
  
  /* Sektion Padding */
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .section-inner, .cat-section-inner { padding: 0 !important; }

  /* Footer */
  .footer-top { 
    grid-template-columns: 1fr !important; 
    gap: 28px !important;
  }
  .footer-bottom { 
    flex-direction: column !important; 
    align-items: center !important; 
    text-align: center !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  .footer-inner { padding: 28px 16px !important; }

  /* Marken */
  /* marken-inner padding via style.css */

  /* Kontakt */
  .kontakt-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .kontakt-inner { padding: 0 16px !important; }

  /* Kunden-Dashboard */
  .kd-page { flex-direction: column !important; }
  .kd-sidebar { 
    width: 100% !important; 
    min-height: auto !important; 
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    gap: 4px !important;
  }
  .kd-nav-link { 
    padding: 8px 12px !important; 
    font-size: 12px !important;
    flex: 0 0 auto !important;
  }
  .kd-content { padding: 16px !important; }
  .kd-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #kdWishlistContent > div { grid-template-columns: 1fr 1fr !important; }
  
  /* Bestellungen */
  .order-row { flex-direction: column !important; gap: 8px !important; }
}

@media (max-width: 480px) {
  .hero-title, .hero h1 { font-size: 22px !important; }
  #kdWishlistContent > div { grid-template-columns: 1fr !important; }
  .kd-sidebar { flex-direction: column !important; }
  .kd-nav-link { width: 100% !important; }
}


/* ═══ ADMIN PANEL ═════════════════════════════════════════════════ */

/* LAYOUT */
.admin-layout{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.admin-sidebar{background:var(--anthracite2);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-logo{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-nav{padding:12px 8px;flex:1}
.sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:14px 10px 5px}
.sidebar-link{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;color:rgba(255,255,255,.65);padding:9px 12px;border-radius:5px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:13.5px;text-align:left;transition:background .15s,color .15s}
.sidebar-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar-link.active{background:var(--teal);color:#fff}
.sidebar-link .icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:12px 8px;border-top:1px solid rgba(255,255,255,.08)}
.admin-main{display:flex;flex-direction:column;min-width:0}
.admin-topbar{background:var(--anthracite2);border-bottom:1px solid rgba(255,255,255,.08);padding:0 26px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.admin-topbar h1{font-size:22px;font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:.04em}
.admin-content{padding:22px 26px;flex:1}
.admin-page{display:none}.admin-page.active{display:block}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafafa}
.card-header h3{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.card-body{padding:17px}

/* STAT CARDS — einheitliches Design */
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.stat-card{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:8px;padding:18px 20px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.stat-card-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-bottom:6px}
.stat-card-val{font-size:32px;font-weight:900;color:var(--text);line-height:1}

/* TABLES */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{border-bottom:2px solid var(--border)}
th{text-align:left;padding:9px 13px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);white-space:nowrap}
td{padding:10px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFAFA}

/* FORMS */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);margin-bottom:4px}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 11px;border-radius:4px;font-family:'Cairo',sans-serif;font-size:13px;outline:none;transition:border-color .2s;resize:vertical}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(78,155,143,.1)}
.form-group textarea{min-height:70px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:4px;border:none;cursor:pointer;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,transform .1s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover{background:var(--teal-dark)}
.btn-secondary{background:var(--anthracite);color:#fff}.btn-secondary:hover{background:var(--anthracite2)}
.btn-outline{background:transparent;color:var(--teal);border:2px solid var(--teal)}.btn-outline:hover{background:var(--teal-bg)}
.btn-ghost{background:transparent;color:var(--text-light);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-wa{background:#25D366;color:#fff}.btn-wa:hover{background:#1EBE5D}
.btn-sms{background:#6366f1;color:#fff}.btn-sms:hover{background:#4f46e5}
.btn-sm{padding:4px 9px;font-size:11px}.btn-lg{padding:11px 22px;font-size:14px}.btn-block{width:100%;justify-content:center}

/* TOOLBAR */
.admin-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.admin-toolbar .search input{background:var(--card);border:1px solid var(--border);padding:7px 13px;border-radius:4px;font-size:13px;outline:none;width:240px;font-family:'Cairo',sans-serif}
.admin-toolbar .search input:focus{border-color:var(--teal)}

/* STATUS BADGES */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.s-new{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}
.s-paid{background:#DCFCE7;color:#15803D;border:1px solid #86EFAC}
.s-processing{background:#FEF9C3;color:#92400E;border:1px solid #FCD34D}
.s-shipped{background:#EDE9FE;color:#5B21B6;border:1px solid #C4B5FD}
.s-delivered{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7}
.s-cancelled{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
.s-unpaid{background:#FFF7ED;color:#C2410C;border:1px solid #FDBA74}
.pay-paypal{background:#003087;color:#fff;padding:2px 9px;border-radius:3px;font-size:10px;font-weight:700}
.pay-transfer{background:#F0F2F4;color:#374151;border:1px solid var(--border);padding:2px 9px;border-radius:3px;font-size:10px;font-weight:700}

/* ORDER FILTER BAR */
.order-filter-bar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.ofbtn{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:4px;border:1px solid var(--border);background:var(--card);cursor:pointer;transition:all .15s;color:var(--text-light)}
.ofbtn.active,.ofbtn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
/* NOTIFICATION */
#notifPanel .notif-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:11px;align-items:flex-start;cursor:pointer;transition:background .15s}
#notifPanel .notif-item:hover{background:var(--bg)}
#notifPanel .notif-item.unread{background:#F0FDF9;border-left:3px solid var(--teal)}
#notifPanel .notif-item.unread:hover{background:#E0F7F3}
#notifPanel .notif-icon{font-size:22px;flex-shrink:0;width:32px;text-align:center}
#notifPanel .notif-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
#notifPanel .notif-sub{font-size:11px;color:var(--text-light);line-height:1.5}
#notifPanel .notif-time{font-size:10px;color:var(--text-light);white-space:nowrap;margin-top:2px}
#notifPanel .notif-empty{padding:28px;text-align:center;color:var(--text-light);font-size:13px}
/* Customer row highlight - new */
.cust-new-badge{background:#EDE9FE;color:#5B21B6;font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;margin-left:5px}

.new-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;border-radius:50%;width:17px;height:17px;font-size:10px;font-weight:900;margin-left:4px;vertical-align:middle}

/* MODAL */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:1999;opacity:0;pointer-events:none;transition:opacity .22s}
.modal-backdrop.open{opacity:1;pointer-events:all}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-52%) scale(.96);width:900px;max-width:95vw;max-height:92vh;background:var(--card);border-radius:8px;z-index:2000;box-shadow:0 24px 80px rgba(0,0,0,.25);display:flex;flex-direction:column;transition:transform .22s,opacity .22s;opacity:0;pointer-events:none}
.modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header h2{font-size:20px;font-weight:800;text-transform:uppercase}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-light);line-height:1}
.modal-close:hover{color:var(--text)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px;flex-shrink:0;background:#FAFAFA}

/* ORDER DETAIL */
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.od-box{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:13px}
.od-box h4{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-light);margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:6px}
.od-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12px}
.od-row span:first-child{color:var(--text-light)}
.od-row span:last-child{font-weight:600;text-align:right;max-width:60%}

/* NOTIFY SECTION */
.notify-header{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-light);margin-bottom:10px;padding-top:14px;border-top:1px solid var(--border)}
.notify-btn-group{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.notify-event-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:8px;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px}
.notify-event-label{font-size:12px;font-weight:600;color:var(--text)}
.notify-event-btns{display:flex;gap:5px}

/* EXCEL DROP */
.excel-drop{border:2px dashed var(--border);border-radius:8px;padding:34px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.import-cat-card{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--card-bg);transition:box-shadow .2s}
.import-cat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.10)}
.icat-header{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#fff}
.icat-icon{font-size:20px;flex-shrink:0}
.icat-title{font-size:13px;font-weight:800;line-height:1.1}
.icat-sub{font-size:11px;opacity:.75;margin-top:1px}
.icat-badge{margin-left:auto;background:rgba(255,255,255,.18);border-radius:12px;padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.icat-badge.has-data{background:rgba(255,255,255,.35)}
.icat-body{padding:12px}
.icat-drop{border:2px dashed rgba(0,0,0,.15);border-radius:7px;padding:18px 10px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--bg)}
.icat-drop:hover,.icat-drop.drag{border-color:var(--teal);background:var(--teal-bg)}
.icat-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.icat-drop-label{font-size:12px;color:var(--text-light);pointer-events:none}
.icat-drop.loaded .icat-drop-label{color:#16a34a;font-weight:700}
.excel-drop:hover,.excel-drop.drag{border-color:var(--teal);background:var(--teal-bg)}
.excel-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* PRODUCT FORM EXTRAS */
.prod-thumb{width:42px;height:42px;background:var(--bg);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:20px}
.variant-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:9px;align-items:center;background:var(--bg);border:1px solid var(--border);padding:7px 11px;border-radius:4px;margin-bottom:6px}
.spec-row{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:center;margin-bottom:6px}
.img-upload-area{border:2px dashed var(--border);border-radius:6px;padding:18px;text-align:center;cursor:pointer;position:relative;transition:all .2s}
.img-upload-area:hover{border-color:var(--teal);background:var(--teal-bg)}
.img-upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* TOAST */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--anthracite);border-left:4px solid var(--teal);color:#fff;padding:11px 20px;border-radius:5px;font-size:13px;font-weight:600;z-index:9999;transition:transform .3s;white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{border-left-color:var(--danger)}.toast.success{border-left-color:var(--success)}

/* QUICK STATUS SELECT */
.qs{font-family:'Barlow',sans-serif;font-size:11px;border:1px solid var(--border);border-radius:3px;padding:3px 6px;outline:none;background:var(--bg)}
.qs:focus{border-color:var(--teal)}

/* IMAGE LIBRARY */
.lib-item{background:var(--card);border:2px solid var(--border);border-radius:6px;overflow:hidden;cursor:pointer;transition:all .15s}
.lib-item:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 12px rgba(78,155,143,.2)}
.lib-item img{width:100%;height:110px;object-fit:cover;display:block}
.lib-item-name{font-size:11px;font-weight:600;padding:5px 8px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item-meta{font-size:10px;color:var(--text-light);padding:0 8px 6px}

/* PRICE COMPARE MODAL */
.pc-modal{width:1100px!important;max-width:96vw!important}

/* ── Produktkarten Config ── */
.cc-attr-block{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden}
.cc-attr-header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--bg);border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.cc-attr-header:hover{background:var(--teal-bg)}
.cc-attr-title{font-size:14px;font-weight:800;flex:1}
.cc-attr-count{font-size:11px;color:var(--text-light);background:var(--border);border-radius:10px;padding:2px 8px}
.cc-attr-body{padding:16px 18px}
.cc-value-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.cc-value-row:last-child{border-bottom:none}
.cc-value-label{min-width:140px;font-size:13px;font-weight:700}
.cc-value-label .cc-val-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:800}
.cc-img-slot{width:72px;height:56px;border:2px dashed var(--border);border-radius:6px;background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;overflow:hidden;position:relative}
.cc-img-slot:hover{border-color:var(--teal);background:var(--teal-bg)}
.cc-img-slot.has-img{border-style:solid;border-color:var(--teal)}
.cc-img-slot img{width:100%;height:100%;object-fit:contain;padding:4px}
.cc-img-slot .cc-slot-empty{font-size:20px;color:var(--border)}
.cc-img-slot .cc-slot-remove{position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;display:none;align-items:center;justify-content:center;cursor:pointer;line-height:1}
.cc-img-slot.has-img:hover .cc-slot-remove{display:flex}
.cc-img-slot-label{font-size:10px;color:var(--text-light);text-align:center;margin-top:4px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;max-height:360px;overflow-y:auto;padding:4px}
.cc-picker-item{border:2px solid var(--border);border-radius:6px;padding:6px;cursor:pointer;text-align:center;transition:all .15s;background:var(--card)}
.cc-picker-item:hover{border-color:var(--teal);background:var(--teal-bg)}
.cc-picker-item.selected{border-color:var(--teal);background:var(--teal-bg);box-shadow:0 0 0 2px var(--teal)}
.cc-picker-item img{width:100%;height:56px;object-fit:contain}
.cc-picker-item-name{font-size:9px;color:var(--text-light);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-sources{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.pc-cat-btn{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--card-bg);cursor:pointer;transition:all .15s;color:var(--text-light);white-space:nowrap}
.pc-cat-btn:hover{border-color:var(--teal);color:var(--teal)}
.pc-cat-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.pc-row-result td{background:#f0fdf4;border-top:none!important}
.pc-source-btn{border:2px solid var(--border);border-radius:7px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s;background:var(--bg)}
.pc-source-btn:hover{border-color:var(--teal);background:var(--teal-bg)}
.pc-source-btn.active{border-color:var(--teal);background:var(--teal-bg);box-shadow:0 0 0 2px rgba(78,155,143,.25)}
.pc-source-btn .pc-logo{font-size:22px;margin-bottom:4px}
.pc-source-btn .pc-name{font-size:11px;font-weight:700;color:var(--text)}
.pc-source-btn .pc-domain{font-size:9px;color:var(--text-light);margin-top:1px}
.pc-iframe-wrap{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;height:460px}
.pc-iframe-wrap iframe{width:100%;height:100%;border:none;display:block}
.pc-iframe-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);gap:14px;z-index:10}
.pc-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pc-blocked-msg{text-align:center;padding:30px}
.pc-blocked-msg .pc-blocked-icon{font-size:48px;margin-bottom:12px}
.pc-quick-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.pc-price-hint{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:6px;padding:10px 14px;font-size:12px;display:flex;align-items:center;gap:10px}
.pc-your-price{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600}

@media(max-width:900px){.admin-layout{grid-template-columns:1fr}.admin-sidebar{position:relative;height:auto}.od-grid{grid-template-columns:1fr}.stat-cards{grid-template-columns:1fr 1fr 1fr}.form-row,.form-row-3{grid-template-columns:1fr}}

/* Material-Checkbox Chips */
.mat-cb-label{display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px 12px 6px 8px;border-radius:8px;border:2px solid #e5e7eb;font-size:12px;font-weight:600;color:var(--text);background:var(--bg);transition:border-color .15s,box-shadow .15s;user-select:none}
.mat-cb-label:hover{border-color:#9ca3af}
.mat-cb-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;flex-shrink:0;accent-color:var(--teal)}
.mat-cb-label input[type=checkbox]:checked ~ *{opacity:1}
.mat-cb-label:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 2px rgba(69,123,129,.2)}
.mat-cb-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;color:#fff;font-size:11px;font-weight:900;flex-shrink:0}
/* ═══════════════════════════════════════
   BESTELLVERLAUF TIMELINE + RETOUREN
═══════════════════════════════════════ */
.od-timeline{margin:0 0 18px}
.od-tl-title{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.tl-list{position:relative;padding-left:28px}
.tl-list::before{content:'';position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:linear-gradient(to bottom,var(--teal) 0%,var(--border) 100%)}
.tl-item{position:relative;margin-bottom:14px}
.tl-dot{position:absolute;left:-22px;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid #fff}
.tl-dot.done{background:var(--teal);box-shadow:0 0 0 2px var(--teal-light)}
.tl-dot.active-dot{background:#fff;border-color:var(--teal);box-shadow:0 0 0 3px rgba(78,155,143,.3);animation:tlPulse 1.5s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 3px rgba(78,155,143,.25)}50%{box-shadow:0 0 0 6px rgba(78,155,143,.08)}}
.tl-dot.warn{background:#F59E0B;box-shadow:0 0 0 2px #FDE68A}
.tl-dot.err{background:#DC2626;box-shadow:0 0 0 2px #FCA5A5}
.tl-dot.info-dot{background:#9CA3AF;box-shadow:0 0 0 2px var(--border)}
.tl-body{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:9px 12px}
.tl-body.active-step{background:#F0FDF9;border-color:var(--teal-light)}

/* ── Neue Bestell-Timeline (11-Schritt-Workflow) ── */
.wf-timeline{display:flex;flex-direction:column;gap:0;padding:4px 0}
@keyframes lmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.lm-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px}
.lm-val{font-size:32px;font-weight:900;margin-bottom:2px}
.lm-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light)}
.lm-bar-wrap{background:var(--bg);border-radius:6px;overflow:hidden;height:10px;margin-top:8px}
.lm-bar{height:100%;border-radius:6px;transition:width .5s}
.wf-step{display:flex;gap:12px;position:relative}
.wf-step:not(:last-child)::before{content:'';position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--border);z-index:0}
.wf-step.wf-done::before{background:#86EFAC}
.wf-step.wf-active::before{background:linear-gradient(#86EFAC,var(--border))}
.wf-num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;position:relative;z-index:1;margin-top:10px;border:2px solid transparent}
.wf-num.wf-n-done{background:#16A34A;color:#fff;border-color:#15803D}
.wf-num.wf-n-active{background:#F59E0B;color:#fff;border-color:#D97706;animation:wfPulse 2s infinite}
.wf-num.wf-n-next{background:var(--bg);color:var(--text-light);border-color:var(--border)}
@keyframes wfPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.wf-body{flex:1;padding:10px 12px;border-radius:8px;border:1px solid transparent;margin-bottom:8px}
.wf-body.wf-b-done{background:#F0FDF4;border-color:#BBF7D0}
.wf-body.wf-b-active{background:#FFFBEB;border-color:#FDE68A}
.wf-body.wf-b-next{background:var(--bg);border-color:var(--border);opacity:.6}
.wf-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px}
.wf-badge-done{font-size:10px;background:#D1FAE5;color:#065F46;padding:1px 7px;border-radius:8px;font-weight:700}
.wf-badge-active{font-size:10px;background:#FEF3C7;color:#92400E;padding:1px 7px;border-radius:8px;font-weight:700;animation:wfPulse 2s infinite}
.wf-desc{font-size:11px;color:var(--text-light);margin-bottom:6px;line-height:1.5}
.wf-date{font-size:10px;color:var(--text-light);margin-bottom:4px}
.wf-subs{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wf-sub{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;border:1px solid;font-size:11px}
.wf-sub.sub-done{background:#F0FDF4;border-color:#BBF7D0;color:#15803D}
.wf-sub.sub-pending{background:rgba(0,0,0,0.02);border-color:var(--border);color:var(--text-light)}
.wf-sub-icon{font-size:13px;flex-shrink:0}
.wf-sub-label{flex:1}
.wf-action-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tl-body.warn-step{background:#FFF7ED;border-color:#FED7AA}
.tl-body.err-step{background:#FEF2F2;border-color:#FCA5A5}
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tl-event{font-size:13px;font-weight:700;color:var(--text)}
.tl-ts{font-size:11px;color:var(--text-light);white-space:nowrap}
.tl-note{font-size:12px;color:var(--text-light);margin-top:4px;line-height:1.5}
.tl-by{font-size:10px;color:var(--teal-dark);margin-top:3px;font-weight:600}
.tl-next{background:linear-gradient(135deg,var(--teal-bg),#fff);border:1.5px dashed var(--teal-light);border-radius:6px;padding:10px 14px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tl-next-text{font-size:12px;color:var(--teal-dark);font-weight:600;line-height:1.4}
.tl-add-form{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:14px;margin-top:10px}
/* Retouren */
.ret-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:18px}
.ret-tab{flex:1;padding:11px;text-align:center;cursor:pointer;font-size:13px;font-weight:700;color:var(--text-light);border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none}
.ret-tab.active{color:var(--teal-dark);border-bottom-color:var(--teal)}
.ret-section{display:none}.ret-section.active{display:block}
.ret-type-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.ret-type-card{border:2px solid var(--border);border-radius:8px;padding:13px 10px;text-align:center;cursor:pointer;transition:all .2s}
.ret-type-card:hover{border-color:var(--teal-light)}
.ret-type-card.sel{border-color:var(--teal);background:var(--teal-bg)}
.ret-type-icon{font-size:26px;display:block;margin-bottom:4px}
.ret-type-label{font-size:12px;font-weight:800;color:var(--text)}
.ret-type-sub{font-size:10px;color:var(--text-light);margin-top:2px}
.comp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.comp-card{border:2px solid var(--border);border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}
.comp-card:hover{border-color:var(--teal-light)}
.comp-card.sel{border-color:var(--teal);background:var(--teal-bg)}
.comp-icon{font-size:22px;margin-bottom:4px}
.comp-label{font-size:12px;font-weight:800}
.comp-sub{font-size:10px;color:var(--text-light);margin-top:2px}
.ret-list-item{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:14px 16px;margin-bottom:10px}
.ret-list-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:10px;flex-wrap:wrap}
.ret-badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:10px;white-space:nowrap}
.ret-open{background:#FEF3C7;color:#92400E}
.ret-progress{background:#DBEAFE;color:#1E40AF}
.ret-done{background:#D1FAE5;color:#065F46}
.ret-rejected{background:#FEE2E2;color:#991B1B}
/* Bestell-Modal Tabs */
.om-tabs{display:flex;border-bottom:2px solid var(--border);margin:-4px -4px 18px}
.om-tab{padding:10px 18px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text-light);border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap}
.om-tab.active{color:var(--teal-dark);border-bottom-color:var(--teal)}
.om-section{display:none}.om-section.active{display:block}


/* ═══ CHECKOUT ════════════════════════════════════════════════════ */
.co-wrap { max-width: 1060px; margin: 0 auto; padding: 28px 16px 60px; display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
@media (max-width: 760px) { .co-wrap { grid-template-columns: 1fr; } }

/* ── STEPS ── */
.co-steps { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.co-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-light); }
.co-step.active { color: var(--teal-dark); }
.co-step.done   { color: var(--success); }
.co-step-num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex-shrink: 0; }
.co-step.active .co-step-num { background: var(--teal); border-color: var(--teal); color: #fff; }
.co-step.done .co-step-num   { background: var(--success); border-color: var(--success); color: #fff; }
.co-step-sep { flex: 1; height: 2px; background: var(--border); margin: 0 8px; min-width: 24px; }
.co-step.done ~ .co-step-sep { background: var(--success); }

/* ── CARD ── */
.co-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; margin-bottom: 16px; }
.co-card-title { font-size: 15px; font-weight: 800; margin-bottom: 18px; color: var(--teal-dark); display: flex; align-items: center; gap: 8px; }

/* ── FORM ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row.full { grid-template-columns: 1fr; }
.form-row.trio { grid-template-columns: 1fr 1fr 2fr; }
@media (max-width: 500px) { .form-row, .form-row.trio { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; }
.form-group input, .form-group select {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 9px 13px;
  font-size: 14px;
  font-family: 'Cairo', sans-serif;
  background: #fafafa;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(69,123,129,.12);
  background: #fff;
}
.form-group input.error { border-color: var(--danger); }
.form-err { font-size: 11px; color: var(--danger); margin-top: 2px; display: none; }

/* ── ZAHLUNGSARTEN ── */
.pay-options { display: flex; flex-direction: column; gap: 10px; }
.pay-option {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pay-option:hover { border-color: var(--teal-light); background: #f9fefe; }
.pay-option.selected { border-color: var(--teal); background: #f0f8f8; }
.pay-option input[type=radio] { display: none; }
.pay-icon { font-size: 28px; flex-shrink: 0; }
.pay-info { flex: 1; }
.pay-name { font-size: 14px; font-weight: 800; }
.pay-desc { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.pay-detail { margin-top: 12px; background: #f0f8f8; border-radius: 7px; padding: 12px 14px; font-size: 13px; display: none; border: 1px solid #c8e6e8; }
.pay-option.selected .pay-detail { display: block; }
.pay-detail strong { color: var(--teal-dark); }

/* ── LIEFERADRESSE TOGGLE ── */
.toggle-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; }
.toggle-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.toggle-row label { font-size: 13px; font-weight: 600; cursor: pointer; }
#liefAddrBlock { display: none; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }

/* ── BUTTONS ── */
.btn { border: none; border-radius: 8px; font-family: 'Cairo', sans-serif; font-weight: 800; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary { background: var(--teal); color: #fff; padding: 13px 28px; font-size: 15px; width: 100%; }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(69,123,129,.3); }
.btn-primary:disabled { background: #9ca3af; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline { background: none; border: 2px solid var(--border); color: var(--text-light); padding: 10px 20px; font-size: 13px; }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-back { background: none; border: none; color: var(--text-light); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; font-family: 'Cairo', sans-serif; }
.btn-back:hover { color: var(--text); }

/* ── ZUSAMMENFASSUNG SIDEBAR ── */
.co-summary { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: 180px; }
.co-sum-title { font-size: 14px; font-weight: 800; color: var(--teal-dark); margin-bottom: 14px; }
.co-sum-items { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 14px; }
.co-sum-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.co-sum-item-icon { font-size: 20px; flex-shrink: 0; }
.co-sum-item-info { flex: 1; min-width: 0; }
.co-sum-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-sum-item-sub  { font-size: 11px; color: var(--text-light); }
.co-sum-item-price { font-weight: 800; flex-shrink: 0; }
.co-sum-line { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); }
.co-sum-total { font-weight: 900; font-size: 16px; color: var(--teal-dark); }
.co-sum-vat { font-size: 11px; color: var(--text-light); text-align: center; margin-top: 6px; }

/* ── BESTÄTIGUNG ── */
#stepConfirm { display: none; }
.confirm-box { text-align: center; padding: 32px 20px; }
.confirm-icon { font-size: 64px; margin-bottom: 16px; }
.confirm-nr { display: inline-block; background: #f0f8f8; border: 2px solid var(--teal-light); border-radius: 8px; padding: 10px 24px; font-size: 18px; font-weight: 900; color: var(--teal-dark); margin: 12px 0 20px; letter-spacing: .08em; }
.confirm-detail { background: var(--bg); border-radius: 8px; padding: 16px; text-align: left; font-size: 13px; line-height: 1.8; }

/* ── SPINNER ── */
.spinner { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ERROR TOAST ── */
.co-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1f2937; color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 700; z-index: 9999; transition: transform .3s; white-space: nowrap; }
.co-toast.show { transform: translateX(-50%) translateY(0); }
.co-toast.error { background: var(--danger); }
.co-toast.success { background: var(--success); }

/* leeres Warenkorb-Overlay */
#emptyCart { display:none; text-align:center; padding:60px 20px; }


/* ═══ LOGIN ═══════════════════════════════════════════════════════ */
.login-wrap {
    width: 100%;
    max-width: 400px;
  }

  .login-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.12);
    overflow: hidden;
  }

  .login-header {
    background: linear-gradient(135deg, #454444, #2a2d32);
    padding: 32px 36px 28px;
    text-align: center;
  }

  .login-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }

  .login-brand {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .login-brand span { color: #60ADA8; }

  .login-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .login-body {
    padding: 32px 36px 36px;
  }

  .login-error {
    display: none;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #991B1B;
    margin-bottom: 20px;
  }

  .field { margin-bottom: 18px; }

  .field label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
  }

  .field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background: #fafafa;
    outline: none;
    transition: border-color .2s, background .2s;
  }

  .field input:focus {
    border-color: #457B81;
    background: #fff;
  }

  .login-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #457B81, #3a6b70);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .03em;
    margin-top: 4px;
    transition: filter .2s, transform .2s;
  }

  .login-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .login-btn:active { transform: translateY(0); }

  .login-back {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
  }
  .login-back:hover { color: #457B81; }


/* ═══ SERVICE ═════════════════════════════════════════════════════ */
.service-hero {
  background: linear-gradient(135deg, var(--anthracite) 0%, #2d4a4d 60%, var(--teal-dark) 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.service-hero::before {
  content:'';
  position:absolute;inset:0;
  background: radial-gradient(ellipse at 70% 50%, rgba(69,123,129,.35) 0%, transparent 60%);
  pointer-events:none;
}
.service-hero-inner {
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.service-hero-label {
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-light);margin-bottom:14px;
}
.service-hero h1 {
  font-family:'Raleway',sans-serif;
  font-size:clamp(36px,4.5vw,58px);font-weight:900;
  text-transform:uppercase;color:#fff;line-height:1.0;margin-bottom:18px;
}
.service-hero h1 em {
  font-style:normal;color:var(--teal-light);
}
.service-hero p {
  font-size:15px;color:rgba(255,255,255,.75);line-height:1.75;max-width:440px;margin-bottom:32px;
}
.service-hero-list {
  list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:36px;
}
.service-hero-list li {
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;color:rgba(255,255,255,.85);line-height:1.5;
}
.service-hero-list li::before {
  content:'✓';color:var(--teal-light);font-weight:800;font-size:15px;flex-shrink:0;margin-top:1px;
}
.service-hero-cta {
  display:inline-flex;align-items:center;gap:10px;
  background:var(--teal);color:#fff;
  padding:14px 28px;border-radius:4px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;transition:.2s;
}
.service-hero-cta:hover{background:var(--teal-dark);transform:translateY(-1px)}

/* Hero rechte Seite – Bild-Platzhalter */
.service-hero-img {
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.service-hero-img img {
  width:100%;height:100%;object-fit:cover;border-radius:12px;
}
.service-hero-img .img-placeholder {
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:rgba(255,255,255,.3);font-size:13px;
}
.service-hero-img .img-placeholder span { font-size:48px; }

/* ── NACHSCHLEIFSERVICE ─────────────────────────────────────────── */
.grinding-section {
  background: linear-gradient(180deg, #1e2f31 0%, #162224 100%);
  padding: 80px 0;
}
.grinding-inner {
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
.grinding-badge {
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(69,123,129,.2);border:1px solid rgba(69,123,129,.4);
  color:var(--teal-light);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 14px;border-radius:50px;margin-bottom:20px;
}
.grinding-title {
  font-family:'Raleway',sans-serif;
  font-size:clamp(40px,5vw,64px);font-weight:900;
  text-transform:uppercase;color:#fff;line-height:.95;margin-bottom:18px;
}
.grinding-title em{font-style:normal;color:var(--teal-light);}
.grinding-subtitle {
  font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:24px;max-width:440px;
}
.grinding-region {
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;
}
.grinding-region-label {
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.grinding-region-pill {
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:50px;
}
.grinding-region-pill.highlight {
  background:rgba(69,123,129,.2);border-color:rgba(69,123,129,.5);color:var(--teal-light);
}
.grinding-info-box {
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);
  border-radius:8px;padding:14px 18px;margin-bottom:24px;
  font-size:13px;color:rgba(255,255,255,.7);line-height:1.7;max-width:480px;
}
.grinding-ctas {
  display:flex;flex-wrap:wrap;gap:10px;
}
.cta-mail {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--teal);color:#fff;padding:12px 22px;border-radius:4px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:.2s;
}
.cta-mail:hover{background:var(--teal-dark)}
.cta-sms {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);padding:12px 20px;border-radius:4px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transition:.2s;
}
.cta-sms:hover{background:rgba(255,255,255,.14)}

/* Was wir nachschleifen Card */
.grinding-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:28px;
}
.grinding-card-head {
  display:flex;align-items:center;gap:14px;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:20px;
}
.grinding-card-head-icon {
  width:44px;height:44px;background:rgba(69,123,129,.2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.grinding-card-head-title {
  font-size:15px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.05em;
}
.grinding-card-head-sub {
  font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;
}
.grinding-items{display:flex;flex-direction:column;gap:14px;}
.grinding-item {
  display:flex;align-items:flex-start;gap:14px;padding:12px;
  background:rgba(255,255,255,.03);border-radius:8px;
  border:1px solid rgba(255,255,255,.05);transition:.2s;
}
.grinding-item:hover{background:rgba(69,123,129,.1);border-color:rgba(69,123,129,.25)}
.grinding-item-icon {
  width:36px;height:36px;background:rgba(255,255,255,.06);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.grinding-item-text strong{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:3px;}
.grinding-item-text span{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5;}

/* ── NETZWERK ──────────────────────────────────────────────────── */
.network-section {
  background: linear-gradient(180deg, #111a1c 0%, #0f1a1b 100%);
  padding: 80px 0;
}
.network-inner{max-width:1200px;margin:0 auto;padding:0 40px;}
.network-header{text-align:center;margin-bottom:56px;}
.network-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(69,123,129,.15);border:1px solid rgba(69,123,129,.35);
  color:var(--teal-light);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:18px;
}
.network-title {
  font-family:'Raleway',sans-serif;
  font-size:clamp(32px,4vw,52px);font-weight:900;text-transform:uppercase;
  color:#fff;line-height:1.05;margin-bottom:16px;
}
.network-title em{font-style:normal;color:var(--teal-light);}
.network-sub {
  font-size:15px;color:rgba(255,255,255,.55);max-width:580px;margin:0 auto;line-height:1.75;
}
.network-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px;
}
.network-card {
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:28px;
  transition:.25s;cursor:default;
}
.network-card:hover{background:rgba(69,123,129,.1);border-color:rgba(69,123,129,.3);transform:translateY(-3px);}
.network-card-icon{font-size:32px;margin-bottom:14px;}
.network-card-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#fff;margin-bottom:10px;}
.network-card-text{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65;}
.network-cta-box {
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:28px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.network-cta-text{flex:1;}
.network-cta-text strong{display:block;font-size:15px;font-weight:800;color:#fff;margin-bottom:6px;}
.network-cta-text span{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;}
.network-cta-btns{display:flex;gap:10px;flex-wrap:wrap;}

/* ── PARTNER ────────────────────────────────────────────────────── */
.partner-section {
  background: linear-gradient(160deg, #1a2a2c 0%, #111d1e 100%);
  padding: 80px 0;
  border-top:1px solid rgba(255,255,255,.05);
}
.partner-inner {
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.partner-label {
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-light);margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.partner-label::before{content:'——';color:rgba(255,255,255,.25);letter-spacing:.1em;}
.partner-section h2 {
  font-family:'Raleway',sans-serif;
  font-size:clamp(32px,4vw,52px);font-weight:900;text-transform:uppercase;
  color:#fff;line-height:1.0;margin-bottom:18px;
}
.partner-section h2 em{font-style:normal;color:var(--teal-light);}
.partner-section p {
  font-size:14px;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:28px;
}
.partner-features {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:32px;
}
.partner-feat {
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,.75);font-weight:600;
}
.partner-feat-icon{font-size:16px;width:28px;text-align:center;}
.partner-cta {
  display:inline-flex;align-items:center;gap:10px;
  background:var(--teal);color:#fff;
  padding:14px 28px;border-radius:4px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;transition:.2s;
}
.partner-cta:hover{background:var(--teal-dark)}
.partner-cta-arrow{font-size:16px;transition:.2s;}
.partner-cta:hover .partner-cta-arrow{transform:translateX(4px);}

/* Partner Card Mock */
.partner-card-mock {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:24px;
}
.partner-card-header {
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:16px;
}
.partner-logo-box {
  width:44px;height:44px;background:rgba(69,123,129,.2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.partner-card-title{font-size:15px;font-weight:800;color:#fff;}
.partner-card-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:3px;}
.partner-product-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.partner-prod-item {
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:rgba(255,255,255,.03);border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
}
.partner-prod-icon{font-size:17px;width:28px;text-align:center;}
.partner-prod-name{flex:1;font-size:13px;font-weight:600;color:rgba(255,255,255,.8);}
.partner-prod-tag {
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:50px;
  background:rgba(69,123,129,.25);color:var(--teal-light);
}
.partner-badge-strip{display:flex;gap:8px;flex-wrap:wrap;}
.partner-badge {
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:50px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
}

/* ── SECTION DIVIDER ────────────────────────────────────────────── */
.section-divider {
  height:1px;background:linear-gradient(90deg,transparent,rgba(69,123,129,.4),transparent);
  margin:0;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:900px) {
  .service-hero-inner,
  .grinding-inner,
  .partner-inner { grid-template-columns:1fr; gap:40px; }
  .service-hero-img { aspect-ratio:16/7; }
  .network-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .service-hero,.grinding-section,.network-section,.partner-section { padding:50px 0; }
  .service-hero-inner,.grinding-inner,.network-inner,.partner-inner { padding:0 20px; }
  .network-grid { grid-template-columns:1fr; }
  .partner-features { grid-template-columns:1fr; }
  .network-cta-box { flex-direction:column; }
}


/* ═══ STATUS ══════════════════════════════════════════════════════ */
.wrap {
  max-width: 560px;
  margin: 0 auto;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-box {
  width: 36px;
  height: 36px;
  background: var(--teal);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-box svg { display: block; }
.site-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--anthracite);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-sub {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}

/* Overall status badge */
.overall {
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  transition: all .3s;
}
.overall.ok    { background: var(--green-bg); border-color: #b5d9b5; }
.overall.fail  { background: var(--red-bg);   border-color: #f0bbbb; }
.overall.check { background: var(--amber-bg); border-color: #f5d9a0; }

.overall-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overall.ok   .overall-icon { background: var(--green); }
.overall.fail .overall-icon { background: var(--red); }
.overall.check .overall-icon { background: var(--amber); animation: blink 1s infinite; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.overall-text { flex: 1; }
.overall-title {
  font-size: 14px;
  font-weight: 600;
}
.overall.ok   .overall-title { color: var(--green); }
.overall.fail .overall-title { color: var(--red); }
.overall.check .overall-title { color: var(--amber); }
.overall-sub {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 2px;
}

/* Check cards */
.checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.check {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s;
}
.check.ok   { border-left: 3px solid var(--green); }
.check.fail { border-left: 3px solid var(--red); }
.check.checking { border-left: 3px solid var(--amber); }

.check-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
  transition: background .3s;
}
.check.ok      .check-dot { background: var(--green); }
.check.fail    .check-dot { background: var(--red); }
.check.checking .check-dot { background: var(--amber); animation: blink 1s infinite; }

.check-body { flex: 1; min-width: 0; }
.check-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.check-url {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.check-detail {
  font-size: 12px;
  margin-top: 4px;
  font-family: var(--mono);
}
.check.ok   .check-detail { color: var(--green); }
.check.fail .check-detail { color: var(--red); }
.check.checking .check-detail { color: var(--amber); }

.check-ms {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--muted);
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
}

/* Stats row */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.stat-val {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--text);
}
.stat-val.green { color: var(--green); }
.stat-val.red   { color: var(--red); }
.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Button */
.btn {
  width: 100%;
  padding: 12px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, transform .1s;
}
.btn:hover   { background: var(--teal-dark); }
.btn:active  { transform: scale(.98); }
.btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; }

.footer {
  text-align: center;
  margin-top: 14px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--muted);
}


/* ═══ KREISSAEGE ASSISTENT ════════════════════════════════════════ */
.asst-wrap{max-width:880px;margin:0 auto;padding:28px 20px 60px}
.progress-bar{background:#e5e7eb;border-radius:99px;height:5px;margin-bottom:20px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),#3da89a);border-radius:99px;transition:width .45s ease}
.sbar{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 14px;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:38px}
.schip{background:var(--teal-bg);border:1px solid var(--teal-pale);color:var(--teal-dark);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.schip:hover{background:var(--teal-pale)}
.wstep{display:none}
.wstep.on{display:block;animation:fi .28s ease}
@keyframes fi{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sbadge{display:inline-flex;align-items:center;background:var(--teal-bg);border:1px solid var(--teal-pale);color:var(--teal-dark);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 12px;border-radius:20px;margin-bottom:7px}
.sq{font-size:clamp(16px,2.4vw,22px);font-weight:900;font-family:'Raleway',sans-serif;color:var(--text);text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px}
.sh{font-size:13px;color:var(--text-light);margin-bottom:15px}
.cgrid{display:grid;gap:9px}
.cgrid.c2{grid-template-columns:repeat(2,1fr)}
.cgrid.c3{grid-template-columns:repeat(3,1fr)}
.cgrid.ca{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}
.cc{background:#fff;border:2px solid var(--border);border-radius:8px;padding:11px 13px;cursor:pointer;transition:.14s;display:flex;align-items:center;gap:10px}
.cc:hover{border-color:var(--teal);background:var(--teal-bg)}
.cc.on{border-color:var(--teal);background:var(--teal-bg)}
.ccico{width:40px;height:40px;border-radius:7px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.ccico img{width:34px;height:34px;object-fit:contain}
.cc.on .ccico{background:var(--teal)}
.cct{font-size:13px;font-weight:800;color:var(--text);line-height:1.3}
.ccs{font-size:11px;color:var(--text-light);margin-top:1px}
.pgrid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.pb{background:#fff;border:2px solid var(--border);border-radius:6px;padding:7px 12px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:var(--text);transition:.14s;white-space:nowrap}
.pb:hover{border-color:var(--teal);background:var(--teal-bg)}
.pb.on{border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dark)}
.ainput{padding:9px 13px;border:2px solid var(--border);border-radius:7px;font-size:14px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;transition:.14s;max-width:180px}
.ainput:focus{outline:none;border-color:var(--teal)}
.navr{display:flex;gap:9px;margin-top:18px;align-items:center;flex-wrap:wrap}
.btnb{background:none;border:2px solid var(--border);color:var(--text-light);padding:8px 17px;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif}
.btnb:hover{border-color:var(--text-light)}
.btnn{background:var(--teal);color:#fff;border:none;padding:9px 21px;border-radius:7px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.btnn:hover{background:var(--teal-dark)}
.btnn:disabled{background:#d1d5db;cursor:not-allowed}
.bskip{background:none;border:none;color:var(--text-light);font-size:12px;cursor:pointer;font-family:'Cairo',sans-serif;text-decoration:underline}
/* Zahnform info box */
.zfinfo{background:#fffbeb;border:1px solid #fcd34d;border-radius:7px;padding:10px 13px;font-size:12px;color:#92400e;margin-bottom:12px;display:none}
.zfinfo.on{display:block}
/* Result cards */
.rcard{background:#fff;border:2px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;position:relative;overflow:hidden;transition:.14s}
.rcard.best{border-color:var(--teal);box-shadow:0 3px 16px rgba(69,123,129,.13)}
.rcard.best::before{content:'EMPFOHLEN';position:absolute;top:10px;right:-24px;background:var(--teal);color:#fff;font-size:9px;font-weight:900;padding:3px 30px;transform:rotate(45deg);letter-spacing:.08em}
.rname{font-size:14px;font-weight:900;font-family:'Raleway',sans-serif;color:var(--teal-dark);text-transform:uppercase}
.rsub{font-size:12px;color:var(--text-light);margin-top:1px}
.rtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.rtag{background:#f8fafc;border:1px solid var(--border);padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;color:var(--text)}
.rtag span{color:var(--text-light);font-weight:400}
.rtag.hit{border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dark)}
.rfoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);flex-wrap:wrap;gap:7px}
.rprice{font-size:19px;font-weight:900;color:var(--teal);font-family:'Raleway',sans-serif}
.btngo{background:var(--teal);color:#fff;border:none;padding:9px 17px;border-radius:7px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.btngo:hover{background:var(--teal-dark)}
/* Zahnteilungs-Vorschlag */
.ztbox{background:var(--teal-bg);border:1px solid var(--teal-pale);border-radius:8px;padding:11px 14px;margin-bottom:12px;font-size:13px;color:var(--teal-dark)}
.ztbox strong{font-weight:800}
@media(max-width:580px){
  .cgrid.c2,.cgrid.c3,.cgrid.ca{grid-template-columns:1fr}
  .asst-wrap{padding:14px 10px 40px}
}


/* ═══ SAEGEBAND ASSISTENT ═════════════════════════════════════════ */
/* ── Assistent-spezifisch ── */
.asst-wrap{max-width:860px;margin:0 auto;padding:32px 20px 60px}

.progress-bar{background:#e5e7eb;border-radius:99px;height:5px;margin-bottom:28px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-light));border-radius:99px;transition:width .5s ease}

/* Zusammenfassung */
.summary-bar{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 16px;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.summary-chip{background:var(--teal-bg);border:1px solid var(--teal-pale);color:var(--teal-dark);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px}
.summary-chip:hover{background:var(--teal-pale)}

/* Schritte */
.wizard-step{display:none;animation:fadeIn .3s ease}
.wizard-step.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.step-badge{display:inline-flex;align-items:center;gap:6px;background:var(--teal-bg);border:1px solid var(--teal-pale);color:var(--teal-dark);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 12px;border-radius:20px;margin-bottom:10px}
.step-question{font-size:clamp(17px,2.5vw,22px);font-weight:900;font-family:'Raleway',sans-serif;color:var(--text);line-height:1.3;text-transform:uppercase;letter-spacing:.02em}
.step-hint{font-size:13px;color:var(--text-light);margin-top:6px}

/* Auswahl-Karten */
.choice-grid{display:grid;gap:12px;margin-top:16px}
.choice-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.choice-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.choice-grid.cols-auto{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

.choice-card{background:#fff;border:2px solid var(--border);border-radius:8px;padding:14px 16px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:12px;text-align:left}
.choice-card:hover{border-color:var(--teal);background:var(--teal-bg)}
.choice-card.selected{border-color:var(--teal);background:var(--teal-bg)}
.cc-icon{width:40px;height:40px;border-radius:8px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:.2s}
.choice-card.selected .cc-icon{background:var(--teal);color:#fff}
.cc-title{font-size:14px;font-weight:800;color:var(--text)}
.cc-sub{font-size:11px;color:var(--text-light);margin-top:2px}

/* Inputs */
.asst-input{width:100%;max-width:420px;padding:11px 14px;border:2px solid var(--border);border-radius:8px;font-size:14px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff;transition:.2s}
.asst-input:focus{outline:none;border-color:var(--teal)}
.asst-select{width:100%;max-width:540px;padding:11px 40px 11px 14px;border:2px solid var(--border);border-radius:8px;font-size:13px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;cursor:pointer;transition:.2s}
.asst-select:focus{outline:none;border-color:var(--teal)}

/* Maschinen-Suche */
.machine-search-wrap{position:relative;max-width:540px;margin-bottom:10px}
.machine-search-wrap input{width:100%;padding:10px 14px 10px 38px;border:2px solid var(--border);border-radius:8px;font-size:13px;font-family:'Cairo',sans-serif;color:var(--text);background:#fff}
.machine-search-wrap input:focus{outline:none;border-color:var(--teal)}
.machine-search-wrap::before{content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px}

/* Nav-Buttons */
.nav-btns{display:flex;gap:10px;margin-top:24px;align-items:center;flex-wrap:wrap}
.btn-asst-back{background:none;border:2px solid var(--border);color:var(--text-light);padding:9px 20px;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;transition:.2s}
.btn-asst-back:hover{border-color:var(--text-light)}
.btn-asst-next{background:var(--teal);color:#fff;border:none;padding:10px 26px;border-radius:7px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;text-transform:uppercase;letter-spacing:.05em;transition:.2s;display:flex;align-items:center;gap:8px}
.btn-asst-next:hover{background:var(--teal-dark)}
.btn-asst-next:disabled{background:#d1d5db;cursor:not-allowed}

/* Maschinen-Info */
.machine-info{margin-top:10px;padding:10px 14px;background:var(--teal-bg);border:1px solid var(--teal-pale);border-radius:7px;font-size:13px;color:var(--teal-dark);font-weight:700;display:none}

/* Schnittdaten */
.cut-data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.cut-data-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center}
.cut-data-val{font-size:20px;font-weight:900;color:var(--teal);font-family:'Raleway',sans-serif;line-height:1}
.cut-data-unit{font-size:11px;color:var(--text-light);margin-top:2px}
.cut-data-label{font-size:11px;font-weight:700;color:var(--text);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* Tipp-Box */
.tip-box{background:var(--teal-bg);border:1px solid var(--teal-pale);border-radius:8px;padding:14px 18px;margin-bottom:20px}
.tip-box-title{font-size:11px;font-weight:800;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.tip-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.tip-list li{font-size:13px;color:var(--text);display:flex;align-items:flex-start;gap:8px}
.tip-list li::before{content:'→';color:var(--teal);font-weight:900;flex-shrink:0}

/* Ergebnis */
.result-card{background:#fff;border:2px solid var(--border);border-radius:10px;padding:20px;margin-bottom:14px;transition:.2s;position:relative;overflow:hidden}
.result-card.best{border-color:var(--teal);box-shadow:0 4px 20px rgba(69,123,129,.15)}
.result-card.best::before{content:'EMPFOHLEN';position:absolute;top:12px;right:-24px;background:var(--teal);color:#fff;font-size:9px;font-weight:900;padding:4px 32px;transform:rotate(45deg);letter-spacing:.08em}
.result-name{font-size:15px;font-weight:900;font-family:'Raleway',sans-serif;color:var(--teal-dark);text-transform:uppercase}
.result-sub{font-size:12px;color:var(--text-light);margin-top:2px}
.result-props{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.result-prop{background:#f8fafc;border:1px solid var(--border);padding:4px 10px;border-radius:5px;font-size:12px;font-weight:700;color:var(--text)}
.result-prop span{color:var(--text-light);font-weight:400}
.result-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px}
.result-price{font-size:20px;font-weight:900;color:var(--teal);font-family:'Raleway',sans-serif}
.btn-result{background:var(--teal);color:#fff;border:none;padding:10px 20px;border-radius:7px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;text-transform:uppercase;letter-spacing:.04em;transition:.2s}
.btn-result:hover{background:var(--teal-dark)}

.result-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.result-count{background:var(--teal);color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:20px}

@media(max-width:600px){
  .choice-grid.cols-2,.choice-grid.cols-3{grid-template-columns:1fr}
  .asst-wrap{padding:20px 14px 40px}
}


/* ═══ SCHNITTDATENRECHNER ═════════════════════════════════════════ */
#login-wall{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal-dark) 0%,var(--teal) 60%,var(--teal-light) 100%)}
.lw-card{background:#fff;border-radius:16px;padding:48px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.25)}
.lw-icon{font-size:52px;margin-bottom:16px}
.lw-title{font-family:'Raleway',sans-serif;font-size:22px;font-weight:900;color:var(--teal-dark);margin-bottom:8px}
.lw-sub{font-size:14px;color:var(--text-light);margin-bottom:28px;line-height:1.7}
.lw-features{text-align:left;background:var(--teal-pale);border-radius:8px;padding:14px 18px;margin-bottom:24px}
.lw-feature{font-size:12px;color:var(--teal-dark);padding:3px 0;display:flex;align-items:center;gap:8px}
.lw-btn{display:inline-block;background:var(--teal);color:#fff;border-radius:8px;padding:14px 32px;font-size:15px;font-weight:700;text-decoration:none;font-family:'Cairo',sans-serif;transition:.2s;width:100%;text-align:center}
.lw-btn:hover{background:var(--teal-dark)}
.lw-reg{margin-top:14px;font-size:13px;color:var(--text-light)}
.lw-reg a{color:var(--teal);font-weight:700;text-decoration:none}
#main-content{display:none}
.page-header{background:var(--anthracite);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.back-btn{color:#9ca3af;font-size:13px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:6px;transition:.2s}
.back-btn:hover{color:#fff}
.page-title{font-family:'Raleway',sans-serif;font-size:20px;font-weight:900;color:#fff}
.page-eyebrow{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-light);font-weight:700}
.user-badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 14px;font-size:12px;color:#fff;font-weight:600}
.calc-container{max-width:1100px;margin:0 auto;padding:28px 20px}
.calc-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:28px;overflow-x:auto}
.calc-tab{padding:12px 22px;font-size:12px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;border:none;background:none;color:var(--text-light);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:.2s;text-transform:uppercase;letter-spacing:.05em}
.calc-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.calc-tab:hover{color:var(--teal)}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:28px}
.calc-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.cch{background:var(--teal);color:#fff;padding:14px 20px;display:flex;align-items:center;gap:10px}
.cch-icon{font-size:18px}
.cch-title{font-family:'Raleway',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.cch-sub{font-size:11px;opacity:.8;margin-top:2px}
.ccb{padding:20px}
.fl{margin-bottom:16px}
.fl label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-light);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.fl label .tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--teal);background:var(--teal-pale);padding:1px 6px;border-radius:3px}
.fi{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:7px;font-size:15px;font-family:'Cairo',sans-serif;color:var(--text);transition:border-color .15s;background:#fff}
.fi:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(69,123,129,.15)}
.fi.res{background:var(--teal-pale);border-color:var(--teal-light);font-weight:700;color:var(--teal-dark);font-family:'JetBrains Mono',monospace;font-size:16px}
.fu{font-size:11px;color:var(--text-light);margin-top:4px;text-align:right}
.formula-box{background:#1e2d3d;border-radius:8px;padding:14px 18px;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#a8d8dc;line-height:2}
.formula-box .v{color:#7dd3fc}.formula-box .e{color:#fbbf24}.formula-box .o{color:#f472b6}
.ref-table{width:100%;border-collapse:collapse;font-size:12px}
.ref-table th{background:var(--anthracite);color:#fff;padding:8px 12px;text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.ref-table td{padding:8px 12px;border-bottom:1px solid #f0f0f0}
.ref-table tr:nth-child(even) td{background:#fafafa}
.ref-table tr:hover td{background:var(--teal-pale)}
.chip{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700}
.cg{background:var(--green-bg);color:var(--green)}.ca{background:var(--amber-bg);color:var(--amber)}.cb{background:#dbeafe;color:#1e40af}
@media(max-width:640px){.calc-grid{grid-template-columns:1fr}.calc-container{padding:16px 12px}}

/* ═══ INDEX BODY STYLES ════════════════════════════════════ */
#wdSplash {
  position: fixed;
  inset: 0;
  background: #3d3d3d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity .9s ease, visibility .9s ease;
}
#wdSplash.fade-out {
  opacity: 0;
  visibility: hidden;
}
#wdSplashInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  position: relative;
}

/* Glow hinter dem Logo */
#wdSplashGlow {
  position: absolute;
  width: 420px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(69,123,129,.35) 0%, transparent 68%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0%   { opacity: .35; transform: translate(-50%,-58%) scale(.88); }
  50%  { opacity: .85; transform: translate(-50%,-58%) scale(1.12); }
  100% { opacity: .35; transform: translate(-50%,-58%) scale(.88); }
}

/* Logo Bild */
#wdSplashImg {
  width: 300px;
  max-width: 76vw;
  height: auto;
  animation: logoPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 24px rgba(69,123,129,.45));
}
@keyframes logoPulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 4px 24px rgba(69,123,129,.3)); }
  50%  { transform: scale(1.03); filter: drop-shadow(0 8px 40px rgba(69,123,129,.75)); }
  100% { transform: scale(1);    filter: drop-shadow(0 4px 24px rgba(69,123,129,.3)); }
}

/* Ladebalken */
#wdSplashBar {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
#wdSplashBarFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #457B81, #60ADA8);
  border-radius: 2px;
  animation: barFill 2.2s ease forwards;
}
@keyframes barFill {
  0%   { width: 0%; }
  60%  { width: 70%; }
  100% { width: 100%; }
}

/* ══ MONATSANGEBOTE — Neues Design ══ */
.offers-section {
  background: #ffffff !important;
  padding: 40px 24px !important;
  position: relative !important;
  overflow: visible !important;
  border-top: none !important;
}
.offers-section::before { display: none !important; }

.offers-inner { max-width: 1100px; margin: 0 auto; position: relative; }

.offers-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.offers-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #DC2626 !important;
  border: none !important;
  color: #fff !important;
  padding: 5px 14px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  font-family: 'Cairo', sans-serif !important;
}

.offers-title {
  font-size: clamp(22px, 3vw, 36px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #1a202c !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: .02em !important;
}
.offers-title em {
  font-style: normal !important;
  color: #DC2626 !important;
}
.offers-sub {
  font-size: 14px !important;
  color: #6b7280 !important;
  font-family: 'Cairo', sans-serif !important;
  margin-bottom: 0 !important;
}
.offers-badge-monthly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #457B81;
  padding: 5px 13px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 12px;
  font-family: 'Cairo', sans-serif;
}

/* Countdown */
.offers-countdown { text-align: right; }
.offers-countdown-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin-bottom: 10px !important;
  font-family: 'Cairo', sans-serif !important;
}
.offers-countdown-timer { display: flex; gap: 8px; justify-content: flex-end; }
.offers-timer-block {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  text-align: center !important;
  min-width: 58px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.offers-timer-num {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #DC2626 !important;
  font-family: 'Cairo', sans-serif !important;
  line-height: 1 !important;
}
.offers-timer-unit {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin-top: 3px !important;
}

/* Grid & Cards */
.offers-grid {
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 12px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
@media (max-width: 420px) {
  .offers-grid { grid-template-columns: 1fr !important; }
}
.offer-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all .25s !important;
  cursor: pointer !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.offer-card:hover {
  border-color: #DC2626 !important;
  box-shadow: 0 8px 32px rgba(220,38,38,.13) !important;
  transform: translateY(-3px) !important;
}
.offer-card-ribbon {
  background: linear-gradient(135deg,#DC2626,#B91C1C) !important;
  color: #fff !important;
  font-family: 'Cairo', sans-serif !important;
}
.offer-card-badge {
  background: #DC2626 !important;
  box-shadow: 0 4px 14px rgba(220,38,38,.4) !important;
  font-family: 'Cairo', sans-serif !important;
}
.offer-card-img {
  background: #f9fafb !important;
  height: 150px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  position: relative !important;
}
.offer-card-img::after { display: none !important; }
.offer-card-img img {
  max-height: 120px !important;
  max-width: 85% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.12)) !important;
}
.offer-card-body { padding: 12px 16px 16px; }
.offer-card-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #457B81 !important;
  margin-bottom: 5px !important;
  font-family: 'Cairo', sans-serif !important;
}
.offer-card-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1a202c !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  font-family: 'Cairo', sans-serif !important;
}
.offer-card-artnr {
  font-size: 11px !important;
  color: #9ca3af !important;
  margin-bottom: 10px !important;
}
.offer-card-desc {
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}
.offer-card-price-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.offer-card-price { font-size: 26px !important; font-weight: 900 !important; color: #1a202c !important; font-family: 'Cairo', sans-serif !important; }
.offer-card-oldprice { font-size: 14px !important; color: #9ca3af !important; text-decoration: line-through !important; }
.offer-card-save { font-size: 12px !important; font-weight: 700 !important; color: #DC2626 !important; background: #FEE2E2 !important; padding: 2px 7px !important; border-radius: 3px !important; }
.offer-card-stock {
  font-size: 11px !important;
  color: #6b7280 !important;
  margin-bottom: 14px !important;
}
.offer-card-btn {
  width: 100% !important;
  padding: 13px !important;
  background: #DC2626 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  transition: all .2s !important;
  font-family: 'Cairo', sans-serif !important;
}
.offer-card-btn:hover { background: #B91C1C !important; transform: scale(1.01) !important; }
.offer-card-share { display: none !important; }

@media(max-width:640px) {
  .offers-grid { grid-template-columns: 1fr !important; }
  .offers-countdown { display: none !important; }
}

#scrollTopBtn {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal, #457B81);
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, background .2s;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
}
#scrollTopBtn:hover {
  background: #2d5a60;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* admin utility */
.lib-assign-btn.active { border-color: var(--teal) !important; background: #f0fafa !important; color: var(--teal-dark) !important; }
.lib-img-card:hover { border-color: var(--teal) !important; }



/* ══ SCOPED VARIABLE OVERRIDES ══════════════════════════════ */
/* Produktseiten: grauer Hintergrund, andere Akzentfarben */
body.pg-product,
body.pg-ks-asst,
body.pg-sb-asst {
  --teal-light:#73ABA7;
  --text-light:#888888;
  --border:#DEDEDE;
  --bg:#f5f5f5;
  background: var(--bg);
  min-height: 100vh;
}

/* Checkout */
body.pg-checkout {
  --teal-light:#60ADA8;
  --border:#e0e0e0;
  --text:#1a1a1a;
  --text-light:#6b7280;
  --bg:#f5f5f5;
  --card:#ffffff;
  --danger:#dc2626;
  --success:#16a34a;
  --radius:10px;
  background: var(--bg);
  min-height: 100vh;
}

/* Schnittdatenrechner */
body.pg-schnitt {
  --teal-light:#73ABA7;
  --teal-pale:#EBF3F2;
  --text-light:#888;
  --border:#DEDEDE;
  --bg:#f5f5f5;
  --card:#fff;
  --green:#0F6E56;
  --green-bg:#EAF3DE;
  --green-border:#97C459;
  --amber:#BA7517;
  --amber-bg:#FAEEDA;
  background: var(--bg);
  min-height: 100vh;
}

/* Admin */
body.pg-admin {
  --border:#DEDEDE;
  --bg:#f5f5f5;
  --card:#FFFFFF;
  --text-light:#888888;
  --danger:#DC2626;
  --warning:#D97706;
  --success:#16A34A;
  background: var(--bg);
}

/* Service */
body.pg-service {
  --teal-light:#73ABA7;
  --text-light:#888;
  --border:#DEDEDE;
  --bg:#f5f5f5;
  --yellow:#FCD34D;
  --red-soft:#FCA5A5;
  background: var(--bg);
  min-height: 100vh;
}

/* Kreissaege-Assistent: zusaetzliche Variablen */
body.pg-ks-asst {
  --teal-bg:#f0f9f8;
  --teal-pale:#b2d8d8;
  --teal-dark:#0f5a4e;
}

/* Login */
body.pg-login {
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Status */
body.pg-status {
  --green:#2d6a2d;
  --green-bg:#eaf5ea;
  --red:#991f1f;
  --red-bg:#fdf0f0;
  --amber:#7a4f0d;
  --amber-bg:#fef6e4;
  --muted:#6b6b6b;
  --mono:'IBM Plex Mono', monospace;
  --sans:'IBM Plex Sans', sans-serif;
  font-family: var(--sans);
  background: #f4f4f2;
  min-height: 100vh;
  padding: 32px 16px;
}