
/* ==========================================================================
   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;

  /* Nur für die Wissensseite. Der Rest der Website hat diese Werte nicht,
     weil er keine 3.000-Wort-Strecke tragen muss. */
  --vi-mass:34em;            /* Satzbreite: ~68 Zeichen. Siehe Abschnitt 4. */
  --vi-akzent:var(--vi-teal-dark);   /* im Dunkelmodus auf --vi-teal gedreht */
  --vi-fliess:#3a3f45;       /* Fließtext dunkler als --vi-muted: 8,4:1      */
  --vi-leise:#5a6067;        /* Beleg- und Fußzeilen: 6,1:1 auf --vi-card    */
  --vi-fokus:var(--vi-teal-dark);
  --vi-schatten:0 20px 44px rgba(21,23,25,.14);
}

/* Dunkelmodus. Die Live-Website ist heute hell festgelegt
   (BaseLayout.astro: <meta name="color-scheme" content="light">).
   Diese Vorlage bringt den Dunkelmodus fertig mit; ob er live geht,
   entscheidet Hermann. Umschalten zum Prüfen: data-theme="dark" am <html>. */
@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);   /* teal-dark schafft auf dunkel nur 3,5:1 */
    --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{
  /* Der Kopf klebt oben. Ohne diesen Wert landet jedes Sprungziel UNTER dem
     Kopf und die Überschrift ist unsichtbar; das ist WCAG 2.4.11
     (Fokus nicht verdeckt). 90 px = Kopfhöhe 68 px + Luft.
     ACHTUNG beim Einbau in Astro: global.css setzt scroll-padding-top BEREITS
     auf 90 px. Dort NICHT zusätzlich scroll-margin-top an die Überschriften
     hängen; die Werte addieren sich (bekannter Fehler vom 08.08.2026). */
  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}
h4{font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-weight:700;margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}

.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,video: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}


/* Unter 1360 verschwindet der Schriftzug, das Emblem bleibt - wortgleich
   zu global.css. Ohne diese Regel lief der Schriftzug hier bei 1200 px um
   142 px ueber seinen Kasten hinaus, schon vor dem Wissen-Link. */
@media (max-width:1359px){}


/* ==========================================================================
   4 · LESEFORTSCHRITT
   Rein dekorativ, deshalb aria-hidden. Ein Balken, der einem Screenreader
   Prozentzahlen vorliest, ist Lärm, kein Nutzen. Ohne JavaScript bleibt er
   einfach auf 0 stehen und stört nichts.
   ========================================================================== */
.vi-progress{position:sticky;top:68px;z-index:55;height:3px;background:transparent}
.vi-progress>i{display:block;height:100%;width:0;background:var(--vi-teal);transition:width .08s linear}
@media (prefers-reduced-motion:reduce){.vi-progress>i{transition:none}}

/* ==========================================================================
   5 · 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-line);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}
.vi-k-bild figcaption{margin:12px 2px 0;color:var(--vi-muted);font-size:.82rem;line-height:1.55}

/* ==========================================================================
   6 · KERNAUSSAGE: steht VOR dem Inhaltsverzeichnis.
   Begründung siehe research/06-ia-design-frontend.md, Abschnitt A.
   ========================================================================== */
.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}

/* ==========================================================================
   7 · ZWEISPALTER: Text links, Inhaltsverzeichnis rechts.
   Rechts, nicht links: so beginnt die Textspalte an genau derselben Kante wie
   jeder andere Abschnitt der Website. Der Blick findet den Artikel sofort,
   das Verzeichnis ist Beiwerk und sieht auch so aus.
   ========================================================================== */
.vi-k-body{padding:clamp(28px,3vw,44px) 0 clamp(64px,8vw,110px)}
.vi-k-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:clamp(32px,4vw,64px);align-items:start}

.vi-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:22px;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-card)}
.vi-toc h2{font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vi-leise);line-height:1.4}
.vi-toc ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:toc}
.vi-toc li{counter-increment:toc}
.vi-toc a{display:flex;gap:10px;align-items:baseline;min-height:24px;padding:7px 0;color:var(--vi-fliess);font-size:.8rem;line-height:1.45;border-left:2px solid transparent;padding-left:12px;margin-left:-14px}
.vi-toc a::before{content:counter(toc,decimal-leading-zero);flex:0 0 auto;color:var(--vi-leise);font-size:.68rem;font-weight:700}
.vi-toc a:hover{color:var(--vi-ink)}
.vi-toc a[aria-current="true"]{border-left-color:var(--vi-teal);color:var(--vi-ink);font-weight:700}
.vi-toc a[aria-current="true"]::before{color:var(--vi-akzent)}
.vi-toc-mobil{display:none}

/* ==========================================================================
   8 · ARTIKELTEXT
   Satzbreite 34em ≈ 68 Zeichen. Darüber verliert das Auge beim Zeilenwechsel
   den Anschluss, darunter zerhackt es den Satzbau. Zeilenabstand 1,75 statt
   der 1,6 der übrigen Seite: 3.000 Wörter sind eine andere Leseaufgabe als
   ein Startseitenabsatz.
   ========================================================================== */
.vi-k-artikel>section{padding-top:clamp(40px,5vw,64px)}
.vi-k-artikel>section:first-child{padding-top:0}
.vi-k-artikel h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1}
.vi-k-artikel h2::after{content:"";display:block;width:52px;height:2px;margin-top:16px;background:var(--vi-teal)}
.vi-k-artikel h3{margin:36px 0 0;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.1}
.vi-k-artikel h4{margin:26px 0 0;font-size:.95rem}
.vi-k-artikel p,
.vi-k-artikel li{max-width:var(--vi-mass);color:var(--vi-fliess);font-size:1.0625rem;line-height:1.75}
.vi-k-artikel p{margin:18px 0 0}
.vi-k-artikel ul,.vi-k-artikel ol{margin:18px 0 0;padding-left:22px}
.vi-k-artikel li{margin:9px 0}
.vi-k-artikel li::marker{color:var(--vi-teal)}
.vi-k-artikel strong{color:var(--vi-ink)}
.vi-k-artikel a:not(.vi-button):not(.vi-k-backlink){color:var(--vi-akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Merksatz im Fließtext. Kein Zitat, deshalb blockquote nur dort, wo
   wirklich zitiert wird (siehe .vi-k-zitat). */
.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-zitat{max-width:var(--vi-mass);margin:28px 0 0;padding:0 0 0 24px;border-left:3px solid var(--vi-line)}
.vi-k-zitat p{margin:0;font-style:italic}
.vi-k-zitat cite{display:block;margin-top:10px;color:var(--vi-leise);font-size:.8rem;font-style:normal}

/* Belegzeile: das ist die Stelle, an der die Regel "kein Satz ohne Beleg"
   sichtbar wird. Sie steht am Ende eines Abschnitts, nicht als Fußnote. */
.vi-k-beleg{max-width:var(--vi-mass);margin:22px 0 0;padding-top:14px;border-top:1px solid var(--vi-line);color:var(--vi-leise);font-size:.8rem;line-height:1.6}

.vi-k-backlink{display:inline-flex;align-items:center;gap:8px;min-height:24px;margin-top:30px;color:var(--vi-akzent);font-size:.76rem;font-weight:700}
.vi-k-backlink:hover{text-decoration:underline;text-underline-offset:3px}

/* Tabellen. Bei 320 px passt keine vierspaltige Prüftabelle. Sie bekommt
   deshalb einen scrollbaren Rahmen, der per Tastatur erreichbar ist;
   ein Bereich, der nur mit der Maus scrollbar ist, sperrt Tastaturnutzer aus. */
.vi-k-tabelle{max-width:100%;margin:26px 0 0;overflow-x:auto;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-card)}
.vi-k-tabelle:focus-visible{outline:3px solid var(--vi-fokus);outline-offset:2px}
.vi-k-tabelle table{width:100%;min-width:560px;border-collapse:collapse;font-size:.86rem}
.vi-k-tabelle caption{padding:18px 20px 0;color:var(--vi-leise);font-size:.78rem;text-align:left;line-height:1.55}
.vi-k-tabelle th,.vi-k-tabelle td{padding:13px 16px;border-bottom:1px solid var(--vi-line);text-align:left;vertical-align:top;color:var(--vi-fliess)}
.vi-k-tabelle thead th{color:var(--vi-ink);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.vi-k-tabelle tbody tr:last-child th,.vi-k-tabelle tbody tr:last-child td{border-bottom:0}
.vi-k-tabelle tbody th{color:var(--vi-ink);font-weight:700}

/* ==========================================================================
   9 · VIDEO
   preload="none" lädt keinen einzigen Byte des Films, bis der Nutzer auf
   Abspielen drückt. Das Standbild wird geladen, deshalb gehört es klein
   gehalten (1280×720, ≤ 120 kB). width/height am <video> reservieren den
   Platz, damit beim Laden nichts springt (Cumulative Layout Shift = 0).
   ========================================================================== */
.vi-k-videos{padding-top:clamp(40px,5vw,64px)}
.vi-k-video{margin:26px 0 0;padding:0;border:1px solid var(--vi-line);border-radius:16px;background:var(--vi-card);overflow:hidden}
.vi-k-video video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:#000}
.vi-k-video-text{padding:22px 24px}
.vi-k-video h3{font-size:1.35rem;line-height:1.15}
.vi-k-video-daten{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.vi-k-video-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-video-text>p{max-width:var(--vi-mass);margin:14px 0 0;color:var(--vi-fliess);font-size:.92rem;line-height:1.65}
/* Der KI-Hinweis steht sichtbar neben dem Film, nie hinter einem Aufklapper.
   Wortlaut kommt aus data/media-videos.json, nicht aus dem Bauchgefühl. */
.vi-k-ai{max-width:var(--vi-mass);margin:14px 0 0}
.vi-k-ai>summary{min-height:24px;display:flex;align-items:center;gap:8px;color:var(--vi-leise);font-size:.76rem;font-weight:600;cursor:pointer;list-style:none}
.vi-k-ai>summary::-webkit-details-marker{display:none}
.vi-k-ai>summary::before{content:"+";font-weight:700}
.vi-k-ai[open]>summary::before{content:"−"}
.vi-k-ai>p{max-width:var(--vi-mass);margin:10px 0 0;padding:0;color:var(--vi-leise);font-size:.78rem;line-height:1.55}
.vi-k-transkript{margin:16px 0 0;border-top:1px solid var(--vi-line);padding-top:14px}
.vi-k-transkript>summary{min-height:24px;display:flex;align-items:center;gap:8px;color:var(--vi-akzent);font-size:.82rem;font-weight:700;cursor:pointer;list-style:none}
.vi-k-transkript>summary::-webkit-details-marker{display:none}
.vi-k-transkript>summary::before{content:"+";font-weight:700}
.vi-k-transkript[open]>summary::before{content:"−"}
.vi-k-transkript>div{max-width:var(--vi-mass);margin-top:14px;color:var(--vi-fliess);font-size:.88rem;line-height:1.7}
.vi-k-transkript p{margin:0 0 12px}

/* ==========================================================================
   10 · PRODUKTBEZUG. Dezent heißt: eine Karte, kein Banner.
   ========================================================================== */
.vi-k-produkte{padding-top:clamp(40px,5vw,64px)}
.vi-k-produkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:26px}
.vi-k-produkt{display:flex;flex-direction:column;padding:24px;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-card)}
.vi-k-produkt-kat{margin:0;color:var(--vi-leise);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.vi-k-produkt h3{margin:10px 0 0;font-size:1.7rem;line-height:1}
.vi-k-produkt p{margin:12px 0 0;color:var(--vi-fliess);font-size:.85rem;line-height:1.6}
.vi-k-produkt-quelle{margin-top:auto;padding-top:16px;color:var(--vi-leise);font-size:.7rem}
.vi-k-produkt a{margin-top:14px;color:var(--vi-akzent);font-size:.76rem;font-weight:700;min-height:24px;display:inline-flex;align-items:center}

/* ==========================================================================
   11 · FAQ
   Bewusst NICHT aufklappbar. Wer in der Halle am Handy nach "Nitrosamin"
   sucht, benutzt die Seitensuche des Browsers. Zugeklappte Antworten sind
   in Firefox und Safari für diese Suche unsichtbar; das ist ein Defekt,
   kein Feature. Die Fragen sind echte Überschriften (h3) und stehen damit
   in der Gliederung, im Screenreader und im Ausdruck.
   ========================================================================== */
.vi-k-faq{padding-top:clamp(40px,5vw,64px)}
.vi-k-faq-liste{margin:26px 0 0;display:grid;gap:2px;overflow:hidden;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-line)}
.vi-k-faq-item{padding:24px 26px;background:var(--vi-card)}
.vi-k-faq-item 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-faq-item p{max-width:var(--vi-mass);margin:12px 0 0;color:var(--vi-fliess);font-size:.94rem;line-height:1.7}

/* ==========================================================================
   12 · AUSSTIEGE, AUTORENZEILE, WEITERLESEN
   ========================================================================== */
.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 .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}


.vi-k-weiter{padding-top:clamp(40px,5vw,64px)}
.vi-k-weiter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:26px}
.vi-k-weiter-karte{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:18px;overflow:hidden;border:1px solid var(--vi-line);border-radius:16px;background:var(--vi-paper-2);transition:transform .18s,border-color .18s}
.vi-k-weiter-karte:hover,.vi-k-weiter-karte:focus-visible{transform:translateY(-3px);border-color:rgba(0,167,142,.7);box-shadow:var(--vi-schatten)}
.vi-k-weiter-karte small{color:var(--vi-leise);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.vi-k-weiter-karte strong{margin-top:8px;color:var(--vi-ink);font-family:Bebas,Impact,"Arial Narrow",sans-serif;font-size:1.5rem;font-weight:400;line-height:1.05}
.vi-k-weiter-karte span{margin-top:8px;color:var(--vi-fliess);font-size:.8rem;line-height:1.5}

.vi-k-quellen{padding-top:clamp(40px,5vw,64px)}
.vi-k-quellen ol{max-width:none;margin:22px 0 0;padding-left:22px}
.vi-k-quellen li{max-width:calc(var(--vi-mass) + 6em);margin:12px 0;color:var(--vi-leise);font-size:.82rem;line-height:1.65}
.vi-k-quellen a{color:var(--vi-akzent);word-break:break-word}

/* ==========================================================================
   13 · SCHMALE SCHIRME, geprüft ab 320 px
   Die Reihenfolge im Quelltext ist die Lesereihenfolge. Es wird NICHTS per
   CSS-order umsortiert: das entkoppelt Sicht- und Tabulatorreihenfolge und
   verstößt gegen WCAG 1.3.2 / 2.4.3.
   ========================================================================== */
@media (max-width:1100px){
  
  
  .vi-k-layout{grid-template-columns:minmax(0,1fr)}
  /* Das Verzeichnis wird vom klebenden Streifen zum Aufklapper und wandert
     im Quelltext an die Stelle direkt hinter der Kernaussage. */
  .vi-toc{display:none}
  .vi-toc-mobil{display:block;margin:26px 0 0;border:1px solid var(--vi-line);border-radius:14px;background:var(--vi-card)}
  .vi-toc-mobil>summary{min-height:48px;display:flex;align-items:center;gap:10px;padding:12px 20px;color:var(--vi-ink);font-size:.85rem;font-weight:700;cursor:pointer;list-style:none}
  .vi-toc-mobil>summary::-webkit-details-marker{display:none}
  .vi-toc-mobil>summary::after{content:"▾";margin-left:auto;color:var(--vi-akzent)}
  .vi-toc-mobil[open]>summary::after{content:"▴"}
  .vi-toc-mobil ol{margin:0;padding:0 20px 16px;list-style:none;counter-reset:toc}
  .vi-toc-mobil li{counter-increment:toc}
  .vi-toc-mobil a{display:flex;gap:10px;min-height:44px;align-items:center;color:var(--vi-fliess);font-size:.86rem;border-top:1px solid var(--vi-line)}
  .vi-toc-mobil a::before{content:counter(toc,decimal-leading-zero);color:var(--vi-leise);font-size:.7rem;font-weight:700}
}
@media (max-width:760px){
  html{scroll-padding-top:78px}
  .vi-progress{top:60px}
  .vi-container{width:min(var(--vi-max),calc(100% - 32px))}
  
  
  .vi-k-hero h1{font-size:clamp(2.4rem,10vw,3.4rem);max-width:none}
  .vi-k-kern{padding:22px 20px}
  .vi-k-artikel p,.vi-k-artikel li{font-size:1rem;line-height:1.7}
  .vi-k-video-text{padding:18px 18px}
  .vi-k-faq-item{padding:20px 18px}
  .vi-k-cta{padding:24px 20px}
  .vi-actions{display:grid}
  .vi-actions .vi-button{width:100%}
  
  
  .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}
}

/* ==========================================================================
   14 · DRUCK
   Ein Instandhaltungsleiter druckt so eine Seite und legt sie in den
   Schichtordner. Der Ausdruck muss deshalb den Fachteil tragen und die
   Bedienelemente weglassen.
   ========================================================================== */
@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-progress,.vi-footer,.vi-toc,.vi-toc-mobil,.vi-k-cta,
  .vi-k-weiter,.skip-link,.vi-k-backlink{display:none!important}
  .vi-container{width:100%}
  .vi-k-layout{display:block}
  .vi-k-artikel p,.vi-k-artikel li{max-width:none;font-size:10.5pt}
  h1{font-size:24pt} h2{font-size:16pt} h3{font-size:12.5pt}
  .vi-k-artikel>section,.vi-k-faq,.vi-k-videos,.vi-k-produkte,.vi-k-quellen{padding-top:16pt}
  h2,h3{break-after:avoid-page}
  .vi-k-tabelle,.vi-k-video,.vi-k-faq-item,.vi-k-produkt,figure{break-inside:avoid}
  .vi-k-tabelle{overflow:visible;border:1px solid #bbb}
  .vi-k-tabelle table{min-width:0}
  /* Der Film lässt sich nicht drucken. Das Standbild und der Hinweis bleiben,
     damit im Ausdruck steht, dass es dazu einen Film gibt, mit Adresse. */
  .vi-k-video video{display:none}
  .vi-k-ai{display:block}
  .vi-k-ai>p{display:block!important}
  .vi-k-transkript{display:block}
  .vi-k-transkript>div{display:block!important}
  .vi-k-transkript>summary{list-style:none;font-weight:700}
  /* Externe Ziele ausschreiben: ein Link ohne Adresse ist auf Papier wertlos. */
  .vi-k-artikel a[href^="http"]::after,
  .vi-k-quellen a[href^="http"]::after{content:" (" attr(href) ")";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 1100px 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)}

/* Kleiner Hinweistext unter dem Produktblock, vorher ebenfalls als Inlinestil. */
.vi-k-hinweiszeile{max-width:var(--vi-mass);margin:26px 0 0;color:var(--vi-fliess);font-size:.94rem;line-height:1.7}


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


/* 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){
  
  
}

/* ==========================================================================
   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; }


/* 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:1100px){
  
}


/* 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)}


@media (max-width:1100px){
  
  
}

/* 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)}


/* 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:""} }

/* Zurueckgeholt am 12.08.2026. Diese Regeln sind beim Entfernen der kopierten
   Kopf-/Fusszeilenregeln mit weggefallen, weil .vi-social in meiner Chrome-Liste
   stand. Auf diesen Seiten heisst aber AUCH der LinkedIn-Kasten im Artikeltext
   so - und ohne .vi-social svg{width:20px} rendert das Zeichen 386 px gross.
   Hermann hat es gemeldet: "das mit LinkedIn ist viel zu gross".

   Kimi K3 hatte genau davor gewarnt: der Rundlauf-Beweis sichert das Zerlegen,
   nicht die AUSWAHL der entfernten Regeln. Ich hatte die Auswahl nur gegen die
   .vi-k-*-Klassen geprueft, nicht gegen alle Klassen des Artikelrumpfs.

   .vi-social gehoert nicht mehr zur Chrome-Liste: die gemeinsame Fusszeile
   benutzt .footer-social, diese Klasse lebt nur noch im Artikeltext. */
/* 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}

/* Hermann 12.08.2026, Anhang 1: "hier sollte ich ebenfalls durch klicken auf
   die detail einzelansicht des produktes verlinkt werden."

   Dieselbe Bauart wie im Katalog: EIN Link traegt die Flaeche - der
   Produktname, dessen ::after sich ueber die Karte legt. Der zugaengliche Name
   des Links bleibt damit der Produktname statt des ganzen Kartentextes.

   Die Ebene ist nicht schmueckend: ohne sie malen die spaeteren Geschwister
   ueber die Ueberlagerung, und ein Klick auf die Beschreibung geht ins Leere.
   Am 12.08. vormittags im Katalog gemessen, drei von vier Faellen. */
.vi-k-produkt{position:relative;transition:border-color .18s,background .18s}
.vi-k-produkt .vi-k-produkt-link::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:1}
.vi-k-produkt:hover,.vi-k-produkt:focus-within{border-color:var(--vi-akzent)}
.vi-k-produkt h3 .vi-k-produkt-link{color:inherit}
.vi-k-produkt:hover h3 .vi-k-produkt-link{color:var(--vi-akzent)}
.vi-k-produkt .vi-k-produkt-link:focus-visible{outline:3px solid var(--vi-akzent);outline-offset:4px}