/* ==========================================================================
   1 · TOKEN
   Wörtlich aus src/styles/home-v2.css. Nicht hier umdefinieren.
   ========================================================================== */
:root{
  --vi-paper:#f2eee7;
  --vi-paper-2:#ece7de;
  --vi-card:#fbfaf7;
  --vi-ink:#17191b;
  --vi-muted:#4a5056;
  --vi-teal:#00a78e;
  --vi-teal-dark:#007a68;
  --vi-line:rgba(23,25,27,.1);
  --vi-max:1280px;

  --vi-mass:34em;
  --vi-akzent:var(--vi-teal-dark);
  --vi-fliess:#3a3f45;
  --vi-leise:#5a6067;
  --vi-fokus:var(--vi-teal-dark);
  --vi-schatten:0 20px 44px rgba(21,23,25,.14);
}

@media (prefers-color-scheme: dark){
  :root{
    --vi-paper:#14161a;
    --vi-paper-2:#1c1f22;
    --vi-card:#1c1f22;
    --vi-ink:#eceae4;
    --vi-muted:#a8afb6;
    --vi-line:rgba(255,255,255,.13);
    --vi-akzent:var(--vi-teal);
    --vi-fliess:#ccd2d6;
    --vi-leise:#a8afb6;
    --vi-fokus:var(--vi-teal);
    --vi-schatten:0 20px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --vi-paper:#14161a; --vi-paper-2:#1c1f22; --vi-card:#1c1f22;
  --vi-ink:#eceae4; --vi-muted:#a8afb6; --vi-line:rgba(255,255,255,.13);
  --vi-akzent:var(--vi-teal); --vi-fliess:#ccd2d6; --vi-leise:#a8afb6;
  --vi-fokus:var(--vi-teal); --vi-schatten:0 20px 44px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --vi-paper:#f2eee7; --vi-paper-2:#ece7de; --vi-card:#fbfaf7;
  --vi-ink:#17191b; --vi-muted:#4a5056; --vi-line:rgba(23,25,27,.1);
  --vi-akzent:var(--vi-teal-dark); --vi-fliess:#3a3f45; --vi-leise:#5a6067;
  --vi-fokus:var(--vi-teal-dark);
}

/* ==========================================================================
   2 · GRUNDLAGE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-padding-top:90px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--vi-paper);
  color:var(--vi-ink);
  font-family:Montserrat,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{font-family:Bebas,Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.01em;line-height:.98;margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.vi-container{width:min(var(--vi-max),calc(100% - clamp(32px,8vw,128px)));margin-inline:auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ein sichtbarer Fokusring auf ALLEM, was Fokus bekommen kann. 3 px, weil der
   Ring gegen den Nachbarn 3:1 schaffen muss (WCAG 1.4.11). */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--vi-fokus);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;z-index:1000;top:12px;left:12px;
  padding:12px 18px;border-radius:10px;
  background:var(--vi-ink);color:#fff;font-size:.85rem;font-weight:700;
  transform:translateY(-160%);
}
.skip-link:focus{transform:none}

/* ==========================================================================
   3 · KOPF UND FUSS  (Nachbau von SiteHeader.astro / SiteFooter.astro)
   ========================================================================== */
.vi-header{position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(23,25,27,.96);backdrop-filter:blur(14px)}
.vi-header-inner{width:min(var(--vi-max),calc(100% - clamp(32px,8vw,128px)));min-height:68px;margin-inline:auto;display:flex;align-items:center;gap:20px}
.vi-brand{min-width:0;display:flex;align-items:center;gap:11px;color:#f2eee7}
.vi-brand-mark{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:#0f1113}
.vi-brand-mark span{width:11px;height:11px;border-radius:3px;background:var(--vi-teal)}
.vi-brand>span{display:flex;min-width:0;flex-direction:column;line-height:1.05}
.vi-brand strong{font-size:.95rem;white-space:nowrap}
.vi-brand small{color:#9da29f;font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.vi-desktop-nav{display:flex;align-items:center;gap:18px;margin-left:auto;padding-left:28px}
.vi-desktop-nav a{color:#d5d9d6;font-size:.78rem;white-space:nowrap;padding:6px 0}
.vi-desktop-nav a:hover,.vi-desktop-nav a:focus-visible{color:var(--vi-teal)}
.vi-desktop-nav a[aria-current="page"]{color:var(--vi-teal);border-bottom:2px solid var(--vi-teal)}
.vi-header-cta{min-height:44px;padding:0 22px;display:inline-flex;align-items:center;border:0;border-radius:999px;background:var(--vi-teal);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap}
.vi-lang{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vi-lang-current{color:#c9cdc9;padding-bottom:3px;border-bottom:2px solid var(--vi-teal)}
.vi-lang-link{color:var(--vi-teal);padding-bottom:3px;border-bottom:2px solid transparent;min-height:24px;display:inline-flex;align-items:center}

.vi-footer{padding:68px 0 40px;background:#17191b;color:#fff}
.vi-footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:54px}
.vi-footer h2{margin:0 0 18px;font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.vi-footer a,.vi-footer p,.vi-footer address{display:block;margin:7px 0;color:rgba(255,255,255,.68);font-size:.74rem;font-style:normal;line-height:1.6;min-height:24px}
.vi-footer a:hover,.vi-footer a:focus-visible{color:var(--vi-teal)}
.vi-footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.42);font-size:.64rem}

/* ==========================================================================
   4 · SEITENKOPF
   ========================================================================== */
.vi-k-hero{padding:clamp(36px,5vw,68px) 0 clamp(28px,3vw,44px)}
.vi-breadcrumb{margin:0 0 22px;font-size:.74rem;color:var(--vi-muted)}
.vi-breadcrumb ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vi-breadcrumb li{display:flex;align-items:center;gap:8px}
.vi-breadcrumb li+li::before{content:"›";color:var(--vi-muted)}
.vi-breadcrumb a{color:var(--vi-akzent);font-weight:600;min-height:24px;display:inline-flex;align-items:center}
.vi-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}

.vi-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--vi-akzent);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.vi-kicker::before{content:"";width:18px;height:1px;flex:0 0 auto;background:var(--vi-teal)}
.vi-k-hero h1{margin:24px 0 0;font-size:clamp(2.7rem,6.4vw,5.2rem);line-height:.94;max-width:16ch}
.vi-k-lead{max-width:var(--vi-mass);margin:26px 0 0;color:var(--vi-muted);font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.65}

.vi-k-meta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.vi-k-meta li{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--vi-line);border-radius:999px;background:var(--vi-card);color:var(--vi-fliess);font-size:.74rem;font-weight:600}
.vi-k-meta li::before{content:"";width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--vi-teal)}

.vi-k-bild{margin:34px 0 0;overflow:hidden;border:1px solid var(--vi-line);border-radius:18px}
.vi-k-bild img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}

/* ==========================================================================
   5 · EINSTIEGSKASTEN
   Derselbe Baustein wie die Kernaussage der Fachseiten. Hier trägt er die
   ehrliche Abgrenzung: was diese Seiten leisten und was nicht.
   ========================================================================== */
.vi-k-kern{margin:0;padding:28px 30px;border:1px solid var(--vi-line);border-left:3px solid var(--vi-teal);border-radius:0 16px 16px 0;background:var(--vi-card)}
.vi-k-kern h2{font-size:1.15rem;font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vi-akzent);line-height:1.4}
.vi-k-kern p{max-width:var(--vi-mass);margin:14px 0 0;color:var(--vi-ink);font-size:1.02rem;line-height:1.7}

/* ==========================================================================
   6 · EINSPALTIGER KÖRPER
   Die Fachseiten haben rechts einen klebenden Verzeichnisstreifen. Diese
   Seite hat vier Abschnitte; ein Verzeichnis dafür wäre Beiwerk ohne Nutzen
   und eine leere Hülle. Deshalb eine Spalte über die volle Inhaltsbreite:
   der Fließtext bleibt bei 34 em, die Kartenraster nutzen die ganze Breite.
   ========================================================================== */
.vi-k-body{padding:clamp(28px,3vw,44px) 0 clamp(64px,8vw,110px)}
.vi-k-abschnitt{padding-top:clamp(40px,5vw,64px)}
.vi-k-abschnitt:first-of-type{padding-top:clamp(28px,3vw,44px)}
.vi-k-abschnitt h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1}
.vi-k-abschnitt h2::after{content:"";display:block;width:52px;height:2px;margin-top:16px;background:var(--vi-teal)}
.vi-k-text{max-width:var(--vi-mass);margin:18px 0 0;color:var(--vi-fliess);font-size:1.0625rem;line-height:1.75}
.vi-k-text a{color:var(--vi-akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Merksatz: hier für den Abgrenzungshinweis. Kein teal-dark auf paper-2,
   siehe Kontrastregel im Kopfkommentar der Vorlage. */
.vi-k-merksatz{max-width:var(--vi-mass);margin:28px 0 0;padding:20px 24px;border-left:3px solid var(--vi-teal);border-radius:0 12px 12px 0;background:var(--vi-paper-2);color:var(--vi-ink);font-size:1.02rem;line-height:1.65}
.vi-k-merksatz strong{display:block;margin-bottom:8px}

/* ==========================================================================
   7 · KATEGORIEKARTEN
   Genau ein Link je Karte: die Überschrift trägt ihn, ein gedehntes
   Pseudo-Element macht die ganze Karte anklickbar. Zwei Links auf dasselbe
   Ziel wären für Screenreader-Nutzer doppelte Arbeit ohne Gewinn.
   ========================================================================== */
.vi-k-thema-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:30px}
.vi-k-thema{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--vi-line);border-radius:16px;background:var(--vi-card);transition:transform .18s,border-color .18s,box-shadow .18s}
.vi-k-thema:hover,.vi-k-thema:focus-within{transform:translateY(-3px);border-color:rgba(0,167,142,.7);box-shadow:var(--vi-schatten)}
.vi-k-thema>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--vi-line)}
.vi-k-thema-text{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 24px 24px}
.vi-k-thema-kat{margin:0;color:var(--vi-leise);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.vi-k-thema h3{margin:10px 0 0;font-size:1.75rem;line-height:1.02}
.vi-k-thema h3 a::after{content:"";position:absolute;inset:0}
.vi-k-thema h3 a:focus-visible{outline:none}
.vi-k-thema:focus-within{outline:3px solid var(--vi-fokus);outline-offset:3px}
.vi-k-thema-anriss{margin:14px 0 0;color:var(--vi-fliess);font-size:.92rem;line-height:1.7}
.vi-k-thema-daten{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.vi-k-thema-daten li{padding:5px 10px;border-radius:999px;background:var(--vi-paper-2);color:var(--vi-fliess);font-size:.68rem;font-weight:600}
.vi-k-thema-kern{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--vi-teal);border-radius:0 10px 10px 0;background:var(--vi-paper-2);color:var(--vi-ink);font-size:.82rem;line-height:1.6}
.vi-k-thema-mehr{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--vi-line);color:var(--vi-akzent);font-size:.78rem;font-weight:700}

/* ==========================================================================
   8 · EINSTIEGSFRAGEN
   Bewusst nicht aufklappbar: wer in der Halle am Handy nach "Nitrit" sucht,
   benutzt die Seitensuche des Browsers, und zugeklappte Texte sind für die
   in Firefox und Safari unsichtbar. Die Fragen sind echte Überschriften und
   stehen damit in der Gliederung, im Screenreader und im Ausdruck.
   ========================================================================== */
.vi-k-fragen-liste{margin:30px 0 0;display:grid;gap:2px;overflow:hidden;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-line)}
.vi-k-frage{padding:24px 26px;background:var(--vi-card)}
.vi-k-frage h3{font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:1rem;font-weight:700;line-height:1.45;color:var(--vi-ink);letter-spacing:0}
.vi-k-frage p{max-width:var(--vi-mass);margin:12px 0 0;color:var(--vi-fliess);font-size:.94rem;line-height:1.7}
.vi-k-frage-ziel{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;color:var(--vi-akzent);font-size:.82rem;font-weight:700}
.vi-k-frage-ziel:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   9 · AUSSTIEGE, AUTORENZEILE, LINKEDIN
   ========================================================================== */
.vi-k-cta{margin:36px 0 0;padding:30px;border-radius:16px;background:linear-gradient(135deg,#17191b,#102a27);color:#fff}
.vi-k-cta h2{margin:12px 0 0;font-size:clamp(1.9rem,3vw,2.5rem)}
.vi-k-cta h2::after{display:none}
.vi-k-cta .vi-kicker{color:var(--vi-teal)}
.vi-k-cta p{max-width:var(--vi-mass);margin:14px 0 0;color:rgba(255,255,255,.78);font-size:.94rem;line-height:1.65}
.vi-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.vi-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border:1px solid transparent;border-radius:999px;font-size:.875rem;font-weight:700;cursor:pointer;text-align:center}
.vi-button-primary{background:var(--vi-teal-dark);color:#fff}
.vi-button-primary:hover{background:var(--vi-teal)}
.vi-button-outline{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
.vi-k-cta .vi-button-outline:hover{border-color:var(--vi-teal)}

.vi-k-autor{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:36px 0 0;padding:22px 24px;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-card)}
.vi-k-autor-text{min-width:0;flex:1 1 260px}
.vi-k-autor strong{display:block;color:var(--vi-ink);font-size:.95rem}
.vi-k-autor span{display:block;margin-top:4px;color:var(--vi-leise);font-size:.78rem;line-height:1.55}

/* LinkedIn: reines <a>, kein Skript, kein Zählpixel. Vor dem Klick fließt
   kein einziges Datum zu LinkedIn. */
.vi-social{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--vi-line);border-radius:999px;color:var(--vi-akzent);font-size:.78rem;font-weight:700}
.vi-social:hover,.vi-social:focus-visible{border-color:var(--vi-teal);background:rgba(0,167,142,.08)}
.vi-social svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.vi-social em{font-style:normal;font-weight:600;opacity:.8}
.vi-footer .vi-social{color:rgba(255,255,255,.68);border-color:rgba(255,255,255,.2);margin:10px 0 0}
.vi-footer .vi-social:hover{color:var(--vi-teal);background:rgba(0,167,142,.1)}

/* ==========================================================================
   10 · SCHMALE SCHIRME - geprüft ab 320 px
   ========================================================================== */
@media (max-width:1080px){
  .vi-desktop-nav,.vi-header-cta{display:none}
  .vi-footer-grid{grid-template-columns:1.4fr 1fr}
}
@media (max-width:760px){
  html{scroll-padding-top:78px}
  .vi-container{width:min(var(--vi-max),calc(100% - 32px))}
  .vi-header-inner{width:min(100% - 32px,var(--vi-max));min-height:60px}
  /* KORREKTUR aus der Vorlage (gemessen am 09.08.2026 bei 320 px):
     `.vi-brand>span{display:none}` hat auch das Markenzeichen erwischt, denn
     die Kachel ist selbst ein direktes <span> von .vi-brand. Folge: unterhalb
     von 760 px verschwand die Marke vollstaendig und die Kopfzeile begann mit
     dem Sprachwechsler. Nur der Schriftzug soll weg, das Zeichen bleibt. */
  .vi-brand>span:not(.vi-brand-mark){display:none}
  .vi-k-hero h1{font-size:clamp(2.4rem,10vw,3.4rem);max-width:none}
  .vi-k-kern{padding:22px 20px}
  .vi-k-text{font-size:1rem;line-height:1.7}
  .vi-k-thema-text{padding:18px 18px 20px}
  .vi-k-frage{padding:20px 18px}
  .vi-k-cta{padding:24px 20px}
  .vi-actions{display:grid}
  .vi-actions .vi-button{width:100%}
  .vi-footer-grid{grid-template-columns:1fr;gap:34px}
  .vi-footer-bottom{flex-direction:column;gap:8px}
  .vi-k-autor{padding:18px}
}
@media (max-width:360px){
  .vi-container{width:calc(100% - 24px)}
  .vi-k-hero h1{font-size:2.15rem}
  .vi-k-meta li{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   11 · DRUCK
   Auf Papier ist diese Seite eine Wegweiserliste. Deshalb werden die
   Zieladressen ausgeschrieben: ein Link ohne Adresse ist auf Papier wertlos.
   ========================================================================== */
@media print{
  :root{--vi-paper:#fff;--vi-paper-2:#fff;--vi-card:#fff;--vi-ink:#000;--vi-fliess:#1a1a1a;--vi-leise:#444;--vi-muted:#333;--vi-line:#bbb;--vi-akzent:#000}
  html{scroll-padding-top:0}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  .vi-header,.vi-footer,.skip-link,.vi-k-cta{display:none!important}
  .vi-container{width:100%}
  .vi-k-text,.vi-k-frage p{max-width:none;font-size:10.5pt}
  h1{font-size:24pt} h2{font-size:16pt} h3{font-size:12.5pt}
  .vi-k-abschnitt{padding-top:16pt}
  h2,h3{break-after:avoid-page}
  .vi-k-thema,.vi-k-frage,.vi-k-autor,.vi-k-merksatz,figure{break-inside:avoid}
  .vi-k-thema-grid{grid-template-columns:1fr 1fr;gap:12pt}
  .vi-k-thema>img{aspect-ratio:16/9;max-height:38mm}
  .vi-k-thema:hover{transform:none;box-shadow:none}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  .vi-k-thema h3 a::after{position:static;content:" (" attr(href) ")";font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:8.5pt;color:#444;word-break:break-all}
}

/* ==========================================================================
   NACHBESSERUNG 09.08.2026 nach Hermanns Durchsicht am Bildschirm.
   Vier Befunde, hier zentral geloest, damit alle zehn Seiten gleich bleiben.
   ========================================================================== */

/* 1 · Satzbreite und Seitenbreite. Der Fliesstext war auf 34em gedeckelt,
   waehrend die Spalte daneben leer blieb: auf einem breiten Schirm entstand
   ein Loch zwischen Text und Inhaltsverzeichnis. */
/* Eine Seite, eine Fluchtlinie. Ich hatte den Artikel auf 1440px verbreitert
   und Kopf und Fuss danach auf die 1280px der Website zurueckgesetzt: dadurch
   begann der Inhalt 80px weiter links als das Logo darueber. Alles laeuft
   jetzt im Mass der Website, die Satzbreite bleibt bei 46em und damit deutlich
   breiter als die 34em, mit denen die Seiten in die Durchsicht gingen.
   Hermann, 09.08.2026: „anfang und ende sind unterschiedlich breit". */
:root{ --vi-max:1280px; --vi-mass:52em; }

/* Der Fliesstext wird zusammen mit der Spalte breiter, deshalb steigt auch die
   Schriftgroesse leicht mit: sonst stuenden auf einer Zeile zu viele Zeichen,
   und das Auge findet den Zeilenanfang nicht mehr zuverlaessig. */
@media screen{
  /* Nur am Bildschirm: im Druck gelten weiterhin die geprueften 10,5pt.
     Ohne diese Klammer haette die spaetere Regel die Druckgroesse ueberschrieben. */
  .vi-k-artikel p,.vi-k-artikel li,.vi-k-absatz{font-size:1.05rem;line-height:1.72}
}

/* Strukturbloecke nehmen die volle Spaltenbreite. Vorher endeten Tabellen,
   Videostrecke, Produktkarten und Kaesten an derselben Satzkante wie der
   Fliesstext; rechts daneben blieb ein Loch, das die Seite schmal wirken liess. */
.vi-k-artikel table,
.vi-k-tabelle,
.vi-k-faq-liste,
.vi-k-kern,
.vi-k-video,
.vi-k-videos,
.vi-k-produkte,
.vi-k-weiter-grid,
.vi-k-cta{max-width:none;width:100%}

/* 2 · Kopfbereich zweispaltig: Text links, Bild rechts daneben statt darunter.
   Unterhalb von 1080px wieder untereinander, dort ist Nebeneinander unlesbar. */
@media (min-width:1081px){
  .vi-k-hero>.vi-container{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(32px,4vw,64px);
    align-items:start;
  }
  .vi-k-hero>.vi-container>.vi-kicker,
  .vi-k-hero>.vi-container>h1,
  .vi-k-hero>.vi-container>.vi-k-lead,
  .vi-k-hero>.vi-container>.vi-breadcrumb,
  .vi-k-hero>.vi-container>.vi-k-meta{grid-column:1}
  /* Das Bild laeuft ueber die volle Hoehe der Textspalte und beginnt oben auf
     derselben Linie wie die Brotkrume. So entsteht kein Versatz, egal wie lang
     der Vorspann auf der jeweiligen Seite ist. */
  /* Kein min-height am Bild: eine erzwungene Mindesthoehe verteilt das
     Reihenraster ueber alle Textzeilen und reisst eine Luecke zwischen
     Brotkrume und Ueberschrift. Das Bild bekommt sein Mass ueber das
     Seitenverhaeltnis und richtet sich oben aus. */
  /* `grid-row:1/-1` waere hier eine Falle: ohne explizite Zeilenvorlage zeigt
     -1 auf das Ende des EXPLIZITEN Rasters, und das hat nur eine Linie. Die
     Regel faellt damit auf Zeile 1 zusammen, und Zeile 1 wird so hoch wie das
     Bild - genau das riss die Luecke zwischen Brotkrume und Ueberschrift.
     Gemessen am 09.08.2026: Zeile 1 war 490,6 px hoch. Deshalb span statt -1. */
  .vi-k-hero>.vi-container>.vi-k-bild{grid-column:2;grid-row:1/span 6;margin:0;align-self:start}
  .vi-k-hero>.vi-container>.vi-k-bild img{aspect-ratio:4/3;height:auto}
  .vi-k-hero>.vi-container>.vi-k-lead{max-width:36em}
}

/* 3 · Haeufige Fragen ohne Kaestchen. Die weissen Karten machten die schmale
   Spalte doppelt sichtbar; ohne sie traegt der Text die volle Breite. */
.vi-k-faq-liste{border:0;border-radius:0;background:transparent;gap:0;overflow:visible}
.vi-k-faq-item{padding:24px 0;background:transparent;border-top:1px solid var(--vi-line)}
.vi-k-faq-item:first-child{border-top:0;padding-top:8px}
.vi-k-faq-item p{max-width:none}
.vi-k-faq-item h3{font-size:1.05rem}

/* 4b · Absaetze, die ihre Layoutangaben als Inlinestil trugen. Ein Inlinestil
   schlaegt jede Regel im Stilblock, unabhaengig von der Reihenfolge: 29 Absaetze
   blieben deshalb bei 34em stehen, waehrend der Rest der Seite auf 52em ging.
   Die Angaben sind jetzt eine Klasse, damit die Seite EINE Satzbreite hat.
   Gefunden von Codex Sol, 09.08.2026. */
.vi-k-absatz{max-width:var(--vi-mass);margin:18px 0 0;color:var(--vi-fliess)}

/* 5 · Markenzeichen im Fussbereich. Die Wissensseiten hatten die Regeln des
   Kopfbereichs nicht mit uebernommen; das Emblem wurde dadurch in Originalgroesse
   ausgegeben und ueberragte den halben Fussbereich. Werte aus SiteHeader.css. */
.vi-footer .vi-brand{display:flex;align-items:center;gap:11px;min-width:0;color:#f2eee7;text-decoration:none}
.vi-footer .vi-brand img{flex:none;width:86px;height:42px;object-fit:contain;filter:brightness(1.25)}
.vi-footer .vi-brand>span{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.vi-footer .vi-brand strong{font-size:.95rem;letter-spacing:.01em;white-space:nowrap;font-weight:700}
.vi-footer .vi-brand strong b{color:var(--vi-teal,#00a78e);font-weight:700}
.vi-footer .vi-brand small{font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#9da29f}
.vi-footer .vi-brand-footer{color:#fff;margin-bottom:14px}

/* 4 · Quellen bleiben eine schlichte, nicht aufklappbare Liste. */
.vi-k-quellen li{max-width:none}

/* ==========================================================================
   NACHTRAG nach Sols Regressionspruefung, 09.08.2026
   ========================================================================== */

/* Schlusszeile im Fussbereich: rgba(255,255,255,.42) ergab auf #17191b nur
   4,09:1 und verfehlte damit bei 0,64rem die Stufe AA. .55 ergibt 6,10:1. */
.vi-footer-bottom{color:rgba(255,255,255,.55)}

/* Die Marke im Fussbereich sprengte bei 320px den Rahmen: Emblem 86px plus
   Abstand plus die gesperrte Schlusszeile brauchten rechnerisch bis zu 311px,
   verfuegbar waren 288px. body{overflow-x:hidden} haette das nur verdeckt. */
@media (max-width:360px){
  .vi-footer .vi-brand{flex-wrap:wrap;gap:8px}
  .vi-footer .vi-brand small{white-space:normal;letter-spacing:.08em}
  .vi-footer .vi-brand strong{white-space:normal}
}

/* ==========================================================================
   NACHTRAG 2 nach dem Designreview, 09.08.2026
   ========================================================================== */

/* 1 · KRITISCH: Die Ueberschrift lief zwischen 1081 und rund 1350 px in das
   Heldenbild. „Kuehlschmierstoffe" braucht 541 px, die Spalte bot 492 px.
   Deutsche Komposita brechen ohne Hilfe nicht. */
.vi-k-hero h1{hyphens:auto;overflow-wrap:break-word}

/* 2 · KRITISCH und selbst verursacht: Mit den Kaestchen hatte ich der
   Fragenliste auch das Satzmass genommen. Antworten liefen mit 125 bis 143
   Zeichen je Zeile, der Einleitungssatz daneben mit 69. Quellen ebenso. */
.vi-k-faq-item p{max-width:var(--vi-mass)}
.vi-k-quellen li{max-width:var(--vi-mass)}

/* 3 · 52em waren zu weit: gemessen 99 bis 112 Zeichen je Zeile. 46em liegen
   bei rund 92 und damit im lesbaren Bereich, bleiben aber deutlich breiter als
   die 34em, mit denen die Seiten in die Durchsicht gingen. */
/* Hermann, 09.08.2026: „der abstand zwischen textende und der Inhalt-dieser-
   Seite-Box ist ganz schoen gross … nur schoen wenn die tabellen angezeigt
   werden." Der tote Streifen zwischen Satzkante und Inhaltsverzeichnis lag bei
   171px. Mit 52em sind es rund 70px, und der Wechsel zwischen Fliesstext und
   Tabelle faellt nicht mehr auf. Weiter gehen hiesse ueber 110 Zeichen je
   Zeile, dann findet das Auge den Zeilenanfang nicht mehr zuverlaessig. */
:root{ --vi-mass:52em; }

/* 4 · Der Fussbereich war 160 px breiter und 56 px flacher als der der
   Startseite und wirkte dadurch angeklebt. Kopf und Fuss behalten das Mass der
   Website; nur der Artikelbereich nutzt die groessere Breite. */
/* Kopf und Fuss brauchen keine eigene Breite mehr, seit die ganze Seite im
   Mass der Website laeuft. Nur die Polsterung unten bleibt angeglichen. */
.vi-footer{padding-bottom:96px}
.vi-footer .vi-brand strong{font-weight:900}

/* 5 · Das Heldenbild war starr auf 4:3 und passte damit nur auf einer von vier
   Seiten zur Textmenge; unten klaffte bis zu 248 px Luft. Jetzt waechst es mit
   der Textspalte mit. */
@media (min-width:1081px){
  .vi-k-hero>.vi-container>.vi-k-bild{align-self:stretch}
  .vi-k-hero>.vi-container>.vi-k-bild img{height:100%;min-height:320px;aspect-ratio:auto}
}

/* 6 · Unterhalb von 1081 px verschwand der Handlungsaufruf aus der Kopfzeile,
   waehrend die Startseite ihn behaelt. */
@media (max-width:1080px){
  .vi-header-cta{display:inline-flex}
}

/* ==========================================================================
   NACHTRAG 3 nach Hermanns zweiter Durchsicht, 09.08.2026
   ========================================================================== */

/* 1 · Die Marke in der Kopfzeile war eine CSS-Kachel statt des Emblems, der
   Untertitel stand auf „Speciality" statt „Specialty", die Sprachwahl auf
   Kuerzeln statt Woertern und der Knopf auf einem anderen Text als auf der
   Website. Markup ist angeglichen, hier die Groessenregeln dazu. */
.vi-header .vi-brand img{flex:none;width:86px;height:42px;object-fit:contain;filter:brightness(1.25)}
.vi-header .vi-brand strong b{color:var(--vi-teal,#00a78e);font-weight:900}
.vi-header .vi-brand strong{font-weight:900}

/* 2 · Der Kasten mit der Kernaussage lief ueber die volle Spaltenbreite,
   waehrend sein Text bei 46em endete: rechts blieb ein Drittel leer. Der Kasten
   nimmt jetzt das Mass seines Textes an, statt Luft einzurahmen. */
.vi-k-kern{max-width:calc(var(--vi-mass) + 6em);width:auto}

/* 3 · „Theorie" begann unmittelbar unter dem Kasten. Ein Abschnitt, der eine
   neue Ebene aufmacht, braucht mehr Abstand nach oben als zwei Absaetze
   untereinander. */
.vi-k-artikel>section:first-of-type{padding-top:clamp(56px,6vw,88px)}
.vi-k-kern{margin-bottom:clamp(8px,1.5vw,20px)}

/* ==========================================================================
   NACHTRAG 4 nach der Zweitmeinung aus dem Team, 09.08.2026
   ========================================================================== */

/* 1 · KRITISCH: Unterhalb von 1080px war die Navigation ersatzlos verschwunden.
   Die Website setzt dort ein Klappmenue; die Wissensseiten hatten dieses
   Element gar nicht, die Kopfzeile blieb einfach leer. Markup ergaenzt, hier
   die Regeln dazu. */
.vi-mobile-menu{display:none;position:relative;margin-left:auto}
.vi-menu-button{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:transparent;
  cursor:pointer;list-style:none}
.vi-menu-button::-webkit-details-marker{display:none}
.vi-menu-button>span{display:block;height:2px;background:#f2eee7;border-radius:2px}
.vi-mobile-menu[open] .vi-menu-button{border-color:var(--vi-teal,#00a78e)}
.vi-mobile-nav{position:absolute;right:0;top:calc(100% + 10px);z-index:60;display:grid;gap:2px;
  min-width:min(280px,calc(100vw - 32px));padding:10px;border-radius:14px;
  background:#1c1f22;box-shadow:0 18px 40px rgba(0,0,0,.38)}
.vi-mobile-nav a{padding:11px 12px;border-radius:9px;color:#f2eee7;font-size:.92rem;text-decoration:none}
.vi-mobile-nav a:hover,.vi-mobile-nav a:focus-visible{background:rgba(255,255,255,.08)}
.vi-mobile-nav-cta{margin-top:6px;background:var(--vi-teal,#00a78e);color:#0d1013;font-weight:700;text-align:center}
@media (max-width:1080px){
  .vi-mobile-menu{display:block}
  .vi-header-cta{display:none}
}

/* 2 · Der Kastentext war gegenueber jedem anderen Absatz um 28px eingerueckt:
   drei rechte Kanten dicht beieinander, und der Text begann nicht auf der
   Fluchtlinie. Der Kasten blutet jetzt um seine eigene Polsterung nach links,
   dadurch fluchtet sein Text mit dem Fliesstext. */
/* Gemessen: Polsterung 30px, Rahmenlinie links 2,4px. Der Kasten blutet genau
   um diese Summe nach links, damit sein Text auf derselben Fluchtlinie beginnt
   wie jeder andere Absatz. Vorher standen sie 33px auseinander. */
.vi-k-kern{max-width:calc(var(--vi-mass) + 62.4px);margin-left:-32.4px}
@media (max-width:760px){ .vi-k-kern{margin-left:0;max-width:none} }

/* 3 · Der Abstand zur ersten Ueberschrift war mit 135px um 15 Prozent ueber
   dem Median aller anderen Abschnittsuebergaenge (118px). Zurueck ins System. */
.vi-k-artikel>section:first-of-type{padding-top:clamp(40px,5vw,64px)}

/* 4 · Feinabgleich der Kopfzeile gegen die Website. */
.vi-header .vi-desktop-nav a{font-weight:500;padding:0}
.vi-header .vi-brand strong{font-weight:700;letter-spacing:.01em}
.vi-header .vi-brand strong b{font-weight:700}
.vi-lang{display:flex;align-items:center;gap:10px;margin:0}

/* 5 · Bei schmalen Schirmen war den Tabellen nicht anzusehen, dass sie seitlich
   scrollen. Ein Schattenrand am rechten Innenrand zeigt es. */
@media (max-width:760px){
  .vi-k-tabelle,.vi-k-artikel .tabellenrahmen{
    background:linear-gradient(to left,rgba(0,0,0,.10),rgba(0,0,0,0) 24px);
  }
}

/* ==========================================================================
   NACHTRAG 5, 09.08.2026: Quellen ans Ende und eingeklappt.
   Hermann: „ich will das die quellen ganz zum schluss kommen und per default
   eingeklappt sind." Sie bleiben vollstaendig vorhanden und durchsuchbar,
   sobald man sie aufklappt; im Ausdruck werden sie ohnehin aufgeklappt.
   ========================================================================== */
.vi-k-quellen{padding-top:clamp(32px,4vw,48px);padding-bottom:clamp(40px,5vw,64px);border-top:1px solid var(--vi-line)}
.vi-k-quellenklappe>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  cursor:pointer;list-style:none;padding:4px 0}
.vi-k-quellenklappe>summary::-webkit-details-marker{display:none}
.vi-k-quellenklappe>summary>span:first-child{font-family:Montserrat,"Segoe UI",Arial,sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vi-akzent)}
.vi-k-quellenzahl{color:var(--vi-leise);font-size:.8rem}
.vi-k-quellenklappe>summary::before{content:"+";margin-right:8px;font-weight:700;color:var(--vi-akzent)}
.vi-k-quellenklappe[open]>summary::before{content:"−"}
.vi-k-quellenklappe>summary:focus-visible{outline:2px solid var(--vi-akzent);outline-offset:3px;border-radius:6px}
@media print{ .vi-k-quellenklappe>summary::before{content:""} }