/* Knowledge Base — Stylesheet.
 *
 * ERZEUGT AUS knowledge-base/vorlage/kb.css, NICHT VON HAND IM WEB-ROOT AENDERN.
 * Die ausgelieferte Fassung unter www-marketing/knowledge-base/kb.css entsteht bei jedem
 * Bau neu aus dieser Datei; eine Aenderung dort waere beim naechsten Bau fort.
 *
 * DIE HAUSMITTEL SIND DIE DER WEBSITE. Farben, Schrift, Radien, Knopfformen und die
 * Kopf-/Fusszeile stehen hier zeichengleich so, wie sie in www-marketing/index.html und
 * www-marketing/knowledge-base/index.html stehen (Stand 23.9.2026). Das CSS der
 * bestehenden Seiten wird dafuer NICHT angefasst: jene Seiten tragen ihr CSS inline, und
 * ein gemeinsames Stylesheet haette sie alle angefasst. Was hier neu ist, ist allein das,
 * was die Wissensbasis braucht und die Startseite nicht hat — die dreispaltige Lage, das
 * Inhaltsverzeichnis, die Brotkrumen, "Auf dieser Seite", das Blaettern und die Suche.
 *
 * OHNE JAVASCRIPT VOLLSTAENDIG BEDIENBAR — bis auf die Suche. Auf-/Zuklappen laeuft ueber
 * <details>, die Sprachwahl ueber echte Verweise. Das Skript kb.js verbessert nur.
 */

/* ============ Fonts (selbst gehostet — kein Google-CDN) ============ */
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ============ Farbklima (zeichengleich zur Startseite) ============ */
:root{
  --forest:#2B5951;
  --forest-deep:#193E35;
  --forest-line:rgba(247,250,242,.14);
  --lime:#9EFE01;
  --yellow:#F1FD47;
  --schnee:#FFFFFF;
  --paper:#F7FAF2;
  --paper-line:rgba(43,89,81,.14);
  --ink:#2B5951;
  --ink-soft:rgba(43,89,81,.74);
  --milk:#F7FAF2;
  --milk-soft:rgba(247,250,242,.76);
  --radius:22px;
  --w:1080px;
  /* Das Loeschkreuz der Suchfelder, als Maske. Kein Bild von einem fremden Server. */
  --kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1 11 11M11 1 1 11' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Die Wissensbasis steht breiter als die Startseite: drei Spalten brauchen Platz. */
  --w-kb:1320px;
  --spalte-links:250px;
  --spalte-rechts:210px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background-color:var(--paper)}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--w-kb);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* Nur fuer Vorleseprogramme. Traegt den Sprung-Verweis an den Anfang. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--forest);padding:10px 18px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.sprung:focus{left:0}

/* ============ Pill-Familie (Hausmuster) ============ */
.pill{display:inline-flex;align-items:center;gap:8px;height:22px;padding:0 12px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pill--lime{background:var(--lime);color:var(--forest)}
.pill--ghost-light{border:1px solid var(--paper-line);color:var(--ink-soft)}

/* ============ Typo ============ */
h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(23px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.18}
h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2vw,21px);line-height:1.6}

/* ============ Buttons (Hausmuster) ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .15s ease, background .15s ease;border:0;cursor:pointer}
.btn:active{transform:scale(.97)}
.btn--lime{background:var(--lime);color:var(--forest)}
.btn--lime:hover{background:var(--yellow)}

/* ============ Dunkle Abschnitte — Klasse und Weiss-Norm der Website ============ */
.on-forest{background:var(--forest);color:var(--milk)}
.on-forest .lead{color:var(--milk-soft)}
/* Ueberschriften auf dunklem Grund tragen das reine Weiss, nicht das gedaempfte
   (Norm 21.8.2026): Ueberschriften und Logo-Wortzeichen schneeweiss, Navigation,
   Fliesstext, Untertexte und Claims bleiben gedaempft. */
.hero h1,.on-forest h1,.on-forest h2,.on-forest h3,.finale h2{color:var(--schnee)}

/* ============ Kopfzeile (Hausmuster der Website) ============ */
header{position:sticky;top:0;z-index:50;background:rgba(25,62,53,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--forest-line);color:var(--milk)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav .logo svg{height:34px;width:auto}
.nav .logo{flex:0 0 auto}
.nav>nav{display:flex;align-items:center;gap:22px;min-width:0}
.nav>nav a{font-size:14px;font-weight:600;color:var(--milk-soft);text-decoration:none;white-space:nowrap}
.nav>nav a:hover{color:var(--lime)}
.nav .btn{height:40px;padding:0 18px;font-size:14px;white-space:nowrap;flex:0 0 auto}
.nav-rechts{display:flex;align-items:center;gap:12px;flex:0 0 auto}
@media(max-width:1180px){.nav>nav{display:none}}
@media(max-width:700px){.nav-rechts .btn--lime{display:none}}

/* Die Navigations-Klappe — Bauform der Startseite (.nav-burger/.nav-menu), aber ohne
   Skript: ein <details>, das ohne JavaScript aufklappt. Sie erscheint genau dort, wo die
   Leiste die Punkte nicht mehr traegt; ohne sie waeren Warum, Features, Preise und FAQ
   auf dem Telefon aus der Wissensbasis heraus nicht mehr erreichbar. Der Startknopf steht
   in der Klappe auch dann noch, wenn er aus der Leiste gefallen ist. */
.kb-burger{display:none;flex:0 0 auto}
.kb-burger>summary{width:44px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;list-style:none}
.kb-burger>summary::-webkit-details-marker{display:none}
.kb-burger>summary span{display:block;width:24px;height:2px;margin:0 auto;background:var(--milk);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.kb-burger[open]>summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kb-burger[open]>summary span:nth-child(2){opacity:0}
.kb-burger[open]>summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* display AUSDRUECKLICH in beiden Zustaenden. Wer dem Kasten nur "display:flex" gibt,
   ueberschreibt damit, womit der Browser den Inhalt eines geschlossenen <details>
   verbirgt — die Klappe stuende dann dauernd offen (am 23.9.2026 in Chromium 390px
   gemessen: sechs Verweise sichtbar, ohne dass jemand getippt haette). */
.kb-burger .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;background:var(--forest);border-bottom:1px solid var(--forest-line);box-shadow:0 22px 44px rgba(0,0,0,.4);max-height:calc(100vh - 72px);max-height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain}
.kb-burger[open] .nav-menu{display:flex}
.kb-burger .nav-menu nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
.kb-burger .nav-menu nav a{display:block;padding:13px 2px;border-bottom:1px solid rgba(247,250,242,.08);color:var(--milk-soft);font-size:16px;font-weight:400;text-decoration:none}
.kb-burger .nav-menu nav a:hover{color:var(--lime)}
.kb-burger .nav-menu nav a[aria-current="true"]{color:var(--lime)}
.kb-burger .nav-menu .btn{width:100%;height:48px;font-size:15px;margin-top:16px}
@media(max-width:1180px){.kb-burger{display:block}}

/* Sprachwahl — Bauform der Startseite (.lang-btn/.lang-menu), aber ohne Skript:
   <details> klappt auf, die Eintraege sind echte Verweise auf denselben Artikel. */
.lang{position:relative}
.lang>summary{height:40px;padding:0 16px;border:1px solid rgba(247,250,242,.4);background:transparent;border-radius:999px;color:var(--milk);font:700 13px/1 'Inter',sans-serif;display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;white-space:nowrap;transition:border-color .15s ease,color .15s ease}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{border-color:var(--lime);color:var(--lime)}
.lang>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lang[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:var(--forest);border:1px solid var(--forest-line);border-radius:12px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.4);z-index:60;max-height:min(70vh,420px);overflow-y:auto}
.lang-menu a{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;color:var(--milk);font:600 13px/1 'Inter',sans-serif;text-decoration:none;white-space:nowrap}
.lang-menu a:hover{background:rgba(247,250,242,.06)}
.lang-menu a[aria-current="true"]{color:var(--lime)}

/* Suchfeld in der Kopfzeile */
.kb-suche-kopf{position:relative;flex:0 1 260px;min-width:150px}
.kb-suche-kopf input{width:100%;height:40px;padding:0 14px 0 38px;border-radius:999px;border:1px solid rgba(247,250,242,.4);background:rgba(247,250,242,.06);color:var(--milk);font:600 13px/1 'Inter',sans-serif}
.kb-suche-kopf input::placeholder{color:var(--milk-soft);font-weight:500}
.kb-suche-kopf input:hover{border-color:var(--lime)}

/* Das Loeschkreuz der Suchfelder. Chrome und Safari setzen hier ein eigenes Zeichen in
   ihrer eigenen Farbe — auf dem dunklen Gruen der Kopfzeile stand am 23.9.2026 live ein
   blaues Kreuz. Es wird deshalb abgeschaltet und als Maske in der Schriftfarbe des Feldes
   neu gezeichnet: gleiche Bedienung, Farbe des Hauses. Firefox zeigt ohnehin keines; wer
   keines sieht, loescht mit Escape (kb.js) oder von Hand. */
.kb-suche-kopf input::-webkit-search-cancel-button,
.kb-suche-gross input::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;cursor:pointer;
  background-color:var(--milk-soft);
  -webkit-mask:var(--kreuz) center/contain no-repeat;mask:var(--kreuz) center/contain no-repeat}
.kb-suche-kopf input:hover::-webkit-search-cancel-button,
.kb-suche-gross input:hover::-webkit-search-cancel-button{background-color:var(--milk)}
.kb-suche-kopf .lupe{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;opacity:.7;pointer-events:none}
@media(max-width:1180px){
  /* Unter dieser Breite tritt die Suche aus der Leiste heraus und steht als eigene
     Zeile darunter: verschwinden darf sie nicht, sie ist auf jeder Seite der zweite
     Weg zu jedem Artikel. */
  .nav{height:auto;flex-wrap:wrap;padding:12px 0 14px;row-gap:12px}
  .kb-suche-kopf{order:3;flex:1 0 100%;max-width:none}
  .kb-suche-kopf .kb-treffer{left:0;right:0;width:auto}
}

/* ============ Die Lage: drei Spalten ============ */
.kb-lage{display:grid;grid-template-columns:var(--spalte-links) minmax(0,1fr) var(--spalte-rechts);gap:clamp(24px,3.4vw,54px);align-items:start;padding:clamp(28px,4vw,52px) 0 clamp(60px,8vw,104px)}
.kb-lage--breit{grid-template-columns:var(--spalte-links) minmax(0,1fr)}
.kb-lage--voll{grid-template-columns:minmax(0,1fr)}
@media(max-width:1080px){
  .kb-lage,.kb-lage--breit{grid-template-columns:minmax(0,1fr)}
}

/* ============ Inhaltsverzeichnis (linke Spalte) ============ */
.kb-baum{position:sticky;top:96px;max-height:calc(100vh - 128px);overflow-y:auto;padding-right:6px;font-size:14.5px}
.kb-baum>.kb-baum-titel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.kb-baum ul{list-style:none}
.kb-baum-gruppe{margin:16px 0 4px;padding:0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.kb-baum-gruppe a{display:block;padding:4px 10px;border-radius:8px;text-decoration:none;color:var(--ink-soft)}
.kb-baum-gruppe a:hover{color:var(--ink);background:rgba(43,89,81,.06)}
.kb-baum-gruppe a[aria-current]{color:var(--forest-deep);background:rgba(43,89,81,.08)}
.kb-baum>ul>li.kb-baum-gruppe:first-child{margin-top:4px}
.kb-baum details{border:0;padding:0;margin-bottom:6px}
.kb-baum summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;font-weight:600;color:var(--ink);font-size:14.5px}
.kb-baum summary::-webkit-details-marker{display:none}
.kb-baum summary:hover{background:rgba(43,89,81,.06)}
.kb-baum summary::before{content:"";flex:0 0 auto;width:6px;height:6px;border-right:1.6px solid var(--ink-soft);border-bottom:1.6px solid var(--ink-soft);transform:rotate(-45deg);transition:transform .15s ease}
.kb-baum details[open]>summary::before{transform:rotate(45deg)}
.kb-baum details>ul{margin:2px 0 10px 13px;border-left:1px solid var(--paper-line);padding-left:6px}
.kb-baum details>ul a{display:block;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--ink-soft);line-height:1.45}
.kb-baum details>ul a:hover{background:rgba(43,89,81,.06);color:var(--ink)}
.kb-baum details>ul a[aria-current="page"]{background:var(--forest);color:var(--schnee);font-weight:600}
.kb-baum .kb-baum-start a{display:block;padding:7px 10px;border-radius:10px;text-decoration:none;font-weight:600;margin-bottom:8px}
.kb-baum .kb-baum-start a:hover{background:rgba(43,89,81,.06)}
.kb-baum .kb-baum-start a[aria-current="page"]{background:var(--forest);color:var(--schnee)}

/* Auf schmalen Geraeten wird der Baum zu einem einklappbaren Menue ueber dem Text. */
.kb-baum-klapp{display:none}
@media(max-width:1080px){
  .kb-baum-klapp{display:block;margin-bottom:22px;background:#fff;border:1px solid var(--paper-line);border-radius:14px}
  .kb-baum-klapp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-weight:600}
  .kb-baum-klapp>summary::-webkit-details-marker{display:none}
  .kb-baum-klapp>summary::after{content:"";width:8px;height:8px;border-right:1.8px solid var(--ink-soft);border-bottom:1.8px solid var(--ink-soft);transform:translateY(-3px) rotate(45deg)}
  .kb-baum-klapp[open]>summary::after{transform:translateY(1px) rotate(225deg)}
  .kb-baum-klapp .kb-baum{position:static;max-height:none;overflow:visible;padding:0 12px 14px}
  .kb-baum-klapp .kb-baum>.kb-baum-titel{display:none}
  .kb-baum-seite{display:none}
}

/* ============ "Auf dieser Seite" (rechte Spalte) ============ */
.kb-auf-seite{position:sticky;top:96px;max-height:calc(100vh - 128px);overflow-y:auto;font-size:14px}
.kb-auf-seite .kb-baum-titel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.kb-auf-seite ul{list-style:none;border-left:1px solid var(--paper-line)}
.kb-auf-seite li a{display:block;padding:5px 12px;text-decoration:none;color:var(--ink-soft);line-height:1.45}
.kb-auf-seite li a:hover{color:var(--ink)}
.kb-auf-seite li.tief-3 a{padding-left:26px;font-size:13.5px}
.kb-auf-seite-klapp{display:none}
@media(max-width:1080px){
  .kb-auf-seite-klapp{display:block;margin:0 0 26px;background:#fff;border:1px solid var(--paper-line);border-radius:14px}
  .kb-auf-seite-klapp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;font-weight:600;font-size:15px}
  .kb-auf-seite-klapp>summary::-webkit-details-marker{display:none}
  .kb-auf-seite-klapp>summary::after{content:"";width:8px;height:8px;border-right:1.8px solid var(--ink-soft);border-bottom:1.8px solid var(--ink-soft);transform:translateY(-3px) rotate(45deg)}
  .kb-auf-seite-klapp[open]>summary::after{transform:translateY(1px) rotate(225deg)}
  .kb-auf-seite-klapp .kb-auf-seite{position:static;max-height:none;overflow:visible;padding:0 14px 14px}
  .kb-auf-seite-klapp .kb-baum-titel{display:none}
  .kb-auf-seite-seite{display:none}
}

/* ============ Brotkrumen ============ */
.kb-brotkrumen{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.kb-brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kb-brotkrumen a{text-decoration:none;color:var(--ink-soft)}
.kb-brotkrumen a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.kb-brotkrumen li:not(:last-child)::after{content:"›";margin-left:6px;color:rgba(43,89,81,.45)}
.kb-brotkrumen li[aria-current="page"]{color:var(--ink);font-weight:600}

/* ============ Artikel ============ */
.kb-artikel{max-width:760px;min-width:0}
.kb-artikel>h1{margin-bottom:14px}
.kb-artikel .kb-kurz{font-size:19px;line-height:1.55;color:var(--ink-soft);margin-bottom:8px}
.kb-inhalt{margin-top:34px}
/* Auf der Kapitelseite steht der Text ganz oben in der Spalte — dort ist der
   Abstand zur Ueberschrift darueber schon da. */
.kb-artikel>.kb-inhalt:first-child{margin-top:0}
.kb-inhalt>*+*{margin-top:20px}
.kb-inhalt h2{margin-top:46px;scroll-margin-top:96px}
.kb-inhalt h3{margin-top:32px;scroll-margin-top:96px;font-size:17.5px}
.kb-inhalt h2+*,.kb-inhalt h3+*{margin-top:14px}
.kb-inhalt p{color:var(--ink-soft)}
.kb-inhalt strong{color:var(--ink);font-weight:600}
.kb-inhalt a{color:var(--ink);text-decoration:underline;text-underline-offset:2.5px;text-decoration-thickness:1.5px;text-decoration-color:rgba(43,89,81,.35)}
.kb-inhalt a:hover{text-decoration-color:var(--forest)}
.kb-inhalt ul,.kb-inhalt ol{padding-left:22px;color:var(--ink-soft)}
.kb-inhalt li+li{margin-top:9px}
.kb-inhalt li>ul,.kb-inhalt li>ol{margin-top:9px}
.kb-inhalt ul{list-style:disc}
.kb-inhalt ol{list-style:decimal}
.kb-inhalt li::marker{color:rgba(43,89,81,.5)}
.kb-inhalt code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:rgba(43,89,81,.07);border-radius:6px;padding:.14em .42em;color:var(--ink);word-break:break-word}
.kb-inhalt pre{background:var(--forest);color:var(--milk);border-radius:14px;padding:18px 20px;overflow-x:auto;font-size:14px;line-height:1.6}
.kb-inhalt pre code{background:none;padding:0;color:inherit;font-size:14px}
.kb-inhalt blockquote{border-left:3px solid var(--lime);background:rgba(158,254,1,.08);border-radius:0 12px 12px 0;padding:16px 20px}
.kb-inhalt blockquote>*+*{margin-top:12px}
.kb-inhalt blockquote p{color:var(--ink)}
.kb-inhalt table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.kb-inhalt th,.kb-inhalt td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--paper-line)}
.kb-inhalt th{font-weight:600;color:var(--ink);white-space:nowrap}
.kb-inhalt td{color:var(--ink-soft)}
/* Lange Adressen (Hilfeseiten der Anbieter) brechen in der Zelle um, statt die Tabelle
   breit zu ziehen. Ein Ziel in der Tabelle (#anbieter-gmx) traegt eine Marke. */
.kb-inhalt td a{overflow-wrap:anywhere}
.kb-inhalt [id]{scroll-margin-top:96px}
.kb-inhalt tr:has(td:target) td,.kb-inhalt p:target{background:rgba(158,254,1,.14)}
/* Die Anbieter-Auswahl (kb.js, seit 1.11.2026): Knoepfe, darunter die Werte des gewaehlten
   Anbieters. Ohne Skript erscheint sie nicht; dann steht dort ein Verweis auf die Tabelle. */
.kb-wahl-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.kb-wahl-knopf{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--paper-line);background:var(--schnee);color:var(--ink);font:600 14px/1 'Inter',sans-serif;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.kb-wahl-knopf:hover{border-color:var(--forest)}
.kb-wahl-knopf[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--milk)}
.kb-wahl-karte{margin-top:16px;padding:18px 20px;border:1px solid var(--paper-line);border-radius:14px;background:var(--schnee)}
.kb-wahl-karte[hidden]{display:none}
.kb-wahl-name{font-weight:600;font-size:17.5px;color:var(--ink)}
.kb-wahl-karte dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin-top:12px;font-size:15px}
.kb-wahl-karte dt{font-weight:600;color:var(--ink)}
.kb-wahl-karte dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}
.kb-wahl-karte>p+p{margin-top:10px}
@media(max-width:560px){.kb-wahl-karte dl{grid-template-columns:minmax(0,1fr);gap:2px}.kb-wahl-karte dd+dt{margin-top:10px}}
.kb-inhalt hr{border:0;border-top:1px solid var(--paper-line);margin:38px 0}
/* Der Anker-Griff an jeder Ueberschrift: still, bis der Zeiger die Zeile beruehrt. */
.kb-anker{margin-left:.4em;text-decoration:none;color:rgba(43,89,81,.35);opacity:0;transition:opacity .12s ease;font-weight:400}
.kb-inhalt h2:hover .kb-anker,.kb-inhalt h3:hover .kb-anker,.kb-anker:focus{opacity:1}

/* Rueckfall-Vermerk: dieser Artikel liegt in der Sprache des Lesers noch nicht vor. */
/* Abbildungen im Artikel (seit 27.9.2026). Ein Bildschirmabzug wird NIE hochskaliert:
   groesser als seine eigenen Bildpunkte sieht er matschig aus. Hochkante Abzuege (Uhr,
   Telefon) bekommen deshalb ihre eigene Breite und stehen mittig. */
.kb-bild{margin:30px 0;text-align:center}
.kb-bild img{max-width:100%;height:auto;border-radius:16px;border:1px solid var(--paper-line);background:#000}
.kb-bild figcaption{margin-top:10px;font-size:14px;color:var(--ink-soft);line-height:1.5}
/* Hochformat: die Uhr misst 422 Bildpunkte breit — mehr wird sie hier nicht. */
.kb-bild img[height]{width:auto}
.kb-rueckfall{margin-top:26px;background:#fff;border:1px solid var(--paper-line);border-left:3px solid var(--yellow);border-radius:0 14px 14px 0;padding:16px 20px;font-size:15.5px;color:var(--ink-soft)}
.kb-rueckfall strong{color:var(--ink)}

/* ============ Querverweise unter dem Artikel ============ */
/* Uli, 28.9.2026: der Leser steigt unten ein und geht ueber die Verweise weiter. Sie
   stehen deshalb ueber dem Blaettern und nicht darunter. */
.kb-verwandt{margin-top:56px;padding-top:30px;border-top:1px solid var(--paper-line)}
.kb-verwandt-titel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.kb-verwandt+.kb-blaettern{margin-top:40px}

/* ============ Blaettern ============ */
.kb-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px;padding-top:34px;border-top:1px solid var(--paper-line)}
.kb-blaettern a{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--paper-line);border-radius:14px;padding:16px 20px;text-decoration:none;transition:border-color .15s ease}
.kb-blaettern a:hover{border-color:var(--forest)}
.kb-blaettern .richtung{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.kb-blaettern .titel{font-weight:600;color:var(--ink);line-height:1.4}
.kb-blaettern .weiter{text-align:right;grid-column:2}
@media(max-width:620px){.kb-blaettern{grid-template-columns:1fr}.kb-blaettern .weiter{grid-column:1;text-align:left}}

/* ============ Startseite und Kapitelseite ============ */
.kb-kopf{padding:clamp(48px,6.5vw,88px) 0 clamp(30px,4vw,44px)}
.kb-kopf h1{max-width:820px}
.kb-kopf .lead{margin-top:20px;max-width:680px}
.kb-kopf .kb-brotkrumen{color:var(--milk-soft)}
.kb-kopf .kb-brotkrumen a{color:var(--milk-soft)}
.kb-kopf .kb-brotkrumen a:hover{color:var(--lime)}
.kb-kopf .kb-brotkrumen li:not(:last-child)::after{color:rgba(247,250,242,.45)}
.kb-kopf .kb-brotkrumen li[aria-current="page"]{color:var(--milk)}

/* Das grosse Suchfeld */
.kb-suche-gross{margin-top:clamp(28px,3.6vw,40px);max-width:640px;position:relative}
.kb-suche-gross input{width:100%;height:60px;padding:0 20px 0 54px;border-radius:999px;border:1px solid rgba(247,250,242,.4);background:rgba(247,250,242,.08);color:var(--milk);font:600 17px/1 'Inter',sans-serif}
.kb-suche-gross input::placeholder{color:var(--milk-soft);font-weight:500}
.kb-suche-gross input:hover,.kb-suche-gross input:focus{border-color:var(--lime)}
.kb-suche-gross .lupe{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:.75;pointer-events:none}
.kb-ohne-js{margin-top:14px;font-size:13.5px;color:var(--milk-soft)}

/* Kapitelliste auf der Startseite und auf der Seite einer Anwendung. Oberste Ebene ist
   die ANWENDUNG; seit dem 28.9.2026 traegt sie einen Verweis auf ihre eigene Seite. */
.kb-kapitel-liste{display:grid;gap:clamp(30px,4vw,48px);padding:clamp(40px,5vw,66px) 0 clamp(60px,8vw,100px)}
.kb-gruppe-block{display:grid;gap:clamp(22px,2.6vw,32px)}
.kb-gruppe-block>h2{margin:0;padding-bottom:12px;border-bottom:2px solid var(--yellow);font-size:clamp(26px,3.4vw,34px)}
.kb-gruppe-block>h2 a{text-decoration:none}
.kb-gruppe-block>h2 a:hover{color:var(--forest-deep);text-decoration:underline;text-underline-offset:6px}
.kb-gruppe-block>.kb-gruppe-kurz{margin-top:-14px;color:var(--ink-soft);max-width:720px}
/* Auf der Seite einer Anwendung steht die Liste schon in der Artikelspalte — dort braucht
   sie oben keinen zweiten Abstand, und ihre Kapitel sind h2 statt h3. */
.kb-kapitel-liste--anwendung{padding-top:0;margin-top:clamp(28px,3.6vw,46px);gap:clamp(26px,3.2vw,40px)}
.kb-kapitel-liste--anwendung .kb-kapitel-block>h2{margin-bottom:8px;padding:0;border:0;font-size:clamp(19px,2.2vw,23px)}
.kb-kapitel-liste--anwendung .kb-kapitel-block>h2 a{text-decoration:none}
.kb-kapitel-liste--anwendung .kb-kapitel-block>h2 a:hover{color:var(--forest-deep);text-decoration:underline;text-underline-offset:4px}
/* Ein Kapitel, das noch keinen Artikel hat, sagt das — statt eine Luecke zu lassen. */
.kb-leer{color:var(--ink-soft);font-style:italic}
.kb-kapitel-karten{margin-top:34px}
.kb-gruppe-block+.kb-gruppe-block{margin-top:clamp(18px,2.4vw,30px)}
.kb-kapitel-block>h3{margin-bottom:8px;font-size:clamp(19px,2.2vw,22px)}
.kb-kapitel-block>h3 a{text-decoration:none}
.kb-kapitel-block>h3 a:hover{color:var(--forest-deep);text-decoration:underline;text-underline-offset:4px}
.kb-kapitel-block>.kb-kapitel-kurz{color:var(--ink-soft);margin-bottom:22px;max-width:720px}
.kb-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;list-style:none}
.kb-karte a{display:flex;flex-direction:column;gap:8px;height:100%;background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);padding:24px 24px 26px;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.kb-karte a:hover{border-color:var(--forest);transform:translateY(-2px)}
.kb-karte .titel{font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.35}
.kb-karte .kurz{font-size:15px;color:var(--ink-soft);line-height:1.55}

/* ============ Suchergebnisse ============ */
.kb-treffer{display:none;margin-top:22px}
.kb-treffer[data-offen="ja"]{display:block}
.kb-suche-gross .kb-treffer{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:10px;max-height:min(60vh,520px);overflow-y:auto;box-shadow:0 18px 44px rgba(10,33,26,.28)}
.kb-suche-kopf .kb-treffer{position:absolute;top:calc(100% + 8px);right:0;width:min(440px,92vw);margin-top:0;background:#fff;border:1px solid var(--paper-line);border-radius:16px;padding:8px;max-height:min(70vh,460px);overflow-y:auto;box-shadow:0 18px 44px rgba(10,33,26,.34);z-index:70}
.kb-treffer ol{list-style:none}
.kb-treffer li+li{border-top:1px solid var(--paper-line)}
.kb-treffer a{display:block;padding:13px 15px;border-radius:12px;text-decoration:none}
.kb-treffer a:hover{background:rgba(43,89,81,.05)}
/* Die drei Zeilen eines Treffers stehen untereinander. Als blosse <span> liefen Pfad,
   Titel und Textausriss in eine einzige Zeile zusammen. */
.kb-treffer .t-pfad{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:3px}
.kb-treffer .t-titel{display:block;font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.4}
.kb-treffer .t-riss{display:block;font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:4px}
.kb-treffer .t-riss mark{background:rgba(241,253,71,.55);color:var(--ink);border-radius:3px;padding:0 2px}
.kb-treffer .t-leer{padding:15px;font-size:15px;color:var(--ink-soft)}

/* ============ Fusszeile (Hausmuster der Website) ============ */
footer{background:#0A211A;color:var(--milk-soft);padding:44px 0;font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .brand{display:flex;align-items:center}
.sig-mark{fill:var(--lime)}
.sig-word{fill:var(--schnee)}
.foot .brand svg{height:33px;width:auto;display:block}
.foot .brand .sig-mark,.foot .brand .sig-word{fill:var(--schnee)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--lime)}
.foot-marke{margin-top:34px;padding-top:26px;border-top:1px solid rgba(247,250,242,.14)}
.foot-marke p{margin:0 0 10px;max-width:96ch;font-size:12px;line-height:1.7;color:rgba(247,250,242,.55)}
.foot-marke p:last-child{margin-bottom:0}
.foot-marke a{color:rgba(247,250,242,.78);text-decoration:underline;text-underline-offset:2px}
.foot-marke a:hover{color:var(--lime)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}