/* ── Themes ──────────────────────────────────────────────── */
:root, body[data-theme="normal"] {
  --green:#4ba82e; --green-dark:#3a8a22; --green-light:#e8f5e2;
  --black:#1a1a1a; --gray:#666; --light:#f5f5f5; --white:#fff;
  --border:#ddd; --shadow:0 2px 12px rgba(0,0,0,0.1); --red:#e53935;
  --header-bg:#1a1a1a; --header-text:#fff; --header-sub:#aaa;
  --header-nav-bg:rgba(255,255,255,0.08); --header-nav-hover:rgba(255,255,255,0.12);
  --card-radius:12px; --preview-grad:linear-gradient(135deg,#f0f4f0,#deecd0);
}
body[data-theme="tierisch"] {
  --green:#c8860a; --green-dark:#a06810; --green-light:#fdf3d0;
  --black:#1a1200; --gray:#6b5230; --light:#f5efe3; --white:#fefcf8;
  --border:#d4b896; --shadow:0 4px 20px rgba(0,0,0,0.18); --red:#e53935;
  --header-bg:#111; --header-text:#fff; --header-sub:#d4a800;
  --header-nav-bg:rgba(255,255,255,0.10); --header-nav-hover:rgba(255,255,255,0.20);
  --card-radius:16px; --preview-grad:linear-gradient(135deg,#f5efe3,#e8d5b0);
}
body[data-theme="clean"] {
  --green:#2563eb; --green-dark:#1d4ed8; --green-light:#eff6ff;
  --black:#111827; --gray:#6b7280; --light:#f1f5f9; --white:#fff;
  --border:#e2e8f0; --shadow:0 1px 4px rgba(0,0,0,0.08); --red:#ef4444;
  --header-bg:#fff; --header-text:#111827; --header-sub:#6b7280;
  --header-nav-bg:rgba(0,0,0,0.05); --header-nav-hover:rgba(0,0,0,0.08);
  --card-radius:8px; --preview-grad:linear-gradient(135deg,#eff6ff,#dbeafe);
}
body[data-theme="nacht"] {
  --green:#7c3aed; --green-dark:#5b21b6; --green-light:#1e1b4b;
  --black:#f1f0ff; --gray:#9ca3af; --light:#0d0d1a; --white:#141428;
  --border:#2d2d4a; --shadow:0 4px 24px rgba(0,0,0,0.6); --red:#f87171;
  --header-bg:#0a0a18; --header-text:#f1f0ff; --header-sub:#7070aa;
  --header-nav-bg:rgba(255,255,255,0.06); --header-nav-hover:rgba(255,255,255,0.10);
  --card-radius:12px; --preview-grad:linear-gradient(135deg,#1e1b4b,#141428);
}
body[data-theme="sport"] {
  --green:#dc2626; --green-dark:#b91c1c; --green-light:#fef2f2;
  --black:#0f0f0f; --gray:#6b7280; --light:#f4f4f4; --white:#fff;
  --border:#e0e0e0; --shadow:0 2px 8px rgba(0,0,0,0.14); --red:#dc2626;
  --header-bg:#111; --header-text:#fff; --header-sub:#999;
  --header-nav-bg:rgba(255,255,255,0.08); --header-nav-hover:rgba(255,255,255,0.14);
  --card-radius:4px; --preview-grad:linear-gradient(135deg,#fef2f2,#fecaca);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--light);color:var(--black);min-height:100vh;}

/* HEADER */
header{background:var(--header-bg);display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px;position:sticky;top:0;z-index:200;}
.logo{display:flex;align-items:center;gap:12px;}
.logo-badge{width:40px;height:40px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;}
.logo-text{font-size:20px;font-weight:700;letter-spacing:3px;color:var(--header-text);}
.logo-sub{font-size:11px;color:var(--header-sub);letter-spacing:1px;}
.top-nav{display:flex;gap:4px;background:var(--header-nav-bg);border-radius:8px;padding:4px;}
.nav-btn{padding:8px 20px;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;background:transparent;color:var(--header-sub);transition:all .2s;}
.nav-btn:hover{color:var(--header-text);background:var(--header-nav-hover);}
.nav-btn.active{background:var(--green);color:#fff;}
#nav-admin{display:none;}

/* PROGRESS */
.progress-bar{background:var(--white);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;}
.prog-step{display:flex;align-items:center;padding:13px 18px;gap:8px;cursor:pointer;border-bottom:3px solid transparent;font-size:13px;color:var(--gray);white-space:nowrap;transition:all .2s;}
.prog-step:hover{color:var(--green);background:rgba(75,168,46,.04);}
.prog-step.prog-active{color:var(--green);border-bottom-color:var(--green);font-weight:600;background:rgba(75,168,46,.06);}
.prog-step.prog-complete{color:#1a1a1a;}
.prog-step.prog-incomplete{color:#a36a05;}
.step-num{width:22px;height:22px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;flex-shrink:0;}
.prog-step.prog-active .step-num{background:var(--green);color:white;}
.prog-step.prog-complete .step-num{background:var(--green);color:white;}
.prog-step.prog-incomplete .step-num{background:#f0b441;color:white;}

/* CONFIGURATOR */
.cfg-wrap{max-width:1300px;margin:0 auto;padding:28px 20px;}
.cfg-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;}
@media(max-width:900px){.cfg-grid{grid-template-columns:1fr;}}

/* MOBILE STICKY-BAR */
#cfgMobileBar{display:none;}
#cfgMobileBar.visible{display:none;}
@media(max-width:900px){
  #cfgMobileBar.visible{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:10px 14px env(safe-area-inset-bottom,10px);
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
  }
  #cfgMobileBar .mb-info{flex:1;min-width:0;}
  #cfgMobileBar .mb-step{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.4px;line-height:1;margin-bottom:3px;}
  #cfgMobileBar .mb-price{font-size:18px;font-weight:800;color:var(--green);line-height:1.1;}
  #cfgMobileBar .mb-btn{font-size:14px;padding:10px 16px;white-space:nowrap;flex-shrink:0;}
  #app-cfg{padding-bottom:74px;}   /* Platz für die Bar damit Buttons nicht überlappen */
}
.card{background:var(--white);border-radius:var(--card-radius);box-shadow:var(--shadow);padding:28px;}
.card-title{font-size:20px;font-weight:700;margin-bottom:6px;}
.card-sub{color:var(--gray);font-size:14px;margin-bottom:24px;}

/* MODEL GRID */
.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.model-card{position:relative;border:2px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;text-align:center;transition:all .2s;}
.model-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 6px 20px rgba(75,168,46,.15);}
.model-card.sel{border-color:var(--green);background:var(--green-light);}
.model-card-body{padding:14px 14px 16px;}
.model-img-wrap{overflow:hidden;height:140px;background:var(--light);display:flex;align-items:center;justify-content:center;}
.model-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.model-card:hover .model-img-wrap img{transform:scale(1.1);}
.model-emoji{font-size:48px;margin-bottom:8px;}
.model-name{font-weight:700;font-size:15px;}
.model-type{font-size:11px;color:var(--gray);margin:3px 0;}
.model-price{font-weight:700;color:var(--green);font-size:14px;}
.dbl-hint{font-size:10px;color:#bbb;margin-top:5px;}

/* OPTION CARDS */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;}
.opt-card{position:relative;border:2px solid var(--border);border-radius:8px;padding:14px;cursor:pointer;transition:all .2s;}
.opt-card:hover{border-color:var(--green);}
.opt-card.sel{border-color:var(--green);background:var(--green-light);}
.item-badge{display:inline-block;background:var(--green);color:white;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:10px;line-height:1.2;}
.delivery-badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:12px;margin-top:6px;line-height:1.3;}
.delivery-badge.green{background:#e3f5da;color:#2d7a17;}
.delivery-badge.amber{background:#fff4d9;color:#996b07;}
/* Admin: Galerie-Editor */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.gal-item{position:relative;border:2px solid var(--border);border-radius:8px;overflow:hidden;background:var(--light);}
.gal-item img{display:block;width:100%;height:120px;object-fit:cover;}
.gal-actions{display:flex;gap:4px;padding:6px;background:var(--white);border-top:1px solid var(--border);}
.gal-actions .btn{flex:1;padding:4px 6px;font-size:12px;}

/* Customer: Galerie-Lightbox */
.gal-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1300;display:none;align-items:center;justify-content:center;}
.gal-lightbox.open{display:flex;}
.gal-stage{max-width:92vw;max-height:84vh;display:flex;align-items:center;justify-content:center;}
.gal-stage img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:6px;box-shadow:0 12px 48px rgba(0,0,0,.6);}
.gal-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border:none;background:rgba(255,255,255,.12);color:white;font-size:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.gal-x:hover{background:rgba(255,255,255,.25);}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:60px;border:none;background:rgba(255,255,255,.12);color:white;font-size:32px;font-weight:300;border-radius:8px;cursor:pointer;line-height:1;transition:background .15s;}
.gal-nav:hover{background:rgba(255,255,255,.28);}
.gal-nav.prev{left:18px;} .gal-nav.next{right:18px;}
.gal-nav:disabled{opacity:.3;cursor:default;}
.gal-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:white;padding:6px 14px;border-radius:14px;font-size:13px;}
@media(max-width:600px){.gal-nav{width:40px;height:50px;font-size:26px;} .gal-nav.prev{left:8px;} .gal-nav.next{right:8px;}}

/* Modell-Karte: Galerie-Badge (oben rechts über dem Bild) */
.gal-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.65);color:white;font-size:11px;font-weight:600;padding:4px 9px;border-radius:12px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:4px;z-index:2;}
.gal-badge:hover{background:rgba(0,0,0,.85);}

/* Preview-Galerie-Thumbnails (Sidebar) */
.preview-thumbs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.preview-thumb{width:48px;height:48px;border-radius:6px;background-size:cover;background-position:center;cursor:pointer;border:2px solid transparent;transition:border-color .15s;}
.preview-thumb:hover{border-color:var(--green);}

/* Step 7: Toggle-Blöcke (Probefahrt, Inzahlungnahme) */
.cf-toggle-block{border:2px solid var(--border);border-radius:10px;padding:14px 16px;margin-top:14px;background:var(--white);transition:border-color .15s;}
.cf-toggle-block:has(input:checked){border-color:var(--green);background:var(--green-light);}
.cf-toggle-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:14px;margin:0;}
.cf-toggle-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--green);flex-shrink:0;}
.cf-toggle-label{user-select:none;}
.cf-toggle-fields{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
/* Live-Validierung: Status-Icon im Input rechts */
.cf-validated{position:relative;}
.cf-validated input{padding-right:36px;}
.cf-validated input.cf-ok{border-color:var(--green)!important;}
.cf-validated input.cf-err{border-color:#d24d4d!important;}
.cf-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:800;line-height:1;pointer-events:none;}
.cf-icon-ok{color:var(--green);}
.cf-icon-err{color:#d24d4d;}
.cf-toggle-block input[type=range]{width:100%;accent-color:var(--green);}
.finance-result{background:#eef5ff;border-radius:10px;padding:14px 16px;margin:10px 0;text-align:center;}
.finance-rate-label{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.finance-rate{font-size:28px;font-weight:800;color:#0c52a6;line-height:1.1;}
.finance-meta{font-size:11px;color:var(--gray);margin-top:6px;}
.sp-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.sp-search{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:8px;font-size:14px;outline:none;transition:border-color .15s;font-family:inherit;background:var(--white);}
.sp-search:focus{border-color:var(--green);}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sp-chip{padding:6px 12px;border:1.5px solid var(--border);background:var(--white);border-radius:16px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;color:var(--gray);}
.sp-chip:hover{border-color:var(--green);color:var(--green);}
.sp-chip.sel{background:var(--green);border-color:var(--green);color:white;}
.opt-card .item-badge{position:absolute;top:8px;right:8px;}
.special-item .item-badge{flex-shrink:0;margin-left:auto;}
.opt-name{font-weight:600;font-size:14px;}
.opt-desc{font-size:12px;color:var(--gray);margin:3px 0;}
.opt-price{font-size:13px;font-weight:600;color:var(--green);margin-top:6px;}

/* COLORS */
.color-row{display:flex;flex-wrap:wrap;gap:16px;}
.color-item{text-align:center;cursor:pointer;}
.color-circle{width:52px;height:52px;border-radius:50%;margin:0 auto;border:3px solid transparent;transition:all .2s;}
.color-circle:hover{transform:scale(1.1);}
.color-item.sel .color-circle{box-shadow:0 0 0 3px white,0 0 0 6px var(--green);}
.color-label{font-size:11px;margin-top:5px;max-width:60px;line-height:1.3;}
.color-info-box{margin-top:14px;padding:12px;background:var(--light);border-radius:8px;font-size:13px;}

/* WHEELS */
.wheel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.wheel-card{position:relative;border:2px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;}
.wheel-card:hover{border-color:var(--green);}
.wheel-card.sel{border-color:var(--green);background:var(--green-light);}
.wheel-card-body{padding:12px;display:flex;gap:12px;align-items:center;}
.wheel-img-wrap{overflow:hidden;height:130px;background:var(--light);display:flex;align-items:center;justify-content:center;}
.wheel-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.wheel-card:hover .wheel-img-wrap img{transform:scale(1.12);}
.wheel-icon{font-size:32px;flex-shrink:0;}
.wheel-info-btn{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--green);font-size:15px;font-weight:800;font-style:italic;font-family:'Georgia',serif;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:2;transition:all .15s;line-height:1;padding:0;}
@media(hover:none){.wheel-info-btn{width:44px;height:44px;font-size:17px;}}
.wheel-info-btn:hover{background:var(--green);color:white;transform:scale(1.08);}
.confirm-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;}
.confirm-modal.open{display:flex;animation:confirmFade .18s ease-out;}
@keyframes confirmFade{from{opacity:0;}to{opacity:1;}}
.confirm-modal-box{background:white;border-radius:14px;width:100%;max-width:420px;padding:28px 24px 20px;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.4);animation:confirmPop .22s cubic-bezier(.18,.89,.32,1.15);}
@keyframes confirmPop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.confirm-modal-icon{font-size:42px;margin-bottom:10px;line-height:1;}
.confirm-modal-title{font-size:17px;font-weight:700;margin:0 0 8px;color:#1a1a1a;}
.confirm-modal-text{font-size:14px;line-height:1.5;color:var(--gray);margin:0 0 22px;}
.confirm-modal-foot{display:flex;gap:10px;justify-content:center;}
.confirm-modal-foot .btn{flex:1;max-width:160px;}

.wheel-info-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;}
.wheel-info-modal.open{display:flex;}
.wheel-info-box{background:white;border-radius:12px;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:90vh;}
.wheel-info-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.wheel-info-hdr h3{font-size:16px;font-weight:700;margin:0;}
.wheel-info-body{padding:18px;overflow-y:auto;text-align:center;background:var(--light);}
.wheel-info-body img{max-width:100%;max-height:60vh;height:auto;border-radius:8px;background:white;}
.wheel-info-meta{padding:12px 18px 16px;font-size:13px;color:var(--gray);border-top:1px solid var(--border);background:white;}
.wheel-info-meta strong{color:#1a1a1a;}

/* STANDARD EQUIP */
.equip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.equip-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--light);border-radius:6px;font-size:13px;}
.equip-check{color:var(--green);font-size:15px;}

/* SPECIAL EQUIP */
.special-item{display:flex;align-items:center;gap:14px;padding:14px;border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;margin-bottom:10px;}
.special-item:hover{border-color:var(--green);}
.special-item.sel{border-color:var(--green);background:var(--green-light);}
.sp-check{width:22px;height:22px;min-width:22px;border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;background:var(--white);font-size:13px;}
.special-item.sel .sp-check{border-color:var(--green);background:var(--green);color:white;}
.sp-info{flex:1;}
.sp-name{font-weight:600;font-size:14px;}
.sp-desc{font-size:12px;color:var(--gray);margin-top:2px;}
.sp-price{font-weight:700;color:var(--green);font-size:14px;}
.special-item.warn{border-color:#f0b441;background:#fffbf3;}
.special-item.warn:hover{border-color:#e09d2e;}
.special-item.warn.sel{border-color:#e09d2e;background:#fff5e0;}
.sp-warn{font-size:11px;color:#a36a05;margin-top:5px;font-weight:600;line-height:1.3;}

/* ÜBERFÜHRUNG (Step 6) */
.delivery-card{margin-top:16px;border:2px dashed var(--border);border-radius:10px;padding:16px;background:#fafbfc;}
.delivery-head{display:flex;align-items:flex-start;gap:12px;}
.delivery-icon{font-size:28px;line-height:1;}
.delivery-title{font-weight:700;font-size:14px;}
.delivery-sub{font-size:12px;color:var(--gray);margin-top:2px;line-height:1.4;}
.delivery-form{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;}
.delivery-input{max-width:130px;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.delivery-result{flex:1;min-width:160px;}
.delivery-empty{font-size:13px;color:var(--gray);}
.delivery-hit{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:10px 14px;}
.delivery-badge-tag{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px;}
.delivery-badge-tag.matched{background:#e3f5da;color:#2d7a17;}
.delivery-badge-tag.fallback{background:#fff4d9;color:#996b07;}
.delivery-price{font-weight:800;color:var(--green);font-size:16px;}
.delivery-price.free{color:#2d7a17;}

/* CONTACT PERSON RADIO GROUP */
.contact-person-grp{display:flex;gap:10px;flex-wrap:wrap;}
.contact-person-opt{flex:1;min-width:180px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;background:var(--white);}
.contact-person-opt:hover{border-color:var(--green);}
.contact-person-opt.sel{border-color:var(--green);background:var(--green-light);}
.contact-person-opt input{position:absolute;opacity:0;pointer-events:none;}
.contact-person-opt .cp-dot{width:18px;height:18px;border:2px solid var(--border);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--white);}
.contact-person-opt.sel .cp-dot{border-color:var(--green);}
.contact-person-opt.sel .cp-dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);}
.contact-person-opt .cp-name{font-weight:600;font-size:14px;}

/* SUMMARY SIDEBAR */
.sum-sticky{position:sticky;top:80px;}
.preview-box{background:var(--preview-grad);border-radius:var(--card-radius);padding:24px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden;}
.preview-emoji{font-size:100px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.15));}
.preview-img{width:100%;height:180px;object-fit:cover;border-radius:8px;display:block;}
.preview-dot{position:absolute;bottom:10px;right:10px;width:24px;height:24px;border-radius:50%;border:3px solid white;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.sum-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border);}
.sum-label{color:var(--gray);}
.sum-total{font-size:17px;font-weight:700;border-top:2px solid var(--border);padding-top:12px;margin-top:6px;display:flex;justify-content:space-between;}
.sum-total-price{color:var(--green);}

/* BUTTONS */
.btn{padding:11px 22px;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-primary{background:var(--green);color:white;}
.btn-primary:hover{background:var(--green-dark);}
.btn-outline{background:var(--white);color:var(--black);border:2px solid var(--border);}
.btn-outline:hover{border-color:var(--green);color:var(--green);}
.btn-danger{background:var(--red);color:white;}
.btn-danger:hover{background:#c62828;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;}
.btn-full{width:100%;text-align:center;margin-top:12px;}
.cfg-step{display:none;}
.cfg-step.active{display:block;}

/* NOTICE */
.notice{padding:12px 16px;background:#fff8e1;border:1px solid #ffe082;border-radius:8px;font-size:13px;color:#795548;display:flex;align-items:center;gap:8px;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--green-light);color:var(--green-dark);}

/* ===== ADMIN ===== */
.admin-wrap{display:flex;height:calc(100vh - 114px);overflow:hidden;}
.admin-side{width:260px;min-width:260px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;}
.admin-side-hdr{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--light);}
.admin-side-hdr h3{font-size:14px;font-weight:700;}
.m-list-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;transition:background .15s;font-size:14px;position:relative;}
.m-list-item:hover{background:var(--light);}
.m-list-item.active{background:var(--green-light);border-left:3px solid var(--green);}
.m-list-emoji{font-size:20px;}
.m-list-info{flex:1;}
.m-list-name{font-weight:600;}
.m-list-type{font-size:11px;color:var(--gray);}
.m-del{opacity:0;background:none;border:none;cursor:pointer;color:var(--red);font-size:15px;padding:2px 4px;}
.m-list-item:hover .m-del{opacity:1;}
.admin-main{flex:1;overflow-y:auto;padding:24px;}
.admin-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--gray);text-align:center;gap:12px;}
.admin-empty .big{font-size:64px;}
.admin-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px;overflow-x:auto;}
.admin-tab{padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:none;color:var(--gray);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .2s;}
.admin-tab:hover{color:var(--green);}
.admin-tab.active{color:var(--green);border-bottom-color:var(--green);}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sec-hdr h4{font-size:15px;font-weight:700;}
.atbl{width:100%;border-collapse:collapse;font-size:13px;}
.atbl th{text-align:left;padding:8px 12px;background:var(--light);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);border-bottom:1px solid var(--border);}
.atbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.atbl tr:last-child td{border-bottom:none;}
.atbl tr:hover td{background:#fafafa;}
.act-btns{display:flex;gap:6px;}
.col-dot{width:18px;height:18px;border-radius:4px;display:inline-block;vertical-align:middle;border:1px solid rgba(0,0,0,.15);margin-right:6px;}
.empty-st{text-align:center;padding:32px;color:var(--gray);font-size:14px;}

/* MODAL */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:white;border-radius:12px;width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;}
.modal-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-hdr h3{font-size:16px;font-weight:700;}
.modal-x{background:none;border:none;cursor:pointer;font-size:18px;color:var(--gray);padding:2px 8px;border-radius:4px;}
.modal-x:hover{background:var(--light);}
.modal-body{padding:20px;max-height:60vh;overflow-y:auto;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}
.form-g{margin-bottom:15px;}
.form-g label{display:block;font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.form-c{width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:7px;font-size:14px;outline:none;transition:border-color .2s;font-family:inherit;}
.form-c:focus{border-color:var(--green);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
input[type=color].form-c{height:44px;padding:4px;cursor:pointer;}

/* SUCCESS */
.success-wrap{text-align:center;padding:48px 24px;}
.success-icon{font-size:72px;margin-bottom:16px;}

/* TOAST */
#toast{position:fixed;bottom:24px;right:24px;background:var(--black);color:white;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;z-index:9999;opacity:0;transition:opacity .3s;box-shadow:0 4px 16px rgba(0,0,0,.3);pointer-events:none;}

/* COOKIE-BANNER (auf Mobile schiebt es die Sticky-Bar nach oben statt sie zu überdecken) */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1a1a1a;color:white;padding:14px 20px env(safe-area-inset-bottom,14px);display:none;align-items:center;gap:18px;z-index:9998;box-shadow:0 -4px 16px rgba(0,0,0,.25);font-size:13px;line-height:1.5;}
body.cookie-active #cfgMobileBar.visible{bottom:88px;}
body.cookie-active{padding-bottom:0;}
.cookie-banner.show{display:flex;}
.cookie-banner .cookie-text{flex:1;min-width:0;color:#e0e0e0;}
.cookie-banner .cookie-text strong{color:white;}
.cookie-banner .cookie-text a{color:#a8e092;}
.cookie-banner .cookie-btn{background:var(--green);color:white;border:none;padding:10px 22px;border-radius:6px;font-weight:700;cursor:pointer;font-size:13px;flex-shrink:0;transition:background .15s;}
.cookie-banner .cookie-btn:hover{background:#3a8a22;}
@media(max-width:600px){.cookie-banner{flex-direction:column;align-items:stretch;gap:10px;font-size:12px;} .cookie-banner .cookie-btn{width:100%;}}

/* ADMIN LOGIN OVERLAY */
#adminLogin{display:none;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 64px);background:var(--light);}
.login-card{background:white;border-radius:16px;box-shadow:var(--shadow);padding:44px 40px;width:100%;max-width:400px;text-align:center;}
.login-logo{font-size:52px;margin-bottom:14px;}
.login-badge{width:64px;height:64px;background:var(--green);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:white;margin:0 auto 16px;}
.login-title{font-size:22px;font-weight:800;margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--gray);margin-bottom:28px;}
.login-err{font-size:13px;color:var(--red);margin-top:10px;min-height:18px;}

/* PRINT AREA */
#printArea{display:none;}

/* PRINT STYLES */
@media print{
  @page{size:A4 portrait;margin:14mm 16mm;}
  header,nav,.progress-bar,#app-cfg,#app-admin,#adminLogin,#modal,#toast{display:none!important;}
  body{background:white;margin:0;}
  #printArea{display:block!important;}
}
/* CONTACT FORM */
textarea.form-c{resize:vertical;min-height:80px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.contact-grid{grid-template-columns:1fr;}}

/* SUBMISSION BADGE */
.sub-badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.sub-badge-new{background:var(--green-light);color:var(--green-dark);}
.sub-badge-read{background:var(--light);color:var(--gray);}

/* EMAIL SETTINGS HINT */
.hint-box{background:#fff8e1;border:1px solid #ffe082;border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:13px;color:#795548;line-height:1.7;}
.code-chip{background:#f0f0f0;border-radius:4px;padding:1px 6px;font-family:monospace;font-size:11px;color:#333;}

/* LOGO */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.logo-img{height:46px;width:auto;display:block;object-fit:contain;border-radius:6px;}
.logo-fallback-badge{width:46px;height:46px;background:var(--green);border-radius:10px;font-size:16px;font-weight:900;letter-spacing:-1px;align-items:center;justify-content:center;color:white;}
.logo-textblock{display:flex;flex-direction:column;gap:1px;}
@media(min-width:768px) and (max-width:1023px){.logo-img{height:42px;}.logo-fallback-badge{width:42px;height:42px;}}

/* INFO BANNER */
.info-banner{background:var(--green);color:white;text-align:center;padding:7px 16px;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;}
.info-banner.admin-hidden{display:none;}
.banner-link{color:white;font-weight:700;border:1.5px solid rgba(255,255,255,.6);border-radius:4px;padding:2px 9px;text-decoration:none;font-size:11px;transition:background .15s;}
.banner-link:hover{background:rgba(255,255,255,.2);}

/* HEADER BACK LINK */
.header-back{color:var(--header-sub);font-size:12px;text-decoration:none;padding:6px 12px;border:1px solid rgba(128,128,128,.3);border-radius:6px;transition:all .2s;white-space:nowrap;}
.header-back:hover{color:var(--header-text);border-color:rgba(128,128,128,.5);background:var(--header-nav-hover);}

/* FOOTER */
#site-footer{background:var(--black);color:#aaa;padding:32px 20px 20px;margin-top:40px;font-size:13px;line-height:1.7;}
#site-footer.footer-hidden{display:none;}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1.1fr;gap:28px;}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:24px;}}
@media(max-width:500px){.footer-inner{grid-template-columns:1fr;gap:20px;}}
.footer-download-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green,#3cb371);color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:9px 14px;border-radius:6px;transition:background .15s, transform .1s;margin-top:4px;}
.footer-download-btn:hover{background:#2e9961;color:#fff;}
.footer-download-btn:active{transform:translateY(1px);}
.footer-download-meta{font-size:11px;color:#666;margin-top:8px;line-height:1.5;}
.footer-brand-name{color:white;font-size:15px;font-weight:700;letter-spacing:1.5px;margin-bottom:4px;}
.footer-copy{font-size:11px;color:#666;margin-top:8px;}
.footer-col-title{color:white;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;}
.footer-links{display:flex;flex-direction:column;gap:6px;}
.footer-links a{color:#aaa;text-decoration:none;font-size:13px;cursor:pointer;transition:color .15s;}
.footer-links a:hover{color:var(--green);}
.footer-contact-line{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin-bottom:4px;}
.footer-contact-icon{width:16px;flex-shrink:0;opacity:.6;}
.footer-divider{max-width:1100px;margin:20px auto 0;border-top:1px solid #2a2a2a;padding-top:14px;font-size:11px;color:#555;}

/* INFO MODAL */
#infoModal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;}
#infoModal.open{display:flex;}
.info-modal-box{background:white;border-radius:12px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;max-height:88vh;display:flex;flex-direction:column;}
.info-modal-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.info-modal-hdr h3{font-size:16px;font-weight:700;}
.info-modal-body{padding:20px;overflow-y:auto;flex:1;font-size:13px;line-height:1.7;color:#333;}
.info-modal-body h4{font-size:14px;font-weight:700;margin:16px 0 6px;color:var(--black);}
.info-modal-body h4:first-child{margin-top:0;}
.info-modal-body p{margin-bottom:10px;}
.info-modal-body a{color:var(--green);}
.info-modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;flex-shrink:0;}

/* IMAGE PICKER */
.img-picker{border:2px dashed var(--border);border-radius:8px;overflow:hidden;outline:none;transition:border-color .2s,background .2s;background:white;}
.img-picker:focus-within,.img-picker.drag-over{border-color:var(--green);background:var(--green-light);}
.ipk-zone{padding:28px 16px;text-align:center;cursor:pointer;transition:background .15s;}
.ipk-zone:hover{background:var(--light);}
.ipk-icon{font-size:36px;margin-bottom:8px;}
.ipk-main{font-weight:700;font-size:13px;color:var(--black);}
.ipk-sub{font-size:11px;color:var(--gray);margin-top:4px;}
.ipk-badges{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.ipk-badge{background:var(--light);border:1px solid var(--border);border-radius:20px;font-size:10px;font-weight:600;padding:3px 10px;color:var(--gray);}
.ipk-preview{position:relative;}
.ipk-preview img{width:100%;max-height:200px;object-fit:cover;display:block;}
.ipk-clear{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:white;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;font-weight:600;}
.ipk-clear:hover{background:rgba(200,30,30,.85);}
.ipk-url-bar{display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);background:#fafafa;}
.ipk-url-bar input{flex:1;font-size:11px;margin:0;}
.ipk-url-bar button{flex-shrink:0;font-size:11px;padding:4px 10px;}
.ipk-spinner{text-align:center;padding:12px;font-size:12px;color:var(--gray);}

/* WHATSAPP BUTTON */
.btn-whatsapp{background:#25D366;color:white;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:background .2s;margin-top:12px;}
.btn-whatsapp:hover{background:#1da851;}
.btn-whatsapp svg{width:20px;height:20px;fill:white;flex-shrink:0;}

@media print{#site-footer,.info-banner,#infoModal{display:none!important;}}

/* ── Embed-Modus (iFrame / ?embedded=true): Header & Footer ausblenden ── */
html.embedded header,
html.embedded #site-footer,
html.embedded .info-banner{display:none!important;}

/* ── Theme: Tierisch ── */

/* Zebra-stripe header */
body[data-theme="tierisch"] header{
  background:repeating-linear-gradient(-55deg,#111 0px,#111 18px,#252525 18px,#252525 30px);
  position:relative;overflow:hidden;
}
/* Lion paw + zebra trail in header */
body[data-theme="tierisch"] header::after{
  content:'🐾 🦁 🐾 🦓 🐾 🦁 🐾 🦓 🐾';
  position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  font-size:14px;opacity:.22;letter-spacing:3px;pointer-events:none;white-space:nowrap;
}
/* Body background: warm savanna */
body[data-theme="tierisch"]{
  background:repeating-linear-gradient(
    -45deg,
    #f5efe3 0px,#f5efe3 28px,
    #ede5d5 28px,#ede5d5 30px
  );
}
/* Cards: zebra-stripe top accent */
body[data-theme="tierisch"] .card{
  border-top:5px solid transparent;
  border-image:repeating-linear-gradient(90deg,#111 0px,#111 10px,#fefcf8 10px,#fefcf8 20px) 5;
}
/* Card titles: paw print */
body[data-theme="tierisch"] .card-title::after{content:' 🐾';opacity:.5;font-size:.72em;}
/* Progress bar: subtle zebra */
body[data-theme="tierisch"] .progress-bar{
  background:repeating-linear-gradient(90deg,var(--white) 0px,var(--white) 36px,rgba(0,0,0,0.04) 36px,rgba(0,0,0,0.04) 72px);
}
body[data-theme="tierisch"] .progress-bar::before{content:'🐾';font-size:16px;display:flex;align-items:center;padding:0 10px;opacity:.4;flex-shrink:0;}
/* Step circles: paw-claw shape */
body[data-theme="tierisch"] .step-num{border-radius:50% 50% 50% 0;}
/* Model cards: zebra border on hover/select */
body[data-theme="tierisch"] .model-card:hover{border-color:#111;border-width:2px;}
body[data-theme="tierisch"] .model-card.sel{
  border-color:#111;border-width:2px;
  background:repeating-linear-gradient(-45deg,#fdf3d0 0px,#fdf3d0 12px,#fefcf8 12px,#fefcf8 24px);
}
/* Bouncing model emojis */
body[data-theme="tierisch"] .model-emoji{animation:am-bounce 2s ease-in-out infinite;}
@keyframes am-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
/* Admin sidebar header: mini zebra stripe */
body[data-theme="tierisch"] .admin-side-hdr{
  background:repeating-linear-gradient(-55deg,#111 0px,#111 10px,#252525 10px,#252525 18px);
  color:#fff;
}
body[data-theme="tierisch"] .admin-side-hdr h3{color:#fff;}
/* Nav buttons: pill shape */
body[data-theme="tierisch"] .nav-btn,.nav-btn.active{border-radius:20px;}
/* Opt-card selected: zebra fill */
body[data-theme="tierisch"] .opt-card.sel{
  border-color:#111;
  background:repeating-linear-gradient(-45deg,rgba(17,17,17,0.04) 0px,rgba(17,17,17,0.04) 6px,transparent 6px,transparent 12px);
}

/* ── Theme: Clean ── */
body[data-theme="clean"] header{border-bottom:1px solid var(--border);}
body[data-theme="clean"] .card{box-shadow:none;border:1px solid var(--border);}
body[data-theme="clean"] .model-card{box-shadow:none;}
body[data-theme="clean"] .progress-bar{box-shadow:0 1px 0 var(--border);}

/* ── Theme: Nacht ── */
body[data-theme="nacht"] .progress-bar{background:var(--white);}
body[data-theme="nacht"] .btn-outline{border-color:var(--border);color:var(--black);}
body[data-theme="nacht"] .form-c{background:var(--white);color:var(--black);border-color:var(--border);}
body[data-theme="nacht"] .modal{background:var(--white);}
body[data-theme="nacht"] .info-modal-box{background:var(--white);}
body[data-theme="nacht"] .atbl tr:hover td{background:rgba(255,255,255,.04);}
body[data-theme="nacht"] .login-card{background:var(--white);}

/* ── Theme: Sport ── */
body[data-theme="sport"] header{position:relative;}
body[data-theme="sport"] header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--green),var(--green-dark));}
body[data-theme="sport"] .btn-primary{text-transform:uppercase;letter-spacing:.6px;font-size:12px;}
body[data-theme="sport"] .card-title::before{content:'▸ ';}
body[data-theme="sport"] .prog-step.prog-active{font-weight:700;text-transform:uppercase;font-size:11px;}

/* ── Admin topbar toggle (hamburger) ── */
.admin-topbar-toggle{display:none;}
@media(max-width:767px){.admin-topbar-toggle{display:inline-flex;}}

/* ── Admin topbar ── */
.admin-topbar{background:var(--white);border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:50px;flex-shrink:0;gap:10px;}
.admin-sec-tabs{display:flex;gap:2px;min-width:0;}
.admin-sec-tab{padding:8px 18px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--gray);border-radius:6px;transition:all .2s;flex-shrink:0;}
.admin-sec-tab:hover{background:var(--light);color:var(--black);}
.admin-sec-tab.active{background:var(--green-light);color:var(--green);}
.admin-topbar-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}

/* ── Theme picker ── */
.theme-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px;}
.theme-card{border:2px solid var(--border);border-radius:var(--card-radius);overflow:hidden;cursor:pointer;transition:all .2s;}
.theme-card:hover{border-color:var(--green);transform:translateY(-2px);}
.theme-card.sel{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light);}
.theme-preview{height:72px;display:flex;flex-direction:column;}
.theme-preview-header{height:20px;flex-shrink:0;}
.theme-preview-body{flex:1;display:flex;gap:6px;padding:6px;}
.theme-preview-card{flex:1;border-radius:3px;opacity:.9;}
.theme-preview-accent{width:24px;border-radius:3px;}
.theme-name{font-weight:700;font-size:13px;padding:8px 10px 2px;color:var(--black);}
.theme-desc{font-size:11px;color:var(--gray);padding:0 10px 10px;line-height:1.4;}

/* ── Settings layout ── */
.settings-page-title{font-size:22px;font-weight:800;margin-bottom:20px;color:var(--black);}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr;}}
.settings-card{background:var(--white);border-radius:var(--card-radius);box-shadow:var(--shadow);padding:22px;}
.settings-card-title{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--black);}
.settings-card-sub{font-size:13px;color:var(--gray);margin-bottom:16px;}

/* ── Platform Leads ── */
.leads-list{display:flex;flex-direction:column;gap:12px;}
.lead-card{background:var(--white);border-radius:var(--card-radius);box-shadow:var(--shadow);padding:18px 20px;border-left:4px solid var(--border);transition:all .2s;}
.lead-card:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,0,.12);}
.lead-card[data-status="open"]{border-left-color:var(--green);}
.lead-card[data-status="assigned"]{border-left-color:#2563eb;}
.lead-card[data-status="done"]{border-left-color:var(--border);opacity:.72;}
.lead-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:6px;}
.lead-card-vehicle{font-size:13px;color:var(--gray);margin-bottom:5px;}
.lead-card-contact{display:flex;gap:14px;font-size:12px;color:var(--gray);margin-bottom:8px;flex-wrap:wrap;}
.lead-card-msg{font-size:13px;color:var(--black);background:var(--light);border-radius:6px;padding:8px 12px;margin-bottom:8px;font-style:italic;border-left:3px solid var(--border);}
.lead-card-notes{font-size:12px;color:#2563eb;background:#eff6ff;border-radius:6px;padding:6px 10px;margin-bottom:8px;}
.lead-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--border);margin-top:6px;}
.platform-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;letter-spacing:.3px;white-space:nowrap;}
.platform-badge-configurator{background:#e8f5e2;color:#3a8a22;}
.platform-badge-manual{background:var(--light);color:var(--gray);}
.lead-reply-box{margin-top:12px;border:1px solid var(--border);border-radius:8px;padding:12px;background:#fafafa;}
.lead-reply-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.lead-reply-textarea{width:100%;min-height:90px;padding:10px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:13px;resize:vertical;box-sizing:border-box;}
.lead-reply-textarea:focus{outline:none;border-color:var(--green);}
.ai-thinking{display:inline-block;color:var(--green);font-size:12px;}
.btn-ai-used{background:#e8f5e2 !important;color:#3a8a22 !important;border:1px solid #c8e6c0 !important;cursor:not-allowed !important;opacity:1 !important;}
.btn-ai-used:hover{background:#e8f5e2 !important;}
.lead-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.lead-badge-open{background:var(--green-light);color:var(--green);}
.lead-badge-assigned{background:#eff6ff;color:#2563eb;}
.lead-badge-done{background:var(--light);color:var(--gray);}
.leads-filter-btn{padding:5px 12px;border:none;background:transparent;cursor:pointer;font-size:12px;font-weight:600;color:var(--gray);border-radius:6px;transition:all .15s;white-space:nowrap;}
.leads-filter-btn:hover{color:var(--black);}
.leads-filter-btn.active{background:var(--white);color:var(--green);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.leads-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.leads-search-row{position:relative;margin-bottom:12px;}
.leads-search-input{width:100%;padding:10px 38px 10px 14px;border:2px solid var(--border);border-radius:8px;font-size:14px;outline:none;font-family:inherit;background:var(--white);transition:border-color .15s;}
.leads-search-input:focus{border-color:var(--green);}
.leads-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--light);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;color:var(--gray);font-size:13px;display:flex;align-items:center;justify-content:center;}
.leads-search-clear:hover{background:var(--border);color:#1a1a1a;}
.leads-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.filter-group{display:flex;gap:3px;background:var(--light);border-radius:8px;padding:3px;}
/* Employee list */
.emp-list{display:flex;flex-direction:column;gap:8px;}
.emp-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--light);border-radius:8px;}
.emp-avatar{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.emp-info{flex:1;min-width:0;}
.emp-name{font-weight:700;font-size:14px;}
.emp-role{font-size:12px;color:var(--gray);}
.emp-actions{display:flex;gap:6px;flex-shrink:0;}

/* ============================================================
   TABLET  768 – 1023 px
   ============================================================ */
@media(min-width:768px) and (max-width:1023px){
  header{padding:0 20px;}
  .logo-sub{display:none;}
  .admin-side{width:210px;min-width:210px;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:20px;}
}
@media(min-width:900px) and (max-width:1023px){
  .cfg-grid{grid-template-columns:1fr 280px;}
}

/* ============================================================
   MOBILE  < 768 px
   ============================================================ */
@media(max-width:767px){
  /* Header */
  header{
    padding:0 14px;height:56px;
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .logo{gap:9px;min-width:0;}
  .logo-sub{display:none;}
  .logo-img{height:34px;}
  .logo-fallback-badge{width:34px;height:34px;font-size:13px;}
  .logo-textblock{display:flex;min-width:0;}
  .logo-text{font-size:13.5px;letter-spacing:1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .header-back{display:none;}
  .top-nav{padding:3px;gap:2px;}
  .nav-btn{padding:7px 10px;font-size:12px;}

  /* Banner */
  .info-banner{font-size:11px;padding:6px 14px;flex-wrap:wrap;gap:4px;}

  /* Progress */
  .prog-step{padding:10px 10px;font-size:11px;gap:5px;}
  .step-num{width:20px;height:20px;font-size:10px;}

  /* Configurator layout */
  .cfg-wrap{padding:12px;}
  .cfg-grid{display:flex;flex-direction:column;gap:12px;}
  .cfg-grid>div:first-child{order:2;}
  .cfg-grid>div:last-child{order:1;}

  /* Summary sidebar */
  .sum-sticky{position:static;}
  .preview-box{padding:12px;}
  .preview-emoji{font-size:56px;}
  .preview-img{height:120px;}
  .sum-row{font-size:12px;}

  /* Cards */
  .card{padding:16px;border-radius:10px;}
  .card-title{font-size:17px;}
  .card-sub{font-size:13px;margin-bottom:16px;}

  /* Admin login */
  #adminLogin{height:calc(100vh - 56px);}
  .login-card{padding:32px 24px;}

  /* Model grid */
  .model-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
  .model-img-wrap{height:110px;}
  .model-card-body{padding:10px;}

  /* Colors */
  .color-circle{width:44px;height:44px;}
  .color-row{gap:12px;}

  /* Option / Wheel / Equipment */
  .opt-grid{grid-template-columns:1fr 1fr;}
  .wheel-grid{grid-template-columns:1fr;}
  .equip-grid{grid-template-columns:1fr;}

  /* Button nav */
  .btn-nav{flex-wrap:wrap;gap:8px;justify-content:stretch;}
  .btn-nav .btn{flex:1 1 130px;text-align:center;justify-content:center;}
  .btn-nav .btn-whatsapp{flex:1 1 100%;justify-content:center;margin-top:0;}

  /* Summary-step responsive grids */
  .cfg-2col{grid-template-columns:1fr!important;}
  .cfg-price-box{flex-direction:column!important;gap:8px!important;}

  /* ── Admin Topbar (Sec-Tabs scrollbar, kompakte Buttons) ── */
  .admin-topbar{
    height:auto;min-height:48px;padding:6px 10px;
    /* Safe-Area falls die Topbar bei landscape oben am Notch klebt */
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  .admin-sec-tabs{
    flex:1 1 auto;
    overflow-x:auto;flex-wrap:nowrap;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Fade-Maske rechts → visueller Hinweis dass mehr kommt */
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%);
  }
  .admin-sec-tabs::-webkit-scrollbar{display:none;}
  .admin-sec-tab{
    padding:9px 12px;font-size:12.5px;
    min-height:40px;display:inline-flex;align-items:center;
    scroll-snap-align:start;
  }
  .admin-topbar-actions .btn-sm{padding:7px 10px;font-size:12px;min-height:38px;}

  /* Admin overlay sidebar */
  .admin-wrap{flex-direction:column;height:auto;overflow:visible;}
  .admin-side{
    position:fixed;top:104px;left:0;bottom:0;
    z-index:300;width:min(280px,86vw);
    transform:translateX(-100%);
    transition:transform .3s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.2);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .admin-side.mobile-open{transform:translateX(0);}
  .admin-main{
    padding:14px;
    min-height:calc(100vh - 56px);
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
  .m-list-item{padding:14px 16px;font-size:14px;min-height:48px;}
  .m-del{opacity:1;}                /* Hover-only macht auf Touch keinen Sinn */

  /* Tabellen kompakter; bei Überbreite scrollt der ganze admin-main horizontal,
     damit die Tabelle als echte <table> erhalten bleibt (display:block würde
     die Spalten-Ausrichtung zwischen Zeilen zerstören). */
  .admin-main{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .atbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .atbl{font-size:12.5px;}
  .atbl th,.atbl td{padding:8px 10px;}

  /* Forms: 2-Spalten-Reihen werden auf Mobile zu 1 Spalte */
  .form-row{grid-template-columns:1fr;gap:0;}

  /* Modal – Bottom Sheet mit Safe-Area */
  .modal-ov{align-items:flex-end;padding:0;}
  .modal{border-radius:16px 16px 0 0;max-width:100%;width:100%;max-height:92vh;display:flex;flex-direction:column;}
  .modal-body{max-height:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .modal-foot{padding-bottom:max(14px,env(safe-area-inset-bottom));flex-wrap:wrap;}
  .modal-foot .btn{flex:1 1 auto;min-height:44px;}

  /* Lead-Cards kompakter */
  .lead-card{padding:14px;}
  .lead-card-actions .btn{flex:1 1 auto;min-height:40px;}

  /* Touch-Targets: alle primären Aktionsbuttons mind. 44px hoch */
  .btn{min-height:40px;}
  .btn.btn-sm{min-height:36px;}

  /* Tab-Untertabs (innerhalb einer Sektion) sauber scrollbar */
  .admin-tabs{margin:0 -14px 18px;padding:0 14px;}

  /* Footer */
  #site-footer{padding:24px 16px 16px;margin-top:24px;}
}

/* ============================================================
   PHONE  ≤ 480 px — extra-kompakt für Standard-Smartphones
   ============================================================ */
@media(max-width:480px){
  .admin-sec-tab{padding:8px 10px;font-size:12px;}
  .admin-topbar-actions .btn-sm{padding:6px 8px;font-size:11px;}
  /* Logout-Button: nur Pfeil-Icon zeigen, Label visuell verstecken */
  .admin-topbar-actions .btn-outline.btn-sm{font-size:0;}
  .admin-topbar-actions .btn-outline.btn-sm::before{content:'↩';font-size:14px;}
  .login-card{padding:28px 20px;}
  .lead-card-top{flex-direction:column;align-items:flex-start;}
  .logo-text{font-size:12.5px;letter-spacing:.8px;}
}
@media(max-width:380px){
  .logo-img{height:30px;}
  .logo-fallback-badge{width:30px;height:30px;font-size:12px;}
  .logo-text{font-size:11.5px;letter-spacing:.4px;}
  .nav-btn{padding:6px 8px;font-size:11px;}
}

/* Admin overlay backdrop */
.admin-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:299;
}
.admin-backdrop.visible{display:block;}

/* Admin mobile bar – hidden on desktop/tablet */
.admin-mobile-bar{
  display:none;
  padding:10px 16px;
  background:white;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.admin-mobile-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:var(--green);color:white;
  border:none;border-radius:6px;
  font-size:13px;font-weight:600;cursor:pointer;
}


/* ===================================================================
   REDESIGN-POLITUR (12.06.2026) – additiv & vollständig entfernbar.
   Rückgängig: diesen Block löschen ODER backups/design-20260612/styles.css zurückspielen.
   Alter Header bleibt unverändert.
   =================================================================== */
@font-face{font-family:'Hanken';src:url('/assets/fonts/hanken-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken';src:url('/assets/fonts/hanken-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken';src:url('/assets/fonts/hanken-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Hanken';src:url('/assets/fonts/hanken-800.woff2') format('woff2');font-weight:800;font-display:swap}

/* Barrierefreies Grün (Normal-Theme) + weichere Karten */
:root, body[data-theme="normal"]{
  --green:#2e7a1a; --green-dark:#225c14; --green-light:#eaf4e4;
  --card-radius:14px; --shadow:0 10px 28px -18px rgba(20,60,25,.42);
}
/* Markante, selbst gehostete Schrift (Header-Logo-Schrift bleibt via eigener Klasse erhalten) */
body{font-family:'Hanken','Segoe UI',Arial,sans-serif;}

/* Sichtbare Tastatur-Fokus-Ringe (A11y) – cleaner, ohne Form-Änderung */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.model-card:focus-visible,.opt-card:focus-visible,.prog-step:focus-visible,.nav-btn:focus-visible{
  outline:2px solid #1565c0;outline-offset:2px;
}
/* im dunklen Header weißer Ring statt grün-auf-grün */
.nav-btn:focus-visible{outline-color:#fff;}
/* Maus-Klick hinterlässt keinen Ring (nur Tastatur) */
.nav-btn:focus:not(:focus-visible){outline:none;}
/* Auswahl-Karten: dezenter Glow zusätzlich zum Rahmen */
.model-card.sel,.opt-card.sel{box-shadow:0 0 0 3px var(--green-light);}
.model-card{transition:all .2s;}
/* Primär-Button: weicher Schatten (Kontrast jetzt AA dank dunklerem Grün) */
.btn-primary{box-shadow:0 8px 18px -12px rgba(34,92,20,.65);}

/* ===================================================================
   REDESIGN-POLITUR TEIL 2 (12.06.2026) – sichtbare Layout-Verbesserungen.
   Additiv & reversibel: diesen Block (Teil 1 + Teil 2) löschen ODER
   backups/design-20260612/styles.css zurückspielen.
   =================================================================== */
/* mehr Luft */
.cfg-wrap{padding:34px 22px;}
.card{padding:32px;}
.card-title{font-size:24px;letter-spacing:-.01em;}
/* Buttons: moderne Pill-Form */
.btn{border-radius:999px;padding:12px 26px;}
/* Modell-Karten: größere Bilder, mehr Rundung, ✓ bei Auswahl */
.model-grid{gap:18px;}
.model-card{border-radius:16px;}
.model-img-wrap{height:170px;}
.model-card-body{padding:16px 16px 18px;}
.model-card.sel::after{content:"✓";position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;
  box-shadow:0 3px 10px rgba(20,60,25,.35);z-index:3;}
/* Options-Karten etwas luftiger + ✓ bei Auswahl */
.opt-card{border-radius:12px;padding:16px;}
.opt-card.sel::after{content:"✓";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;z-index:3;}
/* Fortschrittsleiste: kräftigere aktive Stufe */
.prog-step{padding:15px 18px;}
.prog-step.prog-active{background:var(--green-light);}
.step-num{width:24px;height:24px;}
/* Button-Reihe einheitlich: WhatsApp ebenfalls Pill-Form */
.btn-whatsapp{border-radius:999px;}

/* Aktions-Reihe (Zusammenfassung/Schritte) kompakter & cleaner */
.btn-nav{gap:8px;align-items:center;}
.btn-nav .btn{padding:10px 16px;font-size:13px;}
.btn-nav .btn-outline{border-width:1px;border-color:#e4e4e4;color:var(--gray);background:#fff;font-weight:600;}
.btn-nav .btn-outline:hover{color:var(--green);border-color:var(--green-light);background:var(--green-light);}
.btn-nav .btn-whatsapp{padding:10px 16px;font-size:13px;}
.btn-nav .btn-primary{padding:11px 24px;}        /* Haupt-CTA bleibt präsent */
@media(max-width:600px){.btn-nav .btn{font-size:12.5px;padding:10px 12px;}}
/* Deaktivierte Buttons cleaner (neutral ausgegraut) */
.btn:disabled,.btn[disabled]{opacity:.5;filter:grayscale(.45);cursor:not-allowed;box-shadow:none;transform:none;}
/* Embed-Feinschliff: nahtloser an die Hauptseite anschließen */
html.embedded .cfg-wrap{padding-top:10px;padding-bottom:10px;}
html.embedded .progress-bar{position:static;}
/* Embed-Fix: kein viewport-gebundenes min-height → stoppt die Auto-Höhe-Endlosschleife */
html.embedded body{min-height:0!important;}
html.embedded{min-height:0!important;}