/* ===========================================================================
   Kartensicherheit — Webfont (selbst gehostet)
   Inter ist die Marken-Schrift laut Styleguide V03 („Basis / Schrift").
   Bewusst NICHT über das Google-Fonts-CDN eingebunden: Diese Seite richtet
   sich an Verbraucher:innen in Deutschland, ein Drittanbieter-Request beim
   Seitenaufruf wäre datenschutzrechtlich angreifbar. Zusätzlich spart das
   Selbst-Hosten drei serielle Round-Trips vor dem ersten Textrender.
   Variable Font: eine Datei je Subset deckt 400–700 ab.
   =========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/wp-content/plugins/zeus-pack-kartensicherheit/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/wp-content/plugins/zeus-pack-kartensicherheit/assets/fonts/inter-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   Kartensicherheit — Color tokens
   Source: KS Website Relaunch Styleguide V03, page "Basis / Farbe"
   Philosophy: high contrast, minimal grayscale. Black & white carry the
   system; Electric Violet is the only brand/interaction color; Carnation is
   reserved strictly for warnings & status. Grau is functional only.
   =========================================================================== */
:root {
  /* --- Base palette (raw brand values) ----------------------------------- */
  --ks-violet:        #6832f6;  /* Electric Violet — primary / interaction   */
  --ks-violet-hover:  #4f1fd4;  /* darkened violet — hover / active / focus  */
  --ks-violet-press:  #4f2cac;  /* deeper press tint (styleguide variant)    */
  --ks-carnation:     #f3665c;  /* secondary — warnings & status ONLY        */
  --ks-carnation-hover:#e0463b;
  --ks-white:         #ffffff;
  --ks-black:         #000000;

  /* Functional grays — used sparingly for hierarchy & surfaces */
  --ks-grey:          #a6a6a6;  /* mid grey — borders, disabled, secondary   */
  --ks-grey-surface:  #f5f5f7;  /* light grey — section / card surface       */
  --ks-grey-line:     #e3e3e6;  /* hairline dividers                          */
  --ks-grey-placeholder:#d9d9de;/* image placeholder fill                     */
  --ks-grey-text:     #8a8a90;  /* text on placeholder fill (Bild folgt)      */
  --ks-success:       #1f7a3d;  /* status success — alert icon                */

  /* --- Semantic aliases --------------------------------------------------- */
  /* Text */
  --text-strong:    var(--ks-black);     /* headings, body on light          */
  --text-body:      var(--ks-black);     /* fliesstext is black on light     */
  --text-muted:     #5b5b60;             /* secondary text (functional grey)  */
  --text-on-violet: var(--ks-white);     /* text on violet must be white     */
  --text-on-dark:   var(--ks-white);
  --text-link:      var(--ks-violet);    /* text links = electric violet      */
  --text-link-hover:var(--ks-violet-hover);

  /* Surfaces */
  --surface-page:   var(--ks-white);
  --surface-card:   var(--ks-white);
  --surface-muted:  var(--ks-grey-surface);
  --surface-violet: var(--ks-violet);
  --surface-warning:var(--ks-carnation);
  --surface-placeholder: var(--ks-grey-placeholder);

  /* Lines & borders */
  --border-default: var(--ks-grey-line);
  --border-strong:  var(--ks-black);
  --border-interactive: var(--ks-violet);

  /* Interaction */
  --interactive:        var(--ks-violet);
  --interactive-hover:  var(--ks-violet-hover);
  --interactive-press:  var(--ks-violet-press);
  --focus-ring:         var(--ks-violet);

  /* Status / semantic */
  --status-warning:  var(--ks-carnation);
  --status-warning-hover: var(--ks-carnation-hover);
  --status-info:     var(--ks-violet);
}
/* ===========================================================================
   Kartensicherheit — Typography tokens
   Source: Styleguide "Basis / Schrift / Regeln".
   Reduced working set per styleguide: H1, H3, H5, Body (plus full scale).
   =========================================================================== */
:root {
  /* Family */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* Type scale sizes (styleguide table) */
  --h1-size: 48px;
  --h2-size: 40px;
  --h3-size: 32px;
  --h4-size: 24px;
  --h5-size: 20px;
  --h6-size: 16px;
  --body-size: 16px;
  --caption-size: 13px;

  /* Line heights */
  --h1-lh: 1.1;  /* @kind other */
  --h2-lh: 1.1;  /* @kind other */
  --h3-lh: 1.2;  /* @kind other */
  --h4-lh: 1.3;  /* @kind other */
  --h5-lh: 1.4;  /* @kind other */
  --h6-lh: 1.4;  /* @kind other */
  --body-lh: 1.6;  /* @kind other */
  --caption-lh: 1.4;  /* @kind other */

  /* Letter spacing / tracking */
  --h1-tracking: -0.02em;  /* @kind other */
  --h2-tracking: -0.02em;  /* @kind other */
  --h3-tracking: -0.01em;  /* @kind other */
  --h4-tracking: -0.01em;  /* @kind other */
  --h5-tracking: 0em;      /* @kind other */
  --h6-tracking: 0em;      /* @kind other */
  --body-tracking: 0em;    /* @kind other */
  --caption-tracking: 0.02em;  /* @kind other */

  /* Weights mapped to scale */
  --h1-weight: var(--fw-bold);
  --h2-weight: var(--fw-bold);
  --h3-weight: var(--fw-semibold);
  --h4-weight: var(--fw-semibold);
  --h5-weight: var(--fw-medium);
  --h6-weight: var(--fw-medium);
  --body-weight: var(--fw-regular);
  --caption-weight: var(--fw-regular);

  /* Reading measure: body limited to 65–75 characters per line */
  --measure: 68ch;  /* @kind other */
}
/* ===========================================================================
   Kartensicherheit — Spacing, radii, shadows & layout
   Source: Styleguide "Basis / Schrift / Regeln" (8px grid) and "Basis / Raum".
   All spacing is a multiple of 8. Rounded section/image corners are a core
   visual motif (styleguide: "Bild XL abgerundet").
   =========================================================================== */
:root {
  /* 8px spacing grid */
  --space-1: 8px;   /* icon ↔ label             */
  --space-2: 16px;  /* standard between elements */
  --space-3: 24px;  /* between related blocks    */
  --space-4: 32px;
  --space-6: 48px;  /* between sections          */
  --space-8: 64px;
  --space-10: 80px; /* large page / hero spacing */
  --space-12: 96px;

  /* Radii — pills are fully round; sections/images use the large radius */
  --radius-sm: 8px;
  --radius-md: 16px;   /* cards, inputs            */
  --radius-lg: 24px;   /* media, larger cards      */
  --radius-xl: 40px;   /* rounded section corners  */
  --radius-pill: 999px;/* buttons, tags, filters   */

  /* Borders */
  --border-width: 1.5px;
  --border-width-strong: 2px;

  /* Focus ring (keyboard accessibility — visible & branded) */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Shadows — restrained; the system relies on contrast, not depth */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.10);
  --shadow-violet: 0 12px 32px rgba(104,50,246,0.24);

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-3);
  --content-measure: 68ch;

  /* Motion — subtle, functional, no bounce */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;  /* @kind other */
  --dur-slow: 320ms;  /* @kind other */
}

/* ===========================================================================
   Kartensicherheit — Base element & utility styles
   Applies the type scale and interaction rules from the styleguide.
   =========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Type scale utilities ------------------------------------------------- */
.ks-h1, .ks-h2, .ks-h3, .ks-h4, .ks-h5, .ks-h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-heading);
  text-wrap: balance;
}
.ks-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); font-weight: var(--h1-weight); }
.ks-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); font-weight: var(--h2-weight); }
.ks-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); font-weight: var(--h3-weight); }
.ks-h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); font-weight: var(--h4-weight); }
.ks-h5 { font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-tracking); font-weight: var(--h5-weight); }
.ks-h6 { font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-tracking); font-weight: var(--h6-weight); }

.ks-body    { font-size: var(--body-size); line-height: var(--body-lh); font-weight: var(--body-weight); }
.ks-caption { font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: var(--caption-tracking); font-weight: var(--caption-weight); color: var(--text-muted); }
.ks-measure { max-width: var(--content-measure); }

/* --- Links (styleguide: violet, underline on hover, ring on focus) -------- */
.ks-link {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-radius: 4px;
}
.ks-link:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--text-link-hover); }

/* --- Global keyboard focus state ----------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 6px;
}

/* --- Layout helpers ------------------------------------------------------- */
.ks-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================================
   Kartensicherheit — Component styles
   Class-based styles for the React component primitives. Shipped to consumers
   via styles.css. All interaction states (hover/active/focus/disabled) live
   here so they behave correctly outside React state.
   =========================================================================== */

/* --- Button --------------------------------------------------------------- */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 16px;
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-pill); border: var(--border-width-strong) solid transparent;
  padding: 14px 26px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.ks-btn--sm { padding: 9px 16px; font-size: 14px; }
.ks-btn--lg { padding: 17px 32px; font-size: 18px; }
.ks-btn--full { width: 100%; }
.ks-btn__icon { display: inline-flex; width: 1.15em; height: 1.15em; }
.ks-btn__icon svg { width: 100%; height: 100%; }

.ks-btn--primary { background: var(--ks-violet); color: #fff; }
.ks-btn--primary:hover { background: var(--ks-violet-hover); }
.ks-btn--primary:active { background: var(--ks-violet-press); transform: translateY(1px); }

.ks-btn--secondary { background: transparent; color: var(--ks-violet); border-color: var(--ks-violet); }
.ks-btn--secondary:hover { background: var(--ks-violet); color: #fff; }
.ks-btn--secondary:active { background: var(--ks-violet-press); border-color: var(--ks-violet-press); transform: translateY(1px); }

.ks-btn--ghost { background: transparent; color: var(--ks-violet); padding-inline: 12px; }
.ks-btn--ghost:hover { background: rgba(104,50,246,0.08); }

.ks-btn--warning { background: var(--ks-carnation); color: #fff; }
.ks-btn--warning:hover { background: var(--ks-carnation-hover); }
.ks-btn--warning:active { transform: translateY(1px); }

/* On violet/dark surfaces: white button */
.ks-btn--on-violet { background: #fff; color: var(--ks-violet); }
.ks-btn--on-violet:hover { background: rgba(255,255,255,0.88); }

.ks-btn:disabled, .ks-btn[aria-disabled="true"] {
  background: var(--ks-grey-surface); color: var(--ks-grey); border-color: transparent;
  cursor: not-allowed; pointer-events: none;
}

/* --- Icon button ---------------------------------------------------------- */
.ks-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill); cursor: pointer;
  border: var(--border-width-strong) solid transparent; background: transparent; color: var(--text-strong);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ks-iconbtn svg { width: 22px; height: 22px; }
.ks-iconbtn:hover { background: var(--ks-grey-surface); }
.ks-iconbtn--solid { background: var(--ks-violet); color: #fff; }
.ks-iconbtn--solid:hover { background: var(--ks-violet-hover); }
.ks-iconbtn--outline { border-color: var(--border-default); }
.ks-iconbtn--outline:hover { border-color: var(--ks-violet); color: var(--ks-violet); background: transparent; }

/* --- LinkText (the "Mehr erfahren …" link) -------------------------------- */
.ks-linktext {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ks-violet);
  font-weight: var(--fw-medium); text-decoration: none; border-radius: 4px; cursor: pointer;
}
.ks-linktext:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ks-violet-hover); }
.ks-linktext svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.ks-linktext:hover svg { transform: translateX(2px); }

/* --- Tag & Badge ---------------------------------------------------------- */
.ks-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-medium);
  padding: 6px 14px; border-radius: var(--radius-pill); background: var(--ks-grey-surface);
  color: var(--text-strong); border: var(--border-width) solid transparent;
}
.ks-tag--violet { background: var(--ks-violet); color: #fff; }
.ks-tag--outline { background: transparent; border-color: var(--border-default); color: var(--text-muted); }
.ks-tag--clickable { cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ks-tag--clickable:hover { border-color: var(--ks-violet); color: var(--ks-violet); }

.ks-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 7px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-semibold);
  background: var(--ks-carnation); color: #fff; line-height: 1;
}
.ks-badge--violet { background: var(--ks-violet); }
.ks-badge--neutral { background: var(--ks-grey); }

/* --- Form fields ---------------------------------------------------------- */
.ks-field { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans); }
.ks-field__label { font-size: 14px; font-weight: var(--fw-medium); color: var(--text-strong); }
.ks-field__hint { font-size: 13px; color: var(--text-muted); }
.ks-field__error { font-size: 13px; color: var(--ks-carnation); font-weight: var(--fw-medium); }

.ks-input, .ks-textarea, .ks-select {
  font-family: var(--font-sans); font-size: 16px; color: var(--text-strong);
  background: #fff; border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md); padding: 13px 16px; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ks-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.ks-input::placeholder, .ks-textarea::placeholder { color: var(--ks-grey); }
.ks-input:hover, .ks-textarea:hover, .ks-select:hover { border-color: var(--ks-grey); }
.ks-input:focus, .ks-textarea:focus, .ks-select:focus {
  outline: none; border-color: var(--ks-violet); box-shadow: 0 0 0 3px rgba(104,50,246,0.18);
}
.ks-input[aria-invalid="true"], .ks-textarea[aria-invalid="true"] { border-color: var(--ks-carnation); }
.ks-input:disabled, .ks-textarea:disabled, .ks-select:disabled {
  background: var(--ks-grey-surface); color: var(--ks-grey); cursor: not-allowed;
}
.ks-select { appearance: none; -webkit-appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; cursor: pointer; }

/* --- Checkbox / Radio ----------------------------------------------------- */
.ks-choice { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; font-size: 16px; color: var(--text-strong); }
.ks-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.ks-choice__box {
  width: 24px; height: 24px; flex: none; border: var(--border-width-strong) solid var(--ks-grey);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); color: #fff;
}
.ks-choice__box--check { border-radius: 7px; }
.ks-choice__box--radio { border-radius: 50%; }
.ks-choice__box svg { width: 16px; height: 16px; opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ks-choice__box .ks-radio-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0.4); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ks-choice input:checked + .ks-choice__box { background: var(--ks-violet); border-color: var(--ks-violet); }
.ks-choice input:checked + .ks-choice__box svg,
.ks-choice input:checked + .ks-choice__box .ks-radio-dot { opacity: 1; transform: scale(1); }
.ks-choice input:focus-visible + .ks-choice__box { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.ks-choice:hover .ks-choice__box { border-color: var(--ks-violet); }

/* --- Toggle / Switch ------------------------------------------------------ */
.ks-toggle { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; font-size: 16px; color: var(--text-strong); }
.ks-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ks-toggle__track { width: 48px; height: 28px; border-radius: var(--radius-pill); background: var(--ks-grey); position: relative; transition: background var(--dur) var(--ease); flex: none; }
.ks-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-sm); }
.ks-toggle input:checked + .ks-toggle__track { background: var(--ks-violet); }
.ks-toggle input:checked + .ks-toggle__track .ks-toggle__thumb { transform: translateX(20px); }
.ks-toggle input:focus-visible + .ks-toggle__track { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* --- Card ----------------------------------------------------------------- */
.ks-card {
  background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  overflow: hidden; display: flex; flex-direction: column;
}
.ks-card--flat { box-shadow: none; border: 1px solid var(--border-default); }
.ks-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

/* --- Article / Teaser card ------------------------------------------------ */
.ks-article { background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-article--link { cursor: pointer; text-decoration: none; color: inherit; }
.ks-article--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ks-article__media { aspect-ratio: 16 / 10; width: 100%; }
.ks-article__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.ks-article__kicker { font-size: 13px; font-weight: var(--fw-semibold); color: var(--ks-violet); letter-spacing: 0.02em; }
.ks-article__title { font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0; }
.ks-article__text { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ks-article__foot { margin-top: 6px; }

/* --- Image placeholder ---------------------------------------------------- */
.ks-image-ph { width: 100%; height: 100%; background: var(--surface-placeholder); display: flex; align-items: center; justify-content: center; color: var(--ks-grey-text); }
.ks-image-ph svg { width: 15%; min-width: 32px; max-width: 56px; height: auto; }
.ks-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Section -------------------------------------------------------------- */
.ks-section { padding: var(--space-10) 0; }
.ks-section--violet { background: var(--ks-violet); color: #fff; }
.ks-section--violet .ks-section__eyebrow { color: rgba(255,255,255,0.82); }
.ks-section--warning { background: var(--ks-carnation); color: #fff; }
.ks-section--muted { background: var(--ks-grey-surface); }
.ks-section--round-b { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ks-section--round-t { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.ks-section__eyebrow { font-size: 14px; font-weight: var(--fw-semibold); color: var(--ks-violet); letter-spacing: 0.04em; text-transform: uppercase; }

/* --- Accordion ------------------------------------------------------------ */
.ks-accordion { display: flex; flex-direction: column; }
.ks-accordion__item { border-bottom: 1px solid var(--border-default); }
.ks-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: none; border: none; cursor: pointer; padding: var(--space-3) 4px; text-align: left;
  font-family: var(--font-sans); font-size: var(--h5-size); font-weight: var(--fw-medium); color: var(--text-strong);
}
.ks-accordion__trigger:hover { color: var(--ks-violet); }
.ks-accordion__icon { flex: none; width: 24px; height: 24px; color: var(--ks-violet); transition: transform var(--dur) var(--ease); }
.ks-accordion__item--open .ks-accordion__icon { transform: rotate(45deg); }
.ks-accordion__panel { overflow: hidden; }
.ks-accordion__panel-inner { padding: 0 4px var(--space-3); color: var(--text-muted); line-height: 1.6; max-width: var(--content-measure); }

/* --- Filter tabs (capsules) ----------------------------------------------- */
.ks-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ks-filter {
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-medium); cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius-pill); background: transparent;
  border: var(--border-width) solid var(--border-default); color: var(--text-strong);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ks-filter:hover { border-color: var(--ks-violet); color: var(--ks-violet); }
.ks-filter--active { background: var(--ks-violet); border-color: var(--ks-violet); color: #fff; }
.ks-filter--active:hover { color: #fff; background: var(--ks-violet-hover); }
/* On violet surfaces */
.ks-filters--on-violet .ks-filter { border-color: rgba(255,255,255,0.5); color: #fff; }
.ks-filters--on-violet .ks-filter--active { background: #fff; color: var(--ks-violet); border-color: #fff; }

/* --- Alert ---------------------------------------------------------------- */
.ks-alert {
  display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: var(--border-width) solid transparent; font-size: 15px; line-height: 1.5;
}
.ks-alert__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.ks-alert__title { font-weight: var(--fw-semibold); display: block; margin-bottom: 2px; }
.ks-alert--info { background: rgba(104,50,246,0.08); border-color: rgba(104,50,246,0.28); color: var(--text-strong); }
.ks-alert--info .ks-alert__icon { color: var(--ks-violet); }
.ks-alert--warning { background: rgba(243,102,92,0.10); border-color: rgba(243,102,92,0.4); color: var(--text-strong); }
.ks-alert--warning .ks-alert__icon { color: var(--ks-carnation); }
.ks-alert--success { background: var(--ks-grey-surface); border-color: var(--border-default); color: var(--text-strong); }
.ks-alert--success .ks-alert__icon { color: var(--ks-success); }

/* --- Emergency bar ("Karte sperren") -------------------------------------- */
.ks-emergency {
  display: inline-flex; align-items: center; gap: var(--space-2); background: var(--ks-carnation);
  color: #fff; padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ks-emergency:hover { background: var(--ks-carnation-hover); }
.ks-emergency svg { width: 20px; height: 20px; flex: none; }
.ks-emergency__num { font-variant-numeric: tabular-nums; }

/* --- Media gallery -------------------------------------------------------- */
.ks-gallery { display: flex; flex-direction: column; gap: var(--space-2); }
.ks-gallery__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-placeholder); }
.ks-gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 20px 16px; color: #fff; font-size: 14px; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0)); }
.ks-gallery__thumbs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.ks-gallery__thumb { flex: none; width: 92px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: var(--border-width-strong) solid transparent; background: var(--surface-placeholder); cursor: pointer; padding: 0; transition: border-color var(--dur) var(--ease); }
.ks-gallery__thumb:hover { border-color: var(--ks-grey); }
.ks-gallery__thumb--active { border-color: var(--ks-violet); }
.ks-gallery__count { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }

/* --- Textbox (small text card; "Textbox klein 2x") ------------------------ */
.ks-textbox { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--ks-grey-surface); min-height: 180px; justify-content: flex-end; }
.ks-textbox__title { font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: var(--fw-bold); margin: 0; color: var(--text-strong); }
.ks-textbox__text { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.ks-textbox__foot { margin-top: var(--space-1); }
.ks-textbox--violet { background: var(--ks-violet); }
.ks-textbox--violet .ks-textbox__title { color: #fff; }
.ks-textbox--violet .ks-textbox__text { color: rgba(255,255,255,0.92); }
.ks-textbox--warning { background: var(--ks-carnation); }
.ks-textbox--warning .ks-textbox__title { color: #fff; }
.ks-textbox--warning .ks-textbox__text { color: rgba(255,255,255,0.94); }
/* Image-backed variant: photo with a monochrome scrim so text stays legible */
.ks-textbox--image { position: relative; overflow: hidden; background: var(--ks-black); }
.ks-textbox--image .ks-textbox__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ks-textbox--image .ks-textbox__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.25)); }
.ks-textbox--image .ks-textbox__title { color: #fff; position: relative; }
.ks-textbox--image .ks-textbox__text { color: rgba(255,255,255,0.92); position: relative; }
.ks-textbox--image .ks-textbox__foot { position: relative; }
.ks-textbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* --- Video module --------------------------------------------------------- */
.ks-video { display: flex; flex-direction: column; gap: var(--space-2); }
.ks-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ks-black); cursor: pointer; border: none; padding: 0; display: block; }
.ks-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-video__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.18); transition: background var(--dur) var(--ease); }
.ks-video__frame:hover .ks-video__scrim { background: rgba(0,0,0,0.30); }
.ks-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--ks-violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-violet); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.ks-video__frame:hover .ks-video__play { transform: translate(-50%, -50%) scale(1.06); background: var(--ks-violet-hover); }
.ks-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.ks-video__duration { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.ks-video__meta { display: flex; flex-direction: column; gap: 4px; }
.ks-video__title { font-size: var(--h5-size); font-weight: var(--fw-semibold); margin: 0; color: var(--text-strong); }
.ks-video__caption { font-size: 14px; color: var(--text-muted); margin: 0; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; }
:target { scroll-margin-top: var(--anchor-offset); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.ks-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ks-violet);
  color: #fff; padding: 12px 20px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold);
  text-decoration: none; transition: top var(--dur) var(--ease); }
.ks-skip:focus { top: 12px; }
:root {
  --h1-size: clamp(40px, 6vw, 70px);
  --h2-size: clamp(27px, 4.4vw, 40px);
  --h3-size: clamp(23px, 3.2vw, 32px);
  --h4-size: clamp(22px, 2.4vw, 24px);

  --content-max: 1250px;
  --container-max: var(--content-max);
  --content-measure: 76ch;
  --measure-col: var(--content-max);

  /* Lead = einleitender Fließtext unter einer H1; eine Stufe über dem Grundtext. */
  --lead-size: var(--h5-size);
  --lead-lh: 1.6;

  /* Hero-Maß: derselbe Abstand über und unter dem Inhalt (auch zum Bild), eine Mindesthöhe
     für Heroes ohne Bild; farbige Heroes laufen unter den fixen Header und tragen ihn oben
     zusätzlich. Übergänge zwischen Flächen sind Eigenschaften der Section (ks-seam-b) —
     kein Element hat eine eigene Höhe dafür. */
  --header-h: 73px; /* 72 px Leiste + 1 px Haarlinie */
  --header-h-stuck: 63px; /* kompakter Scrollstate: 62 px Leiste + 1 px Haarlinie */
  --header-h-current: var(--header-h);
  --header-slide-dur: 625ms; /* Scroll-Header (Duplikat): Ein- und Ausfahrt (Chris, Testansicht 06.09.) */
  --extern-grau: #e4e4e8; /* Fläche der externen Karten: Logo-Silhouette auf Grau, dunkler als --ks-grey-surface (E110; identisch in build/extern-karten.html) */
  --header-leave-y: 193px; /* Hochscrollen: ab dieser Scrollposition fährt der Scroll-Header aus; die normale Kopfzeile bleibt im Seitenfluss (Chris, Testansicht 06.09.) */
  --anchor-offset: 96px; /* Sprungziele: Kopfzeile + Luft (ersetzt die festen 96 px) */
  --stickybar-h: 0px; /* sichtbarer Teil des Overscroll-Bands unter der Kopfzeile (stickybar.js) */
  --stickybar-dur: var(--header-slide-dur); /* Overscroll-Leisten und mobile Suchleiste fahren so schnell wie der Scroll-Header (Chris, Runde 15) */
  --title-acc: var(--h2-size); /* Akkordeon-Titel und gleich große Überschriften — H2-Token (Chris, Runde 8) */
  --acc-zoom: 1.04; --acc-zoom-dur: 480ms; /* Titel-Zoom der Akkordeon-Zeile beim Zeigen und im offenen Zustand, linksbündig (Runde 10) */
  --hero-pad: var(--space-10);
  --hero-min: 528px;

  /* Kopfzeile (Runde 5): Logo, Symbolknöpfe, mobile Menüschrift. */
  --logo-h-basis: 27px; /* Runde 24: anfangs etwas kleiner, dieselbe Zielhöhe auch beim Scrollen. Wortmarke und Abstand folgen proportional (E111). */
  --nav-optik: 2.5px; /* Menüpunkte optisch auf die Wortmarke gesetzt (Chris: margin-top 5 px in der zentrierten Zeile) */
  --aktion-size: 28px; /* Symbole der Kopfzeilen-Aktionen ohne Kreis (Chris: 33 × 28) */
  --aktion-size-stuck: 26px;
  --nav-size-stuck: 14px; /* Menüpunkte im Scroll-Header; die Pillen der Overscroll-Bänder lesen dieselbe Größe (Chris, Runde 17) */
  --logo-wort-faktor: 1.25; /* Wortmarke ohne Unterzeile: 1,25 × Basis-em (Chris, ks_wortmarke.html) */
  --logo-h-mobile: var(--logo-h-basis); /* Auch mobil in beiden Kopfzeilen gleich; bei Platzmangel verkleinert sich das gesamte Logo. */
  --iconbtn-size: 44px;
  --iconbtn-size-mobile: 36px; /* Kreis-Symbole mobil etwas kleiner (Runde 9) */
  --mobilenav-size: 22px;
  --logo-gap-em: 0.428; /* Lücke Wappen → Wortmarke, in em der Basis (Wappen = 1,5 em, E111); Desktop weiter, siehe unten (Chris, Runde 16) */
  --aktion-gap: 14px; /* Abstand Suche · Login in der Kopfzeile */
  --aktion-gap-mobile: 4px; /* Lupe · Account · Menü mobil enger (Chris, Runde 16; sichtbarer Abstand = Wert + Zielflächen-Luft) */
  --mobilenav-link-dur: 640ms; --mobilenav-stagger: 140ms; --mobilenav-link-y: 18px; /* Menüpunkte langsamer und deutlich nacheinander (Chris, Runde 16) */
  --backdrop-dur: 640ms; --backdrop-alpha: 0.6; /* Abdunkelung hinter dem mobilen Menü: langsam einblenden, sichtbarer (Chris, Runde 16) */

  /* Akzentfarbe der Seite. Standard Electric Violet; Carnation-Themenseiten
     (z. B. Kartensperrung) setzen sie über body.ks-theme-carnation um. Alles,
     was „Akzent“ meint (Kartenbadges, Konturen, Füllungen), liest von hier. */
  --ctx-accent: var(--ks-violet);
  --ctx-accent-hover: var(--ks-violet-hover);
  /* Text in Akzentfarbe (Links, Hover-Titel, „Mehr erfahren“) liest --ctx-link: auf Weiß
     und Grau mindestens 4,5:1. Carnation (#f3665c) erreicht auf Weiß nur 3,06:1 — der
     Textton ist derselbe Farbwinkel, abgedunkelt: 5,2:1 auf Weiß, 4,8:1 auf Grau. */
  --ks-carnation-text: #c8372d;
  --ks-carnation-text-hover: #b92e24;
  --ctx-link: var(--ks-violet);
  --ctx-link-hover: var(--ks-violet-hover);
  --text-link: var(--ctx-link);
  --text-link-hover: var(--ctx-link-hover);
}
@media (min-width: 1121px) { :root { --logo-gap-em: 0.6; --logo-h-basis: 29px; } } /* Desktop: Wortmarke weiter vom Wappen (Runde 16), Logo leicht größer (E168). */
/* Ein Token, das ein anderes referenziert, wird am Ort seiner Definition aufgelöst und
   danach als fester Wert vererbt — deshalb setzt die Themenklasse --text-link selbst. */
.ks-theme-carnation { --ctx-accent: var(--ks-carnation); --ctx-accent-hover: var(--ks-carnation-hover);
  --ctx-link: var(--ks-carnation-text); --ctx-link-hover: var(--ks-carnation-text-hover);
  --text-link: var(--ks-carnation-text); --text-link-hover: var(--ks-carnation-text-hover); }

/* ---------------------------------------------------------------------------
   Kontextfarben. Das Designsystem gibt Überschriften, Fließtext und Links ihre
   Farbe über die Tokens --text-strong / --text-body / --text-link. Eine dunkle
   Fläche belegt genau diese Tokens um — und alles darauf folgt, ohne dass je
   ein Kindelement einzeln adressiert werden muss. Helle Boxen auf dunkler
   Fläche (Karten, Formularfelder, Textboxen) setzen die Tokens zurück.
   --------------------------------------------------------------------------- */
.ks-section--violet, .ks-section--warning,
.ks-mb--violet, .ks-block-intro--violet, .ks-block-intro--carnation,
.ks-acc--violet, .ks-acc--carnation,
.ks-hero, .ks-blog-band, .ks-fb-band--violet, .ks-fb-band--carnation,
.ks-mb-onviolet, .ks-textbox--violet, .ks-textbox--warning, .ks-textbox--image, .ks-stickybar {
  color: #fff;
  --text-strong: #fff;
  --text-body: rgba(255,255,255,0.92);
  --text-muted: rgba(255,255,255,0.85); /* 0,75 lag auf Violett bei 4,15:1 */
  --text-link: #fff;
  --text-link-hover: rgba(255,255,255,0.85);
  --focus-ring: #fff;
}
/* Links auf dunkler Fläche: Weiß mit Unterstreichung — Farbe allein trüge nicht. */
:is(.ks-section--violet, .ks-section--warning, .ks-mb--violet, .ks-block-intro--violet,
    .ks-block-intro--carnation, .ks-acc--violet, .ks-acc--carnation, .ks-hero, .ks-blog-band,
    .ks-fb-band--violet, .ks-fb-band--carnation, .ks-mb-onviolet, .ks-textbox--violet,
    .ks-textbox--warning, .ks-textbox--image, .ks-stickybar) :is(.ks-link, .ks-link:hover) {
  text-decoration: underline; text-underline-offset: 2px; }
/* Helle Boxen auf dunkler Fläche: eigener Kontext, Akzent der Seite. */
.ks-cardlet, .ks-article, .ks-form-panel .ks-input, .ks-form-panel .ks-select, .ks-form-panel .ks-textarea,
.ks-textbox:not(.ks-textbox--violet):not(.ks-textbox--warning):not(.ks-textbox--image), .ks-searchbar, .ks-hero__feed-off {
  --text-strong: var(--ks-black);
  --text-body: var(--ks-black);
  --text-muted: #5b5b60;
  --text-link: var(--ctx-link);
  --text-link-hover: var(--ctx-link-hover);
  --focus-ring: var(--ks-violet);
}
/* Akzent-Elemente außerhalb von Textlinks lesen ebenfalls den Seitenakzent. */
.ks-linktext { color: var(--text-link); }
.ks-linktext:hover { color: var(--text-link-hover); }
/* Intro-Text unter einer H1 — eine Klasse für alle Heroes und Seitenköpfe; die Farbe
   kommt aus dem Kontext der Fläche. */
.ks-lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--text-body);
  max-width: var(--content-measure); }

/* ---------------------------------------------------------------------------
   Vertikaler Rhythmus — eine Quelle. Der Reset oben nullt alle Textabstände;
   hier werden sie für jeden Fließtext-Container gleich wieder aufgebaut. Die
   Werte greifen auf direkte Kinder; verschachtelte Bausteine (Video, Bild,
   Musterblock) gehören deshalb als eigenes Kind in den Container, nicht in
   eine Listenzeile.
   --------------------------------------------------------------------------- */
:root { --flow: 16px; --flow-h2: 32px; --flow-h3: 24px; --flow-block: 24px; }
:is(.ks-prose, .ks-acc__inner, .ks-legal__body, .ks-mb > .ks-container, .ks-mb > .ks-measure-col, .ks-mb-split > div, .ks-block-intro__grid > div, .ks-hero__text) > * + * {
  margin-top: var(--flow); }
:is(.ks-prose, .ks-acc__inner, .ks-legal__body, .ks-mb > .ks-container, .ks-mb > .ks-measure-col, .ks-mb-split > div, .ks-hero__text) > :is(ul, ol, figure, .ks-video, .ks-mb-media, .ks-mb, .ks-prose, .ks-mb-split, .ks-filters) + * {
  margin-top: var(--flow-block); }
:is(.ks-prose, .ks-acc__inner, .ks-legal__body, .ks-mb > .ks-container, .ks-mb > .ks-measure-col, .ks-mb-split > div, .ks-hero__text) > * + :is(ul, ol, figure, .ks-video, .ks-mb-media, .ks-mb, .ks-prose, .ks-mb-split, .ks-filters) {
  margin-top: var(--flow-block); }
/* Überschriften zuletzt: Vor einer H2 gilt ihr Abstand auch dann, wenn davor ein Block steht. */
:is(.ks-prose, .ks-acc__inner, .ks-legal__body, .ks-mb > .ks-container, .ks-mb > .ks-measure-col, .ks-mb-split > div, .ks-hero__text) > * + :is(h3, h4, .ks-h3, .ks-h4) {
  margin-top: var(--flow-h3); }
:is(.ks-prose, .ks-acc__inner, .ks-legal__body, .ks-mb > .ks-container, .ks-mb > .ks-measure-col, .ks-mb-split > div, .ks-hero__text) > * + :is(h2, .ks-h2) {
  margin-top: var(--flow-h2); }
/* Intro unter einer H1 (Hero, Seitenkopf) bekommt mehr Luft als der Fließtext-Rhythmus (Chris, Runde 8). */
:is(.ks-hero__text, .ks-block-intro__grid > div, .ks-blog-band__grid > div) > .ks-h1 + .ks-lead { margin-top: var(--space-3); }
/* Ein Zweispalter, der selbst Rhythmus-Container ist (Container-Klasse am Grid), verteilt keinen Flow
   auf seine Spalten — gleiche Spezifität wie die Blockregeln oben, deshalb danach. */
.ks-mb > .ks-mb-split > :not(:first-child) { margin-top: 0; }
/* Ein Video im Fließtext steht rechtsbündig auf Lesemaß, nicht auf voller Breite. */
:is(.ks-prose, .ks-acc__inner) > .ks-video { max-width: 640px; margin-left: auto; }

html.has-stuck-header { --header-h-current: var(--header-h-stuck); }
/* Seiten ohne Kopf- und Fußzeile (Zwischenseite, 404): Inhalt füllt den Viewport (Runde 16). */
.ks-standalone { min-height: 100dvh; display: flex; flex-direction: column; }
.ks-standalone > main { flex: 1 0 auto; }
/* Gleitende Pille (js-lib/pille.js): animierbare Positionswerte, global registriert — genutzt von der
   Hauptnavigation (Schriftmaske) und dem Overscroll-Band (Runde 16). */
@property --ks-pill-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --ks-pill-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* Sprungziele und programmatische Scrolls landen unter dem fixen Header (72 px + Luft). */
html { scroll-padding-top: var(--anchor-offset); }
.ks-section--round-tb { border-radius: var(--radius-xl); }
.ks-measure-col { max-width: var(--measure-col); margin-inline: auto; }
.ks-wide-col { max-width: var(--content-max); margin-inline: auto; }
.ks-seam-b { border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 var(--radius-xl) 0 0 var(--seam-to, transparent); }
.ks-seam-b--violet { --seam-to: var(--ks-violet); }
.ks-seam-b--carnation { --seam-to: var(--ks-carnation); }
.ks-seam-b--black { --seam-to: var(--ks-black); }
.ks-seam-b--grey { --seam-to: var(--ks-grey-surface); }
@media (max-width: 760px) {
  :root { --radius-xl: 24px; --container-pad: 20px; --body-size: 15px; --header-h-stuck: 56px; } /* mobiler Scroll-Header kompakter: 55 px Leiste + Haarlinie, Logo 36 px, Wortmarke +10 % (Chris, Runde 15) */
}
:root { --ks-spring: cubic-bezier(0.2, 0.8, 0.2, 1); } /* federnder Auslauf für Bedienelemente (Feed-Adressfeld, Runde 16) */
:root { --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-dur: 1000ms; --reveal-y: 24px; --reveal-stagger: 120ms; }
.ks-reveal { opacity: 0; }
.ks-reveal.is-revealed {
  opacity: 1;
  animation: ks-reveal-in var(--reveal-dur) var(--ease-reveal) backwards;
  animation-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}
@keyframes ks-reveal-in {
  from { opacity: 0; transform: translateY(var(--reveal-y)); }
}
.ks-reveal.ks-hero__media, .ks-reveal.ks-split__media { --reveal-y: 40px; }
@media (prefers-reduced-motion: reduce) {
  .ks-reveal { opacity: 1 !important; animation: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  /* Hover ohne Schein (Chris 14.09.2026, E27: Hover = Farbe, max. 2 px Bewegung). */
  .ks-iconbtn--outline:hover {
    background: var(--ks-violet-hover);
    border-color: var(--ks-violet-hover);
    color: #fff;
  }
}

p:has(> .ks-linktext:only-child):not(.ks-article__foot):not(.ks-blog-overview__feed) {
  margin-top: 20px;
}

/* Umbruchpflege für Fließtext und Kartentitel */
.ks-prose p, .ks-prose li, .ks-lead, .ks-mb p, .ks-cardlet__text, .ks-article__text { text-wrap: pretty; }
.ks-cardlet__title, .ks-article__title, .ks-blog-miniteaser__title { text-wrap: balance; }

/* T-07 — lange Wörter brechen um, statt an der Viewportkante zu kappen */
.ks-h1, .ks-h2, .ks-h3, .ks-h4, .ks-h5 { overflow-wrap: break-word; hyphens: manual; } /* keine automatische Silbentrennung in Überschriften (Runde 8) */
.ks-blog-miniteaser__title { overflow-wrap: anywhere; } /* Leisten-Teaser: ein überlanges Einzelwort („Cybersicherheitsmonitor“) bricht in der schmalen Leistenspalte um, statt über Leiste und Viewport hinauszuragen (Runde 22) */
/* Lange H1 im Hero-Zweispalter (Startseite): eine Stufe kleiner, damit die Satzpaare nicht wortweise umbrechen (Runde 8). */
.ks-h1--lang { font-size: clamp(34px, 4.6vw, 64px); }

/* Übergänge: Die Section über dem Übergang trägt Rundung und Folgefarbe (ks-seam-b, oben).
   Das frühere Hilfselement .ks-seam und das 72-px-Band (CB 18) sind entfallen — sie haben
   den Abstand zur nächsten Fläche je Seite verschoben (Runde 4). */

/* R-01 — Rahmen von Bedienelementen im Ruhezustand >= 3:1 (Override der gesperrten ks-components.css) */
:root { --border-control: var(--text-muted); }
.ks-input, .ks-textarea, .ks-select { border-color: var(--border-control); }
.ks-input:hover, .ks-textarea:hover, .ks-select:hover { border-color: var(--ks-violet); }
.ks-choice__box { border-color: var(--border-control); }

/* R-02 — Formularfelder tragen denselben Fokusring wie Links und Buttons */
.ks-input:focus-visible, .ks-textarea:focus-visible, .ks-select:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.ks-searchfield__input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* CD-04 — Checkbox-Rundung auf die Token-Stufe */
.ks-choice__box--check { border-radius: var(--radius-sm); }

/* E21 / P-11 — Kartentext 16/1.6 (Override der gesperrten ks-components.css) */
.ks-article__text, .ks-textbox__text { font-size: var(--body-size); line-height: var(--body-lh); }

/* M-08 — Kartenteaser ohne Satzabbruch auf allen Breiten: der Kundentext bleibt vollständig,
   die Karten bleiben über .ks-article__body { flex: 1 } gleich hoch */
.ks-article__text { display: block; -webkit-line-clamp: none; overflow: visible; }

/* E20 / C-03 — alle Kacheltitel im selben Gewicht */
.ks-video__title { font-weight: var(--fw-bold); }

/* C-05 — das Icon dehnt die Zeilenbox nicht mehr: Buttons mit und ohne Icon sind gleich hoch */
.ks-btn__icon { height: 1em; align-items: center; justify-content: center; }
.ks-btn__icon svg { width: 1.15em; height: 1.15em; }

/* Aktionsabstand (Chris 14.09.2026): Knöpfe stehen nie direkt am Text. */
:where(p, ul, ol, .ks-prose, .ks-field, .ks-choice, .ks-lead, h2, h3, h4, table, figure, .ks-table-wrap) + :where(.ks-mb-buttons, .ks-profil-form__senden, .ks-premium-downloads, .ks-btn) { margin-top: var(--space-3); }

/* CD-01 / R-01 — Platzhalter-Icon aus der Token-Palette */
.ks-image-ph { color: var(--text-muted); }

/* R-01 — Kontur der inaktiven Filterpillen auf Violett >= 3:1 (E18 bleibt unberührt) */
.ks-filters--on-violet .ks-filter { border-color: rgba(255,255,255,0.7); }

/* H-02 / E27 — verlinkte Rubrik-Pille bekommt einen Hover-Zustand */
a.ks-tag--violet:hover { background: var(--ks-violet-hover); }
.ks-blog-meta--on-violet a.ks-tag--violet:hover { background: rgba(255,255,255,0.88);
  color: var(--ks-violet-hover); }

/* T-02 — Statement-Absätze außerhalb von .ks-prose ebenfalls ohne Waisen */
.ks-plakat-statement__text { text-wrap: pretty; }

/* T-01 — auch die übrigen Kartentitel werden ausgeglichen (C-03) */
.ks-textbox__title, .ks-video__title { text-wrap: balance; }

/* CD-05 — Videodauer auf die kleinste Stufe der Skala */
.ks-video__duration { font-size: 13px; }

/* CD-06 — Scrim monochrom statt Verlauf (Override der gesperrten ks-components.css) */
.ks-textbox--image .ks-textbox__scrim { background-image: none; background-color: rgba(0,0,0,0.55); }

/* ---------------------------------------------------------------------------
   Link-Hover für alleinstehende Textlinks (Pfeil-Links, Fußzeile, Brotkrumen,
   Kapitelverzeichnis, Telefon-Links): eine 2-px-Linie in der Textfarbe wächst von
   links unter den Text (Chris, Runde 5 — Variante 1). Links im Fließtext wechseln
   nur die Farbe; auf dunklen Flächen bleibt die dauerhafte Unterstreichung
   (Kontextblock). Akkordeon-Titel gleiten beim Zeigen nach rechts (cb19-akkordeon.css).
   --------------------------------------------------------------------------- */
.ks-footer__link, .ks-breadcrumb a, .ks-blog-topline a, .ks-plakat-topline__meta a, .ks-legal__link,
.ks-fb-tel, .ks-plakat-tel, .ks-blog-emergency__num, .ks-footer__meta a, .ks-cardlet__more { display: inline-block; }
.ks-linktext, .ks-footer__link, .ks-breadcrumb a, .ks-blog-topline a, .ks-plakat-topline__meta a,
.ks-legal__link, .ks-fb-tel, .ks-plakat-tel, .ks-blog-emergency__num, .ks-footer__meta a, .ks-cardlet__more {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; padding-bottom: 2px;
  transition: background-size 320ms var(--ease-reveal), color var(--dur) var(--ease); }
.ks-linktext:hover, .ks-footer__link:hover, .ks-breadcrumb a:hover, .ks-blog-topline a:hover,
.ks-plakat-topline__meta a:hover, .ks-legal__link:hover, .ks-fb-tel:hover, .ks-plakat-tel:hover,
.ks-blog-emergency__call:hover .ks-blog-emergency__num, .ks-footer__meta a:hover,
.ks-cardlet--link:hover .ks-cardlet__more { background-size: 100% 2px; text-decoration: none; }
.ks-link:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .ks-linktext, .ks-footer__link, .ks-breadcrumb a, .ks-blog-topline a, .ks-plakat-topline__meta a,
  .ks-legal__link, .ks-fb-tel, .ks-plakat-tel, .ks-blog-emergency__num, .ks-footer__meta a, .ks-cardlet__more { transition: color var(--dur) var(--ease); }
}

/* Karten: ein Innenabstand (space-3) für alle Kartenarten — Kartenreihe, Artikel, Textbox, Feed (Runde 4). */
.ks-textbox { padding: var(--space-3); }

/* Intro-Texte mobil höchstens 18 px (Runde 5). */
@media (max-width: 760px) { :root { --lead-size: 18px; } }

/* Kein Fokusrahmen nach Klick oder Tipp — der Tastaturfokus (:focus-visible im DS) bleibt (Runde 5;
   seitenweit für Links, Knöpfe und fokussierbare Elemente, Runde 6). */
:where(a, button, [tabindex]) { -webkit-tap-highlight-color: transparent; }
:where(a, button, [tabindex]):focus:not(:focus-visible) { outline: 0; }

/* Überschrift in Akkordeon-Titelgröße — „Pressemitteilungen“ neben „Presseverteiler“ (Runde 6). */
.ks-h2--acc { font-size: var(--title-acc); line-height: 1.1; letter-spacing: -0.02em; }
.ks-section > .ks-container > .ks-h2 + .ks-filters { margin-top: var(--space-3); }
.ks-section > .ks-container > .ks-filters + .ks-grid-3 { margin-top: var(--space-6); }

/* Runde 9 — Excerpts: eine Länge für alle Kartentexte (Zeilen-Clamp über ein Token). */
:root { --excerpt-lines: 3; --scroll-fade: 56px; }
.ks-cardlet__text, .ks-article__text, .ks-result__text { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--excerpt-lines); overflow: hidden; }
/* Runde 9 — Überschriften in Blog- und Presse-Artikeln fett. */
.ks-blog :is(h1, h2, h3, h4, .ks-h1, .ks-h2, .ks-h3, .ks-h4) { font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------------------
   Bewegung (impeccable animate, Runde 9). Motion-These: ein Auftritt je Seite — der Seitenkopf.
   Der Text kommt mit dem sicheren Auslauf (--ease-reveal) an, das Bild öffnet sich aus der violetten
   Fläche mit der Rundung des Designs (clip-path inset … round). Dazu zwei tragende Zustände: die
   Leiste im Overscroll-Band setzt nach dem Andocken nach (Kontinuität), Karten zoomen ihr Bild beim
   Zeigen (Rückmeldung). Kein Scroll-Reveal. Mit Bewegungswunsch „reduziert“ bleibt nur das Überblenden.
   --------------------------------------------------------------------------- */
:root { --auftritt-dur: 700ms; --auftritt-stagger: 90ms; --auftritt-y: 22px; --auftritt-bild-dur: 900ms; }
:is(.ks-hero__text, .ks-block-intro__grid > div, .ks-blog-band__grid > div) > *,
.ks-blog-band .ks-breadcrumb, .ks-hero__inner > .ks-searchbar {
  animation: ks-auftritt var(--auftritt-dur) var(--ease-reveal) both; }
:is(.ks-hero__text, .ks-block-intro__grid > div, .ks-blog-band__grid > div) > :nth-child(2) { animation-delay: var(--auftritt-stagger); }
:is(.ks-hero__text, .ks-block-intro__grid > div, .ks-blog-band__grid > div) > :nth-child(3),
.ks-hero__inner > .ks-searchbar { animation-delay: calc(2 * var(--auftritt-stagger)); }
:is(.ks-hero__text, .ks-block-intro__grid > div, .ks-blog-band__grid > div) > :nth-child(n + 4) { animation-delay: calc(3 * var(--auftritt-stagger)); }
:is(.ks-hero__media, .ks-hero__feed, .ks-block-intro__media, .ks-blog-band__media) {
  animation: ks-auftritt-bild var(--auftritt-bild-dur) var(--ease-reveal) both; animation-delay: 120ms; }
@keyframes ks-auftritt {
  from { opacity: 0; transform: translateY(var(--auftritt-y)); }
}
@keyframes ks-auftritt-bild {
  from { opacity: 0; transform: scale(1.03); clip-path: inset(14% 0 14% 0 round var(--radius-lg)); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}
/* Karten: das Bild zoomt beim Zeigen leicht heran — Rückmeldung zur ganzflächigen Klickfläche. */
.ks-cardlet__media img, .ks-article__media img { transition: transform 600ms var(--ease-reveal); }
@media (hover: hover) and (pointer: fine) {
  .ks-cardlet--link:hover .ks-cardlet__media img, .ks-article:hover .ks-article__media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ks-hero__text, .ks-block-intro__grid > div, .ks-blog-band__grid > div) > *,
  .ks-blog-band .ks-breadcrumb, .ks-hero__inner > .ks-searchbar,
  :is(.ks-hero__media, .ks-hero__feed, .ks-block-intro__media, .ks-blog-band__media) {
    animation: ks-auftritt-still 400ms var(--ease) both; animation-delay: 0s; }
  .ks-cardlet__media img, .ks-article__media img { transition: none; }
  .ks-cardlet--link:hover .ks-cardlet__media img, .ks-article:hover .ks-article__media img { transform: none; }
}
@keyframes ks-auftritt-still { from { opacity: 0; } }

/* Feed-Link im Blog-Seitenkopf (Runde 9): eine Stufe größer als der Fließtext, Symbol mitgezogen;
   fett und mit 30 px Abstand zum Lead (Chris, Runde 16 — Chris-Maß, keine Skalenstufe). */
:root { --feed-link-gap: 30px; }
.ks-linktext--feed { font-size: 18px; font-weight: var(--fw-bold); }
.ks-linktext--feed svg { width: 1.15em; height: 1.15em; }
.ks-block-intro__grid > div > .ks-blog-overview__feed, .ks-hero__text > .ks-blog-overview__feed { margin-top: var(--feed-link-gap); }
/* Feed-Link in der Artikel-Leiste als stiller Textlink statt Kontur-Karte. */
.ks-blog-rail .ks-blog-rail__feed { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0;
  border: 0; border-radius: 0; text-align: left; color: var(--text-strong); } /* Runde 16: 11,5 px → 12 px, Symbol 25,3 → 24 px (Skala) */
.ks-blog-rail .ks-blog-rail__feed svg { width: 24px; height: 24px; color: var(--ks-violet); }
.ks-blog-rail .ks-blog-rail__feed span { font-size: calc(var(--body-size) * 1.15); font-weight: var(--fw-semibold); }
.ks-blog-rail .ks-blog-rail__feed:hover { background: transparent; color: var(--ctx-link); }

/* In weißen Akkordeon-Flächen liegen Karten grau, sonst Weiß auf Weiß (Chris, Runde 9); im Kern,
   weil die Akkordeon-Klasse nicht zur Kartenreihe gehört (Drift-Prüfung). */
.ks-acc--white .ks-cardlet:not(.ks-cardlet--violet), .ks-acc--white .ks-article { background: var(--ks-grey-surface); }

/* Kopfzeile: fixe Leiste. Die Fläche liegt als ::before darunter und schiebt sich auf Farbseiten
   beim Scrollen von oben herein (Runde 5); Rundung unten wie die Akkordeon-Flächen (Runde 4).
   Ein Verhalten für alle Heroes (Runde 10): keine Haarlinie, auf weißen Heroes liegt die Fläche
   in Weiß auf Weiß, beim Scrollen wird sie auf allen Seiten grau (--ks-grey-surface) mit Schatten.
   Maße über Tokens in site-core.css: --header-h, --header-h-current, --logo-h, --logo-h-mobile, --iconbtn-size,
   --iconbtn-size-mobile, --mobilenav-size. */
.ks-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
/* Scroll-Header (Runde 15, E106): ein per JS erzeugtes Duplikat der Kopfzeile (.ks-header--kompakt,
   dauerhaft is-stuck) liegt fixiert über der Seite und fährt nach dem Überscrollen der normalen
   Kopfzeile herein, beim Hochscrollen ab --header-leave-y wieder hinaus. Die normale Kopfzeile bleibt
   unverändert im Seitenfluss — zwei Elemente, kein Zustandswechsel am selben Element. */
.ks-header--kompakt { position: fixed; transform: translateY(-100%); visibility: hidden;
  transition: transform var(--header-slide-dur) var(--ease), visibility 0s linear var(--header-slide-dur); }
.ks-header--kompakt.is-in { transform: none; visibility: visible;
  transition: transform var(--header-slide-dur) var(--ease), visibility 0s linear 0s; }
.ks-header--kompakt .ks-header__inner { animation: none; height: calc(var(--header-h-stuck) - 1px); }
/* Normale Kopfzeile bei offenem mobilem Menü: fixiert und in der weißen Ansicht (is-stuck über header.js).
   is-stuck schaltet hier nur Fläche und Farben; die kompakten Maße gelten allein für das Duplikat
   .ks-header--kompakt, damit Logo und Symbole beim Öffnen nicht springen (Chris, Runde 16). */
.ks-header.is-stuck:not(.ks-header--kompakt) { position: fixed; }
.ks-header::before { content: ""; position: absolute; inset: 0 0 -1px 0; z-index: -1; background: #fff;
  border-radius: inherit;
  transform: translateY(-102%); transition: transform 380ms var(--ease-reveal), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-header:not(.ks-header--on-color)::before { transform: none; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-header.is-stuck::before { transform: none; background: #fff; box-shadow: none;
  border-bottom: 1px solid var(--border-default); } /* Sticky: weiße Fläche, graue Haarlinie, kein Schatten (Chris, Runde 9) */
/* Dockt das Overscroll-Band an, trägt es den Schatten statt der Kopfzeile. */
.ks-header-spacer { height: var(--header-h); }
.ks-header--on-color:not(.is-stuck) .ks-header__logo img { filter: brightness(0) invert(1); }
.ks-header--on-color:not(.is-stuck) .ks-nav__link { color: #fff; }
.ks-header--on-color:not(.is-stuck) .ks-nav:not(.has-pill) .ks-nav__link:hover,
.ks-header--on-color:not(.is-stuck) .ks-nav:not(.has-pill) .ks-nav__link[aria-current] { background: #fff; color: var(--ks-black); }
.ks-header--on-color:not(.is-stuck) .ks-nav { --ks-nav-base: #fff; --ks-nav-active: var(--ks-black); }
.ks-header--on-color:not(.is-stuck) .ks-nav__pill { background: #fff; }
.ks-theme-carnation .ks-header--on-color:not(.is-stuck) .ks-nav { --ks-nav-active: #fff; }
.ks-theme-carnation .ks-header--on-color:not(.is-stuck) .ks-nav__pill { background: var(--ks-carnation); }
.ks-header--on-color:not(.is-stuck) .ks-aktion { color: #fff; }
.ks-header--on-color:not(.is-stuck) .ks-aktion:hover { color: #fff; }
.ks-header--on-color:not(.is-stuck) .ks-burger { color: #fff; }
.ks-header--on-color:not(.is-stuck) :focus-visible { outline-color: #fff; }
.ks-header__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); container-type: inline-size; /* E169: Menü mittig, solange Platz reicht; dann schrumpft zuerst der freie Raum neben den Aktionen. */
  align-items: center; gap: var(--space-3); height: calc(var(--header-h) - 1px); }
.ks-header__inner > .ks-header__logo { justify-self: start; }
.ks-header__inner > .ks-header__actions { justify-self: end; }
/* Logo (E111): Wappen als SVG (assets/logo/wappen_vektor.svg) und Wortmarke ohne Unterzeile als Konturen-SVG
   (Bell Gothic Std Black, Kerning aus Chromium). Verhältnis nach Chris' Vorgabe aus ks_wortmarke.html:
   Wappen = 1,5 em, Wortmarke = --logo-wort-faktor (1,25) × 1 em, Oberlänge→Grundlinie 0,752 em, mittig auf dem
   Wappen, Lücke --logo-gap-em (0,428 em; Desktop 0,6 em, Runde 16). Alle Maße folgen --logo-h (Wappenhöhe) — auch kompakt und mobil. */
/* Das Verhältnis Wappen : Wortmarke ist fest (Chris). Auf Desktop bleibt die Zielhöhe erhalten (E169).
   Mobil passt sich das gesamte Logo an den Platz neben den Symbolen an (~156 px). Dafür gilt:
   Logobreite je Wappenhöhe = Wappen 0,865 + Lücke (--logo-gap-em / 1,5) + Wortmarke (Faktor × 5,65). */
.ks-header__logo { --logo-h-ziel: var(--logo-h-basis); --logo-bedarf: calc(0.865 + var(--logo-gap-em) / 1.5 + var(--logo-wort-faktor) * 5.65);
  --logo-h: var(--logo-h-ziel);
  display: flex; align-items: center; flex: none; min-width: 0; border-radius: 6px; gap: calc(var(--logo-h) / 1.5 * var(--logo-gap-em)); }
.ks-header__logo img { height: var(--logo-h); width: auto; flex: none; display: block;
  transition: opacity var(--dur) var(--ease); }
.ks-header__logo img.ks-header__logo-wort { height: calc(var(--logo-h) / 1.5 * var(--logo-wort-faktor) * 0.752); }
.ks-header__logo:hover img { opacity: 0.82; }

/* Hauptmenü: Hintergrund und Schriftmaske teilen sich dieselben animierten Positionswerte (@property in
   site-core.css, Mechanik in js-lib/pille.js). Dadurch wechselt die Schriftfarbe pixelgenau an der Pillenkante. */
.ks-nav { --ks-nav-base: var(--text-strong); --ks-nav-active: #fff; --ks-pill-dur: 560ms; --ks-nav-w: 100%; /* Startwert: Maske über die ganze Linkbreite, sonst ist die Schrift ohne aktiven Punkt unsichtbar; js-lib/pille.js setzt --ks-nav-w und --ks-link-x zur Laufzeit */
  position: relative; display: flex; gap: 4px; justify-self: center;
  transform: translateY(var(--nav-optik)); /* optische Mitte auf der Wortmarke (E112) */
  transition: --ks-pill-x var(--ks-pill-dur) var(--ease-reveal), --ks-pill-w var(--ks-pill-dur) var(--ease-reveal); }
.ks-nav.is-returning { --ks-pill-dur: 760ms; }
.ks-nav__pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--radius-pill);
  background: var(--ks-violet); opacity: 0; pointer-events: none;
  transition: transform var(--ks-pill-dur) var(--ease-reveal), width var(--ks-pill-dur) var(--ease-reveal),
    opacity 120ms var(--ease), background var(--dur) var(--ease); }
.ks-nav__pill.is-visible { opacity: 1; }
.ks-nav__link { --ks-link-x: 0px; position: relative; z-index: 1; padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--text-strong); text-decoration: none; font-size: 15px; font-weight: var(--fw-medium);
  transition: color var(--dur) var(--ease); }
.ks-nav.has-pill .ks-nav__link { color: transparent;
  background-image: linear-gradient(to right,
    var(--ks-nav-base) 0 var(--ks-pill-x),
    var(--ks-nav-active) var(--ks-pill-x) calc(var(--ks-pill-x) + var(--ks-pill-w)),
    var(--ks-nav-base) calc(var(--ks-pill-x) + var(--ks-pill-w)) 100%);
  background-size: var(--ks-nav-w) 100%; background-position: calc(-1 * var(--ks-link-x)) 0;
  background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; }
.ks-nav:not(.has-pill) .ks-nav__link:hover, .ks-nav:not(.has-pill) .ks-nav__link[aria-current] {
  background: var(--ks-violet); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ks-nav, .ks-nav__pill, .ks-nav__link { transition: none; }
  .ks-header::before { transition: none; }
  .ks-header__inner, .ks-header__logo img, .ks-aktion, .ks-aktion svg { transition: none; }
  .ks-header__actions > .ks-aktion, .ks-header__actions > .ks-burger { animation: none; }
  .ks-aktion:hover svg, .ks-aktion.ks-header__login:hover svg { transform: none; }
  .ks-header--kompakt, .ks-header--kompakt.is-in { transition: none; }
}

/* Aktionen (E112, Chris): Suche und Login als reine Liniensymbole ohne Kreis, 44-px-Zielfläche unsichtbar;
   Hover: Farbwechsel, die Lupe „schaut hin“, der Nutzer hebt sich (design-spell); Fokusring in Textfarbe. */
.ks-header__actions { position: relative; display: flex; align-items: center; gap: var(--aktion-gap); flex: none; } /* relative: Anker für das Premium-Panel (E122) */
.ks-aktion { display: inline-flex; align-items: center; justify-content: center; width: var(--iconbtn-size); height: var(--iconbtn-size);
  border-radius: 8px; color: var(--text-strong); text-decoration: none; transition: color var(--dur) var(--ease); }
.ks-aktion svg { width: var(--aktion-size); height: var(--aktion-size); transition: transform 420ms var(--ease-reveal); }
.ks-aktion:hover { color: var(--ks-violet); }
.ks-aktion:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ks-aktion:hover svg { transform: scale(1.1) rotate(-8deg); }
  .ks-aktion.ks-header__login:hover svg { transform: translateX(2px) scale(1.06); }
}
/* Auftritt: Aktionen kommen gestaffelt nach dem Menü (nur beim Seitenaufruf); mobil gehört der Menü-Schalter zur Staffel
   und die Staffel läuft ruhiger (Chris, Runde 20: die Symbole „stockten“, weil der Schalter ohne Auftritt sofort stand). */
.ks-header__actions { --aktion-in-dur: 500ms; --aktion-in-1: 360ms; --aktion-in-2: 440ms; --aktion-in-3: 520ms; }
.ks-header__actions > .ks-aktion, .ks-header__actions > .ks-burger { animation: ks-aktion-in var(--aktion-in-dur) var(--ease-reveal) both; }
.ks-header__actions > .ks-aktion:nth-child(1) { animation-delay: var(--aktion-in-1); }
.ks-header__actions > .ks-aktion:nth-child(2) { animation-delay: var(--aktion-in-2); }
.ks-header__actions > .ks-burger { animation-delay: var(--aktion-in-3); }
.ks-header--kompakt .ks-header__actions > * { animation: none; }
@keyframes ks-aktion-in { from { opacity: 0; transform: translateY(-6px); } }
.ks-burger { display: none; position: relative; width: var(--iconbtn-size); height: var(--iconbtn-size); border: none; background: transparent;
  cursor: pointer; color: var(--text-strong); align-items: center; justify-content: center; }
/* Kompakte Maße nur für das Scroll-Header-Duplikat (Runde 16) */
.ks-header--kompakt .ks-nav__link { padding-block: 6px; font-size: var(--nav-size-stuck); }
.ks-header--kompakt .ks-aktion { width: 38px; height: 38px; }
.ks-header--kompakt .ks-aktion svg { width: var(--aktion-size-stuck); height: var(--aktion-size-stuck); }
/* E166 — Ungescrollter Desktop-Header: Logo und Aktionen optisch 3 px tiefer,
   Such- und Login-Symbol etwas kleiner; die Zielflächen behalten ihre Größe. */
@media (min-width: 1121px) {
  /* E167 — Menü an der sichtbaren Schriftmitte ausrichten; Aktionen enger setzen. */
  .ks-header { --aktion-gap: 6px; }
  .ks-header:not(.ks-header--kompakt) { --nav-optik: 3.5px; }
  .ks-header:not(.ks-header--kompakt) .ks-header__logo,
  .ks-header:not(.ks-header--kompakt) .ks-header__actions > .ks-aktion { position: relative; top: 3px; }
  .ks-header:not(.ks-header--kompakt) .ks-aktion { --aktion-size: 26px; }
  .ks-header .ks-premium-pille__text { max-inline-size: 12ch; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1121px) and (max-width: 1279px) {
  /* E169 — Die Kontopille nutzt bei knappem Platz ihr Symbol; ihr zugänglicher Name bleibt erhalten. */
  .ks-header .ks-premium-pille { min-inline-size: 0; padding-inline: 10px; gap: 0; }
  .ks-header .ks-premium-pille__text { position: absolute; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Menü-/Schließen-Symbol überblenden und drehen (impeccable animate, Runde 9). */
.ks-burger svg { width: 24px; height: 24px; position: absolute; inset: 0; margin: auto;
  transition: opacity 200ms var(--ease), transform 380ms var(--ease-reveal); }
.ks-burger__close { opacity: 0; transform: rotate(-45deg) scale(0.8); }
.ks-burger[aria-expanded="true"] .ks-burger__open { opacity: 0; transform: rotate(45deg) scale(0.8); }
.ks-burger[aria-expanded="true"] .ks-burger__close { opacity: 1; transform: none; }

/* Mobiles Menü (Runde 5): beginnt am oberen Viewportrand, der Inhalt unter der Kopfzeile;
   die vier Hauptpunkte (mit Blog, Runde 6), größer gesetzt, nacheinander eingeblendet; Rundung unten,
   dahinter die abgedunkelte Seite (body[data-nav-open]). */
.ks-mobilenav { position: fixed; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h-current) + var(--space-2)) var(--container-pad) var(--space-4);
  background: #fff; border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-16px);
  transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms; } /* Schließen schnell */
.ks-mobilenav[data-open="true"] { opacity: 1; visibility: visible; transform: none;
  transition: opacity 240ms var(--ease), transform 420ms var(--ease-reveal), visibility 0s linear 0s; } /* Öffnen mit Auslauf (Runde 9) */
.ks-mobilenav__link { padding: var(--space-2) 4px; color: var(--text-strong); text-decoration: none;
  font-size: var(--mobilenav-size); line-height: 1.3; font-weight: var(--fw-semibold); /* eine Stufe leichter als die Toggle-Titel (Runde 9) */
  border-bottom: 1px solid var(--border-default); transition: color var(--dur) var(--ease); }
.ks-mobilenav__link:last-of-type { border-bottom: 0; } /* last-of-type: nach den Links folgt der (meist verborgene) Premium-Block (E122) */
.ks-mobilenav__link:hover, .ks-mobilenav__link[aria-current] { color: var(--ks-violet); }
/* Menüpunkte als Liste: nacheinander, mit Auslauf; Takt und Dauer über Tokens (Chris, Runde 16). */
.ks-mobilenav[data-open="true"] .ks-mobilenav__link { animation: ks-navlink-in var(--mobilenav-link-dur) var(--ease-reveal) both; }
.ks-mobilenav[data-open="true"] .ks-mobilenav__link:nth-child(1) { animation-delay: calc(var(--mobilenav-stagger) * 1); }
.ks-mobilenav[data-open="true"] .ks-mobilenav__link:nth-child(2) { animation-delay: calc(var(--mobilenav-stagger) * 2); }
.ks-mobilenav[data-open="true"] .ks-mobilenav__link:nth-child(3) { animation-delay: calc(var(--mobilenav-stagger) * 3); }
.ks-mobilenav[data-open="true"] .ks-mobilenav__link:nth-child(4) { animation-delay: calc(var(--mobilenav-stagger) * 4); }
@keyframes ks-navlink-in { from { opacity: 0; transform: translateY(var(--mobilenav-link-y)); } }
body[data-nav-open]::before { content: ""; position: fixed; inset: 0; z-index: 49;
  background: rgba(0,0,0,var(--backdrop-alpha)); animation: ks-backdrop-in var(--backdrop-dur) var(--ease) both; }
@keyframes ks-backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ks-mobilenav[data-open="true"] .ks-mobilenav__link { animation: none; }
  body[data-nav-open]::before { animation: none; }
  .ks-mobilenav, .ks-mobilenav[data-open="true"] { transform: none; transition: opacity 200ms var(--ease), visibility 0s; }
  .ks-burger svg { transition: opacity 200ms var(--ease); transform: none; }
}

@media (max-width: 1120px) {
  .ks-nav { display: none; }
  .ks-burger { display: inline-flex; }
  .ks-header__inner { grid-template-columns: 1fr auto; gap: var(--space-2); }
  .ks-aktion, .ks-burger { width: var(--iconbtn-size-mobile); height: var(--iconbtn-size-mobile); }
  .ks-aktion svg { width: 25px; height: 25px; } /* Tinte ≈ 19 px wie die Striche des Menü-Schalters (Chris, Runde 20; vorher 22 px → 16/17 px) */
  .ks-header__actions { gap: var(--aktion-gap-mobile); --aktion-in-dur: 640ms; --aktion-in-1: 300ms; --aktion-in-2: 420ms; --aktion-in-3: 540ms; }
  .ks-burger { width: 44px; height: 44px; } /* Menü-Schalter mobil: Symbol 38 px, Strich 1,5 (Runde 9) */
  .ks-header__logo { --logo-h: min(var(--logo-h-ziel), calc((100cqw - 156px) / var(--logo-bedarf))); } /* neben Suche, Login, Menü */
  .ks-header--kompakt .ks-aktion { width: 34px; height: 34px; }
  .ks-header--kompakt .ks-aktion svg { width: 23px; height: 23px; } /* Tinte ≈ 17 px wie der kompakte Schalter (32 px → 16 px) */
  .ks-header--kompakt .ks-burger { width: 38px; height: 38px; }
  .ks-burger svg { width: 38px; height: 38px; }
}
@media (max-width: 760px) {
  /* Scroll-Header mobil kompakter (Chris, Runde 15): Leiste 56 px (--header-h-stuck in site-core.css) */
  .ks-header--kompakt .ks-aktion { width: 32px; height: 32px; }
  .ks-header--kompakt .ks-aktion svg { width: 22px; height: 22px; } /* Tinte ≈ 16 px wie der kompakte Schalter (32 px) */
  .ks-header--kompakt .ks-burger { width: 36px; height: 36px; }
  .ks-header--kompakt .ks-burger svg { width: 32px; height: 32px; }
}
@media (max-width: 420px) {
  .ks-header__logo { --logo-h-ziel: var(--logo-h-mobile); }
}
.no-js .ks-burger { display: none; }
.no-js .ks-header { position: absolute; }
@media (max-width: 1120px) {
  .no-js .ks-nav { display: flex; flex-wrap: wrap; }
}
@media print {
  .ks-header, .ks-header.is-stuck { position: static; transition: none; }
  .ks-header--kompakt { display: none; }
}
.ks-header .ks-container { max-width: none; }

/* Auftritt der Kopfzeile (Chris, Runde 15): kein Slide der ganzen Leiste mehr. Das Wappen blendet kurz von
   oben ein, die Wortmarke gleich danach von links — schnell, mit sicherem Auslauf; danach die Aktionen. */
.ks-header__logo-wappen { animation: ks-wappen-in 520ms var(--ease-reveal) both; }
.ks-header__logo-wort { animation: ks-wort-in 560ms var(--ease-reveal) both; animation-delay: 180ms; }
.ks-header--kompakt .ks-header__logo img { animation: none; }
@keyframes ks-wappen-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes ks-wort-in { from { opacity: 0; transform: translateX(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .ks-header__logo-wappen, .ks-header__logo-wort { animation: ks-kopf-still 240ms var(--ease) both; animation-delay: 0s; }
}
@keyframes ks-kopf-still { from { opacity: 0; } }

/* Premium-Zustand (E122, premium-panel.css): sobald ein Hinweis-Cookie vorliegt, ersetzt die Pille das Anmelde-Symbol. */
[data-ks-auth="hinweis"] .ks-header__login, [data-ks-auth="premium"] .ks-header__login { display: none; }
/* Mit dem Premium-Block wird das mobile Menü länger als der Viewport: innerhalb scrollen, „Abmelden“ bleibt erreichbar. */
[data-ks-auth="premium"] .ks-mobilenav { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }

/* Premium-Zustand der öffentlichen Site (Konzept 2026-09-06, E122). Drei Stufen am <html>-Element:
   data-ks-auth="gast" (Standard), "hinweis" (Cookie gelesen, neutrale Pille) und "premium" (Status bestätigt).
   Gestaltung nach BOKU-Seitenentwurf Premium-Sidebar: violette Pille „Hallo, Vorname!“ mit Personen-Symbol,
   darunter ein violettes Panel mit den Menüpunkten; auf Farbflächen invertiert bzw. mit weißem Rahmen (Sandra).
   Das Markup steht in header.html (damit das Scroll-Duplikat es mitnimmt), die Logik in premium-panel.js. */

/* ---------- Pille (ersetzt das Anmelde-Symbol, sobald ein Hinweis-Cookie vorliegt) ---------- */
.ks-premium { display: contents; }
.ks-premium-pille { display: none; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 16px;
  border: 0; border-radius: var(--radius-pill); background: var(--ks-violet); color: #fff; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
  min-inline-size: 11ch; /* Platz für „Hallo, Vorname!“ — der nachgeladene Name springt nicht */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 420ms var(--ease-reveal); }
[data-ks-auth="hinweis"] .ks-premium-pille, [data-ks-auth="premium"] .ks-premium-pille { display: inline-flex;
  animation: ks-pille-in 500ms var(--ease-reveal) 440ms both; }
.ks-premium-pille:hover { background: var(--ks-violet-hover); }
.ks-premium-pille:active { transform: scale(0.98); }
.ks-premium-pille:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ks-premium-pille svg { width: 24px; height: 24px; flex: none; transition: transform 420ms var(--ease-reveal); }
.ks-premium-pille:hover svg { transform: translateX(1px) scale(1.06); }
.ks-premium-pille[aria-expanded="true"] svg { transform: scale(1.06); }
.ks-premium-pille__text { padding-block: 2px; }
@keyframes ks-pille-in { from { opacity: 0; transform: translateY(-6px); } }
/* Auf Farbflächen (violetter Hero) invertiert wie die Menü-Pille; im Scrollzustand wieder violett. */
.ks-header--on-color:not(.is-stuck) .ks-premium-pille { background: #fff; color: var(--ks-violet); }
.ks-header--on-color:not(.is-stuck) .ks-premium-pille:hover { background: rgba(255,255,255,0.9); }
.ks-header--kompakt .ks-premium-pille { height: 32px; font-size: 14px; }

/* ---------- Panel (Klick-Disclosure unter der Pille, rechts bündig) ---------- */
.ks-premium-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 3;
  width: min(280px, calc(100vw - 2 * var(--container-pad))); padding: 18px 20px 20px;
  border-radius: var(--radius-md); background: var(--ks-violet); color: #fff; box-shadow: var(--shadow-violet);
  transform-origin: top right; text-align: left; }
.ks-premium-panel:not([hidden]) { animation: ks-panel-in 360ms var(--ease-reveal) both; }
@keyframes ks-panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.ks-header--on-color:not(.is-stuck) .ks-premium-panel { box-shadow: 0 0 0 2px #fff, var(--shadow-violet); } /* weißer Rahmen auf Farbflächen */
.ks-premium-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ks-premium-panel__link { display: block; padding: 2px 0; border-radius: 4px; color: #fff; text-decoration: none;
  font-size: 14px; line-height: 1.3; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ks-premium-panel__link:hover { opacity: 0.85; transform: translateX(2px); }
.ks-premium-panel__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ks-premium-panel__link.is-profil { font-weight: var(--fw-bold); }
.ks-premium-panel__leer { margin: 0; font-size: 14px; line-height: 1.4; opacity: 0.9; }
[data-ks-auth="premium"] .ks-premium-panel__leer { display: none; }
.ks-premium-panel__abmelden { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.3); }
.ks-premium-panel__abmelden .ks-premium-panel__logout { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: var(--fw-medium); transition: opacity var(--dur) var(--ease); }
.ks-premium-panel__abmelden .ks-premium-panel__logout:hover { opacity: 0.85; }
.ks-premium-panel__abmelden .ks-premium-panel__logout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ks-premium-panel__abmelden svg { width: 18px; height: 18px; }

/* ---------- Mobiles Menü: Premium-Block im Burger, fett hervorgehoben (Sandra 06.07.) ---------- */
.ks-premium-mobil { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-default); }
.ks-premium-mobil__h { margin: 0 0 4px; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ks-violet); }
.ks-premium-mobil__list { list-style: none; margin: 0; padding: 0; }
.ks-premium-mobil__link { display: block; padding: 8px 4px; color: var(--text-strong); text-decoration: none;
  font-size: var(--mobilenav-size); line-height: 1.3; font-weight: var(--fw-bold); transition: color var(--dur) var(--ease); }
.ks-premium-mobil__link:hover { color: var(--ks-violet); }
.ks-premium-mobil__abmelden { display: inline-block; margin-top: 6px; padding: 6px 4px; color: var(--ks-violet); text-decoration: none;
  font-size: 15px; font-weight: var(--fw-medium); }

/* ---------- Zustandsabhängige Textbausteine (Teaser-Karten, Hinweise) ---------- */
[data-ks-auth="premium"] .ks-premium-nur-gast { display: none; }
html:not([data-ks-auth="premium"]) .ks-premium-nur-mitglied { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ks-premium-pille, .ks-premium-pille svg, .ks-premium-panel__link { transition: none; }
  [data-ks-auth="hinweis"] .ks-premium-pille, [data-ks-auth="premium"] .ks-premium-pille, .ks-premium-panel:not([hidden]) { animation: none; }
}
@media (max-width: 1120px) {
  .ks-premium-pille { height: 34px; font-size: 14px; padding: 0 6px 0 14px; min-inline-size: 0; }
  .ks-premium-pille svg { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .ks-premium-pille__text { display: none; } /* schmale Geräte: nur das Symbol, der Name steht im Panel */
  .ks-premium-pille { padding: 0 6px; gap: 0; }
}

/* Farbiger Hero (Start, Blog, Suche): dasselbe Maß wie CB 3 — symmetrischer Innenabstand
   --hero-pad, Mindesthöhe --hero-min, dazu der fixe Header (--header-h), unter den die
   Fläche läuft. Der Inhalt sitzt vertikal mittig (Runde 4). */
.ks-hero { background: var(--ks-violet); color: #fff;
  padding: calc(var(--header-h) + var(--hero-pad)) 0 var(--hero-pad);
  min-height: calc(var(--header-h) + var(--hero-min));
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ks-hero__inner { display: flex; gap: var(--space-6); align-items: center; }
.ks-hero__text { flex: 1.1; }
.ks-hero__media { flex: 1; aspect-ratio: 4 / 5; max-width: 420px; min-height: 360px;
  border-radius: var(--radius-lg); overflow: hidden; }
.ks-eyebrow-light { display: inline-block; font-size: var(--caption-size); font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.82); }

/* Feed-Einstieg an der Bildposition des Heros: RSS-Symbol und Beschriftung in
   Weiß auf der violetten Fläche, als Kontur-Karte statt Bild (Feedback-Pin 960951). */
.ks-hero__feed { flex: none; width: 300px; align-self: stretch; max-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3);
  border: 2px solid rgba(255,255,255,0.55); border-radius: var(--radius-lg);
  color: #fff; text-decoration: none; text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ks-hero__feed svg { width: 44px; height: 44px; }
.ks-hero__feed span { font-size: var(--h5-size); font-weight: var(--fw-semibold); }
.ks-hero__feed:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
@media (max-width: 980px) {
  .ks-hero__inner { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .ks-hero__media { max-width: none; width: 100%; aspect-ratio: 16 / 10; min-height: 0; order: -1; }
  .ks-hero__feed { width: 100%; max-height: none; flex-direction: row; }
  .ks-hero__feed svg { width: 32px; height: 32px; }
}
@media (max-width: 760px) {
  .ks-hero { padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-6); min-height: 0; }
  .ks-hero__feed span { font-size: var(--body-size); }
}
@media print {
  .ks-hero { background: #fff !important; color: #000 !important; }
}

/* Hero ohne Mindesthöhe (Suche, Runde 7). */
.ks-hero--compact { min-height: 0; }

.ks-searchbar { display: flex; align-items: center; gap: var(--space-1); background: #fff;
  border-radius: var(--radius-pill); padding: 6px; margin-top: 28px; max-width: 540px; }
.ks-searchbar--wide { max-width: 640px; margin-top: 20px; }
/* Im Hero-Zweispalter (Suche) steht die Leiste rechts neben dem Titel. */
.ks-hero__inner > .ks-searchbar { flex: 1; max-width: 560px; margin-top: 0; }
.ks-searchbar__icon { display: inline-flex; color: var(--ks-grey); padding-left: 14px; flex: none; }
.ks-searchbar__icon svg { width: 20px; height: 20px; }
.ks-searchbar__input { flex: 1; min-width: 0; border: none; outline: none; font-size: 16px;
  font-family: var(--font-sans); color: var(--text-strong); background: transparent; padding: 10px 4px; }
/* Platzhalter deutlich lesbar, eingegebener Text schwarz (Runde 5). */
.ks-searchbar__input::placeholder { color: var(--text-muted); opacity: 1; }
.ks-searchbar__input:focus { color: var(--ks-black); }
/* Absende-Knopf: Desktop mit Beschriftung, mobil als Lupe in der rechten Ecke des Feldes. */
.ks-searchbar__btnicon { display: none; width: 20px; height: 20px; }
/* R-02 — der Fokus-Ring sitzt auf der Leiste, nicht im Feld: 2 px Abstand, dann 3 px
   deckendes Weiß auf der Violett-Fläche. Das Feld selbst bleibt ohne eigene Kontur,
   sonst lägen zwei Ringe ineinander. */
.ks-searchbar__input:focus-visible { outline: none; }
.ks-searchbar:focus-within { box-shadow: 0 0 0 var(--focus-ring-offset) var(--ks-violet),
  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) #fff; }
@media (max-width: 980px) {
  .ks-hero__inner > .ks-searchbar { max-width: 640px; }
}
@media (max-width: 760px) {
  .ks-searchbar { padding: 4px 4px 4px 16px; }
  .ks-searchbar__icon { display: none; }
  .ks-searchbar__input { padding: 10px 0; }
  .ks-searchbar__btn { flex: none; width: var(--iconbtn-size); height: var(--iconbtn-size); padding: 0;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  .ks-searchbar__btntext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ks-searchbar__btnicon { display: block; }
}

/* CD-06 — kein browsereigenes Löschkreuz im Suchfeld */
.ks-searchbar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ks-tagrow { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: 18px; }
a.ks-tag, a.ks-badge { text-decoration: none; }
.ks-tag--on-violet { color: #fff; border-color: rgba(255,255,255,0.45); }
.ks-tag--on-violet:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.12); }

.ks-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.ks-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  align-items: start; margin-top: var(--space-3); }
@media (max-width: 980px) {
  .ks-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ks-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ks-grid-3, .ks-textbox-grid { grid-template-columns: 1fr; }
}

.ks-floating-actions { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; pointer-events: none; }
.ks-fab, .ks-to-top { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
  transition: opacity 220ms var(--ease), transform 360ms var(--ease-reveal), visibility 0s linear 360ms; }
.is-hero-past .ks-fab, .is-hero-past .ks-to-top, .no-js .ks-fab { opacity: 1; visibility: visible;
  transform: none; pointer-events: auto; transition-delay: 0s; }
.ks-fab .ks-emergency { white-space: nowrap; }
.ks-to-top { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  flex: none; border: 1px solid var(--ks-violet); border-radius: 50%; background: var(--ks-violet); color: #fff;
  box-shadow: var(--shadow-sm); text-decoration: none; }
.ks-to-top svg { width: 19px; height: 19px; transform: rotate(-90deg); }
@media (max-width: 760px) {
  .ks-floating-actions { left: 16px; right: 16px; bottom: 16px; }
  .ks-fab .ks-emergency { padding: 10px 16px; font-size: 14px; gap: var(--space-1); }
  .ks-fab .ks-emergency svg { width: 18px; height: 18px; }
  .ks-fab .ks-emergency__num { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .ks-emergency { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease); }
  .ks-emergency:hover { transform: translateY(-2px); }
  .ks-to-top:hover { background: var(--ks-violet-hover); color: #fff; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-fab, .ks-to-top, .ks-emergency { transition: none; }
}
@media print {
  .ks-floating-actions { display: none; }
}

.ks-footer { background: var(--ks-black); color: #fff; padding: 64px 0 32px; }
.ks-footer__top { display: flex; gap: var(--space-6); flex-wrap: wrap; justify-content: space-between; }
.ks-footer__brand { max-width: 280px; }
/* Beschnittenes Original in dreifacher Auflösung, proportional in der Markenfläche. */
.ks-footer__brand img { height: 44px; width: auto; max-width: 100%; object-fit: contain;
  object-position: left center; filter: brightness(0) invert(1); display: block; }
.ks-footer__tag { color: #fff; font-size: 14px; line-height: 1.6; margin-top: var(--space-2); }
/* Drei inhaltsbreite Spalten als Gruppe rechts, letzte bündig am rechten Rand, dazwischen ein
   großzügiger, mitwachsender Abstand (Chris, Runde 9). */
.ks-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: end;
  column-gap: clamp(64px, 9vw, 144px); row-gap: var(--space-4); flex: 1; min-width: 480px; }
.ks-footer__h { font-size: 14px; font-weight: var(--fw-semibold); margin: 0 0 14px; }
.ks-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ks-footer__link { color: #fff; text-decoration: none; font-size: 14px; }
/* Die gemeinsame animierte Unterstreichung aus site-core.css übernimmt den Hover. */
.ks-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.16); font-size: 13px; color: #fff; }
.ks-footer__meta { display: flex; gap: 18px; flex-wrap: wrap; }
.ks-footer__meta a { color: #fff; text-decoration: none; font-size: 13px; }
.ks-footer :focus-visible { outline-color: #fff; }
@media (max-width: 980px) {
  .ks-footer__top { flex-direction: column; gap: var(--space-4); }
  .ks-footer__brand { max-width: none; }
  .ks-footer__cols { min-width: 0; width: 100%; flex: none; justify-content: start; column-gap: var(--space-4);
      grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ks-footer { padding: 48px 0 24px; }
  /* Mobil (Chris, Runde 20): Themen in voller Breite als einspaltige Liste, darunter Schutz & Hilfe neben Service.
     Ersetzt das reine Zweierraster aus Runde 5. */
  .ks-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .ks-footer__cols > div:first-child { grid-column: 1 / -1; }
  .ks-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media print {
  .ks-footer { grid-template-rows: 1fr !important; }
}
.ks-footer--partnerband { padding-bottom: 0; }
.ks-footer-partner { background: var(--ks-grey-surface); padding: var(--space-3) 0 88px; margin-top: var(--space-4); }
.ks-footer-partner__row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.ks-footer-partner__label { font-size: 13px; color: var(--text-muted); }
.ks-footer-partner__logos { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
/* 32 px Höhe und gedämpft in Hellgrau (Wunsch Chris 03.09.). Neue Originale sind
   beschnitten und für 3×-Displays aufbereitet; DSGV und VÖB noch aus dem Bestand. */
.ks-footer-partner__logos a { display: block; opacity: 0.45; transition: opacity var(--dur) var(--ease); }
.ks-footer-partner__logos a:hover { opacity: 0.8; }
.ks-footer-partner__logos img { height: 32px; width: auto; max-width: 96px; object-fit: contain;
  display: block; filter: brightness(0); }
.ks-footer-partner :focus-visible { outline-color: var(--ks-violet); }
@media (max-width: 760px) {
  .ks-footer-partner__logos img { height: 26px; max-width: 80px; }
}

/* Premium-Spalte (E122): nur im bestätigten Premium-Zustand sichtbar (premium-panel.js hebt hidden auf); Inhalt aus dem Status-Endpunkt. */
[data-ks-auth="premium"] .ks-footer__cols:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, max-content)); } /* E183: vier Spuren nur mit vierter Spalte */
@media (max-width: 980px) { [data-ks-auth="premium"] .ks-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ks-searchbody { display: flex; gap: 40px; align-items: flex-start; }
.ks-searchaside { flex: none; width: 260px; background: var(--ks-grey-surface);
  border-radius: var(--radius-md); padding: var(--space-3); position: sticky; top: var(--anchor-offset); }
.ks-searchaside__head { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); font-weight: var(--fw-semibold); }
.ks-searchaside__head svg { width: 18px; height: 18px; color: var(--ks-violet); }
.ks-searchaside__group > * + * { margin-top: 10px; }
/* Ergebniszeile: Titel, Auszug, Fußzeile — Maße aus dem Layoutdraft (E30). Pill und Meta
   stehen nicht mehr über dem Titel (Runde 4): Standard ist die Fußzeile (Variante 1),
   die Varianten 2–4 stehen zur Abstimmung auf /such-varianten/. */
.ks-result__title { margin-bottom: 6px; font-weight: var(--fw-bold); }
.ks-result__text { margin-bottom: 8px; font-size: 15px; line-height: 1.55; }
.ks-result__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ks-result__foot .ks-linktext { margin-left: auto; }
/* Variante 2 · Register: Pill und Meta als Spalte links vom Treffer. */
.ks-result__label { flex: none; width: 160px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; }
/* Variante 3 · Titelzeile: Pill rechts neben dem Titel. */
.ks-result__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.ks-result__row .ks-tag { flex: none; margin-top: 2px; }
/* Variante 4 · Inline: Pill hängt am Titel. */
.ks-tag--inline { vertical-align: middle; margin-left: 8px; }
@media (max-width: 760px) {
  .ks-result__label { width: auto; flex-direction: row; flex-wrap: wrap; }
}
.ks-searchaside__label { display: block; font-weight: var(--fw-semibold); font-size: 14px; }
.ks-filtercol { display: flex; flex-direction: column; gap: 4px; }
.ks-filteritem { display: flex; align-items: center; justify-content: space-between; background: none;
  border: none; cursor: pointer; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px;
  font-family: var(--font-sans); color: var(--text-strong); text-align: left; width: 100%; }
.ks-filteritem:hover { color: var(--ks-violet); }
.ks-filteritem--active { background: #fff; color: var(--ks-violet); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
.ks-filteritem__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ks-violet); }
.ks-resulthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  margin-bottom: 20px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-default); }
.ks-resulthead__count { color: var(--text-muted); font-size: 14px; }
.ks-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.ks-result { display: flex; gap: 20px; }
.ks-result > div { flex: 1; min-width: 0; } /* Trefferspalte füllt die Breite — „Mehr lesen" endet am Spaltenrand (Runde 5) */
.ks-result__meta { color: var(--text-muted); font-size: 13px; }
/* Treffer sind reine Textzeilen (Feedback-Pin 960949) und werden durch eine
   feine Linie getrennt statt durch Abstand allein (Feedback-Pin 960954). */
.ks-results > .ks-result { padding-block: var(--space-3); border-top: 1px solid var(--border-default); }
.ks-results > .ks-result:first-child { border-top: none; padding-top: var(--space-1); }
@media (max-width: 980px) {
  .ks-searchbody { flex-direction: column; }
  .ks-searchaside { position: static; width: 100%; }
}
@media (max-width: 760px) {
  .ks-result { flex-direction: column; gap: var(--space-2); }
}
.ks-result { position: relative; }
.ks-result .ks-linktext:not([href^="tel:"])::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.ks-result h3 { transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ks-result:has(.ks-linktext:not([href^="tel:"])):hover h3 { color: var(--ks-violet); }
  .ks-result:hover .ks-linktext svg { transform: translateX(2px); }
}
.ks-filteritem { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ks-filteritem:hover { background: rgba(104,50,246,0.06); }

/* Treffer- und Kopfzeile laufen bis zum Rand der Spalte, damit Trefferzahl und „Mehr lesen" rechts
   bündig stehen (Runde 5); nur die Texte bleiben auf dem Lesemaß (T-04 / E23). */
.ks-resulthead, .ks-results { max-width: none; }
.ks-result h3, .ks-result p { max-width: var(--content-measure); }

/* M-08 — der Trefferzähler rutscht mobil unter die Überschrift */
@media (max-width: 760px) {
  .ks-resulthead { flex-wrap: wrap; align-items: flex-start; }
  .ks-resulthead__count { flex: none; width: 100%; }
}

/* P-03 — der Aktiv-Punkt folgt der aktiven Filterzeile (E18) */
.ks-filteritem__dot { visibility: hidden; }
.ks-filteritem--active .ks-filteritem__dot { visibility: visible; }

/* P-03 — der Hover-Ton verdeckt die aktive Zeile nicht (analog H-06) */
.ks-filteritem--active:hover { background: #fff; }

.ks-search-mobilebar { display: none; }
@media (max-width: 760px) {
  .ks-searchaside { display: none; }
  /* Mobile Filterleiste wie die Overscroll-Bänder (Chris, Runde 17): violette Fläche hinter der Kopfzeile mit
     abgerundeten unteren Ecken, fährt mit der Band-Dauer herein; Schalter und Symbole in Weiß. */
  .ks-search-mobilebar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 45;
    background: var(--ks-violet); color: #fff; border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: calc(var(--header-h-current) + 4px) 0 4px;
    visibility: hidden; transform: translateY(-100%);
    transition: transform var(--stickybar-dur) var(--ease), visibility 0s linear var(--stickybar-dur), box-shadow var(--dur) var(--ease); }
  .ks-search-mobilebar.is-in { visibility: visible; transform: none; box-shadow: var(--shadow-md);
    transition: transform var(--stickybar-dur) var(--ease), visibility 0s linear 0s, box-shadow var(--dur) var(--ease); }
  .ks-search-mobilebar__inner { position: relative; }
  .ks-search-mobilebar__toggle { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; gap: 10px;
    width: 100%; min-height: 40px; padding: 0; border: 0; background: transparent; color: #fff;
    font: 600 var(--nav-size-stuck)/1.2 var(--font-sans); text-align: left; cursor: pointer; }
  .ks-search-mobilebar__toggle svg { width: 20px; height: 20px; color: #fff; }
  .ks-search-mobilebar__toggle:focus-visible { outline-color: #fff; }
  .ks-search-mobilebar__chevron { justify-self: end; transform: rotate(90deg);
    transition: transform var(--dur) var(--ease); }
  .ks-search-mobilebar__toggle[aria-expanded="true"] .ks-search-mobilebar__chevron { transform: rotate(-90deg); }
  .ks-search-mobilebar__panel { position: absolute; top: calc(100% + 12px); left: var(--container-pad); right: var(--container-pad);
    padding: var(--space-2); border-radius: var(--radius-md); background: var(--ks-grey-surface); color: var(--text-strong);
    box-shadow: var(--shadow-lg); }
  .ks-search-mobilebar__panel[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-search-mobilebar, .ks-search-mobilebar__chevron { transition: none; }
}

.ks-alpha { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-4); }
.ks-alpha__btn { width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-control); background: #fff; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ks-alpha__btn:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--ks-violet); color: var(--ks-violet); }
.ks-alpha__btn[aria-current="true"] { background: var(--ks-violet); border-color: var(--ks-violet); color: #fff; }
.ks-alpha__btn:disabled { color: var(--ks-grey); cursor: not-allowed;
  background: var(--ks-grey-surface); border-color: transparent; }
@media (max-width: 420px) {
  .ks-alpha__btn { width: 36px; height: 36px; font-size: 14px; }
  .ks-glossar-download .ks-btn { white-space: normal; text-align: center; }
}
/* Gruppen untereinander, Buchstaben als Anker (Runde 6). */
.ks-glossar-gruppen { display: block; }
.ks-glossar-gruppe:not([hidden]) ~ .ks-glossar-gruppe:not([hidden]) { margin-top: var(--space-6); }
/* Buchstaben und „0–9“ so groß wie die Hero-Überschrift (Chris, Runde 17). */
.ks-glossar-gruppe > .ks-glossar-gruppe__titel { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); margin-bottom: var(--space-3); }
/* Der angesprungene Suchtreffer wird größer und fett hervorgehoben (Chris, Runde 24). */
.is-glossar-treffer[data-open="true"] .ks-accordion__trigger { font-size: clamp(26px, 3vw, 32px); font-weight: var(--fw-bold); }
.is-glossar-treffer > h3:focus { outline: none; }
.ks-alpha__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* auch inaktive Kacheln (X, Y) mittig */
.ks-alpha__btn[aria-disabled="true"] { color: var(--ks-grey); cursor: not-allowed;
  background: var(--ks-grey-surface); border-color: transparent; }
.ks-alpha__btn:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(104,50,246,0.06); }
.ks-alpha__btn[aria-current="true"]:hover { background: var(--ks-violet-hover); border-color: var(--ks-violet-hover); }

/* Buchstabenleiste im violetten Hero: Kontur-Knöpfe
   in Weiß statt weißer Flächen, aktiver Buchstabe deckend (Feedback-Pin 960950). */
.ks-alpha--on-violet { margin-top: var(--space-3); margin-bottom: 0; }
.ks-alpha--on-violet .ks-alpha__btn { background: transparent;
  border-color: rgba(255,255,255,0.55); color: #fff; }
.ks-alpha--on-violet .ks-alpha__btn:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255,255,255,0.16);
  border-color: #fff; color: #fff; }
.ks-alpha--on-violet .ks-alpha__btn[aria-current="true"] { background: #fff;
  border-color: #fff; color: var(--ks-violet); }
.ks-alpha--on-violet .ks-alpha__btn:disabled, .ks-alpha--on-violet .ks-alpha__btn[aria-disabled="true"] { background: transparent;
  border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.45); }
.ks-alpha--on-violet :focus-visible { outline-color: #fff; }

/* E172 — Suche unter dem Intro; größere Buchstaben und PDF-Download darunter.
   Beim Scrollen übernimmt weiterhin das kompakte Buchstabenband. */
.ks-glossar-werkzeuge { margin-top: var(--space-6); }
.ks-glossar-leiste { display: flex; align-items: center; gap: var(--space-2); }
.ks-glossar-leiste > .ks-alpha { flex: 1; min-width: 0; }
.ks-glossar-leiste .ks-alpha__btn { width: 52px; height: 52px; font-size: 18px; }
.ks-glossar-leiste .ks-glossar-download { flex: none; margin: 0; }
.ks-glossar-suche, .ks-glossar-download { width: 302px; max-width: 100%; }
.ks-glossar-download .ks-btn { width: 100%; min-height: 52px; }
.ks-glossar-suche { position: relative; z-index: 2; margin: var(--space-4) 0 0;
  --text-strong: var(--ks-black); --text-body: var(--ks-black); --text-muted: #5b5b60;
  color: var(--text-strong); }
.ks-block-intro .ks-glossar-suche { margin-top: var(--space-4); }
/* E170 — Gestaltung der mobilen Suchseite: weiße Kapsel mit violetter Lupe. */
.ks-glossar-suche__feld { position: relative; display: flex; align-items: center; gap: var(--space-1);
  padding: 4px 4px 4px 16px; background: #fff; border-radius: var(--radius-pill); }
.ks-glossar-suche__feld:focus-within { box-shadow: 0 0 0 var(--focus-ring-offset) var(--ks-violet),
  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) #fff; }
.ks-glossar-suche .ks-input { flex: 1; min-width: 0; width: 100%; height: 40px; min-height: 40px;
  padding: 10px 44px 10px 0; font-size: 16px; line-height: normal;
  background: transparent; border: 0; border-radius: 0; color: var(--text-strong); }
.ks-glossar-suche .ks-input:focus { box-shadow: none; outline: none; }
.ks-glossar-suche .ks-input:focus-visible { outline: none; }
.ks-glossar-suche .ks-input:placeholder-shown { padding-right: 0; }
.ks-glossar-suche .ks-input::placeholder { color: var(--text-muted); opacity: 1; }
.ks-glossar-suche .ks-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ks-glossar-suche__leeren { position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: 50%; color: var(--text-muted); cursor: pointer; }
.ks-glossar-suche__leeren:hover { background: rgba(0,0,0,0.08); }
.ks-glossar-suche__leeren:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -5px; }
.ks-glossar-suche__leeren svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; }
.ks-glossar-suche__absenden { flex: none; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ks-glossar-suche__absenden svg { width: 20px; height: 20px; }
.ks-alpha--scroll { flex-wrap: nowrap; overflow-x: auto; padding: 4px; margin: 0;
  scrollbar-width: none; -ms-overflow-style: none; }
.ks-alpha--scroll::-webkit-scrollbar { display: none; }
html:not(.no-js) .ks-alpha--scroll:not([data-scroll-end]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.ks-alpha--scroll .ks-alpha__btn { flex: none; }
.ks-glossar-vorschlaege { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
  width: min(360px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--ks-grey);
  border-radius: var(--radius-sm); box-shadow: none; overflow: hidden; }
.ks-glossar-vorschlaege ul { position: relative; list-style: none; margin: 0; padding: 4px;
  max-height: min(360px, 50dvh); overflow-y: auto; overscroll-behavior: contain; }
.ks-glossar-vorschlaege [role="option"] { min-height: 44px; margin: 0; padding: 12px;
  border-radius: var(--radius-sm); color: var(--text-strong); cursor: pointer; }
.ks-glossar-vorschlaege [role="option"]:hover,
.ks-glossar-vorschlaege [aria-selected="true"] { background: var(--ks-grey-surface); }
.ks-glossar-vorschlag__titel { display: block; font-size: 14px; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.ks-glossar-vorschlag__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin-top: 4px; overflow: hidden; color: var(--text-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ks-glossar-vorschlaege__leer { margin: 0; padding: 16px; color: var(--text-muted); font-size: 14px; }
/* E173 — Desktop kompakter; Suchfeld und Download mit gleicher Breite. */
@media (min-width: 761px) {
  .ks-glossar-suche, .ks-glossar-download { width: 288px; }
  .ks-glossar-leiste .ks-alpha__btn { width: 48px; height: 48px; font-size: 16px; }
  .ks-glossar-download .ks-btn { min-height: 48px; padding: 12px 24px; font-size: 15px; }
}
@media (max-width: 760px) {
  .ks-block-intro .ks-glossar-suche { margin-top: var(--space-3); }
  .ks-glossar-leiste { flex-direction: column; align-items: stretch; }
  .ks-glossar-leiste > .ks-alpha { flex: none; width: 100%; }
  .ks-glossar-download { align-self: flex-end; }
}
@media (max-width: 420px) {
  .ks-glossar-suche, .ks-glossar-download { width: 100%; }
}

/* Hero-Zweispalter (CB 3): derselbe Abstand über und unter dem Inhalt — auch zum Bild —,
   deshalb symmetrisches Padding aus --hero-pad und vertikale Zentrierung. Heroes ohne Bild
   füllen die Mindesthöhe --hero-min. Farbige Heroes laufen unter den fixen Header und tragen
   ihn oben zusätzlich (--header-h). Der Übergang zur nächsten Fläche ist Sache der Section
   (ks-seam-b), nicht eines Hilfselements (Runde 4). */
.ks-block-intro { padding: var(--hero-pad) 0; min-height: var(--hero-min);
  display: flex; flex-direction: column; justify-content: center; }
.ks-block-intro__grid { display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); }
.ks-block-intro .ks-h1 { margin-bottom: var(--space-3); }
.ks-block-intro__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-placeholder); }
.ks-block-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-block-intro__media picture { display: contents; }
/* Seitenkopf ohne Bild und ohne Mindesthöhe (Kontakt, Runde 16): Rhythmus wie jeder Hero, Höhe aus dem Inhalt. */
.ks-block-intro--kompakt { min-height: 0; }
.ks-block-intro--violet, .ks-block-intro--carnation {
  padding-top: calc(var(--header-h) + var(--hero-pad));
  min-height: calc(var(--header-h) + var(--hero-min)); }
.ks-block-intro--violet { background: var(--ks-violet); }
.ks-block-intro--carnation { background: var(--ks-carnation);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ks-block-intro--carnation .ks-mb-buttons { margin-top: var(--space-4); }
.ks-block-intro--carnation .ks-emergency { background: #fff; color: var(--ks-carnation); }
.ks-block-intro--carnation .ks-emergency:hover { background: rgba(255,255,255,0.88); }
.ks-block-intro--carnation :focus-visible { outline-color: #fff; }
@media (max-width: 980px) {
  .ks-block-intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } /* minmax(0): scrollende Pillenreihe darf die Spalte nicht aufziehen (Runde 9) */
  .ks-block-intro__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .ks-block-intro { padding: var(--space-6) 0; min-height: 0; }
  .ks-block-intro--violet, .ks-block-intro--carnation {
    padding-top: calc(var(--header-h) + var(--space-6)); min-height: 0; }
}
@media print {
  .ks-block-intro--carnation { background: #fff !important; color: #000 !important; }
}

/* Startseite: Textspalte breiter (1.6 : 1), damit die 64-px-H1 in Satzpaaren umbricht (Runde 9). */
@media (min-width: 981px) {
  .ks-block-intro__grid--text { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* RSS-Seite (Runde 19, Chris — Richtung C ohne Kachel, mobil optimiert): eigenes Raster mit Bereichen. Desktop: Text links
   (vertikal mittig), rechts das freie, vollständige RSS-Zeichen über dem Adressfeld, der Punkt in der Spur des Feld-Symbols.
   Tablet (≤ 980 px) bleibt zweispaltig mit kleinerem Zeichen; Handy (≤ 760 px): Zeichen klein über der Überschrift, das Feld
   direkt unter dem Intro — damit es auf dem ersten Bildschirm steht. Die Wellen atmen im Sende-Rhythmus, Reduced Motion still. */
.ks-rss-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "text glyphe" "text feld";
  align-items: end; column-gap: var(--space-6); row-gap: var(--space-3); }
.ks-rss-grid > .ks-rss-text { grid-area: text; align-self: center; }
.ks-rss-grid > .ks-rss-glyphe { grid-area: glyphe; justify-self: start; }
.ks-rss-grid > .ks-rss-feld { grid-area: feld; position: relative; }
.ks-rss-glyphe { display: block; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; color: var(--ks-violet);
  animation: ks-auftritt var(--auftritt-dur) var(--ease-reveal) both; animation-delay: 120ms; }
.ks-rss-glyphe__welle { animation: ks-rss-atmen 5.6s ease-in-out infinite; }
.ks-rss-glyphe__welle--1 { animation-delay: 0s; }
.ks-rss-glyphe__welle--2 { animation-delay: 0.7s; }
@keyframes ks-rss-atmen { 0%, 100% { opacity: 1; } 18% { opacity: 0.62; } 46% { opacity: 1; } }
/* Bestätigungs-Blase unter dem Feld, außerhalb des Flusses (kein Sprung im Seitenkopf) */
.ks-rss-feld .ks-feedfield__bubble { position: absolute; right: 0; top: calc(100% + 10px); margin: 0; }
@media (max-width: 980px) {
  /* Tablet: Text und Zeichen nebeneinander, das Adressfeld in voller Breite darunter (lesbare Adresse) */
  .ks-rss-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "text glyphe" "feld feld"; column-gap: var(--space-4); }
  .ks-rss-glyphe { max-width: 300px; }
}
@media (max-width: 760px) {
  .ks-rss-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glyphe" "text" "feld"; row-gap: var(--space-3); }
  .ks-rss-grid > .ks-rss-text { align-self: start; }
  .ks-rss-glyphe { max-width: 112px; animation-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-rss-glyphe { animation: ks-auftritt-still 400ms var(--ease) both; animation-delay: 0s; }
  .ks-rss-glyphe__welle { animation: none; }
}

/* Feed-Adressfeld (Runde 16, aus dem Nebenkontext redirect-template übernommen): Feld wie ein Chat-Eingabefeld —
   Symbol-Chip links, die Adresse erscheint Zeichen für Zeichen, rechts die Kopier-Aktion mit Häkchen und
   Bestätigungs-Blase. Nur Tokens, Bewegung auf transform/opacity, Reduced Motion still. */
.ks-feedfield { position: relative; display: flex; align-items: center; gap: var(--space-1);
  min-height: 80px; padding: 12px 12px 12px var(--space-2); border-radius: 40px;
  background: var(--ks-grey-surface); color: var(--ks-black);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-feedfield:focus-within { box-shadow: 0 0 0 3px rgba(104,50,246,0.18); }
.ks-feedfield__chip { flex: none; width: 52px; height: 52px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ks-violet); color: #fff; } /* Punkt des RSS-Zeichens (Runde 18) */
.ks-feedfield__chip svg { width: 24px; height: 24px; }
.ks-feedfield__value { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 18px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-feedfield__char { display: inline-block; opacity: 0; transform: translateY(5px);
  animation: ks-char-auftritt 420ms var(--ks-spring) both; animation-delay: calc(var(--start, 0ms) + var(--i, 0) * 22ms); }
.ks-feedfield.is-ready .ks-feedfield__char { animation: none; opacity: 1; transform: none; }
@keyframes ks-char-auftritt { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* Aktion rechts: erscheint wie ein Senden-Knopf, sobald das Feld „bereit“ ist */
.ks-feedfield__go { flex: none; display: inline-flex; align-items: center; gap: var(--space-1);
  height: 56px; padding: 0 20px 0 18px; border: 0; border-radius: 28px; cursor: pointer;
  background: var(--ks-violet); color: #fff; font-family: var(--font-sans);
  font-size: 15px; font-weight: var(--fw-semibold); white-space: nowrap;
  opacity: 0; transform: scale(0.92); pointer-events: none;
  transition: opacity 320ms var(--ease), transform 480ms var(--ks-spring), background var(--dur) var(--ease); }
.ks-feedfield__go svg { width: 22px; height: 22px; }
.ks-feedfield__go--icon { width: 56px; padding: 0; justify-content: center; }
.ks-feedfield.is-ready .ks-feedfield__go,
.ks-feedfield:hover .ks-feedfield__go,
.ks-feedfield:focus-within .ks-feedfield__go { opacity: 1; transform: scale(1); pointer-events: auto; }
.ks-feedfield__go:hover { background: var(--ks-violet-hover); }
.ks-feedfield__go:active { transform: scale(0.96); transition-duration: 100ms; }
.ks-feedfield__go:focus-visible { outline: 2px solid var(--ks-violet); outline-offset: 3px; }
.ks-feedfield__kopieren { display: inline-flex; align-items: center; gap: var(--space-1); }
.ks-feedfield__go .ks-feedfield__done { display: none; }
.ks-feedfield.is-copied .ks-feedfield__go { background: var(--ks-black); }
.ks-feedfield.is-copied .ks-feedfield__go .ks-feedfield__kopieren { display: none; }
.ks-feedfield.is-copied .ks-feedfield__go .ks-feedfield__done { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Bestätigung als „gesendete Nachricht“ unter dem Feld; im Zeilen-Grid außerhalb des Flusses (cb03) */
.ks-feedfield__bubble { margin: var(--space-2) 0 0 auto; width: fit-content; max-width: 100%;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--ks-violet); color: #fff; font-size: 14px; line-height: 1.4;
  opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: bottom right;
  transition: opacity 240ms var(--ease), transform 360ms var(--ks-spring); }
.ks-feedfield__bubble.is-shown { opacity: 1; transform: none; }
.ks-block-intro__grid--zeilen .ks-feedfield__bubble { position: absolute; right: 0; top: calc(100% + 10px); margin: 0; }
@media (max-width: 760px) {
  .ks-feedfield { min-height: 64px; padding: 6px 6px 6px 12px; }
  .ks-feedfield__chip { width: 44px; height: 44px; border-radius: 14px; }
  .ks-feedfield__value { font-size: 15px; }
  .ks-feedfield__go, .ks-feedfield__go--icon { height: 48px; }
  .ks-feedfield__go--icon { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-feedfield__char { animation: none; opacity: 1; transform: none; }
  .ks-feedfield__go { transition: opacity 200ms var(--ease); transform: none; }
  .ks-feedfield__bubble { transition: opacity 200ms var(--ease); transform: none; }
}

.ks-block-akkordeon { padding-bottom: 0; }
.ks-block-akkordeon .ks-accordion { gap: 0; }
.ks-block-akkordeon { --acc-title-size: var(--title-acc); }
.ks-acc { border: none; overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 var(--radius-xl) 0 0 var(--seam-to, transparent);
  transition: background var(--dur) var(--ease); }
.ks-acc--seam-violet { --seam-to: var(--ks-violet); }
.ks-block-akkordeon { --acc-inset: max(var(--container-pad), calc((100% - var(--measure-col)) / 2 + var(--container-pad))); }
.ks-block-akkordeon .ks-acc__trigger { padding-inline: var(--acc-inset); }
.ks-block-akkordeon .ks-acc__inner {
  padding-inline: var(--acc-inset);
  max-width: none;
}
.ks-block-akkordeon .ks-acc__inner > * { max-width: var(--content-measure); }
.ks-block-akkordeon .ks-acc__inner > .ks-cardgroup, .ks-block-akkordeon .ks-acc__inner > .ks-cardrow, .ks-block-akkordeon .ks-acc__inner > .ks-mb-split { max-width: none; }
.ks-acc + .ks-acc { margin-top: 0; }
.ks-acc__trigger { width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-2); background: none; border: none; cursor: pointer; text-align: left;
  padding: var(--space-8) var(--space-4); font-family: var(--font-sans);
  font-size: var(--acc-title-size, var(--h2-size)); line-height: 1.1;
  letter-spacing: -0.02em; font-weight: var(--fw-bold);
  transition: padding-bottom var(--dur-slow) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__trigger { padding-bottom: var(--space-4); }
.ks-acc__icon { flex: none; width: 48px; height: 1.1em; height: 1lh; color: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__icon { transform: rotate(45deg); }
.ks-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__panel { grid-template-rows: 1fr; }
.ks-acc__panel > div { overflow: hidden; visibility: hidden;
  transition: visibility 0s linear var(--dur-slow); }
.ks-acc__inner { padding: 0 var(--space-4) var(--space-8); line-height: var(--body-lh);
  max-width: calc(var(--content-measure) + var(--space-4) * 2); }
.ks-acc__inner ul { list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.ks-acc__inner li { padding-left: 22px; position: relative; }
.ks-acc__inner li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.5; }
body:not(.ks-theme-carnation) .ks-acc--white .ks-acc__inner li::before {
  background: var(--ks-violet); opacity: 1;
}
.ks-theme-carnation .ks-acc--white .ks-acc__inner li::before {
  background: var(--ks-carnation); opacity: 1;
}
.ks-acc__inner li b { font-weight: var(--fw-semibold); }
/* Titel = Überschriftfarbe, Inhalt = Fließtextfarbe des jeweiligen Kontexts. */
.ks-acc__trigger { color: var(--text-strong); }
.ks-acc__inner { color: var(--text-body); }
.ks-acc--white { background: #fff; --acc-bg: #fff; }
.ks-acc--violet { background: var(--ks-violet); --acc-bg: var(--ks-violet); }
.ks-accordion__item[data-open="true"] .ks-accordion__icon { transform: rotate(45deg); }
.ks-accordion__item[data-open="true"] .ks-acc__panel { grid-template-rows: 1fr; }
.ks-accordion__icon svg { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .ks-block-akkordeon { --acc-inset: var(--container-pad); }
  .ks-acc__trigger { padding: 40px var(--space-3); }
  .ks-acc[data-open="true"] .ks-acc__trigger { padding-bottom: var(--space-3); }
  .ks-acc__inner { padding: 0 var(--space-3) 40px; }
  .ks-acc__icon { width: 32px; }
}
.ks-acc__inner, .ks-accordion__panel-inner {
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ks-acc[data-open="true"] .ks-acc__inner, .ks-accordion__item[data-open="true"] .ks-accordion__panel-inner {
  opacity: 1; transform: none;
  transition-delay: 90ms;
}
.no-js .ks-acc__inner, .no-js .ks-accordion__panel-inner { opacity: 1; transform: none; }
.ks-acc__inner li {
  opacity: 0; transform: translateY(-4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.ks-acc[data-open="true"] .ks-acc__inner li { opacity: 1; transform: none; }
.ks-acc[data-open="true"] .ks-acc__inner li:nth-child(1) { transition-delay: 130ms; }
.ks-acc[data-open="true"] .ks-acc__inner li:nth-child(2) { transition-delay: 165ms; }
.ks-acc[data-open="true"] .ks-acc__inner li:nth-child(3) { transition-delay: 200ms; }
.ks-acc[data-open="true"] .ks-acc__inner li:nth-child(4) { transition-delay: 235ms; }
.ks-acc[data-open="true"] .ks-acc__inner li:nth-child(5) { transition-delay: 270ms; }
.ks-acc[data-open="true"] .ks-acc__inner li:nth-child(n+6) { transition-delay: 300ms; }
.no-js .ks-acc__inner li { opacity: 1; transform: none; }
.no-js .ks-acc__panel { grid-template-rows: 1fr; }
.no-js .ks-acc__icon { display: none; }
.no-js .ks-acc__trigger { cursor: default; }
@media print {
  .ks-acc__panel { grid-template-rows: 1fr !important; }
  .ks-acc--violet { background: #fff !important; color: #000 !important; }
}
.ks-acc--carnation { background: var(--ks-carnation); --acc-bg: var(--ks-carnation); }
/* Kein Flächen-Signal mehr — weder beim Zeigen noch im offenen Zustand (Chris, Runde 8);
   das Signal ist allein der gleitende Titel (Regeln am Ende der Datei). */
.ks-acc[data-open="true"] { background: var(--acc-bg); }
.ks-acc--seam-carnation { --seam-to: var(--ks-carnation); }
.ks-acc--seam-grey { --seam-to: var(--ks-grey-surface); } /* Naht zu einer grauen Folgefläche (Runde 9) */
.ks-acc--seam-black { --seam-to: var(--ks-black); } /* letztes Element vor dem Footer (RSS-Seite, Runde 16) */
.ks-acc__inner ul ul { margin-top: 12px; }
@media print {
  .ks-acc--carnation { background: #fff !important; color: #000 !important; }
}

/* SVG-Größe unabhängig von der Box-Höhe */
.ks-acc__icon svg { width: 48px; height: 48px; display: block; }
@media (max-width: 760px) { .ks-acc__icon svg { width: 32px; height: 32px; } }

/* DS-native Akkordeon-Familie (Glossar, CB 16) — Override der gesperrten ks-components.css */
.ks-accordion__trigger { align-items: flex-start; }
/* Icon-Kasten bleibt quadratisch — die 45°-Rotation darf die Spalte nicht sprengen */
.ks-accordion__icon { color: inherit; width: 24px; height: 24px;
  margin-top: calc((1.6em - 24px) / 2); margin-top: calc((1lh - 24px) / 2);
  display: flex; align-items: center; justify-content: center; }
.ks-accordion__icon svg { width: 24px; height: 24px; display: block; }
.ks-accordion__panel-inner { color: var(--text-body); }

/* Titel ausgleichen, Fließtext ohne Waisen */
.ks-acc__trigger > span:first-child, .ks-accordion__trigger > span:first-child { text-wrap: balance;
  min-width: 0; overflow-wrap: anywhere; } /* lange Glossarbegriffe schieben bei 320 px sonst das Symbol hinaus */
.ks-acc__inner p, .ks-acc__inner li, .ks-accordion__panel-inner { text-wrap: pretty; }

/* W-04 — geschlossene Panels sind kein Tabulator-Ziel (Muster wie .ks-mobilenav) */
.ks-acc[data-open="true"] .ks-acc__panel > div,
.ks-accordion__item[data-open="true"] .ks-acc__panel > div { visibility: visible; transition-delay: 0s; }
.no-js .ks-acc__panel > div { visibility: visible; }
@media print { .ks-acc__panel > div { visibility: visible; } }

/* Hover-Signal der Akkordeon-Zeile (Runde 10, ersetzt den Slide aus Runde 6): ein Muster für
   alle Farbvarianten — der Titel zoomt beim Zeigen leicht (--acc-zoom) und bleibt im geöffneten
   Zustand gezoomt; der Ursprung liegt links auf der Zeilenmitte, die linke Kante bleibt bündig.
   Farbe und Fläche bleiben (Feedback-Pins 960945 und 960948). Gilt für beide Akkordeon-Familien. */
.ks-acc__trigger > span:first-child, .ks-accordion__trigger > span:first-child {
  transform-origin: left center; transition: transform var(--acc-zoom-dur) var(--ease-reveal); }
@media (hover: hover) and (pointer: fine) {
  .ks-acc:hover .ks-acc__trigger > span:first-child,
  .ks-accordion__item:hover .ks-accordion__trigger > span:first-child { transform: scale(var(--acc-zoom)); }
}
.ks-acc[data-open="true"] .ks-acc__trigger > span:first-child,
.ks-accordion__item[data-open="true"] .ks-accordion__trigger > span:first-child { transform: scale(var(--acc-zoom)); }
@media (prefers-reduced-motion: reduce) {
  .ks-acc__trigger > span:first-child, .ks-accordion__trigger > span:first-child { transition: none; }
}

/* Öffnen des Toggles (impeccable animate, Runde 9): Die Fläche öffnet mit dem sicheren Auslauf
   (--ease-reveal, 420 ms), der Inhalt steigt danach nach — bei mehreren Blöcken in bis zu vier
   Stufen; Schließen ist deutlich schneller (240 ms). Symbol und Titelabstand laufen im selben Takt.
   Ohne JS und im Druck steht der Inhalt sofort, mit reduzierter Bewegung wird nur überblendet. */
:root { --acc-open-dur: 420ms; --acc-close-dur: 240ms; }
.ks-acc__panel { transition: grid-template-rows var(--acc-close-dur) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__panel, .ks-accordion__item[data-open="true"] .ks-acc__panel {
  transition: grid-template-rows var(--acc-open-dur) var(--ease-reveal); }
.ks-acc__panel > div { transition: visibility 0s linear var(--acc-close-dur); }
.ks-acc__icon { transition: transform var(--acc-close-dur) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__icon { transition: transform var(--acc-open-dur) var(--ease-reveal); }
.ks-acc__trigger { transition: padding-bottom var(--acc-close-dur) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__trigger { transition: padding-bottom var(--acc-open-dur) var(--ease-reveal); }
.ks-acc__inner > *, .ks-accordion__panel-inner { opacity: 0; transform: translateY(10px);
  transition: opacity 120ms var(--ease), transform var(--acc-close-dur) var(--ease); }
.ks-acc[data-open="true"] .ks-acc__inner > *, .ks-accordion__item[data-open="true"] .ks-accordion__panel-inner {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease) 90ms, transform var(--acc-open-dur) var(--ease-reveal) 90ms; }
.ks-acc[data-open="true"] .ks-acc__inner > :nth-child(2) { transition-delay: 150ms; }
.ks-acc[data-open="true"] .ks-acc__inner > :nth-child(3) { transition-delay: 210ms; }
.ks-acc[data-open="true"] .ks-acc__inner > :nth-child(n + 4) { transition-delay: 270ms; }
.no-js .ks-acc__inner > *, .no-js .ks-accordion__panel-inner { opacity: 1; transform: none; }
@media print {
  .ks-acc__inner > *, .ks-accordion__panel-inner { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-acc__panel, .ks-acc[data-open="true"] .ks-acc__panel, .ks-accordion__item[data-open="true"] .ks-acc__panel,
  .ks-acc__icon, .ks-acc__trigger { transition: none; }
  .ks-acc__inner > *, .ks-accordion__panel-inner { transform: none; transition: opacity 200ms var(--ease); }
  .ks-acc[data-open="true"] .ks-acc__inner > *, .ks-accordion__item[data-open="true"] .ks-accordion__panel-inner { transition-delay: 0s; }
}

.ks-cardgroup__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; }
.ks-cardgroup__nav { display: flex; justify-content: center; gap: var(--space-1);
  margin-top: var(--space-3); }
.ks-cardgroup__nav .ks-iconbtn { width: 44px; height: 44px; }
.ks-cardgroup__nav .ks-iconbtn[disabled] { opacity: 0.35; cursor: default; }
.ks-cardgroup__nav .ks-iconbtn[disabled]:hover { border-color: var(--border-default);
  color: inherit; background: transparent; }
.ks-cardgroup__nav .ks-iconbtn--prev svg { transform: scaleX(-1); }
.ks-cardgroup--on-violet .ks-iconbtn { color: #fff; border-color: rgba(255,255,255,0.55); }
.ks-cardgroup--on-violet .ks-iconbtn:hover:not([disabled]) { background: var(--ks-violet-hover);
  border-color: var(--ks-violet-hover); color: #fff; }
.ks-cardgroup--on-violet .ks-iconbtn[disabled]:hover { background: transparent;
  border-color: rgba(255,255,255,0.55); color: #fff; }
.ks-cardgroup--on-violet :focus-visible { outline-color: #fff; }
.ks-cardrow { display: flex; gap: var(--space-3);
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding: 4px; margin: var(--space-4) -4px 0;
  scrollbar-width: none; -ms-overflow-style: none; }
.ks-cardrow::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (prefers-reduced-motion: reduce) {
  .ks-cardrow { scroll-behavior: auto; }
}
.ks-cardlet { position: relative; flex: none;
  width: calc((100% - 2 * var(--space-3) - 8px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  color: var(--text-strong); text-decoration: none; }
/* Kartenreihen liegen auf grauer Section, die Karten sind weiß — wie die Blog-Übersicht (Runde 7). */
.ks-cardrow--on-white .ks-cardlet { background: #fff; }
.ks-cardlet__media { aspect-ratio: 3 / 2; background: var(--surface-placeholder);
  border-radius: var(--radius-md); overflow: hidden; }
.ks-cardlet__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-cardlet__body { display: flex; flex-direction: column; gap: 10px;
  padding: var(--space-3); flex: 1; }
.ks-cardlet__title { margin: 0; font-size: var(--h5-size); line-height: var(--h5-lh);
  font-weight: var(--fw-bold); color: var(--text-strong); }
.ks-cardlet__text { margin: 0; font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--text-body); display: block; -webkit-line-clamp: unset; overflow: visible; }
.ks-cardlet__morelink { font-weight: var(--fw-semibold); color: var(--text-link);
  white-space: nowrap; }
.ks-cardlet__morelink svg { width: 14px; height: 14px; vertical-align: -2px;
  margin-left: 4px; }
.ks-block-links { padding: var(--space-10) 0; }
/* Keine eigene Textfarbe: Auf violetter Fläche erbt der Block sie von
   .ks-section--violet, auf weißer Fläche die Grundfarbe (Feedback-Pin 960914). */
.ks-block-links > .ks-container > p {
  margin-top: var(--space-2); line-height: var(--body-lh); max-width: var(--content-measure); }
@media (max-width: 760px) {
  /* Mobil trägt die aktive Karte fast die volle Breite, die nächste schaut nur 24 px herein (Runde 9). */
  .ks-cardlet { width: min(calc(100% - 48px), 340px); }
  /* Snap verbindlich; ein Leerraum nach der letzten Karte, damit auch sie am linken Rand einrastet. */
  .ks-cardrow { scroll-snap-type: x mandatory; scroll-padding-left: 4px; }
  /* Chris, 13.09.2026 (E189): Die angeschnittene Karte läuft rechts bis zum Viewport-Rand — der Wischbereich greift über den
     Container-Innenabstand hinaus, erst das Scroll-Ende behält den Abstand. Gestapelte Reihen (RSS-Schritte) bleiben im Raster. */
  .ks-cardrow { margin-right: calc(-1 * var(--container-pad)); padding-right: var(--container-pad); }
  .ks-cardrow--mobile-stapel { margin-right: -4px; padding-right: 4px; }
  .ks-cardrow::after { content: ""; flex: none; width: max(24px, calc(100% - 364px)); }
  /* Startseiten-Pilot: Nur überlange Texte erhalten einen eigenen, weich auslaufenden Lesebereich. */
  .ks-cardrow--mobile-scrolltext {
    --card-mobile-text-max: 150px; /* Chris, Runde 15: vorher 192 px */
    --card-mobile-text-fade: 32px;
    --card-mobile-text-end-space: 40px;
  }
  .ks-cardrow--mobile-scrolltext .ks-cardlet__text.is-scrollable {
    box-sizing: border-box;
    max-height: var(--card-mobile-text-max);
    padding-right: 6px;
    padding-bottom: var(--card-mobile-text-end-space);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ctx-accent) 38%, transparent) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 0,
      #000 calc(100% - var(--card-mobile-text-fade)), rgba(0,0,0,0.08) 100%);
    mask-image: linear-gradient(to bottom, #000 0,
      #000 calc(100% - var(--card-mobile-text-fade)), rgba(0,0,0,0.08) 100%);
  }
  .ks-cardrow--mobile-scrolltext .ks-cardlet__text.is-scrollable.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ks-cardrow--mobile-scrolltext .ks-cardlet__text.is-scrollable::-webkit-scrollbar { width: 3px; }
  .ks-cardrow--mobile-scrolltext .ks-cardlet__text.is-scrollable::-webkit-scrollbar-track { background: transparent; }
  .ks-cardrow--mobile-scrolltext .ks-cardlet__text.is-scrollable::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ctx-accent) 38%, transparent);
    border-radius: 3px;
  }
}
.ks-cardlet--link { transition: transform var(--dur-fast) var(--ease),
  box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); }
.ks-cardlet--link .ks-cardlet__title { transition: color var(--dur) var(--ease); }
.ks-cardlet--link .ks-cardlet__morelink svg { transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  /* Hover: Anheben, kein Schatten (Chris, Runde 9). */
  .ks-cardlet--link:hover { transform: translateY(-2px); }
  .ks-cardlet--link:hover .ks-cardlet__title { color: var(--text-link); }
  .ks-cardlet--link:hover .ks-cardlet__morelink svg { transform: translate(2px, -2px); }
}
/* Ring nur bei Tastaturfokus, nicht nach Klick (Runde 9). */
.ks-cardlet--link:focus-visible { box-shadow: inset 0 0 0 2px var(--ctx-accent); outline: 0; }
.ks-cardlet__badge { width: 48px; height: 48px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ctx-accent) 10%, transparent); color: var(--ctx-accent);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  display: none; align-items: center; justify-content: center; flex: none;
  margin-bottom: 10px; /* Luft unter dem Symbol (Runde 5) */ }
.ks-cardlet__badge svg { width: 22px; height: 22px; }
/* Kicker über dem Kartentitel (Medienart wie „Song“, „Video“) — im Ton der Artikel-Kicker. */
.ks-cardlet__kicker { font-size: 13px; line-height: 1.4; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; color: var(--text-link); }
.ks-cardlet__kicker + .ks-cardlet__title { margin-top: -4px; }
.ks-cardlet__more { margin-top: auto; align-self: flex-start; font-weight: var(--fw-semibold); color: var(--text-link); }
.ks-cardlet__more svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px;
  transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ks-cardlet--link:hover .ks-cardlet__more svg { transform: translate(2px, -2px); }
}

/* T-07 — lange Wörter im Kartentitel brechen um */
.ks-cardlet__title { overflow-wrap: break-word; hyphens: manual; }

/* Hover-Varianten zur Abstimmung (Vorschau /hover-varianten/). Die ersten drei kommen ohne
   Außenschatten aus, der im scrollenden Container ohnehin beschnitten würde. */
@media (hover: hover) and (pointer: fine) {
  .ks-cardrow--hover-kontur .ks-cardlet--link:hover { box-shadow: inset 0 0 0 2px var(--ctx-accent); }
  .ks-cardrow--hover-flaeche .ks-cardlet--link:hover { background: #fff; }
  .ks-cardrow--on-white.ks-cardrow--hover-flaeche .ks-cardlet--link:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--border-default); }
  .ks-cardrow--hover-badge .ks-cardlet--link:hover .ks-cardlet__badge { background: var(--ctx-accent); color: #fff; }
}

/* Invertierte Karte (Runde 6): violette Fläche, Kontexttokens hell — „Aus dem Blog“ auf Bezahlmethoden.
   Zwei Klassen, damit der Karten-Reset des Kontextblocks (site-core.css) nicht greift. */
.ks-cardlet.ks-cardlet--violet { background: var(--ks-violet); color: #fff;
  --text-strong: #fff; --text-body: rgba(255,255,255,0.92); --text-link: #fff;
  --text-link-hover: rgba(255,255,255,0.85); --ctx-accent: #fff; --focus-ring: #fff; }

/* Externe Karten (E110 → Runde 17, Chris): Ruhezustand = freigestelltes Browserfenster mit dem Screenshot, nach oben
   gezogen und unten angeschnitten (--extern-fenster-y); bei Hover oder Tastaturfokus fährt das Fenster hinaus und das Logo
   der Zielseite erscheint als Silhouette auf --extern-grau. Das Fenster (extern--<name>--fenster, per JS ergänzt) hängt auf
   allen Geräten — Touch zeigt den Ruhezustand. */
.ks-cardlet__media.has-fenster { position: relative; background: var(--extern-grau); --extern-fenster-y: 21%; --extern-fenster-scale: 1.1; } /* Chris, Runde 18: 21 % statt 28 %, Fenster 10 % größer */
.ks-cardlet__media.has-fenster .ks-cardlet__logo { position: relative; z-index: 1; opacity: 0; transform: scale(0.94);
  transition: opacity 420ms var(--ease-reveal), transform 560ms var(--ease-reveal); }
.ks-cardlet__fenster { position: absolute; inset: 0; display: block; transform: translateY(var(--extern-fenster-y)) scale(var(--extern-fenster-scale));
  transition: transform 560ms var(--ease-reveal), opacity 420ms var(--ease-reveal), filter 560ms var(--ease-reveal); }
.ks-cardlet__fenster img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (hover: hover) and (pointer: fine) {
  /* schlägt den Bildzoom 1,04 der Karten (höhere Spezifität) */
  .ks-cardlet--link:hover .ks-cardlet__media img.ks-cardlet__logo, .ks-cardlet--link:focus-within .ks-cardlet__media img.ks-cardlet__logo { opacity: 1; transform: none; }
  .ks-cardlet--link:hover .ks-cardlet__media .ks-cardlet__fenster img { transform: none; }
  .ks-cardlet--link:hover .ks-cardlet__fenster, .ks-cardlet--link:focus-within .ks-cardlet__fenster { transform: translateY(100%) scale(var(--extern-fenster-scale)); opacity: 0; filter: blur(2px); }
}
@media (prefers-reduced-motion: reduce) {
  /* nur Überblenden: Fenster bleibt an seinem Platz, Logo erscheint darüber */
  .ks-cardlet__media.has-fenster .ks-cardlet__logo, .ks-cardlet__fenster { transition: opacity 200ms var(--ease); filter: none; }
  .ks-cardlet__media.has-fenster .ks-cardlet__logo { transform: none; }
  .ks-cardlet--link:hover .ks-cardlet__fenster, .ks-cardlet--link:focus-within .ks-cardlet__fenster { transform: translateY(var(--extern-fenster-y)) scale(var(--extern-fenster-scale)); filter: none; }
}

/* Kurze Schrittfolgen (RSS-Seite, Runde 19): mobil untereinander statt als Wischreihe — alle Schritte auf einen Blick.
   Die Pfeile blenden sich aus, weil die Reihe dann nicht mehr scrollt (cb26-kartenreihe.js). */
@media (max-width: 760px) {
  .ks-cardrow--mobile-stapel { flex-direction: column; overflow: visible; scroll-snap-type: none; }
  .ks-cardrow--mobile-stapel .ks-cardlet { width: auto; }
  .ks-cardrow--mobile-stapel::after { display: none; }
}

/* Premium-Teaser (E122): Karte für Inhalte des geschützten Bereichs — Symbolfläche statt Foto (die drei Premium-Motive
   von BOKU stehen noch aus); als Gast „Anmelden“, als Mitglied Direktlink (Textbausteine ks-premium-nur-gast/-mitglied). */
.ks-cardlet__media--premium { display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--ks-violet) 0%, var(--ks-violet-hover) 100%); }
.ks-cardlet__media--premium svg { width: 56px; height: 56px; }
.ks-cardlet--premium .ks-cardlet__badge { background: var(--ks-violet); color: #fff; }

.ks-article { box-shadow: none; }
.ks-article__media { border-radius: var(--radius-md); overflow: hidden; }
.ks-article__title { font-weight: var(--fw-bold); }
/* E165 — Titelabstand der Pressekarten inklusive des bestehenden Flex-Abstands. */
#pm-grid .ks-article__title { margin-bottom: calc(20px - var(--space-1)); }
@media (max-width: 760px) {
  #pm-grid .ks-article__title { margin-bottom: calc(16px - var(--space-1)); }
}
.ks-article { position: relative; }
.ks-article__foot .ks-linktext:not([href^="tel:"])::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.ks-article { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-article__title { transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ks-article:has(.ks-linktext:not([href^="tel:"])):hover {
      transform: translateY(-2px); } /* kein Schatten beim Zeigen (Chris, Runde 9) */
  .ks-article:has(.ks-linktext:not([href^="tel:"])):hover .ks-article__title { color: var(--ks-violet); }
  .ks-article:hover .ks-linktext svg { transform: translateX(2px); }
}
.ks-article:has(:focus-visible) { box-shadow: var(--shadow-lg); } /* nur Tastaturfokus (Runde 9) */
.ks-article__body { flex: 1; }
.ks-article__foot { margin-top: auto; padding-top: var(--space-1); }

/* D-04 — Kartenteaser-Fließtext schwarz (Override der gesperrten ks-components.css) */
.ks-article__text { color: var(--text-body); }

/* LK-01 — Zweitlinks im Kartenfuß liegen über der Ganzkarten-Fläche */
.ks-article__foot .ks-link { position: relative; z-index: 1; }

/* E21 / P-01 — „Rubrik · Datum“ ist eine Meta-Zeile, keine Eyebrow-Optik
   (Meta bleibt grau, E32; Override der gesperrten ks-components.css) */
.ks-article__kicker { font-weight: var(--fw-regular); color: var(--text-muted); }

/* Der PDF-Download sitzt als graues Symbol rechts in der Kartenfußzeile.
   z-index hebt ihn über die ganzflächige Klickfläche des Titel-Links
   (Feedback-Pin 960953). */
.ks-article__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ks-article__pdf { position: relative; z-index: 1; flex: none; display: inline-flex;
  align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; font-weight: var(--fw-semibold);
  text-decoration: none; transition: color var(--dur) var(--ease); }
.ks-article__pdf svg { width: 20px; height: 20px; }
.ks-article__pdf:hover { color: var(--ks-violet); }

/* Querformat-Karte für die drei neuesten Beiträge (Runde 22, E148): Bild links, Inhalt rechts,
   graue Fläche auf der weißen Section; der mittlere Beitrag ist gespiegelt. Unter 980 px rücken
   die Spalten auf gleiche Breite, unter 760 px stapeln Bild und Text. */
.ks-blog-neu { position: relative; } /* Wurzel der Section — hält die Klasse an dieser Component */
.ks-blog-neu__liste { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.ks-article--quer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--ks-grey-surface); box-shadow: none; }
.ks-article--quer .ks-article__media { aspect-ratio: auto; height: 100%; min-height: 300px; border-radius: 0; }
.ks-article--quer .ks-article__media picture, .ks-article--quer .ks-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-article--quer .ks-article__body { padding: var(--space-4) var(--space-6); justify-content: center; gap: var(--space-2); }
.ks-article--quer .ks-article__kicker { font-size: 14px; }
.ks-article--quer .ks-article__title { font-size: var(--h3-size); line-height: 1.15; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.ks-article--quer .ks-article__text { font-size: 16px; line-height: 1.6; -webkit-line-clamp: 3; }
.ks-article--quer-spiegel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ks-article--quer-spiegel .ks-article__media { order: 2; }
@media (max-width: 980px) {
  .ks-article--quer, .ks-article--quer-spiegel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ks-article--quer .ks-article__body { padding: var(--space-3) var(--space-4); }
  .ks-article--quer .ks-article__title { font-size: var(--h4-size); }
}
@media (max-width: 760px) {
  .ks-article--quer, .ks-article--quer-spiegel { grid-template-columns: 1fr; }
  .ks-article--quer-spiegel .ks-article__media { order: 0; }
  .ks-article--quer .ks-article__media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .ks-article--quer .ks-article__body { padding: var(--space-3); }
}

@media (max-width: 760px) {
  .ks-section { padding: var(--space-8) 0; }
}

[data-topic] { transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
[data-topic].is-filtered-out { opacity: 0; transform: scale(0.98); }
.ks-filterhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ks-filterhead .ks-h2, .ks-filterhead .ks-filters { margin: 0; }
.ks-filterhead .ks-filters { justify-content: flex-end; }
.ks-filterhead + .ks-grid-3 { margin-top: var(--space-6); }
.ks-filter:not(.ks-filter--active):hover { background: rgba(104,50,246,0.08); }
.ks-filters--on-violet .ks-filter:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.ks-filters--on-violet .ks-filter--active:hover { background: rgba(255,255,255,0.88); color: var(--ks-violet); }

/* Scrollende Pillenreihe (Runde 5): mobil in einer Zeile, bis an den rechten Browserrand
   ausgezogen, waagerecht scrollbar; ein Ausblenden am rechten Rand zeigt, dass es weitergeht,
   und verschwindet am Ende der Reihe (filter.js setzt data-scroll-end). */
:root { --filter-fade: 56px; }
@media (max-width: 760px) {
  .ks-filterhead { display: grid; gap: var(--space-3); }
  .ks-filterhead .ks-filters { justify-content: flex-start; }
  .ks-filters--scroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
    margin-right: calc(-1 * var(--container-pad)); padding-right: var(--container-pad);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--filter-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--filter-fade)), transparent); }
  .ks-filters--scroll::-webkit-scrollbar { display: none; }
  .ks-filters--scroll[data-scroll-end] { -webkit-mask-image: none; mask-image: none; }
  .ks-filters--scroll > .ks-filter { flex: none; scroll-snap-align: start; }
}

/* Kopfzeile mit festem Rubriken-Filter (Runde 22, E148): Überschrift oben, Filterleiste darunter links. */
.ks-blog-mehr { position: relative; } /* Wurzel der Section — hält die Klasse an dieser Component */
.ks-blog-mehr .ks-filterhead { display: grid; gap: var(--space-4); justify-content: start; }
.ks-blog-mehr .ks-filterhead .ks-filters { justify-content: flex-start; }

/* Rahmen um die feste Pillen-Leiste im Inhalt (Runde 22, Chris): leichte graue Kontur mit Kapselradius,
   die Pillen liegen mit 4 px Luft darin; die Reihe scrollt mobil innerhalb des Rahmens (Fade bleibt auf
   der Reihe). Mobil flachere Pillen, damit der Rahmen nicht zu hoch baut. */
.ks-filters-rahmen { display: inline-flex; max-width: 100%; box-sizing: border-box; padding: 4px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: transparent;
  overflow: hidden; }
.ks-filters-rahmen > .ks-filters { margin: 0; min-width: 0; flex: 1 1 auto; }
.ks-filterhead .ks-filters-rahmen { justify-self: start; }
@media (max-width: 760px) {
  .ks-filters-rahmen { display: flex; width: 100%; }
  .ks-filters-rahmen > .ks-filters--scroll { margin-right: 0; padding-right: 4px; }
  .ks-filters-rahmen .ks-filter { padding-top: 6px; padding-bottom: 6px; }
}

/* Gleitende Pille im festen Filter (Runde 22, E150) — dieselbe Mechanik wie im Hauptmenü (js-lib/pille.js:
   Gleiten zum Zeiger, Rückkehr, Timings). Der Schriftwechsel an der Pillenkante läuft hier ohne Schriftmaske:
   Die Fläche ist ein Fenster (overflow: hidden) mit einem gegenläufig bewegten Duplikat der Beschriftungen in
   der Aktivfarbe — nur transform, keine animierten Custom Properties, weil Safari animierte Custom Properties
   in scrollenden Reihen nicht zuverlässig an die Pillen weitergibt. Konturen entfallen wie im Band (E120). */
.ks-filters.has-pill { position: relative; --ks-nav-base: var(--text-strong); --ks-nav-active: #fff; --ks-pill-dur: 560ms; }
.ks-filters.has-pill.is-returning { --ks-pill-dur: 760ms; }
.ks-filters__pille { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--radius-pill);
  background: var(--ks-violet); opacity: 0; pointer-events: none; overflow: hidden; z-index: 2; /* über den Buttons: verdeckt den Originaltext, zeigt das Duplikat */
  transition: transform var(--ks-pill-dur) var(--ease-reveal), width var(--ks-pill-dur) var(--ease-reveal), opacity 120ms var(--ease); }
.ks-filters__pille.is-visible { opacity: 1; }
.ks-pille-inhalt { position: absolute; top: 0; left: 0; height: 100%; white-space: nowrap; pointer-events: none;
  transition: transform var(--ks-pill-dur) var(--ease-reveal); }
.ks-pille-inhalt > span { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--ks-nav-active); box-sizing: border-box; }
.ks-filters.has-pill .ks-filter, .ks-filters.has-pill .ks-filter:hover,
.ks-filters.has-pill .ks-filter--active, .ks-filters.has-pill .ks-filter--active:hover {
  position: relative; z-index: 1; background: transparent; border-color: transparent; color: var(--ks-nav-base); transition: none; }
@media (prefers-reduced-motion: reduce) { .ks-filters__pille, .ks-pille-inhalt, .ks-filters.has-pill .ks-filter { transition: none; } }

/* Overscroll-Band (Runde 6): Klon einer Bedienleiste (Pillen-Filter, Buchstabenleiste) auf violetter
   Fläche hinter der Kopfzeile. Fährt herein, sobald das Original unter der Kopfzeile verschwindet
   (stickybar.js), und wieder hinaus, sobald es zurückkommt. Der sichtbare Teil unter der Kopfzeile
   steht als --stickybar-h auf <html>, damit Sprungziele (scroll-margin-top) darunter landen.
   z-index 45: unter Abdunkelung (49) und Kopfzeile (50) samt mobilem Menü, über dem Inhalt. */
.ks-stickybar { position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  background: var(--ks-violet); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: calc(var(--header-h-current) + 10px) 0 10px; /* kompakter (Chris, Runde 15) */
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--stickybar-dur) var(--ease), visibility 0s linear var(--stickybar-dur), box-shadow var(--dur) var(--ease); }
.ks-stickybar.is-in { transform: none; visibility: visible; box-shadow: var(--shadow-md);
  transition: transform var(--stickybar-dur) var(--ease), visibility 0s linear 0s, box-shadow var(--dur) var(--ease); } /* Schatten wandert von der Kopfzeile aufs Band (Runde 9) */
/* Die Leiste setzt nach dem Andocken nach — dieselben Bedienelemente, jetzt hier (Kontinuität). */
.ks-stickybar__leiste { opacity: 0; transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 320ms var(--ease-reveal); }
.ks-stickybar.is-in .ks-stickybar__leiste { opacity: 1; transform: none; transition-delay: 90ms; }
.ks-stickybar .ks-filters, .ks-stickybar .ks-alpha { margin: 0; }
.ks-stickybar .ks-alpha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.ks-stickybar .ks-alpha::-webkit-scrollbar { display: none; }
.ks-stickybar .ks-alpha__btn { flex: none; }
/* Sprungziele unter dem Band: Trefferraster (Paginierung) und Glossar-Gruppen. */
.ks-grid-3[id], .ks-glossar-gruppe { scroll-margin-top: var(--stickybar-h); }
@media (prefers-reduced-motion: reduce) {
  .ks-stickybar, .ks-stickybar.is-in { transition: none; }
  .ks-stickybar__leiste { transform: none; transition: opacity 200ms var(--ease); }
  .ks-stickybar__pille, .ks-stickybar .ks-filters.has-pill .ks-filter { transition: none; }
}
@media print {
  .ks-stickybar { display: none; }
}

/* Kompakte Bedienelemente im Band (Runde 8): kleinere Pillen und Buchstaben, Pillen immer in einer
   Zeile und waagerecht scrollbar (auch Desktop); mobil noch kompakter. */
.ks-stickybar .ks-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-right: var(--filter-fade); /* Ausblenden rechts auch auf dem Desktop (Runde 10); die letzte Pille bleibt hinter dem Fade erreichbar */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--filter-fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--filter-fade)), transparent); }
.ks-stickybar .ks-filters[data-scroll-end] { -webkit-mask-image: none; mask-image: none; }
.ks-stickybar .ks-filters::-webkit-scrollbar { display: none; }
.ks-stickybar .ks-filter { flex: none; padding: 5px 12px; font-size: var(--nav-size-stuck); line-height: 1.3; min-height: 0; height: auto; } /* Schrift wie die Menüpunkte im Scroll-Header (Chris, Runde 17) */
.ks-stickybar .ks-alpha__btn { width: 28px; height: 28px; font-size: 12px; }

/* Gleitende Pille im Band (Runde 16, js-lib/pille.js): wie im Hauptmenü wandert eine weiße Fläche
   von Pille zu Pille und kehrt zur aktiven zurück. Konturen entfallen — nur die Fläche zeigt den
   Zustand; die Kontur wird transparent, nicht entfernt, damit die Maße der Reihe gleich bleiben.
   Seit Runde 22 (E150) mit derselben Fenster-Technik wie der feste Filter, nur mit getauschten Farben:
   weiße Fläche, Schrift darauf violett. Der Farbwechsel an der Kante kommt aus dem Beschriftungs-Duplikat
   im Fenster, nicht mehr aus einer Regel auf .is-pilled. */
.ks-stickybar .ks-filters.has-pill { position: relative; --ks-pill-dur: 560ms;
  --ks-nav-base: #fff; --ks-nav-active: var(--ks-violet); }
.ks-stickybar .ks-filters.has-pill.is-returning { --ks-pill-dur: 760ms; }
.ks-stickybar .ks-filters.has-pill .ks-filter,
.ks-stickybar .ks-filters.has-pill .ks-filter:hover,
.ks-stickybar .ks-filters.has-pill .ks-filter--active,
.ks-stickybar .ks-filters.has-pill .ks-filter--active:hover,
.ks-stickybar .ks-filters.has-pill .ks-filter.is-pilled {
  position: relative; z-index: 1; background: transparent; border-color: transparent; color: var(--ks-nav-base);
  transition: none; }
.ks-stickybar__pille { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--radius-pill);
  background: #fff; opacity: 0; pointer-events: none; overflow: hidden; z-index: 2;
  transition: transform var(--ks-pill-dur) var(--ease-reveal), width var(--ks-pill-dur) var(--ease-reveal), opacity 120ms var(--ease); }
.ks-stickybar__pille.is-visible { opacity: 1; }
@media (max-width: 760px) {
  .ks-stickybar { padding: calc(var(--header-h-current) + 6px) 0 6px; }
  .ks-stickybar .ks-filter { padding: 4px 10px; font-size: 12px; }
  .ks-stickybar .ks-alpha { gap: 3px; }
  .ks-stickybar .ks-alpha__btn { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; }
}

/* Leiste nur im Band (Blog-Übersicht, Glossar): im Seitenkopf mit JS unsichtbar, aber für Tastatur und
   Screenreader erreichbar; ohne JS bleibt sie sichtbar. */
html:not(.no-js) [data-ks-sticky-only] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ks-breadcrumb { font-size: 14px; }
.ks-breadcrumb ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.ks-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-1); }
.ks-breadcrumb li:has(+ li)::after { content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor; color: var(--ks-grey);
  -webkit-mask: var(--ks-chevron) center / contain no-repeat;
  mask: var(--ks-chevron) center / contain no-repeat; }
.ks-breadcrumb a { color: var(--text-link); text-decoration: none; border-radius: 4px; }
.ks-breadcrumb [aria-current="page"] { color: var(--text-muted); }
:root { --ks-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }

/* Auf farbigem Grund (z. B. Premium-Bänder außerhalb von .ks-blog-band) — dieselben Farben wie
   .ks-blog-band .ks-breadcrumb …, die dortigen Regeln bleiben unverändert stehen (Chris 14.09.2026). */
.ks-breadcrumb--on-color a { color: rgba(255,255,255,0.85); }
.ks-breadcrumb--on-color a:hover { color: #fff; }
.ks-breadcrumb--on-color li:has(+ li)::after { color: rgba(255,255,255,0.55); }
.ks-breadcrumb--on-color [aria-current="page"] { color: rgba(255,255,255,0.85); }

/* Mobil einzeilig, waagerecht scrollbar, Ausblenden rechts als Scroll-Hinweis (Runde 9). */
@media (max-width: 760px) {
  .ks-breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    margin-right: calc(-1 * var(--container-pad)); padding-right: var(--container-pad);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-fade)), transparent); }
  .ks-breadcrumb ol::-webkit-scrollbar { display: none; }
  .ks-breadcrumb li { flex: none; white-space: nowrap; }
}

.ks-pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ks-pagination__item { min-width: 40px; height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-default);
  background: #fff; color: var(--text-strong); text-decoration: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ks-pagination__item:hover { border-color: var(--ks-violet); color: var(--ks-violet);
  background: rgba(104,50,246,0.06); }
.ks-pagination__item[aria-current="page"] { background: var(--ks-violet);
  border-color: var(--ks-violet); color: #fff; }
.ks-pagination__item[aria-disabled="true"], .ks-pagination__item:disabled {
  color: var(--ks-grey); background: var(--ks-grey-surface); border-color: transparent;
  cursor: not-allowed; pointer-events: none; }
.ks-pagination__item svg { width: 18px; height: 18px; }
.ks-pagination__gap { color: var(--text-muted); padding: 0 4px; }

/* Karten außerhalb der aktuellen Seite. Eigene Achse neben der Filterung, damit
   sich Filter und Paginierung nicht gegenseitig überschreiben. */
.is-paged-out { display: none !important; }
.ks-pagination { margin-top: var(--space-6); justify-content: center; }

.ks-modal { border: none; padding: 0; background: transparent; max-width: min(640px, calc(100vw - 32px));
  width: 100%; color: var(--text-body); }
.ks-modal::backdrop { background: rgba(0,0,0,0.55); }
.ks-modal__panel { background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-4); position: relative; }
.ks-modal__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2); }
.ks-modal__title { margin: 0; }
.ks-modal__body { color: var(--text-muted); line-height: 1.6; max-width: var(--content-measure); }
.ks-modal__foot { display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-3); }
.ks-modal[open] { animation: ks-modal-in var(--dur-slow) var(--ease-reveal); }
.ks-modal[open]::backdrop { animation: ks-fade-in var(--dur) var(--ease); }
@keyframes ks-modal-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes ks-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ks-modal[open], .ks-modal[open]::backdrop { animation: none; }
}
@media (max-width: 760px) {
  .ks-modal__panel { padding: var(--space-3); }
}

.ks-media-modal { max-width: min(960px, calc(100vw - 32px)); }
.ks-media-modal__panel { padding: 0; overflow: hidden; background: var(--ks-black); }
.ks-media-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 16px 18px; background: #fff; color: var(--text-strong); }
.ks-media-modal__head .ks-h4 { margin: 0; }
.ks-media-modal__medium { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ks-black); }
@media (max-width: 760px) {
  .ks-media-modal__panel { padding: 0; }
}

.ks-searchfield { display: inline-flex; align-items: center; gap: var(--space-1);
  background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 4px 6px 4px 14px; width: 100%; max-width: 420px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-searchfield:focus-within { border-color: var(--ks-violet);
  box-shadow: 0 0 0 3px rgba(104,50,246,0.18); }
.ks-searchfield__icon { display: inline-flex; color: var(--ks-grey); flex: none; }
.ks-searchfield__icon svg { width: 18px; height: 18px; }
.ks-searchfield__input { flex: 1; min-width: 0; border: none; outline: none;
  font-family: var(--font-sans); font-size: 15px; color: var(--text-strong);
  background: transparent; padding: 8px 4px; }
.ks-searchfield__filter { flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer; color: var(--text-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ks-searchfield__filter:hover { background: var(--ks-grey-surface); color: var(--ks-violet); }
.ks-searchfield__filter svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .ks-searchfield { max-width: none; }
}

.ks-choice--warning input:checked + .ks-choice__box {
  background: var(--ks-carnation); border-color: var(--ks-carnation); }
.ks-choice--warning:hover .ks-choice__box { border-color: var(--ks-carnation); }
.ks-choice--warning input:focus-visible + .ks-choice__box { outline-color: var(--ks-carnation); }
.ks-toggle--warning input:checked + .ks-toggle__track { background: var(--ks-carnation); }
.ks-toggle--warning input:focus-visible + .ks-toggle__track { outline-color: var(--ks-carnation); }
.ks-form-panel { background: var(--ks-violet); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.ks-field--on-violet .ks-field__label { color: #fff; }
.ks-field--on-violet .ks-field__hint { color: rgba(255,255,255,0.82); }
.ks-field--on-violet .ks-field__error { color: #fff; font-weight: var(--fw-semibold); }
.ks-field--on-violet .ks-input, .ks-field--on-violet .ks-textarea, .ks-field--on-violet .ks-select { border-color: transparent; }
.ks-field--on-violet .ks-input:focus, .ks-field--on-violet .ks-textarea:focus, .ks-field--on-violet .ks-select:focus { border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.45); }
.ks-form-panel :focus-visible { outline-color: #fff; }
.ks-choice--on-violet, .ks-toggle--on-violet { color: #fff; }
.ks-choice--on-violet .ks-choice__box { border-color: rgba(255,255,255,0.7); background: transparent; }
.ks-choice--on-violet input:checked + .ks-choice__box { background: #fff; border-color: #fff; color: var(--ks-violet); }
.ks-choice--on-violet input:checked + .ks-choice__box .ks-radio-dot { background: var(--ks-violet); }
.ks-muster-form { max-width: 560px; }
/* In einem Zweispalter füllt das Formular seine Spalte; die feste Breite gilt
   nur noch für die freistehende Verwendung auf der Musterseite (Pin 960942). */
.ks-mb-split > .ks-muster-form { max-width: none; }
/* Kontaktformular (Runde 17, Chris): zwei Spalten — links die Angaben, rechts Nachricht, Einwilligung und Absenden.
   Die Nachricht füllt die Höhe der Angaben-Spalte; unter 980 px eine Spalte in derselben Reihenfolge. Seitenkopf ist ein
   Hero (cb03), das Formular steht allein in der grauen Section — die Section trägt den Abstand. */
.ks-contact-form { --choice-box-size: 24px; /* Maß des Kästchens aus ks-components.css (.ks-choice__box) */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-6);
  padding: var(--space-6); }
.ks-contact-form__hint { grid-column: 1 / -1; }
.ks-contact-form__angaben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-2); align-content: start; }
.ks-contact-form__full { grid-column: 1 / -1; }
.ks-contact-form__nachricht { display: flex; flex-direction: column; gap: var(--space-3); }
.ks-contact-form__textfeld { flex: 1; }
.ks-contact-form__textfeld .ks-textarea { flex: 1; min-height: 160px; }
.ks-contact-form__senden { margin: 0; }
.ks-contact-form .ks-choice { align-items: flex-start; line-height: var(--body-lh); }
.ks-contact-form .ks-choice__box { margin-top: calc((var(--body-lh) * 1em - var(--choice-box-size)) / 2); flex: none; } /* Kästchen auf der ersten Textzeile mittig */
.ks-contact-form .ks-choice .ks-link { color: #fff; text-decoration-color: rgba(255,255,255,0.75); }
@media (max-width: 980px) {
  .ks-contact-form { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .ks-contact-form__hint { grid-column: 1; }
  .ks-contact-form__textfeld .ks-textarea { min-height: 200px; }
}
@media (max-width: 760px) {
  .ks-contact-form { padding: var(--space-3); }
  .ks-contact-form__angaben { grid-template-columns: minmax(0, 1fr); }
  .ks-contact-form__full { grid-column: 1; }
}

.ks-prose { max-width: var(--content-measure); }
.ks-prose ul, .ks-prose ol { padding-left: 1.25em; }
/* Aufzählungszeichen ausdrücklich setzen (0.4.6, 11.09.2026): Zeus-Core ≥ 0.6.0 nimmt in zeus-base.css jeder Liste das
   Zeichen (`:where(.zeus-section) :where(ol, ul) { list-style: none }`); die Vorlage verließ sich auf den Browser-Standard.
   Werte = Browser-Standard, `:where()` hält die Spezifität bei einem Typselektor (Sonderlisten mit Klasse gewinnen weiter). */
:where(.ks-prose) ul { list-style: disc; }
:where(.ks-prose) ul ul { list-style: circle; }
:where(.ks-prose) ul ul ul { list-style: square; }
:where(.ks-prose) ol { list-style: decimal; }
.ks-prose li + li { margin-top: 8px; }
body:not(.ks-theme-carnation) :is(.ks-mb--white, .ks-blog-sheet, .ks-legal__body,
  .ks-block-intro:not(.ks-block-intro--violet):not(.ks-block-intro--carnation)) .ks-prose ul > li::marker {
  color: var(--ks-violet);
}

.ks-prose { overflow-wrap: anywhere; }

/* Rechtsseiten: Kapitelverzeichnis links, Fließtext rechts über die restliche
   Breite. Löst den einspaltigen Satz auf halber Contentbreite ab, ohne den
   Rechtstext in Spalten zu zerschneiden (Feedback-Pins 960955 und 960956). */
.ks-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-6); align-items: start; }
/* Unter der H1 mehr Luft als der Fließtext-Rhythmus (16 px) gibt — nur der Abstand trägt die
   Spezifität des Rhythmus-Containers; die Grid-Regel bleibt unterhalb 980 px überschreibbar (Runde 4). */
.ks-mb > .ks-container > .ks-legal { margin-top: var(--space-8); }
.ks-legal__toc { position: sticky; top: var(--anchor-offset); padding: var(--space-3);
  background: var(--ks-grey-surface); border-radius: var(--radius-md); }
.ks-legal__tochead { margin: 0 0 12px; font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--text-muted); }
.ks-legal__toclist { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px; }
.ks-legal__link { color: var(--text-strong); text-decoration: none; font-size: 15px;
  line-height: 1.4; transition: color var(--dur) var(--ease); }
.ks-legal__link:hover { color: var(--ks-violet); }
.ks-legal__body { min-width: 0; }
/* Etwas weiter als das übliche Lesemaß (76ch): Neben dem Kapitelverzeichnis
   soll die Textspalte die Fläche füllen, statt rechts einen Rest offen zu
   lassen (Feedback-Pin 960956). 86 Zeichen bleiben für Rechtstexte lesbar. */
.ks-legal__body > .ks-prose { max-width: 86ch; }
.ks-legal__body h2 { scroll-margin-top: var(--anchor-offset); }
@media (max-width: 980px) {
  .ks-legal { grid-template-columns: 1fr; gap: var(--space-4); }
  .ks-legal__toc { position: static; }
}

.ks-mb { padding: var(--space-8) 0; }
/* Zweiter Container in derselben Fläche (Titelzeile + Inhalt, Runde 16): Überschriftenabstand statt zweiter Fläche (Z-01). */
.ks-mb > .ks-container + .ks-container { margin-top: var(--flow-h2); }
.ks-mb--violet { background: var(--ks-violet);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ks-mb--violet :focus-visible { outline-color: #fff; }
.ks-mb--grey { background: var(--ks-grey-surface); }
.ks-mb p { max-width: var(--content-measure); line-height: var(--body-lh); }
.ks-mb-center { max-width: var(--container-max); margin-inline: auto; text-align: center; }
.ks-mb-center p { margin-inline: auto; }
.ks-mb-right { max-width: var(--content-measure); margin-left: auto; }
/* Content-Zweispalter: Textspalte oben bündig. Heros (cb03) zentrieren — dort sitzt die Regel. */
.ks-mb-split { display: grid; align-items: start; gap: var(--space-6);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.ks-mb-split > * { min-width: 0; }
.ks-mb-onviolet { background: var(--ks-violet); border-radius: var(--radius-lg);
  padding: var(--space-3); }
.ks-mb-onviolet :focus-visible { outline-color: #fff; }
@media (max-width: 980px) {
  .ks-mb-split { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 760px) {
  .ks-mb { padding: var(--space-6) 0; }
}

/* Gleichfarbige Nachbarblöcke teilen sich an der Naht ein einziges Section-Padding. */
.ks-mb--white + .ks-mb--white,
.ks-mb--grey + .ks-mb--grey,
.ks-mb--violet + .ks-mb--violet,
.ks-mb--white + .ks-block-intro:not(.ks-block-intro--violet):not(.ks-block-intro--carnation) {
  padding-top: 0;
}

/* Z-02 · R-04 — beginnt ein Musterblock direkt mit einem Prose-Block, setzt das
   Block-Padding den Abstand; der erste Knoten bringt keinen eigenen Kopfabstand mit */
.ks-mb > .ks-container > .ks-prose:first-child > :first-child { margin-top: 0; }

/* R-05 · E01 — trägt CB 15 die linksbündige Ja/Nein-Liste, folgt sie der
   Seitenflucht statt der zentrierten Lesespalte */
.ks-mb-center > .ks-rfliste { margin-inline: 0; }

/* P-12 · E01 — der Container behält die Seitenbreite 1250; die 820-px-Lesespalte
   der mittigen Blöcke sitzt auf deren Inhalt, die Kanten bleiben unverändert */
.ks-mb-center > * { max-width: calc(820px - 2 * var(--container-pad)); margin-inline: auto; }


/* Musterblock als Box IM Akkordeon-Inhalt: kein Sektions-Padding, sondern eine
   gerundete Innenbox — sonst addieren sich 64 px Blockabstand zum Panelabstand. */
.ks-acc__inner .ks-mb { padding: var(--space-3); border-radius: var(--radius-lg); }
.ks-acc__inner .ks-mb > .ks-measure-col { max-width: none; }

/* CB 10 (Folie 12): Bild links, Text rechts — nur ab 981 px. Der Textknoten bleibt im DOM
   vorn: mobil steht Text oben und Bild unten (Sprechblase auf Folie 12), und die Überschrift
   führt die Vorlesereihenfolge an. Die breitere Spalte wandert mit dem Text nach rechts. */
@media (min-width: 981px) {
  .ks-mb-split--media-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .ks-mb-split--media-first > .ks-mb-media { order: -1; }
}

/* Zweispalter mit vertikal zentrierten Spalten (Startseite, Runde 7). */
.ks-mb-split--center { align-items: center; }

.ks-mb-media { border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-placeholder); }
.ks-mb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-mb-media--m { aspect-ratio: 4 / 3; max-width: 640px; }
.ks-mb-media--l { aspect-ratio: 16 / 9; }
.ks-mb-media--xl { aspect-ratio: 21 / 9; border-radius: var(--radius-xl); }
.ks-mb-media + p, p + .ks-mb-media { margin-top: var(--space-4); }
.ks-mb-media picture { display: contents; }

.ks-local-media-card__stage { position: relative; aspect-ratio: 16 / 9; background: var(--ks-black); }
.ks-local-media-card { min-width: 0; }
.ks-local-media-card__stage picture { display: contents; }
.ks-local-media-card__trigger { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent; cursor: pointer; }
.ks-local-media-card__trigger[hidden] { display: none; }
.ks-local-media-card__trigger .ks-video__scrim { transition: background var(--dur) var(--ease); }
.ks-audio-player { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin-top: var(--space-2); padding: 10px 12px; border-radius: var(--radius-pill); background: var(--ks-grey-surface); }
.ks-audio-player audio { display: none; }
.ks-audio-player__toggle { position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ks-violet); color: #fff; cursor: pointer; }
.ks-audio-player__toggle::before { content: ""; position: absolute; left: 15px; top: 11px; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; }
.ks-audio-player.is-playing .ks-audio-player__toggle::before { left: 13px; top: 11px; width: 12px; height: 16px;
  border: 0; background: linear-gradient(to right, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.ks-audio-player__track { position: relative; min-width: 0; height: 34px; }
.ks-audio-wave { position: absolute; inset: 5px 0; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.ks-audio-wave__bar { flex: 1; max-width: 4px; height: 38%; border-radius: 3px; background: var(--ks-violet); opacity: 0.48;
  transform-origin: center; }
.ks-audio-wave__bar:nth-child(5n + 1) { height: 86%; }
.ks-audio-wave__bar:nth-child(5n + 2) { height: 58%; }
.ks-audio-wave__bar:nth-child(5n + 3) { height: 100%; }
.ks-audio-wave__bar:nth-child(5n + 4) { height: 70%; }
.ks-audio-player.is-playing .ks-audio-wave__bar { animation: ks-audio-wave 820ms ease-in-out infinite alternate; }
.ks-audio-player.is-playing .ks-audio-wave__bar:nth-child(3n + 2) { animation-delay: -320ms; }
.ks-audio-player.is-playing .ks-audio-wave__bar:nth-child(4n + 1) { animation-delay: -560ms; }
.ks-audio-player__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ks-audio-player__track:has(.ks-audio-player__range:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.ks-audio-player__time { min-width: 38px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
@keyframes ks-audio-wave { to { transform: scaleY(0.38); opacity: 0.8; } }
@media (hover: hover) and (pointer: fine) {
  .ks-local-media-card__trigger:hover .ks-video__scrim { background: rgba(0,0,0,0.3); }
  .ks-local-media-card__trigger:hover .ks-video__play { transform: translate(-50%, -50%) scale(1.06); background: var(--ks-violet-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-audio-player.is-playing .ks-audio-wave__bar { animation: none; }
}

.ks-rfliste { max-width: var(--content-measure); margin-inline: auto; text-align: left; }
.ks-rfliste__liste { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ks-rfliste__item { display: grid; grid-template-columns: 28px minmax(0, 1fr);
  align-items: start; gap: var(--space-2); }
.ks-rfliste__icon { width: 28px; height: 28px; display: block; }
.ks-rfliste__icon svg { width: 100%; height: 100%; display: block; }
.ks-rfliste__item--ja .ks-rfliste__icon { color: var(--ks-violet); }
.ks-rfliste__item--nein .ks-rfliste__icon { color: var(--ks-carnation); }
.ks-rfliste__fussnote { margin-top: var(--space-3); font-size: 15px; line-height: 1.55;
  color: var(--text-muted); }

/* Fußnote bleibt Sekundärtext — sticht .ks-mb--white p aus (D-04) */
.ks-mb--white .ks-rfliste__fussnote { color: var(--text-muted); }

/* R-05 — die Fußnote fluchtet mit der Liste statt mit dem zentrierten Textfluss */
.ks-rfliste .ks-rfliste__fussnote { max-width: none; margin-inline: 0; }

/* Auf der grauen Fläche trägt das helle Carnation nur 2,8:1. Das Kreuz nutzt
   dort den dunkleren CD-Ton (3,8:1) — Signalfarbe bleibt, Symbol wird lesbar. */
.ks-rfliste--on-grey .ks-rfliste__item--nein .ks-rfliste__icon { color: var(--ks-carnation-hover); }

.ks-pin-storage .ks-textbox { min-height: 0; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: var(--space-2); }
.ks-pin-storage__icon { width: 28px; height: 28px; display: inline-flex; flex: none; color: #fff; }
.ks-pin-storage__icon svg { width: 100%; height: 100%; }
.ks-pin-storage__icon--nein { color: var(--ks-carnation-hover); }
.ks-pin-storage .ks-textbox__title { font-size: var(--body-size); line-height: var(--body-lh); }
.ks-pin-storage__note { margin-top: var(--space-3); font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.ks-pin-storage--on-violet .ks-textbox { background: var(--surface-card); }
.ks-pin-storage--on-violet .ks-pin-storage__icon { color: var(--ks-violet); }
.ks-pin-storage--on-violet .ks-pin-storage__icon--nein { color: var(--ks-carnation-hover); }
.ks-pin-storage-band .ks-pin-storage__note { color: rgba(255,255,255,0.85); }

.ks-pin-words { list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin: var(--space-3) 0 0; padding: 0; }
.ks-pin-words li { display: grid; grid-template-columns: 26px minmax(0, 1fr);
  align-items: start; gap: 10px; line-height: 1.55; }
.ks-pin-words__number { display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--ks-violet); color: #fff; font-weight: var(--fw-bold);
  font-size: 0.9375em; line-height: 1; }
@media (max-width: 760px) {
  .ks-pin-storage { grid-template-columns: 1fr; }
}

.ks-mb-buttons { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); }
.ks-mb-buttons + .ks-mb-buttons { margin-top: var(--space-3); }

.ks-blog-meta { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-1) 12px; margin-top: var(--space-3);
  font-size: 14px; color: var(--text-muted); }
.ks-blog-meta__item { display: inline-flex; align-items: center; }
.ks-blog-meta__item:has(+ .ks-blog-meta__item)::after { content: "·";
  margin-left: 12px; color: var(--ks-grey); }
.ks-blog-meta--on-violet { color: rgba(255,255,255,0.82); }
.ks-blog-meta--on-violet .ks-blog-meta__item:has(+ .ks-blog-meta__item)::after {
  color: rgba(255,255,255,0.55); }
.ks-blog-meta--on-violet .ks-tag--violet { background: #fff; color: var(--ks-violet); }

.ks-blog-body { padding: var(--space-6) 0 var(--space-10); }
.ks-blog-grid { display: grid; gap: var(--space-8); align-items: start; /* Abstand Text ↔ Leiste 64 (Chris, Runde 9) */
  grid-template-areas: "artikel"; }
/* Artikelinhalt immer mit ausgewogenem Umbruch — auch Überschriften, Zitate, Bildunterschriften. */
.ks-blog-grid > :first-child :is(p, li, h2, h3, h4, blockquote, figcaption, dt, dd) { text-wrap: pretty; }
/* Lesemaß im Artikel etwas weiter, damit weniger Leerraum vor der Leiste bleibt (Runde 9). */
.ks-blog--v2 .ks-blog-grid > :first-child { --content-measure: 84ch; } /* Textspalte ist direkt .ks-prose (Blog) bzw. article (Presse) */
.ks-blog-grid > article { grid-area: artikel; min-width: 0; }
.ks-blog-grid > .ks-blog-rail { grid-area: rail; min-width: 0; }
.ks-blog--v1 .ks-blog-grid { grid-template-columns: 288px minmax(0, 1fr);
  grid-template-areas: "rail artikel"; }
.ks-blog--v2 .ks-blog-grid { grid-template-columns: minmax(0, 1fr) 336px; /* Leiste breiter (Chris, Runde 9) */
  grid-template-areas: "artikel rail"; }
.ks-blog-rail { position: sticky; top: var(--anchor-offset); align-self: start;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-bottom: var(--space-4); }
.ks-blog-rail__label { font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 12px; }
.ks-blog--v1 .ks-breadcrumb { padding-top: var(--space-4); }
.ks-blog--v1 .ks-block-intro { padding-top: var(--space-6); }
.ks-blog-rail--marginalie > * + *, .ks-blog-rail--lese > * + * { border-top: 1px solid var(--border-default);
  padding-top: var(--space-3); }
.ks-blog-rail--marginalie > .ks-blog-emergency + * { border-top: none; }
.ks-blog--v3 .ks-blog-bulletin h1 { font-size: var(--h2-size); line-height: var(--h2-lh); }
.ks-blog--v3 .ks-blog-bulletin .ks-blog-lead { margin-inline: auto; }
.ks-blog--v3 .ks-blog-body { max-width: var(--content-max); margin-inline: auto;
  padding-inline: var(--container-pad); }
.ks-blog--v3 .ks-blog-grid { grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-areas: "artikel rail"; gap: var(--space-8); }
.ks-blog--v3 .ks-prose { margin-inline: auto; }
.ks-blog--v3 .ks-blog-rail { gap: var(--space-4); }
@media (max-width: 1199px) {
  .ks-blog--v1 .ks-blog-grid { grid-template-columns: 264px minmax(0, 1fr); }
  .ks-blog--v2 .ks-blog-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .ks-blog--v3 .ks-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .ks-blog--v3 .ks-blog-rail { display: none; }
  .ks-blog--v3 .ks-blog-share--bottom { display: block; }
}
@media (max-width: 980px) {
  .ks-blog--v1 .ks-blog-grid, .ks-blog--v2 .ks-blog-grid { grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "artikel" "rail"; }
  .ks-blog-rail { position: static; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .ks-blog-body { padding: var(--space-4) 0 var(--space-8); }
}
@media print {
  .ks-blog-rail { display: none; }
}

/* Feed-Karte in der Lese-Leiste (Runde 10): die Kontur-Karte aus dem früheren Blog-Hero, hier in
   der Akzentfarbe auf heller Fläche; ersetzt den Block „Das könnte Sie auch interessieren". */
.ks-blog-rail__feed { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-4) var(--space-3); text-align: center; text-decoration: none;
  border: 2px solid var(--ctx-accent); border-radius: var(--radius-lg); color: var(--ctx-link);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ks-blog-rail__feed svg { width: 44px; height: 44px; }
.ks-blog-rail__feed span { font-size: var(--h5-size); font-weight: var(--fw-semibold); }
.ks-blog-rail__feed:hover { background: rgba(104,50,246,0.08); }
@media (max-width: 980px) {
  .ks-blog-rail__feed { flex-direction: row; justify-content: flex-start; }
  .ks-blog-rail__feed svg { width: 32px; height: 32px; }
}

.ks-blog-share__row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ks-blog-share .ks-iconbtn { background: var(--surface-card); }
.ks-blog-toast { display: block; margin-top: 10px; font-size: 13px;
  font-weight: var(--fw-semibold); color: var(--ks-violet); min-height: 18px;
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ks-blog-toast.is-shown { opacity: 1; transform: none; }
.ks-blog-share--bottom { display: none; margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.ks-blog-share--bottom .ks-blog-rail__label { margin-bottom: 10px; }
@media (max-width: 760px) {
  .ks-blog-share--bottom { margin-top: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-blog-toast { transition: none; transform: none; }
}
@media print {
  .ks-blog-share--bottom { display: none; }
}

.ks-blog-band { background: var(--ks-violet); color: #fff;
  padding: 128px 0 152px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ks-blog-band .ks-breadcrumb { margin-bottom: var(--space-3); }
.ks-blog-band .ks-breadcrumb a { color: rgba(255,255,255,0.85); }
.ks-blog-band .ks-breadcrumb a:hover { color: #fff; }
.ks-blog-band .ks-breadcrumb li:has(+ li)::after { color: rgba(255,255,255,0.55); }
.ks-blog-band .ks-breadcrumb [aria-current="page"] { color: rgba(255,255,255,0.85); }
.ks-blog-band :focus-visible { outline-color: #fff; }
.ks-blog-band__grid { display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: var(--space-6); }
.ks-blog-band__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-placeholder); margin: 0; }
.ks-blog-band__media img { width: 100%; height: 100%; object-fit: cover;
  display: block; }
/* Sheet in voller Breite (Container + 24 px je Seite); der Hero-Inhalt darüber (Brotkrumen, Titel,
   Intro, Beitragsbild) läuft auf dieselben Außenkanten, damit Text und Sheet bündig sind, ohne
   dass die Inhaltsbreite schrumpft (Chris, Runde 8; Raster-Variante in Runde 9 verworfen). */
.ks-blog-sheet { position: relative; z-index: 1;
  max-width: calc(var(--content-max) + 2 * (var(--space-6) - var(--container-pad)));
  margin: -96px auto 0;
  background: var(--surface-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-block: var(--space-8) var(--space-6);
  padding-inline: clamp(var(--container-pad),
    calc((100% - var(--content-max)) / 2 + var(--container-pad)), var(--space-6)); }
.ks-blog-band .ks-container { max-width: calc(var(--content-max) + 2 * (var(--space-6) - var(--container-pad))); padding-inline: 0; }
@media (max-width: 1360px) {
  .ks-blog-band .ks-container { padding-inline: var(--container-pad); }
}
@media (max-width: 980px) {
  .ks-blog-band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ks-blog-band__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .ks-blog-band { padding: 104px 0 96px; }
  .ks-blog-sheet { margin-top: -56px; padding-block: var(--space-4); }
}

/* CD-08 — ohne Beitragsbild trägt der Titel die volle Rasterbreite */
.ks-blog-band__grid:not(:has(.ks-blog-band__media)) { grid-template-columns: minmax(0, 1fr); }

.ks-blog--v2 .ks-plakat-statement__text { font-size: var(--h4-size); line-height: 1.4; }
.ks-plakat-head { max-width: var(--measure-col); margin-inline: auto;
  padding: var(--space-6) var(--container-pad) 0; }
.ks-plakat-topline { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-3); flex-wrap: wrap;
  border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-2); }
.ks-plakat-topline__meta { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-1) 12px; font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ks-plakat-topline__meta a { color: var(--ks-violet); text-decoration: none; border-radius: 4px; }
.ks-plakat-topline__meta .ks-blog-topline__item + .ks-blog-topline__item::before {
  content: "·"; margin-right: 12px; color: var(--ks-grey); }
.ks-plakat-topline .ks-blog-share__row { gap: 6px; }
.ks-plakat-topline .ks-iconbtn { width: 40px; height: 40px; }
.ks-plakat-topline .ks-iconbtn svg { width: 18px; height: 18px; }
.ks-plakat-kicker { margin-top: var(--space-8); font-size: var(--h3-size);
  line-height: 1.15; font-weight: var(--fw-bold); letter-spacing: -0.01em;
  color: var(--ks-violet); }
.ks-plakat-title { margin-top: 8px; font-size: var(--h1-size);
  line-height: 1.02; letter-spacing: -0.03em; font-weight: var(--fw-bold);
  color: var(--text-strong); max-width: 15ch; }
.ks-plakat-lead { margin-top: var(--space-6); font-size: var(--h4-size);
  line-height: 1.45; color: var(--text-strong); max-width: 44ch; }
.ks-plakat-body { max-width: var(--measure-col); margin-inline: auto;
  padding: var(--space-8) var(--container-pad) var(--space-10);
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  gap: var(--space-8); align-items: start; }
.ks-plakat-rail { position: sticky; top: var(--anchor-offset); align-self: start;
  display: flex; flex-direction: column; }
.ks-plakat-rail > * + * { border-top: 1px solid var(--border-default);
  margin-top: var(--space-3); padding-top: var(--space-3); }
.ks-plakat-tel { display: inline-flex; align-items: center; gap: 10px;
  margin-top: 10px; color: var(--ks-carnation); text-decoration: none;
  font-size: 24px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  border-radius: 6px; }
.ks-plakat-tel svg { width: 20px; height: 20px; flex: none; }
.ks-plakat-rail .ks-blog-quicklinks { margin-top: 10px; }
.ks-plakat-rail .ks-blog-rail__label { margin-bottom: 0; }
.ks-plakat-rail__note { margin-top: 10px; font-size: 14px; line-height: 1.5;
  color: var(--text-muted); }
.ks-plakat-statement { border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: 40px 0; margin: var(--space-6) 0; }
.ks-plakat-statement__kicker { display: block; font-size: var(--caption-size);
  font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ks-violet); }
.ks-plakat-statement__text { margin: var(--space-2) 0 0; font-size: var(--h3-size);
  line-height: 1.35; font-weight: var(--fw-semibold); letter-spacing: -0.01em;
  color: var(--text-strong); max-width: 32ch; }
.ks-blog-statements .ks-plakat-statement { margin: 0; }
.ks-blog-statements .ks-plakat-statement:first-child { border-top: none; padding-top: 0; }
.ks-blog-statements .ks-plakat-statement + .ks-plakat-statement { border-top: none; }
.ks-plakat-steps { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); margin-top: var(--space-4); padding: 0; list-style: none; }
.ks-plakat-step__num { display: block; font-size: clamp(36px, 5vw, 48px); line-height: 1;
  font-weight: var(--fw-bold); letter-spacing: -0.03em; color: var(--ks-violet);
  font-variant-numeric: tabular-nums; }
.ks-plakat-step__text { display: block; margin-top: var(--space-2);
  font-size: var(--body-size); line-height: 1.5; color: var(--text-strong); }
.ks-plakat-outro { margin-top: var(--space-6); font-size: 20px; line-height: 1.5;
  color: var(--text-muted); max-width: 40ch; }
.ks-plakat-body .ks-h3 { margin-top: var(--space-2); }
.ks-plakat-related { max-width: var(--measure-col); margin-inline: auto;
  padding: 0 var(--container-pad) var(--space-10); }
.ks-plakat-related .ks-h2 { margin-bottom: var(--space-3); }
.ks-plakat-list { border-top: 2px solid var(--border-strong); }
.ks-plakat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: center; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
  text-decoration: none; color: inherit; }
.ks-plakat-item h3 { margin: 0; font-size: var(--h4-size);
  line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease); }
.ks-plakat-item__meta { margin-top: 6px; font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ks-plakat-item svg { width: 28px; height: 28px; color: var(--ks-violet);
  transition: transform var(--dur) var(--ease); }
.ks-plakat-item:hover h3 { color: var(--ks-violet); }
.ks-plakat-item:hover svg { transform: translateX(4px); }
@media (max-width: 980px) {
  .ks-plakat-body { grid-template-columns: minmax(0, 1fr); }
  .ks-plakat-rail { position: static; order: 2; margin-top: var(--space-4); }
  .ks-plakat-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .ks-plakat-step { display: grid; grid-template-columns: 72px minmax(0, 1fr);
      gap: var(--space-2); align-items: start; }
  .ks-plakat-step__num { font-size: 48px; }
  .ks-plakat-step__text { margin-top: 4px; }
}
@media (max-width: 760px) {
  .ks-plakat-head { padding-top: var(--space-4); }
  .ks-plakat-kicker { margin-top: var(--space-6); }
}

/* Leisten-Teaser (Blog-/Presse-Detailseiten): Größen als Component-Tokens; mobil eine Stufe
   kleiner (Chris, Runde 16) — die einzige Ausnahme von E75 (Kartentitel H5). */
.ks-blog-miniteaser { --mt-kicker-size: var(--caption-size); --mt-title-size: var(--h5-size); --mt-meta-size: var(--caption-size);
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  align-items: start; gap: 12px; padding: var(--space-2) 0; text-decoration: none;
  color: inherit; }
.ks-blog-miniteaser + .ks-blog-miniteaser { border-top: 1px solid var(--border-default); }
.ks-blog-miniteaser__media { display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 8px; background: var(--surface-placeholder); }
.ks-blog-miniteaser__media picture { display: block; width: 100%; height: 100%; }
.ks-blog-miniteaser__media img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-reveal); }
.ks-blog-miniteaser__content { display: block; min-width: 0; }
.ks-blog-miniteaser__kicker { display: block; font-size: var(--mt-kicker-size);
  font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ks-violet); }
.ks-blog-miniteaser__title { display: block; margin-top: 4px; font-size: var(--mt-title-size); /* eine Kartentitel-Größe für alle Karten (Runde 8) */
  line-height: 1.3; font-weight: var(--fw-bold); color: var(--text-strong);
  transition: color var(--dur) var(--ease); }
.ks-blog-miniteaser:hover .ks-blog-miniteaser__title { color: var(--ks-violet); }
.ks-blog-miniteaser__meta { display: block; margin-top: 4px; font-size: var(--mt-meta-size);
  color: var(--text-muted); }
@media (max-width: 760px) {
  .ks-blog-miniteaser { --mt-kicker-size: 11px; --mt-title-size: 17px; --mt-meta-size: 12px; }
}
@media (hover: hover) and (pointer: fine) {
  .ks-blog-miniteaser:hover .ks-blog-miniteaser__media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-blog-miniteaser__media img { transition: none; }
  .ks-blog-miniteaser:hover .ks-blog-miniteaser__media img { transform: none; }
}

.ks-blog-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px; }
.ks-blog-list li { padding-left: 22px; position: relative; }
.ks-blog-list li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ks-violet); }

/* Zwischenseite „Sie verlassen kartensicherheit.de“ (Runde 16, E114; Vorlage: redirect-template/). Seite ohne
   Kopf- und Fußzeile: violette Hinweisfläche mit abgerundeter Unterkante, darüber gezogene Entscheidungskarte,
   Countdown-Ring rechts neben der H1. Die 404-Seite (fehlerseite) teilt Fläche, Karte und Fußbereich. */
.ks-extern__wrap { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: var(--container-pad); }
.ks-extern__wrap--schmal { max-width: 760px; }

.ks-extern__flaeche { background: var(--ks-violet); color: #fff;
  padding: var(--space-12) 0 calc(var(--space-10) + var(--space-8));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ks-extern__flaeche--mitte { text-align: center; }
.ks-extern__art { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3);
  font-size: 15px; font-weight: var(--fw-medium); line-height: 1.4; color: rgba(255,255,255,0.84); }
.ks-extern__art svg { width: 18px; height: 18px; flex: none; }
.ks-extern__flaeche .ks-h1 { color: #fff; max-width: 17ch; font-size: clamp(34px, 4.2vw, 60px); }
.ks-extern__flaeche--mitte .ks-h1 { max-width: none; margin-inline: auto; }
.ks-extern__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-8); align-items: center; }
.ks-extern__lead { margin: var(--space-3) 0 0; max-width: 58ch; font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.88); text-wrap: pretty; }
.ks-extern__flaeche--mitte .ks-extern__lead { margin-inline: auto; max-width: 46ch; }

/* Entscheidungskarte, über die Unterkante der Fläche gezogen */
.ks-extern__karte { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-6); margin-top: calc(-1 * var(--space-8)); }
.ks-extern__karte--mitte { text-align: center; }
.ks-extern__ziel { display: grid; gap: 6px; padding: var(--space-3); background: var(--ks-grey-surface); border-radius: var(--radius-md); }
.ks-extern__host { display: flex; align-items: center; gap: 10px; font-size: var(--h4-size); line-height: var(--h4-lh);
  letter-spacing: var(--h4-tracking); font-weight: var(--fw-semibold); color: var(--ks-black); overflow-wrap: anywhere; }
.ks-extern__host svg { width: 22px; height: 22px; flex: none; color: var(--ks-violet); }
.ks-extern__url { font-size: 14px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.ks-extern__hinweis { margin: 0; }

/* Countdown groß neben der Headline */
.ks-extern__count { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ks-extern__ring { position: relative; width: 184px; height: 184px; flex: none; }
.ks-extern__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ks-extern__ring circle { fill: none; stroke-width: 2.5; }
.ks-extern__ring-track { stroke: rgba(255,255,255,0.28); }
.ks-extern__ring-bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 138.23; stroke-dashoffset: 0;
  transition: opacity var(--dur) var(--ease); }
.ks-extern__ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; line-height: 1;
  font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff;
  transition: opacity var(--dur) var(--ease); }
.ks-extern__count-text { margin: 0; max-width: 16ch; text-align: center; font-size: 15px; line-height: 1.4;
  font-weight: var(--fw-medium); color: rgba(255,255,255,0.88); }
.ks-extern[data-state="paused"] .ks-extern__ring-bar { opacity: 0.45; }
.ks-extern[data-state="paused"] .ks-extern__ring-num, .ks-extern[data-state="leaving"] .ks-extern__ring-num { opacity: 0.7; }

/* Aktionen und Fußbereich */
.ks-extern__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ks-extern__aktionen--mitte { justify-content: center; }
.ks-extern__noscript { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--ks-grey-surface); }
.ks-extern__unten { padding: var(--space-6) 0 var(--space-10); }
.ks-extern__unten p { margin: 0; max-width: 60ch; }
.ks-extern__unten--mitte { text-align: center; }
.ks-extern__unten--mitte p, .ks-extern__unten--mitte .ks-extern__rechtliches { margin-inline: auto; justify-content: center; }
.ks-extern__rechtliches { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--ks-grey-line); max-width: 60ch; }
.ks-extern__rechtlink { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--text-muted);
  text-decoration: none; border-radius: 4px; transition: color var(--dur) var(--ease); }
.ks-extern__rechtlink:hover { color: var(--ks-violet); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .ks-extern__flaeche { padding: var(--space-8) 0 calc(var(--space-6) + var(--space-8)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .ks-extern__flaeche .ks-h1 { font-size: 34px; }
  .ks-extern__lead { font-size: 16px; }
  .ks-extern__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .ks-extern__count { flex-direction: row; justify-content: flex-start; gap: var(--space-3); }
  .ks-extern__ring { width: 120px; height: 120px; }
  .ks-extern__ring-num { font-size: 44px; }
  .ks-extern__count-text { text-align: left; max-width: 14ch; }
  .ks-extern__karte { padding: var(--space-3); border-radius: var(--radius-md); }
  .ks-extern__aktionen .ks-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-extern__ring-bar { transition: none; }
}

/* 404 „Seite nicht gefunden“ (Runde 16, E116; Vorlage: redirect-template/404.html). Gleiche Familie wie die
   Zwischenseite (extern): zentrierte violette Fläche mit der 404-Ziffernillustration, Karte mit Suchfeld und
   Rückwegen. Flackern nur über Opacity: kurzes Zünden beim Laden, danach zuckt die letzte 4 alle 12 s. */
.ks-fehler__zahl { display: block; width: min(340px, 72vw); height: auto; margin: 0 auto var(--space-4); color: #fff; }
.ks-fehler__zahl--neon { animation: ks-neon-on 1.2s steps(1, end) both; }
.ks-fehler__tube { fill: currentColor; }
.ks-fehler__tube--flicker { animation: ks-neon-flicker 12s linear 3s infinite; }
@keyframes ks-neon-on { 0% { opacity: 0.55; } 10% { opacity: 0.9; } 16% { opacity: 0.65; } 24% { opacity: 1; } 40% { opacity: 0.8; } 46% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ks-neon-flicker { 0%, 60%, 100% { opacity: 1; } 61% { opacity: 0.72; } 62% { opacity: 1; } 63.5% { opacity: 0.82; } 64.5% { opacity: 1; } }
/* Suchformular in der Karte: Suchfeld (Component suchfeld) füllt die Breite, Knopf daneben */
.ks-fehler__suche { display: flex; align-items: center; gap: var(--space-1); }
.ks-fehler__suche .ks-searchfield { max-width: none; flex: 1 1 auto; min-width: 0; padding: 4px 6px 4px 14px; }
.ks-fehler__suche .ks-searchfield__input { font-size: 16px; padding: 10px 4px; }
.ks-fehler__suche .ks-btn { flex: none; }
.ks-fehler__zurueck .ks-btn__icon { transition: transform var(--dur) var(--ease); }
.ks-fehler__zurueck:hover .ks-btn__icon { transform: translateX(-3px); }
@media (max-width: 760px) {
  .ks-fehler__zahl { width: min(240px, 72vw); }
  .ks-fehler__suche { flex-wrap: wrap; }
  .ks-fehler__suche .ks-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-fehler__zahl--neon, .ks-fehler__tube--flicker { animation: none; opacity: 1; }
  .ks-fehler__zurueck .ks-btn__icon { transition: none; }
}

/* ===========================================================================
   Kopf- und Fußzeile im Premium-Modus (Premium-Instanz, Vorlage E151, 11.09.2026)
   Regeln 1:1 aus relaunch/4-componentsystem/dist-premium (core.css); die Kopf-/Fußzeilen-Widgets dieses Packs
   geben die Klassen im Premium-Kontext aus (ks-header--premium, ks-footer--premium, ausstehende Menüpunkte).
   =========================================================================== */
.ks-header--premium .ks-premium-pille { display: inline-flex; }
.ks-header--premium .ks-premium-panel__leer { display: none; }
/* E184 (12.09.2026): Panel gleich breit wie auf der öffentlichen Website — keine Premium-Sonderbreite. */
/* Chris, 13.09.2026 (E189): weißer Rahmen um das Premium-Dropdown auf der Premium-Instanz — unabhängig von Kopfzeilenvariante und Scrollzustand. */
[data-ks-premium-static] .ks-premium-panel, .ks-header--premium .ks-premium-panel { box-shadow: 0 0 0 2px #fff, var(--shadow-violet); }
.ks-premium-menue__status { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3;
  font-weight: var(--fw-medium); letter-spacing: 0.02em; opacity: 0.78; }
.ks-premium-panel__link.is-ausstehend { opacity: 0.68; cursor: default; }
.ks-premium-panel__link.is-ausstehend:hover { opacity: 0.68; transform: none; }
.ks-premium-mobil--voran { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: var(--space-2); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default); }
.ks-premium-mobil__link.is-ausstehend { color: var(--text-muted); cursor: default; }
.ks-premium-mobil__link.is-ausstehend:hover { color: var(--text-muted); }
/* E183 (11.09.2026): Fußzeile im Premium-Modus folgt dem öffentlichen Raster — keine eigene Spaltenregel mehr. */
.ks-footer--premium .ks-footer__link--ausstehend { display: block; color: rgba(255,255,255,0.48); }
.ks-footer--premium .ks-footer__status { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3;
  font-weight: var(--fw-medium); letter-spacing: 0.02em; color: rgba(255,255,255,0.68); }
@media (max-width: 1120px) {
  /* E184 (12.09.2026): Pille bleibt auch mobil sichtbar — Premium-Einstieg nur über Pille und Panel, nicht im Hauptmenü. */
  .ks-header--premium .ks-header__logo {
    --logo-h: min(var(--logo-h-ziel), calc((100cqw - 112px) / var(--logo-bedarf)));
  }
}

/* ===========================================================================
   E184 (Chris, 12.09.2026): Premium-Menü nicht zusätzlich im mobilen Hauptmenü — Einstieg ausschließlich
   über Pille und Panel, auf der öffentlichen Website wie auf der Premium-Instanz. Schnellfassung im
   Pack-CSS; Quelle (cb-header/premium-modus im Component-System) beim nächsten regulären Build nachziehen.
   =========================================================================== */
.ks-premium-mobil { display: none !important; }