:root{
  --ink:#1f2925;--ink-soft:#6b756f;--white:#fff;
  --green:#087656;--green-dark:#06634a;
  --point:#2563eb;--point-soft:#eaf1ff;--point-glow:rgba(37,99,235,.16);--point-ink:#1d4ed8; /* „hier ist es“ */--green-soft:#e8f4ef;--green-line:#cfe5da;
  --blue-soft:#eaf0f6;--blue-line:#c9d7e6;--blue:#4a6a8c;
  --sand-soft:#f6f1e7;--sand-line:#e6dac2;--sand:#8a6d3b;
  --red:#c2453b;
  --line:#e4e8e3;--line-strong:#d6dcd5;
  --shadow:0 18px 60px rgba(22,31,27,.08);--shadow-soft:0 8px 28px rgba(22,31,27,.06);
  --px:1px; /* 1 Minute im Tagesplan */

  /* Bewegung: eine Kurve, wenige Zeiten. Hier wird das ganze Timing eingestellt. */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms;             /* kleine Rückmeldung: Hover, Auswahl, Text aus */
  --t-base:300ms;             /* Seite überblenden */
  --t-in:350ms;               /* Text einblenden */
  --t-leave:250ms;            /* Text ausblenden vor einem Bühnenwechsel */
  --t-reveal:500ms;           /* Vorschau erscheint zum ersten Mal */
  --t-hold:600ms;             /* gewählte Antwort stehen lassen, bevor es weitergeht */
  --t-move:700ms;             /* Portrait wandert von Ebene 1 nach Ebene 2 */
  --t-move-inpage:600ms;      /* Portrait wird innerhalb von Ebene 2 gross/klein */
  --t-text-after-move:400ms;  /* Text kommt, wenn das Portrait fast steht */
  --t-arrive-text:520ms;      /* dasselbe bei der Ankunft von Ebene 1 */
  --t-snap:120ms;             /* Termin rastet beim Ziehen ein */

  /* Bestätigungen: dort, wo es zählt, deutlich und lange genug */
  --t-check:450ms;            /* Häkchen zeichnet sich */
  --t-ring:900ms;             /* Ring um einen neuen/verschobenen Termin (neu: 2 Durchgänge) */
  --t-new-hold:6000ms;        /* neuer Termin bleibt kräftig markiert, sobald er im Blick ist */
  --t-settle:800ms;           /* Markierung klingt danach weich ab */
  --t-note:2500ms;            /* kurze Bestätigungen stehen lassen */
  --t-toast:5000ms;           /* Hinweis mit „Rückgängig“ */
}
@view-transition{navigation:auto}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(circle at 30% 0%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 50%),linear-gradient(145deg,#fafaf8 0%,#f3f4ef 48%,#eef3ef 100%)}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin-top:0} h1,h2,h3{letter-spacing:-.03em;line-height:1.1}
p{color:var(--ink-soft)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(10,143,102,.45);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
.topbar{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(31,41,37,.06);background:rgba(250,250,248,.85);backdrop-filter:blur(18px)}
.nav{width:min(1240px,calc(100vw - 40px));margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.crumbs{display:flex;align-items:center;gap:10px;font-size:15px;min-width:0}
.crumbs a{font-weight:650;letter-spacing:-.02em;font-size:18px;min-height:44px;display:inline-flex;align-items:center}
.crumbs .sep{color:var(--line-strong)}
.crumbs strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-link{font-size:14px;font-weight:650;color:var(--ink-soft);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav-link:hover{color:var(--ink)}

/* Buttons & Felder */
.button{min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;background:var(--ink);color:#fff;font-weight:680;cursor:pointer;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.button:hover{background:#111915;transform:translateY(-1px);box-shadow:0 8px 22px rgba(22,31,27,.12)}
.button:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.button.green{background:var(--green)}.button.green:hover{background:var(--green-dark)}
.button.secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.button.secondary:hover{box-shadow:inset 0 0 0 1px var(--line-strong),0 6px 16px rgba(22,31,27,.06)}
.button.small{min-height:44px;padding:0 14px;border-radius:11px;font-size:14px}
.text-btn{background:none;border:0;padding:6px 2px;min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;color:var(--ink-soft);font-weight:600;cursor:pointer;font-size:14px}
.text-btn:hover{color:var(--ink)}
.link-btn{background:none;border:0;padding:0;color:var(--green-dark);font-weight:650;cursor:pointer;border-bottom:1px solid var(--green-line)}
.field{width:100%;min-height:48px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:0 14px;outline:none}
textarea.field{padding:12px 14px;min-height:84px;resize:vertical}
.field:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(10,143,102,.12)}
label{display:grid;gap:6px;font-size:12px;font-weight:650;color:var(--ink-soft)}

/* Bühne */
.stage{width:min(1240px,calc(100vw - 40px));margin:0 auto;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:56px;padding:56px 0 88px;align-items:start}
body[data-phase="demo"] .stage{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:32px;padding-top:36px}
body[data-phase="solo"] .stage{grid-template-columns:minmax(0,560px);justify-content:center}
body[data-phase="solo"] .app{display:none}
body[data-step="start"] .host-name{display:none}
body[data-step="start"] .nav-link,body[data-step="kontakt"] .nav-link,body[data-step="gesendet"] .nav-link{visibility:hidden}
/* Vorschau erst nach der ersten Antwort */
.app.fade{transition:opacity var(--t-in) var(--ease),visibility 0s linear 0s}
body[data-phase="ask"] .app.fade.is-shown{transition-duration:var(--t-reveal),0s}
body[data-phase="ask"] .app.fade:not(.is-shown){opacity:0;visibility:hidden;transition:opacity var(--t-reveal) var(--ease),visibility 0s linear var(--t-reveal)}

/* Gesprächsspalte */
.host{position:sticky;top:96px}
.host-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
.portrait{view-transition-name:severin;width:184px;height:184px;border-radius:50%;object-fit:cover;background:#dbe9f3;box-shadow:0 14px 40px rgba(22,31,27,.12)}
.host-name{font-size:14px;color:var(--ink-soft)}.host-name strong{color:var(--ink);font-weight:650}
body[data-phase="demo"] .host-head{flex-direction:row;align-items:center;gap:12px;margin-bottom:20px}
body[data-phase="demo"] .portrait{width:56px;height:56px;box-shadow:0 6px 18px rgba(22,31,27,.10)}
.progress{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.q{font-size:clamp(30px,3.2vw,40px);font-weight:650;margin-bottom:14px;outline:none}
body[data-phase="demo"] .q{font-size:28px}
/* Frage → Frage: aus in --t-fast, ein in --t-in, höchstens 4px Weg */
.step{transition:opacity var(--t-in) var(--ease),transform var(--t-in) var(--ease)}
.step.is-out{opacity:0;transition-duration:var(--t-fast)}
.step.is-pre{opacity:0;transform:translateY(4px);transition:none}
/* Bühnenwechsel: Text aus, Portrait bewegt sich, Text ein */
.fade{transition:opacity var(--t-in) var(--ease)}
body.is-leaving .fade{opacity:0;transition-duration:var(--t-leave)}
body.is-entering .fade,.vt-arrive .fade{opacity:0;transition:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Einstieg */
.intro{font-size:18px;line-height:1.55;max-width:520px}
.facts{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--ink-soft)}
.facts li{display:flex;gap:10px;align-items:baseline}
.facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green);transform:translateY(-2px)}
.choices{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.step p{margin-bottom:18px}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.back{display:inline-flex;margin-top:16px}
.name-input{font-size:20px;min-height:58px;border-radius:15px}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:620;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.chip:hover{border-color:#c6d6cd;background:#fbfcfb}
.chip[aria-pressed="true"]{background:var(--green-soft);border-color:#b9d8c9;color:#1f5140}
.chip[aria-pressed="true"]::before{content:"✓";font-size:13px;font-weight:800;color:var(--green)}
.chip small{font-weight:500;color:var(--ink-soft)}

.ready-list{margin:0 0 20px;padding:0;list-style:none;border-top:1px solid var(--line)}
.ready-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.ready-list span{color:var(--ink-soft)}.ready-list strong{text-align:right}

.tasks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.tasks li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-soft)}
/* Zeigen, wo eine Aufgabe erledigt wird */
.tasks li{cursor:default;transition:box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.tasks li:hover,.tasks li:focus-within{border-color:#c9d8f7;box-shadow:var(--shadow-soft),0 0 0 1px #c9d8f7;transition-duration:var(--t-fast)}
.side-btn,.plan-scroll,.widget,.price-field .field{transition:box-shadow var(--t-base) var(--ease),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.is-pointed{box-shadow:0 0 0 2px var(--point),0 0 0 7px var(--point-glow)!important;transition-duration:var(--t-fast)!important}
.side-btn.is-pointed{background:var(--point-soft);color:var(--point-ink)}
.tasks .check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px;transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.tasks li.done .check{background:var(--green);border-color:var(--green)}
.tasks li.done .check::after{content:"✓"}
.tasks strong{display:block;font-size:15px;margin-bottom:2px}
.tasks li span.t{font-size:13.5px;color:var(--ink-soft);display:block}
.tasks li.done strong{color:var(--ink-soft)}
.next-box{padding:20px;border-radius:18px;background:var(--green-soft);border:1px solid var(--green-line)}
.next-box strong{display:block;font-size:17px;margin-bottom:4px}
.next-box p{color:#3c5a4e;margin-bottom:14px;font-size:14px}
.later-note{margin:14px 0 0!important;font-size:13px!important}
.soon{display:inline-block;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:999px;background:#fff;color:var(--green);margin-left:4px;vertical-align:1px}

.form-grid{display:grid;gap:14px}
.form-grid .chips .chip{min-height:44px;font-size:14px;padding:0 13px}
.brief{font-size:13px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.brief strong{color:var(--ink)}
.privacy{font-size:12.5px!important;margin:0!important}
.req{font-weight:500;color:var(--ink-soft)}
.field[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(194,69,59,.12)}
.form-error{color:var(--red);font-size:13px;font-weight:600;min-height:18px;margin:0!important}

/* Vorschau-Fenster */
.app-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px 4px}
body[data-phase="demo"] .app-label{display:none}
.app-window{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.92);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.app-bar{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 16px;background:rgba(248,249,247,.85)}
.dot{width:7px;height:7px;border-radius:50%;background:#cbd1cc}
.url{margin-left:12px;font-size:12px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.app-body{display:grid;grid-template-columns:minmax(0,1fr)}
body[data-phase="demo"] .app-body{grid-template-columns:188px minmax(0,1fr)}
.app-side{display:none;border-right:1px solid var(--line);padding:18px 12px;background:#fafbf9}
body[data-phase="demo"] .app-side{display:block}
.side-label{display:block;font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:14px 10px 6px}
.side-label:first-child{margin-top:0}
.side-btn{display:flex;width:100%;min-height:44px;text-align:left;border:0;background:none;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;align-items:center;justify-content:space-between;gap:6px}
.side-btn:hover{background:#f0f3ef;color:var(--ink)}
.side-btn[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.side-btn .count{font-size:11px;background:var(--green-soft);color:var(--green-dark);padding:1px 7px;border-radius:999px}
.app-main{padding:26px;min-width:0;container-type:inline-size;min-height:560px}
.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.view-head h2{font-size:24px;margin:0 0 2px;letter-spacing:-.03em;line-height:1.1}
.view-head p{margin:0;font-size:14px}
.stats{display:flex;gap:18px;font-size:13px;color:var(--ink-soft);align-items:center}
.stats strong{color:var(--ink);font-size:15px;display:block}

/* Website-Ansicht */
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:750}
.site-name{font-size:clamp(28px,4.4cqi,38px);margin:8px 0 10px;word-break:break-word;color:var(--ink);font-weight:650;letter-spacing:-.03em;line-height:1.1}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.svc.is-new{animation:fadeIn var(--t-base) var(--ease)}
.svc strong{font-size:14px}.svc span{color:var(--ink-soft)}
.initial{width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;font-size:11px;font-weight:750}
.widget{align-self:start;padding:20px;border-radius:20px;background:#fbfcfa;border:1px solid var(--line);box-shadow:var(--shadow-soft);display:grid;gap:12px;align-content:start}
.widget-head{display:flex;justify-content:space-between;align-items:center}
.badge{font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.1em;color:var(--green);background:var(--green-soft);padding:5px 8px;border-radius:999px}
.w-label{font-size:12px;font-weight:650;color:var(--ink-soft)}
.w-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{min-height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;font-weight:650;font-size:13px;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.slot:hover{border-color:#c8d8d0}
.slot[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.w-empty{grid-column:1/-1;font-size:13px;margin:0}
.w-sum{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding-top:10px;border-top:1px dashed var(--line)}
.w-sum span{color:var(--ink-soft)}
.w-feedback{margin:0;font-size:13px;font-weight:650;color:var(--green-dark);min-height:18px}
.w-feedback .link-btn{margin-left:4px}
.field.sm{min-height:42px;border-radius:11px;font-size:14px}

/* Tagesplan */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin-bottom:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.src-online{--bg:var(--green-soft);--bd:var(--green);--tx:#1d4f3f}
.src-telefon{--bg:var(--blue-soft);--bd:var(--blue);--tx:#2d4660}
.src-vorort{--bg:var(--sand-soft);--bd:var(--sand);--tx:#5e4a26}
.legend .src-online,.legend .src-telefon,.legend .src-vorort{background:var(--bd)}
.plan-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.plan{display:grid;grid-template-columns:46px repeat(var(--cols),minmax(124px,1fr));min-width:calc(46px + var(--cols) * 124px)}
.plan-name{position:sticky;top:0;padding:10px 10px;font-size:13px;font-weight:700;border-bottom:1px solid var(--line);border-left:1px solid var(--line);background:#fcfdfc;display:flex;align-items:center;gap:8px}
.plan-corner{border-bottom:1px solid var(--line);background:#fcfdfc}
.gutter{position:relative;height:calc(600 * var(--px))}
.gutter span{position:absolute;right:8px;font-size:10.5px;color:var(--ink-soft);transform:translateY(-50%)}
.col{position:relative;height:calc(600 * var(--px));border-left:1px solid var(--line);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(60 * var(--px) - 1px),var(--line) calc(60 * var(--px) - 1px),var(--line) calc(60 * var(--px))),
    repeating-linear-gradient(to bottom,transparent 0,transparent calc(30 * var(--px) - 1px),#f2f4f1 calc(30 * var(--px) - 1px),#f2f4f1 calc(30 * var(--px)))}
.col.drop{background-color:#fbfdfc}
.appt{position:absolute;left:4px;right:4px;border:0;border-left:3px solid var(--bd);background:var(--bg);color:var(--tx);border-radius:8px;padding:4px 7px;text-align:left;font-size:11.5px;line-height:1.3;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow var(--t-fast) var(--ease),background-color var(--t-settle) var(--ease),color var(--t-settle) var(--ease),border-color var(--t-settle) var(--ease)}
.appt:hover{box-shadow:0 4px 14px rgba(22,31,27,.10)}
.appt .t{font-weight:750;margin-right:4px}.appt .c{font-weight:650}
.appt .s{display:block;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt.short .s{display:none}
.appt.selected{box-shadow:0 0 0 2px var(--ink),0 6px 18px rgba(22,31,27,.14);z-index:3;touch-action:none}
@media(pointer:fine){.appt{touch-action:none}}
.appt.dragging{cursor:grabbing;box-shadow:0 12px 30px rgba(22,31,27,.2);z-index:5;opacity:.95;transition:top var(--t-snap) var(--ease),transform var(--t-snap) var(--ease)}
.appt.conflict{box-shadow:0 0 0 2px var(--red),0 12px 30px rgba(22,31,27,.2)}
/* Neuer Termin: kräftig gefüllt, mit „Neu“, bis er gesehen wurde */
.src-online{--solid:#087656}.src-telefon{--solid:#3f5f80}.src-vorort{--solid:#77602f}
.appt.is-new{background:var(--solid);color:#fff;border-left-color:var(--solid);z-index:2}
.new-tag{position:absolute;top:4px;right:5px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:var(--solid);padding:1px 6px;border-radius:999px;transition:opacity var(--t-settle) var(--ease)}
.new-tag.gone{opacity:0}
.appt.ring{animation:ring var(--t-ring) var(--ease) 2}
.appt.ring-once{animation:ring var(--t-ring) var(--ease) 1}
.appt.ring-deny{animation:deny var(--t-ring) var(--ease) 1}
@keyframes ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--solid) 55%,transparent);transform:scale(.97)}
  25%{transform:scale(1.02)}
  55%{transform:none}
  75%{box-shadow:0 0 0 14px color-mix(in srgb,var(--solid) 0%,transparent)}
  100%{box-shadow:0 0 0 0 transparent;transform:none}}
@keyframes deny{0%{box-shadow:0 0 0 0 rgba(194,69,59,.5)}75%{box-shadow:0 0 0 12px rgba(194,69,59,0)}100%{box-shadow:0 0 0 0 transparent}}

/* Rückmeldungen */
.plan-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px;min-height:32px}
.plan-bar .legend{margin:0}
.plan-msg{margin:0}
.msg{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;font-size:13px;font-weight:650;animation:msgIn var(--t-in) var(--ease)}
.msg::before{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:none}
.msg.ok{background:var(--green-soft);color:#1d4f3f;border:1px solid var(--green-line)}
.msg.ok::before{content:"✓";background:var(--green)}
.msg.warn{background:#fbeceb;color:#8e2f27;border:1px solid #f0cdca}
.msg.warn::before{content:"!";background:var(--red)}
.msg.info{background:#f2f4f1;color:#3f4944}
@keyframes msgIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.count.is-new{background:var(--green);color:#fff;font-weight:700}
.bump{animation:bump var(--t-ring) var(--ease) 1;display:inline-block}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.18);color:var(--green)}100%{transform:scale(1)}}
.saved{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;font-size:13px;font-weight:650;background:var(--green-soft);color:#1d4f3f;border:1px solid var(--green-line)}
.saved::before{content:"✓";width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--green)}
.setup-row.row-saved{animation:rowSaved 1400ms var(--ease) 1;border-radius:12px}
@keyframes rowSaved{0%,35%{background:var(--green-soft);box-shadow:0 0 0 6px var(--green-soft)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}

/* Häkchen, das sich zeichnet */
.check-mark{width:52px;height:52px;display:block}
.check-mark circle{fill:var(--green-soft);stroke:var(--green);stroke-width:2;transform-origin:center;animation:checkCircle var(--t-in) var(--ease) both}
.check-mark path{fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:checkDraw var(--t-check) var(--ease) calc(var(--t-in) * .6) forwards}
@keyframes checkCircle{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
.step[data-step="gesendet"] .check-mark{width:64px;height:64px;margin-bottom:18px}
.w-done{display:grid;justify-items:center;text-align:center;gap:6px;padding:10px 4px 4px}
.w-done .check-mark{width:60px;height:60px;margin-bottom:6px}
.w-done-title{font-size:20px;letter-spacing:-.02em}
.w-done p{margin:0;font-size:14px}
.w-done-what{color:var(--ink)!important;font-weight:650}
.w-done-next{margin:6px 0 10px!important;color:#1d4f3f!important;background:var(--green-soft);border-radius:10px;padding:8px 12px}
.w-done .button{width:100%;padding:0 12px;font-size:15px}
.w-fields{display:grid;gap:12px}

/* Aufgabe erledigt */
.tasks li.just-done{animation:taskDone 1600ms var(--ease) 1}
.tasks li.just-done .check{animation:checkPop var(--t-check) var(--ease) 1}
@keyframes taskDone{0%,40%{background:var(--green-soft)}100%{background:rgba(255,255,255,.75)}}
@keyframes checkPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
.now{position:absolute;left:0;right:0;height:0;border-top:1.5px solid var(--red);z-index:2;pointer-events:none}
.now::before{content:"";position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.detail{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fbfcfa;border:1px solid var(--line);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:14px}
.detail p{margin:2px 0 0;font-size:13px}
.detail .note{color:var(--sand);font-weight:600}
.detail-actions{display:flex;gap:6px;flex-wrap:wrap}
.quick-add{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;align-items:end;padding:14px;border-radius:14px;background:var(--blue-soft);border:1px solid var(--blue-line);margin-bottom:14px}
@container (max-width:640px){.quick-add{grid-template-columns:1fr 1fr}.quick-add .qa-actions{grid-column:1/-1}}
.qa-actions{display:flex;gap:6px}

/* Listen */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);text-align:left;font-weight:700;padding:0 10px 10px;border-bottom:1px solid var(--line)}
.table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table td.num,.table th.num{text-align:right;white-space:nowrap}
.table tfoot td{font-weight:700;border-bottom:0}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--tx);white-space:nowrap}
.tag.new{background:var(--green);color:#fff}
.table-wrap{overflow-x:auto}
@container (max-width:560px){.table .hide-sm{display:none}}
.cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cust{padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:13.5px}
.cust strong{display:flex;justify-content:space-between;gap:8px;font-size:15px;margin-bottom:4px}
.cust p{margin:0;font-size:13px}
.cust .note{color:var(--sand);margin-top:6px}

/* Angebot & Team */
.setup h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:18px 0 8px}
.setup-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 96px 36px;gap:8px;align-items:center;margin-bottom:8px}
.setup-row.team{grid-template-columns:minmax(0,1fr) 36px}
.setup-row .field{min-height:42px;border-radius:11px;font-size:14px}
.price-field{position:relative}
.price-field span{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--ink-soft);pointer-events:none}
.price-field .field{padding-left:42px}
.icon-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink-soft);font-size:16px}
.icon-btn:hover:not(:disabled){color:var(--red);border-color:#e7c9c5}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
.setup-hint{margin-top:18px;padding:14px 16px;border-radius:14px;background:#f6f7f4;font-size:13.5px;color:#4a544f}
@container (max-width:520px){.setup-row{grid-template-columns:minmax(0,1fr) 92px 36px}.setup-row .dur{grid-column:1/2}.setup-row.team{grid-template-columns:minmax(0,1fr) 36px}}

.site-footer{width:min(1240px,calc(100vw - 40px));margin:0 auto;padding:10px 0 24px;border-top:1px solid rgba(31,41,37,.06);display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-soft)}
.site-footer .links{display:flex;gap:16px}
.site-footer a{min-height:44px;display:inline-flex;align-items:center}
.site-footer{align-items:center}
.site-footer a:hover{color:var(--ink)}
@media(max-width:620px){.site-footer{width:calc(100vw - 32px)}}
.noscript{width:min(560px,calc(100vw - 32px));margin:56px auto;padding:24px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.noscript p{margin:0 0 10px}.noscript a{color:var(--ink);font-weight:650}
.noscript-title{font-size:22px;font-weight:650;color:var(--ink)!important;letter-spacing:-.02em}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;display:flex;align-items:center;gap:14px;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);z-index:60;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{background:none;border:0;color:#9fe0c8;font-weight:700;cursor:pointer;padding:4px 0;font-size:14px}
.toast button:hover{color:#fff}

::view-transition-group(severin){animation-duration:var(--t-move);animation-timing-function:var(--ease)}
:root.vt-inpage::view-transition-group(severin){animation-duration:var(--t-move-inpage)}
::view-transition-image-pair(severin){isolation:auto}
::view-transition-old(severin),::view-transition-new(severin){animation-timing-function:var(--ease);animation-duration:var(--t-base)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-base);animation-timing-function:var(--ease)}

@media(max-width:960px){
  .stage,body[data-phase="demo"] .stage{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:32px}
  .host{position:static}
  body[data-phase="demo"] .host{order:2}
body[data-phase="ask"] .app:not(.is-shown){display:none}
  body[data-phase="demo"] .app-body{grid-template-columns:minmax(0,1fr)}
  .app-side{border-right:0;border-bottom:1px solid var(--line);padding:10px;display:none;overflow-x:auto;white-space:nowrap}
  body[data-phase="demo"] .app-side{display:flex;gap:4px}
  .app-side .side-label{display:none}
  .side-btn{width:auto;flex:none}
}
@media(max-width:620px){
  .stage,.nav{width:calc(100vw - 32px)}
  .crumbs a{font-size:16px}.crumbs{font-size:14px}
  .portrait{width:136px;height:136px}
  .app-main{padding:16px;min-height:0}
  .q{font-size:30px}
  .w-slots{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}*,*::before,*::after{animation:none!important;transition:none!important}.check-mark path{stroke-dashoffset:0}}
/* Salon-Website im Vorschaufenster: scrollt wie ein Browserfenster */
.view[data-view="site"]{margin:-26px}
.site-scroll{position:relative;height:min(680px,calc(100vh - 150px));min-height:520px;overflow-y:auto;overscroll-behavior:contain;background:#fff}
.s-nav{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:14px;padding:12px 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.s-brand{font-weight:700;letter-spacing:-.02em;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s-links{display:flex;gap:2px;margin-left:auto}
.s-link{border:0;background:none;min-height:44px;padding:0 10px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;border-radius:10px}
.s-link:hover{color:var(--ink);background:#f4f6f3}
.s-cta{border:0;background:var(--green);color:#fff;min-height:44px;padding:0 16px;border-radius:12px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background var(--t-fast) var(--ease)}
.s-cta:hover{background:var(--green-dark)}
.s-cta.big{min-height:48px;padding:0 20px;font-size:15px}
.s-ghost{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);min-height:48px;padding:0 18px;border-radius:12px;font-weight:650;font-size:15px;cursor:pointer}
.s-ghost:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.s-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px;align-items:center;padding:34px 26px 30px;background:linear-gradient(135deg,#fff 0%,#fff 58%,#f1f5f1 58%)}
.s-lead{font-size:16px;color:var(--ink-soft);margin:0 0 20px;max-width:420px}
.s-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.s-facts{display:flex;gap:6px 16px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--ink-soft)}
.s-photo{aspect-ratio:4/5;max-height:300px;width:100%;border-radius:20px;background:radial-gradient(circle at 30% 25%,#fff 0,rgba(255,255,255,0) 45%),linear-gradient(160deg,#dfe9e3 0%,#c9dbd1 55%,#b7cdc1 100%);display:grid;align-items:end;padding:14px;box-shadow:var(--shadow-soft)}
.s-photo span{justify-self:start;font-size:11.5px;font-weight:650;color:#2f4a40;background:rgba(255,255,255,.8);padding:4px 10px;border-radius:999px}
.s-section{padding:30px 26px;border-top:1px solid var(--line)}
.s-h{font-size:21px;margin:0 0 14px;font-weight:650}
.s-small{font-size:12.5px;color:var(--ink-soft);margin:12px 0 0}
.s-book{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:start;background:#fafbf9}
.s-book p{font-size:14px;color:var(--ink-soft)}
.s-checks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:14px}
.s-checks li{display:flex;gap:8px;align-items:center}
.s-checks li::before{content:"✓";width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--green);flex:none}
.s-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.s-person{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px}
.s-person .initial{width:38px;height:38px;font-size:15px}
.s-person strong{display:block;font-size:14px;line-height:1.3}.s-person span:not(.initial){display:block;font-size:12px;line-height:1.3;color:var(--ink-soft);white-space:nowrap}
.s-contact{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.s-hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:14px}
.s-hours dt{color:var(--ink-soft)}.s-hours dd{margin:0;font-weight:600}
.s-address{font-size:14px;line-height:1.7;margin:0}
.s-footer{display:flex;gap:8px 18px;flex-wrap:wrap;padding:18px 26px 22px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
.s-made{margin-left:auto}
@container (max-width:640px){
  .s-hero,.s-book,.s-contact{grid-template-columns:1fr}
  .s-hero{background:#fff;padding:22px 18px 26px}
  .s-photo{aspect-ratio:auto;height:150px;max-height:none;order:-1}
  .s-links{display:none}
  .s-nav .s-cta{margin-left:auto}
  .s-section{padding:26px 18px}.s-nav{padding:10px 18px}.s-footer{padding:16px 18px 20px}
  .s-made{margin-left:0}
}

/* Handy, Tablet und Touch: die Salon-Website läuft im Seitenfluss mit, kein zweiter Scrollbereich */
@media(max-width:960px),(hover:none){
  .site-scroll{height:auto;min-height:0;overflow:visible}
  .s-nav{position:static}
  [data-site-section]{scroll-margin-top:72px}
}
@media(max-width:620px){.view[data-view="site"]{margin:-16px}}

/* Termin-Details: Vorschlagen, Absagen, offene Anfrage */
.detail{align-items:flex-start}
.detail-info{min-width:0;flex:1 1 260px}
.detail-step{display:grid;gap:10px;flex:1 1 300px;max-width:520px}
.detail-field{display:grid;gap:6px;font-size:12px;font-weight:650;color:var(--ink-soft)}
.detail-note{margin:0!important;font-size:13px!important;color:var(--ink)}
.detail-note.is-waiting{padding:8px 12px;border-radius:10px;background:var(--point-soft);color:var(--point-ink)}
.detail-step.is-danger .detail-note{padding:8px 12px;border-radius:10px;background:#fbeceb;color:#8e2f27}
.button.danger{background:var(--red)}.button.danger:hover{background:#a8392f}
/* Vorgeschlagene Zeit: gestrichelt, reserviert, nicht anfassbar */
.appt-ghost{position:absolute;left:4px;right:4px;border-radius:8px;padding:4px 7px;font-size:11.5px;line-height:1.3;overflow:hidden;pointer-events:none;border:1.5px dashed var(--bd);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bg) 70%,#fff) 0 6px,#fff 6px 12px);color:var(--tx);z-index:1}
.appt-ghost .t{font-weight:750;margin-right:4px}.appt-ghost .c{font-weight:650}
.appt-ghost .s{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:9.5px}
.appt-ghost.short .s{display:none}
.appt-ghost.draft{border-color:var(--point);color:var(--point-ink);background:repeating-linear-gradient(135deg,var(--point-soft) 0 6px,#fff 6px 12px)}
/* Wartet auf Antwort: gestrichelter Rand statt Blässe – Text bleibt gut lesbar */
.appt.pending{outline:1.5px dashed var(--bd);outline-offset:-1.5px}
/* Vorschlag überlappt den eigenen Termin: beide halb breit nebeneinander */
.appt.half{right:calc(50% + 2px)}
.appt-ghost.beside{left:calc(50% + 2px)}

/* Sprunglink */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-weight:650;text-decoration:none}
.skip:focus{top:12px}