/* ============================================================
   Konfigurator „Eigene PWA" — UI-Controls + Live-Vorschau
   ============================================================ */

.cfg-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
@media (max-width: 940px){ .cfg-wrap { grid-template-columns: 1fr; } }
.cfg-preview { position: sticky; top: 90px; }
@media (max-width: 940px){ .cfg-preview { position: static; order: -1; margin-bottom: 8px; } }

/* ── Tab-Stepper ──────────────────────────── */
.stepper { display:flex; gap:8px; margin-bottom: 26px; flex-wrap:wrap; }
.stab {
  flex:1; min-width: 120px; display:flex; align-items:center; gap:9px; justify-content:center;
  padding:11px 12px; border:1.5px solid var(--border); background:var(--white); color:var(--muted);
  border-radius:12px; font:600 .92rem/1 'DM Sans',sans-serif; cursor:pointer; transition:.15s;
}
.stab i { width:22px; height:22px; border-radius:50%; background:var(--brand-pale); color:var(--brand);
  display:grid; place-items:center; font-style:normal; font-size:.82rem; transition:.15s; }
.stab.on { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-pale); }
.stab.on i { background:var(--brand); color:#fff; }
.stab.done i { background:var(--brand); color:#fff; }

.cfg-step { display:none; }
.cfg-step.active { display:block; animation: fade .25s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.cfg-actions { display:flex; gap:12px; margin-top:26px; }
.cfg-actions .spacer { flex:1; }

/* ── Blöcke ───────────────────────────────── */
.cfg-block { padding:22px 0; border-bottom:1px solid var(--border); }
.cfg-block:first-child { padding-top:4px; }
.cfg-block:last-of-type { border-bottom:none; }
.block-head { margin-bottom:16px; }
.block-head h3 { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.05rem; }
.block-head p { color:var(--muted); font-size:.92rem; margin-top:3px; }

/* ── Themenwelten ─────────────────────────── */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .theme-grid { grid-template-columns:repeat(2,1fr); } }
.theme-card { border:2px solid var(--border); border-radius:14px; padding:10px; cursor:pointer; background:var(--white); transition:.15s; text-align:left; }
.theme-card:hover { border-color:var(--brand-pale2); transform:translateY(-2px); }
.theme-card.sel { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-pale); }
.theme-card .tc-prev { height:46px; border-radius:9px; display:flex; overflow:hidden; }
.theme-card .tc-prev b { flex:1; } .theme-card .tc-prev .a{flex:2}
.theme-card .tc-name { font-size:.84rem; font-weight:600; margin-top:7px; color:var(--ink); }

/* ── Farbwahl ─────────────────────────────── */
.color-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:520px){ .color-cols { grid-template-columns:1fr; } }
.cp-label { font-weight:600; font-size:.9rem; display:block; margin-bottom:8px; }
.swatches { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); transition:.12s; padding:0; }
.swatch:hover { transform:scale(1.1); }
.swatch.sel { box-shadow:0 0 0 2px var(--ink); transform:scale(1.12); }
.color-row { display:flex; align-items:center; gap:12px; margin-top:12px; cursor:pointer; }
.color-row input[type=color]{ width:48px; height:40px; padding:2px; border-radius:10px; border:1.5px solid var(--border); background:#fff; cursor:pointer; }
.color-row span { font-variant-numeric:tabular-nums; font-weight:600; color:var(--muted); font-size:.9rem; }
.palette { display:flex; gap:6px; margin-top:18px; }
.palette span { flex:1; height:24px; border-radius:6px; }

/* ── Segmentierte Schalter ────────────────── */
.seg { display:inline-flex; background:var(--brand-pale); border-radius:11px; padding:4px; gap:4px; }
.seg button { border:none; background:none; padding:9px 16px; border-radius:8px; font:600 .92rem 'DM Sans',sans-serif; color:var(--brand-dark); cursor:pointer; transition:.12s; white-space:nowrap; }
.seg button.on { background:var(--white); color:var(--brand-dark); box-shadow:var(--shadow-s); }
.seg.sm button { padding:7px 13px; font-size:.86rem; }

/* ── Schriftpaarungen ─────────────────────── */
.font-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:520px){ .font-grid { grid-template-columns:1fr; } }
.font-card { border:2px solid var(--border); border-radius:13px; padding:14px 16px; cursor:pointer; background:var(--white); transition:.15s; }
.font-card:hover { border-color:var(--brand-pale2); }
.font-card.sel { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-pale); }
.font-card .fc-h { font-size:1.4rem; line-height:1; color:var(--ink); }
.font-card .fc-b { font-size:.82rem; color:var(--muted); margin-top:5px; }
.font-card .fc-name { font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); margin-top:9px; }

/* ── Slider ───────────────────────────────── */
.slider-row { margin:18px 0; }
.slider-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.slider-head label { font-weight:600; font-size:.95rem; }
.slider-head output { font-weight:700; color:var(--brand-dark); font-variant-numeric:tabular-nums; }
.slider-scale { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:4px; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand) var(--p,50%),var(--brand-pale2) var(--p,50%)); cursor:pointer; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--brand); box-shadow:var(--shadow-s); cursor:pointer; transition:.1s; }
input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.12); }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--brand); cursor:pointer; }
input[type=range]::-moz-range-track{ height:8px; border-radius:99px; background:var(--brand-pale2); }

/* ── Optionszeilen / Toggle ───────────────── */
.opt-row { display:flex; align-items:center; gap:18px; padding:16px 0; border-top:1px solid var(--border); }
.opt-row:first-of-type { border-top:none; }
.opt-row > div:first-child { flex:1; }
.opt-row strong { display:block; font-size:.98rem; }
.opt-row span { font-size:.86rem; color:var(--muted); }
.switch { position:relative; display:inline-block; width:52px; height:30px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:var(--border); border-radius:99px; transition:.2s; cursor:pointer; }
.switch span::before { content:''; position:absolute; width:24px; height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background:var(--brand); }
.switch input:checked + span::before { transform:translateX(22px); }

/* ── Logo-Drop ────────────────────────────── */
.drop { border:2px dashed var(--brand-pale2); border-radius:var(--radius); padding:22px; text-align:center; cursor:pointer; transition:.15s; background:var(--white); }
.drop:hover { border-color:var(--brand); background:var(--brand-pale); }
.drop img { max-height:72px; margin:0 auto 8px; border-radius:8px; }
.drop small { color:var(--muted); }

/* ── URL + Slug ───────────────────────────── */
.url-field { display:flex; align-items:stretch; border:1.5px solid var(--border); border-radius:var(--radius-s); overflow:hidden; }
.url-field input { border:none; border-radius:0; }
.url-field input:focus { box-shadow:none; }
.url-field .suffix { display:flex; align-items:center; padding:0 14px; background:var(--brand-pale); color:var(--brand-dark); font-weight:600; font-size:.95rem; white-space:nowrap; }
.slug-msg { font-size:.85rem; margin-top:6px; min-height:1.2em; }
.slug-msg.bad { color:#b3261e; } .slug-msg.good { color:#1f7a3d; }

/* ── Erfolg ───────────────────────────────── */
.success { display:none; text-align:center; padding:20px 0; }
.success.show { display:block; }
.success .ok-ico { width:74px; height:74px; border-radius:50%; background:var(--brand-pale); display:grid; place-items:center; margin:0 auto 18px; }
.success .ok-ico svg { width:38px; height:38px; color:var(--brand); }

/* ============================================================
   LIVE-VORSCHAU (Telefon) — alle Variablen JS-gesteuert
   ============================================================ */
.pv {
  --pv:#5a3fc0; --pv-d:#43309a; --pv-d2:#4a36a8; --pv-acc:#ff6b5b; --pv-glow:.55; --pv-map:#eee9fb;
  --pv-bg:#faf8f5; --pv-card:#ffffff; --pv-ink:#1a1714; --pv-muted:#6b6560; --pv-border:#e7e2dc;
  --pv-rad:16px;
  --pv-fh:'DM Serif Display', serif; --pv-fb:'DM Sans', sans-serif;
}
.pv .phone { width:300px; max-width:84vw; margin:0 auto; border-radius:38px; background:#15121f; padding:13px; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.pv .phone-screen { border-radius:28px; overflow:hidden; background:var(--pv-bg); color:var(--pv-ink); font-family:var(--pv-fb); transition:background .25s; }

.pv .pv-bar { display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--pv-card); border-bottom:1px solid var(--pv-border); }
.pv .pv-logo { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--pv),var(--pv-d)); background-size:cover; background-position:center; display:grid; place-items:center; color:#fff; font:700 15px var(--pv-fb); flex-shrink:0; }
.pv .pv-appname { font-family:var(--pv-fh); font-size:16px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv .pv-lang { font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--pv); border:1.5px solid var(--pv-border); border-radius:99px; padding:3px 8px; }

.pv .pv-hero { padding:22px 16px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--pv) 0%, var(--pv-d2) 100%); color:#fff; }
.pv .pv-hero::after { content:''; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, var(--pv-acc), transparent 70%); opacity:var(--pv-glow); }
.pv .pv-lbl { font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.82; position:relative; }
.pv .pv-tour { font-family:var(--pv-fh); font-size:21px; margin-top:5px; line-height:1.15; position:relative; }
.pv .pv-desc { font-size:11.5px; opacity:.9; margin-top:7px; position:relative; }
.pv .pv-desc:empty { display:none; }

.pv .pv-tabs { display:flex; gap:6px; padding:11px 14px 4px; background:var(--pv-bg); }
.pv .pv-tabs span { font-size:11.5px; font-weight:600; padding:6px 14px; border-radius:99px; color:var(--pv-muted); }
.pv .pv-tabs span.on { background:var(--pv); color:#fff; }

.pv .pv-body { padding:8px 12px 14px; display:flex; flex-direction:column; gap:10px; }
.pv .pv-map { display:none; height:190px; margin:6px 12px 14px; border-radius:var(--pv-rad); position:relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, var(--pv-border) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, var(--pv-border) 19px 20px),
    var(--pv-map);
  border:1px solid var(--pv-border); }
.pv[data-view="map"] .pv-body { display:none; }
.pv[data-view="map"] .pv-map { display:block; }
.pv .pv-map .pin { position:absolute; width:18px; height:18px; border-radius:50% 50% 50% 0; background:var(--pv); transform:rotate(-45deg); box-shadow:0 2px 5px rgba(0,0,0,.3); }
.pv .pv-map .pin::after { content:''; position:absolute; inset:5px; background:#fff; border-radius:50%; }
.pv .pv-map .pin.a { left:28%; top:34%; } .pv .pv-map .pin.b { left:60%; top:50%; background:var(--pv-acc); } .pv .pv-map .pin.c { left:42%; top:68%; }

.pv .pv-card { display:flex; flex-direction:column; background:var(--pv-card); border-radius:var(--pv-rad); overflow:hidden; border:1px solid var(--pv-border); box-shadow:0 2px 10px rgba(0,0,0,.05); }
.pv .pv-thumb { height:74px; background:linear-gradient(135deg,var(--pv),var(--pv-d)); }
.pv .pv-thumb.alt { background:linear-gradient(135deg,var(--pv-acc),var(--pv)); }
.pv .pv-meta { padding:9px 13px; border-left:4px solid var(--pv); }
.pv .pv-meta b { font-family:var(--pv-fh); font-weight:400; font-size:14px; display:block; }
.pv .pv-meta i { font-style:normal; color:var(--pv-muted); font-size:11px; }

.pv-caption { text-align:center; color:var(--muted); font-size:.86rem; margin-top:16px; }
.pv-url { text-align:center; margin-top:5px; font-weight:600; color:var(--brand-dark); word-break:break-all; }

/* Dunkles Theme der Vorschau setzt JS über --pv-bg/--pv-card/--pv-ink */