/* ============================================================================
   ki-spezial.systems — p24-Grundsystem (Fassung vom 09.10.2026)
   Uebernommen aus dem p24-Design von hostspezial.de (ki-spezial.html als
   Vorlage), hier als gemeinsame Datei statt je Seite im <style>-Block.
   Seitenspezifisches (Hero-Bild, Sonderbausteine) steht in der Seite.
   ============================================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/host-grotesk.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2')}
/* Rueckfallschriften mit angepassten Metriken (10.10.2026): Arial/Courier New werden auf die Masse der Webfonts
   gezogen, damit der Wechsel beim Laden keine Zeilen verschiebt (CLS). Inter: Werte wie next/font; Host Grotesk aus
   gemessener Textbreite (104,4 % von Arial), hhea 1015/-315 je 1000; JetBrains Mono und Courier New sind beide 0,6 em breit. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}
@font-face{font-family:'Host Grotesk Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:104.4%;ascent-override:97.2%;descent-override:30.2%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback';src:local('Courier New');size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --cyan:#00B1EB;          /* Marke — Flaechen, Buttons, Grossschrift */
    --cyan-d:#0095c8;        /* Hover-Zustand, bleibt konstant */
    --acc:#005f83;           /* Akzentschrift auf Hell — 5,4:1, haelt AA auch bei 12px */
    --ink:#0a0f14;
    --bg:#fff;--panel:#f8f9fa;
    --txt:#0a0f14;--grey:#565b60;--muted:#5b6167;   /* muted haelt 4,7:1 auf allen drei hellen Flaechen */
    --rule:#dce0e4;--line:#e8eaed;--hair:#eef1f3;
    --dot:#e3e7ea;--dot-txt:#0a0f14;
    --green:#157a4a;--warn:#9a4708;--ot:#8f4a13;    /* Statusfarben fuer hellen Grund abgedunkelt */
    --mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
    /* Inhaltsspalte 1440px, Aussenkante 64px, ab 1632px zentriert */
    --gx:calc(64px + max(0px, (100% - 1568px) / 2))
}
/* Dunkle Zonen: Kopf, Hero, Terminalzeile, Kennzahlenschiene,
   ein Zwischenband, Abschlussband, Fuss. Zielanteil 15–25 % der Seite. */
.dk{
    --bg:#0a0f14;--panel:#0d1319;
    --txt:rgba(255,255,255,0.9);--grey:rgba(255,255,255,0.62);--muted:rgba(255,255,255,0.5);
    --rule:rgba(255,255,255,0.14);--line:rgba(255,255,255,0.09);--hair:rgba(255,255,255,0.06);
    --dot:#1d2833;--dot-txt:#fff;
    --acc:#6cc4e6;           /* entsaettigt — gesaettigtes Cyan flimmert auf Dunkel */
    --green:#1ea765;--warn:#d97706;--ot:#d98a3d;
    background:var(--bg);color:var(--txt)
}
/* dunkles Zwischenband eine Stufe ueber Kopf und Hero */
.sec.dk:not(.cta-band):not(.hero){--bg:#0f151b;--panel:#151d25}
html{scroll-behavior:smooth}
/* Messwerte, Preise und Laufzeiten fluchten spaltenweise */
.soft li,.kibox .kr,.vs-table,.mfoot,.scstats,.shead .num,.step .dot,.step .dur,.sci{font-variant-numeric:tabular-nums}
p,.sintro,.faq-list .a{text-wrap:pretty}
/* Tastaturbedienung — vorher gab es gar keinen sichtbaren Fokus */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:1px}
.dk :focus-visible{outline-color:#7fd4f5}
::selection{background:rgba(0,177,235,0.25);color:inherit}
body{font-family:'Inter','Inter Fallback',sans-serif;background:var(--bg);color:var(--txt);text-rendering:optimizeLegibility}
.dk{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sec{background:var(--bg);color:var(--txt)}
.sec.alt{--bg:#f8f9fa;--panel:#eef1f3}
a{text-decoration:none;color:inherit}

/* ---------- Utility + Header ---------- */
.util{background:var(--panel);border-bottom:1px solid var(--line)}
.util .hin{display:flex;align-items:center;gap:30px;padding:9px var(--gx);font-size:12.5px;color:var(--grey)}
.hin{width:100%}
.util b{color:var(--txt);font-weight:500;display:flex;align-items:center;gap:8px;margin-right:auto}
.util b::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(30,167,101,0.6);flex-shrink:0}
.util a:hover{color:var(--cyan)}
.hdr{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:10}
.hdr .hin{display:flex;align-items:center;height:96px;padding:0 var(--gx)}
.hdr .logo img{height:34px;width:auto;display:block}
.hdr .logo{margin-right:44px;flex-shrink:0}
.hdr nav{display:flex;align-items:center;height:96px}
.hdr .it{white-space:nowrap;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:17px;color:var(--txt);padding:0 18px;height:96px;display:flex;align-items:center;position:relative}
.hdr .it:hover{color:var(--cyan)}
.hdr .it.on{background:linear-gradient(180deg,rgba(0,177,235,0.06),transparent)}
.hdr .it.on::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:5px;background:var(--cyan);transform:skewX(-24deg)}
.hdr .sp{flex:1}
.hdr .tel{font-size:15.5px;font-weight:600;color:var(--txt);margin-right:28px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.hdr .tel::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(30,167,101,0.6)}
.hdr .cta{white-space:nowrap;background:var(--cyan);color:#04222d;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:16px;padding:18px 32px;transition:background 0.2s}
.hdr .cta:hover{background:var(--cyan-d)}

/* ---------- Sektions-System ---------- */
.sec{border-top:1px solid var(--rule)}
.sec:first-child{border-top:none}
/* Sektionen ohne Zellraster brauchen den Abschluss selbst */
.sec#architektur,.sec#kosten,.sec#faq{padding-bottom:96px}
#architektur .purow:first-of-type{margin-top:48px}
#kosten .cells{padding-bottom:48px}
.shead{display:grid;grid-template-columns:210px 1fr auto;align-items:baseline;gap:32px;padding:88px var(--gx) 28px;border-bottom:1px solid var(--rule)}
.shead .num{font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.shead .num b{color:var(--acc);font-weight:600}
.shead .lbl{display:block;margin-top:8px;font-size:11.5px;line-height:1.5;font-weight:600;letter-spacing:2.2px;color:var(--muted);text-transform:uppercase}
.shead h2{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:44px;letter-spacing:-1.4px;line-height:1.08;text-wrap:balance}
.shead h2 i{font-style:normal;font-weight:300;color:var(--acc)}
.shead .meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.sintro{padding:28px var(--gx) 32px;border-bottom:1px solid var(--line);font-size:18px;line-height:1.6;color:var(--grey);background:var(--panel)}
.sintro b{color:var(--txt)}
.sintro .w{max-width:56ch}

.cells{display:grid;gap:24px;padding:48px var(--gx) 96px}
.cells.c2{grid-template-columns:1fr 1fr}
.cells.c3{grid-template-columns:repeat(3,1fr)}
.cells.c4{grid-template-columns:repeat(4,1fr)}
.cells.c5{grid-template-columns:repeat(5,1fr)}
.cell{padding:32px;border:1px solid var(--line);min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
        .cell:hover{border-color:rgba(0,177,235,0.45);box-shadow:0 6px 20px rgba(10,15,20,0.07);transform:translateY(-1px)}
.dk .cell:hover{background:rgba(0,177,235,0.05);box-shadow:none;transform:none}
@media (prefers-reduced-motion:reduce){.cell{transition:none}.cell:hover{transform:none}}
.cell h3{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-0.4px;text-wrap:balance}
.cell p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--grey);max-width:58ch}
.cells.c3 .cell p,.cells.c3 .cell li{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
/* Zweispaltig: Symbol nach links, sonst wirkt die breite Kachel leer */
.cells.c2 .cell.ico{display:grid;grid-template-columns:52px 1fr;column-gap:22px}
/* alle Kinder nach rechts, nur das Symbol links — sonst rutscht jedes
   weitere Element (Tags, Listen) unter das Icon in die 52px-Spalte */
.cells.c2 .cell.ico > *{grid-column:2}
.cells.c2 .cell.ico .icb{grid-column:1;grid-row:1;margin-bottom:0}
.cells.c2 .cell.ico h3{align-self:center}
.glossary-link{color:inherit;border-bottom:1px dotted rgba(0,177,235,0.55);text-decoration:none}
.glossary-link:hover{color:var(--acc);border-bottom-color:var(--acc)}
/* Etikettenraster — vier Spalten sind nur ohne Fliesstext zulaessig */
.cells.c4 .cell.tagcell{padding:26px 32px}
.cell.tagcell h3{font-size:17px;font-weight:600}
.cell.tagcell small{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cell.bare{padding:0;border:none;background:none}
.cell.bare:hover{background:none}
.cell.gold{background:rgba(0,177,235,0.07);border-color:rgba(0,177,235,0.4);border-top:3px solid var(--cyan);padding-top:30px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 25%;opacity:0.55}
.hero .dim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,20,0.96) 0%,rgba(10,15,20,0.88) 45%,rgba(10,15,20,0.45) 100%)}
.hgrid{position:relative;display:grid;grid-template-columns:1.25fr 0.85fr 0.85fr 1.3fr;gap:0;padding-inline:max(0px, calc((100% - 1568px) / 2))}
.hgrid>*{padding:72px 48px;border-right:1px solid var(--line)}
.hgrid>*:last-child{border-right:none}
.lead{padding-left:64px;padding-right:56px}
.lead .slash{display:inline-block;width:26px;height:6px;background:var(--cyan);transform:skewX(-24deg);margin-bottom:18px}
.lead .crumb{font-size:12px;letter-spacing:2px;color:var(--muted);margin-bottom:14px;text-transform:uppercase}
.lead .crumb a:hover{color:var(--cyan)}
.lead h1{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:40px;letter-spacing:-1.2px;line-height:1.08}
.lead h1 i{font-style:normal;font-weight:300;color:var(--cyan)}
.lead p{margin-top:16px;font-size:14.5px;line-height:1.7;color:var(--grey);max-width:36ch}
.lead .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lead .call{display:inline-flex;align-items:center;gap:12px;background:var(--cyan);color:#04222d;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:15.5px;padding:16px 24px;transition:background 0.2s}
.lead .call:hover{background:var(--cyan-d)}
.lead .ghost{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,0.25);color:var(--txt);font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:15px;padding:16px 22px;transition:all 0.15s;background:transparent}
.lead .ghost:hover{border-color:var(--cyan);color:var(--acc)}
.lead .sub{display:block;margin-top:14px;font-size:12.5px;color:var(--muted)}
.hcol .h{font-size:11.5px;font-weight:600;letter-spacing:2.5px;color:var(--muted);margin-bottom:16px}
.hcol a,.hcol .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.hcol .t{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:600;font-size:15px;color:var(--txt)}
.hcol .d{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.hcol a:hover .t{color:var(--cyan)}
.hcol .ar{color:var(--cyan);font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;flex-shrink:0}

/* Scenecard-Spalte */
.boardwrap{padding:44px 64px 44px 48px !important}

.term{position:relative;padding:13px var(--gx);background:var(--ink);border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);font-family:var(--mono);font-size:13px;color:rgba(255,255,255,0.6);overflow-x:auto;white-space:nowrap}
.term .p{color:var(--cyan)}
.term .cur{display:inline-block;width:8px;height:15px;background:var(--cyan);vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.term .cur{animation:none}}

.mfoot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-inline:max(0px, calc((100% - 1568px) / 2))}
.mfoot span{display:flex;align-items:center;min-width:0;gap:9px;padding:19px 40px;border-right:1px solid var(--line);font-size:12.5px;color:var(--grey)}
.mfoot span:last-child{border-right:none}
.mfoot b{color:var(--txt);font-weight:600;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.mfoot span::before{content:'';width:13px;height:4px;background:var(--cyan);transform:skewX(-24deg);flex-shrink:0}

/* Icon-Boxen in Zellen */
.icb{width:52px;height:52px;background:rgba(0,177,235,0.12);border:1px solid rgba(0,177,235,0.35);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.icb svg{width:24px;height:24px;color:var(--acc)}

/* Scenecard (Illustrationen) */
.scene{display:block;width:100%;max-width:680px;height:auto;margin:0 auto}
.scenecard{background:#05090e;border:1px solid rgba(0,177,235,0.35);box-shadow:0 16px 40px rgba(0,0,0,0.45);height:100%;display:flex;flex-direction:column}
.scenecard .sch{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:13px 20px;border-bottom:1px solid rgba(255,255,255,0.08);font-family:var(--mono);font-size:12px;color:var(--grey)}
.scenecard .sch .t{font-weight:700;color:var(--txt)}
.scenecard .sch .live{display:flex;align-items:center;gap:7px;color:var(--green)}
.scenecard .sch .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(30,167,101,0.7)}
.scenecard img{display:block;width:100%;height:auto;padding:10px 12px 4px;margin:auto 0}
.scstats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(255,255,255,0.08);margin-top:auto}
.sci{display:flex;align-items:flex-start;min-width:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;gap:10px;padding:13px 18px;border-right:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08)}
.sci:nth-child(2n){border-right:none}
.sci:nth-child(n+3){border-bottom:none}
.sci .d{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.sci .d.ok{background:var(--green);box-shadow:0 0 7px rgba(30,167,101,0.65)}
.sci .d.wa{background:#f0aa32;box-shadow:0 0 7px rgba(240,170,50,0.65)}
.sci b{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--txt)}
.sci small{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.scf{padding:11px 20px;border-top:1px solid rgba(255,255,255,0.08);background:var(--panel);font-family:var(--mono);font-size:11px;color:var(--grey)}
.scf b{color:var(--acc);font-weight:700}

/* ---------- /03 Architektur (Schichten-Raster) ---------- */
.purow{display:grid;grid-template-columns:200px 1fr 1fr 1fr;border-bottom:1px solid var(--line);padding-inline:calc(var(--gx) - 32px)}
.purow.p5{grid-template-columns:200px repeat(4,1fr)}
.purow:last-of-type{border-bottom:none}
.purow>*{padding:28px 32px;border-right:1px solid var(--line);min-width:0}
.purow>*:last-child{border-right:none}
.pulbl b{display:block;font-family:var(--mono);font-size:14.5px;color:var(--txt)}
.pulbl span{display:block;margin-top:5px;font-size:11.5px;font-weight:600;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.pubox b{display:block;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:16px}
.pubox small{display:block;margin-top:6px;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--muted)}
.purow.zit{background:rgba(255,255,255,0.035)}
.purow.zit .pulbl{box-shadow:inset 4px 0 0 var(--cyan)}
.purow.zdmz{background:rgba(0,177,235,0.07)}
.purow.zdmz .pulbl{box-shadow:inset 4px 0 0 var(--acc)}
.purow.zdmz .pulbl b{color:var(--acc)}
.purow.zot{background:rgba(217,138,61,0.08)}
.purow.zot .pulbl{box-shadow:inset 4px 0 0 var(--ot)}
.purow.zot .pulbl b{color:var(--ot)}
.pulegend{display:flex;flex-wrap:wrap;gap:16px 36px;padding:24px var(--gx);background:var(--panel);border-top:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--grey)}
.pulegend i{display:inline-block;width:14px;height:9px;margin-right:8px;vertical-align:0}
.pulegend .zi{background:var(--cyan)}
.pulegend .zd{background:var(--acc)}
.pulegend .zo{background:var(--ot)}

/* ---------- Listen-Zellen (Specs) ---------- */
.soft h4{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-0.4px}
.soft ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:11px}
.soft li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:15px;color:var(--txt);border-bottom:1px solid var(--hair);padding-bottom:11px}
.soft li:last-child{border-bottom:none}
.soft li em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.chip{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--acc);background:rgba(0,177,235,0.08);border:1px solid rgba(0,177,235,0.3);padding:5px 12px;margin-bottom:18px}
.hwnote{margin-top:20px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--muted)}
.hwnote b{color:var(--acc);font-weight:700}

/* ---------- Use-Case-Tags ---------- */
.uctags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.uctags span{font-family:var(--mono);font-size:11.5px;color:var(--acc);background:rgba(0,177,235,0.08);border:1px solid rgba(0,177,235,0.25);padding:4px 10px}

/* ---------- /04 Vergleich ---------- */
.vs-wrap{overflow-x:auto;padding:48px var(--gx) 96px}
.vs-table{width:100%;min-width:760px;border-collapse:collapse}
.vs-table th{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 22px;border-bottom:1px solid var(--line)}
.vs-table td{padding:18px 22px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.5;color:var(--grey);vertical-align:top}
.vs-table td:first-child{color:var(--txt);font-weight:600}
.vs-table tr:last-child td{border-bottom:none}
.vs-table td:last-child{background:rgba(0,177,235,0.06)}
.m-ok{font-family:var(--mono);color:var(--green);font-weight:700;margin-right:8px}
.m-part{font-family:var(--mono);color:var(--warn);font-weight:700;margin-right:8px}
.m-no{font-family:var(--mono);color:var(--muted);font-weight:700;margin-right:8px}

/* ---------- /07 Kosten (Mono-Boxen) ---------- */
.kibox{width:100%;border:1px solid var(--line);background:var(--panel)}
.kibox .kt{padding:15px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.kibox .kr{display:flex;justify-content:space-between;gap:14px;padding:15px 22px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:13.5px;color:var(--grey)}
.kibox .kr:last-of-type{border-bottom:none}
.kibox .kr b{color:var(--txt);font-weight:600}
.kibox .kr .ok{color:var(--green)}
.kibox .kr .bad{color:var(--warn)}
.kibox .kf{padding:15px 22px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--grey)}
.kibox .kf b{color:var(--acc)}
.kibox.win{background:rgba(0,177,235,0.07);border-color:rgba(0,177,235,0.45);box-shadow:inset 0 3px 0 var(--cyan)}
.benote{padding:30px var(--gx);border-top:1px solid var(--line);background:rgba(0,177,235,0.08);font-size:16px;line-height:1.6;color:var(--grey)}
.benote>*{max-width:60ch}
.benote b{color:var(--txt)}

/* ---------- /07 Ablauf: Prozesskette ---------- */
.pkette{display:grid;gap:0;padding:48px var(--gx) 90px}
.pkette.p4{grid-template-columns:repeat(4,1fr)}
.pkette>div{position:relative;padding-right:26px}
.pkette .nr{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--cyan);color:var(--acc);font-family:var(--mono);font-size:16px;font-weight:700;background:var(--bg);z-index:1}
.pkette>div::after{content:'';position:absolute;left:44px;top:22px;right:26px;height:1px;background:rgba(0,177,235,0.4)}
.pkette>div:last-child::after{display:none}
.pkette .d{display:block;margin-top:20px;font-family:var(--mono);font-size:12.5px;letter-spacing:1.2px;color:var(--acc)}
.pkette h3{margin-top:8px;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:19px;line-height:1.25}
.pkette p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--grey)}
@media (max-width:1024px){.pkette.p4{grid-template-columns:repeat(2,1fr);row-gap:44px}
 .pkette.p4>div:nth-child(2n)::after{display:none}}
@media (max-width:700px){.pkette{grid-template-columns:1fr!important;row-gap:34px}
 .pkette>div::after{display:none}.pkette>div{padding-right:0}}

/* ---------- FAQ ---------- */
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:last-child{border-bottom:none}
.faq-list{margin-top:24px}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:30px var(--gx);font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:19px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .q{font-family:var(--mono);font-size:12.5px;color:var(--acc);flex-shrink:0;width:34px}
.faq-list summary .tg{margin-left:auto;color:var(--acc);font-weight:800;transition:transform 0.2s}
.faq-list details[open] summary .tg{transform:rotate(45deg)}
.faq-list details[open]{background:var(--panel)}
.faq-list summary:hover{color:var(--acc)}
.faq-list .a{padding:0 var(--gx) 34px;padding-left:calc(var(--gx) + 52px);font-size:16px;line-height:1.6;color:var(--grey);max-width:calc(58ch + var(--gx) + 52px + var(--gx))}

/* ---------- Related ---------- */
.rc2 .rtag{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--acc);background:rgba(0,177,235,0.08);border:1px solid rgba(0,177,235,0.25);padding:4px 10px;margin-bottom:16px}
a.rc2:hover h3{color:var(--acc)}

/* ---------- CTA ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);border-top:1px solid rgba(0,177,235,0.3)}
.cta-band .bg2{position:absolute;inset:0;pointer-events:none;background-size:cover;background-position:center;opacity:0.12}
.cta-band .in{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:72px;align-items:center;padding:96px var(--gx)}
.cta-band .cnum{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,0.62)}
.cta-band h2{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:44px;letter-spacing:-1.4px;line-height:1.08;text-wrap:balance;color:#fff;margin-top:12px}
.cta-band p{margin-top:16px;font-size:18px;line-height:1.6;color:rgba(255,255,255,0.7);max-width:60ch}
.cta-band .box{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);padding:30px}
.cta-band .box .h{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-bottom:18px}
.cta-band .box a.main{display:flex;justify-content:center;background:var(--cyan);color:#04222d;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:16px;padding:16px 28px;transition:background 0.2s}
.cta-band .box a.main:hover{background:#33c3f0}
.cta-band .box a.sec2{display:flex;justify-content:center;margin-top:12px;border:1px solid rgba(255,255,255,0.3);color:#fff;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:15px;padding:14px 28px}
.cta-band .box a.sec2:hover{border-color:var(--cyan);color:var(--cyan)}
.cta-band .box .note{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center}
/* band-zusatz */.cta-band p a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(0,177,235,0.45)}.cta-band p a:hover{border-bottom-color:var(--cyan)}.cta-band .box.nurruf a.sec2{margin-top:0}.cta-band .box .note{text-align:left;line-height:1.5}.cta-band p.beleg{margin-top:18px;padding-top:14px;font-size:13.5px;font-family:var(--mono);color:rgba(255,255,255,0.62);border-top:1px solid rgba(255,255,255,0.14);max-width:46ch}.cta-band p.beleg{margin-top:18px;padding-top:14px;font-size:13.5px;font-family:var(--mono);color:rgba(255,255,255,0.62);border-top:1px solid rgba(255,255,255,0.14);max-width:46ch}.cta-band p.beleg{margin-top:18px;padding-top:14px;font-size:13.5px;font-family:var(--mono);color:rgba(255,255,255,0.62);border-top:1px solid rgba(255,255,255,0.14);max-width:46ch}
.cta-band p a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(0,177,235,0.45)}.cta-band p a:hover{border-bottom-color:var(--cyan)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--rule);background:var(--panel);font-size:13px;color:var(--grey)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);padding-inline:var(--gx)}
.fgrid>*{padding:56px 32px 48px;border-right:1px solid var(--line);min-width:0}
.fgrid>*:first-child{padding-left:0}
.fgrid>*:last-child{border-right:none;padding-right:0}
.fbrand img{display:block}
.fbrand p{margin-top:18px;font-size:14.5px;line-height:1.6;color:var(--grey);max-width:30ch}
.fbrand .marke{display:block;margin-top:30px}
.fbrand .marke .ft{margin-bottom:16px}
.fbrand .marke img{opacity:0.8;transition:opacity .15s}
.fbrand .marke:hover img{opacity:1}
.ft{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.fl{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.fl a,.fl span{font-size:14.5px;line-height:1.5;color:var(--grey)}
.fl a:hover{color:var(--acc)}
.fl .gap{margin-top:10px}
/* Pfeil vor "Termin vereinbaren" -- derselbe Griff wie bei den
   Glossarverweisen. Ueber den href statt ueber eine Klasse, damit
   das HTML aller Seiten unveraendert bleibt. */
.fl a[href="/termin.html"]{position:relative;padding-left:15px}
.fl a[href="/termin.html"]::before{content:'\2192';position:absolute;left:0;top:0;color:var(--muted)}
.fl a[href="/termin.html"]:hover::before{color:var(--acc)}
.mfoot.ftrust{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:var(--gx)}
.mfoot.ftrust span{padding:19px 32px}
.mfoot.ftrust span:first-child{padding-left:0}
.mfoot.ftrust span:last-child{padding-right:0}
.fline{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;padding:22px var(--gx);border-top:1px solid var(--line);font-size:12.5px}
.fline b{color:var(--txt);font-weight:600}
.fline .sp{flex:1}@media(max-width:760px){.fline .sp{display:none}}
.fline a:hover{color:var(--cyan)}

/* ---------- Responsive ---------- */
@media (max-width: 1280px){
    .hgrid{grid-template-columns:1fr 1fr}
    .hgrid>*{border-bottom:1px solid var(--line)}
    .lead{grid-column:1/-1}
    .boardwrap{grid-column:1/-1}
    :root{--gx:40px}
    .shead{grid-template-columns:120px 1fr;gap:18px;padding:64px 40px 22px}
    .shead .meta{display:none}
    .sintro{padding:22px 40px 26px}
    .cells{padding-block:36px 72px}
    .cell{padding:28px}
    .vs-wrap{padding-block:36px 72px}
    .sec#architektur,.sec#kosten,.sec#faq{padding-bottom:72px}
    .cells.c3,.cells.c4,.cells.c5{grid-template-columns:1fr 1fr}
    .purow{grid-template-columns:150px 1fr;padding-inline:16px}
    .purow.p5{grid-template-columns:150px 1fr}
    .purow>*{padding:22px 24px}
    .pulegend{padding:20px 40px}
    .benote{padding:26px 40px}
    .faq-list summary{padding:26px 40px}
    .faq-list .a{padding:0 40px 30px 92px}
    .cta-band .in{grid-template-columns:minmax(0,1fr);gap:40px;padding:64px 40px}
    .fgrid{grid-template-columns:1fr 1fr}
    .fgrid>*{padding:40px 28px 36px}
    .fgrid>*:nth-child(2n){border-right:none;padding-right:0}
    .fgrid>*:nth-child(2n+1){padding-left:0}
    .fgrid>*:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .mfoot.ftrust{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mfoot.ftrust span{padding:15px 28px}
    .mfoot.ftrust span:nth-child(2n){border-right:none;padding-right:0}
    .mfoot.ftrust span:nth-child(2n+1){padding-left:0}
    .mfoot.ftrust span:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .lead{padding-left:40px}
}
@media (max-width: 768px){
    .fgrid{grid-template-columns:1fr;padding-inline:20px}
    .fgrid>*{padding:32px 0 28px;border-right:none;border-bottom:1px solid var(--line)}
    .fgrid>*:last-child{border-bottom:none}
    /* einspaltig — zweispaltig passen die Belege auf 390px nicht in eine Zeile */
    .mfoot.ftrust{grid-template-columns:minmax(0,1fr);padding-inline:20px}
    .mfoot.ftrust span{padding:13px 0;border-right:none;border-bottom:1px solid var(--hair)}
    .mfoot.ftrust span:last-child{border-bottom:none}
}
@media (max-width: 1320px){
    .hdr .hin{flex-wrap:wrap;height:auto;padding-top:16px;padding-bottom:0}
    .hdr .logo{margin-right:auto}
    .hdr .tel{margin-right:20px}
    .hdr nav{order:3;width:100%;height:64px;overflow-x:auto}
    .hdr .it,.hdr .it.on{height:64px}
    .hdr .cta{padding:14px 24px}
}
@media (max-width: 768px){
    .util .hin{padding:9px 20px;gap:18px}
    .util a{display:none}
    .hdr .hin{padding-left:20px;padding-right:20px}
    .hdr .tel{display:none}
    .hgrid{grid-template-columns:minmax(0,1fr)}
    .hgrid>*{border-right:none;padding:32px 24px}
    .lead{padding-left:24px}
    .lead h1{font-size:30px}
    .lead p{max-width:none}
    .term{padding:13px 20px}
    .mfoot{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mfoot span:nth-child(2n){border-right:none}
    .mfoot span{border-bottom:1px solid var(--line);padding:15px 20px}
    :root{--gx:20px}
    .shead{grid-template-columns:1fr;gap:8px;padding:48px 20px 18px}
    .shead h2,.cta-band h2{font-size:30px;letter-spacing:-0.9px}
    .sintro{padding:18px 20px 22px;font-size:16.5px}
    .cells{gap:16px;padding-block:28px 56px}
    .cell h3,.soft h4{font-size:19px}
    .cell p,.faq-list .a,.benote{font-size:15.5px}
    .cells.c2 .cell.ico{grid-template-columns:1fr}
    .cells.c2 .cell.ico > *{grid-column:1}
    .cells.c2 .cell.ico .icb{margin-bottom:18px}
    .vs-wrap{padding-block:28px 56px}
    .sec#architektur,.sec#kosten,.sec#faq{padding-bottom:56px}
    .cells.c2,.cells.c3,.cells.c4,.cells.c5{grid-template-columns:1fr}
    .cell{padding:26px 20px}
    .purow{grid-template-columns:1fr;padding-inline:0}
    .purow.p5{grid-template-columns:1fr}
    .purow>*{border-right:none;border-bottom:1px solid var(--hair)}
    .benote{padding:22px 20px}
    .faq-list summary{font-size:17px;padding:22px 20px}
    .faq-list .a{padding:0 20px 24px}
    .cta-band .in{padding:48px 20px}
}
@media (max-width: 480px){
    .lead h1{font-size:27px}
    .lead .call,.lead .ghost{width:100%;justify-content:center}
}

/* Kennzahlenschiene: vier Spalten passen unter 1000px nicht mehr */
@media (max-width: 1000px){
    .mfoot{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mfoot span:nth-child(2n){border-right:none}
    .mfoot span:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
/* Kennzahlenschiene einspaltig — zweispaltig passen die Belege auf 390px nicht */
@media (max-width: 560px){
    .mfoot{grid-template-columns:minmax(0,1fr)}
    .mfoot span{border-right:none;border-bottom:1px solid var(--line)}
    .mfoot span:last-child{border-bottom:none}
}
    
/* ---------- Das Wichtigste auf einen Blick ----------
   Einheitlicher Kundenblock weit oben auf jeder Leistungsseite. Er
   beantwortet die acht Fragen, die ein Geschaeftsfuehrer zuerst stellt —
   damit Preisrahmen, Reaktionszeit, Dauer und naechster Schritt nicht
   erst im FAQ auftauchen. */
.kblock{background:var(--panel);border-bottom:1px solid var(--line);
    padding:52px var(--gx) 56px}
.kblock .kbk{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
.kblock .kbk .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--acc)}
.kblock .kbk h2{font-size:clamp(23px,2.6vw,31px);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}
.kblock dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:64px;row-gap:0;margin:0}
.kblock .kz{display:grid;grid-template-columns:186px minmax(0,1fr);gap:22px;
    padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.kblock dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);margin:0}
.kblock dd{margin:0;font-size:16.5px;line-height:1.58;color:var(--txt)}
.kblock dd b{font-weight:700}
.kblock dd .sub{display:block;font-size:14.5px;color:var(--grey);margin-top:3px}
.kblock .kcta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:32px;
    padding-top:26px;border-top:1px solid var(--line)}
.kblock .kcta a.kb1{display:inline-flex;align-items:center;gap:10px;background:var(--acc);
    color:#fff;font-weight:700;font-size:15.5px;padding:14px 26px;text-decoration:none;
    border:1px solid var(--acc)}
.kblock .kcta a.kb1:hover{background:transparent;color:var(--acc)}
.kblock .kcta a.kb2{color:var(--txt);font-size:15.5px;text-decoration:none;
    border-bottom:1px solid var(--line);padding-bottom:2px}
.kblock .kcta a.kb2:hover{border-color:var(--acc);color:var(--acc)}
.kblock .kcta .wer{font-size:15px;color:var(--grey)}
.kblock .kcta .wer b{color:var(--txt)}
@media (max-width:1080px){.kblock dl{grid-template-columns:1fr;column-gap:0}}
@media (max-width:620px){
    .kblock{padding:36px 20px 40px}
    .kblock .kz{grid-template-columns:1fr;gap:5px;padding:14px 0}
    .kblock dd{font-size:16px}
    .kblock .kcta a.kb1{width:100%;justify-content:center}
}

/* Lesekorridor im Aufklapper: nur der Fliesstext wird gedeckelt.
   Breite Bausteine (Zonenbilder, Kartenraster, Tabellen) nutzen die
   volle Abschnittsbreite — sonst brechen sie zeichenweise um. */
.faq-list .a,.faq-list details[open] .a{max-width:none}
.faq-list details[open] .a p,
.faq-list details[open] .a li,
.faq-list details[open] .a>b,
.faq-list details[open] .a>em,
.faq-list details[open] .a>h3,
.faq-list details[open] .a>h4,
.faq-list details[open] .a>div:not([class]),
.faq-list details[open] .a .fuehrung,
.faq-list details[open] .a>.sintro,
.faq-list details[open] .a>.pnote,
.faq-list details[open] .a>.benote,
.faq-list details[open] .a>.scrollhinweis,
.faq-list details[open] .a>.kcnote{max-width:58ch}
                                                                                                                                                                                                                                                                                                                /* Telefon, 390 px — siehe _qa/p24_mobil_fix.py */
@media (max-width: 760px) {
    /* Etiketten unter 12 px sind auf dem Telefon nicht mehr lesbar. */
    html body .related-title, html body .dash-tile-label, html body .case-lbl, html body .fs-pill, html body .k-lbl, html body .ru-tag, html body .arch-layer-badge, html body .usecase-result-label, html body .opt, html body .sizing-spec-label, html body .sizing-card-pill, html body .term-head, html body .auf, html body .schedule-badge, html body .cb-title, html body .audit-priority, html body .lg-quick-label, html body .lg-pane-status, html body .lg-icon-btn, html body .lg-detail-label, html body .lg-output-btn, html body .dash-head span, html body .dash-chart text, html body .vram-line span, html body .plan-badge, html body .hin a.cta small { font-size: 12px !important; }
    /* Verdichtung auf dem Telefon — Verhalten: /assets/p24/p24-mobil.js */
    html body .p24-gekuerzt > *:nth-child(n+5) { display: none !important; }
    html body .p24-zu > *:not(.shead):not(.sintro):not(.p24-mehr) { display: none !important; }
    html body .p24-mehr { display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 52px; margin: 14px 0 4px; padding: 14px 18px;
        font: 600 15px/1.3 inherit; letter-spacing: .01em; text-align: left;
        color: #0a0f14; background: #eef4f7; border: 1px solid #c9d7de; border-radius: 0;
        cursor: pointer; }
    html body .p24-mehr:hover { background: #e2ecf1; }
    html body .p24-mehr:focus-visible { outline: 2px solid #005f83; outline-offset: 2px; }
    html body .p24-mehr-zeichen { font: 700 20px/1 inherit; color: #005f83; }
    html body .sec.dk .p24-mehr, html body .dk .p24-mehr {
        color: #eef4f7; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
    html body .sec.dk .p24-mehr-zeichen, html body .dk .p24-mehr-zeichen { color: #6cc4e6; }
    /* Fliesstext auf 16 px braucht Trennstellen: „Auftragsverarbeitungs-
       vertrag" passt sonst nicht in eine 265 px breite Spalte und schiebt
       die Seite ueber den Rand (gemessen: 415 px statt 390). `break-word`
       statt `anywhere` — es bricht nur, wenn es sonst ueberliefe. */
    html body .artbody, html body .artbody p, html body .artbody li,
    html body .artbody td, html body .artbody dd
        { overflow-wrap: break-word; hyphens: auto; }
    html body .method-header { flex-wrap: wrap; }
    /* Die Einwilligungszeile im Formular: Kaestchen und langer Satz in
       einer Flex-Zeile. Ohne Begrenzung wird sie 392 px breit und
       schiebt die Seite auf 412 px. */
    html body .trow .tf label { max-width: 100% !important; flex-wrap: wrap; }
    html body .trow .tf label > span { min-width: 0 !important; overflow-wrap: break-word; }
    /* Technische Leseliste im Auslegungsrechner: 11 px sind auf dem
       Telefon zu klein; sie traegt keine der gelisteten Klassen. */
    html body .sz-gpus li, html body .sz-gpu, html body .k-log li,
    html body .k-axis-item span, html body .kop .live,
    html body .k-term-foot span
        { font-size: 12px !important; }
    /* Verweise im Lesepfad waren 18 px hoch — unter der Zielgroesse
       nach WCAG 2.5.8 (24 px). Als Zeilenelement mit etwas Fuellung
       statt als Block: der Satz bleibt, das Ziel waechst. */
    html body .reading-path-text a { display: inline-block; padding-block: 3px; }
    /* Sprungleiste: laeuft mit, klebt nicht. */
    html body .p24-sprung { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px;
        background: #f3f6f8; border-bottom: 1px solid #dbe4e9; -webkit-overflow-scrolling: touch; }
    html body .p24-sprung-lbl { flex: 0 0 auto; align-self: center; margin-right: 4px;
        font: 700 12px/1 inherit; letter-spacing: .12em; text-transform: uppercase; color: #5b6b74; }
    html body .p24-sprung a { flex: 0 0 auto; min-height: 40px; display: flex; align-items: center;
        padding: 9px 14px; font: 600 14px/1.2 inherit; color: #0a0f14; text-decoration: none;
        background: #fff; border: 1px solid #c9d7de; white-space: nowrap; }
    html body .p24-sprung a:focus-visible { outline: 2px solid #005f83; outline-offset: 2px; }
    /* Punkt 2 der Schlussabnahme: Fliesstext mindestens 16 px. */
    html body a.cell.rc2 > p, html body div.cell.ico > p, html body div.fbrand > p, html body div.lead > p, html body div.lead > span.sub, html body div.lead2 > p, html body span.in > span.d, html body tr > td { font-size: 16px !important; }
    /* Etiketten und technische Beschriftungen mindestens 12 px. */
    html body a.marke > span.ft, html body a.mfeat > span.tag, html body div > span.ft, html body div > span.lbl, html body div.kbk > span.num, html body div.kz > dt, html body div.mcol > div.h, html body div.pulbl > span, html body div.uctags > span { font-size: 12px !important; }
}

/* ---------- Fachartikel (aus aktuelles/*-p24, Zeilen 472-907) ---------- */
/* ---------- Artikel: flacher Hero ---------- */
.hero.flat .hgrid{grid-template-columns:1fr}
.hero.flat .lead{padding:64px var(--gx) 60px;max-width:1568px}
.hero.flat .lead h1{font-size:46px;max-width:calc(100% - 290px);line-height:1.1;text-wrap:balance}
.hero.flat .lead p{max-width:calc(100% - 290px);font-size:18px;line-height:1.6}
.hero.flat .back{display:flex;width:fit-content;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--grey);margin-bottom:22px}
.hero.flat .back:hover{color:var(--acc)}
.hero.flat .tag{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);border:1px solid rgba(0,177,235,0.35);padding:5px 12px;margin-bottom:20px}

/* ---------- Lese-Layout: Verzeichnis links, Text rechts ---------- */
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:0 60px;padding:56px var(--gx) 88px;align-items:start}
/* Seitenspalte rechts wie bei Cloudflare und MDN: der Text steht dann
   nicht mehr am linken Rand mit totem Feld daneben. Die Reihenfolge im
   Quelltext bleibt (Verzeichnis zuerst), damit auf dem Telefon weiter
   das Verzeichnis vor dem Artikel steht. */
.artbody{grid-column:1;grid-row:1}
.artside{grid-column:2;grid-row:1}
@media (max-width:1400px){
    .artgrid{grid-template-columns:minmax(0,1fr) 210px;gap:0 40px}
}
/* Lesebreite: gemessen, nicht gerechnet. Ohne Grenze lief der
   Fliesstext auf 107 Zeichen je Zeile — die AAA-Grenze liegt bei 80.
   58ch ergibt gemessene 65 Zeichen im Median; 68ch haetten 82 ergeben.
   Breites (Tabellen, Code, Schaubilder, Quellen) steht in der zweiten
   Zeile und behaelt seine Breite. */
.artgrid .artbody :is(p,ul,ol,li,h2,h3,h4,blockquote,dd,dt){max-width:none}
.artgrid .artbody :is(table,pre,code,figure,.tablewrap,.table-scroll,.deep-table-wrap,.comparison-table,.code-block,.codeblock,.code-box,.blog-code,.scenecard,.stack-fig,.deep-dive,.quellen,.term,.dash-mock) :is(p,ul,ol,li,h2,h3,h4,blockquote,dd,dt){max-width:none}
.artgrid .artbody>.tablewrap,.artgrid .artbody>table,.artgrid .artbody>pre,.artgrid .artbody>figure,.artgrid .artbody>img,.artgrid .artbody>.code-block,.artgrid .artbody>.code-box,.artgrid .artbody>.blog-code,.artgrid .artbody>.codeblock,.artgrid .artbody>.scenecard,.artgrid .artbody>.stack-fig,.artgrid .artbody>.deep-dive,.artgrid .artbody>.comparison-table{max-width:min(100%,1120px)}
.toc{border-left:1px solid var(--line);padding-left:24px}
.toc .t{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:11px}
.toc a{display:grid;grid-template-columns:34px 1fr;gap:8px;font-size:14px;line-height:1.4;color:var(--grey)}
.toc a em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}
.toc a:hover,.toc a:hover em{color:var(--acc)}
.toc a.on{color:var(--txt);font-weight:600}
.toc a.on em{color:var(--acc)}

.artside{position:sticky;top:28px;display:flex;flex-direction:column;gap:30px;max-height:calc(100vh - 56px);overflow-y:auto;scrollbar-width:thin}
.share-box{border-left:1px solid var(--line);padding-left:24px}
.share-title{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.share-links{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.share-link{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--grey)}
.share-link svg{width:17px;height:17px;flex-shrink:0}
.share-link:hover{color:var(--acc)}

/* Produktbox am Textende — Auszeichnung stammt aus dem Blog-Layout */
.blog-cta{background:rgba(0,177,235,0.08);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px var(--gx)}
.blog-cta-content{max-width:62ch}
.blog-cta h3{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:30px;line-height:1.14;letter-spacing:-0.7px;color:var(--txt);text-wrap:balance}
.blog-cta p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--grey)}
/* .btn-primary mitfuehren: die Quelle setzt beide Klassen */
.blog-cta .btn,.blog-cta .btn-primary{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:var(--cyan);color:#04222d;
    font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:16px;padding:16px 28px;transition:background .2s}
.blog-cta .btn:hover,.blog-cta .btn-primary:hover{background:#33c3f0}

/* Verwandte Artikel — Auszeichnung stammt aus dem Blog-Layout */
.related-section{padding:48px var(--gx) 96px}
.related-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.related-card{border:1px solid var(--line);padding:32px;background:var(--bg);transition:border-color .15s,box-shadow .15s,transform .15s}
.related-card:hover{border-color:rgba(0,177,235,0.45);box-shadow:0 6px 20px rgba(10,15,20,0.07);transform:translateY(-1px)}
.related-card-tag{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--acc);background:rgba(0,177,235,0.08);border:1px solid rgba(0,177,235,0.25);padding:4px 10px;margin-bottom:16px}
.related-card h4{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-0.4px;text-wrap:balance}
.related-card p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--grey)}
.related-card:hover h4{color:var(--acc)}

.artbody{max-width:none;min-width:0}
.artbody h2{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;font-size:30px;line-height:1.16;letter-spacing:-0.7px;
    margin:56px 0 18px;padding-top:26px;border-top:1px solid var(--line);text-wrap:balance;scroll-margin-top:24px}
.artbody h2:first-child{margin-top:0;padding-top:0;border-top:none}
.artbody h2 .hn{display:block;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:0;color:var(--acc);margin-bottom:10px}
.artbody h3{font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:20px;line-height:1.28;margin:32px 0 12px;text-wrap:balance}
.artbody p{font-size:19px;line-height:1.7;color:var(--txt);margin-bottom:18px;text-wrap:pretty}
.artbody ul,.artbody ol{margin:0 0 20px 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.artbody li{font-size:18.5px;line-height:1.62;color:var(--txt)}
.artbody a{color:var(--acc);border-bottom:1px solid rgba(0,177,235,0.35)}
.artbody a:hover{border-bottom-color:var(--acc)}
.artbody strong{font-weight:600}
.blog-highlight{background:var(--panel);border-left:3px solid var(--cyan);padding:22px 26px;margin:28px 0}
.blog-highlight p:last-child{margin-bottom:0}
.comparison-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.comparison-table th{font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.comparison-table td{padding:14px;border-bottom:1px solid var(--hair);color:var(--grey);vertical-align:top;line-height:1.5}
.comparison-table tr:last-child td{border-bottom:none}
.tablewrap{overflow-x:auto;margin:28px 0}
.tablewrap .comparison-table{margin:0;min-width:620px}
.glossary-link{color:inherit;border-bottom:1px dotted rgba(0,177,235,0.55);text-decoration:none}
.glossary-link:hover{color:var(--acc);border-bottom-color:var(--acc)}
/* Kasten aus dem Quelltext. Ohne eigene Regeln bleibt er ungestylt und
   seine SVGs wachsen ohne Groessenangabe auf 720 px auf. */
.service-links{border:1px solid var(--line);background:var(--panel);padding:26px 28px;margin:36px 0}
.service-links-title{font-family:var(--mono);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.service-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 28px}
.artbody a.service-link-item{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:var(--txt);border-bottom:none}
.artbody a.service-link-item svg{width:20px;height:20px;flex-shrink:0;color:var(--acc)}
.artbody a.service-link-item span{border-bottom:1px solid transparent}
.artbody a.service-link-item:hover{color:var(--acc)}
.artbody a.service-link-item:hover span{border-bottom-color:var(--acc)}
.aihint{display:flex;gap:12px;align-items:flex-start;margin:0 0 32px;padding:15px 18px;
    background:var(--panel);border-left:3px solid var(--cyan);font-size:13.5px;line-height:1.6;color:var(--grey)}
.aihint svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--acc)}

@media (max-width:1100px){
    .artgrid{grid-template-columns:1fr;gap:0;padding:40px var(--gx) 64px}
    .artbody,.artside,.artmarg{grid-column:1;grid-row:auto}
    .artside{position:static;gap:0;max-height:none;overflow:visible}
    .share-box{border-left:none;border-bottom:1px solid var(--line);padding-left:0;padding-bottom:24px;margin-bottom:34px}
    .share-links{flex-direction:row;flex-wrap:wrap;gap:10px 26px}
    .related-grid{grid-template-columns:1fr}
    .related-section{padding:36px var(--gx) 72px}
    .blog-cta{padding:40px var(--gx)}
    .toc{position:static;border-left:none;border-bottom:1px solid var(--line);padding-left:0;padding-bottom:26px;margin-bottom:34px}
    .toc ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 24px}
    .artbody{max-width:none}
    .artgrid .artbody>*{max-width:none}
}
@media (max-width:768px){
    .hero.flat .lead{padding:40px 20px 34px}
    .hero.flat .lead h1{font-size:29px}
    .hero.flat .lead p{font-size:16.5px}
    /* Die Breitenbegrenzung des Kopfes (100 % minus 290 px) laesst auf 390 px nur 100 px uebrig — ein Wort je Zeile. */
    .hero.flat .lead h1,.hero.flat .lead p{max-width:none}
    .artgrid{padding:28px 20px 48px}
    .related-section{padding:28px 20px 56px}
    .related-card{padding:26px 20px}
    .blog-cta{padding:32px 20px}
    .blog-cta h3{font-size:24px}
    .artbody h2{font-size:24px;margin-top:40px}
    .artbody h3{font-size:18px}
    .artbody p,.artbody li{font-size:16px}
}

/* Kennzahlenschiene: vier Spalten passen unter 1000px nicht mehr */
@media (max-width: 1000px){
    .mfoot{grid-template-columns:1fr 1fr}
    .mfoot span:nth-child(2n){border-right:none}
    .mfoot span:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
/* Kennzahlenschiene einspaltig — zweispaltig passen die Belege auf 390px nicht */
@media (max-width: 560px){
    .mfoot{grid-template-columns:1fr}
    .mfoot span{border-right:none;border-bottom:1px solid var(--line)}
    .mfoot span:last-child{border-bottom:none}
}
/* Fremdinhalte aus den Artikeln baendigen */
.artbody table{display:block;width:100%;overflow-x:auto;border-collapse:collapse}
.artbody pre,.artbody code{overflow-x:auto;max-width:100%}
.artbody img,.artbody iframe,.artbody video{max-width:100%;height:auto}
.artbody .tablewrap{overflow-x:auto}
.artbody > *{max-width:100%}
    

/* Kernaussagen am Artikelanfang. Belegt: Zusammenfassungen helfen dort
   beim Relevanzurteil, am Artikelende werden sie kaum gefunden
   (NN/g, Formatting Techniques for Long-Form Content, 2023). Regel:
   kein Kasten ohne mindestens eine konkrete Zahl. */
.kern{margin:0 0 34px;padding:20px 24px 22px;background:rgba(0,177,235,0.06);border-left:2px solid var(--cyan)}
.kern .t{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.kern ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.kern li{position:relative;padding-left:19px;font-size:16px;line-height:1.6;color:var(--txt)}
.kern li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--cyan)}
.kern li b,.kern li strong{font-weight:700}
.artbody .ai-disclosure{display:flex;gap:13px;align-items:flex-start;margin:0 0 34px;padding:15px 18px;background:var(--panel);border-left:2px solid var(--cyan);font-size:14px;line-height:1.6;color:var(--grey)}.artbody .ai-disclosure strong{color:var(--txt)}.artbody .ai-disclosure+p{margin-top:0}.artbody .ai-disclosure svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px}.artbody .btn svg,.artbody .btn-primary svg,.blog-cta .btn svg,.blog-cta .btn-primary svg{width:16px;height:16px;flex:0 0 16px}.artbody svg:not([width]){max-width:26px;max-height:26px}.artbody h2 .anr{margin-right:12px}.artbody .inline-xref a+*{margin-left:0}
    
/* uebernommene Artikelstile */
.artbody{--cyan-deep:var(--cyan-d);--cyan-soft:var(--acc);--grad:linear-gradient(180deg,var(--cyan),var(--cyan-d));--grad-soft:linear-gradient(180deg,var(--acc),var(--cyan-d));--ink:var(--bg);--ink-2:var(--panel);--ink-3:var(--panel);--line-strong:var(--rule);--r:0;--r-lg:0;--r-sm:0;--shadow:0 18px 44px -20px rgba(0,0,0,0.22);--shadow-sm:0 2px 8px rgba(0,0,0,0.10);--surface:var(--bg);--txt-dim:var(--grey);--txt-faint:var(--muted);--violet:var(--muted);--violet-soft:var(--grey);}
.artbody .blog-back{display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color:var(--grey); margin-bottom: 32px; transition: color 0.2s;}.artbody .blog-back:hover{color:var(--acc);}.artbody .blog-back svg{width: 16px; height: 16px;}.artbody .blog-meta{display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap;}.artbody .blog-tag{font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color:var(--acc); background: rgba(0,177,235,0.15); padding: 6px 14px; border: 1px solid rgba(0,177,235,0.3);}.artbody .blog-meta-item{display: flex; align-items: center; gap: 6px; font-size: 13px; color:var(--grey);}.artbody .blog-meta-item svg{width: 14px; height: 14px; opacity: 0.7;}.artbody .blog-content p{font-size: 17px; color: #3c4043; line-height: 1.9; margin-bottom: 24px;}.artbody .blog-content h2{font-size: 26px; font-weight: 700; color: #0a0f14; margin: 56px 0 20px; padding-top: 32px; border-top: 1px solid #e8eaed;}.artbody .blog-content h2:first-of-type{margin-top: 0; padding-top: 0; border-top: none;}.artbody .blog-content h3{font-size: 18px; font-weight: 600; color: #0a0f14; margin: 32px 0 16px;}.artbody .blog-content ul{margin: 24px 0; padding-left: 0; list-style: none;}.artbody .blog-content li{font-size: 16px; color: #3c4043; padding: 14px 0 14px 32px; position: relative; border-bottom: 1px solid #f0f0f0;}.artbody .blog-content li::before{content: ''; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; background: #00B1EB; border-radius: 50%;}.artbody .blog-content li:last-child{border-bottom: none;}.artbody .blog-highlight{background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); border-left: 4px solid #00B1EB; padding: 28px 32px; margin: 40px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.04);}.artbody .blog-highlight p{margin-bottom: 0; font-size: 16px; line-height: 1.8;}.artbody .blog-highlight strong{color: #0a0f14;}.artbody .service-links{background: #f8f9fa; border: 1px solid #e8eaed; padding: 32px; margin: 40px 0;}.artbody .service-links-title{font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #5f6368; margin-bottom: 20px;}.artbody .service-links-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}.artbody .service-link-item{display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid #e8eaed; transition: all 0.2s;}.artbody .service-link-item:hover{border-color:var(--acc);}.artbody .service-link-item svg{width: 20px; height: 20px; color:var(--acc); flex-shrink: 0;}.artbody .service-link-item span{font-size: 14px; font-weight: 500; color: #0a0f14;}.artbody .share-title{font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #5f6368; margin-bottom: 16px;}.artbody .related-section{padding: 64px 56px; background: #f8f9fa;}.artbody .related-title{font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #5f6368; margin-bottom: 32px;}.artbody .related-card{background: #fff; border: 1px solid #e8eaed; padding: 28px; transition: all 0.2s;}.artbody .related-card:hover{border-color:var(--acc); box-shadow: 0 4px 20px rgba(0,0,0,0.08);}.artbody .related-card-tag{font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color:var(--acc); margin-bottom: 12px;}.artbody .related-card h4{font-size: 17px; font-weight: 600; color: #0a0f14; line-height: 1.4; margin-bottom: 8px;}.artbody .related-card p{font-size: 14px; color: #5f6368; line-height: 1.6;}


@media (max-width: 768px){.blog-hero {
        padding: 32px 20px 48px;
        text-align: center;
    }
    .blog-hero h1 {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: -0.5px;
    }
    .blog-hero-intro {
        font-size: 16px;
        max-width: 100%;
    }
    .blog-meta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px 20px;
    }
    .blog-back {
        margin-bottom: 24px;
        justify-self: flex-start;
        align-self: flex-start;
    }

    .blog-layout {
        padding: 32px 20px;
        gap: 32px;
    }
    .blog-main {
        max-width: 100%;
        overflow-x: hidden;
    }
    .blog-sidebar {
        grid-template-columns: minmax(0,1fr);
        gap: 20px;
    }

    
    .blog-content p {
        font-size: 16px;
        line-height: 1.75;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .blog-content h2 {
        font-size: 22px;
        margin: 32px 0 16px;
        padding-top: 20px;
        line-height: 1.3;
        word-wrap: break-word;
    }
    .blog-content h3 {
        font-size: 18px;
        margin: 24px 0 12px;
        word-wrap: break-word;
    }
    .blog-content li {
        font-size: 15px;
        padding: 12px 0 12px 28px;
        word-wrap: break-word;
    }
    .blog-content ul {
        margin: 20px 0;
    }

    
    .blog-highlight {
        padding: 20px 16px;
        margin: 24px 0;
        border-left-width: 3px;
    }
    .service-links {
        padding: 20px 16px;
        margin: 24px 0;
    }
    .service-links-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 12px;
    }
    .service-link-item {
        padding: 14px 16px;
        font-size: 14px;
    }

    
    .comparison-table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 24px -20px;
        width: calc(100% + 40px);
    }
    .comparison-table th,
    .comparison-table td {
        padding: 8px 10px;
        min-width: 120px;
    }

    
    .toc {
        padding: 20px 16px;
    }
    .toc-list a {
        font-size: 13px;
    }
    .share-box {
        padding: 20px 16px;
    }

    
    .blog-cta {
        padding: 32px 20px;
        margin-top: 48px;
    }
    .blog-cta h3 {
        font-size: 22px;
        line-height: 1.3;
    }
    .blog-cta p {
        font-size: 15px;
    }

    
    .related-section {
        padding: 32px 20px;
    }
    .related-card {
        padding: 20px 16px;
    }

    
    .breadcrumb {
        font-size: 13px;
        padding: 16px 20px;
        overflow-x: auto;
        white-space: nowrap;
    }}


@media (max-width: 480px){.blog-hero h1 {
        font-size: 32px;
        line-height: 1.3;
    }
    .blog-hero-intro {
        font-size: 15px;
    }
    .blog-hero {
        padding: 24px 16px 40px;
    }

    .blog-layout {
        padding: 24px 16px;
    }

    .blog-meta {
        gap: 8px 16px;
    }
    .blog-tag {
        font-size: 10px;
        padding: 5px 10px;
    }
    .blog-meta-item {
        font-size: 12px;
    }

    .blog-content h2 {
        font-size: 20px;
        margin: 28px 0 14px;
    }
    .blog-content h3 {
        font-size: 17px;
        margin: 20px 0 10px;
    }
    .blog-content p {
        font-size: 15px;
    }

    .blog-highlight,
    .service-links,
    .toc,
    .share-box {
        padding: 16px 12px;
    }

    .blog-cta {
        padding: 24px 16px;
    }
    .blog-cta h3 {
        font-size: 20px;
    }

    .related-section {
        padding: 24px 16px;
    }

    .comparison-table {
        margin: 20px -16px;
        width: calc(100% + 32px);
    }

    .breadcrumb {
        padding: 12px 16px;
        font-size: 12px;
    }}


.blog-content *{max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;}.artbody .blog-content *{max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;}.artbody .blog-content code, .artbody .blog-content pre{word-break: break-all;
    overflow-wrap: break-word;}
@media (max-width: 480px){.artbody .blog-meta{gap: 8px 16px;}.artbody .blog-tag{font-size: 10px;
        padding: 5px 10px;}.artbody .blog-meta-item{font-size: 12px;}.artbody .blog-content h2{font-size: 20px;
        margin: 28px 0 14px;}.artbody .blog-content h3{font-size: 17px;
        margin: 20px 0 10px;}.artbody .blog-content p{font-size: 15px;}.artbody .related-section{padding: 24px 16px;}}
@media (max-width: 768px){.artbody .service-links-grid{grid-template-columns: minmax(0,1fr);}.artbody .blog-meta{justify-content: center;
        flex-wrap: wrap;
        gap: 12px 20px;}.artbody .blog-back{margin-bottom: 24px;
        justify-self: flex-start;
        align-self: flex-start;}.artbody .blog-content p{font-size: 16px;
        line-height: 1.75;
        word-wrap: break-word;
        overflow-wrap: break-word;}.artbody .blog-content h2{font-size: 22px;
        margin: 32px 0 16px;
        padding-top: 20px;
        line-height: 1.3;
        word-wrap: break-word;}.artbody .blog-content h3{font-size: 18px;
        margin: 24px 0 12px;
        word-wrap: break-word;}.artbody .blog-content li{font-size: 15px;
        padding: 12px 0 12px 28px;
        word-wrap: break-word;}.artbody .blog-content ul{margin: 20px 0;}.artbody .blog-highlight{padding: 20px 16px;
        margin: 24px 0;
        border-left-width: 3px;}.artbody .service-links{padding: 20px 16px;
        margin: 24px 0;}.artbody .service-links-grid{grid-template-columns: minmax(0,1fr);
        gap: 12px;}.artbody .service-link-item{padding: 14px 16px;
        font-size: 14px;}.artbody .related-section{padding: 32px 20px;}.artbody .related-card{padding: 20px 16px;}}@media(max-width:760px){.artbody .service-links-grid{grid-template-columns:minmax(0,1fr)}}.artbody table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}.artbody table th,.artbody table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}.artbody table thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}.artbody table tbody tr:hover{background:var(--panel)}.artbody table td,.artbody table th{color:var(--txt)}.artbody pre{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--cyan);padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.6;margin:22px 0}.artbody pre code{background:none;border:none;padding:0;font-size:inherit}.artbody pre,.artbody pre *{--txt:rgba(255,255,255,0.92);--grey:rgba(255,255,255,0.70);--muted:rgba(255,255,255,0.62);--acc:#6cc4e6;--line:rgba(255,255,255,0.12);--hair:rgba(255,255,255,0.08)}.artbody pre,.artbody pre code{color:rgba(255,255,255,0.92)}.artbody :is(pre,.code-block) :is(.tag,.kw,.keyword,.k){color:#7fd4f0 !important}.artbody :is(pre,.code-block) :is(.str,.string,.s,.val){color:#a3e0a0 !important}.artbody :is(pre,.code-block) :is(.num,.number,.n){color:#e9a3c9 !important}.artbody :not(pre)>code{background:var(--panel);border:1px solid var(--hair);padding:1px 6px;font-family:var(--mono);font-size:13.5px}
    




/* Verantwortung sichtbar machen: Wer den Beitrag herausgibt, steht am
   Ende des Artikels. Belegt wirksam fuer Glaubwuerdigkeit (Stanford
   Web Credibility, n>4500) — hier als Redaktion, nicht als Person. */
.autor{margin:44px 0 0;padding:22px 24px;background:var(--panel);border-left:2px solid var(--line)}
.autor .t{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.autor p{font-size:15.5px;line-height:1.65;color:var(--grey);margin:0}
.autor b{color:var(--txt)}
.autor a{color:var(--acc)}

/* Quellenangaben: doppelt belegt — Princeton/KDD 2024 nennt „Cite Sources"
   unter den staerksten Hebeln fuer Zitierbarkeit, Stanford Web Credibility
   fuer Glaubwuerdigkeit. Regel: nur Quellen, die im Artikel wirklich
   genannt sind. Kein Artikel bekommt eine erfundene Liste. */
.quellen{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.quellen .t{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.quellen ol{margin:0;padding-left:20px}
.quellen li{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:7px}
.quellen a{color:var(--acc)}
.sprunglink{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--cyan,#00B1EB);color:#04222d;font-weight:700;font-size:15px;text-decoration:none;border-radius:0 0 4px 0}.sprunglink:focus{left:0}

/* Die Abstandsregeln zielen auf `.toc ol`; im Markup liegen die
   Verweise direkt im `nav`. Ohne das hier stossen sie aneinander —
   20 px hoch, 0 px Luft (WCAG 2.5.8 verlangt 24 px Mittenabstand). */
.toc{display:flex;flex-direction:column;gap:2px}
.toc a{padding:7px 0}

/* ---------- Nachgezogen: Sprunglink, Scrollhinweis, Ikonen-Sicherung ---------- */
.wcode code,pre.cb code,.osterm pre,.term,.agdia text{font-variant-ligatures:none;font-feature-settings:'liga' 0,'calt' 0}

/* Ikonen-Sicherung: ein <svg> ohne Groessenangabe in einer Liste zieht sich
   sonst auf die Containerbreite auf */
main li > svg{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px}

    
/* Scrollhinweis fuer breite Inhalte (Pruefung 22.08.2026) */.vs-wrap,.term,.nztab,.rzwrap,.tablewrap,.vgl-wrap{scrollbar-width:thin;scrollbar-color:rgba(0,177,235,0.5) rgba(127,127,127,0.16)}.vs-wrap::-webkit-scrollbar,.term::-webkit-scrollbar,.nztab::-webkit-scrollbar,.rzwrap::-webkit-scrollbar,.tablewrap::-webkit-scrollbar,.vgl-wrap::-webkit-scrollbar{height:8px;-webkit-appearance:none}.vs-wrap::-webkit-scrollbar-thumb,.term::-webkit-scrollbar-thumb,.nztab::-webkit-scrollbar-thumb,.rzwrap::-webkit-scrollbar-thumb,.tablewrap::-webkit-scrollbar-thumb,.vgl-wrap::-webkit-scrollbar-thumb{background:rgba(0,177,235,0.5);border-radius:4px}.vs-wrap::-webkit-scrollbar-track,.term::-webkit-scrollbar-track,.nztab::-webkit-scrollbar-track,.rzwrap::-webkit-scrollbar-track,.tablewrap::-webkit-scrollbar-track,.vgl-wrap::-webkit-scrollbar-track{background:rgba(127,127,127,0.16)}@media(max-width:900px){.scrollhinweis{display:block;padding:9px 0 2px;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;opacity:.55;text-align:center}}@media(min-width:901px){.scrollhinweis{display:none}}
    
.sprunglink{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--cyan,#00B1EB);color:#04222d;font-weight:700;font-size:15px;text-decoration:none;border-radius:0 0 4px 0}.sprunglink:focus{left:0}

/* Kennzahlenschiene einspaltig auf dem Telefon — steht bewusst am Ende,
   weil spaetere Regeln (Artikelteil) sie sonst auf zwei Spalten zuruecksetzen. */
@media (max-width: 560px){
    .mfoot{grid-template-columns:minmax(0,1fr)}
    .mfoot span{border-right:none;border-bottom:1px solid var(--line)}
    .mfoot span:last-child{border-bottom:none}
}

/* ============================================================================
   KI-Bausteine (09.10.2026, „mehr KI in der Seite")
   ============================================================================ */
/* Violetter KI-Akzent — dasselbe Muster wie hostspezial.de/ki-spezial.html */
.hero.ki{--lila:#a855f7;--lila-hell:#c084fc}
.hero.ki::after{content:'';position:absolute;top:-58%;right:-20%;width:1100px;height:1100px;border-radius:50%;
    background:radial-gradient(circle,rgba(168,85,247,0.22) 0%,rgba(163,95,250,0.14) 30%,rgba(155,108,255,0.06) 52%,rgba(155,108,255,0.02) 68%,transparent 82%);
    pointer-events:none;z-index:0}
.hero.ki .hgrid,.hero.ki .term{z-index:1}
.hero.ki .dim{background:linear-gradient(100deg,rgba(10,15,20,0.96) 0%,rgba(12,14,24,0.9) 45%,rgba(20,13,36,0.5) 100%)}
.hero.ki::before{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 0%,rgba(10,15,20,0.55) 100%)}
.hero.ki .lead h1 i{color:var(--lila-hell)}
.hero.ki .lead .slash{background:linear-gradient(100deg,var(--cyan) 0%,var(--lila) 100%)}
.hero.ki .hcol a:hover .t{color:var(--lila-hell)}
@media (max-width:1280px){
    .hero.ki::after{top:-300px;right:-180px;width:700px;height:700px}
    .hero.ki .dim{background:linear-gradient(168deg,rgba(16,12,30,0.86) 0%,rgba(12,14,24,0.92) 30%,rgba(10,15,20,0.95) 100%)}
    .hero.ki::before{height:22%}
}

/* Lokale KI-Konsole — ein Gespraech mit Quelle, im Stil der Szenenkarte */
.kichat{position:relative;background:#05090e;border:1px solid rgba(168,85,247,0.38);box-shadow:0 16px 44px rgba(40,10,70,0.45);
    display:flex;flex-direction:column;height:100%;font-family:var(--mono)}
.kichat .kh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:12px 18px;
    border-bottom:1px solid rgba(255,255,255,0.08);font-size:12px;color:var(--grey)}
.kichat .kh .t{font-weight:700;color:var(--txt)}
.kichat .kh .live{display:flex;align-items:center;gap:7px;color:var(--green)}
.kichat .kh .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(30,167,101,0.7)}
.kichat .kb{display:flex;flex-direction:column;gap:12px;padding:16px 18px;flex:1}
.kichat .msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.kichat .av{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.18);
    font-size:11px;font-weight:700;color:var(--grey);flex-shrink:0}
.kichat .msg.ki .av{border-color:rgba(168,85,247,0.6);color:#c084fc}
.kichat .bub{font-family:'Inter','Inter Fallback',sans-serif;font-size:14px;line-height:1.55;color:rgba(255,255,255,0.86);
    background:rgba(255,255,255,0.045);padding:10px 13px;overflow-wrap:anywhere}
.kichat .msg.ki .bub{border-left:2px solid #a855f7}
.kichat .bub b{color:#fff;font-weight:600}
.kichat .src{display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;color:#6cc4e6}
.kichat .src::before{content:'↳ ';color:var(--muted)}
.kichat .tipp{display:inline-flex;gap:4px;padding:4px 0}
.kichat .tipp i{width:6px;height:6px;border-radius:50%;background:#c084fc;animation:kitipp 1.2s infinite}
.kichat .tipp i:nth-child(2){animation-delay:.2s}.kichat .tipp i:nth-child(3){animation-delay:.4s}
@keyframes kitipp{0%,80%,100%{opacity:.25}40%{opacity:1}}
.kichat .ki-in{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid rgba(255,255,255,0.08);
    font-size:12.5px;color:var(--muted)}
.kichat .ki-in .cur{display:inline-block;width:7px;height:14px;background:#c084fc;animation:blink 1.1s steps(1) infinite}
.kichat .ki-in .sp{flex:1}
.kichat .ki-in .tag{font-size:11px;color:#c084fc;border:1px solid rgba(168,85,247,0.4);padding:3px 8px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.kichat .tipp i,.kichat .ki-in .cur{animation:none}}
/* Konsole als Szenenkarte im Hero: Kennzahlen unten wie gehabt */
.kichat .scstats{border-top:1px solid rgba(255,255,255,0.08)}
.kichat .sci small{font-family:var(--mono)}

/* Beispielfragen im Hero — rotierend, Klick fuehrt zur ChatGPT-Alternative */
.fragebar{display:flex;align-items:center;gap:12px;margin-top:22px;padding:11px 14px;border:1px solid rgba(168,85,247,0.35);
    background:rgba(168,85,247,0.07);font-size:13.5px;color:rgba(255,255,255,0.8);text-align:left;width:100%;max-width:440px;cursor:pointer;
    transition:border-color .15s,background .15s}
.fragebar:hover{border-color:#c084fc;background:rgba(168,85,247,0.13)}
.fragebar .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#c084fc;flex-shrink:0}
.fragebar .q{flex:1;min-width:0;font-style:italic}
.fragebar .ar{color:#c084fc;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:800;flex-shrink:0}

/* Modell-Band unter dem Hero — welche Gewichte geladen sind */
.modelband{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:13px var(--gx);background:var(--ink);
    border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,0.6)}
.modelband .p{color:var(--cyan);margin-right:6px}
.modelband span.m{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.82);white-space:nowrap}
.modelband span.m i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(30,167,101,0.6)}
.modelband span.m em{font-style:normal;color:var(--muted)}
.modelband .cur{display:inline-block;width:8px;height:15px;background:var(--cyan);vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@media (max-width:768px){.modelband{padding:12px 20px;gap:8px}}

/* Abschnitt „So antwortet Ihre KI": zwei Konsolen nebeneinander, dunkles Band */
.kibeispiele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:48px var(--gx) 48px}
.kibeispiele .kichat{box-shadow:none;height:auto}
@media (max-width:1024px){.kibeispiele{grid-template-columns:1fr;padding:36px 40px 40px}}
@media (max-width:768px){.kibeispiele{padding:28px 20px 32px}}

/* Token-Strom in der Inference-Konsole (On-Premise) */
.tokstrom{font-family:var(--mono);font-size:12px;line-height:1.7;color:rgba(255,255,255,0.78);padding:12px 18px;
    border-top:1px solid rgba(255,255,255,0.08);background:rgba(0,177,235,0.04);overflow:hidden}
.tokstrom .k{color:#6cc4e6}.tokstrom .v{color:#c084fc}.tokstrom .ok{color:var(--green)}
/* Modell-Band liegt im Hero ueber der Abdunklung, sonst ist es kaum lesbar */
.hero .modelband{position:relative;z-index:2}
/* Quellenzeile: Pfeil und Dateiname in einer Zeile, Umbruch nur im Namen */
.kichat .src{display:flex;gap:6px;align-items:baseline}
.kichat .src::before{content:'↳';color:var(--muted);flex-shrink:0}

/* ---------- KI-Touch (09.10.2026): Netz, Verlaufsschrift, Stroemen ---------- */
.hero .neural{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.6;pointer-events:none;
    mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.85) 55%,#000 100%);
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.85) 55%,#000 100%)}
.hero.ki .hgrid,.hero.ki .term,.hero .modelband{position:relative;z-index:2}
/* Kursivteil der Ueberschrift als Verlauf Cyan -> Violett */
.hero.ki .lead h1 i{background:linear-gradient(92deg,#6cc4e6 0%,#c084fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.hero.ki .lead h1 i{color:#c084fc}}
/* Konsole: leiser Lichtsaum, der atmet */
.kichat{box-shadow:0 16px 44px rgba(40,10,70,0.45),0 0 0 1px rgba(168,85,247,0.12),0 0 32px rgba(168,85,247,0.14);animation:kiatem 6s ease-in-out infinite}
@keyframes kiatem{50%{box-shadow:0 16px 44px rgba(40,10,70,0.45),0 0 0 1px rgba(0,177,235,0.16),0 0 38px rgba(0,177,235,0.16)}}
.kichat .kh .t::before{content:'';display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;vertical-align:1px;
    background:radial-gradient(circle,#c084fc,#7c3aed);box-shadow:0 0 10px rgba(168,85,247,.8);animation:kipuls 2s ease-in-out infinite}
@keyframes kipuls{50%{box-shadow:0 0 2px rgba(168,85,247,.4)}}
.kichat .caret{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:#c084fc;animation:blink .9s steps(1) infinite}
.kichat .kb{min-height:150px}
/* Chips im Modell-Band tragen ein violettes Lebenszeichen */
.modelband span.m{border-color:rgba(168,85,247,0.3)}
.modelband span.m i{background:#c084fc;box-shadow:0 0 7px rgba(192,132,252,.8)}
/* Symbolflaechen in den Zellen: Cyan -> Violett statt flachem Blau */
.icb{background:linear-gradient(135deg,rgba(0,177,235,0.14),rgba(168,85,247,0.16));border-color:rgba(168,85,247,0.32)}
/* Kernaussagen-Kasten und Kundenblock mit KI-Marke */
.kern{border-left:2px solid transparent;border-image:linear-gradient(180deg,var(--cyan),#a855f7) 1}
.kern .t::before,.kblock .kbk .num::before{content:'KI';display:inline-block;margin-right:10px;padding:2px 6px;font-size:10px;letter-spacing:1px;
    color:#fff;background:linear-gradient(92deg,#00B1EB,#a855f7)}
/* Beispielfragen-Leiste mit wanderndem Lichtstreifen */
.fragebar{position:relative;overflow:hidden}
.fragebar::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-45%;background:linear-gradient(90deg,transparent,rgba(192,132,252,.14),transparent);animation:kistreif 5s ease-in-out infinite}
@keyframes kistreif{60%,100%{left:110%}}
@media (prefers-reduced-motion:reduce){
    .kichat,.kichat .kh .t::before,.kichat .caret,.fragebar::after{animation:none}
    .hero .neural{display:none}
}

/* Codeblock im Artikel: die Regel oben setzt helle Schriftvariablen, liess den
   Grund aber hell (--panel) — weiss auf weiss (Fund Glossar-Agent 09.10.2026). */
.artbody pre{background:#0d1319;border-color:rgba(255,255,255,.12)}

/* ---------- Nachgezogen aus den Rollout-Berichten (09.10.2026) ---------- */
.glossary-link{color:inherit;border-bottom:1px dotted rgba(0,177,235,0.55);text-decoration:none}
.glossary-link:hover{color:var(--acc);border-bottom-color:var(--acc)}
.kibeispiele>.kichat{min-width:0}
/* Verweise im Fliesstext der Bausteine sind sonst von Text nicht zu unterscheiden */
.sintro a:not(.glossary-link),.cell p a:not(.glossary-link),.benote a:not(.glossary-link),
.pkette p a:not(.glossary-link),.faq-list .a a:not(.glossary-link),.vs-table td a:not(.glossary-link)
{color:var(--acc);border-bottom:1px solid rgba(0,177,235,.35)}
a.cell{display:flex;flex-direction:column}
a.cell .go{margin-top:auto;padding-top:18px;font-family:'Host Grotesk','Host Grotesk Fallback';font-weight:700;font-size:15px;color:var(--acc)}
a.cell:hover h3{color:var(--acc)}
/* Konsole auch in hellen Abschnitten: der Kasten ist immer dunkel, die Schrift
   darf nicht die Abschnittsfarbe erben (Fund Agent 2a). */
.kichat,.kichat .kh .t{--txt:rgba(255,255,255,0.9);--grey:rgba(255,255,255,0.62);--muted:rgba(255,255,255,0.5);color:var(--txt)}
.kichat .ki-in{flex-wrap:wrap}

/* Hero-Tafel auf dem Telefon: das Desktop-Polster (44/64/48 px, !important oben) liess den Hero-Visuals bei 390 px nur
   278 px — jetzt volle Spaltenbreite minus 20 px Rand (10.10.2026, Rueckholung der Hero-Visuals). */
@media (max-width:768px){.boardwrap{padding:28px 20px 32px !important}}