/* ═══════════════════════════════════════════════════════════════════
   VISUELLE EBENE — Raum, Licht, Bilder

   Ausgangsbefund (04.08.2026): über 11.500px Startseite lagen in einem
   einzigen Papierton, kein einziges Bild, jede Sektion gleich laut.
   Typografie allein erzeugt Respekt, aber keine Sehnsucht.

   Diese Datei bringt beides:
     1. Raum   — dunkler Auftakt mit Lichtquelle, Korn, Tiefe
     2. Bilder — sechs Motive, jedes mit eigener Rolle

   Grundsätze:
   - Kein Bild liegt einfach vollflächig hinter Text. Wo Schrift auf
     Bild trifft, trennt eine Maske.
   - Jedes Bild hat feste Maße im Markup, also kein Layoutsprung.
   - Ohne JS sind alle Bilder sichtbar. Ein Startzustand, der auf JS
     wartet, wäre ein Bild, das bei einem Skriptfehler verschwindet.
   - Kontraste bleiben wie geprüft.
   ═════════════════════════════════════════════════════════════════ */

:root {
  --light-x: 74%;
  /* Der Auftakt war bei 6rem gedeckelt — auf 1440px las sich das als
     große Überschrift, nicht als Ansage. */
  --fs-hero: clamp(2.9rem, 9.4vw, 8rem);
}

/* ─── Korn ─────────────────────────────────────────────────────────
   Ein flächiger Farbton ohne Korn liest sich als unbedrucktes Papier.
   feTurbulence als data-URI: kein Request, kein Asset im Register. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ═══ 1. DER AUFTAKT WIRD EIN RAUM ═══════════════════════════════ */

.auftakt-v2 {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  /* Der sticky Kopf liegt im Fluss darüber. Ohne diesen Zug nach oben
     begänne der dunkle Grund erst unter der Leiste — ein heller Balken
     über dem Raum. Das Padding gibt dem Inhalt die Höhe zurück. */
  margin-block-start: -120px;
  padding-block-start: 120px;
  background:
    radial-gradient(62% 56% at var(--light-x) 26%,
      rgba(113, 191, 68, 0.24) 0%, rgba(52, 108, 74, 0.28) 32%, transparent 68%),
    radial-gradient(88% 74% at 6% 96%, rgba(11, 34, 37, 0.70) 0%, transparent 62%),
    linear-gradient(158deg, #1b464b 0%, var(--petrol) 44%, var(--petrol-deep) 100%);
  color: rgba(255, 255, 255, 0.90);
}

/* Der Lichtkegel liegt als eigene Ebene darüber, weil nur er sich beim
   Scrollen bewegt — der Grund bleibt stehen. Diese Differenz liest das
   Auge als Entfernung. */
.auftakt-v2::before {
  content: '';
  position: absolute;
  inset: -25% -10% -10%;
  z-index: -2;
  background: radial-gradient(44% 42% at var(--light-x) 32%,
    rgba(150, 220, 105, 0.18) 0%, rgba(113, 191, 68, 0.06) 44%, transparent 72%);
}

/* Vignette schließt den Raum an den Rändern. */
.auftakt-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(115% 92% at 50% 46%,
    transparent 38%, rgba(5, 18, 20, 0.52) 100%);
}

/* Textfarben umkehren.
   `!important` ist hier die Aufgabe dieser Ebene, kein Notnagel: der
   Auftakt wurde durchgehend für hellen Grund gerechnet, und `.said`,
   `.kicker`, `.lede` tragen eigene, spezifischere Farbregeln aus vier
   Stylesheets. Der Grund kippt an genau einer Stelle — dann muss auch
   die Schrift an genau einer Stelle kippen. */
.auftakt-v2 h1,
.auftakt-v2 .said { color: #ffffff !important; }

/* Das Logo-Grün #71bf44 käme auf Petrol nur auf 3.1:1. Dieser hellere
   Ton liegt bei 8.0:1 und bleibt erkennbar dasselbe Grün. */
.auftakt-v2 .voice,
.auftakt-v2 em,
.auftakt-v2 i { color: #a8e07a !important; }

.auftakt-v2 .said-over,
.auftakt-v2 .kicker,
.auftakt-v2 .shiftband-legend { color: rgba(255, 255, 255, 0.66) !important; }

.auftakt-v2 p,
.auftakt-v2 .said-under,
.auftakt-v2 .w-title { color: rgba(255, 255, 255, 0.88) !important; }

/* `:not(.btn)` ist der Grund, warum diese Ebene keine Schaltflaeche
   verschluckt: eine Schaltflaeche bringt ihren eigenen Grund mit und
   damit auch ihre eigene Schriftfarbe. Ohne die Ausnahme bekam ein
   `.btn-light` im Auftakt weisse Schrift auf weissem Grund — unsichtbar,
   und zwar fuer jeden kuenftigen Button hier, nicht nur fuer einen. */
.auftakt-v2 a:not(.btn),
.auftakt-v2 .w-meta { color: rgba(255, 255, 255, 0.72) !important; }
.auftakt-v2 a:not(.btn):hover,
.auftakt-v2 a:hover .w-title { color: #ffffff !important; }

.auftakt-v2 hr,
.auftakt-v2 [class*="rail"],
.auftakt-v2 [class*="divider"] { border-color: rgba(255, 255, 255, 0.20) !important; }

/* ─── Kopfleiste über dem Auftakt ──────────────────────────────────
   Warmweiß mit dunkler Schrift wäre über dem Raum ein heller Balken,
   der die Tiefe sofort zunichte macht. `.scrolled` setzt main.js. */
body:has(.auftakt-v2) .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
}
body:has(.auftakt-v2) .site-header:not(.scrolled) .main-nav a { color: rgba(255,255,255,0.88); }
body:has(.auftakt-v2) .site-header:not(.scrolled) .main-nav a:hover { color: #fff; }
body:has(.auftakt-v2) .site-header:not(.scrolled) .logo img {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
body:has(.auftakt-v2) .site-header:not(.scrolled) .burger span { background: #fff; }
body:has(.auftakt-v2) .site-header:not(.scrolled) .nav-cta {
  background: var(--green);
  color: #0e2629;
}

/* ─── Dunkle Sektionen bekommen Tiefe ──────────────────────────────
   Petrol war eine flache Füllfarbe. Ein Raum hat eine Lichtquelle und
   Ecken, die abfallen — sonst ist er ein Rechteck. */
.section-dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 86% at var(--light-x) 4%,
      rgba(113, 191, 68, 0.15) 0%, rgba(30, 74, 80, 0.52) 34%, transparent 72%),
    linear-gradient(168deg, #1a4247 0%, var(--petrol) 46%, var(--petrol-deep) 100%);
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%,
    transparent 42%, rgba(6, 20, 22, 0.40) 100%);
}

/* Helle Sektionen atmen unterschiedlich — ein sanfter Wechsel gibt dem
   Scrollen einen Puls, ohne nach Streifen auszusehen. */
.section-tint {
  position: relative;
  background:
    radial-gradient(78% 58% at var(--light-x) 0%,
      rgba(113, 191, 68, 0.05) 0%, transparent 60%),
    var(--cream);
}

/* ═══ 2. DIE BILDER ══════════════════════════════════════════════ */

/* ─── Bildbühne des Auftakts ───────────────────────────────────────
   Das Bild besetzt die rechte Hälfte und läuft über eine Verlaufsmaske
   in den dunklen Raum aus. Die Headline steht links auf dem Grund, den
   sie braucht — kein Textschatten, keine Abdunklungsplatte. */
.hero-stage {
  position: absolute;
  inset: 0 0 0 auto;
  width: 66%;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.22) 32%, #000 70%);
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.22) 32%, #000 70%);
}
.hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Die helle Fensterwand des Motivs sitzt links. Bliebe sie dort,
     liefe die weiße Headline genau hinein. */
  object-position: 66% 50%;
  opacity: 0.68;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.06);
}
.hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 58%, rgba(9, 28, 31, 0.58) 100%),
    linear-gradient(to top, rgba(9, 28, 31, 0.70), transparent 44%);
}

/* ─── Gemeinsame Grundlage aller Bildfiguren ───────────────────────
   `.story-figure` sitzt in einer Kapitelspalte, `.page-anchor` im
   Einstiegsbereich einer Unterseite. Die Rolle macht der Modifier. */
.story-figure,
.page-anchor {
  position: relative;
  margin: clamp(2.2rem, 5vw, 3.6rem) 0;
}
.story-figure picture,
.page-anchor picture { display: block; }
/* Der Aufdeck-Block fuer .story-figure und .page-anchor stand hier.
   Beide Klassen kommen in keiner erzeugten Seite mehr vor; Einblendungen
   laufen ausschliesslich ueber das zentrale .rv-System (style.css,
   js/main.js). */

/* Reduced Motion: sofort der hochwertige Endzustand. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage img { transform: scale(1.06) !important; }
}

/* ═══ 4. AKTIONSZEILE ════════════════════════════════════════════
   Eine primäre Aktion, die zweite als Textzeile. Zwei gleich schwere
   Buttons nebeneinander sind das KI-UI-Muster, das hier nicht
   vorkommen soll — und sie zwingen den Blick zu wählen, statt einem
   Weg zu folgen. */
.chapter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.action-line {
  color: var(--gray);
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.action-line em {
  color: var(--petrol);
  font-family: var(--font-editorial);
  font-size: 1.06em;
  border-block-end: 1px solid color-mix(in srgb, var(--petrol) 35%, transparent);
  padding-block-end: 1px;
  margin-inline-start: 0.35ch;
}
.action-line:hover em { border-block-end-color: var(--petrol); }

/* Bildnachweis des Auftakts. Das Hero-Motiv ist dekorativ und hat keine
   Bildunterschrift — der Nachweis steht deshalb als eigene, sehr leise
   Zeile am unteren Rand des Raums. Wie eine Bildzeile am Seitenrand,
   nicht wie ein Hinweisbanner. */
.hero-credit {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUTSYSTEM — eine Kante für die ganze Website

   Befund vom 04.08.2026, gemessen über zehn Seiten bei 1440px: die
   Überschrift begann auf acht verschiedenen Positionen zwischen 148px
   und 404px. Ursache war eine Markenspalte mit `auto`-Breite, die sich
   nach der Länge des jeweiligen Labels richtete — "Über uns" kurz,
   "Jobs · Beispielstellen" lang. Jede Seite fing woanders an.

   Das ist die Ursache des Eindrucks, die Seite sei "zerhackt" und
   "zufällig": nicht die Bilder, nicht die Farben, sondern die Kante.
   ═════════════════════════════════════════════════════════════════ */

:root {
  /* Die Markenspalte links neben Kicker und Titel. Fest, nicht vom
     Inhalt abhängig — sonst wandert die Kante mit dem Label. */
  --marker-col: clamp(6rem, 9vw, 9.5rem);
  --marker-gap: clamp(1rem, 2vw, 1.75rem);
  /* Der gemeinsame Einzug aller Inhaltsspalten. Alles, was Text trägt,
     beginnt auf dieser Kante — egal auf welcher Seite. */
  --text-indent: calc(var(--marker-col) + var(--marker-gap));
  /* Eine Zeilenlänge für die ganze Website. Vorher hatte praktisch jede
     Sektion ihre eigene. */
  --measure: 62ch;
}

/* Wenn die Marke über dem Titel steht, gibt es keinen Einzug mehr. */
@media (max-width: 860px) {
  :root { --text-indent: 0px; }
}

/* ─── Die Startseite auf dieselbe Kante ────────────────────────────
   Der Auftakt und die Kapitel der Startseite haben keine Markenspalte
   und begannen deshalb 160px weiter links als jede Unterseite. Beim
   Wechsel von der Startseite auf "Für Bewerber" sprang die gesamte
   Seite — das ist der sichtbarste Bruch im ganzen System. */
@media (min-width: 861px) {
  .auftakt-v2 .wrap > *,
  .people-v2 .wrap > *,
  .gap-v2 .wrap > *,
  .loc-v2 .wrap > * {
    margin-inline-start: var(--text-indent);
  }
  /* Bilder und Bänder brechen bewusst aus dieser Kante aus — sie sind
     die Ausnahme, die sie sichtbar macht. */
  .auftakt-v2 .wrap > .hero-credit { margin-inline-start: var(--text-indent); }
  .sf-people,
  .sf-gap,
  .sf-band { margin-inline-start: 0 !important; }
}

/* ─── Eine Zeilenlänge ─────────────────────────────────────────────
   Fließtext bekommt überall dieselbe Maximalbreite. Vorher lagen die
   Werte je nach Sektion zwischen 46ch und voller Wrapbreite. */
.chapter-lede,
.said-under,
.lede,
.gap-story,
.pp-close,
.lo-lede { max-width: var(--measure); }

/* ─── Vertikaler Rhythmus ──────────────────────────────────────────
   Kapitel beginnen und enden im selben Takt. Vorher trug jede Sektion
   ihren eigenen Abstand, was das Scrollen ungleichmäßig machte. */
.chapter:not(.auftakt-v2),
.section-tint,
.section-dark {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
/* Der Auftakt ist ausgenommen: sein oberer Innenabstand traegt den
   sticky Kopf und auf dem Telefon zusaetzlich das Bildband. Das
   Shorthand `padding-block` hat ihn ueberschrieben — Logo und Burger
   lagen danach auf dem Kicker. */
.auftakt-v2 { padding-block-end: clamp(3.5rem, 8vw, 7rem); }

/* ─── Aufgeloest: der Ausgleichs-Einzug ────────────────────────────
   Hier bekamen Kontakt, Schweiz, Downloads und die Rechtstexte einen
   Rand von `--text-indent`, damit sie neben den Kapitelseiten standen,
   die links eine Markerspalte tragen.

   Seit die Seiten nach dem Vorbild der Startseite gebaut sind, hat
   keine von ihnen mehr eine Markerspalte — der Ausgleich schob sie
   deshalb 158px nach rechts, waehrend Startseite, Bewerber und
   Unternehmen auf der Wrap-Kante bei 148px stehen. Eine Kante entsteht
   jetzt dadurch, dass alle denselben Wrap benutzen, nicht dadurch, dass
   einzelne Seiten nachtraeglich verschoben werden.

   Jobdetail hatte hier ebenfalls eine Sonderregel — ihre Ursache lag
   aber in einer abweichenden Wrap-Breite (1200px statt 1240px) und ist
   dort behoben, wo sie entstand: css/job-detail-v2.css. */

/* ─── Jobdetail: horizontale Kapitelnavigation begrenzen ───────────
   Die Navigation scrollt auf schmalen Viewports bewusst horizontal.
   Ohne Breitenbegrenzung schiebt sie aber das ganze Dokument mit —
   gemessen 13px Overflow bei 320px. Der Scroll bleibt, er bleibt nur
   im Container. */
.jd2-sr-nav {
  max-width: 100%;
  overscroll-behavior-x: contain;
}
/* Die Stellenakte enthaelt mehrere bewusst horizontal scrollende
   Leisten. Deren Inhalt ist visuell geclippt, spannt das Dokument aber
   trotzdem auf — gemessen 13px bei 320px. `clip` sperrt das ab, ohne
   das sticky Verhalten der Kopfleiste zu brechen (was `hidden` taete). */
.jd2 { overflow-x: clip; }
/* Lange Metaangaben (Ort · PLZ · Einsatzart) brechen auf schmalen
   Viewports um, statt die Zeile aufzuspannen. */
.jd2-meta,
.jd2-meta-v3 { flex-wrap: wrap; max-width: 100%; }
.jd2-meta > *,
.jd2-meta-v3 > * { min-width: 0; overflow-wrap: anywhere; }

/* ─── Die Markenspalte selbst ──────────────────────────────────────
   Lange Labels ("Jobs · Beispielstellen") brachen in der festen Spalte
   mit Trennstrich um — mitten im Wort, direkt neben der Headline. Sie
   dürfen umbrechen, aber nicht getrennt werden. */
.chapter-num,
.chapter-kicker:first-child {
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════
   DER AUFTAKT ALS BEWUSSTE AUSNAHME

   Die Vereinheitlichung der linken Kante war richtig — aber sie hat den
   Auftakt mit in das Unterseitenraster gezwungen (148 → 306px). Im
   direkten Vergleich dreier Varianten war das die schwächste Fassung:
   die Headline drängte sich auf drei kurze Zeilen zusammen, während
   rechts daneben viel Bild leer stand.

   Gewählt: eine eigene Achse für genau ZWEI Elemente — Kicker und
   Headline. Alles andere (Schichtband, Lede, die beiden Wege, der
   Bildnachweis) hält die globale Inhaltskante.

   Der Unterschied zu einem zufälligen Wert: Der Ausbruch ist an das
   Raster gebunden (ein Drittel des Standardeinzugs), er betrifft eine
   benennbare Gruppe, und er kehrt nirgends sonst wieder. Man liest ihn
   als Setzung, nicht als Versehen.

   Verworfen:
   - Voller Ausbruch: stark, aber die beiden Wege standen danach
     alleine eingerückt da und wirkten vom Auftakt abgelöst.
   - Asymmetrischer Bandausbruch: das Schichtband nach links zu ziehen
     erzeugte eine zweite Ausnahme ohne eigene Begründung.
   ═════════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  /* Ein Drittel des Standardeinzugs — nah genug am Raster, dass die
     Beziehung sichtbar bleibt, weit genug davor, dass die Ansage Raum
     bekommt.

     Der Einzug gilt fuer ALLE Kinder des Auftakts, nicht nur fuer die
     Headline. Vorher standen Kicker und Headline auf 198px und Text,
     Aktionen, Band und Bildnachweis auf 306px — zwei Kanten in einem
     Abschnitt, plus die 148px des restlichen Seite. Der Ausbruch ist
     eine Setzung fuer den ganzen Auftakt oder er ist keine. */
  .auftakt-v2 .wrap > * {
    margin-inline-start: calc(var(--text-indent) * 0.32) !important;
  }
  .auftakt-v2 .said {
    font-size: clamp(2.9rem, 10vw, 8.6rem);
  }
}

/* ─── Textzoom 200 % auf sehr schmalen Viewports ───────────────────
   Gemessen bei 320px mit verdoppelter Schriftgröße: 44px Overflow auf
   der Bewerberseite. Ursache waren lange Wörter in der FAQ und im
   Footer, die keine Umbruchstelle fanden.

   `anywhere` statt `break-word`: nur `anywhere` senkt tatsächlich die
   min-content-Breite eines Blocks — `break-word` lässt den Block so
   breit wie sein längstes Wort und verhindert den Overflow deshalb
   nicht. Bewusst nur unterhalb 400px, damit normale Zeilen überall
   sonst an ihren regulären Stellen brechen. */
@media (max-width: 400px) {
  .wrap p,
  .wrap li,
  .wrap dd,
  .wrap dt,
  .wrap h1,
  .wrap h2,
  .wrap h3,
  .wrap summary,
  .site-footer a { overflow-wrap: anywhere; }
}

/* Formularelemente schrumpfen nicht von selbst: als Flex- oder
   Grid-Kinder halten sie ihre intrinsische Mindestbreite und spannen
   den Container auf. Bei doppelter Schriftgröße auf 320px waren das
   32px Overflow auf der Initiativbewerbung. */
@media (max-width: 480px) {
  input, select, textarea, button, fieldset, legend, label {
    min-width: 0;
    max-width: 100%;
  }
  fieldset { padding-inline: 0; }
  .wrap[class*="form"] { padding-inline: var(--pad); }
}