/* ==========================================================================
   SALESCO — Onepager
   Design-System & Komponenten
   Brand: #6a1b2d (Bordeaux) · #000000 · #FFFFFF · Montserrat
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schrift — lokal ausgeliefert
   Montserrat als variable Schrift, gekuerzt auf den lateinischen Zeichensatz
   und auf den Bereich 400 bis 800 begrenzt. Damit werden alle verwendeten
   Schnitte aus zwei Dateien bedient und es geht keine Anfrage an Google.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --c-bordeaux:      #6a1b2d;
  --c-bordeaux-700:  #551423;
  --c-bordeaux-900:  #2e0a13;
  --c-bordeaux-500:  #8b2439;
  --c-bordeaux-300:  #a83a54;   /* gedecktes Bordeaux statt Rose */
  --c-bordeaux-100:  #f4e4e8;
  --c-bordeaux-050:  #fbf5f6;

  /* Neutral */
  --c-ink:      #12080b;
  --c-body:     #4a4045;
  /* Neun Stufen dunkler als vorher (#7d7176). Das Korn senkt die mittlere
     Helligkeit der hellen Flaeche von 251 auf 238 — damit fiel die
     gedaempfte Schrift von 4,53 auf 4,03 und damit unter die 4,5 aus
     WCAG AA. Mit diesem Wert liegt sie wieder bei 4,54. */
  --c-muted:    #74696e;
  --c-line:     #e8e2e4;
  --c-surface:  #ffffff;
  --c-canvas:   #fdfbfb;

  /* Glas */
  --glass-bg:      rgba(255, 255, 255, .62);
  --glass-bg-dark: rgba(255, 255, 255, .06);
  --glass-brd:     rgba(106, 27, 45, .10);
  --glass-brd-dark:rgba(255, 255, 255, .14);
  --glass-blur:    blur(20px) saturate(150%);

  /* Schatten */
  --sh-xs: 0 1px 2px rgba(18, 8, 11, .05);
  --sh-sm: 0 2px 8px rgba(18, 8, 11, .05), 0 1px 2px rgba(18, 8, 11, .04);
  --sh-md: 0 12px 32px -12px rgba(46, 10, 19, .16), 0 2px 8px rgba(46, 10, 19, .05);
  --sh-lg: 0 32px 64px -24px rgba(46, 10, 19, .28), 0 8px 20px -12px rgba(46, 10, 19, .12);
  --sh-glow: 0 16px 40px -12px rgba(106, 27, 45, .38);

  /* Typografie */
  --font: "Montserrat", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-eyebrow: clamp(.70rem, .68rem + .1vw, .78rem);
  --fs-body-s:  clamp(.875rem, .85rem + .12vw, .938rem);
  --fs-body:    clamp(.975rem, .93rem + .2vw, 1.075rem);
  --fs-lead:    clamp(1.06rem, .99rem + .34vw, 1.28rem);
  --fs-h3:      clamp(1.12rem, 1.05rem + .34vw, 1.35rem);
  /* Rubrik-Ueberschrift. Die Kurve trifft bei 1440 px genau die Groesse
     des Bewerbungsbereichs (43 px), der als Referenz dient, und bleibt
     auf schmalen Schirmen bei den bisherigen Werten. */
  --fs-h2:      clamp(1.95rem, 1.72rem + 1.09vw, 2.7rem);
  --fs-h1:      clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem);

  /* Raster */
  /* Breiter Satzspiegel: auf grossen Schirmen sollen Kopfzeile und
     Inhalte weiter nach aussen reichen. */
  --wrap: 1560px;
  --wrap-narrow: 980px;
  --gut: clamp(1.15rem, .6rem + 2.6vw, 3.25rem);
  --sec-y: clamp(4rem, 2.8rem + 5.6vw, 7.5rem);

  /* Radien */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s var(--ease);
  --t: .32s var(--ease);
  --t-slow: .6s var(--ease-out);
}

/* --------------------------------------------------------------------------
   2. Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;          /* kappt dekorative Überstände ohne Scroll-Container */

  /* Ueberscroll-Flaeche (Safari-Gummiband oben und unten). Der Hintergrund des
     Wurzelelements faerbt die gesamte Leinwand — gemessen aus der obersten und
     untersten Pixelzeile der Seite, damit der Uebergang nahtlos ist.
     Rein horizontaler Verlauf, damit die Kachelung nicht sichtbar wird. */
  background:
    linear-gradient(90deg,
      #220712  0%,
      #350c18 20%,
      #47101e 40%,
      #4b1120 50%,
      #47101e 60%,
      #350c18 80%,
      #210711 100%);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-body);
  /* Feines Korn ueber die ganze Seite, wie Druckpapier. Es liegt in der
     Seitenflaeche, deshalb decken die dunklen Abschnitte und die Karten es
     von selbst ab und es erscheint nur dort, wo der Grund hell ist.

     Vorher stand hier ein Punktraster mit 34 px Teilung. Ein regelmaessiges
     Raster liest sich als Arbeitsflaeche, kachelt auf langen hellen
     Strecken sichtbar und flimmert auf feinen Bildschirmen beim Scrollen.
     Rauschen hat keine Richtung und keine erkennbare Wiederholung.

     Die drei Stellschrauben: baseFrequency 1 gibt die Korngroesse (kleiner
     wird wolkig, groesser wird Sandpapier), opacity .4 die Staerke,
     stitchTiles='stitch' setzt die Kacheln nahtlos aneinander — ohne das
     stehen die Kanten im Bild. feColorMatrix nimmt dem Rauschen die Farbe;
     roh ist feTurbulence bunt. */
  background-color: var(--c-canvas);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.4'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  /* Das Korn steht still, der Inhalt laeuft darueber. Es liest sich dadurch
     als Beschaffenheit des Papiers und nicht als mitlaufendes Muster.
     Moeglich ist das nur, weil html eine eigene Flaeche hat — sonst wanderte
     der Grund des body auf die Leinwand und die Angabe liefe ins Leere.
     iOS Safari kennt fixed hier nicht und scrollt mit; das ist der alte
     Zustand, also kein Schaden. */
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  color: var(--c-ink);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 800;
  text-wrap: balance;
  /* Lange deutsche Komposita dürfen auf schmalen Displays trennen */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-h1); letter-spacing: -.04em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.015em; }

p { text-wrap: pretty; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--c-bordeaux); color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout-Utilities
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

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

/* Kopf- und Fusszeile laufen ueber die volle Breite — Signet, Logo und
   Symbole sollen aussen sitzen. Nur der Inhalt der Sektionen bleibt auf
   Lesebreite. */
.header > .wrap,
.footer > .wrap { max-width: none; }

/* Die Kopfzeile sitzt naeher am Rand als der uebrige Inhalt. */
.header > .wrap { padding-inline: clamp(.9rem, .5rem + 1.1vw, 1.7rem); }

.section { padding-block: var(--sec-y); position: relative; }

.section__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

.section__head p {
  font-size: var(--fs-lead);
  color: var(--c-muted);
  margin-top: 1.1rem;
}

.section__head--left { margin-inline: 0; text-align: left; }

/* Kopf ohne Subline — jede Regel fuer p bleibt hier wirkungslos, damit die
   Karriere-Subline nicht versehentlich wieder hier landet. */
.section__head--plain > p { display: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-bordeaux);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 1.5px;
  background: currentColor;
  opacity: .55;
}

.section__head:not(.section__head--left) .eyebrow::after,
.eyebrow--center::after {
  content: "";
  width: 20px;
  height: 1.5px;
  background: currentColor;
  opacity: .55;
}

.grad-text {
  background: linear-gradient(100deg, #2a0a12 0%, var(--c-bordeaux) 38%, #9c2b45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-nowrap { white-space: nowrap; }

/* Wiederverwendbare Hilfsklassen */
.section--flush { padding-top: 0; }
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--fs-lead);
  color: var(--c-muted);
  margin-top: 1.1rem;
}

.lead--follow { margin-top: 1.15rem; }

.u-mt { margin-top: 2.2rem; }

.note {
  text-align: center;
  margin-top: 2.5rem;
  font-size: var(--fs-body-s);
  color: var(--c-muted);
}

.note .link-arrow { display: inline-flex; vertical-align: middle; }

/* --------------------------------------------------------------------------
   4. Dekor: Verläufe, Glows, Ribbons
   -------------------------------------------------------------------------- */
/* Kein filter: blur — Safari legt dafuer eine eigene Ebene an und
   beschneidet sie an der Elementkante; auf hellem Grund sieht man das
   als harte Kante. Der Verlauf selbst ist weich genug. */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.glow--a {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(106, 27, 45, .06) 0%, rgba(106, 27, 45, .02) 40%, transparent 70%);
}

.glow--b {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(139, 36, 57, .06) 0%, rgba(139, 36, 57, .02) 40%, transparent 70%);
}

/* Platzierungen */
.glow--tr { top: -8%;  right: -12%; }
.glow--bl { bottom: -10%; left: -14%; }
.glow--tl { top: 10%;  left: -16%; }

.section > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: .82rem;
  --btn-px: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-size: var(--fs-body-s);
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t), border-color var(--t);
}

.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--t); }

.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

/* Primär — Bordeaux mit Verlauf und Glow */
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--c-bordeaux-500) 0%, var(--c-bordeaux) 50%, var(--c-bordeaux-700) 100%);
  box-shadow: var(--sh-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--c-bordeaux) 0%, var(--c-bordeaux-500) 100%);
  opacity: 0;
  transition: opacity var(--t);
  z-index: -1;
}

.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { box-shadow: 0 22px 48px -14px rgba(106, 27, 45, .5), inset 0 1px 0 rgba(255, 255, 255, .22); }

/* Sekundär — Glas mit Kontur */
.btn--ghost {
  color: var(--c-ink);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-sm);
}

.btn--ghost:hover {
  border-color: rgba(106, 27, 45, .3);
  color: var(--c-bordeaux);
  box-shadow: var(--sh-md);
}

/* Auf dunklem Grund */
.btn--on-dark {
  color: #fff;
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd-dark);
}

.btn--on-dark:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }

.btn--light { color: var(--c-bordeaux-900); background: #fff; box-shadow: var(--sh-md); }
.btn--light:hover { box-shadow: var(--sh-lg); }

.btn--sm { --btn-py: .6rem; --btn-px: 1.2rem; font-size: .82rem; }
.btn--lg { --btn-py: 1rem; --btn-px: 2.1rem; font-size: 1rem; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-body-s);
  font-weight: 700;
  color: var(--c-bordeaux);
}

.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Karriere — nutzt die Bauweise des Bewerbungswegs (Abschnitt 12)
   -------------------------------------------------------------------------- */

/* Intro im dunklen Container. Der Satz gehoert strukturell hierher und
   nicht in die Section-Ueberschrift auf hellem Grund — dafuer traegt der
   aeussere Kopf die Klasse .section__head--plain. */
/* Einleitender Satz im dunklen Container. Gehoert strukturell hierher und
   nicht in die Section-Ueberschrift auf hellem Grund. */

/* --- Knoten mit Symbol, auf allen Ebenen identisch --- */

/* --- Schmale Schirme: Ebenen brechen um, Linie bleibt links --- */
/* --------------------------------------------------------------------------
   7. Header / Navigation
   Signet links oeffnet das Menue, Wortmarke mittig, zwei Icons rechts.
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  /* 1.35rem liessen die Leiste 84 px hoch werden — auf dem Handy ein
     Siebtel des Bildschirms, bevor der erste Inhalt kommt. Enger gefasst,
     oben und unten gleich, damit Signet, Wortmarke und Symbole weiter auf
     einer Mittellinie sitzen. Wer das aendert: scroll-padding-top und
     .apply__visual top haengen an dieser Hoehe. */
  padding-block: 1rem;
  transition: padding var(--t), background-color var(--t), box-shadow var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}

/* Beim Scrollen bleibt der Header bordeaux — ueber die volle Breite,
   unten abgerundet. Der Verlauf ist derselbe wie im Kopfbereich des Hero,
   damit beim Andocken kein Farbsprung entsteht. */
.header.is-stuck {
  padding-block: .65rem;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background:
    radial-gradient(95% 1600% at 50% -110%, #551423 0%, transparent 60%),
    linear-gradient(180deg, #1c0610 0%, #190510 100%);
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: 0 16px 34px -22px rgba(46, 10, 19, .75);
}

.nav {
  position: relative;              /* Bezugspunkt fuer das Dropdown */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* --- Wortmarke, mittig -------------------------------------------------- */
.nav__logo { grid-column: 2; justify-self: center; position: relative; display: block; line-height: 0; }

.nav__logo img { height: 22px; width: auto; transition: height var(--t), opacity var(--t); }
.header.is-stuck .nav__logo img { height: 20px; }

/* --- Signet als Menue-Schalter ----------------------------------------- */
.nav__signet {
  grid-column: 1;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;               /* optisch buendig zum Textrand */
  color: #fff;
  border-radius: var(--r-sm);
  /* Bewusst ohne Rahmen und ohne eigene Flaeche: Die Marke soll als Marke
     stehen. Dass sie zugleich das Menue oeffnet, erschliesst sich dadurch
     nicht auf den ersten Blick — bewusste Entscheidung, siehe README. */
  transition: color var(--t), transform var(--t), opacity var(--t);
}

.nav__signet:hover { transform: translateY(-1px); opacity: .78; }
.header.is-open .nav__signet { color: #fff; }

.nav__signet svg { width: 21px; height: auto; transition: opacity var(--t), transform var(--t); }
.nav__signet .ico-close { position: absolute; width: 21px; height: 21px; opacity: 0; transform: rotate(-45deg); }

.header.is-open .nav__signet .ico-signet { opacity: 0; transform: rotate(45deg) scale(.8); }
.header.is-open .nav__signet .ico-close  { opacity: 1; transform: rotate(0); }

/* --- Icon-Links rechts, ohne Kreis -------------------------------------- */
.nav__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1.15rem; }

.icon-link {
  display: grid;
  place-items: center;
  color: #fff;
  transition: opacity var(--t), transform var(--t);
}

.icon-link svg { width: 23px; height: 23px; }
.icon-link:hover { opacity: .78; transform: translateY(-2px); }

/* --- Kompaktes Dropdown unter dem Signet -------------------------------- */
.menu {
  position: absolute;
  top: calc(100% + .75rem);
  left: -8px;                      /* buendig zur optischen Kante des Signets */
  z-index: 99;
  min-width: 208px;
  padding: .5rem;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 20% -10%, #551423 0%, transparent 62%),
    linear-gradient(165deg, #1c0610 0%, #0e0308 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 26px 48px -22px rgba(20, 4, 9, .85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top left;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s var(--ease-out);
}

.menu.is-open { opacity: 1; visibility: visible; transform: none; }

.menu__list { display: grid; }

.menu__list a {
  display: block;
  padding: .58rem .85rem;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: rgba(255, 255, 255, .88);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.menu__list a:hover,
.menu__list a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Der Hero ist um die Eckenrundung hoeher als der Bildschirm. Dadurch
     liegen die runden Ecken beim Seitenaufruf knapp unterhalb der Kante —
     man sieht keine hellen Ecken, die Rundung wird erst beim Scrollen
     sichtbar. Der Innenabstand unten faengt die zusaetzliche Hoehe auf,
     damit die Button-Ablage im Bild bleibt. */
  min-height: calc(100svh + var(--r-xl));
  padding: clamp(7.5rem, 6rem + 6.5vw, 10rem) 0 calc(clamp(1.1rem, .7rem + 1.6vw, 2rem) + var(--r-xl));
  text-align: center;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(95% 115% at 50% -8%, #551423 0%, transparent 60%),
    linear-gradient(180deg, #1c0610 0%, #0e0308 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Der Inhalt zentriert sich im freien Raum oberhalb der Button-Ablage */
.hero > .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ablage fuer den Bewerben-Button, buendig zum unteren Rand */
.hero__slot {
  position: relative;
  height: 54px;
  /* Kein Innenabstand: die Ablage muss exakt auf der Ruheposition des
     schwebenden Buttons liegen, sonst springt er beim Loesen. */
  /* Naeher am Textblock, damit darunter keine leere Flaeche steht. */
  margin-top: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  flex: none;
}

/* Der Textblock zentriert sich im Raum oberhalb der Button-Ablage:
   gleich viel Luft darueber wie darunter. */
/* Die Typografie steht mittig im Hero. Die Ablage des Buttons bleibt
   unveraendert am unteren Rand — dort liegt seine Ruheposition. */
.hero__copy { margin-block: auto; }

/* --- Hero-Headline: drei Begriffe ---
   Breit nebeneinander, schmal untereinander. Sichtbar ist der
   Normalzustand; nur wenn Bewegung erwuenscht ist, erscheinen die
   Woerter nacheinander. */
.hero__claim {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(.45rem, .1rem + 1.2vw, 1.4rem);
  /* Versalien laufen breiter — deshalb etwas kleiner als zuvor. */
  font-size: clamp(1.5rem, .45rem + 2.35vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__word { display: block; }

/* Hervorhebung im Bordeaux-Verlauf. Der Verlauf bleibt innerhalb der
   Bordeaux-Familie — von Weiss nach Bordeaux liefe er ueber ein
   einzelnes Wort zwangslaeufig durch Rose. */
.hero__accent {
  background: linear-gradient(100deg, #d0405f 0%, #b8314f 45%, #8b2439 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  font-size: clamp(1.1rem, .95rem + .72vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}

.hero__sub .hero__accent { font-weight: 800; }

/* "Zukunft" traegt die Zeile: kursiv und groesser, aber ohne Versalien.
   Die eigene Zeilenhoehe verhindert, dass die Zeile dadurch aufreisst. */
.hero__zukunft {
  font-style: italic;
  font-size: 1.42em;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__word,
  .hero__sub {
    opacity: 0;
    /* Ruhiger als zuvor: laengere Dauer, groesserer Abstand. */
    animation: hero-wort 1.5s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 3) * 700ms + 250ms);
  }
}

/* Der Schein liegt im filter, nicht im text-shadow: bei Verlaufsschrift
   wuerde ein Textschatten durch die transparente Schrift scheinen. */
@keyframes hero-wort {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: drop-shadow(0 0 0 rgba(139, 36, 57, 0));
  }
  60% { filter: drop-shadow(0 0 28px rgba(139, 36, 57, .8)); }
  to {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 18px rgba(139, 36, 57, .35));
  }
}

/* Schmale Schirme: die drei Begriffe stehen untereinander. */
@media (max-width: 900px) {
  .hero__claim {
    flex-direction: column;
    align-items: center;
    gap: clamp(.15rem, .05rem + .5vw, .5rem);
    font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.1rem);
  }
}

/* Fließende Licht-Ribbons */





/* Körnung gegen Banding */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero h1 { color: #fff; margin-bottom: 1.5rem; }
.hero h1 .grad-text {
  /* Weiss nach Off-White statt Rose — auf dem dunklen Bordeaux liest sich
     das als Licht, nicht als zweite Farbe. */
  background: linear-gradient(100deg, #ffffff 0%, #fbf5f6 52%, #dcc6cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Ein einziger, klar dominanter CTA */
/* --------------------------------------------------------------------------
   10. Raster
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(.9rem, .6rem + .9vw, 1.35rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   11. Split-Sektion (Text + Bild)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  /* Text und Foto tragen die Sektion allein — deshalb etwas mehr Raum
     fuer den Text und ein grosszuegigerer Abstand. */
  grid-template-columns: 1.08fr 1fr;
  align-items: stretch;
  gap: clamp(2.4rem, 1.2rem + 4.6vw, 5.5rem);
}

/* Text steht oben buendig zum Bild, darunter ein Bordeaux-Strich als Abschluss */
.split__copy { padding-top: clamp(.2rem, .1rem + .4vw, .6rem); }

.lead--strong {
  font-weight: 600;
  color: var(--c-body);
}

/* Nur der erste Absatz sitzt buendig oben, Folgeabsaetze behalten ihren Abstand */
.split__copy > .lead:first-child { margin-top: 0; }

/* Der Strich eroeffnet den Textblock — er sitzt oben, nicht unten. */
.split__rule {
  display: block;
  margin-bottom: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  width: min(400px, 88%);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8314f 0%, #8b2439 55%, rgba(139, 36, 57, 0) 100%);
  box-shadow: 0 0 16px -2px rgba(184, 49, 79, .7);
}

.split__media { position: relative; }

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

/* Nebeneinander enden Text und Foto auf derselben Linie, damit Foto, Text
   und die drei Bausteine darunter als ein Block gelesen werden. Das
   Seitenverhaeltnis bleibt als Mindesthoehe erhalten. */
@media (min-width: 901px) {
  /* Das <picture> muss die Spaltenhoehe mitnehmen, sonst laeuft die
     Hoehenangabe des Bildes ins Leere. */
  .split__media picture { display: block; height: 100%; }

  .split__media img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* --- Systemdiagramm: Partner → SALESCO → Kunde -------------------------
   Alle beweglichen Teile (link__pulse, orb__ring) liegen als eigene
   Elemente vor, damit die Animation spaeter nur CSS braucht.            */
.system {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem) clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(110% 130% at 50% -20%, #551423 0%, transparent 58%),
    linear-gradient(165deg, #1c0610 0%, #0e0308 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 34px 70px -34px rgba(46, 10, 19, .85);
}

/* Feines Punktraster als technische Textur */
.system::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 25%, transparent 78%);
}

.system__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .5fr 1.75fr .5fr 1fr;
  align-items: center;
  gap: clamp(.4rem, .1rem + .8vw, .9rem);
}

/* --- Knoten --- */
/* --- Partner rund um die Kugel --- */
.orbit {
  position: relative;
  width: min(100%, 820px);
  aspect-ratio: 820 / 316;
  margin-inline: auto;
}

/* Gleiches Seitenverhaeltnis wie die Buehne: Linien und Kacheln bleiben deckungsgleich */
.orbit__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.orbit__flow {
  filter:
    drop-shadow(0 0 4px rgba(255, 232, 236, .55))
    drop-shadow(0 0 14px rgba(224, 99, 127, .7));
}

.orbit__tip { filter: drop-shadow(0 0 7px rgba(255, 232, 236, .9)); }

.orbit__slots { position: absolute; inset: 0; }

.orbit__slot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(74px, 52px + 5vw, 104px);
  aspect-ratio: 104 / 62;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 14px 28px -16px rgba(0, 0, 0, .8);
}

/* Logo spaeter einfach als <img> in die Kachel legen */
.orbit__slot img { max-width: 74%; max-height: 58%; width: auto; object-fit: contain; }
.orbit__slot svg { width: 24px; height: auto; color: rgba(255, 255, 255, .42); }

.orbit__core {
  position: absolute;
  left: 50%;
  /* 290 von 410 Buehneneinheiten — muss zum Mittelpunkt der berechneten
     Kurven passen, sonst laufen die Linien an der Kugel vorbei. */
  top: 65.82%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}

@media (max-width: 780px) {
  /* Schmal: Kugel oben, Partner als Raster darunter */
  .orbit { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
  .orbit__wires { display: none; }
  .orbit__core { position: static; transform: none; }
  .orbit__slots {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    width: 100%;
    max-width: 340px;
  }
  .orbit__slot { position: static; transform: none; width: 100%; }
}

/* --- Die Kugel --- *//* --- Die Kugel --- */
.orb3d {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(120px, 88px + 8vw, 190px);
  aspect-ratio: 1;
}

/* Aeusserer Lichthof */
.orb3d__halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 99, 127, .5) 0%, rgba(184, 49, 79, .2) 42%, transparent 68%);
}

/* Die Kugel selbst: Licht oben links, Tiefe unten rechts, Randlicht aussen */
.orb3d__ball {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 78% 88%, rgba(224, 99, 127, .5) 0%, transparent 46%),
    radial-gradient(90% 90% at 30% 22%, #a82c48 0%, #6a1b2d 34%, #340c19 66%, #12040a 100%);
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, .75),
    inset 6px 8px 26px rgba(255, 214, 224, .16),
    0 26px 54px -18px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .1);
}

.orb3d__mark {
  position: relative;
  width: 32%;
  height: auto;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6));
}

/* Glanzlicht oben links */
.orb3d__shine {
  position: absolute;
  top: 6%;
  left: 12%;
  width: 52%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 40%, transparent 70%);
  pointer-events: none;
}

/* Lichtteller unter der Kugel */
.orb3d__base {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 96%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(224, 99, 127, .55) 0%, rgba(184, 49, 79, .2) 40%, transparent 70%);
}

@media (max-width: 780px) {
  /* Schmal: Kugel oben, Partner darunter als Raster */
            }

/* Faecher: verbindet den SALESCO-Knoten mit den drei Karten darunter */
.system__fan {
  display: block;
  width: 100%;
  height: 86px;
  margin-top: -10px;
}

.system__fan-flow { filter: drop-shadow(0 0 5px rgba(255, 232, 236, .5)) drop-shadow(0 0 14px rgba(224, 99, 127, .6)); }
.system__fan-tip  { filter: drop-shadow(0 0 7px rgba(255, 232, 236, .85)); }


@media (max-width: 900px) {

  }

/* Kein overflow: hidden mehr — es hat den weichen Schein des Orbs an der
   Sektionskante abgeschnitten, und genau das sah man als harte Kante. */

/* --------------------------------------------------------------------------
   6b. Career Journey — geschwungene Route mit wanderndem Orb
   Die Route liegt als SVG mit viewBox 0 0 100 100 und preserveAspectRatio
   "none" ueber dem Container. Dadurch entsprechen ihre Koordinaten
   direkt Prozentwerten, und Orb wie Stationspunkte lassen sich exakt
   darauf setzen — auch wenn der Container beliebig hoch ist.
   -------------------------------------------------------------------------- */
.journey {
  position: relative;
  --hoehe: clamp(1180px, 78vw, 1420px);
  min-height: var(--hoehe);
  margin-top: clamp(1rem, .5rem + 1.4vw, 2.2rem);
  /* Fortschritt 0–100, wird vom Skript gesetzt */
  --p: 0;
  --ox: 50;
  --oy: 0;
}

/* --- Die Route --- */
/* Weicher Schein, der mit dem Orb wandert — der aktive Abschnitt der
   Route bekommt dadurch etwas mehr Grund. */
.journey__aura {
  position: absolute;
  left: calc(var(--ox) * 1%);
  top: calc(var(--oy) * 1%);
  z-index: 0;
  width: min(560px, 52%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  /* Sehr weich auslaufend, damit an keiner Kante etwas sichtbar wird. */
  background: radial-gradient(circle, rgba(139, 36, 57, .06) 0%, rgba(106, 27, 45, .02) 46%, transparent 72%);
}

.journey__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.journey__line,
.journey__done {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Unbefahrene Strecke: nur angedeutet */
.journey__line {
  stroke: rgba(106, 27, 45, .16);
  stroke-width: 1.6;
  /* Feiner Lichtsaum statt dickerer Linie — nur etwas mehr Tiefe. */
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8));
}

/* Zurueckgelegte Strecke: beschnitten wird die HTML-Huelle, nicht das
   SVG. Prozentwerte in clip-path beziehen sich bei SVG-Elementen auf
   deren Zeichenflaeche, bei einem div dagegen zuverlaessig auf die
   Elementgroesse — und die entspricht dem Container. Die Route faellt
   streng von oben nach unten, deshalb entspricht der Schnitt auf
   Orbhoehe genau dem zurueckgelegten Weg. */
.journey__cut {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 calc((100 - var(--oy)) * 1%) 0);
  pointer-events: none;
}

.journey__done {
  /* Farbe steht als Attribut am Pfad — siehe Hinweis beim Fortschrittsring. */
  stroke-width: 3.4;
  filter: drop-shadow(0 0 8px rgba(184, 49, 79, .5));
}

.journey__line--narrow,
.journey__done--narrow { display: none; }

/* --- Der Orb --- */
.orb {
  position: absolute;
  left: calc(var(--ox) * 1%);
  top: calc(var(--oy) * 1%);
  z-index: 3;
  display: grid;
  place-items: center;
  /* Eine Groesse, drei Verwendungen — sonst weicht die Zentrierung ab. */
  --orb: clamp(52px, 44px + 1.2vw, 66px);
  width: var(--orb);
  height: var(--orb);
  margin: calc(var(--orb) / -2);
  pointer-events: none;
  transition: width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out);
}

/* Der Lichthof waechst mit dem Fortschritt — dezent, kein Neon. */
.orb__halo {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 49, 79, .55) 0%, rgba(106, 27, 45, .28) 42%, transparent 68%);
  opacity: calc(.3 + var(--p) / 220);
  transition: opacity .3s linear;
}

.orb__ball {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 120% at 78% 88%, rgba(184, 49, 79, .55) 0%, transparent 46%),
    radial-gradient(90% 90% at 30% 22%, #a82c48 0%, #6a1b2d 34%, #340c19 66%, #12040a 100%);
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, .75),
    inset 4px 5px 16px rgba(255, 214, 224, .18),
    0 0 0 1px rgba(255, 255, 255, .12),
    0 18px 34px -14px rgba(0, 0, 0, .8);
}

.orb__mark {
  position: absolute;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}

.orb__mark--signet { width: 30%; height: auto; }
.orb__mark--haus   { width: 46%; height: auto; opacity: 0; transform: scale(.7); }

/* Ziel erreicht: der Orb waechst, das Standort-Symbol tritt an die
   Stelle des Signets. */
.journey.is-final .orb { --orb: clamp(74px, 60px + 2vw, 98px); }
.journey.is-final .orb__mark--signet { opacity: 0; transform: scale(.7); }
.journey.is-final .orb__mark--haus   { opacity: 1; transform: none; }
.journey.is-final .orb__halo { opacity: .95; inset: -70%; }

/* Im Ziel tritt der Orb an die Stelle des letzten Stationspunktes. */
.journey.is-final .stop--ziel .stop__dot { opacity: 0; }

.stop__dot { transition: color var(--t), border-color var(--t), box-shadow var(--t), background-color var(--t), opacity var(--t); }

.orb__shine {
  position: absolute;
  top: 6%;
  left: 12%;
  width: 52%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 40%, transparent 70%);
}

/* --- Die Stationen --- */
.journey__stops {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Lage der fuenf Stationen auf der Route. Die Werte stehen hier und
   nicht im Markup — sonst haetten sie Vorrang vor der Mobilfassung. */
.stop { position: absolute; inset: 0; }

.stop:nth-child(1) { --sx: 44; --sy: 10; }
.stop:nth-child(2) { --sx: 56; --sy: 30; }
.stop:nth-child(3) { --sx: 44; --sy: 50; }
.stop:nth-child(4) { --sx: 56; --sy: 70; }
.stop:nth-child(5) { --sx: 50; --sy: 90; }

/* Punkt auf der Route */
.stop__dot {
  position: absolute;
  left: calc(var(--sx) * 1%);
  top: calc(var(--sy) * 1%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(38px, 32px + .8vw, 46px);
  height: clamp(38px, 32px + .8vw, 46px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: rgba(255, 255, 255, .5);
  background: rgba(28, 6, 16, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(106, 27, 45, .45);
  transition: color var(--t), border-color var(--t), box-shadow var(--t), background-color var(--t);
}

.stop__dot svg { width: 46%; height: auto; }

/* Textblock, offen auf der Flaeche */
.stop__text {
  position: absolute;
  top: calc(var(--sy) * 1%);
  width: min(38%, 420px);
  transform: translateY(-50%);
  opacity: .48;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.stop--links  .stop__text { right: calc(100% - var(--sx) * 1% + clamp(2.2rem, 1.4rem + 2.4vw, 4.2rem)); text-align: right; }
.stop--rechts .stop__text { left:  calc(var(--sx) * 1% + clamp(2.2rem, 1.4rem + 2.4vw, 4.2rem)); }

/* Rechtsbuendige Seite: der auf Textbreite geschrumpfte Titel wird
   nach rechts geschoben. */
.stop--links .stop__text h3 { margin-left: auto; }

.stop__time {
  /* Kleiner Glaskasten, damit die Zeitangabe als Marke gelesen wird. */
  display: inline-flex;
  align-items: center;
  margin-bottom: .7rem;
  padding: .34rem .68rem .3rem;
  border-radius: var(--r-pill);
  font-size: clamp(.64rem, .6rem + .18vw, .74rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-bordeaux);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(106, 27, 45, .2);
  box-shadow: 0 6px 16px -10px rgba(46, 10, 19, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}

/* Erreicht: der Kasten bekommt einen Hauch mehr Kontur. */
.stop.is-on .stop__time {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(106, 27, 45, .34);
  box-shadow: 0 8px 20px -10px rgba(46, 10, 19, .55), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.stop__text h3 {
  /* Der Verlauf spannt sich ueber die Schriftflaeche, nicht ueber die
     ganze Spalte — sonst zeigt ein kurzes Wort nur dessen Anfang.
     fit-content statt inline-block: der Titel bleibt eine eigene Zeile. */
  display: block;
  width: fit-content;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2.1rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--c-ink);
  transition: color var(--t);
}

.stop__claim {
  margin-top: .5rem;
  font-size: clamp(.92rem, .85rem + .34vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  /* Wie die Ueberschrift im Bordeaux-Verlauf. fit-content sorgt dafuer,
     dass der Verlauf ueber die Schrift laeuft und nicht ueber die Spalte. */
  width: fit-content;
  background: linear-gradient(100deg, #2a0a12 0%, var(--c-bordeaux) 46%, #9c2b45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stop--links .stop__claim,
.stop--links .stop__note { margin-left: auto; }

.stop__note {
  margin-top: .5rem;
  font-size: var(--fs-body-s);
  line-height: 1.55;
  width: fit-content;
  background: linear-gradient(100deg, #431425 0%, #7d2436 46%, #a8354f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: pretty;
}

/* --- Aktiver Zustand: die Station ist erreicht --- */
.stop.is-on .stop__text { opacity: 1; }

.stop.is-on .stop__dot {
  color: #fff;
  background:
    radial-gradient(120% 120% at 78% 88%, rgba(184, 49, 79, .5) 0%, transparent 46%),
    radial-gradient(90% 90% at 30% 22%, #a82c48 0%, #6a1b2d 40%, #340c19 100%);
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 6px rgba(253, 251, 251, .9), 0 0 26px -2px rgba(184, 49, 79, .75);
}

.stop.is-on .stop__text h3 {
  background: linear-gradient(100deg, #2a0a12 0%, var(--c-bordeaux) 46%, #9c2b45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Die Zielstation traegt etwas mehr Gewicht */
.stop--ziel .stop__text h3 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.4rem); }

/* --- Schmale Schirme: Route links, alle Stationen rechts daneben --- */
@media (max-width: 900px) {
  .journey {
    --hoehe: clamp(1080px, 190vw, 1320px);
  }

  .journey__line--wide,
  .journey__done--wide { display: none; }

  .journey__line--narrow,
  .journey__done--narrow { display: block; }

  /* Schmal laeuft die Route links. Die Werte sind die Endpunkte der
     schmalen Kurve — deshalb sitzen die Punkte exakt darauf. */
  .stop:nth-child(1) { --sx: 10; }
  .stop:nth-child(2) { --sx: 15; }
  .stop:nth-child(3) { --sx: 10; }
  .stop:nth-child(4) { --sx: 15; }
  .stop:nth-child(5) { --sx: 12; }

  .stop--links .stop__text,
  .stop--rechts .stop__text {
    right: auto;
    left: calc(var(--sx) * 1% + clamp(2.4rem, 1.6rem + 3.4vw, 3.4rem));
    width: calc(88% - var(--sx) * 1%);
    text-align: left;
  }

  .stop--links .stop__text h3,
  .stop--links .stop__claim,
  .stop--links .stop__note { margin-left: 0; }
}

/* --- Ohne Bewegung: alles ist sichtbar, nichts wandert --- */
@media (prefers-reduced-motion: reduce) {
  .stop__text { opacity: 1; }
  .orb { display: none; }
  .journey__cut { clip-path: none; }
}

/* --------------------------------------------------------------------------
   12. Bewerbung — geteilte Ansicht mit stehendem Bild
   Links bleibt das Bild waehrend des Scrollens stehen, rechts laufen die
   fuenf Schritte durch. Welcher Schritt aktiv ist, entscheidet das Skript;
   CSS zeigt nur die Zustaende.
   -------------------------------------------------------------------------- */
.apply {
  color: #fff;
  /* Kein eigener Innenabstand: Der Anlauf der Schrittspalte gibt oben und
     unten genug Luft. Jeder zusaetzliche Abstand wuerde das Bild gegen
     seinen Text verschieben, weil der stehende Kasten frueher einrastet. */
  padding-block: 0;
  /* Oben und unten derselbe Bordeaux-Schleier — vorher lief die Flaeche
     nach unten ins Schwarz. */
  background:
    radial-gradient(90% 55% at 50% 0%, #551423 0%, transparent 60%),
    radial-gradient(90% 55% at 50% 100%, #4a1020 0%, transparent 62%),
    linear-gradient(175deg, #240a14 0%, #1d0711 55%, #220913 100%);
  border-radius: var(--r-xl);
}

.apply__split {
  display: grid;
  /* Das Bild bekommt nur so viel Platz, wie es braucht — der Rest gehoert
     dem Text. Vorher nahm die Spalte 40 Prozent der Breite ein. */
  grid-template-columns: minmax(240px, 26%) 1fr;
  gap: clamp(1.6rem, .8rem + 2.6vw, 3.6rem);
  align-items: start;
}

/* --- Links: stehendes Bild mit Ring --- */
/* Der Kasten ist bildschirmhoch und klebt oben. Wo genau das Bild darin
   sitzt, richtet das Skript am aktiven Schritt aus — dadurch braucht die
   Spalte keinen langen Anlauf mehr, nur damit die Ausrichtung stimmt. */
.apply__visual-inner {
  width: 100%;
  will-change: transform;
}

.apply__visual {
  /* Hoehe des Zaehlers, damit sie unten ausgeglichen werden kann. */
  --zaehler: calc(1.2 * clamp(.88rem, .8rem + .32vw, 1.08rem) + clamp(.7rem, .6rem + .5vw, 1.1rem));
  position: sticky;
  /* Die Hoehe ist so gewaehlt, dass das Bild in der Ruhelage genau neben
     dem ersten und dem letzten Schritt steht: zweimal der Anlauf (16vh)
     plus eine Stufenhoehe (46vh). Daraus ergibt sich die Ruhelage bei
     39 Prozent Fensterhoehe — dieselbe Linie, an der das Skript den
     aktiven Schritt bestimmt. Der Ausgleich unten
     entspricht der Hoehe des Zaehlers, damit das Bild selbst mittig sitzt
     und nicht der Block aus Zaehler und Bild. */
  top: 0;
  height: 78vh;
  padding-bottom: var(--zaehler);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* Zaehler in Bordeaux — beide Zahlen, die zweite etwas zurueckgenommen. */
.apply__zaehler {
  margin-bottom: clamp(.7rem, .6rem + .5vw, 1.1rem);
  font-size: clamp(.88rem, .8rem + .32vw, 1.08rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2em;
  color: #c23a58;
  font-variant-numeric: tabular-nums;
}

.apply__von { color: rgba(194, 58, 88, .62); font-weight: 700; }

.apply__frame {
  position: relative;
  width: min(100%, clamp(240px, 20vw, 300px));
  aspect-ratio: 1;
}

/* Ring: unbelegte Bahn matt, Fortschritt in Bordeaux mit ruhigem Schein */
/* Genau ueber der Bildmitte, 8 px groesser als das Foto. Ueber die Mitte
   ausgerichtet statt ueber inset: bei gleichzeitig gesetzten Raendern und
   Massen entscheiden Browser unterschiedlich, welche Angabe gewinnt —
   der Ring sass dadurch acht Pixel neben dem Bild. */
.apply__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  /* Die Grundregel deckelt Grafiken auf 100 % — der Ring soll aber
     bewusst etwas groesser sein als das Foto. */
  max-width: none;
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: visible;
}

.apply__ring circle { fill: none; stroke-linecap: round; }

.apply__ring-bg {
  stroke: rgba(255, 255, 255, .12);
  stroke-width: .7;
}

/* Farbe und Bogenlaenge stehen als Attribute am Kreis, nicht hier:
   Ein Verweis wie url(#applyGrad) aus einer ausgelagerten CSS-Datei wird
   in manchen Browsern gegen die Adresse der CSS-Datei aufgeloest und
   laeuft dann ins Leere — der Ring bliebe unsichtbar. Die Laenge setzt
   das Skript ebenfalls als Attribut; ein Fuenftel des Kreisumfangs
   (2 * pi * 48) sind 60.32 Einheiten. */
.apply__ring-fg {
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(139, 36, 57, .5));
  /* Der Bogen folgt dem Scrollen fortlaufend — eine lange Ueberblendung
     wuerde ihn hinterherhinken lassen. */
  transition: stroke-dasharray .12s linear, opacity .2s linear;
}

.apply__bilder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset 0 2px 10px rgba(255, 255, 255, .22),
    inset 0 -10px 22px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .1),
    0 30px 60px -24px rgba(0, 0, 0, .85);
}

/* Weicher Wechsel statt hartem Schnitt */
.apply__bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out);
}

.apply__bild.is-on { opacity: 1; transform: none; }

.apply__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Rechts: die Schritte --- */
.apply__steps {
  list-style: none;
  margin: 0;
  /* Anlauf oben und unten, gleich gross: zusammen mit der Hoehe des
     stehenden Kastens sorgt er dafuer, dass das Bild bei Schritt 01 und
     bei Schritt 05 genau neben seinem Text steht. */
  padding: 16vh 0;
}

.apply__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46vh;
  padding-block: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  opacity: .38;
  transition: opacity .6s var(--ease-out);
}

/* Durchlaufene Schritte bleiben praesenter als kommende. */
.apply__step.is-past { opacity: .62; }
.apply__step.is-active { opacity: 1; }

.apply__nr {
  display: block;
  margin-bottom: .8rem;
  font-size: clamp(.72rem, .66rem + .24vw, .86rem);
  font-weight: 800;
  letter-spacing: .22em;
  color: rgba(194, 58, 88, .55);
  font-variant-numeric: tabular-nums;
  transition: color .6s var(--ease-out);
}

.apply__step.is-active .apply__nr { color: #c23a58; }

.apply__step h3 {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  /* Bordeaux-Verlauf auf Schriftbreite — Weiss traegt die Kernbotschaft. */
  width: fit-content;
  background-image: linear-gradient(100deg, #d0405f 0%, #b8314f 48%, #8b2439 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(.72);
  transition: filter .6s var(--ease-out);
}

.apply__step.is-active h3 { filter: none; }

/* Kernbotschaft traegt, die Erklaerung bleibt ruhig darunter. */
.apply__kern {
  margin-top: clamp(.6rem, .5rem + .4vw, .9rem);
  max-width: 40ch;
  font-size: clamp(1rem, .92rem + .38vw, 1.22rem);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.apply__text {
  margin-top: .55rem;
  max-width: 52ch;
  font-size: clamp(.88rem, .82rem + .26vw, 1rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .66);
  text-wrap: pretty;
}

/* Hinweise als feine kursive Zeile — kein Rahmen, keine Flaeche.
   Dieselbe kursive Auszeichnung wie "Zukunft" im Hero, im Bordeaux-Verlauf. */
.apply__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  margin-top: clamp(.8rem, .6rem + .5vw, 1.2rem);
  list-style: none;
  padding: 0;
}

.apply__tags li {
  font-size: clamp(.82rem, .76rem + .24vw, .94rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
  width: fit-content;
  background-image: linear-gradient(100deg, #d0405f 0%, #b8314f 48%, #8b2439 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(.8);
  transition: filter .6s var(--ease-out);
}

.apply__step.is-active .apply__tags li { filter: none; }

/* --------------------------------------------------------------------------
   14. Team
   -------------------------------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .6rem + 1.2vw, 1.6rem);
}

.person {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(165deg, #1c0610 0%, #0e0308 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 22px 48px -28px rgba(46, 10, 19, .75);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.person:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 30px 60px -28px rgba(46, 10, 19, .9);
}

/* --- Porträt --- */
.person__portrait { position: relative; overflow: hidden; }

.person__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform .7s var(--ease-out);
}

.person:hover .person__portrait img { transform: scale(1.03); }

/* --- Name: farbloses Glas ueber der unteren Bildkante --- */
.person__id {
  position: absolute;
  inset: auto 0 0 0;
  padding: .95rem 1.2rem 1.05rem;
  text-align: center;
  /* Bordeaux-Glas. Der Ton stammt aus dem Portraethintergrund, dort gemessen:
     hellste Stelle #330e16, Mittelwerte um #21080e. Der Schein oben gibt Tiefe,
     ohne dass eine sichtbare Kante entsteht. */
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(96, 28, 47, .62) 0%, transparent 68%),
    linear-gradient(180deg, rgba(62, 19, 33, .74) 0%, rgba(22, 7, 12, .9) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}

.person__id strong {
  display: block;
  font-size: clamp(1rem, .95rem + .2vw, 1.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* Position wie die Eyebrows im Rest der Seite: zwei kurze Striche links
   und rechts. Flex statt fester Breiten, damit die Striche bei langen
   Bezeichnungen wie "Office & Recruiting" nicht ueber die Karte laufen. */
.person__id span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: .18rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.person__id span::before,
.person__id span::after {
  content: "";
  flex: 0 1 14px;
  height: 1.5px;
  background: currentColor;
  opacity: .5;
}

/* --- Zitat: Uebergang vom Team zum Bildstreifen -------------------------
   Kursiv gesetzt und mit einem grossen Anfuehrungszeichen hinterlegt,
   damit es auf den ersten Blick als Zitat lesbar ist und nicht als
   Ueberschrift oder Fliesstext. Der Verlauf ist derselbe wie bei den
   Ueberschriften der Sektionen. */
.quote {
  position: relative;
  max-width: 900px;
  margin: clamp(3rem, 2.2rem + 3vw, 5rem) auto 0;
  text-align: center;
}

/* Zwei Bordeaux-Striche rahmen das Zitat — derselbe Strich wie im
   Unternehmensbereich, gespiegelt gesetzt. Sie machen aus dem Zitat
   sichtbar einen eigenen Baustein. */
.quote::before,
.quote::after {
  content: "";
  display: block;
  width: min(360px, 62%);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8314f 0%, #8b2439 55%, rgba(139, 36, 57, 0) 100%);
  box-shadow: 0 0 16px -2px rgba(184, 49, 79, .7);
}

/* Versetzt statt mittig: der obere Strich sitzt links, der untere
   rechts — das gibt dem Block Bewegung. */
.quote::before {
  margin: 0 auto clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) 4%;
}

/* Der untere Strich laeuft in die andere Richtung aus. */
.quote::after {
  margin: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) 4% 0 auto;
  transform: scaleX(-1);
}


.quote blockquote { margin: 0; }

.quote p {
  font-size: clamp(1.25rem, 1rem + 1.3vw, 2.1rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-wrap: balance;
  background: linear-gradient(100deg, #2a0a12 0%, var(--c-bordeaux) 38%, #9c2b45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Der Name steht bewusst aufrecht und klein — er ist kein Teil des Zitats. */
.quote figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: clamp(1rem, .8rem + .6vw, 1.5rem);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-bordeaux);
}

.quote figcaption::before,
.quote figcaption::after {
  content: "";
  flex: 0 1 26px;
  height: 1.5px;
  background: currentColor;
  opacity: .55;
}

/* --------------------------------------------------------------------------
   15. Bildstreifen im Bordeaux-Band
   -------------------------------------------------------------------------- */
/* Vollbreites Band ueber die gesamte Seitenbreite, wie Header und Footer.
   Hintergrund ist das originale SALESCO Keyvisual, abgedunkelt auf den
   Bordeaux-Ton von Header und Footer. Es steht fest, waehrend der Bildstreifen
   darueber laeuft — dadurch ist erkennbar, dass sich nur die Bilder bewegen. */
.band {
  position: relative;
  width: 100%;
  padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
  overflow: hidden;
  background: #140309 url("../img/band-keyvisual.jpg") center / cover no-repeat;
  background-image: image-set(
    url("../img/band-keyvisual.webp") type("image/webp"),
    url("../img/band-keyvisual.jpg")  type("image/jpeg")
  );
}

/* Feine Kanten oben und unten fassen das Band als feste Flaeche ein */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.band > * { position: relative; }

/* --------------------------------------------------------------------------
   15b. Laufender Bildstreifen
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  /* Ein- und Auslauf nur ganz schmal ausblenden — sonst liegt der dunkle
     Bandhintergrund sichtbar ueber den aeusseren Bildern. */
  mask-image: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: clamp(.7rem, .5rem + .7vw, 1.15rem);
  padding-inline: clamp(.35rem, .25rem + .35vw, .58rem);
  animation: ticker-run 70s linear infinite;
}

.ticker__track li { flex: none; }

.ticker__track img {
  height: clamp(150px, 110px + 9vw, 262px);
  width: auto;
  border-radius: var(--r-md);
  object-fit: cover;
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .7);
}

/* Die Liste liegt doppelt im Markup, eine halbe Umdrehung ist ein voller Zyklus */
@keyframes ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   16. B2B-Sektion
   -------------------------------------------------------------------------- */
.b2b {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  color: #fff;
  background:
    radial-gradient(100% 120% at 100% 0%, #7d2135 0%, transparent 55%),
    linear-gradient(150deg, #2e0a13 0%, #551423 100%);
  box-shadow: var(--sh-lg);
}

.b2b h2 { color: #fff; }
.b2b .eyebrow { color: var(--c-bordeaux-300); }
.b2b p { color: rgba(255, 255, 255, .74); }

.b2b__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.b2b__list { display: grid; gap: .75rem; }

.b2b__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd-dark);
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.b2b__list li:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .24);
  transform: translateX(4px);
}

.b2b__list svg { width: 20px; height: 20px; color: var(--c-bordeaux-300); margin-top: .15rem; }
.b2b__list strong { display: block; color: #fff; font-size: var(--fs-body-s); font-weight: 700; }
.b2b__list span { display: block; margin-top: .15rem; font-size: .84rem; color: rgba(255, 255, 255, .62); line-height: 1.5; }

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */
.cta { text-align: center; position: relative; }

/* Der Kontaktblock endet in sich schon luftig, deshalb hier weniger Polster */
.cta { padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }

.cta__inner {
  position: relative;
  /* Ohne die Kontaktzeile traegt der Kasten nur noch Kopf und Button. Der
     alte Innenabstand war auf drei Bloecke gerechnet und liesse ihn jetzt
     leer wirken — deshalb rund ein Drittel zurueckgenommen. */
  padding: clamp(2rem, 1.5rem + 2.2vw, 3.4rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

.cta__inner::before {
  content: "";
  position: absolute;
  width: 130%;
  height: 220%;
  left: -15%;
  top: -60%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(106, 27, 45, .1) 0%, transparent 70%);
  pointer-events: none;
}

/* Die Kontaktzeile unter dem Button ist entfallen — Anschrift und E-Mail
   stehen im Impressum. Der Kasten traegt jetzt nur noch Kopf und Button;
   sein Innenabstand ist entsprechend zurueckgenommen (siehe .cta__inner). */

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2.2rem;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
/* Spiegelbild des gescrollten Headers: gleiche Hoehe, gleicher Verlauf,
   nur die Rundung und der Lichtschein sitzen oben statt unten. */
.footer {
  margin-top: 0;
  padding-block: .85rem;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  color: #fff;
  background:
    radial-gradient(95% 1600% at 50% 210%, #551423 0%, transparent 60%),
    linear-gradient(0deg, #1c0610 0%, #190510 100%);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -16px 34px -22px rgba(46, 10, 19, .75);
}

.footer a { transition: opacity var(--t); }
.footer a:hover { opacity: .75; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 40px entspricht dem Signet im Header — dadurch sind beide Leisten gleich hoch */
  min-height: 40px;
  font-size: .8rem;
}

.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* --------------------------------------------------------------------------
   18b. Rechtsseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.legal-hero {
  padding: clamp(7.5rem, 6rem + 6vw, 9.5rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  color: #fff;
  background:
    radial-gradient(95% 130% at 50% -20%, #551423 0%, transparent 60%),
    linear-gradient(180deg, #1c0610 0%, #0e0308 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.legal-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }

.legal {
  /* Rechtstexte liefen auf Tablets auf 89 Zeichen pro Zeile. Ab etwa
     75 Zeichen faellt das Zurueckspringen ins naechste Zeilenende schwer. */
  max-width: min(760px, 60ch);
  margin-inline: auto;
  padding-block: var(--sec-y);
}

.legal h2 {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  margin: 2.75rem 0 .85rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--c-line);
}

.legal h2:first-of-type { margin-top: 1rem; padding-top: 0; border-top: 0; }

.legal p { margin-bottom: 1rem; font-size: var(--fs-body-s); }
.legal a { color: var(--c-bordeaux); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--c-ink); }

.legal__note {
  padding: 1.15rem 1.35rem;
  margin-bottom: 2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-bordeaux-100);
  background: var(--c-bordeaux-050);
  font-size: var(--fs-body-s);
}

.legal ul {
  margin: 0 0 1rem 1.15rem;
  padding: 0;
  font-size: var(--fs-body-s);
}

.legal ul li { margin-bottom: .35rem; }

.legal__stand {
  margin-top: 2rem;
  color: var(--c-muted);
  font-size: var(--fs-body-s);
}

.legal__back { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   18b. Bewerben-Button, schwebend und andockend
   Er schwebt tief am unteren Rand mit und legt sich im Kontaktbereich
   in seine Ablage. Beim Hochscrollen loest er sich wieder.
   -------------------------------------------------------------------------- */
.cta__slot {
  position: relative;
  height: 54px;
  margin-top: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

.cta-float {
  position: fixed;
  left: 50%;
  bottom: clamp(1.1rem, .7rem + 1.6vw, 2rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  height: 54px;
  padding-inline: 2rem;
  border-radius: var(--r-pill);
  font-size: clamp(.82rem, .78rem + .18vw, .92rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, #b8314f 0%, #8b2439 45%, #5c1526 100%);
  box-shadow:
    0 20px 46px -12px rgba(184, 49, 79, .7),
    0 0 0 1px rgba(255, 255, 255, .16) inset,
    0 1px 0 rgba(255, 255, 255, .3) inset;

  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}

/* Zurueckgezogen: solange der Button im Hero noch sichtbar ist,
   und waehrend das Menue offen steht. */
.cta-float.is-off,
.cta-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 18px);
}

/* Abgelegt: sitzt an der Ablage statt am Bildschirmrand.
   --dock-top setzt das Skript auf die Seitenposition der Ablage. */
.cta-float.is-docked {
  position: absolute;
  top: var(--dock-top, 0px);
  bottom: auto;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.cta-float:hover {
  transform: translate(-50%, -3px);
  box-shadow:
    0 26px 54px -14px rgba(161, 44, 70, .78),
    0 0 0 1px rgba(255, 255, 255, .2) inset,
    0 1px 0 rgba(255, 255, 255, .34) inset;
}

.cta-float__mark { width: 13px; height: auto; opacity: .9; }

@media (max-width: 480px) {
  .cta-float { padding-inline: 1.6rem; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-float { transform: translate(-50%, 0); }
}

/* --------------------------------------------------------------------------
   18d. Desktop-Proportionen ab 1200 px
   Bilder und Karten etwas kleiner, dafuer mehr Luft. Alles bewusst in
   einem eigenen Bereich, damit Tablet und Handy unberuehrt bleiben.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* Unternehmensbereich: Foto schlanker, Text auf Lesebreite */
  .split { grid-template-columns: 1.08fr .92fr; }
  .split__media { max-width: 540px; margin-left: auto; width: 100%; }
  .split__copy .lead { max-width: 52ch; }
  .split__copy { max-width: 640px; }

  /* Team: kompaktere Karten, mehr Abstand dazwischen */
  .team {
    max-width: 1180px;
    margin-inline: auto;
    gap: clamp(1.6rem, .9rem + 1.4vw, 2.6rem);
  }

  /* Karriere: Textspalten der Stationen etwas schmaler */
  .stop__text { width: min(34%, 380px); }
}

/* --------------------------------------------------------------------------
   19. Scroll-Reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 64px; }

  .system__grid { grid-template-columns: 1fr; justify-items: stretch; }
        .link { justify-content: center; transform: rotate(90deg); padding-block: .35rem; }
  /* Gestapelt trennen waagerechte Linien statt senkrechter */

  .split   { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .b2b__grid { grid-template-columns: 1fr; }
    .team { gap: .7rem; }
  .person__id { padding: .8rem .9rem .9rem; }
}

@media (max-width: 400px) {
  .nav__logo img { height: 19px; }
  .header.is-stuck .nav__logo img { height: 17px; }
  .icon-btn { width: 35px; height: 35px; }
  .icon-btn svg { width: 16px; height: 16px; }

  :root {
    --fs-h1: 2.3rem;
    --fs-h2: 1.75rem;
  }
}

@media (max-width: 640px) {
  .hero { border-radius: 0 0 var(--r-lg) var(--r-lg); }

  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .person__portrait img { aspect-ratio: 5 / 4; object-position: 50% 18%; }

  .job__top { flex-direction: column; }
  .job__salary { text-align: left; }
  .job__foot .btn { width: 100%; }

  /* Leiste wandert unter das Bild, damit das Foto frei bleibt —
     durch die geteilte Rundung bleibt es optisch ein Element. */

    .footer__bar { flex-direction: column; align-items: flex-start; }

  .cta__actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   20b. Handy und Tablet
   -------------------------------------------------------------------------- */

/* --- Bewerbungsjourney gestapelt ---------------------------------------
   Nebeneinander braucht die Bildspalte 240 px; darunter wird der Text aus
   dem Bildschirm gedrueckt. Schmal steht das Bild deshalb oben, bleibt
   unter der Kopfzeile stehen und wechselt weiter mit dem Schritt. */
@media (max-width: 700px) {
  .apply__split { display: block; }

  .apply__visual {
    position: sticky;
    top: 54px;                    /* Kopfzeile ist 72 px hoch, zusammengeschoben knapp darunter */
    z-index: 3;
    height: auto;
    padding: .8rem 0 1.5rem;
    /* Der Grund muss bis an die Kanten des dunklen Kastens reichen,
       sonst scheint der Text an den Seiten daran vorbei. */
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    background: linear-gradient(180deg,
                #260b15 0%, #260b15 74%, rgba(38, 11, 21, 0) 100%);
    align-items: center;
  }

  .apply__zaehler { margin-bottom: .5rem; text-align: center; }

  /* Das Foto traegt diesen Abschnitt. Mit 132 px war es ein Daumennagel
     neben viel leerem Bordeaux — jetzt nimmt es gut die halbe Breite. */
  .apply__frame {
    width: min(200px, 54vw);
    margin-inline: auto;
  }

  .apply__steps { padding: .25rem 0 2rem; }

  /* 52vh je Stufe ergaben fuenf Stufen von zusammen ueber 2600 px und
     dazwischen tote Zonen. 40vh haelt den Text zusammen und kuerzt den
     Abschnitt um rund ein Drittel. */
  .apply__step {
    min-height: 40vh;
    /* Zaehler und Bild stehen mittig — linksbuendiger Text darunter las
       sich wie ein zweiter Abschnitt. */
    text-align: center;
    align-items: center;
  }

  .apply__step h3 { margin-inline: auto; }

  .apply__kern,
  .apply__text { margin-inline: auto; }
}

/* --- Handy: Groessenverhaeltnisse -------------------------------------
   Auf dem Desktop tragen die Abstaende, schmal fielen sie auseinander.
   Gemessen bei 386 px Viewport. */
@media (max-width: 700px) {
  /* Der Hero ist bildschirmhoch. Mittig zentriert stand der Claim mit
     266 px Leere unter der Kopfzeile in der Luft. Jetzt sitzt der Text
     im oberen Drittel, die Luft sammelt sich ueber dem Button. */
  .hero__copy {
    margin-top: clamp(1.5rem, 5vh, 3.5rem);
    margin-bottom: auto;
  }

  /* Mit 30 px trug die Zeile den bildschirmhohen Hero nicht. */
  .hero__claim { font-size: clamp(2rem, 1.1rem + 4.6vw, 2.6rem); }

  /* Eyebrows lagen bei 11,3 px — als Wegweiser durch die Seite zu klein. */
  :root { --fs-eyebrow: .78rem; }

  /* Die Stufenangabe ist die Kernaussage der Karriere-Leiste und war mit
     10,3 px der kleinste Text der Seite. */
  .stop__time {
    font-size: .78rem;
    letter-spacing: .12em;
  }
}

/* --- Handy: Karriere-Leiste ---------------------------------------------
   Der Text stand in einer schmalen Spalte und brach fast in jeder Zeile um.
   Er beginnt jetzt frueher und laeuft bis an die Satzkante.

   Die --sx-Werte bleiben unangetastet: Sie sind die Stuetzpunkte der
   gezeichneten Kurve (siehe index.html, .journey__line--narrow). Wer sie
   hier verschiebt, hebt die Stationspunkte von der Linie ab — die Route
   im SVG muesste dieselbe Aenderung mitmachen.

   Die Breite kommt ueber right statt ueber eine Rechnung: left plus width
   ergab eine rechte Kante von 95 % zuzueglich des Versatzes und lief damit
   ueber den Satzspiegel hinaus, auf 320 px bis zwei Pixel an den Rand. */
@media (max-width: 700px) {
  .stop--links .stop__text,
  .stop--rechts .stop__text {
    left: calc(var(--sx) * 1% + clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem));
    right: 0;
    width: auto;
  }
}

/* --- Tippziele ---------------------------------------------------------
   Auf Touchgeraeten sind 44 px die uebliche Untergrenze. Die Symbole
   bleiben gleich gross, nur die Flaeche darum waechst. */
@media (max-width: 900px), (hover: none) {
  .icon-link {
    min-width: 44px;
    min-height: 44px;
    margin-inline: -6px;          /* haelt den optischen Abstand wie vorher */
  }

  .nav__signet { width: 44px; height: 44px; }

  /* Das Logo bleibt optisch gleich gross, die Flaeche darum waechst. */
  .nav__logo {
    display: inline-flex;
    align-items: center;
    padding-block: .95rem;
    margin-block: -.95rem;
  }

  .menu__list a {
    display: flex;
    align-items: center;
    min-height: 46px;
  }

  .footer__bar nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Rollenbezeichnung war mit 11,5 px an der Lesbarkeitsgrenze */
  .person__id span { font-size: .8rem; }
}

/* --- Zeilenlaenge auf dem Tablet ---------------------------------------
   Zwischen 700 und 1100 px laufen Absaetze auf ueber 80 Zeichen. Ab etwa
   70 Zeichen wird das Zurueckspringen ins naechste Zeilenende muehsam. */
@media (min-width: 701px) and (max-width: 1100px) {
  .lead,
  .split__copy p,
  .stop__text p,
  .apply__step p,
  .hero__sub { max-width: 62ch; }

  .stop__text p { max-width: 54ch; }
}

/* --------------------------------------------------------------------------
   21. Barrierefreiheit / Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* Kein Dauerlauf — der Streifen laesst sich stattdessen wischen */
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; }
}

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