/* Callista Studio — Case-study template components (Tinte & Papier).
   Reuses tokens from callista.css. Link order: callista.css → case-study.css */

/* header CTA pill (extends .lhead from callista.css) */
.lhead .pill{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px; text-decoration:none; border:1px solid var(--ink); transition:background .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease)}
.lhead .pill:hover{background:var(--green); border-color:var(--green)}
.lhead .pill:active{transform:translateY(1px) scale(.985)}
html[data-theme="dark"] .lhead .pill{background:var(--accent); border-color:var(--accent); color:#0c1611}
@media (max-width:720px){ .lhead .pill{display:none} }

/* full-bleed helper */
.bleed{position:relative; z-index:1; width:100%}
.section{position:relative; z-index:1; padding:96px 0}

/* registration marks */
.reg{position:absolute; width:22px; height:22px; z-index:5}
.reg.tl{top:-11px; left:-11px}
.reg.tr{top:-11px; right:-11px}
.reg.bl{bottom:-11px; left:-11px}
.reg.br{bottom:-11px; right:-11px}
/* Registermarken im Gold-Ton statt Rot (überschreibt das Inline-stroke der SVGs) */
.reg circle, .reg path{stroke:#7E6435}

/* ---------- 1 · CASE HEAD ---------- */
.cs-head{padding:72px var(--pad) 8px}
.cs-eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:12px}
.cs-eyebrow::before{content:""; width:26px; height:1px; background:var(--ink-soft)}
.cs-h1{font-family:var(--serif); font-weight:360; font-variation-settings:"opsz" 144; font-size:clamp(48px,8vw,104px); line-height:.98; letter-spacing:-.02em; color:var(--ink); margin:22px 0 0}
.cs-result{font-family:var(--serif); font-style:italic; font-weight:360; font-size:clamp(20px,2.6vw,30px); line-height:1.3; color:var(--green); margin-top:20px; max-width:24ch}
html[data-theme="dark"] .cs-result{color:var(--accent)}
/* Ruhiges Spezifikationsraster: 4 mathematisch gleich breite Spalten (statt inhaltsbreiter Flex-Spalten),
   Hairlines sitzen exakt auf dem Raster, alle Labels starten auf einer x-Achse. Echot die 4-spaltige Timeline. */
.cs-meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:40px; border-top:1px solid var(--hair-strong); border-bottom:1px solid var(--hair-strong)}
.cs-meta .mi{min-width:0; padding:18px 26px 18px 0; border-right:1px solid var(--hair)}
.cs-meta .mi:last-child{border-right:none; padding-right:0}
.cs-meta .mk{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px}
.cs-meta .mv{font-family:var(--sans); font-size:15.5px; line-height:1.32; color:var(--ink); text-wrap:balance}

/* ---------- 2 · LIVING BEFORE / AFTER ---------- */
.cs-living{background:var(--paper-2); padding:80px 0; transition:background-color .55s var(--ease)}
.living-cap{display:flex; align-items:baseline; justify-content:space-between; gap:16px; max-width:1120px; margin:0 auto 16px; padding:0 var(--pad); font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.living-cap .n{color:var(--ink)} .living-cap .n b{color:var(--green); font-weight:500}
html[data-theme="dark"] .living-cap .n b{color:var(--accent)}
.tafel-frame{position:relative; max-width:1120px; margin:0 auto; border:1px solid var(--hair-strong); background:#fff; padding:16px}
.tafel-hint{max-width:1120px; margin:14px auto 0; padding:0 var(--pad); font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft); display:flex; align-items:center; gap:8px}
.compare{position:relative; aspect-ratio:1280/900; overflow:hidden; border:1px solid var(--hair); --split:46%; cursor:ew-resize; touch-action:none; user-select:none; -webkit-user-select:none}
.panel{position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none}
.panel.after{clip-path:inset(0 0 0 var(--split))}
.m-topbar{height:54px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 26px}
.m-logo{font-weight:700; letter-spacing:.02em}
.m-nav{display:flex; gap:18px; font-size:13px}
.m-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 36px; gap:16px}
.m-eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase}
.m-head{font-size:clamp(28px,4vw,46px); line-height:1.1}
.m-sub{font-size:15px; line-height:1.5; max-width:34ch}
.m-foot{height:38px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px}
/* BEFORE — tired 2013 */
.before{background:#ECE4CF; color:#3a3528; font-family:"Times New Roman",Times,serif}
.before .m-topbar{background:linear-gradient(#92a6bb,#5f7488); border-bottom:2px solid #3c4d60}
.before .m-logo{color:#fff; font-size:20px; text-shadow:1px 1px 0 #3c4d60}
.before .m-nav a{color:#fff; text-decoration:underline; text-decoration-color:#ffd34d}
.before .m-eyebrow{color:#8a1f17; font-family:Arial,sans-serif; font-weight:700; letter-spacing:.06em}
.before .m-head{color:#2b2519; font-weight:700}
.before .m-sub{color:#5a5240}
.before .m-btn{font-family:Arial,sans-serif; font-weight:700; font-size:15px; color:#7a0d00; background:linear-gradient(#ffe14d,#ffb400); border:2px outset #c0392c; padding:10px 20px; text-shadow:0 1px 0 rgba(255,255,255,.5); border-radius:3px}
.before .m-foot{background:#ddd2b6; color:#7a6f52; font-family:Arial,sans-serif; letter-spacing:.08em; border-top:1px solid #c4b894}
.before .m-foot .blink{color:#8a1f17}
/* AFTER — Callista relaunch */
.after-bg{position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 18%,#1c2a23,#101b15 56%,#0a120e)}
.after .m-topbar{position:relative; border-bottom:1px solid rgba(176,141,87,.28)}
.after .m-logo{color:#f3ede1; font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.06em}
.after .m-nav{position:relative}
.after .m-nav a{color:#b8c2bb; text-decoration:none; font-family:var(--sans); letter-spacing:.03em}
.after .m-body{position:relative}
.after .m-eyebrow{color:#B08D57; font-family:var(--mono); font-weight:500; letter-spacing:.22em; font-size:11px}
.after .m-head{color:#f4efe6; font-family:var(--serif); font-weight:340; font-variation-settings:"opsz" 144; letter-spacing:.005em}
.after .m-head .gd{color:#B08D57; font-style:normal; margin:0 .12em; font-weight:300}
.after .m-sub{color:#9fb0a6; font-family:var(--sans)}
.after .m-btn{font-family:var(--sans); font-weight:500; font-size:14px; color:#0c1611; background:#B08D57; border:1px solid #B08D57; padding:12px 26px; border-radius:999px; letter-spacing:.02em}
.after .m-foot{position:relative; color:#7d8f84; font-family:var(--mono); font-size:10px; letter-spacing:.14em; border-top:1px solid rgba(176,141,87,.18)}
/* split handle */
.split{position:absolute; top:0; bottom:0; left:var(--split); z-index:6; transform:translateX(-50%); pointer-events:none}
.split .line{position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(20,26,22,.15)}
.split .knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:var(--paper); border:1px solid var(--hair-strong); box-shadow:0 6px 18px rgba(20,26,22,.22); display:grid; place-items:center; color:var(--ink); font-size:19px; cursor:ew-resize}
.compare:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.compare:focus-visible .knob{box-shadow:0 0 0 3px var(--accent), 0 6px 18px rgba(20,26,22,.22)}
.tag{position:absolute; top:14px; z-index:6; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:3px}
.tag.vorher{left:16px; background:rgba(20,26,22,.78); color:#e7e2d4}
.tag.nachher{right:16px; background:var(--green); color:#eaf3ee}

/* ---------- 3 · EDITORIAL BLOCKS ---------- */
.cs-prose{max-width:1120px; margin:0 auto; padding:0 var(--pad)}
.cs-block{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; padding:56px 0; border-top:1px solid var(--hair)}
.cs-block:first-child{border-top:none}
.cs-block.reverse{direction:rtl} .cs-block.reverse>*{direction:ltr}
.cs-block .txt .kick{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:14px}
html[data-theme="dark"] .cs-block .txt .kick{color:var(--accent)}
.cs-block .txt h2{font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1.1; letter-spacing:-.012em; color:var(--ink); margin-bottom:18px}
.cs-block .txt p{font-family:var(--sans); font-size:16.5px; line-height:1.7; color:var(--ink-soft); max-width:54ch; margin-bottom:14px}
.cs-block .txt p:last-child{margin-bottom:0}
.cs-block .txt .ph{color:var(--ink-soft); background:color-mix(in srgb, var(--hair) 60%, transparent); padding:1px 7px; border-radius:3px; font-family:var(--mono); font-size:13px}
/* einspaltige Story-Variante (Text ohne Vorschau-Spalte) */
.cs-block.solo{grid-template-columns:1fr}
.cs-block.solo .txt p{max-width:64ch}
/* echte Vorher/Nachher-Screenshots im Slider */
.compare .shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block}

/* browser-frame preview */
.browser{position:relative; border:1px solid var(--hair-strong); border-radius:11px; overflow:hidden; background:#0a120e; box-shadow:0 16px 40px rgba(20,26,22,.14)}
.bchrome{height:36px; display:flex; align-items:center; gap:12px; padding:0 14px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08)}
.bdots{display:flex; gap:6px} .bdots i{width:9px; height:9px; border-radius:50%; background:#37433d; display:block}
.burl{flex:1; text-align:center; font-family:var(--mono); font-size:11px; color:#7d8f84; letter-spacing:.02em}
.bview{height:300px; overflow:hidden; position:relative; display:flex}
.pv{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; gap:11px; min-width:0; position:relative}
.pv-chicks{background:#141210; overflow:hidden}
.pv-chicks::before{content:""; position:absolute; inset:0; background:linear-gradient(118deg, transparent 38%, rgba(192,57,44,.55) 38% 50%, transparent 50%)}
.pv-chicks .ph{position:relative; font-family:var(--sans); font-weight:800; font-size:34px; line-height:.86; letter-spacing:-.02em; text-transform:uppercase; color:#ffd21e; transform:scaleY(1.18)}
.pv-chicks .ps{position:relative; font-family:var(--sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:#fff; margin-top:8px}
.pv-chicks .pb{position:relative; font-family:var(--sans); font-weight:800; font-size:12px; text-transform:uppercase; color:#141210; background:#ffd21e; padding:9px 18px; margin-top:8px; border-radius:4px}
.pv-wc{background:linear-gradient(#13241b,#0c160f); align-items:flex-start; text-align:left; padding:30px; overflow:hidden}
.pv-wc::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:repeating-linear-gradient(45deg,#f5c518 0 11px,#1a1a1a 11px 22px)}
.pv-wc .pe{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--sprout)}
.pv-wc .ph{font-family:var(--sans); font-weight:800; font-size:30px; color:#fff; letter-spacing:-.01em}
.pv-wc .ps{font-family:var(--sans); font-size:12px; color:#a9bdb1}
.pv-wc .pb{font-family:var(--sans); font-weight:600; font-size:12px; color:#0d1813; background:var(--sprout); padding:9px 17px; border-radius:6px; margin-top:7px}
.pv-cap{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft); margin-top:13px; display:flex; align-items:center; gap:8px}
.pv-cap::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex:none}
html[data-theme="dark"] .pv-cap::before{background:var(--accent)}

/* ---------- 4 · INK-WORLD PULL-QUOTE ---------- */
.ink-world{background:#0C1611; color:#E9EFEA; overflow:hidden; position:relative; padding:120px 0}
.ink-world .glow{position:absolute; width:760px; height:760px; right:-150px; top:-180px; z-index:0; pointer-events:none; background:radial-gradient(circle, rgba(116,188,151,.18), transparent 62%); filter:blur(30px)}
@media (prefers-reduced-motion: no-preference){ .ink-world .glow{animation:csAmbient 18s var(--ease) infinite alternate} }
@keyframes csAmbient{from{opacity:.55; transform:translate(0,0) scale(1)} to{opacity:1; transform:translate(-50px,36px) scale(1.12)}}
.ink-world .inner{position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:0 var(--pad)}
.ink-world .qmark{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#90A89B; margin-bottom:26px; display:flex; align-items:center; gap:12px}
.ink-world .qmark .ph{color:#0c1611; background:#74BC97; padding:3px 9px; border-radius:3px; letter-spacing:.08em}
.ink-world blockquote{font-family:var(--serif); font-style:italic; font-weight:340; font-size:clamp(28px,4.2vw,52px); line-height:1.2; letter-spacing:-.012em; color:#f4efe6; text-wrap:balance}
.ink-world .qby{margin-top:28px; font-family:var(--mono); font-size:12px; letter-spacing:.07em; color:#90A89B; display:flex; align-items:center; gap:11px}
.ink-world .qby svg{width:20px; height:20px}

/* ---------- 5 · TIMELINE ---------- */
.cs-timeline{max-width:1120px; margin:0 auto; padding:0 var(--pad)}
.cs-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:48px; border-top:1px solid var(--hair)}
.cs-step{padding:30px 26px 30px 0; border-right:1px solid var(--hair); position:relative}
.cs-step:last-child{border-right:none}
.cs-step .sn{font-family:var(--serif); font-style:italic; font-weight:340; font-size:38px; color:var(--green); line-height:1}
html[data-theme="dark"] .cs-step .sn{color:var(--accent)}
.cs-step .st{font-family:var(--serif); font-weight:400; font-size:20px; color:var(--ink); margin:14px 0 8px}
.cs-step .sd{font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink-soft)}

/* ---------- 6 · RELATED + CTA ---------- */
.cs-related{max-width:1120px; margin:0 auto; padding:0 var(--pad)}
.rel-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:40px}
.plate-link{text-decoration:none; color:inherit; display:flex; flex-direction:column}
.plate-meta{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px}
.plate-meta .live{display:inline-flex; align-items:center; gap:7px; color:var(--green)}
html[data-theme="dark"] .plate-meta .live{color:var(--accent)}
.plate-meta .live i{width:7px; height:7px; border-radius:50%; background:currentColor}
.plate-link .browser{transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)}
.plate-link:hover .browser{transform:translateY(-5px); border-color:rgba(116,188,151,.45); box-shadow:0 20px 44px rgba(20,26,22,.2)}
.plate-foot{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; gap:16px}
.plate-name{font-family:var(--serif); font-weight:400; font-size:22px; color:var(--ink)}
.plate-branche{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-soft); text-align:right}
.cs-cta{max-width:1120px; margin:80px auto 0; padding:64px var(--pad); border:1px solid var(--hair-strong); position:relative; text-align:center}
.cs-cta h2{font-family:var(--serif); font-weight:360; font-size:clamp(30px,4vw,52px); line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin-bottom:26px}
.cs-cta h2 .ital{font-style:italic; color:var(--green)}
html[data-theme="dark"] .cs-cta h2 .ital{color:var(--accent)}
.cs-cta .pill{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:16px; font-weight:600; padding:16px 30px; border-radius:999px; text-decoration:none; border:1px solid var(--ink); transition:background .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease)}
.cs-cta .pill:hover{background:var(--green); border-color:var(--green)}
.cs-cta .pill:active{transform:translateY(1px) scale(.985)}
html[data-theme="dark"] .cs-cta .pill{background:var(--accent); border-color:var(--accent); color:#0c1611}

/* ---------- reveal (reduced-motion safe: base visible) ---------- */
/* ---- brand "after" variants for the living tafel ---- */
.compare.cs-chicks .after-bg{background:linear-gradient(118deg,transparent 42%,rgba(192,57,44,.5) 42% 53%,transparent 53%), #141210}
.compare.cs-chicks .after .m-topbar{border-bottom:1px solid rgba(255,210,30,.3)}
.compare.cs-chicks .after .m-logo{color:#ffd21e; font-family:var(--sans); font-weight:800; letter-spacing:.04em; text-transform:uppercase}
.compare.cs-chicks .after .m-nav a{color:#fff; font-family:var(--sans); text-decoration:none}
.compare.cs-chicks .after .m-eyebrow{color:#ffd21e; font-family:var(--sans); font-weight:700; letter-spacing:.16em; font-size:11px}
.compare.cs-chicks .after .m-head{color:#ffd21e; font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; transform:scaleY(1.12)}
.compare.cs-chicks .after .m-sub{color:#ecd9c4; font-family:var(--sans)}
.compare.cs-chicks .after .m-btn{background:#ffd21e; color:#141210; font-family:var(--sans); font-weight:800; text-transform:uppercase; border:none; border-radius:4px; padding:12px 24px; letter-spacing:.02em}
.compare.cs-chicks .after .m-foot{color:#9a8f80; font-family:var(--sans); letter-spacing:.1em; border-top:1px solid rgba(255,210,30,.16)}

.compare.cs-wc .after-bg{background:linear-gradient(#15271d,#0c160f)}
.compare.cs-wc .after .m-topbar{border-bottom:1px solid rgba(116,188,151,.28); box-shadow:inset 0 4px 0 #f5c518}
.compare.cs-wc .after .m-logo{color:#fff; font-family:var(--sans); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.compare.cs-wc .after .m-nav a{color:#a9bdb1; font-family:var(--sans); text-decoration:none}
.compare.cs-wc .after .m-eyebrow{color:#74BC97; font-family:var(--mono); letter-spacing:.2em; font-size:11px}
.compare.cs-wc .after .m-head{color:#fff; font-family:var(--sans); font-weight:800; letter-spacing:-.01em}
.compare.cs-wc .after .m-sub{color:#a9bdb1; font-family:var(--sans)}
.compare.cs-wc .after .m-btn{background:#74BC97; color:#0d1813; font-family:var(--sans); font-weight:600; border:none; border-radius:6px; padding:12px 22px}
.compare.cs-wc .after .m-foot{color:#7d8f84; font-family:var(--mono); border-top:1px solid rgba(116,188,151,.18)}

.compare.cs-abg .after-bg{background:#ECE7DD}
.compare.cs-abg .after .m-topbar{border-bottom:2px solid #1a1a1a}
.compare.cs-abg .after .m-logo{color:#1a1a1a; font-family:var(--sans); font-weight:800; letter-spacing:.02em}
.compare.cs-abg .after .m-nav a{color:#1a1a1a; font-family:var(--sans); text-decoration:none}
.compare.cs-abg .after .m-eyebrow{color:#C0392C; font-family:var(--mono); font-weight:600; letter-spacing:.16em; font-size:11px}
.compare.cs-abg .after .m-head{color:#1a1a1a; font-family:var(--sans); font-weight:800; letter-spacing:-.01em}
.compare.cs-abg .after .m-sub{color:#555; font-family:var(--sans)}
.compare.cs-abg .after .m-btn{background:#C0392C; color:#fff; font-family:var(--sans); font-weight:700; border:none; border-radius:3px; padding:12px 24px}
.compare.cs-abg .after .m-foot{color:#777; font-family:var(--sans); letter-spacing:.04em; border-top:1px solid #cfc7b6}

@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .rv.rv-in{opacity:1; transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .section{padding:64px 0}
  .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-meta .mi{padding:16px 26px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair)}
  .cs-meta .mi:nth-child(2n){border-right:none; padding-right:0}
  .cs-meta .mi:nth-last-child(-n+2){border-bottom:none}
  .cs-block{grid-template-columns:1fr; gap:28px; padding:44px 0}
  .cs-block.reverse{direction:ltr}
  .compare{height:auto}
  .cs-steps{grid-template-columns:1fr 1fr}
  .cs-step{border-right:none; border-bottom:1px solid var(--hair); padding-right:0}
  .rel-grid{grid-template-columns:1fr}
  .bview{height:240px}
  .ink-world{padding:84px 0}
  .cs-cta{padding:48px 24px}
}
@media (max-width:560px){
  .compare{height:auto}
  .cs-steps{grid-template-columns:1fr}
  .m-head{font-size:24px}
  .cs-meta{grid-template-columns:1fr}
  .cs-meta .mi{padding:15px 0; border-right:none}
  .cs-meta .mi, .cs-meta .mi:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
  .cs-meta .mi:last-child{border-bottom:none}
}

/* ====== ECHTE LAUFENDE SEITE — eingebettet (Case-Study) ====== */
.live-embed-wrap .live-embed-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.live-embed-cap .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.live-embed-cap .live{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:7px}
.live-embed-cap .live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(47,106,80,.45)}70%{box-shadow:0 0 0 7px rgba(47,106,80,0)}100%{box-shadow:0 0 0 0 rgba(47,106,80,0)}}
.live-embed{position:relative;border:1px solid var(--hair-strong);border-radius:12px;overflow:hidden;background:#0a120e;box-shadow:0 30px 70px -42px rgba(0,0,0,.6)}
.live-embed .lchrome{display:flex;align-items:center;gap:8px;padding:9px 13px;background:rgba(125,125,125,.08);border-bottom:1px solid var(--hair)}
.live-embed .lchrome i{width:9px;height:9px;border-radius:50%;background:#9a9a9a;opacity:.5;display:block}
.live-embed .lurl{flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.live-embed .lframe{position:relative;width:100%;height:clamp(480px,82vh,820px);overflow-y:auto;overflow-x:hidden;background:#fff;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.live-embed .lframe .ref-shot{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.live-embed-cap .live i{animation:none}}

/* ====== Vereinfachte Referenz-Detailseite: große Vorschau + Zurück-Link ====== */
.live-embed-wrap .cs-prose{max-width:1100px}
.live-embed .lframe{height:clamp(480px,82vh,820px)}
.cs-back{text-align:center;padding:10px 0 6px}
.cs-backlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans,system-ui);font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;border:1px solid var(--line-strong,rgba(255,255,255,.2));padding:13px 26px;border-radius:999px;transition:border-color .2s,color .2s,background .2s}
.cs-backlink:hover{border-color:var(--green,#2F6A50);color:var(--green,#2F6A50)}