/* ===============================================================
   PLT-01 POC — LOKALE SCHRIFTEN
   Ersetzt die drei Google-Fonts-Verweise des CURRENT-Prototyps.
   Quelle: IBM Plex 3.005 (Sans) / 2.005 (Mono), SIL Open Font License 1.1,
   bereits im Projektcontainer vorhanden; lokal von TTF nach WOFF2 konvertiert.
   KEIN Abruf aus dem Internet in diesem Lauf.
   =============================================================== */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/IBMPlexSans-Light.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexSans-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexSans-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/IBMPlexSans-Bold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2')}

/* ===============================================================
   GLOBALER BESTAND — aus dem CURRENT-Prototyp /einsatzgebiete/ extrahiert.
   Enthaelt ausschliesslich Bloecke, die in mindestens sechs weiteren
   CURRENT-Prototypen zeichengleich vorkommen, zuzueglich der .inl-Gruppe
   (TEC-06-Nachweis). Reihenfolge unveraendert.
   =============================================================== */

:root{
  --red:#C11424; --gold:#C1A460; --ink:#181716; --white:#fff;
  --n900:#262421; --n800:#3A3733; --n700:#514C46; --n600:#6B655D; --n500:#8A837A;
  --n400:#ABA49B; --n300:#CBC5BD; --n200:#E4E0DA; --n150:#EDEAE5; --n100:#F4F2EF; --n50:#FAF9F7;
  --err:#9A1C1C; --ok:#17624A; --warn:#7A4F00;
  --wrap:1240px; --narrow:760px; --gut:24px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --r-s:2px; --r-m:4px; --r-l:6px;
  --mk-frame:var(--red); --mk-v:var(--gold);
  /* HARDENING N2: Fokusfarbe je Untergrund – hell: Markenrot, dunkel: Gold (Zuweisung am Dateiende) */
  --focus:var(--red);
  --tilt:-6.87deg;
}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--n100);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.15;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
/* Bilder, die eine Bildbox fuellen sollen, tun das nur in dieser Box.
   Zuvor galt width/height:100% + object-fit:cover global fuer jedes
   <img>; das haette jedes kuenftige Inhaltsbild auf die Hoehe seines
   Containers gezerrt und beschnitten. */
.ph>picture,.im>picture,.imgbox>picture{display:block;width:100%;height:100%}
/* <picture> steht als Wrapper zwischen Box und Bild: ohne die zweite
   Selektorgruppe greift object-fit nicht und Hochformate laufen unten
   aus dem Rahmen statt mittig beschnitten zu werden. */
.ph>img,.im>img,.imgbox>img,
.ph>picture>img,.im>picture>img,.imgbox>picture>img{width:100%;height:100%;object-fit:cover}
/* ---------- Marke ---------- */
.mk{width:1em;height:1em;flex:0 0 auto}
.wm{height:.62em;width:auto}
.logo{display:inline-flex;align-items:center;gap:.42em;font-size:34px}
.logo .wm path{fill:var(--gold)}
.water{position:absolute;pointer-events:none;opacity:.055;fill:currentColor}
/* ---------- Typo-Skala ---------- */
.lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4}
.display{font-size:clamp(38px,5.6vw,68px);font-weight:600;letter-spacing:-.028em;line-height:1.06}
.h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.022em}
.h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.018em}
.h3{font-size:21px}
.h4{font-size:17px;font-weight:600}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--n700)}
.sm{font-size:14px;line-height:1.55}
.xs{font-size:12.5px;line-height:1.5}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:500}
.muted{color:var(--n600)}
.maxtext{max-width:62ch}
/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:var(--narrow)}
section{position:relative}
.pad{padding:var(--s9) 0}
.pad-s{padding:var(--s8) 0}
.dark{background:var(--ink);color:var(--white)}
.dark .lead,.dark .muted{color:var(--n300)}
.surface{background:#fff}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:var(--r-m);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .16s,border-color .16s,color .16s;min-height:48px}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#A81020}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--n500)}
.btn-secondary:hover{border-color:var(--ink);background:var(--n50)}
.dark .btn-secondary{color:#fff;border-color:var(--n600)}
.dark .btn-secondary:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-onred-dark{background:var(--red);color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.22)}
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--red);
  text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:1px}
.tlink:hover{border-bottom-color:var(--red)}
.dark .tlink{color:var(--gold)}
.dark .tlink:hover{border-bottom-color:var(--gold)}
.btn:focus-visible,.tlink:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(24,23,22,.28)}
/* ---------- Header ---------- */
.hdr{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #2c2926}
.hdr .in{display:flex;align-items:center;gap:var(--s6);height:80px}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-size:14.5px;font-weight:500;color:var(--n300);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.hdr .tel{font-size:14.5px;color:var(--n300);text-decoration:none;font-weight:500}
.hdr .tel:hover{color:var(--gold)}
/* ---------- Hero ---------- */
.hero{background:var(--ink);color:#fff;overflow:hidden;position:relative;padding:var(--s9) 0 calc(var(--s8) + 40px)}
.hero .water{right:-6%;top:-14%;width:78%;height:150%;color:#fff;opacity:.045}
.hero .in{position:relative;z-index:2;max-width:820px}
.hero h1{margin:0 0 var(--s5)}
.hero .kick{display:block;font-size:clamp(15px,1.5vw,17px);font-weight:500;color:var(--gold);
  letter-spacing:.04em;line-height:1.45;max-width:46ch;margin-bottom:var(--s4)}
.hero .claim{display:block;font-size:clamp(38px,5.6vw,68px);font-weight:600;
  letter-spacing:-.028em;line-height:1.06}
.hero .display{margin-bottom:var(--s5)}
.hero .sub{font-size:clamp(19px,2.1vw,26px);font-weight:300;color:var(--n300);line-height:1.4;
  max-width:20ch;margin-bottom:var(--s7)}
.hero .acts{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.diag{position:absolute;left:0;right:0;bottom:-1px;height:70px;background:var(--n100);
  clip-path:polygon(0 100%,100% 100%,100% 0,0 44%)}
/* ---------- Saeulen ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.pillar{background:#fff;border:1px solid var(--n200);display:flex;flex-direction:column}
.pillar .ph{aspect-ratio:4/3;overflow:hidden;position:relative}
.pillar .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,23,22,0) 55%,rgba(24,23,22,.34) 100%)}
.pillar .bd{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);flex:1}
.pillar .lbl{color:var(--red)}
.pillar ul{margin:0;padding-left:18px;color:var(--n700);font-size:14.5px;line-height:1.75}
.pillar .foot{margin-top:auto;padding-top:var(--s4)}
/* ---------- Leistungen ---------- */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--n200);border:1px solid var(--n200)}
.svc{background:#fff;padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:10px;
  text-decoration:none;transition:background .16s}
.svc:hover{background:var(--n50)}
.svc .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--n400)}
.svc h4{font-size:17px}
.svc p{font-size:13.5px;color:var(--n600);line-height:1.5}
.svc .go{margin-top:auto;color:var(--red);font-size:13.5px;font-weight:600}
/* ---------- Projekte ---------- */
.projs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.proj{background:#fff;border:1px solid var(--n200);display:flex;flex-direction:column}
.proj .ph{aspect-ratio:3/2;overflow:hidden;background:var(--n150);position:relative}
.proj .bd{padding:var(--s5);display:flex;flex-direction:column;gap:10px;flex:1}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;align-self:flex-start}
.b-now{background:#EAF2EE;color:var(--ok)}
.b-hist{background:var(--n150);color:var(--n700)}
.b-anon{background:#FAF3E4;color:#6E5417}
.proj .meta{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:12.5px;color:var(--n600);
  border-top:1px solid var(--n200);padding-top:12px;margin-top:auto}
.proj .meta b{display:block;color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500}
.noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:var(--n150);color:var(--n500);font-size:12.5px;text-align:center;padding:var(--s4)}
.noimg .mk{font-size:44px;opacity:.32;--mk-frame:var(--n500);--mk-v:var(--n500)}
.brandtile{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.brandtile .mk{position:absolute;font-size:210px;right:-58px;bottom:-62px;
  --mk-frame:var(--gold);--mk-v:var(--gold);opacity:.16}
.facts{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.facts li{font-size:14px;color:var(--n700);position:relative;padding-left:14px}
.facts li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--red)}
/* ---------- Before / After ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ba figure{margin:0}
.ba .ph{aspect-ratio:4/3;overflow:hidden;position:relative;border:1px solid var(--n200)}
.ba figcaption{display:flex;align-items:center;gap:8px;padding-top:10px;font-size:13px;font-weight:600}
.ba .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.d-vor{background:var(--n500)}
.d-nach{background:var(--ok)}
/* ---------- Technik ---------- */
.tech{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.chain{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--n800);margin-top:var(--s5)}
.step{padding:0 0 var(--s5) var(--s5);position:relative}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;background:var(--gold);
  transform:rotate(var(--tilt))}
.step .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:4px}
.step .v{font-size:16px;color:var(--n300);line-height:1.5}
.step .v b{color:#fff;font-weight:600}
.tech .ph{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--n800)}
/* ---------- Trust ---------- */
.trust{display:flex;gap:var(--s7);align-items:center;background:#fff;border:1px solid var(--n200);
  padding:var(--s7)}
.trust .port{width:180px;height:180px;flex:0 0 auto;position:relative;overflow:hidden;background:var(--n150)}
/* ---------- Formular-Anriss ---------- */
.form{background:#fff;border:1px solid var(--n200);padding:var(--s7)}
.steps{display:flex;gap:var(--s3);margin-bottom:var(--s6);flex-wrap:wrap}
.st{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--n500)}
.st .b{width:26px;height:26px;border:1.5px solid var(--n300);display:grid;place-items:center;
  font-size:12.5px;border-radius:50%}
.st.on{color:var(--ink)}
.st.on .b{background:var(--ink);border-color:var(--ink);color:#fff}
.st .opt{font-size:11.5px;color:var(--n500);font-weight:400}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.f label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.f .req{color:var(--red)}
.inp{width:100%;padding:13px 14px;border:1.5px solid var(--n500);border-radius:var(--r-m);
  font:inherit;font-size:15px;background:#fff;min-height:48px}
.inp:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{padding:11px 16px;border:1.5px solid var(--n300);border-radius:var(--r-m);font-size:14px;
  background:#fff;cursor:pointer;min-height:44px;display:flex;align-items:center}
.chip.sel{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600}
.hint{font-size:12.5px;color:var(--n600);margin-top:6px}
/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--n300);position:relative;overflow:hidden;padding:var(--s9) 0 var(--s6)}
.ftr .water{right:-4%;bottom:-42%;width:52%;height:150%;color:#fff;opacity:.04}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s7);position:relative;z-index:2}
.ftr h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4)}
.ftr li{list-style:none;margin-bottom:9px;font-size:14px}
.ftr ul{margin:0;padding:0}
.ftr a{text-decoration:none}
.ftr a:hover{color:#fff}
.ftr .bot{border-top:1px solid #2f2c29;margin-top:var(--s8);padding-top:var(--s5);display:flex;gap:var(--s5);
  flex-wrap:wrap;font-size:13px;position:relative;z-index:2}
/* ---------- Doku-Rahmen ---------- */
.doc{background:#fff;border-bottom:4px solid var(--red)}
.doc .in{padding:var(--s7) 0}
.note{background:#fff;border:1px solid var(--n200);border-left:3px solid var(--gold);padding:var(--s5);
  font-size:14px;line-height:1.6;margin:var(--s5) 0}
.note b{display:block;margin-bottom:5px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s3)}
.sw{border:1px solid var(--n200);background:#fff}
.sw .c{height:64px}
.sw .t{padding:9px 11px;font-size:11.5px;line-height:1.45}
.sw .t code{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--n600)}
.spec{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.spec th,.spec td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--n200);vertical-align:top}
.spec th{background:var(--n50);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--n700)}
.spec td:first-child{font-weight:600;white-space:nowrap}
.phone{width:390px;border:10px solid var(--ink);border-radius:34px;overflow:hidden;background:#fff;
  flex:0 0 auto;box-shadow:0 20px 50px rgba(24,23,22,.18)}
.phone .scr{height:760px;overflow-y:auto;font-size:15px}
.mrow{display:flex;gap:var(--s7);align-items:flex-start;flex-wrap:wrap}
.bar{position:sticky;bottom:0;display:flex;gap:9px;padding:9px;background:rgba(255,255,255,.97);
  border-top:1px solid var(--n200);backdrop-filter:blur(8px)}
.bar .btn{flex:1;justify-content:center;padding:13px 10px;font-size:14.5px;min-height:46px}
.burger{margin-left:auto;display:flex;flex-direction:column;gap:4px}
.burger i{display:block;width:22px;height:2px;background:#fff}
@media(max-width:960px){
  .pillars,.tech,.ba{grid-template-columns:1fr}
  .svcs{grid-template-columns:1fr 1fr}
  .projs{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .trust{flex-direction:column;text-align:left;align-items:flex-start}
  .nav,.hdr .tel{display:none}
  .pad{padding:var(--s8) 0}
}
.wm,.wm path{fill:var(--gold)}
.logo .wm{height:.33em;width:auto}
.ftr .wm,.ftr .wm path{fill:var(--gold)}
.hero .water{opacity:.09;right:-4%;top:-12%;width:76%}
/* R18/4.2 §4 – Footer-Wasserzeichen: Rahmenkontur vollstaendig sichtbar.
   Zwei Ursachen des bisherigen Anschnitts, beide gemessen:
   1) preserveAspectRatio="xMidYMid slice" auf einer NICHT quadratischen Box (1440 px: 749x887,
      390 px: 203x1750). 'slice' skaliert auf Ueberdeckung und schnitt die Kontur seitlich ab -
      mobil fehlten rund 88 % der Breite.
   2) Die Box ragte zusaetzlich 47 px ueber die Footer-Oberkante und 248 px unter die Unterkante
      hinaus; .ftr{overflow:hidden} hat das weggeschnitten - sichtbar als schraeg fehlende
      obere linke Ecke.
   Loesung: 'meet' statt 'slice', quadratische Box ueber aspect-ratio, und eine Groesse, die
   vollstaendig in die Footerflaeche passt. Desktop ueber die Hoehe bemessen, mobil ueber die
   Breite - sonst waere das Quadrat im schmalen, hohen Mobilfooter breiter als der Bildschirm.
   Nicht von S6 uebernommen, sondern fuer den Footer separat austariert. */
.ftr .ftrmark{right:5%;left:auto;top:50%;bottom:auto;transform:translateY(-50%);
  width:auto;height:86%;aspect-ratio:1;color:#fff;opacity:.045}
/* S6: vollstaendige Bildmarke, nur links bewusst angeschnitten */
.s6mark{left:-14%;top:50%;transform:translateY(-50%);width:62%;aspect-ratio:1;height:auto;
  color:#fff;opacity:.05}
/* Hero-Achse: Textmass ueber einen inneren Container, nicht ueber einen zentrierten Wrap (R18) */
.hero .in{max-width:var(--wrap)}
.hero .heroin{max-width:820px}
/* Markenblock Header und Footer getrennt gefuehrt (R17/R18) */
.hdr .logo{font-size:54px;flex:0 0 auto;gap:.34em}
.hdr .logo .wm{height:.38em}
.hdr .in{gap:24px;height:88px}
.hdr .btn-primary{padding:14px 22px}
.nav{gap:20px;flex:0 0 auto}
.nav a,.navdrop,.hdr .tel,.hdr .btn-primary{white-space:nowrap}
.hdr .tel,.hdr .btn-primary{flex:0 0 auto}
.ftr .logo{font-size:58px;gap:.34em}
.ftr .logo .wm{height:.38em}
.ftr .cols > div{min-width:0}
/* R18/4.2 §5: Diese Spaltenverteilung gilt NUR am Desktop. Ohne die Min-Breite ueberschrieb
   sie die mobile Zweispaltenregel des 9B.1-Systems (.ftr .cols{grid-template-columns:1fr 1fr}),
   weil sie bei gleicher Spezifitaet spaeter in der Kaskade steht. Folge bei 390 px: vier
   Spalten zu 72/45/45/36 px, aus denen der Text herauslief. */
@media(min-width:961px){ .ftr .cols{grid-template-columns:1.6fr 1fr 1fr .8fr} }
.ftr .co h2{margin-bottom:var(--s4)}
.ftr .co .logo{display:inline-flex;margin-bottom:10px}
.ftr .co .sub{font-size:13.5px;color:var(--n400);margin:0 0 var(--s5);max-width:34ch}
.ftr .plain{color:var(--n400)}
.ftr .bot a{margin-right:var(--s5)}
.ftr .bot span{margin-left:auto}
.mbar{display:none}
.burger{display:none;flex-direction:column;gap:4px;margin-left:auto;cursor:pointer}
.burger i{display:block;width:22px;height:2px;background:#fff}
.pillar figcaption,.proj figcaption{font-size:12.5px;color:var(--n600);line-height:1.45;
  padding:10px var(--s5) 0}
.proj .ph .badge{position:absolute;left:10px;top:10px;z-index:2}
.navdrop{font-size:14.5px;font-weight:500;color:var(--n300);padding:6px 0;cursor:default;
  border-bottom:2px solid transparent;display:inline-flex;gap:5px;align-items:center}
.navdrop i{font-style:normal;font-size:11px;opacity:.8}
.navdrop:hover{color:#fff;border-bottom-color:var(--gold)}
/* R18/4.2 §1: Alle vier Leistungskarten verhalten sich bei Hover und Fokus identisch.
   Karte 4 bleibt wegen des zweiten Ziels semantisch ein <div> mit einzelnen Links,
   optisch ist sie aber nicht mehr unterscheidbar.
   Ursache des bisherigen Unterschieds: die entfernte Regel .svc.svc-split{background:#fff}
   hatte dieselbe Spezifitaet wie .svc:hover, stand aber spaeter in der Kaskade und hat den
   Hover-Hintergrund von Karte 4 dauerhaft ueberschrieben. */
.svc h3{font-size:17px;font-weight:600;margin:0}
.svc h3 a{color:inherit;text-decoration:none}
.svc .go{text-decoration:none}
.svc .sublink{margin-top:2px;font-size:12.5px;color:var(--n700);text-decoration:underline;
  text-underline-offset:2px;align-self:flex-start}
.hero .acts .tel2{color:var(--n300);font-size:15px;text-decoration:none;border-bottom:1px solid var(--n600);
  padding-bottom:2px}
.hero .acts .tel2:hover{color:var(--gold);border-bottom-color:var(--gold)}
.ctaband{background:#fff;border:1px solid var(--n200);padding:var(--s8) var(--s7);text-align:left}
/* R18/4.2 §2: Jeder Bildcontainer, der eine absolute .im-Ebene traegt, MUSS ein
   Positionierungsanker sein. .pillar .ph und .proj .ph hatten position:relative aus dem
   9B.1-System, .tech .ph NICHT. Die Technikaufnahme ankerte deshalb an der Sektion und
   ueberdeckte den gesamten S6-Textblock. Korrektur am Container, nicht am Text. */
.ph,.imgbox{position:relative}
.pillars>*,.projs>*,.svcs>*,.tech>*{min-width:0}
section.dark{overflow:hidden}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:99;background:#fff;color:var(--ink);padding:10px 14px}
@media(max-width:960px){
  .burger{display:flex}
  .hdr .in{gap:10px;height:64px}
  .hdr .logo{font-size:30px}
  .hdr .logo .wm{height:.355em}
  .hdr .btn-primary{padding:11px 12px;font-size:13.5px;white-space:nowrap;min-height:42px}
  .ftr .cols > div:first-child{grid-column:1 / -1}
  .ftr .ftrmark{height:auto;width:78%;right:4%;top:auto;bottom:6%;transform:none}
  .ftr .logo{font-size:34px}
  .ftr .logo .wm{height:.37em}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:9px;padding:9px 12px 12px;
    background:rgba(255,255,255,.97);border-top:1px solid var(--n200);backdrop-filter:blur(8px)}
  .mbar[hidden]{display:none}
  .mbar a{flex:1;justify-content:center;padding:13px 8px;font-size:14.5px;min-height:48px}
  .ftr{padding-bottom:96px}
  .hero{padding:var(--s8) 0 calc(var(--s7) + 34px)}
  .hero .claim{font-size:clamp(32px,9vw,44px)}
  .svcs{grid-template-columns:1fr}
  .ctaband{padding:var(--s7) var(--s5)}
  .facts{gap:var(--s3) var(--s5)}
  .pillars{gap:var(--s6)}
  .pillar .bd{padding:var(--s5)}
  .pillar .h2{font-size:22px}
  .proj .bd{padding:var(--s4) var(--s5)}
  .tlink{padding:7px 0 6px}
  .ftr li{margin-bottom:4px}
  .ftr li a{display:inline-block;padding:6px 0}
  .svc .sublink{display:inline-block;padding:5px 0}
}
/* Mitteldesktop: dort reicht die Breite fuer die volle Kopfzeile nicht mehr.
   Reihenfolge am Ende, damit die Regeln die Grundwerte ueberschreiben. */
/* Prioritaet R18: Marke > Navigation > CTA > Telefonnummer.
   Die Telefonnummer weicht als erstes, weil der Wrap bei 1240 px gedeckelt ist. */
/* R18/4.1 §15: Die Telefonnummer entfaellt im Desktop-Header VOLLSTAENDIG, nicht erst ab einer
   Breite. Grund real gemessen: Der Kopfzeileninhalt ist mit Telefonnummer 1.257 px breit, der
   Rasterinnenraum aber konstant 1.192 px - unabhaengig vom Viewport, weil --wrap bei 1240 px
   gedeckelt ist. Bei 1600 und 1920 px stand die CTA-Schaltflaeche dadurch 65 px rechts ausserhalb
   der Seitenachse. Ein Breakpoint kann das nicht loesen; eine breitere Kopfzeile wuerde die
   gemeinsame linke Achse zerstoeren. Telefon bleibt im Footer und in der mobilen Aktionsleiste. */
.hdr .tel{display:none}
@media(max-width:1140px){ .nav{display:none} .burger{display:flex} }
/* R18/4.1 §22: Die mobile Kopfzeile war bei 390 und 360 px ueberfuellt - die CTA-Schaltflaeche
   ragte 7 bzw. 9 px ueber den 24-px-Seitenrand hinaus (ohne Dokumentueberlauf, deshalb in der
   bisherigen QA unsichtbar). Gemessen behoben ueber zwei Stufen. Der Wortlaut der Schaltflaeche
   bleibt unveraendert. Lokale mobile Content-Fit-Ausnahme, keine Header-Governance. */
@media(max-width:960px){
  .hdr .btn-primary{padding:11px 10px;font-size:13px}
}
/* R18/4.2 §5: Unter 480 px wird der Footer einspaltig. Zweispaltig blieben bei 390 px nur
   147 px Spaltenbreite, der laengste Linktext ("Photovoltaikreinigung") braucht aber 153 px
   als unumbrechbares Wort. Zwischen 480 und 960 px gilt weiterhin die Zweispaltenregel des
   9B.1-Systems. Lokale mobile Content-Fit-Ausnahme, keine Footer-Governance. */
@media(max-width:480px){
  .ftr .cols{grid-template-columns:1fr;gap:var(--s6)}
}
@media(max-width:380px){
  /* R18/4.2 §5: 22 px reichten bei 360 px nicht - "Photovoltaikreinigung" braucht dort
     268 px in einer 262 px breiten Kachel. Weiterhin lokale Content-Fit-Ausnahme. */
  .pillar .h2{font-size:21px}
  .hdr .logo{font-size:27px}
  .hdr .in{gap:8px}
}
@media(max-width:370px){
  .hdr .logo{font-size:25px}
}
/* Variante A: groessere Markenflaeche, V bleibt beschnitten */
.trust .port.pA{width:260px;height:300px}
.trust .port.pA .mk{font-size:300px;right:-84px;bottom:-90px;opacity:.15}
/* Variante B: Wortbildmarke als Signatur, V nur als leise Kontur in der rechten Flaeche */
.trust.tB{position:relative;overflow:hidden}
.trust.tB .vfield{position:absolute;right:-3%;top:50%;transform:translateY(-50%);width:30%;
  aspect-ratio:1;height:auto;color:var(--ink);opacity:.045;pointer-events:none}
.trust.tB > div:last-child{position:relative;z-index:1}
/* A2: identische Flaeche, V deutlicher gefuehrt */
.trust .port.pA2 .mk{font-size:330px;right:-96px;bottom:-104px;opacity:.26}
.trust .port.pB{width:260px;height:300px;background:var(--ink)}
.trust .port.pB .brandtile{display:flex;flex-direction:column;justify-content:center;
  gap:var(--s5);padding:var(--s6) var(--s5)}
.trust .port.pB .lockv{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.trust .port.pB .lockv .mk{position:static;font-size:56px;opacity:1;
  --mk-frame:var(--red);--mk-v:var(--gold)}
.trust .port.pB .lockv .wm{width:176px;height:auto;display:block;flex:0 0 auto}
.trust .port.pB .since{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.trust .port.pB3 .brandtile{justify-content:center;align-items:center;padding:var(--s6)}
.trust .port.pB3 .lockv{align-items:center;gap:24px}
.trust .port.pB3 .lockv .mk{font-size:64px}
.trust .port.pB3 .lockv .wm{width:186px}
@media(max-width:960px){
  .trust .port.pA,.trust .port.pB{width:100%;height:200px}
  .trust .port.pA .mk{font-size:240px;right:-60px;bottom:-66px}
  .trust.tB .vfield{width:46%;right:-10%}
}
/* R18 §12 – lokaler Override: Der Saeulenverlauf traegt hier keine Schrift und verdunkelte
   die untere Bildhaelfte ohne Funktion. Abgeschwaecht, nicht entfernt, damit die Kantenwirkung
   des 9B.1-Systems erhalten bleibt. Keine Aenderung am Designsystem. */
.pillar .ph::after{background:linear-gradient(180deg,rgba(24,23,22,0) 62%,rgba(24,23,22,.20) 100%)}
/* R18 §13/§14 – Bewegung. Ausschliesslich opacity und transform. Keine Layoutbewegung,
   keine Farbanimation, kein Parallax. Reduzierte Bewegung wird respektiert. */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
/* 1) Hero-Eintritt, gestaffelt. Ohne JS bleibt alles sichtbar (kein FOUC-Risiko). */
.js .hero .heroin > *{opacity:0;transform:translateY(9px)}
.js .hero.on .heroin > *{opacity:1;transform:none;
  transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
.js .hero.on .heroin > *:nth-child(1){transition-delay:0ms}
.js .hero.on .heroin > *:nth-child(2){transition-delay:70ms}
.js .hero.on .heroin > *:nth-child(3){transition-delay:140ms}
.js .hero.on .heroin > *:nth-child(4){transition-delay:210ms}
/* 2) Hover und Fokus auf Karten */
.pillar,.proj{transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
.pillar:hover,.pillar:focus-within,.proj:hover,.proj:focus-within{
  border-color:var(--n300);box-shadow:0 10px 26px rgba(24,23,22,.09)}
/* --- Leistungskarten S4: ein Komponentensystem, vier gleich reagierende Karten (R18/4.2 §1) */
.svc{transition:background 200ms var(--ease),box-shadow 200ms var(--ease)}
/* 1) Kartenflaeche: identischer Hintergrund und Schatten, Maus wie Tastatur */
.svc:hover,.svc:focus-within{background:var(--n50);box-shadow:0 10px 26px rgba(24,23,22,.09)}
/* 2) Haupttitel: bei Kartenaktivierung einheitlich in Markenrot - Karten 1-3 tragen den
      Titel direkt, Karte 4 in einem Link. Beide Faelle werden gleich behandelt. */
.svc h3,.svc h3 a{transition:color 200ms var(--ease)}
.svc:hover h3,.svc:focus-within h3,
.svc:hover h3 a,.svc:focus-within h3 a{color:var(--red)}
/* 3) Pfeil: identischer Versatz */
.svc .go .ar{display:inline-block;transition:transform 200ms var(--ease)}
.svc:hover .go .ar,.svc:focus-within .go .ar{transform:translateX(3px)}
/* 4) Der untergeordnete Jalousie-Link bleibt ein eigenes, erkennbares zweites Ziel und
      reagiert bei direktem Hover oder Fokus zusaetzlich. */
.svc .sublink{transition:color 200ms var(--ease),text-decoration-color 200ms var(--ease)}
.svc .sublink:hover,.svc .sublink:focus-visible{color:var(--red);text-decoration-color:var(--red)}
.im{position:absolute;inset:0;transform:scale(1);transform-origin:center;
  transition:transform 200ms var(--ease)}
.pillar:hover .im,.pillar:focus-within .im,
.proj:hover .im,.proj:focus-within .im{transform:scale(1.02)}
.tlink .ar,.btn .ar{display:inline-block;transition:transform 200ms var(--ease)}
.tlink:hover .ar,.tlink:focus-visible .ar,
.pillar:hover .tlink .ar,.proj:hover .tlink .ar{transform:translateX(3px)}
/* 3) Abschnitts-Einblendung – TESTSCHALTER, Urteil siehe QA-Dokument */
.js.rvtest .rv{opacity:0;transform:translateY(10px)}
.js.rvtest .rv.on{opacity:1;transform:none;
  transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
@media(prefers-reduced-motion:reduce){
  .js .hero .heroin > *,.js.rvtest .rv{opacity:1!important;transform:none!important}
  .pillar,.proj,.svc,.svc h3,.svc h3 a,.svc .sublink,.im,.tlink .ar,.btn .ar,.svc .go .ar,
  .js .hero.on .heroin > *,.js.rvtest .rv.on{transition-duration:1ms!important;
    transition-delay:0ms!important}
  .pillar:hover .im,.proj:hover .im,.pillar:focus-within .im,
  .proj:focus-within .im{transform:none}
}
/* ===== 11A-2 · P-07 — Logo im Header als Rückweg zur Startseite (WORKING) =====
   Zentrale Definition, in allen zwölf Arbeitskopien identisch angewendet.
   Betrifft ausschließlich den Header. Die Footer-Logoeinheit bleibt in diesem
   Lauf unverändert. a.logo erbt Größe und Layout aus .logo und .hdr .logo;
   zurückzusetzen ist allein die vom Browser vorgegebene Unterstreichung.
   Der sichtbare Fokus entsteht aus der bestehenden Regel a:focus-visible. */
.hdr a.logo{text-decoration:none}
/* ===== 11A-1b · P-01/P-02 — Fließtextlink im redaktionellen Text (WORKING) =====
   Grund: die globale Regel a{color:inherit} lässt einen Link im Fließtext optisch
   nicht erkennen. .tlink ist dafür ungeeignet (display:inline-flex, eigene
   Schriftgröße und -stärke, bricht im Satz nicht um). .inl erbt Größe und
   Gewicht des umgebenden Textes und markiert den Link nur durch eine Unterlinie,
   analog zum bestehenden Muster .svc .sublink. */
.inl{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:var(--red)}
.inl:hover{color:var(--red)}
.dark .inl{text-decoration-color:var(--gold)}
.dark .inl:hover{color:var(--gold)}

/* VOS_MOBILE_NAV */
@media(max-width:1140px){
  .hdr .in{
    position:relative;
  }

  .hdr.nav-open .nav{
    display:flex;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    z-index:40;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px;
    background:#fff;
    border:1px solid var(--n200);
    box-shadow:0 14px 32px rgba(0,0,0,.14);
  }

  .hdr.nav-open .nav > a,
  .hdr.nav-open .nav > .navdrop{
    display:block;
    width:100%;
    padding:11px 10px;
    margin:0;
  }

  .burger[aria-expanded="true"]{
    background:var(--n100);
  }
}
/* VOS_LEISTUNGEN_NAV */
.navservice{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.navsubmenu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:60;
  min-width:270px;
  padding:8px;
  background:#fff;
  border:1px solid var(--n200);
  box-shadow:0 14px 32px rgba(0,0,0,.14);
}

.navservice.is-open .navsubmenu{
  display:block;
}

.navsubmenu a{
  display:block;
  padding:10px 12px;
  color:var(--n800);
  text-decoration:none;
  white-space:nowrap;
}

.navsubmenu a:hover,
.navsubmenu a:focus-visible{
  background:var(--n100);
  color:var(--ink);
}

.navservice.is-open > .navdrop{
  border-bottom-color:var(--gold);
}

@media(max-width:1140px){
  .hdr.nav-open .nav > .navservice{
    display:block;
    width:100%;
  }

  .hdr.nav-open .nav > .navservice > .navdrop{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    padding:11px 10px;
    margin:0;
  }

  .hdr.nav-open .navsubmenu{
    position:static;
    min-width:0;
    width:100%;
    margin:0 0 4px;
    padding:2px 0 6px 12px;
    border:0;
    border-left:2px solid var(--gold);
    box-shadow:none;
    background:transparent;
  }

  .hdr.nav-open .navsubmenu a{
    padding:10px 12px;
    white-space:normal;
  }
}
/* VOS_NAV_POLISH */

/* Der Leistungen-Auslöser ist tatsächlich interaktiv. */
.navservice > .navdrop{
  cursor:pointer;
}

/* Leistungslinks: klares visuelles Feedback. */
.navsubmenu a{
  border-bottom:2px solid transparent;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.navsubmenu a:hover,
.navsubmenu a:focus-visible,
.navsubmenu a:active,
.navsubmenu a[aria-current="page"]{
  background:var(--n50);
  border-bottom-color:var(--gold);
  color:var(--ink);
}

/*
 * Desktop: kleine unsichtbare Hover-Brücke zwischen
 * "Leistungen" und dem absolut positionierten Untermenü.
 */
@media(min-width:1141px){
  .navsubmenu{
    top:calc(100% + 8px);
  }

  .navsubmenu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    height:10px;
  }
}

/*
 * Mobil:
 * Ohne geöffnetes Leistungs-Untermenü sind ALLE
 * Hauptpunkte deutlich dunkel und gleichberechtigt.
 */
@media(max-width:1140px){
  .hdr.nav-open .nav > a,
  .hdr.nav-open .nav > .navservice > .navdrop{
    color:var(--ink);
    opacity:1;
  }

  /*
   * Sobald "Leistungen" geöffnet ist:
   * Leistungsbereich im Fokus, andere Hauptpunkte bewusst zurücknehmen.
   */
  .hdr.nav-open.service-open .nav > a{
    /* HARDENING Q2: vorher var(--n400) = 2,47:1 auf Weiss. Abdunkeln bleibt als
       Gestaltungsmittel, jetzt in var(--n600) = 5,76:1 (WCAG 1.4.3, mind. 4,5:1). */
    color:var(--n600);
  }

  .hdr.nav-open.service-open .nav > .navservice > .navdrop{
    color:var(--ink);
    background:var(--n50);
    border-bottom-color:var(--gold);
  }

  .hdr.nav-open .navsubmenu::before{
    display:none;
  }

  .hdr.nav-open .navsubmenu a{
    color:var(--ink);
    opacity:1;
  }

  .hdr.nav-open .navsubmenu a:hover,
  .hdr.nav-open .navsubmenu a:focus-visible,
  .hdr.nav-open .navsubmenu a:active,
  .hdr.nav-open .navsubmenu a[aria-current="page"]{
    background:var(--n50);
    border-bottom-color:var(--gold);
    color:var(--ink);
  }
}
/* VOS_BURGER_ACTIVE_STATE */
.burger{
  background:transparent;
}

.burger i{
  transition:background-color .15s ease;
}

.burger[aria-expanded="true"]{
  background:transparent;
}

.burger[aria-expanded="true"] i{
  background:var(--gold);
}

/* VOS_CURRENT_NAV_APPEND */
.nav > a[aria-current],
.navservice.is-current > .navdrop {
  color:#fff;
  border-bottom-color:var(--gold);
}

@media(max-width:1140px){
  .hdr.nav-open .nav > a[aria-current],
  .hdr.nav-open .navservice.is-current > .navdrop {
    color:var(--ink);
    border-bottom-color:var(--gold);
  }
}
/* HARDENING Q3 – Menueausloeser als <button> und sichtbarer Tastaturfokus.
   1) .navdrop und .burger sind <button type="button">. :where() haelt die Spezifitaet
      bei null: Alle bestehenden Klassenregeln gewinnen weiterhin, nur die Standardstile
      des Browsers werden neutralisiert. Erscheinungsbild bei Maus und Touch unveraendert. */
:where(button.navdrop,button.burger){-webkit-appearance:none;appearance:none;margin:0;padding:0;
  border:0;border-radius:0;background:none;font:inherit;color:inherit;line-height:inherit;
  letter-spacing:inherit;word-spacing:inherit;text-align:inherit;text-transform:none;text-indent:0}
/* 2) Fokusring der Ausloeser wie bei Links und Buttons: Gold auf dem dunklen Header
      (7,46:1 gegen #181716). Nur bei Tastaturbedienung (:focus-visible). */
.navdrop:focus-visible,.burger:focus-visible{outline:3px solid var(--gold);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(24,23,22,.28)}
/* 3) Auf weissen Menueflaechen reicht Gold nicht (2,40:1). Dort Markenrot:
      6,19:1 gegen Weiss, 5,88:1 gegen #FAF9F7. Desktop: Untermenue „Leistungen“;
      mobil: geoeffnetes Menue. */
.navsubmenu a:focus-visible{outline-color:var(--red)}
@media(max-width:1140px){
  .hdr.nav-open .nav a:focus-visible,
  .hdr.nav-open .nav .navdrop:focus-visible{outline-color:var(--red)}
}
/* N1 (Vorschlag, gesondert freizugeben) – Burger-Menue zwischen 961 und 1140 px.
   site.css blendet die Hauptnavigation schon unter 1141 px aus und zeigt den Burger
   (Regel "Mitteldesktop"), die Regeln des geoeffneten Menues galten aber nur bis 960 px.
   Folge: Bei 961–1140 px (z. B. Tablet quer, 1024 px) oeffnete der Burger nichts.
   Die sechs Navigationsbloecke oben greifen deshalb jetzt bis 1140 px; site-nav.js
   verwendet dieselbe Grenze. Geschlossener Zustand unveraendert. */
/* HARDENING N2 – Fokusring auf hellen und dunklen Flaechen (WCAG 1.4.11, mind. 3:1).
   Bisher war der Ring ueberall Gold: auf Weiss nur 2,40:1. Jetzt steuert die Variable
   --focus die Farbe nach Untergrund: hell (Standard) Markenrot #C11424 = 6,19:1 gegen Weiss,
   5,88:1 gegen #FAF9F7, 5,54:1 gegen #F4F2EF; dunkle Flaechen Gold #C1A460 = 7,46:1 gegen #181716.
   Form, Breite und Abstand des Rings bleiben unveraendert. */
.dark,.hero,.hdr,.ftr,.brandtile{--focus:var(--gold)}
/* Der Sprunglink liegt beim Fokus ueber dem dunklen Header. */
.skip{--focus:var(--gold)}
video:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* E2-C C5: Liegt der Tastaturfokus auf einem Bedienelement der nativen Videosteuerung
   (Abspielen, Ton, Vollbild ...), bleibt der Rahmen am Video sichtbar; die eingebaute
   Markierung des Browsers ist auf dunklem Bild kaum zu erkennen. */
video:focus-within{outline:3px solid var(--focus);outline-offset:2px}
/* Leistungskarten liegen im Raster dicht an dicht; die folgende Karte verdeckte sonst eine
   Seite des Fokusrings. */
.svc:focus-visible{position:relative;z-index:1}
/* =======================================================================
   V1-Review E3 · Block 2 · WM-F (Regel W4): Footer-Wasserzeichen
   Ein Motiv je Seite; gerahmte Bildmarke unveraendert, Weiss 10 % (bisher 4,5 %).
   "Kantenlaenge" = sichtbarer Rahmen (21,4/28,4 der viewBox).
   Desktop: Rahmen 680 px -> Box 902,4 px, Rahmen beginnt 111,2 px innerhalb der Box;
   der Rahmen steigt aus der Ecke unten rechts auf und ragt 160 px rechts und
   285 px unten ueber den Footerrand (bei 1.230 px: links 712, oben 228).
   Mobil (bis 960 px): Rahmen 470 px -> Box 623,7 px; 150 px rechts, 165 px unten.
   Logo und erste Spalte bleiben frei (gemessen); die Spalten liegen ueber dem Motiv.
   ======================================================================= */
.ftr .ftrmark{width:902.4px;height:902.4px;aspect-ratio:auto;opacity:.1;transform:none;
  top:auto;left:auto;right:-271.2px;bottom:-396.2px}
@media(max-width:960px){
  .ftr .ftrmark{width:623.7px;height:623.7px;right:-226.9px;bottom:-241.9px}
}
/* =======================================================================
   V1-Review E3 · Block 2 · AF1: Anfragebereiche als Komponentenfamilie
   Zwei Varianten, gleicher Aufbau: 1 Label "Anfrage" · 2 H2 · 3 Text · 4 optional
   Liste · 5 Hauptschaltflaeche "[Leistung] anfragen" ohne Pfeil · 6 "Oder anrufen"
   · 7 "Ihre Anfrage ist unverbindlich." · 8 Inhaberzeile (Leistungsseiten).
   Variante "Standard, hell": .ctaband.anf (alle Seiten ausser Glas und PV).
   Variante "Schwerpunkt, dunkel": .glsanf / .pvanf (Regeln in den Seiten-CSS).
   ======================================================================= */
.anf .lbl{color:var(--red);margin-bottom:var(--s4)}
.anf .h2{margin-bottom:var(--s4);max-width:26ch}
.anf .facts{margin:var(--s5) 0 0}
.anf .anfzus{margin-top:var(--s5);max-width:62ch}
.anfacts{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center}
.anftel{color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--n400);padding-bottom:1px}
.anftel:hover{border-bottom-color:var(--ink)}
.anfnote{margin-top:var(--s4);font-size:13px;color:var(--n600)}
.anfowner{margin-top:var(--s2);font-size:14px;color:var(--n600);max-width:62ch}
@media(max-width:600px){
  .anfacts .btn{width:100%;justify-content:center}
  .anftel{display:inline-block;padding:11px 0 10px}
}
/* =======================================================================
   V1-Review E3 · Block 3 · HDR-D / HDR-M / MENU (Eigentuemervorgaben HV2, HV3, HV9;
   Ableitungen HA1-HA8; Auflage K1)
   Logo als Originaldatei (A+ 03 bzw. A+ 04, farbig), byte-identisch eingebunden.
   Headerhoehe einschliesslich 1-px-Unterkante (K1):
     ab 961 px 89 px (88 + 1) · 600-960 px 70 px (69 + 1) · unter 600 px 76 px (75 + 1).
   Logo: ab 1.141 px A+ 03 52 px hoch; 600-1.140 px A+ 03 44 px hoch;
   unter 600 px A+ 04 160 px breit (ab 360 px) bzw. 150 px (darunter, CD §5).
   Unter 600 px kein "Projekt anfragen" im Header (M1/HA4); Hero-Button und
   untere Leiste bleiben. Header bleibt fixiert mit deckendem Grund #181716 (HA8).
   ======================================================================= */
.hdr .logo{font-size:inherit;gap:0;line-height:0}
.hdr .logo picture{display:block}
.hdr .logo .lg{display:block;width:auto;height:52px}
.hdr .in{height:88px}
@media(max-width:1140px){
  .hdr .logo .lg{height:44px}
}
@media(max-width:960px){
  .hdr .in{height:69px}
}
@media(max-width:599px){
  .hdr .in{height:75px}
  .hdr .logo .lg{width:160px;height:auto}
  .hdr .btn-primary{display:none}
}
@media(max-width:359px){
  .hdr .logo .lg{width:150px}
}
/* MENU (HV9): Bedienflaeche 44 x 44 px; die drei Striche bleiben 22 x 2 px mit 4 px
   Abstand, weiss, mittig. Fokusrahmen (Gold) und ARIA-Attribute unveraendert. */
.burger{width:44px;height:44px;flex:0 0 44px;justify-content:center;align-items:center;gap:4px}
/* =======================================================================
   V1-Review E3 · Block 3 · MK1-F: Footer-Logo A+ 03 farbig, ca. 52 px hoch
   (gleiche Datei wie im Header). Vorlage-Annahme BST-5 mit Auflage K2:
   52 px Hoehe, solange die Spaltenbreite reicht; sonst auf Spaltenbreite
   verkleinert, nie unter 220 px Breite. Waere die erste Spalte schmaler als
   220 px, steht der Logoblock ueber beide Spalten (in den heutigen Rastern
   tritt das nicht ein: erste Spalte >= 280 px ab 961 px, darunter volle Breite).
   ======================================================================= */
.ftr .logo{font-size:inherit;gap:0;line-height:0}
.ftr .logo .lg{display:block;width:346px;height:auto;max-width:100%;min-width:220px}
/* =======================================================================
   V1-Review E2-C · C1: Fokus und Sprungziele nicht unter den festen Leisten
   (WCAG 2.2, 2.4.11). EIN Mechanismus statt Einzelabstaenden je Sprungziel:
   - oben: Hoehe der klebenden Kopfleiste + 16 px (89 px ueber 960 px,
     70 px von 600 bis 960 px, 76 px unter 600 px, gemessen);
   - unten (bis 960 px): Hoehe der festen Aktionsleiste .mbar + 16 px
     (73 px; auf Leistungsseiten unter 480 px zweizeilig 96 px).
   Gilt fuer Ankerspruenge und fuer das Scrollen zum Tastaturfokus.
   Die bisherigen Einzelregeln (#h-lam, #h-c1, #h-c4, #h-weit, .kanker) sind
   entfallen. Bleibt nur der Versatz fuer Kennzeilen, die direkt UEBER einer
   Sprungmarke stehen und mit ihr sichtbar sein sollen (gemessen 46 px bzw.
   27-31 px; Werte so, dass #h-c1, #h-c4, #h-weit wie bisher landen);
   das ist kein zweiter Kopfleistenabstand.
   ======================================================================= */
html{scroll-padding-top:105px}
@media(max-width:960px){ html{scroll-padding-top:86px;scroll-padding-bottom:89px} }
@media(max-width:599px){ html{scroll-padding-top:92px} }
@media(max-width:479px){ html{scroll-padding-bottom:112px} }
.prcase-kick + h3[id]{scroll-margin-top:46px}
.lbl + h2[id]{scroll-margin-top:28px}