/* AskForDates – Studio als Funnel im Designsystem „Sonnig“ (DESIGN.md).
   Handy zuerst: Kopf mit Fortschritt, ein Screen zur Zeit, feste Aktionsleiste unten, schwebendes Mini-Handy als Vorschau.
   Desktop (≥ 1000 px): Funnel links, echtes Handy mit Live-Vorschau rechts auf einer sonnigen Bühne.
   Eigenständig (ohne site.css): Tokens wie in site.css, Klassen des Studios bleiben (studio.js und Tests greifen darauf zu).
   Figuren: /img/bande.svg (Klasse .fig, Körperfarbe per .f-*). */
:root{
  /* Grund und Text (wie site.css) */
  --white:#fff;--paper:#faf5f1;--paper-2:#f3ece6;--line:#e6ded8;--line-2:#d9cfc7;
  --ink:#2b2a29;--ink-2:#4a4846;--ink-3:#6e6a66;
  --blue:#1d5bff;--blue-d:#1447d6;--blue-1:#e8efff;
  --sun:#ffcc2e;--sun-1:#fff4cc;--coral:#ff6a3d;--coral-1:#ffe6dc;--pink:#ff9ec7;--pink-1:#ffe8f2;
  --plum:#4a2a8c;--plum-1:#ece6fb;--sky:#3fb0ff;--sky-1:#e3f3ff;--mint:#1f9e5b;--mint-d:#167a46;--mint-1:#dff4e8;--lilac:#b9a6ff;
  --s1:0 8px 20px -14px rgba(43,42,41,.35);--s2:0 24px 48px -28px rgba(43,42,41,.45);
  /* Studio-Namen (studio.js-unabhängig, nur CSS) */
  --bg:var(--white);--surface:var(--white);--surface-2:var(--paper);
  --accent:var(--blue);--accent-hi:#3d73ff;--accent-2:var(--blue-d);--accent-soft:var(--blue-1);--gold:var(--sun);
  --ok:var(--mint-d);--ok-soft:var(--mint-1);--warn:#8a4b0f;--danger:#b4321f;
  --shadow:var(--s1);--shadow-lg:var(--s2);
  --r:16px;--pill:999px;--bar-h:64px;--ab-h:80px;--gut:20px;--col:100%;
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--f-display:var(--f-body);
  --f-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  color-scheme:light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top) + 12px);scroll-padding-bottom:calc(var(--ab-h) + env(safe-area-inset-bottom) + 16px)}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body.pv-lock{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.h1:focus{outline:none}
::selection{background:var(--sun);color:var(--ink)}
svg{display:block}

/* Figuren der Frag-Bande */
.fig{display:block;flex:none;color:var(--sun);overflow:visible}
.fig.f-sun{color:var(--sun)}.fig.f-coral{color:var(--coral)}.fig.f-pink{color:var(--pink)}.fig.f-sky{color:var(--sky)}
.fig.f-mint{color:#4cc98a}.fig.f-lilac{color:var(--lilac)}.fig.f-plum{color:#7a55d6}.fig.f-white{color:#fff}.fig.f-blue{color:var(--blue)}
@media (prefers-reduced-motion:no-preference){
  .bob{animation:bob 4s var(--ease) infinite}.bob.late{animation-delay:-2s}
  @keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}
}

/* =========================================================
   Hülle: Kopf · Inhalt · Aktionsleiste
   ========================================================= */
.shell{width:var(--col);min-height:100dvh;overflow-x:clip}
.bar{position:sticky;top:0;z-index:20;height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.brand{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding-left:10px;font:800 1.25rem/1 var(--f-body);letter-spacing:-.04em;color:var(--ink);text-decoration:none;justify-self:start;min-height:44px;border-radius:12px}
.brand img{width:42px;height:42px;margin:-4px -2px -4px -4px;flex:none}
.nav-btn{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;transition:background-color .15s}
.nav-btn:hover{background:var(--paper)}
.nav-btn:active{background:var(--paper-2)}
#homeBtn{grid-column:3}
.progress{grid-column:2;display:grid;justify-items:center;min-width:0}
/* im Ablauf: Zurück · Logo · Fortschritt · Meine Einladungen */
.bar.in-funnel{grid-template-columns:44px 44px minmax(0,1fr) 44px}
.bar.in-funnel .brand{grid-column:2;width:44px;padding:0;justify-content:center;justify-self:center}
.bar.in-funnel .brand span{display:none}
.bar.in-funnel .brand:hover{background:var(--paper)}
.bar.in-funnel .progress{grid-column:3}
.bar.in-funnel #homeBtn{grid-column:4}
.prog-txt{position:relative;z-index:1;margin-bottom:-10px;font-size:.82rem;font-weight:700;color:var(--ink-3);pointer-events:none;white-space:nowrap}
.dots{display:flex;list-style:none;margin:0;padding:0;width:100%;max-width:300px}
.dots li{flex:1;min-width:0}
.dot{position:relative;display:block;width:100%;min-width:0;height:44px;border:0;background:none;padding:0;border-radius:10px}
.dot::before{content:"";position:absolute;left:3px;right:3px;top:calc(50% + 5px);height:6px;border-radius:3px;background:var(--paper-2);transition:background-color .3s,transform .3s var(--ease)}
.dot.done::before{background:#9db8ff}
.dot[aria-current="step"]::before{background:var(--blue);transform:scaleY(1.34)}
.dot[aria-disabled="true"]{cursor:default}
.dot:hover:not([aria-current]):not([aria-disabled="true"])::before{background:var(--line-2)}
.dot.done:hover::before{background:var(--blue)}

.main{padding:24px max(var(--gut), env(safe-area-inset-right)) calc(var(--ab-h) + env(safe-area-inset-bottom) + 32px) max(var(--gut), env(safe-area-inset-left))}
body[data-pv="mini"] .main{padding-bottom:calc(var(--ab-h) + env(safe-area-inset-bottom) + 190px)}
.screen{max-width:560px;margin:0 auto}
.screen-in{will-change:transform,opacity}

.actionbar{position:fixed;left:0;bottom:0;z-index:30;width:var(--col);min-height:calc(var(--ab-h) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;
  padding:12px max(var(--gut), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line)}
.actionbar .btn-p{flex:1 1 auto;min-height:56px;font-size:1.08rem}
.actionbar .skip{flex:1 1 0;text-align:left;font-size:.9rem;line-height:1.25;padding-right:0}
.actionbar:has(.skip:not([hidden])) .btn-p{flex:0 0 auto;min-width:min(48%, 220px)}

/* =========================================================
   Typo & Grundbausteine
   ========================================================= */
.h1{font:700 clamp(1.8rem,7.4vw,2.35rem)/1.1 var(--f-body);letter-spacing:-.035em;margin:2px 0 10px;color:var(--ink);text-wrap:balance;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.sub{margin:0 0 24px;color:var(--ink-2);font-size:1.05rem;line-height:1.55;text-wrap:pretty;max-width:52ch}
.h2{font-weight:700;font-size:1.2rem;line-height:1.25;letter-spacing:-.02em;margin:32px 0 12px;text-wrap:balance}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font:700 .92rem/1.2 var(--f-body);color:var(--ink-2)}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none}
.hand{font:700 1.5rem/1 var(--f-hand);color:var(--ink-2);margin:0 0 6px}
/* Tipp als Klebezettel (Handschrift kommt im Produkt genau so vor) */
.hand-note{position:relative;width:fit-content;max-width:min(100%,300px);margin:26px 0 0 6px;padding:12px 16px 14px;background:var(--sun);color:var(--ink);
  font:700 1.3rem/1.2 var(--f-hand);border-radius:3px 3px 14px 3px;rotate:-2deg;box-shadow:0 10px 16px -10px rgba(43,42,41,.45)}
.hand-note::before{content:"";position:absolute;left:50%;top:-9px;width:56px;height:18px;translate:-50% 0;rotate:3deg;background:rgba(255,255,255,.62);border-radius:2px}
/* Hinweis „Vorlage: Glücksrad-Date ✓ · Wechseln“ (Deep-Link mit Vorlage) */
.tpl-note{display:flex;align-items:center;gap:12px;margin:-6px 0 20px;padding:6px 6px 6px 10px;min-height:60px;background:var(--sun-1);border-radius:var(--r)}
.tpl-note-e{flex:none;display:grid;place-items:center;width:44px;height:44px}
.tpl-note-e .fig{width:42px;height:42px;color:var(--coral)}
.tpl-note-t{flex:1;min-width:0;font-weight:700;font-size:.97rem;color:var(--ink);overflow-wrap:anywhere;padding:6px 0}
.tpl-note-btn{flex:none;min-height:44px;padding:8px 16px;border:0;border-radius:var(--pill);background:var(--white);color:var(--ink);font-weight:700;font-size:.92rem;
  box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .15s}
.tpl-note-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.seg-gender button{text-wrap:balance;padding-inline:4px;align-content:center}
.seg-gender .seg-ico{font-size:1.05rem}

/* Knöpfe: Blau = Hauptaktion, sonst ruhig */
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 24px;border:0;border-radius:var(--pill);
  background:var(--blue);color:#fff;font-weight:700;font-size:1rem;line-height:1.15;text-decoration:none;white-space:nowrap;
  transition:transform .15s var(--ease),background-color .15s,opacity .2s}
.btn-p:hover{background:var(--blue-d)}
.btn-p:active{transform:scale(.97)}
.btn-p[aria-disabled="true"]{opacity:.45}
.btn-p.wide{width:100%}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border:0;border-radius:var(--pill);
  background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:700;font-size:.94rem;white-space:nowrap;text-decoration:none;color:var(--ink);transition:box-shadow .15s,background-color .15s,transform .15s var(--ease)}
.btn-s:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-s:active{transform:scale(.97);background:var(--paper)}
.btn-s.ghost{background:var(--paper);box-shadow:none}
.btn-s.ghost:hover{background:var(--paper-2)}
.btn-s.wide{width:100%}
.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:8px 2px;border:0;background:none;color:var(--ink-2);font-weight:700;font-size:.95rem;
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:2px;transition:color .15s,text-decoration-color .15s}
.link-btn:hover{color:var(--ink);text-decoration-color:var(--ink)}
.link-btn.danger{color:var(--danger)}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);font-size:1.15rem;display:grid;place-items:center;color:var(--ink-2);transition:background-color .15s}
.icon-btn:hover{background:var(--paper-2);color:var(--ink)}

/* Formular-Gruppe: keine Karte, Felder stehen frei */
.card{background:none;border:0;padding:0}
.card.form > .fld:first-child{margin-top:0}

/* Schalter: 56×44 Trefferfläche, sichtbare Schiene 50×30 */
.switch{position:relative;flex:none;width:56px;height:44px;border:0;background:none;padding:0;border-radius:var(--pill)}
.switch::before{content:"";position:absolute;left:3px;top:7px;width:50px;height:30px;border-radius:var(--pill);background:var(--line-2);transition:background-color .2s}
.switch::after{content:"";position:absolute;top:10px;left:6px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(43,42,41,.28);transition:translate .25s cubic-bezier(.3,1.4,.5,1)}
.switch[aria-checked="true"]::before{background:var(--blue)}
.switch[aria-checked="true"]::after{translate:20px 0}
.switch:focus-visible{outline-offset:0}

/* Felder */
.fld{display:grid;gap:8px;margin-top:20px;min-width:0}
.fld-lbl{font-weight:700;font-size:.95rem;color:var(--ink)}
.opt-tag{font-weight:600;color:var(--ink-3)}
.fld-hint{margin:0;font-size:.9rem;color:var(--ink-3);line-height:1.45}
.fld-err{margin:0;font-size:.92rem;font-weight:700;color:var(--danger)}
.inp{width:100%;min-width:0;font-size:16px;font-weight:500;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--white);min-height:52px;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.inp:hover{border-color:var(--line-2)}
.inp::placeholder{color:#9a948f}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-1)}
.inp.err{border-color:var(--danger);box-shadow:0 0 0 4px #fde4df}
.inp-lg{font-size:1.3rem;font-weight:600;min-height:62px;padding:14px 16px;letter-spacing:-.01em}
textarea.inp{resize:vertical;line-height:1.45}
.inp-s{max-width:12em}
input[type=date].inp,input[type=time].inp{min-width:0;padding-right:8px}
.inp.emoji{width:3.4em;flex:none;text-align:center;font-size:1.3rem;padding:8px 4px}
.inp-note{background:var(--sun-1);border-color:#f2df9a}
.inp-note:focus{border-color:var(--blue)}
.inp-code{font-size:1.75rem;font-weight:800;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums;max-width:9em;padding-left:.45em;background:var(--paper)}
.code-row{display:flex;align-items:center;gap:14px}
.code-row .inp-code{flex:1 1 auto;min-width:0}
.code-fig{width:60px;height:60px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
@media (max-width:440px){.two{grid-template-columns:1fr}}
.item-row{display:flex;gap:8px;align-items:center;min-width:0}
.item-row .inp:not(.emoji):not(.inp-s){flex:1}
.items{display:grid;gap:8px}
.item{display:grid;gap:8px;padding:10px;border-radius:12px;background:var(--paper)}
.addrow{display:flex;gap:8px;min-width:0}
.addrow .inp{flex:1}

/* Platzhalter-Chips {name} {tag} … */
.tokens{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tokens-lbl{font-size:.82rem;font-weight:700;color:var(--ink-3);margin-right:2px}
.token{min-height:44px;padding:6px 14px;border-radius:var(--pill);border:0;background:var(--blue-1);color:var(--blue-d);font-weight:700;font-size:.88rem;transition:background-color .15s,color .15s}
.token:hover{background:#d6e2ff}
.token[aria-pressed="true"]{background:var(--blue);color:#fff}

/* Segment-Umschalter (Tabs-Sprache: Pillen, Auswahl dunkel) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--paper);border-radius:20px}
.seg button{border:0;background:none;border-radius:16px;padding:8px 6px;font-weight:700;font-size:.92rem;color:var(--ink-2);min-height:48px;transition:background-color .18s,color .18s}
.seg button:hover:not([aria-pressed="true"]){background:var(--paper-2);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg.stack button{display:grid;justify-items:center;gap:2px;font-size:.88rem;padding:7px 4px;line-height:1.15}
.seg-ico{font-size:1.15rem;line-height:1}
.seg.wrap{display:flex;flex-wrap:wrap;gap:8px;padding:0;background:none;border-radius:0}
.seg.wrap button{flex:none;min-height:44px;padding:8px 16px;border-radius:var(--pill);background:var(--paper)}
.seg.wrap button[aria-pressed="true"]{background:var(--ink);color:#fff}

.chiplist{display:flex;flex-wrap:wrap;gap:6px}
.chipx{display:inline-flex;align-items:center;gap:2px;padding:2px 2px 2px 14px;border-radius:var(--pill);background:var(--paper);font-weight:600;font-size:.94rem;max-width:100%;min-height:44px}
.chipx > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chipx.first{background:var(--blue-1);box-shadow:inset 0 0 0 1.5px #b8cbff}
.chipx button{width:40px;height:40px;border-radius:50%;border:0;background:none;font-size:1.15rem;color:var(--ink-3);flex:none}
.chipx button:hover{background:rgba(43,42,41,.07);color:var(--ink)}

.timegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.tchip{padding:8px 0;border-radius:12px;border:0;background:var(--paper);font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;min-height:44px;transition:background-color .15s,color .15s}
.tchip:hover{background:var(--paper-2)}
.tchip[aria-pressed="true"]{background:var(--blue);color:#fff}

/* Farbwelten */
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
@media (max-width:359px){.themes{grid-template-columns:repeat(2,1fr)}}
.theme{display:grid;gap:7px;justify-items:center;text-align:center;padding:8px 6px 10px;border-radius:var(--r);border:0;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);min-height:44px;transition:box-shadow .15s}
.theme:hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.theme strong{font-size:.86rem;line-height:1.2;font-weight:700}
.swatch{width:100%;height:48px;border-radius:10px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,var(--a) 0 55%,var(--b) 55% 74%,var(--c) 74%)}
.theme[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--ink)}
.av-row{display:flex;gap:10px;align-items:flex-start}
.avatars{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.av{width:44px;height:44px;border-radius:12px;border:0;background:var(--paper);font-size:1.35rem;display:grid;place-items:center;transition:background-color .15s,box-shadow .15s}
.av:hover{background:var(--paper-2)}
.av[aria-pressed="true"]{background:var(--blue-1);box-shadow:inset 0 0 0 2px var(--blue)}

/* „⌄ Mehr anpassen“ */
.more{margin-top:24px}
.more-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:var(--pill);background:var(--paper);color:var(--ink);font-weight:700;font-size:.96rem;transition:background-color .15s}
.more-btn svg{transition:rotate .25s var(--ease)}
.more-btn[aria-expanded="true"] svg{rotate:180deg}
.more-btn:hover{background:var(--paper-2)}
.more-panel{margin-top:10px;padding:4px 18px 22px;border-radius:var(--r);background:var(--paper)}
.more-panel .inp{border-color:var(--line)}
.more-panel .seg,.more-panel .tchip,.more-panel .av,.more-panel .chipx,.more-panel .seg.wrap button,.more-panel .item{background:var(--white)}
.more-panel .seg button:hover:not([aria-pressed="true"]){background:var(--paper)}
.more-panel .seg button[aria-pressed="true"],.more-panel .seg.wrap button[aria-pressed="true"]{background:var(--ink)}
.more-panel .tchip[aria-pressed="true"]{background:var(--blue)}
.more-panel .av[aria-pressed="true"]{background:var(--blue-1)}
.more-panel .chipx.first{background:var(--blue-1)}
.more-panel .btn-s.ghost{background:var(--white)}
.grp + .grp{margin-top:10px}
.grp-t{margin:22px 0 0;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* =========================================================
   Vorschaubild einer Vorlage: Farbfläche der Farbwelt + Figur + „Für Lena“
   ========================================================= */
.thumb{--g1:#ffb36b;--g2:#ff6a3d;position:relative;display:block;flex:none;width:92px;height:120px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--g1),var(--g2));container-type:size}
.thumb[data-theme="herbst"]{--g1:#ffb36b;--g2:#f2552a}
.thumb[data-theme="winter"]{--g1:#5fc0ff;--g2:#1d5bff}
.thumb[data-theme="rose"]{--g1:#ffb6d6;--g2:#f0619c}
.thumb[data-theme="jahrmarkt"]{--g1:#8f6ae8;--g2:#4a2a8c}
.thumb[data-theme="ball"]{--g1:#34418f;--g2:#14204a}
.th-fig{position:absolute;left:50%;top:44%;width:62cqh;height:62cqh;translate:-50% -50%;color:var(--sun);transition:transform .3s var(--ease)}
.thumb[data-theme="winter"] .th-fig,.thumb[data-theme="rose"] .th-fig{color:#fff}
.thumb[data-theme="ball"] .th-fig{color:#f2d27a}
.th-fig.f-sun{color:var(--sun)!important}.th-fig.f-white{color:#fff!important}.th-fig.f-lilac{color:var(--lilac)!important}
.thumb[data-theme="jahrmarkt"] .th-fig.f-lilac,.thumb[data-theme="winter"] .th-fig.f-lilac{color:#fff!important}
.th-deco{position:absolute;width:16cqh;height:16cqh;color:#fff;opacity:.9}
.th-deco.d1{left:9%;top:9%;rotate:-12deg}
.th-deco.d2{right:10%;top:56%;width:11cqh;height:11cqh;opacity:.75}
.thumb[data-theme="herbst"] .th-deco{color:var(--sun-1)}
.thumb[data-theme="jahrmarkt"] .th-deco,.thumb[data-theme="ball"] .th-deco{color:var(--sun)}
.thumb[data-theme="rose"] .th-deco.d2{color:#ffe0ee}
.th-to{position:absolute;left:8%;right:8%;bottom:7%;padding:.32em .6em;border-radius:var(--pill);background:#fff;color:var(--ink);
  font:700 max(10px,8.6cqh)/1.2 var(--f-body);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =========================================================
   Start: Willkommen & Meine Einladungen
   ========================================================= */
.welcome{text-align:center;padding-top:0}
.welcome .h1{font-size:clamp(2.05rem,8.6vw,2.7rem);margin-top:0}
.welcome .sub{max-width:36ch;margin:0 auto 22px}
/* Bühne: Sonne, Mini-Einladung mit flüchtendem Nein */
.ws{position:relative;margin:0 0 26px;padding:52px 18px 16px;border-radius:32px;background:var(--sun);isolation:isolate;overflow:hidden}
.ws-card{position:relative;max-width:300px;margin:0 auto;padding:46px 18px 20px;border-radius:24px;background:#fff;box-shadow:0 20px 40px -26px rgba(43,42,41,.55)}
.ws-fig{position:absolute;left:50%;top:-38px;width:76px;height:76px;translate:-50% 0;transition:transform .3s var(--ease)}
.ws-card small{display:block;font-weight:700;color:var(--ink-3);font-size:.85rem}
.ws-card strong{display:block;margin:4px auto 16px;max-width:15em;font-size:1.25rem;line-height:1.2;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.ws-btns{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;min-height:104px;margin:-18px 0 -22px}
.ws-yes,.ws-no{min-height:48px;min-width:88px;padding:12px 22px;border:0;border-radius:var(--pill);font-weight:800;font-size:1rem;touch-action:none}
.ws-yes{background:var(--blue);color:#fff}
.ws-yes:hover{background:var(--blue-d)}
.ws-no{position:relative;z-index:2;background:var(--paper);color:var(--ink);transition:transform .22s var(--ease)}
/* Unter der Karte: Hinweis, beim Fliehen ersetzt durch den frechen Spruch */
.ws-cap{position:relative;display:grid;place-items:center;min-height:36px;margin:12px 0 0;font-size:.92rem;font-weight:700;color:var(--ink)}
.ws-cap > *{grid-area:1/1}
.ws-quip{padding:6px 14px;border-radius:var(--pill);background:var(--ink);color:#fff;font-size:.88rem;font-weight:700;white-space:nowrap;
  opacity:0;transform:translateY(6px) scale(.96);transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.ws-cap.say .ws-quip{opacity:1;transform:none}
.ws-cap .ws-txt{transition:opacity .2s}
.ws-cap.say .ws-txt{opacity:0}
.ws-k{position:absolute;z-index:-1;width:22px;height:22px;color:#fff}
.ws-k.k1{left:8%;top:16%}.ws-k.k2{right:9%;top:10%;width:30px;height:30px}.ws-k.k3{left:12%;bottom:22%;color:var(--coral);width:20px;height:20px}
.ws-buddy{position:absolute;right:4%;bottom:14%;z-index:1;width:58px;height:58px}
@media (max-width:400px){.ws-buddy{width:46px;height:46px;right:2%;bottom:8%}}
@media (max-width:360px){.ws-buddy{left:3%;right:auto;top:6px;bottom:auto;width:42px;height:42px}.ws-k.k1{display:none}}
@media (prefers-reduced-motion:no-preference){
  .ws-k.k1,.ws-k.k2{animation:twinkle 3.2s ease-in-out infinite}.ws-k.k2{animation-delay:-1.4s}
  @keyframes twinkle{50%{transform:scale(.7) rotate(20deg);opacity:.6}}
  .ws.yay .ws-fig{animation:yayHop .6s cubic-bezier(.3,1.5,.5,1)}
  @keyframes yayHop{40%{transform:translateY(-12px) scale(1.12)}}
}
.perks{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;max-width:420px;font-size:.94rem;font-weight:600;color:var(--ink-2)}
.perks li{display:flex;align-items:center;gap:8px}
.perks li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:var(--mint-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23167a46' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
/* Weiterführende Links unter dem Startscreen (Ratgeber, andere Sprache) */
.home-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin:24px auto 0;max-width:420px;font-size:.94rem}
.home-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-weight:700;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:2px}
.home-links a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.install{margin:18px auto 0}

.drafts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.draft{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 8px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--white);transition:border-color .15s,box-shadow .15s}
.draft:hover{border-color:var(--ink);box-shadow:var(--s1)}
.draft-open{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border:0;background:none;text-align:left;padding:4px;border-radius:12px}
.draft-open .thumb{width:56px;height:72px;border-radius:10px}
.draft-open .th-to{display:none}
.draft-open .th-fig{top:50%;width:70cqh;height:70cqh}
.draft-txt{display:grid;gap:2px;min-width:0;justify-items:start}
.draft-txt strong{font-weight:700;font-size:1.12rem;letter-spacing:-.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.draft-txt small{color:var(--ink-3);font-size:.88rem}
.chev{color:var(--ink-3);font-size:1.5rem;line-height:1}
.tag{display:inline-block;margin-top:5px;padding:3px 10px;border-radius:8px;line-height:1.35;background:var(--paper);color:var(--ink-2);font-size:.8rem;font-weight:700}
.tag.sent{background:var(--mint-1);color:var(--mint-d)}
.del-btn{flex:none;display:inline-grid;place-items:center;min-width:44px;height:44px;border-radius:var(--pill);border:0;background:none;color:var(--ink-3);font-size:1.05rem;transition:background-color .2s,color .2s}
.del-btn:hover{background:var(--paper)}
@media (max-width:360px){.draft-open{gap:10px}.draft{padding-left:4px}}
.del-btn.armed{padding:0 14px;background:#fde4df;color:var(--danger);font-weight:800;font-size:.88rem}

/* =========================================================
   Screen 2: Vorlagen-Karten
   ========================================================= */
.tgrid{display:grid;gap:12px}
.tcard{position:relative}
.tcard-main{position:relative;width:100%;display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;text-align:left;padding:10px;border:0;border-radius:var(--r);
  background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,transform .15s var(--ease),background-color .2s}
.tcard-main:hover{box-shadow:inset 0 0 0 1.5px var(--ink),var(--s1)}
.tcard-main:hover .th-fig{transform:translateY(-4px) rotate(-4deg)}
.tcard-main:active{transform:scale(.985)}
.tcard-main[aria-pressed="true"]{background:var(--blue-1);box-shadow:inset 0 0 0 2.5px var(--blue)}
.tcard .thumb{width:96px;height:124px}
.tcard-txt{display:grid;gap:3px;align-content:start;min-width:0;padding:6px 30px 4px 0}
.tcard-name{font-weight:700;font-size:1.15rem;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.tcard-desc{color:var(--ink-2);font-size:.94rem;line-height:1.4}
.badge{justify-self:start;margin-top:8px;padding:5px 10px;border-radius:8px;background:var(--paper);color:var(--ink);font-size:.84rem;font-weight:700;line-height:1.3}
.tcard-main[aria-pressed="true"] .badge{background:#fff}
.tick{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;font-size:.85rem;font-weight:900;color:transparent;transition:all .2s var(--ease)}
.tcard-main[aria-pressed="true"] .tick{background:var(--blue);box-shadow:none;color:#fff;transform:scale(1.08)}
.peek{position:absolute;z-index:2;isolation:isolate;left:10px;top:90px;width:96px;height:44px;padding:0 6px 6px;border:0;background:none;
  display:flex;align-items:flex-end;justify-content:center;color:#fff;font-weight:700;font-size:.86rem;line-height:30px}
.peek::before{content:"";position:absolute;z-index:-1;left:6px;right:6px;bottom:6px;height:30px;border-radius:var(--pill);background:rgba(43,42,41,.82);transition:background-color .15s}
.peek:hover::before{background:var(--ink)}
.peek:focus-visible{outline-offset:-2px;border-radius:12px}
.tcard .th-to{display:none}
.tcard .th-fig{top:40%}
@media (max-width:360px){
  .tcard-main{grid-template-columns:80px 1fr;gap:12px}
  .tcard .thumb{width:80px;height:112px}
  .peek{top:76px;width:80px;font-size:.8rem;padding:0 4px 6px}
  .peek::before{left:4px;right:4px}
  .tcard-txt{padding-right:28px}
}
@media (min-width:600px){
  .tgrid{grid-template-columns:1fr 1fr}
  .tcard-main{grid-template-columns:1fr;gap:12px;height:100%;padding:8px}
  .tcard .thumb{width:100%;height:156px;border-radius:12px}
  .tcard .th-fig{top:50%;width:56cqh;height:56cqh}
  .tcard .th-to{display:block;top:auto;bottom:9px;left:10px;right:auto;max-width:calc(100% - 140px)}
  .tcard .th-deco.d1{top:12%}
  .tcard-txt{padding:0 6px 6px}
  .peek{top:122px;left:auto;right:8px;width:auto;padding:0 18px 6px}   /* Trefferfläche so breit wie die Pille: die Kartenmitte wählt die Vorlage */
}
/* „Für Lena“ nur, wenn neben „Ansehen“ Platz ist (sonst bliebe nur „F…“) */
@container (max-width:259px){ .tcard .th-to{display:none!important} }

/* =========================================================
   Screen 3: Optionskarten (Was macht der Nein-Knopf?)
   ========================================================= */
.options{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:52px 1fr 24px;gap:14px;align-items:center;min-height:80px;padding:12px 16px 12px 12px;text-align:left;
  border:0;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background-color .2s,transform .15s var(--ease)}
.opt:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.opt:active{transform:scale(.985)}
.opt-ico{width:52px;height:52px;border-radius:14px;background:var(--paper);display:grid;place-items:center;font-size:1.5rem;transition:background-color .2s}
.opt-ico .fig{width:44px;height:44px;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.opt-txt{display:grid;gap:2px}
.opt-txt strong{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.opt-txt small{color:var(--ink-2);font-size:.9rem;line-height:1.35}
.opt-dot{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2);transition:all .2s}
.opt[aria-pressed="true"]{background:var(--blue-1);box-shadow:inset 0 0 0 2.5px var(--blue)}
.opt[aria-pressed="true"] .opt-ico{background:#fff}
.opt[aria-pressed="true"] .opt-ico .fig{transform:scale(1.1) rotate(-6deg)}
.opt[aria-pressed="true"] .opt-dot{background:var(--blue);box-shadow:inset 0 0 0 4px #fff,0 0 0 2px var(--blue)}

/* =========================================================
   Screen 4: Plan-Blöcke mit Schalter & Chip-Raster
   ========================================================= */
.blks{display:grid;gap:10px}
.blk{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:6px 8px 6px 6px;transition:background-color .2s,border-color .2s}
.blk.open{padding-bottom:18px;border-color:var(--line-2)}
.blk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center}
.blk.game-note .blk-head{grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:6px 0 6px 6px}
.blk-toggle{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:12px;align-items:center;min-height:64px;width:100%;padding:6px 6px 6px 6px;border:0;background:none;text-align:left;border-radius:12px;transition:background-color .15s}
.blk-toggle:hover{background:var(--paper)}
.blk-toggle .chev-i{color:var(--ink-3);transition:rotate .25s var(--ease)}
.blk-toggle[aria-expanded="true"] .chev-i{rotate:180deg}
.blk-state{padding:3px 9px;border-radius:var(--pill);font-size:.78rem;font-weight:800;background:var(--paper);color:var(--ink-3)}
.blk-state.on{background:var(--blue-1);color:var(--blue-d)}
.blk-sum{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk.open .blk-sum{white-space:normal}
.off-hint{margin:12px 0 0}
.blk-ico{width:48px;height:48px;border-radius:14px;background:var(--paper);display:grid;place-items:center;font-size:1.3rem;transition:background-color .2s}
.blk-ico .fig{width:40px;height:40px;transition:filter .2s,opacity .2s}
.blk.open:not(.is-off) .blk-ico{background:var(--sun-1)}
.blk-t{min-width:0}
.blk-t h2{margin:0;font-size:1.08rem;font-weight:700;letter-spacing:-.015em}
.blk-sum{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.35}
.blk-body{margin:10px 6px 0 12px;padding-top:2px;border-top:1px solid var(--line)}
.blk-body > .fld:first-child{margin-top:14px}
.blk.is-off{background:var(--paper);border-color:transparent}
.blk.is-off .blk-ico{background:var(--white)}
.blk.is-off .blk-ico .fig{filter:grayscale(1);opacity:.5}
.blk.is-off .blk-t h2{color:var(--ink-2)}
.blk.game-note{background:var(--pink-1);border-color:transparent}
.blk.game-note .blk-ico{background:#fff}
.blk.game-note .link-btn{color:var(--ink)}

.pick{margin-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:stretch;max-width:100%;border-radius:var(--pill);background:var(--paper);transition:background-color .18s,box-shadow .18s}
.chip-main{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:0;background:none;border-radius:var(--pill);font-weight:600;font-size:.96rem;color:var(--ink-2);min-width:0}
.chip-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-check{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:.72rem}
.chip:not(.on) .chip-check{display:none}
.chip.on{background:var(--blue-1);box-shadow:inset 0 0 0 1.5px #b8cbff}
.chip.on .chip-main{color:var(--ink);padding:0 2px 0 10px;font-weight:700}
.chip.has-note .chip-n::after{content:" 📝";font-size:.8em}
.chip-edit{flex:none;display:grid;place-items:center;width:44px;min-height:44px;margin-left:-4px;border:0;background:none;border-radius:0 999px 999px 0;color:var(--blue-d)}
.chip-edit::before,.sum-edit::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4zM13.5 6.5l4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4zM13.5 6.5l4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.chip-edit:hover{background:rgba(29,91,255,.1)}
.chip:hover:not(.on){background:var(--paper-2)}
.chip-more,.chip-add{min-height:44px;padding:0 16px;border-radius:var(--pill);border:0;background:none;box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:700;font-size:.93rem;color:var(--ink-2)}
.chip-add{color:var(--blue-d);box-shadow:inset 0 0 0 1.5px #b8cbff}
.chip-more:hover,.chip-add:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.chip-field{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px var(--blue-1)}
.chip-inp{width:11em;max-width:100%;min-height:44px;padding:0 16px;border:0;background:none;font-size:16px;outline:none;border-radius:var(--pill)}
.count{margin:12px 0 0;font-size:.92rem;color:var(--ink-2)}
.count strong{color:var(--ink)}
.count .warn{color:var(--warn);font-weight:700}

/* =========================================================
   Screen 5: Extras-Karten (Figur wechselt beim Einschalten das Gesicht)
   ========================================================= */
.warns{display:grid;gap:8px;margin:0 0 18px}
.warn-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:12px;padding:10px 10px 10px 16px;border-radius:var(--r);background:var(--coral-1);color:#6d2a12;font-weight:700;font-size:.94rem}
.warns .warn-box{margin-top:0}
.warn-box .btn-s{min-height:44px;padding:0 16px}
.xc-warn{margin:6px 8px 0 0;font-size:.85rem;font-weight:700;color:var(--warn);line-height:1.35}
.xc-warn .link-btn{font-size:.85rem;color:var(--ink);padding:0}
.soft-hint{margin:0 0 14px;padding:10px 16px;border-radius:var(--r);background:var(--sun-1);color:var(--ink);font-weight:700;font-size:.95rem}
.tip-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:12px 0 0;padding:10px 10px 10px 16px}   /* Hinweis mit Knopf (z. B. „Nein bleibt“ ohne Ausweg) */
.tip-row[hidden]{display:none}
.tip-row .btn-s{min-height:44px;padding:0 16px}
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xcard{display:grid;grid-template-rows:auto auto 1fr auto;padding:12px 6px 4px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--white);
  transition:background-color .2s,border-color .2s}
.xcard.on{border-color:transparent}
.xcard.on[data-x="yay"],.xcard.on[data-x="code"]{background:var(--sun-1)}
.xcard.on[data-x="scratch"]{background:var(--pink-1)}
.xcard.on[data-x="wheel"],.xcard.on[data-x="decline"]{background:var(--plum-1)}
.xcard.on[data-x="quiz"]{background:var(--sky-1)}
.xcard.on[data-x="letter"]{background:var(--coral-1)}
.xcard.on[data-x="fee"]{background:var(--mint-1)}
.xc-top{display:flex;align-items:center;gap:6px;min-height:48px}
.xc-emo{display:block;flex:none;width:48px;height:48px;line-height:1}
.xc-emo .fig{width:48px;height:48px;transition:filter .2s,opacity .2s}
.xcard:not(.on) .xc-emo .fig{filter:grayscale(1);opacity:.45}
/* „Spiel“ klebt wie ein Sticker über der oberen Kartenkante (verdeckt weder Gesicht noch Schalter) */
.xcard{position:relative}
.xc-tag{position:absolute;left:10px;top:-9px;z-index:1;padding:2px 7px;border-radius:6px;background:var(--ink);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;rotate:-6deg;pointer-events:none;transition:rotate .3s cubic-bezier(.3,1.5,.5,1),background-color .2s}
.xcard.on .xc-tag{rotate:-2deg}
.xcard:not(.on) .xc-tag{background:var(--ink-3)}
.xc-top .switch{margin-left:auto}
.xc-name{margin:8px 8px 2px 0;font-size:1.04rem;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.xc-desc{margin:0 8px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.38}
.xcard:not(.on) .xc-name{color:var(--ink-2)}
.xc-more{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:2px}
.xc-more:hover{text-decoration-color:var(--ink)}
@media (max-width:359px){.xcard{padding-left:10px}.xc-top{gap:2px}.xc-emo,.xc-emo .fig{width:40px;height:40px}}

/* =========================================================
   Screen 6: Übersicht
   ========================================================= */
.pv-hero{position:relative;display:grid;justify-items:center;gap:14px;margin:4px 0 24px;padding:18px 0 18px;border-radius:32px;background:var(--sun)}
.pv-slot{width:100%;height:400px}
.btn-s.play{border-radius:var(--pill);padding:0 24px;min-height:48px;font-size:1rem;box-shadow:none;background:var(--ink);color:#fff}
.btn-s.play:hover{background:#000}
.summary{list-style:none;margin:0;padding:0;border-radius:var(--r);border:1.5px solid var(--line);overflow:hidden}
.summary li + li{border-top:1px solid var(--line)}
.sum-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:center;min-height:72px;padding:12px 8px 12px 16px;border:0;background:var(--white);text-align:left;transition:background-color .15s}
.sum-row:hover{background:var(--paper)}
.sum-row:active{background:var(--paper-2)}
/* ruhige Zeilen ohne Emoji-Kacheln: die Werte bringen ihre Emojis schon mit */
.sum-ico{display:none}
.sum-txt{display:grid;gap:1px;min-width:0}
.sum-txt small{color:var(--ink-3);font-size:.86rem;font-weight:700}
.sum-txt strong{font-weight:600;font-size:.98rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sum-edit{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--blue-d);transition:background-color .15s,transform .15s var(--ease)}
.sum-edit::before{width:18px;height:18px}
.sum-row:active .sum-edit{transform:scale(.9)}
.sum-row:hover .sum-edit{background:var(--blue-1)}
.sheet-links{display:grid;gap:8px}
.sheet-links .btn-s{justify-content:space-between;border-radius:12px}
.more-panel .sheet-links .btn-s{background:#fff}

/* =========================================================
   Live-Vorschau
   ========================================================= */
.pv{position:fixed;z-index:25;display:flex;flex-direction:column;
  right:max(10px, env(safe-area-inset-right));bottom:calc(var(--ab-h) + env(safe-area-inset-bottom) + 10px);
  transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.pv-top,.stepnav,.pv-hint,.pv-foot{display:none}
.pv-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.phone-box{position:relative;flex:none}
.phone{position:absolute;left:0;top:0;width:414px;height:868px;padding:12px;border-radius:58px;background:#151515;transform-origin:0 0;
  box-shadow:0 0 0 2px #2c2b2a inset,0 40px 80px -36px rgba(43,42,41,.6)}
.phone::before{content:"";position:absolute;top:22px;left:50%;translate:-50% 0;width:110px;height:30px;border-radius:20px;background:#151515;z-index:2}
.phone iframe{display:block;width:390px;height:844px;border:0;border-radius:46px;background:var(--paper)}
.pv-tap{position:absolute;inset:0;z-index:3;border:0;background:transparent;border-radius:14px;cursor:zoom-in}

.pv[data-mode="off"]{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.8) translateY(10px)}
.pv[data-mode="mini"]{width:64px;height:134px}
.pv[data-mode="mini"].stashed{transform:translateX(calc(100% + max(10px, env(safe-area-inset-right)) - 18px))}
.pv[data-mode="mini"].stashed .pv-tap::after{opacity:0}
/* beiseitegelegt: kleine Lasche am Rand statt eines halben Handys (zeigt, dass man sie antippen kann) */
.pv[data-mode="mini"] .pv-tap::before{content:"";position:absolute;left:-2px;top:50%;width:22px;height:60px;translate:0 -50%;border-radius:14px 0 0 14px;opacity:0;transition:opacity .2s;
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 4px 50%/16px no-repeat;
  box-shadow:-3px 4px 12px -4px rgba(43,42,41,.45)}
.pv[data-mode="mini"].stashed .pv-tap::before{opacity:1}
.pv[data-mode="mini"].stashed .phone-box{box-shadow:-4px 6px 16px -6px rgba(43,42,41,.55),0 0 0 2px #fff}
.pv[data-mode="mini"] .phone-box{border-radius:11px;box-shadow:0 14px 28px -10px rgba(43,42,41,.55),0 0 0 3px #fff}
.pv[data-mode="mini"] .phone{box-shadow:none}
.pv[data-mode="mini"] .pv-tap::after{transition:opacity .2s;content:"⤢";position:absolute;right:-9px;top:-9px;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:.82rem;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2.5px #fff,0 4px 10px -4px rgba(0,0,0,.5)}
.pv[data-mode="inline"]{position:absolute;right:auto;bottom:auto;z-index:5}
.pv[data-mode="inline"] .pv-tap{border-radius:24px;left:50%;right:auto;width:194px;translate:-50% 0}
.pv.settle{opacity:0;transition:none}
.phone-box.pulse{animation:pvPulse .6s var(--ease)}
@keyframes pvPulse{30%{transform:scale(1.07)}}

/* Vollbild (Handy) */
.pv[data-mode="full"]{inset:0;z-index:60;background:var(--white);right:0;bottom:0}
.pv[data-mode="full"] .pv-top{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left))}
.pv-back{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 16px 0 10px;border:0;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:700;font-size:.95rem}
.pv-back:hover{background:#000}
.pv-title{min-width:0;margin-left:auto;font-size:.88rem;color:var(--ink-3);font-weight:700;padding-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv[data-mode="full"] .stepnav,.pv[data-mode="desk"] .stepnav{display:flex}
.stepnav{position:relative;gap:6px;overflow-x:auto;max-width:100%;padding:8px 12px;scrollbar-width:none;flex:none}
.stepnav::-webkit-scrollbar{display:none}
/* an den Rändern weich ausblenden, solange dort noch Chips liegen (studio.js setzt .at-start / .at-end) */
.stepnav{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.stepnav:not(.at-end){--fr:40px}
.stepnav:not(.at-start){--fl:28px}
.stepchip{flex:none;min-height:44px;padding:0 14px;border-radius:var(--pill);border:0;background:var(--paper);font-weight:700;font-size:.86rem;color:var(--ink-2);transition:background-color .15s,color .15s}
.stepchip:hover{background:var(--paper-2);color:var(--ink)}
.stepchip[aria-pressed="true"]{background:var(--ink);color:#fff}
.pv[data-mode="full"] .pv-foot{display:block;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--white);box-shadow:0 -1px 0 var(--line)}
.pv[data-mode="full"] .pv-foot[hidden]{display:none!important}
.pv-foot .btn-p{width:100%;min-height:54px}
@media (max-width:999px){
  .pv[data-mode="full"] .phone-box{width:100%;height:100%}
  .pv[data-mode="full"] .phone{position:static;width:100%;height:100%;padding:0;border-radius:0;background:none;box-shadow:none;transform:none!important}
  .pv[data-mode="full"] .phone::before{display:none}
  .pv[data-mode="full"] .phone iframe{width:100%;height:100%;border-radius:0}
  .pv[data-mode="full"] .pv-stage{border-top:1px solid var(--line)}
}

/* =========================================================
   Bottom-Sheets
   ========================================================= */
dialog.sheet{border:0;padding:0;background:var(--white);color:var(--ink);overflow:hidden;
  width:100%;max-width:100%;margin:auto 0 0;border-radius:28px 28px 0 0;max-height:90dvh;box-shadow:0 -20px 60px -24px rgba(43,42,41,.45)}
dialog.sheet::backdrop{background:rgba(43,42,41,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.sheet[open]{animation:sheetUp .42s var(--ease)}
dialog.sheet[open]::backdrop{animation:fadeIn .3s ease}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes fadeIn{from{opacity:0}}
.sheet-in{display:flex;flex-direction:column;max-height:90dvh}
.sheet-head{position:relative;flex:none;padding:10px 64px 12px 22px}
.grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 12px;translate:21px 0}
.sheet-head h2{font:700 1.45rem/1.2 var(--f-body);letter-spacing:-.03em;margin:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.x{position:absolute;top:14px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);font-size:1.45rem;line-height:1;color:var(--ink-2);transition:background-color .15s}
.x:hover{background:var(--paper-2);color:var(--ink)}
.sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:2px 22px 22px}
.sheet-body > .fld:first-child,.sheet-body > .row-sw.top + .fld{margin-top:12px}
.sheet-foot{flex:none;display:grid;justify-items:center;gap:2px;padding:12px 22px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--line);background:var(--white)}
.lead{margin:0 0 14px;color:var(--ink-2)}
.row-sw{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-weight:700}
.row-sw.top{margin:4px 0 4px;padding:4px 4px 4px 16px;border-radius:var(--r);background:var(--paper)}
.info{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:14px;border-radius:var(--r);background:var(--plum-1);margin-top:10px}
.info > span{font-size:1.6rem;line-height:1}
.info p{margin:2px 0 0;color:var(--ink-2);font-size:.92rem}
.info .link-btn{padding-bottom:0;color:var(--ink)}

/* Quiz-Editor */
.qlist{display:grid;gap:8px}
.q{border:1.5px solid var(--line);border-radius:var(--r);background:var(--white);transition:border-color .2s}
.q.open{border-color:var(--line-2)}
.q-head{width:100%;display:grid;grid-template-columns:30px 1fr 24px;gap:10px;align-items:center;min-height:56px;padding:8px 12px;border:0;background:none;text-align:left;font-weight:700;border-radius:var(--r)}
.q-head:hover{background:var(--paper)}
.q-num{width:28px;height:28px;border-radius:50%;background:var(--sky-1);color:var(--ink);font-size:.86rem;font-weight:800;display:grid;place-items:center}
.q-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q.open .q-t{white-space:normal}
.q-head .chev-i{color:var(--ink-3);transition:rotate .2s;justify-self:center}
.q-head[aria-expanded="true"] .chev-i{rotate:180deg}
.q-body{display:grid;gap:10px;padding:0 12px 12px}
.answers{display:grid;gap:6px}
.ans{display:flex;gap:6px;align-items:center}
.ans .inp{flex:1}
.ok-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);color:#8c857f;font-size:1.1rem;font-weight:900;transition:all .15s}
.ok-btn:hover{color:var(--mint-d)}
.ok-btn[aria-pressed="true"]{background:var(--mint);color:#fff}
.ans.is-ok .inp{border-color:#9fd8b9;background:var(--mint-1)}
.q-actions{display:flex;justify-content:space-between;align-items:center}
.end-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.end-n{flex:none;width:3.2em;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* =========================================================
   Verschicken: kleiner Erfolgsmoment mit Tixi
   ========================================================= */
.share-hero{position:relative;display:grid;place-items:center;height:132px;margin:2px 0 16px;border-radius:24px;background:var(--sun);overflow:hidden;isolation:isolate}
.share-hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-38px;height:64px;border-radius:50%;background:var(--coral);z-index:-1}
.share-fig{width:104px;height:104px;margin-top:-6px}
.sh-k{position:absolute;width:24px;height:24px;color:#fff;z-index:1}
.sh-k.k1{left:18%;top:20%}.sh-k.k2{right:20%;top:16%;color:var(--coral);width:22px;height:22px}.sh-k.k3{right:12%;bottom:40%;width:16px;height:16px}
@media (prefers-reduced-motion: no-preference){
  .share[open] .share-fig{animation:tixiIn .7s cubic-bezier(.3,1.5,.5,1) both}
  @keyframes tixiIn{from{transform:translateY(60px) scale(.6) rotate(-12deg);opacity:0}}
  .share[open] .sh-k{animation:shPop .6s cubic-bezier(.3,1.6,.5,1) both}
  .share[open] .sh-k.k2{animation-delay:.12s}.share[open] .sh-k.k3{animation-delay:.22s}
  @keyframes shPop{from{transform:scale(0) rotate(-40deg)}}
  .share-hero.sent .share-fig{animation:tixiHop .7s cubic-bezier(.3,1.5,.5,1)}
  @keyframes tixiHop{40%{transform:translateY(-14px) rotate(6deg) scale(1.08)}}
}
.share .sheet-head h2{text-align:left}
.share .lead{text-align:center;max-width:32ch;margin:0 auto 4px}
.btn-p.wa{margin-top:18px;min-height:56px;font-size:1.06rem;background:#25d366;color:#0b3d20}
.btn-p.wa:hover{background:#1fc05c}
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.share-row:has(#shareNative[hidden]){grid-template-columns:1fr}
.share-row .btn-s{min-height:50px}
.linkbox{display:flex;gap:10px;align-items:center;margin-top:14px}
.linkbox .inp{color:var(--ink-3);background:var(--paper);border-color:transparent;min-height:44px;font-size:16px}
.linkbox .link-btn{flex:none;font-size:.9rem}
.link-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;margin-top:6px}
.link-mode p{margin:0;flex:1 1 220px;font-size:.88rem;font-weight:600;line-height:1.4;color:var(--ink-3)}
.link-mode .link-btn{font-size:.88rem;text-align:left}
/* Kurzlink nachziehen: ruhige Statuszeile (Teilen-Sheet und Übersicht) */
.short-sync{margin:4px 0 0;font-size:.84rem;font-weight:600;line-height:1.4;color:var(--ink-3)}
.link-mode .short-sync{flex:1 1 100%;margin-top:2px}
.summary + .short-sync{margin:10px 2px 0}
.share.busy #shareUrl::placeholder{color:var(--ink-3)}
.share.busy .wa,.share.busy #shareOpen,.share.busy .share-row .btn-s{opacity:.5;cursor:progress}
.qr-box{display:none;justify-items:center;gap:6px;margin-top:16px;padding:16px;background:var(--paper);border-radius:var(--r)}
.qr-box canvas{width:180px;height:180px;image-rendering:pixelated;border-radius:12px}
.qr-box p{margin:0;font-size:.88rem;font-weight:600;color:var(--ink-3)}
@media (min-width:1000px), (hover:hover) and (pointer:fine){ .qr-box{display:grid} }
.note{margin:14px 0 0;font-size:.9rem;background:var(--sun-1);border-radius:12px;padding:10px 14px;color:var(--ink)}

/* Toast & Konfetti */
.toast{position:fixed;left:50%;bottom:calc(var(--ab-h) + env(safe-area-inset-bottom) + 14px);translate:-50% 0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--pill);
  font-weight:700;font-size:.94rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);max-width:calc(100% - 32px);width:max-content;text-align:center}
dialog .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
.toast.has-act{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px}
.toast-act{min-height:44px;padding:0 16px;border:0;border-radius:var(--pill);background:#fff;color:var(--ink);font-weight:800}
.toast-act:hover{background:var(--sun)}
.toast.show{animation:toast .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes toast{from{opacity:0;translate:-50% 12px}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{position:absolute;top:45%;border-radius:2px}

/* =========================================================
   Desktop: Funnel links (max. 560 px Inhalt), Handy rechts auf der Sonnen-Bühne
   ========================================================= */
@media (min-width:1000px){
  :root{--col:clamp(480px,44vw,600px);--gut:40px}
  .shell{box-shadow:1px 0 0 var(--line);background:var(--white);position:relative;z-index:2}
  .main{padding-top:32px}
  .actionbar{box-shadow:0 -1px 0 var(--line),1px 0 0 var(--line)}
  .actionbar > *{max-width:560px}
  .pv[data-mode="desk"]{left:var(--col);right:0;top:0;bottom:0;z-index:1;padding:14px 24px 14px;align-items:center;transform:none;background:var(--paper);isolation:isolate;overflow:hidden}
  .pv[data-mode="desk"]::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(78%,560px);height:min(66%,640px);translate:-50% -46%;border-radius:40px;background:var(--sun)}
  .pv[data-mode="desk"]::after{content:"";position:absolute;z-index:-1;left:50%;bottom:-60px;width:min(110%,900px);height:150px;translate:-50% 0;border-radius:50%;background:var(--coral);opacity:.9}
  .pv[data-mode="desk"] .stepnav{z-index:1}
  .pv[data-mode="desk"] .stepchip:not([aria-pressed="true"]){background:#fff}
  .pv[data-mode="desk"] .stepchip:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .pv[data-mode="desk"] .pv-stage{width:100%}
  .pv[data-mode="desk"] .pv-hint{display:block;position:relative;margin:10px 0 0;padding:8px 18px;border-radius:18px;background:#fff;color:var(--ink);font-size:.9rem;font-weight:700;text-align:center;flex:none;box-shadow:var(--s1)}
  .pv-slot{display:none}
  .pv-hero{margin:0 0 20px;justify-items:start;padding:0;background:none}
  .pv[data-mode="full"]{background:rgba(43,42,41,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:center;padding-bottom:16px}
  .pv[data-mode="full"] .pv-top{width:min(560px,100%);padding-top:16px}
  .pv[data-mode="full"] .pv-back{background:#fff;color:var(--ink)}
  .pv[data-mode="full"] .pv-title{color:#fff}
  .pv[data-mode="full"] .stepchip:not([aria-pressed="true"]){background:rgba(255,255,255,.94)}
  .pv[data-mode="full"] .stepchip[aria-pressed="true"]{background:var(--ink);box-shadow:0 0 0 2px #fff}   /* Blau bleibt „Diese nehmen“ vorbehalten */
  .pv[data-mode="full"] .pv-stage{width:100%}
  .pv[data-mode="full"] .pv-foot{background:none;box-shadow:none;width:min(420px,100%)}
  dialog.sheet{width:min(560px,calc(100% - 32px));margin:auto;border-radius:32px;max-height:calc(100dvh - 48px);box-shadow:var(--shadow-lg)}
  dialog.sheet[open]{animation:sheetIn .35s var(--ease)}
  @keyframes sheetIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
  .sheet-in{max-height:calc(100dvh - 48px)}
  .grab{display:none}
  .sheet-head{padding-top:24px}
  .x{top:18px}
  .toast{left:calc(var(--col) / 2)}
  dialog .toast{left:50%}
  .ws{padding-top:58px;background:var(--sky-1)}   /* rechts steht schon die Sonnen-Bühne */
  .ws-k.k1,.ws-k.k2{color:var(--sun)}
}
@media (min-width:1000px) and (max-height:760px){
  .pv[data-mode="desk"] .pv-hint{margin-top:6px;padding:4px 14px;font-size:.88rem}
  .share-hero{height:104px}.share-fig{width:84px;height:84px}
}

/* Tablet und Handy quer (600 bis 999 px): Aktionsleiste und Sheets auf die Inhaltsbreite, statt quer über den ganzen Schirm */
@media (min-width:600px) and (max-width:999px){
  .actionbar{padding-left:max(var(--gut), env(safe-area-inset-left), calc((100% - 560px) / 2));padding-right:max(var(--gut), env(safe-area-inset-right), calc((100% - 560px) / 2))}
  dialog.sheet{width:min(600px,100%);margin:auto auto 0}
}

/* Niedrige Handys (z. B. 568 px): Bühne und Abstände kompakter */
@media (max-height:700px) and (max-width:999px){
  :root{--bar-h:58px;--ab-h:74px}
  .main{padding-top:16px}
  .actionbar .btn-p{min-height:52px}
  .ws{padding:46px 14px 12px;margin-bottom:20px}
  .ws-card{padding:40px 14px 16px}
  .ws-fig{width:64px;height:64px;top:-32px}
  .ws-card strong{font-size:1.12rem;margin-bottom:12px}
  .ws-btns{min-height:84px;margin:-12px 0 -16px}
  .ws-cap{margin-top:8px}
  .welcome .h1{font-size:clamp(1.8rem,7.6vw,2.3rem)}
  .sub{margin-bottom:18px}
}

/* Handy quer (wenig Höhe): Kopf, Aktionsleiste und Sheets kompakter, damit mehr Inhalt sichtbar bleibt */
@media (max-height:500px) and (orientation:landscape) and (max-width:999px){
  :root{--bar-h:52px;--ab-h:66px}
  .actionbar{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .actionbar .btn-p{min-height:48px}
  .main{padding-top:14px}
  dialog.sheet{max-height:94dvh}
  .sheet-in{max-height:94dvh}
  .sheet-head{padding-top:6px;padding-bottom:4px}
  .grab{margin-bottom:6px}
  .sheet-head h2{font-size:1.22rem}
  .x{top:6px}
  .sheet-foot{grid-auto-flow:column;justify-content:center;align-items:center;gap:4px 20px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .sheet-foot .btn-p.wide{width:auto;min-width:min(280px,45vw)}
  .share-hero{height:96px}.share-fig{width:76px;height:76px}
  /* Willkommen quer: Bühne links, Text rechts, damit die Überschrift ohne Scrollen sichtbar ist */
  body[data-screen="home"] .screen{max-width:820px}
  .welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:center;text-align:left}
  .welcome .ws{grid-column:1;grid-row:1 / span 4;align-self:start;margin:0;text-align:center;padding:40px 12px 8px}
  .ws-card{padding:34px 12px 12px}
  .ws-fig{width:56px;height:56px;top:-28px}
  .ws-card strong{font-size:1.05rem;margin-bottom:8px}
  .ws-btns{min-height:68px;margin:-8px 0 -10px}
  .ws-cap{margin-top:6px;min-height:32px}
  .ws-buddy{left:3%;right:auto;top:6px;bottom:auto;width:42px;height:42px}
  .ws-k.k1{display:none}
  .welcome > :not(.ws){grid-column:2}
  .welcome .eyebrow{justify-self:start;margin-top:0}
  .welcome .sub{margin:0 0 14px}
  .welcome .perks{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:6px;margin:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Logo: „Dates“ mit Sonnen-Marker (auf dunklem Grund Koralle) */
.logo-d{background:linear-gradient(transparent 64%,var(--sun) 64%,var(--sun) 90%,transparent 90%)}

/* Vorlage angetippt: „Weiter“ wippt einmal kurz, damit klar ist, wo es weitergeht */
@media (prefers-reduced-motion:no-preference){#primaryBtn.nudge{animation:tplNudge .5s var(--ease)}@keyframes tplNudge{35%{transform:scale(1.05)}70%{transform:scale(.98)}}}