/* ============================================================
   SILITECH kb-core.css — zentrales Stylesheet des kb-page-
   Designsystems ("CINEMATIC DEPTH INDEX") + .kb-article-Scope.

   SINGLE SOURCE OF TRUTH. Ersetzt die bisher pro View inline
   duplizierten <style>-Bloecke. Auslieferung: als oeffentliches
   ir.attachment unter /kb-assets/kb-core.<sha8>.css, verlinkt via
   website.custom_code_head (Marker KB-CORE:BEGIN/END).
   Deploy/Versionierung: scripts/kb_deploy.py (Hash im Dateinamen,
   immutable URLs, alte Versionen bleiben fuer Rollback).

   Quellen des Merges (2026-07-17):
   - proposed-structure/application_pages/elektronik-schuetzen.view.xml (Basis)
   - odoo-backups/view_7612_backlink_20260612T232144.html (Hub-Extras:
     kb-feat--link, kb-pcard, kb-bcard, kb-chip, kb-wzsearch, ...)
   - Neu: kb-table, kb-badge, kb-facts, kb-note/kb-tip, kb-toc, kb-ico,
     kb-anchors, kb-gloss/kb-term, .kb-article (Blog-Scope).

   WICHTIG — Theme-Fallen: Das Site-Theme setzt u.a.
   #wrapwrap h1..h6{color:#0074B6 !important} und #wrapwrap a{...}.
   Die #wrapwrap .kb-page ... !important-Regeln hier sind der
   funktionierende Schutz dagegen. NICHT entfernen.
   ============================================================ */

/* ============ SILITECH · CINEMATIC DEPTH INDEX ============ */
.kb-page{
  --brand:#0074B6; --deep:#004f7e; --dark:#001a2e; --ink:#0a1722;
  --cyan:#16B6FD; --cyan-light:#9fdcff; --paper:#fff; --soft:#f4f8fb;
  --text-secondary:#1a2a36;
  --line:rgba(10,23,34,.10); --line-d:rgba(255,255,255,.15);
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1280px; --pad:clamp(20px,5vw,64px);
  --shadow-soft:0 1px 2px rgba(10,23,34,.06), 0 22px 48px -22px rgba(0,79,126,.34);
  --shadow-lift:0 1px 2px rgba(10,23,34,.08), 0 38px 76px -26px rgba(0,79,126,.5), 0 0 0 1px rgba(22,182,253,.10);
  font-family:"Poppins",sans-serif;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.kb-page *{box-sizing:border-box;}
.kb-page .kb-wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.kb-page .kb-sec{position:relative;}

/* ---------- signature: index axis ---------- */
/* Signatur-Linien: .kb-idx::after und .kb-kick::before zeichnen beide eine Akzentlinie, Farbe vom Element geerbt (currentColor / var) */
.kb-page .kb-idx{
  position:absolute; top:clamp(38px,6vw,76px); left:var(--pad); z-index:3;
  font-family:var(--mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; font-weight:600; color:var(--brand);
  display:flex; align-items:center; gap:14px; opacity:.9;
}
.kb-page .kb-idx::after{content:""; width:clamp(26px,5vw,56px); height:1px; background:currentColor; display:block; opacity:.55;}
.kb-page .kb-idx.on-dark{color:var(--cyan);}

/* ---------- kicker ---------- */
.kb-page .kb-kick{
  display:inline-block; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--brand); margin:0 0 14px;
}
.kb-page .kb-bar{width:56px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--brand),var(--cyan)); margin:2px 0 26px;}
.kb-page .kb-cta .kb-bar{margin-left:auto; margin-right:auto;}
.kb-page .kb-kick.on-dark{color:var(--cyan-light);}
.kb-page .kb-kick--center{justify-content:center;}

/* ---------- section heads ---------- */
.kb-page .kb-head{max-width:780px; margin-bottom:clamp(40px,5vw,58px);}
.kb-page h2.kb-h2{
  font-size:clamp(30px,4.4vw,52px); line-height:1.04; font-weight:700;
  letter-spacing:-.02em; margin:0 0 16px;
}
/* Theme-Falle Override: #wrapwrap hX{color:#0074B6} wird hier neutralisiert */
#wrapwrap .kb-page h2.kb-h2{color:var(--brand) !important;}
/* text-white: Bootstrap-Klasse, weisse Headings auf dunklen Hintergruenden (z.B. .kb-hero, .kb-stats, .kb-know, .kb-cta) */
#wrapwrap .kb-page h2.kb-h2.text-white{color:#fff !important;}
#wrapwrap .kb-page h2.kb-h2::after{content:""; display:inline-block; width:.2em; height:.2em; border-radius:50%; background:radial-gradient(circle at 34% 30%, #6fd3ff, var(--cyan) 72%); margin-left:.08em; vertical-align:-.02em; box-shadow:0 0 .45em rgba(22,182,253,.5);}

#wrapwrap .kb-page h1.text-white{color:#fff !important;}
.kb-page .kb-lead{font-size:clamp(15px,1.5vw,18px); color:var(--text-secondary); margin:0; max-width:600px;}
.kb-page .kb-lead.on-dark{color:rgba(233,244,251,.84);}
.kb-page .kb-lead--center{margin:0 auto;}

/* ---------- buttons ---------- */
.kb-page .kb-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:15px;
  padding:16px 28px; border-radius:14px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; position:relative; line-height:1;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, border-color .35s, color .35s;
}
.kb-page .kb-btn .kb-ar{font-family:var(--mono); transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.kb-page .kb-btn:hover .kb-ar{transform:translateX(5px);}
.kb-page .kb-btn--light{
  background:linear-gradient(180deg,#fff,#eaf4fb); color:var(--brand);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 38px -14px rgba(0,79,126,.35);
}
.kb-page .kb-btn--light:hover{transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 26px 50px -16px rgba(22,182,253,.6);}
.kb-page .kb-btn--ghost{
  background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.50); /* hover stellt auf cyan um */
  backdrop-filter:blur(12px);
}
.kb-page .kb-btn--ghost:hover{transform:translateY(-3px); background:rgba(255,255,255,.14); border-color:rgba(22,182,253,.65);}
.kb-page .kb-btn--brand{
  background:linear-gradient(135deg,var(--brand),var(--deep)); color:#fff;
  box-shadow:0 18px 38px -14px rgba(0,79,126,.65), 0 1px 0 rgba(255,255,255,.22) inset;
}
.kb-page .kb-btn--brand:hover{transform:translateY(-3px); color:#fff; box-shadow:0 28px 54px -16px rgba(22,182,253,.6), 0 1px 0 rgba(255,255,255,.28) inset;}
.kb-page .kb-btn--outline{
  background:#fff; color:var(--brand); border-color:var(--line); box-shadow:var(--shadow-soft);
}
.kb-page .kb-btn--outline:hover{transform:translateY(-3px); border-color:rgba(22,182,253,.5); box-shadow:var(--shadow-lift);}
.kb-page .kb-link{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; color:var(--brand); font-size:15px;
}
.kb-page .kb-link .kb-ar{font-family:var(--mono); transition:transform .3s;}
.kb-page .kb-link:hover .kb-ar{transform:translateX(5px);}
.kb-page .kb-link.on-dark{color:var(--cyan);}

/* ================= HERO ================= */
.kb-page .kb-hero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--dark);
  min-height:90vh; display:flex; align-items:center;
}
.kb-page .kb-hero__img{
  position:absolute; inset:0; z-index:-3;
  background:url("/web/image/18885-f070a084/silitech-hero.webp") center 30%/cover no-repeat;
  transform:scale(1.06); animation:kbZoom 20s ease-out forwards;
}
@keyframes kbZoom{to{transform:scale(1);}}
.kb-page .kb-hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(105deg, rgba(0,26,46,.95) 0%, rgba(0,26,46,.80) 38%, rgba(0,79,126,.42) 70%, rgba(22,182,253,.14) 100%),
    radial-gradient(120% 90% at 14% 110%, rgba(0,116,182,.5), transparent 60%),
    linear-gradient(0deg, rgba(0,26,46,.92) 0%, rgba(0,26,46,0) 46%);
}
.kb-page .kb-hero__grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(22,182,253,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(22,182,253,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 22% 40%,#000,transparent 74%);
          mask-image:radial-gradient(120% 80% at 22% 40%,#000,transparent 74%);
}
.kb-page .kb-hero__glow{
  position:absolute; z-index:-1; width:640px; height:640px; right:-180px; top:-220px;
  background:radial-gradient(circle, rgba(22,182,253,.4), rgba(22,182,253,0) 65%);
  filter:blur(8px); pointer-events:none;
}
.kb-page .kb-hero__inner{position:relative; z-index:1; width:100%; padding:clamp(120px,15vw,170px) 0 clamp(110px,12vw,150px);}
.kb-page .kb-hero__content{max-width:780px;}
.kb-page .kb-hero .kb-kick{color:var(--cyan-light); animation:kbUp .8s .05s both;}
.kb-page h1.kb-h1{
  font-size:clamp(42px,6.6vw,84px); line-height:.98; font-weight:700;
  letter-spacing:-.035em; margin:0 0 24px; max-width:15ch;
  text-shadow:0 2px 44px rgba(0,0,0,.32);
  animation:kbUp .9s .14s both;
}
.kb-page h1.kb-h1 .kb-grad{
  background:linear-gradient(96deg,#7fd4ff 0%, var(--cyan) 55%, #d9f3ff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.kb-page .kb-hero__sub{
  font-size:clamp(16px,1.7vw,20px); color:rgba(255,255,255,.88); max-width:600px;
  margin:0 0 38px; line-height:1.65; animation:kbUp .95s .28s both;
}
.kb-page .kb-hero__cta{display:flex; flex-wrap:wrap; gap:16px; align-items:center; animation:kbUp 1s .4s both;}
@keyframes kbUp{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);}}

/* hero signal bar: three curated signals only (no stat duplication) */
.kb-page .kb-hero__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  border-top:1px solid var(--line-d); background:rgba(0,26,46,.34); backdrop-filter:blur(5px);
  animation:kbUp 1.1s .6s both;
}
.kb-page .kb-hero__meta .kb-wrap{display:flex; flex-wrap:wrap; gap:20px; align-items:center; padding-top:22px; padding-bottom:22px;}
.kb-page .kb-hsig{display:flex; align-items:center; gap:13px; color:rgba(255,255,255,.82); font-size:clamp(13px,1.4vw,14.5px); margin-right:24px;}
.kb-page .kb-hsig::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(22,182,253,.18); flex:none;}
.kb-page .kb-hsig b{color:#fff; font-weight:600;}

/* ================= KATEGORIEN (asymmetric, glass depth) ================= */
.kb-page .kb-cats{background:linear-gradient(180deg,#fff 0%, var(--soft) 100%); padding:clamp(96px,11vw,150px) 0 clamp(80px,9vw,120px);}
.kb-page .kb-cats__top{
  display:flex; justify-content:space-between; align-items:flex-end; gap:36px; flex-wrap:wrap;
  margin-bottom:clamp(40px,5vw,58px);
}
.kb-page .kb-cats__top .kb-head{margin-bottom:0;}
.kb-page .kb-cats__count{font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); white-space:nowrap; padding-bottom:8px;}
.kb-page .kb-cats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.kb-page .kb-cat{
  position:relative; display:block; overflow:hidden; isolation:isolate;
  border-radius:22px; min-height:300px; text-decoration:none; color:#fff;
  box-shadow:var(--shadow-soft); transform:translateY(0);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.kb-page .kb-cat.kb-span2{grid-column:span 2; min-height:340px;}
.kb-page .kb-cat:hover{transform:translateY(-8px); box-shadow:var(--shadow-lift);}
.kb-page .kb-cat__img{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.03); transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.kb-page .kb-cat:hover .kb-cat__img{transform:scale(1.12);}
.kb-page .kb-cat__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(0,26,46,.94) 0%, rgba(0,26,46,.5) 42%, rgba(0,26,46,.08) 74%, rgba(0,26,46,.2) 100%);
  transition:background .5s;
}
.kb-page .kb-cat:hover .kb-cat__veil{
  background:linear-gradient(0deg, rgba(0,79,126,.95) 0%, rgba(0,79,126,.5) 46%, rgba(0,26,46,.1) 80%);
}
/* gloss edge: permanent glass depth, visible without hover */
.kb-page .kb-cat::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:22px; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.06);
}
.kb-page .kb-cat__num{
  position:absolute; top:22px; left:24px; z-index:2;
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--cyan); font-weight:600;
}
.kb-page .kb-cat__num::before{content:""; display:block; width:26px; height:2px; background:var(--cyan); margin-bottom:10px; opacity:.85;}
.kb-page .kb-cat__go{
  position:absolute; top:18px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  transition:background .4s, border-color .4s, transform .4s;
}
.kb-page .kb-cat:hover .kb-cat__go{background:var(--cyan); border-color:var(--cyan); color:#012033; transform:rotate(-45deg);}
.kb-page .kb-cat__body{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:30px;}
/* Fallback vor h3-Theme-Falle (#wrapwrap hX{color:#0074B6}); #wrapwrap-Scope-Regel garantiert Weiss */
#wrapwrap .kb-page .kb-cat__body h3{color:#fff !important;}
.kb-page .kb-cat__body h3{
  font-size:clamp(19px,1.7vw,24px); font-weight:700; margin:0;
  line-height:1.14; letter-spacing:-.01em; text-shadow:0 1px 16px rgba(0,16,29,.5); overflow-wrap:break-word; hyphens:auto;
}
.kb-page .kb-cat__sub{
  margin:9px 0 0; color:rgba(255,255,255,.86); font-size:13.5px; line-height:1.5;
  text-shadow:0 1px 12px rgba(0,16,29,.6);
}

/* ================= ZAHLEN (dark brand band, plastic figures) ================= */
.kb-page .kb-stats{
  position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(120% 130% at 80% -20%, #0a3a5e 0%, var(--dark) 55%, #00101d 100%);
  padding:clamp(90px,10vw,130px) 0;
}
.kb-page .kb-stats__grid-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background-image:linear-gradient(rgba(22,182,253,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(22,182,253,.06) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(110% 90% at 70% 40%,#000,transparent 78%);
          mask-image:radial-gradient(110% 90% at 70% 40%,#000,transparent 78%);
}
.kb-page .kb-stats__glow{position:absolute; z-index:-1; width:560px; height:560px; left:-160px; bottom:-220px; background:radial-gradient(circle, rgba(22,182,253,.32), transparent 65%); filter:blur(6px);}
.kb-page .kb-stats__grid{display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(40px,5vw,56px); border-top:1px solid var(--line-d);}
.kb-page .kb-stat{position:relative; text-align:center; padding:38px 18px; border-right:1px solid var(--line-d);}
.kb-page .kb-stat:last-child{border-right:0;}
.kb-page .kb-stat strong{
  display:block; font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:700; line-height:1; letter-spacing:-.03em;
  background:linear-gradient(180deg, #e3f2ff 0%, #b8deff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.kb-page .kb-stat strong .kb-stat__plus{color:var(--cyan); -webkit-text-fill-color:var(--cyan);}
.kb-page .kb-stat span{display:block; margin-top:12px; font-family:var(--mono); font-size:clamp(10px,2vw,11.5px); letter-spacing:.16em; text-transform:uppercase; color:rgba(210,235,255,1);}

/* ================= WARUM (layered pillars, inline-svg badges) ================= */
.kb-page .kb-why{background:var(--soft); padding:clamp(96px,11vw,150px) 0;}
/* ============ WARUM SILITECH · PREMIUM LINE-ICON PILLARS ============ */
/* Edle Line-Icons in feinem Brand-Ring, geschichtete Tiefe, Glanzkante, ruhiger Hover */

.kb-page .kb-why__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  align-items:stretch;
}

/* ---- Karte: geschichtete Tiefe + Glanzkante oben ---- */
.kb-page .kb-pillar{
  position:relative; display:flex; flex-direction:column;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:34px 30px 32px;
  overflow:hidden; isolation:isolate;
  /* weicher Doppelschatten: enger Kontaktschatten + tiefer, weiter Abwurfschatten */
  box-shadow:
    0 1px 2px rgba(10,23,34,.05),
    0 2px 6px rgba(10,23,34,.04),
    0 28px 56px -30px rgba(0,79,126,.34);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),
             box-shadow .5s cubic-bezier(.2,.8,.2,1),
             border-color .5s ease;
}
/* feine Glanzkante oben (Top-Sheen), liegt ueber dem Rand */
.kb-page .kb-pillar::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:1px; z-index:2;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.9) 22%,
    rgba(255,255,255,.9) 78%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}
/* dezenter Cyan-Glow in der oberen Ecke, ruht fast unsichtbar, atmet beim Hover auf */
.kb-page .kb-pillar::after{
  content:""; position:absolute; top:-40%; right:-30%; width:70%; height:80%; z-index:0;
  background:radial-gradient(closest-side,rgba(22,182,253,.16),rgba(22,182,253,0) 70%);
  opacity:.5; transform:scale(.85);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.kb-page .kb-pillar > *{position:relative; z-index:1;}

/* ---- Kopfzeile: Ring-Icon links, grosser Index rechts ---- */
.kb-page .kb-pillar__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px;
}

/* feiner Brand-Ring: KEIN gefuelltes Quadrat, transparenter Kern, 1px-Ring */
.kb-page .kb-pillar__ring{
  --ring:56px;
  width:var(--ring); height:var(--ring); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand);
  background:
    radial-gradient(closest-side,rgba(0,116,182,.05),rgba(0,116,182,0) 78%);
  /* doppelter Ring: aeusserer Hairline-Schimmer + innerer Brand-Ring */
  box-shadow:
    inset 0 0 0 1px rgba(0,116,182,.28),
    0 0 0 5px rgba(0,116,182,.05),
    0 8px 18px -12px rgba(0,79,126,.45);
  transition:color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.kb-page .kb-pillar__ring svg{
  width:25px; height:25px; display:block; overflow:visible;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

/* grosser, ruhiger Index als Tiefen-Anker */
.kb-page .kb-pillar__idx{
  font-family:var(--mono); font-size:30px; font-weight:600;
  letter-spacing:.01em; line-height:1;
  color:transparent;
  background:linear-gradient(160deg,rgba(0,116,182,.22),rgba(0,79,126,.12));
  -webkit-background-clip:text; background-clip:text;
  transition:opacity .5s ease;
}

/* Kategorie-Tag im Mono-Stil (kleines Index-Label) */
.kb-page .kb-pillar__tag{
  display:inline-block; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--brand);
  margin-bottom:9px;
}

/* h3 Theme-Override (Theme-Falle: #wrapwrap hX{color:#0074B6 !important}) */
#wrapwrap .kb-page .kb-pillar h3{color:var(--ink) !important;}
.kb-page .kb-pillar h3{
  font-size:clamp(15px,2vw,19px); font-weight:700;
  margin:0 0 10px; line-height:1.22; letter-spacing:-.01em;
}
.kb-page .kb-pillar p{
  margin:0; font-size:14.5px; color:#2a3a48; line-height:1.62;
  flex:1 1 auto;
}

/* feine Akzentlinie unten: ruht kurz, faehrt beim Hover sanft aus */
.kb-page .kb-pillar__rule{
  display:block; height:2px; width:30px; margin-top:22px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--cyan));
  transform-origin:left center;
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}

/* ---- ruhiger Premium-Hover ---- */
.kb-page .kb-pillar:hover{
  transform:translateY(-8px);
  border-color:rgba(0,116,182,.22);
  box-shadow:
    0 1px 2px rgba(10,23,34,.06),
    0 2px 8px rgba(10,23,34,.05),
    0 46px 80px -34px rgba(0,79,126,.5),
    0 0 0 1px rgba(22,182,253,.12);
}
.kb-page .kb-pillar:hover::after{opacity:1; transform:scale(1);}
.kb-page .kb-pillar:hover .kb-pillar__ring{
  color:var(--deep);
  box-shadow:
    inset 0 0 0 1px rgba(0,116,182,.5),
    0 0 0 5px rgba(22,182,253,.12),
    0 12px 24px -12px rgba(0,79,126,.55);
}
.kb-page .kb-pillar:hover .kb-pillar__ring svg{transform:scale(1.06);}
.kb-page .kb-pillar:hover .kb-pillar__rule{width:54px;}

/* sanftes Fokus-Reveal fuer Tastaturnavigation */
.kb-page .kb-pillar:focus-within{transform:translateY(-8px);}
.kb-page .kb-pillar:focus-within .kb-pillar__rule{width:54px;}

@media (prefers-reduced-motion:reduce){
  .kb-page .kb-pillar,
  .kb-page .kb-pillar__ring,
  .kb-page .kb-pillar__ring svg,
  .kb-page .kb-pillar__rule,
  .kb-page .kb-pillar::after{transition:none;}
  .kb-page .kb-pillar:hover{transform:none;}
}

/* ---- responsive: 4 -> 2 -> 1 ---- */
@media (max-width:980px){
  .kb-page .kb-why__grid{grid-template-columns:repeat(2,1fr); gap:20px;}
}
@media (max-width:560px){
  .kb-page .kb-why__grid{grid-template-columns:1fr; gap:18px;}
  .kb-page .kb-pillar{padding:30px 26px 28px;}
}

/* ================= MARKEN ================= */
.kb-page .kb-brands{background:#fff; padding:clamp(90px,10vw,130px) 0;}
.kb-page .kb-brands__head{text-align:left; max-width:680px; margin:0 0 clamp(36px,4vw,52px);}
.kb-page .kb-brands__head .kb-kick{justify-content:flex-start; display:flex;}
.kb-page .kb-brands__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.kb-page .kb-brand{
  display:flex; align-items:center; justify-content:center; padding:clamp(24px,3vw,32px) clamp(20px,2vw,28px); min-height:118px;
  background:var(--soft); border:1px solid var(--line); border-radius:16px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .4s, opacity .4s;
}
.kb-page .kb-brand img{max-width:140px; max-height:50px; width:auto; height:auto; filter:grayscale(1); opacity:.6; transition:filter .4s, opacity .4s;}
.kb-page .kb-brand:hover{transform:translateY(-5px); background:#fff; box-shadow:var(--shadow-soft);}
.kb-page .kb-brand:hover img{filter:grayscale(0); opacity:1;}
.kb-page .kb-brands__cta{text-align:left; margin-top:clamp(34px,4vw,46px);}

/* ================= WISSEN (dark feature panel) ================= */
.kb-page .kb-know{background:var(--soft); padding:0 0 clamp(96px,11vw,150px);}
.kb-page .kb-know__panel{
  position:relative; isolation:isolate; overflow:hidden; border-radius:30px;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  box-shadow:var(--shadow-lift);
}
.kb-page .kb-know__media{position:relative; min-height:360px;}
.kb-page .kb-know__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.kb-page .kb-know__media::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(0,26,46,0) 35%, rgba(0,26,46,.6) 100%);}
.kb-page .kb-know__body{
  position:relative; padding:clamp(44px,5vw,68px);
  background:radial-gradient(120% 120% at 90% -10%, #0a3a5e 0%, var(--dark) 60%, #00101d 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:center;
}
.kb-page .kb-know__body .kb-kick{color:var(--cyan-light);}
/* Theme-Falle Override (#wrapwrap hX{color:#0074B6}); weisse h2 auf dunklem Panel */
#wrapwrap .kb-page .kb-know__body h2{color:#fff !important;}
.kb-page .kb-know__body p{color:rgba(233,244,251,.86); font-size:clamp(15px,1.5vw,18px); margin:0 0 30px; max-width:42ch;}

/* ================= CTA ================= */
.kb-page .kb-cta{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  background:radial-gradient(130% 120% at 50% -20%, #0a3a5e 0%, var(--dark) 55%, #00101d 100%);
  padding:clamp(96px,11vw,150px) 0;
}
.kb-page .kb-cta__glow{position:absolute; z-index:-1; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(22,182,253,.26), transparent 60%);}
/* Struktur am .kb-cta h2; Farbe (#fff) via #wrapwrap-Theme-Override */
.kb-page .kb-cta h2{margin:0 auto 18px; max-width:18ch;}
#wrapwrap .kb-page .kb-cta h2{color:#fff !important;}
.kb-page .kb-cta p{color:rgba(233,244,251,.86); font-size:clamp(15px,1.6vw,19px); margin:0 auto 36px; max-width:50ch;}
.kb-page .kb-cta .kb-cta__btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  .kb-page .kb-idx{display:none;}
  .kb-page .kb-cats__grid{grid-template-columns:repeat(2,1fr);}
  .kb-page .kb-stats__grid{grid-template-columns:repeat(2,1fr);}
  .kb-page .kb-stat:nth-child(2){border-right:0;}
  .kb-page .kb-stat{border-bottom:1px solid var(--line-d); padding-right:20px;}
  .kb-page .kb-brands__grid{grid-template-columns:repeat(2,1fr);}
  .kb-page .kb-know__panel{grid-template-columns:1fr;}
  .kb-page .kb-know__media{min-height:240px;}
}
@media (max-width:980px) and (min-width:769px){
  .kb-page .kb-brands__grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:768px){
  .kb-page .kb-cat.kb-span2{grid-column:span 2;}
}
@media (max-width:620px){
  .kb-page .kb-hero{min-height:auto; padding-top:clamp(80px,12vw,100px);}
  .kb-page .kb-cats__grid{grid-template-columns:1fr;}
  .kb-page .kb-cat.kb-span2{grid-column:span 1;}
  .kb-page .kb-stats__grid{grid-template-columns:1fr;}
  .kb-page .kb-stat{border-right:0;}
  .kb-page .kb-stat:last-child{border-bottom:0;}
  .kb-page .kb-brands__grid{grid-template-columns:repeat(2,1fr);}
  .kb-page .kb-hero__meta{position:static; backdrop-filter:none;}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  .kb-page *,
  .kb-page *::before,
  .kb-page *::after{
    animation:none !important;
    transition:none !important;
  }
  .kb-page .kb-hero__img{transform:none;}
}
/* Fokus-States (WCAG 2.4.7) */
.kb-page a:focus-visible,.kb-page button:focus-visible,.kb-page .kb-btn:focus-visible,.kb-page .kb-cat:focus-visible,.kb-page .kb-brand:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px;}



/* ---- Button-Textfarben gegen Theme-Linkfarbe (#wrapwrap a) absichern ---- */
#wrapwrap .kb-page .kb-btn--brand{color:#fff !important;}
#wrapwrap .kb-page .kb-btn--brand:hover{color:#fff !important;}
#wrapwrap .kb-page .kb-btn--ghost{color:#fff !important;}
#wrapwrap .kb-page .kb-btn--light{color:var(--brand) !important;}
#wrapwrap .kb-page .kb-btn--light:hover{color:var(--deep) !important;}
#wrapwrap .kb-page .kb-btn--outline{color:var(--brand) !important;}

/* ---- Kompakter Seitenkopf (innere Seiten, KEIN grosser Hero) ---- */
.kb-page .kb-pagehead{position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(120deg,#001a2e 0%,#003a63 52%,#0074B6 132%);
  padding:clamp(100px,13vw,158px) 0 clamp(54px,8vw,90px);}
.kb-page .kb-pagehead::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 120% at 86% -10%, rgba(22,182,253,.22), transparent 60%);}
.kb-page .kb-pagehead .kb-bc{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.66); margin:0 0 20px; display:flex; align-items:center; gap:10px;}
.kb-page .kb-pagehead .kb-bc a{color:rgba(255,255,255,.66); text-decoration:none; transition:color .2s;}
.kb-page .kb-pagehead .kb-bc a:hover{color:#fff;}
.kb-page .kb-pagehead .kb-bc .sep{opacity:.5;}
.kb-page .kb-pagehead h1{font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.06; font-weight:700;
  letter-spacing:-.025em; margin:0; max-width:18ch;}
#wrapwrap .kb-page .kb-pagehead h1{color:#fff !important;}
.kb-page .kb-pagehead h1 .kb-grad{background:linear-gradient(96deg,#7fd4ff,#16B6FD 60%,#d9f3ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.kb-page .kb-pagehead__lead{margin:20px 0 0; font-size:clamp(1.05rem,1.6vw,1.24rem); line-height:1.6;
  color:rgba(233,244,251,.86); max-width:640px;}
/* ---- Prose-Sektion ---- */
.kb-page .kb-prose-sec{background:var(--paper); padding:clamp(80px,10vw,130px) 0;}
.kb-page .kb-prose-sec.tint{background:var(--soft);}
.kb-page .kb-prose{max-width:780px; font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.8; color:var(--text-secondary); margin:0;}
.kb-page .kb-prose + .kb-prose{margin-top:1.1em;}
.kb-page .kb-prose strong{color:var(--ink); font-weight:600;}
/* ---- FAQ ---- */
.kb-page .kb-faq-sec{background:var(--paper); padding:clamp(80px,10vw,130px) 0;}
.kb-page .kb-faq{display:grid; gap:14px; max-width:880px;}
.kb-page .kb-faq details{background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 26px; box-shadow:var(--shadow-soft); transition:box-shadow .3s, border-color .3s;}
.kb-page .kb-faq details[open]{border-color:rgba(0,116,182,.25);}
.kb-page .kb-faq summary{list-style:none; cursor:pointer; padding:24px 0; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:1.04rem;}
.kb-page .kb-faq summary::-webkit-details-marker{display:none;}
.kb-page .kb-faq summary::after{content:"+"; font-family:var(--mono); color:var(--brand); font-size:1.5rem; line-height:1; transition:transform .3s;}
.kb-page .kb-faq details[open] summary::after{transform:rotate(45deg);}
.kb-page .kb-faq details > p{margin:0 0 24px; color:var(--text-secondary); line-height:1.7;}
/* ---- Checks-Liste ---- */
.kb-page .kb-checks{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; max-width:680px;}
.kb-page .kb-checks li{position:relative; padding-left:34px; color:var(--text-secondary); font-size:1.02rem; line-height:1.5;}
.kb-page .kb-checks li::before{content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--deep)); -webkit-mask:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M9%2016.2l-3.5-3.5L4%2014.2l5%205%2011-11-1.5-1.4z%22%2F%3E%3C%2Fsvg%3E') center/13px no-repeat; mask:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M9%2016.2l-3.5-3.5L4%2014.2l5%205%2011-11-1.5-1.4z%22%2F%3E%3C%2Fsvg%3E') center/13px no-repeat;}
/* ---- Zeitstrahl ---- */
.kb-page .kb-tl-sec{background:var(--paper); padding:clamp(80px,10vw,130px) 0;}
.kb-page .kb-tl{position:relative; max-width:820px; margin-top:8px; padding-left:36px;}
.kb-page .kb-tl::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--brand),var(--cyan));}
.kb-page .kb-tli{position:relative; padding:0 0 36px;}
.kb-page .kb-tli:last-child{padding-bottom:0;}
.kb-page .kb-tli::before{content:""; position:absolute; left:-36px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(0,116,182,.12);}
.kb-page .kb-tli__period{font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; color:var(--brand); font-weight:600;}
#wrapwrap .kb-page .kb-tli h3{color:var(--ink) !important;}
.kb-page .kb-tli h3{font-size:1.18rem; font-weight:700; margin:5px 0 8px; letter-spacing:-.01em;}
.kb-page .kb-tli p{margin:0; color:var(--text-secondary); line-height:1.65;}
/* ---- Feature-Bild-Karten (Produktgruppen mit Produktbild) ---- */
.kb-page .kb-featgrid-sec{background:var(--soft); padding:clamp(80px,10vw,130px) 0;}
.kb-page .kb-featgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; align-items:stretch;}
.kb-page .kb-feat{position:relative; height:100%; background:#fff; border:1px solid var(--line); border-radius:18px; padding:36px 30px 32px; overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;}
.kb-page .kb-feat::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg,var(--brand),var(--cyan)); transform:scaleX(.25); transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.kb-page .kb-feat:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.kb-page .kb-feat:hover::before{transform:scaleX(1);}
.kb-page .kb-feat__wm{position:absolute; top:18px; right:26px; font-family:var(--mono); font-size:3.1rem; font-weight:700; line-height:1; color:rgba(0,116,182,.07); pointer-events:none;}
#wrapwrap .kb-page .kb-feat h3{color:var(--ink) !important;}
.kb-page .kb-feat h3{position:relative; font-size:1.18rem; font-weight:700; margin:0 0 8px; letter-spacing:-.01em;}
.kb-page .kb-feat__tag{position:relative; color:var(--brand); font-weight:600; font-size:.95rem; margin:0 0 12px;}
.kb-page .kb-feat p{position:relative; color:var(--text-secondary); font-size:.95rem; line-height:1.6; margin:0;}

/* klickbare Text-Karte */
.kb-page a.kb-feat.kb-feat--link{text-decoration:none; color:inherit; display:flex; flex-direction:column;}
.kb-page .kb-feat__go{position:relative; margin-top:16px; font-family:var(--mono); color:var(--brand); font-weight:700; font-size:1.15rem; line-height:1; transition:transform .3s;}
.kb-page a.kb-feat--link:hover .kb-feat__go{transform:translateX(6px);}
/* ---- Seitenkopf mit Marken-Logo (weisse Karte ueber der H1) ---- */
.kb-page .kb-pagehead__logo{display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:14px; padding:14px 22px; margin:0 0 24px; box-shadow:0 10px 34px rgba(0,0,0,.20);}
.kb-page .kb-pagehead__logo img{height:42px; width:auto; max-width:240px; display:block;}
/* ---- Produkt-Karten: Bild oben, Text unten, voll lesbar (fuer Produktfotos) ---- */
.kb-page .kb-pcards-sec{background:var(--soft); padding:clamp(80px,10vw,130px) 0;}
.kb-page .kb-pcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; align-items:stretch;}
.kb-page .kb-pcard{display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; text-decoration:none; color:inherit;}
.kb-page a.kb-pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.kb-page .kb-pcard__img{aspect-ratio:16/10; background:#eef3f7 center/cover no-repeat; transform:scale(1); transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.kb-page a.kb-pcard:hover .kb-pcard__img{transform:scale(1.06);}
.kb-page .kb-pcard__body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
#wrapwrap .kb-page .kb-pcard__body h3{color:var(--ink) !important;}
.kb-page .kb-pcard__body h3{font-size:1.16rem; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; line-height:1.22;}
.kb-page .kb-pcard__body p{margin:0; color:var(--text-secondary); font-size:.95rem; line-height:1.6;}
.kb-page .kb-pcard__go{margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:gap .3s;}
.kb-page a.kb-pcard:hover .kb-pcard__go{gap:13px;}
/* ---- Marken-Karten: Logo (weisse Flaeche) oben, Text unten ---- */
.kb-page .kb-bcards-sec{background:var(--paper); padding:clamp(80px,10vw,130px) 0;}
.kb-page .kb-bcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; align-items:stretch;}
.kb-page .kb-bcard{display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; text-decoration:none; color:inherit;}
.kb-page a.kb-bcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.kb-page .kb-bcard__logo{height:108px; display:flex; align-items:center; justify-content:center; padding:24px 28px; border-bottom:1px solid var(--line); background:#fff;}
.kb-page .kb-bcard__logo img{max-height:48px; max-width:180px; width:auto; height:auto; object-fit:contain;}
.kb-page .kb-bcard__body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1;}
#wrapwrap .kb-page .kb-bcard__body h3{color:var(--ink) !important;}
.kb-page .kb-bcard__body h3{font-size:1.16rem; font-weight:700; margin:0 0 4px; letter-spacing:-.01em;}
.kb-page .kb-bcard__tag{color:var(--brand); font-weight:600; font-size:.92rem; margin:0 0 12px;}
.kb-page .kb-bcard__body p{margin:0; color:var(--text-secondary); font-size:.94rem; line-height:1.6;}
.kb-page .kb-bcard__go{margin-top:auto; padding-top:16px; font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:gap .3s;}
.kb-page a.kb-bcard:hover .kb-bcard__go{gap:13px;}
/* ---- Chips (Pill-Links fuer Branchen/Marken) ---- */
.kb-page .kb-chips-sec{background:var(--paper); padding:clamp(70px,9vw,110px) 0;}
.kb-page .kb-chips-sec.tint{background:var(--soft);}
.kb-page .kb-chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px;}
.kb-page .kb-chip{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.95rem; text-decoration:none; box-shadow:var(--shadow-soft); transition:transform .25s, box-shadow .25s, border-color .25s, color .25s;}
#wrapwrap .kb-page .kb-chip{color:var(--ink);}
.kb-page .kb-chip:hover{transform:translateY(-3px); border-color:var(--brand); color:var(--brand); box-shadow:var(--shadow-lift);}
#wrapwrap .kb-page .kb-chip:hover{color:var(--brand);}
.kb-page .kb-chip--accent{background:linear-gradient(120deg,var(--brand),var(--deep)); border-color:transparent; color:#fff;}
#wrapwrap .kb-page .kb-chip--accent{color:#fff;}
.kb-page .kb-chip--accent:hover{transform:translateY(-3px); color:#fff; border-color:transparent;}
#wrapwrap .kb-page .kb-chip--accent:hover{color:#fff;}
/* ---- Wissenszentrum-Suchfeld im Seitenkopf ---- */
.kb-page .kb-wzsearch{display:flex; gap:10px; max-width:580px; margin:28px 0 0;}
.kb-page .kb-wzsearch input{flex:1; padding:15px 18px; border:0; border-radius:12px; font-size:15px; font-family:inherit; box-shadow:0 8px 30px rgba(0,0,0,.18);}
.kb-page .kb-wzsearch button{border:0; cursor:pointer;}

/* ============================================================
   NEUE KOMPONENTEN (Redesign 2026-07) — aus bestehenden Tokens
   abgeleitet; bewusst genau diese sechs plus Artikel-Scope.
   ============================================================ */

/* ---- kb-table: echte Vergleichstabellen (ersetzt Inline-Style-Zellen) ---- */
.kb-page .kb-tablewrap, .kb-article .kb-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0; border-radius:14px; border:1px solid var(--line, rgba(10,23,34,.10)); box-shadow:0 1px 2px rgba(10,23,34,.06), 0 22px 48px -22px rgba(0,79,126,.34); background:#fff;}
.kb-page table.kb-table, .kb-article table.kb-table{border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem; background:#fff; margin:0;}
.kb-page .kb-table th, .kb-article .kb-table th{background:linear-gradient(180deg,#f4f8fb,#eaf2f8); color:#0a1722; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; text-align:left; padding:13px 16px; border-bottom:2px solid rgba(0,116,182,.25); white-space:nowrap;}
.kb-page .kb-table td, .kb-article .kb-table td{padding:12px 16px; border-bottom:1px solid rgba(10,23,34,.08); color:#1a2a36; line-height:1.55; vertical-align:top;}
.kb-page .kb-table tbody tr:nth-child(even) td, .kb-article .kb-table tbody tr:nth-child(even) td{background:#f8fbfd;}
.kb-page .kb-table tbody tr:last-child td, .kb-article .kb-table tbody tr:last-child td{border-bottom:0;}
.kb-page .kb-table td:first-child, .kb-article .kb-table td:first-child{font-weight:600; color:#0a1722;}
.kb-page .kb-table__note, .kb-article .kb-table__note{font-size:.88rem; color:#1a2a36; opacity:.85; margin:10px 0 0; font-style:italic;}

/* ---- kb-badge: Mini-Badges fuer Typ/Welt auf Karten ---- */
.kb-page .kb-badges{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; position:relative;}
.kb-page .kb-badge{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--brand,#0074B6); background:rgba(0,116,182,.08); border:1px solid rgba(0,116,182,.18); line-height:1.4; white-space:nowrap;}
.kb-page .kb-badge--world{color:#0d5c85; background:rgba(22,182,253,.10); border-color:rgba(22,182,253,.30);}
.kb-page .kb-badge--meta{color:#41566a; background:rgba(10,23,34,.05); border-color:rgba(10,23,34,.12);}

/* ---- kb-facts: "Das Wichtigste in Kuerze" / Produkt-Steckbrief ---- */
.kb-page .kb-facts, .kb-article .kb-facts{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%); border:1px solid rgba(10,23,34,.10); border-left:4px solid; border-image:linear-gradient(180deg,#0074B6,#16B6FD) 1; border-radius:0 18px 18px 0; padding:26px 30px 24px; margin:28px 0; box-shadow:0 1px 2px rgba(10,23,34,.05), 0 28px 56px -30px rgba(0,79,126,.34);}
.kb-page .kb-facts__title, .kb-article .kb-facts__title{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#0074B6; margin:0 0 14px; display:flex; align-items:center; gap:12px;}
.kb-page .kb-facts__title::after{content:""; flex:1; height:1px; background:rgba(0,116,182,.18);}
.kb-page .kb-facts ul, .kb-article .kb-facts ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.kb-page .kb-facts li, .kb-article .kb-facts li{position:relative; padding-left:26px; color:#1a2a36; font-size:.98rem; line-height:1.55;}
.kb-page .kb-facts li::before, .kb-article .kb-facts li::before{content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #6fd3ff, #16B6FD 72%); box-shadow:0 0 0 3px rgba(22,182,253,.14);}
.kb-page .kb-facts dl, .kb-article .kb-facts dl{margin:0; display:grid; grid-template-columns:minmax(150px,max-content) 1fr; gap:8px 22px;}
.kb-page .kb-facts dt, .kb-article .kb-facts dt{font-weight:600; color:#0a1722; font-size:.95rem;}
.kb-page .kb-facts dd, .kb-article .kb-facts dd{margin:0; color:#1a2a36; font-size:.95rem;}
@media (max-width:560px){ .kb-page .kb-facts dl, .kb-article .kb-facts dl{grid-template-columns:1fr; gap:2px 0;} .kb-page .kb-facts dd, .kb-article .kb-facts dd{margin-bottom:8px;} }

/* ---- kb-note / kb-tip: Hinweis- und Praxisboxen ---- */
.kb-page .kb-note, .kb-article .kb-note, .kb-page .kb-tip, .kb-article .kb-tip{position:relative; border-radius:0 14px 14px 0; padding:18px 22px 18px 24px; margin:22px 0; font-size:.97rem; line-height:1.65; color:#1a2a36; background:#f4f8fb; border-left:4px solid #0074B6;}
.kb-page .kb-tip, .kb-article .kb-tip{background:rgba(22,182,253,.07); border-left-color:#16B6FD;}
.kb-page .kb-note strong, .kb-article .kb-note strong, .kb-page .kb-tip strong, .kb-article .kb-tip strong{color:#0a1722;}
.kb-page .kb-note__label, .kb-article .kb-note__label{display:block; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#0074B6; margin-bottom:6px;}

/* ---- kb-toc: Inhaltsverzeichnis (Anker auf H2-IDs) ---- */
.kb-article .kb-toc, .kb-page .kb-toc{background:#f4f8fb; border:1px solid rgba(10,23,34,.10); border-radius:16px; padding:22px 26px; margin:26px 0 34px;}
.kb-article .kb-toc__title, .kb-page .kb-toc__title{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#0074B6; margin:0 0 12px;}
.kb-article .kb-toc ol, .kb-page .kb-toc ol{margin:0; padding:0 0 0 2px; list-style:none; counter-reset:kbtoc; column-width:280px; column-gap:36px;}
.kb-article .kb-toc li, .kb-page .kb-toc li{counter-increment:kbtoc; margin:0 0 8px; break-inside:avoid; font-size:.95rem; line-height:1.45;}
.kb-article .kb-toc li::before, .kb-page .kb-toc li::before{content:counter(kbtoc,decimal-leading-zero); font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; color:#0074B6; font-weight:600; margin-right:10px;}
.kb-article .kb-toc a, .kb-page .kb-toc a{color:#1a2a36; text-decoration:none; border-bottom:1px solid rgba(0,116,182,.22); transition:color .2s, border-color .2s;}
.kb-article .kb-toc a:hover, .kb-page .kb-toc a:hover{color:#0074B6; border-color:#0074B6;}

/* ---- kb-ico: Inline-SVG-Piktogramm-Slot (Stil der kb-pillar-Ring-Icons) ---- */
.kb-page .kb-ico{--icosize:52px; width:var(--icosize); height:var(--icosize); flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--brand,#0074B6); background:radial-gradient(closest-side,rgba(0,116,182,.05),rgba(0,116,182,0) 78%); box-shadow:inset 0 0 0 1px rgba(0,116,182,.28), 0 0 0 5px rgba(0,116,182,.05); margin-bottom:16px;}
.kb-page .kb-ico svg{width:24px; height:24px; display:block;}
.kb-page .kb-feat .kb-ico{position:relative;}
.kb-page .kb-ico--dark{color:#16B6FD; box-shadow:inset 0 0 0 1px rgba(22,182,253,.4), 0 0 0 5px rgba(22,182,253,.08);}

/* ---- Sektions-/Abstands-Modifier (ersetzen Inline-Styles) ---- */
.kb-page .kb-featgrid-sec.paper{background:var(--paper,#fff);}
.kb-page .kb-chips--follow{margin-top:clamp(26px,4vw,36px);}
.kb-page .kb-follow{margin-top:clamp(24px,3vw,30px);}
.kb-page .kb-kick--group{display:block; margin:26px 0 10px;}
.kb-page .kb-head + .kb-kick--group, .kb-page .kb-kick--group:first-child{margin-top:0;}

/* ---- Karten-Metazeile (Lesezeit etc.) + Beispiel-Liste in Nachschlage-Karten ---- */
.kb-page .kb-feat__meta{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#41566a;}
.kb-page .kb-feat__meta .kb-feat__go{margin-top:0;}
.kb-page .kb-feat__examples{position:relative; margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px;}
.kb-page .kb-feat__examples li{font-size:.9rem; color:#41566a; line-height:1.5; padding-left:18px; position:relative;}
.kb-page .kb-feat__examples li::before{content:"›"; position:absolute; left:0; color:#0074B6; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;}

/* ---- Anker-Chips-Leiste (FAQ-Kategorien, Glossar A-Z) ---- */
.kb-page .kb-anchors{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0;}
.kb-page .kb-anchor{display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30); color:#fff; font-weight:600; font-size:.9rem; text-decoration:none; transition:background .25s, border-color .25s, transform .25s; backdrop-filter:blur(8px);}
.kb-page .kb-anchor:hover{background:rgba(22,182,253,.25); border-color:rgba(22,182,253,.6); color:#fff; transform:translateY(-2px);}
.kb-page .kb-anchor.is-disabled{opacity:.35; pointer-events:none;}
.kb-page .kb-anchor--light{background:#fff; border-color:rgba(10,23,34,.10); color:#0a1722; box-shadow:0 1px 2px rgba(10,23,34,.06), 0 22px 48px -22px rgba(0,79,126,.34); backdrop-filter:none;}
.kb-page .kb-anchor--light:hover{border-color:#0074B6; color:#0074B6; background:#fff;}
#wrapwrap .kb-page .kb-anchor{color:#fff;}
#wrapwrap .kb-page .kb-anchor--light{color:#0a1722;}
#wrapwrap .kb-page .kb-anchor--light:hover{color:#0074B6;}

/* ---- Glossar-Begriffe ---- */
.kb-page .kb-gloss{max-width:880px; display:grid; gap:14px;}
.kb-page .kb-gloss__letter{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:700; color:rgba(0,116,182,.30); margin:34px 0 4px; scroll-margin-top:120px;}
.kb-page .kb-gloss__letter:first-child{margin-top:0;}
.kb-page .kb-term{background:#fff; border:1px solid rgba(10,23,34,.10); border-radius:14px; padding:20px 24px; box-shadow:0 1px 2px rgba(10,23,34,.06), 0 22px 48px -22px rgba(0,79,126,.34); scroll-margin-top:120px;}
#wrapwrap .kb-page .kb-term h3{color:#0a1722 !important;}
.kb-page .kb-term h3{font-size:1.05rem; font-weight:700; margin:0 0 8px; letter-spacing:-.01em;}
.kb-page .kb-term h3 .kb-term__abbr{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; color:#0074B6; font-weight:600; margin-left:8px; letter-spacing:.04em;}
.kb-page .kb-term p{margin:0; color:#1a2a36; font-size:.96rem; line-height:1.65;}
.kb-page .kb-term__more{display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:.88rem; font-weight:600; color:#0074B6; text-decoration:none;}
.kb-page .kb-term__more:hover{text-decoration:underline;}

/* ---- Sektions-Anker-Offset (Sticky-Header-sicher) ---- */
.kb-page [id]{scroll-margin-top:110px;}

/* ============================================================
   .kb-article — Scope fuer Blog-Artikel (blog.post.content).
   Blog-Inhalte sind kein QWeb: sie referenzieren NUR Klassen,
   das CSS kommt zentral aus dieser Datei (custom_code_head).
   ============================================================ */
.kb-article{font-family:"Poppins",sans-serif; color:#0a1722; line-height:1.75; font-size:1.02rem; -webkit-font-smoothing:antialiased;}
.kb-article p{margin:0 0 1.15em; color:#1a2a36;}
.kb-article strong{color:#0a1722; font-weight:600;}
#wrapwrap .kb-article h2{color:#0074B6 !important;}
.kb-article h2{font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; font-weight:700; letter-spacing:-.015em; margin:1.9em 0 .7em; scroll-margin-top:110px;}
.kb-article h2::after{content:""; display:block; width:52px; height:3px; border-radius:3px; background:linear-gradient(90deg,#0074B6,#16B6FD); margin-top:10px;}
#wrapwrap .kb-article h3{color:#0a1722 !important;}
.kb-article h3{font-size:1.16rem; font-weight:700; margin:1.5em 0 .5em; letter-spacing:-.01em;}
.kb-article ul, .kb-article ol{margin:0 0 1.2em; padding-left:1.4em;}
.kb-article li{margin:0 0 .45em;}
.kb-article a{color:#0074B6; text-decoration:none; border-bottom:1px solid rgba(0,116,182,.25); transition:border-color .2s;}
.kb-article a:hover{border-color:#0074B6;}
.kb-article .kb-lede{font-size:1.12rem; line-height:1.7; color:#1a2a36;}
/* Meta-Zeile am Artikelanfang (Kontext-Breadcrumb + Badges) */
.kb-article .kb-artmeta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 20px; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#41566a;}
.kb-article .kb-artmeta a{color:#0074B6; border-bottom:0; font-weight:600;}
.kb-article .kb-artmeta .sep{opacity:.45;}
.kb-article .kb-badge{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#0074B6; background:rgba(0,116,182,.08); border:1px solid rgba(0,116,182,.18); line-height:1.4; white-space:nowrap;}
/* Quellenblock */
.kb-article .kb-src{background:#f4f8fb; border:1px solid rgba(10,23,34,.10); border-radius:16px; padding:22px 26px; margin:34px 0; font-size:.92rem;}
.kb-article .kb-src__title{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#0074B6; margin:0 0 10px;}
.kb-article .kb-src ul{margin:0; padding-left:1.2em;}
.kb-article .kb-src li{margin:0 0 .35em; color:#1a2a36;}
.kb-article .kb-src p{margin:.6em 0 0; color:#41566a; font-size:.88rem;}
/* Inline-CTA am Artikelende */
.kb-article .kb-cta-inline{background:radial-gradient(130% 120% at 50% -20%, #0a3a5e 0%, #001a2e 55%, #00101d 100%); border-radius:20px; padding:34px 34px 36px; margin:38px 0 8px; text-align:center;}
#wrapwrap .kb-article .kb-cta-inline h2, .kb-article .kb-cta-inline h2{color:#fff !important; margin:0 0 10px; font-size:1.4rem;}
.kb-article .kb-cta-inline h2::after{display:none;}
.kb-article .kb-cta-inline p{color:rgba(233,244,251,.86); margin:0 auto 22px; max-width:52ch;}
.kb-article .kb-cta-inline .kb-btn{display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:15px; padding:15px 26px; border-radius:14px; text-decoration:none; border:0; background:linear-gradient(180deg,#fff,#eaf4fb); color:#0074B6; box-shadow:0 18px 38px -14px rgba(0,79,126,.5);}
#wrapwrap .kb-article .kb-cta-inline .kb-btn{color:#0074B6; border-bottom:0;}
.kb-article .kb-cta-inline .kb-btn:hover{transform:translateY(-2px);}
/* Weiterfuehrend-Block */
.kb-article .kb-related{border-top:1px solid rgba(10,23,34,.10); margin-top:34px; padding-top:22px; font-size:.95rem;}
.kb-article .kb-related__title{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#0074B6; margin:0 0 10px;}
.kb-article .kb-related p{margin:0 0 .4em;}
/* Tabellen im Artikel erben kb-table (oben definiert); Bilder/SVG fluid */
.kb-article img, .kb-article svg{max-width:100%; height:auto;}
.kb-article figure{margin:26px 0;}
.kb-article figcaption{font-size:.85rem; color:#41566a; margin-top:8px; text-align:center;}
/* Fokus-Sichtbarkeit im Artikel (WCAG 2.4.7) */
.kb-article a:focus-visible, .kb-article summary:focus-visible{outline:3px solid #16B6FD; outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){ .kb-article *{transition:none !important; animation:none !important;} }