/* ============================================================
   WinWin Recruiting – Token-System & Basis-Stile
   ------------------------------------------------------------
   REGEL: Farben, Schriften und Abstände NUR hier definieren.
   Niemals Hex-Codes direkt in Sektionen schreiben.

   Beim Rebranding / GmbH-Gründung: nur den BRAND-Block tauschen.
   Das ist dann ein 30-Minuten-Job statt eines zweiten Neubaus.
   ============================================================ */

:root {

  /* === BRAND – beim Rebranding NUR diese Zeilen ändern ===

     Markenfarbe ist #5E7B93. Sie steht in --c-brand-soft und wird
     überall dort verwendet, wo kein Text darauf liegt.

     Für Buttons und Links nutzen wir eine abgedunkelte Variante.
     Grund: #5E7B93 mit weißer Schrift erreicht 4,44:1 Kontrast und
     liegt damit knapp unter der Barrierefreiheits-Schwelle von 4,5:1.
     #41586D ist derselbe Farbton, erreicht aber 7,39:1 – gut lesbar
     auch für Leser mit Lesebrille oder bei Sonnenlicht am Bau. */
  --c-brand:          #41586D;   /* Buttons, Links, Text – kontraststark */
  --c-brand-soft:     #5E7B93;   /* Markenfarbe: Flächen, Akzente ohne Text */
  --c-brand-dark:     #33465a;   /* Hover, dunkle Flächen */
  --c-brand-light:    #eef2f5;   /* dezente Hintergrundflächen */

  /* Gold #D6BB4C ist die zweite Markenfarbe. Als Textfarbe auf Weiß
     erreicht sie nur 1,9:1 – unlesbar. Deshalb zwei Tokens:
       --c-accent      für Flächen und Dekoration (Punkte, Striche, Rahmen)
       --c-accent-ink  für Text, gleicher Farbton, abgedunkelt  */
  --c-accent:         #D6BB4C;   /* Dekoration, nie als Textfarbe */
  --c-accent-ink:     #806C1E;   /* Text und Beschriftungen in Gold.
                                    Gleicher Farbton wie --c-accent, nur dunkler.
                                    5,2:1 auf Weiss, 4,8:1 auf Grau, 4,6:1 auf
                                    Hellblau - besteht auf allen drei Flaechen.
                                    Der Vorgaenger #8A7420 kam auf Grau nur auf
                                    4,3:1 und fiel damit knapp durch. */
  --c-accent-xl:      #D6BB4C;   /* Marken-Gold für sehr große Schrift: die Zahlen
                                    im Vertrauensband und das Akzentwort in der
                                    Hauptüberschrift.
                                    Bewusste Entscheidung von Luca, 17.08. und 19.08.:
                                    Auf hellem Grund nur 1,9:1. Das liegt unter jeder
                                    Schwelle, auch unter den 3:1 für große fette
                                    Schrift. Vertretbar gehalten, weil es ausschließlich
                                    Schrift ab 34 px einfärbt und die Aussage nie allein
                                    an der Farbe hängt.
                                    Falls es doch zu blass wirkt: #AB9127 ist derselbe
                                    Farbton und erreicht 3,1:1. */

  /* === BILDSCHIRMAUSSCHNITT ===
     Für Abbildungen, die ein Programmfenster darstellen. Bewusst
     eigene Werte statt der Markenpalette: Der Ausschnitt soll sich
     als Abbildung zu erkennen geben, nicht als Gestaltungsfläche. */
  --c-panel:        #161b22;   /* Fensterhintergrund */
  --c-panel-zeile:  #1c232c;   /* einzelne Zeile darin */
  --c-panel-rand:   #262d36;   /* Trennlinie */
  --c-panel-text:   #e8edf2;   /* Betreffzeile, 13,4:1 */
  --c-panel-muted:  #8b97a5;   /* Absender, 5,3:1 */
  --c-panel-schwach:#828e9d;   /* Uhrzeit, 4,6:1 */

  /* === BEWERTUNG ===
     Zwei Richtungen in der Marktradar-Vorschau. Je ein Ton für die
     Fläche und ein dunklerer für Text auf Weiß. */
  --c-positiv:      #3f7a5f;
  --c-positiv-ink:  #2f5c47;   /* 7,7:1 auf Weiß */
  --c-negativ:      #a8503a;
  --c-negativ-ink:  #8a412f;   /* 7,3:1 auf Weiß */

  /* === NEUTRALS === */
  --c-text:           #14181d;
  --c-text-muted:     #59636f;
  --c-text-invert:    #ffffff;
  --c-bg:             #ffffff;
  --c-bg-alt:         #f6f7f9;
  --c-border:         #e3e6ea;

  /* === TYPOGRAFIE ===
     IBM Plex Sans, selbst gehostet aus schrift/. Kein Aufruf an
     Google, also kein DSGVO-Thema. Die Systemschrift steht als
     Rückfallebene dahinter: Bis die Datei geladen ist – und falls
     sie ausfällt – bleibt die Seite lesbar.

     Verfügbare Schnitte: 400, 600, 700. Andere Werte lässt der
     Browser künstlich fetten, deshalb nutzt die Seite nur diese
     drei (siehe @font-face weiter unten). */
  --font-head: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, Arial, sans-serif;

  --fs-overline:      0.8125rem;
  --fs-h1:            clamp(2.125rem, 5.5vw, 3.5rem);
  --fs-h2:            clamp(1.625rem, 3.5vw, 2.375rem);
  --fs-h3:            clamp(1.125rem, 2vw, 1.3125rem);
  --fs-lead:          clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body:          1.0625rem;
  --fs-small:         0.9375rem;

  --lh-head:          1.12;
  --lh-body:          1.65;

  /* === LAYOUT === */
  --maxw:             1140px;
  --maxw-text:        62ch;
  /* Abstände, gestrafft am 19.08. Die Seite wirkte auf Rechner und
     Handy zu lang; der größte Anteil daran waren nicht die Texte,
     sondern die Luft zwischen den Sektionen.

     Vorherige Werte für den Fall, dass es zu eng wirkt:
       section 3.5/8vw/6.5rem · xl 3 · lg 2 · md 1.25 · sm 0.625 */
  --space-section:    clamp(2.5rem, 5.5vw, 4.5rem);
  --space-xl:         2.25rem;
  --space-lg:         1.625rem;
  --space-md:         1.125rem;
  --space-sm:         0.5rem;
  --radius:           12px;
  --radius-sm:        7px;
  --shadow-sm:        0 1px 2px rgba(20,24,29,.06);
  --shadow:           0 1px 3px rgba(20,24,29,.07), 0 10px 28px rgba(20,24,29,.05);
  --header-h:         72px;
}

/* ============================================================
   SCHRIFT – IBM Plex Sans, selbst gehostet
   ------------------------------------------------------------
   font-display: swap sorgt dafür, dass der Text sofort in der
   Systemschrift erscheint und still auf Plex umspringt, sobald
   die Datei da ist. Ohne das bliebe die Seite kurz leer.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("schrift/ibm-plex-sans-v23-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("schrift/ibm-plex-sans-v23-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("schrift/ibm-plex-sans-v23-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BASIS
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  margin: 0 0 var(--space-md);
  font-weight: 700;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }

/* Ein einzelnes Wort in der Hauptüberschrift farbig absetzen.
   <em> statt <span>, damit die Betonung auch ohne Farbe erhalten
   bleibt – etwa beim Vorlesen oder im Druck. Kursiv wird sie
   bewusst nicht, das würde die Zeile unruhig machen. */
h1 em {
  font-style: normal;
  color: var(--c-accent-xl);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

p  { margin: 0 0 var(--space-md); max-width: var(--maxw-text); }
p:last-child { margin-bottom: 0; }

a  { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

img, svg { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
li { margin-bottom: var(--space-sm); }

strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: 2px; }

/* Nur für Screenreader: sichtbar für Vorleseprogramme, unsichtbar
   für Sehende. Nicht display:none – das würde den Text auch für
   Screenreader entfernen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprunglink für Tastatur- und Screenreader-Nutzer */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-brand); color: var(--c-text-invert);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   LAYOUT-HELFER
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.section       { padding-block: var(--space-section); }
.section--alt  { background: var(--c-bg-alt); }
/* Dritte Fläche: sehr helles Blau aus der Markenfarbe. Gibt der
   Seite einen Rhythmus aus drei Tönen statt nur Weiß und Grau. */
.section--blau { background: var(--c-brand-light); }
.section--tight{ padding-block: clamp(2rem, 4vw, 3rem); }

/* ============================================================
   SYMBOLE
   ------------------------------------------------------------
   Alle Symbole sind Strichzeichnungen im selben Raster: 24×24,
   Strichstärke 1,5, keine Flächen. Sie übernehmen die Farbe des
   Elternelements (currentColor) und lassen sich damit über CSS
   steuern, ohne die Datei anzufassen.
   ============================================================ */

.icon {
  width: 26px; height: 26px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon--gross { width: 32px; height: 32px; }

.overline {
  display: block;
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--space-sm);
}

.lead { font-size: var(--fs-lead); color: var(--c-text-muted); max-width: 54ch; }

.section-head { max-width: 58ch; margin-bottom: var(--space-xl); }

/* Für Sektionen, in denen der Einleitungstext die ganze Spalte
   nutzen soll statt bei 58 Zeichen umzubrechen. */
.section-head--breit { max-width: none; }
.section-head--breit .lead { max-width: none; }

/* Spalten-Raster, bricht auf Mobil automatisch um */
.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* KEINE zwei Spalten auf dem Handy.
   Versucht am 19.08. und wieder verworfen: Berufsbezeichnungen wie
   "Produktionsmitarbeiter" brauchen mehr als eine halbe Handybreite.
   Zwei Spalten erzwingen entweder Wortrennung oder Querscrollen,
   beides ist schlechter als eine Spalte mehr Höhe.
   Die Höhe holen wir stattdessen über engere Karten, siehe unten. */

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0.95rem 1.75rem;
  font-family: inherit; font-size: var(--fs-body); font-weight: 600;
  line-height: 1.2;
  background: var(--c-brand); color: var(--c-text-invert);
  border: 1px solid var(--c-brand);
  border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover  { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent; color: var(--c-brand);
  border-color: var(--c-border);
}
.btn--ghost:hover { background: var(--c-brand-light); border-color: var(--c-brand); }

.btn--sm { padding: .6rem 1.1rem; font-size: var(--fs-small);
  /* 44 px ist das Mindestmaß für eine sichere Fingerfläche. Ohne
     diese Zeile kommt der Kopfzeilen-Knopf auf 43 px – die
     wichtigste Schaltfläche der Seite, gerade auf dem Handy. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

.btn-note {
  font-size: var(--fs-small); color: var(--c-text-muted);
  margin-top: var(--space-md); max-width: 46ch;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}

/* Logo – SVG mit currentColor, dadurch über CSS einfärbbar */
.logo {
  display: inline-flex; align-items: center;
  color: var(--c-text); text-decoration: none;
  flex: none;
}
.logo svg, .logo img {
  height: 42px; width: auto; display: block;
}
@media (max-width: 520px) {
  .logo svg, .logo img { height: 36px; }
}

/* Logo im Footer etwas kleiner und zurückgenommen */
.site-footer .logo { color: var(--c-text-muted); }
.site-footer .logo svg, .site-footer .logo img { height: 34px; }

.nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }

/* :not(.btn) ist wichtig – sonst überschreibt diese Regel die
   weiße Schrift des CTA-Buttons im Kopfbereich. */
.nav a:not(.btn) {
  font-size: var(--fs-small); font-weight: 400;
  color: var(--c-text-muted); text-decoration: none;
}
.nav a:not(.btn):hover { color: var(--c-text); }

.nav .btn { color: var(--c-text-invert); text-decoration: none; }
.nav .btn:hover { color: var(--c-text-invert); }

/* Navigation auf Mobil ausblenden – Hero-CTA reicht dort */
@media (max-width: 860px) {
  .nav--main { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
  background:
    radial-gradient(120% 80% at 85% 0%, var(--c-brand-light) 0%, transparent 60%),
    var(--c-bg);
}
/* Zwei Spalten ab 900 px: links die Aussage, rechts der Blick auf
   das, was beim Kunden ankommt. Darunter wird daraus eine Spalte,
   das Postfach rutscht unter die Schaltflächen.

   Grund für den Umbau: Als reine Textspalte ließ der Hero die halbe
   Bildschirmbreite leer stehen. Das wirkt nicht ruhig, sondern
   unfertig. */
.hero-raster { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
  .hero-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero h1 { max-width: 18ch; margin-bottom: var(--space-md); }
.hero .lead { margin-bottom: var(--space-lg); max-width: 46ch; }

/* ============================================================
   STANDORT UNTER DER BUCHUNG
   ------------------------------------------------------------
   Text und Kartenausschnitt nebeneinander, darunter über die
   volle Breite das Teambild als Abschluss der Seite.

   Die Karte ist ein Bild, keine Einbettung. Eine eingebettete
   Karte würde beim Seitenaufruf Daten an Google senden und damit
   eine Einwilligung nötig machen – und den Cookie-Banner
   zurückholen, den die Seite bewusst nicht hat.
   ============================================================ */

.standort {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  align-items: center;
}
@media (min-width: 760px) {
  .standort { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .standort { align-items: start; }
}

.standort-text h3 { margin-bottom: .4rem; }
.standort-text p { color: var(--c-text-muted); margin-bottom: var(--space-md); }
.standort-text address {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--c-text);
  line-height: 1.6;
}

.standort-karte { margin: 0; }
.standort-karte img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--c-bg-alt);
}
.standort-karte figcaption {
  margin-top: .35rem;
  font-size: .6875rem;
  color: var(--c-text-muted);
  text-align: right;
}

/* Teambild klein oben links über dem Text */
.standort-portrait {
  width: 100%;
  max-width: 15rem;
  /* 15 x 11 rem = 1,364:1 – genau das Seitenverhaeltnis, in dem
     team.jpg geschnitten ist. Deshalb schneidet cover hier nichts
     mehr weg und object-position ist ohne Wirkung. */
  height: 11rem;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  background: var(--c-bg-alt);
}

/* ============================================================
   DREI KREISE IN DER PROBLEM-SEKTION
   ------------------------------------------------------------
   Linienkreis  = alle Beschäftigten dieses Berufs an diesem Ort
   blauer Kreis = die, die für das Richtige wechseln würden
   goldener Punkt = die, die gerade aktiv suchen

   Sie erscheinen in dieser Reihenfolge. Beruf, Stadt und alle drei
   Größen wechseln – auch die Verhältnisse zueinander, damit die
   Grafik nicht mechanisch wirkt.

   Die Verhältnisse sind gestaltet, nicht gemessen. Deshalb steht
   keine Prozentzahl daran und die Grafik behauptet keine Statistik.
   ============================================================ */

.feld { max-width: 22rem; margin-inline: auto; width: 100%; }

.feld-titel {
  text-align: center;
  font-family: var(--font-head);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--c-brand);
  /* Platz für zwei Zeilen, sonst springt die Grafik bei langen
     Berufsbezeichnungen. */
  min-height: 2.7em;
  margin: 0 0 .3rem;
  max-width: none;
}

.feld-kreise { width: 100%; height: auto; display: block; overflow: visible; }
.feld-kreise circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  /* Grundwert ohne Verzoegerung: gilt beim Zusammenfallen am
     Rundenende, damit alle drei gemeinsam verschwinden.
     Der Aufbau unten ueberschreibt ihn samt Verzoegerung. */
  transition: transform .35s ease-in;
}
.k-alle  { fill: none; stroke: var(--c-brand-soft); stroke-width: 1.5; }
.k-offen { fill: var(--c-brand-soft); }
.k-sucht { fill: var(--c-accent); }

/* Nacheinander: erst der Rahmen, dann die Wechselbereiten,
   zuletzt die aktiv Suchenden. */
.feld-kreise.los circle { transform: scale(1); }
.feld-kreise.los .k-alle  { transition: transform .55s cubic-bezier(.2,.8,.3,1) 0s; }
.feld-kreise.los .k-offen { transition: transform .55s cubic-bezier(.2,.8,.3,1) 1.5s; }
.feld-kreise.los .k-sucht { transition: transform .55s cubic-bezier(.2,.8,.3,1) .7s; }

.feld-legende {
  list-style: none; padding: 0;
  margin: var(--space-md) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .3rem 1rem;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.feld-legende li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.feld-marke { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.feld-marke--alle  { border: 1.5px solid var(--c-brand-soft); }
.feld-marke--offen { background: var(--c-brand-soft); }
.feld-marke--sucht { background: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .feld-kreise circle { transform: scale(1); }
  .feld-kreise.los circle { transition: none; }
}

/* ============================================================
   ÜBER UNS: die beiden Personen
   ------------------------------------------------------------
   Zwei gleich gebaute Karten nebeneinander. Die Bilder sind
   4:5 zugeschnitten und tragen feste Maße im HTML, damit beim
   Laden nichts springt.
   ============================================================ */

/* Personen untereinander, je Zeile Bild links und Text rechts.
   Nicht nebeneinander: Zwei schmale Spalten zwingen den Fließtext
   in eine Schlucht von 20 Zeichen Breite. */
.team { display: grid; gap: var(--space-xl); }

.person {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 620px) {
  .person { grid-template-columns: 13rem minmax(0, 1fr); }
}

.person img {
  width: 100%; height: auto;
  max-width: 13rem;
  border-radius: var(--radius);
  background: var(--c-bg-alt);
}
.person h3 { margin: 0 0 .1rem; }
.person-text p:last-child { color: var(--c-text-muted); }
.person-rolle {
  font-size: var(--fs-small);
  color: var(--c-brand);
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
.person-punkte {
  list-style: none; padding: 0; margin: 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.person-punkte li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .3rem;
}
.person-punkte li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent);
}

/* ============================================================
   DEUTSCHLANDKARTE IM HERO
   ------------------------------------------------------------
   Umriss als einzelner Pfad, keine Bilddatei: skaliert verlustfrei,
   färbt sich über die Tokens mit und wiegt unter einem Kilobyte.

   Punkt und Beschriftung sind HTML, nicht SVG. Grund: So bleibt die
   Schriftgröße in Pixeln und wächst nicht mit der Karte mit – auf
   dem Handy bliebe sie sonst unlesbar klein.
   ============================================================ */

.karte { width: 100%; max-width: 20rem; margin-inline: auto; }
/* Nur die Zeichenfläche behält das Seitenverhältnis, damit der
   Punkt in Prozent darauf sitzen kann. */
.karte-flaeche-halter { position: relative; aspect-ratio: 300 / 400; }
.karte-flaeche { width: 100%; height: 100%; display: block; }
.karte-flaeche path {
  fill: var(--c-brand-light);
  stroke: var(--c-brand-soft);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Der aufleuchtende Punkt. Position setzt das Skript in Prozent. */
.karte-punkt {
  position: absolute;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
  pointer-events: none;
}
/* Ring, der einmal nach außen läuft */
.karte-punkt::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  opacity: 0;
}
.karte-punkt.an { animation: karte-punkt-an 3.4s ease-out forwards; }
.karte-punkt.an::after { animation: karte-ring 1.5s ease-out forwards; }

@keyframes karte-punkt-an {
  0%   { opacity: 0; transform: scale(.4); }
  12%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes karte-ring {
  0%   { opacity: .8; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* Die Beschriftung hängt am Punkt. Damit sie nicht aus der Karte
   läuft, rechnet das Skript ihre Breite aus und schiebt sie so weit
   zurück, dass sie innerhalb der Fläche bleibt. Passt sie in einer
   Zeile nicht, bricht sie um statt abgeschnitten zu werden.

   Frühere Fassung hing sie starr am Punkt mit fester Zeile – am
   Rechner ragte sie unsichtbar in die freie Spalte, auf dem Handy
   war sie abgeschnitten. */
.karte-schild {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - .5rem);
  text-align: center;
  font-family: var(--font-head);
  font-size: .8125rem; font-weight: 600;
  line-height: 1.3;
  color: var(--c-brand);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: .3rem .6rem;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
}
.karte-schild.an { animation: karte-schild-an 3.4s ease-out forwards; }

@keyframes karte-schild-an {
  0%   { opacity: 0; transform: translateY(4px); }
  14%  { opacity: 1; transform: translateY(0); }
  72%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-3px); }
}


@media (prefers-reduced-motion: reduce) {
  .karte-punkt.an, .karte-punkt.an::after, .karte-schild.an { animation: none; }
  .karte-punkt.an, .karte-schild.an { opacity: 1; }
}

/* ============================================================
   ABLAUF: Schritte links, Postfach rechts
   ============================================================ */

/* Die einspaltige Grundform braucht ebenfalls minmax(0, 1fr).
   Ohne Angabe legt der Browser eine auto-Spalte an, die sich am
   breitesten Inhalt bemisst - das Postfach-Bild schiebt die Seite
   dann ueber den Rand hinaus. */
.prozess-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 900px) {
  .prozess-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  /* Kein sticky: Das Postfach soll fest in seiner Zeile stehen und
     beim Scrollen nicht mitwandern. Stattdessen mittig zu den vier
     Schritten ausgerichtet. */
  .prozess-raster { align-items: center; }
  .prozess-bild { padding-top: 0; }
}
.prozess-bild .postfach { margin-top: 0; width: 100%; max-width: 27rem; margin-inline: auto; }

.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
}

/* ============================================================
   VERTRAUENS-BAND
   ------------------------------------------------------------
   Ruhiges Band unter dem Hero. Die Bewegung steckt allein in
   den Zahlen (siehe Skript in index.html), das Band selbst
   steht still – zwei gleichzeitige Bewegungen würden sich
   gegenseitig aufheben.
   ============================================================ */

/* Hell und ruhig wie der Rest der Seite. Die Wirkung kommt aus der
   Typografie – die Zahlen sind die größte Schrift der Seite nach der
   Überschrift –, nicht aus einer Farbfläche. Ein einzelnes dunkles
   Band ohne Wiederholung liest sich als Ausrutscher. */
.trust-band {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Drei Kacheln: auf schmalen Bildschirmen untereinander,
   ab 700 px nebeneinander. */
.trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--maxw);
}
@media (min-width: 700px) {
  .trust { grid-template-columns: repeat(3, 1fr); }
}

.trust li {
  margin: 0;
  padding: clamp(1rem, 2.2vw, 1.4rem) var(--space-md);
  text-align: center;
  /* Feine Trennlinien statt Rahmen – sie sollen gliedern,
     nicht Kästen bauen */
  border-bottom: 1px solid var(--c-border);
}
.trust li:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .trust li { border-bottom: 0; border-right: 1px solid var(--c-border); }
  .trust li:last-child { border-right: 0; }
}

/* ============================================================
   ZÄHLWERK
   ------------------------------------------------------------
   Jede Ziffer sitzt in einem Fenster mit fester Höhe. Darin
   liegt eine Spalte aus 0–9 (mehrfach), die per transform nach
   oben fährt, bis die Zielziffer im Fenster steht – wie bei
   einem mechanischen Zähler.

   Ohne JavaScript bleibt der Endwert als normaler Text stehen:
   Das Skript baut die Walzen erst zur Laufzeit.
   ============================================================ */

.trust strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-accent-xl);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: .3rem;
}

/* Zustand mit aufgebautem Zählwerk */
.trust strong.walze {
  display: flex;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  /* Höhe = eine Ziffernzeile. Wird vom Skript in Pixeln gesetzt,
     damit Fenster und Walzenschritt exakt zusammenpassen. */
}

.walze-fenster {
  overflow: hidden;
  width: .62em;
}
.walze-spur {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.walze-spur > span {
  display: block;
  text-align: center;
}
.walze-suffix { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .walze-spur { transition: none !important; }
}

/* Auftritt: Die drei Kacheln erscheinen leicht versetzt, sobald das
   Band ins Bild kommt. Der Goldstrich zeichnet sich dabei von der
   Mitte nach außen. Ohne Skript sichtbar, ohne Animation nutzbar –
   die Klasse wird per JS gesetzt, der Ruhezustand ist "sichtbar". */
.trust-band.animiert .trust li {
  opacity: 0;
  transform: translateY(14px);
}
.trust-band.animiert.los .trust li {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.trust-band.animiert.los .trust li:nth-child(2) { transition-delay: .09s; }
.trust-band.animiert.los .trust li:nth-child(3) { transition-delay: .18s; }

.trust-band.animiert .trust li::before { transform: scaleX(0); }
.trust-band.animiert.los .trust li::before {
  transform: scaleX(1);
  transition: transform .5s cubic-bezier(.2,.7,.3,1) .25s;
}
.trust-band.animiert.los .trust li:nth-child(2)::before { transition-delay: .34s; }
.trust-band.animiert.los .trust li:nth-child(3)::before { transition-delay: .43s; }

@media (prefers-reduced-motion: reduce) {
  .trust-band.animiert .trust li,
  .trust-band.animiert .trust li::before {
    opacity: 1; transform: none; transition: none;
  }
}

/* Kurzer Strich in Markenblau über jeder Zahl – er fasst die Kachel
   nach oben ein und setzt einen Gegenpunkt zum goldenen Zahlwert. */
.trust li::before {
  content: "";
  display: block;
  width: 34px; height: 4px;
  margin: 0 auto .75rem;
  border-radius: 2px;
  background: var(--c-brand);
}

/* ============================================================
   KARTEN & INHALTS-BAUSTEINE
   ============================================================ */

.card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  /* Beim Überfahren hebt sich die Karte leicht an. Der Effekt ist
     bewusst klein: Man nimmt ihn kaum bewusst wahr, aber die Seite
     fühlt sich dadurch lebendig an statt wie ein Ausdruck. */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--c-brand-soft);
  }
}
.card h3 { margin-bottom: var(--space-sm); }
.card p  { color: var(--c-text-muted); margin-bottom: 0; }

/* Symbol über der Kartenüberschrift */
.card .icon {
  color: var(--c-brand);
  margin-bottom: var(--space-md);
}

.section--alt .card,
.section--blau .card { background: var(--c-bg); }

/* ============================================================
   PROZESS ALS ZEITSTRAHL
   ------------------------------------------------------------
   Eine durchgehende Linie verbindet die vier Schritte. Beim
   Scrollen wird jeder Schritt aktiv: Die Ziffer füllt sich,
   der Text tritt aus dem Grau heraus. Einmal aktiv, bleibt
   aktiv – so entsteht beim Weiterscrollen der Eindruck eines
   Weges, der zurückgelegt wird.
   ============================================================ */

.steps {
  list-style: none; padding: 0; margin: 0;
  counter-reset: step;
  position: relative;
}
/* Die durchgehende Linie. Sie sitzt in der Mitte der Ziffern
   und endet an der letzten, statt ins Leere zu laufen. */
.steps::before {
  content: "";
  position: absolute;
  left: 1.125rem; top: 2.5rem; bottom: 2.5rem;
  width: 2px;
  background: var(--c-border);
}

.steps > li {
  counter-increment: step;
  position: relative;
  /* minmax(0, 1fr) statt 1fr: Ohne das schrumpft die Textspalte nie
     unter ihr laengstes Wort. Bei Woertern wie "Marktanalyse-Termin"
     wird das Raster dadurch breiter als der Bildschirm, und die ganze
     Seite bekommt Querlauf. Gefunden am 10.09.2026 auf dem iPhone. */
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-md);
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  font-family: var(--font-head); font-weight: 700; font-size: .9375rem;
  color: var(--c-brand);
  background: var(--c-brand-light);
  box-shadow: 0 0 0 4px var(--c-bg-alt);   /* stanzt die Linie frei */
  border-radius: 50%;
  transition: background .45s ease, color .45s ease, transform .45s ease;
}

/* Aktiver Schritt: gefüllte Ziffer, Text in voller Farbe */
.steps > li.aktiv::before {
  background: var(--c-brand);
  color: var(--c-text-invert);
  transform: scale(1.08);
}
.steps > li.aktiv .schritt-text p { color: var(--c-text); }

.steps h3 { margin-bottom: .35rem; }
.steps p  { color: var(--c-text-muted); margin: 0; transition: color .45s ease; }

/* Problem-Sektion: Text links, Kreisgrafik rechts.
   Gleicher Bruchpunkt und gleiche minmax(0, …)-Schreibweise wie bei
   Hero und Prozess – ohne minmax(0, …) schrumpft eine Spalte nie
   unter ihr laengstes Wort und die Seite bekommt Querlauf.
   align-items: center haelt die Kreise auf Hoehe der Textmitte. */
.problem-raster { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
  .problem-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.problem-text > *:last-child { margin-bottom: 0; }

/* Aufzählung mit Kosten-/Schmerzpunkten */
.pain { list-style: none; padding: 0; }
.pain li {
  position: relative; padding-left: 1.75rem;
  color: var(--c-text-muted); max-width: var(--maxw-text);
}
.pain li::before {
  content: ""; position: absolute; left: .35rem; top: .7em;
  width: 8px; height: 2px; background: var(--c-accent);
}
.pain strong { color: var(--c-text); }

/* Hervorgehobener Abgrenzungssatz */
.statement {
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg);
  border-left: 3px solid var(--c-brand);
  background: var(--c-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-lead);
  max-width: 62ch;
}
.section--alt .statement { background: var(--c-bg); }

/* Platzhalter für noch nicht gelieferte Inhalte.
   Fällt bewusst auf – damit nichts Halbfertiges live geht. */
.todo {
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 10px,
    rgba(20,24,29,.015) 10px, rgba(20,24,29,.015) 20px);
}
.todo strong { color: var(--c-text); display: block; margin-bottom: .35rem; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  padding-block: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Drei Spalten: Marke, Kontakt, Branchen. Bricht auf schmalen
   Bildschirmen automatisch untereinander um. */
.footer-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-lg) var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--c-border);
}
/* Gilt für h2 und h3: Die Überschriften sind seit der Korrektur der
   Gliederung h2. Beide Stufen stehen hier, damit die Regel auch dann
   greift, wenn sich die Ebene noch einmal ändert. */
.footer-spalte h2,
.footer-spalte h3 {
  font-size: var(--fs-overline);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.footer-spalte ul { list-style: none; padding: 0; margin: 0; }
.footer-spalte li { margin-bottom: .35rem; }

/* Auf dem Handy stehen die Links im Fußbereich nur 34 px auseinander.
   Das ist für einen Daumen zu dicht – wer daneben trifft, landet auf
   dem Impressum statt auf den Referenzen. */
@media (max-width: 699px) {
  .footer-spalte li { margin-bottom: 0; }
  .footer-spalte li a { display: block; padding-block: .55rem; }
  .footer-fuss nav { gap: var(--space-md) var(--space-lg); }
  .footer-fuss nav a { padding-block: .35rem; }
}
.footer-spalte p  { margin-bottom: .35rem; max-width: 34ch; }

.footer-marke .logo { margin-bottom: var(--space-sm); }
.footer-marke p { color: var(--c-text-muted); }

/* Untere Zeile: Urheberrecht und Rechtstexte */
.footer-fuss {
  display: flex; flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-md);
}
.footer-fuss nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-fuss p { margin: 0; }

.site-footer a { color: var(--c-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-brand); text-decoration: underline; }

/* ============================================================
   LOGO-LEISTE (Social Proof)
   ============================================================ */

.logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  list-style: none; padding: 0; margin: 0;
}
.logos li { margin: 0; }
.logos img {
  height: clamp(28px, 4vw, 40px); width: auto;
  /* Logos entfärben, damit sie sich unterordnen und nicht mit
     der Markenfarbe konkurrieren. Bei Hover volle Farbe. */
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}
.logos img:hover { filter: none; opacity: 1; }

/* Sehr breite Logos niedriger setzen. Bei gleicher Höhe wirkt ein
   Logo im Verhältnis 10:1 fünfmal so groß wie ein quadratisches und
   erschlägt die Reihe. Ausgeglichen wird nach Fläche, nicht nach Höhe. */
.logos img.logo-breit { height: clamp(16px, 2.2vw, 22px); }

/* Kundenwand als ein einfarbiges Bild. Sie passt immer vollständig
   auf den Schirm, ohne seitliches Schieben. Der Preis dafür: Auf dem
   Handy werden die Firmennamen klein. Sie wirkt dort als Beleg für
   die Menge, nicht als Liste zum Lesen.

   Die Logos sind in Markenblau eingefärbt, damit die Wand ruhig
   bleibt und nicht mit vierzig Fremdfarben gegen die Seite arbeitet. */
/* ============================================================
   KUNDENLOGOS ALS LAUFBAND
   ------------------------------------------------------------
   Zwei Reihen, die gegeneinander laufen. Jede Spur enthaelt ihre
   Logos zweimal und wandert um 50 % ihrer eigenen Breite – nach
   einem Durchlauf steht wieder exakt derselbe Bildinhalt da, die
   Schleife ist unsichtbar.

   Die beiden Reihen haben absichtlich verschiedene Dauern (52 s
   und 61 s). Bei gleicher Dauer laufen sie synchron und das Auge
   erkennt das Muster.

   Die Logos sind niedrig aufgeloest, weil sie aus einer flachen
   Vorlage geschnitten sind. Deshalb werden sie hier verkleinert
   dargestellt, nie hochgerechnet: max-height und max-width statt
   fester Groesse.
   ============================================================ */

.logo-band {
  position: relative;
  overflow: hidden;

  /* Volle Fensterbreite mit feiner Linie oben und unten. */
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--space-lg);

  /* Flex-Spalte, nicht Grid: Bei display:grid bemisst sich die Spalte
     am max-content der Logospur, also an mehreren tausend Pixeln. */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Weiche Kanten links und rechts als zwei aufgelegte Verlaeufe.
   Frueher stand hier mask-image. Das ist eleganter, kann aber in
   WebKit ganze Elemente verschwinden lassen, sobald ein Kind per
   will-change auf eine eigene Ebene gehoben wird – genau das war
   hier der Fall. Zwei Verlaufsflaechen koennen nichts ausblenden,
   sie liegen nur darueber. */
.logo-band::before,
.logo-band::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(2.5rem, 7vw, 6rem);
  z-index: 2;
  pointer-events: none;
}
.logo-band::before {
  left: 0;
  background: linear-gradient(to right, var(--c-bg), rgba(255,255,255,0));
}
.logo-band::after {
  right: 0;
  background: linear-gradient(to left, var(--c-bg), rgba(255,255,255,0));
}

.logo-reihe {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  /* Feste Mindesthoehe: Sollten die Bilder einmal nicht laden,
     bleibt die Reihe trotzdem stehen statt auf null zu fallen. */
  min-height: 2.25rem;
}

.logo-spur {
  display: flex;
  align-items: center;
  width: max-content;

  /* KEIN gap mehr. Der Abstand sitzt jetzt als Innenabstand in den
     Bildern selbst.

     Warum: Mit gap ist die Spur bei zwei Durchlaeufen 2xW + EINE
     Luecke breit. Die Verschiebung um -50 % landet dann eine halbe
     Luecke daneben - und genau dort klaffte der weisse Streifen.
     Ohne gap ist die Spur exakt 2xW breit, und -50 % trifft auf
     den Punkt. (Gefunden am 10.09.2026 auf dem iPhone.) */

  /* Eigene Ebene fuer die Grafikeinheit. Ohne das ruckelt eine so
     breite Spur auf dem Handy, weil der Browser bei jedem Bild neu
     zeichnet statt nur zu verschieben.
     Bewusst translateZ(0) und nicht will-change: transform - das
     hatte am 27.08. in WebKit die ganze Leiste verschwinden lassen. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Die Leiste laeuft erst los, wenn die Seite fertig geladen ist.
   Das Skript setzt dafuer die Klasse .laeuft auf .logo-band.

   Grund: Beim ersten Aufruf ist der Browser noch mit Schriften,
   Bildern und den Scroll-Beobachtern beschaeftigt. Startet die
   Bewegung mittendrin, ruckelt sie sichtbar - beim zweiten Aufruf
   nicht mehr, weil dann alles im Zwischenspeicher liegt.
   (Beobachtet am 10.09.2026 auf dem iPhone.)

   Wichtig: Ohne die Klasse steht die Leiste nur still, sie ist NICHT
   unsichtbar. Faellt das Skript aus, sieht man weiterhin alle Logos.

   Negative Verzoegerung: Die Spur startet mittendrin statt am Anfang,
   sonst laeuft sie aus dem Leeren herein. */
.logo-band.laeuft .logo-spur--links  { animation: logo-links  52s linear infinite; animation-delay: -13s; }
.logo-band.laeuft .logo-spur--rechts { animation: logo-rechts 61s linear infinite; animation-delay: -31s; }

/* -50 % ist genau eine Kopie der Logoliste, deshalb schliesst die
   Schleife nahtlos. */
@keyframes logo-links  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes logo-rechts { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

.logo-spur img {
  /* content-box, damit der Innenabstand NEBEN dem Bild liegt und
     nicht von max-width abgezogen wird. Sonst schrumpfen die Logos. */
  box-sizing: content-box;
  padding-inline: clamp(.875rem, 2vw, 1.625rem);
  max-height: 2.125rem;
  max-width: 8.5rem;
  width: auto; height: auto;
  flex: none;
  opacity: .68;
  transition: opacity .25s ease;
}

/* Sehr breite Logos duerfen mehr Breite nehmen. Das EZ-Zeichen hat
   ein Seitenverhaeltnis von 10:1; mit der normalen Deckelung auf 8,5 rem
   waere es nur rund 14 px hoch und damit unlesbar.
   Eigener Name, weil .logo-breit bereits in der Referenzen-Sektion
   vergeben ist. */
.logo-spur img.logo-xbreit { max-width: 11rem; }

.logo-band:hover .logo-spur { animation-play-state: paused; }
.logo-spur img:hover { opacity: 1; }

@media (max-width: 640px) {
  .logo-spur img {
    max-height: 1.75rem; max-width: 7rem;
    padding-inline: .75rem;   /* ersetzt das frueherte gap: 1.5rem */
  }
  .logo-spur img.logo-xbreit { max-width: 9rem; }
  .logo-reihe { min-height: 1.875rem; }

  /* Auf dem Handy langsamer. Weniger Pixel je Bild bedeutet weniger
     sichtbares Stocken, wenn das Geraet mal einen Takt auslaesst. */
  .logo-band.laeuft .logo-spur--links  { animation-duration: 72s; }
  .logo-band.laeuft .logo-spur--rechts { animation-duration: 84s; }
}

/* Ohne Bewegung: beide Reihen stehen still und umbrechen als Block.
   Der doppelte zweite Durchlauf wird ausgeblendet. */
@media (prefers-reduced-motion: reduce) {
  .logo-spur {
    animation: none;
    flex-wrap: wrap; justify-content: center;
    width: auto; gap: 1.25rem 2rem;
    transform: none;          /* keine eigene Ebene noetig, es bewegt sich nichts */
  }
  /* Hier wieder echtes gap, deshalb muss der Innenabstand raus -
     sonst stehen die Logos doppelt so weit auseinander. */
  .logo-spur img { padding-inline: 0; }
  .logo-spur img[aria-hidden="true"] { display: none; }
  .logo-band::before, .logo-band::after { display: none; }

  /* Wichtig: Sobald die Spur umbricht, darf die Reihe nicht mehr
     klipsen. Sonst ist alles ab der zweiten Zeile weggeschnitten. */
  .logo-reihe { overflow: visible; min-height: 0; }
  .logo-band { padding-inline: clamp(1.25rem, 4vw, 2rem); }
}

/* ============================================================
   FEHLERSEITE (404)
   ------------------------------------------------------------
   Eigene Regeln statt geborgter Startseiten-Bausteine. Vorher
   nutzte 404.html .section-head und .hero-actions – beide sind
   linksbuendig und auf eine zweispaltige Sektion ausgelegt.
   Auf einer Seite ohne zweite Spalte sah das aus, als fehle
   rechts etwas.

   Eine Fehlerseite ist eine Sackgasse. Mittig gesetzt und
   senkrecht zentriert wirkt sie ruhig statt kaputt.
   ============================================================ */

/* Nur auf dieser Seite: Fusszeile nach unten druecken, damit sie
   auch bei wenig Inhalt am unteren Rand sitzt und nicht mitten
   im Bild schwebt. Deshalb an die body-Klasse gebunden und nicht
   global – sonst wirkt es auf allen Seiten. */
body.seite-404 {
  min-height: 100vh;
  min-height: 100svh;   /* iOS: ohne svh rechnet Safari die Adressleiste mit */
  display: flex;
  flex-direction: column;
}
body.seite-404 > main { flex: 1; }

.fehlerseite {
  display: flex;
  align-items: center;
  padding-block: var(--space-section);
}

.fehler-inhalt {
  text-align: center;
  max-width: 42rem;
}

/* Die grosse Zahl. Gold wie die Kennzahlen im Vertrauens-Band,
   damit die Seite zur uebrigen Bildsprache gehoert. Rein
   dekorativ und aria-hidden – der Kontrast spielt deshalb
   keine Rolle, die Information steht in der Ueberschrift. */
.fehler-zahl {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4.5rem, 15vw, 9rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--c-accent);
  margin-bottom: var(--space-md);
}

.fehlerseite h1 {
  max-width: 16ch;
  margin: 0 auto var(--space-md);
}

.fehlerseite .lead {
  margin: 0 auto var(--space-xl);
  max-width: 38ch;
}

.fehler-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
}

/* Die Wegweiser darunter. Trennpunkte kommen aus dem CSS, nicht
   aus dem Text: Beim Umbruch bleibt sonst ein einzelner Punkt
   am Zeilenanfang stehen. */
.fehler-wege {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .35rem .9rem;
  font-size: var(--fs-small);
}
.fehler-wege-frage { color: var(--c-text-muted); width: 100%; }
.fehler-wege a { color: var(--c-brand); }
.fehler-wege a + a::before {
  content: "·";
  color: var(--c-border);
  margin-right: .9rem;
}

@media (min-width: 560px) {
  /* Ab hier passt die Frage in dieselbe Zeile wie die Links. */
  .fehler-wege-frage { width: auto; }
}

@media (max-width: 559px) {
  .fehlerseite { padding-block: var(--space-xl); }
  .fehler-zahl { margin-bottom: var(--space-sm); }
  .fehlerseite .lead { margin-bottom: var(--space-lg); }
  /* Auf dem Handy volle Breite: zwei halbe Knoepfe nebeneinander
     sind auf 360 px unbedienbar. */
  .fehler-knoepfe { flex-direction: column; }
  .fehler-knoepfe .btn { width: 100%; }
  .fehler-wege { margin-top: var(--space-lg); }
}

/* ============================================================
   CASES
   ============================================================ */

.cases { display: grid; gap: var(--space-lg); }

.case {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  padding: clamp(1.1rem, 2.4vw, 1.65rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .case:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--c-brand-soft);
  }
}

/* Kopf des Case: Logo und Firmenname.
   Das Logo ist optional – fehlt es, trägt der Name allein. */
.case-head {
  display: flex; align-items: center; gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-border);
}
.case-head img {
  height: 38px; width: auto; flex: none;
  max-width: 150px; object-fit: contain;
}
/* Sehr breite Logos: Die Grenze von 150 px würde ein Logo im
   Verhältnis 10:1 auf 15 px Höhe stauchen. Diese Marken dürfen
   breiter laufen, behalten aber dieselbe Höhe wie alle anderen.
   Auf schmalen Schirmen begrenzt 100 % die Breite. */
.case-head img.logo-breit { max-width: min(400px, 100%); }

.case-head h3 { margin: 0; font-size: 1.1875rem; }

.case-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  list-style: none; padding: 0; margin: 0 0 var(--space-md);
}
.case-meta li {
  margin: 0;
  font-size: .8125rem; font-weight: 600;
  padding: .25rem .6rem;
  color: var(--c-brand);
  background: var(--c-brand-light);
  border-radius: 100px;
}

/* ============================================================
   MARKTRADAR-VORSCHAU
   ------------------------------------------------------------
   Ein Ausschnitt der echten Auswertung, bewusst ohne Zahlen:
   Skala und Faktoren zeigen, dass ein Werkzeug dahintersteht,
   das Gehaltsband und die Poolgröße bleiben dem Termin vorbehalten.

   Die Balken starten auf Breite 0 und wachsen, sobald der Kasten
   ins Bild kommt. Ohne Skript stehen sie sofort auf ihrem Wert.
   ============================================================ */

.radar {
  margin-top: var(--space-xl);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Gleicher Hover wie bei Karten, Fallbeispielen und Buchungsbox */
@media (hover: hover) {
  .radar:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--c-brand-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar { transition: box-shadow .2s ease, border-color .2s ease; }
  .radar:hover { transform: none; }
}

.radar-marke {
  font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-muted);
  margin: 0 0 .25rem;
}
.radar-titel {
  font-family: var(--font-head);
  font-size: 1.1875rem; font-weight: 600;
  margin: 0 0 .1rem;
}
.radar-zeile {
  font-size: var(--fs-small); color: var(--c-text-muted);
  margin: 0 0 var(--space-lg);
}

.radar-label {
  font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-text-muted);
  margin: 0 0 .5rem;
}

/* Fünfstufige Skala. Die erreichte Stufe wird per Skript gefärbt. */
.radar-skala {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem;
  list-style: none; margin: 0 0 .4rem; padding: 0;
}
.radar-skala > li {
  height: 7px; margin: 0;
  border-radius: 100px;
  background: var(--c-bg-alt);
  transition: background .4s ease;
}
.radar.los .radar-skala > li.ist { background: var(--c-accent); }

.radar-stufe {
  font-family: var(--font-head);
  font-size: 1.25rem; font-weight: 700;
  color: var(--c-accent-ink);
  margin: 0 0 var(--space-lg);
}

.radar-faktoren { list-style: none; margin: 0; padding: 0; }
.radar-faktoren > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  margin: 0 0 .7rem;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
@media (min-width: 620px) {
  .radar-faktoren > li {
    grid-template-columns: 13rem 1fr 5rem;
    align-items: center;
    gap: .75rem;
  }
}

.radar-bahn {
  display: block;
  height: 6px;
  background: var(--c-bg-alt);
  border-radius: 100px;
  overflow: hidden;
}
.radar-balken {
  display: block; height: 100%; width: 0;
  border-radius: 100px;
  background: var(--c-brand-soft);
}
.radar.los .radar-balken {
  transition: width .7s cubic-bezier(.3,.7,.3,1);
}

/* Zwei Farben, weil die Aussage zwei Richtungen hat. Beide nur als
   Fläche, nie als Textfarbe – deshalb reicht 3:1. */
.radar-faktoren > li.staerkt   .radar-balken { background: var(--c-positiv); }
.radar-faktoren > li.schwaecht .radar-balken { background: var(--c-negativ); }
.radar-urteil { font-size: .8125rem; }
@media (min-width: 620px) { .radar-urteil { text-align: right; } }
.radar-faktoren > li.staerkt   .radar-urteil { color: var(--c-positiv-ink); }
.radar-faktoren > li.schwaecht .radar-urteil { color: var(--c-negativ-ink); }

/* Zwei Beispielmaßnahmen unter den Faktoren. Sie zeigen, dass die
   Auswertung nicht bei der Diagnose stehen bleibt, sondern in
   konkrete Schritte mündet. Beide stammen aus dem echten Dokument. */
.radar-massnahmen {
  list-style: none; margin: 0; padding: 0;
}
.radar-massnahmen > li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: .1rem .5rem;
  align-items: start;
  margin: 0 0 .7rem;
  padding: .7rem .85rem;
  background: var(--c-bg-alt);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.radar-nr {
  font-family: var(--font-head);
  font-weight: 700;
  /* Nicht --c-brand-soft: das erreicht auf Weiß nur 4,44:1 und
     verfehlt die 4,5:1 für Fließtext knapp. --c-brand liegt bei
     7,39:1. Als Icon-Farbe bleibt das weichere Blau zulässig,
     dort gelten 3:1. */
  color: var(--c-brand);
}
.radar-massnahmen strong {
  display: block;
  color: var(--c-text);
  margin-bottom: .1rem;
}

.radar-fuss {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .radar-skala > li, .radar-balken { transition: none; }
}

/* ============================================================
   POSTFACH-VORSCHAU
   ------------------------------------------------------------
   Ein Bildschirmausschnitt, kein Farbband: Er zeigt, in welcher
   Form Bewerbungen beim Kunden ankommen. Dunkel, weil er ein
   Programmfenster darstellt und sich dadurch klar als Abbildung
   zu erkennen gibt.

   Ohne JavaScript stehen die drei Beispielzeilen einfach da.
   Das Skript ersetzt sie durch laufend einlaufende Zeilen und
   hält an, sobald der Ausschnitt aus dem Bild scrollt.
   ============================================================ */

.postfach {
  margin-top: var(--space-md);
  background: var(--c-panel);
  border-radius: var(--radius);
  padding: .875rem;
  max-width: 30rem;
  overflow: hidden;
}

.postfach-kopf {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .25rem .75rem;
  border-bottom: 1px solid var(--c-panel-rand);
}
.postfach-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-brand-soft);
  flex: none;
}
.postfach-titel {
  font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-panel-muted);
}
.postfach-liste {
  list-style: none; margin: 0; padding: .75rem 0 0;
  display: flex; flex-direction: column; gap: .5rem;
  /* Feste Höhe: Sonst springt die Seite bei jeder neuen Zeile.
     Platz für vier Zeilen. */
  min-height: 13.5rem;
}
.postfach-liste > li {
  display: flex; align-items: flex-start; gap: .625rem;
  margin: 0;
  background: var(--c-panel-zeile);
  border-radius: var(--radius-sm);
  padding: .625rem .75rem;
}

.postfach-marke {
  width: 26px; height: 26px; flex: none;
  border-radius: 6px;
  background: var(--c-brand);
  color: var(--c-text-invert);
  font-size: .6875rem; font-weight: 600;
  display: grid; place-items: center;
}
.postfach-text { flex: 1; min-width: 0; }
.postfach-text strong {
  display: block;
  font-size: .8125rem; font-weight: 400;
  color: var(--c-panel-text);
  /* Lange Stellenbezeichnungen kürzen statt umbrechen, damit die
     Zeilenhöhe gleich bleibt und die Liste nicht springt. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postfach-text span {
  display: block;
  font-size: .6875rem; letter-spacing: .04em;
  color: var(--c-panel-muted);
}
.postfach-zeit {
  flex: none;
  /* #6b7787 kam nur auf 3,5:1 und lag damit unter der Schwelle */
  font-size: .6875rem; color: var(--c-panel-schwach);
}

/* Einlaufende Zeile: von oben herein und leicht aufblenden */
.postfach-liste > li.neu {
  opacity: 0;
  transform: translateY(-8px);
}
.postfach-liste > li.eingelaufen {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .postfach-liste > li.neu { opacity: 1; transform: none; }
  .postfach-liste > li.eingelaufen { transition: none; }
}

/* ============================================================
   WEITERE REFERENZEN
   ------------------------------------------------------------
   Die letzten beiden Fallbeispiele stehen zugeklappt. Grund: Fünf
   hintereinander sind eine lange Strecke, ab dem dritten liest sie
   kaum jemand. Wer mehr sehen will, klappt auf.

   Native <details>: funktioniert ohne JavaScript, ist mit der
   Tastatur bedienbar und wird von Vorleseprogrammen als aufklappbar
   angekündigt.
   ============================================================ */

.mehr-cases { margin-top: var(--space-lg); }

.mehr-cases > summary {
  display: inline-flex; align-items: center; gap: .5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--c-brand);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: .7rem 1.1rem;
  transition: border-color .2s ease, background .2s ease;
}
/* Das Standard-Dreieck von Safari und Chrome abschalten,
   wir setzen unser eigenes Zeichen dahinter. */
.mehr-cases > summary::-webkit-details-marker { display: none; }

.mehr-cases > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.mehr-cases[open] > summary::after { transform: translateY(1px) rotate(225deg); }

@media (hover: hover) {
  .mehr-cases > summary:hover {
    border-color: var(--c-brand-soft);
    background: var(--c-bg-alt);
  }
}

/* Abstand zwischen Schaltfläche und den aufgeklappten Karten */
.mehr-cases-inhalt {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
  .mehr-cases > summary,
  .mehr-cases > summary::after { transition: none; }
}

/* ============================================================
   FALLBEISPIELE ALS WEG
   ------------------------------------------------------------
   Die drei Schritte stehen untereinander an einer Linie:
   Ausgangslage, Maßnahme, Ergebnis. Der letzte Punkt ist eine
   Pfeilspitze statt eines Kreises. Damit ist sichtbar, dass das
   Ergebnis aus den beiden Schritten davor folgt und nicht
   daneben steht.

   Bewusst eine <ol>: Die Reihenfolge ist Teil der Aussage.
   Vorleseprogramme kündigen sie dann als nummerierte Liste an.
   ============================================================ */

.case-body { list-style: none; margin: 0; padding: 0; }

.case-block {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-lg) 2.1rem;
}
.case-block:last-child { padding-bottom: 0; }

/* Punkt am Anfang jedes Schritts */
.case-block::before {
  content: "";
  position: absolute;
  left: 0; top: .28em;
  width: 11px; height: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-border);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

/* Der Schritt, auf den der Leser gerade schaut, füllt sich.
   Beim Weiterscrollen gibt er die Markierung wieder ab, deshalb
   ist der Übergang in beide Richtungen animiert. */
.case-block.aktiv::before {
  background: var(--c-brand);
  border-color: var(--c-brand);
  transform: scale(1.35);
}
.case-block p { transition: color .35s ease; }
.case-block:not(.aktiv) p { color: var(--c-text-muted); }

/* Verbindungslinie zum nächsten Schritt.
   Sie startet unter dem Punkt und läuft bis zum Blockende. */
.case-block:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px; top: calc(.28em + 11px);
  bottom: 0;
  width: 1px;
  background: var(--c-border);
  transform-origin: top center;
}

/* Der letzte Schritt bekommt statt des Punktes eine Pfeilspitze.
   Sie entsteht aus zwei Rahmenkanten eines gedrehten Quadrats. */
.case-result::before {
  width: 13px; height: 13px;
  left: -1px; top: .12em;
  border: 0;
  border-right: 2px solid var(--c-border);
  border-bottom: 2px solid var(--c-border);
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}
.case-result.aktiv::before {
  border-right-color: var(--c-brand);
  border-bottom-color: var(--c-brand);
  /* Drehung muss mitgeschrieben werden, sonst hebt die Skalierung
     die Pfeilform auf. */
  transform: rotate(45deg) scale(1.2);
}

.case-block h4 {
  font-family: var(--font-head);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 .4rem;
}
.case-block p { margin: 0; max-width: none; }

/* Das Ergebnis sitzt in einer eigenen Fläche, damit es sich vom
   Text darüber abhebt, ohne die Schrift zu vergrößern. */
.case-result {
  margin-top: .2rem;
}
.case-result > h4,
.case-result > p {
  background: var(--c-brand-light);
  padding-inline: var(--space-md);
}
.case-result > h4 {
  color: var(--c-brand);
  /* Nur die Beschriftung waechst, der Ergebnistext bleibt auf
     Fliesstextgroesse. Sonst schwillt der ganze Kasten an. */
  font-size: .9375rem;
  padding-top: var(--space-md);
  padding-bottom: .35rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  /* Kein Aussenabstand: Ueberschrift und Text sind zwei Elemente mit
     derselben Flaeche. Jeder Abstand dazwischen reisst einen Spalt in
     den Kasten, der wie eine Trennlinie aussieht. */
  margin-bottom: 0;
}
.case-result > p {
  color: var(--c-text);
  padding-bottom: var(--space-md);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ---- Auftritt beim Hereinscrollen ----
   Punkte setzen sich, Linien wachsen nach unten, die Pfeilspitze
   erscheint zuletzt. Ruhezustand ohne Skript ist "fertig sichtbar",
   die Klasse .los wird erst per JS gesetzt. */
.case.animiert .case-block::before { opacity: 0; }
.case.animiert .case-block:not(:last-child)::after { transform: scaleY(0); }

.case.animiert.los .case-block::before {
  opacity: 1;
  transition: opacity .3s ease;
}
.case.animiert.los .case-block:not(:last-child)::after {
  transform: scaleY(1);
  transition: transform .45s cubic-bezier(.4,.5,.3,1);
}
.case.animiert.los .case-block:nth-child(2)::before { transition-delay: .45s; }
.case.animiert.los .case-block:nth-child(2)::after  { transition-delay: .55s; }
.case.animiert.los .case-result::before             { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .case-block::before,
  .case-result::before,
  .case-block p { transition: none; }
  .case.animiert .case-block::before { opacity: 1; }
  .case.animiert .case-block:not(:last-child)::after { transform: none; }
  .case.animiert.los .case-block::before,
  .case.animiert.los .case-block::after { transition: none; }
}


.case-quote {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  font-style: italic;
}
.case-quote cite { display: block; font-style: normal; font-weight: 600; margin-top: .35rem; color: var(--c-text); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.quotes { display: grid; gap: var(--space-lg); }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, 1fr); } }

.quote {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.quote blockquote {
  margin: 0; font-size: var(--fs-body); color: var(--c-text);
}
.quote blockquote p { max-width: none; }
.quote blockquote p::before { content: "\201E"; }
.quote blockquote p::after  { content: "\201C"; }

.quote figcaption {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.quote figcaption strong { display: block; color: var(--c-text); }

/* ============================================================
   FAQ – aufklappbar, ohne JavaScript
   <details>/<summary> ist von Haus aus tastaturbedienbar
   und wird von Screenreadern korrekt angekündigt.
   ============================================================ */

.faq { border-top: 1px solid var(--c-border); }

.faq details {
  border-bottom: 1px solid var(--c-border);
}
.faq summary {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.8vw, 1.125rem); font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

/* Plus/Minus-Zeichen rechts */
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-head);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--c-brand);
  transition: transform .2s ease;
}
.faq details[open] > summary::after { content: "\2013"; }

.faq summary:hover { color: var(--c-brand); }

.faq .faq-answer {
  padding: 0 0 var(--space-md);
  max-width: 68ch;
}
.faq .faq-answer p { color: var(--c-text-muted); }
.faq .faq-answer p:last-child { margin-bottom: 0; }

/* ============================================================
   BERUFSLISTE in den Branchen-Karten
   ============================================================ */

/* Branchenkarte: Symbol und Name auf einer Zeile, gleich hoch.
   Das Symbol sitzt in der Überschrift, erbt damit deren Schriftgröße
   und wird in em bemessen – so bleiben beide immer gleich groß,
   egal wie die Überschrift skaliert. */
.branche-kopf {
  /* Symbol steht ueber der Ueberschrift, nicht daneben.
     Damit gibt es keine Ausrichtung zwischen Symbol und Text mehr,
     die schiefgehen kann. */
  display: block;
  margin-bottom: var(--space-sm);
}
.branche-kopf .icon {
  width: 30px; height: 30px;
  color: var(--c-brand-soft);
  stroke-width: 1.5;
  margin-bottom: .7rem;
}

/* Deutsche Komposita sind lang. Wenn es doch einmal eng wird, dürfen
   sie brechen, statt aus dem Kasten zu ragen. */
.jobs li, .branche-kopf {
  overflow-wrap: break-word;
}

/* Auf dem Handy sind die Branchenkarten enger gesetzt: kleineres
   Symbol, weniger Innenabstand, dichtere Liste. Das spart über vier
   Karten hinweg etwa eine halbe Bildschirmhöhe, ohne dass etwas
   umbricht oder getrennt werden muss. */
@media (max-width: 699px) {
  .grid--4 { gap: var(--space-md); }
  .grid--4 .card { padding: 1rem 1.1rem; }
  .branche-kopf .icon { width: 24px; height: 24px; margin-bottom: .45rem; }
  .branche-kopf { margin-bottom: .4rem; }
  .jobs-intro { margin-bottom: .3rem; }
  .jobs li { margin-bottom: .2rem; }
}

/* „u. a." über der Liste – zurückgenommen, es ordnet nur ein */
.jobs-intro {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  opacity: .75;
  margin: 0 0 .5rem;
}

.jobs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jobs li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .45rem;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.jobs li:last-child { margin-bottom: 0; }
.jobs li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent);
}

/* ============================================================
   CTA-BAND
   Schmaler Streifen zwischen zwei Sektionen. Bewusst kein
   eigener Abschnitt: Es soll den Lesefluss anbieten, nicht
   unterbrechen.
   ============================================================ */

.cta-band {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-brand-light);
}
.cta-band .wrap {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
}
.cta-band p {
  margin: 0; max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--c-text);
}
.cta-band .btn { flex: none; }
.cta-band small {
  display: block; margin-top: .3rem;
  font-size: var(--fs-small); font-weight: 400;
  color: var(--c-text-muted);
}

/* ============================================================
   MOBILER DAUER-CTA
   Nur auf schmalen Bildschirmen. Dort verschwindet der Kopf-
   bereich beim Scrollen aus dem Blick – ein Leser, der auf
   halber Strecke überzeugt ist, hätte sonst keinen Einstieg.
   Erscheint erst nach dem Hero (per JS), damit er nicht sofort
   über der Startansicht klebt.
   ============================================================ */

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  padding: .7rem clamp(1rem, 4vw, 1.25rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--c-border);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 700px) {
  .mobile-cta { display: block; }
  /* Platz schaffen, damit der Footer nicht verdeckt wird */
  body { padding-bottom: 76px; }
}

/* ============================================================
   MARKTANALYSE – was im Termin gezeigt wird
   ============================================================ */

.analysis {
  display: grid; gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Seit die Texte je ein Satz sind, passen zwei Spalten schon deutlich
   früher. Das spart auf dem Handy drei Bildschirmhöhen. */
@media (min-width: 600px) { .analysis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.analysis-item {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--c-border);
}
/* Muss denselben Umbruchpunkt haben wie das Raster darüber, sonst
   stehen zwei Spalten ohne Trennlinie dazwischen. */
@media (min-width: 600px) {
  .analysis-item:nth-child(odd) { border-right: 1px solid var(--c-border); }
}
.analysis-item:last-child { border-bottom: 0; }
@media (hover: hover) {
  .analysis-item { transition: background .2s ease; }
  .analysis-item:hover { background: var(--c-brand-light); }
}

.analysis-item h3 {
  font-size: 1rem; margin-bottom: .4rem;
  display: flex; gap: .65rem;
  line-height: 1.2;
  /* Nicht zentrieren: Auf schmalen Schirmen brechen diese
     Überschriften um. Bei align-items:center schwebte das Symbol
     dann zwischen beiden Zeilen statt neben der ersten. */
  align-items: flex-start;
}
.analysis-item .icon {
  width: 1.35em; height: 1.35em;
  color: var(--c-brand);
  flex: none;
  /* Hebt das Symbol auf die optische Mitte der ERSTEN Zeile. */
  margin-top: -.07em;
}
.analysis-item p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-small); max-width: none; }

.sources {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--c-brand-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  max-width: none;
}
.sources strong { color: var(--c-brand); }

/* ============================================================
   CALENDLY – Klick zum Laden (DSGVO)
   ------------------------------------------------------------
   Calendly wird NICHT beim Seitenaufruf geladen. Erst ein Klick
   des Nutzers lädt das Widget nach. Diese aktive Handlung ist
   die Einwilligung – deshalb braucht die Seite keinen globalen
   Cookie-Banner, solange sonst nichts Zustimmungspflichtiges
   eingebunden ist.
   ============================================================ */

.booking {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  padding: clamp(1.1rem, 2.4vw, 1.65rem);
  box-shadow: var(--shadow-sm);
  width: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Gleicher Hover wie bei Karten und Fallbeispielen. Nur auf Geräten
   mit echtem Zeiger: Auf Touchscreens bleibt der Zustand sonst nach
   dem Antippen kleben. */
@media (hover: hover) {
  .booking:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--c-brand-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .booking { transition: box-shadow .2s ease, border-color .2s ease; }
  .booking:hover { transform: none; }
}

.booking-intro h3 { margin-bottom: var(--space-sm); }
.booking-intro p  { color: var(--c-text-muted); max-width: 54ch; }

.booking-consent {
  margin: var(--space-md) 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: 62ch;
}
.booking-consent a { color: var(--c-brand); }

.booking-embed { margin-top: var(--space-md); }

/* Calendly öffnet als Overlay über der Seite (initPopupWidget).
   Dadurch entfällt die feste Einbettungshöhe – und damit das
   Scrollen innerhalb eines Scrollbereichs. Das Overlay nutzt
   automatisch die volle Fensterhöhe.
   Das Aussehen des Overlays bringt Calendly selbst mit; wir
   sorgen nur dafür, dass es über dem klebenden Kopfbereich liegt. */
.calendly-overlay { z-index: 9999 !important; }

/* Ladezustand am Button */
#load-calendly[disabled] {
  opacity: .7;
  cursor: progress;
}

.booking-fallback {
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ============================================================
   RECHTSTEXT-SEITEN (Impressum, Datenschutz, AGB)
   Schmale Lesespalte, klare Gliederung, viel Weißraum.
   Rechtstexte werden überflogen, nicht gelesen – Struktur
   ist hier wichtiger als Gestaltung.
   ============================================================ */

.legal { padding-block: var(--space-xl) var(--space-section); }

.legal .wrap { max-width: 780px; }

.legal h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--space-sm); }

.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
}
.legal h2:first-of-type { margin-top: var(--space-lg); }

.legal h3 {
  font-size: 1.0625rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.legal p, .legal li { max-width: none; font-size: var(--fs-small); }
.legal p { color: var(--c-text-muted); }
.legal li { color: var(--c-text-muted); }
.legal strong { color: var(--c-text); }

.legal address {
  font-style: normal;
  color: var(--c-text);
  margin-bottom: var(--space-md);
}

.legal dl { margin: 0 0 var(--space-md); font-size: var(--fs-small); }
.legal dt { font-weight: 600; color: var(--c-text); margin-top: var(--space-sm); }
.legal dd { margin: 0 0 0 0; color: var(--c-text-muted); }

.legal-meta {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 0;
}

.back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-small); color: var(--c-text-muted);
  text-decoration: none; margin-bottom: var(--space-lg);
}
.back-link:hover { color: var(--c-brand); }

/* Prüfhinweis für den Rechtskontakt – fällt bewusst auf.
   MUSS vor dem Go-Live aus allen Seiten entfernt werden. */
.review-note {
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg-alt);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  font-size: var(--fs-small);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.review-note::before {
  content: "Zu prüfen";
  display: block;
  font-weight: 600; font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-accent-ink);
  margin-bottom: .35rem;
}

/* ============================================================
   BEWEGUNG REDUZIEREN (Barrierefreiheit)
   ============================================================ */

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