:root{
  --blau:#0091F4;
  --blau-tief:#0079CC;
  --blau-hell:#4DB3F8;
  --dunkel:#1A1A1A;
  --grau:#444444;
  --grau-hell:#999999;
  --tint:#E4F3FD;
  --linie:#E6E6E6;
  --stark:#1F9D55;
  --schwach:#E8A33D;
  --kritisch:#D64545;
  --bar:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif;
  color:var(--dunkel);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
section{padding:92px 0;position:relative;overflow:hidden}
section.tint{background:var(--tint)}
section.blau{background:var(--blau);color:#fff}

h1,h2,h3{line-height:1.15;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}
h3{font-size:1.1rem;margin-bottom:8px}
p{max-width:66ch}
.lead{font-size:1.15rem;color:var(--grau);max-width:58ch}
.blau .lead{color:rgba(255,255,255,.88)}

/* Kicker mit Ring-Trenner – Motiv von der Visitenkarte */
.kicker{
  display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blau);font-weight:700;margin-bottom:16px;
}
.kicker .ring{
  display:inline-block;width:6px;height:6px;border:1.5px solid currentColor;
  border-radius:50%;vertical-align:middle;margin:0 9px 2px;
}
.blau .kicker{color:#fff}

/* Blaue Leiste vor Überschriften – Motiv von der Visitenkarte */
.mark{padding-left:22px;position:relative}
.mark::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;
  background:var(--blau);border-radius:1px;
}
.blau .mark::before{background:#fff}
.head{margin-bottom:46px}
.head h2{margin-bottom:14px}

/* Netzwerk-Motiv – CI aus Folien- und Angebotsvorlage */
.netz{position:absolute;pointer-events:none;z-index:0}
.hero .wrap,.check{position:relative;z-index:1}

/* Buttons */
.btn{
  display:inline-block;padding:15px 30px;border-radius:3px;
  font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:.15s;font-family:inherit;
}
.btn-primary{background:var(--blau);color:#fff}
.btn-primary:hover{background:var(--blau-tief)}
.btn-ghost{border-color:var(--linie);color:var(--dunkel);background:#fff}
.btn-ghost:hover{border-color:var(--blau);color:var(--blau)}
.blau .btn-primary{background:#fff;color:var(--blau)}
.blau .btn-primary:hover{background:var(--tint)}

/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);z-index:60}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:100px}
header img{height:52px;display:block}
nav{display:flex;gap:26px;align-items:center}
nav a{color:var(--grau);text-decoration:none;font-size:.88rem;font-weight:700}
@media(max-width:900px){header .wrap{height:82px}header img{height:42px}}
nav a:hover{color:var(--blau)}
@media(max-width:900px){nav a:not(.btn){display:none}}

/* Hero mit blauer Leiste links – Visitenkarten-Motiv */
.hero{padding:100px 0 84px}
.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--bar);background:var(--blau)}
.hero h1{max-width:16ch;margin-bottom:22px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 58px}
.kreis{position:absolute;border-radius:50%;background:var(--tint);pointer-events:none}

.dims{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
.dims div{background:#fff;padding:22px 20px;border:1px solid var(--linie);border-top:4px solid var(--blau);position:relative;transition:.15s}
.dims div:hover{box-shadow:0 4px 18px rgba(0,145,244,.12)}
.dims .nr{font-size:.72rem;font-weight:700;color:var(--blau);letter-spacing:.1em}
.dims b{font-size:.98rem;display:block;margin-top:3px}
.dims small{display:block;color:var(--grau-hell);font-size:.79rem;margin-top:6px}
@media(max-width:760px){.dims{grid-template-columns:repeat(2,1fr)}}

/* Karten */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--linie);padding:26px;position:relative}
.card::before{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--blau);transition:height .25s}
.card:hover::before{height:100%}
.card p{color:var(--grau);font-size:.93rem}
.card .num{font-size:.72rem;font-weight:700;color:var(--blau);letter-spacing:.12em;display:block;margin-bottom:10px;text-transform:uppercase}
/* Akzentkarte: blauer Rahmen als Auszeichnung, Balken erst bei Hover (wie alle Karten) */
.card.akzent{border-color:var(--blau)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stats>div{border-left:4px solid var(--blau);padding-left:18px}
.stats b{display:block;font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.stats span{font-size:.86rem;color:var(--grau)}
.blau .stats span{color:rgba(255,255,255,.85)}
.blau .stats>div{border-color:#fff}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Self-Check */
.check{max-width:840px;margin:0 auto;background:#fff;border:1px solid var(--linie);padding:44px;position:relative}
.check::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--blau)}
@media(max-width:620px){.check{padding:28px 22px}}
.bar{height:3px;background:var(--linie);margin-bottom:30px}
.bar i{display:block;height:100%;background:var(--blau);width:0;transition:width .3s}
.qmeta{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);font-weight:700;margin-bottom:12px}
.qtext{font-size:1.26rem;font-weight:700;line-height:1.35;margin-bottom:28px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.scale button{padding:19px 6px;border:2px solid var(--linie);background:#fff;cursor:pointer;font-size:1.05rem;font-weight:700;font-family:inherit;color:var(--dunkel);transition:.12s}
.scale button:hover{border-color:var(--blau);color:var(--blau)}
.scale-lbl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--grau-hell)}
.backlink{margin-top:22px;font-size:.86rem;color:var(--grau-hell);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;font-weight:700}
.backlink:hover{color:var(--blau)}

.res-top{display:grid;grid-template-columns:290px 1fr;gap:42px;align-items:center}
@media(max-width:760px){.res-top{grid-template-columns:1fr}}
.res-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--linie)}
.res-row .nm{flex:1;font-weight:700;font-size:.93rem}
.res-row .sc{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem}
.tag{font-size:.7rem;font-weight:700;padding:4px 10px;color:#fff;letter-spacing:.05em;white-space:nowrap}
.t-stark{background:var(--stark)}.t-solide{background:var(--blau)}
.t-schwach{background:var(--schwach)}.t-kritisch{background:var(--kritisch)}
.hint{background:var(--tint);border-left:5px solid var(--blau);padding:18px 22px;margin-top:28px;font-size:.92rem}

.form{margin-top:32px;padding-top:28px;border-top:1px solid var(--linie)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media(max-width:600px){.fields{grid-template-columns:1fr}}
.form input[type=text],.form input[type=email]{width:100%;padding:13px 14px;border:2px solid var(--linie);font-size:.94rem;font-family:inherit;color:var(--dunkel)}
.form input:focus{outline:0;border-color:var(--blau)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.81rem;color:var(--grau);margin-bottom:18px}
.consent input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--blau)}

/* Timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr)}
.tl>div{border-top:4px solid var(--blau);padding:24px 22px 0 0}
.tl .wk{font-size:.73rem;font-weight:700;color:var(--blau);letter-spacing:.12em;text-transform:uppercase}
.tl h3{margin:8px 0 10px}
.tl ul{list-style:none;font-size:.89rem;color:var(--grau)}
.tl li{padding-left:15px;position:relative;margin-bottom:5px}
.tl li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--blau)}
@media(max-width:820px){.tl{grid-template-columns:1fr;gap:8px}}

/* Personen */
.person{display:grid;grid-template-columns:168px 1fr;gap:26px;align-items:start}
@media(max-width:560px){.person{grid-template-columns:1fr}}
.avatar{width:168px;height:168px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--blau);font-size:2.1rem;font-weight:700;overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--blau)}
@media(max-width:560px){.avatar{width:150px;height:150px}}
.person .role{color:var(--blau);font-size:.83rem;font-weight:700;margin-bottom:12px;letter-spacing:.09em;text-transform:uppercase}
.person p{font-size:.92rem;color:var(--grau);margin-bottom:11px}
.quote{border-left:5px solid var(--blau);padding-left:15px;font-style:italic;color:var(--dunkel);font-size:.93rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips span{background:var(--tint);color:var(--blau);font-size:.75rem;font-weight:700;padding:5px 11px}

/* Preis */
.price{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.price{grid-template-columns:1fr}}
.price .box{border:1px solid var(--linie);padding:32px;background:#fff}
.price .box.hl{border:2px solid var(--blau);position:relative}
.price .badge{position:absolute;top:-13px;left:30px;background:var(--blau);color:#fff;font-size:.7rem;font-weight:700;padding:5px 12px;letter-spacing:.09em;text-transform:uppercase}
.price .amt{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;margin:10px 0 4px}
.price .amt small{font-size:.9rem;font-weight:400;color:var(--grau-hell)}
.strike{text-decoration:line-through;color:var(--grau-hell);font-size:1.1rem;font-weight:400}
.price ul{list-style:none;margin-top:18px;font-size:.9rem;color:var(--grau)}
.price li{padding-left:19px;position:relative;margin-bottom:6px}
.price li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blau)}
table{width:100%;border-collapse:collapse;font-size:.91rem}
th,td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--linie)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grau-hell);font-weight:700}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* CTA blau – Rückseite der Visitenkarte */
.cta-blau{text-align:center}
.cta-blau img{height:86px;margin-bottom:32px}
.cta-blau .kreis{background:rgba(255,255,255,.09)}

footer{background:var(--dunkel);color:#fff;padding:60px 0 30px;font-size:.89rem}
footer img{height:52px;margin-bottom:18px}
footer a{color:var(--blau-hell);text-decoration:none}
footer a:hover{text-decoration:underline}
footer h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:#8A8A8A;margin-bottom:13px;font-weight:700}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:40px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr;gap:30px}}
footer ul{list-style:none;line-height:1.95}
.fbot{border-top:1px solid #303030;padding-top:20px;color:#8A8A8A;font-size:.81rem}
footer a.offen{color:#8A8A8A;border-bottom:1px dotted #6A6A6A;cursor:help}
footer a.offen::after{content:" ○";font-size:.7em;color:#E8A33D}
footer a.offen:hover{text-decoration:none;color:#B0B0B0}

.note{background:#FFF6E5;border-bottom:1px solid #F0D9A8;color:#7A5A18;padding:10px 16px;font-size:.83rem;text-align:center}
.todo{background:#FFF6E5;border:1px dashed #E0BC72;color:#7A5A18;padding:9px 13px;font-size:.8rem;margin-top:12px}
.hide{display:none}

/* ---------- Ergänzungen Mehrseiten-Dummy ---------- */
.subhero{padding:74px 0 54px;position:relative;overflow:hidden}
.subhero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--bar);background:var(--blau)}
.subhero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch;margin-bottom:18px}
.krumen{font-size:.83rem;color:var(--grau-hell);margin-bottom:18px}
.krumen a{color:var(--grau-hell);text-decoration:none}
.krumen a:hover{color:var(--blau)}
.rechtstext{max-width:76ch}
.rechtstext h2{font-size:1.35rem;margin:38px 0 12px}
.rechtstext h3{font-size:1.05rem;margin:24px 0 8px}
.rechtstext p,.rechtstext li{font-size:.94rem;color:var(--grau);margin-bottom:11px}
.rechtstext ul{margin-left:20px}
.rechtstext strong{color:var(--dunkel)}
.rechtstext table{margin:14px 0 22px}
.leistung{border-left:5px solid var(--blau);padding:4px 0 4px 22px;margin-bottom:34px;scroll-margin-top:120px}
.leistung h3{font-size:1.2rem;margin-bottom:8px}
.leistung p{font-size:.94rem;color:var(--grau);max-width:66ch}
.kontaktgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media(max-width:820px){.kontaktgrid{grid-template-columns:1fr}}
.kbox{border:1px solid var(--linie);padding:30px;position:relative}
.kbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blau)}
.kbox dl{margin-top:6px}
.kbox dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:var(--grau-hell);font-weight:700;margin-top:18px}
.kbox dd{font-size:.98rem;margin-top:3px}
.kbox dd a{color:var(--blau);text-decoration:none}
.kbox dd a:hover{text-decoration:underline}
textarea{width:100%;padding:13px 14px;border:2px solid var(--linie);font-size:.94rem;font-family:inherit;color:var(--dunkel);min-height:130px;resize:vertical}
textarea:focus{outline:0;border-color:var(--blau)}
label.feld{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--grau);margin:16px 0 6px}

/* ---------- 360°-Rad (Umsetzungsseite) ---------- */
.radsection{background:linear-gradient(160deg,#F4FAFE 0%,#E4F3FD 100%)}
.radwrap{display:grid;grid-template-columns:minmax(0,470px) 1fr;gap:52px;align-items:center}
@media(max-width:860px){.radwrap{grid-template-columns:1fr;gap:32px}}
.rad{position:relative}
.rad svg{width:100%;height:auto;display:block;overflow:visible}

.rad .seg{
  cursor:pointer;fill:#fff;stroke:#CFE6F7;stroke-width:2.5;
  transform-box:view-box;transform-origin:220px 220px;
  transition:fill .3s, stroke .3s, transform .45s cubic-bezier(.34,1.5,.5,1), filter .3s;
}
.rad .seg:hover{fill:#EAF6FD;stroke:#9BD3F5}
.rad .seg.aktiv{
  fill:url(#segGrad);stroke:#0091F4;
  transform:translate(var(--tx),var(--ty));
  filter:drop-shadow(0 8px 20px rgba(0,145,244,.38));
}
@keyframes segIn{from{opacity:0}to{opacity:1}}
.rad .seg.enter{animation:segIn .5s both}

.rad .seglabel{
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;
  fill:var(--dunkel);pointer-events:none;transition:fill .3s, transform .45s cubic-bezier(.34,1.5,.5,1);
  transform-box:view-box;transform-origin:220px 220px;
}
.rad .seglabel.aktiv{fill:#fff;transform:translate(var(--tx),var(--ty))}

.rad .mitte-t1{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:16px;fill:#fff;pointer-events:none}
.rad .mitte-t2{font-family:Arial,Helvetica,sans-serif;font-size:11px;fill:#CDE9FB;pointer-events:none}
.rad .pulse{fill:none;stroke:#0091F4;stroke-width:2;transform-box:view-box;transform-origin:220px 220px;animation:radpulse 3s ease-out infinite}
@keyframes radpulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.rad .hintdot{fill:#0091F4}

.raddetail{min-height:300px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.raddetail .anim{animation:fadeUp .4s both}
.raddetail .dim{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);font-weight:700}
.raddetail h3{font-size:1.5rem;margin:6px 0 8px}
.raddetail .einl{color:var(--grau);font-size:.98rem;margin-bottom:22px;max-width:52ch}
.vfeld{border-left:5px solid var(--blau);padding:3px 0 3px 18px;margin-bottom:16px;transition:.2s}
.vfeld:hover{padding-left:22px}
.vfeld b{display:block;font-size:1.05rem;margin-bottom:3px}
.vfeld span{color:var(--grau);font-size:.93rem}
.radhint{margin-top:22px;background:#fff;border-left:5px solid var(--blau);padding:14px 18px;font-size:.9rem;color:var(--dunkel);box-shadow:0 4px 16px rgba(0,145,244,.08)}
.radintro{color:var(--grau);font-size:1rem;max-width:50ch;line-height:1.7}
.radintro strong{color:var(--dunkel)}
.radhow{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:.85rem;font-weight:700;color:var(--blau)}
.radhow svg{width:20px;height:20px}

/* ---------- Breite Karte: KI-Haltung + Markenerklärung ---------- */
.breitkarte{background:#fff;border:1px solid var(--linie);padding:30px;position:relative;margin-top:20px}
.breitkarte::before{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--blau);transition:height .25s}
.breitkarte:hover::before{height:100%}
/* Markenkarte: farblich abgesetzt, daher ohne Balken */
.markenkarte::before{display:none}
.kigrid{display:grid;grid-template-columns:210px 1fr;gap:32px;align-items:center}
@media(max-width:760px){.kigrid{grid-template-columns:1fr;gap:22px}.kibild{max-width:220px}}
.kibild svg{width:100%;height:auto;display:block}
.breitkarte h3{font-size:1.18rem;margin-bottom:10px}
.breitkarte p{color:var(--grau);font-size:.95rem;max-width:62ch}
.breitkarte p+p{margin-top:11px}
.markenkarte{background:var(--tint);border-color:#CFE6F7}

.rad .segicon{transition:transform .45s cubic-bezier(.34,1.5,.5,1);transform-box:view-box;transform-origin:220px 220px;pointer-events:none}
.rad .segicon.aktiv{transform:translate(var(--tx),var(--ty))}
/* Piktogramme zweifarbig wie das Netzmotiv: graue Knoten, blauer Bullseye-Akzent */
.rad .segicon circle{fill:#A9BFCB;transition:fill .3s,stroke .3s}
.rad .segicon line,.rad .segicon polyline{stroke:#A9BFCB;stroke-width:1.7;fill:none;transition:stroke .3s;stroke-linecap:round;stroke-linejoin:miter}
.rad .segicon .be{fill:var(--blau)}
.rad .segicon .be-r{fill:none;stroke:var(--blau);stroke-width:1.7}
/* aktiv (blaues Segment): Grundton gedämpft weiß, Akzent voll weiß */
.rad .segicon.aktiv circle{fill:rgba(255,255,255,.55)}
.rad .segicon.aktiv line,.rad .segicon.aktiv polyline{stroke:rgba(255,255,255,.55)}
.rad .segicon.aktiv .be{fill:#fff}
.rad .segicon.aktiv .be-r{stroke:#fff}

/* ---------- Projektbeispiele ---------- */
.projekt{background:#fff;border:1px solid var(--linie);padding:32px;position:relative;margin-bottom:22px}
.projekt::before{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--blau);transition:height .25s}
.projekt:hover::before{height:100%}
.projekt .feld{font-size:.72rem;font-weight:700;color:var(--blau);letter-spacing:.12em;text-transform:uppercase}
.projekt h3{font-size:1.35rem;margin:6px 0 6px}
.projekt .meta{font-size:.85rem;color:var(--grau-hell);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--linie)}
.pblock{margin-bottom:16px}
.pblock:last-child{margin-bottom:0}
.pblock b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau-hell);margin-bottom:4px;font-weight:700}
.pblock p{font-size:.95rem;color:var(--grau);max-width:70ch}
.pblock.wirkung{background:var(--tint);padding:16px 20px;border-left:4px solid var(--blau);margin-top:20px}
.pblock.wirkung b{color:var(--blau)}
.pblock.wirkung p{color:var(--dunkel)}


/* ==========================================================================
   MOBIL-ERGÄNZUNGEN (27.08.2026)
   Rein additiv. Es wird KEINE bestehende Regel oberhalb dieser Linie geändert.
   Behebt zwei Befunde der externen Gegenprüfung:
   a) unter 900 px war die Navigation komplett unsichtbar (nur der CTA blieb)
   b) das Netz-Motiv legte sich auf schmalen Viewports über die volle Breite
   ========================================================================== */

/* a) Navigation: statt Ausblenden auf eine umbrechende, kompakte Zeile */
@media(max-width:900px){
  header .wrap{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:12px;row-gap:12px}
  nav{flex-wrap:wrap;gap:12px 18px;width:100%;order:3;align-items:center}
  nav a:not(.btn){display:inline-block;font-size:.82rem}
  /* CTA bleibt oben rechts neben dem Logo, die Links brechen darunter um */
  nav a.btn{position:absolute;right:32px;top:16px;padding:9px 16px !important;font-size:.82rem}
  header .wrap{position:relative}
}
@media(max-width:560px){
  header img{height:36px}
  nav{gap:10px 14px}
  nav a:not(.btn){font-size:.78rem}
}

/* b) Netz-Motiv: auf schmalen Viewports zurücknehmen, dann ganz ausblenden.
      Dekoration darf den Text nie überlagern. */
@media(max-width:1100px){
  .netz{opacity:.5;transform:scale(.8);transform-origin:top right}
}
@media(max-width:860px){
  .netz{display:none}
}

/* c) Fließtext-Breiten: die 66%-Vorgaben aus dem Subhero gelten nur im
      zweispaltigen Layout. Ohne Netz-Grafik wird die volle Breite genutzt. */
@media(max-width:860px){
  .subhero h1[style],.subhero .lead[style]{max-width:none !important}
}

/* ===========================================================
   DRUCK-ERGÄNZUNGEN (13.09.2026)
   Rein additiv. Steuert ausschliesslich die Druckansicht des
   Self-Check-Ergebnisses. Keine Regel oberhalb wird geaendert.
   Zweite Ausnahme von der Regel "stil.css ist die einzige
   Stilquelle, Abweichungen inline" – nach den Mobil-Ergaenzungen.
   =========================================================== */

.nur-druck{display:none}

@media print{
  @page{margin:14mm}

  /* Farbflächen mitdrucken, sonst geht das Netzdiagramm verloren */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  body{background:#fff !important;margin:0;font-size:11pt}

  /* Nur die Self-Check-Section drucken, alles andere raus.
     Bewusst ueber display statt visibility, damit das Ergebnis
     im normalen Fluss auf Seite 1 landet. */
  body > *{display:none !important}
  body > section#selfcheck{display:block !important;padding:0 !important;margin:0 !important;background:#fff !important}
  #selfcheck .wrap{padding:0 !important;max-width:none !important}
  #selfcheck > .netz,#selfcheck .head,#stage-q{display:none !important}
  /* .check ist mit max-width:840px breiter als der Satzspiegel einer
     A4-Seite und wuerde zentriert links und rechts herauslaufen */
  #selfcheck .check{max-width:none !important;width:auto !important;margin:0 !important;
    padding:0 !important;border:0 !important;box-shadow:none !important;background:#fff !important}
  #selfcheck .check::before{display:none !important}

  /* Interaktives raus, Druckelemente rein */
  .nicht-druck{display:none !important}
  .nur-druck{display:block !important}

  /* Kopfzeile */
  /* Titel linksbuendig, Logo rechtsbuendig */
  #druckkopf{display:flex !important;align-items:center;justify-content:space-between;gap:20px;
    border-bottom:2px solid #E6E6E6;padding-bottom:14px;margin-bottom:26px}
  #druckkopf img{height:46px;width:auto;flex:none}
  #druckkopf strong{font-size:11.5pt}
  #druckkopf span{font-size:9pt;color:#666}

  /* Ergebnisbereich */
  #stage-r .res-top{display:grid !important;grid-template-columns:38% 1fr;gap:20px;align-items:center;max-width:100%}
  #stage-r #radar{max-width:72mm}
  #stage-r .hint{margin-top:20px;font-size:10pt;line-height:1.55}

  /* Fusszeile */
  #druckfuss{margin-top:28px;padding-top:12px;border-top:1px solid #E6E6E6}
  #druckfuss .pd-hinweis{font-size:9pt;color:#444;max-width:none !important;margin-bottom:10px}
  #druckfuss .pd-kontakt{font-size:8.5pt;color:var(--blau) !important;max-width:none !important}

  /* Keine Seitenumbrüche mitten im Ergebnis */
  #stage-r .res-top,#stage-r .hint,#druckfuss{break-inside:avoid;page-break-inside:avoid}
}