/* Laptop-Doktor: Gerüst wie kamera-doktor (styles.css), eigene Gerätewelt „Nachtschicht“:
   Graphit, Bildschirm-Blau als Akzent, Signal-Orange nur für Handlungsaufforderungen. */
:root{
  --bg:#0A0D12; --bg-2:#121721; --bg-3:#1B2230; --line:#232B3A; --line-2:#2F3949;
  --fg:#F3F5F8; --fg-2:#B6BFCD; --fg-3:#8792A4;
  /* #D43F0C: weiße Schrift 4,65:1 (WCAG AA), #F2551F lag bei 3,45 */
  --red:#D43F0C; --red-2:#BF380A; --red-soft:rgba(255,106,51,.14);
  --cyan:#5AB4FF; --cyan-2:#9CD2FF; --cyan-soft:rgba(90,180,255,.12);
  --glow-cyan:0 0 0 1px rgba(90,180,255,.55), 0 0 32px -8px rgba(90,180,255,.35);
}
/* keine Pillen-Optik: Kennzeile und Marken als ruhige Etiketten */
.rec{border-radius:var(--r-xs);letter-spacing:.12em}
.chips span,.chips a{border-radius:var(--r)}
.hero-shade{background:linear-gradient(180deg,rgba(10,13,18,.5) 0%,rgba(10,13,18,.1) 35%,rgba(10,13,18,.72) 72%,rgba(10,13,18,.97) 100%),linear-gradient(90deg,rgba(10,13,18,.78) 0%,rgba(10,13,18,.35) 40%,rgba(10,13,18,0) 62%)}
#scan{position:absolute;inset:0;z-index:-1;pointer-events:none}
.flow.drei{grid-template-columns:repeat(3,1fr)}
.flow.drei::before,.flow.drei::after{display:none}
.badge{border-radius:var(--r-xs)!important}
@media (max-width:980px){.flow.drei{grid-template-columns:1fr}}
.hero h1 em{color:var(--cyan-2)}
/* eigenes Logozeichen statt Kamera-Aufnahmepunkt */
.logo .mark{background:url(/favicon.svg) center/contain no-repeat!important;border:0!important;box-shadow:none!important}
.logo .mark::before,.logo .mark::after{display:none!important}
/* ---------- Unterseiten: übernommene Inhalte im neuen Design ---------- */
.unterseite .artikel-sec{padding-top:44px}
.artikel{max-width:880px}
.artikel h1{font-family:var(--display);font-size:var(--t-2xl);line-height:1.08;margin:.25em 0 .4em;color:var(--fg)}
.artikel h2{font-family:var(--display);font-size:var(--t-xl);line-height:1.15;margin:1.7em 0 .5em;color:var(--fg)}
.artikel h3{font-family:var(--display);font-size:var(--t-l);margin:1.3em 0 .4em;color:var(--fg)}
.artikel p,.artikel li{color:var(--fg-2);line-height:1.75;font-size:var(--t-base)}
.artikel strong,.artikel b{color:var(--fg)}
.artikel a{color:var(--cyan-2);text-decoration:underline;text-underline-offset:3px}
.artikel ul,.artikel ol{padding-left:1.3em;margin:0 0 1.2em}
.artikel li{margin:.25em 0}
.artikel table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:var(--t-s);display:block;overflow-x:auto}
.artikel th,.artikel td{border-bottom:1px solid var(--line-2);padding:10px 12px;text-align:left;color:var(--fg-2);vertical-align:top}
.artikel th{color:var(--fg);background:var(--bg-2)}
.artikel figure{margin:24px 0!important;border-radius:var(--r)!important;box-shadow:none!important;border:1px solid var(--line);background:var(--bg-2)}
.artikel figure img{width:100%;height:auto;display:block}
.artikel figcaption{color:var(--fg-3)!important;padding:8px 12px 10px!important;font-size:var(--t-xs)!important}
.artikel .breadcrumbs,.artikel .breadcrumb{font-size:var(--t-xs);color:var(--fg-3);margin-bottom:12px}
.artikel .breadcrumbs a,.artikel .breadcrumb a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.artikel figure img{aspect-ratio:16/10;object-fit:cover}
/* 320 px: lange Knopftexte und Kennzeilen dürfen umbrechen */
.eyebrow{white-space:normal}
.btn{white-space:normal;text-align:center}
@media (max-width:420px){.kva-box{padding:20px 16px}.kva-box .big{font-size:1.6rem}}
.artikel nav ol,.artikel nav ul,.artikel .breadcrumb ol,.artikel .breadcrumb ul,.artikel>ol:first-child,.artikel>ul:first-child{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;padding:0;margin:0 0 12px;font-size:var(--t-xs)}
.artikel nav li,.artikel .breadcrumb li,.artikel>ol:first-child li,.artikel>ul:first-child li{margin:0;font-size:var(--t-xs);color:var(--fg-3)}
.artikel nav li+li::before,.artikel .breadcrumb li+li::before,.artikel>ol:first-child li+li::before,.artikel>ul:first-child li+li::before{content:"/";margin-right:10px;color:var(--fg-3)}
.artikel .article-meta{color:var(--fg-3);font-size:var(--t-xs);margin-bottom:14px}
.artikel .lauf-eeat{font-size:var(--t-xs)!important;color:var(--fg-3)!important}
.artikel .lauf-eeat a{color:var(--fg-3)!important}
.artikel [style*="color:#6"],.artikel [style*="color:#3"],.artikel [style*="color:#2"],.artikel [style*="color:#1"],.artikel [style*="color: #"]{color:var(--fg-2)!important}
.artikel [style*="background:#f"],.artikel [style*="background: #f"],.artikel [style*="background:#e"]{background:var(--bg-2)!important;border-color:var(--line-2)!important}
.artikel .card,.artikel [class*="-card"]{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.artikel a[class*="-card"]{display:block;padding:18px 20px;text-decoration:none;color:var(--fg)}
.artikel a[class*="-card"]:hover{border-color:var(--cyan)}
.artikel [class*="-grid"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:14px 0 28px}
.artikel a.btn-primary:not(.btn){display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r);background:var(--red);color:#fff;text-decoration:none;font-weight:700}
.artikel .article-related{border-top:1px solid var(--line);margin-top:36px;padding-top:18px}
.artikel .faq-block{margin-top:40px}
.cta-oben{background:var(--red-soft);border:1px solid rgba(255,106,51,.35);border-radius:var(--r);padding:12px 16px;margin:16px 0 20px}
.cta-oben a{color:var(--fg)!important;font-weight:700;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px}
.cta-oben svg,.cta-mitte svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.cta-mitte{border:1px solid var(--line-2);border-left:4px solid var(--red);background:var(--bg-2);border-radius:var(--r);padding:20px 22px;margin:30px 0}
.cta-mitte b{font-family:var(--display);font-size:var(--t-l);color:var(--fg);display:block;margin-bottom:4px}
.cta-mitte p{margin:0 0 14px}
.cta-mitte .btn{color:#fff!important;text-decoration:none!important}
/* ---------- Landingpages (alte Bausteine hero/strip/use/steps) ---------- */
.landing .hero{min-height:auto!important;display:block;padding:64px 0 48px;overflow:visible}
.landing .hero>.wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-top:0;padding-bottom:0}
.landing .hero p{color:var(--fg-2);font-size:var(--t-l);line-height:1.6}
.landing .hero h1 em{color:var(--cyan-2);font-style:normal}
.landing .hero-art{position:relative}
.landing .hero-art img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.landing .hero-badge{position:absolute;left:-18px;bottom:-18px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 16px;display:flex;gap:10px;align-items:center}
.landing .hero-badge b{display:block;color:var(--fg)}.landing .hero-badge span{color:var(--fg-3);font-size:var(--t-xs)}
.landing .hero-badge .dot svg{width:20px;height:20px;stroke:var(--ok);fill:none;stroke-width:2}
.landing .strip{border-block:1px solid var(--line);background:var(--bg-2)}
.landing .strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 20px}
.landing .stat .n{font-family:var(--display);font-weight:700;color:var(--fg);font-size:var(--t-l)}
.landing .stat .l{color:var(--fg-3);font-size:var(--t-xs)}
.landing .use-grid,.landing .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.landing .steps{grid-template-columns:repeat(4,1fr)}
.landing .use,.landing .step{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.landing .use h3,.landing .step h3{font-family:var(--display);color:var(--fg);margin:0 0 6px}
.landing .use p,.landing .step p{color:var(--fg-2);margin:0}
.landing .step .num{width:34px;height:34px;border-radius:50%;border:1px solid var(--cyan);color:var(--cyan);display:grid;place-items:center;font-family:var(--display);margin-bottom:10px}
.landing .ins-grid{display:flex;flex-wrap:wrap;gap:10px}
.landing .ins{border:1px solid var(--line-2);background:var(--bg-2);border-radius:var(--r);padding:9px 16px;color:var(--fg);font-family:var(--display)}
.landing .bg-white{background:var(--bg-2)}
@media (max-width:860px){.landing .hero>.wrap{grid-template-columns:1fr}.landing .strip .wrap{grid-template-columns:1fr 1fr}.landing .use-grid,.landing .steps{grid-template-columns:1fr}.landing .hero-badge{left:10px;bottom:-14px}}
/* Handy: Gerät im Video liegt rechts, Ausschnitt dorthin schieben */
@media (max-width:760px){.hero-media img,.hero-media video{object-position:78% 50%}.hero .lead{font-size:1.02rem}}