/* ============================================================================
   CONSTARES — style.css
   Die eine maßgebliche Stylesheet-Datei der Website.
   Statisches, handgeschriebenes HTML. Kein React, kein Build, kein JS-Zwang.

   Quelle: Constares Design System (Tokens, Typografie, Komponenten) 1:1.
   Namespacing: alle Komponenten-Klassen mit Präfix  cs-

   GESTALTUNGSREGEL — LINKS SIND NIE EINGERÜCKT
   Jeder Link beginnt bündig an der linken Textkante seines Abschnitts:
   Textlink, Pfeil-Link (.cs-link-arrow) und Ghost-Button (.cs-btn--ghost)
   gleichermaßen. Ein Ghost hat weder Fläche noch Rahmen, erscheint also als
   Textlink und bekommt deshalb kein seitliches padding (Abschnitt 10).
   Ausgenommen sind echte Schaltflächen mit sichtbarer Fläche oder sichtbarem
   Rahmen — .cs-btn--primary, .cs-btn--secondary, .cs-skip-link,
   .cs-jump-link. Dort gehört der Innenabstand zur Form.
   Siehe README.md, Abschnitt "Gestaltungsregeln".

   INHALT
     01  FONTS — lokal, Variable Fonts. Keine Google-Server.
     02  TOKENS — FARBEN
     03  TOKENS — TYPOGRAFIE
     04  TOKENS — ABSTÄNDE, RADIEN, SCHATTEN, LAYOUT, MOTION
     05  BASIS / RESET
     06  TYPOGRAFIE-BASIS
     07  LAYOUT — Container, Sections, Farbbänder
     08  SKIP-LINK & A11y
     09  HEADER & NAVIGATION
     10  BUTTONS
     11  HERO
     12  CARDS
     13  TAGS & BADGES
     14  KENNZAHLEN (STATS)
     15  TABELLEN
     16  FORMULARE
     17  FOOTER
     18  RECHTSTEXT-SEITEN  (.cs-legal)
     19  UTILITIES — sparsam einsetzen
     20  RESPONSIVE
     21  PRINT
     22  PERSONEN (TEAM)
     23  KENNZAHLEN, PARTNERLOGO
     24  PAKETE, PREISE, ABLAUF, KONTAKTKARTE   — Outplacement
     25  VERGLEICHSTABELLE, REGISTER, FRAGE-ANTWORT   — Vertragsformen
     26  BRANCHENINFO-LISTEN   — Buchstabenleiste, Einträge, Bundesland-Filter
     27  BRANCHENKACHELN   — Branchen
     28  FACHBEREICHE-ZEILEN   — Fachbereiche
     29  FAQ-SEITE   — Sprungnavigation, Pfeil-Akkordeon, Dokumentlayout
     30  BEWERTUNGEN, ZITAT-SLIDER, ZITATE   — Referenzen
     31  LEISTUNGSKARTEN UND DUNKLES BAND   — Leistungen
     32  STARTSEITE   — Hero-Video, Gesichterreihe, quadratische Kacheln
   ============================================================================ */


/* ============================================================================
   01  FONTS — lokal, Variable Fonts. Keine Google-Server.
   Dateien erwartet unter  shared-assets/fonts/
   ============================================================================ */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Variable.woff2') format('woff2-variations'),
       url('../fonts/SourceSans3-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Italic-Variable.woff2') format('woff2-variations'),
       url('../fonts/SourceSans3-Italic-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}


/* ============================================================================
   02  TOKENS — FARBEN
   "Weiß und Graustufen tragen, Rot akzentuiert."
   Richtwert Flächenverteilung: ~70 % Weiß, 20 % Grau, 10 % Rot.
   Keine weiteren Farbtöne.
   ============================================================================ */
:root {
  /* Brand */
  --cs-red:        #DB0032; /* Constares-Rot — Akzent, Keyword, Buttons */
  --cs-red-dark:   #C2142D; /* hover / pressed */
  --cs-anthracite: #58585A; /* Überschriften, Logo-Grau, Sekundärelemente */

  /* Neutrals */
  --cs-text:       #3A3A3C; /* Textgrau — Fließtext, nie reines Schwarz */
  --cs-grey-light: #F2F2F3; /* Hellgrau — Flächen, Boxen, Tabellenzeilen */
  --cs-white:      #FFFFFF;

  /* Graustufen (Diagramme, Rahmen, Captions) */
  --cs-grey-900: #2B2B2D;
  --cs-grey-700: #58585A; /* = Anthrazit */
  --cs-grey-500: #8A8A8C;
  --cs-grey-400: #ABABAD;
  --cs-grey-300: #D4D4D6;
  --cs-grey-200: #E6E6E8;
  --cs-grey-100: #F2F2F3; /* = grey-light */
  --cs-grey-050: #F8F8F9;

  /* Rot-Aufhellungen — sparsam, nur als dezente Fläche hinter Rot-Akzenten */
  --cs-red-100:  #FBE0E6;
  --cs-red-200:  #F4B3C0;

  /* Semantische Aliase — in Komponenten diese referenzieren */
  --text-heading:        var(--cs-anthracite);
  --text-heading-accent: var(--cs-red);
  --text-subheading:     var(--cs-anthracite);
  --text-body:           var(--cs-text);
  --text-muted:          var(--cs-grey-500);
  --text-caption:        var(--cs-anthracite);
  --text-on-red:         var(--cs-white);
  --text-on-dark:        var(--cs-white);

  --surface-page:        var(--cs-white);
  --surface-subtle:      var(--cs-grey-light);
  --surface-card:        var(--cs-white);
  --surface-inset:       var(--cs-grey-050);
  --surface-accent:      var(--cs-red);
  --surface-accent-soft: var(--cs-red-100);
  --surface-dark:        var(--cs-anthracite);

  --border-subtle:       var(--cs-grey-200);
  --border-default:      var(--cs-grey-300);
  --border-strong:       var(--cs-anthracite);
  --border-accent:       var(--cs-red);

  --accent:              var(--cs-red);
  --accent-hover:        var(--cs-red-dark);
  --focus-ring:          rgba(219, 0, 50, 0.35);
}


/* ============================================================================
   03  TOKENS — TYPOGRAFIE
   Einzige Schrift: Source Sans 3.
   Überschriften Bold in Anthrazit, das eine Schlüsselwort in Rot (.cs-accent).
   Subheads Semibold, Fließtext Regular (Textgrau), Captions Light.
   ============================================================================ */
:root {
  --font-sans:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    var(--font-sans);
  --font-heading: var(--font-sans);

  /* Gewichte */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Typo-Skala (16px Basis) */
  --fs-display:  3.5rem;    /* 56 — Hero */
  --fs-h1:       2.5rem;    /* 40 */
  --fs-h2:       2rem;      /* 32 */
  --fs-h3:       1.5rem;    /* 24 */
  --fs-h4:       1.25rem;   /* 20 */
  --fs-lg:       1.125rem;  /* 18 — Lead */
  --fs-base:     1rem;      /* 16 — Fließtext */
  --fs-sm:       0.875rem;  /* 14 */
  --fs-xs:       0.75rem;   /* 12 — Caption */
  --fs-overline: 0.6875rem; /* 11 — Overline/Label */

  /* Zeilenhöhen */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Laufweiten */
  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-overline: 0.14em;
}


/* ============================================================================
   04  TOKENS — ABSTÄNDE, RADIEN, SCHATTEN, LAYOUT, MOTION
   8px-Rhythmus. Flach und luftig, minimale Elevation.
   ============================================================================ */
:root {
  --sp-0:  0;
  --sp-1:  0.25rem;  /*   4 */
  --sp-2:  0.5rem;   /*   8 */
  --sp-3:  0.75rem;  /*  12 */
  --sp-4:  1rem;     /*  16 */
  --sp-5:  1.5rem;   /*  24 */
  --sp-6:  2rem;     /*  32 */
  --sp-7:  3rem;     /*  48 */
  --sp-8:  4rem;     /*  64 */
  --sp-9:  6rem;     /*  96 */
  --sp-10: 8rem;     /* 128 */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  --border-w:   1px;
  --border-w-2: 2px;
  --accent-bar: 3px; /* dünne rote Linie an Überschriften/Kennzahlen */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(58, 58, 60, 0.06);
  --shadow-sm: 0 2px 8px rgba(58, 58, 60, 0.08);
  --shadow-md: 0 6px 20px rgba(58, 58, 60, 0.10);

  /* Layout — Container-Breite der Website */
  --container-max: 1180px;
  --container-pad: var(--sp-6);
  --gutter:        var(--sp-5);
  --header-h:      128px;
  --logo-h:        96px;  /* Höhe der Wortmarke in der Kopfzeile */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}


/* ============================================================================
   05  BASIS / RESET
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--border-w) solid var(--border-subtle); margin: var(--sp-7) 0; }
::selection { background: var(--cs-red); color: var(--cs-white); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ============================================================================
   06  TYPOGRAFIE-BASIS
   Beispiel Headline-Standard:
   <h1>Wir bringen <span class="cs-accent">Experten</span> zusammen.</h1>
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
/* Erste Überschrift der Seite, die optisch eine Ebene tiefer wirken soll.
   h1 und h2 unterscheiden sich in dieser Datei ausschließlich in font-size —
   Abstand, Gewicht, Zeilenhöhe und Laufweite stehen in der Gruppenregel
   darüber und gelten für beide gleich. Mehr als font-size braucht es nicht.
   Der Token folgt automatisch der Responsive-Skala (1024 px / 640 px). */
.cs-h1-as-h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5, h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
strong, b { font-weight: var(--fw-semibold); }
small { font-size: var(--fs-xs); }
blockquote { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); border-left: var(--accent-bar) solid var(--cs-red); color: var(--text-heading); font-size: var(--fs-lg); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Das eine rote Schlüsselwort in Überschriften */
.cs-accent { color: var(--text-heading-accent); }

/* Overline / Eyebrow — VERSALIEN, sparsam */
.cs-overline {
  display: block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-heading-accent);
  margin-bottom: var(--sp-2);
}

/* Lead-Absatz unter Überschriften */
/* Einleitungstext unter der H1 — volle Inhaltsbreite, auf Desktop zweispaltig.
   Kein Fließtext auf halber Breite: keine max-width-Begrenzung mehr. */
.cs-lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-body); max-width: none; column-count: 2; column-gap: var(--sp-6); }
@media (max-width: 860px) { .cs-lead { column-count: 1; } }
/* Keine verschachtelten Spalten: steht der Lead schon in einem Spaltensatz,
   bleibt er darin einspaltig. */
.cs-columns-2 .cs-lead { column-count: 1; }
/* Rechtstextseiten laufen über die volle Breite, aber ohne Spalten. */
.cs-legal .cs-lead { column-count: 1; }
/* Einspaltige Variante für einzelne Seiten — volle Inhaltsbreite wie oben,
   nur ohne Spaltensatz. Für kurze Einleitungen, bei denen zwei Spalten zu
   zwei sehr kurzen Blöcken zerfielen (fachbereiche.html). Die Klasse steht
   zusätzlich zu .cs-lead und gewinnt über die höhere Spezifität — auch gegen
   die 860px-Regel darüber. Seiten ohne diese Klasse bleiben zweispaltig. */
.cs-lead--single { column-count: 1; }

/* Caption / Bildunterschrift */
.cs-caption { font-size: var(--fs-xs); font-weight: var(--fw-light); color: var(--text-caption); }

/* Kleiner gedämpfter Hinweistext */
.cs-muted { color: var(--text-muted); }


/* ============================================================================
   07  LAYOUT — Container, Sections, Farbbänder
   ============================================================================ */
.cs-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Standard-Abschnitt */
.cs-section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.cs-section--tight { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

/* Farbbänder — maximal zwei Hintergrundfarben pro Seite */
.cs-band { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
/* für das erste Band direkt nach .cs-pagehead – verhindert doppelten Abstand.
   Doppelte Klasse im Selektor, damit die 640px-Regel in Abschnitt 20
   (.cs-section, .cs-band) das padding-top nicht wieder setzt. */
.cs-band.cs-band--tight-top { padding-top: 0; }
.cs-band--white  { background: var(--surface-page); }
.cs-band--subtle { background: var(--surface-subtle); }
.cs-band--dark   { background: var(--surface-dark); color: var(--text-on-dark); }
.cs-band--dark h1, .cs-band--dark h2, .cs-band--dark h3 { color: var(--cs-white); }
.cs-band--dark p { color: var(--cs-grey-300); }
.cs-band--dark a { color: var(--cs-white); }

/* Zweispaltige Textbild-Anordnung */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.cs-split--text-first { grid-template-columns: 1.05fr .95fr; }
/* Stehen links und rechts zwei Textblöcke, soll der Text in beiden Spalten
   auf derselben Höhe beginnen. align-items: center aus der Grundregel ist für
   Text und Bild gedacht und schiebt den kürzeren Block sonst in die Mitte. */
.cs-split--top { align-items: start; }

/* Zweispaltiger Fließtext (Zeitungssatz). Überschriften laufen über beide
   Spalten. Media-Query steht direkt darunter, damit sie die Basisregel
   sicher überschreibt — Abschnitt 20 stünde dafür zu früh. */
.cs-columns-2 { column-count: 2; column-gap: var(--sp-8); }
.cs-columns-2 > h1, .cs-columns-2 > h2 { column-span: all; }
@media (max-width: 860px) {
  .cs-columns-2 { column-count: 1; }
}
/* Linkliste in zwei Spalten, zusammen mit .cs-columns-2 (Brancheninfos auf
   branchen.html): kein Eintrag wird am Spaltenumbruch geteilt, der letzte
   trägt keinen Abstand nach unten — neue Einträge brauchen keine Anpassung. */
.cs-columns-2--links > * { break-inside: avoid; }
.cs-columns-2--links > :last-child { margin-bottom: 0; }

/* Kartenraster */
.cs-grid { display: grid; gap: var(--sp-5); }
.cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Bildrahmen — Bilder erscheinen in Farbe, kein Graustufen-Filter */
.cs-figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin: 0; }
.cs-figure img { width: 100%; height: 100%; object-fit: cover; }
/* roter Signet-Punkt als Detail auf Bildern */
.cs-dot { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--cs-red); box-shadow: 0 0 0 8px rgba(219, 0, 50, .18); }


/* ============================================================================
   08  SKIP-LINK & A11y
   ============================================================================ */
.cs-skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: 200;
  background: var(--cs-red); color: var(--cs-white);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  transition: top var(--dur-fast) var(--ease-out);
}
.cs-skip-link:focus { top: var(--sp-3); color: var(--cs-white); text-decoration: none; }

.cs-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ============================================================================
   09  HEADER & NAVIGATION
   Struktur:
   FESTE RAHMENVORGABE — Struktur nicht verändern:
   Logo links · Metazeile oben rechts (Kontakt · Impressum · Datenschutz · DE/EN)
   · darunter das Hauptmenü. KEIN Kontakt-Button im Hauptmenü.
   Hauptmenü-Reihenfolge: Leistungen · Branchen · Fachbereiche · Team ·
   Über uns · Referenzen · Für Kandidaten.

   <header class="cs-header">
     <input type="checkbox" id="cs-nav-toggle" class="cs-nav-check">
     <div class="cs-wrap cs-bar">
       <a class="cs-logo" href="./"><img src="…" alt="Constares"></a>
       <div class="cs-head-right">
         <div class="cs-meta">
           <ul class="cs-meta-nav">…</ul>
           <ul class="cs-lang">…</ul>
         </div>
         <nav class="cs-nav">…<a class="cs-nav-link">…</a></nav>
       </div>
       <label class="cs-nav-burger" for="cs-nav-toggle">…</label>
     </div>
   </header>
   Mobile Menü ohne JS: <input type="checkbox" id="cs-nav-toggle" class="cs-nav-check">
   + <label class="cs-nav-burger" for="cs-nav-toggle">
   ============================================================================ */
.cs-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.cs-bar {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
}
/* Rechte Kopfspalte: Metazeile oben, Hauptmenü darunter */
.cs-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); flex: 0 0 auto; padding: var(--sp-3) 0; }
.cs-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cs-logo img { height: var(--logo-h); width: auto; }
.cs-logo:hover { text-decoration: none; }

.cs-nav { display: flex; align-items: center; gap: var(--sp-5); }
.cs-nav-link {
  position: relative; white-space: nowrap;
  font-size: 15px; font-weight: var(--fw-semibold);
  color: var(--cs-anthracite);
  transition: color var(--dur-fast) var(--ease-standard);
}
.cs-nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: var(--border-w-2); background: transparent;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cs-nav-link:hover { color: var(--cs-red); text-decoration: none; }
.cs-nav-link:hover::after { background: var(--cs-red); }
.cs-nav-link.is-active,
.cs-nav-link[aria-current="page"] { color: var(--cs-red); }
.cs-nav-link.is-active::after,
.cs-nav-link[aria-current="page"]::after { background: var(--cs-red); }

/* Metazeile oben rechts: Kontakt · Impressum · Datenschutz · DE / EN */
.cs-meta { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.cs-meta-nav { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.cs-meta-nav li { margin: 0; display: flex; align-items: center; }
.cs-meta-nav li + li::before { content: "·"; color: var(--cs-grey-400); margin-right: var(--sp-3); }
.cs-meta-nav a { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--cs-grey-500); }
.cs-meta-nav a:hover { color: var(--cs-red); text-decoration: none; }
.cs-meta > .cs-lang::before { content: "·"; color: var(--cs-grey-400); margin-right: var(--sp-3); }

.cs-lang { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cs-lang li { margin: 0; display: flex; align-items: center; }
.cs-lang li + li::before { content: "/"; color: var(--cs-grey-400); margin-right: var(--sp-2); }
.cs-lang a {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--cs-anthracite);
}
.cs-lang a:hover { color: var(--cs-red); text-decoration: none; }
.cs-lang a.is-active, .cs-lang a[aria-current="true"] { color: var(--cs-red); }

/* Mobile Burger — reines CSS, Checkbox-Toggle */
.cs-nav-check { position: absolute; opacity: 0; pointer-events: none; }
.cs-nav-burger { display: none; cursor: pointer; padding: var(--sp-2); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-md); }
.cs-nav-burger span { display: block; width: 22px; height: 2px; background: var(--cs-anthracite); }
.cs-nav-burger span + span { margin-top: 5px; }


/* ============================================================================
   10  BUTTONS
   <a class="cs-btn cs-btn--primary">…</a> | --secondary | --ghost
   Größen: cs-btn--sm (Standard: md) | cs-btn--lg
   Rot sparsam: ein primary pro Ansicht.
   ============================================================================ */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold);
  /* line-height: 1 gilt nur solange der Text einzeilig bleibt — bricht ein
     langer Button um, braucht er Zeilenabstand, sonst kleben die Zeilen.
     max-width verhindert, dass ein Button breiter wird als sein Container und
     die ganze Seite waagerecht aufschiebt. nowrap bleibt die Grundregel:
     kurze Buttons sollen nicht mitten im Wort umbrechen. */
  line-height: var(--lh-snug); white-space: nowrap; user-select: none;
  max-width: 100%;
  padding: 10px 20px;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cs-btn:hover { text-decoration: none; }
.cs-btn--sm { font-size: 13px; padding: 7px 14px; gap: var(--sp-1); }
/* Grosse Buttons tragen die langen Beschriftungen ("Meeting in meinem
   Onlinekalender buchen"). Auf schmalen Schirmen passen die nicht in eine
   Zeile — deshalb hier Umbruch erlaubt und der Text mittig gesetzt. */
.cs-btn--lg { font-size: 16px; padding: 13px 26px; gap: 10px; white-space: normal; text-align: center; }

.cs-btn--primary { background: var(--cs-red); border-color: var(--cs-red); color: var(--cs-white); }
.cs-btn--primary:hover { background: var(--cs-red-dark); border-color: var(--cs-red-dark); color: var(--cs-white); }

.cs-btn--secondary { background: var(--cs-white); border-color: var(--cs-anthracite); color: var(--cs-anthracite); }
.cs-btn--secondary:hover { background: var(--cs-grey-light); color: var(--cs-anthracite); }

/* Ghost: kein Hintergrund, kein Rahmen — erscheint als Textlink und wird
   deshalb auch wie einer gesetzt. LINKS SIND NIE EINGERÜCKT: der seitliche
   Innenabstand aus .cs-btn fällt weg, damit der Link bündig an der linken
   Textkante seines Abschnitts beginnt, genau wie ein .cs-link-arrow daneben.
   Die Längsschreibweise padding-left/right steht bewusst hier unten — sie
   überschreibt damit auch die padding-Kurzschreibweise von .cs-btn--sm und
   .cs-btn--lg weiter oben, falls ein Ghost mit einer Größe kombiniert wird.
   Der senkrechte Innenabstand bleibt: er vergrößert die Klickfläche, ohne
   die linke Kante zu verschieben.
   Buttons mit sichtbarer Fläche oder Rahmen (--primary, --secondary) behalten
   ihren Innenabstand — sie sind echte Schaltflächen, keine Textlinks. */
.cs-btn--ghost {
  background: transparent; border-color: transparent; color: var(--cs-red);
  padding-left: 0; padding-right: 0;
}
/* Hover wie bei jedem Textlink: keine Fläche, nur Farbe und Unterstreichung.
   Dieselben Werte wie die globale Regel  a:hover  in Abschnitt 06, damit ein
   Ghost neben einem .cs-link-arrow nicht anders reagiert. Das
   text-decoration: none aus .cs-btn:hover wird hier zurückgenommen — die
   Regel steht später und gewinnt bei gleicher Spezifität.
   Der Fokusrahmen für die Tastatur bleibt unberührt: er kommt aus
   :where(a, …):focus-visible in Abschnitt 05 und wird hier nicht angefasst. */
.cs-btn--ghost:hover {
  background: transparent;
  color: var(--accent-hover);
  text-decoration: underline; text-underline-offset: 2px;
}

.cs-btn[aria-disabled="true"], .cs-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Textlink mit Pfeil */
.cs-link-arrow { font-weight: var(--fw-semibold); }
.cs-link-arrow::after { content: " →"; }

/* Buttongruppe */
.cs-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* ============================================================================
   11  HERO
   ============================================================================ */
.cs-hero { background: var(--surface-page); }
.cs-hero .cs-wrap { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.cs-hero-title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 var(--sp-5); }
.cs-hero-text { font-size: 1.25rem; line-height: var(--lh-relaxed); max-width: none; margin: 0 0 var(--sp-6); }
.cs-hero-media { height: 420px; }


/* ============================================================================
   12  CARDS
   <article class="cs-card">…</article>
   Modifier: cs-card--accent (rote Kopflinie), cs-card--raised (Hover-Schatten),
             cs-card--center
   ============================================================================ */
.cs-card {
  position: relative;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.cs-card > :last-child { margin-bottom: 0; }
.cs-card--center { text-align: center; }
.cs-card--accent::before {
  content: ""; position: absolute; left: var(--sp-5); top: 0;
  width: 40px; height: var(--accent-bar); background: var(--cs-red);
  border-radius: 0 0 2px 2px;
}
.cs-card--raised:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cs-card-title { font-size: var(--fs-h3); margin: var(--sp-1) 0 var(--sp-3); }
.cs-card-text { margin: 0; line-height: var(--lh-relaxed); }

/* Personen-Karte: siehe Abschnitt 22 */

/* Avatar-Ersatz (Initialen) */
.cs-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--cs-grey-light); color: var(--cs-anthracite);
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  margin: 0 auto var(--sp-4);
}


/* ============================================================================
   13  TAGS & BADGES
   ============================================================================ */
.cs-tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cs-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; font-weight: var(--fw-medium); line-height: 1;
  color: var(--cs-text); background: var(--cs-white);
  border: var(--border-w) solid var(--border-default);
  padding: 7px 12px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.cs-tag--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cs-red); flex: 0 0 auto; }

.cs-badge {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--cs-grey-light); color: var(--cs-anthracite);
}
.cs-badge--accent { background: var(--cs-red); color: var(--cs-white); }
.cs-badge--soft   { background: var(--cs-red-100); color: var(--cs-red-dark); }


/* ============================================================================
   14  KENNZAHLEN (STATS)
   <div class="cs-stats"><div class="cs-stat cs-stat--accent">
     <div class="cs-stat-value">20+</div><div class="cs-stat-label">…</div></div></div>
   ============================================================================ */
.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
.cs-stat { border-top: var(--accent-bar) solid var(--cs-grey-300); padding-top: var(--sp-5); }
.cs-stat--accent { border-top-color: var(--cs-red); }
.cs-stat-value { font-size: 4rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; color: var(--text-heading); }
.cs-stat--accent .cs-stat-value { color: var(--cs-red); }
.cs-stat-label { font-size: var(--fs-lg); color: var(--text-body); margin-top: var(--sp-3); }
.cs-band--dark .cs-stat { border-top-color: #6C6C6E; }
.cs-band--dark .cs-stat--accent { border-top-color: var(--cs-red); }
.cs-band--dark .cs-stat-value { color: var(--cs-white); }
.cs-band--dark .cs-stat--accent .cs-stat-value { color: var(--cs-red); }
.cs-band--dark .cs-stat-label { color: var(--cs-grey-300); }


/* ============================================================================
   15  TABELLEN
   <table class="cs-table">…
   ============================================================================ */
.cs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cs-table caption { text-align: left; font-size: var(--fs-xs); color: var(--text-muted); padding-bottom: var(--sp-2); }
.cs-table th {
  text-align: left; font-weight: var(--fw-semibold);
  background: var(--cs-anthracite); color: var(--cs-white);
  padding: var(--sp-3) var(--sp-4);
}
.cs-table--light th { background: var(--cs-grey-light); color: var(--cs-anthracite); }
.cs-table td { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-w) solid var(--border-subtle); color: var(--text-body); }
.cs-table tbody tr:nth-child(even) td { background: var(--cs-grey-050); }
.cs-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.cs-table-scroll { overflow-x: auto; }


/* ============================================================================
   16  FORMULARE
   <div class="cs-field"><label class="cs-label">…</label>
   <input class="cs-input"></div>
   ============================================================================ */
.cs-form { display: grid; gap: var(--sp-4); }
.cs-field { display: grid; gap: var(--sp-2); }
.cs-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-heading); }
.cs-input, .cs-select, .cs-textarea {
  font-family: var(--font-sans); font-size: var(--fs-base); color: var(--text-body);
  background: var(--cs-white);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px var(--sp-3);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.cs-textarea { min-height: 140px; resize: vertical; }
.cs-input::placeholder, .cs-textarea::placeholder { color: var(--cs-grey-400); }
.cs-input:hover, .cs-select:hover, .cs-textarea:hover { border-color: var(--cs-anthracite); }
.cs-input:focus, .cs-select:focus, .cs-textarea:focus { outline: none; border-color: var(--cs-red); box-shadow: 0 0 0 3px var(--focus-ring); }
.cs-input[aria-invalid="true"] { border-color: var(--cs-red); }
.cs-hint  { font-size: var(--fs-xs); color: var(--text-muted); }
.cs-error { font-size: var(--fs-xs); color: var(--cs-red); }

.cs-select { appearance: none; padding-right: var(--sp-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--cs-anthracite) 50%), linear-gradient(135deg, var(--cs-anthracite) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.cs-checkbox { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.cs-checkbox input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cs-red); flex: 0 0 auto; }


/* ============================================================================
   17  FOOTER
   FESTE RAHMENVORGABE: vollflächig Anthrazit, dreispaltig —
   Kontakt · Rechtliches · Unternehmen.
   <footer class="cs-footer"><div class="cs-wrap cs-footer-inner">…
   ============================================================================ */
.cs-footer {
  background: var(--surface-dark);
  color: var(--cs-grey-300);
  padding: var(--sp-7) 0 var(--sp-6);
}
.cs-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-7); align-items: start; }
.cs-footer-title { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--cs-white); margin: 0 0 var(--sp-4); }
.cs-footer-address { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--cs-grey-300); line-height: 1.9; font-style: normal; }
.cs-footer-address strong { color: var(--cs-white); font-weight: var(--fw-semibold); }
.cs-footer-address a { color: var(--cs-grey-300); }
.cs-footer-address a:hover { color: var(--cs-white); }
.cs-footer-nav { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.cs-footer-nav li { margin: 0; }
.cs-footer-nav a { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--cs-grey-300); }
.cs-footer-nav a:hover { color: var(--cs-white); text-decoration: none; }
.cs-footer-note { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--border-w) solid #6C6C6E; font-size: 13px; color: var(--cs-grey-400); }


/* ============================================================================
   18  RECHTSTEXT-SEITEN  (.cs-legal)
   Für Impressum, Datenschutz, AGB, FAQ.
   <main class="cs-legal"><div class="cs-wrap">
     <header class="cs-pagehead"><span class="cs-overline">Rechtliches</span><h1>Impressum</h1></header>
     <div class="cs-legal-inner">
       <address class="cs-address">…</address>
       <dl class="cs-facts"><dt>…</dt><dd>…</dd></dl>
       <h2>…</h2><p>…</p>
       <p class="cs-legal-meta">Stand: …</p>
     </div>
   </div></main>

   LAYOUT-REGEL (Korrektur gegenüber der früheren constares.css):
   Der Textbereich nutzt die VOLLE Container-Breite — max-width: var(--container-max),
   zentriert über margin: 0 auto. Keine schmale Sonderspalte, keine 76ch-Grenze,
   kein linksbündiges margin: 0.
   Fließtext-Absätze stehen im Blocksatz; Adressblock, Faktenliste und
   Listen bleiben im Flattersatz.
   ============================================================================ */
.cs-legal { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.cs-legal .cs-wrap { max-width: var(--container-max); margin: 0 auto; }

/* Seitenkopf (auch außerhalb von .cs-legal nutzbar) */
.cs-pagehead { margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: var(--border-w) solid var(--border-subtle); }
.cs-pagehead h1 { margin: 0; }

/* Textbereich — volle Container-Breite, keine Zeichenlängen-Begrenzung */
.cs-legal-inner { max-width: none; margin: 0 auto; }
.cs-legal-inner > :first-child { margin-top: 0; }

/* Fließtext im Blocksatz */
.cs-legal p {
  text-align: justify;
  text-wrap: initial;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.cs-legal p:last-child { margin-bottom: 0; }

/* Zwischenüberschriften */
.cs-legal-inner h2 { margin: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-h3); }
.cs-legal-inner h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-h4); }
.cs-legal-inner h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-heading); }

/* Adressblock — Flattersatz, KEIN Blocksatz */
.cs-address {
  margin: 0 0 var(--sp-5);
  font-style: normal;
  text-align: left;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.cs-address strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* Definitionsliste "Fakten" — Flattersatz, zweispaltig ab 640px */
.cs-facts { margin: 0 0 var(--sp-6); text-align: left; }
.cs-facts dt { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-heading); }
.cs-facts dd { margin: 0 0 var(--sp-3); color: var(--text-body); }
@media (min-width: 640px) {
  .cs-facts { display: grid; grid-template-columns: minmax(140px, 16%) 1fr; column-gap: var(--sp-5); row-gap: var(--sp-3); }
  .cs-facts dt, .cs-facts dd { margin: 0; padding-bottom: var(--sp-3); border-bottom: var(--border-w) solid var(--border-subtle); }
}

/* Listen im Rechtstext — Flattersatz */
.cs-legal-inner ul, .cs-legal-inner ol { text-align: left; line-height: var(--lh-relaxed); }
.cs-legal-inner li { text-align: left; }

/* Stand-/Fußnote */
.cs-legal-meta {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: var(--border-w) solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--text-muted);
  text-align: left !important; /* nie im Blocksatz */
}

/* FAQ (Q&A ohne JS, <details>) */
.cs-faq { border-top: var(--border-w) solid var(--border-subtle); }
.cs-faq details { border-bottom: var(--border-w) solid var(--border-subtle); padding: var(--sp-4) 0; }
.cs-faq summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-heading); font-size: var(--fs-h4); list-style: none; }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after { content: "+"; float: right; color: var(--cs-red); font-weight: var(--fw-bold); }
.cs-faq details[open] summary::after { content: "–"; }
.cs-faq details > p { margin-top: var(--sp-3); text-align: justify; hyphens: auto; }


/* ============================================================================
   19  UTILITIES — sparsam einsetzen
   ============================================================================ */
.cs-center      { text-align: center; }
.cs-left        { text-align: left; }
.cs-nowrap      { white-space: nowrap; }
.cs-mt-0  { margin-top: 0; }
.cs-mb-0  { margin-bottom: 0; }
.cs-mb-4  { margin-bottom: var(--sp-4); }
.cs-mb-5  { margin-bottom: var(--sp-5); } /* Outplacement */
.cs-mb-6  { margin-bottom: var(--sp-6); }
.cs-mb-7  { margin-bottom: var(--sp-7); }
.cs-measure { max-width: none; } /* Begrenzung aufgehoben — kein Fließtext auf halber Breite */
.cs-divider { border-top: var(--border-w) solid var(--border-subtle); margin: var(--sp-7) 0; }


/* ============================================================================
   20  RESPONSIVE
   ============================================================================ */
/* Kopfzeile: Logo (72px) + 7 feste Menüpunkte brauchen ~1080px Containerbreite.
   Darunter klappt die Navigation unter die Kopfzeile — reines CSS über die Checkbox. */
@media (max-width: 1080px) {
  .cs-nav-burger { display: block; }
  .cs-bar { flex-wrap: wrap; }
  .cs-nav {
    order: 3; width: 100%;
    flex-direction: column; align-items: flex-start; gap: var(--sp-3);
    display: none; padding-bottom: var(--sp-4);
  }
  .cs-nav-check:checked ~ .cs-wrap .cs-nav,
  .cs-nav-check:checked ~ .cs-bar .cs-nav { display: flex; }
  .cs-head-right { flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
  .cs-nav-link::after { display: none; }
}

@media (max-width: 1024px) {
  :root { --fs-display: 2.75rem; --fs-h1: 2.125rem; --fs-h2: 1.75rem; }
  .cs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-split, .cs-split--text-first { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cs-hero-media { height: 320px; }
}

@media (max-width: 860px) {
  :root { --container-pad: var(--sp-5); }
  .cs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-stats { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cs-stat-value { font-size: 3rem; }
}

/* Footer: unter 860px untereinander */
@media (max-width: 860px) {
  .cs-footer-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 640px) {
  :root { --fs-display: 2.25rem; --fs-h1: 1.875rem; --fs-h2: 1.5rem; --container-pad: var(--sp-4); }
  .cs-section, .cs-band { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .cs-grid--2, .cs-grid--3, .cs-grid--4 { grid-template-columns: 1fr; }
  .cs-legal { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .cs-legal-inner h2 { margin-top: var(--sp-6); }
  .cs-hero-text { font-size: var(--fs-lg); }
}


/* ============================================================================
   21  PRINT
   ============================================================================ */
@media print {
  .cs-header, .cs-nav, .cs-meta, .cs-skip-link, .cs-actions, .cs-footer-nav { display: none !important; }
  .cs-footer { background: #fff !important; color: #000 !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .cs-wrap { max-width: none; padding: 0; }
  .cs-legal p { text-align: justify; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* ============================================================================
   22  PERSONEN (TEAM)
   Die Personenkarte der Seite "Team", vollständig. Baut auf Abschnitt 12
   (Cards) auf — .cs-person steht immer zusammen mit .cs-card.
   Porträts im Hochformat 3:4, in Farbe. Kurzbeschreibung immer sichtbar —
   kein Mouseover, kein JS, kein Overlay auf dem Foto.
   ============================================================================ */
/* Sprungmarke je Person: .htaccess leitet alte TYPO3-URLs auf ueber-uns#<person>
   um, und die Startseite verlinkt die Gesichter dorthin. scroll-margin-top
   gibt der angesteuerten Karte etwas Luft; den Versatz unter die klebende
   Kopfzeile leistet bereits
   html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)) } aus
   Abschnitt 05 — beide Werte addieren sich, deshalb hier nur ein kleiner,
   wie bei .cs-faq-group und .cs-slide. */
.cs-person { text-align: left; scroll-margin-top: var(--sp-4); }
.cs-person img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%; border-radius: var(--radius-lg); filter: none; margin: 0 0 var(--sp-4); }
.cs-person-name { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-heading); }
.cs-person-role { font-size: var(--fs-sm); color: var(--text-body); margin-top: var(--sp-1); }
.cs-person-text { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); }

/* Personen-Gruppe: Overline + Titel über einem Personenraster.
   Derzeit in keiner HTML-Datei verwendet (Stand 02.11.2026); bleibt als
   Vorrat stehen, vor einem Aufräumen erneut prüfen. */
.cs-persongroup { margin-bottom: var(--sp-6); }
.cs-persongroup h2 { margin: 0; font-size: var(--fs-h3); }

/* Durchwahl und E-Mail unter der Kurzbeschreibung */
.cs-person-contact { list-style: none; margin: var(--sp-3) 0 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.cs-person-contact a { color: var(--text-body); text-decoration: none; }
.cs-person-contact a:hover { color: var(--cs-red); }


/* ============================================================================
   23  KENNZAHLEN, PARTNERLOGO
   Ergänzungen für die Seite "Über uns". Muss NACH Abschnitt 20 (Responsive)
   stehen — die Media-Query am Ende dieses Abschnitts überschreibt sonst nicht.
   ============================================================================ */

/* Kennzahlen mit Wortwerten statt reiner Ziffern — kleinere Grundgröße */
.cs-stats--words .cs-stat-value { font-size: 2.5rem; line-height: var(--lh-tight); }

/* Partnerlogo im Split (Talentor) */
.cs-logo-partner { margin: 0; }
.cs-logo-partner img { width: 340px; max-width: 100%; height: auto; }


/* ============================================================================
   24  PAKETE, PREISE, ABLAUF, KONTAKTKARTE   — Outplacement
   Eingeführt für die Seite "Outplacement". Übernommen aus dem <style>-Block
   der Vorschau; nichts Bestehendes überschrieben.
   ============================================================================ */

/* Karte mit Fußzeile: Inhalt oben, Preis unten bündig */
.cs-card--stack { display: flex; flex-direction: column; }
.cs-card--stack .cs-tags { margin-bottom: var(--sp-4); }
.cs-card--stack .cs-tag { white-space: normal; line-height: 1.3; }
.cs-card--stack .cs-card-text { margin-bottom: var(--sp-5); }
.cs-card-foot { margin: auto 0 0; padding-top: var(--sp-4); border-top: var(--border-w) solid var(--border-subtle); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-heading); }

/* Raster mit größeren Abständen für zwei breite Textspalten */
.cs-grid--wide { column-gap: var(--sp-8); row-gap: var(--sp-7); }
@media (max-width: 640px) { .cs-grid--wide { grid-template-columns: 1fr; } }

/* Paketkasten: dunkler Kopf mit Preis, heller Körper mit den Bestandteilen */
.cs-package { border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; }
.cs-package-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6); background: var(--surface-dark); color: var(--cs-white); }
.cs-package-head h3 { color: var(--cs-white); margin: 0; }
.cs-package-body { padding: var(--sp-6); }
.cs-package-item { border-top: var(--accent-bar) solid var(--cs-red); padding-top: var(--sp-4); }
.cs-package-item h4 { margin-bottom: var(--sp-2); }
.cs-package-item p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.cs-price { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.1; color: var(--cs-white); white-space: nowrap; }

/* Nummerierter Ablauf ohne JS — Zähler über ::before */
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); counter-reset: cs-step; }
.cs-steps li { counter-increment: cs-step; margin: 0; padding-top: var(--sp-4); border-top: var(--border-w) solid var(--border-default); line-height: var(--lh-relaxed); }
.cs-steps li::before { content: counter(cs-step, decimal-leading-zero); display: block; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1; color: var(--cs-red); margin-bottom: var(--sp-3); }
.cs-steps strong { display: block; font-size: var(--fs-h4); color: var(--text-heading); margin-bottom: var(--sp-1); }
@media (max-width: 860px) { .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-steps { grid-template-columns: 1fr; } .cs-package-head, .cs-package-body { padding: var(--sp-5); } }

/* Kontaktkarte: Porträt, Anschrift, Schaltfläche nebeneinander */
.cs-contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; }
.cs-contact img { height: calc(6 * var(--lh-relaxed) * 1rem); width: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%; border-radius: var(--radius-lg); filter: none; }
@media (max-width: 860px) { .cs-contact { grid-template-columns: auto minmax(0, 1fr); } .cs-contact .cs-actions { grid-column: 1 / -1; } }
@media (max-width: 480px) { .cs-contact { grid-template-columns: 1fr; } .cs-contact img { height: auto; width: 100%; max-width: 200px; } }


/* ============================================================================
   25  VERGLEICHSTABELLE, REGISTER, FRAGE-ANTWORT   — Vertragsformen
   Eingeführt für die Seite "Vertragsformen". Übernommen aus dem <style>-Block
   der Vorschau; nichts Bestehendes überschrieben.
   ============================================================================ */

/* Tabelle, die unter 860px zu Blöcken umbricht — ein Block je Zeile,
   Kriterien als Beschriftung-Wert-Zeilen. Kein zweites HTML: erste Zelle
   je Zeile <th scope="row">, Datenzellen tragen data-label. */
.cs-table--stack { table-layout: fixed; }
/* Lange deutsche Komposita dürfen die feste Spaltenbreite nicht überlaufen */
.cs-table--stack th, .cs-table--stack td { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 1080px) { .cs-table--stack { table-layout: auto; } }
.cs-table--stack th[scope="col"]:first-child { width: 22%; }
.cs-table--stack th[scope="row"] {
  background: transparent; color: var(--text-heading);
  font-weight: var(--fw-bold); text-align: left; vertical-align: top;
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.cs-table--stack th[scope="row"] a { color: var(--text-heading); }
.cs-table--stack th[scope="row"] a:hover { color: var(--cs-red); text-decoration: none; }
.cs-table--stack td { vertical-align: top; }

@media (max-width: 860px) {
  .cs-table--stack, .cs-table--stack tbody, .cs-table--stack tr,
  .cs-table--stack th, .cs-table--stack td { display: block; width: auto; }
  .cs-table--stack { table-layout: auto; }
  .cs-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cs-table--stack tbody tr {
    border: var(--border-w) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--sp-4); margin-bottom: var(--sp-4);
  }
  .cs-table--stack th[scope="row"] {
    padding: 0 0 var(--sp-3); font-size: var(--fs-h4);
    border-bottom: var(--border-w) solid var(--border-default);
  }
  .cs-table--stack td { padding: var(--sp-3) 0 0; border: 0; }
  .cs-table--stack td + td { border-top: var(--border-w) solid var(--border-subtle); padding-top: var(--sp-3); }
  .cs-table--stack td::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-overline); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-overline); text-transform: uppercase;
    color: var(--cs-grey-500); margin-bottom: var(--sp-1);
  }
}

/* Vergleichstabelle: graue Fläche wie die hellgrauen Bänder, Spaltenköpfe als
   eigene Kästchen mit roter Linie. Die Trennung entsteht über border-spacing —
   dafür muss border-collapse aufgehoben werden. Erste Kopfzelle bleibt leer. */
.cs-table--compare { background: var(--surface-subtle); border-collapse: separate; border-spacing: 2px 0; }
.cs-table--compare thead th {
  background: var(--surface-page); color: var(--text-heading);
  border-top: var(--accent-bar) solid var(--cs-red);
  font-size: var(--fs-overline); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline); text-transform: uppercase;
  vertical-align: bottom; line-height: var(--lh-snug);
}
/* Die erste Kopfzelle trug früher keine Beschriftung und war deshalb
   ausgenommen. Seit sie „Vertragsform" bzw. „Suchmethode" nennt, wird sie
   wie jede andere Kopfzelle gesetzt — sonst steht die erste Spalte optisch
   neben der Tabelle statt darin. */
/* keine Zebrastreifen — die Fläche bleibt durchgehend grau */
.cs-table--compare tbody tr td,
.cs-table--compare tbody tr th[scope="row"],
.cs-table--compare tbody tr:nth-child(even) td,
.cs-table--compare tbody tr:nth-child(even) th[scope="row"] { background: transparent; }
/* Zeilentrennung: grey-200 verschwindet auf der grauen Tabellenfläche fast
   vollständig. grey-400 trennt die Zeilen sichtbar, ohne als Rahmen zu
   wirken. Gilt für Datenzellen und die Zelle der ersten Spalte gleich. */
.cs-table--compare tbody td,
.cs-table--compare tbody th[scope="row"] { border-bottom-color: var(--cs-grey-400); }
@media (max-width: 860px) { .cs-table--compare { background: transparent; border-spacing: 0; } }
/* laufende Nummer vor dem Namen der Vertragsform */
.cs-table-num { color: var(--cs-red); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }

/* Register — Nummer und Name als Reiter auf einer Haarlinie */
.cs-register { border-bottom: var(--border-w) solid var(--border-default); margin: 0 0 var(--sp-6); }
.cs-register-tab {
  display: inline-flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-subtle);
  border: var(--border-w) solid var(--border-subtle); border-bottom: 0;
  border-top: var(--accent-bar) solid var(--cs-red);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.cs-register-num {
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); color: var(--cs-red);
  font-variant-numeric: tabular-nums;
}
.cs-register-title { margin: 0; font-size: var(--fs-h3); }
/* auf hellgrauem Band hebt sich der Reiter in Weiß ab */
.cs-band--subtle .cs-register-tab { background: var(--surface-page); }

/* Frage-Antwort-Einheiten — jede für sich lesbar */
.cs-qa { border-top: var(--border-w) solid var(--border-subtle); }
.cs-qa-item { padding: var(--sp-5) 0; border-bottom: var(--border-w) solid var(--border-subtle); }
.cs-qa-item > :last-child { margin-bottom: 0; }
.cs-qa-q { margin: 0 0 var(--sp-3); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-heading); }
.cs-qa-a { margin: 0 0 var(--sp-4); line-height: var(--lh-relaxed); }
/* ohne Haarlinien — für Bänder */
.cs-qa--plain { border-top: 0; }
.cs-qa--plain .cs-qa-item { border-bottom: 0; padding: 0 0 var(--sp-6); }
.cs-qa--plain .cs-qa-item:last-child { padding-bottom: 0; }
/* große Fragen */
.cs-qa--lg .cs-qa-q { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
/* Tabelle innerhalb einer Frage-Antwort-Einheit */
.cs-qa-table { margin-top: var(--sp-4); }
/* Frage-Antwort als Karte: Frage und Antwort stehen zusammen im Raster */
.cs-card .cs-qa-a:last-child { margin-bottom: 0; }
/* Karte mit Verbandslogo links neben dem Text */
.cs-card--logo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.cs-card--logo img { width: 120px; height: auto; }
.cs-card--logo > div > :last-child { margin-bottom: 0; }
@media (max-width: 480px) { .cs-card--logo { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .cs-qa--lg .cs-qa-q { font-size: var(--fs-h3); }
}


/* ============================================================================
   26  BRANCHENINFO-LISTEN   — Buchstabenleiste, Einträge, Bundesland-Filter
   Eingeführt für die Seite "Brancheninfo Contract Research Organisations".
   ============================================================================ */

/* Alphabet-Sprungnavigation — nur Buchstaben mit Einträgen sind Links */
.cs-alpha {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  list-style: none; margin: 0 0 var(--sp-5); padding: var(--sp-3) 0;
  border-top: var(--border-w) solid var(--border-subtle);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.cs-alpha li { margin: 0; }
.cs-alpha a, .cs-alpha span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--sp-1);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.cs-alpha a { color: var(--cs-anthracite); background: var(--cs-white); }
.cs-alpha a:hover { color: var(--cs-white); background: var(--cs-red); border-color: var(--cs-red); text-decoration: none; }
.cs-alpha span { color: var(--cs-grey-400); background: var(--cs-grey-050); border-color: transparent; }

/* Zähler und Stand über der Liste */
.cs-listmeta { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: baseline; margin: 0 0 var(--sp-3); }
.cs-listmeta strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* Eintrag — Bestandteile der Karte */
.cs-entry-place { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--cs-grey-500); margin: 0 0 var(--sp-2); }
.cs-entry-focus { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--sp-3); }
.cs-entry-link  { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cs-entry-link::after { content: " ↗"; }

/* Hinweisbox am Seitenende */
.cs-note {
  background: var(--surface-subtle); border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6); font-size: var(--fs-sm); color: var(--text-body);
}
.cs-note p { margin: 0; }

/* Bundesland-Filter — reines CSS über :has(), kein JavaScript.
   Aufbau: <div class="cs-filter-scope"> umschließt Radios UND Karten.
   Jede Karte trägt je Bundesland eine Klasse .cs-land-<kürzel>. */
.cs-filter { margin: 0 0 var(--sp-5); }
.cs-filter-legend {
  display: block; margin: 0 0 var(--sp-3);
  font-size: var(--fs-overline); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline); text-transform: uppercase;
  color: var(--text-heading);
}
.cs-filter-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.cs-filter-list li { margin: 0; }
/* Radio bleibt bedienbar, liegt aber unsichtbar unter dem Label */
.cs-filter input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cs-filter label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--cs-anthracite); background: var(--cs-white);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cs-filter label:hover { border-color: var(--cs-red); color: var(--cs-red); }
/* gewählter Knopf: rote Fläche, weiße Schrift */
.cs-filter input[type="radio"]:checked + label {
  background: var(--cs-red); border-color: var(--cs-red); color: var(--cs-white);
}
/* sichtbarer Fokus, da das Radio selbst unsichtbar ist */
.cs-filter input[type="radio"]:focus-visible + label {
  outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--cs-red);
}
.cs-flag { width: 20px; height: 12px; flex: 0 0 auto; border: var(--border-w) solid var(--border-subtle); border-radius: 1px; }

/* Die eigentliche Filterung: ist ein Land gewählt, verschwinden alle Karten
   ohne die zugehörige Klasse. "Alle" setzt keine Regel und zeigt daher alles.
   Abgedeckt sind alle 16 Bundesländer, eine Zeile je Land — hier ist nichts
   mehr zu ergänzen. Eine Liste, die ein weiteres Land zeigen soll, braucht
   nur im HTML das Radio #land-<kürzel> samt Label und Flagge sowie die Klasse
   .cs-land-<kürzel> an den Karten. */
.cs-filter-scope:has(#land-bw:checked) .cs-card:not(.cs-land-bw),
.cs-filter-scope:has(#land-by:checked) .cs-card:not(.cs-land-by),
.cs-filter-scope:has(#land-be:checked) .cs-card:not(.cs-land-be),
.cs-filter-scope:has(#land-bb:checked) .cs-card:not(.cs-land-bb),
.cs-filter-scope:has(#land-hb:checked) .cs-card:not(.cs-land-hb),
.cs-filter-scope:has(#land-hh:checked) .cs-card:not(.cs-land-hh),
.cs-filter-scope:has(#land-he:checked) .cs-card:not(.cs-land-he),
.cs-filter-scope:has(#land-mv:checked) .cs-card:not(.cs-land-mv),
.cs-filter-scope:has(#land-ni:checked) .cs-card:not(.cs-land-ni),
.cs-filter-scope:has(#land-nw:checked) .cs-card:not(.cs-land-nw),
.cs-filter-scope:has(#land-rp:checked) .cs-card:not(.cs-land-rp),
.cs-filter-scope:has(#land-sl:checked) .cs-card:not(.cs-land-sl),
.cs-filter-scope:has(#land-sn:checked) .cs-card:not(.cs-land-sn),
.cs-filter-scope:has(#land-st:checked) .cs-card:not(.cs-land-st),
.cs-filter-scope:has(#land-sh:checked) .cs-card:not(.cs-land-sh),
.cs-filter-scope:has(#land-th:checked) .cs-card:not(.cs-land-th) { display: none; }

/* Vollbreite-Kopfband ohne Container */
.cs-bandmedia { display: block; margin: 0; }
.cs-bandmedia img { width: 100%; height: auto; display: block; }


/* ============================================================================
   27  BRANCHENKACHELN   — Branchen
   Eingeführt für die Seite "Branchen". Übernommen aus dem <style>-Block der
   Vorschau (branchen v3); nichts Bestehendes überschrieben.
   Muss NACH Abschnitt 20 (Responsive) stehen — die Media-Query am Ende dieses
   Abschnitts überschreibt sonst nicht.
   ============================================================================ */

/* Bildkachel mit Beschriftung UNTER dem Bild, nie darauf.
   Kein Text im Bild, keine Farbüberlagerung, kein Filter.
   Beschnitt per object-fit (nie verzerren).
   <figure class="cs-tile"><img …><figcaption class="cs-tile-label">Pharma</figcaption>
     <p class="cs-tile-text">…</p></figure> */
.cs-tile { margin: 0; }
.cs-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display: block; border-radius: var(--radius-lg); filter: none; }
.cs-tile-label { margin-top: var(--sp-3); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-heading); }
.cs-tile-text { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); }

/* Vier Bildkacheln bleiben auf kleinen Schirmen zweispaltig (2x2), statt
   einspaltig zu stapeln — vier gestapelte Bilder ergäben eine sehr lange
   Bildstrecke. Doppelte Klasse im Selektor, damit die 640px-Regel in
   Abschnitt 20 (.cs-grid--4 { 1fr }) nicht gewinnt. */
@media (max-width: 640px) {
  .cs-grid--4.cs-grid--keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================================
   28  FACHBEREICHE-ZEILEN   — Fachbereiche
   Eingeführt für die Seite "Fachbereiche". Muss NACH Abschnitt 20 (Responsive)
   stehen — die Media-Query am Ende dieses Abschnitts überschreibt sonst nicht.

   BEWUSST NICHT .cs-register: diese Klasse ist in Abschnitt 25 bereits
   vergeben (Reiter auf einer Haarlinie, vertragsformen.html) und kollidiert
   in der Grundregel — dort border-bottom, hier bräuchte es border-top.
   Eigene Namen .cs-fields / .cs-fields-row, damit vertragsformen.html
   unverändert bleibt.
   ============================================================================ */

/* Zeilenraster: links der Name des Fachbereichs, rechts Positionen und
   Erläuterung. Haarlinie zwischen den Zeilen, keine Nummerierung. */
.cs-fields { border-top: var(--border-w) solid var(--border-default); }
.cs-fields-row { display: grid; grid-template-columns: minmax(220px, 28%) 1fr; column-gap: var(--sp-7); align-items: start; padding: var(--sp-5) 0; border-bottom: var(--border-w) solid var(--border-subtle); }
.cs-fields-row h2 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: 0; }
/* Abstand der Hinweisbox zur Positionsliste. Die Box selbst bleibt die
   globale .cs-note aus Abschnitt 26 — hier nur der Abstand, damit die
   Brancheninfo-Seiten unberührt bleiben. */
.cs-fields-row .cs-note { margin: var(--sp-4) 0 0; }

/* Positionsliste — Aufzählung ohne Punkte. In der Inline-Variante stehen die
   Positionen als Lauftext hintereinander, getrennt durch ein Mittelpunkt-
   Zeichen; das spart auf zehn Fachbereichen viel Seitenlänge. */
.cs-poslist { list-style: none; margin: 0; padding: 0; }
.cs-poslist li { margin: 0; padding: var(--sp-2) 0; border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); }
.cs-poslist li:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-poslist--inline li { display: inline; padding: 0; border: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.cs-poslist--inline li + li::before { content: "\00b7"; color: var(--cs-grey-400); margin: 0 6px; }

/* Unter 860 px stehen Name und Positionen untereinander */
@media (max-width: 860px) {
  .cs-fields-row { grid-template-columns: 1fr; row-gap: var(--sp-4); padding: var(--sp-5) 0; }
}


/* ============================================================================
   29  FAQ-SEITE   — Sprungnavigation, Pfeil-Akkordeon, Dokumentlayout
   Eingeführt für die Seite "Häufige Fragen". Aus den <style>-Blöcken der
   Vorschauen faq-v2 (Akkordeon) und faq-v3 (Seitenleiste, Abschnittsgruppen)
   übernommen. Muss NACH Abschnitt 20 (Responsive) stehen — die Media-Query am
   Ende dieses Abschnitts überschreibt sonst nicht.

   Das Akkordeon selbst (.cs-faq, details, summary) steht bereits in
   Abschnitt 18 und blieb unverändert; hier kommen nur die Pfeil-Variante und
   die Überschrift im summary dazu.

   NICHT übernommen: .cs-qa und .cs-qa-item aus faq-v3 — diese Namen sind in
   Abschnitt 25 bereits für vertragsformen.html vergeben, und die offene
   Frage-Antwort-Liste wird hier nicht verwendet (die Fragen stehen als
   Akkordeon). Ebenso nicht die abwechselnden Bandfarben aus faq-v2.
   ============================================================================ */

/* Sprungnavigation — waagerechte Pillenleiste, ohne JS */
.cs-jump { margin: 0 0 var(--sp-5); }
.cs-jump-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: 0; padding: 0; list-style: none; }
.cs-jump-list li { margin: 0; }
.cs-jump-link {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--cs-anthracite);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.cs-jump-link:hover { background: var(--cs-red); border-color: var(--cs-red); color: var(--cs-white); text-decoration: none; }

/* Variante als senkrechte Leiste in der linken Spalte */
.cs-jump--rail .cs-jump-list { flex-direction: column; gap: 0; }
.cs-jump--rail .cs-jump-link {
  width: 100%; border: 0; border-radius: 0;
  border-left: var(--border-w-2) solid var(--border-subtle);
  padding: 8px 0 8px var(--sp-4); font-size: 14px;
}
.cs-jump--rail .cs-jump-link:hover { background: transparent; color: var(--cs-red); border-left-color: var(--cs-red); }

/* Abschnittsgruppe, durch Haarlinie getrennt.
   scroll-margin-top gibt der angesteuerten Überschrift etwas Luft. Den
   Versatz unter die klebende Kopfzeile leistet bereits
   html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)) } aus
   Abschnitt 05 — beide Werte addieren sich, deshalb hier nur ein kleiner. */
.cs-faq-group { padding-top: var(--sp-6); scroll-margin-top: var(--sp-4); }
.cs-faq-group:first-of-type { padding-top: 0; }
.cs-faq-group + .cs-faq-group { border-top: var(--border-w) solid var(--border-default); }
.cs-faq-group > h2 { margin-bottom: var(--sp-5); }

/* Akkordeon mit Pfeil statt Plus. Die Frage steht als <h3> im <summary>,
   damit die Gliederung stimmt — optisch bleibt sie Teil der Zeile. */
.cs-faq summary h3 { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: 0; }
.cs-faq--arrow summary::after {
  content: "\203A"; float: right; display: inline-block;
  font-size: 1.5em; line-height: .8; color: var(--cs-red); font-weight: var(--fw-bold);
  transform: rotate(90deg); transform-origin: 50% 45%;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.cs-faq--arrow details[open] summary::after { content: "\203A"; transform: rotate(-90deg); }

/* Dokumentlayout: mitlaufende Leiste links, Inhalt rechts */
.cs-docsplit { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.cs-docsplit-rail { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

/* Unter 860 px steht die Leiste als waagerechte Sprungzeile über den Fragen:
   einspaltig, nicht mehr klebend, und die Links fallen auf die Pillenform
   der Grundvariante zurück. */
@media (max-width: 860px) {
  .cs-docsplit { grid-template-columns: 1fr; gap: var(--sp-5); }
  .cs-docsplit-rail { position: static; }
  .cs-jump--rail .cs-jump-list { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .cs-jump--rail .cs-jump-link {
    width: auto; border: var(--border-w) solid var(--border-default);
    border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px;
  }
  .cs-jump--rail .cs-jump-link:hover { background: var(--cs-red); border-color: var(--cs-red); color: var(--cs-white); }
}


/* ============================================================================
   30  BEWERTUNGEN, ZITAT-SLIDER, ZITATE   — Referenzen
   Eingeführt für die Seite "Referenzen". Aus dem <style>-Block der Vorschau
   referenzen-v2 übernommen. Muss NACH Abschnitt 20 (Responsive) stehen — die
   Media-Query am Ende dieses Abschnitts überschreibt sonst nicht.

   NICHT übernommen, weil auf der Seite nicht verwendet: die
   .cs-band--dark-Varianten aller drei Bausteine (es gibt auf keiner gebauten
   Seite ein dunkles Band), .cs-quote--lg, .cs-quote-mark und
   .cs-slider-hint. Sie kommen zurück, sobald eine Seite sie braucht.
   ============================================================================ */

/* --- Plattform-Bewertungen --------------------------------------------------
   Ohne externes Widget, ohne JS. Sterne als Inline-SVG; die Teilfüllung
   entsteht durch eine zweite, prozentual beschnittene Sternreihe über der
   grauen Grundreihe.
   <div class="cs-ratings"><article class="cs-rating">…</article></div>          */
.cs-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.cs-rating { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-rating-platform { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-heading); }
.cs-rating-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cs-rating-value { font-size: 2.5rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; color: var(--cs-red); }
.cs-rating-max { font-size: var(--fs-sm); color: var(--text-body); }
.cs-rating-count { font-size: var(--fs-sm); color: var(--text-body); margin: 0; }
.cs-rating-link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-top: auto; }

.cs-stars { position: relative; width: 112px; height: 20px; flex: 0 0 auto; }
.cs-stars-base, .cs-stars-fill { position: absolute; left: 0; top: 0; height: 20px; overflow: hidden; }
.cs-stars-base { width: 112px; }
.cs-stars-row { display: flex; gap: 3px; width: 112px; }
.cs-star { width: 20px; height: 20px; flex: 0 0 auto; }
.cs-stars-base .cs-star { fill: var(--cs-grey-300); }
.cs-stars-fill .cs-star { fill: var(--cs-red); }
/* Füllgrad als Modifier, damit kein Inline-Style nötig ist. Je Bewertungswert
   ein Modifier; ändert sich der Wert, kommt hier einer dazu. 94 % = 4,7 von 5,
   98 % = 4,9 von 5. */
.cs-stars-fill--94 { width: 94%; }
.cs-stars-fill--98 { width: 98%; }

@media (max-width: 640px) {
  .cs-ratings { grid-template-columns: 1fr; }
}

/* --- Zitat-Slider — reines CSS, kein JavaScript -----------------------------
   Waagerechte Scroll-Spur mit Scroll-Snap: auf Touch-Geräten wischen, am
   Desktop über Pfeil- und Punkt-Anker springen. Ohne CSS-Unterstützung stehen
   alle Zitate untereinander und bleiben lesbar.
   <div class="cs-slider"><div class="cs-slider-track">
     <article class="cs-slide" id="…"><blockquote class="cs-quote">…</blockquote></article>
   </div></div>                                                                 */
.cs-slider { position: relative; }
/* Trennung der drei Kategorien. Haarlinie wie zwischen den Abschnittsgruppen
   der FAQ-Seite (.cs-faq-group + .cs-faq-group, Abschnitt 29), damit beide
   Seiten dieselbe Sprache sprechen. Zwischen der Pfeilzeile des vorigen
   Sliders und der naechsten Ueberschrift stehen damit 48 + 1 + 48 = 97 px —
   deutlich getrennt, ohne grossen Weissraum. */
.cs-slider + .cs-slider {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: var(--border-w) solid var(--border-default);
}
/* Die Linie unter der Kategorie-Überschrift trägt den Abschnitt und war in
   grey-200 kaum zu sehen. grey-300 (--border-default) ist dasselbe Grau wie
   die Trennlinie zwischen den Kategorien. */
.cs-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: var(--border-w) solid var(--border-default); }
.cs-slider-title { margin: 0; font-size: var(--fs-h3); }
/* Anzahl-Etikett neben der Ueberschrift. Grundform ist .cs-badge aus
   Abschnitt 13; hier nur die Versalien-Laufweite zuruecknehmen, die bei einer
   reinen Zahl nur Luft erzeugt, und die Ziffern auf feste Breite stellen. */
.cs-slider-title .cs-badge { margin-left: var(--sp-2); letter-spacing: var(--ls-normal); font-variant-numeric: tabular-nums; vertical-align: middle; }
/* Die Spur ist bewusst KEIN Scroll-Container mehr. Sichtbar ist immer genau
   ein Zitat, die Hoehe des Sliders richtet sich damit nach diesem einen Zitat
   — kein Strecken auf die Hoehe des laengsten Eintrags, keine Leerflaeche
   unter kurzen Zitaten. Die Klasse bleibt als Haltepunkt im Markup. */
.cs-slider-track { display: block; }

/* Ein Zitat sichtbar, die uebrigen ausgeblendet. Umgeschaltet wird allein
   ueber :target, also ueber die Pfeil-Anker — kein JavaScript.
   scroll-margin-top haelt beim Blaettern die Slider-Ueberschrift samt
   Zaehler-Etikett im Bild: der Browser scrollt das Zitat um diesen Betrag
   tiefer, und darueber steht genau die Kopfzeile (Ueberschrift ~27 px,
   padding-bottom 12 px, Haarlinie 1 px, margin-bottom 16 px = ~56 px).
   Den Versatz unter die klebende Kopfzeile leistet bereits
   html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)) } aus
   Abschnitt 05 — der Wert hier kommt nur fuer die Kopfzeile des Sliders dazu,
   nicht noch einmal fuer die Seitenkopfzeile. */
.cs-slide { display: none; scroll-margin-top: var(--sp-8); }
.cs-slide:target { display: block; }
/* Solange in diesem Slider kein Zitat angesteuert ist — beim Laden der Seite,
   beim Sprung auf die Kategorie und waehrend ein anderer Slider aktiv ist —
   steht das erste Zitat. :target gilt dokumentweit, deshalb muss die Regel auf
   den einzelnen Slider eingegrenzt werden. */
.cs-slider:not(:has(.cs-slide:target)) .cs-slide:first-child { display: block; }
.cs-slider-nav { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.cs-slider-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-md);
  color: var(--cs-anthracite); font-size: var(--fs-h4); font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cs-slider-arrow:hover { color: var(--cs-red); border-color: var(--cs-red); text-decoration: none; }
/* Positionsanzeige zwischen den Pfeilen, z. B. "3 / 48". Gedaempft, damit die
   Pfeile die staerkeren Elemente bleiben; Ziffern auf fester Breite, sonst
   springt die Anzeige beim Blaettern seitlich. */
.cs-slider-position { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--cs-grey-500); font-variant-numeric: tabular-nums; padding: 0 var(--sp-2); }

/* --- Zitate ---------------------------------------------------------------- */
.cs-quote { margin: 0; padding: 0; border: 0; }
.cs-quote-text { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--sp-5); }
.cs-quote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-4); border-top: var(--accent-bar) solid var(--cs-red); }
.cs-quote-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-heading); font-style: normal; }
.cs-quote-role { font-size: var(--fs-sm); color: var(--text-body); }
/* Datum der Stimme — gleiche Groesse wie die Rolle, aber gedaempft, damit der
   Name die staerkere Angabe bleibt. */
.cs-quote-date { font-size: var(--fs-sm); color: var(--text-muted); }
/* Quellenangabe, kein Etikett: keine Fläche, kein Radius, keine Versalien —
   nur kleine graue Schrift. Sie steht weiter rechts in der Meta-Zeile. */
.cs-quote-source { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; }

@media (max-width: 640px) {
  .cs-quote-source { margin-left: 0; }
}


/* ============================================================================
   31  LEISTUNGSKARTEN UND DUNKLES BAND   — Leistungen
   Eingeführt für die Seite "Leistungen". Muss NACH Abschnitt 20 (Responsive)
   stehen — sonst greifen die Spaltenregeln der Raster nicht wie erwartet.
   Löst die frühere Marken-Sprungleiste (.cs-jump--brand) ab; die ist
   ersatzlos entfallen.
   ============================================================================ */

/* Kürzel über dem Kartentitel: CON / STA / RES. Gross, fett, Versalien, in
   Constares-Rot. Die offene Laufweite ist der Wortmarke abgeschaut, die
   Serifenschrift des Logos wird NICHT nachgebaut — die Website kennt nur
   Source Sans. */
.cs-code {
  display: block;
  font-size: 2.5rem; line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--cs-red);
}

/* Karte als Ganzes ein Link: die vollständige Fläche ist klickbar, nicht nur
   der Titel. Der Fokusring kommt aus Abschnitt 05. Hover dezent über Rahmen
   und Titelfarbe — keine Fläche, kein Versatz. */
a.cs-card { display: block; color: inherit; }
a.cs-card:hover { border-color: var(--cs-red); text-decoration: none; }
a.cs-card:hover .cs-card-title { color: var(--cs-red); }
.cs-card-title { transition: color var(--dur-fast) var(--ease-standard); }

/* --- Weisse Kacheln auf dunklem Band ---------------------------------------
   .cs-band--dark färbt in Abschnitt 07 alles hell ein: Überschriften weiss,
   Absätze grey-300, Links weiss. Auf einer weissen Karte wäre das unlesbar,
   deshalb wird der Textton innerhalb der Karte zurückgedreht. Alle Regeln
   stehen eine Klasse höher als die Grundregeln und gewinnen damit.
   Kontrast auf #FFFFFF: Fliesstext #3A3A3C = 11,4:1, Link #DB0032 = 7,4:1 —
   beides deutlich über AA. */
.cs-band--dark .cs-card { color: var(--text-body); }
.cs-band--dark .cs-card p { color: var(--text-body); }
.cs-band--dark .cs-card h2,
.cs-band--dark .cs-card h3,
.cs-band--dark .cs-card .cs-card-title { color: var(--text-heading); }
.cs-band--dark .cs-card a { color: var(--accent); }
.cs-band--dark .cs-card a:hover { color: var(--accent-hover); }

/* Caption auf dunklem Grund: --text-caption ist Anthrazit und damit auf
   Anthrazit unsichtbar. grey-300 auf #58585A = 4,9:1, AA erfüllt. */
.cs-band--dark .cs-caption { color: var(--cs-grey-300); }

/* Das rote Schlüsselwort auf dunklem Grund.
   ENTSCHEIDUNG 06.10.2026: Constares-Rot auf Anthrazit trotz geringem
   Kontrast, nur für grosse, fette Überschriften/Kürzel; nicht für Fliesstext.
   Die Marke geht hier bewusst vor der Kontrastregel — #DB0032 auf #58585A
   ergibt 1,0:1 und erfüllt damit weder AA noch die 3:1 für grosse Schrift.
   Zuvor stand hier die Rot-Aufhellung #F4B3C0 (4,1:1).
   Der Selektor ist deshalb eng gefasst: er greift ausschliesslich in h1, h2
   und h3. Fliesstext, Captions und Links auf dunklem Grund bleiben unberührt
   und erfüllen weiterhin AA (Weiss 7,1:1, grey-300 4,9:1).
   Wird der Akzent je ausserhalb einer Überschrift auf dunklem Grund
   gebraucht, ist das neu zu entscheiden — nicht einfach den Selektor
   erweitern. */
.cs-band--dark h1 .cs-accent,
.cs-band--dark h2 .cs-accent,
.cs-band--dark h3 .cs-accent { color: var(--cs-red); }


/* ============================================================================
   32  STARTSEITE   — Hero-Video, Gesichterreihe, quadratische Kacheln
   Eingeführt für `index.html`. Aus dem <style>-Block der Vorschau index-v1
   übernommen. Muss NACH Abschnitt 20 (Responsive) stehen.

   NICHT übernommen, weil auf der Seite nicht verwendet: .cs-herotext,
   .cs-hero-title, .cs-hero-text (kein Text auf dem Video), .cs-code--accent
   (alle drei Kürzel stehen in Rot, das leistet .cs-code aus Abschnitt 31
   schon), .cs-partnerlogo (dafür gibt es .cs-logo-partner in Abschnitt 23),
   .cs-portraitmedia und .cs-contactline (ersetzt durch .cs-bandmedia und die
   Kontaktkarte).
   ============================================================================ */

/* Hero-Video über die volle Seitenbreite, ohne Container. Das Video trägt
   keinen Text; es läuft stumm, in Schleife und ohne Bedienelemente — das ist
   reine Dekoration, kein Inhalt, der bedient werden müsste.
   Das Poster deckt die Zeit bis zum ersten Bild ab. */
.cs-herovideo { position: relative; overflow: hidden; background: var(--cs-grey-900); aspect-ratio: 3 / 1; margin: 0; }
.cs-herovideo video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 35%; }
.cs-herovideo--tall { aspect-ratio: 21 / 9; }

/* Quadratische Bildkachel — Variante zu .cs-tile aus Abschnitt 27, die sonst
   auf 4:3 beschneidet. */
.cs-tile--square img { aspect-ratio: 1 / 1; }

/* Bildkachel als Ganzes ein Link — wie a.cs-card in Abschnitt 31. Die
   Beschriftung behält ihre Textfarbe und wird beim Hover rot; unterstrichen
   wird nichts, das Bild trägt den Link mit. */
a.cs-tile { display: block; color: inherit; }
a.cs-tile:hover { text-decoration: none; }
a.cs-tile:hover .cs-tile-label { color: var(--cs-red); }
.cs-tile-label { transition: color var(--dur-fast) var(--ease-standard); }

/* Gesichterreihe: die Teamfotos klein, als Vorgeschmack auf ueber-uns#team.
   Hochformat 3:4, Beschnitt wie bei .cs-person (Abschnitt 22).
   LINKSBÜNDIG: die Reihe beginnt an derselben Textkante wie Überschrift und
   Absatz darüber. Kein justify-content: center — das rückte die Fotos
   optisch ein und brach die gemeinsame Kante aller Bänder. flex-start ist
   der Vorgabewert und steht deshalb nicht eigens da; die letzte Zeile endet
   naturgemäss früher, das ist kein Weissraum, der zu füllen wäre. */
.cs-faces { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cs-faces a { display: block; }
.cs-faces img { width: 104px; height: 139px; object-fit: cover; object-position: center 22%; border-radius: var(--radius-md); display: block; }

/* --- Weitere Korrekturen für das dunkle Band --------------------------------
   Die Overline steht sonst in Constares-Rot; auf Anthrazit ergibt das 1,0:1
   und wäre unlesbar. Sie ist klein (11 px) und fällt deshalb nicht unter die
   Ausnahme vom 06.10.2026, die nur grosse, fette Überschriften abdeckt —
   also Weiss, 7,1:1.
   Der Lead-Absatz trägt auf dem Band die Aussage und steht kräftiger als
   Fliesstext: Weiss statt des grey-300 aus Abschnitt 07. */
.cs-band--dark .cs-overline { color: var(--cs-white); }
.cs-band--dark .cs-lead { color: var(--cs-white); }