/* Amplify WhatsApp, Prototyp. Richtung "Handy im Zentrum". */
:root{
  --ground:#F4F5F3; --surface:#FFFFFF; --sunk:#EEF0ED;
  --ink:#15181A; --ink-2:#3A4044; --muted:#6B7275; --line:#E2E5E1; --line-2:#D3D7D2;
  --accent:#3B44D9; --accent-ink:#FFFFFF; --accent-soft:#ECEDFC;
  --ok:#17795B; --ok-soft:#E3F3EC; --warn:#9A6A00; --warn-soft:#FBF1D9; --bad:#B4312B; --bad-soft:#FBE6E4;
  /* WhatsApp-Material, hell */
  --wa-bar:#F0F2F5; --wa-wall:#EFEAE2; --wa-in:#FFFFFF; --wa-out:#D9FDD3; --wa-text:#111B21; --wa-meta:#667781; --wa-link:#027EB5; --wa-dot:rgba(0,0,0,.035);
  --shadow:0 1px 2px rgba(20,24,26,.04),0 8px 24px rgba(20,24,26,.06);
  --serif:"Newsreader",Georgia,serif; --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0C0D; --surface:#131516; --sunk:#0F1112;
    --ink:#ECEDEE; --ink-2:#C4C8CB; --muted:#8B9296; --line:#23262A; --line-2:#2E3236;
    --accent:#8C93FF; --accent-ink:#0B0C0D; --accent-soft:#1C1E36;
    --ok:#4CC79A; --ok-soft:#10261E; --warn:#E3B54A; --warn-soft:#2A2210; --bad:#F07C74; --bad-soft:#2C1513;
    --wa-bar:#202C33; --wa-wall:#0B141A; --wa-in:#202C33; --wa-out:#005C4B; --wa-text:#E9EDEF; --wa-meta:#8696A0; --wa-link:#53BDEB; --wa-dot:rgba(255,255,255,.025);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0B0C0D; --surface:#131516; --sunk:#0F1112;
  --ink:#ECEDEE; --ink-2:#C4C8CB; --muted:#8B9296; --line:#23262A; --line-2:#2E3236;
  --accent:#8C93FF; --accent-ink:#0B0C0D; --accent-soft:#1C1E36;
  --ok:#4CC79A; --ok-soft:#10261E; --warn:#E3B54A; --warn-soft:#2A2210; --bad:#F07C74; --bad-soft:#2C1513;
  --wa-bar:#202C33; --wa-wall:#0B141A; --wa-in:#202C33; --wa-out:#005C4B; --wa-text:#E9EDEF; --wa-meta:#8696A0; --wa-link:#53BDEB; --wa-dot:rgba(255,255,255,.025);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Shell: Navigation | Arbeitsfläche | Handy */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr) 380px;min-height:100vh}
.nav{border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;background:var(--ground)}
.brand{display:flex;align-items:center;gap:9px;padding:0 6px;font-weight:600;letter-spacing:-.01em}
.brand-mark{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--ground);display:grid;place-items:center;font:500 15px/1 var(--serif);font-style:italic}
.brand small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:-2px}

.switcher{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 10px;display:flex;align-items:center;gap:9px;width:100%;text-align:left}
.switcher:hover{border-color:var(--line-2)}
.avatar{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line)}
.switcher .who{min-width:0;flex:1}
.switcher b{display:block;font-weight:550;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switcher .who>span{display:block;color:var(--muted);font:11px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{position:absolute;z-index:40;margin-top:6px;width:240px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:5px}
.menu button{display:flex;gap:9px;align-items:center;width:100%;border:0;background:none;padding:8px;border-radius:7px;text-align:left}
.menu button:hover{background:var(--sunk)}
.menu .sep{height:1px;background:var(--line);margin:5px 2px}

.links{display:flex;flex-direction:column;gap:2px}
.links .label{font:11px var(--mono);color:var(--muted);padding:10px 8px 4px;text-transform:uppercase;letter-spacing:.06em}
.link{display:flex;align-items:center;gap:10px;border:0;background:none;padding:7px 8px;border-radius:7px;color:var(--ink-2);text-align:left;width:100%}
.link svg{width:16px;height:16px;flex:none;opacity:.8}
.link:hover{background:var(--sunk)}
.link[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.link .count{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.nav-foot{margin-top:auto;display:flex;gap:6px;align-items:center}
.theme{display:flex;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--surface)}
.theme button{border:0;background:none;padding:5px 9px;border-radius:6px;color:var(--muted);font-size:12px}
.theme button[aria-pressed="true"]{background:var(--sunk);color:var(--ink)}

/* Arbeitsfläche */
.work{padding:34px 40px 80px;min-width:0}
.head{display:flex;align-items:flex-end;gap:16px;margin-bottom:26px}
.head .eyebrow{font:11.5px var(--mono);color:var(--muted);margin-bottom:6px}
.head h1{font:400 38px/1.05 var(--serif);letter-spacing:-.015em;margin:0}
.head h1 em{font-style:italic;color:var(--ink-2)}
.head p{margin:8px 0 0;color:var(--muted);max-width:56ch}
.head .actions{margin-left:auto;display:flex;gap:8px}

.btn{border:1px solid var(--line-2);background:var(--surface);padding:8px 13px;border-radius:8px;font-weight:500;font-size:13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.quiet{border-color:transparent;background:none;color:var(--muted)}
.btn.quiet:hover{color:var(--ink);background:var(--sunk)}
.btn svg{width:15px;height:15px}
.btn.wa{background:#1DAA61;border-color:#1DAA61;color:#fff;padding:11px 18px;font-size:14px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pad{padding:20px}
.grid{display:grid;gap:16px}
.split{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}

.pill{display:inline-flex;align-items:center;gap:5px;font:11px/1 var(--mono);padding:4px 7px;border-radius:5px;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.plain::before{display:none}
.tag{font:11px var(--mono);color:var(--muted)}

/* Listen */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%}
.row:last-child{border-bottom:0}
.row:hover{background:var(--sunk)}
.row[aria-selected="true"]{background:var(--accent-soft)}
.row .main{min-width:0;flex:1}
.row b{font-weight:550;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Formular */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label,.flabel{font-size:12.5px;font-weight:550;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--muted)}
.input,select.input,textarea.input{border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:9px 11px;width:100%}
textarea.input{min-height:120px;resize:vertical;line-height:1.55}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mono{font-family:var(--mono)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;padding:2px;background:var(--sunk);flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 11px;border-radius:6px;color:var(--muted);font-size:13px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.var{font:12px var(--mono);background:var(--accent-soft);color:var(--accent);padding:1px 5px;border-radius:4px}
.varmap{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center}
.btnrow{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 10px;margin-bottom:6px;background:var(--sunk)}
.btnrow .input{padding:6px 9px}
.btnrow .kind{font:11px var(--mono);color:var(--muted);width:74px;flex:none}
.x{border:0;background:none;color:var(--muted);padding:4px 6px;border-radius:6px}
.x:hover{background:var(--surface);color:var(--bad)}
.divider{height:1px;background:var(--line);margin:20px 0}
.section-t{font:400 21px/1.2 var(--serif);margin:0 0 4px}
.section-s{color:var(--muted);margin:0 0 16px;font-size:13px}

/* Kampagnen: Zweck und Strecke */
.purposes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.purpose{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:170px}
.purpose:hover{border-color:var(--accent)}
.purpose .kicker{font:11px var(--mono);color:var(--muted)}
.purpose h3{font:400 22px/1.15 var(--serif);margin:0}
.purpose p{margin:0;color:var(--muted);font-size:13px}
.purpose .src{margin-top:auto;font:11.5px var(--mono);color:var(--ink-2)}
.status{display:flex;gap:28px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.status div{display:flex;flex-direction:column;gap:2px}
.status b{font:400 26px/1 var(--serif);letter-spacing:-.01em}
.status span{font:11px var(--mono);color:var(--muted)}
.status .backlog b{color:var(--ok)}
.status .backlog.late b{color:var(--bad)}
.track{position:relative;padding:20px 20px 8px}
.step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding-bottom:18px}
.step::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:1px;background:var(--line-2)}
.step:last-child::before{display:none}
.dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--muted);z-index:1}
.dot svg{width:14px;height:14px}
.step.msg .dot{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.step.ai .dot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.stepcard{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--surface);text-align:left;width:100%;display:flex;gap:12px;align-items:center}
.stepcard:hover{border-color:var(--line-2)}
.step[aria-current="step"] .stepcard{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stepcard .main{flex:1;min-width:0}
.stepcard b{font-weight:550}
.stepcard small{display:block;color:var(--muted)}
.stepcard .num{font:12px var(--mono);color:var(--muted);text-align:right}
.wait{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:4px 0}
.wait svg{width:14px;height:14px;flex:none}
.wait input{width:54px;padding:4px 7px;text-align:center}
.add{border:1px dashed var(--line-2);background:none;border-radius:10px;padding:9px 13px;color:var(--muted);width:100%;text-align:left}
.add:hover{color:var(--ink);border-color:var(--muted)}

/* Onboarding */
.steps-on{display:grid;gap:0}
.on{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.on:last-child{border-bottom:0}
.on .n{font:400 24px/1 var(--serif);color:var(--muted)}
.on.done .n{color:var(--ok)}
.on h3{margin:0 0 3px;font-size:15px;font-weight:550}
.on p{margin:0;color:var(--muted);font-size:13px;max-width:60ch}
.connected{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:12px;background:var(--ok-soft);color:var(--ok)}
.connected b{color:var(--ink);font-weight:550}
.connected small{color:var(--ink-2)}

/* Tabelle Agentur */
.table{width:100%;border-collapse:collapse}
.table th{font:11px var(--mono);color:var(--muted);text-align:left;font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{white-space:nowrap;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{cursor:pointer}
.table tbody tr:hover td{background:var(--sunk)}
.table tbody tr[aria-selected="true"] td{background:var(--accent-soft)}
.table .n{font-family:var(--mono);font-size:13px;text-align:right}
.scrollx{overflow-x:auto}

/* Inbox */
.inbox{display:grid;grid-template-columns:270px minmax(0,1fr);height:calc(100vh - 235px);min-height:460px}
.inbox .list{border-right:1px solid var(--line);overflow:auto}
.thread{display:flex;flex-direction:column;min-width:0}
.thread-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.thread-h .main{flex:1;min-width:0}
.thread-h .main b,.thread-h .main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-h{flex-wrap:wrap}
.thread-b{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px;background:var(--sunk)}
.msg-l,.msg-r{max-width:72%;padding:8px 11px;border-radius:10px;font-size:13.5px;line-height:1.45;white-space:pre-wrap}
.msg-l{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.msg-r{align-self:flex-end;background:var(--ink);color:var(--ground)}
.msg-r.ai{background:var(--accent);color:var(--accent-ink)}
.msg-meta{font:10.5px var(--mono);opacity:.65;margin-top:3px}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.composer .input{flex:1}
.window{font:11px var(--mono);color:var(--muted);padding:6px 16px;border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center}

/* Handy, das Signatur-Element */
.stage{position:sticky;top:0;height:100vh;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:var(--ground);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px}
.stage-cap{font:11px var(--mono);color:var(--muted);display:flex;gap:10px;align-items:center}
.stage-cap .seg button{padding:3px 8px;font-size:11px}
.phone{width:320px;height:min(660px,calc(100vh - 120px));border-radius:46px;background:#0E0F10;padding:11px;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 30px 60px -20px rgba(0,0,0,.35),0 12px 24px -12px rgba(0,0,0,.25);position:relative}
.screen{height:100%;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;background:var(--wa-wall);color:var(--wa-text);font-family:-apple-system,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif}
.island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:20px;background:#000;z-index:3}
.sbar{height:44px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;font-size:13px;font-weight:600;background:var(--wa-bar)}
.wa-h{display:flex;align-items:center;gap:9px;padding:6px 12px 9px;background:var(--wa-bar);border-bottom:1px solid rgba(0,0,0,.05)}
.wa-h .pic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;background:#4A6670}
.wa-h b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:4px}
.wa-h small{display:block;font-size:11.5px;color:var(--wa-meta)}
.wa-h .verified{width:14px;height:14px}
.wa-b{flex:1;overflow:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px;background-color:var(--wa-wall);background-image:radial-gradient(var(--wa-dot) 1.2px,transparent 1.2px);background-size:14px 14px;scroll-behavior:smooth}
.wa-b::-webkit-scrollbar{width:0}
.day{align-self:center;font-size:11px;background:var(--wa-in);color:var(--wa-meta);padding:4px 9px;border-radius:7px;margin:6px 0;box-shadow:0 1px .5px rgba(0,0,0,.08)}
.sys{align-self:center;max-width:88%;text-align:center;font-size:11.5px;background:#FFF3C4;color:#54656F;padding:6px 10px;border-radius:7px;line-height:1.4}
:root[data-theme="dark"] .sys{background:#182229;color:#FFD279}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sys{background:#182229;color:#FFD279}}
.bub{max-width:84%;padding:6px 8px 5px 9px;border-radius:9px;font-size:13.5px;line-height:1.38;box-shadow:0 1px .5px rgba(0,0,0,.1);word-wrap:break-word;animation:pop .28s ease-out}
.bub.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:3px}
.bub.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:3px}
.bub .hd{font-weight:700;margin-bottom:3px}
.bub .img{height:118px;border-radius:6px;margin:-2px -4px 6px -5px;background:linear-gradient(135deg,#8B5E3C,#C9925A 55%,#E7C49A);display:flex;align-items:flex-end;padding:8px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
.bub .ft{font-size:12px;color:var(--wa-meta);margin-top:4px}
.bub .tm{float:right;font-size:10.5px;color:var(--wa-meta);margin:6px 0 -2px 10px}
.bub .ex{background:rgba(59,68,217,.12);border-radius:3px;padding:0 2px}
.bub .ph{font-family:var(--mono);font-size:12px;background:rgba(59,68,217,.14);color:#3B44D9;border-radius:3px;padding:0 3px}
:root[data-theme="dark"] .bub .ph{color:#B6BAFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bub .ph{color:#B6BAFF}}
.wbtns{align-self:flex-start;width:84%;display:flex;flex-direction:column;gap:3px;margin-top:-3px;animation:pop .28s ease-out}
.wbtn{background:var(--wa-in);color:var(--wa-link);font-size:13.5px;font-weight:500;text-align:center;padding:9px;border-radius:8px;box-shadow:0 1px .5px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;gap:6px}
.wbtn svg{width:14px;height:14px}
.typing{align-self:flex-start;background:var(--wa-in);border-radius:9px;padding:9px 12px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--wa-meta);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.wa-in{flex:none;display:flex;gap:6px;align-items:center;padding:7px 8px 18px;background:var(--wa-bar)}
.wa-in .fake{flex:1;background:var(--wa-in);border-radius:18px;padding:8px 12px;font-size:13px;color:var(--wa-meta);border:0;outline:none}
.wa-in .fake:focus{color:var(--wa-text)}
.wa-in .mic{width:34px;height:34px;border-radius:50%;background:#1DAA61;display:grid;place-items:center;color:#fff;border:0}
.wa-in .mic svg{width:16px;height:16px}
/* WhatsApp Business App, Chatliste (Onboarding) */
.chats{flex:1;background:var(--wa-in);overflow:hidden}
.chats .t{font-size:26px;font-weight:700;padding:6px 14px 8px}
.chat{display:flex;gap:10px;padding:9px 14px;align-items:center}
.chat .pic{width:42px;height:42px;border-radius:50%;flex:none;background:#B9C4C9}
.chat .m{flex:1;min-width:0;border-bottom:1px solid rgba(128,128,128,.15);padding-bottom:9px}
.chat b{font-size:14px;font-weight:600;display:flex;justify-content:space-between}
.chat b span{font-weight:400;font-size:11px;color:var(--wa-meta)}
.chat small{display:block;font-size:12.5px;color:var(--wa-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner{margin:4px 10px 8px;padding:10px 12px;border-radius:10px;background:#E7FCE3;color:#0A5C36;font-size:12px;line-height:1.4;display:flex;gap:8px;animation:pop .35s ease-out}
:root[data-theme="dark"] .banner{background:#103529;color:#9FE8C3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .banner{background:#103529;color:#9FE8C3}}

@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

/* Overlay (Embedded Signup und Zweck-Auswahl) */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(10,12,14,.45);display:grid;place-items:center;padding:16px;animation:fade .2s}
.dialog{background:var(--surface);border-radius:14px;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.dialog-h{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);z-index:2}
.dialog-h b{flex:1;font-weight:550}
.dialog-b{padding:20px}
.fb{display:flex;align-items:center;gap:8px;font-weight:600;color:#1877F2}
.choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2);border-radius:10px;padding:13px;margin-bottom:8px;width:100%;background:none;text-align:left}
.choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.choice small{display:block;color:var(--muted)}
.qr{width:150px;height:150px;margin:6px auto 14px;border-radius:10px;background:
  conic-gradient(from 90deg at 18% 18%,var(--ink) 0 25%,transparent 0) 0 0/50px 50px,
  repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 13px),
  repeating-linear-gradient(0deg,transparent 0 7px,var(--surface) 7px 11px);border:8px solid var(--surface);outline:1px solid var(--line)}
.progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:18px}
.progress i{display:block;height:100%;background:var(--accent);transition:width .3s}
@keyframes fade{from{opacity:0}}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:9px;font-size:13px;z-index:80;animation:pop .25s}

.preview-fab{display:none}

/* Responsiv */
@media (max-width:1500px){
  .shell{grid-template-columns:212px minmax(0,1fr) 340px}
  .phone{width:290px}
  .work{padding:30px 28px 80px}
}
@media (max-width:1240px){
  .shell{grid-template-columns:200px minmax(0,1fr) 330px}
  .phone{width:290px}
  .work{padding:28px 26px 80px}
  .purposes{grid-template-columns:1fr}
  .purpose{min-height:0}
}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .nav{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;align-items:center;gap:10px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line);overflow:hidden}
  .brand small,.links .label,.link .count{display:none}
  .switcher{width:auto;max-width:190px;padding:6px 8px}
  .switcher .who>span{display:none}
  .nav{flex-wrap:wrap}
  .links{flex-direction:row;overflow-x:auto;scrollbar-width:none;order:9;flex:1 0 100%;min-width:0;margin:0 -4px}
  .nav-foot{margin-left:auto}
  .links::-webkit-scrollbar{display:none}
  .link{width:auto;white-space:nowrap}
  .stage{display:none}
  .stage.open{display:flex;position:fixed;inset:0;z-index:70;height:auto;border:0;padding:64px 16px 16px}
  .stage-close{display:inline-flex!important;position:fixed;top:14px;right:16px;z-index:71}
  .preview-fab{display:inline-flex;position:fixed;right:16px;bottom:16px;z-index:50;box-shadow:var(--shadow)}
  .work{padding:22px 16px 90px}
  .head{flex-wrap:wrap;align-items:flex-start}
  .head h1{font-size:30px}
  .head .actions{margin-left:0}
  .split{grid-template-columns:1fr}
  .inbox{grid-template-columns:1fr;height:auto}
  .inbox .list{border-right:0;border-bottom:1px solid var(--line);max-height:210px}
  .thread-b{min-height:320px}
}
@media (max-width:560px){
  .brand span.bt{display:none}
  .cols{grid-template-columns:1fr}
  .varmap{grid-template-columns:auto 1fr}
  .varmap .vx{display:none}
  .status{gap:18px}
  .phone{width:min(300px,100%)}
}
.stage-close{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Live-Anwendung */
[hidden]{display:none!important}
a{color:var(--accent);text-underline-offset:3px}
button:disabled{opacity:.5;cursor:not-allowed}
svg{width:18px;height:18px;flex:none}
.nav-foot{flex-wrap:wrap}.nav-foot .legal{flex-basis:100%}
.legal{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;margin-top:20px;color:var(--muted)}
.legal a{color:var(--muted)}
.auth{max-width:1000px;margin:auto;padding:8vh 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:90vh}
.auth h1{font:400 48px/1.08 var(--serif)}.auth p{color:var(--muted)}
.auth .legal{grid-column:1/-1}.auth .controls{display:flex;gap:8px;margin:20px 0}
.empty{padding:28px;display:grid;gap:12px;justify-items:start;color:var(--muted)}
.empty p{margin:0}.notice{padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--sunk);margin:12px 0;overflow-wrap:anywhere}
.notice.bad{background:var(--bad-soft);color:var(--bad)}.notice.ok{background:var(--ok-soft);color:var(--ok)}
.actions,.buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.buttons{margin:12px 0}
fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-weight:600;margin-bottom:10px}
.field small,.hint{font-size:12px;color:var(--muted)}.check{display:flex;align-items:center;gap:8px;margin:8px 0}
.card+.card{margin-top:16px}.section{margin-top:24px}.section h2{font:400 25px var(--serif)}
.wizard{max-width:760px}.wizard .progress{margin:18px 0}.wizard p{max-width:65ch}.wizard .purpose{min-height:0}
.split{grid-template-columns:minmax(155px,210px) minmax(0,1fr)}
.track .stepcard{display:block}.track .stepcard>button{margin-bottom:8px}.track .field:last-child{margin-bottom:0}
.track textarea{min-height:150px}.stepcard:focus-within{border-color:var(--accent)}
.preview-selected{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-soft)}
.form-section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.inbox{grid-template-columns:minmax(170px,240px) minmax(0,1fr);height:calc(100vh - 260px)}
.composer{flex-wrap:wrap}.composer textarea{min-height:72px;flex:1 0 100%}.composer .field{width:100%}
.thread-b img,.bub img{max-width:100%;border-radius:8px}.thread-b audio,.bub audio{width:100%;max-width:250px}
.thread-b video,.bub video{max-width:100%}.msg-l,.msg-r{overflow-wrap:anywhere;white-space:normal;min-width:90px}
.message-text{white-space:pre-wrap}.msg-meta{display:flex;flex-wrap:wrap;gap:5px}.attachment{margin:8px 0}
.recording{color:var(--bad)}.recorder{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0;width:100%}
.recorder audio{width:100%;max-width:300px}.recording-status{flex-basis:100%;font-size:12px}
.copybox{display:flex;gap:8px;align-items:center;margin:10px 0}.copybox .input{min-width:0;font-family:var(--mono);font-size:12px}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sunk);padding:12px;border-radius:8px;font:12px/1.6 var(--mono)}
.dialog{width:min(660px,100%);padding:0;border:1px solid var(--line);color:var(--ink)}
.dialog::backdrop{background:rgba(10,12,14,.5)}.dialog-h{top:0}.dialog-h h2{font-size:16px;margin:0;flex:1}
.dialog-b{overflow-wrap:anywhere}.dialog-b .purposes{grid-template-columns:1fr}
#notifications .toast{max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.status b{font-size:23px}.status{gap:18px}.table td{max-width:340px}.table .wrap{white-space:normal;min-width:140px}
.test-labels{padding:8px;display:flex;gap:5px;flex-wrap:wrap}.wa-b .empty{font-size:13px;padding:12px}
.wa-in form{display:flex;gap:8px;width:100%}.wa-in input{min-width:0}.stage-cap{flex-wrap:wrap;justify-content:center;text-align:center}
.phone .media-empty{height:100px;display:grid;place-items:center;background:var(--sunk);color:var(--muted)}
.loading{padding:30px;color:var(--muted)}.legal-page{max-width:800px;margin:40px auto;padding:24px}.legal-page h1{font:400 40px var(--serif)}
@media(min-width:981px) and (max-width:1400px){.split{grid-template-columns:1fr}.inbox{grid-template-columns:1fr;height:auto}.inbox>.list{max-height:230px;border-right:0}.thread-b{max-height:500px;min-height:250px}}
@media(max-width:980px){.nav{overflow:visible}.menu{max-width:calc(100vw - 32px)}.inbox{grid-template-columns:1fr;height:auto}.split{grid-template-columns:1fr}.stage.open{overflow:auto}.nav-foot .legal{display:none}}
@media(max-width:600px){.auth{grid-template-columns:1fr;gap:24px;padding:24px 16px}.auth h1{font-size:36px}.head h1{overflow-wrap:anywhere}.nav-foot{gap:4px}.nav-foot .btn{padding:5px}.theme button{padding:5px 6px}.brand{padding:0}.switcher{max-width:155px}.varmap{grid-template-columns:1fr}.varmap .vx{display:block}.btnrow{flex-wrap:wrap}.btnrow .input{min-width:0}.copybox{flex-wrap:wrap}.work{padding:22px 12px 90px}.pad{padding:14px}.msg-l,.msg-r{max-width:90%}.purposes{grid-template-columns:1fr}.track{padding:16px 10px}.step{gap:8px;grid-template-columns:24px minmax(0,1fr)}.stepcard{padding:10px}.stage-cap{font-size:10px}}
/* Schmale Formulare dürfen ihre Grid-Spalte nicht verbreitern. */
.card,.thread,.stepcard,.field,.cols>*,.dialog-b{min-width:0}
.btn{max-width:100%;white-space:normal;justify-content:center}
input[type="file"],audio,video{max-width:100%}
input[type="file"]{width:100%}
.wa-in .mic{flex:none}
/* Runde 3: Navigation, ruhige Kampagnenbereiche und Medien. */
.link{text-decoration:none}.link[aria-current="page"]{background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tenant-switch{position:relative;min-width:0}.pause-nav{font-size:12px;margin:0;text-decoration:none}
.nav .menu{max-height:65vh;overflow:auto}.menu button{overflow-wrap:anywhere}
.campaign-section{min-width:0;border:1px solid var(--line);border-radius:10px;padding:14px;margin:16px 0;background:var(--surface)}
.campaign-section summary,.thread-knowledge summary{font-weight:600;cursor:pointer}.campaign-section[open] summary{margin-bottom:12px}
.campaign-section>p{margin-top:0}.reminder-row{border-top:1px solid var(--line);padding:14px 0}.weekday-list{display:flex;gap:12px;flex-wrap:wrap}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}.media-grid .card{margin:0;overflow-wrap:anywhere}
.asset-image{display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:8px;margin:12px 0}
.thread-knowledge{padding:12px 16px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.thread-knowledge dd{margin-left:0;white-space:pre-wrap}
.thread-knowledge dl{display:grid;grid-template-columns:minmax(70px,1fr) minmax(0,2fr);gap:5px 12px}.thread{overflow-y:auto}
@media(min-width:981px){.nav{overflow-y:auto}.nav .menu{position:relative;width:100%}}
@media(max-width:980px){.nav{position:relative}.nav-foot{width:100%;margin-top:0;flex-wrap:wrap;order:10}.nav-foot .legal{display:flex;margin-top:6px}.switcher .who>span{display:block}.link .count{display:inline}.tenant-switch{flex:1;max-width:260px}.switcher{max-width:100%;width:100%}.pause-nav{max-width:100%}.links{margin:0}.link{flex:none}.campaign-section{padding:12px}.head .actions{max-width:100%}}
@media(max-width:560px){.nav{padding:10px 12px}.nav-foot .legal{font-size:10px}.thread-knowledge{padding:10px}.campaign-section .cols{grid-template-columns:1fr}}

button[role="switch"][aria-checked="true"]{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* Round 4: compact workspace and three-column inbox. */
.shell.wide{grid-template-columns:220px minmax(0,1fr)}
.shell.wide>.stage,.shell.wide+#previewFab{display:none!important}
.work{padding:24px 28px 60px}.head{margin-bottom:18px}.head h1{font-size:28px}.head p{max-width:680px}.pad{padding:18px}.table td,.table th{padding:10px 12px;height:44px}.section-t{font:600 18px var(--sans)}
.menu-label{display:block;padding:8px 12px;color:var(--muted)}.menu button{flex-wrap:wrap}.menu button small{width:100%;padding-left:38px;color:var(--muted)}
.settings-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:10px}.settings-tabs a{padding:8px 12px;text-decoration:none;color:var(--muted);border-radius:6px}.settings-tabs a[aria-current]{background:var(--accent-soft);color:var(--accent)}
.agency-table{width:100%;table-layout:fixed;min-width:0}.agency-table th:first-child{width:19%}.agency-table th:last-child{width:23%}.agency-table td{white-space:normal;overflow-wrap:anywhere}.agency-table small{display:block;font-size:11px;color:var(--muted)}.agency-table .btn{font-size:11px;padding:6px 8px}.agency-metrics{display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:10px;color:var(--muted)}.agency-metrics b{color:var(--ink)}.account-line{display:flex;align-items:center;gap:5px;font-size:11px}.status-dot{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--muted)}.status-dot.connected{background:var(--ok)}
.inbox-shell .work{padding:20px 18px}.inbox-shell .head h1{font:600 23px var(--sans)}.inbox-shell .head p{font-size:12px}.inbox-shell .eyebrow{display:none}
.inbox-shell .inbox{grid-template-columns:minmax(230px,290px) minmax(260px,1fr) 250px;height:calc(100vh - 133px);min-height:560px;overflow:hidden;margin-top:0}
.conversation-column{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-right:1px solid var(--line)}.conversation-search{padding:12px;border-bottom:1px solid var(--line)}.conversation-search .seg{display:flex;flex-wrap:wrap;margin-top:8px;gap:3px;background:none}.conversation-search .seg button{font-size:10px;padding:5px 6px}.inbox-shell .list{max-height:none;border:0;overflow:auto}.conversation{display:flex;gap:9px;padding:12px 10px;position:relative}.conversation .main{min-width:0;flex:1}.conversation .avatar,.thread-h .avatar{width:32px;height:32px;flex-shrink:0}.avatar[style]{background:hsl(var(--avatar-hue) 40% 88%);color:hsl(var(--avatar-hue) 50% 25%)}.conversation-title{display:flex;align-items:center;gap:6px}.conversation-title b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.conversation-title time{font-size:10px;color:var(--muted)}.conversation .main>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.conversation-tags{display:flex;gap:4px;margin-top:5px;overflow:hidden}.conversation-tags span{font-size:9px;border-radius:4px;padding:1px 4px;background:var(--sunk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.unread{position:absolute;right:8px;bottom:10px;background:var(--ok);color:var(--surface);font-size:9px;padding:1px 5px;border-radius:9px}
.contact-panel{overflow:auto;border-left:1px solid var(--line);padding:16px;font-size:12px}.contact-panel h3{font-size:11px;color:var(--muted);margin:16px 0 5px}.contact-panel p{margin:5px 0 10px;overflow-wrap:anywhere}.contact-panel .seg{margin-top:10px}.contact-identity{text-align:center;margin-bottom:20px}.contact-identity .avatar{margin:auto;width:44px;height:44px}.contact-identity h2{font:600 15px var(--sans);overflow-wrap:anywhere}.contact-identity a{color:var(--muted)}.contact-panel .thread-knowledge{padding:0 0 14px;margin-bottom:14px}.contact-panel dl{display:block}.contact-panel dt{color:var(--muted);font-size:11px}.contact-panel dd{margin:2px 0 9px}
.inbox-shell .thread{overflow:hidden}.inbox-shell .thread-b{min-height:0;max-height:none;background:var(--ground)}.thread-h{padding:12px;flex-wrap:nowrap}.window-status{font-size:10px;white-space:nowrap;color:var(--muted)}.window-status i{margin-right:5px}.msg-r,.msg-r.ai{background:var(--wa-out);color:var(--wa-text)}.msg-l{background:var(--surface);border:1px solid var(--line)}.sender-label{font-size:10px;font-weight:600;color:var(--wa-meta);margin-bottom:3px}.template-header{display:block;margin:5px 0}.date-divider{align-self:center;color:var(--muted);font-size:10px;background:var(--surface);border:1px solid var(--line);padding:3px 9px;border-radius:7px;margin:9px 0}.msg-meta{font-size:9px}.composer{display:block;padding:12px;border-top:1px solid var(--line)}.composer>textarea{width:100%;min-height:72px}.composer-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}.composer-tools .btn{padding:6px 8px;font-size:11px}.composer-tools svg{width:15px;height:15px}.composer-tools .recorder{margin:0}.composer-tools>button[type=submit]{margin-left:auto}.composer .notice{font-size:11px}
@media(max-width:1200px) and (min-width:981px){.inbox-shell .inbox{grid-template-columns:220px minmax(240px,1fr) 200px}.shell.wide{grid-template-columns:190px minmax(0,1fr)}.inbox-shell .work{padding:16px 10px}.contact-panel{padding:12px}}
@media(max-width:980px){.shell.wide{grid-template-columns:1fr}.inbox-shell .inbox{grid-template-columns:240px minmax(0,1fr);height:calc(100vh - 240px);min-height:600px;overflow:auto}.contact-panel{grid-column:1/-1;border-top:1px solid var(--line);border-left:0}.inbox-shell .thread{min-height:500px}.agency-table{min-width:680px}.inbox-shell .thread-b{min-height:220px}}
@media(max-width:600px){.inbox-shell .work{padding:16px 10px}.inbox-shell .inbox{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible}.conversation-column{max-height:300px;border-right:0;border-bottom:1px solid var(--line)}.inbox-shell .list{max-height:200px}.inbox-shell .thread{min-height:480px}.inbox-shell .thread-b{max-height:460px}.contact-panel{overflow:visible}.settings-tabs a{font-size:11px;padding:7px}.composer-tools{gap:4px}.contact-panel .thread-knowledge dl{display:grid}.head h1{font-size:28px}}
.composer-tools .recording-status{display:none}.composer-tools .recorder audio{max-width:200px}.agency-table .status-dot{vertical-align:middle}
.message-row{display:flex;flex-direction:column;align-items:flex-start;max-width:82%;min-width:0}.message-row.outgoing{align-self:flex-end;align-items:flex-end}.message-row>.msg-l,.message-row>.msg-r{max-width:100%}.message-row .sender-label{margin:0 4px 3px;color:var(--muted)}.menu{max-height:70vh;overflow:auto}
/* Runde 5: keine Link-Optik in Listen und Navigation. */
a.row,a.link,a.btn,a.notice{text-decoration:none;color:inherit}
a.row b{color:var(--ink)}
.row[aria-current="page"]{background:var(--sunk);box-shadow:inset 2px 0 0 var(--ink)}
.link[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line);font-weight:550}
.link[aria-current="page"] svg{opacity:1}
.split .list .row{flex-direction:column;align-items:flex-start;gap:6px}
.split .list .row .main{width:100%}
.split .list .row b{white-space:normal;overflow-wrap:anywhere;font-size:13px}