/* youtube-thumbnail-test.de : Thema « Klickbild Labor » (8. Stil).
   Versuchslabor : weißes Papier mit feinem Raster, Indigo + Türkis + Bernstein, Kopf mit Handy-Attrappe und
   YouTube-Feed, Versuchsprotokoll (Hypothese / Aufbau / Ergebnis), Inhalt als Kachelraster, Versuche als Laborbuch. */
:root{--bg:#fbfbfd;--paper:#fff;--ink:#16182b;--ink2:#3c4058;--muted:#6d7190;--line:#e2e3ee;--ind:#3b3fc4;--ind-d:#2a2d96;--ind-l:#eef0ff;
--tu:#0d9488;--tu-l:#e3f6f3;--am:#f5a524;--am-l:#fff6e3;--red:#e5484d;--h:'Archivo',system-ui,sans-serif;--t:'Source Serif 4',Georgia,serif;--u:'Archivo',system-ui,sans-serif;--r:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.72 var(--t);-webkit-font-smoothing:antialiased}
a{color:var(--ind)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.promo{background:var(--ind);color:#fff;font:600 13.5px/1.3 var(--u);padding:8px 12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo b{background:var(--am);color:var(--ink);padding:1px 7px;border-radius:5px}
.promo a{color:#fff;text-decoration:underline;margin-left:10px}
.hd{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:9px;font:800 19px var(--u);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo i{width:28px;height:28px;border-radius:8px;background:conic-gradient(var(--ind) 0 60%,var(--tu) 60% 85%,var(--am) 85%);position:relative}
.logo i:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.prog{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:linear-gradient(90deg,var(--ind),var(--tu))}
.btn{display:inline-block;background:var(--ind);color:#fff;font:700 16px/1.2 var(--u);text-decoration:none;padding:14px 22px;border-radius:999px;text-align:center;transition:background .15s,transform .15s}
.btn:hover{background:var(--ind-d);transform:translateY(-1px)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.t{background:var(--tu)}
.btn.g{background:transparent;color:var(--ind);box-shadow:inset 0 0 0 2px var(--ind)}
.btn.xl{font-size:19px;padding:17px 32px}
/* Kopf */
.crumb{font:500 13px var(--u);color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center;padding:20px 0 34px}
.chip{display:inline-flex;align-items:center;gap:7px;font:700 12.5px var(--u);letter-spacing:.08em;text-transform:uppercase;color:var(--tu);background:var(--tu-l);padding:5px 11px;border-radius:999px;margin-bottom:14px}
.chip:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tu)}
h1{font:800 clamp(34px,4.6vw,54px)/1.04 var(--h);letter-spacing:-.025em;margin:0 0 16px}
h1 em{font-style:normal;color:var(--ind)}
.chapo{font-size:20px;color:var(--ink2);margin:0 0 20px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ctas small{font:500 13.5px var(--u);color:var(--muted)}
.by{display:flex;gap:14px;flex-wrap:wrap;font:500 13.5px var(--u);color:var(--muted);margin-top:18px}
.by b a{color:var(--ink);text-decoration:none}
.by .ok{color:var(--tu)}
/* Handy */
.phone{justify-self:center;width:300px;max-width:100%;background:var(--ink);border-radius:38px;padding:12px;box-shadow:0 30px 60px -25px rgba(22,24,43,.45)}
.screen{background:#fff;border-radius:28px;overflow:hidden;padding:14px 12px 12px}
.ph-top{display:flex;justify-content:space-between;align-items:center;font:700 11px var(--u);color:var(--muted);margin-bottom:10px}
.ph-top b{color:var(--red);font-size:14px}
.feed{display:grid;gap:10px}
.fi{display:grid;grid-template-columns:118px 1fr;gap:9px;align-items:center}
.fi .th{aspect-ratio:16/9;border-radius:8px;position:relative;display:flex;align-items:flex-end;padding:5px 6px;font:800 10.5px/1.05 var(--u);color:#fff;text-transform:uppercase}
.fi .th:before{content:attr(data-l);position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.65);display:grid;place-items:center;font-size:10px}
.fi .meta b{display:block;font:700 11.5px/1.25 var(--u);color:var(--ink)}
.fi .bar{height:6px;border-radius:4px;background:var(--line);margin:6px 0 3px;overflow:hidden}
.fi .bar i{display:block;height:100%;background:var(--ind)}
.fi.win .bar i{background:var(--tu)}
.fi .meta span{font:600 10.5px var(--u);color:var(--muted)}
.fi.win .meta span{color:var(--tu)}
.ph-foot{margin-top:11px;font:600 11px/1.35 var(--u);color:var(--ink2);background:var(--bg);border-radius:10px;padding:8px 9px}
/* Versuchsprotokoll */
.proto{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 30px}
.proto div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;position:relative}
.proto div:before{content:attr(data-k);display:block;font:800 12px var(--u);letter-spacing:.12em;text-transform:uppercase;color:var(--ind);margin-bottom:6px}
.proto div:nth-child(2):before{color:var(--tu)}
.proto div:nth-child(3):before{color:#b7791f}
.proto p{margin:0;font-size:16px;line-height:1.5}
.proto b{font-family:var(--u)}
/* KI-Antwort + Kacheln */
.aio{background:var(--ind-l);border-radius:var(--r);padding:20px 24px;margin:0 0 24px;border:1px solid #dcdfff}
.aio-h{font:800 13px var(--u);letter-spacing:.1em;text-transform:uppercase;color:var(--ind);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.aio-h:before{content:"✦";font-size:15px}
.aio p.direct{font-size:19px;margin:0 0 12px}
.aio ul{margin:0;padding-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.aio li{font-size:16px;line-height:1.5}
.aio .src{margin-top:12px;font:500 12.5px var(--u);color:var(--muted)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 0 30px}
.kacheln a{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px;text-decoration:none;color:var(--ink);font:600 14.5px/1.3 var(--u);transition:border-color .15s}
.kacheln a:hover{border-color:var(--ind)}
.kacheln a span{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ind-l);color:var(--ind);display:grid;place-items:center;font-size:12px;font-weight:800}
/* Artikel */
.col{max-width:740px;margin:0 auto}
.prose h2{font:800 clamp(27px,3.1vw,35px)/1.12 var(--h);letter-spacing:-.02em;margin:50px 0 14px;scroll-margin-top:80px}
.prose h3{font:800 23px/1.2 var(--h);margin:30px 0 10px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}
.prose li{margin:6px 0}
.hv{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;border-radius:20px;background:#12142a;margin:6px 0 28px}
.hv:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(59,63,196,.6),transparent 50%),radial-gradient(circle at 15% 85%,rgba(13,148,136,.45),transparent 50%)}
.hv-sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7cqi;opacity:0;transition:opacity .5s}
.hv-sc.on{opacity:1}
.hv-k{font:800 2cqi var(--u);letter-spacing:.16em;text-transform:uppercase;color:#7ee0d4;margin-bottom:2cqi}
.hv-t{font:800 6.6cqi/1.04 var(--h);color:#fff;letter-spacing:-.02em}
.hv-t em{font-style:normal;color:var(--am)}
.hv-s{margin-top:2cqi;font:500 2.6cqi var(--u);color:#c7c9e8;max-width:80%}
.hv-n{font:800 15cqi/1 var(--h);color:#fff}
.hv-l{margin-top:1.6cqi;font:600 2.8cqi var(--u);color:#7ee0d4;max-width:80%}
.hv-rows{display:grid;gap:1.4cqi;width:82%}
.hv-row{display:grid;grid-template-columns:5cqi 1fr auto;gap:2cqi;align-items:center;text-align:left;background:rgba(255,255,255,.08);border-radius:1.6cqi;padding:1.5cqi 2.4cqi;color:#fff;font:600 2.5cqi var(--u)}
.hv-row i{font-style:normal;font-weight:800;color:var(--am);font-size:3.2cqi}
.hv-row b{color:#7ee0d4}
.hv-cta{margin-top:2.6cqi;display:inline-block;background:var(--am);color:var(--ink);font:800 2.4cqi var(--u);padding:1.6cqi 3.6cqi;border-radius:99px;text-decoration:none}
.hv-bar{position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,var(--am),#7ee0d4)}
.hv-replay{position:absolute;right:2cqi;bottom:2cqi;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:#fff;cursor:pointer;opacity:0;transition:opacity .3s}
.hv:hover .hv-replay,.hv-replay.show{opacity:.9}
.notiz{background:var(--tu-l);border-radius:12px;padding:14px 18px;margin:16px 0;font-size:16.5px}
.notiz b:first-child{font-family:var(--u)}
.warn{background:var(--am-l);border-radius:12px;padding:14px 18px;margin:16px 0;font-size:16.5px;border:1px solid #f6dfae}
.big{font:700 25px/1.3 var(--h);letter-spacing:-.01em;color:var(--ind);margin:28px 0;padding-left:20px;border-left:4px solid var(--tu)}
.tscroll{overflow-x:auto;margin:16px 0 24px;border-radius:12px;border:1px solid var(--line);background:var(--paper)}
.tbl{width:100%;border-collapse:collapse;font:500 15px/1.45 var(--u);min-width:520px}
.tbl th{text-align:left;padding:11px 14px;background:#f4f5fb;color:var(--ink2);font-weight:700;font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl .hl{background:#f2fbf9;color:#0b6b62;font-weight:700}
.tbl th.hl{background:var(--tu);color:#fff}
pre.brief{white-space:pre-wrap;background:#14162b;color:#e9eaf6;border-radius:12px;padding:16px 18px;font:14.5px/1.55 ui-monospace,Menlo,monospace;margin:12px 0}
.balken{margin:16px 0 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.balken div{display:grid;grid-template-columns:170px 1fr 52px;gap:10px;align-items:center;font:600 14.5px var(--u);margin:7px 0}
.balken i{display:block;height:12px;border-radius:6px;background:var(--line);overflow:hidden;position:relative}
.balken i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--ind);border-radius:6px}
.balken .w i:after{background:var(--tu)}
.balken b{text-align:right}
.balken small{display:block;font:500 12.5px var(--u);color:var(--muted);margin-top:6px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 22px}
.vs div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.vs h4{font:800 16px var(--u);margin:0 0 6px}
.vs .ja h4{color:var(--tu)}
.vs .nein h4{color:var(--red)}
.vs ul{margin:0;padding-left:20px;font-size:16px}
/* Versuch = Laborbuch */
.case{margin:34px 0;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:var(--paper)}
.case-h{padding:18px 22px;background:linear-gradient(#fff,#fff) padding-box;border-bottom:1px dashed #c9cbe0;background-image:linear-gradient(rgba(59,63,196,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,63,196,.06) 1px,transparent 1px);background-size:18px 18px}
.case-h .nr{font:800 12.5px var(--u);letter-spacing:.14em;text-transform:uppercase;color:var(--ind)}
.case-h h3{margin:5px 0 10px;font:800 23px/1.2 var(--h)}
.case-h .tags{display:flex;gap:8px;flex-wrap:wrap}
.case-h .tags span{font:700 12.5px var(--u);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.case-h .tags span:first-child{background:var(--ind);color:#fff;border-color:var(--ind)}
.case-b{padding:6px 22px 10px}
.cstep{padding:16px 0;border-top:1px solid var(--line)}
.cstep:first-of-type{border-top:0}
.cstep h4{font:800 18px var(--u);margin:0 0 8px;display:flex;gap:10px;align-items:center}
.cstep h4 span{width:28px;height:28px;border-radius:50%;background:var(--tu);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.shot{margin:14px 0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.shot figcaption{font:500 13.5px var(--u);color:var(--ink2);padding:9px 13px;border-top:1px solid var(--line);background:#fafafd}
.cost{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.cost div{background:#f4f5fb;border-radius:10px;padding:10px 12px}
.cost b{display:block;font:800 20px var(--u)}
.cost span{font:500 12.5px var(--u);color:var(--muted)}
.cost .tot{background:var(--ind);color:#fff}
.cost .tot span{color:#d6d8ff}
.mid-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,var(--ind),#5a3fd0);color:#fff;border-radius:18px;padding:20px 24px;margin:32px 0}
.mid-cta b{display:block;font:800 20px/1.2 var(--h)}
.mid-cta span{font:500 15px var(--u);color:#e2e3ff}
.mid-cta .btn{background:var(--am);color:var(--ink);white-space:nowrap}
.faq details{border-bottom:1px solid var(--line);padding:0 2px}
.faq summary{cursor:pointer;list-style:none;font:700 17px/1.4 var(--u);padding:16px 30px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:4px;top:22px;width:10px;height:10px;border-right:2px solid var(--ind);border-bottom:2px solid var(--ind);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(-135deg);top:26px}
.faq details p{margin:0 0 16px;color:var(--ink2)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0 44px}
.rel a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;color:var(--ink);transition:box-shadow .15s}
.rel a:hover{box-shadow:0 10px 26px -14px rgba(59,63,196,.45)}
.rel b{display:block;font:800 17px/1.25 var(--h)}
.rel span{display:block;font:500 14px var(--u);color:var(--muted);margin:6px 0}
.rel em{font:700 14px var(--u);color:var(--tu);font-style:normal}
.final{background:var(--ink);color:#fff;text-align:center;padding:56px 20px}
.final h2{font:800 clamp(28px,3.6vw,40px)/1.1 var(--h);letter-spacing:-.02em;margin:0 0 10px}
.final p{margin:0 auto 22px;max-width:620px;color:#c4c6e0;font-family:var(--u)}
.final .btn{background:var(--am);color:var(--ink)}
.ft{background:#0e1020;color:#b6b9d6;padding:38px 0 28px;font:500 14px var(--u)}
.ft h4{color:#fff;font:800 16px var(--h);margin:0 0 14px}
.ft .kw{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px;margin-bottom:22px}
.ft a{color:#b6b9d6}
.ft .legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #23264a;padding-top:14px;font-size:13px}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 20px -12px rgba(0,0,0,.2);padding:9px 14px;display:none;align-items:center;justify-content:space-between;gap:10px;transform:translateY(110%);transition:transform .25s}
.mbar.show{transform:none}
.mbar small{font:600 13px/1.3 var(--u);color:var(--ink2)}
.mbar .btn{padding:10px 16px;font-size:15px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px}.rel{grid-template-columns:1fr}.ft .kw{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  body{font-size:17px}
  .promo{font-size:12.5px;padding:7px 8px}.promo .long{display:none}.promo a{margin-left:6px}
  .proto{grid-template-columns:1fr;gap:10px}
  .aio ul{grid-template-columns:1fr}
  .kacheln{grid-template-columns:1fr 1fr}
  .vs{grid-template-columns:1fr}
  .balken div{grid-template-columns:118px 1fr 44px;font-size:13px}
  .cost{grid-template-columns:1fr 1fr}
  .mid-cta{flex-direction:column;align-items:stretch}
  .case-h,.case-b{padding-left:16px;padding-right:16px}
  .ctas .btn{width:100%}
  .phone{width:270px}.fi{grid-template-columns:104px 1fr}
  .mbar{display:flex}
  .hv{aspect-ratio:4/5}.hv-k{font-size:3.2cqi}.hv-t{font-size:10cqi}.hv-s{font-size:4.2cqi}.hv-n{font-size:24cqi}.hv-l{font-size:4.6cqi}.hv-row{font-size:3.9cqi;grid-template-columns:7cqi 1fr auto}.hv-row i{font-size:5cqi}.hv-cta{font-size:4.2cqi;padding:2.6cqi 5cqi}
  .ft .kw{grid-template-columns:1fr}
}