/* rezepte.digital – Livestream-PoC Design (aus "Streaming POC.dc.html") */
:root{
  --bg:#eff1e8; --ink:#1b1f15; --body:#424635; --muted:#6e735a; --faint:#8a9575;
  --card:#fff; --line:#d8dcc7; --line2:#e6e9dc; --field:#fbfcf8;
  --green:#6AAB0F; --green-d:#5c930c; --green-ink:#547a39; --green-bg:#e6ecd9;
  --green-code:#3a5828; --green-soft:#f3f6ed; --green-soft-bd:#cddbb1;
  --red:#e5484d; --red-d:#d33a3f;
  --orange:#c8633a; --orange-bg:#fbf1e3;
  --yellow:#b8892a; --yellow-bg:#faf1dd;
  --video:#12160c;
  --st-idle:#c0c5ad; --st-wait:#6b8f6e; --st-warn:#e6b347; --st-ok:#6AAB0F; --st-err:#e5484d;
  --f-head:'Outfit', system-ui, sans-serif;
  --f-body:'DM Sans', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:48px 32px 80px}

/* eyebrow / hero */
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--green-bg);color:var(--green-code);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:26px}
.eyebrow svg{width:15px;height:15px}
h1.hero{font-family:var(--f-head);font-weight:700;font-size:56px;line-height:1.02;letter-spacing:-.03em;margin:0 0 18px}
h1.hero em{font-style:normal;color:var(--green)}
.lede{font-size:18px;line-height:1.55;color:var(--body);max-width:560px;margin:0 0 44px}
.lede strong{color:var(--ink)}

/* choice cards */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.choice{display:block;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;
  box-shadow:0 1px 2px rgba(28,40,18,.06);transition:transform .14s,box-shadow .14s,border-color .14s;text-decoration:none;color:inherit}
.choice:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(28,40,18,.12),0 2px 6px rgba(28,40,18,.05);border-color:var(--green-soft-bd)}
.choice h3{font-family:var(--f-head);font-weight:600;font-size:22px;margin:0 0 8px}
.choice h3 small{color:var(--muted);font-weight:500;font-size:16px}
.choice p{font-size:14px;line-height:1.55;color:var(--body);margin:0 0 18px}
.golink{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.golink.green{color:var(--green)} .golink.orange{color:var(--orange)}

/* icon squares */
.ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;flex-shrink:0}
.ic.green{background:var(--green-bg);color:var(--green-ink)}
.ic.orange{background:var(--orange-bg);color:var(--orange)}
.ic.yellow{background:var(--yellow-bg);color:var(--yellow)}

/* OBS / generic panel */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(28,40,18,.06);overflow:hidden}
.panel-h{display:flex;align-items:center;gap:12px;padding:20px 26px;border-bottom:1px solid var(--line2)}
.panel-h .ic{margin:0;width:40px;height:40px;border-radius:10px}
.panel-h h3{font-family:var(--f-head);font-weight:600;font-size:19px;margin:0}
.panel-h h3 small{color:var(--muted);font-weight:500;font-size:14px}
.panel-b{padding:24px 26px 26px}

/* form controls */
.ctrls{display:flex;gap:16px;align-items:flex-end;margin-bottom:20px}
.ctrls.obs{gap:20px}
.field{flex:1}
.field.narrow{max-width:240px}
.field span{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:7px}
.field input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:inherit;font-size:15px;color:var(--ink);transition:border-color .14s,box-shadow .14s}
.field input:focus{outline:none;border-color:#86b85f;box-shadow:0 0 0 3px rgba(134,184,95,.18)}

/* buttons */
.btn{border:none;cursor:pointer;font-family:var(--f-head);font-weight:600;border-radius:999px;color:#fff;transition:background .14s,transform .14s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn-green{background:var(--green);font-size:15px;padding:13px 26px}
.btn-green:hover{background:var(--green-d)}
.btn-red{background:var(--red);font-weight:700;font-size:14px;letter-spacing:.04em;padding:13px 22px;display:inline-flex;align-items:center;gap:9px}
.btn-red:hover{background:var(--red-d)}
.btn-red .dot{width:10px;height:10px;border-radius:50%;background:#fff}
.btn-ghost{border:1px solid var(--line);background:var(--card);color:var(--muted);font-family:var(--f-head);font-weight:600;
  font-size:14px;padding:11px 24px;border-radius:999px;cursor:pointer;transition:color .14s}
.btn-ghost:hover{color:var(--ink)}
.btn-ghost:disabled{opacity:.5;cursor:default}

/* view header */
.back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;margin-bottom:20px;transition:color .14s}
.back:hover{color:var(--ink)}
h2.view{display:flex;align-items:center;gap:12px;font-family:var(--f-head);font-weight:700;font-size:32px;letter-spacing:-.02em;margin:0 0 24px}
h2.view .ic{margin:0;width:44px;height:44px;border-radius:12px}

/* video stage */
.stage{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--video);border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(28,40,18,.1),0 2px 6px rgba(28,40,18,.05);display:flex;align-items:center;justify-content:center}
.stage video{width:100%;height:100%;object-fit:cover;display:block}
/* Viewer: ganzes Bild zeigen (Portrait-Handy-Stream nicht abschneiden).
   Bühne übernimmt das Seitenverhältnis des Streams (--ar, per JS gesetzt),
   begrenzt auf Fensterhöhe; contain als Sicherheitsnetz. */
.stage.fit-contain{background:#000;width:auto;max-width:100%;max-height:82vh;margin-inline:auto;aspect-ratio:var(--ar,16/9)}
.stage.fit-contain video{object-fit:contain;background:#000}
.badge{position:absolute;top:16px;left:16px;z-index:3;display:none;align-items:center;gap:8px;background:var(--red);color:#fff;
  font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:8px}
.badge.on{display:inline-flex}
.badge .d{width:8px;height:8px;border-radius:50%;background:#fff;animation:livePulse 1.4s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.placeholder span{font-family:var(--f-body);font-size:15px;color:var(--faint)}

/* Broadcaster: Kamera-Wechsel-Button (nur sichtbar, wenn live) */
.cam-switch{position:absolute;top:14px;right:14px;z-index:4;display:none;width:44px;height:44px;padding:0;
  align-items:center;justify-content:center}
.stage.live .cam-switch{display:inline-flex}

/* status line */
.status{display:flex;align-items:center;gap:10px;margin-top:18px}
.status .sd{width:11px;height:11px;border-radius:50%;background:var(--st-idle)}
.status .st{font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--ink)}

/* OBS result */
.result{margin-top:20px;background:var(--green-soft);border:1px solid var(--green-soft-bd);border-radius:12px;padding:16px 18px;display:none;flex-direction:column;gap:12px}
.result.on{display:flex}
.result .k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:5px}
.result code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;color:var(--green-code);word-break:break-all}
.result .sep{height:1px;background:var(--green-soft-bd)}
.hint{font-size:14px;line-height:1.6;color:var(--muted);margin:18px 0 0}
.hint code{font-family:ui-monospace,monospace;font-size:13px;background:var(--green-soft);padding:1px 6px;border-radius:5px;color:var(--green-code)}
.hint a{color:var(--green);font-weight:600;text-decoration:none}

/* viewer: Vollbild + Maximieren */
.controls{position:absolute;bottom:14px;right:14px;z-index:4;display:none;gap:8px}
.stage.playing .controls{display:flex}
.ctl{background:rgba(8,14,4,.6);color:#fff;font-family:var(--f-head);font-weight:600;font-size:13px;padding:.6em .85em;
  border-radius:999px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);cursor:pointer}
.ctl:hover{background:rgba(8,14,4,.82)}
.ctl:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.exitmax{display:none;position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;padding:0;border-radius:50%;
  background:rgba(8,14,4,.6);color:#fff;font-size:20px;line-height:40px;text-align:center;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);cursor:pointer}
.exitmax:hover{background:rgba(8,14,4,.82)}
body.maxed{overflow:hidden}
body.maxed .stage{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0;aspect-ratio:auto;z-index:1000;background:#000}
body.maxed .stage video{object-fit:contain}   /* ganze Aufnahme, nichts abschneiden */
body.maxed .exitmax{display:block}
.stage:fullscreen{border-radius:0;background:#000}
.stage:fullscreen video,.stage:-webkit-full-screen video{object-fit:contain}
.stage:-webkit-full-screen{background:#000}

@media (max-width:720px){
  .wrap{padding:32px 20px 64px}
  h1.hero{font-size:38px}
  .lede{font-size:16px}
  .choices{grid-template-columns:1fr}
  /* Eingaben + Buttons untereinander, volle Breite */
  .ctrls{flex-direction:column;align-items:stretch;gap:12px}
  .field, .field.narrow{max-width:none;width:100%}
  .ctrls .btn, .ctrls .btn-green, .ctrls .btn-red{width:100%;justify-content:center}
  .panel-b > .btn-green{width:100%}
  .stage.fit-contain{max-height:70vh}
  h2.view{font-size:26px}
}

/* ===================== Twitch-artige POC-Erweiterung ===================== */
@keyframes chatIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Rezept-Picker (Broadcaster) */
.reclabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.recipe-chip{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:12px;cursor:pointer;background:#fff;border:2px solid var(--line2);transition:border-color .14s;text-align:left}
.recipe-chip:hover{border-color:var(--green-soft-bd)}
.recipe-chip.on{border-color:var(--green);box-shadow:0 4px 14px rgba(84,122,57,.14)}
.recipe-chip .cdot{width:26px;height:26px;border-radius:7px;flex-shrink:0}
.recipe-chip .rc-name{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink);display:block}
.recipe-chip .rc-meta{font-size:11px;color:var(--muted);display:block}

/* Lower-Third Schritt-Overlay */
.lower3{position:absolute;bottom:16px;left:16px;right:16px;display:flex;align-items:center;gap:12px;background:rgba(18,22,12,.72);backdrop-filter:blur(6px);border-radius:12px;padding:12px 15px;z-index:3}
.lower3 .num{width:34px;height:34px;border-radius:9px;background:var(--green);color:#fff;font-family:var(--f-head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.lower3 .l3t{min-width:0;flex:1}
.lower3 .l3r{font-family:var(--f-head);font-weight:600;font-size:13px;color:#ffd98a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lower3 .l3s{font-family:var(--f-head);font-weight:500;font-size:15px;color:#fff;line-height:1.3}
.lower3 .l3nav{display:flex;gap:6px;flex-shrink:0}
.l3btn{border:none;cursor:pointer;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center}
.l3btn.pri{background:var(--green)}

/* Stage top-right (Zuschauerzahl + Vollbild) */
.stage-tr{position:absolute;top:16px;right:16px;z-index:3;display:flex;align-items:center;gap:8px}
.vcount{display:inline-flex;align-items:center;gap:6px;background:rgba(18,22,12,.6);color:#fff;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px}
.iconbtn{border:none;cursor:pointer;width:34px;height:34px;border-radius:999px;background:rgba(18,22,12,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{background:rgba(18,22,12,.82)}

/* Watch-Grid (Video + Sidebar) */
.watch-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.watch-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:stretch}
.side{height:100%;min-height:440px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(28,40,18,.06);overflow:hidden}
.tabs{display:flex;padding:6px;gap:4px;border-bottom:1px solid var(--line2);background:var(--field)}
.tab{flex:1;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--f-head);font-weight:600;font-size:14px;padding:10px;border-radius:10px;transition:all .14s;background:transparent;color:var(--muted)}
.tab.on{background:#fff;color:var(--green-code);box-shadow:0 1px 2px rgba(28,40,18,.06)}
.scroll{flex:1;min-height:0;overflow-y:auto;padding:18px}
.scroll::-webkit-scrollbar{width:7px}
.scroll::-webkit-scrollbar-thumb{background:#cdd3bd;border-radius:999px}
.pane{flex:1;min-height:0;display:flex;flex-direction:column}

/* Streamer-Bar */
.streamerbar{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 4px}
.streamerbar .sav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#86b85f,#547a39);flex-shrink:0}
.streamerbar .snm{font-family:var(--f-head);font-weight:700;font-size:16px}
.streamerbar .ssub{font-size:13px;color:var(--muted)}
.follow{border:none;cursor:pointer;background:var(--red);color:#fff;font-family:var(--f-head);font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px}

/* Rezept-Tab */
.rec-h{font-family:var(--f-head);font-weight:700;font-size:18px;margin:0 0 12px}
.metachips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.mchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px}
.mchip.mt{background:var(--orange-bg);color:var(--orange)}
.mchip.md{background:var(--green-soft);color:var(--green-code)}
.mchip.ms{background:#e7eadb;color:var(--body)}
.subhead{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.ings{margin-bottom:22px}
.ing{display:flex;align-items:center;gap:11px;padding:7px 0;cursor:pointer}
.ingbox{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #cdd3bd;transition:all .14s}
.ing.done .ingbox{background:var(--green);border-color:var(--green)}
.ingbox svg{opacity:0;transition:opacity .14s}
.ing.done .ingbox svg{opacity:1}
.ingtxt{font-size:14px;line-height:1.35;color:#2c3320}
.ing.done .ingtxt{color:#9aa085;text-decoration:line-through}
.steps{display:flex;flex-direction:column;gap:8px}
.steprow{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid transparent}
.steprow.cur{background:var(--green-soft);border-color:var(--green-soft-bd)}
.stepnum{width:24px;height:24px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;font-size:12px;background:var(--line2);color:var(--muted)}
.steprow.cur .stepnum{background:var(--green);color:#fff}
.steptxt{font-size:13px;line-height:1.45;color:var(--body)}
.steprow.cur .steptxt{color:var(--ink);font-weight:600}

/* Chat-Tab */
.chatlist{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.chatmsg{font-size:13px;line-height:1.4;animation:chatIn .35s ease both}
.chatbar{padding:12px;border-top:1px solid var(--line2);display:flex;gap:8px}
.chatbar input{flex:1;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:10px 15px;font-family:inherit;font-size:14px;color:var(--ink)}
.chatbar input:focus{outline:none;border-color:#86b85f;box-shadow:0 0 0 3px rgba(134,184,95,.18)}
.chatsend{border:none;cursor:pointer;width:40px;height:40px;border-radius:999px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}

@media (max-width:860px){
  .watch-grid{grid-template-columns:1fr}
  .side{height:auto;min-height:0;max-height:60vh}
}

/* Watch-Bühne: festes 16:9 im Grid, Video vollständig (Portrait nicht abschneiden) */
.stage.vcontain{background:#000}
.stage.vcontain video{object-fit:contain;background:#000}

/* hidden zuverlässig durchsetzen (sonst überschreibt display:flex das Attribut) */
[hidden]{display:none!important}

/* Chat-Overlay im Video (sichtbar auch außerhalb des Chat-Tabs) */
.chat-overlay{position:absolute;left:16px;bottom:84px;z-index:3;display:flex;flex-direction:column;gap:6px;max-width:72%;pointer-events:none}
.co-msg{align-self:flex-start;max-width:100%;background:rgba(18,22,12,.66);backdrop-filter:blur(6px);color:#fff;font-size:13px;line-height:1.35;padding:6px 10px;border-radius:10px;animation:chatIn .3s ease both}
.co-msg strong{font-weight:700}
.co-msg.fade{opacity:0;transition:opacity .6s ease}