/* ==========================================================================
   KI Werk Website-Schicht (kiwerk-site.css): Seitenaufbau der Innenseiten ueber dem Kit (kiwerk-ui.css).
   Gilt fuer: SEO-Seiten, Hilfe-Center, WhatsApp, Rechtsseiten, 404, Impressum-Weiterleitung.
   Die Startseite (public/index.html) traegt ihre Gestaltung inline und laedt diese Datei NICHT; die Innenseiten gleichen sich
   ihr an (Schrift, Kopf- und Fusszeile, Hero im Bauplan-Look, CTA-Logik), ohne sie zu veraendern.
   Regeln: NUR Tokens (var(--kw-...)), keine Rohfarben; Bausteine aus dem Kit; hier steht nur Anordnung (Raster, Abstaende,
   Reihenfolge) und was nur die Website braucht. Klassen dieser Schicht tragen den Praefix ws-.
   Eingebunden NACH kiwerk-ui.css:  <link rel="stylesheet" href="/assets/kiwerk-site.css?v=...">   Seite: <body class="kw">
   Erzeugt/gepflegt mit scripts/build-site-pages.py und scripts/build-helpcenter.py (Marke: scripts/site_chrome.py ASSET_VERSION).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schrift. Ueberschriften und Tasten in Space Grotesk wie auf der Startseite (OFL-Text liegt neben der Datei:
   fonts/space-grotesk-OFL.txt); Fliesstext bleibt in der Systemschrift. Geist-Gate (Entscheidung 29): Die Website bleibt bei der
   Systemschrift, bis die unveraenderte OFL.txt der Geist-Schrift neben den Schriften liegt; der Wechsel ist dann genau EINE
   Aenderung: die zwei Zeilen --kw-font und --kw-font-mono loeschen.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --kw-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kw-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ws-head:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ws-nav-h:72px;
  --ws-edge:48px;
}
@media (max-width:900px){:root{--ws-nav-h:64px;--ws-edge:20px}}
.kw h1,.kw h2,.kw h3,.kw-h1,.kw-h2,.kw-h3,.kw-display,.kw .kw-btn,.kw .kw-chip,.kw .kw-badge,.kw .kw-over,.kw-price__name,.kw summary{font-family:var(--ws-head)}
.kw .kw-badge,.kw .kw-over{font-family:var(--kw-font)}
.kw h1,.kw h2,.kw h3{hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
.kw .kw-btn{border-radius:var(--kw-r-pill)}
.kw .kw-btn--sm{border-radius:var(--kw-r-pill)}

/* --------------------------------------------------------------------------
   Grundlage
   -------------------------------------------------------------------------- */
html{scroll-padding-top:calc(var(--ws-nav-h) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
main:focus{outline:none}
.kw .kw-wrap{width:min(1280px,100% - 2*var(--ws-edge))}
.ws-sec{padding:96px 0}
.ws-sec--alt{background:var(--kw-surface)}
.ws-sec--sand{background:var(--kw-sand)}
.ws-sec--tight{padding:72px 0}
@media (max-width:980px){.ws-sec,.ws-sec--tight{padding:64px 0}}
@media (max-width:640px){.ws-sec,.ws-sec--tight{padding:48px 0}}
.ws-center{text-align:center}
.ws-nb,.nb{white-space:nowrap}
.ws-stack>*+*{margin-top:var(--ws-gap,16px)}
.ws-lead-2{font-size:var(--kw-fs-lg);line-height:1.6;color:var(--kw-fg-2);max-width:62ch}
.kw-card.kw-card--flush{--kw-pad:0}

/* Farbdisziplin: Orange gehoert der EINEN Hauptaktion je Ansicht (die persistente Kopfzeile traegt sie), dem Logo, dem Fokusring
   und dem kurzen Streifen der Ueberzeile. Textlinks sind Navy (hell) oder Weiss (dunkel) und unterstrichen. */
:root,.kw-light,.kw-card--next,.kw-card--sand,.kw-card__foot,.ws-sec--sand{--kw-link:var(--kw-fg);--kw-link-hover:var(--kw-fg-2)}
.kw-dark,.kw-card--navy{--kw-link:var(--kw-on-navy);--kw-link-hover:var(--kw-on-navy-2)}
.kw-medal:not(.kw-medal--navy):not(.kw-medal--sand) svg.kw-medal__ring{fill:var(--kw-surface-hover)}
.kw-medal:not(.kw-medal--navy):not(.kw-medal--sand){color:var(--kw-fg)}

/* --------------------------------------------------------------------------
   Kopfzeile (wie die Startseite): durchsichtig ueber dem dunklen Titelband, nach dem Scrollen hell mit Unschaerfe.
   Ohne Skript bleibt sie eine ruhige helle Leiste (die durchsichtige Variante gilt nur unter html.ws-js).
   Links: dieselben Anker wie auf der Startseite. Die eine orange Hauptaktion der Ansicht ist die Taste rechts.
   -------------------------------------------------------------------------- */
.ws-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in srgb,var(--kw-white) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--kw-line);transition:background var(--kw-t-slow) var(--kw-ease),box-shadow var(--kw-t-slow) var(--kw-ease)}
.ws-nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--ws-nav-h);padding:0 var(--ws-edge);max-width:1680px;margin-inline:auto}
.ws-nav__brand{display:inline-flex;align-items:center;min-height:var(--kw-tap);flex:none}
.ws-nav__logo{display:block;height:44px;width:auto}
@media (max-width:900px){.ws-nav__logo{height:38px}}
.ws-nav__logo--dark{display:none}
.ws-nav__links{display:flex;align-items:center;gap:clamp(4px,1.2vw,20px)}
.ws-nav__links a,.ws-nav__back{display:inline-flex;align-items:center;gap:6px;min-height:var(--kw-tap);padding:0 8px;font-size:15px;font-weight:500;color:var(--kw-fg-3);text-decoration:none;transition:color var(--kw-t-base) var(--kw-ease)}
.ws-nav__links a:hover,.ws-nav__back:hover{color:var(--kw-fg)}
/* aktueller Bereich (Hilfe-Seiten): dunkler, fett und ein Strich darunter; Zustand = Schrift + Strich, nicht nur Farbe */
.ws-nav__links a[aria-current]{color:var(--kw-fg);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.ws-nav__back{font-weight:600;white-space:nowrap}
.ws-nav__back .kw-icon{width:18px;height:18px}
@media (max-width:420px){.ws-nav__more{display:none}}
.ws-nav__right{display:flex;align-items:center;gap:12px}
/* Anmelden: Textlink fuer Bestandskunden (Kundenportal auf api.kiwerk.ai), links neben der Hauptaktion */
.ws-nav__login{display:inline-flex;align-items:center;min-height:var(--kw-tap);padding:0 8px;font-size:15px;font-weight:600;color:var(--kw-fg);text-decoration:none;white-space:nowrap;transition:color var(--kw-t-base) var(--kw-ease)}
.ws-nav__login:hover{color:var(--kw-fg-3)}
.ws-nav__cta{min-height:var(--kw-tap);padding:0 24px;font-size:14px;border-radius:4px}
.kw .ws-nav__cta{border-radius:4px}
.ws-nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:var(--kw-tap);height:var(--kw-tap);padding:12px 10px;margin-right:-10px;background:none;border:0;cursor:pointer;border-radius:var(--kw-r-md)}
.ws-nav__toggle span{display:block;height:2px;width:100%;border-radius:2px;background:var(--kw-fg);transition:transform var(--kw-t-base) var(--kw-ease),opacity var(--kw-t-fast)}
.ws-nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ws-nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.ws-nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ws-nav__panel{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;padding:6px var(--ws-edge) 22px;background:var(--kw-surface);border-bottom:1px solid var(--kw-line);box-shadow:var(--kw-sh-3)}
.ws-nav__panel[hidden]{display:none}
.ws-nav__panel a:not(.kw-btn){display:flex;align-items:center;min-height:56px;font-family:var(--ws-head);font-size:18px;font-weight:600;color:var(--kw-fg);text-decoration:none;border-bottom:1px solid var(--kw-line)}
.ws-nav__panel a[aria-current]:not(.kw-btn){box-shadow:inset 4px 0 0 var(--kw-fg);padding-left:14px}
.ws-nav__panelcta{margin-top:18px}
/* Bis 1180 px stehen die Links im Menue (die Leiste haette fuer Anmelden und die Hauptaktion sonst keinen Platz);
   bis 900 px uebernimmt die Handy-Leiste (ws-sticky) die Hauptaktion, Anmelden steht dann im Menue. */
@media (max-width:1180px){
  .ws-nav__links{display:none}
  .ws-nav__toggle{display:flex}
}
@media (max-width:900px){
  .ws-nav__cta,.ws-nav__login{display:none}
}
/* Links und Taste brechen nie um; zwischen 901 und 1180 px rueckt die Leiste enger (wie die kompakte Kopfzeile der Startseite) */
.ws-nav__links a,.ws-nav__cta{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){
  .ws-nav__in{gap:16px;padding:0 28px}
  .ws-nav__cta{padding:0 16px}
  .ws-nav__logo{height:38px}
}
@media (min-width:1181px) and (max-width:1320px){
  .ws-nav__in{gap:16px;padding:0 28px}
  .ws-nav__links{gap:0}
  .ws-nav__links a{padding:0 9px;font-size:14px}
  .ws-nav__login{padding:0 6px;font-size:14px}
  .ws-nav__cta{padding:0 16px}
  .ws-nav__logo{height:38px}
}
@media (min-width:1181px){.ws-nav__panel{display:none}}
/* durchsichtig ueber dem Titelband (nur mit Skript; das Skript nimmt die Klasse beim Scrollen und beim Oeffnen des Menues weg) */
.ws-js .ws-nav.is-over-hero{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ws-js .ws-nav.is-over-hero .ws-nav__logo--light{display:none}
.ws-js .ws-nav.is-over-hero .ws-nav__logo--dark{display:block}
.ws-js .ws-nav.is-over-hero .ws-nav__links a,.ws-js .ws-nav.is-over-hero .ws-nav__back{color:var(--kw-on-navy-2)}
.ws-js .ws-nav.is-over-hero .ws-nav__links a:hover,.ws-js .ws-nav.is-over-hero .ws-nav__back:hover{color:var(--kw-white)}
.ws-js .ws-nav.is-over-hero .ws-nav__links a[aria-current]{color:var(--kw-white)}
.ws-js .ws-nav.is-over-hero .ws-nav__login{color:var(--kw-white)}
.ws-js .ws-nav.is-over-hero .ws-nav__login:hover{color:var(--kw-on-navy-2)}
.ws-js .ws-nav.is-over-hero .ws-nav__toggle span{background:var(--kw-white)}
.ws-js .ws-nav.is-over-hero :focus-visible{outline-color:var(--kw-orange-bright)}
@media (prefers-reduced-motion:reduce){.ws-nav,.ws-nav__links a,.ws-nav__toggle span{transition:none}}
.kw-skip:focus{z-index:200}

/* --------------------------------------------------------------------------
   Handy-Leiste (scripts/site_chrome.py sticky_bar): bis 900 px die Hauptaktion unten am Rand, eingeblendet erst nach dem
   Titelband und am Schlussband wieder weg (MENU_JS). Versteckt per visibility, damit die Taste dann nicht per Tab erreichbar ist.
   -------------------------------------------------------------------------- */
.ws-sticky{display:none}
@media (max-width:900px){
  .ws-sticky{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--kw-navy);box-shadow:var(--kw-sh-3);transform:translateY(110%);visibility:hidden;transition:transform var(--kw-t-slow) var(--kw-ease),visibility 0s linear var(--kw-t-slow)}
  .ws-sticky.is-on{transform:none;visibility:visible;transition:transform var(--kw-t-slow) var(--kw-ease)}
  .ws-sticky__btn{flex:1;min-width:0;justify-content:center;text-align:center;padding-inline:12px;white-space:nowrap}
  .ws-sticky__note{flex:none;max-width:104px;font-size:12px;line-height:1.35;color:var(--kw-on-navy-2)}
  .ws-sticky__note b{display:block;font-size:13px;color:var(--kw-white)}
  /* ohne Skript gibt es kein Ein- und Ausblenden: dann steht die Leiste immer da */
  html:not(.ws-js) .ws-sticky{transform:none;visibility:visible}
  body.kw .ws-foot{padding-bottom:104px}
}
@media (max-width:379px){.ws-sticky__note{display:none}}
@media (prefers-reduced-motion:reduce){.ws-sticky,.ws-sticky.is-on{transition:none}}

/* --------------------------------------------------------------------------
   Titelband (Hero) der Innenseiten: Navy, Bauplan-Raster (ein Muster je Seite), orange Schein rechts oben, Text links,
   rechts ein Bild oder eine Beispielkarte. Die Kopfzeile liegt durchsichtig darueber.
   -------------------------------------------------------------------------- */
.ws-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--ws-nav-h) + 48px) 0 88px}
.ws-hero::before,.ws-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.ws-hero::before{background-image:linear-gradient(color-mix(in srgb,var(--kw-white) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--kw-white) 6%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--kw-white) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--kw-white) 3.5%,transparent) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;-webkit-mask-image:radial-gradient(ellipse 90% 85% at 66% 40%,var(--kw-white) 15%,transparent 75%);mask-image:radial-gradient(ellipse 90% 85% at 66% 40%,var(--kw-white) 15%,transparent 75%)}
.ws-hero::after{background:radial-gradient(900px 520px at 84% 22%,color-mix(in srgb,var(--kw-orange) 20%,transparent),transparent 62%)}
.ws-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center}
.ws-hero--text .ws-hero__grid{grid-template-columns:minmax(0,1fr)}
.ws-hero__tx{min-width:0}
.ws-hero .hc-breadcrumb,.ws-hero .ws-crumbs{margin:0 0 14px}
.ws-hero .kw-crumbs{color:var(--kw-on-navy-3)}
.ws-hero .kw-crumbs a{color:var(--kw-on-navy-2);text-decoration:none;padding:0 10px;margin:0 -10px}
.ws-hero .kw-crumbs a:hover{color:var(--kw-white);text-decoration:underline;text-underline-offset:3px}
.ws-hero .kw-crumbs [aria-current]{color:var(--kw-white)}
.ws-hero .kw-crumbs .kw-icon{color:var(--kw-on-navy-3)}
.ws-hero h1{margin-top:16px;font-size:clamp(2rem,1rem + 2.9vw,3.25rem);line-height:1.06;letter-spacing:-.035em;font-weight:700;color:var(--kw-white);text-wrap:balance;max-width:20ch}
.ws-hero--wide h1{max-width:24ch}
/* Lange Titel (siehe H1_LONG in scripts/build-site-pages.py): eine Stufe kleiner und breiter, damit das erste Bild nicht von fuenf Zeilen Ueberschrift beherrscht wird */
.ws-hero h1.ws-h1--long{font-size:clamp(1.75rem,.95rem + 2.4vw,2.75rem);line-height:1.08;max-width:none}
.ws-hero .ws-lead{margin-top:22px;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:56ch;color:var(--kw-on-navy-2)}
.ws-mark{color:var(--kw-orange);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.ws-hero__ctas{display:flex;flex-wrap:wrap;gap:var(--kw-target-gap);margin-top:30px}
.ws-hero__facts{display:grid;gap:10px;margin-top:30px;font-size:15px;color:var(--kw-on-navy-2)}
/* Preiszeile unter den Tasten (kanonischer Satz aus scripts/site_chrome.py PRICE_LINE): steht vor jeder Kartenangabe da */
.ws-hero__price{margin-top:16px;max-width:60ch;font-size:var(--kw-fs-sm);line-height:1.6;color:var(--kw-on-navy-2)}
.ws-hero__price strong{color:var(--kw-white)}
.ws-hero__price a{color:var(--kw-white);font-weight:600;text-underline-offset:3px}
.ws-end__price{margin-top:12px;font-size:var(--kw-fs-sm);color:var(--kw-on-navy-3)}
.ws-hero__more{margin-top:22px}
.ws-hero__more a{display:inline-flex;align-items:center;gap:6px;min-height:var(--kw-tap);font-weight:600;color:var(--kw-white);text-underline-offset:4px}
.ws-hero__more a:hover{color:var(--kw-on-navy-2)}
.ws-hero__more .kw-icon{width:18px;height:18px}
.ws-hero__facts li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.ws-hero__facts .kw-icon{flex:none;margin-top:2px;width:18px;height:18px;color:var(--kw-good)}
@media (max-width:1040px){.ws-hero__grid{grid-template-columns:minmax(0,1fr);gap:44px}.ws-hero h1,.ws-hero h1.ws-h1--long{max-width:none}}
@media (max-width:640px){.ws-hero{padding:calc(var(--ws-nav-h) + 28px) 0 64px}.ws-hero__ctas .kw-btn{flex:1 1 100%}}
.ws-hero--compact{padding-bottom:56px}
.ws-hero--compact h1{font-size:clamp(1.875rem,1.1rem + 2.4vw,2.875rem)}

/* Hero-Visuale: gekennzeichnete Beispiele (Beispielkarte mit erfundenen Daten, App-Bildschirmfotos mit Testdaten, Schema) */
.ws-visual{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center;min-width:0}
.ws-visual__note{max-width:44ch;text-align:center;font-size:14px;line-height:1.5;color:var(--kw-on-navy-3)}
.ws-draft{width:100%;max-width:460px;min-width:0;display:grid;gap:12px;padding:20px 20px 22px;border-radius:var(--kw-r-xl);background:var(--kw-bg);box-shadow:var(--kw-sh-3);border:1px solid var(--kw-line)}
.ws-draft__tag{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--kw-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
.ws-draft .kw-bubble{max-width:92%;font-size:15px}
.ws-draft .kw-bubble--me{background:var(--kw-navy);color:var(--kw-white)}
.ws-draft .kw-bubble--them:has(.kw-docchip){padding:6px;max-width:100%;align-self:stretch}
.ws-draft .kw-docchip{background:var(--kw-surface-2)}
@media (max-width:480px){.ws-draft .kw-docchip{flex-wrap:wrap}.ws-draft .kw-docchip__sum{flex:0 0 100%;padding-left:52px}}
.ws-draft .kw-approval{padding:14px 16px;gap:8px;box-shadow:var(--kw-sh-1)}
.ws-draft .kw-approval__title{font-size:17px}
.ws-draft .kw-approval__amount{font-size:26px}
/* Eingehende Anfrage in der Beispielkarte: Zeile mit Mail-Symbol, kein Chat-Beitrag (kommt von aussen) */
.ws-draft__in{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:var(--kw-r-lg);background:var(--kw-surface-2);border:1px solid var(--kw-line)}
.ws-draft__inico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--kw-r-md);background:var(--kw-surface);border:1px solid var(--kw-line);color:var(--kw-fg)}
.ws-draft__intx{display:grid;gap:2px;min-width:0;font-size:14.5px;line-height:1.45;color:var(--kw-fg-2)}
.ws-draft__intx b{font-family:var(--ws-head);font-size:15px;font-weight:650;color:var(--kw-fg)}
.ws-draft__actions{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--kw-target-gap);margin-top:2px}
.ws-draft__actions span{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--kw-r-pill);font-size:15px;font-weight:600;font-family:var(--ws-head);text-align:center}
.ws-draft__actions .is-main{background:var(--kw-strong-bg);color:var(--kw-strong-fg)}
.ws-draft__actions .is-side{border:1.5px solid var(--kw-btn-bd);color:var(--kw-fg)}
.ws-draft__actions .kw-icon{width:18px;height:18px}
.ws-flowcard{width:100%;max-width:480px;min-width:0;display:grid;gap:4px;padding:22px 22px 20px;border-radius:var(--kw-r-xl);background:var(--kw-bg);box-shadow:var(--kw-sh-3);border:1px solid var(--kw-line)}
.ws-flowcard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:10px;font-size:var(--kw-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
.ws-flowcard ol{display:grid;gap:0}
.ws-flowcard ol>li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding-bottom:18px}
.ws-flowcard ol>li:last-child{padding-bottom:0}
.ws-flowcard ol>li::before{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--kw-line-strong);border-radius:2px}
.ws-flowcard ol>li:last-child::before{display:none}
.ws-flowcard .kw-medal{--m:44px}
.ws-flowcard b{display:block;padding-top:2px;font-family:var(--ws-head);font-size:17px;line-height:1.3;font-weight:650;color:var(--kw-fg)}
.ws-flowcard span.ws-flowcard__t{display:block;margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--kw-fg-2)}
.ws-flowcard .kw-badge{margin-top:8px}
/* Beispiel-Bauakte (Titelband der Sanierungs-Seite): Titel plus Liste aus dem Kit */
.ws-filecard{gap:0}
.ws-filecard__t{display:grid;gap:2px;margin-bottom:6px}
.ws-filecard__t b{font-family:var(--ws-head);font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-filecard__t span{font-size:14.5px;line-height:1.45;color:var(--kw-fg-3)}
.ws-filecard .kw-list>li{padding:12px 0}

/* --------------------------------------------------------------------------
   Abschnitte der SEO-Seiten: Einstieg mit Bild, Aufgaben-Karten, Ablauf (Zeitleiste), "Was live ist", Fragen, Weiterlesen, Schlussband
   -------------------------------------------------------------------------- */
.ws-head{display:grid;gap:14px;max-width:760px;margin-bottom:48px}
.ws-head h2{font-size:clamp(1.75rem,1.05rem + 2.2vw,2.75rem);line-height:1.08;letter-spacing:-.032em;font-weight:700;color:var(--kw-fg);text-wrap:balance}
.ws-head p:not(.kw-over){font-size:var(--kw-fs-lg);line-height:1.6;color:var(--kw-fg-2);max-width:60ch}
.ws-head--center{margin-inline:auto;text-align:center;justify-items:center}
@media (max-width:640px){.ws-head{margin-bottom:32px}}
.ws-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.ws-intro--solo{grid-template-columns:minmax(0,760px)}
.ws-intro__tx{display:grid;gap:18px;align-content:start}
.ws-intro__tx h2{font-size:clamp(1.75rem,1.05rem + 2.2vw,2.75rem);line-height:1.08;letter-spacing:-.032em;font-weight:700;color:var(--kw-fg);text-wrap:balance}
.ws-checks{display:grid;gap:12px;margin-top:2px}
.ws-checks li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--kw-fg)}
.ws-checks .kw-icon{flex:none;color:var(--kw-good);margin-top:2px;stroke-width:2.25}
.ws-checkcard{--kw-pad:28px 30px 30px;display:grid;gap:18px;border-radius:var(--kw-r-xl);box-shadow:var(--kw-sh-2)}
.ws-checkcard__t{font-family:var(--ws-head);font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-checkcard .ws-checks{margin-top:0;gap:14px}
.ws-fig{position:relative;margin:0;overflow:hidden;border-radius:var(--kw-r-xl);border:1px solid var(--kw-line);background:var(--kw-surface-2);box-shadow:var(--kw-sh-2)}
.ws-fig img{display:block;width:100%;height:auto;aspect-ratio:1408/768;object-fit:cover}
.ws-figcap{position:absolute;left:14px;bottom:14px;padding:4px 12px;border-radius:var(--kw-r-pill);background:var(--kw-surface);color:var(--kw-fg-2);font-size:13px;font-weight:600;line-height:1.4;border:1px solid var(--kw-line)}
@media (max-width:980px){.ws-intro{grid-template-columns:minmax(0,1fr);gap:36px}}

.ws-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ws-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ws-card{display:grid;gap:12px;align-content:start;--kw-pad:26px 26px 28px;transition:transform var(--kw-t-base) var(--kw-ease),box-shadow var(--kw-t-base) var(--kw-ease)}
.ws-card:hover{transform:translateY(-2px);box-shadow:var(--kw-sh-2)}
.ws-card .kw-medal{--m:52px;margin-bottom:4px}
.ws-card h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-card p{font-size:16px;line-height:1.6;color:var(--kw-fg-2)}
@media (max-width:1040px){.ws-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  /* Handy: die Karten werden eine zusammenhängende Liste mit Haarlinien (kürzer, ruhiger) */
  .ws-cards,.ws-cards--2{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--kw-line);border-radius:var(--kw-r-lg);background:var(--kw-surface);box-shadow:var(--kw-sh-1);overflow:hidden}
  .ws-card.kw-card{border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--kw-line);background:none}
  .ws-card.kw-card:last-child{border-bottom:0}
  .ws-card{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;row-gap:8px;--kw-pad:16px 18px 18px}
  .ws-card .kw-medal{--m:44px;margin:0}
  .ws-card p{grid-column:1/-1;font-size:15.5px}
  .ws-card:hover{transform:none;box-shadow:var(--kw-sh-1)}
}
@media (prefers-reduced-motion:reduce){.ws-card{transition:none}.ws-card:hover{transform:none}}

/* Ablauf: Zeitleiste. Desktop waagerecht mit durchgehender Linie, Handy senkrecht. */
.ws-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:ws-step}
.ws-steps>li{position:relative;display:grid;gap:8px;align-content:start;padding-top:64px}
.ws-steps>li::before{content:"";position:absolute;left:52px;right:-28px;top:25px;height:2px;background:var(--kw-line-strong)}
.ws-steps>li:last-child::before{display:none}
.ws-steps__n{position:absolute;left:0;top:0;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--kw-strong-bg);color:var(--kw-strong-fg);font-family:var(--ws-head);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 0 0 6px var(--kw-bg)}
.ws-sec--alt .ws-steps__n{box-shadow:0 0 0 6px var(--kw-surface)}
.ws-steps h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-steps p{font-size:16px;line-height:1.6;color:var(--kw-fg-2)}
@media (max-width:1040px){.ws-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}.ws-steps>li:nth-child(2)::before{display:none}}
@media (max-width:640px){
  .ws-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .ws-steps>li{padding:0 0 28px 72px;min-height:52px}
  .ws-steps>li::before{display:block;left:25px;right:auto;top:56px;bottom:4px;width:2px;height:auto}
  .ws-steps>li:nth-child(2)::before{display:block}
  .ws-steps>li:last-child{padding-bottom:0}
  .ws-steps>li:last-child::before{display:none}
  .ws-steps h3{padding-top:12px}
}

/* "Was live ist": drei Zustaende der Anbindung, je mit Symbol und Wort (Farbe allein sagt nichts) */
.ws-scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ws-scope__it{display:grid;gap:12px;align-content:start;padding:24px 24px 26px;border-radius:var(--kw-r-xl);background:var(--kw-surface);border:1px solid var(--kw-line);box-shadow:var(--kw-sh-1)}
.ws-scope__it .kw-badge{justify-self:start;min-height:32px;padding:0 14px;font-size:15px}
.ws-scope__it .kw-badge .kw-icon{width:16px;height:16px}
.ws-scope__it p{font-size:16px;line-height:1.6;color:var(--kw-fg-2)}
.ws-scope__it--plan{border-style:dashed;border-color:var(--kw-line-strong);box-shadow:none;background:var(--kw-surface-2)}
@media (max-width:900px){.ws-scope{grid-template-columns:minmax(0,1fr);gap:12px}.ws-scope__it{padding:18px 18px 20px}}

/* Fragen */
.ws-faqs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.ws-faqs__head{position:sticky;top:calc(var(--ws-nav-h) + 32px);display:grid;gap:14px}
.ws-faqs__head h2{font-size:clamp(1.75rem,1.05rem + 2.2vw,2.75rem);line-height:1.08;letter-spacing:-.032em;font-weight:700;color:var(--kw-fg);text-wrap:balance}
.ws-faqs__note{max-width:34ch;font-size:16px;line-height:1.6;color:var(--kw-fg-2)}
.ws-faqs__more{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:var(--kw-tap);font-family:var(--ws-head);font-size:16px;font-weight:600;color:var(--kw-link);text-decoration:underline;text-underline-offset:3px}
.ws-faqs__more:hover{color:var(--kw-link-hover)}
.ws-faqs__more .kw-icon{width:18px;height:18px;transition:transform var(--kw-t-base) var(--kw-ease)}
.ws-faqs__more:hover .kw-icon{transform:translateX(3px)}
.ws-faqs .kw-disclosure>summary{font-family:var(--ws-head);font-size:18px;letter-spacing:-.01em;min-height:var(--kw-tap-xl);padding:14px 12px 14px 22px}
.ws-faqs .kw-disclosure__chev{display:grid;place-items:center;width:var(--kw-tap);height:var(--kw-tap)}
.ws-faqs .kw-disclosure__body{max-width:none;padding:18px 22px 22px}
.ws-faqs .kw-disclosure__body p{font-size:16.5px;line-height:1.65}
@media (max-width:980px){.ws-faqs{grid-template-columns:minmax(0,1fr);gap:28px}.ws-faqs__head{position:static}}
@media (max-width:640px){.ws-faqs .kw-disclosure>summary{font-size:17px;padding:12px 6px 12px 16px}.ws-faqs .kw-disclosure__body{padding:14px 16px 18px}}

/* --------------------------------------------------------------------------
   Abschnittsvarianten der SEO-Seiten (Stufe 3, Runde 3): jede Seite setzt ihre Aussagen anders, damit die fuenf Seiten nicht dasselbe
   Geruest tragen. Gleiche Tokens, gleiche Bausteine; nur Anordnung. Mobil immer eine Spalte.
   -------------------------------------------------------------------------- */
.ws-intro--tiles{align-items:start}
.ws-tilebox{display:grid;gap:14px}
.ws-tilebox__t{font-size:var(--kw-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
.ws-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.ws-tiles li{display:flex;gap:12px;align-items:flex-start;padding:18px 18px 20px;border:1px solid var(--kw-line);border-radius:var(--kw-r-lg);background:var(--kw-surface);box-shadow:var(--kw-sh-1);font-size:16px;line-height:1.5;color:var(--kw-fg);min-width:0;overflow-wrap:anywhere}
.ws-tiles .kw-icon{flex:none;margin-top:2px;color:var(--kw-good);stroke-width:2.25}
@media (min-width:981px){.ws-intro--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.ws-intro--flip .ws-fig{order:-1}}

/* Zeitleiste: Titel oben, darunter die Schritte an senkrechten Linien (Zahl oder Medaillon als Marke). Desktop: zwei Spalten, erst die linke,
   dann die rechte von oben nach unten; beide Spalten teilen sich die Zeilen (--rows aus dem Generator). Handy: eine Spalte. */
.ws-lane{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.ws-lane__head{display:grid;gap:14px;max-width:780px}
.ws-lane__head h2{font-size:clamp(1.75rem,1.05rem + 2.2vw,2.75rem);line-height:1.08;letter-spacing:-.032em;font-weight:700;color:var(--kw-fg);text-wrap:balance}
.ws-lane__head p:not(.kw-over){max-width:56ch;font-size:var(--kw-fs-lg);line-height:1.6;color:var(--kw-fg-2)}
.ws-lane__list{display:grid;column-gap:80px}
.ws-lane__it{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 22px;padding-bottom:38px}
.ws-lane__it.is-last{padding-bottom:0}
.ws-lane__it::before{content:"";position:absolute;left:25px;top:60px;bottom:8px;width:2px;border-radius:2px;background:var(--kw-line-strong)}
.ws-lane__it.is-last::before{display:none}
@media (min-width:981px){
  .ws-lane__list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,3),auto)}
  .ws-lane__it.is-colend{padding-bottom:0}
  .ws-lane__it.is-colend::before{display:none}
}
.ws-lane__n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--kw-strong-bg);color:var(--kw-strong-fg);font-family:var(--ws-head);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 0 0 6px var(--kw-bg)}
.ws-sec--alt .ws-lane__n{box-shadow:0 0 0 6px var(--kw-surface)}
.ws-lane .kw-medal{--m:52px;box-shadow:none}
.ws-lane h3{padding-top:13px;font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-lane__it p{margin-top:6px;font-size:16.5px;line-height:1.6;color:var(--kw-fg-2);max-width:56ch}
@media (max-width:980px){.ws-lane{gap:32px}}
@media (max-width:640px){.ws-lane__it{gap:0 16px;padding-bottom:30px}}

/* Dunkles Band mit Schiene: Ablauf als vier Stationen auf einer Linie (Bauplan-Raster wie Titel- und Schlussband) */
.ws-band{position:relative;isolation:isolate;overflow:hidden}
.ws-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--kw-white) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--kw-white) 5%,transparent) 1px,transparent 1px);background-size:120px 120px;-webkit-mask-image:radial-gradient(ellipse 80% 120% at 15% 50%,var(--kw-white) 10%,transparent 70%);mask-image:radial-gradient(ellipse 80% 120% at 15% 50%,var(--kw-white) 10%,transparent 70%)}
.ws-band .ws-head{margin-bottom:56px}
.ws-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-rail>li{position:relative;display:grid;gap:10px;align-content:start;padding-right:32px}
.ws-rail>li::before{content:"";position:absolute;left:26px;right:0;top:25px;height:2px;background:var(--kw-line-strong)}
.ws-rail>li:last-child::before{display:none}
.ws-rail__n{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:50%;background:var(--kw-strong-bg);color:var(--kw-strong-fg);font-family:var(--ws-head);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.ws-rail h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-rail p{font-size:16px;line-height:1.6;color:var(--kw-fg-2)}
@media (max-width:900px){
  .ws-rail{grid-template-columns:minmax(0,1fr)}
  .ws-rail>li{padding:0 0 30px 74px;min-height:52px}
  .ws-rail>li::before{left:25px;right:auto;top:56px;bottom:4px;width:2px;height:auto}
  .ws-rail>li:last-child{padding-bottom:0}
  .ws-rail__n{position:absolute;left:0;top:0;margin:0}
  .ws-rail h3{padding-top:13px}
  .ws-band .ws-head{margin-bottom:36px}
}

/* Eigenschaften ohne Karten: vier Spalten unter einer kraeftigen Linie (Handy: Zeilen mit Haarlinie) */
.ws-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.ws-feats>li{display:grid;gap:10px;align-content:start;padding-top:26px;border-top:3px solid var(--kw-fg)}
.ws-feats .kw-medal{--m:52px;margin-bottom:6px}
.ws-feats h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-feats p{font-size:16px;line-height:1.6;color:var(--kw-fg-2)}
@media (max-width:1040px){.ws-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
@media (max-width:640px){
  .ws-feats{grid-template-columns:minmax(0,1fr);gap:0;border-bottom:1px solid var(--kw-line-strong)}
  .ws-feats>li{grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:20px 0 22px;border-top:1px solid var(--kw-line-strong)}
  .ws-feats .kw-medal{--m:44px;grid-row:1/span 2;margin:0}
  .ws-feats p{grid-column:2}
}

/* Hauptbuch: Titel und Aussage in einer Zeile, Haarlinie dazwischen (Handy: untereinander) */
.ws-ledger{display:grid;border-bottom:1px solid var(--kw-line-strong)}
.ws-ledger>li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px 48px;align-items:center;padding:26px 0;border-top:1px solid var(--kw-line-strong)}
.ws-ledger__t{display:flex;align-items:center;gap:16px;min-width:0}
.ws-ledger .kw-medal{--m:44px;flex:none}
.ws-ledger h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-ledger p{max-width:58ch;font-size:17px;line-height:1.6;color:var(--kw-fg-2)}
@media (max-width:760px){.ws-ledger>li{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0}}

/* Tabelle: Schritt, was dazugehoert, Stand (Wort plus Symbol). Handy: je Zeile ein Block. */
.ws-compare-wrap{overflow:hidden;border:1px solid var(--kw-line);border-radius:var(--kw-r-xl);background:var(--kw-surface);box-shadow:var(--kw-sh-1)}
.ws-compare{width:100%;border-collapse:separate;border-spacing:0;text-align:left}
.ws-compare thead th{padding:14px 26px;background:var(--kw-surface-2);border-bottom:1px solid var(--kw-line);font-size:var(--kw-fs-xs);letter-spacing:.07em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3);text-align:left}
.ws-compare tbody th,.ws-compare td{padding:24px 26px;vertical-align:top;text-align:left;border-bottom:1px solid var(--kw-line)}
.ws-compare tbody tr:last-child>*{border-bottom:0}
.ws-compare tbody th{width:27%}
.ws-compare__t{display:flex;align-items:center;gap:14px;font-family:var(--ws-head);font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:650;color:var(--kw-fg)}
.ws-compare .kw-medal{--m:44px;flex:none}
.ws-compare td{font-size:16.5px;line-height:1.6;color:var(--kw-fg-2)}
.ws-compare td:last-child{width:1%;white-space:nowrap}
.ws-compare tr.is-plan>*{background:var(--kw-surface-2)}
@media (max-width:760px){
  .ws-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ws-compare,.ws-compare tbody,.ws-compare tr,.ws-compare tbody th,.ws-compare td{display:block;width:auto}
  .ws-compare tbody tr{padding:20px 18px 22px;border-bottom:1px solid var(--kw-line)}
  .ws-compare tbody tr:last-child{border-bottom:0}
  .ws-compare tbody th,.ws-compare td{padding:0;border:0;width:auto}
  .ws-compare td{margin-top:12px;font-size:16px}
  .ws-compare td:last-child{width:auto;white-space:normal;margin-top:14px}
  .ws-compare tr.is-plan>*{background:none}
  .ws-compare tbody tr.is-plan{background:var(--kw-surface-2)}
}

/* Abgrenzung in Varianten: Zeilen in einer Tafel, Spalten mit Linien, Kette mit Pfeilen, grosse Aussage plus Stapel */
.ws-scope--rows{grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border:1px solid var(--kw-line);border-radius:var(--kw-r-xl);background:var(--kw-surface);box-shadow:var(--kw-sh-1)}
.ws-scope--rows .ws-scope__it{grid-template-columns:210px minmax(0,1fr);align-items:center;gap:8px 32px;padding:24px 30px;border:0;border-top:1px solid var(--kw-line);border-radius:0;background:none;box-shadow:none}
.ws-scope--rows .ws-scope__it:first-child{border-top:0}
.ws-scope--rows .ws-scope__it--plan{background:var(--kw-surface-2)}
.ws-scope--rows .ws-scope__it p{font-size:17px}
.ws-scope--ruled{gap:0}
.ws-scope--ruled .ws-scope__it{gap:16px;padding:4px 32px 6px;border:0;border-left:1px solid var(--kw-line-strong);border-radius:0;background:none;box-shadow:none}
.ws-scope--ruled .ws-scope__it:first-child{padding-left:0;border-left:0}
.ws-scope--ruled .ws-scope__it:last-child{padding-right:0}
.ws-scope--ruled .ws-scope__it--plan{border-left-style:dashed}
.ws-scope--ruled .ws-scope__it p{font-size:18px;line-height:1.55;color:var(--kw-fg)}
.ws-scope--chain{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0 14px}
.ws-scope__arrow{display:grid;place-items:center;color:var(--kw-fg-3)}
.ws-scope__arrow .kw-icon{width:30px;height:30px}
.ws-scope__it--end{border:2px solid var(--kw-fg);background:var(--kw-surface)}
.ws-scope--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.ws-scope__lead{display:grid;gap:22px;align-content:center;padding:40px 40px 44px;border-radius:var(--kw-r-xl)}
.ws-scope__lead .kw-badge{justify-self:start;min-height:32px;padding:0 14px;font-size:15px}
.ws-scope__lead .kw-badge .kw-icon{width:16px;height:16px}
.ws-scope__lead p{max-width:28ch;font-family:var(--ws-head);font-size:clamp(1.375rem,1.05rem + 1.1vw,1.875rem);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--kw-fg)}
.ws-scope__stack{display:grid;gap:20px;align-content:stretch}
.ws-scope__stack .ws-scope__it{align-content:center}
@media (max-width:900px){
  .ws-scope--rows .ws-scope__it{grid-template-columns:minmax(0,1fr);padding:18px 18px 20px}
  .ws-scope--ruled{gap:0}
  .ws-scope--ruled .ws-scope__it,.ws-scope--ruled .ws-scope__it:first-child,.ws-scope--ruled .ws-scope__it:last-child{padding:20px 0;border-left:0;border-top:1px solid var(--kw-line-strong)}
  .ws-scope--ruled .ws-scope__it:first-child{border-top:0;padding-top:0}
  .ws-scope--ruled .ws-scope__it--plan{border-top-style:dashed}
  .ws-scope--chain{grid-template-columns:minmax(0,1fr);gap:0}
  .ws-scope__arrow{padding:6px 0}
  .ws-scope__arrow .kw-icon{rotate:90deg}
  .ws-scope--split{grid-template-columns:minmax(0,1fr)}
  .ws-scope__lead{padding:26px 22px 30px}
  .ws-scope__stack{gap:12px}
}

/* Fragen in Varianten: Titel mittig ueber einer schmalen Liste; Titel oben ueber zwei Spalten */
.ws-faqs--center{grid-template-columns:minmax(0,840px);justify-content:center;gap:36px}
.ws-faqs--center .ws-faqs__head{position:static;justify-items:center;text-align:center}
.ws-faqs--center .ws-faqs__note{max-width:52ch}
.ws-faqs--center .ws-faqs__more{justify-self:center}
.ws-faqs--grid{grid-template-columns:minmax(0,1fr);gap:32px}
.ws-faqs--grid .ws-faqs__head{position:static}
.ws-faqs--grid .ws-faqs__note{max-width:60ch}
.ws-faqs--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"list head"}
.ws-faqs--flip .ws-faqs__head{grid-area:head}
.ws-faqs--flip .kw-disclosures{grid-area:list}
@media (max-width:980px){.ws-faqs--flip{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list"}}
.ws-faqs__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;align-items:start}
@media (max-width:980px){.ws-faqs--grid .ws-faqs__cols{grid-template-columns:minmax(0,1fr)}.ws-faqs__cols{gap:12px}}

/* Weiterlesen: die anderen Seiten und passende Hilfe-Artikel (nur echte, bestehende Ziele) */
.ws-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ws-rel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;min-height:var(--kw-tap-xl);padding:18px 20px;border-radius:var(--kw-r-lg);background:var(--kw-surface);border:1px solid var(--kw-line);box-shadow:var(--kw-sh-1);color:var(--kw-fg);text-decoration:none;transition:transform var(--kw-t-base) var(--kw-ease),box-shadow var(--kw-t-base) var(--kw-ease),border-color var(--kw-t-base)}
.ws-rel:hover{transform:translateY(-2px);box-shadow:var(--kw-sh-2);border-color:var(--kw-line-strong);color:var(--kw-fg)}
.ws-rel b{font-family:var(--ws-head);font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:650}
.ws-rel>span{grid-column:1;font-size:14.5px;line-height:1.45;color:var(--kw-fg-3)}
.ws-rel .kw-icon{grid-column:2;grid-row:1/span 2;color:var(--kw-fg);transition:transform var(--kw-t-base) var(--kw-ease)}
.ws-rel:hover .kw-icon{transform:translateX(3px)}
.ws-related__sub{margin:36px 0 14px;font-size:var(--kw-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
@media (max-width:980px){.ws-related{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ws-rel,.ws-rel .kw-icon{transition:none}.ws-rel:hover{transform:none}.ws-rel:hover .kw-icon{transform:none}}

/* Schlussband (Navy, Bauplan-Raster): eine Aussage, die Taste Navy/Weiss (die orange Hauptaktion traegt die Kopfzeile) */
.ws-end{position:relative;isolation:isolate;overflow:hidden;padding:96px 0}
.ws-end::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--kw-white) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--kw-white) 5%,transparent) 1px,transparent 1px);background-size:120px 120px;-webkit-mask-image:radial-gradient(ellipse 80% 120% at 85% 50%,var(--kw-white) 10%,transparent 70%);mask-image:radial-gradient(ellipse 80% 120% at 85% 50%,var(--kw-white) 10%,transparent 70%)}
.ws-end__in{display:flex;align-items:center;justify-content:space-between;gap:32px 48px;flex-wrap:wrap}
.ws-end h2{font-size:clamp(1.875rem,1.1rem + 2.4vw,3rem);line-height:1.08;letter-spacing:-.034em;font-weight:700;color:var(--kw-white);max-width:20ch;text-wrap:balance}
.ws-end p{margin-top:16px;font-size:var(--kw-fs-lg);line-height:1.6;color:var(--kw-on-navy-2);max-width:56ch}
.ws-end .kw-btn-row{flex:none}
@media (max-width:980px){.ws-end{padding:72px 0}}
@media (max-width:640px){.ws-end{padding:56px 0 60px}.ws-end .kw-btn-row,.ws-end .kw-btn{width:100%}}

/* --------------------------------------------------------------------------
   Fusszeile (wie die Startseite: Marke plus vier Spalten)
   -------------------------------------------------------------------------- */
.ws-foot{background:var(--kw-navy-950);color:var(--kw-on-navy-3);padding:64px 0 28px}
.ws-foot__in{width:min(1280px,100% - 2*var(--ws-edge));margin-inline:auto}
.ws-foot__grid{display:grid;grid-template-columns:2fr repeat(4,minmax(0,1fr));gap:48px}
.ws-foot a{color:var(--kw-on-navy-3);text-decoration:none}
.ws-foot a:hover{color:var(--kw-white);text-decoration:underline;text-underline-offset:3px}
.ws-foot__brand a{display:inline-flex;align-items:center;min-height:var(--kw-tap)}
.ws-foot__brand img{display:block;height:36px;width:auto}
.ws-foot__brand p{margin-top:12px;max-width:28ch;font-size:14px;line-height:1.6}
.ws-foot__col{display:grid;align-content:start}
.ws-foot__h{margin:0 0 8px;font-family:var(--ws-head);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--kw-on-navy-2)}
.ws-foot__col a{display:flex;align-items:center;min-height:var(--kw-tap);font-size:14px}
.ws-foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--kw-navy-700);font-size:13px}
.ws-foot__social{display:flex;flex-wrap:wrap;gap:0 4px;margin-inline:-10px}
.ws-foot__social a{display:inline-flex;align-items:center;min-height:var(--kw-tap);padding:0 10px;font-size:13px}
@media (max-width:1000px){
  /* vier Spalten in einem Raster aus zwei Spalten: je Zeile beginnen beide Spalten auf gleicher Hoehe (Spaltenkoepfe fluchten),
     innerhalb einer Spalte zaehlt nur ihr eigener Zeilenabstand */
  .ws-foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-items:start}
  .ws-foot__brand{grid-column:1/-1;margin-bottom:24px}
  /* Je Paar nebeneinander liegender Spalten teilen sich beide dieselben Zeilen (subgrid): die Linkzeilen stehen je Reihe auf gleicher Hoehe,
     auch wenn ein Link in einer Spalte umbricht. --ws-rows (Kopf plus laengste Liste des Paares) setzt scripts/site_chrome.py. */
  .ws-foot__col{grid-row:span var(--ws-rows,1);grid-template-rows:subgrid;align-content:start}
  .ws-foot__col:nth-of-type(n+3) .ws-foot__h{margin-top:28px}
  /* gleicher Abstand von Textzeile zu Textzeile, auch wenn ein Link umbricht (Polster statt Mindesthoehe) */
  .ws-foot__col a{display:block;min-height:0;padding:13px 0;line-height:1.35}
}
@media (max-width:640px){.ws-foot{padding-top:44px}.ws-foot__bottom{flex-direction:column;align-items:flex-start}}

/* --------------------------------------------------------------------------
   Seiten mit einer einzigen Aufgabe: WhatsApp-Anmeldung, 404, Impressum-Weiterleitung
   -------------------------------------------------------------------------- */
.ws-signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:64px;align-items:start}
.ws-signup__tx{min-width:0}
.ws-signup .ws-lead{max-width:48ch}
.ws-points{display:grid;gap:12px;margin-top:26px}
.ws-points li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--kw-on-navy-2)}
.ws-points .kw-icon{flex:none;margin-top:2px;color:var(--kw-good)}
.ws-formcard{--kw-pad:28px;box-shadow:var(--kw-sh-3)}
.ws-formnote{margin-top:16px;font-size:14px;line-height:1.5;color:var(--kw-on-navy-3);text-align:center}
.ws-formnote a{color:var(--kw-on-navy-2)}
@media (max-width:980px){.ws-signup{grid-template-columns:minmax(0,1fr);gap:36px}.ws-formcard{--kw-pad:22px}}
.ws-lost{min-height:100vh;display:grid;align-items:center;padding-bottom:72px}
@supports (min-height:100svh){.ws-lost{min-height:100svh}}
.ws-lost__num{display:block;font-family:var(--ws-head);font-size:clamp(5.5rem,3rem + 12vw,12rem);font-weight:700;line-height:.9;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--kw-orange);font-variant-numeric:tabular-nums}
.ws-lost h1{margin-top:12px}
.ws-lost__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:44px;max-width:900px}
.ws-lost__links a{display:grid;gap:2px;align-content:center;min-height:var(--kw-tap-xl);padding:14px 18px;border-radius:var(--kw-r-lg);background:var(--kw-navy-800);border:1px solid var(--kw-navy-700);color:var(--kw-white);text-decoration:none;font-family:var(--ws-head);font-weight:650;font-size:16px;transition:background var(--kw-t-base),border-color var(--kw-t-base)}
.ws-lost__links a:hover{background:var(--kw-navy-700);border-color:var(--kw-navy-600);color:var(--kw-white)}
.ws-lost__links span{font-family:var(--kw-font);font-size:13.5px;font-weight:400;color:var(--kw-on-navy-3)}
.ws-lost__sub{margin-top:44px;font-size:var(--kw-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--kw-on-navy-3)}
@media (max-width:900px){.ws-lost__links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ws-lost__links{grid-template-columns:minmax(0,1fr)}}
.ws-redirect{display:grid;gap:18px;justify-items:start}
.ws-redirect .kw-btn-row{margin-top:6px}

/* Formular: Felder aus dem Kit, Honigtopf unsichtbar fuer Menschen (nicht display:none), Hinweis mit Symbol und drei Satzteilen */
.ws-form{display:grid;gap:16px}
.lead-form-hp,.optin-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lead-form-hp input,.optin-hp input{width:1px;height:1px;padding:0;border:0}
.ws-consent{display:grid;gap:6px}
/* Einwilligung: Zustand "fehlt" mit Rahmen, Symbol-Meldung darunter und rotem Kaestchen (nicht nur Text); Polster ist immer da, nichts springt */
.ws-form .ws-consent .kw-check{margin:0 -14px;padding:12px 14px;border:2px solid transparent;border-radius:var(--kw-r-md)}
.ws-form .ws-consent.kw-field--error .kw-check{border-color:var(--kw-bad);background:var(--kw-bad-bg)}
.ws-form .ws-consent.kw-field--error .kw-check input{border-color:var(--kw-bad)}
.ws-form .kw-check{padding:6px 0}
.ws-form .kw-check__tx{font-size:14px;line-height:1.5;color:var(--kw-fg-2)}
.ws-formalert[hidden]{display:none}
.ws-formfields{display:grid;gap:16px}
.ws-againbtn{display:none}
.is-sent .ws-formfields,.is-sent #leadSubmitBtn,.is-sent #optinSubmitBtn,.is-sent .ws-intro,.is-sent .lead-form-intro{display:none}
.is-sent .ws-againbtn{display:inline-flex}
.is-sent .ws-formalert .kw-alert:focus{outline:none}
.ws-formalert .kw-alert{margin:0}
.ws-formalert .kw-alert__title{margin-bottom:2px}
.ws-formalert .ws-next{margin-top:6px;font-size:15px;color:var(--kw-fg-2)}
.ws-formalert .ws-next:empty{display:none}
.ws-formalert .optin-status,.ws-formalert .lead-form-status,.ws-formalert .ws-next{text-wrap:pretty}
.ws-formalert .lead-form-status,.ws-formalert .optin-status{margin:0;font-size:15px;line-height:1.5;color:var(--kw-fg-2)}
.ws-formalert .lead-form-status:empty,.ws-formalert .optin-status:empty{display:none}
.ws-formalert a{color:var(--kw-fg)}
.optin-consent a{color:var(--kw-link)}
.ws-noscript{padding:12px 14px;border-radius:var(--kw-r-md);background:var(--kw-warn-bg);border:1px solid var(--kw-warn-line);color:var(--kw-fg);font-size:15px}

/* --------------------------------------------------------------------------
   Rechtstexte (AGB, Datenschutz): Titelband, Sprungleiste (per Skript), Inhalt. Der Text selbst bleibt unveraendert.
   -------------------------------------------------------------------------- */
.ws-legalbody{padding:56px 0 96px}
.ws-hero .last-updated{margin-top:14px;font-size:15px;color:var(--kw-on-navy-3)}
.ws-legal .kw-doc .highlight-box{padding:20px 24px;border-radius:var(--kw-r-lg);background:var(--kw-surface);border:1px solid var(--kw-line);box-shadow:var(--kw-sh-1)}
.ws-legal .kw-doc .highlight-box p{margin:0}
.ws-legal .kw-doc .divider{border:0;height:1px;background:var(--kw-line);margin:40px 0 24px}
.ws-legal .kw-doc>p[style]{font-size:14px;color:var(--kw-fg-3)}
.ws-legal__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.ws-legal__toc{max-width:760px;margin-bottom:32px}
.ws-legal__toc summary{min-height:var(--kw-tap-lg)}
.ws-legal__toc .kw-disclosure__body{padding-top:8px;font-size:15px}
.ws-legal__toc ol{display:grid;gap:0}
.ws-legal__toc a{display:flex;align-items:center;min-height:var(--kw-tap);padding:4px 8px;border-radius:var(--kw-r-sm);color:var(--kw-fg-2);text-decoration:none;font-size:15px;line-height:1.35}
.ws-legal__toc a:hover{background:var(--kw-surface-hover);color:var(--kw-fg)}
@media (min-width:1180px){
  .ws-legal__grid{grid-template-columns:minmax(0,760px) minmax(0,300px);gap:72px;align-items:start}
  .ws-legal__toc{grid-column:2;grid-row:1;position:sticky;top:calc(var(--ws-nav-h) + 24px);max-width:none;margin:0;max-height:calc(100vh - var(--ws-nav-h) - 48px);overflow:auto}
  .ws-legal__toc>summary{pointer-events:none;cursor:default}
  .ws-legal__toc>summary .kw-disclosure__chev{display:none}
  .ws-legal .kw-doc{grid-column:1;grid-row:1}
}
.kw-doc-scroll.is-narrow>table{min-width:0}
.ws-legal h2[id],.ws-legal h3[id]{scroll-margin-top:calc(var(--ws-nav-h) + 24px)}
.kw-doc h2,.kw-doc h3{font-family:var(--ws-head)}
@media print{.ws-nav,.ws-foot,.kw-skip,.ws-legal__toc,.ws-hero::before,.ws-hero::after{display:none!important}.ws-hero{padding:0;background:none;color:var(--kw-fg)}.ws-hero h1{color:var(--kw-fg)}.ws-legalbody{padding:0}body.kw{background:var(--kw-white)}}

/* --------------------------------------------------------------------------
   Hilfe-Center (Vorlagen in scripts/build-helpcenter.py): Suche, Gruppen, Artikel, Beispiel-Nachricht, verwandte Artikel
   -------------------------------------------------------------------------- */
.ws-help-search{margin-top:28px;max-width:660px}
.ws-help-search .kw-search{min-height:56px;font-size:17px;padding-left:16px}
.ws-help-search .kw-search input{font-size:17px}
.ws-help-count{margin-top:12px;font-size:15px;line-height:1.5;font-weight:600;color:var(--kw-white)}
.ws-help-count:empty{display:none}
.ws-help-chips{margin-top:20px}
.ws-help-chips .kw-chips{flex-wrap:wrap;overflow:visible}
a.kw-chip{text-decoration:none}
[data-hc-cat],#hcNone{scroll-margin-top:calc(var(--ws-nav-h) + 16px)}
.hc-breadcrumb{margin:0 0 20px}
.hc-breadcrumb .kw-crumbs{list-style:none;padding:0;margin:0;gap:4px}
.hc-breadcrumb li{display:inline-flex;align-items:center}
.hc-breadcrumb a{padding:0 10px;margin:0 -10px}
.hc-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hc-index-card{display:block;color:inherit;text-decoration:none;border-radius:var(--kw-r-lg)}
.hc-index-card__in{height:100%;display:grid;gap:10px;align-content:start;grid-template-rows:auto 1fr auto;--kw-pad:22px 24px;transition:transform var(--kw-t-base) var(--kw-ease),box-shadow var(--kw-t-base) var(--kw-ease),border-color var(--kw-t-base)}
.hc-index-card:hover .hc-index-card__in{transform:translateY(-2px);box-shadow:var(--kw-sh-2);border-color:var(--kw-line-strong)}
.hc-index-card:hover{color:inherit}
.hc-index-card__in h3{font-size:19px;line-height:1.3;letter-spacing:-.015em;font-weight:650;color:var(--kw-fg);text-wrap:balance}
.hc-index-card__in p{font-size:15px;line-height:1.55;color:var(--kw-fg-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hc-index-card__in strong{color:var(--kw-fg);font-weight:600}
.hc-index-card__more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:650;color:var(--kw-link);margin-top:2px}
.hc-index-card:hover .hc-index-card__more{color:var(--kw-link-hover)}
.hc-index-card:hover .hc-index-card__more .kw-icon{transform:translateX(3px)}
.hc-index-card__more .kw-icon{width:16px;height:16px;transition:transform var(--kw-t-base) var(--kw-ease)}
@media (max-width:1100px){.hc-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Handy: eine Karte je Artikel als kompakte Zeile (Titel, zwei Zeilen Anreisser, Pfeil), damit die Uebersicht nicht endlos wird */
@media (max-width:700px){
  .hc-index-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .hc-index-card__in{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;--kw-pad:14px 16px}
  .hc-index-card__in h3{grid-column:1;font-size:17px}
  .hc-index-card__in p{grid-column:1;-webkit-line-clamp:2;font-size:14.5px}
  .hc-index-card__more{grid-column:2;grid-row:1/span 2;margin:0}
  .hc-index-card__more .kw-icon{width:22px;height:22px}
  .hc-more-t{display:none}
  .hc-index-card:hover .hc-index-card__in{transform:none}
}
@media (prefers-reduced-motion:reduce){.hc-index-card__in,.hc-index-card__more .kw-icon{transition:none}.hc-index-card:hover .hc-index-card__in,.hc-index-card:hover .hc-index-card__more .kw-icon{transform:none}}
.ws-cat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:24px}
.ws-cat h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.125rem);line-height:1.12;letter-spacing:-.03em;font-weight:700;color:var(--kw-fg)}
.ws-cat span{font-size:14px;color:var(--kw-fg-3);white-space:nowrap}
.kw-empty .kw-medal{margin-inline:auto}
.kw-empty h2{font-size:20px;line-height:1.3;letter-spacing:-.015em;color:var(--kw-fg);font-weight:650}

/* Titelband der Hilfe-Uebersicht: links Titel und Suche, rechts der Einstiegskasten (nur wo zwei Spalten Platz haben) */
.ws-hero--text .ws-hero__grid.ws-hero__grid--help{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:56px}
.ws-start{width:100%;max-width:470px;justify-self:end;margin-top:34px;padding:22px 22px 10px;border-radius:var(--kw-r-xl);border:1px solid var(--kw-line);box-shadow:var(--kw-sh-3)}
.ws-start[hidden]{display:none}
/* Suchmodus: neben den Treffern steht der Weg zu uns (Karte bleibt beim Lesen der Treffer stehen); ohne Treffer und am Handy tritt sie zurück */
.ws-ask{display:none;gap:12px;padding:24px 24px 26px;border-radius:var(--kw-r-xl);border:1px solid var(--kw-line);background:var(--kw-surface);box-shadow:var(--kw-sh-2)}
.ws-ask__h{font-family:var(--ws-head);font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:var(--kw-fg)}
.ws-ask p{font-size:16px;line-height:1.55;color:var(--kw-fg-2)}
.ws-ask .kw-btn-row{margin-top:6px}
.ws-start__h{margin:0 0 8px;font-family:var(--kw-font);font-size:var(--kw-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
.ws-start__list{display:grid}
.ws-start__list a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:var(--kw-tap-xl);padding:14px 6px;border-top:1px solid var(--kw-line);border-radius:var(--kw-r-sm);color:var(--kw-fg);text-decoration:none;transition:background var(--kw-t-base) var(--kw-ease)}
.ws-start__list li:first-child a{border-top:0}
.ws-start__list a:hover{background:var(--kw-surface-hover);color:var(--kw-fg)}
.ws-start__n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--kw-strong-bg);color:var(--kw-strong-fg);font-family:var(--ws-head);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.ws-start__t{font-family:var(--ws-head);font-size:17px;line-height:1.3;letter-spacing:-.01em;font-weight:650}
.ws-start .kw-icon{color:var(--kw-fg);transition:transform var(--kw-t-base) var(--kw-ease)}
.ws-start__list a:hover .kw-icon{transform:translateX(3px)}
@media (max-width:1040px){.ws-hero--text .ws-hero__grid.ws-hero__grid--help{grid-template-columns:minmax(0,1fr)}.ws-start{display:none}}
@media (prefers-reduced-motion:reduce){.ws-start__list a,.ws-start .kw-icon{transition:none}.ws-start__list a:hover .kw-icon{transform:none}}
/* Der Platzhalter fuer "keine Treffer" braucht ohne Meldung keine Hoehe (sonst bleibt vor dem Schlussband ein Leerstreifen) */
#hcNoneWrap{padding:0}
#hcNone:not([hidden]){margin:72px auto}
/* Suchmodus: Treffer als kompakte Zeilen, Gruppen ohne Leerstreifen dazwischen, Wechselfarbe der Flaechen aus */
.is-searching [data-hc-cat]{padding:26px 0;background:none}
.is-searching [data-hc-cat].is-first{padding-top:52px}
.is-searching [data-hc-cat].is-last{padding-bottom:64px}
.is-searching .ws-cat{margin-bottom:14px}
.is-searching .hc-index-grid{grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:1041px){
  .is-searching .ws-results{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;align-items:start;width:min(1280px,100% - 2*var(--ws-edge));margin-inline:auto}
  .is-searching .ws-results [data-hc-cat]{grid-column:1}
  .is-searching .ws-results .kw-wrap{width:100%}
  .is-searching .ws-ask:not([hidden]){display:grid;grid-column:2;grid-row:1/span 8;position:sticky;top:calc(var(--ws-nav-h) + 24px);margin-top:52px}
}
.is-searching .hc-index-card__in{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:24px;row-gap:4px;align-items:center;--kw-pad:16px 22px}
.is-searching .hc-index-card__in h3{grid-column:1;font-size:18px}
.is-searching .hc-index-card__in p{grid-column:1;-webkit-line-clamp:2}
.is-searching .hc-index-card__more{grid-column:2;grid-row:1/span 2;margin:0}
.is-searching .ws-cat span{white-space:nowrap}

/* Artikel: Titelband, danach Text auf 68 Zeichen mit Inhaltsverzeichnis daneben (Handy: aufklappbar oben) */
.ws-article{padding:56px 0 0}
.ws-article__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 80px}
.hc-toc{max-width:68ch}
.hc-toc .kw-disclosure__body{padding-top:8px}
.hc-toc ol{display:grid;gap:0}
.hc-toc a{display:flex;align-items:center;min-height:var(--kw-tap);padding:4px 8px;border-radius:var(--kw-r-sm);color:var(--kw-fg-2);text-decoration:none;font-size:15px;line-height:1.35}
.hc-toc a:hover{background:var(--kw-surface-hover);color:var(--kw-fg)}
.hc-toc a[aria-current="true"]{color:var(--kw-fg);font-weight:650;box-shadow:inset 3px 0 0 var(--kw-marker)}
@media (min-width:1100px){
  /* Text links auf der Achse des Titelbands, Inhaltsverzeichnis rechts buendig mit dem Inhalt (keine leere Flaeche neben dem Verzeichnis) */
  .ws-article__grid{grid-template-columns:minmax(0,68ch) 320px;gap:72px;justify-content:space-between}
  .hc-toc{grid-column:2;grid-row:1;position:sticky;top:calc(var(--ws-nav-h) + 24px);align-self:start;max-width:none}
  .hc-toc>summary{pointer-events:none;cursor:default}
  .hc-toc>summary .kw-disclosure__chev{display:none}
  .hc-article{grid-column:1;grid-row:1}
}
.hc-article h2{scroll-margin-top:calc(var(--ws-nav-h) + 24px)}
.hc-article code{padding:1px 6px;border-radius:var(--kw-r-xs);background:var(--kw-surface-2);border:1px solid var(--kw-line)}
.hc-article ol>li::marker{font-weight:650;color:var(--kw-fg-3)}
.ws-hero--article h1{max-width:26ch}
@media (max-width:640px){.ws-article{padding-top:36px}.ws-article__grid{margin-bottom:56px}}

/* Tabellen im Rechtstext: Scrollhinweis (Randschatten) und am Handy beschriftete Karten */
.kw-doc-scroll{background:linear-gradient(to right,var(--kw-surface) 30%,transparent) left center/32px 100% no-repeat local,linear-gradient(to left,var(--kw-surface) 30%,transparent) right center/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--kw-line-strong),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--kw-line-strong),transparent) right center/14px 100% no-repeat scroll}
@media (max-width:640px){
  .kw-doc-scroll.is-cards{overflow:visible;border:0;background:none}
  .kw-doc-scroll.is-cards>table{display:block;min-width:0}
  .kw-doc-scroll.is-cards tbody{display:grid;gap:12px}
  .kw-doc-scroll.is-cards tr.is-head{display:none}
  .kw-doc-scroll.is-cards tr{display:block;padding:8px 16px;border:1px solid var(--kw-line);border-radius:var(--kw-r-lg);background:var(--kw-surface);box-shadow:var(--kw-sh-1)}
  .kw-doc-scroll.is-cards td{display:block;border:0;padding:8px 0}
  .kw-doc-scroll.is-cards td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:var(--kw-fs-xs);letter-spacing:.07em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
}

/* Beispiel-Nachricht: Chat-Ausschnitt mit der Sprechblase des Kits (rechts dunkel = vom Betrieb, links hell = vom KI-Mitarbeiter),
   Beschriftung und Kopieren in einer Zeile. Marke (Mikrofon, Kamera, Sonne) ist ein Kit-Symbol, kein Emoji. */
.kw-prose blockquote.hc-quote{display:flex;flex-direction:column;gap:10px;padding:8px 16px 20px;border:1px solid var(--kw-warm-line);border-left:1px solid var(--kw-warm-line);border-radius:var(--kw-r-lg);background:var(--kw-warm);color:var(--kw-fg)}
.hc-quote__label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:var(--kw-tap);font-size:var(--kw-fs-xs);line-height:1.3;letter-spacing:.07em;text-transform:uppercase}
.hc-quote__label strong{color:var(--kw-fg-3);font-weight:650}
.hc-quote .hc-bubble{max-width:min(100%,46ch);padding:12px 16px;font-size:16.5px;line-height:1.5}
.hc-quote .hc-bubble p+p{margin-top:.45em}
.hc-quote:not(:has(.hc-quote__label)){padding-top:20px}
.hc-msgico{display:inline-flex;vertical-align:-3px;margin-right:8px}
.hc-msgico .kw-icon{width:18px;height:18px}
.hc-copy{min-height:var(--kw-tap);font-size:14px;text-transform:none;letter-spacing:0}
.hc-copy .kw-icon{width:18px;height:18px}
/* Hinweis im Artikel (Zitat, das keine Chat-Nachricht ist): Hinweis mit Symbol */
.kw-prose blockquote.hc-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--kw-info-line);border-left:1px solid var(--kw-info-line);border-radius:var(--kw-r-md);background:var(--kw-info-bg);color:var(--kw-fg)}
.hc-note .kw-icon{flex:none;margin-top:3px;color:var(--kw-info)}
.hc-note p+p{margin-top:.5em}
@media (max-width:640px){.hc-quote .hc-bubble{max-width:92%}}

/* Verwandte Artikel als Karten, Video, Tabellen */
.kw-prose .hc-related-list{list-style:none;padding:0;display:grid;gap:10px;margin-top:12px}
.kw-prose .hc-related-list li+li{margin-top:0}
.hc-related{margin-top:2.6em;padding:20px;border-radius:var(--kw-r-lg);background:var(--kw-warm);border:1px solid var(--kw-warm-line)}
.hc-related-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--kw-tap);color:var(--kw-fg);font-size:16px;font-weight:600;line-height:1.35;text-decoration:none}
.hc-related-card:hover{color:var(--kw-fg)}
.hc-related-card .kw-icon{color:var(--kw-link)}
p.hc-related{font-size:16px}
.hc-video{margin:1.4em 0}
.hc-video video{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:var(--kw-r-lg);border:1px solid var(--kw-line);background:var(--kw-navy)}
.hc-video a{font-size:15px}
.hc-transcript{margin-top:10px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface);font-size:15px;line-height:1.55}
.hc-transcript>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--kw-tap);padding:6px 16px;cursor:pointer;font-weight:650;color:var(--kw-fg)}
.hc-transcript>summary::-webkit-details-marker{display:none}
.hc-transcript[open]>summary .kw-disclosure__chev{rotate:180deg}
.hc-transcript>div{padding:4px 16px 16px;color:var(--kw-fg-2)}
.hc-transcript ol{margin-top:8px;padding-left:1.3em;list-style:decimal}
.hc-transcript li+li{margin-top:.4em}
.hc-table-wrap{margin:1.4em 0;font-size:15px;line-height:1.5}
.hc-table-wrap table{width:100%;min-width:480px;border-collapse:separate;border-spacing:0}
.hc-table-wrap th{background:var(--kw-surface-2);text-align:left;font-size:var(--kw-fs-xs);letter-spacing:.07em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3);padding:12px 16px;border-bottom:1px solid var(--kw-line)}
.hc-table-wrap td{padding:12px 16px;border-bottom:1px solid var(--kw-line);vertical-align:top}
.hc-table-wrap tr:last-child td{border-bottom:0}
.hc-table-wrap table.kw-table--cards{min-width:0}
@media (max-width:640px){.hc-table-wrap{border:0;background:none;box-shadow:none;overflow:visible}.hc-table-wrap table.kw-table--cards{border:0}.hc-table-wrap .kw-table--cards tbody{display:grid;gap:12px}.hc-table-wrap .kw-table--cards tr{border:1px solid var(--kw-line);border-radius:var(--kw-r-lg);background:var(--kw-surface);box-shadow:var(--kw-sh-1)}.hc-table-wrap .kw-table--cards tbody tr:last-child{border-bottom:1px solid var(--kw-line)}.hc-table-wrap .kw-table--cards td{padding:8px 16px;border:0}.hc-table-wrap .kw-table--cards td:first-child{padding:14px 16px 4px;font-weight:650;color:var(--kw-fg)}.hc-table-wrap .kw-table--cards tr{padding:0 0 10px}}
