/* =========================================================
   Rotaris — Stylesheet
   Schriften: Sora (Überschriften, Logo), Public Sans (Text und Zahlen)
   Akzent: Gold. Keine Monospace, Zahlen laufen über Tabellenziffern.
   Alle Farbpaare sind gegen WCAG 2.1 AA geprüft.
   ========================================================= */

/* --- Schriften, lokal gehostet (kein Google-CDN, DSGVO-sicher) --- */
@font-face{
  font-family:"Sora";
  src:url("fonts/Sora-Variable.woff2") format("woff2-variations"),
      url("fonts/Sora-Variable.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/PublicSans-Variable.woff2") format("woff2-variations"),
      url("fonts/PublicSans-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink-950:#080B0D; --ink-900:#101619; --ink-800:#1A2226; --ink-700:#273237; --ink-600:#3A484F;
  --ink-500:#546A73; --ink-400:#7B8B94; --ink-300:#A6B3BA; --ink-200:#CBD4D8; --ink-100:#E5EAEC; --ink-50:#F3F6F7;
  --porcelain:#FBFAF7; --porcelain-2:#F4F2ED;

  /* Gold. Geprüft: sig-400 auf Schwarz 10,2:1 · sig-500 mit dunkler Schrift 7,7:1
     · sig-700 auf Porzellan 5,9:1. sig-600 NUR für Flächen, nicht für Text auf Hell. */
  --sig-200:#F7E3B4; --sig-300:#F0CE87; --sig-400:#E0B44E; --sig-500:#C99A32;
  --sig-600:#A67D1F; --sig-700:#7C5C15; --sig-800:#5C440F;

  --stock:#0B7A3C; --danger:#D6303A;
  --head:"Sora","Inter",system-ui,-apple-system,sans-serif;
  --sans:"Public Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:8px;
  --kopf-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--porcelain); color:var(--ink-900);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 32px}
/* Beitragsseiten der Akademie stehen zweispaltig: 720 px Text + 60 px Lücke +
   252 px Inhaltsverzeichnis = 1032 px. Kopfbereich und Abschlussabschnitte
   müssen dieselbe linke Kante treffen, sonst versetzt sich die Seite in der
   Mitte um gut 160 Pixel. 1032 + 2 × 32 px Innenabstand = 1096 px. */
.wrap-beitrag{max-width:1096px;margin:0 auto;padding:0 32px}
.beitragseite .wrap-narrow{max-width:1096px}
/* Der Anfragebereich sitzt auf derselben Kante wie alle anderen Abschnitte.
   Nur das Formular selbst bleibt schmal, damit die Zeilen lesbar sind. */
.wrap-form{max-width:1180px;margin:0 auto;padding:0 32px}
.wrap-form .formular,.wrap-form .erfolg,.wrap-form .fehlerbox,.wrap-form .contactline{max-width:880px}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-0.022em;line-height:1.16;font-weight:600}
p{margin-bottom:16px;max-width:33.3rem}
p:last-child{margin-bottom:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

a{color:var(--sig-700);text-underline-offset:3px}
a:hover{color:var(--sig-800)}
/* Fokusring. Zweifarbig, damit er auf hellem UND dunklem Grund trägt:
   Gold allein erreicht auf Porzellan nur 2,47:1, gefordert sind 3:1.
   Der dunkle Kern (12,9:1 auf Porzellan) übernimmt dort, der goldene
   Saum bleibt auf Schwarz sichtbar. */
:focus-visible{
  outline:2px solid var(--ink-900);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--sig-400);
  border-radius:3px;
}
.sec-dunkel :focus-visible,.topbar :focus-visible,.hero :focus-visible,
.artikel-kopf :focus-visible,footer :focus-visible{
  outline-color:var(--porcelain);
  box-shadow:0 0 0 5px var(--sig-500);
}
.skip{position:absolute;left:-9999px;top:0;background:var(--sig-500);color:var(--ink-950);
  padding:12px 20px;font-weight:600;z-index:100}
.skip:focus{left:0}

/* =========================================================
   Kopfzeile: Logo, Hauptnavigation, Anmeldeknopf
   (Die schwarze Servicezeile darüber ist seit dem 10. Oktober 2026 weg.)

   Eine Zeile, nicht zwei. Links das Zeichen, in der Mitte die Navigation über
   die volle Breite, rechts der Anmeldeknopf. Suchfeld und Anfragekorb standen
   hier bis August 2026 und sind bewusst herausgenommen: Beides ist über den
   Fuß erreichbar, der Korb zusätzlich über die Rückmeldung nach dem Anlegen.

   Ab 1180 px passt alles in eine Zeile — nachgemessen, nicht geraten. Darunter
   rutscht die Navigation in eine eigene Zeile darunter, ab 940 px hinter den
   Menüknopf.
   ========================================================= */

.topbar{background:var(--ink-950);position:sticky;top:0;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .2s ease}
.topbar.gescrollt{box-shadow:0 8px 28px rgba(8,11,13,.42)}

.kopfgitter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:24px;min-height:var(--kopf-h)}
.brand{display:flex;align-items:center;text-decoration:none;min-height:44px;padding:5px 0}
.brand img{height:34px;width:auto}

/* --- Hauptnavigation --- */
.hauptnav{min-width:0}
/* space-between statt fester Abstände: die Punkte verteilen sich über die
   ganze Breite, egal wie viele es sind. Kommt ein siebter dazu, rückt alles
   zusammen, statt dass etwas umbricht. */
.navlist{display:flex;align-items:center;justify-content:space-between;gap:2px;
  list-style:none;width:100%}
.navlist a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-300);
  text-decoration:none;font-size:15px;font-weight:500;padding:13px 5px;white-space:nowrap;
  transition:color .15s ease,box-shadow .15s ease;box-shadow:inset 0 -2px 0 transparent}
.navlist a:hover{color:var(--porcelain);box-shadow:inset 0 -2px 0 var(--ink-600)}
.navlist a[aria-current=page]{color:var(--sig-300);box-shadow:inset 0 -2px 0 var(--sig-400)}
/* Die Zeichen tragen den Goldton, die Schrift bleibt hell. Beim aktiven Punkt
   wird das Zeichen heller, damit Zeichen und Unterstrich zusammengehören. */
.navi-i{flex:none;color:var(--sig-400);transition:color .15s ease}
.navlist a:hover .navi-i{color:var(--sig-300)}
.navlist a[aria-current=page] .navi-i{color:var(--sig-300)}

/* --- Rechte Seite: Anmelden --- */
.kopfrechts{display:flex;align-items:center;gap:8px;justify-self:end}
.kopf-anmelden{padding:9px 16px}
.kontolink{display:inline-flex;align-items:center;gap:9px;color:var(--ink-200);text-decoration:none;
  font-size:15px;font-weight:500;padding:9px 13px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.18);transition:color .15s ease,border-color .15s ease,background .15s ease}
.kontolink:hover{color:var(--porcelain);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}

/* --- Menüknopf --- */
.burger{display:none;background:transparent;border:0;width:44px;height:44px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 10px;border-radius:6px}
.burger span{display:block;height:2px;background:var(--ink-200);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Mittlere Bildschirme: Navigation in eine eigene Zeile --- */
@media(max-width:1179px){
  .kopfgitter{grid-template-columns:auto 1fr;row-gap:0;padding-top:11px;min-height:0}
  .kopfrechts{grid-column:2;justify-self:end}
  .hauptnav{grid-column:1 / -1;order:3;border-top:1px solid rgba(255,255,255,.07);margin-top:11px}
  .navlist a{padding:12px 6px}
}

/* --- Telefon und kleines Tablet: Menüknopf --- */
@media(max-width:940px){
  .burger{display:flex}
  .kopfgitter{gap:14px;padding-top:12px;padding-bottom:12px}
  .hauptnav{border-top:0;margin-top:0}
  /* top:100% statt der stillen Position im Raster: die Klappe soll unter der
     ganzen Kopfzeile hängen, nicht neben dem Zeichen. Bezugspunkt ist .topbar,
     weil position:sticky einen Bezugsrahmen aufspannt. */
  .navlist{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;width:auto;
    background:var(--ink-950);border-top:1px solid rgba(255,255,255,.09);
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 18px 40px rgba(0,0,0,.55);padding:6px 24px 18px;display:none;z-index:70}
  .navlist.offen{display:flex}
  .navlist a{padding:15px 8px;font-size:17px;box-shadow:none;gap:12px;
    border-bottom:1px solid rgba(255,255,255,.06)}
  .navlist a:hover{box-shadow:none}
  .navlist a[aria-current=page]{box-shadow:none;background:rgba(224,180,78,.10);padding-left:14px}
  .navlist li:last-child a{border-bottom:0}
}
@media(max-width:420px){
  .kopfgitter{gap:10px}
  .brand img{height:30px}
  .kopf-anmelden{padding:9px 13px;font-size:14px}
}

/* =========================================================
   Schaltflächen
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);
  font-size:16px;font-weight:600;padding:14px 26px;border-radius:var(--r);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .06s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--sig-500);color:var(--ink-950)}
.btn-primary:hover{background:var(--sig-400);color:var(--ink-950)}
.btn-ghost{background:transparent;color:var(--porcelain);border-color:rgba(255,255,255,.26)}
.btn-ghost:hover{border-color:var(--sig-400);color:var(--sig-300)}
.btn-hell{background:transparent;color:var(--ink-900);border-color:var(--ink-300)}
.btn-hell:hover{border-color:var(--ink-900);background:var(--ink-50);color:var(--ink-900)}
.btn-sm{padding:9px 18px;font-size:15px}

/* =========================================================
   Bühne
   ========================================================= */
.hero{background:var(--ink-950);color:var(--porcelain);padding:76px 0 0;position:relative;overflow:hidden}
/* Das Lager hinter der Bühne (inc/startlager.php). Es ersetzt seit Oktober
   2026 die beiden goldenen Kreise, die hier vorher als Andeutung standen.
   Drehzeiten kommen aus der Geometrie und stehen als Variablen am Element. */
/* Breit: das Lager steigt rechts unten hinter dem Größenfinder auf. Dort ist
   Platz, und der Finder verdeckt es nicht. Schmal steht der Finder ganz unten,
   dann sitzt das Lager oben rechts neben der Überschrift. */
.hl{position:absolute;bottom:-330px;right:-150px;width:760px;height:760px;pointer-events:none;z-index:0;
  animation:hl-auf 2.4s cubic-bezier(.2,.7,.25,1) both}
.hl > *{position:absolute;inset:0}
.hl-ebene{position:absolute;inset:0}
.hl svg{display:block;width:100%;height:100%;overflow:visible}
.hl-innen{animation:hl-dreh var(--t-innen,48s) linear infinite}
.hl-kaefig{animation:hl-dreh var(--t-kaefig,115s) linear infinite}
.hl-kugel{position:absolute;width:11%;height:11%;margin:-5.5% 0 0 -5.5%}
.hl-kugel svg{animation:hl-dreh var(--t-kugel,16.4s) linear infinite reverse}
.hl-ruht .hl-innen,.hl-ruht .hl-kaefig,.hl-ruht .hl-kugel svg{animation-play-state:paused}
@keyframes hl-dreh{to{transform:rotate(360deg)}}
@keyframes hl-auf{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@media(max-width:960px){.hl{width:540px;height:540px;top:-150px;bottom:auto;right:-250px}}
@media(max-width:560px){.hl{width:440px;height:440px;top:-120px;right:-220px}}
@media(prefers-reduced-motion:reduce){.hl,.hl *{animation:none!important}}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;padding-bottom:72px}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--sig-400);font-weight:600}
.hero h1{font-size:clamp(38px,5.6vw,60px);margin:20px 0 16px;font-weight:600;letter-spacing:-.03em}
.hero .claim{font-size:clamp(18px,2.2vw,21px);color:var(--ink-300);max-width:24.2rem;line-height:1.5}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* Auf schmalen Geräten stehen die beiden Schaltflächen gleich breit untereinander,
   sonst wirkt die Kante ausgefranst. */
@media(max-width:520px){
  .hero .cta{display:grid;grid-template-columns:1fr;gap:12px}
  .hero .cta .btn{width:100%}
}
.hero-punkte{list-style:none;margin-top:38px;display:grid;gap:11px}
.hero-punkte li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-300)}
.hero-punkte li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--sig-400)}

.hero-band{background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.08);
  position:relative;z-index:1}
.hero-band .wrap{padding-top:18px;padding-bottom:18px}
.hero-band span{font-size:15px;color:var(--ink-300);display:block;max-width:34.4rem}
.hero-band b{color:var(--sig-300);font-weight:600}

/* =========================================================
   Größenfinder
   ========================================================= */
/* Fast deckend statt Milchglas: Hinter dem Kasten dreht sich das Lager, und
   ein Weichzeichner müsste dafür in jedem Bild neu rechnen. */
.finder{background:rgba(16,22,25,.88);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:26px;position:relative}
.finder-kopf{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--sig-400);
  font-weight:600;margin-bottom:18px}
.finder-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* Auf dem Handy bleiben die drei Maße in einer Zeile. Untereinander kosteten
   sie fast einen halben Bildschirm, und d, D und B gehören zusammen gelesen. */
@media(max-width:420px){
  .finder{padding:20px 16px}
  .finder-felder{gap:8px}
  .ff-in{padding:0 9px}
  .ff-in span{font-size:12px;padding-left:4px}
}
.ff label{display:block;font-size:12px;color:var(--ink-300);margin-bottom:6px;font-weight:500}
.ff-in{display:flex;align-items:center;background:var(--ink-900);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:0 13px;transition:border-color .15s ease,background .15s ease}
.ff-in:focus-within{border-color:var(--sig-500);background:rgba(255,255,255,.06)}
.ff-in input{background:transparent;border:0;color:var(--porcelain);font-family:var(--sans);
  font-size:17px;padding:12px 0;width:100%;font-variant-numeric:tabular-nums}

.ff-in input::placeholder{color:var(--ink-600)}
.ff-in span{font-size:13px;color:var(--ink-400);flex:none;padding-left:8px}
.finder-oder{font-size:12px;color:var(--ink-400);margin:16px 0 7px;text-align:center;
  position:relative}
.ff-voll{margin-bottom:4px}

.finder-ergebnis{margin-top:20px;border-top:1px solid rgba(255,255,255,.10);padding-top:18px;min-height:96px}
.f-leer{font-size:14px;color:var(--ink-400);margin:0;line-height:1.55}
.f-kopf{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-300);
  font-weight:600;margin-bottom:12px}
.f-treffer{border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:14px;margin-bottom:10px;
  background:rgba(255,255,255,.025)}
.f-treffer.f-top{border-color:rgba(224,180,78,.36);background:rgba(224,180,78,.07)}
.f-tk{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:11px}
.f-name{font-family:var(--head);font-size:20px;font-weight:600;color:var(--porcelain);margin:0}
.f-exakt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-950);
  background:var(--sig-400);padding:3px 8px;border-radius:99px;vertical-align:middle;font-family:var(--sans)}
.f-masse{font-size:15px;color:var(--ink-300);margin:0;font-variant-numeric:tabular-nums}
.f-werk{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
@media(max-width:520px){.f-werk{grid-template-columns:1fr}}
.f-w{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:8px;
  padding:11px 12px;cursor:pointer;font-family:var(--sans);text-decoration:none;
  transition:border-color .15s ease,background .15s ease}
.f-w:hover{border-color:var(--sig-400);background:rgba(224,180,78,.10)}
.f-wz{font-size:12px;color:var(--ink-300);line-height:1.35}
.f-w .kugel{width:15px;height:15px;margin-bottom:3px}
.f-hinweis{font-size:12px;color:var(--ink-400);margin:12px 0 0}
.f-keine{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.f-keine p{font-size:15px;color:var(--ink-300);margin:0}
.f-keine b{color:var(--porcelain)}

/* Werkstoffkugeln, überall gleich */
.kugel{width:52px;height:52px;border-radius:50%;display:inline-block;flex:none}
.k-zro2{background:#fff;border:1px solid var(--ink-300);box-shadow:inset -7px -7px 16px rgba(8,11,13,.10)}
.k-si3n4{background:#23292C;box-shadow:inset -7px -7px 16px rgba(0,0,0,.55),inset 5px 5px 12px rgba(255,255,255,.12)}
.k-hybrid{background:linear-gradient(135deg,#8C9AA3 0%,#C6CFD4 45%,#6E7C85 100%);
  box-shadow:inset -6px -6px 14px rgba(8,11,13,.25)}
.f-w .k-zro2,.f-w .k-si3n4,.f-w .k-hybrid{box-shadow:none}

/* =========================================================
   Abschnitte
   ========================================================= */
.sec{padding:92px 0}
.sec + .sec:not(.sec-dunkel){border-top:1px solid var(--ink-100)}
.sec-hell{background:var(--porcelain-2);border-top:1px solid var(--ink-100)}
.sec-dunkel{background:var(--ink-950);color:var(--porcelain);border-top:0}
.sec-dunkel h2,.sec-dunkel h3{color:var(--porcelain)}
.snum{font-size:12px;letter-spacing:.17em;color:var(--sig-700);text-transform:uppercase;font-weight:600}
.snum-hell{color:var(--sig-400)}
/* Abschnittsüberschrift.
   Die Maske stand bei 13,1 rem — das sind bei 40 px Schriftgrad rund elf Zeichen
   je Zeile. „Drei Dinge, die im Markt fehlen" zerfiel damit in vier Zeilen, eine
   längere Überschrift in acht. Eine Überschrift darf schmaler laufen als der
   Fließtext darunter, aber nicht so schmal. 28 rem ergibt zwei Zeilen für die
   üblichen Längen und bleibt unter der Textmaske von 33,3 rem.
   text-wrap:balance verteilt die Zeilen gleichmäßig, statt die letzte als Rest
   stehen zu lassen. Browser ohne diese Eigenschaft ignorieren sie. */
.sec-h{font-size:clamp(28px,3.6vw,40px);margin:14px 0 16px;max-width:28rem;text-wrap:balance}
.lede{font-size:20px;color:var(--ink-600);max-width:33.3rem;margin-bottom:48px}
.lede-hell{color:var(--ink-300)}
.nachsatz{margin-top:34px;font-size:16px;color:var(--ink-600)}
.sec-dunkel .nachsatz{color:var(--ink-300)}

/* Einblenden beim Scrollen */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- Karten, dreispaltig ---------- */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.drei{grid-template-columns:1fr}}
.karte{background:#fff;border:1px solid var(--ink-100);border-radius:12px;padding:30px 28px}
.karte-n{font-size:12px;letter-spacing:.16em;color:var(--sig-700);font-weight:600;margin-bottom:14px}
.karte h3{font-size:20px;margin-bottom:10px}
.karte p{font-size:15px;color:var(--ink-500);margin:0}

/* ---------- Werkstoffe ---------- */
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.mats{grid-template-columns:1fr}}
.mat{background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:30px 28px}
.mat .kugel{margin-bottom:20px}
.mat-code{font-size:12px;letter-spacing:.13em;color:var(--sig-700);font-weight:600;margin-bottom:6px}
.mat h3{font-size:20px;margin-bottom:10px}
.mat > p{font-size:15px;color:var(--ink-500);margin-bottom:18px}
.mat-daten{border-top:1px solid var(--ink-100);padding-top:14px;display:grid;gap:9px}
.mat-daten > div{display:flex;justify-content:space-between;gap:14px;font-size:15px}
.mat-daten dt{color:var(--ink-500)}
.mat-daten dd{color:var(--ink-900);font-weight:500;text-align:right}

/* ---------- Schritte ---------- */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
@media(max-width:900px){.schritte{grid-template-columns:1fr}}
.schritte li{border:1px solid var(--ink-800);border-radius:12px;padding:28px 26px;background:rgba(255,255,255,.03)}
.schritte .sn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--sig-500);color:var(--ink-950);font-weight:700;font-size:15px;margin-bottom:16px}
.schritte h3{font-size:20px;margin-bottom:9px}
.schritte p{font-size:15px;color:var(--ink-300);margin:0}

/* ---------- Waage: lohnt sich / raten wir ab ---------- */
.waage{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.waage{grid-template-columns:1fr}}
.waage-teil{border-radius:12px;padding:30px 28px;border:1px solid var(--ink-100);background:#fff}
.w-nein{background:var(--ink-950);border-color:var(--ink-800);color:var(--porcelain)}
.waage-kopf{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;border-radius:99px;display:inline-block;margin-bottom:18px}
.w-ja .waage-kopf{background:rgba(11,122,60,.10);color:var(--stock)}
.w-nein .waage-kopf{background:rgba(214,48,58,.18);color:#FF9AA0}
.waage-teil ul{list-style:none}
.waage-teil li{padding:14px 0;border-top:1px solid var(--ink-100);font-size:15px;color:var(--ink-600)}
.waage-teil li:first-child{border-top:0;padding-top:0}
.w-nein li{border-top-color:var(--ink-800);color:var(--ink-300)}
.waage-teil li b{display:block;font-family:var(--head);color:var(--ink-900);font-weight:600;
  margin-bottom:3px;font-size:16px;letter-spacing:-.01em}
.w-nein li b{color:var(--porcelain)}

/* =========================================================
   Akademie
   ========================================================= */
.beitraege{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.beitraege{grid-template-columns:1fr}}
.beitrag{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-200);
  border-radius:12px;padding:28px 26px;text-decoration:none;color:inherit;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.beitrag:hover{border-color:var(--sig-500);box-shadow:0 10px 30px rgba(8,11,13,.08);
  transform:translateY(-2px);color:inherit}
.beitrag-kat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sig-700);
  font-weight:600;margin-bottom:14px}
/* Feste Höhe für den Titel, damit ein- und zweizeilige Überschriften
   nebeneinander auf derselben Grundlinie weiterlaufen. */
.beitrag h2,.beitrag h3{font-size:20px;margin-bottom:6px;line-height:1.25}
@media(min-width:941px){.beitrag h2,.beitrag h3{min-height:calc(2 * 20px * 1.25)}}
.beitrag-unter{font-size:15px;color:var(--ink-600);margin-bottom:12px;font-weight:500}
@media(min-width:941px){.beitrag-unter{min-height:calc(2 * 15px * 1.5)}}
.beitrag-kurz{font-size:15px;color:var(--ink-500);margin-bottom:20px;flex:1}
.beitrag-mehr{font-size:15px;font-weight:600;color:var(--sig-700);display:inline-flex;
  align-items:center;gap:7px;margin-top:auto}
.beitrag-mehr::after{content:"→";transition:transform .16s ease;display:inline-block}
.beitrag:hover .beitrag-mehr::after{transform:translateX(4px)}

/* ---------- Beitragsseite ---------- */
.artikel-kopf{background:var(--ink-950);color:var(--porcelain);padding:56px 0 52px;position:relative;overflow:hidden}
.artikel-kopf::after{content:"";position:absolute;right:-200px;top:-200px;width:560px;height:560px;
  border-radius:50%;border:1px solid rgba(224,180,78,.14);pointer-events:none}
.artikel-kopf .wrap,.artikel-kopf .wrap-narrow,.artikel-kopf .wrap-beitrag{position:relative;z-index:1}
.krumen{font-size:13px;color:var(--ink-400);margin-bottom:22px}
.krumen a{color:var(--ink-300);text-decoration:none}
.krumen a:hover{color:var(--sig-300)}
.krumen span{color:var(--ink-400);padding:0 8px}
.artikel-kopf h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:14px;max-width:22rem;letter-spacing:-.03em;
  text-wrap:balance}
.artikel-unter{font-size:clamp(17px,2vw,20px);color:var(--ink-300);max-width:29.3rem;margin-bottom:26px}
.artikel-meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--ink-400);
  padding-top:20px;border-top:1px solid rgba(255,255,255,.10);letter-spacing:.05em}
.artikel-meta b{color:var(--sig-300);font-weight:600}

/* --- Zweispaltiger Kopf der Kategorieseiten --------------------------------
   Rechts der Überschrift standen bei 1440 Pixeln rund 680 mal 190 Pixel leer.
   Dort stehen jetzt die vier Zusagen. Der Umbruch kommt bei 900 Pixeln, weil
   darunter die Überschrift selbst schon die halbe Breite braucht und zwei
   Spalten zu je 45 Zeichen unlesbar würden. */
.kopf-gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,376px);
  gap:0 64px;align-items:start}
@media(max-width:1080px){.kopf-gitter{grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:0 40px}}
@media(max-width:900px){.kopf-gitter{grid-template-columns:1fr;gap:28px 0}}

.kopf-vorteile{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;overflow:hidden}
.kopf-vorteile li{background:var(--ink-950);padding:14px 18px}
.kopf-vorteile b{display:block;font-size:14px;font-weight:600;color:var(--porcelain);
  line-height:1.35;margin-bottom:3px;letter-spacing:-.005em}
.kopf-vorteile span{display:block;font-size:13px;color:var(--ink-300);line-height:1.45}
/* Der Haken sitzt als Rahmenwinkel vor dem Titel — eine Form, kein Zeichen,
   damit kein Emoji und keine Schriftabhängigkeit im Spiel ist. */
.kopf-vorteile b::before{content:"";display:inline-block;width:9px;height:5px;
  border-left:1.5px solid var(--sig-400);border-bottom:1.5px solid var(--sig-400);
  transform:rotate(-45deg);margin-right:9px;vertical-align:2px}

/* Unter 900 Pixeln steht der Block über die volle Breite. Einspaltig ergäbe das
   82 Zeichen je Zeile — deutlich über der lesbaren Grenze. Also zwei Spalten,
   solange der Zusatztext noch mitläuft. */
@media(max-width:900px) and (min-width:621px){
  .kopf-vorteile{grid-template-columns:1fr 1fr}
}

/* Ab 620 Pixeln ist neben dem Haken kein Platz mehr für zwei Zeilen Text:
   dann nur noch die Zusage selbst, der Zusatz entfällt. Auf dem Handy soll
   der Kopf nicht wieder wachsen — das war gerade der Punkt der Seitenteilung. */
@media(max-width:620px){
  .kopf-vorteile li{padding:11px 15px}
  .kopf-vorteile b{font-size:13.5px;margin-bottom:0}
  .kopf-vorteile span{display:none}
}

.artikel{padding:64px 0 88px}
.artikel .wrap-narrow{max-width:760px}
/* Die Zeilenmaske für Überschriften war mit 15,2 rem so eng, dass „Der
   Unterschied in einem Satz" auf drei Zeilen zerfiel. Eine Überschrift darf
   dieselbe Zeilenbreite nutzen wie der Fließtext darunter — nur eben in
   größerer Schrift, also mit deutlich weniger Zeichen je Zeile. */
.artikel h2{font-size:clamp(24px,3vw,31px);margin:52px 0 16px;padding-top:34px;
  border-top:1px solid var(--ink-100);max-width:33.3rem;text-wrap:balance}
.artikel h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.artikel h3{font-size:20px;margin:34px 0 10px}
.artikel p{font-size:17px;color:var(--ink-700);line-height:1.68;margin-bottom:18px}
.artikel ul,.artikel ol{margin:0 0 22px 0;list-style:none}
.artikel ul li{position:relative;padding-left:26px;margin-bottom:11px;font-size:17px;color:var(--ink-700)}
.artikel ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--sig-600)}
.artikel ol{counter-reset:o}
.artikel ol li{counter-increment:o;position:relative;padding-left:34px;margin-bottom:13px;
  font-size:17px;color:var(--ink-700)}
.artikel ol li::before{content:counter(o);position:absolute;left:0;top:2px;width:23px;height:23px;
  border-radius:50%;background:var(--ink-900);color:var(--porcelain);font-size:12px;font-weight:700;
  display:grid;place-items:center;font-family:var(--sans)}
.artikel strong{color:var(--ink-900);font-weight:600}

/* Merkkasten im Artikel */
.merk{background:var(--porcelain-2);border:1px solid var(--ink-200);border-left:3px solid var(--sig-500);
  border-radius:0 10px 10px 0;padding:22px 26px;margin:30px 0}
.merk p{font-size:16px;color:var(--ink-600);margin:0}
.merk p + p{margin-top:12px}
.merk b{color:var(--ink-900)}
.merk-warn{border-left-color:var(--danger)}

/* Tabelle im Artikel */
.tab{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
.tab th{text-align:left;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);font-weight:600;padding:0 14px 11px 0;border-bottom:1px solid var(--ink-300)}
.tab td{padding:13px 14px 13px 0;border-bottom:1px solid var(--ink-100);color:var(--ink-700);
  vertical-align:top}
.tab td:first-child{font-weight:600;color:var(--ink-900);white-space:nowrap}
.tab .num{text-align:right;font-variant-numeric:tabular-nums}
/* Breite Tabellen scrollen seitlich im eigenen Kasten, statt die ganze Seite
   zu verschieben. Damit man das sieht, liegt an der Kante ein Schatten, der
   verschwindet, sobald dort nichts mehr steht — reines CSS, kein Skript. */
.tab-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--porcelain) 34%, rgba(251,250,247,0)) left center,
    linear-gradient(to left,  var(--porcelain) 34%, rgba(251,250,247,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(8,11,13,.16), rgba(8,11,13,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(8,11,13,.16), rgba(8,11,13,0)) right center;
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* Artikelabschluss */
.artikel-schluss{border-top:1px solid var(--ink-100);margin-top:56px;padding-top:36px}
.artikel-schluss h2{border-top:0;padding-top:0;margin-top:0;font-size:20px}
.weiterlesen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:700px){.weiterlesen{grid-template-columns:1fr}}
.wl{display:block;border:1px solid var(--ink-200);border-radius:10px;padding:20px 22px;
  text-decoration:none;color:inherit;transition:border-color .15s ease,background .15s ease}
.wl:hover{border-color:var(--sig-500);background:var(--porcelain-2);color:inherit}
.wl-kat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sig-700);font-weight:600}
.wl b{display:block;font-family:var(--head);font-size:17px;margin-top:7px;letter-spacing:-.01em}

/* Handlungsaufruf am Artikelende */
.artikel-cta{background:var(--ink-950);color:var(--porcelain);border-radius:14px;
  padding:36px 34px;margin-top:44px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  justify-content:space-between}
.artikel-cta h3{font-size:20px;margin-bottom:7px}
.artikel-cta p{font-size:15px;color:var(--ink-300);margin:0;max-width:27.3rem}

/* =========================================================
   Shop
   ========================================================= */
.shop-kachel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:940px){.shop-kachel{grid-template-columns:1fr}}
.sk{background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:28px 26px;
  display:flex;flex-direction:column}
.sk .kugel{width:44px;height:44px;margin-bottom:18px}
.sk h3{font-size:20px;margin-bottom:8px}
.sk p{font-size:15px;color:var(--ink-500);margin-bottom:16px;flex:1}
/* Die Datenzeilen sollen über alle drei Kacheln auf einer Linie beginnen. */
.sk-liste{list-style:none;border-top:1px solid var(--ink-100);padding-top:14px;margin-top:auto}
/* Beschriftung über dem Wert: die Aufzählungen sind zu lang für eine Zeile. */
.sk-liste li{padding:8px 0;display:grid;gap:1px;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--ink-500)}
.sk-liste li+li{border-top:1px solid var(--ink-100)}
.sk-liste li span{font-size:15px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-700)}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  padding:8px 15px;border-radius:99px;background:rgba(201,154,50,.12);color:var(--sig-700);
  border:1px solid rgba(201,154,50,.32)}
.status .punkt{width:8px;height:8px;border-radius:50%;background:var(--sig-600);flex:none}
.zeitplan{list-style:none;margin-top:26px;border-top:1px solid var(--ink-100)}
.zeitplan li{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:20px 0;
  border-bottom:1px solid var(--ink-100);align-items:start}
@media(max-width:640px){.zeitplan li{grid-template-columns:1fr;gap:6px}}
.zeitplan .zp-phase{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--sig-700)}
.zeitplan b{display:block;font-family:var(--head);font-size:17px;margin-bottom:5px;letter-spacing:-.01em}
.zeitplan p{font-size:15px;color:var(--ink-500);margin:0}

/* =========================================================
   Anfrage-Formular
   ========================================================= */
.formular{margin-top:8px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
@media(max-width:700px){.formgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.fieldhint{font-size:13px;color:var(--ink-400);line-height:1.5}
label{font-size:15px;font-weight:500;color:var(--ink-200)}
label .opt{color:var(--ink-400);font-weight:400}
.sec-dunkel input[type=text],.sec-dunkel input[type=email],.sec-dunkel input[type=tel],.sec-dunkel textarea{
  font-family:var(--sans);font-size:16px;color:var(--porcelain);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:13px 15px;width:100%;
  transition:border-color .15s ease,background .15s ease}
.sec-dunkel input::placeholder,.sec-dunkel textarea::placeholder{color:var(--ink-600)}
.sec-dunkel input:focus,.sec-dunkel textarea:focus{border-color:var(--sig-500);background:rgba(255,255,255,.07)}
.sec-dunkel input:focus-visible,.sec-dunkel textarea:focus-visible{outline:2px solid var(--sig-500);outline-offset:2px}
.check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:15px;color:var(--ink-300)}
.check input{width:19px;height:19px;margin-top:3px;accent-color:var(--sig-500)}
.check a{color:var(--sig-300)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.formfoot .hint{font-size:14px;color:var(--ink-400);letter-spacing:.04em}

.erfolg{border-radius:var(--r);padding:22px 26px;margin-bottom:30px;font-size:16px;
  background:rgba(11,122,60,.14);border:1px solid rgba(52,215,127,.4);color:#B7F2D2}
.erfolg b{color:#EAFBF2;font-size:17px;font-family:var(--head)}
.erfolg a{color:#8FE9B6}
.fehlerbox{border-radius:var(--r);padding:20px 24px;margin-bottom:26px;font-size:16px;
  background:rgba(214,48,58,.13);border:1px solid rgba(255,107,114,.42);color:#FFC9CC}
.field-err input,.field-err textarea{border-color:#FF6B72}
.errline{font-size:13px;color:#FF9AA0}

.contactline{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;gap:36px;flex-wrap:wrap;font-size:15px;color:var(--ink-300)}
.contactline a{color:var(--sig-300);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;margin:-11px 0}
.contactline a:hover{text-decoration:underline}
.contactline .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink-400);display:block;margin-bottom:5px}

/* =========================================================
   Fußzeile
   ========================================================= */
footer{background:var(--ink-900);color:var(--ink-400);padding:60px 0 44px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:40px;align-items:start}
@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
footer img{height:30px;width:auto}
.fusstext{margin-top:16px;max-width:21.2rem;font-size:14px;color:var(--ink-400)}
/* Suchfeld im Fuß. Steht auf dunklem Grund, deshalb helle Schrift und ein
   Rahmen statt einer Fläche — eine weiße Fläche wäre hier ein Loch. */
/* Kein overflow:hidden: Der Fokusring des Feldes läge sonst zur Hälfte
   unter dem Rahmen. Stattdessen bekommt der Knopf seine eigenen Ecken. */
.fusssuche{display:flex;margin-top:22px;max-width:21.2rem;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r)}
.fusssuche input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;
  background:transparent;color:var(--porcelain);border:0;padding:11px 14px;
  font-variant-numeric:tabular-nums}
.fusssuche input::placeholder{color:var(--ink-400)}
.fusssuche:focus-within{border-color:var(--sig-500)}
.fusssuche input::-webkit-search-cancel-button{filter:invert(.7)}
.fusssuche button{display:flex;align-items:center;justify-content:center;width:46px;
  background:transparent;border:0;border-left:1px solid rgba(255,255,255,.2);
  border-radius:0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0;
  color:var(--ink-300);cursor:pointer;transition:color .15s ease,background .15s ease}
.fusssuche button:hover{color:var(--ink-950);background:var(--sig-500)}
footer a{color:var(--ink-300);text-decoration:none}
footer a:hover{color:var(--sig-300)}
footer .links{display:flex;flex-direction:column;gap:11px}
footer .links a{align-self:start}
/* Auf Touchgeräten brauchen die Ziele Fläche, nicht nur Text. */
@media(max-width:900px){
  footer .links{gap:0}
  footer .links a{padding:11px 0;min-height:44px;display:flex;align-items:center}
}
.linkkopf{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-400);
  font-weight:600;margin-bottom:5px}
.legal-links{display:flex;gap:20px;flex-wrap:wrap}
.legal-links a{color:var(--ink-300);text-decoration:none;border-bottom:1px solid transparent}
.legal-links a:hover{color:var(--porcelain);border-bottom-color:currentColor}
footer .legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;color:var(--ink-400);display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;letter-spacing:.05em}

/* =========================================================
   Rechtstexte
   ========================================================= */
.legalpage{padding:72px 0 96px}
.legalpage h1{font-size:clamp(30px,4.5vw,42px);margin-bottom:12px}
.legalpage .updated{font-size:12px;color:var(--ink-500);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:44px}
.legalpage h2{font-size:20px;margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--ink-100)}
.legalpage h3{font-size:17px;margin:26px 0 8px}
/* Steuer- und Zollnummern: Ziffernblöcke, die jemand abschreibt oder kopiert.
   Feste Zeichenbreite verhindert, dass 8 und 3 auf einen Blick gleich aussehen. */
.nummer{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.94em;color:var(--ink-900);letter-spacing:.01em;white-space:nowrap;
  -webkit-user-select:all;user-select:all}
.legalpage p,.legalpage li{color:var(--ink-600);font-size:16px}
.legalpage ul,.legalpage ol{margin:0 0 16px 22px}
.legalpage li{margin-bottom:7px}
.todo{background:var(--ink-50);border:1px solid var(--ink-200);border-left:3px solid var(--ink-500);
  border-radius:6px;padding:14px 18px;margin:14px 0;font-size:15px;color:var(--ink-600)}
.todo b{color:var(--ink-900)}



/* Finder: kompakte Zusatztreffer */
.f-auch{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-400);
  font-weight:600;margin:16px 0 9px}
.f-liste{display:flex;gap:8px;flex-wrap:wrap}
.f-alt{display:inline-flex;align-items:baseline;gap:9px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:8px 13px;cursor:pointer;
  font-family:var(--sans);transition:border-color .15s ease,background .15s ease}
.f-alt:hover{border-color:var(--sig-400);background:rgba(224,180,78,.09)}
.f-alt-n{font-family:var(--head);font-size:15px;font-weight:600;color:var(--porcelain)}
.f-alt-m{font-size:12px;color:var(--ink-300);font-variant-numeric:tabular-nums}
.f-wn{font-size:14px;font-weight:600;color:var(--porcelain);white-space:nowrap}

/* Auf dunklem Grund braucht die schwarze Si3N4-Kugel eine Kante, sonst verschwindet sie */
.f-w .k-si3n4,.sec-dunkel .k-si3n4{box-shadow:inset -3px -3px 7px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.34)}
.f-w .k-hybrid,.f-w .k-zro2{border:1px solid rgba(255,255,255,.22)}

/* =========================================================
   SHOP
   Warengruppen, Filter, Produktkacheln, Artikelseite, Anfragekorb.
   Farben und Abstände folgen denselben Merkmalen wie der Rest der Seite.
   ========================================================= */

/* --- Kopfbereich einer Kategorie --- */
.ak-schmal{padding:20px 0 18px}
.ak-schmal .krumen{margin-bottom:0}
.gruppentext{max-width:33.3rem;color:var(--ink-600);margin-bottom:14px}
.gruppentext-mehr{max-width:33.3rem;margin:0 0 34px;font-size:15px;color:var(--ink-500)}
/* Beitragstreffer auf der Suchseite. Schmaler als auf der Übersicht, weil
   hier höchstens drei stehen und sie den Artikeln nicht die Schau stehlen. */
/* Filterzeile der Akademie. Bewusst Links und keine Knöpfe: die Auswahl steht
   in der Adresse, funktioniert ohne JavaScript und lässt sich verschicken. */
.akfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.akf{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;
  border:1px solid var(--ink-200);border-radius:999px;background:#fff;
  font-size:14.5px;font-weight:600;color:var(--ink-700);text-decoration:none}
.akf span{font-weight:600;font-size:12.5px;color:var(--ink-500);
  font-variant-numeric:tabular-nums}
.akf:hover{border-color:var(--sig-400);color:var(--ink-900)}
.akf-an{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.akf-an span{color:var(--ink-300)}

.vl-klein{font-size:12px;color:var(--ink-500)}
.suchakademie{margin:28px 0 34px}
.such-h2{font-family:var(--serif,inherit);font-size:1.05rem;font-weight:600;
  color:var(--ink-900);margin:0 0 16px;letter-spacing:-.01em}
.beitraege-schmal{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.beitraege-schmal .beitrag h3{font-size:1.02rem;margin:6px 0 8px}

/* --- Gitter aus Filterspalte und Trefferliste --- */
.katgitter{display:grid;grid-template-columns:236px minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:900px){.katgitter{grid-template-columns:1fr;gap:26px}}

/* --- Filter --- */
/* Das sichtbare Kästchen sitzt auf .filterinhalt, nicht auf <details> selbst.
   Nur so kann das <details> auf dem Desktop per display:contents aus dem Weg
   gehen und den Inhalt trotzdem im Gitter stehen lassen. */
.filterinhalt{position:sticky;top:calc(var(--kopf-h) + 68px);border:1px solid var(--ink-200);
  border-radius:12px;background:#fff;padding:20px 18px}
@media(max-width:900px){
  .filter{position:static;padding:0}
  .filterinhalt{position:static;border:1px solid var(--ink-200);border-top:0;
    border-radius:0 0 12px 12px;padding:0 0 4px}
  /* Zugeklappt starten: 25 Filterwerte sind rund 830 Pixel, also zweieinhalb
     Bildschirmhöhen vor dem ersten Produkt. */
  .filter > summary{display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;padding:16px 18px;min-height:56px;border-radius:12px;
    background:#fff;-webkit-tap-highlight-color:transparent}
  .filter > summary{border:1px solid var(--ink-200)}
  .filter[open] > summary{border-radius:12px 12px 0 0;border-bottom-color:var(--ink-100)}
  .filter > summary .filtertitel{font-size:13px}
  .filter-auf{display:block;width:11px;height:11px;border-right:2px solid var(--ink-500);
    border-bottom:2px solid var(--ink-500);transform:rotate(45deg);margin-top:-4px;
    transition:transform .18s ease}
  .filter[open] .filter-auf{transform:rotate(-135deg);margin-top:3px}
  .filterblock,.filterhinweis,.filterweg-zeile{margin-left:18px;margin-right:18px}
  .filterblock:first-of-type{margin-top:16px}
  .filterhinweis{padding-bottom:18px}
  /* Zwei Spalten für die vielen Durchmesserwerte */
  .filterwerte{gap:8px}
}
.filterkopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--ink-100);margin-bottom:16px}
.filtertitel{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--ink-700)}
.filterweg{font-size:13px;color:var(--sig-700);text-decoration:none;border-bottom:1px solid currentColor}
.filterweg:hover{color:var(--sig-800)}
.filterblock{margin-bottom:20px}
.filterblock:last-of-type{margin-bottom:8px}
.filterlabel{font-size:12px;font-weight:700;color:var(--ink-700);margin-bottom:9px}
.filterwerte{display:flex;flex-wrap:wrap;gap:6px}
.fw{display:inline-flex;align-items:center;min-height:32px;padding:5px 11px;border-radius:6px;
  border:1px solid var(--ink-200);background:var(--porcelain);color:var(--ink-600);
  font-size:13px;text-decoration:none;font-variant-numeric:tabular-nums;
  transition:border-color .14s ease,background .14s ease,color .14s ease}
.fw:hover{border-color:var(--ink-400);color:var(--ink-900);background:#fff}
.fw-an{background:var(--ink-900);border-color:var(--ink-900);color:var(--porcelain);font-weight:600}
.fw-an:hover{background:var(--ink-800);border-color:var(--ink-800);color:var(--porcelain)}
.filterhinweis{font-size:13px;color:var(--ink-500);line-height:1.55;padding-top:16px;
  border-top:1px solid var(--ink-100)}
.filterhinweis a{color:var(--sig-700)}

/* Sprungziel der Blätterlinks. Ohne den Abstand schöbe die feste Kopfzeile die
   Zeile "Seite 2 von 7" unter sich — ausgerechnet die Angabe, wegen der man
   geklickt hat. */
.katliste{scroll-margin-top:96px}
#filter{scroll-margin-top:96px}

/* --- Kopf der Trefferliste --- */
.kattop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.trefferzahl{font-size:15px;color:var(--ink-600);margin-bottom:16px}
.trefferzahl b{color:var(--ink-900);font-variant-numeric:tabular-nums}
.tz-zusatz{color:var(--ink-500);font-size:14px}

/* --- Produktkacheln --- */
.produkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* Bei ein bis zwei Treffern kein halbleeres Dreierraster: die Kacheln behalten
   ihre Breite und rücken nach links, statt sich über den Bildschirm zu ziehen. */
.produkte:has(> .pk:last-child:nth-child(-n+2)){grid-template-columns:repeat(auto-fill,minmax(0,300px));justify-content:start}
.produkte-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.produkte-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.produkte,.produkte-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.produkte,.produkte-4{grid-template-columns:1fr}}

.pk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-200);
  border-radius:12px;padding:16px 16px 14px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.pk:hover{border-color:var(--sig-500);box-shadow:0 10px 30px rgba(8,11,13,.09);transform:translateY(-2px)}
.pk-bild{display:flex;align-items:center;justify-content:center;background:var(--porcelain-2);
  border-radius:8px;padding:14px;margin-bottom:14px;min-height:150px}
/* Seit dem 10. Oktober 2026 räumliche Bilder im Format 4:3 (inc/lagerbild.php) */
.pk-bild svg{width:184px;height:138px}
.pk-bild:has(.lagerbild-raum){padding:6px 8px}
.pk-nr{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);
  font-weight:600;margin-bottom:5px;font-variant-numeric:tabular-nums}
.pk-titel{font-family:var(--head);font-size:17px;font-weight:600;line-height:1.3;
  margin-bottom:5px;letter-spacing:-.012em}
.pk-titel a{color:var(--ink-900);text-decoration:none}
.pk-titel a:hover{color:var(--sig-800)}
.pk-titel a::after{content:"";position:absolute;inset:0}   /* ganze Kachel klickbar */
.pk{position:relative}
.pk-werk{font-size:13px;color:var(--ink-700);font-weight:600;margin-bottom:3px}
.pk-masse{font-size:13px;color:var(--ink-500);margin-bottom:14px;flex:1;
  font-variant-numeric:tabular-nums}
.pk-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--ink-100)}
.pk-preis{font-size:13px;color:var(--ink-600);font-weight:600}
.pk-form{position:relative;z-index:1}                       /* Knopf über der Kachelfläche */
.pk-form .btn{white-space:nowrap}

/* --- Hinweis über der Liste: lieber filtern als blättern --- */
.kat-tipp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  border:1px solid var(--ink-200);border-left:3px solid var(--sig-500);border-radius:10px;
  background:#fff;padding:13px 16px;margin-bottom:20px;font-size:14.5px;
  color:var(--ink-600);line-height:1.5;max-width:44rem}
.kat-tipp b{color:var(--ink-900);font-weight:600}
.kat-tipp-auf{color:var(--sig-700);text-decoration:none;border-bottom:1px solid currentColor;
  white-space:nowrap}
.kat-tipp-auf:hover{color:var(--sig-800)}
/* Auf dem Desktop steht der Filter dauerhaft daneben — der Sprungknopf wäre dort
   ein Link auf etwas bereits Sichtbares. */
@media(min-width:901px){.kat-tipp-auf{display:none}}
/* Auf dem Handy ist das der Weg, den der Kunde nehmen soll. Als Textlink war die
   Tippfläche 23 Pixel hoch — einer zu wenig für WCAG 2.2. Jetzt ein Knopf. */
@media(max-width:900px){
  .kat-tipp-auf{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
    margin-top:3px;border:1px solid var(--sig-500);border-radius:8px;background:#fff;
    color:var(--sig-800);font-weight:600}
  .kat-tipp-auf:hover{background:var(--sig-200);color:var(--sig-800)}
}

/* --- Blättern --- */
/* Mittig statt an den Rändern: bei 1180 Pixeln Breite stünden "Zurück" und
   "Weiter" sonst über 700 Pixel auseinander und wirkten wie zwei einzelne
   Knöpfe statt wie eine Leiste. */
.blaettern{display:flex;align-items:center;justify-content:center;gap:8px 18px;
  flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--ink-200)}
.bl-pfeil{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;
  border:1px solid var(--ink-200);border-radius:9px;background:#fff;color:var(--ink-800);
  font-size:14.5px;font-weight:600;text-decoration:none;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
.bl-pfeil:hover{border-color:var(--ink-400);color:var(--ink-900)}
/* Der ausgegraute Pfeil ist zwar nicht bedienbar, aber lesbar — deshalb ink-500
   (5,46:1) statt ink-400 (3,37:1). Ausgeschaltet wirkt er über den blassen
   Rahmen und den fehlenden Zeigerwechsel, nicht über unlesbare Schrift. */
.bl-aus{color:var(--ink-500);background:var(--porcelain-2);border-color:var(--ink-100);
  cursor:default}
.bl-spitz{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  flex:none}
.bl-zurueck .bl-spitz{transform:rotate(135deg)}
.bl-weiter  .bl-spitz{transform:rotate(-45deg)}
.bl-aus .bl-spitz{transform:rotate(135deg)}
.bl-aus.bl-pfeil:last-child .bl-spitz{transform:rotate(-45deg)}

.bl-zahlen{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;
  flex-wrap:wrap;justify-content:center}
.bl-zahl{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 6px;border-radius:9px;
  border:1px solid transparent;color:var(--ink-600);text-decoration:none;
  font-size:15px;font-variant-numeric:tabular-nums;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
a.bl-zahl:hover{border-color:var(--ink-200);background:#fff;color:var(--ink-900)}
.bl-hier{background:var(--ink-900);border-color:var(--ink-900);color:var(--porcelain);
  font-weight:700}
.bl-luecke{display:inline-flex;align-items:flex-end;justify-content:center;
  min-width:22px;min-height:44px;color:var(--ink-500);padding-bottom:11px}

.bl-schluss{margin-top:16px;font-size:14px;color:var(--ink-500);line-height:1.55;
  max-width:33.3rem;text-align:center;margin-left:auto;margin-right:auto}
.bl-schluss a{color:var(--sig-700)}
.bl-fussnote{display:block;margin-top:5px;color:var(--ink-500)}

@media(max-width:640px){
  /* Auf dem Handy zuerst die Zahlen, darunter die beiden breiten Flächen.
     Der Daumen trifft "Weiter" dann ohne Zielen. */
  .blaettern{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .bl-schluss{text-align:left}
  .bl-zahlen{grid-column:1 / -1;order:-1;margin-bottom:4px}
  .bl-pfeil{justify-content:center;padding:0 12px}
  .bl-zahl{min-width:40px}
}

/* =========================================================
   Preise
   Sichtbar nur nach Anmeldung. Abgemeldet steht an derselben
   Stelle ein Link zur Anmeldung, damit der Platz nicht springt.
   ========================================================= */
.preis{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.preis b{font-size:15px;font-weight:700;color:var(--ink-900);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.preis-zusatz{font-size:12px;color:var(--ink-500)}
.preis-gross b{font-size:29px;letter-spacing:-.025em}
.preis-gross .preis-zusatz{font-size:14px}
.preis-test{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sig-800);background:var(--sig-200);border-radius:4px;padding:2px 6px;
  align-self:center}

/* In der Produktkachel liegt eine unsichtbare Fläche über der ganzen Kachel,
   damit sie als Ganzes anklickbar ist (.pk-titel a::after). Der Preislink muss
   darüber liegen, sonst landet ein Klick darauf auf der Artikelseite statt bei
   der Anmeldung. Der Anfragen-Knopf macht es über .pk-form genauso. */
.pk .preis-schloss,.pk .preis{position:relative;z-index:1}
.preis-schloss{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--sig-700);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .14s ease,border-color .14s ease}
.preis-schloss:hover{color:var(--sig-800);border-bottom-color:currentColor}
.preis-schloss-gross{font-size:17px;min-height:44px}
/* Schlosssymbol als Form gezeichnet, kein Zeichen und keine Schriftabhängigkeit. */
.ps-icon{position:relative;width:11px;height:9px;border:1.6px solid currentColor;
  border-radius:2px;flex:none;margin-top:4px}
.ps-icon::before{content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  width:7px;height:6px;border:1.6px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.preis-schloss-gross .ps-icon{width:14px;height:11px;margin-top:5px}
.preis-schloss-gross .ps-icon::before{top:-7px;width:9px;height:7px}

.preis-warnung{border:1px solid var(--sig-400);border-left:3px solid var(--sig-500);
  background:#FDF8EC;border-radius:10px;padding:13px 17px;margin-bottom:22px;
  font-size:14px;color:var(--ink-700);line-height:1.55;max-width:44rem}
.preis-warnung b{color:var(--ink-900)}
.preis-warnung .tech{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:#fff;border:1px solid var(--sig-300);border-radius:4px;padding:1px 5px}

/* Summenblock im Warenkorb. Rechtsbündig und mit Tabellenziffern, damit die
   Beträge untereinander stehen und man sie mit dem Auge addieren kann. */
.summenblock{margin:22px 0 4px;margin-left:auto;max-width:24rem;border:1px solid var(--ink-200);
  border-radius:12px;background:#fff;padding:16px 20px}
.sb-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-size:14.5px;color:var(--ink-600);margin-bottom:9px}
.sb-zeile b{color:var(--ink-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-gesamt{margin-top:12px;padding-top:12px;border-top:1px solid var(--ink-200);
  font-size:15px;color:var(--ink-900);margin-bottom:0}
.sb-gesamt b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.sb-fuss{font-size:13px;color:var(--ink-500);line-height:1.5;margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--ink-100)}
@media(max-width:560px){.summenblock{max-width:none}}

/* Preisspalten im Anfragekorb */
.kt-preis{font-variant-numeric:tabular-nums;color:var(--ink-700);white-space:nowrap}
.kt-zeilensumme{font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-zeilensumme b{color:var(--ink-900)}
.kt-ohne{color:var(--ink-500);font-size:13px}
.kt-gesamt{font-variant-numeric:tabular-nums}
.kt-teil{color:var(--ink-500);font-size:13px}

/* =========================================================
   Kontoseiten
   ========================================================= */
.kontogitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  gap:0 56px;align-items:start;max-width:900px}
@media(max-width:860px){.kontogitter{grid-template-columns:1fr;gap:32px 0}}
.kontokasten{border:1px solid var(--ink-200);border-radius:14px;background:#fff;
  padding:30px 32px;max-width:34rem}
/* Angemeldet nutzt der Kasten die volle Breite. Die Formularseiten davor
   (Anmelden, Registrieren) bleiben schmal — ein Formular über 1100 Pixel
   zwingt das Auge quer über den Bildschirm. */
.kontogitter-breit{grid-template-columns:1fr;max-width:none}
.kontogitter-breit .kontokasten{max-width:none;padding:32px 36px}
@media(max-width:560px){.kontogitter-breit .kontokasten{padding:22px 20px}}

/* --- Kennzahlen --- */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--ink-100);border:1px solid var(--ink-100);border-radius:12px;
  overflow:hidden;margin-bottom:10px}
@media(max-width:820px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.kpi{grid-template-columns:1fr}}
.kpi-kachel{background:#fff;padding:17px 20px}
.kpi-zahl{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.03em;
  color:var(--ink-900);margin:0 0 3px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-neben{font-size:15px;font-weight:400;color:var(--ink-500);margin-left:6px;
  letter-spacing:0}
.kpi-wort{font-size:12.5px;color:var(--ink-500);margin:0;line-height:1.4}
.kpi-fuss{font-size:12.5px;color:var(--ink-500);margin:0 0 30px;line-height:1.5;max-width:36rem}
.kontohinweis{font-size:14px;color:var(--ink-500);line-height:1.6;margin-bottom:28px;
  max-width:33.3rem;padding-left:14px;border-left:2px solid var(--ink-200)}

/* --- Säulendiagramm --- */
.dia-monat{margin:0 0 34px;padding:20px 22px;border:1px solid var(--ink-100);border-radius:12px}
.dia-titel{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-600);margin-bottom:16px}
.dia-svg{display:block;width:100%;height:150px}
.dia-gitter{stroke:var(--ink-100);stroke-width:1;vector-effect:non-scaling-stroke}
.dia-saeule{fill:var(--sig-600)}
.dia-null{fill:var(--ink-200)}
.dia-achse{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;margin-top:9px}
.dia-mon{text-align:center;min-width:0}
.dia-monname{display:block;font-size:11.5px;color:var(--ink-500);letter-spacing:.02em}
.dia-mon-stark .dia-monname{color:var(--ink-800);font-weight:700}
.dia-monwert{display:block;font-size:11px;color:var(--ink-600);font-variant-numeric:tabular-nums;
  margin-top:2px;white-space:nowrap}
@media(max-width:620px){.dia-monwert{display:none}}
/* Auf dem Handy ist eine Monatsspalte nur noch rund 20 Pixel breit — dort passt
   „Sep" nicht mehr sauber hin. Statt die Schrift unlesbar zu verkleinern, bleibt
   jeder dritte Monat stehen. Die Säulen selbst zeigt das Diagramm weiterhin
   alle, nur die Beschriftung wird zum Quartalsraster. */
@media(max-width:560px){
  .dia-monname{font-size:10.5px}
  .dia-mon:not(:nth-child(3n+1)) .dia-monname{visibility:hidden}
}
.dia-tabelle{margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-100)}
.dia-tabelle > summary{cursor:pointer;font-size:13px;color:var(--ink-600);min-height:30px;
  display:inline-flex;align-items:center;gap:8px;list-style:none}
.dia-tabelle > summary::-webkit-details-marker{display:none}
.dia-tabelle > summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid var(--ink-400);border-bottom:2px solid var(--ink-400);
  transform:rotate(-45deg);transition:transform .18s ease}
.dia-tabelle[open] > summary::before{transform:rotate(45deg)}
.dia-tabelle > summary:hover{color:var(--ink-900)}
.dia-tab{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.dia-tab th,.dia-tab td{padding:6px 10px 6px 0;border-bottom:1px solid var(--ink-100);
  text-align:left;font-weight:400;color:var(--ink-600)}
.dia-tab thead th{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-500)}
.dia-tab td.kt-r,.dia-tab th.kt-r{text-align:right;padding-right:0;
  font-variant-numeric:tabular-nums}

/* --- Vorgänge --- */
.vorgangsliste{list-style:none;margin:0 0 10px;padding:0;border:1px solid var(--ink-100);
  border-radius:12px;overflow:hidden}
.vg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--ink-100)}
.vg:last-child{border-bottom:0}
.vg-punkt{width:9px;height:9px;border-radius:50%;flex:none}
.vg-offen{background:var(--sig-500)}
.vg-fertig{background:var(--ink-300)}
.vg-text a{font-weight:600;font-size:15px;color:var(--ink-900);text-decoration:none}
.vg-text a:hover{color:var(--sig-800)}
.vg-klein{display:block;font-size:12.5px;color:var(--ink-500);margin-top:2px}
.vg-status{text-align:right;min-width:0}
.vg-status b{font-size:13.5px;color:var(--ink-800)}
.vg-status .vg-klein{max-width:16rem}
@media(max-width:640px){
  .vg{grid-template-columns:auto minmax(0,1fr)}
  .vg-status{grid-column:2;text-align:left}
  .vg-status .vg-klein{max-width:none}
}
.vg-mehr{font-size:14px;margin-bottom:6px}
.vg-mehr a{color:var(--sig-700)}

/* --- Meistbestellt --- */
.topliste{list-style:none;margin:0;padding:0;border:1px solid var(--ink-100);
  border-radius:12px;overflow:hidden}
.tp{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,150px) auto auto;gap:16px;
  align-items:center;padding:13px 18px;border-bottom:1px solid var(--ink-100)}
.tp:last-child{border-bottom:0}
.tp-text a{font-weight:600;font-size:14.5px;color:var(--ink-900);text-decoration:none}
.tp-text a:hover{color:var(--sig-800)}
.tp-klein{display:block;font-size:12.5px;color:var(--ink-500);margin-top:2px}
.tp-balken{display:block;height:7px;border-radius:4px;background:var(--ink-100);overflow:hidden}
.tp-fuell{display:block;height:100%;width:var(--anteil);background:var(--sig-600);
  border-radius:0 4px 4px 0}
.tp-menge{font-size:13.5px;color:var(--ink-500);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tp-menge b{color:var(--ink-900)}
.tp-form{margin:0}
@media(max-width:760px){
  .tp{grid-template-columns:minmax(0,1fr) auto}
  .tp-balken{grid-column:1 / -1;order:3}
  .tp-form{grid-column:1 / -1;order:4}
}
@media(max-width:560px){.kontokasten{padding:22px 20px;border-radius:12px}}

.kontoform .feld{margin-bottom:18px}
.kontoform label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-700);
  margin-bottom:6px}
.kontoform input[type=text],.kontoform input[type=email],.kontoform input[type=password]{
  width:100%;min-height:46px;padding:10px 13px;border:1px solid var(--ink-300);
  border-radius:9px;background:#fff;color:var(--ink-900);font-size:16px;font-family:inherit;
  transition:border-color .14s ease,box-shadow .14s ease}
.kontoform input:hover{border-color:var(--ink-400)}
/* Kein eigener Fokusring. Der Rest der Seite hat genau einen, und zwei
   verschiedene Ringe sind für jemanden, der mit der Tastatur arbeitet,
   schlechter als ein gewöhnungsbedürftiger. Nur der Rahmen färbt sich mit. */
.kontoform input:focus{border-color:var(--sig-500)}
.feldhilfe{display:block;font-size:13px;color:var(--ink-500);margin-top:5px;line-height:1.45}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:520px){.feldpaar{grid-template-columns:1fr}}
.feldcheck{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  margin:22px 0 4px}
.feldcheck input{width:19px;height:19px;margin-top:2px;accent-color:var(--sig-600)}
.feldcheck label{font-weight:400;font-size:14px;color:var(--ink-700);line-height:1.5;margin:0}
.feldcheck a{color:var(--sig-700)}
.feldknopf{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.feldknopf .btn{min-height:48px}
/* Honigtopf gegen Bots: für Menschen unsichtbar, für Screenreader über
   aria-hidden ausgeblendet, nicht per display:none, weil manche Bots das prüfen. */
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Beschriftung und Vergessen-Link in einer Zeile */
.label-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.label-link{font-weight:400;font-size:13px;color:var(--sig-700);text-decoration:none;
  border-bottom:1px solid transparent}
.label-link:hover{border-bottom-color:currentColor;color:var(--sig-800)}

/* Passwort ändern: zugeklappt, damit die Übersicht übersichtlich bleibt */
.pw-block{margin-top:26px;padding-top:20px;border-top:1px solid var(--ink-100)}
.pw-block > summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink-700);
  list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:34px}
.pw-block > summary::-webkit-details-marker{display:none}
.pw-block > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-500);
  border-bottom:2px solid var(--ink-500);transform:rotate(-45deg);flex:none;
  transition:transform .18s ease}
.pw-block[open] > summary::before{transform:rotate(45deg)}
.pw-block > summary:hover{color:var(--ink-900)}
.pw-inhalt{padding-top:14px;max-width:24rem}
.pw-breit{max-width:34rem}

/* Anmeldeprotokoll im Konto */
.anmliste{list-style:none;margin:0;padding:0;border:1px solid var(--ink-100);border-radius:10px;
  overflow:hidden}
.anm{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:baseline;
  padding:9px 14px;font-size:13.5px;border-bottom:1px solid var(--ink-100);color:var(--ink-600)}
.anm:last-child{border-bottom:0}
.anm-zeit{font-variant-numeric:tabular-nums}
.anm-was{font-weight:600;color:var(--ink-700)}
.anm-nein .anm-was{color:#8A2E2E}
.anm-ort{font-variant-numeric:tabular-nums;color:var(--ink-500);white-space:nowrap}
.anm-fuss{font-size:12.5px;color:var(--ink-500);margin-top:10px;line-height:1.5}
@media(max-width:520px){
  .anm{grid-template-columns:1fr auto}
  .anm-ort{grid-column:1 / -1;margin-top:-6px}
}

.kontolinks{margin-top:16px;font-size:14px}
.kontolinks a{color:var(--sig-700)}
.kontowechsel{margin-top:22px;padding-top:18px;border-top:1px solid var(--ink-100);
  font-size:14px;color:var(--ink-600)}
.kontowechsel a{color:var(--sig-700);font-weight:600}
.kontotext{font-size:15px;color:var(--ink-600);margin-bottom:22px;max-width:33.3rem}

.formfehler{border:1px solid #E4B4B4;border-left:3px solid #B33A3A;background:#FCF4F4;
  border-radius:10px;padding:14px 18px;margin-bottom:22px}
.formfehler p{font-size:14.5px;margin-bottom:6px;color:var(--ink-900)}
.formfehler ul{list-style:none;margin:0}
.formfehler li{font-size:14px;color:#8A2E2E;line-height:1.5;padding-left:14px;position:relative}
.formfehler li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1.5px;background:#B33A3A}

.fertigkasten{text-align:left}
.fk-kopf{font-family:var(--head);font-size:21px;font-weight:600;margin-bottom:10px;
  letter-spacing:-.015em}
.fertigkasten p{font-size:15px;color:var(--ink-600);line-height:1.6;margin-bottom:12px;max-width:33.3rem}
.fk-klein{font-size:13.5px;color:var(--ink-500)}
.fk-klein a{color:var(--sig-700)}

.kontodaten{border:1px solid var(--ink-100);border-radius:10px;overflow:hidden;margin-bottom:24px}
.kd-zeile{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:14px;
  padding:11px 16px;font-size:14.5px;border-bottom:1px solid var(--ink-100);margin:0}
.kd-zeile:last-child{border-bottom:0}
.kd-zeile span{color:var(--ink-500)}
.kd-zeile b{color:var(--ink-900);font-weight:600;word-break:break-word}
.kd-offen{color:var(--ink-500)!important;font-weight:400!important;font-size:13.5px}
.abmeldeform{margin-top:26px;padding-top:18px;border-top:1px solid var(--ink-100)}
.abmelde-hinweis{margin:10px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-500);max-width:52ch}
.knopf-schlicht{background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--ink-500);cursor:pointer;border-bottom:1px solid var(--ink-300)}
.knopf-schlicht:hover{color:var(--ink-900);border-bottom-color:var(--ink-500)}

.kontoinfo{border-left:1px solid var(--ink-200);padding-left:26px}
@media(max-width:860px){.kontoinfo{border-left:0;padding-left:0;border-top:1px solid var(--ink-200);padding-top:24px}}
.ki-kopf{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--ink-700);margin-bottom:12px}

/* --- Reiter im Konto --- */
.kontonav{display:flex;flex-wrap:wrap;gap:4px;margin:-6px 0 24px;padding-bottom:14px;
  border-bottom:1px solid var(--ink-100)}
.kn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;
  border-radius:8px;font-size:14px;color:var(--ink-600);text-decoration:none;
  transition:background .14s ease,color .14s ease}
.kn:hover{background:var(--porcelain-2);color:var(--ink-900)}
.kn-hier{background:var(--ink-900);color:var(--porcelain);font-weight:600}
.kn-hier:hover{background:var(--ink-800);color:var(--porcelain)}
.kn-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:10px;background:var(--ink-100);color:var(--ink-700);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.kn-hier .kn-zahl{background:var(--sig-500);color:var(--ink-950)}
.konto-h2{font-family:var(--head);font-size:22px;font-weight:600;letter-spacing:-.018em;
  margin-bottom:14px}
.konto-h3{font-family:var(--head);font-size:18px;font-weight:600;margin:34px 0 10px;
  padding-top:26px;border-top:1px solid var(--ink-100)}
.zurueckzeile{font-size:14px;margin-bottom:14px}
.zurueckzeile a{color:var(--sig-700);text-decoration:none}
.zurueckzeile a:hover{text-decoration:underline}

/* --- Bestellhistorie --- */
.bh-liste{list-style:none;margin:0;padding:0;border:1px solid var(--ink-100);border-radius:12px;
  overflow:hidden}
.bh-eintrag{padding:16px 18px;border-bottom:1px solid var(--ink-100)}
.bh-eintrag:last-child{border-bottom:0}
.bh-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.bh-titel{font-weight:600;font-size:15.5px;color:var(--ink-900);text-decoration:none}
.bh-titel:hover{color:var(--sig-800)}
.bh-betrag{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-900);white-space:nowrap}
.bh-zeile{font-size:13.5px;color:var(--ink-500);margin:5px 0 0}
.bh-test{color:var(--sig-800);font-weight:600}
.bh-knoepfe{margin:11px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.bh-schnell{margin-top:20px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--ink-100)}
.bh-schnell label{display:block;font-size:13px;color:var(--ink-600);margin-bottom:5px;font-weight:600}
.bh-schnell select{min-height:38px;padding:6px 10px;border:1px solid var(--ink-300);border-radius:8px;
  background:#fff;font-family:inherit;font-size:14px;max-width:100%}
.bh-meta{font-size:14px;color:var(--ink-500);line-height:1.6;margin-bottom:20px}
.bh-tab{width:100%;border-collapse:collapse;margin-bottom:8px}
.bh-tab th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-500);padding:0 10px 9px 0;border-bottom:1px solid var(--ink-200)}
.bh-tab td{padding:12px 10px 12px 0;border-bottom:1px solid var(--ink-100);font-size:14.5px;
  vertical-align:top}
.bh-tab td.kt-r,.bh-tab th.kt-r{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.bh-tab a{color:var(--ink-900);text-decoration:none;font-weight:600}
.bh-tab a:hover{color:var(--sig-800)}
.bh-klein{display:block;font-size:12.5px;color:var(--ink-500);margin-top:3px}
.bh-weg{font-size:12.5px;color:var(--ink-500);font-style:italic}
.bh-bemerkung{font-size:14px;color:var(--ink-600);background:var(--porcelain-2);border-radius:8px;
  padding:12px 15px;margin-top:16px;max-width:33.3rem}
.bh-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--ink-100);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bh-form .hint{font-size:13px;color:var(--ink-500);max-width:24rem;line-height:1.5}

/* --- Merken --- */
.pk-merk{position:absolute;top:10px;right:10px;z-index:2;margin:0}
.merkknopf{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:8px;border:1px solid var(--ink-200);background:rgba(255,255,255,.94);
  color:var(--ink-500);cursor:pointer;padding:0;
  transition:color .14s ease,border-color .14s ease,background .14s ease}
.merkknopf:hover{color:var(--sig-700);border-color:var(--sig-400);background:#fff}
.merkknopf.merk-an{color:var(--sig-600);border-color:var(--sig-400)}
.merkzeile{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;
  border-radius:9px;border:1px solid var(--ink-200);background:#fff;color:var(--ink-600);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:color .14s ease,border-color .14s ease}
.merkzeile:hover{color:var(--sig-800);border-color:var(--sig-400)}
.merkzeile.merk-an{color:var(--sig-700);border-color:var(--sig-400)}
.ab-merk{margin-top:12px}
.produkte-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.produkte-2{grid-template-columns:1fr}}

/* --- Kollegen --- */
.leuteliste{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--ink-100);
  border-radius:12px;overflow:hidden}
.ll-eintrag{display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--ink-100)}
.ll-eintrag:last-child{border-bottom:0}
.ll-aus{opacity:.55}
.ll-kreis{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--ink-100);color:var(--ink-700);font-weight:700;font-size:14px;flex:none}
.ll-text{flex:1;min-width:0}
.ll-text b{display:block;font-size:15px;color:var(--ink-900)}
.ll-klein{display:block;font-size:13px;color:var(--ink-500);margin-top:2px;word-break:break-word}
.ll-form{margin:0;flex:none}
.ll-offen{font-size:13.5px;color:var(--ink-500);margin:10px 0 0;padding-left:2px}
.einladform{margin-top:22px;max-width:24rem}
.einladungskasten{border:1px solid var(--sig-400);border-left:3px solid var(--sig-500);
  background:#FDF8EC;border-radius:10px;padding:14px 17px;margin-bottom:22px}
.einladungskasten p{font-size:14px;color:var(--ink-700);margin-bottom:9px}
.linkfeld{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  padding:9px 11px;border:1px solid var(--sig-300);border-radius:7px;background:#fff;
  color:var(--ink-800)}

/* Konto-Link in der Kopfzeile. Die Grundform steht oben im Kopfzeilenblock,
   hier nur, was den angemeldeten Zustand unterscheidet. */
.kontolink-an{color:var(--sig-300)}
.kontolink-an:hover{color:var(--sig-200)}
.kl-kreis{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--sig-500);color:var(--ink-950);font-weight:700;font-size:12.5px;
  flex:none}
@media(max-width:820px){.kontowort{display:none}}

/* Freigabestand im Kundenkonto. Kein Warnrot: Warten ist kein Fehler,
   sondern der normale Weg. Deshalb der Goldton wie bei jedem Hinweis. */
.freigabekasten{border:1px solid var(--ink-200);border-left:3px solid var(--sig-500);
  border-radius:0 10px 10px 0;background:var(--porcelain-2);padding:22px 26px;margin:0 0 30px;
  max-width:36rem}
.freigabekasten p{color:var(--ink-600);font-size:16px;margin:0 0 12px}
.freigabekasten p:last-child{margin-bottom:0}
.freigabekasten b{color:var(--ink-900)}
.fgk-kopf{font-family:var(--head);font-weight:600;color:var(--ink-900)!important;
  font-size:18px!important;margin-bottom:10px!important}
.fgk-klein{font-size:14px!important;color:var(--ink-500)!important}
.fgk-nein{border-left-color:var(--ink-400)}

/* --- Leerer Zustand --- */
.leerbox{border:1px solid var(--ink-200);border-left:3px solid var(--sig-500);border-radius:10px;
  background:#fff;padding:26px 28px;max-width:32.3rem}
.leerbox p{color:var(--ink-600)}
.leerbox p:last-child{margin-bottom:0;margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.strichliste{list-style:none;margin:14px 0 0}
.strichliste li{position:relative;padding-left:18px;color:var(--ink-600);margin-bottom:8px;font-size:15px}
.strichliste li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1.5px;
  background:var(--sig-600)}

/* =========================================================
   Artikelseite
   ========================================================= */
.sec-artikel{padding-top:34px}
.artgitter{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:44px;align-items:start;
  grid-template-areas:"titel box" "bild box" "inhalt box"}
.arttitel{grid-area:titel}
.artbild{grid-area:bild}
.anfragebox{grid-area:box}
.artinhalt{grid-area:inhalt}
@media(max-width:960px){
  .artgitter{grid-template-columns:1fr;gap:28px;
    grid-template-areas:"titel" "bild" "box" "inhalt"}
}

.arttitel h1{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.028em;margin-bottom:10px}
.art-unter{font-size:17px;color:var(--ink-600);max-width:31.3rem;margin-bottom:0}
.merkmale{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.merkmale li{font-size:12px;font-weight:600;color:var(--ink-700);background:var(--porcelain-2);
  border:1px solid var(--ink-200);border-radius:100px;padding:5px 13px}

.artbild{display:flex;flex-direction:column;align-items:center;background:var(--porcelain-2);
  border:1px solid var(--ink-200);border-radius:14px;padding:34px 24px 20px}
.artbild svg{width:min(420px,96%);height:auto}
.artbild-hinweis{font-size:12px;color:var(--ink-500);margin:20px 0 0;text-align:center}

/* --- Anfragebox --- */
.anfragebox{position:sticky;top:calc(var(--kopf-h) + 68px);border:1px solid var(--ink-200);
  border-radius:14px;background:#fff;padding:24px 22px;box-shadow:0 8px 28px rgba(8,11,13,.06)}
@media(max-width:960px){.anfragebox{position:static}}
.ab-nr{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);
  font-weight:600;margin-bottom:8px;font-variant-numeric:tabular-nums}
.ab-preis{font-family:var(--head);font-size:25px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink-900);margin-bottom:8px}
.ab-unter{font-size:14px;color:var(--ink-600);margin-bottom:20px;line-height:1.55}
.ab-form{display:flex;gap:8px;margin-bottom:16px}
.ab-form input[type=number]{width:74px;flex:none;font-family:var(--sans);font-size:16px;
  text-align:center;border:1px solid var(--ink-300);border-radius:var(--r);padding:13px 8px;
  background:#fff;color:var(--ink-900);font-variant-numeric:tabular-nums}
.ab-form input[type=number]:focus{border-color:var(--sig-600);
  box-shadow:0 0 0 3px rgba(201,154,50,.20)}
.ab-form .btn{flex:1;padding:13px 16px;font-size:15px}
.ab-info{font-size:13px;color:var(--ink-600);line-height:1.6;background:var(--porcelain);
  border:1px solid var(--ink-100);border-radius:9px;padding:13px 15px;margin:0}

/* --- Ausführungen --- */
.ausfuehrung{margin-bottom:34px}
.af-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-500);margin-bottom:10px}
.af-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.af{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:var(--r);
  border:1px solid var(--ink-300);background:#fff;color:var(--ink-700);font-size:15px;
  font-weight:600;text-decoration:none;transition:border-color .14s ease,color .14s ease}
.af:hover{border-color:var(--ink-900);color:var(--ink-900)}
.af.an{background:var(--ink-900);border-color:var(--ink-900);color:var(--porcelain)}

/* --- Technische Daten --- */
.td-kopf{font-size:20px;margin-bottom:14px}
.daten{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:22px}
.daten th,.daten td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ink-100)}
.daten th{font-weight:400;color:var(--ink-500);width:44%}
.daten td{font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.daten tr:nth-child(odd) th,.daten tr:nth-child(odd) td{background:var(--porcelain-2)}
@media(max-width:520px){.daten th,.daten td{padding:10px}.daten th{width:50%}}

.aliaszeile{font-size:14px;color:var(--ink-500);line-height:1.6;max-width:33.3rem}
.aliaszeile a{color:var(--sig-700)}
.artnotiz{margin-top:26px;border-left:3px solid var(--ink-200);padding:2px 0 2px 18px}
.artnotiz p{font-size:15px;color:var(--ink-600);margin:0}

/* --- Meldung nach dem Hinzufügen --- */
.flash{background:#0B7A3C;color:#fff;border-radius:10px;padding:14px 18px;margin-bottom:26px;
  font-size:15px;font-weight:500}
.flash a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.flash a:hover{color:#DFF3E6}

.nachbarn{margin-top:60px;padding-top:40px;border-top:1px solid var(--ink-200)}
.sec-h.klein{font-size:clamp(20px,2.4vw,25px);margin-bottom:18px}

/* =========================================================
   Abschluss unter Kategorie- und Artikelseiten
   ========================================================= */
/* Ohne die Liste daneben ist eine zweite Spalte sinnlos — der Absatz bekommt
   die volle Breite, seine Zeilenlänge deckelt .preishinweis p ohnehin. */
.ph-solo{grid-template-columns:1fr!important}
.preishinweis{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start;
  padding-bottom:44px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.09)}
@media(max-width:820px){.preishinweis{grid-template-columns:1fr;gap:26px}}
.ph-kopf{font-family:var(--head);font-size:20px;font-weight:600;color:var(--porcelain);
  margin-bottom:12px}
.preishinweis p{color:var(--ink-300);font-size:15px}
.ph-liste{list-style:none;display:grid;gap:12px}
.ph-liste li{font-size:15px;color:var(--ink-300);padding-left:20px;position:relative;line-height:1.5}
.ph-liste li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--sig-400)}
.ph-liste b{display:block;color:var(--porcelain);font-weight:600}

.weitergruppen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.weitergruppen{grid-template-columns:1fr}}
.wgk{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);text-decoration:none;background:rgba(255,255,255,.03);
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.wgk:hover{border-color:var(--sig-500);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.wgk-titel{font-family:var(--head);font-size:17px;font-weight:600;color:var(--porcelain)}
.wgk-kurz{font-size:14px;color:var(--ink-300);flex:1;line-height:1.5}
.wgk-mehr{font-size:13px;font-weight:600;color:var(--sig-300);margin-top:8px}
.wgk-hell{border-color:var(--ink-200);background:#fff}
.wgk-hell:hover{border-color:var(--sig-500);background:#fff}
.wgk-hell .wgk-titel{color:var(--ink-900)}
.wgk-hell .wgk-kurz{color:var(--ink-500)}
.wgk-hell .wgk-mehr{color:var(--sig-700)}

/* =========================================================
   Anfragekorb
   ========================================================= */
.korbhinweis{border-left:3px solid var(--sig-500);background:var(--porcelain-2);
  border-radius:0 10px 10px 0;padding:18px 22px;margin-bottom:30px;max-width:34.4rem}
.korbhinweis p{margin:0;font-size:15px;color:var(--ink-700)}

.korbtabelle{margin-bottom:52px}
.kt{width:100%;border-collapse:collapse;font-size:15px}
.kt thead th{text-align:left;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);font-weight:700;padding:0 12px 12px;border-bottom:1px solid var(--ink-200)}
.kt .kt-r{text-align:right}
.kt tbody td{padding:16px 12px;border-bottom:1px solid var(--ink-100);vertical-align:middle}
.kt-art{display:flex;align-items:center;gap:16px}
.kt-bild{flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  background:var(--porcelain-2);border-radius:8px}
.kt-bild svg{width:56px;height:42px}
.kt-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.kt-text a{color:var(--ink-900);text-decoration:none;font-weight:600;font-family:var(--head);font-size:16px}
.kt-text a:hover{color:var(--sig-800)}
.kt-klein{font-size:13px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.kt input[type=number]{width:82px;text-align:center;font-family:var(--sans);font-size:16px;
  border:1px solid var(--ink-300);border-radius:var(--r);padding:10px 6px;background:#fff;
  color:var(--ink-900);font-variant-numeric:tabular-nums}
.kt input[type=number]:focus{border-color:var(--sig-600)}
.kt-weg{width:44px;height:44px;border:1px solid transparent;background:transparent;cursor:pointer;
  border-radius:8px;color:var(--ink-500);font-size:20px;line-height:1;
  transition:color .14s ease,border-color .14s ease,background .14s ease}
.kt-weg:hover{color:var(--danger);border-color:var(--ink-200);background:#fff}
.kt-fuss{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:18px}
.kt-summe{font-size:15px;color:var(--ink-600)}
.kt-summe b{color:var(--ink-900);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .kt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kt tbody tr{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
    padding:14px 0;border-bottom:1px solid var(--ink-100)}
  .kt tbody td{border:0;padding:0}
  .kt-art{gap:12px}
  .kt-bild{width:50px;height:50px}
  .kt-bild svg{width:46px;height:34px}
}

.korbleeren{margin-top:34px;padding-top:20px;border-top:1px solid var(--ink-100)}
.leerknopf{background:none;border:0;padding:8px 0;cursor:pointer;font-family:var(--sans);
  font-size:13px;color:var(--ink-500);text-decoration:underline;text-underline-offset:3px}
.leerknopf:hover{color:var(--danger)}
.erfolg-hell{background:#fff;border:1px solid var(--ink-200);border-left:3px solid var(--stock);
  border-radius:0 12px 12px 0;padding:26px 28px;max-width:33.3rem}
.erfolg-hell p:last-child{margin-top:18px;margin-bottom:0}

/* =========================================================
   Suche
   ========================================================= */
.suchbeispiele{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.sb{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:100px;
  border:1px solid var(--ink-200);background:#fff;color:var(--ink-700);font-size:15px;
  text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color .14s ease,color .14s ease}
.sb:hover{border-color:var(--sig-500);color:var(--ink-900)}

/* --- Sortimentsübersicht --- */
.sortiment{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.sortiment{grid-template-columns:1fr}}
.sk-link{text-decoration:none;color:inherit;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.sk-link:hover{border-color:var(--sig-500);box-shadow:0 12px 34px rgba(8,11,13,.09);
  transform:translateY(-2px);color:inherit}
.sk-bilder{display:flex;align-items:center;gap:6px;background:var(--porcelain-2);border-radius:9px;
  padding:12px 14px;margin-bottom:20px;align-self:flex-start}
.sk-bilder svg{width:68px;height:51px}
.sk h2{font-size:20px;margin-bottom:8px}
.sk-mehr{font-size:14px;font-weight:600;color:var(--sig-700);margin-top:auto;
  display:inline-flex;align-items:center;gap:7px}
.sk-mehr::after{content:"→";transition:transform .16s ease;display:inline-block}
.sk-link:hover .sk-mehr::after{transform:translateX(4px)}
/* Dieselben Schritte auf hellem Grund: Textfarben müssen mitdrehen,
   sonst steht heller Text auf Weiß. */
.schritte-hell li{background:#fff;border-color:var(--ink-200)}
.schritte-hell p{color:var(--ink-600)}
.schritte-hell h3{color:var(--ink-900)}

/* --- Werkstoffkachel der Startseite bekommt einen Weg ins Sortiment --- */
.mat-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14px;
  font-weight:600;color:var(--sig-700);text-decoration:none}
.mat-link::after{content:"→";transition:transform .16s ease;display:inline-block}
.mat-link:hover{color:var(--sig-800)}
.mat-link:hover::after{transform:translateX(4px)}

/* =========================================================
   Touchgrößen
   Auf Zeigegeräten ohne Maus brauchen alle Ziele mindestens 44 Pixel Höhe.
   Auf dem Desktop bleiben die Elemente kompakt.
   ========================================================= */
@media(max-width:940px){
  .fw{min-height:44px;padding:9px 14px}
  .filterweg{display:inline-flex;align-items:center;min-height:44px}
  .mat-link{min-height:44px;align-items:center}
  .pk-form .btn,.btn-sm{min-height:44px}
  .sk-mehr{min-height:28px}
  .leerknopf{min-height:44px}
  .af{min-height:46px}
}

/* =========================================================
   Formulare auf hellem Grund
   Die Felder oben sind für den dunklen Anfrageabschnitt der Startseite
   gebaut. Im Anfragekorb steht dasselbe Formular auf Porzellan, dort
   müssen Rahmen, Schrift und Fehlerfarben mitdrehen.
   ========================================================= */
.sec:not(.sec-dunkel) label{color:var(--ink-800)}
.sec:not(.sec-dunkel) label .opt{color:var(--ink-500)}
.sec:not(.sec-dunkel) .formular input[type=text],
.sec:not(.sec-dunkel) .formular input[type=email],
.sec:not(.sec-dunkel) .formular input[type=tel],
.sec:not(.sec-dunkel) .formular input[type=date],
.sec:not(.sec-dunkel) .formular textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink-900);background:#fff;
  border:1px solid var(--ink-300);border-radius:var(--r);padding:13px 15px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease}
.sec:not(.sec-dunkel) .formular input::placeholder,
.sec:not(.sec-dunkel) .formular textarea::placeholder{color:var(--ink-400)}
.sec:not(.sec-dunkel) .formular input:focus,
.sec:not(.sec-dunkel) .formular textarea:focus{
  border-color:var(--sig-600)}
.sec:not(.sec-dunkel) .check{color:var(--ink-600)}
.sec:not(.sec-dunkel) .check a{color:var(--sig-700)}
.sec:not(.sec-dunkel) .formfoot .hint{color:var(--ink-500)}
.sec:not(.sec-dunkel) .field-err input,
.sec:not(.sec-dunkel) .field-err textarea{border-color:var(--danger)}
.sec:not(.sec-dunkel) .errline{color:#A31820}
.sec:not(.sec-dunkel) .fehlerbox{background:#FDF2F2;border:1px solid #F0C2C4;
  border-left:3px solid var(--danger);color:#7A1319;border-radius:0 10px 10px 0}

/* =========================================================
   NEUE BAUSTEINE aus der Überarbeitung
   ========================================================= */

/* --- Rückmeldung nach einer Korbaktion --- */
.flash{display:flex;align-items:flex-start;gap:12px;background:#EAF6EF;color:#0A4023;
  border:1px solid #9BD3B4;border-left:3px solid var(--stock);border-radius:0 10px 10px 0;
  padding:14px 18px;margin-bottom:26px;font-size:15px;max-width:60rem}
.flash-hak{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--stock);color:#fff;font-size:13px;font-weight:700;line-height:1;margin-top:1px}
.flash b{color:#06301A}
.flash a{color:#0A4023;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.flash a:hover{color:var(--stock)}

.meldung{border-radius:0 10px 10px 0;padding:13px 18px;margin-bottom:24px;font-size:15px;
  max-width:60rem;border-left:3px solid}
.meldung-ok{background:var(--porcelain-2);border-color:var(--ink-400);color:var(--ink-700)}
.meldung-warn{background:#FDF6E8;border-color:var(--sig-600);color:#5A430D}
.meldung-warn b{color:#3D2D08}
.sec-dunkel .meldung-ok{background:rgba(255,255,255,.05);color:var(--ink-300)}

/* --- Kachel: Artikel liegt bereits im Korb --- */
.pk-drin{border-color:var(--stock);box-shadow:inset 3px 0 0 var(--stock)}
.pk-drin:hover{border-color:var(--stock)}
.pk-drin-zahl{font-size:13px;font-weight:700;color:var(--stock)}
.pk-knopf{position:relative;z-index:1}

/* --- Filter: Trefferzahlen und tote Werte --- */
.fw{gap:7px}
.fw-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 4px;border-radius:9px;background:var(--ink-100);color:var(--ink-600);
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.fw-an .fw-n{background:rgba(255,255,255,.22);color:var(--porcelain)}
.fw-leer{opacity:.42;cursor:not-allowed;background:transparent;border-style:dashed}
.fw-leer:hover{border-color:var(--ink-200);color:var(--ink-600)}

/* --- Filterspalte als aufklappbarer Block --- */
/* Die Filterspalte ist ein <details>. Ohne "open" im HTML startet sie
   zugeklappt — das ist der Normalfall auf dem Handy. Auf dem Desktop wird
   sie per CSS aufgezwungen: dort gibt es keinen Grund zuzuklappen, und der
   Zustand darf nicht davon abhängen, ob jemand vorher getippt hat. */
.filter{list-style:none}
.filter > summary{list-style:none;cursor:default}
.filter > summary::-webkit-details-marker{display:none}
@media(min-width:901px){
  /* Auf dem Desktop gibt es keinen Grund zuzuklappen: der Klapper verschwindet,
     das <details> bleibt offen. */
  .filter > summary{display:none}
  .filter-auf{display:none}
}
.filter-aktiv{display:inline-flex;align-items:center;height:19px;padding:0 8px;margin-left:8px;
  border-radius:10px;background:var(--ink-900);color:var(--porcelain);font-size:11px;
  font-weight:700;letter-spacing:0;text-transform:none}
.filterweg-zeile{margin:-6px 0 16px}

/* --- Artikelseite: Rückweg, Korbstand --- */
.zurueck{margin-top:10px;font-size:14px}
.zurueck a{color:var(--ink-300);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.zurueck a:hover{color:var(--sig-300)}
.ab-drin{font-size:14px;color:var(--stock);font-weight:600;margin-bottom:14px}
.ab-drin a{color:var(--stock);text-decoration:underline;text-underline-offset:3px}
.anfragebox .ausfuehrung{margin:14px 0 20px;padding-bottom:18px;
  border-bottom:1px solid var(--ink-100)}
.anfragebox .af{min-height:40px;padding:8px 14px;font-size:14px}

/* --- Anfragekorb --- */
.wrap-korb{max-width:960px}
.korbformular{margin-top:0}
.weiterlegen{font-size:14px;color:var(--ink-500);margin:22px 0 44px;padding-top:18px;
  border-top:1px solid var(--ink-100)}
.weiterlegen a{color:var(--sig-700)}
.zurueckform{margin:-12px 0 24px}

/* =========================================================
   AKADEMIE — Beitragslayout
   Zweispaltig: Text links, Inhaltsverzeichnis rechts, das beim Lesen
   mitfährt und das laufende Kapitel anzeigt. Unter 980 px wird daraus
   eine Spalte, das Verzeichnis rutscht als aufklappbare Leiste nach oben.
   ========================================================= */
.beitrag-gitter{
  display:grid;
  grid-template-columns:minmax(0,720px) minmax(212px,252px);
  gap:0 60px;
  justify-content:center;
  align-items:start;
}
.kern{grid-column:1;grid-row:1}
.ivz-spalte{grid-column:2;grid-row:1/span 2;align-self:stretch}
.beitrag-text{grid-column:1;grid-row:2;min-width:0}

/* --------------------------------------------- Das Wichtigste in Kürze --- */
/* Steht vor dem ersten Kapitel. Wer nur zehn Sekunden hat, hat danach die
   Antwort; wer mehr Zeit hat, liest weiter. */
.kern{
  background:var(--porcelain-2);
  border:1px solid var(--ink-200);
  border-top:3px solid var(--sig-500);
  border-radius:0 0 var(--r) var(--r);
  padding:28px 32px 24px;
  margin-bottom:16px;
}
.artikel .kern-titel{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--sig-700);
  margin:0 0 16px;padding:0;border-top:0;
}
.artikel .kern-liste{list-style:none;margin:0;max-width:none}
.artikel .kern-liste li{
  position:relative;padding-left:30px;margin-bottom:12px;
  font-size:16.5px;line-height:1.58;color:var(--ink-800);max-width:32rem;
}
.artikel .kern-liste li:last-child{margin-bottom:0}
.artikel .kern-liste li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:9px;
  border-left:2.4px solid var(--sig-600);border-bottom:2.4px solid var(--sig-600);
  transform:rotate(-45deg);border-radius:1px;background:none;
}
.artikel .kern-liste b,.artikel .kern-liste strong{color:var(--ink-950);font-weight:650}
.artikel .kern-fuss{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--ink-200);
  font-size:13.5px;color:var(--ink-500);max-width:none;
}

/* ------------------------------------------------- Inhaltsverzeichnis --- */
.ivz{
  position:sticky;top:104px;
  border-left:1px solid var(--ink-200);
  padding:2px 0 2px 20px;
}
.ivz-kopf{
  list-style:none;cursor:default;
  display:flex;align-items:baseline;gap:8px;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--ink-500);
  padding-bottom:14px;
}
.ivz-kopf::-webkit-details-marker{display:none}
.ivz-jetzt,.ivz-pfeil{display:none}

.ivz-liste{list-style:none;margin:0;padding:0;max-width:none}
.artikel .ivz-liste li{margin:0;padding:0;max-width:none}
.artikel .ivz-liste li::before{display:none}
.ivz-liste a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 0 7px 2px;
  font-size:14px;line-height:1.4;color:var(--ink-500);
  text-decoration:none;
  border-left:2px solid transparent;margin-left:-22px;padding-left:20px;
  transition:color .18s ease,border-color .18s ease;
}
.ivz-liste a:hover{color:var(--ink-900)}
/* Die Kapitelnummer stand vorher in ink-300 und kam damit auf 2,1:1 — zu wenig
   für Text. Jetzt dieselbe Farbe wie die Zeile, die Rangfolge macht die Größe. */
.ivz-nr{
  font-size:11px;font-weight:700;color:var(--ink-500);
  min-width:12px;font-variant-numeric:tabular-nums;
}
.ivz-tx{flex:1}
/* Laufendes Kapitel */
.ivz-liste a.hier{color:var(--ink-950);font-weight:600;border-left-color:var(--sig-500)}
.ivz-liste a.hier .ivz-nr{color:var(--sig-700)}
/* Bereits gelesen */
.ivz-liste a.durch{color:var(--ink-400)}

.ivz-fort{
  margin:16px 0 0;padding-top:13px;border-top:1px solid var(--ink-100);
  display:flex;align-items:center;gap:10px;max-width:none;
}
.ivz-balken{
  flex:1;height:3px;border-radius:2px;background:var(--ink-100);overflow:hidden;
}
.ivz-balken span{
  display:block;height:100%;width:0;border-radius:2px;background:var(--sig-500);
  transition:width .18s linear;
}
.ivz-stand{font-size:11.5px;color:var(--ink-500);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* Ankersprünge dürfen nicht unter der Kopfzeile landen. */
.beitrag-text h2{scroll-margin-top:104px}

/* -------------------------------------------------------- Autorenbox --- */
.autor{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  margin-top:56px;padding:26px 28px;
  background:var(--porcelain-2);border:1px solid var(--ink-200);border-radius:var(--r);
}
.autor-bild{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:2px solid var(--porcelain);box-shadow:0 0 0 1px var(--ink-200);
}
.autor-ini{
  display:grid;place-items:center;
  background:var(--ink-900);color:var(--sig-300);
  font-family:var(--head);font-size:26px;font-weight:600;letter-spacing:.02em;
  box-shadow:none;border-color:var(--ink-900);
}
.autor-text p{margin:0;max-width:31rem}
.autor-marke{font-size:11px!important;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--ink-500)!important;margin-bottom:7px!important}
.autor-name{font-family:var(--head);font-size:19px!important;font-weight:600;
  color:var(--ink-950)!important;letter-spacing:-.02em;line-height:1.2}
.autor-rolle{font-size:14px!important;color:var(--ink-500)!important;margin-bottom:11px!important}
.autor-satz{font-size:15px!important;color:var(--ink-700)!important;line-height:1.6!important}
.autor-link{margin-top:12px!important}
.autor-link a{font-size:14px;font-weight:600;color:var(--sig-700)}

/* ---------------------------------------------------------- Abbildung --- */
/* Alle Grafiken auf der Seite sind gezeichnet, nicht fotografiert: sie bleiben
   bei jeder Bildschirmgröße scharf, wiegen ein paar Kilobyte und lassen sich
   ändern, ohne dass jemand ein Bildbearbeitungsprogramm öffnen muss. */
.fig{margin:34px 0 30px}
.fig-bild{
  background:var(--porcelain-2);border:1px solid var(--ink-200);border-radius:var(--r);
  padding:26px 24px;
}
.fig-bild svg{width:100%;height:auto;display:block;margin:0 auto}

/* Breite Zeichnungen auf dem Handy.
   Ein SVG, das auf 318 Pixel heruntergerechnet wird, hat 5 Pixel große
   Beschriftungen. Lesbar ist das nicht. Deshalb bekommt die Zeichnung eine
   Mindestbreite und der Kasten schiebt sich seitlich, genau wie die breiten
   Tabellen weiter oben. Der Schatten an der Kante zeigt, dass da noch etwas
   kommt, und verschwindet, sobald man am Ende ist. */
.fig-breit{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--porcelain-2) 34%, rgba(244,242,237,0)) left center,
    linear-gradient(to left,  var(--porcelain-2) 34%, rgba(244,242,237,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(8,11,13,.14), rgba(8,11,13,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(8,11,13,.14), rgba(8,11,13,0)) right center;
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
.fig-breit svg{min-width:600px}
/* Bei Zeichnungen mit Animation steckt der Schiebebereich innen:
   <div class="fig-bild"><div class="fig-breit">. So bleibt die Leiste mit dem
   Knopf stehen und wird nicht mitgeschoben. */
@media (min-width:700px){ .fig-breit svg{min-width:0} }
.artikel figcaption,.fig-unter{
  font-size:13.5px;line-height:1.55;color:var(--ink-500);
  margin-top:11px;max-width:33.3rem;
}
.artikel figcaption b,.fig-unter b{color:var(--ink-800);font-weight:650}

/* Zwei Grafiken nebeneinander, jede mit eigener Beschriftung */
.fig-paar{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fig-paar > div{text-align:center;min-width:0}
.fig-paar svg{max-width:210px}
/* Querformatige Paare (zwei Kugeln nebeneinander) dürfen breiter, sonst
   schrumpfen die Kugeln auf Erbsengröße. */
.fig-paar-breit svg{max-width:290px}

/* Drei Teilbilder nebeneinander (Laufspuren). Auf dem Handy untereinander. */
.fig-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fig-drei > div{text-align:center;min-width:0}
.fig-drei svg{max-width:250px}
@media(max-width:700px){.fig-drei{grid-template-columns:1fr;gap:24px}}

/* Eignungsmatrix als echte Tabelle (fig_matrix in inc/figuren.php).
   Breit: Zeilen und vier Spalten wie gewohnt. Schmal: jede Zeile wird eine
   Karte, der Spaltenname steht dann klein über jedem Feld. So passt alles
   auf 320 Pixel, ohne seitliches Wischen. */
.mx{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed}
.mx thead th{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-600);
  text-align:center;vertical-align:bottom;padding:0 2px 4px;line-height:1.25}
.mx-unter{display:block;font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--ink-500);margin-top:2px}
.mx-ecke{width:34%}
.mx thead td{border:0;padding:0;background:none}

/* Erklärende Animation auf Klick (assets/animationen.js). Die Leiste gibt es
   nur mit JavaScript; ohne Skript und im Druck bleibt das Standbild. */
.anim-leiste{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--ink-200);text-align:left}
/* In den Rastern mit zwei oder drei Teilbildern über die ganze Breite */
.fig-paar > .anim-leiste,.fig-drei > .anim-leiste{grid-column:1 / -1;margin-top:0}
.anim-knopf{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;
  min-height:40px;padding:8px 16px 8px 13px;border-radius:999px;
  border:1px solid var(--ink-300);background:#fff;color:var(--ink-900);
  font:600 14px/1.2 var(--sans)}
.anim-knopf svg{width:15px;height:15px;flex:none}
.anim-knopf:hover{border-color:var(--sig-500);background:#FFFDF7}
.anim-knopf:focus-visible{outline:3px solid var(--sig-400);outline-offset:2px}
.anim-knopf[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.artikel .anim-status{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-600);max-width:none;
  min-height:2.9em;display:flex;align-items:center}
@media(max-width:620px){
  .anim-leiste{flex-direction:column;align-items:flex-start;gap:10px}
  .artikel .anim-status{min-height:4.4em;align-items:flex-start}
}
.mx tbody th{font-size:14px;font-weight:500;color:var(--ink-900);text-align:left;
  padding:0 8px 0 0;line-height:1.3}
.mx td{text-align:center;font-size:13px;font-weight:700;border-radius:6px;border:1.2px solid;
  padding:8px 4px;line-height:1.2}
.mx-0{background:#FBE9EA;border-color:#D6303A!important;color:#8E1F26}
.mx-1{background:#FDF3DC;border-color:#C99A32!important;color:#7C5C15}
.mx-2{background:#E4F2E9;border-color:#0B7A3C!important;color:#085C2D}
@media(max-width:620px){
  .mx,.mx tbody{display:block}
  .mx thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mx tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:13px}
  .mx tbody th{grid-column:1 / -1;padding:0 0 1px;font-weight:600}
  .mx td{display:block;padding:6px 2px 7px;font-size:12.5px}
  .mx td::before{content:attr(data-sp);display:block;font-size:10.5px;font-weight:600;
    color:var(--ink-500);margin-bottom:2px}
}
.fig-name{font-family:var(--head);font-size:16px!important;font-weight:600;
  color:var(--ink-950)!important;margin:12px 0 2px!important;max-width:none!important}
.fig-was{font-size:12.5px!important;color:var(--ink-500)!important;margin:0!important;
  max-width:none!important}

/* Überschrift über einem Balkenbild */
.dia-titel{font-size:12px!important;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink-500)!important;margin:0 0 16px!important;max-width:none!important}
.dia-titel-2{margin-top:28px!important;padding-top:22px;border-top:1px solid var(--ink-200)}

/* Tabellenüberschrift: sagt, worauf sich die Zahlen beziehen */
.tab-cap{caption-side:top;text-align:left;font-size:12.5px;color:var(--ink-500);
  line-height:1.5;padding-bottom:4px}

/* Kurzer Beleg direkt unter einer Tabelle */
.quellenzeile{font-size:12.5px!important;color:var(--ink-500)!important;
  margin-top:-8px!important;padding-left:14px;border-left:2px solid var(--ink-200)}

/* Formel: mittig, ruhig, mit der Legende direkt darunter */
.formel{background:var(--porcelain-2);border:1px solid var(--ink-200);border-radius:var(--r);
  padding:22px 24px 18px;margin:26px 0;text-align:center}
.artikel .formel p{margin:0;max-width:none}
.artikel .formel p:first-child{font-family:var(--head);font-size:24px;letter-spacing:.01em;
  color:var(--ink-950);line-height:1.3}
.artikel .formel p:first-child b{font-weight:600}
.artikel .formel p + p{margin-top:14px!important;padding-top:12px;
  border-top:1px solid var(--ink-200);font-size:13px;color:var(--ink-500);line-height:1.6}

/* Quellenblock am Beitragsende */
.quellen{margin-top:44px;padding:22px 24px;background:var(--porcelain-2);
  border:1px solid var(--ink-200);border-radius:var(--r)}
.quellen-titel{font-size:11.5px!important;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--ink-500)!important;margin:0 0 13px!important;max-width:none!important}
.artikel .quellen ul{margin:0;list-style:none;max-width:none}
.artikel .quellen li{font-size:14px;line-height:1.55;color:var(--ink-600);
  padding-left:17px;margin-bottom:9px;max-width:32rem}
.artikel .quellen li::before{width:5px;height:5px;top:9px;left:1px;background:var(--ink-300)}
.quellen-fuss{font-size:13.5px!important;color:var(--ink-500)!important;
  margin:14px 0 0!important;padding-top:13px;border-top:1px solid var(--ink-200);max-width:32rem}

/* Zeichenerklärung unter einer Grafik */
.fig-legende{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--ink-200)}
.fig-legende span{display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-600)}
.fig-legende i{width:13px;height:13px;border-radius:3px;flex:none;
  border:1px solid var(--ink-300)}
.lg-stahl{background:#9AA7AE}
.lg-si{background:#20282C;border-color:#20282C}
.lg-zro{background:#FBFAF7}
.lg-kaefig{background:var(--sig-400);border-color:var(--sig-600)}
.lg-strom{background:var(--danger);border-color:var(--danger)}

/* ------------------------------------------------------ Kennzahlreihe --- */
/* Drei bis vier belegte Zahlen nebeneinander. Sagt in einer Zeile, was ein
   Absatz sonst in fünf sagt. */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;background:var(--ink-200);border:1px solid var(--ink-200);
  border-radius:var(--r);overflow:hidden;margin:30px 0}
.zahlen div{background:var(--porcelain);padding:18px 20px 16px}
.zahlen b{display:block;font-family:var(--head);font-size:27px;font-weight:600;
  color:var(--ink-950);letter-spacing:-.03em;line-height:1.1;margin-bottom:5px}
.zahlen b small{font-size:15px;font-weight:500;color:var(--ink-500);letter-spacing:0}
.zahlen span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-500)}

/* --------------------------------------------------------- Balkenbild --- */
/* Vergleich zweier oder dreier Werte. Die Balken wachsen, sobald der Block
   ins Bild kommt — das lenkt den Blick genau auf den Unterschied. */
.dia{margin:0}
.dia-zeile{display:grid;grid-template-columns:120px 1fr auto;gap:14px;
  align-items:center;margin-bottom:13px}
.dia-zeile:last-child{margin-bottom:0}
.dia-name{font-size:13.5px;color:var(--ink-700);font-weight:600;line-height:1.3}
.dia-spur{height:19px;border-radius:3px;background:var(--ink-100);overflow:hidden}
.dia-balken{
  display:block;height:100%;width:0;border-radius:3px;background:var(--ink-500);
  transition:width .95s cubic-bezier(.22,.75,.3,1);
}
[data-reveal].sichtbar .dia-balken{width:var(--w)}
.dia-b-stahl{background:linear-gradient(90deg,#8C99A1,#B4BEC4)}
.dia-b-hyb{background:linear-gradient(90deg,var(--ink-800),#4E5F67)}
.dia-b-voll{background:linear-gradient(90deg,var(--sig-600),var(--sig-400))}
/* Neutrale Balken, wenn die Reihe keine Werkstoffe vergleicht, sondern
   Anteile. Der hervorgehobene ist der, um den es im Text geht. */
.dia-b-neutral{background:linear-gradient(90deg,#8C99A1,#B4BEC4)}
.dia-b-wichtig{background:linear-gradient(90deg,var(--sig-600),var(--sig-400))}
.dia-wert{font-size:13.5px;font-weight:600;color:var(--ink-900);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:58px;text-align:right}
.artikel .dia-fuss{font-size:12.5px;line-height:1.55;color:var(--ink-500);margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--ink-200);max-width:none}
/* Bildunterschrift unmittelbar unter einer Teilgrafik: kein Trennstrich, enger. */
.artikel .dia-fuss-eng{border-top:0;padding-top:0;margin-top:6px;font-weight:600;color:var(--ink-700)}

/* --------------------------------------------- Ruhe in den Grafiken --- */
/* Die Zeichnungen im Text bewegen sich nicht von selbst. Eine ruhige Grafik
   liest sich auf dem Handy, im Druck und im Screenshot gleich gut. Die Balken
   bekommen ihre Breite beim Hereinscrollen, damit der Vergleich ins Auge
   fällt; das ist eine einzige, kurze Bewegung. Fünfzehn Zeichnungen haben
   zusätzlich einen Knopf „Ablauf zeigen“: Dort erklärt die Bewegung etwas,
   das ein Standbild nicht zeigen kann. Sie startet nur auf Klick
   (assets/animationen.js). Von selbst zeichnet sich seit Oktober 2026 nur die
   Titelgrafik im Kopf, einmal beim Laden (Abschnitt „Titelgrafiken“). */

/* ------------------------------------------- Bezeichnung zerlegt (Grafik) --- */
.schluessel{display:flex;flex-wrap:wrap;gap:5px;align-items:stretch;
  font-family:var(--head);margin-bottom:22px}
.tsl-teil{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:12px 13px;border-radius:6px;min-width:44px;
  background:var(--porcelain);border:1px solid var(--ink-200);
}
.tsl-teil b{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink-950);line-height:1}
.tsl-teil span{font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--ink-500);margin-top:7px}
.tsl-hat{border-color:var(--sig-500);background:#FFFDF7}
.tsl-hat span{color:var(--sig-700)}
.tsl-erklaer{display:grid;gap:1px;background:var(--ink-200);
  border:1px solid var(--ink-200);border-radius:var(--r);overflow:hidden}
.tsl-erklaer div{background:var(--porcelain);padding:13px 16px;display:grid;
  grid-template-columns:74px 1fr;gap:14px;align-items:baseline}
.tsl-erklaer b{font-family:var(--head);font-size:15px;color:var(--ink-950)}
.tsl-erklaer p{margin:0!important;font-size:14px!important;color:var(--ink-600)!important;
  max-width:none!important;line-height:1.5!important}

/* ------------------------------------------------- Frage-Antwort-Block --- */
.faq{border-top:1px solid var(--ink-100);margin:30px 0}
.faq details{border-bottom:1px solid var(--ink-100)}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
  font-family:var(--head);font-size:16.5px;font-weight:600;color:var(--ink-900);
  line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:23px;width:9px;height:9px;
  border-right:2px solid var(--ink-400);border-bottom:2px solid var(--ink-400);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq summary:hover{color:var(--sig-800)}
.artikel .faq p{font-size:16px;margin-bottom:14px}
.faq-inhalt{padding:0 0 20px}

/* ------------------------------------------------------------ Schmal --- */
@media(max-width:979px){
  .beitrag-gitter{grid-template-columns:minmax(0,1fr);gap:0}
  .kern{grid-column:1;grid-row:1}
  .ivz-spalte{grid-column:1;grid-row:2;align-self:auto}
  .beitrag-text{grid-column:1;grid-row:3}

  .ivz{position:static;border-left:0;padding:0;
    border:1px solid var(--ink-200);border-radius:var(--r);margin:0 0 30px;
    background:var(--porcelain)}
  .ivz-kopf{
    cursor:pointer;padding:15px 44px 15px 18px;position:relative;
    align-items:center;gap:12px;min-height:52px;
  }
  .ivz-jetzt{
    display:block;flex:1;font-size:13px;letter-spacing:0;text-transform:none;
    font-weight:500;color:var(--ink-900);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;
  }
  .ivz-pfeil{
    display:block;position:absolute;right:18px;top:50%;width:9px;height:9px;
    margin-top:-6px;
    border-right:2px solid var(--ink-500);border-bottom:2px solid var(--ink-500);
    transform:rotate(45deg);transition:transform .2s ease;
  }
  .ivz[open] .ivz-pfeil{transform:rotate(-135deg);margin-top:-2px}
  .ivz[open] .ivz-kopf{border-bottom:1px solid var(--ink-100)}
  .ivz-inhalt{padding:8px 18px 16px}
  .ivz-liste a{margin-left:0;padding-left:12px;font-size:15px;padding-top:9px;padding-bottom:9px}
  .ivz-fort{display:none}

  .kern{padding:24px 22px 20px}
  .autor{grid-template-columns:1fr;gap:16px;padding:24px 22px}
  .autor-bild{width:64px;height:64px}
  .dia-zeile{grid-template-columns:1fr;gap:5px}
  .dia-wert{text-align:left;min-width:0}
  .fig-bild{padding:18px 14px}
  .fig-paar{grid-template-columns:1fr;gap:26px}
  .quellen{padding:20px 18px}
  .artikel .formel p:first-child{font-size:19px}

  /* Vergleichstabellen auf dem Handy: kleinerer Grad und engere Polster.
     Sonst wird eine Zeile 150 px hoch, weil eine Spalte außerhalb des
     Bildschirms dreizeilig umbricht. */
  .tab{font-size:13.5px}
  .tab th{padding-right:14px;letter-spacing:.08em}
  .tab td{padding:10px 14px 10px 0}
  .tab-scroll{background-size:30px 100%, 30px 100%, 13px 100%, 13px 100%}
}

/* =========================================================
   DRUCK
   Ein Einkäufer druckt die Artikelseite als Datenblatt und heftet sie ab.
   Alles, was auf Papier nichts verloren hat, fliegt raus; alles, was bleibt,
   wird schwarz auf weiß gesetzt. Ohne diesen Block druckte die Seite
   weiße Schrift auf weißem Grund.
   ========================================================= */
@media print{
  @page{margin:16mm 14mm}

  html,body{background:#fff!important;color:#000!important;font-size:11pt;line-height:1.45}

  /* Eingeblendet wird beim Scrollen. Wer druckt, bevor er bis unten gescrollt
     hat, bekäme sonst leere Flächen statt Zeichnungen. */
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}

  /* Alles, was auf Papier keinen Zweck hat */
  .anim-leiste,
  .kopfrechts,.hauptnav,.burger,.skip,.fusssuche,
  .anfragebox,.pk-fuss,.pk-form,.filter,.nachbarn,.preishinweis,
  .kat-tipp,.blaettern,.bl-schluss,.kopf-vorteile,
  .weitergruppen,.gruppenfuss,.korbleeren,.weiterlegen,.zurueckform,
  .flash,.meldung,.suchbeispiele,.formfoot,.check,.hero-band,.cta,
  .finder,.artikel-cta,.zeitplan,.schritte,.waage,.beitraege,.mats,.drei,
  footer .cols,.legal,.artbild-hinweis,.zurueck{display:none!important}

  /* Flächen aufhellen, Text schwärzen — sonst weiß auf weiß */
  .topbar,.hero,.artikel-kopf,.sec,.sec-dunkel,.sec-hell,footer,
  .karte,.pk,.mat,.sk,.wgk,.anfragebox,.leerbox,.merk,.korbhinweis{
    background:#fff!important;box-shadow:none!important}
  .topbar *,.hero *,.artikel-kopf *,.sec-dunkel *,footer *,
  h1,h2,h3,h4,p,li,td,th,span,b,strong,dt,dd{color:#000!important}
  .krumen,.artikel-meta,.pk-nr,.ab-nr,.aliaszeile,.tz-zusatz,
  .artbild-hinweis,.filterhinweis{color:#444!important}

  /* Kopf auf eine Zeile eindampfen */
  .topbar{position:static;border-bottom:1px solid #000;padding:0 0 6mm}
  .kopfgitter{display:block;min-height:0}
  .brand img{height:12mm;filter:invert(1)}

  /* Ränder statt Farbflächen */
  .pk,.karte,.mat,.sk,.leerbox,.artbild{border:1px solid #999!important}
  .sec{padding:6mm 0!important;border:0!important}
  .wrap,.wrap-narrow,.wrap-form,.wrap-korb,.wrap-beitrag{max-width:none;padding:0}

  /* Das Wichtigste: nichts mitten in einer Zeile umbrechen */
  .daten tr,.kt tbody tr,.pk,.karte,.merk,.tab tr,.artbild,.arttitel{
    break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .artgitter{display:block}
  .artbild{margin-bottom:8mm;padding:6mm}
  .artbild svg{width:75mm;height:auto}
  .arttitel{margin-bottom:6mm}
  .td-kopf{margin-top:0}
  .merkmale li{border:1px solid #999!important}
  .produkte{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
  /* Die Trefferzeile bleibt auf Papier stehen. Erst mit "Seite 4 von 7" weiß
     der Leser, dass er einen Auszug in der Hand hält und nicht das Sortiment. */
  .kattop{display:block;margin-bottom:4mm}
  /* Ohne den Vorteilsblock ist die zweite Spalte im Kopf leer. */
  .kopf-gitter{display:block}
  .trefferzahl{font-size:10pt;margin:0}

  /* Tabelle als Datenblatt lesbar halten */
  .daten{width:100%;border-collapse:collapse}
  .daten th,.daten td{border-bottom:1px solid #bbb;padding:2mm 3mm;background:#fff!important}
  .daten th{width:45%;font-weight:400}
  .daten td{font-weight:700}

  /* Adressen ausschreiben — auf Papier ist ein Link sonst wertlos.
     Ausgenommen sind Produktkacheln: dort steht die Artikelnummer, und eine
     ausgeschriebene Adresse je Kachel wäre auf einem Katalogausdruck nur Lärm. */
  main a[href^="/"]::after{content:" (rotaris-lager.de" attr(href) ")";font-size:9pt;color:#555}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  main a[href^="#"]::after,main a[href^="mailto"]::after{content:""}
  main .pk a[href]::after,main .kt a[href]::after,main .krumen a[href]::after,
  main .wgk[href]::after,main .beitrag[href]::after{content:""!important}

  /* Zierelemente kosten Toner und tragen nichts bei */
  .hero::before,.hero::after,.artikel-kopf::after,.sec-dunkel::before,.hl{display:none!important}

  /* --- Akademiebeitrag auf Papier --- */
  /* Das Inhaltsverzeichnis ist eine Hilfe zum Scrollen. Auf Papier scrollt
     niemand, deshalb fliegt es raus — die Kapitel stehen ja untereinander. */
  .ivz-spalte,.autor-link,.weiterlesen{display:none!important}
  .beitrag-gitter{display:block}
  .kern,.autor,.fig-bild,.zahlen,.zahlen div,.tsl-teil,.tsl-erklaer,.tsl-erklaer div,
  .dia-spur,.quellen,.tab-scroll,.formel{background:#fff!important}
  .formel{border:1px solid #999!important;break-inside:avoid}
  .tab-scroll{overflow:visible!important}
  /* Auf Papier gibt es kein seitliches Schieben. Mindestbreite weg,
     sonst wäre die halbe Zeichnung abgeschnitten. */
  .fig-breit{overflow:visible!important;background:#fff!important}
  .fig-breit svg{min-width:0!important}
  .quellen{border:1px solid #999!important;break-inside:avoid}
  .fig-paar{grid-template-columns:1fr 1fr}
  .fig-drei{grid-template-columns:repeat(3,1fr)}
  .kern{border:1px solid #000!important;border-radius:0;padding:5mm 6mm;margin-bottom:7mm}
  .kern-titel{color:#000!important}
  .autor{border:1px solid #999!important;margin-top:8mm;padding:5mm 6mm}
  .autor-ini{background:#fff!important;color:#000!important;border:1px solid #999!important}
  .fig-bild{border:1px solid #999!important;padding:4mm}
  .zahlen,.tsl-erklaer{border:1px solid #999!important}
  .zahlen div{border-right:1px solid #ddd}
  .dia-spur{border:1px solid #999}
  .dia-balken{background:#555!important;width:var(--w)!important}
  .faq details{border-bottom:1px solid #bbb}
  .faq summary::after{display:none}
  .faq-inhalt{display:block!important}
  .kern,.autor,.fig,.zahlen,.dia-zeile,.tsl-erklaer div,.faq details{
    break-inside:avoid;page-break-inside:avoid}
  /* Sprungmarken im Text ergeben gedruckt keinen Sinn. */
  .ivz-liste a[href]::after{content:""!important}

  /* Fußzeile auf eine Herkunftszeile reduzieren */
  footer{border-top:1px solid #000;padding:4mm 0 0;margin-top:8mm}
  footer::after{content:"rotaris-lager.de · Preise im Kundenkonto oder auf Anfrage";
    display:block;font-size:9pt;color:#444}
}

/* =========================================================
   Lesbare Zeilenlänge
   Gemessen, nicht geschätzt: 1ch ist in Public Sans die Breite der Ziffer 0
   und damit rund 29 % breiter als ein durchschnittliches Zeichen im deutschen
   Satz. Deshalb stehen hier rem-Werte, die auf die gemessene mittlere
   Zeichenbreite von 8,08 px bei 17 px Schriftgrad zurückgehen.
   Zielkorridor: 45 bis 75 Zeichen je Zeile.
   ========================================================= */
.artikel li,.artikel ul,.artikel ol,
.legalpage li,.legalpage ul,.legalpage ol{max-width:33.3rem}
.artikel li,.legalpage li{max-width:32rem}
.filterhinweis{max-width:30rem}
.aliaszeile{max-width:31rem}
.ab-info,.ab-unter{max-width:none}
.korbhinweis p,.leerbox p,.merk p{max-width:33.3rem}
/* Kleinere Schriftgrade brauchen eine engere Maske: bei 12,5 px passen in
   dieselbe Breite rund 35 Prozent mehr Zeichen als bei 17 px. Die Werte unten
   halten alle diese Blöcke im Korridor von 45 bis 75 Zeichen. */
.kern-liste li,.autor-satz{max-width:32rem}
.artikel figcaption,.fig-unter,.quellen-fuss{max-width:29rem}
.artikel .quellenzeile,.artikel .dia-fuss{max-width:27rem}
/* Die Tabellenüberschrift steht im waagerecht scrollbaren Kasten und würde
   sonst die Breite der Tabelle annehmen — auf dem Handy müsste man zum Lesen
   seitlich scrollen. */
.tab-cap{max-width:min(27rem,calc(100vw - 48px))}
.tsl-erklaer p{max-width:30rem!important}
.faq-inhalt p,.faq-inhalt li{max-width:33.3rem}
/* Diese drei Listen laufen einspaltig über die volle Wrap-Breite und werden
   sonst bis zu 96 Zeichen lang. */
.waage-teil li,.ph-liste li{max-width:33.3rem}
@media(max-width:900px){
  .aliaszeile{max-width:none}
  /* Einspaltig wird die Filterspalte breit — die Maske muss greifen. */
  .filterhinweis{max-width:30rem}
}

/* =========================================================
   Crossreferenz
   Die Tabelle ist sechs Spalten breit und muss trotzdem auf ein Telefon.
   Deshalb: kleine Schrift, enge Polster, Artikelnummer und Abdichtung
   untereinander statt nebeneinander, und der Scrollkasten von .tab-scroll.
   ========================================================= */
.tech{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  color:var(--ink-900);white-space:nowrap}

.cr-form{margin:30px 0 8px}
.cr-form label{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);font-weight:600;margin-bottom:9px}
.cr-form-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cr-form input{flex:1 1 22rem;min-width:0;min-height:48px;padding:0 16px;font-size:16px;
  color:var(--ink-900);background:#fff;border:1px solid var(--ink-300);border-radius:8px}
.cr-form input:focus{border-color:var(--sig-500)}
.cr-form input::placeholder{color:var(--ink-500)}
.cr-zuruecksetzen{font-size:15px;color:var(--sig-700)}
.cr-treffer{font-size:15px;color:var(--ink-500);margin:22px 0 0}
.cr-treffer b{color:var(--ink-900);font-size:17px}

.cr-erkannt{margin:18px 0 0;padding:16px 20px;background:var(--porcelain-2);
  border:1px solid var(--ink-200);border-left:3px solid var(--sig-500);border-radius:0 10px 10px 0;
  max-width:40rem}
.cr-erkannt-kopf{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-500);font-weight:600;margin:0 0 10px}
.cr-erkannt ul{list-style:none;margin:0}
.cr-erkannt li{font-size:15px;color:var(--ink-600);margin-bottom:6px;line-height:1.55}
.cr-erkannt li b{color:var(--ink-900)}
.cr-erkannt-fuss{font-size:14px;margin:12px 0 0}

.cr-h2{font-size:clamp(21px,2.6vw,27px);margin:52px 0 10px;text-wrap:balance}
.cr-h3{font-size:19px;margin:36px 0 6px}
.cr-lede{font-size:17px;color:var(--ink-600);max-width:36rem;margin:0}
.cr-fuss{font-size:14px;color:var(--ink-500);max-width:40rem;margin:-6px 0 0}
.cr-fuss b{color:var(--ink-700)}

/* Die drei Schritte. Keine Kacheln mit Rahmen: das sind drei Sätze,
   kein Produktvergleich. Nur die Ziffer trägt Farbe. */
.cr-schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:26px 34px;margin:24px 0 10px}
.cr-schritt p{font-size:15.5px;color:var(--ink-600);margin:0;line-height:1.62}
.cr-snum{width:30px;height:30px;border-radius:50%;background:var(--sig-500);color:var(--ink-950)!important;
  font-weight:700;font-size:15px!important;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px!important}
.cr-stitel{font-weight:600;color:var(--ink-900)!important;margin-bottom:6px!important}

.cr-tab{font-size:14.5px;min-width:640px}
.cr-tab td{padding:11px 16px 11px 0;vertical-align:top}
.cr-tab th{padding-right:16px}
.cr-th-klein{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;
  font-weight:400;color:var(--ink-500);margin-top:3px}
/* Zwischenüberschrift für die Baureihe. Sitzt in der Tabelle, damit sie beim
   seitlichen Scrollen mitwandert und nicht über einer fremden Spalte hängt. */
.cr-reihe th{padding:22px 0 8px;font-size:11.5px;letter-spacing:.15em;color:var(--sig-700);
  border-bottom:1px solid var(--ink-200)}
.cr-tab tbody:first-of-type .cr-reihe th{padding-top:8px}
.cr-nr{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;font-weight:600;color:var(--sig-700);white-space:nowrap;text-decoration:none;
  border-bottom:1px solid var(--sig-300)}
.cr-nr:hover{color:var(--ink-950);border-bottom-color:var(--ink-950)}
.cr-klein{display:block;font-size:11.5px;color:var(--ink-500);margin-top:3px;font-weight:400}
.cr-nein{font-size:13.5px;color:var(--ink-500)}
.cr-mass{white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-tab td:first-child{white-space:normal}

@media(max-width:720px){
  .cr-tab{font-size:13.5px}
  .cr-tab td{padding:10px 13px 10px 0}
  .cr-h2{margin-top:40px}
  .cr-schritte{gap:22px}
}

/* Suchergebnis auf dem Handy: jede Baugröße als Karte, der Werkstoff steht
   vor jeder Nummer. Nur bis sechs Treffer (Klasse aus crossreferenz.php),
   die ganze Liste bleibt eine Tabelle zum Schieben. */
@media screen and (max-width:620px){
  .tab-scroll:has(> .cr-tab-karten){overflow:visible;background:none}
  .cr-tab-karten{display:block;min-width:0;margin-top:20px}
  .cr-tab-karten caption{display:block;text-align:left}
  .cr-tab-karten thead{display:none}
  .cr-tab-karten tbody,.cr-tab-karten tr{display:block}
  .cr-tab-karten .cr-reihe th{display:block;padding:14px 0 8px;border:0}
  .cr-tab-karten tbody:first-of-type .cr-reihe th{padding-top:4px}
  .cr-tab-karten tr:not(.cr-reihe){background:#fff;border:1px solid var(--ink-200);border-radius:12px;
    padding:14px 16px 6px;margin:0 0 10px}
  .cr-tab-karten td{display:block;padding:0;border:0}
  .cr-tab-karten td:first-child{font-family:var(--head);font-size:20px;font-weight:600;color:var(--ink-900)}
  .cr-tab-karten td.cr-mass{font-size:14.5px;color:var(--ink-500);margin:2px 0 8px}
  .cr-tab-karten td[data-k]{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:baseline;
    padding:10px 0;border-top:1px solid var(--ink-100)}
  .cr-tab-karten td[data-k]::before{content:attr(data-k);grid-row:1 / span 2;font-size:14px;color:var(--ink-600);line-height:1.4}
  .cr-tab-karten td[data-k] > *{grid-column:2;justify-self:end;text-align:right}
  .cr-tab-karten .cr-nr{font-size:14.5px}
}

/* Im Ausdruck bringt der Scrollkasten nichts: Papier scrollt nicht.
   Also alles verkleinern, bis die sechs Spalten auf die Seite passen. */
@media print{
  .cr-form,.suchbeispiele,.cr-treffer{display:none}
  .cr-tab{font-size:10pt;min-width:0}
  .cr-nr{color:#000;border-bottom:0}
}

/* =========================================================
   Abstände auf kleinen Bildschirmen
   92 px Abschnittspolster sind auf 390 px Breite ein Neuntel der Bildschirmhöhe
   — dreimal untereinander kostet das eine ganze Bildschirmlänge Scrollen,
   ohne dass Inhalt dazukommt.
   ========================================================= */
@media(max-width:720px){
  .sec{padding:56px 0}
  .sec-artikel{padding-top:26px}
  .wrap,.wrap-narrow,.wrap-form,.wrap-korb,.wrap-beitrag{padding:0 20px}
  .artikel-kopf{padding:40px 0 36px}
  .gruppentext{margin-bottom:26px}
  .artikel-meta{gap:10px 20px}
  footer{padding:44px 0 34px}
  .preishinweis{padding-bottom:32px;margin-bottom:28px}
  .nachbarn{margin-top:44px;padding-top:30px}
}

/* =========================================================
   BEWEGUNG (Oktober 2026)
   Abgestimmt: dezent von selbst. Ein Bereich bewegt sich einmal, wenn er ins
   Bild kommt, und ruht dann. Dauerhaft dreht nur das Lager auf der Startseite,
   langsam und nur, solange es zu sehen ist. Erklärende Abläufe in der Akademie
   laufen weiter nur auf Klick. Gesteuert von assets/bewegung.js.
   „Bewegung reduzieren“ im System schaltet alles ab, siehe Ende des Abschnitts.
   ========================================================= */

/* --- Staffel: die Kinder eines Blocks kommen nacheinander --- */
/* Der Block selbst bleibt stehen, seine Kinder blenden ein. Die Verzögerung
   (--verz) setzt das Skript, je nachdem, was gleichzeitig ins Bild kommt. */
[data-reveal="staffel"]{opacity:1;transform:none;transition:none}
[data-reveal="staffel"] > *{opacity:0}
[data-reveal="staffel"] > .kommt{animation:bw-auf .7s cubic-bezier(.2,.7,.25,1) var(--verz,0ms) both}
[data-reveal="staffel"] > .da{opacity:1}
@keyframes bw-auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Waage: „lohnt sich“ kommt von links, „raten wir ab“ von rechts */
.waage > .kommt:first-child{animation-name:bw-links}
.waage > .kommt:last-child{animation-name:bw-rechts}
@keyframes bw-links{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes bw-rechts{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* Werkstoffe: die Kugel setzt sich mit einem kleinen Federn in die Karte */
.mats > .kommt .kugel{animation:bw-kugel .95s cubic-bezier(.3,1.45,.5,1) calc(var(--verz,0ms) + 180ms) both}
@keyframes bw-kugel{from{opacity:0;transform:translateY(-18px) scale(.82)}to{opacity:1;transform:none}}

/* Drei Schritte: über jeder Karte zieht sich eine goldene Linie, Karte für
   Karte. Ohne Skript steht die Linie einfach da. */
.schritte > li{position:relative}
.schritte > li::before{content:"";position:absolute;left:26px;right:26px;top:-1px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--sig-500),var(--sig-300));
  transform-origin:left center}
.bw .schritte > li::before{transform:scaleX(0)}
.bw .schritte > .kommt::before{animation:bw-linie .9s cubic-bezier(.35,.6,.2,1) calc(var(--verz,0ms) + 280ms) both}
.bw .schritte > .da::before{transform:none}
@keyframes bw-linie{from{transform:scaleX(0)}to{transform:none}}

/* --- Kopfzeile: der Korb, sobald etwas darin liegt --- */
.kopfkorb{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;
  border-radius:var(--r);color:var(--ink-200);text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.kopfkorb:hover{color:var(--porcelain);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.kopfkorb[aria-current=page]{color:var(--sig-300);border-color:var(--sig-500)}
.kk-zahl{position:absolute;top:-7px;right:-8px;display:block;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--sig-500);color:var(--ink-950);text-align:center;
  font:700 12px/20px var(--sans);font-variant-numeric:tabular-nums;overflow:hidden;
  box-shadow:0 0 0 2px var(--ink-950)}
.kk-rollt .kk-zahl{display:grid}
.kk-rollt .kk-alt,.kk-rollt .kk-neu{grid-area:1 / 1}
.kk-rollt .kk-alt{animation:kk-raus .42s cubic-bezier(.5,0,.3,1) both}
.kk-rollt .kk-neu{animation:kk-rein .46s cubic-bezier(.2,.75,.3,1.25) both}
@keyframes kk-raus{to{opacity:0;transform:translateY(-110%)}}
@keyframes kk-rein{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:none}}
.kk-hupf{animation:kk-hupf .62s cubic-bezier(.3,1.6,.5,1)}
@keyframes kk-hupf{0%{transform:none}28%{transform:scale(1.16)}100%{transform:none}}
.kk-kommt{animation:kk-kommt .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes kk-kommt{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* Die Kugel, die nach dem Hinzufügen in den Korb rollt. Die Bahn setzt das
   Skript als offset-path, Koordinaten im Fenster. */
.flugkugel{position:fixed;left:0;top:0;z-index:200;pointer-events:none;offset-rotate:0deg}
.flugkugel.kugel{width:18px;height:18px}
.flugkugel.k-si3n4{box-shadow:inset -3px -3px 6px rgba(0,0,0,.55),inset 2px 2px 5px rgba(255,255,255,.2),
  0 3px 8px rgba(8,11,13,.35)}
.flugkugel.k-zro2{box-shadow:inset -3px -3px 6px rgba(8,11,13,.14),0 3px 8px rgba(8,11,13,.28)}

/* Kachel, die gerade in den Korb gewandert ist: ein grüner Puls */
.pk-neu{animation:pk-neu 1.3s ease-out}
@keyframes pk-neu{
  0%{box-shadow:0 0 0 0 rgba(11,122,60,.42),inset 3px 0 0 var(--stock)}
  75%{box-shadow:0 0 0 12px rgba(11,122,60,0),inset 3px 0 0 var(--stock)}
  100%{box-shadow:inset 3px 0 0 var(--stock)}
}
/* Knopf, während die Anfrage unterwegs ist. Die Verzögerung verhindert ein
   Flackern bei schneller Antwort. */
.btn-laedt{cursor:progress;opacity:.72;transition:opacity .2s ease .15s}

/* --- Meldungen am Bildschirmrand --- */
.meldeort{position:fixed;z-index:150;top:96px;right:24px;width:min(420px,calc(100vw - 48px));
  display:flex;flex-direction:column;align-items:stretch;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
  background:var(--ink-900);color:var(--ink-100);border:1px solid var(--ink-700);
  border-left:3px solid var(--stock);border-radius:10px;padding:13px 10px 13px 15px;
  box-shadow:0 16px 44px rgba(8,11,13,.34);font-size:14.5px;line-height:1.5}
.toast-info{border-left-color:var(--sig-500)}
.toast-text{flex:1;min-width:0;padding-top:1px}
.toast-zeile{display:flex;align-items:flex-start;gap:10px}
.toast-zeile > span:last-child{min-width:0}
.toast b{color:#fff;font-weight:700}
.toast a{color:var(--sig-300);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.toast a:hover{color:var(--sig-200)}
.toast .flash-hak{margin-top:0}
.toast-zu{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-5px -2px -5px 0;
  border:0;border-radius:6px;background:transparent;color:var(--ink-300);cursor:pointer}
.toast-zu:hover{background:rgba(255,255,255,.08);color:#fff}
.toast-zu:focus-visible{outline:2px solid var(--sig-400);outline-offset:1px}
.toast-kommt{animation:toast-kommt .36s cubic-bezier(.2,.8,.3,1) both}
.toast-geht{animation:toast-geht .24s ease both}
@keyframes toast-kommt{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-geht{to{opacity:0;transform:translateY(-6px)}}
@media(max-width:720px){
  .meldeort{top:auto;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:auto}
  .toast-kommt{animation-name:toast-kommt-unten}
  .toast-geht{animation-name:toast-geht-unten}
}
@keyframes toast-kommt-unten{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toast-geht-unten{to{opacity:0;transform:translateY(12px)}}

/* --- Filtern und Blättern ohne Neuladen --- */
/* Während der Abruf läuft, tritt die Liste ein wenig zurück. Erst nach 220 ms,
   bei schneller Antwort sieht man davon nichts. */
[data-tausch] .produkte,[data-tausch] .beitraege{transition:opacity .2s ease}
[data-tausch].laedt .produkte,[data-tausch].laedt .beitraege{opacity:.5}

/* View Transitions: Kacheln, die bleiben, gleiten an ihren neuen Platz.
   Neue kommen von unten, wegfallende verblassen. Beim Blättern schiebt sich
   die ganze Liste zur Seite, in Blätterrichtung. */
html[data-vt]::view-transition-old(root),html[data-vt]::view-transition-new(root){animation-duration:.26s}
html[data-vt]::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.75,.25,1)}
html[data-vt="filter"]::view-transition-new(*):only-child{animation:vt-kommt .44s cubic-bezier(.2,.75,.25,1) both}
html[data-vt="filter"]::view-transition-old(*):only-child{animation:vt-geht .2s ease both}
html[data-vt="vor"]::view-transition-old(liste){animation:vt-raus-links .2s ease-in both}
html[data-vt="vor"]::view-transition-new(liste){animation:vt-rein-rechts .44s cubic-bezier(.2,.75,.25,1) .12s both}
html[data-vt="zurueck"]::view-transition-old(liste){animation:vt-raus-rechts .2s ease-in both}
html[data-vt="zurueck"]::view-transition-new(liste){animation:vt-rein-links .44s cubic-bezier(.2,.75,.25,1) .12s both}
@keyframes vt-kommt{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes vt-geht{to{opacity:0;transform:scale(.96)}}
@keyframes vt-raus-links{to{opacity:0;transform:translateX(-40px)}}
@keyframes vt-raus-rechts{to{opacity:0;transform:translateX(40px)}}
@keyframes vt-rein-rechts{from{opacity:0;transform:translateX(40px)}}
@keyframes vt-rein-links{from{opacity:0;transform:translateX(-40px)}}

/* --- Produktkacheln auf dem Telefon: als Zeile statt als Kachel --- */
/* Eine Kachel war auf 390 Pixeln rund 300 Pixel hoch, zwölf davon fast
   zehn Bildschirme. Als Zeile mit kleinem Bild links sind es gut drei. */
@media(max-width:560px){
  .produkte,.produkte-4{grid-template-columns:1fr;gap:10px}
  .pk{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;align-items:start;
    padding:12px 14px 12px 12px}
  .pk > *{grid-column:2}
  .pk-bild,.pk-bild:has(.lagerbild-raum){grid-column:1;grid-row:1 / span 4;width:72px;height:72px;min-height:0;padding:2px;margin:0}
  .pk-bild svg{width:68px;height:51px}
  .pk-nr{font-size:11.5px;margin-bottom:2px}
  .pk-titel{font-size:16px;margin-bottom:2px}
  .pk-merk ~ .pk-nr,.pk-merk ~ .pk-titel{padding-right:40px}
  .pk-werk{margin-bottom:1px}
  .pk-masse{margin-bottom:10px}
  .pk-fuss{grid-column:1 / -1;padding-top:10px}
  .pk:hover{transform:none}
}

/* --- Bewegung reduzieren: alles steht sofort --- */
@media(prefers-reduced-motion:reduce){
  [data-reveal="staffel"] > *{opacity:1;animation:none!important}
  .bw .schritte > li::before{transform:none;animation:none!important}
  .kk-hupf,.kk-kommt,.pk-neu,.toast-kommt,.toast-geht,.kk-rollt .kk-alt,.kk-rollt .kk-neu{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* --- Druck: nichts halb Eingeblendetes, nichts Schwebendes --- */
@media print{
  [data-reveal="staffel"] > *{opacity:1!important;animation:none!important;transform:none!important}
  .meldeort,.flugkugel,.kopfkorb{display:none!important}
}

/* Im Shop kommen die Kacheln etwas schneller: wer einkauft, soll nicht warten */
.produkte[data-reveal="staffel"] > .kommt{animation-duration:.5s}

/* Startseite: die drei neuesten Beiträge unter den Einstiegen */
.ak-neu{font-size:15px;line-height:1.7;max-width:44rem}
.ak-neu-k{color:var(--ink-500);margin-right:4px}
.ak-neu + .nachsatz{margin-top:14px}
.preishinweis p b{color:var(--porcelain);font-weight:600}

/* =========================================================
   Titelgrafiken der Akademie (inc/motive.php)
   Eine technische Skizze im Kopf jedes Beitrags. Sie zeichnet sich beim
   Laden einmal selbst, in etwa drei Sekunden, und bleibt dann stehen. Reines
   CSS, läuft also auch ohne Skript. Breit steht sie rechts neben dem Text,
   schmal groß und blass hinter der Überschrift.
   ========================================================= */
.mit-motiv::after{display:none}
.motiv{position:absolute;pointer-events:none;z-index:-1}
.motiv svg{display:block;width:100%;height:100%;overflow:visible}
.motiv .zg{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:mz-linie var(--dauer,1s) cubic-bezier(.45,.1,.2,1) var(--d,0s) both}
.motiv .zf,.motiv .zt{opacity:0;animation:mz-auf .8s ease var(--d,0s) both}
@keyframes mz-linie{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mz-auf{to{opacity:1}}
@media(min-width:1000px){
  .motiv{right:24px;top:4px;bottom:86px;width:min(400px,38%)}
}
@media(max-width:999px){
  .motiv{right:-60px;top:-14px;width:340px;height:238px;opacity:.2}
}
@media(max-width:560px){
  .motiv{right:-90px;width:300px;height:210px;opacity:.17}
}
@media(prefers-reduced-motion:reduce){
  .motiv .zg{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .motiv .zf,.motiv .zt{opacity:1;animation:none}
}
@media print{.motiv{display:none!important}}

/* Die Trefferliste bekommt nach dem Blättern den Fokus (tabindex="-1"). Ein
   Rahmen um die ganze Liste wäre zu viel: eine feine Linie links genügt, und
   nur, wenn mit der Tastatur geblättert wurde. */
.katliste:focus{outline:none}
.katliste:focus-visible{outline:none;border-radius:0;box-shadow:-12px 0 0 -8px var(--ink-900)}

/* =========================================================
   Dieter: Autorenleiste, Ansprechpartner, „Dieter zeigt“
   (inc/autor.php, Oktober 2026)

   Alle Regeln hängen an einer Elternklasse (.autorleiste, .ap, .dz),
   damit die Textregeln der Beiträge (.artikel p) sie nicht überstimmen.
   ========================================================= */

/* --- gemeinsame Bausteine --- */
.al-bild picture,.ap-bild picture,.dz-bild picture{display:block}
.autorleiste .al-marke,.ap .al-marke{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-400);margin:0 0 8px;line-height:1.4}
.autorleiste .al-name,.ap .al-name,.dz .al-name{display:block;font-family:var(--head);font-weight:600;font-size:22px;
  letter-spacing:-.02em;line-height:1.15;color:var(--porcelain);margin:0}
.autorleiste .al-rolle,.ap .al-rolle,.dz .al-rolle{display:block;font-size:13px;letter-spacing:.05em;line-height:1.4;
  color:var(--sig-300);margin:5px 0 0;font-weight:600}
.autorleiste .al-link,.ap .al-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--sig-300);text-decoration:none;border-bottom:1px solid rgba(240,206,135,.35);padding-bottom:2px;line-height:1.5}
.autorleiste .al-link::after,.ap .al-link::after{content:"→";transition:transform .16s ease}
.autorleiste .al-link:hover,.ap .al-link:hover{color:var(--sig-200);border-color:var(--sig-300)}
.autorleiste .al-link:hover::after,.ap .al-link:hover::after{transform:translateX(3px)}
.ki-hinweis{display:block;font-size:10.5px;letter-spacing:.03em;line-height:1.4;color:var(--ink-400);margin-top:7px}
.al-hell .ki-hinweis{color:var(--ink-500)}

/* --- Autorenleiste --- */
.autorleiste{position:relative;display:grid;grid-template-columns:196px minmax(0,1fr) 250px;
  grid-template-areas:"bild wer fakten" "bild satz fakten";column-gap:32px;padding:26px 0;margin-top:6px}
.autorleiste::before,.autorleiste::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:rgba(255,255,255,.11);transform-origin:left center;pointer-events:none}
.autorleiste::before{top:0}
.autorleiste::after{bottom:0}
.autorleiste .al-bild{grid-area:bild;margin:0;align-self:center}
.autorleiste .al-bild img,.autorleiste .al-ini{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:10px;border:1px solid rgba(224,180,78,.22);background:var(--ink-900)}
.autorleiste .al-ini{display:grid;place-items:center;color:var(--sig-300);font:600 34px/1 var(--head)}
.autorleiste .al-wer{grid-area:wer;align-self:end}
.autorleiste .al-satz{grid-area:satz;align-self:start}
.autorleiste .al-satz > p:first-child{font-size:15px;line-height:1.6;color:var(--ink-300);margin:12px 0 0;max-width:31rem}
.autorleiste .al-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 0}
.autorleiste .al-fakten{grid-area:fakten;align-self:center;margin:0;display:grid;gap:16px;padding-left:30px;
  border-left:1px solid rgba(255,255,255,.10)}
.autorleiste .al-fakten dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);font-weight:700}
.autorleiste .al-fakten dd{margin:4px 0 0;font-family:var(--head);font-size:17px;color:var(--porcelain);letter-spacing:-.01em}
.autorleiste.al-ohne-fakten{grid-template-columns:150px minmax(0,1fr);grid-template-areas:"bild wer" "bild satz"}

/* Im Kopf der Akademie: die Titelgrafik bleibt über der Leiste */
@media(min-width:1000px){.mit-autor .motiv{bottom:auto;height:372px}}

/* hell, am Ende jedes Beitrags */
.autorleiste.al-hell{margin-top:56px}
.al-hell::before,.al-hell::after{background:var(--ink-200)}
.autorleiste.al-hell .al-bild img,.autorleiste.al-hell .al-ini{border-color:var(--ink-200)}
.autorleiste.al-hell .al-marke{color:var(--ink-500)}
.autorleiste.al-hell .al-name{color:var(--ink-950)}
.autorleiste.al-hell .al-rolle{color:var(--sig-700)}
.autorleiste.al-hell .al-satz > p:first-child{color:var(--ink-700)}
.autorleiste.al-hell .al-link{color:var(--sig-700);border-color:rgba(124,92,21,.35)}
.autorleiste.al-hell .al-link:hover{color:var(--ink-950);border-color:var(--ink-950)}
.autorleiste.al-hell .al-fakten{border-color:var(--ink-200)}
.autorleiste.al-hell .al-fakten dd{color:var(--ink-950)}
.autorleiste.al-hell .al-fakten dt{color:var(--ink-500)}

/* Name im Beitragskopf springt zur Leiste am Ende */
.artikel-meta .meta-autor{color:var(--sig-300);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(240,206,135,.3)}
.artikel-meta .meta-autor:hover{color:var(--sig-200);border-color:var(--sig-300)}
#autor{scroll-margin-top:104px}

@media(max-width:999px){
  .autorleiste{grid-template-columns:132px minmax(0,1fr);grid-template-areas:"bild wer" "satz satz" "fakten fakten";column-gap:22px}
  .autorleiste .al-wer{align-self:center}
  .autorleiste .al-satz > p:first-child{margin-top:18px}
  .autorleiste .al-fakten{grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 28px;border-left:0;
    padding:18px 0 0;margin-top:20px;border-top:1px solid rgba(255,255,255,.10)}
  .autorleiste.al-hell .al-fakten{border-top-color:var(--ink-200)}
  .autorleiste.al-ohne-fakten{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"bild wer" "satz satz"}
}
@media(max-width:560px){
  .autorleiste{grid-template-columns:116px minmax(0,1fr);column-gap:18px}
  .autorleiste .al-fakten{grid-template-columns:1fr 1fr}
  .autorleiste .al-fakten div:last-child{grid-column:1 / -1}
  .autorleiste.al-ohne-fakten{grid-template-columns:104px minmax(0,1fr)}
  .autorleiste .al-name{font-size:20px}
}

/* Bewegung im Kopf der Akademie: beim Laden, reines CSS.
   Die Linien ziehen sich von links auf, dann kommen Bild, Name, Text und
   die Eckdaten nacheinander. Läuft einmal und ruht danach. */
@keyframes al-linie{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes al-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .al-laden::before,.al-laden::after{animation:al-linie 1s cubic-bezier(.45,.1,.2,1) .12s both}
  .al-laden::after{animation-delay:.3s}
  .al-laden .al-teil{animation:al-auf .7s cubic-bezier(.2,.7,.25,1) var(--d,0s) both}
  .al-laden .al-fakten{animation:al-rand .6s ease .7s both}
}
@keyframes al-rand{from{border-color:transparent}}

/* --- Szenen: Teile kommen nacheinander, sobald der Block ins Bild kommt.
   Der Block selbst bleibt stehen (sonst würde er als Ganzes einblenden).
   Ohne Skript fehlt .bw, dann ist alles sofort da. --- */
[data-reveal="szene"]{opacity:1;transform:none;transition:none}
@keyframes sz-auf{from{opacity:0;transform:var(--sz-von,translateY(14px))}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .bw [data-reveal="szene"]:not(.sichtbar) .sz,
  .bw [data-reveal="szene"]:not(.sichtbar) .al-teil{opacity:0}
  .bw .al-scroll:not(.sichtbar)::before,.bw .al-scroll:not(.sichtbar)::after{transform:scaleX(0)}
  [data-reveal="szene"].sichtbar .sz{animation:sz-auf .8s cubic-bezier(.2,.7,.25,1) var(--sz-d,0s) both}
  .al-scroll.sichtbar .al-teil{animation:al-auf .7s cubic-bezier(.2,.7,.25,1) calc(var(--d,0s) - .25s) both}
  .al-scroll.sichtbar::before,.al-scroll.sichtbar::after{animation:al-linie 1s cubic-bezier(.45,.1,.2,1) both}
  .al-scroll.sichtbar::after{animation-delay:.18s}
}
.sz-links{--sz-von:translateX(-30px)}

/* --- Ansprechpartner neben dem Anfrageformular --- */
.anfrage-raster{display:grid;grid-template-columns:minmax(0,1fr) 272px;grid-template-areas:"kopf karte" "form karte";
  column-gap:64px;align-items:start}
.anfrage-kopf{grid-area:kopf}
.anfrage-form{grid-area:form;min-width:0}
.ap{grid-area:karte;position:sticky;top:110px;margin-top:8px;background:var(--ink-900);
  border:1px solid rgba(224,180,78,.22);border-radius:14px;overflow:hidden}
.ap .ap-bild{margin:0}
.ap .ap-bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ap .ap-bild .ki-hinweis{margin:0;padding:7px 18px 0}
.ap .ap-ki-klein{display:none}
.ap .ap-text{padding:14px 20px 22px}
.ap .ap-satz{font-size:14px;line-height:1.6;color:var(--ink-300);margin:12px 0 14px}
@media(max-width:999px){
  .anfrage-raster{grid-template-columns:1fr;grid-template-areas:"kopf" "karte" "form"}
  .ap{position:static;display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;margin:0 0 34px;max-width:560px}
  .ap .ap-ki-gross{display:none}
  .ap .ap-ki-klein{display:block;margin-top:9px}
  .ap .ap-text{padding:14px 18px}
  .ap .ap-satz{margin:8px 0 10px;font-size:13.5px}
}
@media(max-width:400px){
  .ap{grid-template-columns:108px minmax(0,1fr)}
  .ap .ap-satz{display:none}
}

/* --- Dieter zeigt: unten in der Akademie und beim Ablauf auf der Startseite --- */
.dz{display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:56px}
.dz .dz-bild{grid-column:1;grid-row:1 / span 2;margin:0;align-self:start}
.dz .dz-bild img{display:block;width:100%;height:auto;aspect-ratio:720/640;object-fit:cover;border-radius:12px;
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)}
.dz .dz-name{margin:-10px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;position:relative}
.dz .dz-name .al-name{font-size:16px}
.dz .dz-name .al-rolle{margin:0;font-size:12px}
.dz .dz-kopf{grid-column:2;grid-row:1;align-self:end}
.dz .dz-kopf .sec-h{margin-bottom:12px}
.dz .dz-mehr{grid-column:2;grid-row:2;align-self:start}
.dz .dz-mehr .lede{margin-bottom:26px}
.dz-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.dz-ablauf{grid-template-columns:340px minmax(0,1fr);margin-bottom:56px}
.dz-ablauf .dz-mehr .lede{margin-bottom:0}
@media(max-width:999px){
  .dz,.dz-ablauf{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .dz .dz-bild{grid-row:1;position:relative}
  .dz .dz-bild img{aspect-ratio:1316/640;-webkit-mask-image:none;mask-image:none;border-radius:10px}
  /* Auf schmalen Bildschirmen zeigt er auf seinen Namen */
  .dz .dz-name{position:absolute;right:0;top:0;bottom:0;width:46%;margin:0;flex-direction:column;
    justify-content:center;align-items:flex-start;gap:0;padding-right:6px}
  .dz .dz-mit-ki .dz-name{bottom:22px}
  .dz .dz-name .al-name{font-size:20px}
  .dz .dz-name .al-rolle{margin-top:4px}
  .dz .dz-kopf{grid-column:1;grid-row:2;margin-top:26px}
  .dz .dz-mehr{grid-column:1;grid-row:3}
  .dz-ablauf{margin-bottom:40px}
}
@media(max-width:420px){
  .dz .dz-name .al-name{font-size:17px}
  .dz .dz-name .al-rolle{font-size:11px}
}

/* Der Knopf, auf den Dieter zeigt, leuchtet einmal kurz auf */
@keyframes dz-glanz{0%{box-shadow:0 0 0 0 rgba(224,180,78,.55)}100%{box-shadow:0 0 0 16px rgba(224,180,78,0)}}
@media(prefers-reduced-motion:no-preference){
  .frage-dieter [data-reveal="szene"].sichtbar .dz-knoepfe .btn-primary{animation:dz-glanz 1.3s ease-out 1.25s 1}
}

/* --- Weg ins Sortiment, hell und als Reihe (Übersicht der Akademie) --- */
.fuss-hell .weitergruppen.wg-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wgk-frage.wgk-hell{background:transparent;border-style:dashed;border-color:var(--ink-300)}
.wgk-frage.wgk-hell:hover{border-style:solid}
@media(max-width:999px){.fuss-hell .weitergruppen.wg-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fuss-hell .weitergruppen.wg-4{grid-template-columns:1fr}}

/* --- Geteilter Abschnittskopf: Überschrift links, Einleitung rechts.
   Vorher stand die Einleitung unter der Überschrift, und rechts davon
   blieben bei 1440 Pixeln rund 600 Pixel leer. --- */
/* Die Einleitung ist hier das letzte Kind, und p:last-child nimmt ihr den
   Abstand nach unten. Den Abstand trägt deshalb der Kopf selbst. */
.sec-kopf{margin-bottom:48px}
.anfrage-kopf{margin-bottom:44px}
@media(min-width:1000px){
  .sec-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,33.3rem);column-gap:64px;align-items:end}
  .sec-kopf .sec-h{margin-bottom:0}
  .sec-kopf .lede{margin:0;padding-bottom:4px}
}

/* --- Druck --- */
@media print{
  .al-teil,.sz{animation:none!important;opacity:1!important;transform:none!important}
  .autorleiste::before,.autorleiste::after{transform:none!important;animation:none!important}
  .autorleiste .al-links,.dz-knoepfe,.ap .al-link{display:none!important}
  /* Bilder, die erst beim Scrollen laden, kämen im Druck leer an. Dieter
     zeigend und die Ansprechpartner-Karte sind im Druck verzichtbar; die
     Leiste am Beitragsende druckt ohne Bild. Der Kopf der Akademie lädt sein
     Bild sofort und behält es. */
  .dz .dz-bild,.ap{display:none!important}
  .dz{display:block!important}
  .al-scroll .al-bild{display:none!important}
  .autorleiste.al-scroll{display:block!important;padding:4mm 0!important}
  .autorleiste.al-hell{break-inside:avoid}
}
@media(prefers-reduced-motion:reduce){
  .al-teil,.sz,.autorleiste::before,.autorleiste::after{animation:none!important;opacity:1!important;transform:none!important}
}

/* =========================================================
   Tools: Übersicht, Hybrid-Check, Drehzahl-Rechner
   (tools/, inc/werkzeuge.php, assets/werkzeuge.js, Oktober 2026)

   Links stehen die Fragen auf hellem Grund, rechts das Ergebnis als dunkle
   Karte, die beim Scrollen mitläuft. Ohne Skript schickt „Auswerten“ das
   Formular ab, mit Skript steht das Ergebnis nach jeder Antwort da.
   ========================================================= */

/* --- Werkstoffkugeln, die es bisher nicht gab ---
   Stahl für die Empfehlung „Stahllager reicht“, Edelstahl 440C für die
   Hybridlager mit Edelstahlringen im Lieferprogramm. */
.k-stahl{background:radial-gradient(circle at 34% 30%,#F2F5F6 0,#C2CAD0 24%,#87939A 60%,#56626A 100%);
  box-shadow:inset -5px -5px 12px rgba(8,11,13,.20)}
.k-edel{background:radial-gradient(circle at 34% 30%,#FFFFFF 0,#E6EBEE 26%,#B1BBC1 62%,#7C8890 100%);
  box-shadow:inset -5px -5px 12px rgba(8,11,13,.14)}
.f-w .k-stahl,.f-w .k-edel{box-shadow:none}

/* --- Kopf --- */
.wz-kopf h1{max-width:25rem}

/* --- Übersicht /tools/ --- */
.tools-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:820px){.tools-karten{grid-template-columns:1fr}}
.tool-karte{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;
  column-gap:26px;align-content:start;background:#fff;border:1px solid var(--ink-200);border-radius:14px;
  padding:28px 28px 26px;text-decoration:none;color:inherit;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.tool-karte:hover{border-color:var(--sig-500);box-shadow:0 12px 34px rgba(8,11,13,.08);transform:translateY(-2px);color:inherit}
.tool-karte > span{display:block;grid-column:2}
.tk-bild{grid-column:1;grid-row:1 / -1;width:150px;height:auto;align-self:start;overflow:visible}
.tk-name{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sig-700);margin-bottom:8px}
.tk-frage{font-family:var(--head);font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.25;
  color:var(--ink-900);margin-bottom:8px;text-wrap:balance}
.tk-text{font-size:15px;color:var(--ink-500);line-height:1.55;margin-bottom:16px}
.tk-mehr{font-size:15px;font-weight:600;color:var(--sig-700)}
.tk-mehr::after{content:"→";display:inline-block;margin-left:7px;transition:transform .16s ease}
.tool-karte:hover .tk-mehr::after{transform:translateX(4px)}
@media(max-width:520px){
  .tool-karte{grid-template-columns:1fr;padding:24px 22px}
  .tool-karte > span{grid-column:1}
  .tk-bild{grid-row:auto;width:132px;margin-bottom:18px}
}
/* Zeichnungen: Linien in Tinte, Akzente in Gold */
.tk-l{fill:none;stroke:var(--ink-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-dick{stroke-width:3}
.tk-f{fill:#fff}
.tk-p{fill:var(--ink-600)}
.tk-t{font-family:var(--sans);font-size:10.5px;fill:var(--ink-500);text-anchor:middle;letter-spacing:.02em}
.tk-kugel{fill:var(--sig-500)}
.tk-glanz{fill:#fff;opacity:.55}
/* Messuhr des Drehzahl-Rechners in der CI: Stahl grau, Hybrid Messing,
   zu schnell schraffiert (vorher grün und rot) */
.tk-zone{fill:none;stroke-width:6;stroke-linecap:round}
.tk-z-stahl{stroke:var(--ink-200)}
.tk-z-hybrid{stroke:var(--sig-500)}
.tk-z-weiter{stroke:var(--ink-300);stroke-linecap:butt;stroke-dasharray:1.5 3.1}
.tk-nabe{fill:var(--sig-500)}
.tk-nadel{transform-box:view-box;transform-origin:80px 78px;transform:rotate(24deg)}
.tk-nadel .tk-l{stroke:var(--ink-900)}
.tk-hin .tk-l{stroke:var(--sig-600)}
.tk-blatt{transform-box:view-box;transform-origin:46px 82px}
.tk-b3{transform:rotate(9deg)}
.tk-b2{transform:rotate(4.5deg)}
/* Einmal beim Hineinscrollen (.kommt aus assets/bewegung.js): die Kugel rollt
   zum Hybrid, der Zeiger schlägt aus, die Pfeile laufen ein, die Blätter
   fächern auf. Danach steht alles still. */
.tools-karten > .kommt .tk-roll{animation:tk-roll 1.15s cubic-bezier(.45,.05,.2,1.12) calc(var(--verz,0ms) + 260ms) both}
.tools-karten > .kommt .tk-nadel{animation:tk-nadel 1.2s cubic-bezier(.3,1.5,.45,1) calc(var(--verz,0ms) + 260ms) both}
.tools-karten > .kommt .tk-hin{animation:tk-hin .8s cubic-bezier(.2,.7,.25,1) calc(var(--verz,0ms) + 260ms) both}
.tools-karten > .kommt .tk-her{animation:tk-her .8s cubic-bezier(.2,.7,.25,1) calc(var(--verz,0ms) + 380ms) both}
.tools-karten > .kommt .tk-b3{animation:tk-b3 .9s cubic-bezier(.3,1.3,.5,1) calc(var(--verz,0ms) + 260ms) both}
.tools-karten > .kommt .tk-b2{animation:tk-b2 .9s cubic-bezier(.3,1.3,.5,1) calc(var(--verz,0ms) + 320ms) both}
@keyframes tk-roll{from{transform:translateX(-54px)}}
@keyframes tk-nadel{from{transform:rotate(-72deg)}}
@keyframes tk-hin{from{opacity:0;transform:translateX(-18px)}}
@keyframes tk-her{from{opacity:0;transform:translateX(18px)}}
@keyframes tk-b3{from{transform:none}}
@keyframes tk-b2{from{transform:none}}

/* --- Raster: Fragen links, Ergebnis rechts --- */
.wz-sec{padding-top:64px}
.wz-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:56px;align-items:start}
@media(max-width:999px){.wz-raster{grid-template-columns:minmax(0,1fr);gap:36px}}

/* --- Fragen --- */
.wz-frage{border:0;margin:0;padding:24px 0 26px;border-top:1px solid var(--ink-100);min-width:0}
.wz-frage:first-child{border-top:0;padding-top:0}
.wz-frage legend{float:left;width:100%;padding:0;margin:0 0 14px;display:flex;align-items:baseline;gap:12px;
  font-family:var(--head);font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink-900)}
.wz-frage legend + *{clear:both}
.wz-nr{font-family:var(--sans);font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--sig-700);flex:none}
.wz-hilfe{font-size:14px;color:var(--ink-500);margin:12px 0 0;max-width:36rem;line-height:1.55}

/* Antworten als Knöpfe. Das Auswahlfeld liegt unsichtbar über dem Knopf und
   bleibt für Tastatur und Screenreader ein echtes Optionsfeld. */
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl-o{position:relative;display:inline-flex}
.wahl-o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wahl-o span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 17px 10px 14px;
  border:1px solid var(--ink-200);border-radius:99px;background:#fff;font-size:15px;line-height:1.25;
  color:var(--ink-800);transition:border-color .15s ease,background .15s ease,color .15s ease}
.wahl-o span::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--ink-300);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.wahl-o:hover span{border-color:var(--ink-400)}
.wahl-o input:checked + span{background:var(--ink-950);border-color:var(--ink-950);color:var(--porcelain)}
.wahl-o input:checked + span::before{background:var(--sig-400);border-color:var(--sig-400);
  box-shadow:0 0 0 3px rgba(224,180,78,.22)}
.wahl-o input:focus-visible + span{outline:2px solid var(--ink-900);outline-offset:2px;box-shadow:0 0 0 5px var(--sig-400)}

.wz-knoepfe{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:0;padding-top:24px;
  border-top:1px solid var(--ink-100);max-width:none}
.wz-neu{font-size:15px;color:var(--sig-700)}

/* Eingabefelder des Drehzahl-Rechners: dieselbe Form wie im Größenfinder,
   nur auf hellem Grund. Seit Oktober 2026 ein Feld für Bezeichnung oder Maße
   statt drei. */
.dr-feld label{display:block;font-size:12.5px;color:var(--ink-600);margin-bottom:6px;font-weight:600}
.dr-bez{max-width:380px}
.dr-n{max-width:250px}
.wz-form .ff-in{background:#fff;border-color:var(--ink-200)}
.wz-form .ff-in:hover{border-color:var(--ink-400)}
.wz-form .ff-in:focus-within{border-color:var(--ink-900);background:#fff;
  outline:2px solid var(--ink-900);outline-offset:2px;box-shadow:0 0 0 5px var(--sig-400)}
.wz-form .ff-in input{color:var(--ink-900);min-height:24px;min-width:0}
.wz-form .ff-in input:focus-visible{outline:none;box-shadow:none}
.wz-form .ff-in input::placeholder{color:var(--ink-400)}
.wz-form .ff-in span{color:var(--ink-500)}

/* --- Ergebnis: dunkle Karte, die mitläuft --- */
.wz-ergebnis{background:var(--ink-950);color:var(--porcelain);
  border:1px solid var(--ink-800);border-radius:16px;padding:24px 26px 26px;
  box-shadow:0 18px 50px rgba(8,11,13,.16)}
/* Mitlaufen darf die Karte nur, wenn sie ganz auf den Bildschirm passt. Sonst
   wäre ihr unteres Ende erst am Ende der Fragen zu sehen. Ob sie passt, misst
   assets/werkzeuge.js (.wz-lang). Ohne Skript läuft sie nicht mit. */
@media(min-width:1000px){
  .wz-js .wz-ergebnis:not(.wz-lang){position:sticky;top:96px}
}
/* Zwischen 1000 und 1180 Pixeln steht die Navigation in einer eigenen Zeile,
   die Kopfzeile ist dann höher. */
@media(min-width:1000px) and (max-width:1179px){.wz-js .wz-ergebnis:not(.wz-lang){top:140px}}
@media(max-width:999px){.wz-ergebnis{padding:24px 22px 26px}}
.wz-ergebnis :focus-visible{outline-color:var(--porcelain);box-shadow:0 0 0 5px var(--sig-500)}
.wz-text{transition:opacity .2s ease}
.wz-laedt .wz-text{opacity:.55}
.wz-marke{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sig-400);margin:0 0 8px}
.wz-titel{font-size:clamp(25px,2.6vw,30px);color:var(--porcelain);margin:0 0 10px;letter-spacing:-.025em;text-wrap:balance}
.wz-unter{font-size:15px;color:var(--ink-300);margin:0 0 18px;line-height:1.55}
.wz-start{font-size:15px;color:var(--ink-300);margin:0;line-height:1.6}
.wz-zwischen{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ink-400);margin:22px 0 10px}
.wz-liste{list-style:none;margin:0;display:grid;gap:10px}
.wz-liste li{position:relative;padding-left:21px;font-size:14px;line-height:1.55;color:var(--ink-200)}
.wz-liste li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--sig-400)}
/* „Darauf achten“: ein Ausrufezeichen in Messing statt eines rosa Punkts */
.wz-achtung li{padding-left:27px}
.wz-achtung li::before{content:"!";top:.12em;width:17px;height:17px;background:var(--sig-400);color:var(--ink-950);
  font-size:11.5px;font-weight:700;line-height:17px;text-align:center}
.wz-tipps li::before{background:transparent;border:1.5px solid var(--ink-400)}
.wz-offen{color:var(--ink-400);font-weight:600;letter-spacing:.08em}
.wz-fussnote{font-size:13px;color:var(--ink-500);margin:16px 0 0;max-width:36rem;line-height:1.55}
.wz-mehr{margin:20px 0 0;border-top:1px solid rgba(255,255,255,.10)}
.wz-mehr summary{display:flex;align-items:center;gap:9px;min-height:44px;padding:12px 0 0;cursor:pointer;list-style:none;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ink-300)}
.wz-mehr summary::-webkit-details-marker{display:none}
.wz-mehr summary::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.wz-mehr[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.wz-mehr summary:hover{color:var(--porcelain)}
.wz-anzahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:rgba(255,255,255,.10);color:var(--porcelain);font-size:11px;letter-spacing:0}
.wz-mehr .wz-liste{padding:8px 0 4px}
.wz-links{list-style:none;margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);display:grid;gap:8px}
.wz-links a{color:var(--sig-300);font-size:15px;font-weight:500;text-decoration:none;line-height:1.4}
.wz-links a::after{content:"→";display:inline-block;margin-left:6px;transition:transform .16s ease}
.wz-links a:hover{color:var(--sig-200)}
.wz-links a:hover::after{transform:translateX(3px)}
.wz-anfrage{margin:18px 0 0}
.wz-produkte{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.wz-produkte a{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 12px 7px 9px;
  border:1px solid rgba(255,255,255,.14);border-radius:99px;color:var(--ink-200);text-decoration:none;
  font-size:13.5px;line-height:1.3;transition:border-color .15s ease,background .15s ease,color .15s ease}
.wz-produkte a:hover{border-color:var(--sig-400);background:rgba(224,180,78,.08);color:var(--porcelain)}
.wz-produkte .kugel{width:16px;height:16px;box-shadow:none}
.wz-ergebnis .k-si3n4{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* Neues Urteil: der Text blendet kurz ein */
.wz-frisch .wz-text > *{animation:wz-ein .45s cubic-bezier(.2,.7,.25,1) both}
.wz-frisch .wz-text > :nth-child(2){animation-delay:.04s}
.wz-frisch .wz-text > :nth-child(n+3){animation-delay:.08s}
@keyframes wz-ein{from{opacity:0;transform:translateY(6px)}}

/* --- Hybrid-Check: Bahn mit drei Stationen, die Kugel rollt zur Empfehlung --- */
.hc-bahn{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:42px;margin:0 -6px 22px}
.hc-schiene{position:absolute;left:16.667%;right:16.667%;top:42px;height:2px;margin-top:-1px;
  border-radius:2px;background:rgba(255,255,255,.16)}
.hc-station{position:relative;padding-top:14px;text-align:center;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--ink-500);transition:color .4s ease}
.hc-station::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--ink-700);transition:background .4s ease,box-shadow .4s ease}
.hc-station.an{color:var(--sig-300)}
.hc-station.an::before{background:var(--sig-400);box-shadow:0 0 0 5px rgba(224,180,78,.18)}
.hc-kugel{position:absolute;top:42px;left:calc(16.667% + var(--pos,0) * 33.333%);width:30px;height:30px;
  margin:-38px 0 0 -15px;transition:left .95s cubic-bezier(.45,.05,.2,1.12),opacity .4s ease}
.hc-kugel::after{content:"";position:absolute;left:3px;right:3px;bottom:-9px;height:5px;border-radius:50%;
  background:rgba(0,0,0,.55);filter:blur(2px)}
.hc-ergebnis[data-art="leer"] .hc-kugel{opacity:.4}
/* Kommt die Seite schon mit Ergebnis (geteilte Adresse oder ohne Skript
   abgeschickt), rollt die Kugel einmal vom Stahl her an ihren Platz. */
.hc-ergebnis:not([data-art="leer"]):not(.wz-live) .hc-kugel{animation:hc-rein 1.1s cubic-bezier(.45,.05,.2,1.12) .3s backwards}
@keyframes hc-rein{from{left:16.667%}}
/* Die Kugeln selbst, auf dunklem Grund mit Licht von links oben */
.hc-kugel.k-si3n4,.wz-mini .k-si3n4{background:radial-gradient(circle at 34% 30%,#77828A 0,#2E363B 32%,#15191B 72%,#0B0E0F 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hc-kugel.k-zro2,.wz-mini .k-zro2{background:radial-gradient(circle at 34% 30%,#FFFFFF 0,#F7F5F0 34%,#D8DCDE 76%,#AEB5B9 100%);
  border:0;box-shadow:none}

/* --- Drehzahl-Rechner ---
   Oktober 2026: Urteil zuerst, die Skala in Umdrehungen und in der CI.
   Hell (Stahlgrau) reicht Stahl, Messing reicht Hybrid, schraffiert ist zu
   schnell. Vorher war das Band grün, gelb, orange und rot, und die Kennzahl
   n·dm stand als große Zahl oben. Sie steht jetzt in den Werten darunter. */
.dr-kopf{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.dr-lager{flex:none;width:56px;height:56px;color:var(--ink-600)}
.dr-ring{fill:none;stroke:currentColor;stroke-width:2.2}
.dr-kaefig{transform-box:view-box;transform-origin:32px 32px}
.dr-kaefig circle{fill:var(--sig-400)}
.dr-kopf-text{flex:1;min-width:0}
.dr-kopf .wz-marke{margin:0 0 5px}
.dr-kopf .wz-titel{margin:0}
.dr-kopf .wz-start{margin:0}
@media(max-width:360px){.dr-lager{width:46px;height:46px}.dr-kopf{gap:12px}}

/* Die Skala. Alle Lagen kommen als Prozent vom Server (--p, --stahl,
   --hybrid) und gleiten beim nächsten Ergebnis an ihren neuen Platz. */
.dr-skala{position:relative;height:48px;margin:0 0 16px}
.dr-spur{position:absolute;left:0;right:0;top:27px;height:10px;border-radius:10px;
  background:
    linear-gradient(90deg,var(--ink-400) 0 var(--stahl),var(--sig-400) var(--stahl) var(--hybrid),transparent var(--hybrid) 100%),
    repeating-linear-gradient(135deg,rgba(251,250,247,.28) 0 2px,transparent 2px 6px),
    var(--ink-800)}
.dr-grenze{position:absolute;top:23px;left:var(--stahl);width:2px;height:18px;margin-left:-1px;
  border-radius:1px;background:var(--porcelain)}
.dr-g-hybrid{left:var(--hybrid)}
.dr-zeiger{position:absolute;top:32px;left:var(--p);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0,#E9EDEF 40%,#AEB6BB 100%);
  box-shadow:0 0 0 3px var(--ink-950),0 2px 8px rgba(0,0,0,.6)}
/* Die eigene Drehzahl über dem Zeiger. Am Rand rückt sie nach innen. */
.dr-zeigerwert{position:absolute;top:0;left:clamp(40px,var(--p),calc(100% - 40px));transform:translateX(-50%);
  font-size:13px;font-weight:600;line-height:1.2;color:var(--porcelain);white-space:nowrap;font-variant-numeric:tabular-nums}
.dr-wert{white-space:nowrap}
.dr-einheit{font-size:12px;font-weight:500;color:var(--ink-400)}
.dr-ergebnis[data-stufe="leer"] .dr-skala,.dr-ergebnis[data-stufe="fehler"] .dr-skala{opacity:.35}
.dr-ergebnis[data-stufe="leer"] .dr-zeiger,.dr-ergebnis[data-stufe="fehler"] .dr-zeiger,
.dr-ergebnis[data-stufe="leer"] .dr-zeigerwert,.dr-ergebnis[data-stufe="fehler"] .dr-zeigerwert{opacity:0}
/* Weiche Übergänge für Zeiger und Grenzen. Dafür müssen die Werte als Prozent
   angemeldet sein; Browser ohne @property springen einfach. */
@property --p{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --stahl{syntax:"<percentage>";inherits:true;initial-value:58%}
@property --hybrid{syntax:"<percentage>";inherits:true;initial-value:70%}
.dr-skala{transition:--p .95s cubic-bezier(.3,.75,.2,1.06),--stahl .8s ease,--hybrid .8s ease,opacity .3s ease}
.dr-zeiger,.dr-zeigerwert{transition:opacity .3s ease}

/* Legende zur Skala mit den beiden Grenzen. Fett steht, wo die eigene
   Drehzahl liegt. */
.dr-grenzen{display:grid;gap:7px;margin:0 0 16px}
.dr-grenzen > div{display:flex;align-items:baseline;gap:10px;font-size:14px;line-height:1.4}
.dr-grenzen dt{display:flex;align-items:center;gap:10px;flex:none;width:7.4em;color:var(--ink-300)}
.dr-grenzen dt::before{content:"";flex:none;width:22px;height:8px;border-radius:4px;align-self:center}
.dr-gr-stahl dt::before{background:var(--ink-400)}
.dr-gr-hybrid dt::before{background:var(--sig-400)}
.dr-gr-weiter dt::before{background:repeating-linear-gradient(135deg,rgba(251,250,247,.28) 0 2px,transparent 2px 6px),var(--ink-800);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dr-grenzen dd{color:var(--ink-300);font-variant-numeric:tabular-nums;white-space:nowrap}
.dr-grenzen .hier dt,.dr-grenzen .hier dd{color:var(--porcelain);font-weight:600}
/* Unter 360 Pixeln passt der Wert nicht mehr neben den Namen. Dann steht er
   darunter, eingerückt wie der Name. */
@media(max-width:359px){
  .dr-grenzen > div{display:block}
  .dr-grenzen dd{padding-left:32px}
}

.dr-notiz{font-size:13px;color:var(--ink-400);margin:12px 0 0;line-height:1.5}
/* Fehler in der CI: Messingzeichen statt Rot */
.dr-fehler{position:relative;padding-left:30px;font-size:15px;color:var(--ink-100);margin:0;line-height:1.55}
.dr-fehler::before{content:"!";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:var(--sig-400);color:var(--ink-950);font-size:13px;font-weight:700;line-height:20px;text-align:center}
.dr-werte{display:grid;gap:6px;margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.dr-werte > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;line-height:1.45}
.dr-werte dt{color:var(--ink-400)}
.dr-werte dd{color:var(--porcelain);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.dr-tabelle{max-width:640px}
.dr-tabelle th[scope="row"]{font-weight:600;color:var(--ink-900);text-transform:none;letter-spacing:0;font-size:15px;
  border-bottom:1px solid var(--ink-100);padding:13px 14px 13px 0}
.dr-tabelle td{white-space:nowrap}
.dr-tabelle td:first-child{font-weight:400}
.dr-belege{font-size:13px;color:var(--ink-500);margin:-12px 0 0;max-width:40rem;line-height:1.55}

/* --- Leiste am unteren Rand (schmale Bildschirme, setzt werkzeuge.js) --- */
.wz-mini{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:12px;background:var(--ink-950);color:var(--porcelain);font-size:14.5px;
  line-height:1.35;text-decoration:none;box-shadow:0 12px 32px rgba(8,11,13,.35);
  animation:wz-mini .3s cubic-bezier(.2,.7,.25,1) both}
.wz-mini[hidden]{display:none}
.wz-mini:hover{color:var(--porcelain)}
.wz-mini .kugel{width:22px;height:22px}
.wz-mini .kugel[hidden]{display:none}
.wz-mini-text{flex:1;min-width:0}
.wz-mini-los{flex:none;color:var(--sig-300);font-weight:600}
@keyframes wz-mini{from{opacity:0;transform:translateY(14px)}}
/* Breit als kleine Karte unten rechts. Sie kommt nur, solange die Fragen zu
   sehen sind und das Ergebnis nicht, also wenn die Ergebniskarte zu hoch zum
   Mitlaufen ist. */
@media(min-width:1000px){.wz-mini{left:auto;right:28px;bottom:28px;max-width:440px}}

/* --- Bewegung reduzieren --- */
@media(prefers-reduced-motion:reduce){
  .hc-kugel,.hc-station,.hc-station::before,.dr-skala,.dr-zeiger,.dr-zeigerwert,.wz-text{transition:none!important}
  .hc-kugel,.wz-frisch .wz-text > *,.wz-mini,.tools-karten .tk-bild *{animation:none!important}
}

/* --- Druck: das Ergebnis und die gegebenen Antworten --- */
@media print{
  .tools-karten,.wz-mini,.wz-knoepfe,.wz-hilfe,.hc-bahn,.dr-skala,.dr-lager,.wz-anfrage{display:none!important}
  .dr-grenzen dt::before{display:none}
  .wz-raster{display:block}
  .wz-frage{padding:3mm 0;break-inside:avoid}
  .wz-frage:has(input[type=radio]):not(:has(input:checked)){display:none}
  .wahl-o input:not(:checked) + span{display:none}
  .wahl-o span{border:0;padding:0;min-height:0}
  .wahl-o span::before{display:none}
  /* Die gewählte Antwort ist am Bildschirm ein dunkler Knopf mit heller
     Schrift. Auf Papier wurde daraus ein schwarzer Balken, ohne Hintergrund-
     grafiken sogar weiße Schrift auf Weiß. */
  .wahl-o input:checked + span{background:none!important;color:#000!important;font-weight:600}
  .wz-ergebnis{position:static;max-height:none;overflow:visible;background:#fff!important;border:1px solid #999;
    box-shadow:none;margin-top:6mm;break-inside:avoid}
  .wz-ergebnis *{color:#000!important}
}

/* =========================================================
   Produktkatalog /katalog/ (inc/produktkatalog.php, Oktober 2026)
   Eine Übersicht, keine Artikelliste: Warengruppen, Werkstoffe,
   Lieferprogramm nach Baureihe, Kugeln, Artikelnummern, Auswahlhilfe.
   Das PDF entsteht aus /katalog/druck/ und hat eigene Regeln dort.
   ========================================================= */
.ktg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 30px;max-width:none}
.ktg-pdf{font-size:12.5px;font-weight:500;opacity:.72;margin-left:4px}
.ktg-pdf::before{content:"·";margin-right:8px}
@media(max-width:520px){.ktg-knoepfe .btn{width:100%}}

/* Karten für die drei Warengruppen und die zwei Kugelwerkstoffe */
.ktg-gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:940px){.ktg-gruppen{grid-template-columns:1fr}}
.ktg-gruppe,.ktg-kugel{background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:28px 28px 26px;
  display:flex;flex-direction:column}
.ktg-g-kopf{display:flex;align-items:center;gap:0;margin-bottom:16px}
.ktg-g-kopf .kugel{width:26px;height:26px;border:2px solid #fff;box-sizing:content-box}
.ktg-g-kopf .kugel + .kugel{margin-left:-9px}
.ktg-g-kopf .mat-code{margin:0 0 0 12px}
.ktg-gruppe h3,.ktg-kugel h3{font-size:20px;margin-bottom:10px}
.ktg-gruppe > p{font-size:15px;color:var(--ink-500);margin-bottom:18px}
.ktg-gruppe .mat-daten{margin-bottom:6px}
.ktg-gruppe .mat-daten dd{max-width:62%}
.ktg-links{list-style:none;margin:auto 0 0;padding-top:16px;display:grid;gap:7px}
.ktg-links a{font-size:14.5px;font-weight:600;color:var(--sig-700);text-decoration:none}
.ktg-links a::after{content:"→";display:inline-block;margin-left:7px;transition:transform .16s ease}
.ktg-links a:hover{color:var(--sig-800)}
.ktg-links a:hover::after{transform:translateX(4px)}

/* Tabellen auf weißer Fläche, schmal seitlich scrollbar */
/* position:relative hält die unsichtbaren Screenreader-Texte (.sr) in den
   Zellen im Kasten. Sonst rechnete der Browser sie der Seite zu, und die ganze
   Seite ließe sich auf dem Handy seitlich schieben. */
.ktg-huelle{position:relative;background:#fff;border:1px solid var(--ink-200);border-radius:14px;padding:4px 22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.ktg-tab{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.ktg-tab th,.ktg-tab td{padding:13px 12px;border-bottom:1px solid var(--ink-100);text-align:left;vertical-align:middle}
.ktg-tab tbody tr:last-child th,.ktg-tab tbody tr:last-child td{border-bottom:0}
.ktg-tab thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);font-weight:700;
  vertical-align:bottom;border-bottom-color:var(--ink-300)}
.ktg-tab tbody th{font-weight:600;color:var(--ink-900)}
.ktg-tab td{color:var(--ink-700)}
.ktg-tab caption{caption-side:top;text-align:left;font-family:var(--head);font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--ink-900);padding:16px 0 4px}
.ktg-klein{display:block;font-size:12.5px;font-weight:400;color:var(--ink-500);letter-spacing:0;text-transform:none;margin-top:2px}
.ktg-werkstoffe{min-width:720px}
.ktg-werkstoffe thead th{text-transform:none;letter-spacing:-.005em;font-size:15px;color:var(--ink-900);font-weight:600;width:21%}
.ktg-werkstoffe thead .kugel{display:block;width:24px;height:24px;margin-bottom:10px}
.ktg-werkstoffe tbody th{width:16%;font-weight:500;color:var(--ink-500)}
.ktg-werkstoffe td{font-size:14.5px}
.ktg-reihen{min-width:760px}
.ktg-reihen thead .kugel{display:block;width:16px;height:16px;margin:0 auto 8px}
.ktg-sp{text-align:center!important}
.ktg-mass{white-space:nowrap;font-variant-numeric:tabular-nums}
.ktg-zahl{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 12px 5px 8px;border:1px solid var(--ink-200);
  border-radius:99px;color:var(--ink-900);font-weight:600;text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease,background .15s ease}
.ktg-zahl:hover{border-color:var(--sig-500);background:var(--porcelain);color:var(--ink-900)}
.ktg-zahl .kugel{width:14px;height:14px;box-shadow:none}
.ktg-von{font-weight:400;font-size:13px;color:var(--ink-500)}
/* Fehlt ein Werkstoff, steht ein kleiner grauer Punkt. Ein leerer Ring sähe
   der weißen Zirkonoxid-Kugel zu ähnlich. */
.ktg-leer{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink-200);vertical-align:middle}

/* Alle Größen, aufklappbar */
.ktg-alle{margin-top:22px}
.ktg-alle summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;
  font-weight:600;color:var(--sig-700);font-size:16px}
.ktg-alle summary::-webkit-details-marker{display:none}
.ktg-alle summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.ktg-alle[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ktg-alle summary:hover{color:var(--sig-800)}
.ktg-alle-inhalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px;margin-top:14px;align-items:start}
.ktg-alle-inhalt > *{min-width:0}
.ktg-alle-inhalt .ktg-huelle{padding:0 16px 6px}
.ktg-groessen{font-size:14px}
.ktg-groessen th,.ktg-groessen td{padding:8px 6px}
.ktg-groessen thead th{font-size:11px;letter-spacing:.06em}
.ktg-punkt{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;transition:background .15s ease}
.ktg-punkt:hover{background:var(--porcelain-2)}
.ktg-punkt .kugel{width:15px;height:15px;box-shadow:none}
.ktg-fuss{grid-column:1 / -1;font-size:14px;color:var(--ink-500);margin:4px 0 0;max-width:44rem}
@media(max-width:400px){.ktg-alle-inhalt{grid-template-columns:1fr}}

/* Keramikkugeln */
.ktg-kugeln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:860px){.ktg-kugeln{grid-template-columns:1fr}}
.ktg-unter{font-size:15px;color:var(--ink-500);margin-bottom:18px}
.ktg-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ktg-chips a{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border:1px solid var(--ink-200);border-radius:99px;
  font-size:14px;color:var(--ink-800);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:border-color .15s ease,background .15s ease}
.ktg-chips a:hover{border-color:var(--sig-500);background:var(--porcelain);color:var(--ink-900)}
.ktg-einheit{color:var(--ink-500);margin-left:-3px}
.ktg-zoll{font-size:12px;font-weight:600;color:var(--sig-700)}

/* Artikelnummern: das Beispiel groß, darunter die Teile in derselben Farbe */
.ktg-nummer{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:30px 32px 32px;margin-bottom:20px;
  background:rgba(255,255,255,.025)}
.ktg-code{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .12em;margin:0 0 26px;max-width:none;
  font-family:var(--head);font-weight:600;font-size:clamp(34px,6vw,62px);letter-spacing:.01em;line-height:1.1}
.ktg-c{padding-bottom:6px;border-bottom:3px solid currentColor}
.ktg-strich{color:var(--ink-500)}
.ktg-c0{color:var(--sig-400)}
.ktg-c1{color:var(--porcelain)}
.ktg-c2{color:#8DBFDD}
.ktg-c3{color:#9FD6AF}
.ktg-teile{display:grid;gap:22px}
.ktg-teile-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ktg-teile-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:860px){.ktg-teile-3,.ktg-teile-4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ktg-teile-3,.ktg-teile-4{grid-template-columns:1fr}.ktg-nummer{padding:24px 20px}}
.ktg-teil{border-top:2px solid currentColor;padding-top:12px}
.ktg-teil-t{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin:0 0 10px}
.ktg-teil dl{display:grid;gap:8px;margin:0}
.ktg-teil dl > div{display:grid;grid-template-columns:minmax(46px,auto) 1fr;gap:10px;align-items:baseline}
.ktg-teil dt{font-family:var(--head);font-weight:600;color:var(--porcelain);font-size:15px}
.ktg-teil dd{color:var(--ink-300);font-size:14px;line-height:1.45}

/* Auswahlhilfe */
.ktg-auswahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
@media(max-width:820px){.ktg-auswahl{grid-template-columns:1fr}}
.ktg-regel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;background:#fff;
  border:1px solid var(--ink-100);border-left:3px solid var(--ink-300);border-radius:10px;padding:15px 18px}
.ktg-r-hybrid{border-left-color:var(--sig-500)}
.ktg-r-voll{border-left-color:var(--ink-900)}
.ktg-wenn{font-size:15px;font-weight:600;color:var(--ink-900);margin:0}
.ktg-dann{font-family:var(--head);font-size:15px;font-weight:600;color:var(--sig-700);margin:0;white-space:nowrap}
.ktg-r-voll .ktg-dann{color:var(--ink-900)}
.ktg-r-stahl .ktg-dann{color:var(--ink-500)}
.ktg-warum{grid-column:1 / -1;font-size:14px;color:var(--ink-500);margin:4px 0 0;line-height:1.5;max-width:none}
.ktg-tools{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0 0}
@media(max-width:820px){.ktg-tools{grid-template-columns:1fr}}
.ktg-tools a{display:block;height:100%;padding:16px 20px;border:1px solid var(--ink-200);border-radius:12px;background:#fff;
  text-decoration:none;color:var(--ink-900);transition:border-color .16s ease,box-shadow .16s ease}
.ktg-tools a:hover{border-color:var(--sig-500);box-shadow:0 10px 28px rgba(8,11,13,.07);color:var(--ink-900)}
.ktg-tools b{display:block;font-family:var(--head);font-weight:600;font-size:17px}
.ktg-tools b::after{content:"→";margin-left:8px;color:var(--sig-700);display:inline-block;transition:transform .16s ease}
.ktg-tools a:hover b::after{transform:translateX(4px)}
.ktg-tools span{display:block;font-size:14px;color:var(--ink-500);margin-top:2px}

/* Links im Fließtext auf dunklem Grund: Gold 300 statt 700, sonst zu wenig Kontrast */
.sec-dunkel .lede a,.sec-dunkel .nachsatz a{color:var(--sig-300)}
.sec-dunkel .lede a:hover,.sec-dunkel .nachsatz a:hover{color:var(--sig-200)}

@media print{
  .ktg-knoepfe,.ktg-tools,.ktg-alle summary{display:none!important}
  .ktg-huelle{border:0;padding:0;overflow:visible}
  .ktg-nummer{border:1px solid #999;background:#fff!important}
  .ktg-c,.ktg-teil{border-color:#000!important}
}

/* =========================================================
   Katalog-Kachel auf der Startseite (index.php, Oktober 2026)

   Wie bei NH O-RING direkt unter dem Sortiment. Links Text, PDF und der Weg
   zur Katalogseite, rechts der Katalog als Fächer: vorn das Titelblatt, das
   aus demselben HTML wie im PDF kommt (kat_titelblatt), verkleinert über
   transform. Dahinter drei Innenseiten als Bilder aus dem PDF
   (assets/katalog/vorschau-*.jpg).

   Maße im Titelblatt in mm und pt wie in der Druckvorlage. --b ist die
   Breite einer Seite in Pixeln, ohne Einheit, damit sich daraus der
   Verkleinerungsfaktor rechnen lässt: 210 mm sind 793,7 px.
   ========================================================= */
.kk{--b:236;--dx:20px;--kx:-4px;--ky:-6px;--kw:-1deg;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);align-items:center;
  margin-top:64px;background:var(--ink-950);color:var(--porcelain);border-radius:18px;overflow:hidden;isolation:isolate;
  box-shadow:0 34px 70px -38px rgba(8,11,13,.55)}
/* Warmes Licht hinter dem Fächer */
.kk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 62% at 74% 52%,rgba(224,180,78,.19),rgba(224,180,78,.06) 55%,rgba(224,180,78,0) 100%)}
.kk :focus-visible{outline-color:var(--porcelain);box-shadow:0 0 0 5px var(--sig-500)}

.kk-text{position:relative;z-index:2;padding:60px 8px 60px 60px}
.kk-marke{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--sig-400);font-weight:600;margin-bottom:14px}
.kk-h{font-size:clamp(27px,3vw,36px);color:var(--porcelain);margin-bottom:16px;max-width:14ch;text-wrap:balance}
.kk-satz{font-size:16.5px;line-height:1.62;color:var(--ink-300);max-width:29rem;margin-bottom:30px;text-wrap:pretty}
.kk-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0;max-width:none}
.kk-pfeil{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s ease}
.kk-knoepfe .btn-primary:hover .kk-pfeil{transform:translateY(2px)}
.kk-info{margin-top:16px;font-size:13.5px;color:var(--ink-400);letter-spacing:.01em}

/* --- Der Fächer --- */
.kk-bild{position:relative;display:block;align-self:stretch;min-height:480px;color:inherit;text-decoration:none;cursor:pointer}
.kk-netz{position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;max-width:none;
  fill:none;stroke:rgba(224,180,78,.17);stroke-width:1;pointer-events:none}
.kk-netz circle{stroke-dasharray:6 5}
.kk-netz path{stroke:rgba(224,180,78,.11);stroke-dasharray:14 4 3 4}
.kk-seite{position:absolute;left:calc(50% + var(--dx,0px));top:calc(50% - 14px);width:calc(var(--b) * 1px);height:calc(var(--b) * 1.41429px);
  margin:calc(var(--b) * -.70714px) 0 0 calc(var(--b) * -.5px);border-radius:3px;overflow:hidden;background:var(--porcelain);
  transform-origin:50% 135%;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--w,0deg));
  box-shadow:0 22px 40px -16px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35)}
.kk-seite img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* Die hinteren Seiten liegen im Schatten des Titelblatts */
.kk-s1::after,.kk-s2::after,.kk-s3::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--licht,90deg),rgba(8,11,13,0) 40%,rgba(8,11,13,.42))}
.kk-s1{--x:-46px;--y:10px;--w:-15deg;--licht:90deg}
.kk-s2{--x:-20px;--y:0px;--w:-6deg;--licht:90deg}
.kk-s3{--x:40px;--y:8px;--w:10deg;--licht:270deg}
.kk-titel{--x:var(--kx);--y:var(--ky);--w:var(--kw);background:var(--ink-950);
  box-shadow:0 34px 60px -18px rgba(0,0,0,.85),0 6px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}

/* Das Titelblatt, verkleinert. Maße wie in katalog/druck/index.php. */
.kk-blatt{position:absolute;left:0;top:0;width:210mm;height:297mm;padding:16mm;transform-origin:0 0;
  transform:scale(calc(var(--b) / 793.7));font-family:var(--sans);font-size:9pt;line-height:1.5;color:var(--porcelain);
  pointer-events:none}
.kk-blatt p{margin:0;max-width:none}
.kk-blatt .t-logo{display:block}
.kk-blatt .t-logo img{height:11mm;width:auto;max-width:none}
.kk-blatt .t-bild{position:absolute;right:-26mm;top:22mm;width:158mm;height:158mm}
.kk-blatt .t-bild svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
.kk-blatt .zg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kk-blatt .t-text{position:absolute;left:16mm;right:16mm;bottom:34mm}
.kk-blatt .t-marke{font-size:8pt;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--sig-400);margin-bottom:5mm}
.kk-blatt .t-h1{font-family:var(--head);font-size:46pt;font-weight:600;letter-spacing:-.035em;line-height:1.02;margin-bottom:5mm}
.kk-blatt .t-unter{font-size:13pt;color:var(--ink-300);max-width:120mm;line-height:1.45;margin-bottom:9mm}
.kk-blatt .t-zahlen{display:flex;gap:10mm;border-top:.3mm solid rgba(255,255,255,.14);padding-top:5mm}
.kk-blatt .t-zahlen b{display:block;font-family:var(--head);font-size:20pt;font-weight:600;color:var(--sig-300);line-height:1.1}
.kk-blatt .t-zahlen span{font-size:8pt;color:var(--ink-300);letter-spacing:.04em}
.kk-blatt .t-fuss{position:absolute;left:16mm;right:16mm;bottom:14mm;display:flex;justify-content:space-between;
  font-size:8pt;color:var(--ink-400)}
.kk-blatt .t-adr{color:var(--porcelain);font-weight:600}

/* --- Bewegung: einmal beim Hineinscrollen, dann Ruhe ---
   Erst kommt der Stapel hoch, dann fächern die drei Seiten unter dem
   Titelblatt hervor, zuletzt zeichnet sich das Lager auf dem Titel. Mit der
   Maus über der Kachel fächern sie etwas weiter auf. Ohne Skript und bei
   „Bewegung reduzieren“ steht der Fächer sofort fertig da. */
/* Das Titelblatt kommt zuerst und ist schnell deckend, damit man die Seiten
   dahinter nicht durchscheinen sieht. Die Seiten starten genau unter ihm. */
@keyframes kk-titel-auf{0%{opacity:0;transform:translate(var(--x),calc(var(--y) + 30px)) rotate(var(--w))}35%{opacity:1}}
@keyframes kk-faecher{0%{opacity:0;transform:translate(var(--kx),var(--ky)) rotate(var(--kw))}12%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .bw .kk:not(.sichtbar) .kk-seite{opacity:0}
  .bw .kk:not(.sichtbar) .kk-titel .zg{stroke-dasharray:1;stroke-dashoffset:1}
  .bw .kk:not(.sichtbar) .kk-titel .zf{opacity:0}
  .kk.sichtbar .kk-titel{animation:kk-titel-auf .7s cubic-bezier(.2,.7,.25,1) backwards}
  .kk.sichtbar .kk-s1,.kk.sichtbar .kk-s2,.kk.sichtbar .kk-s3{
    animation:kk-faecher .95s cubic-bezier(.22,.8,.24,1.05) var(--t,0s) backwards}
  .kk.sichtbar .kk-s1{--t:.6s}
  .kk.sichtbar .kk-s2{--t:.5s}
  .kk.sichtbar .kk-s3{--t:.4s}
  /* Das Lager auf dem Titel: erst die Linien, dann die Flächen */
  .kk.sichtbar .kk-titel .zg{stroke-dasharray:1;
    animation:mz-linie calc(var(--dauer,1s) * .8) cubic-bezier(.45,.1,.2,1) calc(var(--d,0s) * .55 + .6s) both}
  .kk.sichtbar .kk-titel .zf{opacity:0;animation:mz-auf .7s ease calc(var(--d,0s) * .55 + .6s) both}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .kk-seite{transition:transform .6s cubic-bezier(.2,.7,.25,1)}
  .kk:hover .kk-seite{transform:translate(calc(var(--x,0px) + var(--hx,0px)),calc(var(--y,0px) + var(--hy,0px)))
    rotate(calc(var(--w,0deg) + var(--hw,0deg)))}
  .kk-s1{--hx:-10px;--hw:-3deg}
  .kk-s2{--hx:-6px;--hw:-1.5deg}
  .kk-s3{--hx:10px;--hw:3deg}
  .kk-titel{--hy:-8px}
}

/* --- Schmalere Bildschirme ---
   Zwei Spalten bis 901 px, die Seiten werden mit der Breite kleiner. Darunter
   steht der Fächer über dem Text, etwas nach rechts gerückt, weil zwei der
   drei Seiten nach links fächern. */
@media(max-width:1179px){
  .kk{--b:206;--dx:14px;grid-template-columns:minmax(0,1fr) minmax(0,430px)}
  .kk-text{padding:52px 20px 52px 46px}
  .kk-knoepfe{gap:10px}
  .kk-knoepfe .btn{padding:12px 18px;font-size:15px}
  .kk-bild{min-height:440px}
  .kk-netz{width:520px;height:520px;margin:-260px 0 0 -260px}
  .kk-s1{--x:-28px;--w:-12deg}
  .kk-s2{--x:-12px;--w:-5deg}
  .kk-s3{--x:26px;--w:8deg}
}
@media(max-width:959px){
  .kk{--b:176;--dx:12px;grid-template-columns:minmax(0,1fr) minmax(0,370px)}
  .kk-text{padding:46px 14px 46px 40px}
  .kk-bild{min-height:400px}
  .kk-netz{width:460px;height:460px;margin:-230px 0 0 -230px}
  .kk-s1{--x:-24px}
  .kk-s3{--x:22px}
}
@media(max-width:900px){
  .kk{--b:178;--dx:12px;grid-template-columns:1fr;margin-top:48px;border-radius:16px}
  .kk::before{background:radial-gradient(70% 42% at 50% 24%,rgba(224,180,78,.2),rgba(224,180,78,.05) 60%,rgba(224,180,78,0) 100%)}
  .kk-bild{order:-1;min-height:362px}
  .kk-seite{top:50%}
  .kk-knoepfe .btn{padding:14px 26px;font-size:16px}
  .kk-netz{width:440px;height:440px;margin:-220px 0 0 -220px}
  .kk-text{padding:0 28px 34px}
  .kk-s1{--x:-24px;--w:-12deg}
  .kk-s2{--x:-10px;--w:-5deg}
  .kk-s3{--x:26px;--w:8deg}
}
@media(max-width:420px){
  .kk{--b:150}
  .kk-bild{min-height:316px}
  .kk-netz{width:380px;height:380px;margin:-190px 0 0 -190px}
  .kk-text{padding:0 22px 30px}
  .kk-knoepfe .btn{width:100%}
  .kk-ausgabe{display:none}
}
@media(max-width:359px){
  .kk{--b:134;--dx:8px}
  .kk-marke{letter-spacing:.12em}
  .kk-bild{min-height:290px}
  .kk-s1{--x:-16px}
  .kk-s3{--x:16px}
}

@media print{
  .kk{display:block;background:#fff!important;box-shadow:none!important;border:1px solid #999;border-radius:0;
    margin-top:6mm;padding:5mm;break-inside:avoid}
  .kk::before,.kk-bild,.kk-knoepfe{display:none!important}
  .kk-text{padding:0}
  .kk-info::after{content:" · rotaris-lager.de/katalog/"}
}

/* =========================================================
   Versprechen auf der Startseite: „Zahl zuerst“ (index.php, 10. Oktober 2026)

   Drei dunkle Kacheln. Oben eine große Zahl (Artikel, Liefertag, 100 %),
   darunter ein kleines Diagramm aus inc/vorteile.php und ein Satz.
   Bewegung einmal beim Hineinscrollen: Die Kachel kommt (Staffel aus
   bewegung.js), die Zahlen zählen hoch (data-zaehlen), die Balken wachsen,
   der Weg zum Liefertag zieht sich, die Charge verbindet sich mit den
   Papieren. Danach Ruhe. Ohne Skript und bei „Bewegung reduzieren“ steht
   alles fertig da.
   ========================================================= */
.vt-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vt-kachel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  background:var(--ink-950);color:var(--porcelain);border-radius:16px;padding:32px 28px 30px;
  box-shadow:0 30px 60px -40px rgba(8,11,13,.6)}
.vt-kachel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 60% at 0% 0%,rgba(224,180,78,.16),rgba(224,180,78,0) 70%)}
.vt-kachel h3{margin:0 0 24px;color:var(--porcelain)}
/* Die Zahl wächst mit der Breite: Zwischen 900 und 1180 Pixeln stehen drei
   Kacheln nebeneinander, dort passt „Mo 19.10.“ in 52 Pixeln nicht hinein. */
.vt-zahl{display:block;font-family:var(--head);font-size:clamp(40px,4.4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1;
  color:var(--sig-300);white-space:nowrap}
@media(min-width:901px) and (max-width:1099px){.vt-kachel{padding:28px 22px 26px}}
.vt-was{display:block;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;line-height:1.4;
  color:var(--porcelain);margin-top:10px}
.vt-dg{margin-top:auto;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.vt-kachel > p{font-size:15px;line-height:1.55;color:var(--ink-300);margin:18px 0 0}
@media(max-width:900px){
  .vt-reihe{grid-template-columns:1fr;gap:14px}
  .vt-dg{max-width:360px;border-bottom:0;padding-bottom:0}
  .vt-zahl{font-size:46px}
}

/* Die kleinen Diagramme, Gold auf Dunkel */
.dg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.dg text{font-size:10.5px;fill:var(--ink-300)}
.dg .dg-k{font-size:8.5px;letter-spacing:.16em;font-weight:700;fill:var(--ink-400)}
.dg .dg-u{fill:var(--ink-400);font-size:10px}
.dg .dg-gold{fill:var(--sig-300);font-weight:700;font-size:12.5px}
.dg .dg-achse{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
.dg .dg-trend{fill:none;stroke:var(--sig-200);stroke-width:1.2;stroke-dasharray:3 4;opacity:.7}
.dg .dg-weg{fill:none;stroke:var(--sig-400);stroke-width:2;stroke-linecap:round}
.dg .dg-punkt{fill:var(--ink-950);stroke:var(--sig-300);stroke-width:1.6}
.dg .dg-ziel{fill:var(--sig-400)}
.dg .dg-ring{fill:none;stroke:rgba(224,180,78,.4);stroke-width:1}
.dg .dg-l{fill:none;stroke:var(--ink-300);stroke-width:1.4}
.dg .dg-fein{fill:none;stroke:rgba(224,180,78,.55);stroke-width:1;stroke-dasharray:2 3}
.dg .dg-kugel{fill:#29343A;stroke:var(--sig-400);stroke-width:1}
.dg .dg-strich{fill:none;stroke:rgba(224,180,78,.65);stroke-width:1.2;stroke-dasharray:3 3}
.dg .dg-etikett{fill:rgba(224,180,78,.10);stroke:var(--sig-400);stroke-width:1.2}
.dg .dg-doc{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.28);stroke-width:1}

/* Aufbau der Diagramme, solange die Kachel hereinkommt (.kommt) */
@keyframes vt-wachsen{from{transform:scaleY(0)}}
@keyframes vt-ziehen{from{stroke-dashoffset:1}}
@keyframes vt-auf{from{opacity:0}}
@keyframes vt-ploppen{from{opacity:0;transform:scale(.3)}}
@keyframes vt-rein{from{opacity:0;transform:translateX(-8px)}}
@media(prefers-reduced-motion:no-preference){
  .vt-kachel.kommt .dg-b{transform-box:fill-box;transform-origin:50% 100%;
    animation:vt-wachsen .75s cubic-bezier(.2,.8,.25,1) calc(var(--verz,0ms) + 380ms + var(--n,0) * 120ms) both}
  .vt-kachel.kommt .dg-trend{animation:vt-auf .6s ease calc(var(--verz,0ms) + 1000ms) both}
  .vt-kachel.kommt .dg-weg{stroke-dasharray:1;animation:vt-ziehen 1.1s cubic-bezier(.45,.1,.2,1) calc(var(--verz,0ms) + 380ms) both}
  .vt-kachel.kommt .dg-punkt{transform-box:fill-box;transform-origin:center;
    animation:vt-ploppen .45s cubic-bezier(.3,1.5,.5,1) calc(var(--verz,0ms) + 380ms + var(--n,0) * 520ms) both}
  .vt-kachel.kommt .dg-ziel,.vt-kachel.kommt .dg-ring{transform-box:fill-box;transform-origin:center;
    animation:vt-ploppen .5s cubic-bezier(.3,1.5,.5,1) calc(var(--verz,0ms) + 1420ms) both}
  .vt-kachel.kommt .dg-liefer .dg-gold{animation:vt-auf .5s ease calc(var(--verz,0ms) + 1450ms) both}
  .vt-kachel.kommt .dg-teil{animation:vt-rein .55s cubic-bezier(.2,.8,.25,1) calc(var(--verz,0ms) + 380ms + var(--n,0) * 260ms) both}
}
@media print{
  .vt-kachel{background:#fff!important;box-shadow:none!important;border:1px solid #999;break-inside:avoid}
  .vt-dg{display:none}
}

/* Ablauf: Knöpfe unter dem Text neben Dieter */
.dz-ablauf .dz-knoepfe{margin-top:26px}

/* =========================================================
   Akademie auf der Startseite: „Ein Lager, Teil für Teil erklärt“
   (index.php und inc/lagerteile.php, 10. Oktober 2026)

   Eine dunkle Kachel wie der Katalog, mit feinem Raster wie ein
   Zeichenblatt. In der Mitte ein Lager von vorn, sieben Teile zeigen mit
   einer Linie auf ihren Beitrag. Die Beiträge sind echte Links, über der
   Zeichnung an ihrem Teil (Lage in --top, aus lagerteile()). Unter
   1100 Pixeln stehen Nummern in der Zeichnung und die Links als Liste.

   Bewegung einmal beim Hineinscrollen (data-reveal="szene"): erst zeichnet
   sich das Lager, dann laufen die Linien nacheinander zu den Beiträgen.
   Zeigt man auf einen Beitrag, leuchtet sein Teil auf und der Rest wird
   blass (:has, wo der Browser es kann; sonst bleibt nur der Link golden).
   Ohne Skript und bei „Bewegung reduzieren“ steht alles fertig da.
   ========================================================= */
.lt{position:relative;padding:56px 60px 44px;background:var(--ink-950);color:var(--porcelain);border-radius:18px;
  overflow:hidden;isolation:isolate;box-shadow:0 34px 70px -38px rgba(8,11,13,.55)}
.lt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(34% 48% at 50% 60%,rgba(224,180,78,.15),rgba(224,180,78,.04) 60%,rgba(224,180,78,0) 100%),
             linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/24px 24px,
             linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/24px 24px}
.lt :focus-visible{outline-color:var(--porcelain);box-shadow:0 0 0 5px var(--sig-500)}
.lt p{max-width:none}
.lt-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);column-gap:56px;align-items:end}
.lt-h{font-size:clamp(28px,3.2vw,40px);color:var(--porcelain);margin:14px 0 0;max-width:16ch;text-wrap:balance}
.lt-satz{font-size:16.5px;line-height:1.62;color:var(--ink-300);margin:0;text-wrap:pretty}
.lt-bild{position:relative;margin:18px -24px 0}
.lt-svg{display:block;width:100%;height:auto;overflow:visible}
.lt .zg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lt-nr{display:none}
.lt-labels{position:absolute;inset:0}
.lt-lab{position:absolute;top:var(--top);transform:translateY(-50%);width:22.4%;display:flex;flex-direction:column;
  text-decoration:none;color:var(--porcelain);padding:4px 0}
.lt-lab:hover{color:var(--porcelain)}
.lt-r{left:77.6%}
.lt-l{right:77.6%;text-align:right;align-items:flex-end}
.lt-n{display:none}
.lt-teil{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sig-400)}
.lt-titel{font-family:var(--head);font-weight:600;font-size:16.5px;line-height:1.25;letter-spacing:-.01em;margin-top:5px;
  transition:color .15s ease}
.lt-zeit{font-size:13px;color:var(--ink-400);margin-top:3px}
.lt-lab:hover .lt-titel,.lt-lab:focus-visible .lt-titel{color:var(--sig-300)}
.lt-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:14px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.lt-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.lt-info{font-size:13.5px;color:var(--ink-400);margin:0}

/* Zeigt man auf einen Beitrag, tritt sein Teil hervor, der Rest wird blass */
.lt-t,.lt-hl,.lt-lab{transition:opacity .3s ease}
.lt:has(.lt-lab:hover,.lt-lab:focus-visible) :is(.lt-t,.lt-hl){opacity:.22}
.lt-labels:has(.lt-lab:hover,.lt-lab:focus-visible) .lt-lab:not(:hover,:focus-visible){opacity:.45}
.lt:has([data-teil="kugel"]:hover,[data-teil="kugel"]:focus-visible) :is(.lt-t-kugel,.lt-hl-kugel),
.lt:has([data-teil="ring"]:hover,[data-teil="ring"]:focus-visible) :is(.lt-t-ring,.lt-t-kugel,.lt-hl-ring),
.lt:has([data-teil="fett"]:hover,[data-teil="fett"]:focus-visible) :is(.lt-t-fett,.lt-hl-fett),
.lt:has([data-teil="kaefig"]:hover,[data-teil="kaefig"]:focus-visible) :is(.lt-t-kaefig,.lt-hl-kaefig),
.lt:has([data-teil="luft"]:hover,[data-teil="luft"]:focus-visible) :is(.lt-t-kugel,.lt-t-ring,.lt-hl-luft),
.lt:has([data-teil="welle"]:hover,[data-teil="welle"]:focus-visible) :is(.lt-t-welle,.lt-t-ring,.lt-hl-welle),
.lt:has([data-teil="name"]:hover,[data-teil="name"]:focus-visible) :is(.lt-t-name,.lt-t-ring,.lt-hl-name){opacity:1}

/* Bewegung: erst die Zeichnung, dann die Beiträge (ab 1,75 s, je 0,12 s versetzt) */
@keyframes lt-rein{from{opacity:0;translate:var(--rx,10px) 0}}
@keyframes lt-hoch{from{opacity:0;translate:0 8px}}
.lt-l{--rx:-10px}
@media(prefers-reduced-motion:no-preference){
  .bw .lt:not(.sichtbar) .zg{stroke-dasharray:1;stroke-dashoffset:1}
  .bw .lt:not(.sichtbar) :is(.zf,.zt){opacity:0}
  .bw .lt:not(.sichtbar) .lt-lab{opacity:0}
  .lt.sichtbar .zg{stroke-dasharray:1;animation:mz-linie var(--dauer,1s) cubic-bezier(.45,.1,.2,1) var(--d,0s) both}
  .lt.sichtbar :is(.zf,.zt){opacity:0;animation:mz-auf .7s ease var(--d,0s) both}
  .lt.sichtbar .lt-lab{animation:lt-rein .6s cubic-bezier(.2,.7,.25,1) calc(1.75s + var(--i) * .12s) both}
}

/* Schmal: Nummern in der Zeichnung, die Beiträge als Liste darunter. Die
   Zeichnung wird auf das Lager zugeschnitten, die Linien fallen weg. */
@media(max-width:1099px){
  .lt{padding:48px 40px 40px}
  .lt-kopf{grid-template-columns:1fr;row-gap:14px}
  .lt-bild{margin:20px 0 0}
  .lt-zeichnung{overflow:hidden;max-width:480px;margin:0 auto}
  .lt-svg{width:calc(100% * 1000 / 492);max-width:none;margin-left:calc(-100% * 254 / 492)}
  .lt-hl .zg,.lt-hl > circle{display:none}
  .lt-nr{display:inline}
  .lt-labels{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:22px}
  .lt-lab{position:static;transform:none;width:auto;text-align:left;padding:14px 0;
    border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start}
  .lt-teil,.lt-titel,.lt-zeit{grid-column:2}
  .lt-n{display:grid;place-items:center;grid-column:1;grid-row:1 / span 3;width:26px;height:26px;border-radius:50%;
    background:var(--sig-400);color:var(--ink-950);font-size:12.5px;font-weight:700;margin-top:-3px}
}
@media(max-width:1099px) and (prefers-reduced-motion:no-preference){
  .lt.sichtbar .lt-lab{animation-name:lt-hoch}
}
@media(max-width:640px){
  .lt{padding:36px 22px 30px;border-radius:16px}
  .lt-labels{grid-template-columns:1fr}
  .lt-knoepfe .btn{padding:13px 20px}
}

/* Druck: die Beiträge als Liste, ohne Zeichnung */
@media print{
  .lt{background:#fff!important;color:#000;box-shadow:none!important;border:1px solid #999;padding:24px;break-inside:avoid}
  .lt::before,.lt-zeichnung,.lt-knoepfe{display:none!important}
  .lt-h,.lt-titel{color:#000}
  .lt-kopf{grid-template-columns:1fr}
  .lt-bild{margin:12px 0 0}
  .lt-n{display:none!important}
  .lt-labels{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:12px}
  .lt-lab{position:static;transform:none;width:auto;text-align:left;display:flex;flex-direction:column;align-items:flex-start;
    padding:8px 0;border-top:1px solid #ccc;color:#000;opacity:1!important}
  .lt-teil,.lt-zeit,.lt-satz,.lt-info{color:#333}
  .lt-fuss{border-top-color:#ccc;padding-top:10px}
}

/* =========================================================
   Akademie: Kacheln mit Bild und Aufmacher (10. Oktober 2026)
   (beitragskarte() und aufmacher_karte() in inc/akademie.php)

   Das Bild jeder Kachel ist die Titelgrafik ihres Beitrags, auf dunklem
   Grund mit feinem Raster wie im Kopf der Beitragsseite. Auf /akademie/
   steht davor der Aufmacher über die ganze Breite. Dieselben Kacheln
   stehen in der Suche und unter „Weiterlesen“.

   Bewegung: Kommt eine Kachel ins Bild (.kommt aus bewegung.js), zeichnet
   sich ihre Grafik einmal, etwa doppelt so schnell wie im Beitragskopf.
   Mit der Maus rückt die Zeichnung ein kleines Stück näher. Ohne Skript,
   bei „Bewegung reduzieren“ und im Druck steht alles fertig da.
   ========================================================= */
.beitrag-mitbild{padding:0;overflow:hidden}
.beitrag-bild{position:relative;aspect-ratio:400/215;padding:8px 12px;border-bottom:1px solid var(--ink-900);
  background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px,
             linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px,var(--ink-950)}
.beitrag-bild svg{display:block;width:100%;height:100%;overflow:visible}
.beitrag-neu{position:absolute;left:12px;top:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  line-height:1.4;color:var(--ink-950);background:var(--sig-400);border-radius:999px;padding:3px 8px}
.beitrag-inhalt{display:flex;flex-direction:column;flex:1;padding:18px 20px 22px}
.beitrag-mitbild .beitrag-kat{margin-bottom:10px}
.beitrag-mitbild h2,.beitrag-mitbild h3{font-size:17.5px;margin:0 0 6px}
@media(min-width:941px){.beitrag-mitbild h2,.beitrag-mitbild h3{min-height:calc(2 * 17.5px * 1.25)}}
.beitrag-mitbild .beitrag-unter{margin-bottom:0}
.weiterlesen .beitrag-mitbild h3{min-height:0}
.weiterlesen .beitrag-mitbild:hover{background:#fff}

/* Die Zeichnungen sind für dunklen Grund gezeichnet: Linien, Flächen, Schrift */
.beitrag-bild .zg,.aufmacher-bild .zg{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* --- Der Aufmacher --- */
.aufmacher{grid-column:1 / -1;position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;margin-bottom:6px;
  background:var(--ink-950);color:var(--porcelain);border-radius:18px;overflow:hidden;text-decoration:none;
  box-shadow:0 30px 60px -38px rgba(8,11,13,.6);transition:transform .2s ease,box-shadow .2s ease}
.aufmacher::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 70% at 28% 50%,rgba(224,180,78,.16),rgba(224,180,78,0) 70%)}
.aufmacher:hover{color:var(--porcelain);transform:translateY(-2px);box-shadow:0 34px 64px -36px rgba(8,11,13,.7)}
.aufmacher:focus-visible{outline-color:var(--porcelain);box-shadow:0 0 0 5px var(--sig-500)}
.aufmacher-bild{display:grid;place-items:center;padding:34px 30px;border-right:1px solid rgba(255,255,255,.07);
  background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px,
             linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px}
.aufmacher-bild svg{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
.aufmacher-inhalt{display:flex;flex-direction:column;justify-content:center;padding:44px 48px}
.aufmacher-marke{align-self:flex-start;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  line-height:1.4;color:var(--ink-950);background:var(--sig-300);border-radius:999px;padding:4px 10px;margin-bottom:18px}
.aufmacher .beitrag-kat{color:var(--sig-400);margin-bottom:10px}
.aufmacher h2{font-size:clamp(24px,2.6vw,32px);line-height:1.18;color:var(--porcelain);margin:0 0 12px;text-wrap:balance}
.aufmacher-unter{font-size:17px;color:var(--ink-200);margin:0 0 12px;font-weight:500}
.aufmacher-kurz{font-size:15.5px;color:var(--ink-300);margin:0 0 22px}
.aufmacher .beitrag-mehr{color:var(--sig-300);margin-top:0}
.aufmacher:hover .beitrag-mehr::after{transform:translateX(4px)}
@media(max-width:940px){
  .aufmacher{grid-template-columns:1fr;border-radius:16px}
  .aufmacher-bild{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:22px 20px}
  .aufmacher-inhalt{padding:26px 24px 28px}
}

/* --- Bewegung --- */
@media(prefers-reduced-motion:no-preference){
  [data-reveal="staffel"] > .kommt :is(.beitrag-bild,.aufmacher-bild) .zg{stroke-dasharray:1;
    animation:mz-linie calc(var(--dauer,1s) * .7) cubic-bezier(.45,.1,.2,1) calc(var(--verz,0ms) + 250ms + var(--d,0s) * .45) both}
  [data-reveal="staffel"] > .kommt :is(.beitrag-bild,.aufmacher-bild) :is(.zf,.zt){opacity:0;
    animation:mz-auf .6s ease calc(var(--verz,0ms) + 250ms + var(--d,0s) * .45) both}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .beitrag-mitbild .beitrag-bild svg,.aufmacher-bild svg{transition:transform .5s cubic-bezier(.2,.7,.25,1)}
  .beitrag-mitbild:hover .beitrag-bild svg,.aufmacher:hover .aufmacher-bild svg{transform:scale(1.04)}
}

/* --- Druck: ohne Bilder, der Aufmacher hell ---
   Die allgemeine Druckregel blendet .beitraege aus (gedacht für die Kacheln der
   alten Startseite). Die Übersicht der Akademie soll aber als Liste aufs Papier. */
@media print{
  .beitraege.beitraege-bild{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4mm}
  .beitrag-bild,.aufmacher-bild,.aufmacher::before{display:none!important}
  .aufmacher{display:block;background:#fff!important;color:#000;box-shadow:none;border:1px solid #999;break-inside:avoid}
  .aufmacher-inhalt{padding:6mm}
  .aufmacher h2,.aufmacher-unter,.aufmacher-kurz,.aufmacher .beitrag-kat,.aufmacher .beitrag-mehr{color:#000!important}
  .aufmacher-marke{background:#fff;border:1px solid #999}
  .beitrag-mitbild{break-inside:avoid}
  main .aufmacher[href]::after{content:""!important}
}
/* Zwischen Handy und Computer zwei Kacheln nebeneinander, sonst würde jede
   Kachel mit Bild fast einen Bildschirm hoch */
@media(min-width:600px) and (max-width:940px){
  .beitraege.beitraege-bild:not(.beitraege-schmal){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* In Beiträgen gelten die Textregeln von .artikel p (17 px). Die Kacheln unter
   „Weiterlesen“ behalten trotzdem ihre eigenen Größen. */
.beitrag-mitbild .beitrag-kat{font-size:12px;line-height:1.4;letter-spacing:.14em;color:var(--sig-700);font-weight:600}
.beitrag-mitbild .beitrag-unter{font-size:15px;line-height:1.5;color:var(--ink-600);font-weight:500}
.beitraege-schmal .beitrag-mitbild h3{min-height:0}
/* Die Beitragsseite selbst trägt seit jeher die Klasse .beitrag
   (<article class="artikel beitrag">) und erbte damit Rahmen und Ecken der
   Kacheln, sichtbar als feine Linie an beiden Bildschirmrändern. */
.artikel.beitrag{border:0;border-radius:0}
.artikel.beitrag:hover{box-shadow:none;transform:none}

/* =========================================================
   Handy-Feinschliff vom 11. Oktober 2026
   Ergebnis der Prüfung auf 320 bis 430 Pixeln Breite, im Querformat und auf
   dem Tablet, mit Touch. Jede Regel steht hier mit ihrem Grund. Fast alles
   gilt nur für den Bildschirm, der Druck bleibt unberührt.
   ========================================================= */

/* --- Kopfzeile --- */
@media screen and (max-width:940px){
  /* Die Navigation liegt als Klappe über der Seite, ihre Rasterzeile ist leer.
     Der Zeilenabstand davor brachte trotzdem 10 bis 14 Pixel Lücke. */
  .wrap.kopfgitter{row-gap:0}
  /* Jeder Menüpunkt über die ganze Breite. Vorher waren Trennlinie,
     Markierung und Tippfläche nur so breit wie das Wort. */
  .navlist a{display:flex}
  /* Im Querformat ist der Bildschirm niedriger als das Menü. Dann rollt das
     Menü in sich, statt unten abgeschnitten zu werden. */
  .navlist{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
    overflow-y:auto;overscroll-behavior:contain}
  /* Sprungziele landen knapp unter der niedrigeren Kopfzeile */
  html{scroll-padding-top:76px}
}
@media screen and (max-width:720px){
  /* .wrap setzte hier oben und unten 0 Pixel: Zeichen und Knöpfe klebten am
     oberen Rand, die Zahl am Korb wurde abgeschnitten. */
  .wrap.kopfgitter{padding-top:7px;padding-bottom:7px}
}
@media screen and (max-width:940px) and (max-height:500px){
  /* Querformat: Die Kopfzeile nahm ein Fünftel der Höhe ein, jetzt ein Siebtel */
  .wrap.kopfgitter{padding-top:7px;padding-bottom:7px}
}
/* Zeichen und Symbole werden nicht gestaucht, wenn es eng wird. Auf 320
   Pixeln schrumpfte das Logo auf 46 Pixel, das Symbol im Knopf auf einen Strich. */
.brand img{max-width:none}
.btn svg,.kopf-anmelden svg{flex:none}
/* Sehr schmale Handys mit gefülltem Korb: Logo, Korb, Anmelden und Menü
   brauchen 368 Pixel. Dann steht Anmelden nur als Symbol da, der Name
   bleibt für Vorleseprogramme erhalten. */
@media screen and (max-width:374px){
  .kopfrechts:has(.kopfkorb) .kopf-anmelden{width:44px;min-width:44px;padding:0;gap:0;font-size:0}
  .kopfrechts:has(.kopfkorb) .kopf-anmelden svg{width:20px;height:20px}
}

/* --- Fuß --- */
@media screen and (max-width:900px){
  /* Impressum, Datenschutz, AGB: Tippfläche 44 statt 20 Pixel hoch */
  .legal-links{gap:0 22px}
  .legal-links a{display:inline-flex;align-items:center;min-height:44px}
  /* Unter 16 Pixeln zoomt das iPhone beim Antippen ins Feld */
  .fusssuche input{font-size:16px}
}

/* --- Eingabefelder: 16 Pixel, sonst zoomt das iPhone --- */
@media screen and (max-width:900px){
  #nb{font-size:16px}
}

/* --- Kleine Schrift, die etwas aussagt, mindestens 11 bis 12 Pixel ---
   Auch quer gehaltene Handys: Dort ist das Fenster breiter, die Schrift
   aber genauso klein wie hochkant. */
@media screen and (max-width:720px), screen and (max-width:940px) and (max-height:500px){
  .fw-n,.ivz-nr{font-size:12px}
  .filter-aktiv{font-size:12px;height:21px}
  .pk-nr{font-size:12px}
  .beitrag-neu,.preis-test,.aufmacher-marke{font-size:11px}
}

/* --- Größenfinder auf schmalen Handys ---
   Die engeren Abstände für bis 420 Pixel standen im Stil vor den Grundregeln
   und wurden von ihnen überschrieben. Auf 320 Pixeln blieben für die Zahl 18
   Pixel, „10“ war nur halb zu sehen. */
@media screen and (max-width:420px){
  .finder .ff-in{padding:0 8px}
  .finder .ff-in span{font-size:12px;padding-left:3px}
}

/* --- Typenschlüssel: Erklärung der Ziffern ---
   Die Spalte für die Ziffer war 74 Pixel breit, für den Text blieben auf 320
   Pixeln 128. Daraus wurden zwölf kurze Zeilen. */
@media screen and (max-width:480px){
  .tsl-erklaer div{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:12px 14px}
}
@media screen and (max-width:720px), screen and (max-width:940px) and (max-height:500px){
  .tsl-teil span{font-size:11px}
}

/* --- Abmelden im Konto: Tippfläche größer, ohne dass die Unterstreichung wandert --- */
.knopf-schlicht{position:relative}
.knopf-schlicht::before{content:"";position:absolute;inset:-10px -6px}

/* --- Lange Wörter brechen um, statt aus dem Bild zu laufen --- */
h1,h2,h3{overflow-wrap:break-word}

/* --- Kundenkonto: Angaben untereinander statt zweispaltig ---
   In der schmalen Spalte brach „Instandhaltung“ mitten im Wort. */
.kd-zeile b{word-break:normal;overflow-wrap:break-word}
@media screen and (max-width:480px){
  .kd-zeile{grid-template-columns:1fr;gap:1px}
}

/* --- Anfrage auf der Startseite: Nachricht mehrzeilig ---
   Am Computer so hoch wie die Felder daneben, auf dem Handy drei Zeilen. Größer
   ziehen geht in beiden Fällen. */
#nachricht{height:47px;min-height:47px;resize:vertical;line-height:1.3;display:block}
@media screen and (max-width:720px){#nachricht{height:96px}}

/* --- Abläufe in der Akademie ---
   Die Zeile für den Erklärtext hielt auf dem Handy 60 Pixel frei, auch bevor
   etwas lief. Jetzt erst, wenn dort Text steht. */
.artikel .anim-status:empty{min-height:0}

/* --- Sprungziele ---
   scroll-margin der Ziele und scroll-padding der Seite zählen zusammen.
   Kapitel landeten deshalb 200 Pixel unter dem oberen Rand statt knapp unter
   der Kopfzeile. */
.beitrag-text h2,#autor{scroll-margin-top:8px}
.katliste,#filter{scroll-margin-top:0}

/* --- Tippflächen, die zu klein waren --- */
@media screen and (max-width:900px){
  /* „Preis nach Anmeldung“ in der Kachel: Ein Fehltipp landete auf der Artikelseite */
  .preis-schloss{min-height:32px}
  /* Artikelnummern in der Crossreferenz: größer, ohne die Zeilen zu verschieben */
  .cr-nr{padding:4px 0;margin:-4px 0}
  /* Linklisten im Katalog und unter den Tool-Ergebnissen */
  .ktg-links a,.wz-links a{display:inline-block;padding:5px 0}
  .ktg-links,.wz-links{gap:2px}
  /* Einzelne Links im Kundenkonto */
  .vg-mehr a,.fk-klein a,.kontowechsel a{display:inline-block;padding:10px 0}
}

/* --- Pfeile bleiben am letzten Wort ---
   Als inline-block durfte der Pfeil allein in die nächste Zeile rutschen
   („22 Größen“ und darunter „→“). Ein geschütztes Leerzeichen hält ihn fest,
   die Bewegung beim Überfahren läuft jetzt über den Abstand. Bei .mat-link und
   .al-link steht der Pfeil in einer Flexzeile, dort kann das nicht passieren. */
.ktg-links a::after,.wz-links a::after,.tk-mehr::after,.ktg-tools b::after{
  content:"\00a0→";display:inline;margin-left:2px;transform:none!important;transition:margin-left .16s ease}
.ktg-links a:hover::after,.wz-links a:hover::after,.tool-karte:hover .tk-mehr::after,
.ktg-tools a:hover b::after{margin-left:6px}
@media (prefers-reduced-motion:reduce){
  .ktg-links a::after,.wz-links a::after,.tk-mehr::after,.ktg-tools b::after{transition:none}
}