:root{ --bg:#fbf3ef; --card:#fff; --ink:#2a2320; --muted:#8a7d76; --accent:#b5473c; --accent2:#d98c6a; --line:#efe2da; --ok:#2e7d5b; --err:#c0392b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
  background:linear-gradient(#fbf3efd9,#fbf3eff2), url('/bg-app.png') center/cover fixed no-repeat, var(--bg);
  min-height:100vh; display:flex; flex-direction:column; }
h1,.brand{ font-family:var(--serif); }
.container{ width:min(760px,94vw); margin:0 auto; padding:14px 0 40px; flex:1; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px min(3vw,20px); border-bottom:1px solid var(--line); background:#fff9; backdrop-filter:blur(6px); position:sticky; top:0; z-index:5; }
.brand{ font-weight:800; letter-spacing:.2px; color:var(--accent); }
.brand span{ color:var(--muted); font-weight:600; }
#nav{ display:flex; align-items:center; gap:10px; }
h1{ font-size:clamp(20px,4vw,28px); margin:.2em 0; }
h3{ margin:.1em 0 .5em; }
.muted{ color:var(--muted); font-size:14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin:14px 0; box-shadow:0 6px 20px #b5473c14; }
.card.soft{ background:#fff8f4; }
.card.auth{ max-width:420px; margin:6vh auto; }
input,textarea,select{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:11px; font:inherit; margin:6px 0; background:#fff; }
textarea{ resize:vertical; }
label{ font-size:13px; color:var(--muted); display:block; }
label.check{ display:flex; gap:8px; align-items:flex-start; color:var(--ink); font-size:13px; }
label.check input{ width:auto; margin-top:3px; }
button{ cursor:pointer; font:inherit; border-radius:11px; border:1px solid transparent; padding:10px 14px; }
button.primary{ background:var(--accent); color:#fff; font-weight:700; width:100%; margin-top:8px; }
button.primary:hover{ background:#9d3b31; }
button.ghost{ background:#fff; border-color:var(--line); color:var(--ink); }
button.link{ background:none; border:none; color:var(--accent); padding:6px 4px; text-decoration:underline; }
button.link.danger,.link.danger{ color:var(--err); }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.row.spread{ justify-content:space-between; }
.row label{ flex:1; min-width:130px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin:10px 0; }
.tag-card{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.tag-card:hover{ border-color:var(--accent2); }
.tag-name{ font-weight:700; margin-bottom:6px; }
.pill{ font-size:12px; padding:4px 10px; border-radius:999px; font-weight:700; }
.pill-free{ background:#f3e7df; color:#8a5a3c; }
.pill-abo{ background:#e4f4ec; color:var(--ok); }
.msg{ border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.msg.locked{ background:#faf5f2; }
.msg-text{ flex:1; min-width:180px; }
.thumb{ width:60px; height:60px; object-fit:cover; border-radius:9px; }
.msg-actions{ display:flex; gap:6px; align-items:center; width:100%; border-top:1px dashed var(--line); padding-top:8px; }
.tag-lock{ font-size:13px; color:var(--muted); }
.dsg{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.dsg .link{ font-size:14px; }
.url{ display:block; background:#2a2320; color:#ffe; padding:10px 12px; border-radius:10px; word-break:break-all; font-size:13px; margin:6px 0; }
.back{ margin:6px 0; }
.foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px min(3vw,20px); border-top:1px solid var(--line); font-size:13px; }
.foot a{ color:var(--accent); }
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; background:#2a2320; color:#fff; padding:11px 18px; border-radius:12px; transition:.25s; z-index:20; }
.toast.show{ opacity:1; transform:translateX(-50%); }
.toast.err{ background:var(--err); }
.toast.ok{ background:var(--ok); }

/* ============ Modernes Konfig-UI ============ */
.cfg h3{ font-family:var(--serif); font-size:20px; }
.cfg-grid{ display:grid; grid-template-columns:1fr 250px; gap:24px; align-items:start; }
.fld-lbl{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:.02em; margin:16px 0 7px; }
.fld{ width:100%; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px 8px 10px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:.15s; }
.swatch .sw-dot{ width:16px; height:16px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 2px #fff3; }
.swatch .sw-lbl{ font-size:13px; color:var(--ink); }
.swatch:hover{ border-color:var(--accent2); }
.swatch.on{ border-color:var(--sw); box-shadow:0 0 0 3px color-mix(in srgb, var(--sw) 20%, transparent), 0 6px 16px #0001; }
.seg{ display:inline-flex; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.seg-btn{ padding:9px 14px; background:#fff; border:0; border-right:1px solid var(--line); cursor:pointer; font-size:13px; color:var(--ink); }
.seg-btn:last-child{ border-right:0; }
.seg-btn.on{ background:var(--accent); color:#fff; font-weight:600; }
.anim-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
.anim-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:13px 6px; border:1.5px solid var(--line); border-radius:15px; background:#fff; cursor:pointer; transition:transform .12s, border-color .15s, box-shadow .15s; }
.anim-tile:hover{ border-color:var(--accent2); transform:translateY(-2px); }
.anim-tile .at-ic{ font-size:26px; line-height:1; }
.anim-tile .at-lbl{ font-size:12px; color:var(--muted); }
.anim-tile.on{ border-color:var(--accent); background:#fff6f2; box-shadow:0 8px 20px #b5473c22; }
.anim-tile.on .at-lbl{ color:var(--accent); font-weight:600; }

/* Telefon-Mockup mit Live-Vorschau */
.cfg-preview{ position:sticky; top:78px; }
.phone{ width:230px; max-width:100%; margin:0 auto; border-radius:32px; border:9px solid #17110f; background:#000; box-shadow:0 22px 55px #0003; position:relative; overflow:hidden; }
.phone-cam{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:54px; height:6px; border-radius:6px; background:#0007; z-index:3; }
.pv-stage{ position:relative; width:100%; aspect-ratio:9/16; background:#2a1216 center/cover no-repeat; overflow:hidden; }
.pv-stage.warm{ background-image:linear-gradient(#0000,#0006), url('/bg-warm.png'); }
.pv-stage.night{ background-image:linear-gradient(#0000,#0006), url('/bg-night.png'); }
.pv-stage.mint{ background-image:linear-gradient(#0000,#0006), url('/bg-mint.png'); }
.pv-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s ease; background:#000; }
.pv-video.hide{ opacity:0; }
.pv-card{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; color:#fff; opacity:0; transform:scale(.95); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.pv-card.show{ opacity:1; transform:none; }
.pv-title{ color:#ffd9a0; font-size:9px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:9px; }
.pv-quote{ font-family:var(--serif); font-size:15px; line-height:1.4; margin:0; text-shadow:0 2px 14px #000a; }
.pv-quote::before{ content:"\201C"; } .pv-quote::after{ content:"\201D"; }
.pv-decor{ width:32px; height:2px; margin-top:11px; border-radius:2px; background:linear-gradient(90deg,#0000,#ffd9a0,#0000); }
.pv-cap{ text-align:center; margin:11px 4px 8px; }
.ghost.sm{ display:block; margin:0 auto; padding:8px 14px; font-size:13px; }
.cfg-actions{ display:flex; gap:10px; margin-top:18px; }
.cfg-actions .primary{ width:auto; flex:1; margin-top:0; }
@media (max-width:640px){
  .cfg-grid{ grid-template-columns:1fr; }
  .cfg-preview{ position:static; order:-1; margin-bottom:6px; }
}