:root{
  --ground:#ECEEF2;--surface:#FFFFFF;--ink:#14161B;--muted:#5F6673;--line:#D6DAE1;
  --accent:#2F3FE0;--accent-ink:#FFFFFF;--yes:#0B7D55;--yes-ink:#FFFFFF;--no:#B9304A;--bubble:#E3E6EC;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1014;--surface:#181B21;--ink:#ECEEF2;--muted:#9AA1AD;--line:#2B3039;
    --accent:#8C96FF;--accent-ink:#0E1014;--yes:#3CCB94;--yes-ink:#08130E;--no:#FF8496;--bubble:#252A33;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1014;--surface:#181B21;--ink:#ECEEF2;--muted:#9AA1AD;--line:#2B3039;
  --accent:#8C96FF;--accent-ink:#0E1014;--yes:#3CCB94;--yes-ink:#08130E;--no:#FF8496;--bubble:#252A33;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
h1,h2,p,ul{margin:0;padding:0}
.root{counter-reset:mc;padding-inline:16px;padding-block:12px 24px;position:relative}
.st{position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.m:checked{counter-increment:mc}
.app{max-width:420px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
label{cursor:pointer}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em}
.nav{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:8px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.nav:hover{border-color:var(--ink)}
.cnt{display:inline-block;min-width:22px;padding:1px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.cnt::after{content:counter(mc)}
.to-deck{display:none}
#v-list:checked~.app .to-list{display:none}
#v-list:checked~.app .to-deck{display:inline-flex}

.view{display:none}
#v-deck:checked~.app .view-deck{display:block}
#v-list:checked~.app .view-list{display:block}
.scr{display:none;position:relative}

.card{background:var(--surface);border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.ph{background-size:cover;background-position:center;background-color:var(--bubble)}
.gal{position:relative;aspect-ratio:1/1;max-width:100%}
.gal .ph{position:absolute;inset:0;display:none}
.g1:checked~.gal .p1,.g2:checked~.gal .p2,.g3:checked~.gal .p3{display:block}
.segs{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:5px;z-index:2}
.segs i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.4);box-shadow:0 0 2px rgba(0,0,0,.35)}
.g1:checked~.gal .s1,.g2:checked~.gal .s2,.g3:checked~.gal .s3{background:#fff}
.z{position:absolute;inset:0;display:none;z-index:3}
.z>*{flex:1}
.g1:checked~.gal .z1,.g2:checked~.gal .z2,.g3:checked~.gal .z3{display:flex}
.cap{pointer-events:none;z-index:4}
.cap{position:absolute;inset:auto 0 0 0;padding:48px 16px 14px;color:#fff;background:linear-gradient(to top,rgba(8,10,16,.82),rgba(8,10,16,0))}
.cap h2{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em}
.cap p{font-size:15px;opacity:.92;margin-top:2px}
.info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.bio{font-size:16px;text-wrap:pretty}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

.row{display:flex;gap:10px;margin-top:12px}
.col{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 18px;border-radius:14px;border:1.5px solid transparent;font:600 17px var(--body);text-align:center;cursor:pointer}
.no{background:var(--surface);border-color:var(--no);color:var(--no)}
.yes{background:var(--yes);color:var(--yes-ink)}
.prim{background:var(--accent);color:var(--accent-ink)}
.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn:hover{filter:brightness(.95)}
.btn:focus-visible,.nav:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.matched{display:none;position:absolute;inset:-6px;z-index:10;align-items:center;justify-content:center;padding:20px;border-radius:26px;color:#fff;
  background:radial-gradient(circle at 50% 30%,rgba(60,203,148,.38),rgba(60,203,148,0) 58%),rgb(11,14,20)}
.mbox{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:300px;text-align:center}
.mph{position:relative;margin-bottom:14px}
.mph .ph{display:block;width:190px;height:190px;border-radius:50%;border:5px solid #3CCB94;box-shadow:0 0 0 10px rgba(60,203,148,.22),0 0 0 22px rgba(60,203,148,.1)}
.mph i{position:absolute;right:2px;bottom:2px;width:54px;height:54px;border-radius:50%;background:#3CCB94;color:#08130E;font-style:normal;font-size:28px;line-height:54px;text-align:center;border:4px solid #0B0D12}
.mt{font-family:var(--display);font-weight:800;font-size:52px;letter-spacing:-.03em;line-height:1;color:#fff}
.ms{font-size:18px;color:rgba(255,255,255,.86);margin-bottom:12px}
.mbox .col{width:100%;margin-top:0}
.onDark{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.meta{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.meta label{text-decoration:underline;text-underline-offset:3px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px 20px;display:flex;flex-direction:column;gap:12px}
.panel h1,.panel h2{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.panel h2{font-size:28px}
.panel p{color:var(--muted)}
.panel .q{color:var(--ink);font-weight:600;margin-top:6px}
.panel .row{margin-top:0}
.cover{display:flex;margin-bottom:6px}
.cover .av{width:64px;height:64px;border:3px solid var(--surface);margin-right:-14px}

.av{flex:none;display:inline-block;width:52px;height:52px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--bubble)}
.lh{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;margin-bottom:12px}
.empty{color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:16px;padding:18px 16px}
.list{display:flex;flex-direction:column;gap:8px}
.mi{display:none;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.mi:hover{border-color:var(--ink)}
.mi-t{display:flex;flex-direction:column;min-width:0}
.mi-t span{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chat{flex-direction:column;gap:12px}
.chat-h{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chat-h div{display:flex;flex-direction:column}
.chat-h span:not(.av){color:var(--muted);font-size:14px}
.msgs{display:flex;flex-direction:column;gap:8px;min-height:260px}
.sys{align-self:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.msg{align-self:flex-start;max-width:82%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--bubble);overflow-wrap:anywhere}
.msg.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--accent);color:var(--accent-ink)}
.send{display:flex;gap:8px}
.send input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:400 16px var(--body)}
.send .btn{flex:none;min-height:48px;font-size:15px}
.foot{font-size:12px;color:var(--muted);text-align:center;text-wrap:balance}

.loc{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)!important}
.lnk{align-self:flex-start;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.hint{font-size:13px}

/* App-Variante: Zustand kommt aus app.js statt aus Radio-Inputs */
.view,.scr{display:block}
.gal .ph{display:block}
.segs i.on{background:#fff}
.z,.matched,.mi{display:flex}
.chat{display:flex}
.to-deck{display:inline-flex}
.cnt::after{content:none}
button.btn,button.nav,button.mi,button.lnk{font-family:var(--body);-webkit-appearance:none;appearance:none}
button.nav{color:var(--ink);cursor:pointer}
button.mi{width:100%;text-align:left;color:var(--ink);cursor:pointer;font-size:16px}
button.lnk{background:none;border:0;padding:0;cursor:pointer}
.z button{flex:1;background:none;border:0;padding:0;cursor:pointer}
.meta button{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.err{color:var(--no);font-size:14px}