/*!
 * Kartensicherheit — widget-bridge.css
 *
 * Der Panzer des Packs gegen die drei ungelayerten Kaskaden-Ebenen im Wirt
 * (Elementor frontend.css + Kit-CSS, Host-Theme-Reset, Elementors `.elementor img`).
 * Lädt als LETZTE Pack-CSS (zeus.json assets.css[], nach Theme-/Component-CSS) und
 * wird vom Theme-Präfix-Build bewusst ausgenommen (bin/theme-prefix.conf).
 *
 * Was hierher gehört (Gates G12 / lint-components.php erzwingen es):
 *   - button.<klasse> / button[data-…] für jede Komponentenklasse, die auf einem
 *     nackten <button> gerendert wird (Host-Theme-Resets schlagen sonst 0,1,0-Klassen)
 *   - .zeus-section <selektor> { height: 100% } für Cover-Bilder (Elementors
 *     `.elementor img { height:auto }` klobbert jede Regel ≤ 0,1,1)
 *   - Display-Utilities, die ein Komponenten-Panzer sonst überstimmt (EWH-Lektion)
 * Was NICHT hierher gehört: Look, Layout, Tokens — das ist Sache der Theme-/Component-CSS.
 */

/* Elementor-Container-Gap: Container sind flex-column mit 20 px Gap. Jedes Zeus-Widget
 * ist eine vollflächige <section> — der Gap wird als heller Streifen zwischen zwei
 * Flächen sichtbar. Das Kit schreibt seine Defaults als `.elementor-element{…}` (0,1,0)
 * in post-<kit>.css, deshalb hier (0,2,0); ein je Container gesetzter Gap (post-<ID>.css,
 * 0,3,0) behält Vorrang. Wirksame Variable ist versionsabhängig — alle drei setzen. */
.elementor-element.e-con {
    --widgets-spacing: 0px 0px;
    --widgets-spacing-row: 0px;
    --widgets-spacing-column: 0px;
}

/* Komponenten-Buttons müssen spätere Theme-Resets sicher überstimmen. */
button.ks-premium-pille,
button.ks-burger {
    appearance: none;
    font: inherit;
}

button.ks-premium-pille {
    border: 0;
}

button.ks-burger {
    border: 0;
    background: transparent;
}

.ks-inline-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ks-premium-panel__logout-wrap,
.ks-premium-mobil__logout-wrap,
.ks-premium-panel__logout-wrap form,
.ks-premium-mobil__logout-wrap form {
    margin: 0;
}

.ks-premium-panel__logout-wrap button,
.ks-premium-mobil__logout-wrap button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ks-premium-panel__logout-wrap button:focus-visible,
.ks-premium-mobil__logout-wrap button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.ks-header [hidden],
.ks-footer [hidden] {
    display: none !important;
}

.zeus-section .ks-image,
.zeus-section .ks-video__poster {
    height: 100%;
}








.ks-article-main { min-width: 0; }

/* BEGIN GENERATED BOKU SHIELD */
.ks-page-content {width:100%;}
.ks-premium-mobil--voran {order:-1;}
/* ===========================================================================
   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.
   =========================================================================== */
/* ===========================================================================
   Kartensicherheit — Typography tokens
   Source: Styleguide "Basis / Schrift / Regeln".
   Reduced working set per styleguide: H1, H3, H5, Body (plus full scale).
   =========================================================================== */
/* ===========================================================================
   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").
   =========================================================================== */

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

/* --- Type scale utilities ------------------------------------------------- */

/* --- Links (styleguide: violet, underline on hover, ring on focus) -------- */

/* --- Global keyboard focus state ----------------------------------------- */

/* --- Layout helpers ------------------------------------------------------- */

/* ===========================================================================
   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 --------------------------------------------------------------- */
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;
}

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

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

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

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

button.ks-btn:disabled, button.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 ---------------------------------------------------------- */
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);
}
button.ks-iconbtn svg { width: 22px; height: 22px; }
button.ks-iconbtn:hover { background: var(--ks-grey-surface); }
button.ks-iconbtn--outline { border-color: var(--border-default); }
button.ks-iconbtn--outline:hover { border-color: var(--ks-violet); color: var(--ks-violet); background: transparent; }

/* --- LinkText (the "Mehr erfahren …" link) -------------------------------- */

/* --- Tag & Badge ---------------------------------------------------------- */

/* --- Form fields ---------------------------------------------------------- */

/* --- Checkbox / Radio ----------------------------------------------------- */

/* --- Toggle / Switch ------------------------------------------------------ */

/* --- Card ----------------------------------------------------------------- */

/* --- Article / Teaser card ------------------------------------------------ */

/* --- Image placeholder ---------------------------------------------------- */

/* --- Section -------------------------------------------------------------- */

/* --- Accordion ------------------------------------------------------------ */
button.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);
}
button.ks-accordion__trigger:hover { color: var(--ks-violet); }

/* --- Filter tabs (capsules) ----------------------------------------------- */
button.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);
}
button.ks-filter:hover { border-color: var(--ks-violet); color: var(--ks-violet); }
button.ks-filter--active { background: var(--ks-violet); border-color: var(--ks-violet); color: #fff; }
button.ks-filter--active:hover { color: #fff; background: var(--ks-violet-hover); }
/* On violet surfaces */
.ks-filters--on-violet button.ks-filter { border-color: rgba(255,255,255,0.5); color: #fff; }
.ks-filters--on-violet button.ks-filter--active { background: #fff; color: var(--ks-violet); border-color: #fff; }

/* --- Alert ---------------------------------------------------------------- */

/* --- Emergency bar ("Karte sperren") -------------------------------------- */

/* --- Media gallery -------------------------------------------------------- */

/* --- Textbox (small text card; "Textbox klein 2x") ------------------------ */
/* Image-backed variant: photo with a monochrome scrim so text stays legible */

/* --- Video module --------------------------------------------------------- */
button.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; }
button.ks-video__frame:hover .ks-video__scrim { background: rgba(0,0,0,0.30); }
button.ks-video__frame:hover .ks-video__play { transform: translate(-50%, -50%) scale(1.06); background: var(--ks-violet-hover); } /* 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. */

/* ---------------------------------------------------------------------------
   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.
   --------------------------------------------------------------------------- */
/* Links auf dunkler Fläche: Weiß mit Unterstreichung — Farbe allein trüge nicht. */
/* Helle Boxen auf dunkler Fläche: eigener Kontext, Akzent der Seite. */
/* Akzent-Elemente außerhalb von Textlinks lesen ebenfalls den Seitenakzent. */
/* Intro-Text unter einer H1 — eine Klasse für alle Heroes und Seitenköpfe; die Farbe
   kommt aus dem Kontext der Fläche. */

/* ---------------------------------------------------------------------------
   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.
   --------------------------------------------------------------------------- */
/* Überschriften zuletzt: Vor einer H2 gilt ihr Abstand auch dann, wenn davor ein Block steht. */
/* Intro unter einer H1 (Hero, Seitenkopf) bekommt mehr Luft als der Fließtext-Rhythmus (Chris, Runde 8). */
/* 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. */
/* Ein Video im Fließtext steht rechtsbündig auf Lesemaß, nicht auf voller Breite. */
/* Seiten ohne Kopf- und Fußzeile (Zwischenseite, 404): Inhalt füllt den Viewport (Runde 16). */
/* 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). */
@media (max-width: 760px) { /* mobiler Scroll-Header kompakter: 55 px Leiste + Haarlinie, Logo 36 px, Wortmarke +10 % (Chris, Runde 15) */
} /* federnder Auslauf für Bedienelemente (Feed-Adressfeld, Runde 16) */
@media (hover: hover) and (pointer: fine) {
  /* Hover ohne Schein (Chris 14.09.2026, E27: Hover = Farbe, max. 2 px Bewegung). */
  button.ks-iconbtn--outline:hover {
    background: var(--ks-violet-hover);
    border-color: var(--ks-violet-hover);
    color: #fff;
  }
}

/* Umbruchpflege für Fließtext und Kartentitel */

/* T-07 — lange Wörter brechen um, statt an der Viewportkante zu kappen */ /* keine automatische Silbentrennung in Überschriften (Runde 8) */ /* 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). */

/* Ü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) */

/* R-02 — Formularfelder tragen denselben Fokusring wie Links und Buttons */

/* CD-04 — Checkbox-Rundung auf die Token-Stufe */

/* E21 / P-11 — Kartentext 16/1.6 (Override der gesperrten ks-components.css) */

/* M-08 — Kartenteaser ohne Satzabbruch auf allen Breiten: der Kundentext bleibt vollständig,
   die Karten bleiben über .ks-article__body { flex: 1 } gleich hoch */

/* E20 / C-03 — alle Kacheltitel im selben Gewicht */

/* C-05 — das Icon dehnt die Zeilenbox nicht mehr: Buttons mit und ohne Icon sind gleich hoch */

/* CD-01 / R-01 — Platzhalter-Icon aus der Token-Palette */

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

/* H-02 / E27 — verlinkte Rubrik-Pille bekommt einen Hover-Zustand */

/* T-02 — Statement-Absätze außerhalb von .ks-prose ebenfalls ohne Waisen */

/* T-01 — auch die übrigen Kartentitel werden ausgeglichen (C-03) */

/* CD-05 — Videodauer auf die kleinste Stufe der Skala */

/* CD-06 — Scrim monochrom statt Verlauf (Override der gesperrten ks-components.css) */

/* ---------------------------------------------------------------------------
   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).
   --------------------------------------------------------------------------- */

/* Karten: ein Innenabstand (space-3) für alle Kartenarten — Kartenreihe, Artikel, Textbox, Feed (Runde 4). */

/* Intro-Texte mobil höchstens 18 px (Runde 5). */

/* 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). */

/* Überschrift in Akkordeon-Titelgröße — „Pressemitteilungen“ neben „Presseverteiler“ (Runde 6). */

/* Runde 9 — Excerpts: eine Länge für alle Kartentexte (Zeilen-Clamp über ein Token). */
/* Runde 9 — Überschriften in Blog- und Presse-Artikeln fett. */

/* ---------------------------------------------------------------------------
   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.
   --------------------------------------------------------------------------- */
/* Karten: das Bild zoomt beim Zeigen leicht heran — Rückmeldung zur ganzflächigen Klickfläche. */

/* 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). */
/* Feed-Link in der Artikel-Leiste als stiller Textlink statt Kontur-Karte. */ /* Runde 16: 11,5 px → 12 px, Symbol 25,3 → 24 px (Skala) */

/* 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). */

/* 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. */
/* 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. */
/* 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). */ /* 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. */
/* 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). */
.elementor .ks-header__logo img { height: var(--logo-h); width: auto; flex: none; display: block;
  transition: opacity var(--dur) var(--ease); }
.elementor .ks-header__logo img.ks-header__logo-wort { height: calc(var(--logo-h) / 1.5 * var(--logo-wort-faktor) * 0.752); }

/* 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. */

/* 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. */ /* relative: Anker für das Premium-Panel (E122) */
/* 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). */
/* Kompakte Maße nur für das Scroll-Header-Duplikat (Runde 16) */
/* 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. */
}
@media (min-width: 1121px) and (max-width: 1279px) {
  /* E169 — Die Kontopille nutzt bei knappem Platz ihr Symbol; ihr zugänglicher Name bleibt erhalten. */
}
/* Menü-/Schließen-Symbol überblenden und drehen (impeccable animate, Runde 9). */

/* 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]). */ /* Schließen schnell */ /* Öffnen mit Auslauf (Runde 9) */ /* last-of-type: nach den Links folgt der (meist verborgene) Premium-Block (E122) */
/* Menüpunkte als Liste: nacheinander, mit Auslauf; Takt und Dauer über Tokens (Chris, Runde 16). */

@media (max-width: 1120px) { /* Tinte ≈ 19 px wie die Striche des Menü-Schalters (Chris, Runde 20; vorher 22 px → 16/17 px) */ /* Menü-Schalter mobil: Symbol 38 px, Strich 1,5 (Runde 9) */ /* neben Suche, Login, Menü */ /* Tinte ≈ 17 px wie der kompakte Schalter (32 px → 16 px) */
}
@media (max-width: 760px) {
  /* Scroll-Header mobil kompakter (Chris, Runde 15): Leiste 56 px (--header-h-stuck in site-core.css) */ /* Tinte ≈ 16 px wie der kompakte Schalter (32 px) */
}

/* 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. */

/* Premium-Zustand (E122, premium-panel.css): sobald ein Hinweis-Cookie vorliegt, ersetzt die Pille das Anmelde-Symbol. */
/* Mit dem Premium-Block wird das mobile Menü länger als der Viewport: innerhalb scrollen, „Abmelden“ bleibt erreichbar. */

/* 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) ---------- */
/* Auf Farbflächen (violetter Hero) invertiert wie die Menü-Pille; im Scrollzustand wieder violett. */

/* ---------- Panel (Klick-Disclosure unter der Pille, rechts bündig) ---------- */ /* weißer Rahmen auf Farbflächen */

/* ---------- Mobiles Menü: Premium-Block im Burger, fett hervorgehoben (Sandra 06.07.) ---------- */

/* ---------- Zustandsabhängige Textbausteine (Teaser-Karten, Hinweise) ---------- */
@media (max-width: 480px) { /* schmale Geräte: nur das Symbol, der Name steht im Panel */
}

/* 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). */

/* 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). */

/* Hero ohne Mindesthöhe (Suche, Runde 7). */
/* Im Hero-Zweispalter (Suche) steht die Leiste rechts neben dem Titel. */
/* Platzhalter deutlich lesbar, eingegebener Text schwarz (Runde 5). */
/* Absende-Knopf: Desktop mit Beschriftung, mobil als Lupe in der rechten Ecke des Feldes. */
/* 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. */
@media (max-width: 760px) {
  button.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; }
}

/* CD-06 — kein browsereigenes Löschkreuz im Suchfeld */
/* Beschnittenes Original in dreifacher Auflösung, proportional in der Markenfläche. */
.elementor .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; }
/* Drei inhaltsbreite Spalten als Gruppe rechts, letzte bündig am rechten Rand, dazwischen ein
   großzügiger, mitwachsender Abstand (Chris, Runde 9). */
/* Die gemeinsame animierte Unterstreichung aus site-core.css übernimmt den Hover. */
@media (max-width: 760px) {
  /* Mobil (Chris, Runde 20): Themen in voller Breite als einspaltige Liste, darunter Schutz & Hilfe neben Service.
     Ersetzt das reine Zweierraster aus Runde 5. */
}
/* 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. */
.elementor .ks-footer-partner__logos img { height: 32px; width: auto; max-width: 96px; object-fit: contain;
  display: block; filter: brightness(0); }
@media (max-width: 760px) {
  .elementor .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. */
/* 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/. */
/* Variante 2 · Register: Pill und Meta als Spalte links vom Treffer. */
/* Variante 3 · Titelzeile: Pill rechts neben dem Titel. */
/* Variante 4 · Inline: Pill hängt am Titel. */
button.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%; }
button.ks-filteritem:hover { color: var(--ks-violet); }
button.ks-filteritem--active { background: #fff; color: var(--ks-violet); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); } /* Trefferspalte füllt die Breite — „Mehr lesen" endet am Spaltenrand (Runde 5) */
/* Treffer sind reine Textzeilen (Feedback-Pin 960949) und werden durch eine
   feine Linie getrennt statt durch Abstand allein (Feedback-Pin 960954). */
button.ks-filteritem { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
button.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). */

/* M-08 — der Trefferzähler rutscht mobil unter die Überschrift */

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

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

/* Suchfilter ausklappbar (Chris, 11.09.2026): Kopfzeilen „Inhaltstyp“ und „Thema“ als Schalter. Panzer gegen die
   Button-Vorgaben von Theme und Kit; der Pfeil zeigt zugeklappt nach unten, aufgeklappt nach oben. */
.ks-search-facets button.ks-searchaside__toggle { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-1); width: 100%; padding: 6px 0; background: none; border: none; border-radius: 0; box-shadow: none;
  cursor: pointer; font: var(--fw-semibold) 14px/1.3 var(--font-sans); color: var(--text-strong); text-align: left; }
.ks-search-facets button.ks-searchaside__toggle:hover,
.ks-search-facets button.ks-searchaside__toggle:focus { background: none; color: var(--ks-violet); }
.ks-search-facets button.ks-searchaside__toggle:focus-visible { outline: 2px solid var(--ks-violet); outline-offset: 2px; }
.ks-search-facets button.ks-searchaside__toggle svg { width: 18px; height: 18px; flex: none; color: var(--ks-violet);
  transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.ks-search-facets button.ks-searchaside__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .ks-search-facets button.ks-searchaside__toggle svg { transition: none; } }
@media (max-width: 760px) {
  /* 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ß. */
  button.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; }
  button.ks-search-mobilebar__toggle svg { width: 20px; height: 20px; color: #fff; }
  button.ks-search-mobilebar__toggle:focus-visible { outline-color: #fff; }
  button.ks-search-mobilebar__toggle[aria-expanded="true"] .ks-search-mobilebar__chevron { transform: rotate(-90deg); }
}
@media (max-width: 420px) {
  .ks-glossar-download button.ks-btn { white-space: normal; text-align: center; }
}
/* Gruppen untereinander, Buchstaben als Anker (Runde 6). */
/* Buchstaben und „0–9“ so groß wie die Hero-Überschrift (Chris, Runde 17). */
/* Der angesprungene Suchtreffer wird größer und fett hervorgehoben (Chris, Runde 24). */
.is-glossar-treffer[data-open="true"] button.ks-accordion__trigger { font-size: clamp(26px, 3vw, 32px); font-weight: var(--fw-bold); } /* auch inaktive Kacheln (X, Y) mittig */

/* Buchstabenleiste im violetten Hero: Kontur-Knöpfe
   in Weiß statt weißer Flächen, aktiver Buchstabe deckend (Feedback-Pin 960950). */

/* E172 — Suche unter dem Intro; größere Buchstaben und PDF-Download darunter.
   Beim Scrollen übernimmt weiterhin das kompakte Buchstabenband. */
.ks-glossar-download button.ks-btn { width: 100%; min-height: 52px; }
/* E170 — Gestaltung der mobilen Suchseite: weiße Kapsel mit violetter Lupe. */
button.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; }
button.ks-glossar-suche__leeren:hover { background: rgba(0,0,0,0.08); }
button.ks-glossar-suche__leeren:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -5px; }
button.ks-glossar-suche__leeren svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; }
button.ks-glossar-suche__absenden { flex: none; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
button.ks-glossar-suche__absenden svg { width: 20px; height: 20px; }
/* E173 — Desktop kompakter; Suchfeld und Download mit gleicher Breite. */
@media (min-width: 761px) {
  .ks-glossar-download button.ks-btn { min-height: 48px; padding: 12px 24px; font-size: 15px; }
}

/* 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). */
.zeus-section .ks-block-intro__media img, .elementor .ks-block-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Seitenkopf ohne Bild und ohne Mindesthöhe (Kontakt, Runde 16): Rhythmus wie jeder Hero, Höhe aus dem Inhalt. */
@media (max-width: 980px) { /* minmax(0): scrollende Pillenreihe darf die Spalte nicht aufziehen (Runde 9) */
}

/* Startseite: Textspalte breiter (1.6 : 1), damit die 64-px-H1 in Satzpaaren umbricht (Runde 9). */

/* 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. */
/* Bestätigungs-Blase unter dem Feld, außerhalb des Flusses (kein Sprung im Seitenkopf) */
@media (max-width: 980px) {
  /* Tablet: Text und Zeichen nebeneinander, das Adressfeld in voller Breite darunter (lesbare Adresse) */
}

/* 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. */ /* Punkt des RSS-Zeichens (Runde 18) */
/* Aktion rechts: erscheint wie ein Senden-Knopf, sobald das Feld „bereit“ ist */
button.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); }
button.ks-feedfield__go svg { width: 22px; height: 22px; }
button.ks-feedfield__go--icon { width: 56px; padding: 0; justify-content: center; }
.ks-feedfield.is-ready button.ks-feedfield__go,
.ks-feedfield:hover button.ks-feedfield__go,
.ks-feedfield:focus-within button.ks-feedfield__go { opacity: 1; transform: scale(1); pointer-events: auto; }
button.ks-feedfield__go:hover { background: var(--ks-violet-hover); }
button.ks-feedfield__go:active { transform: scale(0.96); transition-duration: 100ms; }
button.ks-feedfield__go:focus-visible { outline: 2px solid var(--ks-violet); outline-offset: 3px; }
button.ks-feedfield__go .ks-feedfield__done { display: none; }
.ks-feedfield.is-copied button.ks-feedfield__go { background: var(--ks-black); }
.ks-feedfield.is-copied button.ks-feedfield__go .ks-feedfield__kopieren { display: none; }
.ks-feedfield.is-copied button.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) */
@media (max-width: 760px) {
  button.ks-feedfield__go, button.ks-feedfield__go--icon { height: 48px; }
  button.ks-feedfield__go--icon { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  button.ks-feedfield__go { transition: opacity 200ms var(--ease); transform: none; }
}
.ks-block-akkordeon button.ks-acc__trigger { padding-inline: var(--acc-inset); }
button.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"] button.ks-acc__trigger { padding-bottom: var(--space-4); }
/* Titel = Überschriftfarbe, Inhalt = Fließtextfarbe des jeweiligen Kontexts. */
button.ks-acc__trigger { color: var(--text-strong); }
@media (max-width: 760px) {
  button.ks-acc__trigger { padding: 40px var(--space-3); }
  .ks-acc[data-open="true"] button.ks-acc__trigger { padding-bottom: var(--space-3); }
}
.no-js button.ks-acc__trigger { cursor: default; }
/* 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). */ /* Naht zu einer grauen Folgefläche (Runde 9) */ /* letztes Element vor dem Footer (RSS-Seite, Runde 16) */

/* SVG-Größe unabhängig von der Box-Höhe */

/* DS-native Akkordeon-Familie (Glossar, CB 16) — Override der gesperrten ks-components.css */
button.ks-accordion__trigger { align-items: flex-start; }
/* Icon-Kasten bleibt quadratisch — die 45°-Rotation darf die Spalte nicht sprengen */

/* Titel ausgleichen, Fließtext ohne Waisen */
button.ks-acc__trigger > span:first-child, button.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 */

/* W-04 — geschlossene Panels sind kein Tabulator-Ziel (Muster wie .ks-mobilenav) */

/* 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. */
button.ks-acc__trigger > span:first-child, button.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 button.ks-acc__trigger > span:first-child,
  .ks-accordion__item:hover button.ks-accordion__trigger > span:first-child { transform: scale(var(--acc-zoom)); }
}
.ks-acc[data-open="true"] button.ks-acc__trigger > span:first-child,
.ks-accordion__item[data-open="true"] button.ks-accordion__trigger > span:first-child { transform: scale(var(--acc-zoom)); }
@media (prefers-reduced-motion: reduce) {
  button.ks-acc__trigger > span:first-child, button.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. */
button.ks-acc__trigger { transition: padding-bottom var(--acc-close-dur) var(--ease); }
.ks-acc[data-open="true"] button.ks-acc__trigger { transition: padding-bottom var(--acc-open-dur) var(--ease-reveal); }
@media (prefers-reduced-motion: reduce) {
  button.ks-acc__trigger { transition: none; }
}
.ks-cardgroup__nav button.ks-iconbtn { width: 44px; height: 44px; }
.ks-cardgroup__nav button.ks-iconbtn[disabled] { opacity: 0.35; cursor: default; }
.ks-cardgroup__nav button.ks-iconbtn[disabled]:hover { border-color: var(--border-default);
  color: inherit; background: transparent; }
.ks-cardgroup__nav button.ks-iconbtn--prev svg { transform: scaleX(-1); }
.ks-cardgroup--on-violet button.ks-iconbtn { color: #fff; border-color: rgba(255,255,255,0.55); }
.ks-cardgroup--on-violet button.ks-iconbtn:hover:not([disabled]) { background: var(--ks-violet-hover);
  border-color: var(--ks-violet-hover); color: #fff; }
.ks-cardgroup--on-violet button.ks-iconbtn[disabled]:hover { background: transparent;
  border-color: rgba(255,255,255,0.55); color: #fff; }
/* Kartenreihen liegen auf grauer Section, die Karten sind weiß — wie die Blog-Übersicht (Runde 7). */
.zeus-section .ks-cardlet__media img, .elementor .ks-cardlet__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 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). */
@media (max-width: 760px) {
  /* Mobil trägt die aktive Karte fast die volle Breite, die nächste schaut nur 24 px herein (Runde 9). */
  /* Snap verbindlich; ein Leerraum nach der letzten Karte, damit auch sie am linken Rand einrastet. */
  /* Startseiten-Pilot: Nur überlange Texte erhalten einen eigenen, weich auslaufenden Lesebereich. */
}
@media (hover: hover) and (pointer: fine) {
  /* Hover: Anheben, kein Schatten (Chris, Runde 9). */
}
/* Ring nur bei Tastaturfokus, nicht nach Klick (Runde 9). */
/* Kicker über dem Kartentitel (Medienart wie „Song“, „Video“) — im Ton der Artikel-Kicker. */

/* T-07 — lange Wörter im Kartentitel brechen um */

/* Hover-Varianten zur Abstimmung (Vorschau /hover-varianten/). Die ersten drei kommen ohne
   Außenschatten aus, der im scrollenden Container ohnehin beschnitten würde. */

/* 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. */

/* 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. */ /* Chris, Runde 18: 21 % statt 28 %, Fenster 10 % größer */
.zeus-section .ks-cardlet__fenster img, .elementor .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) */
}
@media (prefers-reduced-motion: reduce) {
  /* nur Überblenden: Fenster bleibt an seinem Platz, Logo erscheint darüber */
}

/* 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). */

/* 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). */
/* E165 — Titelabstand der Pressekarten inklusive des bestehenden Flex-Abstands. */
@media (hover: hover) and (pointer: fine) { /* kein Schatten beim Zeigen (Chris, Runde 9) */
} /* nur Tastaturfokus (Runde 9) */

/* D-04 — Kartenteaser-Fließtext schwarz (Override der gesperrten ks-components.css) */

/* LK-01 — Zweitlinks im Kartenfuß liegen über der Ganzkarten-Fläche */

/* E21 / P-01 — „Rubrik · Datum“ ist eine Meta-Zeile, keine Eyebrow-Optik
   (Meta bleibt grau, E32; Override der gesperrten ks-components.css) */

/* 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). */

/* 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. */ /* Wurzel der Section — hält die Klasse an dieser Component */
.zeus-section .ks-article--quer .ks-article__media img, .elementor .ks-article--quer .ks-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.ks-filter:not(button.ks-filter--active):hover { background: rgba(104,50,246,0.08); }
.ks-filters--on-violet button.ks-filter:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.ks-filters--on-violet button.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). */
@media (max-width: 760px) {
  .ks-filters--scroll > button.ks-filter { flex: none; scroll-snap-align: start; }
}

/* Kopfzeile mit festem Rubriken-Filter (Runde 22, E148): Überschrift oben, Filterleiste darunter links. */ /* Wurzel der Section — hält die Klasse an dieser Component */

/* 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. */
@media (max-width: 760px) {
  .ks-filters-rahmen button.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 button.ks-filter, .ks-filters.has-pill button.ks-filter:hover, .ks-filters.has-pill button.ks-filter--active, .ks-filters.has-pill button.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.has-pill button.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. */ /* Schatten wandert von der Kopfzeile aufs Band (Runde 9) */
/* Die Leiste setzt nach dem Andocken nach — dieselben Bedienelemente, jetzt hier (Kontinuität). */
/* Sprungziele unter dem Band: Trefferraster (Paginierung) und Glossar-Gruppen. */
@media (prefers-reduced-motion: reduce) {
  .ks-stickybar .ks-filters.has-pill button.ks-filter { transition: 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 button.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) */

/* 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 button.ks-filter,
.ks-stickybar .ks-filters.has-pill button.ks-filter:hover,
.ks-stickybar .ks-filters.has-pill button.ks-filter--active,
.ks-stickybar .ks-filters.has-pill button.ks-filter--active:hover,
.ks-stickybar .ks-filters.has-pill button.ks-filter.is-pilled {
  position: relative; z-index: 1; background: transparent; border-color: transparent; color: var(--ks-nav-base);
  transition: none; }
@media (max-width: 760px) {
  .ks-stickybar button.ks-filter { padding: 4px 10px; font-size: 12px; }
}

/* Leiste nur im Band (Blog-Übersicht, Glossar): im Seitenkopf mit JS unsichtbar, aber für Tastatur und
   Screenreader erreichbar; ohne JS bleibt sie sichtbar. */

/* Mobil einzeilig, waagerecht scrollbar, Ausblenden rechts als Scroll-Hinweis (Runde 9). */

/* Karten außerhalb der aktuellen Seite. Eigene Achse neben der Filterung, damit
   sich Filter und Paginierung nicht gegenseitig überschreiben. */
/* 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). */
/* 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. */ /* Kästchen auf der ersten Textzeile mittig */

/* 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). */
/* 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). */
/* 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. */
/* Zweiter Container in derselben Fläche (Titelzeile + Inhalt, Runde 16): Überschriftenabstand statt zweiter Fläche (Z-01). */
/* Content-Zweispalter: Textspalte oben bündig. Heros (cb03) zentrieren — dort sitzt die Regel. */

/* Gleichfarbige Nachbarblöcke teilen sich an der Naht ein einziges Section-Padding. */

/* 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 */

/* R-05 · E01 — trägt CB 15 die linksbündige Ja/Nein-Liste, folgt sie der
   Seitenflucht statt der zentrierten Lesespalte */

/* 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 */


/* Musterblock als Box IM Akkordeon-Inhalt: kein Sektions-Padding, sondern eine
   gerundete Innenbox — sonst addieren sich 64 px Blockabstand zum Panelabstand. */

/* 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. */

/* Zweispalter mit vertikal zentrierten Spalten (Startseite, Runde 7). */
.zeus-section .ks-mb-media img, .elementor .ks-mb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.ks-local-media-card__trigger { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent; cursor: pointer; }
button.ks-local-media-card__trigger[hidden] { display: none; }
button.ks-local-media-card__trigger .ks-video__scrim { transition: background var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  button.ks-local-media-card__trigger:hover .ks-video__scrim { background: rgba(0,0,0,0.3); }
  button.ks-local-media-card__trigger:hover .ks-video__play { transform: translate(-50%, -50%) scale(1.06); background: var(--ks-violet-hover); }
}

/* Fußnote bleibt Sekundärtext — sticht .ks-mb--white p aus (D-04) */

/* R-05 — die Fußnote fluchtet mit der Liste statt mit dem zentrierten Textfluss */

/* 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. */
/* Artikelinhalt immer mit ausgewogenem Umbruch — auch Überschriften, Zitate, Bildunterschriften. */
/* Lesemaß im Artikel etwas weiter, damit weniger Leerraum vor der Leiste bleibt (Runde 9). */ /* Textspalte ist direkt .ks-prose (Blog) bzw. article (Presse) */

/* 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-share button.ks-iconbtn { background: var(--surface-card); }
.zeus-section .ks-blog-band__media img, .elementor .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). */

/* CD-08 — ohne Beitragsbild trägt der Titel die volle Rasterbreite */
.ks-plakat-topline button.ks-iconbtn { width: 40px; height: 40px; }
.ks-plakat-topline button.ks-iconbtn svg { width: 18px; height: 18px; }

/* Leisten-Teaser (Blog-/Presse-Detailseiten): Größen als Component-Tokens; mobil eine Stufe
   kleiner (Chris, Runde 16) — die einzige Ausnahme von E75 (Kartentitel H5). */
.zeus-section .ks-blog-miniteaser__media img, .elementor .ks-blog-miniteaser__media img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-reveal); }

/* 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. */

/* Entscheidungskarte, über die Unterkante der Fläche gezogen */

/* Countdown groß neben der Headline */

/* Aktionen und Fußbereich */

@media (max-width: 760px) {
  .ks-extern__aktionen button.ks-btn { width: 100%; justify-content: center; }
}

/* 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. */
/* Suchformular in der Karte: Suchfeld (Component suchfeld) füllt die Breite, Knopf daneben */
.ks-fehler__suche button.ks-btn { flex: none; }
@media (max-width: 760px) {
  .ks-fehler__suche button.ks-btn { width: 100%; }
}