/* ===================== 00-base.css ===================== */
/* ==========================================================================
   CodeKlar – styles.css
   Zusammengesetzt aus dem Designsystem und den vier Sektions-Stylesheets.
   Reihenfolge ist bindend: 00-base.css zuerst, danach die Sektionsdateien in
   Dateinamen-Reihenfolge. Spaetere Regeln duerfen fruehere ueberschreiben.

   Kein Build-Schritt, kein Tailwind, keine externen Requests.
   Schrift: Titillium Web, lokal aus /assets/fonts/ (DSGVO).
   ========================================================================== */


/* ==========================================================================
   >>> 00-base.css
   Designsystem: Schrift, Tokens, Reset, Typografie, Layout, Buttons, Karten
   ========================================================================== */

/* ==========================================================================
   CodeKlar – 00-base.css
   Designsystem-Fundament: Schrift, Tokens, Reset, Basistypografie,
   Layout-Primitive, Buttons, Karten, Zugaenglichkeit.
   KEINE sektionsspezifischen Styles. Praefix: ck-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift – Titillium Web, lokal (DSGVO: keine Google-Fonts-Einbindung)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-200-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-900-normal.woff2") format("woff2");
}

/* Kursiv. Ohne diese beiden Schnitte schert der Browser die aufrechte
   Schrift schraeg — das hat nicht die Formen einer echten Kursiven und
   faellt in Blogbeitraegen als andere Schrift auf. 600 italic wegen
   verschachteltem <strong><em>. */
@font-face {
  font-family: "Titillium Web";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Titillium Web";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-600-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Schrift */
  --ck-font: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ck-weight-light: 300;
  --ck-weight-regular: 400;
  --ck-weight-medium: 600;
  --ck-weight-bold: 700;
  --ck-weight-black: 900;

  /* Marke */
  --ck-blue: #009fe3;          /* Markenfarbe: dekorative Flaechen, Verlaeufe, Rahmen */
  --ck-blue-strong: #0077aa;   /* dunkler: Fuellung unter weisser Schrift/Icons, Links, Fokus (4,98:1) */
  --ck-blue-strong-rgb: 0, 119, 170;  /* gleiche Farbe als Kanaele, fuer rgba()-Stops in Verlaeufen */
  --ck-blue-deep: #005f87;     /* noch dunkler: Hover der gefuellten Flaechen (7,1:1) */
  --ck-blue-soft: #e6f6fd;     /* Blau-Tint fuer Flaechen */
  --ck-blue-ui: #0090cf;       /* Flaeche unter weissem Icon (3,57:1) – vom Markenton kaum zu unterscheiden */
  --ck-blue-text: #0098d9;     /* Verlaufsstart fuer grosse Schrift ab 24px (3,23:1) */
  --ck-green: #00fbd1;         /* zweite Markenfarbe (Verlaufs-Ende) */
  --ck-green-ink: #008a7c;     /* abgedunkeltes Gruen fuer kleinen Verlaufs-Text (4,26:1 auf Weiss) */
  --ck-green-text: #00a08b;    /* Verlaufsende fuer grosse Schrift ab 24px (3,28:1) */

  /* Verlaeufe
     --ck-gradient traegt keinen Text und bleibt darum voll auf der Marke.
     --ck-gradient-text fuellt die 48px-Ueberschriften. Grosse Schrift braucht
     nur 3:1, deshalb genuegt ein minimal abgedunkelter Markenverlauf:
     #0098d9 = 3,23:1 und #00a08b = 3,28:1 auf Weiss (Original: #009fe3 ->
     #00fbd1 mit 2,97:1 bzw. 1,34:1 – zu hell fuer Text).
     --ck-gradient-text-deep bleibt fuer Verlaufstext unter 24px. */
  --ck-gradient: linear-gradient(90deg, var(--ck-blue) 0%, var(--ck-green) 100%);
  --ck-gradient-rev: linear-gradient(90deg, var(--ck-green) 0%, var(--ck-blue) 100%);
  --ck-gradient-text: linear-gradient(90deg, var(--ck-blue-text) 0%, var(--ck-green-text) 100%);
  --ck-gradient-text-deep: linear-gradient(90deg, var(--ck-blue-strong) 0%, var(--ck-green-ink) 100%);

  /* Text & Flaechen */
  /* Im Original sind Ueberschriften und Fliesstext reines Schwarz (Histogramm-
     Spitze exakt #000000); grau sind nur die Unterzeilen unter den Ueberschriften. */
  --ck-ink: #000;              /* Ueberschriften und Fliesstext */
  --ck-ink-strong: #1f2937;    /* Original: Tailwind gray-800, Burger-Icon im Header */
  --ck-ink-soft: #000;         /* Kartentext – im Original ebenfalls reines Schwarz */
  --ck-muted: #4a5565;         /* Unterzeilen unter den Ueberschriften (7,56:1 auf Weiss) */
  --ck-black: #000;            /* Footer */
  --ck-white: #fff;
  --ck-surface: #fff;
  --ck-surface-muted: #f3f4f6;
  --ck-surface-sunken: #f9fafb;
  --ck-border: #e5e7eb;
  --ck-border-strong: #d1d5db;
  --ck-dot-active: #0036ff;    /* aktiver Slider-Punkt wie im Original (7,07:1 auf Weiss) */
  --ck-overlay: rgba(0, 0, 0, 0.55);

  /* Radien */
  --ck-radius-sm: 0.5rem;
  --ck-radius: 0.75rem;
  --ck-radius-lg: 1rem;
  --ck-radius-pill: 999px;

  /* Schatten */
  --ck-shadow-sm: 0 1px 2px rgba(29, 35, 39, 0.06);
  --ck-shadow: 0 10px 15px -3px rgba(29, 35, 39, 0.1),
    0 4px 6px -4px rgba(29, 35, 39, 0.1);
  --ck-shadow-lg: 0 25px 50px -12px rgba(29, 35, 39, 0.25);

  /* Layout */
  --ck-container: 1280px;
  --ck-container-narrow: 1024px;
  --ck-container-wide: 1440px;
  --ck-gutter: 2rem;           /* Original: 2rem auf allen Breiten – Inhalt ab x=112 (1440px) bzw. x=32 (mobil) */
  --ck-header-h: 4.5rem;
  /* Ergibt zwischen zwei Abschnitten das Doppelte: 112px auf dem Handy,
     192px ab etwa 1400px. Vorher 5rem — neben den 240px rund um die
     Fallstudien wirkten die regulaeren Uebergaenge dadurch gedraengt. */
  --ck-section-y: clamp(3.5rem, 2.4rem + 4.2vw, 6rem);
  /* Eingefaerbte Bahnen brauchen mehr: an einer Farbkante zaehlt nur der
     Innenabstand der Bahn selbst, nicht die Summe beider Nachbarn. */
  --ck-section-y-band: clamp(4.25rem, 2.9rem + 5.2vw, 7.5rem);
  --ck-section-y-sm: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
  --ck-section-y-lg: clamp(4rem, 1.5rem + 8vw, 10rem);
  --ck-gap: 1rem;
  --ck-gap-sm: 0.5rem;
  --ck-gap-lg: 3rem;

  /* Bewegung */
  --ck-transition: 200ms ease;
  --ck-transition-slow: 400ms ease-in-out;
}

@media (min-width: 1024px) {
  :root {
    --ck-header-h: 7rem;
  }
}

/* --------------------------------------------------------------------------
   3. Reset / Normalisierung
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ck-header-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: 1rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.65;
  /* Bewusstes Sicherheitsnetz (letzte Instanz), kein Ersatz fuer sauberes
     Layout: alle bekannten Ueberbreiten sind lokal geklemmt (z. B. die
     Verlaufs-Ovale der Leistungen per overflow-x: clip). Beim Entwickeln
     diese Zeile zeitweise auskommentieren, damit echte Ueberbreiten
     sichtbar werden, statt hier stillschweigend zu verschwinden. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  fill: currentColor;
}

/* Strich-Icons (Lucide-Stil) bringen fill="none" als Attribut mit. Die
   Regel darueber wuerde sie fuellen; der Attributselektor gewinnt und laesst
   sie Umrisse bleiben. Die aelteren Ausnahmen je Bereich bleiben gueltig. */
svg[fill="none"] {
  fill: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

hr {
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--ck-border);
}

address {
  font-style: normal;
}

strong,
b {
  font-weight: var(--ck-weight-bold);
}

:target {
  scroll-margin-top: calc(var(--ck-header-h) + 1rem);
}

/* --------------------------------------------------------------------------
   4. Basistypografie
   -------------------------------------------------------------------------- */

.ck-display,
.ck-h1,
.ck-h2,
.ck-h3,
.ck-h4 {
  font-family: var(--ck-font);
}

/* Das Original bricht Ueberschriften und Unterzeilen greedy an der Spalten-
   breite um – die Zeilen sind sichtbar ungleich lang (gemessen 715/649px in
   der Logos-Headline). Bei .ck-h1 und .ck-h2 steuert deshalb max-width den
   Umbruch, nicht text-wrap: balance. */
.ck-display,
.ck-h3,
.ck-h4 {
  text-wrap: balance;
}

/* Hero-Headline (Original: <h1> im page-header).
   Gemessen im Original bei 1440px: Versalhoehe 48px. Titillium Web hat eine
   Versalhoehe von 0,667em (belegt an der 60px-Fallstudien-Headline mit 40px),
   das sind 72px Schriftgrad bei 72px Grundlinienabstand, Stammbreite 7px =
   Gewicht 400, kein negatives letter-spacing, reines Schwarz. Mobil (390px):
   21px Versalhoehe = 31,5px. */
.ck-display {
  font-size: clamp(1.9rem, 1.03rem + 3.86vw, 4.5rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ck-ink);
}

/* Sektions-Headline (Original: .h1).
   Gemessen im Original: Versalhoehe 32px = 48px Schriftgrad, Grundlinien-
   abstand 63px (1,3), Stammbreite 4-5px = Gewicht 400, reines Schwarz.
   max-width steuert den Umbruch. Der Wert stammt jetzt aus einer Messung am
   gerenderten Nachbau statt aus den Zeilenbreiten der Original-Screenshots:
   "Vertrauen von Unternehmen, die" ist hier 656,7px breit, mit dem naechsten
   Wort 744px. Bei 48rem (768px) rutschte "ihre" noch in die erste Zeile und
   die Logos-Headline brach anders als im Original. 44rem (704px) liegt
   zwischen beiden Werten und reproduziert die Umbrueche aller Sektions-
   headlines: Logos (657/586), Leistungen (638/325), Testimonials (425/476),
   Prozess (581 + Verlaufswort), USP (351/93) und Blog (einzeilig) stimmen
   danach Wort fuer Wort mit den Screenshots des Originals ueberein.
   Die Fallstudien-Headline ueberschreibt die Groesse auf 60px,
   im Original ueber lg:text-6xl. */
.ck-h1 {
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ck-ink);
  max-width: 44rem;
}

/* Sektions-Unterzeile / Lead-Ueberschrift (Original: .h2).
   Gemessen im Original: Versalhoehe 16px = 24px Schriftgrad (mobil 20px),
   Zeilenabstand 32-34px, Gewicht 400, Farbe #4a5565. Der Nachbau war mit
   28px/300 in #5b6670 zu gross, zu duenn und zu hell. */
.ck-h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.5rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ck-muted);
}

/* Karten-Headline (Original: .h3 / text-2xl md:text-3xl font-semibold).
   Groesse und Gewicht stimmen bereits mit dem Original ueberein (Versalhoehe
   21px = 30px, Gewicht 600). Abweichend waren nur die negative Laufweite und
   die Textfarbe – das Original setzt offen und in reinem Schwarz. */
.ck-h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  font-weight: var(--ck-weight-medium);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ck-ink);
}

/* Kleine Karten-/Listen-Headline (Original: text-xl font-bold) */
.ck-h4 {
  font-size: 1.25rem;
  font-weight: var(--ck-weight-bold);
  line-height: 1.35;
  color: var(--ck-ink);
}

/* Fliesstext-Lead (Original: prose-content text-lg) */
.ck-lead {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.6;
  color: var(--ck-ink-soft);
}

/* Textblock mit Absatzrhythmus (Original: .prose-content) */
.ck-prose > * + * {
  margin-top: 1em;
}

/* Ausgeschriebene URLs und ueberlange Woerter brechen um, statt die Seite
   zu verbreitern: in der Datenschutzerklaerung schoben Adressen wie
   https://www.dataprivacyframework.gov/… das Handy-Layout auf 1002px. */
.ck-prose {
  overflow-wrap: break-word;
}

.ck-prose p {
  color: var(--ck-ink-soft);
}

.ck-prose ul,
.ck-prose ol {
  padding-left: 1.25rem;
  color: var(--ck-ink-soft);
}

.ck-prose li + li {
  margin-top: 0.35em;
}

.ck-prose a {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ck-prose a:hover {
  text-decoration: none;
}

.ck-prose--lg {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
}

.ck-small {
  font-size: 0.875rem;
  line-height: 1.55;
}

.ck-muted {
  color: var(--ck-muted);
}

/* Kleine Auszeichnung ueber einer Headline */
.ck-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-blue-strong);
}

/* Verlaufs-Text (Original: .gradient-text) – nur fuer grosse Headlines */
.ck-gradient-text {
  /* inline-block wie im Original: der Verlauf laeuft ueber die Breite des
     eingefaerbten Wortes, und ein mehrwortiger Span ("mit CodeKlar") wandert
     geschlossen in die naechste Zeile, statt aufgetrennt zu werden. */
  display: inline-block;

  /* Die inline-block-Box endet bei enger Zeilenhoehe (1.05) auf der
     Grundlinie — Unterlaengen wie g, j, p, q, y ragen darueber hinaus und
     werden von background-clip: text nicht mehr eingefaerbt, sehen also
     abgeschnitten aus. Aufgefallen am "g" in "Technologien".
     Der Innenabstand gibt ihnen Platz, der gleich grosse negative
     Aussenabstand haelt Zeilenabstand und Layout unveraendert. */
  padding-block-end: 0.26em;
  margin-block-end: -0.26em;

  color: var(--ck-blue-strong);
  background-image: var(--ck-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ck-gradient-text {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Textlink im Fliesstext / in Sektionen */
.ck-link {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--ck-transition);
}

.ck-link:hover {
  color: var(--ck-ink);
}

/* --------------------------------------------------------------------------
   5. Layout-Primitive
   -------------------------------------------------------------------------- */

.ck-container {
  width: 100%;
  max-width: var(--ck-container);
  margin-inline: auto;
  padding-inline: var(--ck-gutter);
}

.ck-container--narrow {
  max-width: var(--ck-container-narrow);
}

.ck-container--wide {
  max-width: var(--ck-container-wide);
}

.ck-section {
  padding-block: var(--ck-section-y);
}

.ck-section--sm {
  padding-block: var(--ck-section-y-sm);
}

.ck-section--lg {
  padding-block: var(--ck-section-y-lg);
}

.ck-section--gray {
  padding-block: var(--ck-section-y-band);
  background-color: var(--ck-surface-muted);
}

.ck-section--dark {
  background-color: var(--ck-black);
  color: var(--ck-white);
}

.ck-section--dark .ck-h1,
.ck-section--dark .ck-h3,
.ck-section--dark .ck-h4,
.ck-section--dark .ck-display {
  color: var(--ck-white);
}

.ck-section--dark .ck-h2,
.ck-section--dark .ck-prose p,
.ck-section--dark .ck-lead {
  color: rgba(255, 255, 255, 0.78);
}

/* Zentrierter, in der Breite begrenzter Kopf einer Sektion
   (Original: text-center mx-auto) */
.ck-center {
  margin-inline: auto;
  text-align: center;
}

/* Lesebreite fuer Textbloecke */
.ck-measure {
  max-width: 65ch;
}

/* Grid */
.ck-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-gap);
}

.ck-grid--gap-sm {
  gap: var(--ck-gap-sm);
}

.ck-grid--gap-lg {
  gap: var(--ck-gap-lg);
}

@media (min-width: 640px) {
  .ck-grid--3,
  .ck-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ck-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ck-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   6. Buttons (Original: .cta-button – Pillenform, blau gefuellt)
   -------------------------------------------------------------------------- */

.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Original gemessen: Label 20px in Gewicht 400, Innenabstand 28px, Box 44px
     hoch (20px * 1,4 + 2 * 7px + 2 * 1px Rand). Der Nachbau war mit 16px/600
     kleiner und schwerer als das Original. */
  padding: 0.4375rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--ck-radius-pill);
  background-color: transparent;
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: 1.25rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ck-transition),
    border-color var(--ck-transition), color var(--ck-transition),
    transform var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-btn:hover {
  transform: translateY(-1px);
}

.ck-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

/* Primaer: schwarz gefuellt, weisse Schrift – so wie im Original (.cta-button,
   gemessen reines #000000: Hero-Button, die sechs Pfeil-Buttons der Leistungs-
   karten und "Case Study ansehen"). Das ist zugleich die kontraststaerkste
   Loesung (21:1) und loest den Zielkonflikt, der vorher zur blauen Fuellung
   gefuehrt hatte. Der blaue Pill im Header ist im Original eine eigene
   Variante und nutzt diesen Modifier nicht. */
.ck-btn--primary {
  background-color: var(--ck-black);
  border-color: var(--ck-black);
  color: var(--ck-white);
}

.ck-btn--primary:hover {
  background-color: var(--ck-ink-strong);
  border-color: var(--ck-ink-strong);
  color: var(--ck-white);
}

/* Sekundaer / Ghost: transparent mit dunklem Rahmen
   (Original: cta-button bg-transparent text-black border border-black) */
.ck-btn--ghost {
  background-color: transparent;
  border-color: var(--ck-ink);
  color: var(--ck-ink);
}

.ck-btn--ghost:hover {
  background-color: var(--ck-ink);
  border-color: var(--ck-ink);
  color: var(--ck-white);
}

/* Hell: weiss gefuellt – fuer dunkle Flaechen und Bildhintergruende */
.ck-btn--light {
  background-color: var(--ck-white);
  border-color: var(--ck-white);
  color: var(--ck-ink);
}

/* Wie bei .ck-btn--primary: unter weisser Schrift die AA-taugliche
   Blaustufe, nicht der hellere Markenton. */
.ck-btn--light:hover {
  background-color: var(--ck-blue-strong);
  border-color: var(--ck-blue-strong);
  color: var(--ck-white);
}

/* Verlauf (Original: cta-button-blue bg-gradient-to-r from-ck-lightblue to-ck-lightgreen).
   Groesse und Gewicht wie im Original (20px/400).
   Bewusste Abweichung: das Original setzt weisse Schrift, die auf dem Verlauf
   nur 2,97:1 (Blau-Ende) bis 1,34:1 (Tuerkis-Ende) erreicht. Die Beschriftung
   bleibt deshalb dunkel (--ck-ink: 7,07:1 am Blau-Ende, 15,7:1 am Tuerkis-
   Ende). */
/* Der Verlauf ist doppelt so breit wie der Button und beim Ueberfahren
   wandert er zur zweiten Haelfte. CSS kann Verlaeufe nicht animieren — ein
   Wechsel des background-image springt hart um. Ueber background-position
   fliesst die Farbe dagegen weich, und der Button hebt sich leicht an. */
.ck-btn--gradient {
  background-image: linear-gradient(90deg,
    var(--ck-blue) 0%,
    var(--ck-green) 50%,
    var(--ck-blue) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  border-color: transparent;
  color: var(--ck-ink);
  font-weight: var(--ck-weight-regular);
  transition: background-position .5s ease, transform .18s ease, box-shadow .18s ease;
}

.ck-btn--gradient:hover,
.ck-btn--gradient:focus-visible {
  background-position: 100% 0;
  color: var(--ck-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 159, 227, .28);
}

.ck-btn--gradient:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 159, 227, .22);
}

@media (prefers-reduced-motion: reduce) {
  .ck-btn--gradient { transition: none; }
  .ck-btn--gradient:hover,
  .ck-btn--gradient:focus-visible { transform: none; }
}

/* Volle Breite (mobil) */
.ck-btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. Karten
   -------------------------------------------------------------------------- */

.ck-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

@media (min-width: 768px) {
  .ck-card {
    padding: 2rem;
  }
}

/* Graue Flaeche (Original: bg-gray-100 rounded-xl) */
.ck-card--muted {
  background-color: var(--ck-surface-muted);
  border-color: transparent;
}

/* Ohne Rahmen und Innenabstand – z. B. fuer Bildkarten */
.ck-card--plain {
  padding: 0;
  border-color: transparent;
  overflow: hidden;
}

/* Hover-Verhalten fuer verlinkte Karten */
.ck-card--hover {
  transition: border-color var(--ck-transition),
    box-shadow var(--ck-transition), transform var(--ck-transition);
}

.ck-card--hover:hover,
a:hover > .ck-card--hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

/* Innenbereich einer Karte, der den restlichen Platz fuellt */
.ck-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Verlaufsrahmen-Wrapper (Original: .gradient-border)
   Markup: <div class="ck-gradient-border"><div class="ck-card">…</div></div> */
.ck-gradient-border {
  height: 100%;
  /* Original gemessen: 4px stark, Verlauf diagonal von Gruen oben links
     (#00fdd0) nach Blau unten rechts (#00a1e3). */
  padding: 4px;
  border-radius: var(--ck-radius);
  background-image: linear-gradient(
    135deg,
    var(--ck-green) 0%,
    var(--ck-blue) 100%
  );
}

.ck-gradient-border > .ck-card {
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   8. Icon-Badge (Original: bg-ck-lightblue rounded-lg w-10 h-10 … )
   -------------------------------------------------------------------------- */

.ck-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid transparent;
  border-radius: var(--ck-radius-sm);
  /* Original: #009fe3. Gefuellt wird mit --ck-blue-ui (#0090cf), damit das
     weisse Icon 3,57:1 statt 2,97:1 erreicht – vom Markenton mit blossem
     Auge nicht zu unterscheiden, aber deutlich heller als das vorherige
     #0077aa. */
  background-color: var(--ck-blue-ui);
  color: var(--ck-white);
}

.ck-icon-badge svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* Umrissvariante (Original: border-2 border-ck-lightblue text-ck-lightblue).
   Rahmen UND Glyphe tragen dieselbe Farbe – der Nachbau wirkte durch das
   dunklere Glyphenblau zweifarbig. */
.ck-icon-badge--outline {
  background-color: transparent;
  border-color: var(--ck-blue-ui);
  color: var(--ck-blue-ui);
}

/* --------------------------------------------------------------------------
   9. Medien
   -------------------------------------------------------------------------- */

.ck-media {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.ck-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ck-media--16x9 {
  aspect-ratio: 16 / 9;
}

.ck-media--square {
  aspect-ratio: 1 / 1;
}

.ck-media--4x3 {
  aspect-ratio: 4 / 3;
}

/* Sanfter Bild-Zoom beim Hovern der Karte bzw. des Links
   (Original: group-hover:scale-[1.04] duration-[400ms]) */
.ck-media--zoom img {
  transition: transform var(--ck-transition-slow);
}

.ck-media--zoom:hover img,
a:hover .ck-media--zoom img,
.ck-card:hover .ck-media--zoom img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   10. Fokus & Zugaenglichkeit
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--ck-blue-strong);
  outline-offset: 2px;
}

.ck-section--dark :focus-visible,
.ck-btn--light:focus-visible {
  outline-color: var(--ck-white);
}

/* Nur fuer Screenreader */
.ck-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink: unsichtbar, bis er Fokus bekommt */
.ck-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--ck-radius-sm) 0;
  background-color: var(--ck-white);
  color: var(--ck-blue-strong);
  font-weight: var(--ck-weight-bold);
  transform: translateY(-120%);
  transition: transform var(--ck-transition);
}

/* Auch :focus, nicht nur :focus-visible – sonst bliebe der Sprunglink bei
   programmatischem Fokus unsichtbar. */
.ck-skip-link:focus,
.ck-skip-link:focus-visible {
  transform: translateY(0);
}

/* <main> traegt tabindex="-1", damit der Fokus nach dem Sprung wirklich im
   Inhalt landet. Einen Fokusring braucht der Inhaltsbereich dabei nicht. */
main:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   11. Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ck-btn:hover,
  .ck-card--hover:hover,
  a:hover > .ck-card--hover {
    transform: none;
  }

  .ck-media--zoom:hover img,
  a:hover .ck-media--zoom img,
  .ck-card:hover .ck-media--zoom img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. Druck
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .ck-skip-link {
    display: none;
  }
}

/* ==========================================================================
   >>> 10-header-hero-trust.css
   Sektionen 1-3: Header/Navigation, Hero (inkl. Webinar-Banner), Kundenlogos
   ========================================================================== */

/* ==========================================================================
   CodeKlar – 10-header-hero-trust.css
   Sektionen 1–3: Header/Navigation (inkl. Mobile-Menue), Hero (inkl. Webinar-
   Banner und Seitenhintergrund), Trust-/Kundenlogo-Band.
   Setzt 00-base.css voraus. Keine Klasse aus 00-base.css wird neu definiert.

   Inhalt
     1  Hilfsregeln (Icons, Scroll-Sperre)
     2  Header: Grundgeruest und Scroll-Zustand
     3  Desktop-Navigation und Dropdowns
     4  Burger-Button
     5  Mobile-Menue: siehe 99-mobilmenu.css
     6  Hero-Buehne: Seitenhintergrund index-bg.jpg
     7  Webinar-Banner .ckwb (Original-CSS aus main.css)
     8  Hero
     9  Trust: Headline und Kundenlogo-Laufband
    10  Reduzierte Bewegung
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hilfsregeln
   -------------------------------------------------------------------------- */

/* 00-base.css setzt svg { fill: currentColor } und ueberschreibt damit das
   Praesentationsattribut fill="none" der Strich-Icons. Hier zurueckgedreht. */
.ck-header svg[fill="none"],
.ck-mobilemenu svg[fill="none"] {
  fill: none;
}

/* Wird vom JS am <body> gesetzt, solange das Mobile-Menue offen ist. */
.ck-no-scroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Header – fixiert, ueber dem Hero transparent
   (Original: fixed top-0 w-full z-50 transition-all duration-300,
    Inline-Style background-color: rgba(255,255,255,0))
   -------------------------------------------------------------------------- */

/* Logik bewusst umgedreht gegenueber dem Original: dort ist transparent der
   Grundzustand und JS faerbt auf Weiss um. Faellt das JS aus, stuende die
   Leiste dauerhaft ohne Hintergrund ueber Fotos und Kartenrastern. Hier ist
   Weiss der Grundzustand, und JS nimmt ihn ueber dem Hero per .is-top
   zurueck. Mit JS ist die Wirkung identisch, ohne JS bleibt der Header
   lesbar. */
.ck-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--ck-white);
  box-shadow: 0 1px 3px rgba(29, 35, 39, 0.12), 0 8px 24px -16px rgba(29, 35, 39, 0.35);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

/* JS setzt die Klasse im Ruhezustand und nimmt sie ab ca. 50px Scroll weg. */
.ck-header.is-top {
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
}

/* Nur fuer den allerersten Zustandswechsel beim Laden – verhindert, dass der
   weisse Grundzustand ueber dem Hero einmal kurz aufblitzt. */
.ck-header.ck-header--no-transition {
  transition: none;
}

.ck-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--ck-header-h);
}

/* Original: Container w-44 (11rem) um das Logo */
.ck-header__logo {
  display: block;
  flex: 0 0 auto;
  width: 9.25rem;
}

.ck-header__logo img {
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .ck-header__logo {
    width: 11rem;
  }
}

.ck-header__desktop {
  display: none;
}

@media (min-width: 1024px) {
  /* Im Original fuellt die Navigation den Raum zwischen Logo und CTA: sie
     beginnt direkt hinter dem Logo (x=295) und reicht bis x=1088, die
     Menuepunkte stehen gleichmaessig 67-72px auseinander. Dafuer muss der
     Desktop-Block wachsen duerfen. */
  .ck-header__desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 1.25rem;
  }

  .ck-nav {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Original: cta-button-blue … text-sm xl:text-lg 2xl:text-xl ml-16 py-1 px-3
   Gemessen im Original: EINE Flaeche (Histogramm 7162 Pixel reines #009fe3),
   kein Verlauf, weisse Schrift. Der Nachbau trug hier den Markenverlauf, dessen
   gruene Haelfte im Direktvergleich sofort auffiel. Die Fuellung nutzt
   --ck-blue-strong, weil die Beschriftung Normaltext ist und darum 4,5:1
   braucht (#0077aa = 4,98:1; das Original-#009fe3 laege bei 2,97:1).
   .ck-btn--gradient bleibt unangetastet – der Abschluss-CTA braucht den Verlauf. */
.ck-header__cta {
  flex: 0 0 auto;
  margin-left: clamp(1rem, 2.5vw, 4rem);
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  white-space: nowrap;
  background-image: none;
  background-color: var(--ck-blue-strong);
  border-color: var(--ck-blue-strong);
  color: var(--ck-white);
}

.ck-header__cta:hover,
.ck-header__cta:focus-visible {
  background-image: none;
  background-color: var(--ck-blue-deep);
  border-color: var(--ck-blue-deep);
  color: var(--ck-white);
}

@media (min-width: 1280px) {
  .ck-header__cta {
    padding: 0.4rem 1.25rem;
    font-size: 1.125rem;
  }
}

@media (min-width: 1536px) {
  .ck-header__cta {
    padding: 0.5rem 2rem;
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   3. Desktop-Navigation
   -------------------------------------------------------------------------- */

/* Die Leiste ist so hoch wie der Header, damit die Dropdowns exakt an seiner
   Unterkante beginnen und zwischen Link und Panel keine Hover-Luecke entsteht. */
.ck-nav__list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: var(--ck-header-h);
  gap: 0;
}

.ck-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.ck-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  /* Der Abstand zwischen den Punkten kommt ab hier aus space-between der
     Liste, nicht mehr aus dem Innenabstand – sonst laeuft die Leiste
     zwischen 1024 und 1280px ueber. */
  padding: 0.55rem 0.35rem;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-ink);
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--ck-transition), background-color var(--ck-transition);
}

/* Gemessen im Original: 18px Schriftgrad (Versalhoehe 13px, "Fallstudien"
   85px breit), reines Schwarz. Der Nachbau lag bei 16px und begann erst bei
   x=510, wodurch der Kopf rechtslastig wirkte. Die Zweizeiligkeit, die im
   Original bei exakt 1440px dadurch entsteht, wird bewusst NICHT nachgebaut
   (white-space: nowrap bleibt). */
@media (min-width: 1280px) {
  .ck-nav__link {
    padding: 0.55rem 0;
    font-size: 1.125rem;
    color: var(--ck-ink);
  }
}

.ck-nav__link:hover,
.ck-nav__item--has-children:focus-within > .ck-nav__link {
  color: var(--ck-blue-strong);
}

.ck-nav__chevron {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  transition: transform var(--ck-transition);
}

.ck-nav__item--has-children:hover > .ck-nav__link .ck-nav__chevron,
.ck-nav__item--has-children:focus-within > .ck-nav__link .ck-nav__chevron {
  transform: rotate(180deg);
}

/* Dropdown-Panel: oeffnet per Hover und per Tastatur (focus-within) */
.ck-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 17rem;
  padding: 0.75rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  transition: opacity var(--ck-transition), transform var(--ck-transition),
    visibility var(--ck-transition);
}

.ck-nav__item--has-children:hover > .ck-nav__panel,
.ck-nav__item--has-children:focus-within > .ck-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Solange JS das Menue geschlossen hat (Escape), bleibt es trotz Hover zu. */
.ck-nav__item.is-closed > .ck-nav__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
}

.ck-nav__panel--right {
  left: auto;
  right: 0;
}

/* Breites Panel fuer "Leistungen" (drei Ebenen im Original) */
.ck-nav__panel--wide {
  width: min(44rem, calc(100vw - 2 * var(--ck-gutter)));
  padding: 1.25rem;
}

.ck-nav__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
}

.ck-nav__group:last-child {
  grid-column: 1 / -1;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ck-border);
}

.ck-nav__group-title {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--ck-ink);
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-bold);
  transition: color var(--ck-transition), background-color var(--ck-transition);
}

.ck-nav__group-title:hover {
  color: var(--ck-blue-strong);
  background-color: var(--ck-blue-soft);
}

.ck-nav__group .ck-nav__sublist {
  margin-top: 0.25rem;
}

.ck-nav__sublink {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--ck-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color var(--ck-transition), background-color var(--ck-transition);
}

.ck-nav__sublink:hover {
  color: var(--ck-blue-strong);
  background-color: var(--ck-blue-soft);
}

/* --------------------------------------------------------------------------
   4. Burger-Button (Original: #mobile-menu-toggle, lg:hidden)
   -------------------------------------------------------------------------- */

.ck-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-ink-strong);
}

.ck-burger__icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 1024px) {
  .ck-burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Mobile-Menue: komplett in styles/99-mobilmenu.css (Markup in
   partials/mobile-menu.html, Steuerung in assets/js/main.js).
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. Hero-Buehne mit Seitenhintergrund
   Original: absolut positionierte Ebene in <main> mit index-bg.jpg,
   background-size:100% auto, top center, Hoehe 140vh, -z-10.
   Hier als Hintergrund der Buehne, weil eine Ebene mit negativem z-index vom
   weissen body-Hintergrund verdeckt wuerde. Die zweite Verlaufsebene blendet
   das Bild nach unten sauber nach Weiss aus, falls die Buehne kuerzer ist als
   das Bild (index-bg.jpg ist ab ca. 50 % Bildhoehe ohnehin reines Weiss).
   -------------------------------------------------------------------------- */

.ck-herostage {
  position: relative;
  /* Original: Bannerkante exakt bei y=112, also buendig an der Header-
     unterkante ohne zusaetzliche 16px. */
  padding-top: var(--ck-header-h);
  background-color: var(--ck-white);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 72%, #fff 100%),
    url("/assets/img/index-bg.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: 100% 100%, 100% auto;
}

/* --------------------------------------------------------------------------
   7. Webinar-Banner .ckwb
   Original-CSS aus dem autoptimize-Bundle (main.css), unveraendert uebernommen.
   Nur zwei Selektoren sind an das neue Markup angepasst:
     .entry-content > .ckwb:first-child -> .ck-herostage > .ckwb:first-child
     .ckwb + .block_bg                  -> .ckwb + .ck-hero
   Der urspruengliche margin-top:-48px entfaellt, weil die Buehne ihren
   Header-Abstand selbst setzt.
   -------------------------------------------------------------------------- */

.ckwb {
  --ckwb-blue: var(--ck-blue); /* identisch mit dem Originalwert #009fe3 */
  --ckwb-ink: #1d2327;         /* Originalwert des Banners – global ist --ck-ink jetzt #000 */
  margin: 0 auto 2.5rem;
  /* wie --ck-gutter, damit das Banner deckungsgleich mit dem Container laeuft
     (Original: x=112 bis x=1327 bei 1440px) */
  padding: 0 2rem;
  max-width: 1280px;
  box-sizing: border-box;
}

.ckwb * {
  box-sizing: border-box;
}

.ckwb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(100deg, #0b2b3c 0%, #124a63 55%, #0e6c91 100%);
  box-shadow: 0 10px 30px -12px rgba(11, 43, 60, 0.45);
  position: relative;
  overflow: hidden;
}

.ckwb__inner:after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 159, 227, 0.45) 0%, rgba(0, 159, 227, 0) 70%);
  pointer-events: none;
}

.ckwb__text {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.ckwb__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.4rem;
  padding: 0;
}

.ckwb__badge {
  display: inline-block;
  padding: 0.22em 0.7em;
  border-radius: 999px;
  background: var(--ckwb-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}

.ckwb__when {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #bfe6f7;
  font-size: 0.86rem;
  /* 500 ist nicht geladen und fiele still auf 400 zurueck. */
  font-weight: var(--ck-weight-medium);
  white-space: nowrap;
}

.ckwb__when-short {
  display: none;
}

.ckwb__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ckwb__title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: break-word;
}

.ckwb__subtitle {
  margin: 0.3rem 0 0;
  padding: 0;
  color: #c9dde8;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ckwb__action {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.ckwb__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ckwb-ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ckwb__cta:hover,
.ckwb__cta:focus-visible {
  background: var(--ckwb-blue);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.ckwb__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.ckwb__arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.ckwb__cta:hover .ckwb__arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  /* Mobil beginnt das Banner im Original erst bei y=240, also mit deutlich
     mehr Luft unter dem Kopf als im Nachbau (y=88). */
  .ck-herostage {
    /* Ohne Banner reicht etwas Luft unter dem Kopf, sonst klafft ueber der
       Ueberschrift ein leeres Drittel des Bildschirms. */
    padding-top: calc(var(--ck-header-h) + 3rem);
  }

  .ck-herostage:has(.ckwb) {
    /* Pixelmessung an orig-mobil.png: Bannerkante bei y=240, linke Kante
       bei x=33. 4,5rem Headerhoehe + 10,5rem = exakt 240px. */
    padding-top: calc(var(--ck-header-h) + 10.5rem);
  }

  .ckwb {
    margin-bottom: 2rem;
  }

  .ckwb__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    padding: 1.25rem;
  }

  .ckwb__title {
    font-size: 1.06rem;
  }

  .ckwb__action {
    width: 100%;
  }

  .ckwb__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 861px) {
  .ck-herostage > .ckwb:first-child {
    margin-bottom: 1.25rem;
  }

  .ckwb + .ck-hero {
    min-height: 62vh;
  }
}

@media (max-width: 640px) {
  .ckwb {
    padding: 0 2rem;
    margin-bottom: 1.5rem;
  }

  .ckwb__inner {
    gap: 0.85rem;
    padding: 0.95rem 1.05rem;
    border-radius: 14px;
  }

  .ckwb__inner:after {
    width: 150px;
    height: 150px;
    right: -50px;
    top: -50px;
  }

  .ckwb__meta {
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
  }

  .ckwb__badge {
    font-size: 0.63rem;
    padding: 0.2em 0.6em;
  }

  .ckwb__when {
    font-size: 0.78rem;
  }

  .ckwb__when-long {
    display: none;
  }

  .ckwb__when-short {
    display: inline;
  }

  .ckwb__title {
    font-size: 0.97rem;
    line-height: 1.3;
  }

  .ckwb__subtitle {
    display: none;
  }

  .ckwb__cta {
    padding: 0.62rem 1.1rem;
    font-size: 0.92rem;
  }
}

/* --------------------------------------------------------------------------
   8. Hero (Original: .block_bg.alignfull.min-h-[80vh].flex.items-center)
   -------------------------------------------------------------------------- */

.ck-hero {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-bottom: 2rem;
}

.ck-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  padding-block: 1rem;
}

@media (min-width: 1024px) {
  .ck-hero__inner {
    flex-direction: row;
    align-items: center;
    /* Original: lg:gap-52 = 208px, rechnerisch 504px Textspalte. Am
       gerenderten Nachbau nachgemessen passt "Microsoft Cloud," dort mit
       492,5px aber noch in eine Zeile – der Titel brach zweizeilig statt
       dreizeilig. 15rem Gap ergibt 488px Spalte und damit exakt den Umbruch
       des Originals: "Microsoft" (gemessen 290px, im Original ebenfalls
       290px) / "Cloud, die" / "einfach laeuft.". Auch die Lead-Zeilen
       darunter laufen damit wie im Original fuenfzeilig. */
    gap: 15rem;
    /* Ohne Webinar-Banner sitzt der Hero direkt unter dem Kopf; 4rem Luft
       genuegen dann. Der Heroinhalt ist hoeher als die min-height und liegt
       darum oben an, padding-top wirkt hier unmittelbar. */
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  /* Mit Banner: Im Original liegen zwischen Banner-Unterkante (y=229) und
     der Oberlaenge des "M" (y=381) 152px; 8rem trifft das nachgemessen. */
  .ck-herostage:has(.ckwb) .ck-hero__inner {
    padding-top: 8rem;
  }
}

.ck-hero__content {
  flex: 1 1 0;
  min-width: 0;
}

/* Original: reines Schwarz, Abstand H1-Grundlinie bis Lead-Oberlaenge 69px
   (entspricht rund 2,5rem margin-top). */
.ck-hero__lead {
  margin-top: 2.5rem;
  max-width: 46ch;
  color: var(--ck-ink);
}

/* Original: cta-button mb-4 mr-4 nebeneinander */
.ck-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* Original: 22px zwischen den beiden Buttons */
  margin-top: 2rem;
}

/* Original: flex flex-wrap gap-4 mt-11 */
.ck-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 4.25rem; /* Original: 68px zwischen Button- und Badge-Kante */
}

/* Original: w-40 lg:w-44 border border-gray-200 rounded-xl overflow-hidden */
.ck-hero__badge {
  width: 10rem;
  overflow: hidden;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
}

.ck-hero__badge img {
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .ck-hero__badge {
    width: 11rem;
  }
}

/* Rechte Spalte: im Original die Lottie-Animation big-data-processing.json
   (isometrische Wuerfel in #40b5e7 / #009ee3 / #2b87ae / #bcebff auf Weiss).
   Nachgebaut als Inline-SVG – kein externes JS, keine neue Datei. Der frueher
   hier liegende Verlaufsfleck (verlauf-oval.png) war der einzige gruene
   Gegenstand im Hero und fiel aus der kuehlen Palette heraus. */
.ck-hero__visual {
  display: none;
}

@media (min-width: 1024px) {
  .ck-hero__visual {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
  }
}

.ck-hero__cubes {
  display: block;
  width: min(22rem, 100%);
  height: auto;
  animation: ck-hero-float 14s ease-in-out infinite;
}

@keyframes ck-hero-float {
  0%,
  100% {
    transform: translate3d(0, -0.75rem, 0) scale(1);
  }
  50% {
    transform: translate3d(0, 0.75rem, 0) scale(1.03);
  }
}

/* --------------------------------------------------------------------------
   9. Trust / Kundenlogos
   Original: Swiper-Slider .swiper-logos mit 14 Logos, volle Breite.
   Nachbau: CSS-Laufband aus zwei identischen Saetzen, Versatz um exakt 50 %.
   Damit -50% sauber aufgeht, tragen die Elemente feste Breiten und keinen
   gap; der Abstand steckt im Innenabstand der Kachel.
   -------------------------------------------------------------------------- */

.ck-logos__head {
  margin-bottom: 3rem; /* Original: mb-12 an der Unterzeile */
}

/* 67rem = 1072px: die erste Zeile des Originals ist 1065px breit, mit dem
   naechsten Wort waeren es 1108px – der Umbruch faellt damit genau wie dort. */
.ck-logos__sub {
  /* Original: rund 24px zwischen Ueberschrift und Unterzeile. */
  margin-top: 1.5rem;
  max-width: 68rem;
}

.ck-logos__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.ck-logos__track {
  display: flex;
  width: max-content;
  animation: ck-logos-scroll 55s linear infinite;
}

.ck-logos__viewport:hover .ck-logos__track,
.ck-logos__viewport:focus-within .ck-logos__track {
  animation-play-state: paused;
}

.ck-logos__set {
  display: flex;
  flex: 0 0 auto;
}

.ck-logos__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 9.5rem;
  height: 4.5rem;
  padding-inline: 0.75rem;
}

/* Original gemessen: Rastermass 236px (Mittenabstaende 233-238px), Luecke
   zwischen zwei Logos 80-120px. 14,75rem - 2 x 2,5rem = 156px Innenbreite und
   damit genau die Original-Logobreite von rund 158px. Beide Laufband-Saetze
   tragen dieselbe Breite, die -50%-Schleife bleibt also exakt. */
@media (min-width: 768px) {
  .ck-logos__item {
    width: 14.75rem;
    height: 5rem;
    padding-inline: 2.5rem;
  }
}

/* Das Original zeigt die Logos in Originalfarben (fritz-kola schwarz, D3
   navy, Sanverdi rot, Stick Chef gruen, BoSch Data mehrfarbig); der Nachbau
   hatte sie entsaettigt und abgeblendet. */
.ck-logos__item img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes ck-logos-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   10. Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ck-hero__cubes {
    animation: none;
    transform: none;
  }

  /* Laufband wird zum ruhigen, zentrierten Logo-Raster */
  .ck-logos__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ck-logos__track {
    animation: none;
    width: 100%;
    transform: none;
  }

  .ck-logos__set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .ck-logos__set--clone {
    display: none;
  }
}

/* ==========================================================================
   >>> 30-leistungen-fallstudien.css
   Sektionen 4-5: Leistungskacheln, Fallstudien
   ========================================================================== */

/* ==========================================================================
   CodeKlar – 30-leistungen-fallstudien.css
   Sektionsstyles fuer:
     Sektion 4  "Unsere Leistungen – immer mit klarem Ergebnis"  (.ck-leistungen)
     Sektion 5  "Ausgewählte Fallstudien"                        (.ck-fallstudien)
   Baut auf 00-base.css auf. Keine Klasse aus 00-base.css wird neu definiert.
   ========================================================================== */

/* ==========================================================================
   1. Sektion 4 – Leistungen
   Original: <div class="alignfull relative py-20"> mit zwei dekorativen
   verlauf-oval-Grafiken und einem Grid md:grid-cols-2 gap-12 aus 6 Karten
   mit Verlaufsrahmen.
   ========================================================================== */

.ck-leistungen {
  position: relative;
  /* Eigener Stapelkontext: die Ovale ragen absichtlich ueber die Sektions-
     kante hinaus, duerfen aber nicht ueber die Nachbarsektionen malen. */
  isolation: isolate;
  /* Seitlich beschneiden (keine horizontale Scrollbar), vertikal darf das
     Oval wie im Original ueber die Sektionskante laufen. */
  overflow-x: clip;
  overflow-y: visible;
}

.ck-leistungen__inner {
  position: relative;
}

/* Dekorative Verlaufs-Ovale (Original: w-1/2 h-full opacity-70,
   pointer-events-none, select-none, aria-hidden) */
.ck-leistungen__oval {
  position: absolute;
  z-index: -1;
  width: 50%;
  height: 100%;
  background-image: url("/assets/img/verlauf-oval.png");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.ck-leistungen__oval--left {
  bottom: 0;
  left: 0;
  background-position: bottom left;
  transform: translate(-25%, 25%) rotate(180deg) scaleX(-1);
}

.ck-leistungen__oval--right {
  top: 0;
  right: 0;
  background-position: top right;
  transform: translate(15%, 20px);
}

/* Unterzeile unter der Sektions-Headline (Original: h3.h2.mb-12) */
.ck-leistungen__intro {
  /* Original: rund 24px Luft unter der Headline (Grundlinienabstand 65px). */
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  /* wie .ck-logos__sub: zwei Zeilen, erste endet mit "fuer klare" */
  max-width: 67rem;
}

/* --------------------------------------------------------------------------
   Leistungskarte (Original: .bg-white.h-full.rounded-xl.p-5.md:p-10)
   Die Karte liegt in .ck-gradient-border und nutzt .ck-card aus 00-base.css;
   hier nur die abweichenden Innenabstaende (md:p-10 = 2.5rem) und der Aufbau.
   -------------------------------------------------------------------------- */

.ck-leistung {
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .ck-leistung {
    padding: 2.5rem;
  }
}

.ck-leistung__title {
  margin-bottom: 1rem;
}

/* Original: text-lg = 18px/28px. Der globale Zeilenabstand (1,65 = 29,7px)
   war im Kartentext zu offen. */
.ck-leistung .ck-prose {
  line-height: 1.556;
}

/* Ergebniszeile. Im Original ein eigener <p> in einem <div>, vom Fliesstext
   durch einen Leerabsatz (&nbsp;) getrennt – hier durch Abstand geloest.
   Doppelte Klasse, damit sie die Farbregel ".ck-prose p" sicher schlaegt. */
.ck-leistung .ck-leistung__result {
  /* Original: exakt zwei Zeilenhoehen (2 x 28px) Abstand zum Fliesstext. */
  margin-top: 1.75rem;
  /* Die Zeile ist im Original WEDER fett NOCH andersfarbig als der
     Fliesstext – sie ist nur durch die Leerzeile abgesetzt. */
  color: var(--ck-ink);
  font-weight: var(--ck-weight-regular);
}

/* Pfeil-Button unten rechts (Original: a.cta-button.mt-4.self-end mit "➜").
   Durch .ck-card__body (flex:1) sitzt er in allen Karten auf gleicher Hoehe. */
.ck-leistung__more {
  align-self: flex-end;
  margin-top: 1rem;
}

/* ==========================================================================
   2. Sektion 5 – Ausgewählte Fallstudien
   ========================================================================== */

.ck-fallstudien {
  background-image: url("/assets/img/ck-pattern.png");
  background-repeat: no-repeat;
  background-size: auto 600px;
  background-position: right -10vw center;
}

/* Original: container my-20 lg:my-40 (Aussenabstand, nicht Innenabstand) */
/* Frueher trug dieser Kasten margin-block (5rem, ab 1024px 10rem). Weil die
   Sektion selbst keinen Innenabstand hat, fiel dieser Rand nach aussen durch
   und addierte sich auf die Abstaende der Nachbarabschnitte: dort standen
   240px, ueberall sonst 160px. Jetzt traegt die Sektion denselben
   Innenabstand wie alle anderen. */
.ck-fallstudien {
  padding-block: var(--ck-section-y);
}

/* --------------------------------------------------------------------------
   Kopfzeile: Headline/Unterzeile links, "Weitere Fallstudien" rechts
   (Original: flex flex-col md:flex-row justify-between items-start mb-8)
   -------------------------------------------------------------------------- */

.ck-fallstudien__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .ck-fallstudien__head {
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
  }
}

/* Textspalte der Kopfzeile: darf schrumpfen, damit der Link daneben passt */
.ck-fallstudien__intro {
  flex: 1 1 auto;
  min-width: 0;
}

/* Einzige Sektionsheadline, die im Original groesser gesetzt ist
   (text-3xl md:text-4xl lg:text-6xl); gemessene Versalhoehe 40px = 60px. */
.ck-fallstudien__titel {
  margin-bottom: 1rem;
  /* Das Original setzt hier als einzige Sektionsheadline gestuft statt
     fluid: text-3xl (30px) / md:text-4xl (36px) / lg:text-6xl (60px mit
     line-height 1). Gemessene Versalhoehe bei 1440px: 40px = 60px Grad. */
  font-size: 1.875rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .ck-fallstudien__titel {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .ck-fallstudien__titel {
    font-size: 3.75rem;
    line-height: 1;
  }
}

/* Original: flex flex-row justify-end items-center hover:text-ck-lightblue
   min-w-[250px] self-end lg:self-start */
.ck-fallstudien__more {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  gap: 0.5rem;
  min-width: min(250px, 100%);
  color: var(--ck-ink);
  transition: color var(--ck-transition);
}

@media (max-width: 1023.98px) {
  .ck-fallstudien__more { margin-block-start: 1rem; }
}

@media (min-width: 1024px) {
  .ck-fallstudien__more {
    align-self: flex-start;
  }
}

.ck-fallstudien__more:hover {
  color: var(--ck-blue-strong);
}

/* Original: border-b border-b-black lg:text-lg text-nowrap */
.ck-fallstudien__more-label {
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .ck-fallstudien__more-label {
    font-size: 1.125rem;
  }
}

/* Kreis mit Pfeil statt des alten PNG. Das Bild war ein angeschnittener
   Kreisbogen und sah auf der Seite nach einem Ladefehler aus. */
.ck-fallstudien__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background-color: var(--ck-blue);
  color: #fff;
  transition: background-color var(--ck-transition), transform var(--ck-transition);
}

.ck-fallstudien__more-icon svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.ck-fallstudien__more:hover .ck-fallstudien__more-icon,
.ck-fallstudien__more:focus-visible .ck-fallstudien__more-icon {
  background-color: var(--ck-blue-strong);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Kartengrid

   Frueher vier Spalten, unten buendig, das Foto als background-image und der
   Text auf nur 72 % deckendem Weiss. Die Personen schienen durch die Schrift
   und die Karten hatten keine sichtbare Kante — das las sich als
   Darstellungsfehler, nicht als Gestaltung.

   Jetzt drei Spalten mit echten Karten, die erste ueber zwei davon. Aufbau
   wie .ck-case auf der Fallstudien-Uebersicht, damit beide Seiten
   zusammenpassen.
   -------------------------------------------------------------------------- */

.ck-fallstudien__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .ck-fallstudien__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-fs--gross { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .ck-fallstudien__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ck-fs--gross {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Die Hoehe der beiden kleinen Karten bestimmt, wie hoch die grosse wird.
     Deshalb hier keine Mindesthoehe — sonst zoegen sie die grosse Karte
     auseinander. */
  .ck-fs:not(.ck-fs--gross) { min-block-size: 0; }
  .ck-fs:not(.ck-fs--gross) .ck-fs__media { min-block-size: 9rem; }
}

/* --------------------------------------------------------------------------
   Fallstudien-Karte
   -------------------------------------------------------------------------- */

.ck-fs {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 22rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  overflow: hidden;
  transition: border-color var(--ck-transition),
    box-shadow var(--ck-transition), transform var(--ck-transition);
}

@media (min-width: 1024px) {
  .ck-fs--gross { min-block-size: 30rem; }
  .ck-fs--gross .ck-fs__media { min-block-size: 16rem; }
}

.ck-fs:hover,
.ck-fs:focus-within {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

/* Das Foto nimmt den Platz, der neben dem Text uebrig bleibt. Dadurch stehen
   alle Karten einer Reihe gleich hoch, ohne dass ich Bildhoehen festnageln
   muss — der laengste Titel bestimmt die Reihe, die Fotos gleichen aus. */
.ck-fs__media {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 12rem;
  margin: 1.25rem 1.25rem 0;
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface-muted);
  overflow: hidden;
}

.ck-fs__foto {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.ck-fs:hover .ck-fs__foto { transform: scale(1.04); }

@media (max-width: 1023.98px) {
  .ck-fs__media { aspect-ratio: 16 / 9; }
}

/* Kundenlogo auf hellem Plaettchen in der Bildecke */
.ck-fs__logo {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.25rem;
  block-size: 4.25rem;
  padding: .5rem;
  border-radius: var(--ck-radius);
  background-color: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 12px rgba(16, 45, 70, .12);
}

.ck-fs__logo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.ck-fs__body {
  flex: 0 0 auto;
  padding: 1.25rem;
}

@media (min-width: 1024px) {
  .ck-fs--gross .ck-fs__body { padding: 1.75rem; }
}

.ck-fs__title {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.35;
  color: var(--ck-ink);
  text-wrap: balance;
  transition: color var(--ck-transition);
}

.ck-fs__title--sm {
  font-size: 1.0625rem;
  line-height: 1.4;
}

.ck-fs__text {
  margin-block: .75rem 0;
  color: var(--ck-ink-soft);
}

/* Button und Pfeil-Beschriftung sind reine Optik (aria-hidden). Der Link
   sitzt am Titel und deckt per ::after die ganze Karte ab — so hoert ein
   Screenreader je Karte genau einen Link statt zwei gleichlautende. */
.ck-fs__button {
  margin-block-start: 1.25rem;
  font-size: 1.0625rem;
  pointer-events: none;
}

.ck-fs:hover .ck-fs__button { background-position: 100% 0; }

.ck-fs__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block-start: .85rem;
  font-size: .9375rem;
  color: var(--ck-blue-strong);
}

.ck-fs__cta svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  transition: transform var(--ck-transition);
}

.ck-fs:hover .ck-fs__cta svg { transform: translateX(3px); }

.ck-fs__link {
  color: inherit;
  text-decoration: none;
}

.ck-fs__link::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
}

.ck-fs:hover .ck-fs__title,
.ck-fs:focus-within .ck-fs__title {
  color: var(--ck-blue-strong);
}

@media (prefers-reduced-motion: reduce) {
  .ck-fs,
  .ck-fs__foto,
  .ck-fs__cta svg,
  .ck-fallstudien__more-icon { transition: none; }

  .ck-fs:hover { transform: none; }
  .ck-fs:hover .ck-fs__foto { transform: none; }
}

/* ==========================================================================
   >>> 50-testimonials-prozess-usp.css
   Sektionen 6-8: Testimonial-Slider, Prozess, USP
   ========================================================================== */

/* ==========================================================================
   CodeKlar – 50-testimonials-prozess-usp.css
   Sektionen 6–8 der Startseite:
     A) Kundenstimmen  jetzt eigene Datei: 85-kundenstimmen.css
     B) Prozess       "So läuft die Zusammenarbeit mit CodeKlar"  (.ck-prozess)
     C) USP           "Darauf sind wir spezialisiert"             (.ck-usp)
   Baut auf 00-base.css auf. Keine Klasse aus 00-base.css wird hier neu
   definiert. Alle Klassen sind mit dem Sektionsnamen praefixiert.
   ========================================================================== */

/* ==========================================================================
   B) PROZESS
   Original: weisser Block, container py-20, Raster 1 / 2 / 4 Spalten (gap-4),
   Karten bg-white rounded-lg border-gray-200 p-8, blaue Icon-Kachel,
   fuenfte Karte ueber die volle Breite und ab lg zweispaltig.
   ========================================================================== */

.ck-prozess {
  background-color: var(--ck-white); /* Original: style="background-color:#FFFFFF" */
}

.ck-prozess__intro {
  max-width: 64rem; /* Original: max-w-5xl */
  margin-top: 1.75rem; /* Original: rund 48px unter der Ueberschrift */
}

/* --------------------------------------------------------------------------
   Ablauf in fuenf Schritten

   Vorher ein Raster aus vier Karten plus einer breiten fuenften darunter —
   der fuenfte Schritt sah dadurch aus wie ein Nachtrag, und die Reihenfolge
   war ueberhaupt nicht zu erkennen. Jetzt eine nummerierte Liste auf einem
   Zeitstrahl: schmal senkrecht, ab 1024px waagerecht. Die Nummern kommen
   aus einem CSS-Zaehler, damit Umsortieren im Markup genuegt.
   -------------------------------------------------------------------------- */

.ck-ablauf {
  display: grid;
  gap: 2.75rem 1.5rem;
  margin-block: 3.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.ck-ablauf__schritt {
  position: relative;
  counter-increment: schritt;
  padding-inline-start: 4.5rem;
}

.ck-ablauf__nummer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background-color: var(--ck-blue);
  color: var(--ck-ink);
  font-size: 1.0625rem;
  font-weight: var(--ck-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Der Markenverlauf liegt nicht in jedem Kreis, sondern verteilt sich ueber
   die Reihe — Schritt 01 im Blau, Schritt 05 im Tuerkis. Die Zahl steht
   dunkel darauf: 7,07:1 am blauen Ende, 15,7:1 am tuerkisen.
   Kommt ein sechster Schritt dazu, faellt er auf --ck-blue zurueck; dann
   hier die Zwischenwerte neu verteilen. */
.ck-ablauf__schritt:nth-child(1) .ck-ablauf__nummer { background-color: #009fe3; }
.ck-ablauf__schritt:nth-child(2) .ck-ablauf__nummer { background-color: #00b6df; }
.ck-ablauf__schritt:nth-child(3) .ck-ablauf__nummer { background-color: #00cdda; }
.ck-ablauf__schritt:nth-child(4) .ck-ablauf__nummer { background-color: #00e4d6; }
.ck-ablauf__schritt:nth-child(5) .ck-ablauf__nummer { background-color: #00fbd1; }

.ck-ablauf__nummer::before {
  content: counter(schritt, decimal-leading-zero);
}

/* Der Strich laeuft von der Unterkante einer Nummer bis zur naechsten. */
.ck-ablauf__schritt:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 3.35rem -2.75rem;
  inset-inline-start: 1.5rem;
  border-inline-start: 2px dashed var(--ck-border);
}

.ck-ablauf__titel {
  margin-block: .6rem 0;
  font-size: 1.1875rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.35;
  color: var(--ck-ink);
  text-wrap: balance;
}

.ck-ablauf__text {
  margin-block: .7rem 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ck-ink-soft);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .ck-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Zweispaltig ergaebe der Strich eine falsche Leserichtung. */
  .ck-ablauf__schritt:not(:last-child)::before { content: none; }
}

@media (min-width: 1024px) {
  .ck-ablauf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 1.5rem;
  }

  .ck-ablauf__schritt {
    padding-inline-start: 0;
    padding-block-start: 4.25rem;
  }

  /* Waagerecht: der Strich sitzt auf Hoehe der Nummernmitte und reicht
     ueber die Luecke hinweg bis zur naechsten Nummer. */
  .ck-ablauf__schritt:not(:last-child)::before {
    inset-block: 1.5rem auto;
    inset-inline: 3.35rem -1.5rem;
    border-inline-start: 0;
    border-block-start: 2px dashed var(--ck-border);
  }

  .ck-ablauf__titel { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   ABC: Analyse, Basics, CodeKlar
   Kurzform des Ablaufs ueber dem Zeitstrahl. Drei Karten mit grossem
   Verlaufsbuchstaben; dahinter ein Farbfleck in der Stufe der zugehoerigen
   Nummern (blau -> gruen). Unter 64rem liegt der Buchstabe links neben dem
   Text, ab 64rem stehen die Karten nebeneinander mit gestrichelter
   Verbindung wie im Zeitstrahl. Der Fleck ist ein Hintergrundverlauf und
   kein Pseudo-Element, damit die Karte keinen overflow:hidden braucht und
   die Verbindung ueber den Rand hinausreichen kann.
   -------------------------------------------------------------------------- */

.ck-abc {
  margin-block-start: 3rem;
}

.ck-abc__titel {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.3;
  text-align: center;
  color: var(--ck-ink);
}

.ck-abc__reihe {
  display: grid;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-abc__karte {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "buchstabe wort"
    "buchstabe text"
    "buchstabe schritt";
  align-content: start;
  column-gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  background-image: radial-gradient(circle at center, var(--ck-abc-fleck) 0 47%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 10rem 10rem;
  background-position: -3rem -3rem;
  transition: translate var(--ck-transition), box-shadow var(--ck-transition),
    border-color var(--ck-transition), background-size var(--ck-transition-slow),
    background-position var(--ck-transition-slow);
}

.ck-abc__karte:nth-child(1) { --ck-abc-fleck: rgba(0, 159, 227, 0.14); }
.ck-abc__karte:nth-child(2) { --ck-abc-fleck: rgba(0, 205, 218, 0.16); }
.ck-abc__karte:nth-child(3) { --ck-abc-fleck: rgba(0, 251, 209, 0.2); }

.ck-abc__karte:hover {
  translate: 0 -4px;
  border-color: transparent;
  box-shadow: var(--ck-shadow);
  background-size: 12.5rem 12.5rem;
  background-position: -4.25rem -4.25rem;
}

.ck-abc__buchstabe {
  grid-area: buchstabe;
  align-self: start;
  display: inline-block;
  font-size: 4.25rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1;
  background-image: var(--ck-gradient-text);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position var(--ck-transition-slow);
}

.ck-abc__karte:hover .ck-abc__buchstabe {
  background-position: 100% 50%;
}

.ck-abc__wort {
  grid-area: wort;
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  color: var(--ck-ink);
}

.ck-abc__text {
  grid-area: text;
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ck-ink-soft);
}

.ck-abc__schritt {
  grid-area: schritt;
  justify-self: start;
  margin-block-start: 0.85rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ck-muted);
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .ck-abc__reihe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .ck-abc__karte {
    display: block;
    padding: 1.75rem 1.75rem 1.875rem;
  }

  .ck-abc__wort {
    margin-block-start: 0.75rem;
  }

  .ck-abc__schritt {
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    margin: 0;
  }

  /* Verbindung zur naechsten Karte auf Hoehe der Buchstabenmitte. */
  .ck-abc__karte:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 3.9rem;
    inset-inline-end: -1.5rem;
    inline-size: 1.5rem;
    border-block-start: 2px dashed var(--ck-border);
  }
}

/* ==========================================================================
   C) USP
   Original: py-20, container, Rahmenbox border-gray-200 rounded-2xl
   (p-6 lg:p-14), links Text, rechts sechs graue Kacheln (gap-2)
   mit Umriss-Icon. Kein Portrait, kein Badge, kein Button.
   ========================================================================== */

.ck-usp {
  padding-block: var(--ck-section-y-band);
  background-color: var(--ck-surface-muted);
}

.ck-usp__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .ck-usp__box {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}

/* Ohne Ausgleich brach "Wir machen nicht / alles" die Zeile nach dem
   zweitletzten Wort um. */
#ck-usp-title,
.ck-usp__claim {
  text-wrap: balance;
}

.ck-usp__intro {
  max-width: 42rem; /* Original: max-w-2xl */
}

/* Original: Innenraum 1102px, Textspalte rund 425px, Kachelspalte 645px –
   also etwa 40/60 statt der haelftigen Teilung des Nachbaus. */
@media (min-width: 1024px) {
  .ck-usp__intro {
    flex: 0 1 26.5rem;
  }
}

/* Verlaufszeile unter der Headline (Original: h3.h2.gradient-text.mb-4) */
/* Der Claim ist Fliesstext unter 24px und faellt damit nicht unter die
   3:1-Regel fuer grosse Schrift – er behaelt den dunklen Verlauf
   (4,26:1 bis 4,98:1), waehrend die 48px-Headlines den helleren nutzen. */
.ck-usp__claim {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--ck-gap);
  background-image: var(--ck-gradient-text-deep);
}

.ck-usp__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-gap-sm); /* Original: gap-2 */
}

@media (min-width: 768px) {
  .ck-usp__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-usp__list {
    flex: 1 1 0;
    align-content: start;
  }
}

/* Die Kacheln fuehren jetzt auf die jeweilige Leistungsseite. Weisser
   Grund mit feiner Kante statt grauer Flaeche — derselbe Kartenstil wie
   bei den Fallstudien, damit die Startseite eine Handschrift hat. */
.ck-usp__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ck-gap);
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  text-decoration: none;
  transition: border-color var(--ck-transition),
    box-shadow var(--ck-transition), transform var(--ck-transition);
}

.ck-usp__item:hover,
.ck-usp__item:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-usp__pfeil {
  flex: 0 0 auto;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-inline-start: auto;
  color: var(--ck-blue);
  opacity: .45;
  transform: translateX(0);
  transition: opacity var(--ck-transition), transform var(--ck-transition);
}

.ck-usp__item:hover .ck-usp__pfeil,
.ck-usp__item:focus-visible .ck-usp__pfeil {
  opacity: 1;
  transform: translateX(3px);
}

.ck-usp__list li {
  display: flex;
  margin: 0;
}

.ck-usp__item { flex: 1 1 auto; }

/* Original: rund 18px in Normalstaerke (Strichbreiten 1-2px) bei 28px
   Zeilenabstand; der Nachbau war mit 16px/600 kleiner und schwerer. */
.ck-usp__item-title {
  font-size: 1.125rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.55;
  color: var(--ck-ink);
  text-wrap: balance;
}

/* ==========================================================================
   >>> 80-blog-cta-footer.css
   Sektionen 9-11: Blog-Slider, Abschluss-CTA, Footer
   ========================================================================== */

/* ==========================================================================
   CodeKlar – 80-blog-cta-footer.css
   Styles fuer die Sektionen 9–11 der Startseite:
     A) .ck-blog   – News-/Blog-Slider "Immer auf dem neuesten Stand"
     B) .ck-cta    – Abschluss-CTA "Sind Sie bereit fuer den Sprung in die Zukunft?"
     C) .ck-footer – schwarzer Footer mit footer-grafik.png
   Baut auf 00-base.css auf. Keine Klasse aus 00-base.css wird neu definiert.
   ========================================================================== */

/* ==========================================================================
   A) BLOG-SLIDER
   Original: section.ns-block.py-20 > .container.pb-20 > .swiper.swiper-news.py-16
   Ersatz fuer Swiper: CSS-Scroll-Snapping + Pfeiltasten (Vanilla-JS).
   ========================================================================== */

.ck-blog {
  --ck-blog-gap: 1.5rem;
  background-color: var(--ck-surface);
}

/* Original: .container pb-20 (zusaetzlicher Abstand unter der Kopfzeile) */
.ck-blog__container {
  /* Der Abschnitt traegt seinen Abstand ueber .ck-section. Hier lag ein
     zweiter obendrauf, dadurch stand die Sektion oben und unten
     unterschiedlich. */
}

/* Die Kopfzeile stand hier per order UNTER der Schiene — so machte es das
   alte Original. Der Besucher sah dadurch erst fuenf unbeschriftete Kacheln
   und erfuhr danach, dass es Blogbeitraege sind. Jetzt gilt die
   Markup-Reihenfolge: Ueberschrift, dann Beitraege. */
/* Drei Beitraege stehen nebeneinander. Frueher lagen fuenf in einer
   waagerecht scrollbaren Schiene mit Pfeiltasten — beides entfaellt, samt
   dem JavaScript, das die Pfeile bedient hat. */
.ck-blog__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-blog-gap);
}

@media (min-width: 640px) {
  .ck-blog__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* Drei gleich breite Spalten: Bild (16:9), Titelgroesse und Innenabstand
     sind bei allen drei Karten identisch. */
  .ck-blog__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Aussehen, Hover und der flaechendeckende Link kommen aus .ck-ovcard
   (styles/20-uebersicht.css) — dieselbe Karte wie auf der Blog-Uebersicht.
   In der Schiene bestimmte die Karte ihre Breite selbst, im Raster gibt die
   Spalte sie vor. */
.ck-blog__card {
  width: auto;
  height: auto;
}

.ck-blog__header {
  margin-bottom: 2.5rem;
}

.ck-blog__headline {
  margin-bottom: 0.5rem;
}

.ck-blog__subline {
  max-width: 64rem;
}

/* Weg zur Uebersicht: steht unter den Beitraegen statt klein oben rechts. */
.ck-blog__mehr {
  margin-block-start: 2.75rem;
  margin-block-end: 0;
  text-align: center;
}

/* ==========================================================================
   B) ABSCHLUSS-CTA
   Original: relative, bg-cover bg-center, lg:h-[70vh], min-h-[300px],
             Overlay bg-black/55, Karte mb-20 lg:-mb-[12vh].
   ========================================================================== */

.ck-cta {
  position: relative;
  min-height: 300px;
  background-color: var(--ck-ink);
  background-image: url("/assets/img/Tunnelplatzhalter-1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ck-cta__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--ck-overlay);
}

.ck-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-bottom: 0;
}

/* Original: closer-headline h1 text-white max-w-3xl mt-20.
   Der Abstand wurde zuvor doppelt gezahlt: 80px padding-top an
   .ck-cta__inner PLUS 80px margin-top hier. Im Original beginnt die
   Ueberschrift rund 91px unter der Sektionsoberkante – das leistet das
   padding-top allein; die gewonnene Luft steht ueber der Karte. */
.ck-cta__headline {
  /* Original: "Sind Sie bereit fuer den Sprung in" / "die Zukunft?".
     Nachgemessen ist die erste Zeile bei 48rem 713px breit und nimmt "die"
     noch mit; 42rem (672px) erzwingt den Umbruch des Originals. */
  max-width: 42rem;
  margin-top: 0;
  margin-inline: auto;
  color: var(--ck-white);
}

/* Auf dem dunklen Tunnelbild darf "Zukunft" den vollen Markenverlauf tragen:
   #009fe3 auf der Overlay-Flaeche = 4,76:1, #00fbd1 = 10,6:1 – beide ueber
   4,5:1. Der fuer helle Hintergruende abgedunkelte Verlauf kaeme hier auf
   2,84:1 und faellt sogar durch 3:1. Originaltreue und Kontrast zeigen an
   dieser Stelle in dieselbe Richtung. */
.ck-cta__headline .ck-gradient-text {
  background-image: var(--ck-gradient);
  color: var(--ck-blue);
}

/* Original: closer-card – weiss, rounded-2xl, shadow-2xl, max-w-[750px],
   ragt ab 1024px um 12vh in den Footer hinein (z-index ueber dem Footer). */
.ck-cta__card {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 750px;
  margin-top: 3rem;
  margin-bottom: 5rem;
  padding: 1.5rem;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-lg);
}

@media (min-width: 768px) {
  .ck-cta__card {
    flex-direction: row;
    gap: 4rem;
  }
}

@media (min-width: 1024px) {
  .ck-cta {
    min-height: 70vh;
  }

  .ck-cta__inner {
    min-height: 70vh;
  }

  .ck-cta__card {
    margin-bottom: -12vh;
    padding: 3rem;
  }
}

.ck-cta__portrait {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ck-radius-lg);
}

.ck-cta__portrait img {
  width: 100%;
  max-width: 350px;
  max-height: 30vh;
  object-fit: cover;
  object-position: top;
}

/* Original: absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-tl
   from-ck-lightblue via-transparent to-transparent.
   Der deckende Farbstopp liegt unten rechts, also genau unter der weissen
   Bildunterschrift. Mit #009fe3 waeren das nur 2,97:1; deshalb hier
   --ck-blue-strong (4,98:1). Die transparenten Stops nutzen denselben Ton
   als Kanal-Token, damit der Verlauf nicht auseinanderfaellt, wenn die
   Markenfarbe einmal geaendert wird. */
.ck-cta__portrait-glow {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 66.6667%;
  background-image: linear-gradient(
    to top left,
    var(--ck-blue-strong) 0%,
    rgba(var(--ck-blue-strong-rgb), 0) 50%,
    rgba(var(--ck-blue-strong-rgb), 0) 100%
  );
}

.ck-cta__portrait-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  text-align: right;
  color: var(--ck-white);
}

.ck-cta__portrait-name,
.ck-cta__portrait-role {
  display: block;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ck-cta__portrait-name {
  font-size: 1.5rem;
}

.ck-cta__portrait-role {
  font-size: 1.25rem;
}

.ck-cta__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--ck-gap);
  text-align: center;
}

@media (min-width: 768px) {
  .ck-cta__body {
    align-items: flex-start;
    text-align: start;
  }
}

/* Original: p.text-3xl.font-medium.leading-snug.mb-6 */
/* Original: gleiche Groesse (30px) und Zeilenhoehe (40px), aber Regular in
   reinem Schwarz – deutlich leichter als der halbfette Nachbau. */
.ck-cta__quote {
  margin-bottom: 1.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.375;
  color: var(--ck-ink);
}

/* ==========================================================================
   C) FOOTER
   Original: bg-black text-white pt-12 pb-12 lg:pt-56 lg:pb-32
             + footer-grafik.png (center / cover)
   ========================================================================== */

.ck-footer {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-image: url("/assets/img/footer-grafik.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 1024px) {
  .ck-footer {
    padding-top: 14rem;
    padding-bottom: 8rem;
  }
}

.ck-footer__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Original: flex flex-col lg:flex-row gap-6 gap-y-12 justify-between lg:items-center */
.ck-footer__top {
  display: flex;
  flex-direction: column;
  gap: 3rem 1.5rem;
}

@media (min-width: 1024px) {
  .ck-footer__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

/* Original: <div class="w-40"> um das weisse Logo */
.ck-footer__brand {
  width: 10rem;
  max-width: 100%;
}

.ck-footer__logo {
  width: 100%;
}

/* Original: ul#menu-footer-banner – flex-col lg:flex-row gap-6 lg:gap-12 text-lg */
.ck-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .ck-footer__menu {
    flex-direction: row;
    gap: 3rem;
  }
}

.ck-footer__link {
  color: var(--ck-white);
  text-decoration: none;
  transition: color var(--ck-transition);
}

.ck-footer__link:hover,
.ck-footer__link:focus-visible {
  color: var(--ck-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Original: runde Buttons w-12 h-12 p-3 bg-ck-lightblue text-white */
.ck-footer__social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ck-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  border-radius: var(--ck-radius-pill);
  /* Original: leuchtendes #009fe3. --ck-blue-ui (#0090cf) sieht auf Schwarz
     praktisch gleich aus und traegt das weisse Icon mit 3,57:1. */
  background-color: var(--ck-blue-ui);
  color: var(--ck-white);
  transition: background-color var(--ck-transition),
    transform var(--ck-transition);
}

.ck-footer__social-btn:hover,
.ck-footer__social-btn:focus-visible {
  background-color: var(--ck-blue-strong);
  color: var(--ck-white);
  transform: translateY(-1px);
}

.ck-footer__icon {
  width: 20px;
  height: 20px;
}

/* fill:none ist wichtig – 00-base.css setzt svg { fill: currentColor } */
.ck-footer__icon--outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Original: <hr class="mt-6 bg-white"> */
.ck-footer__rule {
  margin-top: 1.5rem;
  background-color: var(--ck-white);
}

.ck-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ck-footer__bottom {
    flex-direction: row;
  }
}

/* Original: ul#menu-footer-legal-menue – flex-col md:flex-row gap-4 lg:gap-12 text-sm */
.ck-footer__legal-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ck-footer__legal-menu {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .ck-footer__legal-menu {
    gap: 3rem;
  }
}

/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ck-footer__social-btn:hover,
  .ck-footer__social-btn:focus-visible {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Blog-Abschnitt der Startseite: Ergaenzungen
   -------------------------------------------------------------------------- */

/* Lesezeit in der Meta-Zeile, mit demselben Trennpunkt wie zwischen
   Kategorie und Datum. */
.ck-ovcard__date + .ck-ovcard__dauer::before,
.ck-ovcard__cat + .ck-ovcard__dauer::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
  opacity: 0.55;
}


@media (prefers-reduced-motion: reduce) {
}


/* Die Meta-Angaben brachen mitten im Wort um ("8" blieb oben, "Min.
   Lesezeit" rutschte in die naechste Zeile). Sie duerfen zwischen den
   Angaben umbrechen, nicht innerhalb einer. */
.ck-ovcard__cat,
.ck-ovcard__date,
.ck-ovcard__dauer {
  white-space: nowrap;
}

/* .ck-ovcard setzt height: 100% und steht in der zusammengebauten Datei
   hinter .ck-blog__card. Im Raster muss die Karte ihre Zeile fuellen, damit
   alle drei gleich hoch enden — der Kontextselektor sticht die spaetere
   Regel. */
.ck-blog__raster .ck-blog__card {
  height: 100%;
}


/* --------------------------------------------------------------------------
   Zeitstrahl mit Jahreszahlen statt laufender Nummer
   Gleiche Darstellung wie der Ablauf auf der Startseite, nur traegt die
   Marke hier ein Jahr. Sie ist damit breiter als ein Kreis und wird zur
   Pille; der Zaehler entfaellt.
   -------------------------------------------------------------------------- */

.ck-ablauf--marken .ck-ablauf__nummer {
  inline-size: auto;
  min-inline-size: 3.25rem;
  block-size: 2rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
}

.ck-ablauf--marken .ck-ablauf__nummer::before {
  content: none;
}

.ck-ablauf--marken .ck-ablauf__schritt {
  padding-inline-start: 0;
  padding-block-start: 3rem;
}

.ck-ablauf--marken .ck-ablauf__schritt:not(:last-child)::before {
  inset-block: 1rem auto;
  inset-inline: 4rem -1.5rem;
  border-inline-start: 0;
  border-block-start: 2px dashed var(--ck-border);
}

@media (max-width: 1023.98px) {
  .ck-ablauf--marken .ck-ablauf__schritt:not(:last-child)::before { content: none; }
}

@media (min-width: 1024px) {
  .ck-ablauf--marken { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .ck-ablauf--marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ck-block__zeitstrahl {
  margin-block-start: 2.5rem;
}

/* --------------------------------------------------------------------------
   Sichtbare Staffel der Ueberschriften: h1 > h2 > h3 > h4
   Die Groessenklassen (.ck-h1 usw.) bleiben, aber je Element gilt eine
   eigene Stufe: Seitentitel (h1) deutlich groesser als Abschnittstitel
   (h2 mit .ck-h1), diese groesser als Kartentitel (h3). Der Hero der
   Startseite (.ck-display) ist ohnehin die groesste Stufe. Blogtitel sind
   lang und bleiben eine Stufe darunter, aber ueber den h2 im Text.
   Bei 1440px: h1 56px, h2 38px, h3 30px, h4 20px; am Handy 36/26/23/20.
   -------------------------------------------------------------------------- */

main h1:not(.ck-display) {
  font-size: clamp(2.25rem, 1.35rem + 3.2vw, 3.5rem);
  line-height: 1.15;
}

main h1.ck-beitrag__titel {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
}

main h2.ck-h1,
main h2.ck-display {
  font-size: clamp(1.625rem, 1rem + 2vw, 2.375rem);
  line-height: 1.25;
}

main h3.ck-h1 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
}

/* ===================== 10-beitrag.css ===================== */
/* ==========================================================================
   CodeKlar – 10-beitrag.css
   Das Leseformat fuer Blogbeitraege (89) und Lexikoneintraege (7).
   Beide Vorlagen teilen sich denselben Lesekoerper (.ck-beitrag/.ck-lesetext);
   unterschiedlich ist nur der Kopf und der Abschluss. Damit sehen alle
   Blogbeitraege untereinander gleich aus, alle Lexikoneintraege untereinander
   gleich – und beide erkennbar als dieselbe Familie.

   Setzt 00-base.css voraus. Keine Klasse aus 00-base.css wird neu definiert;
   .ck-prose und .ck-h1 werden nur ergaenzt (diese Datei wird nach 00-base.css
   eingefuegt, gleiche Spezifitaet gewinnt darum hier).

   Inhalt
     1  Masse und Lesefortschritt
     2  Beitragskopf (Pille, Titel, Metazeile, Beitragsbild)
     3  Lesetypografie (.ck-lesetext)
     4  Bausteine im Fliesstext: Kasten, Inhaltsverzeichnis, Tabelle, Bild
     5  Abschluss-CTA
     6  Aehnliche Beitraege (Blog) und weitere Begriffe (Lexikon)
     7  Bewegung und Druck
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Masse und Lesefortschritt
   -------------------------------------------------------------------------- */

.ck-beitrag {
  /* ~68–72 Zeichen bei 18px Titillium Web. */
  --ck-lesebreite: 40rem;
  /* Wie weit Tabellen und Bilder links und rechts aus der Textspalte treten
     duerfen. Erst ab 62rem Fensterbreite groesser als 0: darunter ist im
     .ck-container kein Platz, und body { overflow-x: hidden } wuerde den
     Ueberstand kommentarlos abschneiden. */
  --ck-ausbruch: 0rem;
  /* Ruhiger Farbanlauf wie auf der Startseite: oben ein Hauch Markenblau,
     der noch vor dem Fliesstext in Weiss ausgelaufen ist. */
  background-image: linear-gradient(180deg, var(--ck-blue-soft) 0, var(--ck-white) 26rem);
  background-repeat: no-repeat;
  /* Platz fuer den fixierten Header. */
  padding-top: var(--ck-header-h);
}

@media (min-width: 62rem) {
  .ck-beitrag {
    --ck-ausbruch: 6rem;
  }
}

/* Lesefortschritt. Reine CSS-Loesung ueber eine Scroll-Zeitleiste: kein
   Skript, kein Platz im Fluss, also auch kein Layout-Sprung. Ohne
   Unterstuetzung bleibt der Balken unsichtbar. */
.ck-fortschritt {
  display: none;
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}

.ck-fortschritt__balken {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background-image: var(--ck-gradient);
}

@supports (animation-timeline: scroll()) {
  .ck-fortschritt {
    display: block;
  }

  .ck-fortschritt__balken {
    animation: ck-lesefortschritt linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes ck-lesefortschritt {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}


/* --------------------------------------------------------------------------
   2. Beitragskopf
   -------------------------------------------------------------------------- */

/* Das Webinar-Banner bringt seinen eigenen Aussenabstand mit (.ckwb). */
.ck-beitrag__kopf {
  padding-block: clamp(2.5rem, 1.9rem + 2.4vw, 4rem) 0;
}

/* Steht das Banner davor, hat es den Abstand nach unten schon gesetzt. */
.ck-beitrag__banner + .ck-beitrag__kopf {
  padding-top: 0;
}

.ck-beitrag__kopf-inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* Kategorie bzw. „Lexikon“ als Pille. Bewusst kein Link: Kategorieseiten gibt
   es unter codeklar.com nicht, ein Link ginge ins Leere. */
.ck-beitrag__pill {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.3rem 0.95rem;
  border: 1px solid var(--ck-blue-ui);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  font-size: 0.875rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ck-blue-strong);
}

.ck-beitrag__titel {
  /* Dieselbe Formel wie .ck-h1 — Blog, Lexikon und Einzelseiten teilen sich
     eine Ueberschriftengroesse. */
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ck-ink);
  text-wrap: balance;
}

/* Metazeile: Datum, Autor, Lesezeit. Jede Angabe ist ein eigener Listenpunkt,
   der Trennpunkt gehoert zum jeweils FOLGENDEN Punkt. Fehlt eine Angabe,
   bleibt darum nie ein Trenner ohne Nachbarn stehen. */
.ck-beitrag__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.85rem;
  margin-top: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ck-muted);
}

.ck-beitrag__meta-item {
  display: inline-flex;
  align-items: center;
}

.ck-beitrag__meta-item + .ck-beitrag__meta-item::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 0.85rem;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.55;
}

/* Kurze Einordnung im Lexikonkopf (das description-Feld des Eintrags). */
.ck-beitrag__einordnung {
  max-width: 38rem;
  margin: 1.1rem auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ck-muted);
}

/* Beitragsbild. Feste 16:9-Buehne: 84 der 89 Beitragsbilder liegen exakt in
   1600x900 vor, damit steht die Hoehe vor dem Laden fest und nichts springt
   nach. */
.ck-beitrag__bild {
  max-width: 52rem;
  margin: clamp(1.75rem, 1.2rem + 2.2vw, 3rem) auto 0;
}

.ck-beitrag__bild .ck-media {
  border-radius: var(--ck-radius-lg);
}


/* --------------------------------------------------------------------------
   3. Lesetypografie
   -------------------------------------------------------------------------- */

.ck-beitrag__text {
  margin-top: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
}

.ck-lesetext {
  max-width: var(--ck-lesebreite);
  margin-inline: auto;
  /* Wie .ck-prose--lg auf den Einzelseiten. */
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.75;
  color: var(--ck-ink);
}

/* Grundrhythmus. Ueberschriften setzen ihren Abstand gleich darunter selbst. */
.ck-lesetext > * + * {
  margin-top: 1.2em;
}

/* Zwischenueberschrift: viel Luft darueber, wenig darunter – so gehoert sie
   sichtbar zum folgenden Absatz und nicht zum vorangehenden. */
.ck-lesetext > h2 {
  margin-top: 3.5rem;
  margin-bottom: 0.9rem;
  /* Wie .ck-h3. */
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ck-ink);
  text-wrap: balance;
}

/* Kurzer Akzentstrich in der Markenfarbe – die einzige Zierde im Fliesstext,
   dafuer macht sie lange Beitraege auf einen Blick gliederbar. */
.ck-lesetext > h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-bottom: 1.05rem;
  border-radius: 1px;
  background-color: var(--ck-blue);
}

.ck-lesetext > h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  /* Wie .ck-h4 und die h3 im Fliesstext der Einzelseiten. */
  font-size: 1.25rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.4;
  color: var(--ck-ink);
}

.ck-lesetext > h4 {
  margin-top: 1.9rem;
  margin-bottom: 0.4rem;
  font-size: 1.125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.45;
  color: var(--ck-ink);
}

/* Aus dem alten WordPress stammen vereinzelt leere Ueberschriften. Sie sollen
   weder Luft noch einen Akzentstrich erzeugen. */
.ck-lesetext > h2:empty,
.ck-lesetext > h3:empty,
.ck-lesetext > h4:empty {
  display: none;
}

.ck-lesetext > *:first-child {
  margin-top: 0;
}

/* 700 wirkt im Fliesstext klotzig; die Beitraege setzen sehr viele
   Hervorhebungen. 600 hebt genauso zuverlaessig hervor und bleibt ruhig. */
.ck-lesetext strong,
.ck-lesetext b {
  font-weight: var(--ck-weight-medium);
}

.ck-lesetext em,
.ck-lesetext i {
  font-style: italic;
}

/* Links: ruhige Unterstreichung, die beim Ueberfahren voll durchzeichnet. */
.ck-lesetext a {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--ck-blue-strong-rgb), 0.6);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--ck-transition), color var(--ck-transition);
}

.ck-lesetext a:hover,
.ck-lesetext a:focus-visible {
  color: var(--ck-blue-deep);
  text-decoration-color: currentColor;
}

/* Listen: Aufzaehlungszeichen und Zahlen in der Markenfarbe. */
.ck-lesetext ul,
.ck-lesetext ol {
  padding-left: 1.4rem;
}

.ck-lesetext li::marker {
  color: var(--ck-blue-strong);
}

.ck-lesetext li + li {
  margin-top: 0.4em;
}

.ck-lesetext li > ul,
.ck-lesetext li > ol {
  margin-top: 0.4em;
}

/* Zitate und Praxis-Tipps: ruhige Flaeche mit Markenkante, Text bleibt
   schwarz – die Kaesten sollen auffallen, nicht zuruecktreten. */
.ck-lesetext blockquote {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--ck-blue);
  border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
  background-color: var(--ck-surface-sunken);
}

.ck-lesetext blockquote > * + * {
  margin-top: 0.8em;
}

.ck-lesetext code {
  padding: 0.12em 0.4em;
  border-radius: 0.3rem;
  background-color: var(--ck-surface-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.ck-lesetext pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--ck-radius-sm);
  background-color: var(--ck-surface-muted);
}

.ck-lesetext pre code {
  padding: 0;
  background: none;
}


/* --------------------------------------------------------------------------
   4. Bausteine im Fliesstext
   -------------------------------------------------------------------------- */

/* „Das Wichtigste in Kuerze“ – aus <!--KEYPOINTS--> in build.js. */
.ck-lesetext > .ck-keypoints {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.6rem 1.6rem 1.7rem;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-blue-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.ck-keypoints > h2 {
  margin: 0 0 0.9rem;
  font-size: 1.25rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.35;
  color: var(--ck-ink);
}

.ck-keypoints ul,
.ck-keypoints ol {
  padding-left: 1.25rem;
}

.ck-keypoints li + li {
  margin-top: 0.55em;
}

.ck-keypoints > * + * {
  margin-top: 0.8em;
}

/* Auf der blauen Flaeche erreicht --ck-blue-strong nur noch 4,50:1 – genau auf
   der Grenze. Links im Kasten nehmen darum die dunklere Stufe (6,3:1). */
.ck-keypoints a {
  color: var(--ck-blue-deep);
}

@media (min-width: 640px) {
  .ck-lesetext > .ck-keypoints {
    padding: 2rem 2.1rem 2.1rem;
  }
}

/* Inhaltsverzeichnis – die Sprungmarken stehen in vielen Beitraegen schon im
   Text; build.js haengt sie an <nav class="ck-toc"> und setzt die passenden
   id-Attribute an die Ueberschriften. */
.ck-lesetext > .ck-toc {
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  font-size: 1rem;
  line-height: 1.6;
}

.ck-toc ol {
  padding-left: 1.45rem;
}

.ck-toc li + li {
  margin-top: 0.45em;
}

.ck-toc li > ol {
  margin-top: 0.45em;
}

.ck-toc a {
  color: var(--ck-ink);
  text-decoration: none;
}

.ck-toc a:hover,
.ck-toc a:focus-visible {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Tabellen. Der scrollbare, per Tastatur erreichbare Rahmen kommt aus
   build.js, weil im content-Feld kein eigenes Markup erlaubt ist. Ohne ihn
   wuerde body { overflow-x: hidden } breite Tabellen auf dem Telefon
   unsichtbar abschneiden.
   Alle 82 uebernommenen Tabellen stehen in einem <figure>; die Aussenabstaende
   und der Ausbruch aus der Textspalte kommen darum von der figure-Regel
   weiter unten. Steht eine Tabelle einmal frei, setzt sie beides selbst. */
.ck-lesetext .ck-tabelle {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

.ck-lesetext > .ck-tabelle {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  margin-inline: calc(-1 * var(--ck-ausbruch));
}

.ck-tabelle:focus-visible {
  outline-offset: -1px;
}

.ck-lesetext table {
  width: 100%;
  /* Erzwingt das Scrollen, statt die Spalten unlesbar zusammenzudruecken. */
  min-width: 28rem;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.55;
}

.ck-lesetext th,
.ck-lesetext td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ck-border);
  text-align: left;
  vertical-align: top;
}

/* Die Kopfzeilen der uebernommenen Tabellen stehen teils als <th>, teils als
   <td> im <thead>. Beide sollen gleich aussehen. */
.ck-lesetext th,
.ck-lesetext thead td {
  background-color: var(--ck-surface-muted);
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-lesetext tbody tr:last-child td,
.ck-lesetext tbody tr:last-child th {
  border-bottom: 0;
}

/* Bilder im Fliesstext, mit und ohne Bildunterschrift. */
.ck-lesetext > figure,
.ck-lesetext > p > img,
.ck-lesetext > img {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.ck-lesetext > figure,
.ck-lesetext > img {
  margin-inline: calc(-1 * var(--ck-ausbruch));
}

.ck-lesetext figure img,
.ck-lesetext p > img,
.ck-lesetext > img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
}

.ck-lesetext figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ck-muted);
}


/* --------------------------------------------------------------------------
   5. Abschluss-CTA
   Dezent: eine Haarlinie, eine Zeile, ein schwarzer Button.
   -------------------------------------------------------------------------- */

.ck-beitrag__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  max-width: var(--ck-lesebreite);
  margin: clamp(2.75rem, 2rem + 3vw, 4rem) auto 0;
  padding-top: 1.75rem;
  padding-bottom: clamp(3rem, 2.2rem + 3vw, 4.5rem);
  border-top: 1px solid var(--ck-border);
}

.ck-beitrag__cta-text {
  flex: 1 1 14rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ck-ink);
}


/* --------------------------------------------------------------------------
   6. Abschluss-Sektionen
   -------------------------------------------------------------------------- */

/* --- Aehnliche Beitraege (Blog) --- */

.ck-weiter {
  background-color: var(--ck-surface-sunken);
  border-top: 1px solid var(--ck-border);
}

.ck-weiter__titel {
  max-width: none;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
}

.ck-weiter__item {
  display: flex;
}

.ck-weiter__karte {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-weiter__karte:hover,
.ck-weiter__karte:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-weiter__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.35rem 1.4rem;
}

.ck-weiter__headline {
  font-size: 1.125rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.4;
  color: var(--ck-ink);
}

.ck-weiter__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ck-blue-strong);
}

.ck-weiter__mehr::after {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  /* Schlanker Pfeil, damit kein Zeichen vorgelesen wird. */
  background-color: currentColor;
  -webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--ck-transition);
}

.ck-weiter__karte:hover .ck-weiter__mehr::after {
  transform: translateX(2px);
}

/* --- Weitere Begriffe (Lexikon) --- */

.ck-begriffe {
  background-color: var(--ck-surface-sunken);
  border-top: 1px solid var(--ck-border);
}

/* Sicherheitsnetz: liefert der Generator keine weiteren Begriffe, bleibt ein
   wirklich leeres <ul> stehen und die ganze Sektion verschwindet. */
.ck-begriffe:has(.ck-begriffe__liste:empty) {
  display: none;
}

.ck-begriffe__titel {
  max-width: none;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
}

.ck-begriffe__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Gleiche Pille wie .ck-blog__link im Designsystem: weiss gefuellt, Rand in
   --ck-blue-ui (3,41:1 auf der grauen Flaeche), Beschriftung in
   --ck-blue-strong (4,98:1). --ck-border-strong waere als Rand mit 1,3:1
   praktisch unsichtbar gewesen. */
.ck-begriffe__link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--ck-blue-ui);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ck-blue-strong);
  transition: border-color var(--ck-transition), color var(--ck-transition),
    background-color var(--ck-transition);
}

.ck-begriffe__link:hover,
.ck-begriffe__link:focus-visible {
  border-color: var(--ck-blue-strong);
  background-color: var(--ck-blue-strong);
  color: var(--ck-white);
}


/* --------------------------------------------------------------------------
   7. Bewegung und Druck
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Der Fortschrittsbalken haengt an einer Scroll-Zeitleiste. Statt ihn
     stillzustellen, bleibt er ganz weg. */
  .ck-fortschritt {
    display: none;
  }

  .ck-weiter__karte:hover,
  .ck-weiter__karte:focus-visible {
    transform: none;
  }

  .ck-weiter__karte:hover .ck-weiter__mehr::after {
    transform: none;
  }
}

@media print {
  .ck-fortschritt,
  .ck-beitrag__banner,
  .ck-beitrag__cta,
  .ck-weiter,
  .ck-begriffe {
    display: none;
  }

  .ck-beitrag {
    padding-top: 0;
    background: none;
  }

  .ck-lesetext {
    max-width: none;
    font-size: 11pt;
    line-height: 1.5;
  }

  .ck-lesetext > .ck-tabelle,
  .ck-lesetext > figure,
  .ck-lesetext > img {
    margin-inline: 0;
  }

  .ck-lesetext > h2,
  .ck-lesetext > h3,
  .ck-lesetext > h4 {
    break-after: avoid;
  }

  .ck-lesetext > .ck-keypoints,
  .ck-lesetext > .ck-toc,
  .ck-lesetext blockquote,
  .ck-lesetext .ck-tabelle,
  .ck-lesetext > figure {
    break-inside: avoid;
  }
}



/* ==========================================================================
   Zweispaltiger Beitrag (Blog) – Aufbau wie codeklar.com

   Links der Beitrag mit linksbuendigem Kopf, rechts eine Seitenleiste mit
   Beitragsbild und Teilen-Box, die beim Lesen mitlaeuft. Zwischen den
   Spalten eine feine Verlaufslinie. Unter 64rem steht die Seitenleiste
   zuerst, damit das Bild wie im Original oben bleibt.
   ========================================================================== */

.ck-beitrag--seitig .ck-beitrag__raster {
  display: grid;
  /* minmax(0, …) auch einspaltig: ohne die 0 weiten Bilder und lange Woerter
     die einzige Spalte ueber den Bildschirm hinaus auf (Blattelemente mit
     max-width:100% zaehlen in einer auto-Spalte mit ihrer vollen Breite);
     auf dem Handy war der ganze Beitrag dadurch rechts abgeschnitten. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block-start: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.ck-beitrag--seitig .ck-beitrag__haupt,
.ck-beitrag--seitig .ck-beitrag__seite {
  min-inline-size: 0;
}

.ck-beitrag--seitig .ck-beitrag__seite {
  order: -1;
}

@media (min-width: 64rem) {
  .ck-beitrag--seitig .ck-beitrag__raster {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }

  .ck-beitrag--seitig .ck-beitrag__seite {
    order: 0;
  }

  /* Klebt am Rasterfeld, nicht an der inneren Huelle: das Feld ist so hoch
     wie die ganze Zeile, die Huelle nur so hoch wie ihr Inhalt – dort
     haette die Leiste keinen Weg zum Mitlaufen. */
  .ck-beitrag--seitig .ck-beitrag__seite {
    position: sticky;
    top: calc(var(--ck-header-h) + 1.5rem);
    align-self: start;
  }

  /* Die Verlaufslinie zwischen den Spalten sitzt in der Luecke. */
  .ck-beitrag--seitig .ck-beitrag__haupt {
    position: relative;
  }

  .ck-beitrag--seitig .ck-beitrag__haupt::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: -1.75rem;
    inline-size: 2px;
    border-radius: 1px;
    background-image: linear-gradient(to bottom, var(--ck-blue) 0%, var(--ck-green) 100%);
  }
}

/* Kopf linksbuendig in voller Spaltenbreite; der Lesetext nutzt die Spalte
   ganz, ohne Ausbruch fuer Tabellen (rechts ist die Seitenleiste). */
.ck-beitrag.ck-beitrag--seitig {
  --ck-ausbruch: 0rem;
}

.ck-beitrag--seitig .ck-beitrag__kopf {
  padding-block: 0 1.75rem;
}

.ck-beitrag--seitig .ck-beitrag__kopf-inner {
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

.ck-beitrag--seitig .ck-beitrag__meta {
  justify-content: flex-start;
  margin-block: 0 1.1rem;
}

.ck-beitrag--seitig .ck-beitrag__meta-item--pill::before {
  content: none;
}

.ck-beitrag--seitig .ck-beitrag__pill {
  margin-bottom: 0;
}

.ck-beitrag--seitig .ck-beitrag__titel {
  text-wrap: pretty;
}

.ck-beitrag--seitig .ck-lesetext,
.ck-beitrag--seitig .ck-beitrag__cta {
  max-width: none;
  margin-inline: 0;
}

.ck-beitrag--seitig .ck-beitrag__cta {
  align-items: flex-start;
  text-align: start;
}

.ck-beitrag--seitig .ck-beitrag__bild {
  max-width: none;
  margin: 0;
}

/* Teilen-Box wie im Original: ruhige Flaeche, runde Knoepfe in Markenblau. */
.ck-teilen {
  margin-block-start: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface-muted);
}

.ck-teilen__titel {
  margin: 0 0 1.1rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.3;
  color: var(--ck-ink);
}

.ck-teilen__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-teilen__btn {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background-color: var(--ck-blue-ui);
  color: var(--ck-white, #fff);
  transition: background-color var(--ck-transition), transform var(--ck-transition);
}

.ck-teilen__btn svg {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.ck-teilen__btn svg[fill="none"] {
  fill: none;
  stroke: currentColor;
}

.ck-teilen__btn:hover,
.ck-teilen__btn:focus-visible {
  background-color: var(--ck-blue-deep);
  transform: translateY(-2px);
}

.ck-teilen__btn:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 2px;
}

/* „Das Wichtigste in Kuerze“ wie im Original: weicher Verlauf von Weiss zu
   einem Hauch Markenblau, leichter Schatten, kraeftige Ueberschrift. */
.ck-lesetext > .ck-keypoints {
  background-color: var(--ck-surface);
  background-image: linear-gradient(135deg, #fff 0%, rgba(0, 159, 227, 0.12) 100%);
  box-shadow: var(--ck-shadow-sm);
}

.ck-keypoints > h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: var(--ck-weight-bold);
}

/* Inhaltsverzeichnis als aufklappbarer Kasten mit Versal-Titel. */
.ck-lesetext > .ck-toc {
  padding: 0;
}

.ck-toc__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-ink);
}

.ck-toc__kopf::-webkit-details-marker {
  display: none;
}

.ck-toc__kopf:hover {
  color: var(--ck-blue-strong);
}

.ck-toc__kopf:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: -2px;
  border-radius: var(--ck-radius);
}

.ck-toc__pfeil {
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  color: var(--ck-ink-soft);
  transition: transform var(--ck-transition);
}

.ck-toc[open] .ck-toc__pfeil {
  transform: rotate(180deg);
}

.ck-toc[open] .ck-toc__kopf {
  border-bottom: 1px solid var(--ck-border);
}

.ck-toc > nav {
  padding: 1rem 1.4rem 1.15rem;
}

.ck-toc a {
  color: var(--ck-blue-strong);
}

@media (prefers-reduced-motion: reduce) {
  .ck-teilen__btn,
  .ck-toc__pfeil {
    transition: none;
  }

  .ck-teilen__btn:hover,
  .ck-teilen__btn:focus-visible {
    transform: none;
  }
}


/* Der Abschluss unter dem Text gilt nur, solange die Seitenleiste mit dem
   persoenlichen Aufruf nicht neben dem Text steht (unter 64rem). */
@media (min-width: 64rem) {
  .ck-beitrag__cta--schmal {
    display: none;
  }
}

/* ===================== 20-uebersicht.css ===================== */
/* ==========================================================================
   CodeKlar – 20-uebersicht.css
   Uebersichtsseiten: /blog, /blog-archiv (templates/blog-index.html) und
   /lexikon (templates/lexikon-index.html).

   Ergaenzt 00-base.css, aendert dort nichts. Nur eigene Klassen:
   .ck-ovhead, .ck-ovfilter, .ck-ovchip, .ck-ovgrid, .ck-ovcard, .ck-ovfoot,
   .ck-ovstatus, .ck-ovmore, .ck-lexgrid, .ck-lexcard.
   Farben, Abstaende und Radien kommen ausschliesslich aus den Tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kopfbereich – Titel und Einordnung
   Der Header ist position: fixed und ueber dem Seitenanfang transparent
   (main.js nimmt .is-top erst ab 50px Scroll weg). Der Kopf traegt deshalb
   den Header-Abstand selbst und legt einen ruhigen Blau-Tint darunter,
   damit Logo und Navigation im Ruhezustand auf einer Flaeche stehen.
   -------------------------------------------------------------------------- */

.ck-ovhead {
  position: relative;
  padding-top: calc(var(--ck-header-h) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  background-color: var(--ck-surface);
  background-image: linear-gradient(
    180deg,
    var(--ck-blue-soft) 0%,
    rgba(230, 246, 253, 0) 100%
  );
}

.ck-ovhead__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* .ck-display bringt Groesse und Gewicht 400 mit; hier nur der Umbruch. */
.ck-ovhead__title {
  margin: 0;
  max-width: 20ch;
}

.ck-ovhead__lead {
  margin: 0;
  max-width: 48rem;
}

/* Anzahl der Eintraege – leise Randnotiz, kein zweiter Lead. */
.ck-ovhead__count {
  margin: 0.25rem 0 0;
  color: var(--ck-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. Filterleiste
   Wird von JS befuellt und erst dann sichtbar gemacht. Die [hidden]-Regel ist
   noetig, weil das Attribut sonst vom display der Klasse ueberstimmt wird.
   -------------------------------------------------------------------------- */

.ck-ovfilter {
  display: block;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.ck-ovfilter[hidden] {
  display: none;
}

.ck-ovfilter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ck-ovchip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--ck-border-strong);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--ck-transition),
    border-color var(--ck-transition), color var(--ck-transition);
}

.ck-ovchip:hover {
  border-color: var(--ck-ink);
}

.ck-ovchip__count {
  font-size: 0.8125rem;
  color: var(--ck-muted);
  font-variant-numeric: tabular-nums;
}

/* Aktiv: schwarz gefuellt wie der Primaerbutton (21:1). */
.ck-ovchip[aria-pressed="true"] {
  background-color: var(--ck-black);
  border-color: var(--ck-black);
  color: var(--ck-white);
}

.ck-ovchip[aria-pressed="true"] .ck-ovchip__count {
  color: var(--ck-border-strong);
}

/* --------------------------------------------------------------------------
   3. Kartenraster
   -------------------------------------------------------------------------- */

.ck-ovgrid {
  --ck-ov-gap: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-ov-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ck-ovgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-ovgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* JS blendet einzelne Karten aus – ohne JS greift diese Regel nie. */
.ck-ovgrid__item[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Beitragskarte – gleiche Optik wie die Karten der Startseite
   (.ck-blog__card: graue Flaeche, keine Rundung, 16:9-Bild, 20px/400-Titel).
   -------------------------------------------------------------------------- */

.ck-ovcard {
  position: relative;
  height: 100%;
  border-radius: 0;
  background-color: var(--ck-surface-muted);
  transition: box-shadow var(--ck-transition), transform var(--ck-transition);
}

.ck-ovcard:hover {
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

/* Der Fokus liegt auf dem Titel-Link; die Karte zeigt ihn mit an. */
.ck-ovcard:focus-within {
  box-shadow: var(--ck-shadow);
}

.ck-ovcard__media {
  background-color: var(--ck-border);
}

/* Innenabstaende wie .ck-blog__body (Original: px-6 pt-5 pb-6). */
.ck-ovcard__body {
  padding: 1.25rem 1.5rem 1.5rem;
  gap: 0.5rem;
}

.ck-ovcard__meta {
  margin: 0;
  color: var(--ck-muted);
}

/* #005f87 auf #f3f4f6 = 6,39:1 (--ck-blue-strong laege mit 4,52:1 zu knapp). */
.ck-ovcard__cat {
  color: var(--ck-blue-deep);
}

/* Rein dekorativer Trenner – als Punkt-Flaeche, nicht als Textzeichen,
   damit Screenreader ihn nicht vorlesen. */
.ck-ovcard__cat + .ck-ovcard__date::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
  opacity: 0.55;
}

/* Wie .ck-blog__title: 20px, Gewicht 400, reines Schwarz. */
.ck-ovcard__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.4;
  color: var(--ck-ink);
}

.ck-ovcard__link {
  color: inherit;
  text-decoration: none;
}

/* Ganze Karte klickbar – der zugaengliche Name bleibt der Titel. */
.ck-ovcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ck-ovcard__link:hover {
  color: var(--ck-blue-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   5. Fussbereich der Liste: Zaehlstand und "Weitere laden"
   -------------------------------------------------------------------------- */

.ck-ovfoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Ohne JS bleibt der Absatz leer – dann nimmt er auch keinen Platz ein. */
.ck-ovstatus {
  margin: 0;
  color: var(--ck-muted);
}

.ck-ovstatus:empty {
  display: none;
}

.ck-ovmore {
  display: block;
}

.ck-ovmore[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Lexikon – ruhiges Kachelraster, alphabetisch
   -------------------------------------------------------------------------- */

.ck-lexgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ck-lexgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-lexgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Alle sieben Begriffe tragen dasselbe Logo-Bild; eine Kachel ohne Bild
   bleibt ruhiger und stellt den Begriff nach vorn. */
.ck-lexcard {
  position: relative;
  height: 100%;
  /* Traegt auch dann, wenn build.js (noch) keinen Erklaersatz liefert. */
  min-height: 8rem;
  gap: 0.75rem;
}

.ck-lexcard__title {
  margin: 0;
  /* .ck-h4 ist 700; auf den Uebersichten sind Ueberschriften leicht. */
  font-weight: var(--ck-weight-regular);
}

.ck-lexcard__link {
  color: inherit;
  text-decoration: none;
}

.ck-lexcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ck-lexcard__link:hover {
  color: var(--ck-blue-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ck-lexcard__text {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ck-ink-soft);
}

.ck-lexcard__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  /* sitzt am unteren Rand – mit und ohne Erklaersatz */
  margin-top: auto;
  color: var(--ck-blue-ui);
  transition: transform var(--ck-transition);
}

.ck-lexcard__arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

.ck-lexcard:hover .ck-lexcard__arrow {
  transform: translateX(0.25rem);
}

/* ==========================================================================
   Branchenfilter der Fallstudien

   Die Leiste ist bis zum Start des Skripts unsichtbar: ohne JavaScript
   waeren die Knoepfe da, wuerden aber nichts tun. Alle Fallstudien sind
   dann weiterhin zu sehen — gefiltert wird nur der Bequemlichkeit halber.
   ========================================================================== */

.ck-branchen {
  display: none;
  margin-block-end: 2rem;
}

.ck-branchen.is-bereit {
  display: block;
}

.ck-branchen__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.ck-branchen__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ck-border);
  border-radius: 999px;
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--ck-transition), background-color var(--ck-transition),
    color var(--ck-transition);
}

.ck-branchen__knopf:hover {
  border-color: var(--ck-blue);
}

.ck-branchen__knopf:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 2px;
}

.ck-branchen__knopf.is-aktiv {
  border-color: var(--ck-blue-strong);
  background-color: var(--ck-blue-strong);
  color: #fff;
}

/* Die Zahl steht gedaempft daneben, damit sie den Namen nicht ueberlagert. */
.ck-branchen__zahl {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.ck-branchen__stand {
  margin-block-start: 0.875rem;
  margin-block-end: 0;
  color: var(--ck-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ck-branchen__knopf {
    transition: none;
  }
}

/* ===================== 30-fallstudie-job.css ===================== */
/* ==========================================================================
   CodeKlar – 30-fallstudie-job.css
   Fallstudien (gemeinsame Bausteine + Uebersicht), Stellenanzeigen und
   Karriereseite. Die Detailseite der Fallstudie steht in 31-fallstudie.css.

   Ergaenzt 00-base.css: es werden ausschliesslich die dortigen Tokens und
   Klassen (.ck-container, .ck-section, .ck-btn, .ck-card, .ck-h1 …) benutzt,
   keine eigenen Farben und keine eigenen Abstandsgroessen.
   Praefixe: ck-cs- (Fallstudie), ck-case- (Uebersicht), ck-job- (Stelle),
   ck-career- (Karriere).
   ========================================================================== */


/* ==========================================================================
   1. Gemeinsame Bausteine
   ========================================================================== */

/* Hakenliste (Ziele, Ergebnisse, Aufgaben, Profil).
   Der Haken ist dekorativ, die Bedeutung steht im Text daneben. */
.ck-cs-checklist,
.ck-job-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ck-cs-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
}

.ck-cs-checklist__item,
.ck-job-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ck-ink-soft);
}

.ck-cs-check,
.ck-job-check {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15em;
  padding: 0.1875rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
}

/* Emoji-Icons aus den Originalseiten: rein dekorativ (aria-hidden), deshalb
   ohne Kontrastanforderung. */
.ck-job-card__icon,
.ck-career-value__icon,
.ck-career-benefit__icon,
.ck-career-card__icon,
.ck-job-tag__icon {
  font-size: 1.5rem;
  line-height: 1;
  font-style: normal;
}

/* Fortschrittsbalken "Digitalisierung vor/nach Projekt".
   Der Wert kommt als --ck-cs-value aus content/, der Prozentwert steht
   zusaetzlich im aria-label des Balkens. */
.ck-cs-bar {
  display: block;
  position: relative;
  width: 100%;
  max-width: 18.75rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-border);
  overflow: hidden;
}

.ck-cs-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ck-cs-value, 0);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-strong);
}

/* Der Balken nach dem Projekt traegt den Marken-Verlauf in der abgedunkelten
   Variante – beide Enden bleiben so auch auf Weiss deutlich sichtbar. */
.ck-cs-bar--after .ck-cs-bar__fill {
  background-image: var(--ck-gradient-text-deep);
}


/* ==========================================================================
   2. Fallstudie – Detailseite: siehe 31-fallstudie.css
   ========================================================================== */


/* ==========================================================================
   3. Fallstudien – Uebersicht
   ========================================================================== */

.ck-cases-hero {
  /* Platz fuer den fixierten Header */
  padding-top: calc(var(--ck-header-h) + clamp(2rem, 1rem + 4vw, 4.5rem));
}

/* Keine eigene Breite am Container: mit max-width 52rem wurde er mittig
   gesetzt, und die Ueberschrift stand 224px rechts vom Logo. Wie beim
   Seitenkopf der Allzweck-Vorlage (40-seiten.css) behaelt der Container die
   Header-Breite, und nur Titel und Einleitung bekommen ihre Lesebreite. */
.ck-cases-hero__title,
.ck-cases-hero__intro {
  max-width: 52rem;
}

.ck-cases-hero__title {
  margin: 0;
}

.ck-cases-hero__intro {
  margin-top: 1.5rem;
  color: var(--ck-muted);
}

.ck-cases__head {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
}

.ck-cases__head .ck-h1 {
  margin: 0 auto;
}

.ck-cases__sub {
  margin-top: 1rem;
}

.ck-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .ck-cases__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-cases__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ck-case {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  overflow: hidden;
  transition: border-color var(--ck-transition),
    box-shadow var(--ck-transition), transform var(--ck-transition);
}

/* Der Branchenfilter blendet Karten ueber das hidden-Attribut aus. Das
   display: flex oben ist spezifischer als die Browser-Vorgabe fuer [hidden]
   und hielt die Karten sonst sichtbar — die Knoepfe schalteten nur ihren
   eigenen Zustand um. */
.ck-case[hidden] {
  display: none;
}

.ck-case:hover,
.ck-case:focus-within {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-case__media {
  position: relative;
  padding: 1.25rem 1.25rem 0;
}

.ck-case__photo {
  display: block;
  width: 100%;
  height: 13rem;
  border-radius: var(--ck-radius);
  object-fit: cover;
  background-color: var(--ck-surface-muted);
}

.ck-case__logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 4rem;
  padding: 0.75rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-sm);
}

.ck-case__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ck-case__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.ck-case__title {
  margin: 0;
  font-weight: var(--ck-weight-medium);
}

/* Flaechendeckender Kartenlink: genau ein Link je Karte, der sichtbare
   Hinweis darunter ist nur Dekoration (aria-hidden). */
.ck-case__link {
  color: inherit;
  text-decoration: none;
}

.ck-case__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ck-case:hover .ck-case__title,
.ck-case:focus-within .ck-case__title {
  color: var(--ck-blue-strong);
}

.ck-case__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
}

.ck-case__cta svg {
  width: 1.125rem;
  height: 1.125rem;
}

.ck-case--plain .ck-case__body {
  padding-top: 2rem;
}


/* ==========================================================================
   4. Stellenanzeige
   ========================================================================== */

/* --- Kopf ----------------------------------------------------------------- */

.ck-job-hero {
  /* Platz fuer den fixierten Header */
  padding-block: calc(var(--ck-header-h) + clamp(2rem, 1rem + 4vw, 4.5rem)) var(--ck-section-y-sm);
  background-color: var(--ck-blue-soft);
}

/* Die Breite gilt fuer die Kinder, nicht fuer den Container: ein schmaler
   Container wird mittig gesetzt, und die Ueberschrift stand dann 160px
   rechts vom Logo. So bleibt die linke Kante die des Headers. */
.ck-job-hero__inner > * {
  max-width: 60rem;
}

.ck-job-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ck-job-chip {
  padding: 0.25rem 0.75rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  font-size: 0.875rem;
  color: var(--ck-ink);
}

.ck-job-hero__title {
  max-width: 52rem;
  margin: 0;
}

.ck-job-hero__line {
  display: block;
}

.ck-job-hero__lead {
  margin: 1.5rem 0 0;
  max-width: 44rem;
}

.ck-job-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.ck-job-hero__back {
  color: var(--ck-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ck-job-hero__back:hover {
  color: var(--ck-blue-strong);
}

.ck-job-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-job-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ck-white);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  font-size: 0.9375rem;
  color: var(--ck-ink);
}

/* --- Zweispaltiger Inhalt ------------------------------------------------- */

.ck-job-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .ck-job-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 4rem;
    align-items: start;
  }
}

.ck-job-block + .ck-job-block {
  margin-top: var(--ck-section-y-sm);
  padding-top: var(--ck-section-y-sm);
  border-top: 1px solid var(--ck-border);
}

.ck-job-block__title {
  margin: 0;
}

.ck-job-block__intro {
  margin-top: 1rem;
  max-width: 44rem;
  color: var(--ck-muted);
}

.ck-job-block__text {
  margin-top: 1.5rem;
  max-width: 44rem;
}

/* Kartenraster (Benefits, Ausbildungsschwerpunkte) */
.ck-job-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .ck-job-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ck-job-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ck-job-card {
  padding: 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

.ck-job-card__title {
  margin: 0.75rem 0 0.375rem;
  font-weight: var(--ck-weight-medium);
}

.ck-job-card__text {
  margin: 0;
  color: var(--ck-muted);
}

/* Aufgaben- und Profillisten */
.ck-job-group {
  margin-top: 2rem;
}

.ck-job-group__title {
  margin: 0 0 1rem;
  font-weight: var(--ck-weight-medium);
}

.ck-job-quote {
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ck-blue);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--ck-ink);
}

.ck-job-quote p {
  margin: 0;
}

/* Dunkler Hinweiskasten */
.ck-job-note {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-black);
  color: var(--ck-white);
}

.ck-job-note__title {
  margin: 0 0 0.5rem;
  color: var(--ck-white);
}

.ck-job-note__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.ck-job-note :focus-visible {
  outline-color: var(--ck-white);
}

.ck-job-info {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface-muted);
  font-size: 0.9375rem;
  color: var(--ck-ink-soft);
}

/* --- Kurzuebersicht (Sidebar) --------------------------------------------- */

.ck-job-side {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .ck-job-side {
    position: sticky;
    top: calc(var(--ck-header-h) + 1.5rem);
  }
}

.ck-job-box,
.ck-job-apply {
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
}

.ck-job-box__title,
.ck-job-apply__title {
  margin: 0 0 1rem;
}

.ck-job-rows {
  margin: 0;
}

.ck-job-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--ck-border);
}

.ck-job-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.ck-job-row__label {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ck-muted);
}

.ck-job-row__value {
  margin: 0;
  font-size: 0.9375rem;
  text-align: right;
  color: var(--ck-ink);
}

.ck-job-apply {
  background-color: var(--ck-blue-soft);
  border-color: transparent;
}

.ck-job-apply__text {
  margin: 0;
  color: var(--ck-ink-soft);
}

.ck-job-apply__btn {
  margin-top: 1.25rem;
  width: 100%;
}

.ck-job-apply__mail {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9375rem;
  word-break: break-word;
}

/* --- Bewerbungsband ------------------------------------------------------- */

.ck-job-band {
  padding-block: var(--ck-section-y-sm);
  background-color: var(--ck-black);
  color: var(--ck-white);
}

.ck-job-band__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .ck-job-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

.ck-job-band__title {
  margin: 0;
  color: var(--ck-white);
  overflow-wrap: anywhere;
}

.ck-job-band__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.ck-job-band__btn {
  flex: 0 0 auto;
  overflow-wrap: anywhere;
}

.ck-job-band :focus-visible {
  outline-color: var(--ck-white);
}


/* ==========================================================================
   5. Karriere
   ========================================================================== */

.ck-career-hero {
  /* Platz fuer den fixierten Header */
  padding-block: calc(var(--ck-header-h) + clamp(2rem, 1rem + 4vw, 4.5rem)) var(--ck-section-y-sm);
  background-image: linear-gradient(
    180deg,
    var(--ck-blue-soft) 0%,
    var(--ck-white) 100%
  );
}

/* Wie beim Kopf der Stellenanzeige: Breite an den Kindern, damit die
   Ueberschrift auf der Kante des Logos steht. */
.ck-career-hero__inner > * {
  max-width: 60rem;
}

.ck-career-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  font-size: 0.875rem;
  /* Die Kennzeile ist die h1 der Seite (Suchbegriff), sieht aber aus wie
     vorher: keine Ueberschriften-Schrift, keine eigene Zeilenhoehe. */
  font-weight: var(--ck-weight-regular);
  line-height: 1.5;
  color: var(--ck-ink);
}

.ck-career-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-ui);
}

.ck-career-hero__title {
  max-width: 52rem;
  margin: 0;
}

.ck-career-hero__line {
  display: block;
}

.ck-career-hero__lead {
  margin: 1.5rem 0 0;
  max-width: 44rem;
}

.ck-career-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 0;
}

@media (min-width: 768px) {
  .ck-career-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ck-career-kpi__value {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.2;
  color: var(--ck-ink);
}

.ck-career-kpi__label {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--ck-muted);
}

/* --- Wer wir sind --------------------------------------------------------- */

.ck-career-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .ck-career-about__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.ck-career-about__title {
  margin: 0;
}

.ck-career-about__prose {
  margin-top: 1.5rem;
  max-width: 40rem;
  color: var(--ck-muted);
}

.ck-career-values {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-career-value {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ck-career-value__body {
  display: block;
}

.ck-career-value__title {
  display: block;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-career-value__text {
  display: block;
  color: var(--ck-muted);
}

.ck-career-places {
  display: grid;
  gap: 1rem;
}

.ck-career-place {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  overflow: hidden;
}

.ck-career-place__title {
  margin: 0 0 0.5rem;
  font-weight: var(--ck-weight-medium);
}

/* Rechts Platz fuer die Ziffer lassen: sie ist positioniert und liegt damit
   ueber dem Text — auf dem Handy lief "weiterbringen." blass in die 02. */
.ck-career-place__text {
  margin: 0;
  max-width: 28rem;
  padding-right: 4rem;
  color: var(--ck-muted);
}

/* Rein dekorative Ziffer im Hintergrund der Karte */
.ck-career-place__num {
  position: absolute;
  right: 1rem;
  bottom: -0.5rem;
  margin: 0;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--ck-border);
  pointer-events: none;
}

/* --- Benefits ------------------------------------------------------------- */

.ck-career-benefits__head {
  margin-bottom: 2.5rem;
  max-width: 44rem;
}

.ck-career-benefits__head .ck-h1 {
  margin: 0;
}

.ck-career-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .ck-career-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-career-benefits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ck-career-benefit {
  padding: 1.25rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
}

.ck-career-benefit__title {
  margin: 0.75rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: var(--ck-weight-medium);
}

.ck-career-benefit__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ck-muted);
}

/* --- Kultur --------------------------------------------------------------- */

.ck-career-culture__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .ck-career-culture__head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    align-items: center;
  }
}

.ck-career-culture__head .ck-h1 {
  margin: 0;
}

.ck-career-culture__quote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ck-blue);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--ck-ink-soft);
}

.ck-career-culture__quote p {
  margin: 0;
}

.ck-career-culture__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .ck-career-culture__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-career-culture__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ck-career-card {
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
}

.ck-career-card__title {
  margin: 0.75rem 0 0.5rem;
  font-weight: var(--ck-weight-medium);
}

.ck-career-card__text {
  margin: 0;
  color: var(--ck-muted);
}

/* --- Werte ---------------------------------------------------------------- */

/* Bewusst ohne Kartenrahmen: die Kultur weiter unten steht in Karten, und
   zwei gleich aussehende Vierergruppen auf einer Seite lesen sich wie
   Wiederholung. Die Werte stehen offen, jeweils unter einer blauen Linie. */
.ck-career-werte__head {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.ck-career-werte__head .ck-h1 {
  margin: 0;
}

.ck-career-werte__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .ck-career-werte__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ck-career-werte__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.ck-career-wert {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ck-blue);
}

.ck-career-wert__icon {
  font-size: 1.75rem;
  line-height: 1;
  font-style: normal;
}

.ck-career-wert__title {
  margin: 0.875rem 0 0.5rem;
}

.ck-career-wert__text {
  margin: 0;
  color: var(--ck-muted);
}

/* --- Offene Stellen ------------------------------------------------------- */

.ck-career-jobs__title {
  margin: 0 0 2rem;
}

/* auto-fill statt fester Spaltenzahl: die Kacheln fuellen die Zeile,
   egal wie viele Stellen offen sind. */
.ck-career-jobs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .ck-career-jobs__grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

.ck-career-job {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface-muted);
  overflow: hidden;
  transition: box-shadow var(--ck-transition), transform var(--ck-transition);
}

.ck-career-job:hover,
.ck-career-job:focus-within {
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-career-job__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ck-transition-slow);
}

.ck-career-job:hover .ck-career-job__photo {
  transform: scale(1.04);
}

/* Weisser Textkasten am unteren Kartenrand – schwarzer Text erreicht darauf
   auch ueber einem dunklen Foto mindestens 15:1. */
.ck-career-job__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background-color: rgba(255, 255, 255, 0.88);
}

.ck-career-job__title {
  margin: 0;
  font-weight: var(--ck-weight-medium);
}

.ck-career-job__link {
  color: inherit;
  text-decoration: none;
}

.ck-career-job__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ck-career-job:hover .ck-career-job__title,
.ck-career-job:focus-within .ck-career-job__title {
  color: var(--ck-blue-strong);
}

.ck-career-job__type {
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-career-job__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
}

.ck-career-job__cta svg {
  width: 1.125rem;
  height: 1.125rem;
}

.ck-career-job--plain {
  aspect-ratio: auto;
  border: 1px solid var(--ck-border);
  background-color: var(--ck-surface);
}

/* ===================== 31-fallstudie.css ===================== */
/* ==========================================================================
   CodeKlar – 31-fallstudie.css
   Fallstudie, Detailseite (templates/fallstudie.html) und Ergaenzungen fuer
   die Karten der Uebersicht (partials/case-karte.html):

     1  Kopf             Text links, Foto mit Verlaufsrahmen, Logo oder
                         Siegel ("Vertraulich", "Freigabe ausstehend") und
                         schwebender Digitalisierungsgrad rechts
     2  Kennzahlen       Zahlenband unter dem Kopf
     3  Kicker, Koepfe   kleine Vorzeile ueber den Ueberschriften
     4  Unternehmen      Vorstellung links, Steckbrief klebt rechts
     5  Ziele            nummerierte Karten
     6  Abschnitte       Kopf klebt, Inhalt daneben; die Seite wechselt;
                         Schritte als Zeitstrahl, Grafik mit Unterschrift
     7  Ergebnis         Verlaufsband mit Vorher/Nachher und Ergebniskarten
     8  Zitat            Kundenstimme (optional)
     9  Partner          drei Icon-Karten neben klebendem Kopf
    10  Weitere          drei andere Fallstudien
    11  Uebersicht       Siegel, Branche und Firma auf den Karten, Zahlen
                         im Kopf der Uebersicht

   Die Hakenliste und der Balken (.ck-cs-bar) stehen in 30-fallstudie-job.css
   (gemeinsame Bausteine mit den Stellenanzeigen). Farben, Abstaende und
   Radien kommen aus den Tokens in 00-base.css; der Verlaufsrahmen
   (.ck-gradient-border) und die Icon-Karten (.ck-baustein--icon) aus den
   Allzweck-Bloecken. Einblenden beim Scrollen setzt main.js (Baustein 8).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Kopf
   -------------------------------------------------------------------------- */

.ck-cs-hero {
  padding-top: calc(var(--ck-header-h) + clamp(2.5rem, 1.5rem + 3.5vw, 5rem));
  padding-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  background-image: linear-gradient(to bottom, var(--ck-blue-soft) 0%, rgba(230, 246, 253, 0) 100%);
}

.ck-cs-hero__inner {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 64rem) {
  .ck-cs-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.ck-cs-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}

.ck-cs-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
  text-decoration: none;
}

.ck-cs-hero__back svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: translate var(--ck-transition);
}

.ck-cs-hero__back:hover svg,
.ck-cs-hero__back:focus-visible svg {
  translate: -3px 0;
}

.ck-cs-hero__branche {
  padding: 0.375rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  font-size: 0.875rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
}

.ck-cs-hero__title {
  margin: 0;
  text-wrap: balance;
}

.ck-cs-hero__lead {
  margin: 1rem 0 0;
  color: var(--ck-muted);
}

/* Hinweis bei vertraulichen Faellen und ausstehender Freigabe */
.ck-cs-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ck-ink-soft);
}

.ck-cs-hinweis svg {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-top: 0.05em;
  color: var(--ck-blue-strong);
}

.ck-cs-hinweis--freigabe {
  border-style: dashed;
  border-color: var(--ck-blue);
}

.ck-cs-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

/* Rechts: Foto im Verlaufsrahmen, darueber schweben Logo und Kennzahl.
   Der Aussenabstand des Blocks ist der Platz fuer die schwebenden Teile,
   damit nichts ueber den Container hinausragt. */
.ck-cs-hero__media {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.25rem 1.25rem 2.75rem;
}

@media (min-width: 64rem) {
  .ck-cs-hero__media {
    max-width: none;
    margin-inline: 0;
  }
}

.ck-cs-hero__rahmen {
  padding: 4px;
  border-radius: calc(var(--ck-radius-lg) + 4px);
  box-shadow: var(--ck-shadow-lg);
}

.ck-cs-hero__bild {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ck-radius-lg);
  aspect-ratio: 4 / 3;
  background-color: var(--ck-surface-muted);
}

.ck-cs-hero__bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  animation: ck-cs-zoom 18s ease-in-out infinite alternate;
}

@keyframes ck-cs-zoom {
  from { scale: 1; }
  to   { scale: 1.07; }
}

.ck-cs-hero__logo,
.ck-cs-hero__siegel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow);
  animation: ck-hero-schwebt 7s ease-in-out infinite;
}

.ck-cs-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 7.5rem;
  block-size: 5rem;
  padding: 0.875rem;
  border-radius: var(--ck-radius);
}

.ck-cs-hero__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.ck-cs-hero__siegel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--ck-radius-pill);
  color: var(--ck-blue-strong);
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

.ck-cs-hero__siegel svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.ck-cs-hero__siegel--offen {
  border: 1px dashed var(--ck-blue);
}

.ck-cs-hero__grad {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 2;
  inline-size: min(16.5rem, 82%);
  padding: 1rem 1.25rem 1.125rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-lg);
  animation: ck-hero-schwebt 8s ease-in-out 1s infinite reverse;
}

.ck-cs-hero__grad-label {
  display: block;
  font-size: 0.75rem;
  font-weight: var(--ck-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-cs-hero__grad-werte {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 1.125rem;
  color: var(--ck-muted);
  font-variant-numeric: tabular-nums;
}

.ck-cs-hero__grad-werte svg {
  align-self: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.ck-cs-hero__grad-nachher {
  font-size: 1.75rem;
  font-weight: var(--ck-weight-bold);
  line-height: 1;
}

.ck-cs-hero__grad .ck-cs-bar {
  max-width: none;
  margin-top: 0.75rem;
}

/* Balken, die sich beim Laden fuellen. Der Zielwert steht als
   --ck-cs-value am Element; animiert wird nur der Weg dorthin. */
.ck-cs-bar__fill--animiert {
  animation: ck-cs-fuellt 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

@keyframes ck-cs-fuellt {
  from { width: 0; }
}


/* --------------------------------------------------------------------------
   2. Kennzahlen
   -------------------------------------------------------------------------- */

.ck-cs-zahlen {
  padding-block: clamp(1rem, 0.5rem + 1.5vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ck-cs-zahlen__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-cs-zahl {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  overflow: hidden;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-cs-zahl::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 4px;
  background-image: linear-gradient(to bottom, var(--ck-blue), var(--ck-green));
}

.ck-cs-zahl:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-3px);
}

.ck-cs-zahl__wert {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: var(--ck-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ck-cs-zahl__text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ck-muted);
}


/* --------------------------------------------------------------------------
   3. Kicker und Koepfe
   -------------------------------------------------------------------------- */

.ck-cs-kicker {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-blue-strong);
}

/* Grosse Abschnittsnummer im Markenverlauf */
.ck-cs-kicker--nummer {
  margin-bottom: 0.25rem;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0;
  line-height: 1;
  background-image: var(--ck-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ck-cs-kopf {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.ck-cs-kopf .ck-h1 {
  margin: 0;
}

.ck-cs-kopf--mitte {
  margin-inline: auto;
  text-align: center;
}


/* --------------------------------------------------------------------------
   4. Unternehmen und Steckbrief
   -------------------------------------------------------------------------- */

.ck-cs-about {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.ck-cs-about__grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .ck-cs-about__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }
}

.ck-cs-about__title {
  margin: 0;
}

.ck-cs-about__prose {
  margin-top: 1.5rem;
}

.ck-cs-steckbrief {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface-sunken);
  overflow: hidden;
}

.ck-cs-steckbrief::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 4px;
  background-image: var(--ck-gradient);
}

@media (min-width: 64rem) {
  .ck-cs-steckbrief {
    position: sticky;
    top: calc(var(--ck-header-h) + 2rem);
  }
}

.ck-cs-steckbrief__titel {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  font-weight: var(--ck-weight-medium);
}

.ck-cs-steckbrief__liste {
  display: grid;
  gap: 0.875rem;
  margin: 0;
}

.ck-cs-steckbrief__zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--ck-border);
}

.ck-cs-steckbrief__zeile dt {
  font-size: 0.9375rem;
  color: var(--ck-muted);
  white-space: nowrap;
}

.ck-cs-steckbrief__zeile dd {
  margin: 0;
  font-weight: var(--ck-weight-medium);
  text-align: end;
  overflow-wrap: anywhere;
}

.ck-cs-steckbrief__zeile--balken {
  grid-template-columns: minmax(0, 1fr);
}

.ck-cs-steckbrief__zeile--balken dd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  text-align: start;
}

.ck-cs-steckbrief__prozent {
  min-inline-size: 3.25rem;
  font-weight: var(--ck-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ck-cs-steckbrief__prozent--nachher {
  color: var(--ck-blue-strong);
}

.ck-cs-steckbrief .ck-cs-bar {
  max-width: none;
  margin: 0;
}

.ck-cs-steckbrief__label {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

/* Dieses Stylesheet laedt vor 40-seiten.css und 72-bloecke-erweitert.css;
   mit dem Steckbrief als Vorfahren gewinnen diese Regeln trotzdem. */
.ck-cs-steckbrief .ck-cs-leistungen {
  justify-content: flex-start;
  max-width: none;
  margin: 0;
}

.ck-cs-steckbrief .ck-cs-leistungen__chip {
  display: inline-flex;
  padding: 0;
  font-size: 0.9375rem;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-cs-steckbrief .ck-cs-leistungen__chip:hover,
.ck-cs-steckbrief .ck-cs-leistungen__chip:focus-within {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-cs-leistungen__link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.125rem 0.625rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  color: inherit;
  text-decoration: none;
  outline-offset: 2px;
}

.ck-cs-steckbrief .ck-cs-leistungen__chip:not(.ck-chips__item--logo) .ck-cs-leistungen__link {
  padding-inline-start: 1.125rem;
}

.ck-cs-steckbrief .ck-cs-leistungen__chip:hover .ck-cs-leistungen__link {
  color: var(--ck-blue-strong);
}


/* --------------------------------------------------------------------------
   5. Ziele
   -------------------------------------------------------------------------- */

.ck-cs-ziele__liste {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ziel;
}

.ck-cs-ziel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  counter-increment: ziel;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  overflow: hidden;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-cs-ziel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  block-size: 3px;
  background-image: var(--ck-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ck-cs-ziel:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-3px);
}

.ck-cs-ziel:hover::after {
  transform: scaleX(1);
}

.ck-cs-ziel__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  font-weight: var(--ck-weight-bold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--ck-transition), color var(--ck-transition);
}

.ck-cs-ziel__nr::before {
  content: counter(ziel, decimal-leading-zero);
}

.ck-cs-ziel:hover .ck-cs-ziel__nr {
  background-image: var(--ck-gradient);
  color: var(--ck-ink);
}

.ck-cs-ziel__text {
  margin: 0;
  padding-top: 0.45rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   6. Abschnitte
   -------------------------------------------------------------------------- */

.ck-cs-abschnitt {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.ck-cs-abschnitt + .ck-cs-abschnitt {
  padding-top: 0;
}

.ck-cs-abschnitt + .ck-cs-abschnitt .ck-cs-abschnitt__inner {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--ck-border);
}

.ck-cs-abschnitt__inner {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .ck-cs-abschnitt__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }

  .ck-cs-abschnitt__kopf {
    position: sticky;
    top: calc(var(--ck-header-h) + 2rem);
  }

  /* Jeder zweite Abschnitt stellt den Kopf nach rechts. */
  .ck-cs-abschnitt:nth-child(even) .ck-cs-abschnitt__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .ck-cs-abschnitt:nth-child(even) .ck-cs-abschnitt__kopf {
    order: 2;
  }

  /* Langer Fliesstext laeuft in zwei Spalten, solange keine Schritte
     danebenstehen. */
  .ck-cs-abschnitt:not(.ck-cs-abschnitt--schritte) .ck-cs-abschnitt__prose {
    column-count: 2;
    column-gap: 3rem;
  }

  .ck-cs-abschnitt__prose > * {
    break-inside: avoid;
  }

  .ck-cs-abschnitt__prose > :first-child {
    margin-top: 0;
  }
}

.ck-cs-abschnitt__titel {
  margin: 0;
}

.ck-cs-abschnitt__lead {
  margin: 0.75rem 0 0;
  font-size: 1.125rem;
  color: var(--ck-muted);
}

.ck-cs-abschnitt__prose {
  max-width: none;
  margin: 0;
}

/* Schritte als Zeitstrahl */
.ck-cs-schritte {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.ck-cs-abschnitt__prose + .ck-cs-schritte {
  margin-top: 2rem;
}

.ck-cs-schritt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  counter-increment: schritt;
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-cs-schritt:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateX(4px);
}

/* Der Strich laeuft von der Unterkante einer Nummer bis zur naechsten. */
.ck-cs-schritt:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 4.5rem -1.5rem;
  inset-inline-start: calc(3rem - 1px);
  border-inline-start: 2px dashed var(--ck-border-strong);
}

.ck-cs-schritt__nr {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background-color: var(--ck-blue);
  color: var(--ck-ink);
  font-size: 1.0625rem;
  font-weight: var(--ck-weight-medium);
  font-variant-numeric: tabular-nums;
}

.ck-cs-schritt__nr::before {
  content: counter(schritt, decimal-leading-zero);
}

/* Der Markenverlauf verteilt sich ueber die Reihe (wie bei .ck-ablauf). */
.ck-cs-schritt:nth-child(1) .ck-cs-schritt__nr { background-color: #009fe3; }
.ck-cs-schritt:nth-child(2) .ck-cs-schritt__nr { background-color: #00b6df; }
.ck-cs-schritt:nth-child(3) .ck-cs-schritt__nr { background-color: #00cdda; }
.ck-cs-schritt:nth-child(4) .ck-cs-schritt__nr { background-color: #00e4d6; }
.ck-cs-schritt:nth-child(5) .ck-cs-schritt__nr { background-color: #00fbd1; }

.ck-cs-schritt__titel {
  margin: 0.55rem 0 0.5rem;
}

.ck-cs-schritt__text {
  font-size: 1rem;
}

/* Erklaerende Grafik */
.ck-cs-grafik {
  margin: 2.5rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface-sunken);
}

.ck-cs-grafik img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
}

.ck-cs-grafik__text {
  margin-top: 0.875rem;
  text-align: center;
  color: var(--ck-muted);
}


/* --------------------------------------------------------------------------
   7. Ergebnis
   -------------------------------------------------------------------------- */

.ck-cs-ergebnis {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.4rem + 4.2vw, 6rem);
  background-color: var(--ck-blue-soft);
  background-image: linear-gradient(135deg, var(--ck-blue-soft) 0%, var(--ck-surface) 55%, rgba(0, 253, 208, 0.16) 100%);
  scroll-margin-top: calc(var(--ck-header-h) + 1rem);
}

.ck-cs-ergebnis::before,
.ck-cs-ergebnis::after {
  content: "";
  position: absolute;
  inline-size: 28rem;
  block-size: 28rem;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.ck-cs-ergebnis::before {
  inset-block-start: -14rem;
  inset-inline-start: -8rem;
  background: radial-gradient(circle, rgba(0, 159, 227, 0.2) 0%, rgba(0, 159, 227, 0) 65%);
}

.ck-cs-ergebnis::after {
  inset-block-end: -14rem;
  inset-inline-end: -8rem;
  background: radial-gradient(circle, rgba(0, 253, 208, 0.22) 0%, rgba(0, 253, 208, 0) 65%);
}

.ck-cs-ergebnis > .ck-container {
  position: relative;
}

.ck-cs-grad {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  max-width: 56rem;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: 1.75rem 2rem;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow);
}

@media (min-width: 48rem) {
  .ck-cs-grad {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 2rem;
  }
}

.ck-cs-grad__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-cs-grad__wert {
  display: block;
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: var(--ck-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ck-cs-grad__pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-inline: auto;
  border-radius: 50%;
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  rotate: 90deg;
}

@media (min-width: 48rem) {
  .ck-cs-grad__pfeil {
    rotate: 0deg;
  }
}

.ck-cs-grad__pfeil svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.ck-cs-bar--gross {
  max-width: none;
  block-size: 0.75rem;
  margin: 0;
}

.ck-cs-ergebnisse {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-cs-ergebnis__karte {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-sm);
  transition: box-shadow var(--ck-transition), transform var(--ck-transition);
}

.ck-cs-ergebnis__karte:hover {
  box-shadow: var(--ck-shadow);
  transform: translateY(-3px);
}

.ck-cs-ergebnis__haken {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background-image: var(--ck-gradient);
  color: var(--ck-ink);
}

.ck-cs-ergebnis__haken svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.ck-cs-ergebnis__text {
  padding-top: 0.15rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   8. Zitat
   -------------------------------------------------------------------------- */

.ck-cs-zitat__karte {
  position: relative;
  max-width: 52rem;
  margin: 1rem auto 0;
  padding: 2.5rem 2.5rem 2rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
}

.ck-cs-zitat__zeichen {
  position: absolute;
  inset-block-start: -1.25rem;
  inset-inline-start: 2rem;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  background-image: var(--ck-gradient);
  color: var(--ck-ink);
}

.ck-cs-zitat__text {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}

.ck-cs-zitat__text p {
  margin: 0;
}

.ck-cs-zitat__quelle {
  margin-top: 1.25rem;
  font-weight: var(--ck-weight-medium);
}

.ck-cs-zitat__rolle {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-regular);
  color: var(--ck-muted);
}


/* --------------------------------------------------------------------------
   9. Partner
   -------------------------------------------------------------------------- */

.ck-cs-partner__grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .ck-cs-partner__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }

  .ck-cs-partner__head {
    position: sticky;
    top: calc(var(--ck-header-h) + 2rem);
  }
}

.ck-cs-partner__head .ck-h1 {
  margin: 0;
}

.ck-cs-partner__sub {
  margin: 0.75rem 0 0;
  font-size: 1.125rem;
  color: var(--ck-muted);
}

.ck-cs-partner__btn {
  margin-top: 1.5rem;
}

.ck-cs-partner__cards {
  display: grid;
  gap: 1.25rem;
}


/* --------------------------------------------------------------------------
   10. Weitere Fallstudien
   -------------------------------------------------------------------------- */

.ck-cs-weitere {
  background-color: var(--ck-surface-sunken);
}

.ck-cs-weitere__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.ck-cs-weitere__kopf .ck-h1 {
  margin: 0;
}

.ck-cs-weitere__alle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
  text-decoration: none;
}

.ck-cs-weitere__alle svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: translate var(--ck-transition);
}

.ck-cs-weitere__alle:hover svg,
.ck-cs-weitere__alle:focus-visible svg {
  translate: 3px 0;
}


/* --------------------------------------------------------------------------
   11. Uebersicht: Karten und Kopf
   -------------------------------------------------------------------------- */

.ck-case__siegel {
  position: absolute;
  inset-block-start: 2rem;
  inset-inline-start: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-white);
  color: var(--ck-blue-strong);
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  box-shadow: var(--ck-shadow-sm);
}

.ck-case__siegel svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.ck-case__siegel--offen {
  border: 1px dashed var(--ck-blue);
}

.ck-case__branche {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--ck-radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ck-ink);
  font-size: 0.75rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  box-shadow: var(--ck-shadow-sm);
}

.ck-case__firma {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 -0.5rem;
  font-size: 0.875rem;
  color: var(--ck-muted);
}

/* Das Kundenlogo steht klein vor dem Namen statt auf der Illustration,
   wo es ein Motiv verdeckte. */
.ck-case__firma-logo {
  flex: 0 0 auto;
  inline-size: auto;
  block-size: 1.5rem;
  max-inline-size: 5.5rem;
  object-fit: contain;
}

/* Das Foto wandert beim Ueberfahren leicht heran. */
.ck-case__media {
  overflow: hidden;
}

.ck-case__photo {
  transition: transform var(--ck-transition-slow);
}

.ck-case:hover .ck-case__photo,
.ck-case:focus-within .ck-case__photo {
  transform: scale(1.03);
}

/* Zahlen im Kopf der Uebersicht */
.ck-cases-hero__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-cases-hero__zahl {
  display: grid;
  gap: 0.125rem;
}

.ck-cases-hero__zahl strong {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: var(--ck-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ck-cases-hero__zahl span {
  font-size: 0.9375rem;
  color: var(--ck-muted);
}


/* Ziele und Ergebnisse: zwei Spalten ab Tablet, drei ab Desktop. Sechs
   Eintraege gehen so ohne Waise auf (auto-fit liess 4 + 2 entstehen). */
@media (min-width: 40rem) {
  .ck-cs-ziele__liste,
  .ck-cs-ergebnisse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ck-cs-ziele__liste,
  .ck-cs-ergebnisse {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ck-cs-hero__bild img,
  .ck-cs-hero__logo,
  .ck-cs-hero__siegel,
  .ck-cs-hero__grad,
  .ck-cs-bar__fill--animiert {
    animation: none;
  }

  .ck-cs-zahl,
  .ck-cs-ziel,
  .ck-cs-ziel::after,
  .ck-cs-schritt,
  .ck-cs-ergebnis__karte,
  .ck-cs-steckbrief .ck-cs-leistungen__chip,
  .ck-case__photo,
  .ck-cs-hero__back svg,
  .ck-cs-weitere__alle svg {
    transition: none;
  }

  .ck-cs-zahl:hover,
  .ck-cs-ziel:hover,
  .ck-cs-schritt:hover,
  .ck-cs-ergebnis__karte:hover,
  .ck-cs-steckbrief .ck-cs-leistungen__chip:hover,
  .ck-case:hover .ck-case__photo {
    transform: none;
  }
}

/* ===================== 32-fallstudien-uebersicht.css ===================== */
/* ==========================================================================
   CodeKlar – 32-fallstudien-uebersicht.css
   Fallstudien-Uebersicht (templates/fallstudien-index.html):

     1  Kopf            Vorzeile, Zahlenreihe; Kundenlogos auf der Kreisbahn
                        (.ck-orbit--logos, Mechanik aus 74-hero-team.css)
     2  Hervorgehoben   grosse Karte: Illustration, Firma, Titel, Kennzahlen
     3  Liste           Kopf mit Branchenfilter rechts, Raster der Karten
     4  Ablauf          Verlaufsband mit vier Schritten (.ck-ablauf)

   Die Karten selbst (.ck-case) stehen in 30-fallstudie-job.css und
   31-fallstudie.css. Farben, Abstaende und Radien aus den Tokens.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Kopf
   -------------------------------------------------------------------------- */

.ck-fs-hero__eyebrow {
  margin: 0 0 1rem;
}

.ck-fs-hero__pille {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ck-fs-hero__zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-fs-hero__zahl {
  position: relative;
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 1rem 0.875rem 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  overflow: hidden;
}

.ck-fs-hero__zahl::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 4px;
  background-image: linear-gradient(to bottom, var(--ck-blue), var(--ck-green));
}

.ck-fs-hero__zahl strong {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: var(--ck-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ck-fs-hero__zahl span {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ck-muted);
}

/* Kundenlogos statt Portraits auf der Bahn */
.ck-orbit--logos {
  --r1: 23cqi;
  --r2: 40cqi;
}

.ck-orbit--logos .ck-orbit__center {
  grid-auto-flow: row;
  align-content: center;
  gap: 0.1em;
  background-image: linear-gradient(135deg, var(--ck-blue) 0%, var(--ck-green) 100%);
  color: var(--ck-white);
  text-align: center;
}

.ck-orbit--logos .ck-orbit__center strong {
  font-size: 7.5cqi;
  font-weight: var(--ck-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ck-orbit--logos .ck-orbit__center span {
  font-size: 2.6cqi;
  font-weight: var(--ck-weight-medium);
  opacity: 0.92;
}

.ck-orbit--logos .ck-orbit__item,
.ck-orbit--logos .ck-orbit__track--2 .ck-orbit__item {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24cqi;
  block-size: 9.5cqi;
  padding: 1.4cqi 2.2cqi;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-pill);
  background: var(--ck-white);
}

.ck-orbit--logos .ck-orbit__track--2 .ck-orbit__item {
  inline-size: 21cqi;
  block-size: 8.5cqi;
}

.ck-orbit--logos .ck-orbit__item img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.ck-orbit--logos .ck-orbit__item--siegel {
  gap: 1cqi;
  border: 1px dashed var(--ck-blue);
  color: var(--ck-blue-strong);
  font-size: clamp(0.75rem, 2.6cqi, 0.8125rem);
  font-weight: var(--ck-weight-medium);
  white-space: nowrap;
}

.ck-orbit--logos .ck-orbit__item--siegel svg {
  flex: 0 0 auto;
  inline-size: 3.2cqi;
  block-size: 3.2cqi;
}


/* --------------------------------------------------------------------------
   2. Hervorgehobene Fallstudie
   -------------------------------------------------------------------------- */

.ck-fs-top {
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ck-fs-top__karte {
  display: grid;
  gap: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface-sunken);
}

.ck-fs-top__karte[hidden] {
  display: none;
}

@media (min-width: 64rem) {
  .ck-fs-top__karte {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    padding: 2rem;
  }
}

.ck-fs-top__media {
  position: relative;
  padding: 1rem 0 0 1rem;
}

.ck-fs-top__rahmen {
  padding: 4px;
  border-radius: calc(var(--ck-radius-lg) + 4px);
  box-shadow: var(--ck-shadow-lg);
}

.ck-fs-top__bild {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface-muted);
}

.ck-fs-top__logo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 6.5rem;
  block-size: 4.25rem;
  padding: 0.75rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow);
}

.ck-fs-top__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.ck-fs-top__firma {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  color: var(--ck-muted);
}

.ck-fs-top__titel {
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  text-wrap: balance;
}

.ck-fs-top__link {
  color: inherit;
  text-decoration: none;
}

.ck-fs-top__link:hover,
.ck-fs-top__link:focus-visible {
  color: var(--ck-blue-strong);
}

.ck-fs-top__lead {
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ck-ink-soft);
}

.ck-fs-top__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-fs-top__zahl {
  display: grid;
  gap: 0.125rem;
}

.ck-fs-top__zahl strong {
  font-size: 1.5rem;
  font-weight: var(--ck-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ck-fs-top__zahl span {
  max-inline-size: 14rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ck-muted);
}

.ck-fs-top__btn {
  margin-top: 1.75rem;
}


/* --------------------------------------------------------------------------
   3. Liste
   -------------------------------------------------------------------------- */

.ck-fs-liste {
  scroll-margin-top: calc(var(--ck-header-h) + 1rem);
}

.ck-fs-liste__kopf {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 64rem) {
  .ck-fs-liste__kopf {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

.ck-fs-liste__kopf .ck-h1 {
  margin: 0;
}

.ck-fs-liste__sub {
  max-inline-size: 40rem;
  margin: 0.75rem 0 0;
  color: var(--ck-muted);
}

.ck-fs-liste__kopf .ck-branchen {
  margin: 0;
}

@media (min-width: 64rem) {
  .ck-fs-liste__kopf .ck-branchen__knoepfe {
    justify-content: flex-end;
    max-inline-size: 34rem;
  }

  .ck-fs-liste__kopf .ck-branchen__stand {
    text-align: end;
  }
}


/* --------------------------------------------------------------------------
   4. Ablauf
   -------------------------------------------------------------------------- */

.ck-fs-ablauf {
  position: relative;
  overflow: hidden;
  padding-block: var(--ck-section-y);
  background-color: var(--ck-blue-soft);
  background-image: linear-gradient(135deg, var(--ck-blue-soft) 0%, var(--ck-surface) 55%, rgba(0, 253, 208, 0.16) 100%);
}

.ck-fs-ablauf::before,
.ck-fs-ablauf::after {
  content: "";
  position: absolute;
  inline-size: 28rem;
  block-size: 28rem;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.ck-fs-ablauf::before {
  inset-block-start: -14rem;
  inset-inline-start: -8rem;
  background: radial-gradient(circle, rgba(0, 159, 227, 0.2) 0%, rgba(0, 159, 227, 0) 65%);
}

.ck-fs-ablauf::after {
  inset-block-end: -14rem;
  inset-inline-end: -8rem;
  background: radial-gradient(circle, rgba(0, 253, 208, 0.22) 0%, rgba(0, 253, 208, 0) 65%);
}

.ck-fs-ablauf__inner {
  position: relative;
}

.ck-fs-ablauf__intro {
  margin: 0.75rem auto 0;
  color: var(--ck-muted);
}

.ck-fs-ablauf .ck-ablauf {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* ===================== 33-karriere-support.css ===================== */
/* ==========================================================================
   CodeKlar – 33-karriere-support.css
   Karriere (templates/karriere.html, job.html) und Downloads (Support):

     1  Karriere-Kopf      Buttons unter der Unterzeile
     2  Stellenliste       offene Stellen als Liste statt Kacheln, Hinweis
     3  Icon-Kacheln       Linien-Icons statt Emojis in Werten, Benefits,
                           Kultur und Stellenanzeigen
     4  Downloads          Dateiliste des Allzweck-Blocks blockDownloads
     5  Online-Bewerbung   Formular der Azubi-Seite (Feld bewerbung)

   Ergaenzt 30-fallstudie-job.css (Karriere, Stellenanzeige) und
   40-seiten.css (Allzweck-Bloecke). Tokens aus 00-base.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Karriere-Kopf
   -------------------------------------------------------------------------- */

.ck-career-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.75rem;
}


/* --------------------------------------------------------------------------
   2. Stellenliste
   -------------------------------------------------------------------------- */

.ck-career-jobs {
  scroll-margin-top: calc(var(--ck-header-h) + 1rem);
}

.ck-stellen__kopf {
  max-width: 44rem;
  margin-bottom: 2rem;
}

.ck-stellen__kopf .ck-career-jobs__title {
  margin: 0;
}

.ck-stellen__sub {
  margin: 0.75rem 0 0;
  color: var(--ck-muted);
}

.ck-stellen {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stelle;
}

.ck-stelle {
  counter-increment: stelle;
}

.ck-stelle__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

@media (min-width: 48rem) {
  .ck-stelle__link {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 1.5rem 1.75rem;
  }
}

/* Streifen an der linken Kante waechst beim Ueberfahren. */
.ck-stelle__link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 4px;
  background-image: linear-gradient(to bottom, var(--ck-blue), var(--ck-green));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ck-stelle__link:hover,
.ck-stelle__link:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-stelle__link:hover::before,
.ck-stelle__link:focus-visible::before {
  transform: scaleY(1);
}

.ck-stelle__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  font-weight: var(--ck-weight-bold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--ck-transition), color var(--ck-transition);
}

.ck-stelle__nr::before {
  content: counter(stelle, decimal-leading-zero);
}

.ck-stelle__link:hover .ck-stelle__nr {
  background-image: var(--ck-gradient);
  color: var(--ck-ink);
}

.ck-stelle__body {
  display: grid;
  gap: 0.375rem;
}

.ck-stelle__titel {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  transition: color var(--ck-transition);
}

.ck-stelle__link:hover .ck-stelle__titel {
  color: var(--ck-blue-strong);
}

.ck-stelle__kurz {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ck-ink-soft);
}

.ck-stelle__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  margin-top: 0.25rem;
}

.ck-stelle__meta span {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-pill);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ck-muted);
}

.ck-stelle__pfeil {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .ck-stelle__pfeil {
    grid-column: 3;
  }
}

.ck-stelle__pfeil svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: translate var(--ck-transition);
}

.ck-stelle__link:hover .ck-stelle__pfeil svg {
  translate: 3px 0;
}

/* Die Initiativbewerbung schliesst die Liste gestrichelt ab. */
.ck-stelle--initiativ .ck-stelle__link {
  border-style: dashed;
  background-color: var(--ck-surface-sunken);
}

/* Hinweis unter der Liste (Ausbildung 2027) */
.ck-stellen__hinweis {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-blue-soft);
}

.ck-stellen__hinweis-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-white);
  color: var(--ck-blue-strong);
}

.ck-stellen__hinweis-icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.ck-stellen__hinweis-titel {
  margin: 0 0 0.25rem;
  font-weight: var(--ck-weight-medium);
}

.ck-stellen__hinweis-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ck-ink-soft);
}


/* --------------------------------------------------------------------------
   3. Icon-Kacheln statt Emojis
   -------------------------------------------------------------------------- */

.ck-career-value__icon,
.ck-career-wert__icon,
.ck-career-benefit__icon,
.ck-career-card__icon,
.ck-job-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  font-size: 1.25rem;
  line-height: 1;
}

.ck-career-value__icon svg,
.ck-career-wert__icon svg,
.ck-career-benefit__icon svg,
.ck-career-card__icon svg,
.ck-job-card__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  fill: none;
  stroke: currentColor;
}

.ck-job-tag__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  color: var(--ck-blue-strong);
}

.ck-job-tag__icon svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  fill: none;
  stroke: currentColor;
}


/* --------------------------------------------------------------------------
   4. Downloads
   -------------------------------------------------------------------------- */

.ck-downloads {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-block__downloads {
  max-width: 44rem;
  margin: 2rem auto 0;
}

.ck-split .ck-block__downloads {
  max-width: none;
  margin: 0;
}

.ck-download__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-download__link:hover,
.ck-download__link:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-download__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  transition: background-image var(--ck-transition), color var(--ck-transition);
}

.ck-download__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.ck-download__link:hover .ck-download__icon {
  background-image: var(--ck-gradient);
  color: var(--ck-ink);
}

.ck-download__body {
  display: grid;
  gap: 0.2rem;
}

.ck-download__titel {
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  transition: color var(--ck-transition);
}

.ck-download__link:hover .ck-download__titel {
  color: var(--ck-blue-strong);
}

.ck-download__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ck-ink-soft);
}

.ck-download__meta {
  font-size: 0.8125rem;
  color: var(--ck-muted);
}

.ck-download__pfeil {
  display: inline-flex;
  color: var(--ck-blue-strong);
}

.ck-download__pfeil svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  transition: translate var(--ck-transition);
}

.ck-download__link:hover .ck-download__pfeil svg {
  translate: 0 3px;
}



/* --------------------------------------------------------------------------
   5. Online-Bewerbung (templates/job.html, Feld "bewerbung")
   Kopf links, Formular rechts; die Felder kommen aus 87-formular.css.
   -------------------------------------------------------------------------- */

.ck-bewerbung {
  scroll-margin-top: calc(var(--ck-header-h) + 1rem);
  background-color: var(--ck-surface-sunken);
}

.ck-bewerbung__inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .ck-bewerbung__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }

  .ck-bewerbung__kopf {
    position: sticky;
    top: calc(var(--ck-header-h) + 2rem);
  }
}

.ck-bewerbung__titel {
  margin: 0;
}

.ck-bewerbung__intro {
  margin: 1rem 0 0;
  color: var(--ck-ink-soft);
}

.ck-bewerbung__unterlagen {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
}

.ck-bewerbung__unterlagen-titel {
  margin: 0 0 0.75rem;
  font-weight: var(--ck-weight-medium);
}

.ck-bewerbung__form {
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
}

@media (min-width: 48rem) {
  .ck-bewerbung__form {
    padding: 2rem;
  }
}

/* Auswahlfeld im Stil der Eingabefelder, mit eigenem Pfeil */
.ck-feld__auswahl {
  appearance: none;
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230077aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.125rem;
  cursor: pointer;
}

/* 87-formular.css laedt spaeter und stapelt .ck-feld senkrecht; die hoehere
   Spezifitaet haelt Kaestchen und Text nebeneinander. */
.ck-anfrage__form .ck-feld__check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ck-feld__check input {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ck-blue-strong);
}

/* Azubi-Eintrag in der Stellenliste: zarter Markenverlauf im Hintergrund */
.ck-stelle--azubi .ck-stelle__link {
  background-image: linear-gradient(135deg, var(--ck-blue-soft) 0%, var(--ck-surface) 60%);
}


@media (prefers-reduced-motion: reduce) {
  .ck-stelle__link,
  .ck-stelle__link::before,
  .ck-stelle__pfeil svg,
  .ck-download__link,
  .ck-download__pfeil svg {
    transition: none;
  }

  .ck-stelle__link:hover,
  .ck-download__link:hover {
    transform: none;
  }
}

/* ===================== 40-seiten.css ===================== */
/* ==========================================================================
   CodeKlar – 40-seiten.css
   Die 23 Einzelseiten: Leistungen, Azure, Microsoft 365, KI, Managed
   Services, Über uns und Kontakt.

   Zustaendig fuer templates/standard.html und templates/seiten/kontakt.html.
   Alles hier ist seitenspezifisch. Schrift, Farben, Abstaende, Buttons und
   Karten kommen unveraendert aus 00-base.css; diese Datei erfindet weder
   neue Farben noch neue Groessen, sondern setzt nur die Tokens ein.
   Die Lese-Typografie (.ck-prose) gehoert ebenfalls dem Fundament und wird
   hier NICHT neu definiert – nur dort ergaenzt, wo in einem eigenen
   Container Elemente vorkommen, die das Fundament nicht kennt (h3,
   blockquote im Fliesstext einer Sektion).
   Praefix: ck-
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Seitenkopf
   Der Header liegt fix ueber dem Inhalt, darum traegt der Kopf den Platz
   dafuer selbst. Der zarte Blauverlauf nimmt die Stimmung der Startseite
   auf, ohne ein zweites Hintergrundbild zu laden.
   -------------------------------------------------------------------------- */

.ck-pagehead {
  padding-top: calc(var(--ck-header-h) + clamp(2.5rem, 1.5rem + 3.5vw, 5rem));
  padding-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  background-image: linear-gradient(
    to bottom,
    var(--ck-blue-soft) 0%,
    rgba(230, 246, 253, 0) 100%
  );
}

/* Dieselbe Breite wie der Header: sonst steht das Logo weiter links als
   die Ueberschrift darunter. Der Text darin behaelt seine Lesebreite. */
/* Keine eigene Breite: der Seitenkopf nutzt denselben Container wie der
   Header, damit Logo und Ueberschrift auf einer Kante stehen. Frueher lag
   hier --ck-container-narrow, dadurch stand das Logo 96px weiter links. */
.ck-pagehead__inner {
  max-width: var(--ck-container);
}

.ck-pagehead__title,
.ck-pagehead__lead {
  max-width: var(--ck-textbreite, 52rem);
}

.ck-pagehead__title {
  margin: 0;
}

/* Abstaende wie im Hero der Startseite: Unterzeile 2,5rem unter der
   Ueberschrift, Buttons 2rem unter dem Text. */
.ck-pagehead__lead {
  margin: 2.5rem 0 0;
  max-width: 46ch;
  color: var(--ck-ink);
}

.ck-pagehead__text {
  margin-top: 1.5rem;
  max-width: 68ch;
}

.ck-pagehead__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Die Kontaktseite braucht keinen Einleitungstext und darf enger stehen. */
.ck-pagehead--kontakt {
  padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}


/* --------------------------------------------------------------------------
   2. Inhaltsbloecke
   -------------------------------------------------------------------------- */

.ck-block {
  padding-block: var(--ck-section-y);
}

/* Zwischen zwei aufeinanderfolgenden Bloecken steht eine Haarlinie statt
   eines Farbwechsels – ruhiger als abwechselnd graue Flaechen. */
.ck-block + .ck-block > .ck-block__inner {
  border-top: 1px solid var(--ck-border);
  padding-top: var(--ck-section-y);
}

.ck-block + .ck-block {
  padding-top: 0;
}

.ck-block__head {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.ck-block__title {
  margin: 0 auto;
}

.ck-block__intro {
  margin: 1rem auto 0;
  max-width: 62ch;
}

/* Fliesstext einer Sektion: Lesebreite, zentriert im Raster. */
.ck-block__prose {
  max-width: 68ch;
  margin: 2rem auto 0;
}

.ck-block__cards {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.ck-block__list {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.ck-block__cta {
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0;
  text-align: center;
}

/* Ueberschriften, Zitate und Listen im Fliesstext einer Sektion. Das
   Fundament kennt in .ck-prose nur Absaetze, Listen und Links. */
.ck-block__prose h3,
.ck-pagehead__text h3,
.ck-faq__antwort h3 {
  margin: 2rem 0 0;
  font-size: 1.25rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.35;
  color: var(--ck-ink);
}

.ck-block__prose blockquote,
.ck-pagehead__text blockquote {
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ck-blue);
  color: var(--ck-ink);
}

.ck-block__prose blockquote p,
.ck-pagehead__text blockquote p {
  font-size: 1.125rem;
  line-height: 1.55;
}

.ck-block__prose blockquote li,
.ck-pagehead__text blockquote li {
  list-style: none;
}

.ck-block__prose blockquote ul,
.ck-pagehead__text blockquote ul {
  padding-left: 0;
}


/* --------------------------------------------------------------------------
   3. Leistungsbaustein (Karte)
   Der Rahmen ist eine eigene Huelle, damit dieselbe Karte mit und ohne
   Verlaufsrand gesetzt werden kann: mit Rand fuer den Kernbereich einer
   Seite, ohne Rand fuer die ruhigeren Bloecke darunter.
   -------------------------------------------------------------------------- */

.ck-baustein__frame {
  height: 100%;
}

.ck-baustein {
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .ck-baustein {
    padding: 2rem;
  }
}

.ck-baustein__title {
  margin: 0 0 1rem;
}

/* Wie in den Leistungskarten der Startseite: etwas enger als der
   Fliesstext einer ganzen Seite. */
.ck-baustein__text {
  line-height: 1.556;
}

.ck-baustein__text > p + p {
  margin-top: 1.25rem;
}

/* Pfeil-Button unten rechts, sitzt durch .ck-card__body in allen Karten
   einer Reihe auf gleicher Hoehe. */
.ck-baustein__more {
  align-self: flex-end;
  margin-top: 1.25rem;
}


/* --------------------------------------------------------------------------
   4. Aufzaehlung mit Haken
   -------------------------------------------------------------------------- */

.ck-checklist {
  display: grid;
  gap: 0.875rem 2rem;
  margin: 0 auto;
  padding: 0;
  max-width: 60rem;
  list-style: none;
}

@media (min-width: 768px) {
  .ck-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ck-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ck-ink);
  line-height: 1.55;
}

.ck-checklist__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.3em;
  fill: var(--ck-blue-strong);
}


/* --------------------------------------------------------------------------
   5. Vorher / Nachher
   -------------------------------------------------------------------------- */

.ck-wandel {
  display: grid;
  gap: var(--ck-gap);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

@media (min-width: 768px) {
  .ck-wandel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.ck-wandel__col {
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

@media (min-width: 768px) {
  .ck-wandel__col {
    padding: 2rem;
  }
}

.ck-wandel__col--vorher {
  background-color: var(--ck-surface-sunken);
}

.ck-wandel__col--nachher {
  border-color: var(--ck-blue);
  background-color: var(--ck-blue-soft);
}

.ck-wandel__title {
  margin: 0 0 1rem;
}

.ck-wandel__col--nachher .ck-wandel__title {
  color: var(--ck-blue-deep);
}

.ck-wandel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-wandel__item {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ck-ink);
  line-height: 1.55;
}

.ck-wandel__item + .ck-wandel__item {
  margin-top: 0.75rem;
}

/* Zeichen statt Icon: im "Vorher" ein Minus, im "Nachher" ein Haken.
   Beide sind rein dekorativ und stehen darum in ::before. */
.ck-wandel__item::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "–";
  color: var(--ck-muted);
  font-weight: var(--ck-weight-bold);
}

.ck-wandel__col--nachher .ck-wandel__item::before {
  content: "✓";
  color: var(--ck-blue-deep);
}


/* --------------------------------------------------------------------------
   6. Beratungsband
   Sektionen, die nur aus Ueberschrift und Button bestehen, werden zum
   ruhigen Band – so gehen sie zwischen den Kartenrastern nicht unter.
   -------------------------------------------------------------------------- */

.ck-block--band {
  padding-block: var(--ck-section-y-sm);
  background-color: var(--ck-blue-soft);
}

.ck-block--band .ck-block__inner {
  text-align: center;
}

/* Fliesstext und Karten laufen linksbuendig weiter. Zentriert waren vier
   Absaetze hintereinander kaum zu lesen — das Auge findet den Zeilenanfang
   nicht wieder. */
.ck-block--band .ck-block__prose,
.ck-block--band .ck-block__cards {
  text-align: start;
}

.ck-block--band .ck-block__cta {
  margin-top: 1.75rem;
}

/* Die Haarlinie zwischen zwei Bloecken entfaellt, wo eine Flaeche trennt. */
.ck-block--band + .ck-block > .ck-block__inner,
.ck-block + .ck-block--band > .ck-block__inner {
  border-top: 0;
}

.ck-block + .ck-block--band {
  padding-top: var(--ck-section-y-sm);
}

.ck-block--band + .ck-block > .ck-block__inner {
  padding-top: 0;
}

.ck-block--band + .ck-block {
  padding-top: var(--ck-section-y);
}


/* --------------------------------------------------------------------------
   7. Haeufige Fragen
   <details>/<summary> braucht kein JavaScript: die Fragen sind per Tastatur
   bedienbar, werden als aufklappbar angesagt und bleiben bei der Suche im
   Browser auffindbar.
   -------------------------------------------------------------------------- */

.ck-faq {
  padding-block: var(--ck-section-y-band);
  background-color: var(--ck-surface-muted);
}

.ck-faq__title {
  margin-inline: auto;
}

.ck-faq__list {
  max-width: 52rem;
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) auto 0;
}

.ck-faq__item {
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

.ck-faq__item + .ck-faq__item {
  margin-top: 0.75rem;
}

.ck-faq__item[open] {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
}

.ck-faq__item:hover,
.ck-faq__item:focus-within {
  border-color: var(--ck-blue);
}

.ck-faq__item {
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-faq__summary:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 2px;
  border-radius: var(--ck-radius);
}

.ck-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
  cursor: pointer;
  list-style: none;
}

/* Das Standarddreieck von Safari und Chrome entfaellt – der eigene Pfeil
   sitzt rechts und zeigt denselben Zustand an. */
.ck-faq__summary::-webkit-details-marker {
  display: none;
}

.ck-faq__summary:hover .ck-faq__frage {
  color: var(--ck-blue-deep);
}

.ck-faq__frage {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.4;
  color: var(--ck-ink);
  transition: color var(--ck-transition);
}

.ck-faq__chevron {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ck-blue-strong);
  transition: transform var(--ck-transition);
}

.ck-faq__item[open] .ck-faq__chevron {
  transform: rotate(180deg);
}

.ck-faq__antwort {
  padding: 0 1.5rem 1.5rem;
}

.ck-faq__antwort > *:first-child {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   8. Kontaktwege
   Das Original hatte hier ein Formular (Contact Form 7). Statisch laesst
   sich das nicht betreiben, darum stehen die Wege gross und unmittelbar
   anwaehlbar: eine Zeile, ein Ziel, ein Klick.
   -------------------------------------------------------------------------- */

.ck-wege {
  display: grid;
  gap: var(--ck-gap);
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ck-wege {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ck-weg__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  text-decoration: none;
  transition: border-color var(--ck-transition),
    box-shadow var(--ck-transition), transform var(--ck-transition);
}

.ck-weg__link:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-weg__icon {
  width: 3rem;
  height: 3rem;
}

.ck-weg__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Die Umriss-Icons tragen ihre Linie in stroke, die Flaechen-Icons in
   fill – beide sollen die Farbe des Badges uebernehmen. */
.ck-weg__icon svg[fill="none"] {
  fill: none;
  stroke: currentColor;
}

.ck-weg__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ck-weg__art {
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-weg__wert {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ck-zeiten {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: 1.5rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface-muted);
}

.ck-zeiten__title {
  margin: 0 0 0.5rem;
}

.ck-zeiten__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ck-ink);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Begriffsreihe

   Fuer kurze Begriffe, die keine Spalten vertragen: eine Zeile, die
   umbricht, wenn der Platz endet. Die Hakenliste daneben bleibt den
   Aufzaehlungen aus ganzen Saetzen vorbehalten — mit acht Produktnamen
   standen dort zwei schmale Saeulen und eine grosse Leere dazwischen.
   -------------------------------------------------------------------------- */

.ck-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ck-chips__item {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ck-border);
  border-radius: 999px;
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: nowrap;
}

.ck-block__chips {
  margin-block-start: 2rem;
}

/* --------------------------------------------------------------------------
   Schaubild im Fliesstext

   Erklaerende Grafik, kein Schmuckbild: sie steht mittig, laeuft nicht
   ueber die Textbreite hinaus und traegt eine Bildunterschrift, die den
   Inhalt in einem Satz zusammenfasst. Wer die Grafik nicht sehen kann,
   verliert damit nichts — der Alternativtext beschreibt sie zusaetzlich.
   -------------------------------------------------------------------------- */

.ck-schaubild {
  margin: 2.5rem 0 0;
}

.ck-schaubild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

.ck-schaubild figcaption {
  margin-block-start: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ck-ink-soft);
}


/* ==========================================================================
   Buendigkeit und Abstaende in den Inhaltsbloecken

   Kopf, Fliesstext und Listen hatten je eigene Breiten (48rem / 68ch /
   60rem) und waren jeweils fuer sich zentriert. Damit begann jeder Block
   an einer anderen linken Kante — auf jeder Seite, die mehr als einen
   Blocktyp benutzt. Jetzt teilen sie sich eine Breite und stehen
   untereinander auf derselben Kante.

   Die Karten- und Rasterbloecke bleiben davon ausgenommen: sie sind kein
   Fliesstext, sondern nutzen die volle Containerbreite.
   ========================================================================== */

:root {
  --ck-textbreite: 52rem;
}

.ck-block__head,
.ck-block__prose,
.ck-block__list,
.ck-block__zeitstrahl,
.ck-block__chips,
.ck-wandel {
  max-width: var(--ck-textbreite);
  margin-inline: auto;
}

/* Fliesstext direkt vor einer Liste: die Liste braucht Luft, sonst klebt
   sie am letzten Absatz. */
.ck-block__prose + .ck-block__list,
.ck-block__prose + .ck-wandel,
.ck-block__prose + .ck-block__zeitstrahl,
.ck-block__prose + .ck-block__cards,
.ck-block__prose + .ck-block__chips {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.ck-block__list + .ck-block__cta,
.ck-wandel + .ck-block__cta,
.ck-block__cards + .ck-block__cta {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* --------------------------------------------------------------------------
   Zeitstrahl: Spaltenzahl nach Anzahl der Schritte

   Fest auf fuenf Spalten stand der sechste Schritt allein in einer zweiten
   Zeile. :has() zaehlt die Kinder, ohne dass der Generator eine Klasse
   setzen muss.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .ck-block__zeitstrahl {
    max-width: none;
  }

  /* Die Spaltenzahl kommt als Klasse aus dem Generator. */
  .ck-ablauf--s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.75rem; }
  .ck-ablauf--s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ck-ablauf--s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Der Strich endet am Ende jeder Reihe, statt ins Leere zu laufen. */
  /* Elementselektoren davor: die Basisregel fuer --marken hat dieselbe
     Spezifitaet, und bei Gleichstand haengt das Ergebnis an der Reihenfolge
     im zusammengebauten Stylesheet — darauf soll es nicht ankommen. */
  ol.ck-ablauf--s3 > li.ck-ablauf__schritt:nth-child(3n)::before,
  ol.ck-ablauf--s4 > li.ck-ablauf__schritt:nth-child(4n)::before,
  ol.ck-ablauf--s5 > li.ck-ablauf__schritt:nth-child(5n)::before {
    content: none;
  }
}

/* ==========================================================================
   Vorher / Nachher: Leben in die beiden Spalten

   Die Gegenüberstellung ist der Moment, in dem der Leser den Unterschied
   sehen soll. Bisher standen dort zwei stille Kästen. Jetzt hebt sich die
   Spalte beim Überfahren an, ihre Kante faerbt sich, und die Zeile unter
   dem Zeiger tritt hervor — die Bewegung folgt dem Blick, statt die ganze
   Flaeche gleichmaessig zu beleuchten.
   ========================================================================== */

.ck-wandel__col {
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-wandel__col:hover {
  border-color: var(--ck-border-strong, #cbd5e1);
  box-shadow: var(--ck-shadow);
  transform: translateY(-3px);
}

/* Die rechte Spalte ist das Ziel — sie bekommt beim Ueberfahren die
   Markenfarbe, die linke bleibt neutral. */
.ck-wandel__col--nachher:hover {
  border-color: var(--ck-blue-strong);
}

.ck-wandel__item {
  border-radius: var(--ck-radius-sm, .5rem);
  transition: background-color var(--ck-transition), transform var(--ck-transition);
}

.ck-wandel__col:hover .ck-wandel__item {
  /* Die uebrigen Zeilen treten leicht zurueck, damit die Zeile unter dem
     Zeiger von selbst hervorsticht. */
  opacity: .72;
  transition: opacity var(--ck-transition), background-color var(--ck-transition),
    transform var(--ck-transition);
}

.ck-wandel__col .ck-wandel__item:hover {
  opacity: 1;
  transform: translateX(3px);
}

.ck-wandel__col--nachher .ck-wandel__item:hover {
  background-color: rgba(0, 159, 227, .07);
}

@media (prefers-reduced-motion: reduce) {
  .ck-wandel__col,
  .ck-wandel__item {
    transition: none;
  }

  .ck-wandel__col:hover,
  .ck-wandel__col .ck-wandel__item:hover {
    transform: none;
  }
}

/* ==========================================================================
   Referenzkarten auf Leistungsseiten

   Aufbau wie auf der Fallstudien-Uebersicht: Logo, Firma, darunter Branche
   und Groesse, der Text und ein Weg in die Fallstudie. Vorher presste der
   Kartentitel all das in eine Zeile und lief ueber vier Zeilen um.
   ========================================================================== */

.ck-referenzen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
}

@media (min-width: 640px) {
  .ck-referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ck-referenzen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ck-referenz {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-referenz:hover,
.ck-referenz:focus-within {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

/* Das Logo steht auf hellem Grund, damit auch dunkle Marken tragen. */
.ck-referenz__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.5rem;
  block-size: 3rem;
  margin-block-end: 1.125rem;
  padding: .375rem .625rem;
  border-radius: var(--ck-radius-sm, .5rem);
  background-color: var(--ck-surface-muted);
}

.ck-referenz__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.ck-referenz__firma {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.35;
  color: var(--ck-ink);
  transition: color var(--ck-transition);
}

.ck-referenz__meta {
  margin: .375rem 0 0;
  color: var(--ck-muted);
}

.ck-referenz__text {
  margin: .875rem 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ck-ink-soft);
}

/* Der Link deckt die ganze Karte ab — genau ein Link je Karte, damit
   Screenreader keinen zweiten, gleichlautenden Eintrag vorlesen. */
.ck-referenz__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block-start: auto;
  padding-block-start: 1.125rem;
  font-size: .9375rem;
  color: var(--ck-blue-strong);
}

.ck-referenz__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ck-referenz__link svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  transition: transform var(--ck-transition);
}

.ck-referenz:hover .ck-referenz__link svg {
  transform: translateX(3px);
}

.ck-referenz:hover .ck-referenz__firma {
  color: var(--ck-blue-strong);
}

@media (prefers-reduced-motion: reduce) {
  .ck-referenz,
  .ck-referenz__link svg,
  .ck-referenz__firma { transition: none; }
  .ck-referenz:hover { transform: none; }
}

/* Schaubild als Inline-SVG: nimmt die volle Textbreite, behaelt sein
   Seitenverhaeltnis und traegt die Hausschrift, weil die Beschriftungen
   font-family erben. */
.ck-schaubild--svg {
  margin-inline: calc(-1 * clamp(0rem, 4vw - 1rem, 4rem));
}

.ck-schaubild__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  font-family: var(--ck-font);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
}

/* ===================== 50-cta.css ===================== */
/* ==========================================================================
   CodeKlar – 50-cta.css
   Der Handlungsaufruf im Kopf ("Ihr Weg zu uns") und sein Gegenstueck im
   Off-Canvas-Menue. Ergaenzt 00-base.css, aendert dort nichts.

   Warum ueberhaupt eine Ueberarbeitung?
   Der Kunde: "Der Button ganz oben mit Ihr Weg zu uns, ist wirklich nicht
   schoen." Der Text bleibt, die Gestaltung nicht. Gemessen am bisherigen
   Stand stoerten drei Dinge:

   1. Farbe als Fremdkoerper. Der Kopf ist sonst komplett schwarz-auf-hell;
      der blaue Pill war die einzige Farbflaeche neben dem Logo. Ueber dem
      hell-cyanfarbenen Hero liegt Blau auf Blau — die Flaeche verliert Kante,
      statt zu fuehren.
   2. Widerspruch zur eigenen Bildsprache. Jeder andere Primaerbutton der
      Seite ist schwarz: "Kostenfreie Erstberatung" im Hero, die sechs
      Pfeil-Buttons der Leistungskarten, "Case Study ansehen". Der Kopf-CTA
      war der einzige, der aus der Reihe fiel.
   3. Unruhige Proportion. Die Hoehe sprang je nach Breite zwischen 40 px
      (ab 1280) und 46 px (ab 1536), der Innenabstand war mit 20/32 px waag-
      recht gegen 6/8 px senkrecht sehr breit — der Button wirkte gedrungen
      und zugleich unentschieden gegenueber der Navigation daneben.

   Zwei Varianten stehen bereit, umgeschaltet wird mit einem Wort in
   partials/header.html:
     .ck-header__cta--a   schwarze Pille mit Pfeil   <- aktiv
     .ck-header__cta--b   heller Kontur-Button       <- Alternative
   Beide sind hier ausformuliert und nicht auskommentiert: so genuegt zum
   Ausprobieren ein einziger Buchstabe im Markup, kein zweiter Eingriff im CSS.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Gemeinsame Grundlage beider Varianten

   Setzt die blaue Fuellung und die Groessenspruenge aus 00-base.css zurueck
   und legt eine feste Hoehe fest. 44 px sind kein Zufall: genau so hoch sind
   die Buttons im Hero (20px * 1,4 + 2 * 7px + 2 * 1px Rand). Kopf-CTA und
   Hero-CTA liegen damit auf demselben Raster, der Kopf wirkt ruhiger.
   Unterhalb von 1280 px wird es enger — dort 38 px, damit der Navigation
   genug Platz bleibt und nichts umbricht.
   -------------------------------------------------------------------------- */

.ck-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.375rem;
  /* Die Hoehe kommt aus min-height, nicht aus dem Innenabstand. Dadurch
     bleibt sie stabil, egal wie gross die Beschriftung gerade ist. */
  padding: 0.125rem 0.95rem;
  font-size: 0.875rem;
  font-weight: var(--ck-weight-regular);
  line-height: 1.3;
  letter-spacing: 0.01em;
  background-image: none;
}

@media (min-width: 1280px) {
  .ck-header__cta {
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.125rem 1.5rem;
    font-size: 1rem;
  }
}

@media (min-width: 1536px) {
  .ck-header__cta {
    padding: 0.125rem 1.75rem;
    font-size: 1.0625rem;
  }
}

/* Der Pfeil gibt Richtung, ohne zu draengen: kleiner als die Schrift
   (00-base.css setzt .ck-btn svg auf 18px — hier bewusst zurueckgenommen),
   mit duenner Linie, und er wandert beim Hovern nur 2 px nach rechts.

   Zwischen 1024 und 1279 px bleibt er aus. In diesem Bereich teilt sich die
   Navigation den Platz per space-between und darf nicht umbrechen
   (white-space: nowrap); der Pfeil kostete dort rund 21 px, die der laengste
   Menuepunkt "KI Loesungen fuer Unternehmen" braucht. Ab 1280 px ist die
   Leiste entspannt genug. */
.ck-header__cta-arrow {
  display: none;
  width: 0.9375rem;
  height: 0.9375rem;
  flex: 0 0 auto;
  transition: transform var(--ck-transition);
}

@media (min-width: 1280px) {
  .ck-header__cta-arrow {
    display: block;
  }
}

.ck-header__cta:hover .ck-header__cta-arrow,
.ck-header__cta:focus-visible .ck-header__cta-arrow {
  transform: translateX(2px);
}

/* Fokus: der Ring aus 00-base.css (3px --ck-blue-strong) bleibt, bekommt aber
   1 px mehr Luft, damit er auf der Pille nicht klebt.
   Kontrast des Rings #0077aa: 4,98:1 auf Weiss (Kopf nach dem Scrollen),
   4,22:1 auf der schwarzen Fuellung, 4,08:1 auf dem hellsten Hero-Ton —
   alle drei ueber den geforderten 3:1 fuer Bedienelemente. */
.ck-header__cta:focus-visible {
  outline: 3px solid var(--ck-blue-strong);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   2. Variante A — schwarze Pille mit Pfeil   (AKTIV)

   Warum diese: Sie fuegt den Kopf-CTA in die Familie ein, die die Seite
   ohnehin spricht — schwarze Pille, weisse Schrift, Pfeil. Sie ist in beiden
   Kopfzustaenden identisch gut: ueber dem hellen Hero und auf dem weissen
   Kopf nach dem Scrollen liegt dieselbe deckende Flaeche, es gibt also gar
   keinen zweiten Zustand, der schiefgehen koennte. Und sie laesst das Cyan
   dort wirken, wo es hingehoert: im Logo und in den Ueberschriften.

   Kontrast: #fff auf #000 = 21:1 (gefordert 4,5:1).
             #fff auf #1f2937 (Hover) = 14,68:1.
   -------------------------------------------------------------------------- */

.ck-header__cta.ck-header__cta--a {
  border-radius: var(--ck-radius-pill);
  border-color: var(--ck-black);
  background-color: var(--ck-black);
  background-image: none;
  color: var(--ck-white);
}

.ck-header__cta.ck-header__cta--a:hover,
.ck-header__cta.ck-header__cta--a:focus-visible {
  border-color: var(--ck-ink-strong);
  background-color: var(--ck-ink-strong);
  background-image: none;
  color: var(--ck-white);
  /* Sehr flacher Schatten — er soll den 1px-Lift aus .ck-btn:hover nur
     begleiten, nicht die Pille vom Kopf abheben. */
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.6);
}

/* Gedrueckt: zurueck auf die Grundflaeche, Lift und Schatten weg. Ohne das
   bliebe der Button beim Klicken angehoben stehen. */
.ck-header__cta.ck-header__cta--a:active {
  transform: translateY(0);
  border-color: var(--ck-black);
  background-color: var(--ck-black);
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   3. Variante B — heller Kontur-Button mit Cyan-Akzent   (nicht aktiv)

   Zum Ausprobieren: in partials/header.html
       class="ck-btn ck-header__cta ck-header__cta--a"
   zu
       class="ck-btn ck-header__cta ck-header__cta--b"
   aendern, sonst nichts.

   Der Gegenentwurf: nicht fuellen, sondern nur umreissen. Weicher Radius
   statt Pille, schwarze Haarlinie, schwarze Schrift, und der Pfeil traegt
   als einziges Element das Marken-Cyan. Das ist die leiseste Loesung und
   passt sich der Navigation an, statt sich davor zu stellen.

   Warum sie trotzdem nicht aktiv ist: Der Kopf-CTA ist die einzige
   Handlungsaufforderung, die auf jeder der 135 Seiten dauerhaft sichtbar
   bleibt. Als Kontur-Button spricht er dieselbe Sprache wie der sekundaere
   Hero-Button "KI Leistungen" — die Hauptaktion saehe damit aus wie eine
   Nebenaktion. Ueber dem Hero-Bild verliert eine Haarlinie ausserdem
   schneller an Halt als eine deckende Flaeche.

   Kontrast: #000 auf Weiss = 21:1, auf dem hellsten Hero-Ton 17,23:1.
             Rahmen #000 = 21:1 (gefordert 3:1).
             Pfeil #0077aa auf Weiss = 4,98:1 (gefordert 3:1).
             Hover #fff auf #000 = 21:1.
   -------------------------------------------------------------------------- */

.ck-header__cta.ck-header__cta--b {
  border-radius: 0.625rem;
  border-color: var(--ck-ink);
  background-color: transparent;
  background-image: none;
  color: var(--ck-ink);
}

.ck-header__cta.ck-header__cta--b .ck-header__cta-arrow {
  color: var(--ck-blue-strong);
  transition: transform var(--ck-transition), color var(--ck-transition);
}

.ck-header__cta.ck-header__cta--b:hover,
.ck-header__cta.ck-header__cta--b:focus-visible {
  border-color: var(--ck-ink);
  background-color: var(--ck-ink);
  background-image: none;
  color: var(--ck-white);
}

.ck-header__cta.ck-header__cta--b:hover .ck-header__cta-arrow,
.ck-header__cta.ck-header__cta--b:focus-visible .ck-header__cta-arrow {
  color: currentColor;
}

.ck-header__cta.ck-header__cta--b:active {
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   4. Off-Canvas-Menue: der Button am Fuss des mobilen Menues
   (.ck-mobilemenu__cta) wird in styles/99-mobilmenu.css gestaltet.
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   5. Reduzierte Bewegung

   00-base.css kuerzt bereits alle Uebergaenge auf 0,01 ms und nimmt den
   1px-Lift zurueck. Der wandernde Pfeil wuerde dadurch aber nicht ruhig,
   sondern nur schlagartig springen — deshalb hier ganz abgeschaltet.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ck-header__cta:hover .ck-header__cta-arrow,
  .ck-header__cta:focus-visible .ck-header__cta-arrow {
    transform: none;
  }

  .ck-header__cta.ck-header__cta--a:hover,
  .ck-header__cta.ck-header__cta--a:focus-visible {
    box-shadow: none;
  }
}

/* ===================== 60-suche.css ===================== */
/* ============================================================
   Suche auf der Blog- und Lexikon-Uebersicht
   Das Feld ist im Markup hidden und wird per JS eingeblendet —
   ohne JavaScript bleibt die vollstaendige Liste stehen.
   ============================================================ */

.ck-search {
  margin-block: 0 2.5rem;
}

.ck-search__form {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 34rem;
}

.ck-search__icon {
  position: absolute;
  inset-inline-start: 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ck-ink-soft, #55636f);
  pointer-events: none;
}

.ck-search__input {
  inline-size: 100%;
  padding: 0.9rem 3rem 0.9rem 3rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ck-ink, #1d2327);
  background-color: #fff;
  border: 1px solid var(--ck-border, #dde3ea);
  border-radius: 999px;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ck-search__input::placeholder { color: #8a95a1; }

.ck-search__input:hover {
  border-color: #b9c4cf;
}

.ck-search__input:focus-visible {
  outline: none;
  border-color: var(--ck-blue, #009fe3);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, .22);
}

/* Das native X von Chrome/Edge stoert neben unserem eigenen Knopf */
.ck-search__input::-webkit-search-cancel-button { display: none; }

.ck-search__clear {
  position: absolute;
  inset-inline-end: 0.75rem;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  color: var(--ck-ink-soft, #55636f);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.ck-search__clear:hover { background-color: #eef2f6; color: var(--ck-ink, #1d2327); }
.ck-search__clear:focus-visible {
  outline: 2px solid var(--ck-blue, #009fe3);
  outline-offset: 2px;
}

.ck-search__status {
  margin-block-start: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ck-ink-soft, #55636f);
}

/* ---------- Trefferliste ---------- */

.ck-search__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--ck-border, #dde3ea);
}

.ck-search__item { border-block-end: 1px solid var(--ck-border, #dde3ea); }

.ck-search__link {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-block: 1.25rem;
  padding-inline: 0.25rem;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s ease;
}

.ck-search__link:hover,
.ck-search__link:focus-visible { background-color: #f6f9fb; }

.ck-search__link:focus-visible {
  outline: 2px solid var(--ck-blue, #009fe3);
  outline-offset: -2px;
}

.ck-search__thumb {
  flex: 0 0 auto;
  inline-size: 6.5rem;
  block-size: 4.25rem;
  object-fit: cover;
  border-radius: 0.5rem;
  background-color: #eef2f6;
}

.ck-search__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-inline-size: 0;
}

.ck-search__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--ck-ink-soft, #55636f);
}

.ck-search__kind {
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0077aa;
  background-color: rgba(0, 159, 227, .12);
  border-radius: 999px;
}

.ck-search__cat::after {
  content: '·';
  margin-inline-start: 0.5rem;
  color: #b9c4cf;
}

.ck-search__meta:has(.ck-search__cat:last-child) .ck-search__cat::after { content: none; }

.ck-search__title {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--ck-ink, #1d2327);
}

.ck-search__snippet {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ck-ink-soft, #55636f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ck-search mark,
.ck-search__snippet mark,
.ck-search__title mark {
  padding: 0 .1em;
  color: inherit;
  background-color: rgba(0, 159, 227, .22);
  border-radius: 3px;
}

.ck-search__empty {
  padding-block: 2.5rem;
  font-size: 1.0625rem;
  color: var(--ck-ink-soft, #55636f);
}

@media (max-width: 40rem) {
  .ck-search__thumb { inline-size: 4.5rem; block-size: 3rem; }
  .ck-search__link { gap: 0.875rem; }
  .ck-search__title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-search__input,
  .ck-search__clear,
  .ck-search__link { transition: none; }
}

/* ===================== 65-azbar.css ===================== */
/* ============================================================
   A–Z-Leiste im Lexikon
   Ruhige Variante des Vorbilds: der "Alle Buchstaben"-Knopf traegt
   die Markenfarbe, die Buchstaben selbst bleiben zurueckhaltend und
   werden erst bei Auswahl kraeftig.
   ============================================================ */

.ck-azbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-block: 0 2.5rem;
  padding: 2rem 1.25rem;
  background: linear-gradient(170deg, #f2f9fd 0%, #eaf5fb 100%);
  border: 1px solid var(--ck-border, #dde3ea);
  border-radius: var(--ck-radius-lg, 1rem);
}

/* ---------- "Alle Buchstaben" ---------- */

.ck-azbar__all {
  padding: 0.7rem 1.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ck-ink, #1d2327);
  background-color: #fff;
  border: 1px solid var(--ck-border, #dde3ea);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ck-azbar__all:hover { border-color: var(--ck-blue, #009fe3); }

.ck-azbar__all.is-active {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.ck-azbar__all:focus-visible {
  outline: 2px solid var(--ck-blue, #009fe3);
  outline-offset: 2px;
}

/* ---------- Buchstabenreihe ---------- */

.ck-azbar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-azbar__item { display: flex; }

.ck-azbar__letter {
  display: grid;
  place-items: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--ck-ink, #1d2327);
  background: none;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ck-azbar__letter:hover {
  color: #0077aa;
  background-color: #fff;
  border-color: var(--ck-border, #dde3ea);
}

.ck-azbar__letter.is-active {
  color: #fff;
  background-color: var(--ck-blue, #009fe3);
  border-color: var(--ck-blue, #009fe3);
}

.ck-azbar__letter:focus-visible {
  outline: 2px solid var(--ck-blue, #009fe3);
  outline-offset: 2px;
}

/* Buchstaben ohne Eintrag: sichtbar, aber ruhig — so bleibt das
   Alphabet als Ganzes lesbar und die Leiste springt nicht. */
.ck-azbar__letter--empty {
  color: #b4c0cb;
  cursor: default;
}

.ck-azbar__status {
  margin-block: -1.25rem 2rem;
  font-size: 0.9375rem;
  color: var(--ck-ink-soft, #55636f);
  text-align: center;
}

.ck-azbar__status:empty { margin: 0; }

@media (max-width: 40rem) {
  .ck-azbar { padding: 1.5rem 0.75rem; gap: 1rem; }
  .ck-azbar__letter { inline-size: 2.125rem; block-size: 2.125rem; font-size: 0.9375rem; }
  .ck-azbar__all { padding: 0.6rem 1.4rem; font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-azbar__all,
  .ck-azbar__letter { transition: none; }
}

/* ===================== 70-team.css ===================== */
/* ============================================================
   Team-Raster (Ueber uns)
   ============================================================ */

.ck-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-team__item { min-inline-size: 0; }

.ck-team__card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--ck-border, #dde3ea);
  border-radius: var(--ck-radius, 0.75rem);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ck-team__item:hover .ck-team__card {
  border-color: var(--ck-blue, #009fe3);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 32, 44, .08);
}

.ck-team__media {
  position: relative;
  aspect-ratio: 0.82;
  background: linear-gradient(160deg, #e8f5fc 0%, #d6eef9 100%);
  overflow: hidden;
}

.ck-team__photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Wenn kein Foto vorliegt: Initialen statt leerer Flaeche */
.ck-team__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  font-weight: 300;
  color: #fff;
  background: linear-gradient(160deg, var(--ck-blue, #009fe3) 0%, #00c4c0 100%);
  /* Die Initialen kommen fertig aus dem Generator. Frueher stand hier der
     ganze Name, den text-indent: -100vw hinausschob, waehrend
     ::first-letter den ersten Buchstaben zurueckholen sollte — das griff
     nicht, die Kachel blieb leer. */
  letter-spacing: 0.05em;
}

.ck-team__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem 1.125rem;
}

.ck-team__text { min-inline-size: 0; }

.ck-team__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ck-ink, #1d2327);
}

.ck-team__role {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ck-ink-soft, #55636f);
}

.ck-team__linkedin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: #fff;
  background-color: var(--ck-blue, #009fe3);
  border-radius: 999px;
  transition: background-color .15s ease, transform .15s ease;
}

.ck-team__linkedin:hover { background-color: #0077aa; transform: scale(1.06); }
.ck-team__linkedin:focus-visible {
  outline: 2px solid var(--ck-ink, #1d2327);
  outline-offset: 2px;
}

/* ---------- Karte "Dein neuer Job?" ---------- */

.ck-team__job {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  block-size: 100%;
  min-block-size: 14rem;
  padding: 1.75rem;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(160deg, #f4f8fb 0%, #e8f5fc 100%);
  border: 1px dashed var(--ck-blue, #009fe3);
  border-radius: var(--ck-radius, 0.75rem);
  transition: background .2s ease, border-color .2s ease;
}

.ck-team__job:hover { background: linear-gradient(160deg, #eaf4fa 0%, #d9eefa 100%); }
.ck-team__job:focus-visible {
  outline: 2px solid var(--ck-blue, #009fe3);
  outline-offset: 2px;
}

.ck-team__job-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ck-ink, #1d2327);
}

.ck-team__job-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0077aa;
}

.ck-team__job:hover .ck-team__job-link svg { transform: translateX(3px); }
.ck-team__job-link svg { transition: transform .18s ease; }

@media (max-width: 30rem) {
  .ck-team { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1rem; }
  .ck-team__body { padding: 0.875rem 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-team__card,
  .ck-team__linkedin,
  .ck-team__job,
  .ck-team__job-link svg { transition: none; }
  .ck-team__item:hover .ck-team__card { transform: none; }
}

/* ===================== 71-gruender.css ===================== */
/* ==========================================================================
   CodeKlar – 71-gruender.css
   Gruenderblock auf der Ueber-uns-Seite: freigestelltes Portrait links mit
   einer ueberlappenden Zitatkarte, rechts Ueberschrift und Fliesstext.

   Zustaendig fuer das Feld "blockPortrait" in templates/standard.html.
   Farben, Abstaende, Radien und Schatten kommen aus den Tokens in
   00-base.css; diese Datei erfindet keine neuen Werte.
   Praefix: ck-gruender
   ========================================================================== */

.ck-gruender {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .ck-gruender {
    /* 5:7 — das Bild bekommt gut zwei Fuenftel, der Text den Rest. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }
}


/* --------------------------------------------------------------------------
   1. Textspalte
   Kopf und Fliesstext stehen linksbuendig neben dem Bild, nicht zentriert
   ueber die ganze Breite wie in den uebrigen Bloecken.
   -------------------------------------------------------------------------- */

.ck-gruender .ck-block__head,
.ck-gruender .ck-block__prose {
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

.ck-gruender .ck-block__intro {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.5;
  color: var(--ck-ink);
}

.ck-gruender .ck-block__prose {
  margin-top: 1.5rem;
}

.ck-gruender .ck-block__prose h3 {
  margin-top: 1.75rem;
  font-size: 1.375rem;
  font-weight: var(--ck-weight-bold);
}

/* Die Aussagen aus den Unternehmen: ein ruhiger grauer Kasten, jede Zeile
   mit blauer Kante. Semantisch ein Zitat, optisch kein Fliesstext-Zitat. */
.ck-gruender .ck-block__prose blockquote {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 0;
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface-muted);
}

.ck-gruender .ck-block__prose blockquote ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-gruender .ck-block__prose blockquote li {
  padding-left: 1rem;
  border-left: 3px solid var(--ck-blue);
  color: var(--ck-ink);
  line-height: 1.5;
}

.ck-gruender .ck-block__prose blockquote li + li {
  margin-top: 0.75rem;
}

/* Die Ziele: Hakenliste mit rundem Icon statt Aufzaehlungspunkt. */
.ck-gruender .ck-block__prose > ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-gruender .ck-block__prose > ul > li {
  position: relative;
  padding-left: 2rem;
  color: var(--ck-ink);
  line-height: 1.5;
}

.ck-gruender .ck-block__prose > ul > li + li {
  margin-top: 0.75rem;
}

/* Blauer Kreis mit weissem Haken. Die Form kommt aus der Maske, die Farbe
   aus dem Token — so bleibt das Icon mit der Marke im Takt. */
.ck-gruender .ck-block__prose > ul > li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--ck-blue-ui);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24A12 12 0 0 0 12 0zm5.7 8.3a1 1 0 0 0-1.4-1.4L10 13.2 7.7 10.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24A12 12 0 0 0 12 0zm5.7 8.3a1 1 0 0 0-1.4-1.4L10 13.2 7.7 10.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* --------------------------------------------------------------------------
   2. Portrait und Zitatkarte
   Das Bild ist freigestellt und steht ohne Rahmen auf dem Weiss. Die Karte
   lappt unten rechts ueber den Bildrand; dafuer ist sie absolut in der
   Figur positioniert und bleibt auf kleinen Schirmen innerhalb der Breite.
   -------------------------------------------------------------------------- */

.ck-gruender__figur {
  position: relative;
  width: min(100%, 30rem);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .ck-gruender__figur {
    width: 100%;
    max-width: 34rem;
    margin: 0;
  }
}

.ck-gruender__bild {
  display: block;
  width: 100%;
  height: auto;
}

.ck-gruender__karte {
  position: absolute;
  right: 0;
  bottom: 10%;
  width: min(24rem, 78%);
  margin: 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  box-shadow: var(--ck-shadow);
}

@media (min-width: 1024px) {
  .ck-gruender__karte {
    /* Ragt ein Stueck in den Zwischenraum zur Textspalte. */
    right: -2rem;
  }
}

.ck-gruender__zitat {
  margin: 0;
  padding: 0;
  border: 0;
}

.ck-gruender__zitat p {
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ck-ink);
}

.ck-gruender__name {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ck-blue-strong);
}

/* ===================== 72-bloecke-erweitert.css ===================== */
/* ==========================================================================
   CodeKlar – 72-bloecke-erweitert.css
   Erweiterungen fuer die Inhaltsbloecke der Einzelseiten:

     1  Split-Block      Kopf und Fliesstext links, Karten gestapelt rechts
     2  Karten mit Icon  Linien-Icon im Badge, Hover hebt die Karte an
     3  Bewegter Rahmen  der Verlaufsrahmen der Akzentkarten fliesst
     4  Begriffsreihe    Chips mit Produktlogo
     5  Bildblock        Foto rechts neben Kopf und Fliesstext

   Zustaendig fuer templates/standard.html. Farben, Abstaende und Radien
   kommen aus den Tokens in 00-base.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Split-Block
   -------------------------------------------------------------------------- */

.ck-split {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .ck-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }
}

/* Links stehen Kopf und Fliesstext buendig untereinander — nicht zentriert
   wie in den uebrigen Bloecken. */
.ck-split .ck-block__head,
.ck-split .ck-block__prose {
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

.ck-split .ck-block__title {
  margin: 0;
}

.ck-split .ck-block__prose {
  margin-top: 1.5rem;
}

/* Der Kartenstapel beginnt auf Hoehe der Ueberschrift. */
.ck-split__cards .ck-block__cards {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .ck-split__cards {
    padding-top: 0.25rem;
  }
}

/* Eine Spalte, egal wie breit — der Stapel ist die Lesefolge. Die Klasse
   schlaegt .ck-grid--3 und .ck-grid--4 durch die hoehere Spezifitaet. */
.ck-grid.ck-block__cards--stapel {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}


/* --------------------------------------------------------------------------
   2. Karten mit Icon
   Das Badge sitzt links, Titel und Text laufen rechts daneben. Beim
   Ueberfahren hebt sich die Karte, die Kante wird blau, das Badge fuellt
   sich mit dem Markenverlauf und links waechst ein schmaler Streifen.
   -------------------------------------------------------------------------- */

.ck-baustein--icon {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  overflow: hidden;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-baustein--icon .ck-baustein__icon {
  grid-row: 1 / 3;
}

.ck-baustein--icon .ck-baustein__title {
  grid-column: 2;
  margin: 0.25rem 0 0.625rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  transition: color var(--ck-transition);
}

.ck-baustein--icon .ck-baustein__text {
  grid-column: 2;
}

.ck-baustein__icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  transition: background-color var(--ck-transition), color var(--ck-transition),
    transform var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-baustein__icon svg {
  inline-size: 1.625rem;
  block-size: 1.625rem;
}

/* Der Streifen an der linken Kante — wartet eingeklappt. */
.ck-baustein--icon::before {
  content: "";
  position: absolute;
  inset-block: 1.25rem;
  inset-inline-start: 0;
  inline-size: 4px;
  border-radius: 0 4px 4px 0;
  background-image: var(--ck-gradient);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--ck-transition-slow);
}

.ck-baustein__frame:hover .ck-baustein--icon,
.ck-baustein__frame:focus-within .ck-baustein--icon {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-4px);
}

.ck-baustein__frame:hover .ck-baustein--icon::before,
.ck-baustein__frame:focus-within .ck-baustein--icon::before {
  transform: scaleY(1);
}

.ck-baustein__frame:hover .ck-baustein__icon,
.ck-baustein__frame:focus-within .ck-baustein__icon {
  background-color: transparent;
  background-image: var(--ck-gradient);
  color: var(--ck-white, #fff);
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 10px 22px rgba(0, 159, 227, 0.28);
}

.ck-baustein__frame:hover .ck-baustein--icon .ck-baustein__title,
.ck-baustein__frame:focus-within .ck-baustein--icon .ck-baustein__title {
  color: var(--ck-blue-strong);
}


/* --------------------------------------------------------------------------
   3. Bewegter Verlaufsrahmen
   Der Verlauf ist dreimal so gross wie der Rahmen und wandert langsam
   hindurch — Gruen und Blau laufen um die Karte, ohne zu flackern.
   -------------------------------------------------------------------------- */

.ck-gradient-border--bewegt {
  background-image: linear-gradient(
    135deg,
    var(--ck-green) 0%,
    var(--ck-blue) 30%,
    var(--ck-green) 55%,
    var(--ck-blue) 80%,
    var(--ck-green) 100%
  );
  background-size: 300% 300%;
  animation: ck-rahmen-fliesst 10s ease-in-out infinite alternate;
  transition: transform var(--ck-transition), box-shadow var(--ck-transition);
}

/* Jede Karte startet an einer anderen Stelle des Verlaufs, sonst wandern
   drei Rahmen im Gleichschritt. */
.ck-block__cards > .ck-gradient-border--bewegt:nth-child(2) { animation-delay: -3.3s; }
.ck-block__cards > .ck-gradient-border--bewegt:nth-child(3) { animation-delay: -6.6s; }
.ck-block__cards > .ck-gradient-border--bewegt:nth-child(4) { animation-delay: -1.7s; }

.ck-gradient-border--bewegt:hover,
.ck-gradient-border--bewegt:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 159, 227, 0.2);
}

@keyframes ck-rahmen-fliesst {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}


/* --------------------------------------------------------------------------
   4. Begriffsreihe mit Logos
   -------------------------------------------------------------------------- */

.ck-chips__item--logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.125rem 0.625rem 0.875rem;
  font-size: 1rem;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-chips__logo {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  object-fit: contain;
}

.ck-chips__item--logo:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   5. Bildblock
   -------------------------------------------------------------------------- */

.ck-bildblock {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .ck-bildblock {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }
}

.ck-bildblock .ck-block__head,
.ck-bildblock .ck-block__prose {
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

.ck-bildblock .ck-block__title {
  margin: 0;
}

.ck-bildblock .ck-block__prose {
  margin-top: 1.5rem;
}

.ck-bildblock__figur {
  position: relative;
  margin: 0;
}

/* Bild links, Text rechts: nur die Reihenfolge wechselt. */
@media (min-width: 1024px) {
  .ck-bildblock--links .ck-bildblock__figur {
    order: -1;
  }
}

/* Erklaergrafiken (Schaubilder, Diagramme) duerfen nicht beschnitten
   werden: ohne festes Seitenverhaeltnis, auf hellem Grund mit Rahmen. */
.ck-bildblock__bild[src$=".png"] {
  aspect-ratio: auto;
  object-fit: contain;
  padding: 1rem;
  border: 1px solid var(--ck-border);
  background-color: var(--ck-surface);
}

/* ... und ihre Unterschrift steht darunter, sonst verdeckt die Pille die
   unterste Zeile der Grafik. */
.ck-bildblock__zoom:has(> .ck-bildblock__bild[src$=".png"]) + .ck-bildblock__unterschrift,
.ck-bildblock__zoom:has(> svg.ck-grafik) + .ck-bildblock__unterschrift {
  position: static;
  display: block;
  margin-top: 0.875rem;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--ck-muted);
  text-align: center;
}

.ck-bildblock__bild {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow-lg);
  transition: transform var(--ck-transition-slow);
}

.ck-bildblock__figur:hover .ck-bildblock__bild {
  transform: scale(1.015);
}

/* Jede Grafik ist ein Knopf: Klick oeffnet sie vergroessert (main.js,
   Baustein 9, Dialog in 97-lupe.css). Die Lupe unten rechts erscheint beim
   Zeigen; ohne Hover-Faehigkeit (Touch) steht sie immer da. */
.ck-bildblock__zoom {
  position: relative;
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius-lg);
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.ck-bildblock__zoom:focus-visible {
  outline: 3px solid var(--ck-blue);
  outline-offset: 4px;
}

.ck-bildblock__lupe {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-sm);
  opacity: 0;
  translate: 0 0.25rem;
  transition: opacity var(--ck-transition), translate var(--ck-transition);
}

.ck-bildblock__lupe svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ck-bildblock__zoom:hover .ck-bildblock__lupe,
.ck-bildblock__zoom:focus-visible .ck-bildblock__lupe {
  opacity: 1;
  translate: 0 0;
}

@media (hover: none) {
  .ck-bildblock__lupe {
    opacity: 1;
    translate: 0 0;
  }
}

/* Die Bildunterschrift liegt als Pille auf der unteren Bildkante. */
.ck-bildblock__unterschrift {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-sm);
}


/* --------------------------------------------------------------------------
   Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ck-baustein--icon,
  .ck-baustein--icon::before,
  .ck-baustein__icon,
  .ck-gradient-border--bewegt,
  .ck-chips__item--logo,
  .ck-bildblock__bild {
    transition: none;
    animation: none;
  }

  .ck-baustein__frame:hover .ck-baustein--icon,
  .ck-baustein__frame:hover .ck-baustein__icon,
  .ck-gradient-border--bewegt:hover,
  .ck-chips__item--logo:hover,
  .ck-bildblock__figur:hover .ck-bildblock__bild {
    transform: none;
  }
}


/* Vektorgrafik im Bildblock (grafiken/*.svg, inline): gleiche Rahmung wie
   die PNG-Schaubilder, laeuft in der Hausschrift mit. */
.ck-bildblock__zoom > svg.ck-grafik {
  display: block;
  inline-size: 100%;
  block-size: auto;
  padding: 0.75rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  box-shadow: var(--ck-shadow-lg);
  transition: transform var(--ck-transition-slow);
}

.ck-bildblock__figur:hover .ck-bildblock__zoom > svg.ck-grafik {
  transform: scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
  .ck-bildblock__zoom > svg.ck-grafik {
    transition: none;
  }

  .ck-bildblock__figur:hover .ck-bildblock__zoom > svg.ck-grafik {
    transform: none;
  }
}

/* ===================== 73-team-profil.css ===================== */
/* ==========================================================================
   CodeKlar – 73-team-profil.css
   Teamkarten, die ein Profil oeffnen, und der Profil-Dialog selbst.

   Die Karte bleibt ein <article>; klickbar macht sie der Knopf im Namen,
   dessen ::after die ganze Karte abdeckt. Der LinkedIn-Link liegt darueber
   und bleibt eigenstaendig bedienbar. Der Dialog ist ein natives <dialog>:
   Escape, Fokusfang und Hintergrund kommen vom Browser, das Skript
   oeffnet und schliesst nur.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Klickbare Karte
   -------------------------------------------------------------------------- */

.ck-team__card--profil {
  position: relative;
  cursor: pointer;
}

.ck-team__btn {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.ck-team__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ck-team__btn:focus-visible::after {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 2px;
  border-radius: var(--ck-radius);
}

.ck-team__card--profil .ck-team__linkedin {
  position: relative;
  z-index: 1;
}

/* Das Foto zoomt leicht, der Hinweis schiebt sich von unten ins Bild. */
.ck-team__card--profil .ck-team__photo {
  transition: transform var(--ck-transition-slow);
}

.ck-team__item:hover .ck-team__card--profil .ck-team__photo,
.ck-team__card--profil:focus-within .ck-team__photo {
  transform: scale(1.04);
}

.ck-team__hint {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--ck-blue-strong);
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  white-space: nowrap;
  box-shadow: var(--ck-shadow-sm);
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition: opacity var(--ck-transition), transform var(--ck-transition);
  pointer-events: none;
}

.ck-team__hint::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-image: var(--ck-gradient);
}

.ck-team__item:hover .ck-team__hint,
.ck-team__card--profil:focus-within .ck-team__hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ck-team__item:hover .ck-team__card--profil .ck-team__name {
  color: var(--ck-blue-strong);
}

.ck-team__name {
  transition: color var(--ck-transition);
}


/* --------------------------------------------------------------------------
   2. Profil-Dialog
   -------------------------------------------------------------------------- */

.ck-profil {
  inline-size: min(58rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-lg);
  overflow: hidden;
}

.ck-profil::backdrop {
  background-color: rgba(8, 28, 42, 0.58);
  backdrop-filter: blur(4px);
}

.ck-profil[open] {
  animation: ck-profil-auf 260ms ease-out;
}

@keyframes ck-profil-auf {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Solange ein Profil offen ist, steht die Seite dahinter still. */
.ck-profil-offen {
  overflow: hidden;
}

.ck-profil__inner {
  position: relative;
  display: grid;
  max-block-size: calc(100dvh - 2rem);
}

@media (min-width: 768px) {
  .ck-profil__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.ck-profil__close {
  position: absolute;
  inset-block-start: 0.875rem;
  inset-inline-end: 0.875rem;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow);
  cursor: pointer;
  transition: background-color var(--ck-transition), transform var(--ck-transition);
}

.ck-profil__close:hover {
  background-color: var(--ck-blue-soft);
  transform: rotate(90deg);
}

.ck-profil__close:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 2px;
}

.ck-profil__media {
  position: relative;
  aspect-ratio: 1.25;
  background: linear-gradient(160deg, #e8f5fc 0%, #d6eef9 100%);
  overflow: hidden;
}

@media (min-width: 768px) {
  .ck-profil__media {
    aspect-ratio: auto;
    min-block-size: 26rem;
  }
}

.ck-profil__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

.ck-profil__body {
  padding: 1.5rem;
  overflow: auto;
}

@media (min-width: 768px) {
  .ck-profil__body {
    padding: 2.5rem 2.75rem 2.5rem 2.5rem;
  }
}

.ck-profil__role {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-blue-strong);
}

.ck-profil__name {
  margin: 0.375rem 0 0;
}

.ck-profil__label {
  margin: 1.75rem 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-profil__einsatz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-profil__gebiet {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-surface-sunken);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ck-ink);
}

.ck-profil__bio {
  margin-top: 1.5rem;
}

.ck-profil__bio--offen {
  color: var(--ck-muted);
}

.ck-profil__linkedin {
  margin-top: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .ck-team__card--profil .ck-team__photo,
  .ck-team__hint,
  .ck-team__name,
  .ck-profil__close {
    transition: none;
  }

  .ck-profil[open] {
    animation: none;
  }

  .ck-team__item:hover .ck-team__card--profil .ck-team__photo,
  .ck-profil__close:hover {
    transform: none;
  }
}

/* ===================== 74-hero-team.css ===================== */
/* ==========================================================================
   CodeKlar – 74-hero-team.css
   Seitenkopf mit Hero-Grafik "team": rechts kreisen die Portraits des
   Teams um das Logo (partials/hero-team.html).

   Aufbau: zwei gestrichelte Bahnen, innen drei, aussen fuenf Portraits.
   Die Bahnen drehen gegenlaeufig; jedes Portrait dreht in derselben Zeit
   zurueck und bleibt dadurch aufrecht. Alle Masse haengen an der Breite
   der Grafik (cqi), damit die Bahnen in schmalen Spalten mitschrumpfen.
   ========================================================================== */

.ck-pagehead__visual {
  display: none;
}

@media (min-width: 64rem) {
  .ck-pagehead--visual .ck-pagehead__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
  }

  .ck-pagehead__visual {
    display: flex;
    justify-content: center;
  }
}

.ck-orbit {
  --r1: 24cqi;
  --r2: 42.5cqi;
  position: relative;
  container-type: inline-size;
  inline-size: min(30rem, 100%);
  aspect-ratio: 1;
}

/* Weicher Schein in der Mitte, der langsam atmet. */
.ck-orbit__glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 159, 227, 0.22) 0%, rgba(0, 159, 227, 0) 70%);
  animation: ck-orbit-atmet 7s ease-in-out infinite;
}

.ck-orbit__ring {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  border: 1px dashed rgba(0, 119, 170, 0.32);
  border-radius: 50%;
  translate: -50% -50%;
}

.ck-orbit__ring--1 {
  inline-size: calc(var(--r1) * 2);
  block-size: calc(var(--r1) * 2);
  animation: ck-orbit-dreht 90s linear infinite;
}

.ck-orbit__ring--2 {
  inline-size: calc(var(--r2) * 2);
  block-size: calc(var(--r2) * 2);
  animation: ck-orbit-dreht 140s linear infinite reverse;
}

.ck-orbit__center {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 21cqi;
  block-size: 21cqi;
  background-color: #fff;
  border-radius: 28%;
  box-shadow: 0 14px 34px rgba(16, 60, 90, 0.14);
  translate: -50% -50%;
}

.ck-orbit__center img {
  inline-size: 62%;
  block-size: 62%;
  object-fit: contain;
}

/* Ein Ring, der vom Logo ausgeht und verblasst. */
.ck-orbit__center::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(0, 159, 227, 0.4);
  border-radius: inherit;
  animation: ck-orbit-puls 3.2s ease-out infinite;
}

.ck-orbit__track {
  position: absolute;
  inset: 0;
  animation: ck-orbit-dreht 48s linear infinite;
}

.ck-orbit__track--2 {
  animation-duration: 76s;
  animation-direction: reverse;
}

/* Der Slot ist ein Punkt auf der Bahn: um die Mitte drehen, nach aussen
   schieben, zurueckdrehen. */
.ck-orbit__slot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  transform: rotate(var(--w)) translateX(var(--r)) rotate(calc(-1 * var(--w)));
}

.ck-orbit__track--1 .ck-orbit__slot { --r: var(--r1); }
.ck-orbit__track--2 .ck-orbit__slot { --r: var(--r2); }

.ck-orbit__track--1 .ck-orbit__slot--1 { --w: -90deg; }
.ck-orbit__track--1 .ck-orbit__slot--2 { --w: 30deg; }
.ck-orbit__track--1 .ck-orbit__slot--3 { --w: 150deg; }

.ck-orbit__track--2 .ck-orbit__slot--1 { --w: -54deg; }
.ck-orbit__track--2 .ck-orbit__slot--2 { --w: 18deg; }
.ck-orbit__track--2 .ck-orbit__slot--3 { --w: 90deg; }
.ck-orbit__track--2 .ck-orbit__slot--4 { --w: 162deg; }
.ck-orbit__track--2 .ck-orbit__slot--5 { --w: 234deg; }

/* Das Portrait dreht gegen die Bahn und bleibt aufrecht. */
.ck-orbit__item {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  inline-size: 15cqi;
  block-size: 15cqi;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(160deg, #e8f5fc 0%, #d6eef9 100%);
  box-shadow: 0 10px 24px rgba(16, 60, 90, 0.16);
  translate: -50% -50%;
  animation: ck-orbit-dreht 48s linear infinite reverse;
}

.ck-orbit__track--2 .ck-orbit__item {
  inline-size: 12.5cqi;
  block-size: 12.5cqi;
  animation-duration: 76s;
  animation-direction: normal;
}

.ck-orbit__item img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Zwei Fakten als schwebende Pillen in den freien Ecken. */
.ck-orbit__badge {
  position: absolute;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: #fff;
  color: var(--ck-blue-strong);
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(16, 60, 90, 0.12);
  animation: ck-orbit-schwebt 7s ease-in-out infinite;
}

.ck-orbit__badge--1 {
  inset-block-start: 4%;
  inset-inline-end: -3%;
}

.ck-orbit__badge--2 {
  inset-block-end: 5%;
  inset-inline-start: -4%;
  animation-delay: -3.5s;
}

@keyframes ck-orbit-dreht {
  to { transform: rotate(360deg); }
}

@keyframes ck-orbit-atmet {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes ck-orbit-puls {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes ck-orbit-schwebt {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .ck-orbit__glow,
  .ck-orbit__ring,
  .ck-orbit__center::after,
  .ck-orbit__track,
  .ck-orbit__item,
  .ck-orbit__badge {
    animation: none;
  }
}

/* ===================== 75-hero-leistungen.css ===================== */
/* ==========================================================================
   CodeKlar – 75-hero-leistungen.css
   Hero-Grafiken der vier Leistungsseiten (partials/hero-*.html):

     1  Gemeinsames: schwebende Pillen, Masse der Buehne
     2  .ck-hub      Microsoft 365 als Drehscheibe (Modern Work)
     3  .ck-wolke    Umzug vom Server in die Azure-Wolke (Azure Cloud)
     4  .ck-kiwin    Copilot-Dialog, der sich selbst abspielt (KI)
     5  .ck-monitor  Betrieb auf einen Blick (Managed Services)
     6  .ck-vier     Die vier Bereiche um das CodeKlar-Zeichen (Leistungen)

   Alle Grafiken sind rein dekorativ, laufen ohne Skript und stehen bei
   reduzierter Bewegung still im Endzustand. Die zweispaltige Aufteilung
   des Seitenkopfs kommt aus 74-hero-team.css (.ck-pagehead--visual).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Gemeinsames
   -------------------------------------------------------------------------- */

.ck-hero-pill {
  position: absolute;
  z-index: 2;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ck-radius-pill);
  background-color: #fff;
  color: var(--ck-blue-strong);
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(16, 60, 90, 0.12);
  animation: ck-hero-schwebt 7s ease-in-out infinite;
}

.ck-hub,
.ck-wolke,
.ck-kiwin,
.ck-monitor {
  position: relative;
  container-type: inline-size;
  inline-size: min(30rem, 100%);
}

@keyframes ck-hero-schwebt {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}


/* --------------------------------------------------------------------------
   2. Microsoft 365 als Drehscheibe
   -------------------------------------------------------------------------- */

.ck-hub {
  aspect-ratio: 1;
}

.ck-hub__linien {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* pathLength="100" macht die Strichmuster laengenunabhaengig: 3,5 ist
   dreieinhalb Prozent der jeweiligen Linie. */
.ck-hub__linie {
  stroke: rgba(0, 119, 170, 0.28);
  stroke-width: 0.45;
  stroke-dasharray: 3.5 3.5;
}

/* Ein kurzer Impuls laeuft vom Kern zu jedem Dienst. */
.ck-hub__puls {
  stroke: var(--ck-blue);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  animation: ck-hub-puls 2.8s linear infinite;
}

.ck-hub__puls--2 { animation-delay: 0.45s; }
.ck-hub__puls--3 { animation-delay: 0.9s; }
.ck-hub__puls--4 { animation-delay: 1.35s; }
.ck-hub__puls--5 { animation-delay: 1.8s; }
.ck-hub__puls--6 { animation-delay: 2.25s; }

.ck-hub__kern {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 21cqi;
  block-size: 21cqi;
  background-color: #fff;
  border-radius: 28%;
  box-shadow: 0 14px 34px rgba(16, 60, 90, 0.14);
  translate: -50% -50%;
}

.ck-hub__kern img {
  inline-size: 58%;
  block-size: 58%;
  object-fit: contain;
}

.ck-hub__kern::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(0, 159, 227, 0.4);
  border-radius: inherit;
  animation: ck-hub-ring 3.2s ease-out infinite;
}

.ck-hub__app {
  position: absolute;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35cqi;
  inline-size: 17cqi;
  block-size: 17cqi;
  background-color: #fff;
  border-radius: 24%;
  box-shadow: 0 10px 26px rgba(16, 60, 90, 0.12);
  translate: -50% -50%;
  animation: ck-hub-schwebt 7s ease-in-out infinite;
}

.ck-hub__app img {
  inline-size: 7.2cqi;
  block-size: 7.2cqi;
  object-fit: contain;
}

.ck-hub__app span {
  font-size: 2.5cqi;
  line-height: 1.2;
  color: var(--ck-muted);
}

.ck-hub__app--1 { inset-inline-start: 20%; inset-block-start: 22%; animation-delay: -0.4s; }
.ck-hub__app--2 { inset-inline-start: 80%; inset-block-start: 22%; animation-delay: -2.2s; }
.ck-hub__app--3 { inset-inline-start: 12%; inset-block-start: 58%; animation-delay: -4.1s; }
.ck-hub__app--4 { inset-inline-start: 88%; inset-block-start: 58%; animation-delay: -1.3s; }
.ck-hub__app--5 { inset-inline-start: 30%; inset-block-start: 88%; animation-delay: -5.6s; }
.ck-hub__app--6 { inset-inline-start: 70%; inset-block-start: 88%; animation-delay: -3s; }

.ck-hub__pill--1 { inset-block-start: 2%; inset-inline-start: 50%; translate: -50% 0; }
.ck-hub__pill--2 { inset-block-start: 38%; inset-inline-end: -4%; animation-delay: -3.5s; }

@keyframes ck-hub-puls {
  from { stroke-dashoffset: 100; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ck-hub-ring {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Die Pillen nutzen translate fuer die Zentrierung, die Kacheln fuer die
   Position – darum schweben beide ueber transform, nicht ueber translate. */
@keyframes ck-hub-schwebt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1.5deg); }
}


/* --------------------------------------------------------------------------
   3. Umzug in die Azure-Wolke
   -------------------------------------------------------------------------- */

.ck-wolke {
  aspect-ratio: 1;
}

.ck-wolke__svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  font-family: var(--ck-font);
}

.ck-wolke__pfad {
  fill: none;
  stroke: rgba(0, 119, 170, 0.35);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.ck-wolke__server rect {
  fill: #fff;
  stroke: #c6e6f7;
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 14px rgba(16, 60, 90, 0.1));
}

.ck-wolke__server line {
  stroke: #d8e3ec;
  stroke-width: 3;
  stroke-linecap: round;
}

.ck-wolke__led {
  fill: var(--ck-green);
  animation: ck-wolke-blinkt 2.4s ease-in-out infinite;
}

.ck-wolke__led--2 { animation-delay: 0.8s; }
.ck-wolke__led--3 { animation-delay: 1.6s; }

.ck-wolke__cloud {
  transform-box: fill-box;
  transform-origin: center;
  animation: ck-wolke-atmet 6s ease-in-out infinite;
}

.ck-wolke__cloud path {
  fill: #fff;
  stroke: #a9dcf3;
  stroke-width: 2;
  filter: drop-shadow(0 16px 32px rgba(0, 159, 227, 0.22));
}

.ck-wolke__text {
  font-size: 12px;
  font-weight: var(--ck-weight-medium);
  fill: var(--ck-muted);
}

.ck-wolke__paket rect {
  fill: #fff;
  stroke: var(--ck-blue);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 10px rgba(0, 159, 227, 0.28));
}

.ck-wolke__paket line {
  stroke: var(--ck-blue);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ck-wolke__pill--1 { inset-block-start: 6%; inset-inline-start: 2%; }
.ck-wolke__pill--2 { inset-block-end: 4%; inset-inline-end: 2%; animation-delay: -2.5s; }
.ck-wolke__pill--3 { inset-block-start: 40%; inset-inline-start: -2%; animation-delay: -4.5s; }

@keyframes ck-wolke-blinkt {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@keyframes ck-wolke-atmet {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}


/* --------------------------------------------------------------------------
   4. Copilot-Dialog
   Gemeinsame Zeitleiste von 10 s: Frage (0–20 %), Nachdenken (22–36 %),
   Antwort (38–90 %), Ausblenden (90–100 %), dann von vorn.
   -------------------------------------------------------------------------- */

.ck-kiwin {
  aspect-ratio: 1 / 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-kiwin__fenster {
  position: relative;
  z-index: 1;
  inline-size: 88%;
  padding: 1.1rem 1.3rem 1.3rem;
  background-color: #fff;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  box-shadow: 0 24px 50px rgba(16, 60, 90, 0.14);
  animation: ck-hero-schwebt 8s ease-in-out infinite;
}

.ck-kiwin__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--ck-border);
  font-size: 0.875rem;
}

.ck-kiwin__kopf img {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.ck-kiwin__titel {
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-kiwin__status {
  margin-inline-start: auto;
  padding: 0.2rem 0.6rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-soft);
  font-size: 0.72rem;
  color: var(--ck-blue-strong);
}

/* Die Frage: Sprechblase rechts, Wort fuer Wort. */
.ck-kiwin__frage {
  inline-size: fit-content;
  max-inline-size: 88%;
  margin: 1rem 0 0 auto;
  padding: 0.65rem 0.95rem;
  border-radius: 1rem 1rem 0.25rem 1rem;
  background-color: var(--ck-blue-ui);
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.ck-kiwin__frage span {
  opacity: 0;
  animation: ck-kiwin-wort 10s linear infinite;
  animation-delay: calc(var(--i) * 0.16s);
}

/* Drei huepfende Punkte waehrend des Nachdenkens. */
.ck-kiwin__denkt {
  display: flex;
  gap: 0.3rem;
  margin: 0.9rem 0 0;
  opacity: 0;
  animation: ck-kiwin-denkt 10s linear infinite;
}

.ck-kiwin__denkt span {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--ck-blue);
  animation: ck-kiwin-huepft 1s ease-in-out infinite;
}

.ck-kiwin__denkt span:nth-child(2) { animation-delay: 0.15s; }
.ck-kiwin__denkt span:nth-child(3) { animation-delay: 0.3s; }

/* Die Antwort: Karte links, drei Zeilen nacheinander. */
.ck-kiwin__antwort {
  margin-block-start: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background-color: var(--ck-surface-muted);
  opacity: 0;
  animation: ck-kiwin-antwort 10s linear infinite;
}

.ck-kiwin__zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ck-ink);
  opacity: 0;
  transform: translateY(6px);
  animation: ck-kiwin-zeile 10s linear infinite;
  animation-delay: calc(var(--i) * 0.6s);
}

.ck-kiwin__zeile + .ck-kiwin__zeile {
  margin-block-start: 0.45rem;
}

.ck-kiwin__zeile svg {
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.1rem;
  fill: none;
  stroke: var(--ck-blue-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ck-kiwin__quelle {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  color: var(--ck-muted);
  opacity: 0;
  animation: ck-kiwin-zeile 10s linear infinite;
  animation-delay: 2s;
}

/* Funken in Markengruen, die aufblitzen. */
.ck-kiwin__funke {
  position: absolute;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  fill: var(--ck-green);
  filter: drop-shadow(0 4px 10px rgba(0, 253, 208, 0.45));
  animation: ck-kiwin-funkelt 3.4s ease-in-out infinite;
}

.ck-kiwin__funke--1 { inset-block-start: 3%; inset-inline-end: 12%; }
.ck-kiwin__funke--2 { inset-block-start: 22%; inset-inline-start: 1%; inline-size: 1rem; block-size: 1rem; animation-delay: -1.1s; }
.ck-kiwin__funke--3 { inset-block-end: 14%; inset-inline-end: 1%; inline-size: 1.1rem; block-size: 1.1rem; animation-delay: -2.3s; }

.ck-kiwin__pill--1 { inset-block-end: 1%; inset-inline-start: 2%; }
.ck-kiwin__pill--2 { inset-block-start: 1%; inset-inline-end: -2%; animation-delay: -3.5s; }

@keyframes ck-kiwin-wort {
  0%, 2%   { opacity: 0; }
  5%, 90%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}

@keyframes ck-kiwin-denkt {
  0%, 21%  { opacity: 0; }
  23%, 35% { opacity: 1; }
  37%, 100% { opacity: 0; }
}

@keyframes ck-kiwin-huepft {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-5px); }
}

@keyframes ck-kiwin-antwort {
  0%, 37%  { opacity: 0; }
  40%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

@keyframes ck-kiwin-zeile {
  0%, 38%  { opacity: 0; transform: translateY(6px); }
  42%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

@keyframes ck-kiwin-funkelt {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(20deg); }
}


/* --------------------------------------------------------------------------
   5. Betrieb auf einen Blick
   -------------------------------------------------------------------------- */

.ck-monitor {
  aspect-ratio: 1 / 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-monitor__fenster {
  position: relative;
  z-index: 1;
  inline-size: 86%;
  padding: 1rem 1.2rem 1.1rem;
  background-color: #fff;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  box-shadow: 0 24px 50px rgba(16, 60, 90, 0.14);
}

.ck-monitor__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--ck-border);
  font-size: 0.85rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-monitor__punkt {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background-color: var(--ck-green);
  box-shadow: 0 0 0 0 rgba(0, 253, 208, 0.6);
  animation: ck-monitor-pulst 2s ease-out infinite;
}

.ck-monitor__zeit {
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-weight: var(--ck-weight-regular);
  color: var(--ck-muted);
}

.ck-monitor__raster {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding-block: 1rem;
}

.ck-monitor__ring {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  text-align: center;
}

.ck-monitor__ring svg {
  inline-size: 6.25rem;
  block-size: 6.25rem;
  transform: rotate(-90deg);
}

.ck-monitor__ring-bahn {
  fill: none;
  stroke: var(--ck-blue-soft);
  stroke-width: 9;
}

/* Der Ring schliesst sich einmal, dann erscheint der Haken. */
.ck-monitor__ring-wert {
  fill: none;
  stroke: var(--ck-blue);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: ck-monitor-ring 2.2s 0.4s ease-out forwards;
}

.ck-monitor__ring-haken {
  fill: none;
  stroke: var(--ck-blue-strong);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(90deg);
  transform-origin: 60px 60px;
  animation: ck-monitor-haken 0.7s 2.5s ease-out forwards;
}

.ck-monitor__ring-text {
  font-size: 0.72rem;
  color: var(--ck-muted);
}

.ck-monitor__liste {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-monitor__eintrag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ck-ink);
  opacity: 0;
  transform: translateX(8px);
  animation: ck-monitor-eintrag 0.5s ease-out forwards;
  animation-delay: calc(1s + var(--i) * 0.5s);
}

.ck-monitor__eintrag svg {
  flex: 0 0 auto;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  padding: 0.22rem;
  border-radius: 50%;
  background-color: var(--ck-blue-soft);
  fill: none;
  stroke: var(--ck-blue-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ck-monitor__eintrag svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ck-monitor-haken 0.6s ease-out forwards;
  animation-delay: calc(1.3s + var(--i) * 0.5s);
}

.ck-monitor__balken {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  block-size: 3.4rem;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--ck-border);
}

.ck-monitor__balken span {
  flex: 1 1 0;
  block-size: var(--h);
  border-radius: 0.25rem 0.25rem 0 0;
  background-image: linear-gradient(to top, var(--ck-blue) 0%, var(--ck-green) 100%);
  transform-origin: bottom;
  animation: ck-monitor-balken 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.27s);
}

.ck-monitor__legende {
  margin: 0.45rem 0 0;
  font-size: 0.7rem;
  color: var(--ck-muted);
}

/* Ein geloestes Ticket schwebt rechts unten herein. */
.ck-monitor__ticket {
  position: absolute;
  z-index: 2;
  inset-inline-end: -2%;
  inset-block-end: 9%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  background-color: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 14px 34px rgba(16, 60, 90, 0.16);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ck-ink);
  animation: ck-monitor-ticket 9s ease-in-out infinite;
}

.ck-monitor__ticket strong {
  font-weight: var(--ck-weight-medium);
}

.ck-monitor__ticket svg {
  flex: 0 0 auto;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  padding: 0.35rem;
  border-radius: 50%;
  background-color: var(--ck-green);
  fill: none;
  stroke: #0a4b45;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ck-monitor__pill--1 { inset-block-start: 2%; inset-inline-start: -2%; }
.ck-monitor__pill--2 { inset-block-end: 1%; inset-inline-start: 6%; animation-delay: -3.5s; }

@keyframes ck-monitor-pulst {
  0%   { box-shadow: 0 0 0 0 rgba(0, 253, 208, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(0, 253, 208, 0); }
}

@keyframes ck-monitor-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes ck-monitor-haken {
  to { stroke-dashoffset: 0; }
}

@keyframes ck-monitor-eintrag {
  to { opacity: 1; transform: none; }
}

@keyframes ck-monitor-balken {
  0%, 100% { transform: scaleY(0.72); }
  50%      { transform: scaleY(1); }
}

@keyframes ck-monitor-ticket {
  0%, 8%    { opacity: 0; transform: translateX(16px); }
  14%, 70%  { opacity: 1; transform: none; }
  78%, 100% { opacity: 0; transform: translateX(16px); }
}


/* --------------------------------------------------------------------------
   Reduzierte Bewegung: alles steht im Endzustand.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ck-hero-pill,
  .ck-hub__puls,
  .ck-hub__kern::after,
  .ck-hub__app,
  .ck-wolke__led,
  .ck-wolke__cloud,
  .ck-wolke__paket,
  .ck-kiwin__fenster,
  .ck-kiwin__frage span,
  .ck-kiwin__denkt,
  .ck-kiwin__denkt span,
  .ck-kiwin__antwort,
  .ck-kiwin__zeile,
  .ck-kiwin__quelle,
  .ck-kiwin__funke,
  .ck-monitor__punkt,
  .ck-monitor__ring-wert,
  .ck-monitor__ring-haken,
  .ck-monitor__eintrag,
  .ck-monitor__eintrag svg path,
  .ck-monitor__balken span,
  .ck-monitor__ticket {
    animation: none;
  }

  .ck-hub__puls,
  .ck-wolke__paket,
  .ck-kiwin__denkt,
  .ck-kiwin__funke {
    display: none;
  }

  .ck-kiwin__frage span,
  .ck-kiwin__antwort,
  .ck-kiwin__zeile,
  .ck-kiwin__quelle,
  .ck-monitor__eintrag,
  .ck-monitor__ticket {
    opacity: 1;
    transform: none;
  }

  .ck-monitor__ring-wert,
  .ck-monitor__ring-haken,
  .ck-monitor__eintrag svg path {
    stroke-dashoffset: 0;
  }
}


/* --------------------------------------------------------------------------
   6. .ck-vier  Die vier Bereiche um das CodeKlar-Zeichen (Leistungen)
   Vier Kacheln im Quadrat, in der Mitte das Zeichen mit drehendem Ring.
   Die Kacheln leuchten nacheinander auf (je zwei Sekunden), die Linien zur
   Mitte fliessen. Alles ohne Skript.
   -------------------------------------------------------------------------- */

.ck-vier {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22%;
  inline-size: min(100%, 30rem);
  aspect-ratio: 1;
  padding: 4%;
  container-type: inline-size;
}

.ck-vier__linien {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.ck-vier__linie {
  fill: none;
  stroke: var(--ck-blue);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 3.5 5;
  opacity: 0.55;
  animation: ck-vier-fliesst 2.4s linear infinite;
}

@keyframes ck-vier-fliesst {
  to { stroke-dashoffset: -8.5; }
}

.ck-vier__kachel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
  align-content: center;
  justify-items: center;
  padding: 7% 5%;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-sm);
  text-align: center;
  animation: ck-vier-leuchtet 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}

@keyframes ck-vier-leuchtet {
  0%, 30%, 100% {
    border-color: var(--ck-border);
    box-shadow: var(--ck-shadow-sm);
    translate: 0 0;
  }
  10%, 20% {
    border-color: var(--ck-blue);
    box-shadow: 0 18px 40px rgba(0, 159, 227, 0.22);
    translate: 0 -4px;
  }
}

.ck-vier__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22cqi;
  block-size: 22cqi;
  max-inline-size: 3.5rem;
  max-block-size: 3.5rem;
  margin-bottom: 0.35rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  animation: ck-vier-icon 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}

@keyframes ck-vier-icon {
  0%, 30%, 100% { background-color: var(--ck-blue-soft); color: var(--ck-blue-strong); }
  10%, 20%      { background-image: var(--ck-gradient); color: var(--ck-ink); }
}

.ck-vier__icon svg {
  inline-size: 55%;
  block-size: 55%;
}

.ck-vier__titel {
  font-size: clamp(0.8125rem, 3.4cqi, 1rem);
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  color: var(--ck-ink);
}

.ck-vier__text {
  font-size: clamp(0.75rem, 2.8cqi, 0.8125rem);
  line-height: 1.2;
  color: var(--ck-muted);
}

.ck-vier__mitte {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background-color: var(--ck-white);
  box-shadow: 0 16px 40px rgba(16, 60, 90, 0.16);
}

.ck-vier__mitte img {
  inline-size: 62%;
  block-size: 62%;
  object-fit: contain;
}

.ck-vier__ring {
  position: absolute;
  inset: -12%;
  border: 2px dashed var(--ck-blue);
  border-radius: 50%;
  opacity: 0.6;
  animation: ck-vier-dreht 24s linear infinite;
}

@keyframes ck-vier-dreht {
  to { rotate: 360deg; }
}

.ck-vier__pill--1 {
  inset-block-start: -2%;
  inset-inline-start: -4%;
  animation-delay: -2s;
}

.ck-vier__pill--2 {
  inset-block-end: -2%;
  inset-inline-end: -6%;
  animation-delay: -5s;
}

@media (prefers-reduced-motion: reduce) {
  .ck-vier__linie,
  .ck-vier__kachel,
  .ck-vier__icon,
  .ck-vier__ring {
    animation: none;
  }
}

/* ===================== 76-bewegung.css ===================== */
/* ==========================================================================
   CodeKlar – 76-bewegung.css
   Bewegung und Abwechslung auf den Einzelseiten:

     1  Einblenden beim Scrollen   Karten, Schritte, Listen gleiten herein
     2  Bento-Raster               erste Karte gross, der Rest im Dreierraster
     3  Split-Varianten            Text rechts, Listen und Chips im Split
     4  Zweispaltiger Fliesstext   lange Textbloecke als Spalten mit Markenbalken
     5  Verlaufsband               ruhige Flaeche mit Lichtflecken fuer Ausrufe
     6  Abstaende                  Bloecke dichter, Karten luftiger

   Zustaendig fuer templates/standard.html; die Klassen kommen aus den
   Blockfeldern blockBento, blockSplitRechts, blockSpalten, blockVerlauf.
   Das Einblenden setzt main.js (Baustein 8) und laeuft nur ohne
   reduzierte Bewegung.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Einblenden beim Scrollen
   main.js vergibt .ck-reveal samt Versatz und beim Erscheinen .is-sichtbar;
   nach dem Uebergang nimmt es beide Klassen wieder weg, damit Hover-
   Bewegungen der Karten unberuehrt bleiben. translate statt transform,
   damit sich nichts mit den Hover-Transformationen ins Gehege kommt.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .ck-reveal {
    opacity: 0;
    translate: 0 1.4rem;
    transition: opacity 0.7s ease-out, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--ck-reveal-delay, 0s);
  }

  .ck-reveal.is-sichtbar {
    opacity: 1;
    translate: 0 0;
  }
}


/* --------------------------------------------------------------------------
   2. Bento-Raster
   Sechs Spalten: die erste Karte nimmt vier, alle weiteren zwei. Bei sechs
   oder neun Karten geht die Rechnung ohne Luecke auf. Die erste Karte
   traegt den bewegten Verlaufsrahmen und etwas mehr Luft.
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .ck-grid.ck-block__cards--bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ck-block__cards--bento > * {
    grid-column: span 3;
  }

  .ck-block__cards--bento > :first-child {
    grid-column: span 6;
  }
}

@media (min-width: 64rem) {
  .ck-block__cards--bento > * {
    grid-column: span 2;
  }

  .ck-block__cards--bento > :first-child {
    grid-column: span 4;
  }
}

.ck-block__cards--bento > .ck-baustein__frame:first-child {
  padding: 4px;
  border-radius: var(--ck-radius);
  background-image: linear-gradient(
    135deg,
    var(--ck-green) 0%,
    var(--ck-blue) 30%,
    var(--ck-green) 55%,
    var(--ck-blue) 80%,
    var(--ck-green) 100%
  );
  background-size: 300% 300%;
  animation: ck-rahmen-fliesst 10s ease-in-out infinite alternate;
}

.ck-block__cards--bento > .ck-baustein__frame:first-child > .ck-card {
  border-color: transparent;
}

@media (min-width: 64rem) {
  .ck-block__cards--bento > :first-child .ck-baustein {
    padding: 2.25rem 2.5rem;
  }

  .ck-block__cards--bento > :first-child .ck-baustein__title {
    font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  }

  .ck-block__cards--bento > :first-child .ck-baustein__text {
    font-size: 1.0625rem;
  }
}


/* --------------------------------------------------------------------------
   3. Split-Varianten
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .ck-split--rechts .ck-split__text {
    order: 2;
  }
}

/* Listen, Chips und Referenzen im Split: eine Spalte, linksbuendig, oben
   auf Hoehe der Ueberschrift. */
.ck-split .ck-block__list,
.ck-split .ck-block__chips,
.ck-split .ck-referenzen {
  max-width: none;
  margin: 0;
}

.ck-split .ck-checklist {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: none;
  margin: 0;
}

.ck-split .ck-checklist__item {
  padding: 0.875rem 1rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-split .ck-checklist__item:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateX(4px);
}

.ck-split .ck-chips {
  justify-content: flex-start;
  max-width: none;
  margin: 0;
}

/* Chips im Split: statt einer Wolke, die oben in der Spalte haengt und
   darunter Leere laesst, ein Panel mit einer Zeile je Begriff. Ab 1024px
   laeuft es beim Lesen mit, so bleibt die Spalte neben langem Text
   gefuellt. */
.ck-split .ck-block__chips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  padding: 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-image: linear-gradient(180deg, var(--ck-blue-soft) 0%, var(--ck-white) 100%);
}

.ck-split .ck-chips__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ck-radius);
  white-space: normal;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-split .ck-chips__item::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  background-image: var(--ck-gradient);
}

.ck-split .ck-chips__item--logo::before {
  content: none;
}

.ck-split .ck-chips__item:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateX(4px);
}

@media (min-width: 1024px) {
  .ck-split__cards:has(> .ck-block__chips) {
    position: sticky;
    top: calc(var(--ck-header-h) + 1.5rem);
    align-self: start;
  }
}

.ck-split .ck-referenzen {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .ck-split__cards {
    padding-top: 0.25rem;
  }
}


/* --------------------------------------------------------------------------
   4. Zweispaltiger Fliesstext
   Lange Erklaerungen laufen in zwei Spalten, die Ueberschrift steht links
   mit einem Balken im Markenverlauf davor.
   -------------------------------------------------------------------------- */

.ck-block--spalten .ck-block__head {
  max-width: none;
  margin-inline: 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 4px solid var(--ck-blue);
  border-image: linear-gradient(to bottom, var(--ck-blue), var(--ck-green)) 1;
  text-align: start;
}

.ck-block--spalten .ck-block__title {
  margin: 0;
}

.ck-block--spalten .ck-block__intro {
  margin-inline: 0;
}

.ck-block--spalten .ck-block__prose {
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 64rem) {
  .ck-block--spalten .ck-block__prose {
    column-count: 2;
    column-gap: 3.5rem;
  }

  .ck-block--spalten .ck-block__prose > * {
    break-inside: avoid;
  }

  .ck-block--spalten .ck-block__prose > :first-child {
    margin-top: 0;
  }
}


/* --------------------------------------------------------------------------
   5. Verlaufsband
   Fuer Aufrufe und kurze Zwischenrufe: helle Flaeche mit zwei Lichtflecken
   in den Markenfarben, Text mittig.
   -------------------------------------------------------------------------- */

.ck-block--verlauf {
  position: relative;
  overflow: hidden;
  padding-block: var(--ck-section-y-sm);
  background-color: var(--ck-blue-soft);
  background-image: linear-gradient(135deg, var(--ck-blue-soft) 0%, var(--ck-surface) 55%, rgba(0, 253, 208, 0.16) 100%);
}

.ck-block--verlauf::before,
.ck-block--verlauf::after {
  content: "";
  position: absolute;
  inline-size: 28rem;
  block-size: 28rem;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.ck-block--verlauf::before {
  inset-block-start: -14rem;
  inset-inline-start: -8rem;
  background: radial-gradient(circle, rgba(0, 159, 227, 0.2) 0%, rgba(0, 159, 227, 0) 65%);
}

.ck-block--verlauf::after {
  inset-block-end: -14rem;
  inset-inline-end: -8rem;
  background: radial-gradient(circle, rgba(0, 253, 208, 0.22) 0%, rgba(0, 253, 208, 0) 65%);
}

.ck-block--verlauf .ck-block__inner {
  position: relative;
  text-align: center;
}

.ck-block--verlauf .ck-block__prose {
  text-align: center;
}

/* Keine Haarlinie, wo eine Flaeche trennt (wie beim Band). */
.ck-block--verlauf + .ck-block > .ck-block__inner,
.ck-block + .ck-block--verlauf > .ck-block__inner {
  border-top: 0;
  padding-top: 0;
}

.ck-block + .ck-block--verlauf {
  padding-top: var(--ck-section-y-sm);
}


/* --------------------------------------------------------------------------
   6. Abstaende
   Die Bloecke standen mit bis zu 96px Luft oben und unten weit auseinander,
   die Karten dagegen mit 16px eng beieinander. Jetzt umgekehrt gewichtet:
   Bloecke dichter, Karten luftiger.
   -------------------------------------------------------------------------- */

.ck-block {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.ck-block + .ck-block > .ck-block__inner {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.ck-block--band + .ck-block,
.ck-block--verlauf + .ck-block {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.ck-block__intro {
  margin-top: 0.875rem;
}

.ck-block__prose {
  margin-top: 1.5rem;
}

.ck-block__cards {
  gap: 1.5rem;
}

.ck-block__prose + .ck-block__cards {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
}


@media (prefers-reduced-motion: reduce) {
  .ck-block__cards--bento > .ck-baustein__frame:first-child {
    animation: none;
  }

  .ck-split .ck-checklist__item {
    transition: none;
  }

  .ck-split .ck-checklist__item:hover {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Nachjustiert
   -------------------------------------------------------------------------- */

/* Bento ohne Waise: bei vier oder sechs Karten teilen sich die Karten ab
   der dritten die Reihe zu zweit (je drei von sechs Spalten); bei neun
   bleibt das Dreierraster. */
@media (min-width: 64rem) {
  .ck-block__cards--bento > :first-child:nth-last-child(4),
  .ck-block__cards--bento > :first-child:nth-last-child(4) ~ *,
  .ck-block__cards--bento > :first-child:nth-last-child(6) ~ :nth-child(n+3) {
    grid-column: span 3;
  }
}

/* Die Zeilen der Icon-Karte packen oben zusammen; sonst verteilt das Raster
   die Resthoehe zwischen Titel und Text, wenn die Nachbarkarte hoeher ist. */
.ck-baustein--icon {
  align-content: start;
}

/* Im Split laeuft der kuerzere Text neben einem langen Stapel mit. */
@media (min-width: 1024px) {
  .ck-split__text {
    position: sticky;
    top: calc(var(--ck-header-h) + 2rem);
    align-self: start;
  }
}

.ck-block--verlauf .ck-block__cta {
  margin-top: 1.75rem;
}

/* ... und bei sieben oder neun Karten teilen sich die letzten die Reihe
   ebenfalls zu zweit (ab der sechsten Karte). */
@media (min-width: 64rem) {
  .ck-block__cards--bento > :first-child:nth-last-child(7) ~ :nth-child(n+6),
  .ck-block__cards--bento > :first-child:nth-last-child(9) ~ :nth-child(n+6) {
    grid-column: span 3;
  }
}


/* Zusagen unter dem Knopf im Verlaufsband: vier kurze Punkte, damit die
   Flaeche nicht nur aus Ueberschrift und Knopf besteht. */
.ck-block__zusagen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-block__zusagen li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(0, 159, 227, 0.35);
  border-radius: var(--ck-radius-pill);
  background-color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  color: var(--ck-ink);
}

.ck-block__zusagen li::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-image: var(--ck-gradient);
}

/* ===================== 77-hero-szene.css ===================== */
/* ==========================================================================
   CodeKlar – 77-hero-szene.css
   Hero-Szene der Unterseiten (partials/hero-szene.html, Feld heroSzene):

     1  Buehne, Linien      Quadrat mit Verbindungslinien zur Mitte
     2  Kern                Hauptmotiv im Markenverlauf
     3  Satelliten          vier Karten mit Icon und Beschriftung
     4  Bewegungsarten      orbit / puls / fluss
     5  Pillen

   Jede Unterseite bestimmt Hauptmotiv, Satelliten, Pillen und Bewegungsart
   in ihrem JSON; die Icons kommen aus tools/icons.js. Die zweispaltige
   Aufteilung des Seitenkopfs kommt aus 74-hero-team.css, die Pille aus
   75-hero-leistungen.css. Alles ohne Skript, bei reduzierter Bewegung still.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Buehne und Linien
   -------------------------------------------------------------------------- */

.ck-szene {
  position: relative;
  inline-size: min(30rem, 100%);
  aspect-ratio: 1;
  container-type: inline-size;
}

.ck-szene__bahn {
  position: absolute;
  inset: 0;
}

.ck-szene__linien {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.ck-szene__linie {
  fill: none;
  stroke: var(--ck-blue);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 2.5 3.5;
  opacity: 0.5;
}


/* --------------------------------------------------------------------------
   2. Kern
   -------------------------------------------------------------------------- */

.ck-szene__ring {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 2;
  inline-size: 34cqi;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.ck-szene__ring::before,
.ck-szene__ring::after {
  content: "";
  position: absolute;
  inset: -9%;
  border: 2px dashed var(--ck-blue);
  border-radius: 50%;
  opacity: 0.45;
}

.ck-szene__ring::after {
  inset: -20%;
  border-style: solid;
  border-color: rgba(0, 159, 227, 0.14);
}

.ck-szene__kern {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 30%;
  background-image: linear-gradient(135deg, var(--ck-blue) 0%, var(--ck-green) 100%);
  color: var(--ck-white);
  box-shadow: 0 22px 50px rgba(0, 119, 170, 0.28);
}

.ck-szene__kern svg {
  inline-size: 52%;
  block-size: 52%;
  stroke-width: 1.5;
}


/* --------------------------------------------------------------------------
   3. Satelliten
   -------------------------------------------------------------------------- */

.ck-szene__sat {
  position: absolute;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  inline-size: 23cqi;
  padding: 2.2cqi 1.5cqi;
  translate: -50% -50%;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  box-shadow: 0 12px 30px rgba(16, 60, 90, 0.12);
  text-align: center;
}

.ck-szene__sat--1 { inset-inline-start: 19%; inset-block-start: 23%; }
.ck-szene__sat--2 { inset-inline-start: 81%; inset-block-start: 27%; }
.ck-szene__sat--3 { inset-inline-start: 17%; inset-block-start: 73%; }
.ck-szene__sat--4 { inset-inline-start: 83%; inset-block-start: 71%; }

.ck-szene__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 11cqi;
  block-size: 11cqi;
  border-radius: 28%;
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
}

.ck-szene__icon svg {
  inline-size: 58%;
  block-size: 58%;
}

.ck-szene__label {
  font-size: clamp(0.75rem, 3cqi, 0.8125rem);
  font-weight: var(--ck-weight-medium);
  line-height: 1.2;
  color: var(--ck-ink);
}

/* Wanderpunkte: nur bei "fluss" sichtbar */
.ck-szene__punkt {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  inline-size: 2.6cqi;
  block-size: 2.6cqi;
  margin: -1.3cqi 0 0 -1.3cqi;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--ck-blue), var(--ck-green));
  box-shadow: 0 0 0 4px rgba(0, 159, 227, 0.12);
}


/* --------------------------------------------------------------------------
   4. Bewegungsarten
   -------------------------------------------------------------------------- */

/* orbit: Bahn samt Linien dreht sich, die Karten drehen gegen, bleiben
   also lesbar; der Kern atmet. */
.ck-szene--orbit .ck-szene__bahn {
  animation: ck-szene-dreht 80s linear infinite;
}

.ck-szene--orbit .ck-szene__sat {
  animation: ck-szene-gegen 80s linear infinite;
}

.ck-szene--orbit .ck-szene__kern {
  animation: ck-szene-atmet 6s ease-in-out infinite;
}

@keyframes ck-szene-dreht { to { rotate: 360deg; } }
@keyframes ck-szene-gegen { to { rotate: -360deg; } }
@keyframes ck-szene-atmet {
  0%, 100% { scale: 1; }
  50%      { scale: 1.05; }
}

/* puls: Wellen laufen aus der Mitte, die Karten wippen nacheinander. */
.ck-szene--puls .ck-szene__ring::before {
  animation: ck-szene-welle 3.6s ease-out infinite;
}

.ck-szene--puls .ck-szene__ring::after {
  animation: ck-szene-welle 3.6s ease-out 1.2s infinite;
  border-style: dashed;
  border-color: var(--ck-blue);
}

.ck-szene--puls .ck-szene__sat {
  animation: ck-szene-wippt 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.25s);
}

@keyframes ck-szene-welle {
  0%   { inset: -4%; opacity: 0.6; }
  100% { inset: -42%; opacity: 0; }
}

@keyframes ck-szene-wippt {
  0%, 100% { translate: -50% -50%; }
  50%      { translate: -50% calc(-50% - 7px); }
}

/* fluss: die Linien laufen zur Mitte, Punkte wandern von aussen hinein. */
.ck-szene--fluss .ck-szene__linie {
  animation: ck-szene-fliesst 2s linear infinite;
}

.ck-szene--fluss .ck-szene__punkt {
  display: block;
  animation: ck-szene-punkt 4s ease-in-out infinite;
}

.ck-szene--fluss .ck-szene__punkt--1 { --dx: -31cqi; --dy: -27cqi; animation-delay: 0s; }
.ck-szene--fluss .ck-szene__punkt--2 { --dx: 31cqi;  --dy: -23cqi; animation-delay: 1s; }
.ck-szene--fluss .ck-szene__punkt--3 { --dx: -33cqi; --dy: 23cqi;  animation-delay: 2s; }
.ck-szene--fluss .ck-szene__punkt--4 { --dx: 33cqi;  --dy: 21cqi;  animation-delay: 3s; }

.ck-szene--fluss .ck-szene__kern {
  animation: ck-szene-atmet 4s ease-in-out infinite;
}

@keyframes ck-szene-fliesst { to { stroke-dashoffset: -6; } }

@keyframes ck-szene-punkt {
  0%   { translate: var(--dx) var(--dy); opacity: 0; scale: 0.6; }
  15%  { opacity: 1; scale: 1; }
  70%  { translate: 0 0; opacity: 1; }
  80%, 100% { translate: 0 0; opacity: 0; scale: 0.4; }
}


/* --------------------------------------------------------------------------
   5. Pillen
   -------------------------------------------------------------------------- */

.ck-szene__pill--1 { inset-block-start: -1%; inset-inline-start: 50%; translate: -50% 0; }
.ck-szene__pill--2 { inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; animation-delay: -3.5s; }
.ck-szene__pill--3 { inset-block-start: 48%; inset-inline-end: -6%; animation-delay: -1.5s; }


@media (prefers-reduced-motion: reduce) {
  .ck-szene__bahn,
  .ck-szene__sat,
  .ck-szene__kern,
  .ck-szene__ring::before,
  .ck-szene__ring::after,
  .ck-szene__linie,
  .ck-szene__punkt {
    animation: none;
  }

  .ck-szene__punkt {
    display: none;
  }
}

/* ===================== 80-hero-diagramm.css ===================== */
/* ============================================================
   Hero-Schaubild

     Ihr Unternehmen  ──▲▼── Ihre Daten
     Ihre Microsoft 365 Umgebung   ╌╌ ⚙ ╌╌  CodeKlar

   Gestalterische Regel, die das Bild traegt: Es gibt genau EINEN
   durchgezogenen, farbigen, bewegten Strang — den Datenweg zwischen
   Unternehmen und eigener Umgebung. Alles, was zu CodeKlar fuehrt,
   ist gestrichelt und grau. So ist auf einen Blick klar, dass wir
   betreuen und nicht dazwischenstehen.
   ============================================================ */

.ck-hero__diagram {
  inline-size: min(44rem, 100%);
  block-size: auto;
  overflow: visible;
}

/* ---------- Flaechen ---------- */

.ck-dia__box {
  fill: #fff;
  stroke: #d8e3ec;
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 18px rgba(16, 60, 90, .08));
}

/* Die Umgebung ist der Besitz des Kunden — heller Rahmen in Markenfarbe,
   damit sie als zusammenhaengender Raum gelesen wird. */
.ck-dia__box--env {
  fill: #f7fcfe;
  stroke: #a9dcf3;
}

.ck-dia__box--ck {
  fill: #fff;
  stroke: #c6e6f7;
}

.ck-dia__chip {
  fill: #fff;
  stroke: #e2ebf2;
  stroke-width: 1;
}

.ck-dia__rule { stroke: #e4ecf2; stroke-width: 1; }

/* ---------- Schrift ---------- */

.ck-dia__box-title {
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  fill: var(--ck-ink, #1d2327);
}

.ck-dia__box-sub {
  font-family: inherit;
  font-size: 13.5px;
  fill: var(--ck-ink-soft, #55636f);
}

.ck-dia__svc-label {
  font-family: inherit;
  font-size: 12.5px;
  fill: var(--ck-ink-soft, #55636f);
  text-anchor: middle;
}

.ck-dia__ck-name {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  fill: #0077aa;
  text-anchor: middle;
}

.ck-dia__ck-service {
  font-family: inherit;
  font-size: 13.5px;
  fill: var(--ck-ink-soft, #55636f);
  text-anchor: middle;
}

.ck-dia__flow-label,
.ck-dia__legend-text {
  font-family: inherit;
  font-size: 13px;
  fill: var(--ck-ink-soft, #55636f);
  dominant-baseline: middle;
}

.ck-dia__flow-label { font-weight: 600; fill: #0077aa; }

/* ---------- Verbindungen ---------- */

.ck-dia__data {
  fill: none;
  stroke: #009fe3;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.ck-dia__care {
  fill: none;
  stroke: #8b98a5;
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  animation: ck-dia-flow 3.4s linear infinite;
}

/* gegenlaeufig, damit das Bild nicht in eine Richtung "zieht" */
.ck-dia__care--talk { animation-direction: reverse; animation-duration: 4.6s; }

@keyframes ck-dia-flow {
  to { stroke-dashoffset: -24; }
}

.ck-dia__dot {
  fill: #009fe3;
  filter: drop-shadow(0 0 4px rgba(0, 159, 227, .45));
}

@keyframes ck-dia-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Ohne offset-path wuerden beide Punkte in der Ecke liegen bleiben */
@supports not (offset-path: path('M0 0 L1 1')) {
  .ck-dia__dot { display: none; }
}

/* ---------- Symbole auf den Betreuungslinien ---------- */

.ck-dia__gear-icon {
  animation: ck-dia-gear 11s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes ck-dia-gear {
  to { transform: rotate(360deg); }
}

.ck-dia__talk-icon {
  animation: ck-dia-talk 4.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes ck-dia-talk {
  0%, 100% { opacity: .8; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-1.5px); }
}

/* Die Dienstkacheln atmen ganz leicht — versetzt, damit es lebendig wirkt,
   ohne die Aufmerksamkeit vom Datenweg zu ziehen. */
.ck-dia__svc {
  animation: ck-dia-breathe 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ck-dia__svc--0 { animation-delay: -0.0s; }
.ck-dia__svc--1 { animation-delay: -0.5s; }
.ck-dia__svc--2 { animation-delay: -1.0s; }
.ck-dia__svc--3 { animation-delay: -1.5s; }
.ck-dia__svc--4 { animation-delay: -2.0s; }
.ck-dia__svc--5 { animation-delay: -2.5s; }
.ck-dia__svc--6 { animation-delay: -3.0s; }

@keyframes ck-dia-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (max-width: 64rem) {
  .ck-hero__diagram { inline-size: min(34rem, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ck-dia__care,
  .ck-dia__dot,
  .ck-dia__gear-icon,
  .ck-dia__talk-icon,
  .ck-dia__svc {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Mehr Platz fuers Schaubild im Hero.
   Die Basis haelt die Textspalte ueber ein grosses Gap auf Breite —
   dadurch bleibt rechts kaum Raum. Hier wird die Textspalte direkt
   begrenzt (der dreizeilige H1-Umbruch bleibt erhalten) und das Gap
   deutlich kleiner.
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .ck-hero__inner { gap: 3.5rem; }

  .ck-hero__content {
    flex: 0 1 34rem;
    max-inline-size: 34rem;
  }

  .ck-hero__visual {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
}

@media (min-width: 1440px) {
  .ck-hero__inner { gap: 4.5rem; }
}

/* ------------------------------------------------------------
   Logo-Laufband auf Spaltenbreite begrenzen.
   Es lief zuvor ueber die volle Bildschirmbreite und sprengte damit
   als einziger Abschnitt das Raster der Seite. Die Maske an den
   Raendern bleibt erhalten, sodass die Logos weiterhin weich ein-
   und ausblenden statt hart abzuschneiden.
   ------------------------------------------------------------ */

.ck-logos__viewport {
  inline-size: 100%;
  max-inline-size: var(--ck-container);
  margin-inline: auto;
  padding-inline: var(--ck-gutter);
}

/* ===================== 81-hero-paths.css ===================== */
/* ============================================================
   Bahn der wandernden Punkte auf dem Datenweg.
   ERZEUGT VON tools/gen-hero.js — nicht von Hand aendern.

   Punkte laufen ausschliesslich hier: zwischen dem Unternehmen und
   seiner eigenen Umgebung. Die Betreuungslinien bleiben ruhig.
   ============================================================ */

.ck-dia__dot--1,
.ck-dia__dot--2 {
  offset-path: path('M174 112 L174 184');
  animation: ck-dia-travel 2.8s linear infinite;
}
.ck-dia__dot--1 { animation-delay: -0.3s; }
/* gegenlaeufig: der Zugriff geht in beide Richtungen */
.ck-dia__dot--2 { animation-delay: -1.7s; animation-direction: reverse; }

/* ===================== 82-schutzrahmen.css ===================== */
/* ============================================================
   Schaubild "Schutzrahmen"

   Der Rahmen ist die Aussage: CodeKlar liegt als Schutzebene aussen
   um die Umgebung des Kunden. Innen bleibt alles beim Kunden — und
   der einzige farbige, bewegte Strang (der Datenweg) beruehrt den
   Rahmen an keiner Stelle.
   ============================================================ */

.ck-schutzrahmen { padding-block: var(--ck-section-y-band);
  background-color: var(--ck-surface-muted); }

.ck-sr {
  inline-size: 100%;
  margin-block-start: 2.5rem;
}

.ck-sr__svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

/* ---------- Rahmen und Aufgaben ---------- */

.ck-sr__frame {
  fill: #fbfdff;
  stroke: #2f6fd0;
  stroke-width: 2.6;
  stroke-dasharray: 9 7;
  animation: ck-sr-guard 6s linear infinite;
}

/* Der Rahmen "wandert" langsam — er arbeitet, ohne sich aufzudraengen. */
@keyframes ck-sr-guard {
  to { stroke-dashoffset: -32; }
}

.ck-sr__task rect {
  fill: #fff;
  stroke: #2f6fd0;
  stroke-width: 2;
}

.ck-sr__task text {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  fill: #1f5bb0;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* ---------- Karten ---------- */

.ck-sr__card {
  fill: #fff;
  stroke: #dbe6f2;
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 18px rgba(20, 60, 110, .07));
}

.ck-sr__card--env { fill: #f7fbff; stroke: #bcd8f2; }

.ck-sr__chip {
  fill: #fff;
  stroke: #dfe9f3;
  stroke-width: 1.2;
}

/* ---------- Schrift ---------- */

.ck-sr__card-title {
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  fill: #16273c;
}

.ck-sr__card-sub {
  font-family: inherit;
  font-size: 14.5px;
  fill: #5b6b7d;
}

.ck-sr__svc-label {
  font-family: inherit;
  font-size: 13px;
  fill: #5b6b7d;
  text-anchor: middle;
}

.ck-sr__liste-title {
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  fill: #16273c;
}

.ck-sr__liste-item {
  font-family: inherit;
  font-size: 16.5px;
  fill: #3d4f63;
}

.ck-sr__bullet { fill: #2f8fd8; }

.ck-sr__zusage-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  fill: #16273c;
  text-anchor: middle;
}

.ck-sr__zusage-text {
  font-family: inherit;
  font-size: 16px;
  fill: #5b6b7d;
  text-anchor: middle;
}

.ck-sr__data-label {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  fill: #0077aa;
  dominant-baseline: middle;
}

.ck-sr__message {
  font-family: inherit;
  font-size: 16px;
  fill: #5b6b7d;
}

.ck-sr__message-label { font-weight: 700; fill: #1f5bb0; }

.ck-sr__legend-text {
  font-family: inherit;
  font-size: 14.5px;
  fill: #5b6b7d;
  dominant-baseline: middle;
}

.ck-sr__rule { stroke: #dbe6f2; stroke-width: 1; }

/* ---------- Datenweg ---------- */

.ck-sr__data {
  fill: none;
  stroke: #009fe3;
  stroke-width: 3.4;
  stroke-linecap: round;
}

.ck-sr__dot {
  fill: #009fe3;
  filter: drop-shadow(0 0 4px rgba(0, 159, 227, .45));
  offset-path: path('M250 192 L250 268');
  animation: ck-sr-travel 2.6s linear infinite;
}

.ck-sr__dot--1 { animation-delay: -0.2s; }
.ck-sr__dot--2 { animation-delay: -1.5s; animation-direction: reverse; }

@keyframes ck-sr-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@supports not (offset-path: path('M0 0 L1 1')) {
  .ck-sr__dot { display: none; }
}

/* ---------- Dienstkacheln ---------- */

.ck-sr__svc {
  animation: ck-sr-breathe 6.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ck-sr__svc--0 { animation-delay: -0.0s; }
.ck-sr__svc--1 { animation-delay: -0.6s; }
.ck-sr__svc--2 { animation-delay: -1.2s; }
.ck-sr__svc--3 { animation-delay: -1.8s; }
.ck-sr__svc--4 { animation-delay: -2.4s; }
.ck-sr__svc--5 { animation-delay: -3.0s; }
.ck-sr__svc--6 { animation-delay: -3.6s; }

@keyframes ck-sr-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Auf schmalen Bildschirmen wuerde die Schrift im SVG zu klein —
   dort scrollt das Schaubild waagerecht statt unlesbar zu schrumpfen. */
@media (max-width: 60rem) {
  .ck-sr {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ck-sr__svg { inline-size: 56rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-sr__frame,
  .ck-sr__dot,
  .ck-sr__svc {
    animation: none;
  }
}

/* Hero ohne Grafik: der Text steht allein und bekommt die volle Lesebreite.
   Das Schaubild folgt als eigene Sektion darunter — dort ist es gross genug,
   um die Beschriftungen lesbar zu halten. */
@media (min-width: 1024px) {
  .ck-hero__inner--solo { display: block; }
  .ck-hero__inner--solo .ck-hero__content { max-inline-size: 46rem; }
}

.ck-schutzrahmen__lead {
  max-inline-size: 52rem;
  margin-inline: auto;
}

/* ===================== 83-float-icons.css ===================== */
/* ============================================================
   Schwebende Microsoft-Symbole im Hero

   Rein dekorativ: sie zeigen die Werkzeugwelt, in der wir arbeiten,
   ohne eine Aussage zu behaupten. Die eigentliche Erklaerung steht
   im Schaubild darunter.

   Die Positionen sind bewusst unregelmaessig gesetzt — ein sauberes
   Raster wuerde steif wirken, und die Symbole sollen schweben, nicht
   aufgereiht sein.
   ============================================================ */

.ck-float {
  position: relative;
  inline-size: min(30rem, 100%);
  aspect-ratio: 1 / 0.92;
}

.ck-float__item {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  background-color: #fff;
  border-radius: 1.4rem;
  box-shadow: 0 10px 26px rgba(16, 60, 90, .12);
  animation: ck-float-drift 8s ease-in-out infinite;
  will-change: transform;
}

.ck-float__item img {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  object-fit: contain;
}

/* Verteilung im Feld. Prozentwerte, damit die Anordnung beim
   Skalieren erhalten bleibt. */
.ck-float__item--1 { inset-block-start: 4%;  inset-inline-start: 34%; animation-duration: 7.2s;  animation-delay: -0.4s; }
.ck-float__item--2 { inset-block-start: 20%; inset-inline-start: 68%; animation-duration: 8.6s;  animation-delay: -2.2s; }
.ck-float__item--3 { inset-block-start: 15%; inset-inline-start: 6%;  animation-duration: 7.9s;  animation-delay: -4.1s; }
.ck-float__item--4 { inset-block-start: 47%; inset-inline-start: 46%; animation-duration: 9.1s;  animation-delay: -1.3s; }
.ck-float__item--5 { inset-block-start: 52%; inset-inline-start: 13%; animation-duration: 7.5s;  animation-delay: -5.6s; }
.ck-float__item--6 { inset-block-start: 66%; inset-inline-start: 74%; animation-duration: 8.2s;  animation-delay: -3.0s; }
.ck-float__item--7 { inset-block-start: 79%; inset-inline-start: 36%; animation-duration: 8.9s;  animation-delay: -6.4s; }

@keyframes ck-float-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.5deg); }
}

/* Unter 1024px steht der Hero einspaltig; die Symbole waeren dort nur
   Beiwerk vor dem eigentlichen Inhalt. */
@media (max-width: 63.99rem) {
  .ck-hero__visual { display: none; }
}

@media (min-width: 64rem) and (max-width: 80rem) {
  .ck-float { inline-size: min(25rem, 100%); }
  .ck-float__item { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 1.2rem; }
  .ck-float__item img { inline-size: 2.35rem; block-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-float__item { animation: none; }
}

/* ===================== 84-megamenu.css ===================== */
/* ============================================================
   Mega-Menü

   Das Menü ist auch ein SEO-Werkzeug (siehe SEO.md): Jeder Punkt —
   auch jeder Gruppentitel — ist ein echtes <a href> im HTML und führt
   auf eine bestehende Seite. Nichts wird per JavaScript nachgeladen,
   nichts ist nur Beschriftung. Die Verschachtelung folgt der
   URL-Struktur, damit Suchmaschinen die Hierarchie erkennen.

   Aufgeklappt wird über :hover und :focus-within — dadurch funktioniert
   das Menü auch mit der Tastatur und ohne JavaScript.
   ============================================================ */

@media (min-width: 1024px) {

  /* Das Panel spannt über die volle Fensterbreite, der Inhalt darin
     bleibt aber auf Containerbreite — wie im Vorbild. */
  .ck-nav__item--has-children { position: static; }

  .ck-nav__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 60;
    /* Die Basis gibt dem Panel eine feste Breite (44rem) — hier soll es
       über die volle Fensterbreite laufen, der Inhalt bleibt im Container. */
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: none;
    padding-block: 2.75rem 3rem;
    background-color: #fff;
    border-block-start: 1px solid var(--ck-border, #dde3ea);
    box-shadow: 0 22px 40px rgba(16, 45, 70, .10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }

  .ck-nav__item--has-children:hover > .ck-nav__panel,
  .ck-nav__item--has-children:focus-within > .ck-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Spaltenraster, auf Containerbreite zentriert */
  .ck-nav__groups,
  .ck-nav__panel > .ck-nav__sublist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 3.5rem;
    inline-size: min(var(--ck-container), 100%);
    margin-inline: auto;
    padding-inline: var(--ck-gutter);
    list-style: none;
  }

  /* Menüs ohne Gruppen (KI Lösungen, Über uns) listen direkt auf —
     dort genügen zwei bzw. drei Spalten ohne Gruppenüberschrift. */
  .ck-nav__panel > .ck-nav__sublist { gap: .85rem 3.5rem; }

  .ck-nav__group { min-inline-size: 0; }

  .ck-nav__group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: .85rem;
    margin-block-end: 1.1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ck-ink, #1d2327);
    text-decoration: none;
    border-block-end: 1px solid var(--ck-border, #dde3ea);
    transition: color .15s ease, border-color .15s ease;
  }

  .ck-nav__group-arrow {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: 0 0 auto;
    color: var(--ck-blue, #009fe3);
    transition: transform .18s ease;
  }

  .ck-nav__group-title:hover,
  .ck-nav__group-title:focus-visible {
    color: #0077aa;
    border-color: var(--ck-blue, #009fe3);
  }

  .ck-nav__group-title:hover .ck-nav__group-arrow { transform: translateX(4px); }

  .ck-nav__sublist {
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ck-nav__sublink {
    display: inline-block;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--ck-ink-soft, #55636f);
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
  }

  .ck-nav__sublink:hover,
  .ck-nav__sublink:focus-visible {
    color: #0077aa;
    transform: translateX(2px);
  }

  /* Der Chevron dreht sich, wenn das Panel offen ist */
  .ck-nav__item--has-children:hover > .ck-nav__link .ck-nav__chevron,
  .ck-nav__item--has-children:focus-within > .ck-nav__link .ck-nav__chevron {
    transform: rotate(180deg);
  }

  .ck-nav__chevron { transition: transform .18s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-nav__panel,
  .ck-nav__chevron,
  .ck-nav__group-arrow,
  .ck-nav__sublink,
  .ck-nav__group-title {
    transition: none;
  }
}

@media (min-width: 1024px) {
  /* Die Basis laesst die letzte Gruppe ueber alle Spalten spannen
     (grid-column: 1 / -1) — ein Rest des frueheren zweispaltigen Panels.
     Dadurch rutschte die dritte Spalte in eine eigene Zeile. */
  .ck-nav__group:last-child {
    grid-column: auto;
    padding-block-start: 0;
    border-block-start: 0;
  }
}

/* ------------------------------------------------------------
   Nur "Leistungen" ist ein echtes Mega-Menü (drei Spalten, volle
   Breite). "KI Lösungen" und "Über uns" haben zu wenige Einträge
   dafür — über die volle Breite gezogen standen dort drei Links
   verloren nebeneinander. Sie bekommen wieder ein normales
   Aufklappmenü direkt unter ihrem Menüpunkt.
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  /* Der Positionierungskontext gilt nur noch für das breite Panel */
  .ck-nav__item--has-children:not(:has(.ck-nav__panel--wide)) { position: relative; }

  .ck-nav__panel:not(.ck-nav__panel--wide) {
    inset-inline: auto auto;
    inset-inline-start: 0;
    inline-size: max-content;
    min-inline-size: 14rem;
    max-inline-size: 22rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ck-border, #dde3ea);
    border-radius: var(--ck-radius, .75rem);
    box-shadow: 0 16px 34px rgba(16, 45, 70, .12);
  }

  /* Einspaltig und eng — eine Liste, kein Raster */
  .ck-nav__panel:not(.ck-nav__panel--wide) > .ck-nav__sublist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
    inline-size: auto;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Das letzte Menü rechts würde sonst aus dem Fenster laufen */
  .ck-nav__item:last-child .ck-nav__panel:not(.ck-nav__panel--wide) {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

/* Vier Spalten, seit "KI Lösungen" unter Leistungen liegt. */
@media (min-width: 1024px) {
  .ck-nav__groups--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2.5rem; }
}

@media (min-width: 1024px) and (max-width: 82rem) {
  /* Auf schmaleren Bildschirmen bleiben vier Spalten zu eng */
  .ck-nav__groups--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== 85-kundenstimmen.css ===================== */
/* ==========================================================================
   CodeKlar – 85-kundenstimmen.css
   Startseite: "Was unsere Kunden sagen" – die Google-Bewertungen.

   Helle Flaeche in den Hausfarben: zarter Blauverlauf wie in den Baendern
   der Einzelseiten, weisse Karten mit Markenblau und -gruen als Akzent.
   Darueber eine Leiste mit Google-Sternen und Partnerstatus. Die
   Bewertungen laufen in zwei Reihen gegenlaeufig durch (reine CSS-
   Bewegung), halten beim Ueberfahren an und stehen bei reduzierter
   Bewegung still als scrollbare Reihen.
   Markup: templates/home.html, Daten: content/home/__home.json.
   ========================================================================== */

.ck-stimmen {
  position: relative;
  overflow: hidden;
  padding-block: var(--ck-section-y-band);
  color: var(--ck-ink);
  background-color: var(--ck-blue-soft);
  background-image: linear-gradient(180deg, var(--ck-blue-soft) 0%, var(--ck-surface) 100%);
}

/* Zwei Lichtflecken in den Markenfarben, sehr zurueckgenommen. */
.ck-stimmen__glow {
  position: absolute;
  inline-size: 46rem;
  block-size: 46rem;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}

.ck-stimmen__glow--1 {
  inset-block-start: -18rem;
  inset-inline-start: -14rem;
  background: radial-gradient(circle, rgba(0, 159, 227, 0.16) 0%, rgba(0, 159, 227, 0) 65%);
}

.ck-stimmen__glow--2 {
  inset-block-end: -20rem;
  inset-inline-end: -12rem;
  background: radial-gradient(circle, rgba(0, 253, 208, 0.18) 0%, rgba(0, 253, 208, 0) 65%);
}

.ck-stimmen__kopf {
  position: relative;
  text-align: center;
}

/* Leiste: Google-Sterne, Partnerstatus, Auszeichnung. */
.ck-stimmen__badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-block-end: 1.75rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  text-decoration: none;
  box-shadow: var(--ck-shadow-sm);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
    transform var(--ck-transition);
}

.ck-stimmen__badge:hover,
.ck-stimmen__badge:focus-visible {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-2px);
}

.ck-stimmen__badge:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 3px;
}

.ck-stimmen__badge-teil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.ck-stimmen__badge-teil svg {
  flex: 0 0 auto;
}

.ck-stimmen__google {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.ck-stimmen__badge-trenner {
  inline-size: 1px;
  block-size: 1.25rem;
  background-color: var(--ck-border);
}

/* Fuenf goldene Sterne als ein SVG, damit sie exakt ausgerichtet sind. */
.ck-sterne {
  inline-size: 5.25rem;
  block-size: 0.95rem;
  color: #f5b301;
}

.ck-stimmen__title {
  margin-inline: auto;
}

.ck-stimmen__intro {
  margin: 1rem auto 0;
  max-width: 44ch;
}

/* Die Reihen laufen ueber die volle Fensterbreite, links und rechts
   weich ausgeblendet. */
.ck-stimmen__reihen {
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin-block-start: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}

.ck-stimmen__reihe {
  overflow: hidden;
  padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Die Spur enthaelt zwei identische Saetze; -50% ist darum genau ein
   Satz samt Luecke, und der Lauf springt nicht. */
.ck-stimmen__spur {
  display: flex;
  inline-size: max-content;
  animation: ck-stimmen-lauf 80s linear infinite;
}

.ck-stimmen__reihe--rueckwaerts .ck-stimmen__spur {
  animation-direction: reverse;
  animation-duration: 92s;
}

.ck-stimmen__reihe:hover .ck-stimmen__spur,
.ck-stimmen__reihe:focus-within .ck-stimmen__spur {
  animation-play-state: paused;
}

.ck-stimmen__satz {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0 1.25rem 0 0;
  list-style: none;
}

.ck-stimme {
  flex: 0 0 auto;
  inline-size: clamp(17rem, 22vw + 6rem, 23.5rem);
}

/* Weisse Karte mit feiner Kante; oben links ein grosses Anfuehrungs-
   zeichen im Markenverlauf. */
.ck-stimme__karte {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  box-shadow: var(--ck-shadow-sm);
  transition: border-color var(--ck-transition), transform var(--ck-transition),
    box-shadow var(--ck-transition);
}

.ck-stimme__karte:hover {
  border-color: var(--ck-blue);
  box-shadow: var(--ck-shadow);
  transform: translateY(-3px);
}

.ck-stimme__anf {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 3rem;
  font-weight: var(--ck-weight-black);
  line-height: 0.7;
  color: var(--ck-blue);
  background-image: var(--ck-gradient);
  background-clip: text;
  -webkit-background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ck-stimme__anf {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.ck-stimme__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ck-ink-soft);
}

/* Fuss mit Markenbalken links; die Trennlinie darueber gehoert zur Karte. */
.ck-stimme__fuss {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-block-start: auto;
  padding-block-start: 1rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 3px solid var(--ck-blue);
}

.ck-stimme__text + .ck-stimme__fuss {
  margin-block-start: 1.25rem;
}

.ck-stimme__text + .ck-stimme__fuss::before {
  content: "";
  position: absolute;
  inset-inline: -0.875rem 0;
  inset-block-start: -1.1rem;
  block-size: 1px;
  background-color: var(--ck-border);
}

.ck-stimme__name {
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-bold);
  color: var(--ck-ink);
}

.ck-stimme__firma,
.ck-stimme__meta {
  font-size: 0.8125rem;
  color: var(--ck-muted);
}

.ck-stimmen__alle {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
}

@keyframes ck-stimmen-lauf {
  to { transform: translateX(-50%); }
}

@media (max-width: 40rem) {
  .ck-stimmen__badge {
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  .ck-stimmen__badge-trenner {
    display: none;
  }
}

/* Reduzierte Bewegung: keine Laufschrift, stattdessen zwei von Hand
   scrollbare Reihen ohne das zweite Exemplar. */
@media (prefers-reduced-motion: reduce) {
  .ck-stimmen__reihe {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: x proximity;
    padding-block-end: 0.75rem;
  }

  .ck-stimmen__spur {
    animation: none;
  }

  .ck-stimmen__satz[aria-hidden="true"] {
    display: none;
  }

  .ck-stimme {
    scroll-snap-align: start;
  }

  .ck-stimmen__badge,
  .ck-stimme__karte {
    transition: none;
  }

  .ck-stimmen__badge:hover,
  .ck-stimme__karte:hover {
    transform: none;
  }
}

/* ===================== 86-faq.css ===================== */
/* ==========================================================================
   FAQ auf der Startseite

   Aussehen und Verhalten der Fragen kommen aus styles/40-seiten.css — es ist
   dieselbe FAQ wie auf den Leistungsseiten. Hier steht nur, was die
   Startseite zusaetzlich hat: eine Einleitung unter der Ueberschrift und
   eine Zeile fuer alles, was die Liste nicht beantwortet.

   Aufgeklappt wird ueber <details>/<summary>, also ohne JavaScript. Das
   Attribut name="ck-faq" im Markup laesst immer nur eine Antwort offen;
   Browser ohne Unterstuetzung lassen mehrere offen, was nichts kaputt macht.
   ========================================================================== */

.ck-faq__inner {
  max-width: 56rem;
  margin-inline: auto;
}

.ck-faq__kopf {
  text-align: center;
}

.ck-faq__intro {
  max-width: 44rem;
  margin: 1rem auto 0;
}

.ck-faq__rest {
  margin-block-start: 2rem;
  text-align: center;
  color: var(--ck-ink-soft);
}

.ck-faq__rest-link {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ===================== 87-formular.css ===================== */
/* ==========================================================================
   Kontaktformular

   Zweispaltig ab 640px, damit die vier kurzen Angaben nicht als lange
   Kolonne untereinander stehen. Auswahl, Nachricht, Hinweis und Schaltflaeche
   laufen ueber beide Spalten (.ck-feld--breit).

   Fehlermeldungen stehen als eigener Absatz unter dem Feld und sind ueber
   aria-describedby mit ihm verbunden — ein roter Rahmen allein waere fuer
   Screenreader und fuer Menschen mit Farbsehschwaeche keine Information.
   ========================================================================== */

.ck-anfrage__inner {
  max-width: 56rem;
  margin-inline: auto;
}

.ck-anfrage__kopf {
  margin-block-end: 2.5rem;
  text-align: center;
}

.ck-anfrage__kopf .ck-h1 {
  margin: 0;
}

.ck-anfrage__intro {
  max-width: 44rem;
  margin: 1rem auto 0;
}

/* Die Zusage steht bewusst ueber dem Formular: sie ist der Grund,
   ueberhaupt auszufuellen. */
.ck-anfrage__zusage {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.75rem auto 0;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--ck-blue);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  text-align: start;
}

.ck-anfrage__zusage-icon {
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--ck-blue-strong);
}

.ck-anfrage__zusage-icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.ck-anfrage__zusage-titel {
  display: block;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-anfrage__zusage-text {
  display: block;
  font-size: 0.9375rem;
  color: var(--ck-ink-soft);
}

.ck-anfrage__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .ck-anfrage__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ck-feld--breit {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Einzelnes Feld
   -------------------------------------------------------------------------- */

.ck-feld {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ck-feld__label {
  padding: 0;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-feld__pflicht {
  color: var(--ck-blue-strong);
}

.ck-feld__eingabe {
  inline-size: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-feld__eingabe::placeholder {
  color: var(--ck-muted);
}

.ck-feld__eingabe:hover {
  border-color: var(--ck-blue);
}

.ck-feld__eingabe:focus-visible {
  outline: none;
  border-color: var(--ck-blue-strong);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.22);
}

.ck-feld__eingabe--mehrzeilig {
  resize: vertical;
  min-block-size: 8rem;
  font-family: inherit;
  line-height: 1.6;
}

/* Rot allein traegt die Information nicht: dazu kommt der Text darunter. */
.ck-feld__eingabe[aria-invalid="true"] {
  border-color: var(--ck-rot, #b3261e);
}

.ck-feld__fehler {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ck-rot, #b3261e);
}

/* --------------------------------------------------------------------------
   Themenauswahl

   Das Auswahlfeld ist optisch eine Reihe von Schaltern, technisch bleiben es
   Radiofelder: Tastatur, Screenreader und die Pflichtangabe funktionieren
   dadurch ohne eigenes JavaScript.
   -------------------------------------------------------------------------- */

.ck-themen__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-block-start: 0.25rem;
}

.ck-themen__wahl {
  position: relative;
  display: inline-flex;
}

.ck-themen__radio {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ck-themen__label {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ck-border);
  border-radius: 999px;
  background-color: var(--ck-surface);
  color: var(--ck-ink);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--ck-transition), background-color var(--ck-transition),
    color var(--ck-transition);
}

.ck-themen__radio:hover + .ck-themen__label {
  border-color: var(--ck-blue);
}

.ck-themen__radio:focus-visible + .ck-themen__label {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 2px;
}

.ck-themen__radio:checked + .ck-themen__label {
  border-color: var(--ck-blue-strong);
  background-color: var(--ck-blue-strong);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Hinweis, Schaltflaeche, Rueckmeldung
   -------------------------------------------------------------------------- */

.ck-anfrage__hinweis {
  margin: 0;
  color: var(--ck-ink-soft);
}

.ck-anfrage__hinweis a {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ck-anfrage__aktion {
  margin-block-start: 0.25rem;
}

.ck-anfrage__senden {
  inline-size: 100%;
}

@media (min-width: 640px) {
  .ck-anfrage__senden {
    inline-size: auto;
    min-inline-size: 16rem;
  }
}

.ck-anfrage__ergebnis {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface);
  color: var(--ck-ink-soft);
}

.ck-anfrage__ergebnis--gut {
  border-color: var(--ck-blue);
}

.ck-anfrage__ergebnis--fehler {
  border-color: var(--ck-rot, #b3261e);
}

.ck-anfrage__ergebnis a {
  color: var(--ck-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .ck-feld__eingabe,
  .ck-themen__label {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   Versprechen mit Gesicht
   Ueber dem Formular steht nicht eine anonyme Zusage, sondern der
   Geschaeftsfuehrer selbst: Portrait, Zusage in der Ich-Form, Frist.
   -------------------------------------------------------------------------- */

.ck-versprechen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem 1.5rem;
  align-items: center;
  max-width: 42rem;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ck-blue);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-surface);
  box-shadow: var(--ck-shadow-sm);
  text-align: start;
}

/* Runder Ausschnitt mit dem hellen Blau der Teamkarten dahinter — das
   freigestellte Portrait bekommt so einen Hintergrund. */
.ck-versprechen__bild {
  display: block;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  overflow: hidden;
  border: 3px solid var(--ck-surface);
  border-radius: 50%;
  background: linear-gradient(160deg, #e8f5fc 0%, #d6eef9 100%);
  box-shadow: var(--ck-shadow);
}

.ck-versprechen__bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

.ck-versprechen__zusage {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ck-ink);
}

.ck-versprechen__wer {
  margin: 0.75rem 0 0;
  line-height: 1.4;
}

.ck-versprechen__name {
  display: block;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-ink);
}

.ck-versprechen__rolle {
  display: block;
  font-size: 0.9375rem;
  color: var(--ck-muted);
}

.ck-versprechen__frist {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.875rem 0 0;
  padding: 0.3rem 0.75rem;
  border-radius: var(--ck-radius-pill);
  background-color: var(--ck-blue-soft);
  font-size: 0.875rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
}

.ck-versprechen__frist svg {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (max-width: 30rem) {
  .ck-versprechen {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .ck-versprechen__text {
    text-align: center;
  }

  .ck-versprechen__frist {
    margin-inline: auto;
  }
}


/* --------------------------------------------------------------------------
   Seitige Kontaktseite
   Links das Formular in einer Karte, rechts die Leiste mit Zusage, direkten
   Wegen und Oeffnungszeiten. Ab 64rem zwei Spalten, die Leiste laeuft beim
   Scrollen mit; darunter steht sie vor dem Formular, damit Telefon und
   Termin auf dem Handy nicht hinter den Feldern liegen. Die Wege nutzen die
   Zeilen aus 40-seiten.css (.ck-weg) in einer schmaleren Fassung.
   -------------------------------------------------------------------------- */

.ck-anfrage__raster {
  display: grid;
  gap: 1.5rem;
}

.ck-anfrage__seite {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  order: -1;
}

@media (min-width: 64rem) {
  .ck-anfrage__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: start;
  }

  .ck-anfrage__seite {
    position: sticky;
    top: calc(var(--ck-header-h) + 1.5rem);
    order: 0;
  }
}

.ck-anfrage__haupt {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-sm);
}

.ck-anfrage--seitig .ck-anfrage__kopf {
  margin-block-end: 1.75rem;
  text-align: start;
}

.ck-anfrage__titel {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--ck-weight-regular);
  line-height: 1.25;
  color: var(--ck-ink);
}

.ck-anfrage--seitig .ck-anfrage__intro {
  max-width: none;
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ck-muted);
}

.ck-anfrage__seite .ck-versprechen {
  max-width: none;
  margin: 0;
}

.ck-anfrage__seite .ck-anfrage__zusage {
  margin: 0;
}

.ck-direkt {
  padding: 1.25rem;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-sm);
}

.ck-direkt__titel {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  color: var(--ck-ink);
}

.ck-anfrage__seite .ck-wege {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin: 0;
}

.ck-anfrage__seite .ck-weg__link {
  gap: 0.875rem;
  padding: 0.75rem 1rem;
}

.ck-anfrage__seite .ck-weg__icon {
  width: 2.5rem;
  height: 2.5rem;
}

.ck-anfrage__seite .ck-weg__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ck-anfrage__seite .ck-weg__wert {
  font-size: 1rem;
}

/* Der Termin ist der kuerzeste Weg und steht darum hervorgehoben. */
.ck-weg--primaer .ck-weg__link {
  border-color: var(--ck-blue);
  background-color: var(--ck-blue-soft);
}

.ck-weg--primaer .ck-weg__link:hover {
  border-color: var(--ck-blue-strong);
}

.ck-anfrage__seite .ck-zeiten {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0.625rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--ck-border-strong);
  border-radius: var(--ck-radius);
  background-color: var(--ck-surface-sunken);
}

.ck-anfrage__seite .ck-zeiten__item {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ck-ink);
}

/* Der Seitenkopf bringt seinen Abstand nach unten schon mit; die graue
   Bahn braucht darum oben weniger Luft als eine Bahn zwischen zwei
   weissen Abschnitten. */
.ck-anfrage--seitig {
  padding-block-start: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}


/* Honeypot: aus dem Sichtfeld und aus der Tab-Reihenfolge, aber im DOM. */
.ck-feld--honig {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Popup "Erstgespraech anfragen" (partials/anfrage-dialog.html)
   Dasselbe Formular wie auf der Kontaktseite in einem <dialog>; Felder und
   Themen nutzen die Regeln oben. Schliessen per Kreuz, Escape, Klick auf
   den Hintergrund.
   -------------------------------------------------------------------------- */

.ck-anfrage-dialog {
  inline-size: min(96vw, 46rem);
  max-inline-size: none;
  max-block-size: min(94vh, 60rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-lg);
  overflow: auto;
}

.ck-anfrage-dialog::backdrop {
  background-color: rgba(15, 61, 99, 0.55);
  backdrop-filter: blur(3px);
}

.ck-anfrage-dialog__inner {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ck-anfrage-dialog__kopf {
  margin-block-end: 1.5rem;
  text-align: start;
  padding-inline-end: 2.5rem;
}

.ck-anfrage-dialog .ck-anfrage__intro {
  max-width: none;
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ck-muted);
}

.ck-anfrage-dialog__schliessen {
  position: sticky;
  inset-block-start: 0.75rem;
  float: inline-end;
  margin: 0.75rem 0.75rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--ck-border);
  border-radius: 50%;
  background-color: var(--ck-white);
  color: var(--ck-ink);
  cursor: pointer;
  transition: background-color var(--ck-transition), color var(--ck-transition);
  z-index: 1;
}

.ck-anfrage-dialog__schliessen svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ck-anfrage-dialog__schliessen:hover,
.ck-anfrage-dialog__schliessen:focus-visible {
  background-color: var(--ck-blue);
  border-color: var(--ck-blue);
  color: var(--ck-white);
}

body:has(.ck-anfrage-dialog[open]) {
  overflow: hidden;
}

@media (max-width: 640px) {
  .ck-anfrage-dialog {
    inline-size: 100vw;
    max-block-size: 100vh;
    border-radius: 0;
  }
}

/* Freiwillige Felder (Firma, Telefon): leiser Zusatz hinter der Beschriftung */
.ck-feld__optional {
  font-size: 0.875em;
  font-weight: var(--ck-weight-regular);
  color: var(--ck-muted);
}

/* ===================== 90-dns-checker.css ===================== */
/* ============================================================
   Microsoft 365 DNS-Checker
   ============================================================ */

.ck-dns__form {
  max-inline-size: 42rem;
  margin-block-end: 1.5rem;
}

.ck-dns__label {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ck-ink, #1d2327);
}

.ck-dns__row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ck-dns__input {
  flex: 1 1 18rem;
  min-inline-size: 0;
  padding: 0.85rem 1.25rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ck-ink, #1d2327);
  background-color: #fff;
  border: 1px solid var(--ck-border, #dde3ea);
  border-radius: 999px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.ck-dns__input:focus-visible {
  outline: none;
  border-color: var(--ck-blue, #009fe3);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, .22);
}

.ck-dns__submit { flex: 0 0 auto; }
.ck-dns__submit[disabled] { opacity: .55; cursor: progress; }

.ck-dns__note {
  margin-block-start: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ck-ink-soft, #55636f);
}

.ck-dns__status {
  min-block-size: 1.5rem;
  margin-block: 0 1rem;
  font-size: 1rem;
  color: var(--ck-ink-soft, #55636f);
}

/* ---------- Zusammenfassung ---------- */

.ck-dns__summary:not(:empty) {
  padding: 1.25rem 1.5rem;
  margin-block-end: 1.5rem;
  background-color: #f4f9fc;
  border: 1px solid var(--ck-border, #dde3ea);
  border-radius: var(--ck-radius, 0.75rem);
}

.ck-dns__summary-line { margin: 0 0 0.75rem; font-size: 1.0625rem; }

.ck-dns__tally {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-dns__tally-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--ck-ink-soft, #55636f);
}

.ck-dns__tally-item strong { font-size: 1.375rem; font-weight: 600; }
.ck-dns__tally-item--ok strong { color: #0f7a3d; }
.ck-dns__tally-item--warn strong { color: #a36200; }
.ck-dns__tally-item--fail strong { color: #b3261e; }

/* ---------- Filter ---------- */

.ck-dns__filter { margin-block-end: 1.25rem; }

.ck-dns__check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  color: var(--ck-ink-soft, #55636f);
  cursor: pointer;
}

.ck-dns__check input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--ck-blue, #009fe3); }

/* ---------- Ergebnisliste ---------- */

.ck-dns__group { margin-block-end: 2rem; }

.ck-dns__group-title {
  margin: 0 0 0.9rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ck-ink, #1d2327);
}

.ck-dns__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-dns__item {
  padding: 1.1rem 1.25rem;
  background-color: #fff;
  border: 1px solid var(--ck-border, #dde3ea);
  border-inline-start: 4px solid var(--ck-border, #dde3ea);
  border-radius: var(--ck-radius, 0.75rem);
}

.ck-dns__item--ok   { border-inline-start-color: #1a9d55; }
.ck-dns__item--warn { border-inline-start-color: #e0a106; }
.ck-dns__item--fail { border-inline-start-color: #d3372c; }
.ck-dns__item--info { border-inline-start-color: #7fa8bd; }

.ck-dns__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-block-end: 0.5rem;
}

.ck-dns__badge {
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

/* Kontraste gegen die jeweilige Hintergrundfarbe geprueft (alle > 4.5:1) */
.ck-dns__badge--ok   { color: #0b5f33; background-color: #dff3e6; }
.ck-dns__badge--warn { color: #7a4a00; background-color: #fbf0d6; }
.ck-dns__badge--fail { color: #8c1d16; background-color: #fbe3e1; }
.ck-dns__badge--info { color: #1f5871; background-color: #e2eff6; }

.ck-dns__name { font-size: 1.0625rem; color: var(--ck-ink, #1d2327); }

.ck-dns__hint {
  margin: 0 0 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ck-ink-soft, #55636f);
}

.ck-dns__found {
  margin: 0;
  padding: 0.6rem 0.85rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #2b3742;
  background-color: #f5f8fa;
  border-radius: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.ck-dns__found code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.ck-dns__noscript,
.ck-dns__result:empty + .ck-dns__noscript {
  padding: 1.25rem;
  background-color: #fbf0d6;
  border-radius: var(--ck-radius, 0.75rem);
}

/* ---------- Erklärteil ---------- */

.ck-dns-info__lead { max-inline-size: 48rem; margin-block-end: 2.5rem; }
.ck-dns-info__card p { margin: 0; }

.ck-dns-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 40rem) {
  .ck-dns__row { flex-direction: column; align-items: stretch; }
  .ck-dns__submit { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-dns__input { transition: none; }
}

/* Querauswertung: Hinweise, die sich erst aus dem Zusammenspiel mehrerer
   Eintraege ergeben (z. B. strenges DMARC ohne SPF). */
.ck-dns__crosscheck {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #6a3d00;
  background-color: #fdf6e3;
  border-inline-start: 4px solid #e0a106;
  border-radius: 0.5rem;
}

.ck-dns__crosscheck strong { color: #4d2c00; }


/* ---------- Eingabe im Seitenkopf ----------
   Links Titel und Einleitung, rechts die Karte mit dem Formular. Die Karte
   ist kein Schmuck und bleibt darum auch auf dem Handy sichtbar: dort steht
   sie unter dem Titel. */

.ck-dns-head {
  padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.ck-dns-head__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 64rem) {
  .ck-dns-head__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 5rem);
  }
}

.ck-dns-head__karte-rahmen {
  border-radius: var(--ck-radius-lg);
  box-shadow: 0 24px 50px rgba(16, 60, 90, 0.14);
}

.ck-dns-head__karte {
  display: block;
  max-inline-size: none;
  margin: 0;
  padding: 1.75rem;
  border-radius: calc(var(--ck-radius-lg) - 4px);
  animation: ck-hero-schwebt 8s ease-in-out infinite;
}

@media (min-width: 768px) {
  .ck-dns-head__karte {
    padding: 2rem 2.25rem 1.75rem;
  }
}

.ck-dns-head__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: 1rem;
  border-radius: var(--ck-radius);
  background-image: var(--ck-gradient);
  color: #fff;
}

.ck-dns-head__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.ck-dns-head__titel {
  margin: 0 0 0.35rem;
}

.ck-dns-head__hinweis {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ck-muted);
}

/* Schmalere Basis nur, wenn die Zeile wirklich nebeneinander steht; in der
   gestapelten Handy-Variante wuerde die Basis sonst zur Hoehe. */
@media (min-width: 48rem) {
  .ck-dns-head__karte .ck-dns__input {
    flex-basis: 12rem;
  }
}

/* Der Filter erscheint erst, wenn ein Ergebnis da ist. */
.ck-dns__filter:has(+ .ck-dns__result:empty) {
  display: none;
}

.ck-dns-head__karte .ck-dns__note {
  font-size: 0.8125rem;
  color: var(--ck-muted);
}

/* Der Ergebnisbereich beginnt ohne grosse Luft unter dem Kopf und bleibt
   beim Hinscrollen unter dem fixen Header sichtbar. */
.ck-dns {
  padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  scroll-margin-top: calc(var(--ck-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  .ck-dns-head__karte {
    animation: none;
  }
}

.ck-dns__fehler {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #8c1d16;
}

.ck-dns__input[aria-invalid="true"] {
  border-color: #d3372c;
}

/* Gestapelt (Handy) darf die Flex-Basis nicht zur Hoehe werden. */
@media (max-width: 40rem) {
  .ck-dns__input {
    flex: 1 1 auto;
  }
}

/* ===================== 91-angebot.css ===================== */
/* ==========================================================================
   CodeKlar – 91-angebot.css
   Angebotskasten: ein thematisch passender Aufruf mit kleinem, konkretem
   Angebot. Steht im Beitragstext (partials/angebot-kasten.html, Feld
   ctaAngebot im Blog-JSON) und unter dem Ergebnis des DNS-Checkers
   (src/assets/js/dns-checker.js). Bewusst ruhiger als der grosse
   "Erstgespraech anfragen"-Block: ein Leser im Recherchemodus soll ihn als
   Hinweis lesen, nicht als Werbebanner.
   ========================================================================== */

.ck-angebot {
  margin: 2.25rem 0;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--ck-border);
  border-inline-start: 4px solid var(--ck-blue);
  border-radius: var(--ck-radius-lg);
  background-image: linear-gradient(135deg, var(--ck-blue-soft) 0%, var(--ck-white) 72%);
}

.ck-angebot__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-blue-strong);
}

.ck-angebot__titel {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  color: var(--ck-ink);
}

.ck-angebot__text {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ck-ink);
}

.ck-angebot__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* Spezifischer als .ck-prose a / .ck-lesetext a, damit die Linkfarbe des
   Fliesstexts den Knopf nicht faerbt: schwarz auf Verlauf wie ueberall */
.ck-angebot .ck-angebot__knopf,
.ck-angebot .ck-angebot__knopf:hover,
.ck-angebot .ck-angebot__knopf:focus-visible {
  margin: 0;
  color: var(--ck-ink);
  text-decoration: none;
}

.ck-angebot .ck-angebot__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: var(--ck-weight-medium);
  color: var(--ck-blue-strong);
  text-decoration: none;
}

.ck-angebot .ck-angebot__link svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
  transition: transform var(--ck-transition);
}

.ck-angebot .ck-angebot__link:hover,
.ck-angebot .ck-angebot__link:focus-visible {
  text-decoration: underline;
}

.ck-angebot .ck-angebot__link:hover svg,
.ck-angebot .ck-angebot__link:focus-visible svg {
  transform: translateX(3px);
}

/* Unter der Zusammenfassung des DNS-Checkers */
.ck-dns__summary .ck-angebot {
  margin: 1.25rem 0 0;
  background-color: var(--ck-white);
}

@media (prefers-reduced-motion: reduce) {
  .ck-angebot .ck-angebot__link svg {
    transition: none;
  }
}

/* ===================== 95-consent.css ===================== */
/* ============================================================
   Cookie- und Einwilligungshinweis

   Erscheint nur, wenn in assets/js/consent.js zustimmungspflichtige
   Dienste eingetragen sind. Solange die Seite keine setzt, bleibt er
   unsichtbar — und der Einstellungen-Link im Footer wird entfernt.

   Die drei Schaltflaechen sind bewusst gleich gross und gleich gut
   erreichbar: Ablehnen muss so leicht sein wie Zustimmen.
   ============================================================ */

.ck-consent {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: end center;
  padding: 1rem;
  background-color: rgba(12, 32, 48, .45);
  animation: ck-consent-ein .25s ease-out;
}

@keyframes ck-consent-ein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ck-consent__box {
  inline-size: 100%;
  max-inline-size: 44rem;
  max-block-size: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.75rem;
  background-color: #fff;
  border-radius: var(--ck-radius-lg, 1rem);
  box-shadow: 0 18px 48px rgba(12, 32, 48, .22);
  animation: ck-consent-hoch .3s cubic-bezier(.2, .7, .3, 1);
}

@keyframes ck-consent-hoch {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}

.ck-consent__titel {
  margin: 0 0 .6rem;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ck-ink, #1d2327);
}

.ck-consent__text {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ck-ink-soft, #55636f);
}

/* ---------- Einstellungen ---------- */

.ck-consent__details {
  margin-block-end: 1.25rem;
  border-block-start: 1px solid var(--ck-border, #dde3ea);
}

.ck-consent__kat {
  padding-block: 1rem;
  border-block-end: 1px solid var(--ck-border, #dde3ea);
}

.ck-consent__schalter {
  display: flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}

.ck-consent__schalter input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  accent-color: var(--ck-blue, #009fe3);
  flex: 0 0 auto;
}

.ck-consent__schalter input:disabled { cursor: default; opacity: .6; }

.ck-consent__kat-titel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ck-ink, #1d2327);
}

.ck-consent__pflicht {
  margin-inline-start: auto;
  font-size: .75rem;
  color: var(--ck-ink-soft, #55636f);
}

.ck-consent__kat-text {
  margin: .4rem 0 0 1.8rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ck-ink-soft, #55636f);
}

.ck-consent__dienste {
  margin: .7rem 0 0 1.8rem;
  padding: .7rem .9rem;
  font-size: .8125rem;
  line-height: 1.6;
  list-style: none;
  color: var(--ck-ink-soft, #55636f);
  background-color: #f5f9fc;
  border-radius: .5rem;
}

.ck-consent__dienste li + li { margin-block-start: .6rem; }
.ck-consent__dienste span { color: #6b7885; }

/* ---------- Schaltflächen ---------- */

.ck-consent__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.ck-consent__aktionen .ck-btn {
  flex: 1 1 0;
  min-inline-size: 8.5rem;
  justify-content: center;
  text-align: center;
}

/* Die Button-Klasse setzt display und wuerde das hidden-Attribut sonst
   ueberstimmen - ausgeblendete Schaltflaechen blieben sichtbar. */
.ck-consent__aktionen .ck-btn[hidden] { display: none; }

/* Der Dialog selbst bekommt beim Oeffnen den Fokus, damit Screenreader
   Titel und Text vorlesen. Ein Rahmen um den ganzen Kasten waere dabei
   nur Laerm — die Schaltflaechen zeigen ihren Fokus wie ueberall. */
.ck-consent__box:focus { outline: none; }

/* "Cookie-Einstellungen" nicht am Bindestrich trennen */
.ck-consent__begriff { white-space: nowrap; }

.ck-consent__links {
  margin: 1.1rem 0 0;
  font-size: .8125rem;
  color: var(--ck-ink-soft, #55636f);
}

.ck-consent__links a { color: #0077aa; }

/* Solange der Hinweis offen ist, nicht dahinter scrollen */
.ck-consent-offen { overflow: hidden; }

@media (max-width: 34rem) {
  .ck-consent { place-items: end stretch; padding: .5rem; }
  .ck-consent__box { padding: 1.25rem; }
  .ck-consent__aktionen .ck-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-consent,
  .ck-consent__box { animation: none; }
}

/* ===================== 96-nach-oben.css ===================== */
/* ==========================================================================
   CodeKlar – 96-nach-oben.css
   Der runde Knopf unten rechts, der zum Seitenanfang scrollt. Steht im
   Footer-Partial und damit auf jeder Seite; main.js blendet ihn ab 600px
   Scrollweg ein. Ohne Skript bleibt er unsichtbar.
   ========================================================================== */

.ck-nach-oben {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 55;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 1px solid var(--ck-border);
  border-radius: 50%;
  background-color: var(--ck-surface);
  color: var(--ck-blue-strong);
  box-shadow: var(--ck-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--ck-transition), transform var(--ck-transition),
    visibility 0s linear var(--ck-transition), background-color var(--ck-transition),
    color var(--ck-transition), border-color var(--ck-transition);
}

.ck-nach-oben--sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.ck-nach-oben:hover,
.ck-nach-oben:focus-visible {
  border-color: transparent;
  background-image: var(--ck-gradient);
  color: var(--ck-white, #fff);
  transform: translateY(-3px);
}

.ck-nach-oben:focus-visible {
  outline: 2px solid var(--ck-blue-strong);
  outline-offset: 3px;
}

@media (min-width: 64rem) {
  .ck-nach-oben {
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    inline-size: 3.25rem;
    block-size: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-nach-oben {
    transition: none;
  }

  .ck-nach-oben:hover,
  .ck-nach-oben:focus-visible {
    transform: none;
  }
}

@media print {
  .ck-nach-oben {
    display: none;
  }
}

/* ===================== 97-lupe.css ===================== */
/* ==========================================================================
   CodeKlar – 97-lupe.css
   Schaubilder vergroessern. main.js (Baustein 9) haengt beim ersten Klick
   auf .ck-bildblock__zoom ein <dialog class="ck-lupe"> an den body und
   zeigt die Grafik darin so gross, wie das Fenster es zulaesst. Escape,
   Klick auf den Hintergrund und der Schliessen-Knopf schliessen es; die
   Seite dahinter scrollt solange nicht mit.
   ========================================================================== */

.ck-lupe {
  inline-size: min(96vw, 1600px);
  max-inline-size: none;
  max-block-size: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius-lg);
  background-color: var(--ck-white);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-lg);
  overflow: visible;
}

.ck-lupe::backdrop {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.ck-lupe__inner {
  padding: 1.25rem;
}

.ck-lupe__bild {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: calc(100vh - 9rem);
  object-fit: contain;
}

.ck-lupe__text {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ck-muted);
}

.ck-lupe__text:empty {
  display: none;
}

.ck-lupe__schliessen {
  position: absolute;
  inset-block-start: -1.25rem;
  inset-inline-end: -1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--ck-white);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow);
  cursor: pointer;
  transition: transform var(--ck-transition), background-color var(--ck-transition),
    color var(--ck-transition);
}

.ck-lupe__schliessen svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ck-lupe__schliessen:hover,
.ck-lupe__schliessen:focus-visible {
  background-color: var(--ck-blue);
  color: var(--ck-white);
  transform: rotate(90deg);
}

.ck-lupe__schliessen:focus-visible {
  outline: 3px solid var(--ck-blue);
  outline-offset: 3px;
}

/* Solange die Lupe offen ist, scrollt die Seite dahinter nicht mit. */
body:has(.ck-lupe[open]) {
  overflow: hidden;
}

@media (max-width: 640px) {
  .ck-lupe {
    inline-size: 100vw;
    border-radius: 0;
  }

  .ck-lupe__schliessen {
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-lupe__schliessen {
    transition: none;
  }

  .ck-lupe__schliessen:hover,
  .ck-lupe__schliessen:focus-visible {
    transform: none;
  }
}


/* Vektorgrafik in der Lupe: Kopie des Inline-SVG, so gross wie das Fenster. */
.ck-lupe__grafik svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: calc(100vh - 9rem);
}

/* ===================== 98-cta-jan.css ===================== */
/* ==========================================================================
   CodeKlar – 98-cta-jan.css
   Persoenlicher Aufruf mit Jan Goebel (partials/cta-jan.html): Portrait
   links, Ueberschrift, ein Satz, Name und zwei Knoepfe. Steht auf der
   Startseite nach dem Ablauf, auf Leistungsseiten nach dem zweiten Block,
   am Ende der Lexikoneintraege und Uebersichten und schmal in der
   Seitenleiste der Blogbeitraege (.ck-jan--kompakt).
   ========================================================================== */

.ck-jan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem 1.75rem;
  align-items: center;
  max-width: 52rem;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  background-image: linear-gradient(135deg, var(--ck-blue-soft) 0%, var(--ck-white) 62%);
  background-color: var(--ck-white);
  box-shadow: var(--ck-shadow-sm);
}

.ck-jan__bild {
  inline-size: 7.5rem;
  block-size: 7.5rem;
  overflow: hidden;
  border: 3px solid var(--ck-white);
  border-radius: 50%;
  background: linear-gradient(160deg, #e8f5fc 0%, #d6eef9 100%);
  box-shadow: var(--ck-shadow);
}

.ck-jan__bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

.ck-jan__titel {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: var(--ck-weight-medium);
  line-height: 1.3;
  color: var(--ck-ink);
}

.ck-jan__satz {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ck-ink-soft);
}

.ck-jan__wer {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--ck-muted);
}

.ck-jan__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1rem;
}

/* Umschliessende Huelle zwischen zwei Abschnitten bzw. am Seitenende. */
.ck-jan-wrap {
  padding-block: 0 var(--ck-section-y-sm);
}

.ck-jan-wrap .ck-jan {
  margin-block-start: 0;
}

/* Zwischen zwei Abschnitten bringen die Nachbarn ihren Abstand selbst mit. */
.ck-jan-wrap--zwischen {
  padding-block: 0;
}

/* Schmale Fassung fuer Seitenleisten: alles untereinander und mittig. */
.ck-jan--kompakt {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1rem;
  max-width: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
  text-align: center;
}

.ck-jan--kompakt .ck-jan__bild {
  inline-size: 5.5rem;
  block-size: 5.5rem;
}

.ck-jan--kompakt .ck-jan__titel {
  font-size: 1.125rem;
}

.ck-jan--kompakt .ck-jan__satz {
  font-size: 0.9375rem;
}

.ck-jan--kompakt .ck-jan__aktionen {
  flex-direction: column;
  align-items: stretch;
  inline-size: 100%;
}

@media (max-width: 40rem) {
  .ck-jan {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .ck-jan__bild {
    inline-size: 6rem;
    block-size: 6rem;
  }

  .ck-jan__aktionen {
    justify-content: center;
  }
}

/* ===================== 99-mobilmenu.css ===================== */
/* ==========================================================================
   CodeKlar – 99-mobilmenu.css
   Mobiles Menue (partials/mobile-menu.html, Steuerung in main.js). Unter
   640px eine vollflaechige Ebene, ab 640px eine 26rem breite Schublade von
   rechts mit abgedunkeltem, leicht verwischtem Hintergrund. Ab 1024px
   uebernimmt das Mega-Menue im Header; dieses Menue ist dann ausgeblendet.

     1  Ebene und Kopf
     2  Hauptpunkte: Link oder aufklappende Zeile, Icon, Chevron
     3  Aufgeklappte Ebene: Gruppen wie im Mega-Menue
     4  Fuss: Aufruf und Kontaktwege
     5  Bewegung
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ebene und Kopf
   -------------------------------------------------------------------------- */

.ck-mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* nichts darf einen Querbalken erzeugen */
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--ck-white);
  transform: translateX(100%);
  visibility: hidden;
  /* Sichtbarkeit erst nach dem Hinausgleiten wegnehmen ... */
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.38s;
}

.ck-mobilemenu.is-open {
  transform: none;
  visibility: visible;
  /* ... beim Oeffnen aber sofort geben, damit der Fokus (main.js) sitzt */
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

@media (min-width: 640px) {
  .ck-mobilemenu {
    inset-inline-start: auto;
    inline-size: 26rem;
    box-shadow: -24px 0 48px -24px rgba(15, 61, 99, 0.45);
  }
}

@media (min-width: 1024px) {
  .ck-mobilemenu,
  .ck-mobilemenu__backdrop {
    display: none;
  }
}

.ck-mobilemenu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background-color: rgba(15, 61, 99, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ck-mobilemenu__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ck-mobilemenu__head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: var(--ck-header-h);
  padding: 0.75rem var(--ck-gutter);
  background-color: var(--ck-white);
  border-block-end: 1px solid var(--ck-border);
}

.ck-mobilemenu__logo {
  display: block;
  inline-size: 8.5rem;
  /* Touchziel auf 44px bringen, ohne die Kopfzeile hoeher zu machen */
  padding-block: 0.625rem;
  margin-block: -0.625rem;
}

.ck-mobilemenu__logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.ck-mobilemenu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--ck-border);
  border-radius: 50%;
  background-color: var(--ck-white);
  color: var(--ck-ink);
  cursor: pointer;
  transition: background-color var(--ck-transition), border-color var(--ck-transition), color var(--ck-transition);
}

.ck-mobilemenu__close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.ck-mobilemenu__close:hover,
.ck-mobilemenu__close:focus-visible {
  background-color: var(--ck-blue-ui);
  border-color: var(--ck-blue-ui);
  color: var(--ck-white);
}

/* --------------------------------------------------------------------------
   2. Hauptpunkte
   Punkte ohne Ebene sind ein Link (a.ck-mnav__link), Punkte mit Ebene eine
   aufklappende Zeile (button.ck-mnav__toggle): die ganze Zeile klappt auf,
   kein Fehltipp zwischen Beschriftung und Pfeil. Beide sehen gleich aus.
   -------------------------------------------------------------------------- */

.ck-mnav {
  padding: 0.5rem var(--ck-gutter) 1.25rem;
}

.ck-mnav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-mnav__item {
  border-block-end: 1px solid var(--ck-border);
}

.ck-mnav__row {
  display: flex;
}

.ck-mnav__link,
.ck-mnav__toggle {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  inline-size: 100%;
  min-block-size: 3.75rem;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 1.1875rem;
  font-weight: var(--ck-weight-medium);
  line-height: 1.25;
  text-align: start;
  color: var(--ck-ink);
  text-decoration: none;
  cursor: pointer;
}

.ck-mnav__link:hover,
.ck-mnav__link:focus-visible,
.ck-mnav__toggle:hover,
.ck-mnav__toggle:focus-visible {
  color: var(--ck-blue-strong);
}

.ck-mnav__text {
  flex: 1 1 auto;
}

.ck-mnav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--ck-blue-soft);
  color: var(--ck-blue-strong);
  transition: background-color var(--ck-transition), color var(--ck-transition);
}

.ck-mnav__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* Flaeche unter weissem Icon: --ck-blue-ui (Farbregel in 00-base.css) */
.ck-mnav__link:hover .ck-mnav__icon,
.ck-mnav__toggle:hover .ck-mnav__icon,
.ck-mnav__item.is-open > .ck-mnav__row .ck-mnav__icon {
  background-color: var(--ck-blue-ui);
  color: var(--ck-white);
}

.ck-mnav__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--ck-border);
  border-radius: 50%;
  background-color: var(--ck-white);
  color: var(--ck-ink);
  transition: background-color var(--ck-transition), border-color var(--ck-transition), color var(--ck-transition);
}

.ck-mnav__chevron svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  transition: transform 0.25s ease;
}

.ck-mnav__toggle:hover .ck-mnav__chevron,
.ck-mnav__toggle:focus-visible .ck-mnav__chevron,
.ck-mnav__item.is-open > .ck-mnav__row .ck-mnav__chevron {
  background-color: var(--ck-blue-soft);
  border-color: var(--ck-blue);
  color: var(--ck-blue-strong);
}

.ck-mnav__item.is-open > .ck-mnav__row .ck-mnav__chevron svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   3. Aufgeklappte Ebene
   Eingerueckt unter die Beschriftung (Icon 2.5rem + Abstand 0.9rem). Erster
   Gruppentitel ist die Uebersichtsseite des Punkts, danach die Gruppen mit
   verlinktem Titel wie im Mega-Menue; Eintraege mit Verlaufspunkt.
   -------------------------------------------------------------------------- */

.ck-mnav__sublist {
  display: none;
  padding: 0.25rem 0 1rem 3.4rem;
}

.ck-mnav__item.is-open > .ck-mnav__sublist {
  display: block;
  animation: ck-mnav-auf 0.3s ease-out both;
}

.ck-mnav__gruppe + .ck-mnav__gruppe {
  margin-block-start: 0.5rem;
}

.ck-mnav__gruppe-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: 2.75rem; /* Touchziel */
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: var(--ck-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-blue-strong);
  text-decoration: none;
}

.ck-mnav__gruppe-titel svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
  transition: transform var(--ck-transition);
}

.ck-mnav__gruppe-titel:hover svg,
.ck-mnav__gruppe-titel:focus-visible svg {
  transform: translateX(3px);
}

.ck-mnav__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-mnav__sublink {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-block-size: 2.75rem;
  padding: 0.45rem 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ck-ink-soft);
  text-decoration: none;
}

.ck-mnav__sublink::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background-image: var(--ck-gradient);
}

.ck-mnav__sublink:hover,
.ck-mnav__sublink:focus-visible {
  color: var(--ck-blue-strong);
}

/* --------------------------------------------------------------------------
   4. Fuss
   -------------------------------------------------------------------------- */

.ck-mobilemenu__fuss {
  margin-block-start: auto;
  padding: 1.25rem var(--ck-gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--ck-border);
  background-color: var(--ck-surface-sunken);
}

.ck-mobilemenu__cta {
  inline-size: 100%;
  margin: 0;
  min-block-size: 3.25rem;
  font-size: 1.0625rem;
}

.ck-mobilemenu__kontakt {
  display: grid;
  gap: 0.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-mobilemenu__kontakt a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 2.75rem;
  color: var(--ck-ink);
  font-size: 0.9375rem;
  text-decoration: none;
}

.ck-mobilemenu__kontakt svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: 0 0 auto;
  color: var(--ck-blue-strong);
}

.ck-mobilemenu__kontakt a:hover,
.ck-mobilemenu__kontakt a:focus-visible {
  color: var(--ck-blue-strong);
}

/* --------------------------------------------------------------------------
   5. Bewegung: Punkte gleiten gestaffelt herein, Ebenen klappen weich auf.
   Senkrecht statt seitlich, damit waehrend der Einblendung nichts ueber den
   Rand der Ebene hinausragt. Kurz gehalten: der letzte Punkt steht nach
   etwa einer halben Sekunde, noch waehrend die Ebene selbst hereingleitet.
   -------------------------------------------------------------------------- */

@keyframes ck-mnav-rein {
  from { opacity: 0; translate: 0 0.75rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ck-mnav-auf {
  from { opacity: 0; translate: 0 -0.35rem; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .ck-mobilemenu.is-open .ck-mnav__item,
  .ck-mobilemenu.is-open .ck-mobilemenu__fuss {
    animation: ck-mnav-rein 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 35ms + 40ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-mobilemenu,
  .ck-mobilemenu__backdrop,
  .ck-mnav__chevron svg,
  .ck-mnav__gruppe-titel svg {
    transition: none;
  }

  .ck-mnav__item.is-open > .ck-mnav__sublist {
    animation: none;
  }
}