/* ============================================================
   LADENPILOT — Design-Builder v3 „Sofort-Website"
   1. Shell + Topbar        5. Dock (Steuerung)
   2. Die Website (Bühne)   6. Duelle / Tuning / Module / Form
   3. Layout-/Ecken-/Anim-  7. Hilfe-Overlay
      Varianten             8. Responsive + Reduced Motion
   4. Branchen-Bildwelten
   ============================================================ */

/* ---------- 1. SHELL + TOPBAR ---------- */
body.builder-body{min-height:100dvh;overflow-x:hidden}
.stage{min-height:100dvh}

.bhead{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:11px 20px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.bhead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 45%,transparent),transparent)}
.bhead-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:900;font-size:1.06rem;letter-spacing:-.01em}
.bhead-brand .mark{width:30px;height:30px;display:grid;place-items:center}
.bhead-brand .logo-img{width:26px;height:26px;object-fit:contain}
[data-theme="dark"] .logo-light{display:none}
[data-theme="light"] .logo-dark{display:none}
.bhead-tag{font-family:var(--font-body);font-weight:600;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 34%,var(--border-strong));border-radius:100px;padding:3px 10px}
@media (max-width:680px){.bhead-name,.bhead-tag,.bhead-exit{display:none}}

.bhead-actions{display:flex;align-items:center;gap:9px}
.bhead-icon{width:42px;height:42px;border-radius:12px;border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--fg);background:var(--surface);transition:background .3s,transform .2s,border-color .3s;cursor:pointer}
.bhead-icon:hover{background:var(--surface-2);transform:translateY(-1px);border-color:var(--fg-faint)}
.bhead-icon svg{width:19px;height:19px}
[data-theme="dark"] .theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:none}

/* Auto-Save-Anzeige */
.bsave{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:600;font-size:.76rem;color:var(--fg-faint);padding:9px 13px;border-radius:100px;border:1px solid var(--border);background:var(--surface);opacity:0;transform:translateY(-3px);transition:opacity .35s,transform .35s,color .35s,border-color .35s;white-space:nowrap}
.bsave svg{width:15px;height:15px;flex-shrink:0}
.bsave[data-state="saving"],.bsave[data-state="saved"],.bsave[data-state="local"]{opacity:1;transform:none}
.bsave[data-state="saving"] svg{animation:bsavePulse 1.1s ease-in-out infinite}
.bsave[data-state="saved"]{color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,var(--border))}
@keyframes bsavePulse{50%{opacity:.35}}
@media (max-width:680px){.bsave #saveLabel{display:none}.bsave{padding:9px 10px}}

/* ---------- 2. DIE WEBSITE (Vollbild-Bühne) ---------- */
.site{
  --b-primary:#e2622f;--b-ink:#fff;--b-bg:#1c1410;--b-surface:#2a1d16;
  --b-fg:#f6ece4;--b-muted:#c2b1a4;--b-border:rgba(255,255,255,.1);
  --b-radius:14px;--b-img:14px;--b-fh:'Satoshi',sans-serif;--b-fb:'General Sans',sans-serif;
  background:var(--b-bg);color:var(--b-fg);font-family:var(--b-fb);
  min-height:100dvh;display:flex;flex-direction:column;
  padding:86px 0 460px;
  transition:background .55s var(--ease),color .55s var(--ease),filter .6s var(--ease),transform .6s var(--ease);
}
.site *{transition:background .5s var(--ease),color .5s var(--ease),border-radius .5s var(--ease),border-color .5s}
.site>*{width:100%;max-width:1080px;margin-left:auto;margin-right:auto}

/* Warte-Zustand: Seite schlummert hinter dem Start-Dock */
.site.dim{filter:blur(7px) saturate(.65) brightness(.72);transform:scale(1.01);pointer-events:none}

/* Aufbau-Animation nach jeder großen Entscheidung
   ('wake' statt 'reveal' — .reveal ist in styles.css vergeben) */
.site.wake>*{animation:siteIn .55s var(--ease) both}
.site.wake>*:nth-child(1){animation-delay:.02s}
.site.wake>*:nth-child(2){animation-delay:.08s}
.site.wake>*:nth-child(3){animation-delay:.14s}
.site.wake>*:nth-child(4){animation-delay:.2s}
.site.wake>*:nth-child(5){animation-delay:.26s}
.site.wake>*:nth-child(n+6){animation-delay:.32s}
@keyframes siteIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px}
.lp-logo{font-family:var(--b-fh);font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.lp-logo.sm{font-size:.95rem;opacity:.85}
.lp-links{display:flex;gap:16px;flex:1;justify-content:center}
.lp-links i{width:38px;height:8px;border-radius:4px;background:var(--b-muted);opacity:.35}
.lp-navcta{font-family:var(--b-fh);font-weight:600;font-size:.86rem;padding:9px 18px;border-radius:var(--b-radius);background:var(--b-primary);color:var(--b-ink);white-space:nowrap}

.lp-hero{padding:16px 26px 30px;position:relative}
.lp-hero-media{height:clamp(200px,32vw,360px);border-radius:var(--b-img);margin-bottom:26px;background:var(--b-hero,radial-gradient(130% 120% at 25% 18%,#ffe1ad 0%,#ff9d4d 40%,color-mix(in srgb,var(--b-primary) 72%,#b53e12) 86%));box-shadow:0 28px 60px -30px rgba(0,0,0,.6)}
.lp-eyebrow{display:inline-block;font-family:var(--b-fh);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b-primary);margin-bottom:12px}
.lp-title{font-family:var(--b-fh);font-weight:800;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.02em;margin-bottom:14px;max-width:18ch}
.lp-sub{font-size:clamp(.98rem,1.4vw,1.15rem);color:var(--b-muted);line-height:1.55;max-width:44ch;margin-bottom:22px}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lp-cta{display:inline-block;font-family:var(--b-fh);font-weight:700;font-size:.98rem;padding:14px 28px;border-radius:var(--b-radius);background:var(--b-primary);color:var(--b-ink);box-shadow:0 16px 34px -14px color-mix(in srgb,var(--b-primary) 80%,transparent)}
.lp-cta-2{background:transparent;color:var(--b-fg);border:1.5px solid var(--b-border);box-shadow:none}

/* Feature-Badges */
.lp-badges{display:none;flex-wrap:wrap;gap:9px;padding:0 26px 8px}
.lp-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--b-fh);font-weight:600;font-size:.78rem;letter-spacing:.02em;padding:8px 14px;border-radius:100px;background:var(--b-surface);border:1px solid var(--b-border);color:var(--b-muted);white-space:nowrap}

.lp-section-label{display:flex;align-items:center;gap:14px;padding:22px 26px 4px;font-family:var(--b-fh);font-weight:600;font-size:.88rem;letter-spacing:.04em;color:var(--b-muted)}
.lp-section-label span{flex:1;height:1px;background:var(--b-border)}

.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:14px 26px 26px}
.lp-card{background:var(--b-surface);border:1px solid var(--b-border);border-radius:var(--b-radius);padding:14px;display:flex;flex-direction:column;gap:10px}
.lp-photo{height:clamp(130px,16vw,190px);border-radius:var(--b-img)}
.lp-cap{height:10px;border-radius:5px;background:var(--b-muted);opacity:.4}
.lp-cap.short{width:60%}

/* Modul: Online-Bestellung */
.lp-order{display:none;flex-direction:column;gap:10px;margin:0 auto 22px;padding:16px 26px 0}
.lp-oline{display:flex;align-items:center;gap:14px;background:var(--b-surface);border:1px solid var(--b-border);border-radius:var(--b-radius);padding:12px 14px}
.lp-othumb{width:52px;height:52px;border-radius:var(--b-img);flex-shrink:0}
.lp-othumb.o1{background:var(--b-ph1)}
.lp-othumb.o2{background:var(--b-ph3)}
.lp-ometa{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lp-ometa b{font-family:var(--b-fh);font-weight:700;font-size:.95rem}
.lp-ometa i{font-style:normal;font-size:.82rem;color:var(--b-muted)}
.lp-oadd{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--b-primary);color:var(--b-primary);display:grid;place-items:center;font-weight:700;flex-shrink:0}
.lp-octa{font-family:var(--b-fh);font-weight:700;font-size:.92rem;text-align:center;padding:14px;border-radius:var(--b-radius);background:var(--b-primary);color:var(--b-ink)}

/* Modul: Bewertungen */
.lp-review{display:none;flex-direction:column;gap:6px;margin:0 auto 22px;padding:18px 22px;border-radius:var(--b-radius);background:var(--b-surface);border:1px solid var(--b-border);max-width:1028px!important;width:calc(100% - 52px)!important}
.lp-review .lp-stars{color:var(--b-primary);font-size:.92rem;letter-spacing:4px}
.lp-review .lp-quote{font-family:var(--b-fh);font-weight:600;font-size:1.05rem;color:var(--b-fg);line-height:1.4}
.lp-review .lp-rsrc{font-size:.78rem;color:var(--b-muted)}

/* Modul: Galerie */
.lp-gal{display:none;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 26px 24px}
.lp-gal i{display:block;height:clamp(110px,15vw,170px);border-radius:var(--b-img)}
.lp-gal i:nth-child(1){background:var(--b-ph2)}
.lp-gal i:nth-child(2){background:var(--b-ph3)}
.lp-gal i:nth-child(3){background:var(--b-ph1)}

/* Öffnungszeiten */
.lp-hours{display:flex;align-items:center;gap:10px;padding:0 26px 26px;font-size:.86rem;color:var(--b-muted)}
.lp-hours-dot{width:8px;height:8px;border-radius:50%;background:#3fca6b;box-shadow:0 0 8px rgba(63,202,107,.75);flex-shrink:0}
.lp-hours-cta{display:inline-block;margin-left:auto;font-family:var(--b-fh);font-weight:600;font-size:.8rem;padding:8px 16px;border-radius:100px;border:1.5px solid var(--b-primary);color:var(--b-primary);white-space:nowrap}

.lp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 26px;border-top:1px solid var(--b-border)}
.lp-foot-meta{font-size:.8rem;color:var(--b-muted);text-align:right}

/* ---------- 3a. ECKEN-VARIANTEN ---------- */
.site.img-sharp{--b-img:0;--b-radius:3px}
.site.img-soft{--b-img:14px;--b-radius:12px}
.site.img-round{--b-img:26px;--b-radius:18px}
.site.img-pill{--b-img:44px;--b-radius:28px}
.site.img-circle{--b-radius:20px}
.site.img-circle .lp-photo{border-radius:50%;width:clamp(110px,13vw,150px);height:clamp(110px,13vw,150px);align-self:center}
.site.img-circle .lp-hero-media{border-radius:30px}
.site.img-mask{--b-radius:18px}
.site.img-mask .lp-photo{border-radius:62% 38% 54% 46% / 52% 56% 44% 48%}
.site.img-mask .lp-hero-media{border-radius:54% 46% 58% 42% / 46% 54% 46% 54%}

/* ---------- 3b. LAYOUT-VARIANTEN ---------- */
.site.lay-stage .lp-hero{max-width:none;padding:0;margin-bottom:10px}
.site.lay-stage .lp-hero-media{height:min(58vh,560px);margin:0;border-radius:0;box-shadow:none}
.site.lay-stage .lp-hero-copy{position:absolute;left:0;right:0;bottom:0;max-width:1080px;margin:0 auto;padding:0 26px 40px;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.site.lay-stage .lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
.site.lay-stage .lp-hero-copy{z-index:1}
.site.lay-stage .lp-sub{color:rgba(255,255,255,.88)}
.site.lay-stage .lp-cta-2{color:#fff;border-color:rgba(255,255,255,.65)}

.site.lay-split .lp-hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.site.lay-split .lp-hero-media{height:clamp(240px,30vw,400px);margin:0;order:2}
.site.lay-split .lp-title{font-size:clamp(1.8rem,3.6vw,2.9rem)}

.site.lay-magazine .lp-hero-media{height:clamp(150px,20vw,240px)}
.site.lay-magazine .lp-title{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.site.lay-magazine .lp-cards{grid-template-columns:repeat(2,1fr)}
.site.lay-magazine .lp-card:first-child{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.site.lay-magazine .lp-card:first-child .lp-photo{width:46%;height:auto;min-height:150px}

.site.lay-menu .lp-hero{padding-bottom:16px}
.site.lay-menu .lp-hero-media{height:clamp(130px,17vw,200px)}
.site.lay-menu .lp-title{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.site.lay-menu .lp-cards{grid-template-columns:1fr;gap:0;max-width:820px}
.site.lay-menu .lp-card{flex-direction:row;align-items:center;border-radius:0;border-width:0 0 1px;background:transparent;padding:16px 0}
.site.lay-menu .lp-card .lp-photo{width:66px;height:66px;flex-shrink:0}
.site.lay-menu .lp-cap{flex:1}

.site.lay-gallery .lp-hero{text-align:center;padding-bottom:16px}
.site.lay-gallery .lp-hero-media{display:none}
.site.lay-gallery .lp-title,.site.lay-gallery .lp-sub{margin-left:auto;margin-right:auto}
.site.lay-gallery .lp-cta-row{justify-content:center}
.site.lay-gallery .lp-cards{grid-template-columns:repeat(3,1fr);gap:12px}
.site.lay-gallery .lp-card{padding:0;border:0;background:transparent}
.site.lay-gallery .lp-photo{height:clamp(160px,20vw,240px)}
.site.lay-gallery .lp-cap{display:none}

/* ---------- 3c. ANIMATIONS-VARIANTEN ---------- */
.site.anim-lively .lp-cta{animation:lpPulse 1.8s var(--ease) infinite}
@keyframes lpPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.site.anim-lively .lp-card{animation:lpFloat 3s var(--ease) infinite}
.site.anim-lively .lp-card:nth-child(2){animation-delay:.3s}
.site.anim-lively .lp-card:nth-child(3){animation-delay:.6s}
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.site.anim-none *{animation:none!important}

/* ---------- 4. BRANCHEN-BILDWELTEN ---------- */
.site{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ffe1ad,#ff9d4d 38%,#e25a1c 78%,#b53e12);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffe9b0,#f4b04a 42%,#c97a1f);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#d7f5b8,#7cc96a 45%,#2f7d3f);
}
.lp-cards .lp-card:nth-child(1) .lp-photo{background:var(--b-ph1)}
.lp-cards .lp-card:nth-child(2) .lp-photo{background:var(--b-ph2)}
.lp-cards .lp-card:nth-child(3) .lp-photo{background:var(--b-ph3)}

.site.br-cafe{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#f9edda,#dbb582 40%,#8a5a2e 82%);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffdfe8,#ef8fab 45%,#a63d5f);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#ffedc4,#eab35f 45%,#9c672a);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#f6e6cd,#d9a468 45%,#6f4320 88%);
}
.site.br-bar{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ecd3ff,#b06ae6 45%,#5c2b90);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffe3ad,#dd923e 45%,#7d4b16);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#ccf6e6,#54cd9e 45%,#1e7c5a);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#c9b3e8,#7a4ec2 45%,#2a1650 88%);
}
.site.br-baeckerei{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#f6dfb8,#cf9350 45%,#7a4a1e);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffedc8,#e2ac5e 45%,#93601f);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#f2d6b4,#c98d4e 42%,#6e421c);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#f7e3c2,#d8a05c 45%,#7c4a1c 88%);
}
.site.br-pizzeria{
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffdcd2,#ee6a4a 45%,#8f2c1a);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#f8ecd6,#d0a468 45%,#6e4a2a);
}
.site.br-bistro{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ffe6c6,#ec9350 45%,#9c4e1c);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffe4b2,#e8a43e 45%,#98590f);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#f3e0c8,#dd9450 45%,#7a3f18 88%);
}
.site.br-foodtruck{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ffeeb4,#f2ac3c 45%,#b45c16);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#e9f3c0,#a5c85e 45%,#5c7c24);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#fff3b8,#f2c53e 45%,#b8860b);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#ffd9a3,#ff7f46 45%,#8e2f5c 88%);
}
.site.br-eisdiele{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ffe6ef,#ff9fbd 45%,#e0567e);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ecf8de,#abd97c 45%,#5d9c3c);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#ecd2b6,#a06c3c 45%,#4c2d15);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#fff0f6,#ffc4d9 45%,#c06fa0 88%);
}
.site.br-imbiss{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ffdcb4,#dd7e3e 45%,#7e3c12);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ffdfab,#ec6a3e 45%,#a22c12);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#fff3b8,#f2c53e 45%,#b8860b);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#f6dfc0,#d98a44 45%,#6e3a14 88%);
}
.site.br-weinbar{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#f2ccd8,#c04868 42%,#5e1529);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#fdf4ca,#ecca5c 45%,#aa882c);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#e4d4f2,#9060bd 45%,#3e2264);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#e8c4cd,#a53a52 45%,#40101f 88%);
}
.site.br-burger{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#ffe8ba,#eca44c 45%,#9e5c1c);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#ecc4a4,#a45e32 45%,#4e2612);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#fff3b8,#f2c53e 45%,#b8860b);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#ffe2b0,#f08c3c 45%,#8c3c14 88%);
}
.site.br-sushi{
  --b-ph1:radial-gradient(120% 130% at 28% 18%,#fff3ea,#ff9d74 45%,#e05c3c);
  --b-ph2:radial-gradient(120% 130% at 30% 20%,#dcecd4,#5f7f4e 48%,#1e2e1e);
  --b-ph3:radial-gradient(120% 130% at 30% 20%,#edf6de,#a6cc7c 45%,#4c7c3c);
  --b-hero:radial-gradient(130% 120% at 25% 18%,#fff6f0,#ffb492 45%,#c24e2c 88%);
}

/* ---------- 5. DOCK ---------- */
.dock{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:150;
  width:min(660px,calc(100vw - 20px));
  border-radius:24px;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03) inset,0 24px 60px -34px color-mix(in srgb,var(--primary) 55%,transparent);
  animation:dockIn .55s var(--ease) backwards;
  transition:transform .5s var(--ease),opacity .4s;
}
@keyframes dockIn{from{opacity:0;transform:translateX(-50%) translateY(26px)}to{opacity:1;transform:translateX(-50%)}}
/* Duell-Moment: Dock taucht ab, die Seite zeigt ihren neuen Look */
.dock.peek{transform:translateX(-50%) translateY(calc(100% + 26px))}

.dock-head{display:flex;align-items:center;gap:12px;padding:13px 16px 0}
.dock-back{width:38px;height:38px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .25s,opacity .25s;flex-shrink:0}
.dock-back:hover{background:var(--surface-2)}
.dock-back[disabled]{opacity:.3;pointer-events:none}
.dock-back svg{width:17px;height:17px}
.dock-meta{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0}
.dock-tag{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.dock-dots{display:flex;gap:7px}
.dock-dots span{width:8px;height:8px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);transition:background .3s,transform .3s;cursor:pointer}
.dock-dots span.done{background:color-mix(in srgb,var(--primary) 55%,transparent);border-color:transparent}
.dock-dots span.cur{background:var(--grad-warm);transform:scale(1.4);border-color:transparent}
.dock-skip{font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--fg-faint);background:none;cursor:pointer;padding:8px 10px;border-radius:10px;transition:color .25s;flex-shrink:0}
.dock-skip:hover{color:var(--fg)}

.dock-body{max-height:min(56vh,540px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px 20px 22px}

.dk-q{font-family:var(--font-head);font-weight:900;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.dk-q em{font-family:var(--font-serif);font-style:italic;font-weight:500;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--primary)}
.dk-lead{color:var(--fg-muted);font-size:.95rem;line-height:1.5;margin-bottom:16px}
.dk-actions{display:flex;gap:12px;margin-top:18px}
.dk-next{flex:1;justify-content:center}
.dk-next svg{width:18px;height:18px}
.dk-next.is-save{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent),var(--shadow-glow)}
.dk-next[disabled]{opacity:.45;pointer-events:none}

/* ---------- 6a. START: Branche + Name ---------- */
.dk-field{margin-bottom:14px}
.dk-field input{width:100%;min-height:50px;padding:13px 16px;font:inherit;font-size:1rem;background:var(--bg-soft);color:var(--fg);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);transition:border-color .25s,box-shadow .25s}
.dk-field input::placeholder{color:var(--fg-faint)}
.dk-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}

.dk-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dk-chip{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:14px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--fg);font-family:var(--font-head);font-weight:600;font-size:.86rem;cursor:pointer;transition:border-color .25s,transform .2s,background .25s;text-align:left}
.dk-chip:hover{transform:translateY(-2px);border-color:var(--fg-faint)}
.dk-chip[aria-pressed="true"]{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface)));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--primary) 60%,transparent)}
.dkc-ico{width:22px;height:22px;color:var(--primary);flex-shrink:0}
.dkc-ico svg{width:100%;height:100%}

/* ---------- 6b. LOOK-DUELLE ---------- */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duel-card{display:flex;flex-direction:column;gap:9px;background:none;cursor:pointer;text-align:left;border-radius:18px;padding:0;transition:transform .22s var(--ease)}
.duel-card:hover{transform:translateY(-4px)}
.duel-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.dc-frame{display:flex;flex-direction:column;gap:8px;border-radius:16px;border:1px solid;padding:12px;min-height:190px;overflow:hidden;box-shadow:0 18px 44px -20px rgba(0,0,0,.55);transition:box-shadow .25s}
.duel-card:hover .dc-frame{box-shadow:0 24px 54px -20px rgba(0,0,0,.6),0 0 0 1.5px color-mix(in srgb,var(--primary) 45%,transparent)}
.duel-card.won .dc-frame{box-shadow:0 0 0 2.5px var(--primary),0 24px 54px -18px color-mix(in srgb,var(--primary) 55%,transparent)}
.dc-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dc-nav b{font-size:.74rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-nav i{width:26px;height:9px;border-radius:5px;flex-shrink:0}
.dc-body{display:flex;flex-direction:column;gap:8px;flex:1}
.dc-hero{display:block;height:58px;flex-shrink:0}
.dc-hero-full{height:82px;margin:-12px -12px 0;border-radius:0}
.dc-title{font-size:.82rem;font-weight:700;line-height:1.2}
.dc-cta{align-self:flex-start;font-size:.62rem;font-weight:700;padding:6px 11px;white-space:nowrap}
.dc-split{display:flex;gap:9px;flex:1}
.dc-split .dc-body{flex:1.2}
.dc-split .dc-hero{width:44%;height:auto;min-height:90px}
.dc-name{font-family:var(--font-head);font-weight:700;font-size:.88rem;text-align:center}
.duel-count{margin-top:12px;text-align:center;font-size:.8rem;color:var(--fg-faint)}

/* ---------- 6c. FEINTUNING ---------- */
.tune-sub{font-family:var(--font-head);font-weight:700;font-size:.86rem;margin:16px 0 9px;color:var(--fg-muted)}
.tune-sub:first-of-type{margin-top:2px}
.tune-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.tn-dot{width:44px;height:44px;border-radius:50%;padding:3px;border:2px solid transparent;background:none;cursor:pointer;flex-shrink:0;transition:border-color .25s,transform .2s}
.tn-dot span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tn-dot:hover{transform:translateY(-2px)}
.tn-dot[aria-pressed="true"]{border-color:var(--primary)}
.tn-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--fg);font-family:var(--font-head);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color .25s,background .25s,transform .2s}
.tn-chip:hover{transform:translateY(-2px)}
.tn-chip[aria-pressed="true"]{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface)));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--primary) 60%,transparent)}
.tn-font b{font-size:1.15rem;font-weight:700;line-height:1}
.tn-lay{border-radius:14px}
.lay-tile{width:52px;aspect-ratio:5/3.4;border-radius:7px;background:var(--bg-soft);border:1px solid var(--border);padding:5px;display:flex;flex-direction:column;gap:3px;overflow:hidden;flex-shrink:0}
.lay-tile i{display:block;background:var(--fg-faint);opacity:.32;border-radius:2px;min-height:3px}
.lay-tile .t-bar{height:4px;width:55%}
.lay-tile .t-big{flex:1;background:var(--primary);opacity:.55;border-radius:3px}
.lay-tile .t-row{display:flex;gap:3px;flex:1}
.lay-tile .t-row i{flex:1;opacity:.25}
.cn-demo{width:22px;height:22px;background:var(--grad-warm);flex-shrink:0}
.cn-sharp{border-radius:0}.cn-soft{border-radius:6px}.cn-round{border-radius:9px}
.cn-pill{border-radius:11px}.cn-circle{border-radius:50%}
.cn-mask{border-radius:62% 38% 55% 45% / 50% 56% 44% 50%}

/* ---------- 6d. MODULE (Funktionen) ---------- */
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mod{position:relative;display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:14px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--fg);cursor:pointer;text-align:left;transition:border-color .25s,background .25s,transform .2s}
.mod:hover{transform:translateY(-2px)}
.mod b{font-family:var(--font-head);font-weight:700;font-size:.9rem;padding-right:26px}
.mod span:not(.mod-check){font-size:.76rem;color:var(--fg-muted)}
.mod[aria-pressed="true"]{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 15%,var(--surface)),color-mix(in srgb,var(--primary) 6%,var(--surface)));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--primary) 60%,transparent)}
.mod-check{position:absolute;top:10px;right:10px;width:21px;height:21px;border-radius:50%;background:var(--grad-warm);color:var(--primary-ink);display:none;place-items:center}
.mod-check svg{width:12px;height:12px}
.mod[aria-pressed="true"] .mod-check{display:grid;animation:checkPop .3s var(--ease) both}
@keyframes checkPop{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- 6e. KONTAKT-FORMULAR ---------- */
.recap{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.recap-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:100px;background:var(--surface);border:1px solid var(--border-strong);font-size:.8rem;font-weight:600;font-family:var(--font-head)}
.recap-edit{color:var(--primary);cursor:pointer;transition:border-color .25s}
.recap-edit:hover{border-color:var(--primary)}

.bvalue{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),color-mix(in srgb,var(--accent) 7%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}
.bvalue svg{width:20px;height:20px;color:var(--primary);flex-shrink:0;margin-top:2px}
.bvalue b{font-family:var(--font-head)}
.bvalue .bv-line{font-size:.92rem;line-height:1.5}
.bvalue .bv-sub{display:block;font-size:.82rem;color:var(--fg-muted);margin-top:3px}

.bform{display:grid;gap:14px}
.bfield{display:flex;flex-direction:column;gap:6px}
.bgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.bgrid2{grid-template-columns:1fr}}
.bfield label{font-family:var(--font-head);font-weight:600;font-size:.87rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bfield label .req{color:var(--primary)}
.bfield .opt-note{font-weight:400;color:var(--fg-faint);font-size:.76rem}
.bfield input{width:100%;min-height:46px;padding:11px 14px;font:inherit;font-size:.98rem;background:var(--bg-soft);color:var(--fg);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);transition:border-color .25s,box-shadow .25s}
.bfield input::placeholder{color:var(--fg-faint)}
.bfield input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.bfield.invalid input{border-color:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.18)}
.bfield .err{display:none;font-size:.8rem;color:#ff6b6b;align-items:center;gap:5px}
.bfield.invalid .err{display:flex}
.bfield .err svg{width:14px;height:14px;flex-shrink:0}

.sum-note{margin-top:14px;padding:13px 15px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 24%,transparent);font-size:.86rem;color:var(--fg-muted);display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.sum-note svg{width:19px;height:19px;color:var(--primary);flex-shrink:0;margin-top:1px}

/* ---------- 7. HILFE-OVERLAY ---------- */
.bguide{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px}
.bguide[hidden]{display:none}
.bguide-backdrop{position:absolute;inset:0;background:rgba(5,4,9,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .3s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bguide-card{position:relative;z-index:1;width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow),0 0 70px -30px color-mix(in srgb,var(--primary) 60%,transparent);animation:guidePop .4s var(--ease) both}
@keyframes guidePop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.bguide-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--fg-muted);background:var(--surface-2);cursor:pointer;transition:background .25s}
.bguide-x:hover{background:var(--border-strong)}
.bguide-x svg{width:18px;height:18px}
.bguide-card h2{font-family:var(--font-head);font-weight:900;font-size:clamp(1.4rem,4vw,1.85rem);line-height:1.07;letter-spacing:-.02em;margin-bottom:20px}
.bguide-card .serif{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--primary)}
.bguide-points{list-style:none;display:grid;gap:14px;margin-bottom:26px}
.bguide-points li{display:flex;gap:13px;align-items:flex-start}
.bgp-ico{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface-2))}
.bgp-ico svg{width:20px;height:20px}
.bguide-points b{display:block;font-family:var(--font-head);font-weight:700;font-size:.96rem}
.bguide-points span{font-size:.87rem;color:var(--fg-muted);line-height:1.45}
.bguide-actions{display:flex;gap:12px}
.bguide-actions .btn{flex:1}

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width:900px){
  .site{padding-bottom:520px}
  .lp-cards{grid-template-columns:1fr 1fr}
  .site.lay-gallery .lp-cards{grid-template-columns:repeat(2,1fr)}
  .site.lay-split .lp-hero{grid-template-columns:1fr}
  .site.lay-split .lp-hero-media{order:0}
}
@media (max-width:640px){
  .dock{width:calc(100vw - 12px);bottom:8px;border-radius:20px}
  .dock-body{max-height:52vh;padding:14px 15px 18px}
  .dk-chips{grid-template-columns:1fr 1fr}
  .lp-nav{padding:14px 18px}
  .lp-links{display:none}
  .lp-hero{padding:10px 18px 24px}
  .lp-badges,.lp-section-label,.lp-cards,.lp-hours,.lp-gal{padding-left:18px;padding-right:18px}
  .lp-order{padding-left:18px;padding-right:18px}
  .lp-review{width:calc(100% - 36px)!important}
  .lp-cards{gap:12px}
  .lp-foot{padding:18px}
  .site.lay-stage .lp-hero-copy{padding:0 18px 28px}
  .dc-frame{min-height:170px;padding:10px}
  .dc-hero-full{margin:-10px -10px 0}
}
@media (max-width:380px){
  .duel{grid-template-columns:1fr}
  .dc-frame{min-height:150px}
}
@media (max-height:640px){
  .dock-body{max-height:46vh}
}

@media (prefers-reduced-motion:reduce){
  .site,.site *,.site.wake>*,.dock,.duel-card,.dc-frame,.tn-chip,.tn-dot,.mod,.dk-chip,.bguide-card,.bguide-backdrop{animation:none!important;transition:none!important}
  .bsave svg{animation:none!important}
}