/* AllcuraMed Personal — Design System V2 "Human Care"
   Tokens · Reset · Typografie · Buttons · Formulare · Header · Footer */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-v7-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-v7-latin_latin-ext-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-v7-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-v9-latin_latin-ext-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-v9-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-v9-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-v26-latin_latin-ext-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-v26-latin_latin-ext-500italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* Farben V2 — Grün ist Signal, Träger sind Warmweiß + Petrol */
  --green: #71bf44;
  --green-dark: #407323;
  --green-deep: #33591d;
  --green-tint: #ecf5e3;
  --petrol: #16383c;
  --petrol-deep: #0e2629;
  --petrol-soft: #1e4a50;
  --petrol-tint: #e7efee;
  --ink: #1d2b25;
  --gray: #4c5a52;
  --line: #e3ded4;
  --line-dark: rgba(255, 255, 255, 0.14);
  --paper: #faf8f4;
  --cream: #f3efe7;
  --white: #ffffff;
  --error: #b3261e;
  --focus: #2563eb;

  /* Typografie V2 */
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', var(--font-body);
  --font-editorial: 'Newsreader', Georgia, serif;
  --fs-hero: clamp(2.9rem, 8vw, 6rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3: clamp(1.2rem, 2.2vw, 1.45rem);
  --fs-lede: clamp(1.05rem, 1.7vw, 1.3rem);
  --fs-quote: clamp(1.6rem, 3.4vw, 2.6rem);
  --fs-sm: 0.875rem;
  --fs-label: 0.8125rem;

  /* Layout */
  /* Eine Satzbreite fuer die ganze Website.
     Vorher stand hier ein fester Wert, waehrend `.chapter .wrap` mit
     `min(1240px, 92vw)` rechnete. Unterhalb von 1348px Fensterbreite
     liefen dadurch zwei verschiedene Satzspiegel nebeneinander — und
     mit ihnen zwei verschiedene linke Kanten, je nachdem welche Regel
     eine Seite traf. */
  --wrap: min(1240px, 92vw);
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(22, 56, 60, 0.10);
  --speed: 0.25s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Bewegungssystem — gilt für die ganze Website, nicht je Seite.
     --rv-dauer  Eintrittsdauer einer Einblendung
     --rv-ease   ausklingendes Ease-out — schneller Start, langes Landen
     --rv-stufe  Abstand zwischen zusammengehörigen Elementen
     --rv-max    Deckel für die Gesamtverzögerung einer Gruppe
     Die letzten beiden liest js/main.js aus, damit Zahl und Verhalten
     an einer Stelle stehen. */
  --rv-dauer: 640ms;
  --rv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rv-stufe: 80ms;
  --rv-max: 320ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Author-Regel: [hidden] muss auch dann greifen, wenn spätere Deklarationen
   display:grid/flex setzen (z. B. .job-chip). Sonst würden Hero-Chip-Varianten
   trotz hidden-Attribut sichtbar bleiben. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' on;
}
img, svg, video { max-width: 100%; display: block; }
/* Flex- und Grid-Kinder haben `min-width: auto` und schrumpfen deshalb
   nie unter ihre Inhaltsbreite — ein Bild in einer solchen Spalte
   ignoriert `max-width: 100%`. Gemessen bei 200 % Textzoom auf 320px:
   6px Ueberstand durch das Logo. */
img { height: auto; min-width: 0; }
a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
ul[class], ol[class] { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* Trefferflaechen: kurze Woerter ergeben schmale Ziele. Gemessen bei
   390px waren die Sprungziele der Rechtstexte 25px hoch und "Start" in
   der Brotkrumen-Zeile 31px breit. Die Flaeche waechst ueber Polster,
   nicht ueber display:block — sonst zerreisst der Satz. */
.breadcrumb a,
.lg-toc a,
.lg-doc li > a[href^="#"] {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.checkbox-row label a,
.field label a { display: inline-block; padding-block: 0.7rem; }
::selection { background: var(--green); color: var(--petrol-deep); }

.skip-link {
  /* `left: -9999px` schiebt den Link nach links aus dem Bild, seine
     Breite spannt das Dokument aber weiter auf. Bei verdoppelter
     Schriftgroesse auf 320px waren das 32px Overflow — unsichtbar, aber
     messbar und scrollbar. `translateX` nimmt ihn aus dem Layoutfluss,
     ohne dass er Platz beansprucht. */
  position: absolute; left: 0; transform: translateX(-100%); top: 0; z-index: 200;
  background: var(--petrol); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Typografie */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
p { max-width: 62ch; }
em.voice, .voice {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* Label/Marginalie — editorialer Kontrast zu großen Displays */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green-dark);
}
.kicker::before {
  content: ''; width: 0.85em; height: 0.85em; flex-shrink: 0;
  border: 2.5px solid var(--green);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.section-dark .kicker { color: var(--green); }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--gray); max-width: 54ch; }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.center { justify-items: center; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-weight: 500; font-size: 1rem; line-height: 1.2;
  padding: 0.95rem 1.9rem; border-radius: 999px;
  text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
  min-height: 48px;
}
/* CTA-Feedback-Familie: ein leiser Lift beim Hover, klare Rücknahme beim
   Druck, Pfeil gleitet mit. Eine Reaktion für alle Buttons — Wiederholung
   statt Effektvielfalt. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }
.btn .arr { transition: transform var(--speed) var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  .btn:hover .arr { transform: none; }
}
.btn-primary { background: var(--green-dark); color: var(--white); }
.btn-primary:hover { background: var(--green-deep); color: var(--white); box-shadow: 0 6px 20px rgba(51, 89, 29, 0.28); }
.btn-light { background: var(--white); color: var(--petrol); }
.btn-light:hover { background: var(--green-tint); color: var(--petrol); }
.btn-ghost { background: transparent; color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--green-dark); color: var(--green-deep); }
.section-dark .btn-ghost { color: #dfe9e7; box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.section-dark .btn-ghost:hover { color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.btn-lg { padding: 1.1rem 2.3rem; font-size: 1.08rem; }

/* Formulare */
label { font-weight: 500; font-size: var(--fs-sm); display: block; margin-bottom: 0.35rem; }
/* Fokus-Familie: das Label des aktiven Felds färbt sich ruhig grün mit —
   Orientierung beim Ausfüllen, keine Bewegung, verschiebt nichts. */
.field label { transition: color 0.18s var(--ease); }
.field:focus-within label { color: var(--green-dark); }
.field { margin-bottom: 1.15rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="file"], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem; min-height: 48px;
  transition: border-color var(--speed);
}
/* WebKit ignoriert min-height auf <select> solange die native Appearance
   aktiv ist — gemessen 26px statt der gesetzten 48px (Regressionslauf
   03.08.2026, /personalanfrage/ + /initiativbewerbung/ @ webkit-*).
   appearance:none macht das Feld ueber alle Engines gleich hoch; der
   Dropdown-Pfeil kommt als data-URI (CSP erlaubt img-src data:). */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23183c3f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Der Rahmen wechselt bei jedem Fokus die Farbe — auch bei Mausklick,
   als ruhige Ortsangabe. Der Fokusring bleibt davon unberuehrt.

   Hier stand `outline: none`. Damit hob diese eine Zeile die globale
   Regel `:focus-visible { outline: 3px solid var(--focus) }` fuer jedes
   Eingabefeld der Website auf, und uebrig blieb ein Farbwechsel von 1px
   Rahmen. Gemessen am 06.08.2026 auf /kontakt/ in Chromium, WebKit und
   Firefox: Kontrast zwischen fokussiertem und unfokussiertem Zustand
   1.00:1 — der Wechsel kam dort wegen einer spaeter geladenen Regel
   gleicher Spezifitaet gar nicht an. Tastaturnutzer sahen nicht, wo sie
   standen. */
input:focus, select:focus, textarea:focus { border-color: var(--green-dark); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: var(--fs-sm); margin-top: 0.3rem; }
.checkbox-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-sm); }
.checkbox-row input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--green-dark); flex-shrink: 0; min-height: 0; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(250, 248, 244, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 88px;
}
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.logo img {
  display: block;
  height: clamp(60px, 4.45vw, 66px);
  width: auto;
  max-width: min(56vw, 210px);
}
/* `wrap` ist das Sicherheitsnetz, kein Entwurf: bei normaler Schrift
   greift es nie, weil die Navigation erst ab 1080px erscheint und dort
   121px Luft hat. Es faengt den Fall ab, in dem die Grundschrift per CSS
   vergroessert wird — dann waechst die Navigation auf 1507px, waehrend
   der Breakpoint stehenbleibt (siehe Kommentar dort). Ohne `wrap` sind
   das 272px Ueberlauf. */
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 1.8vw, 1.75rem); }

/* `> a` statt `a:not(.btn)`: die beiden Zielgruppenaktionen liegen in
   .nav-wege und sind damit ausgenommen, ohne dass jede Regel eine
   Ausnahme mitschleppen muss. Vorher hing an dieser Stelle ein
   :not(.btn), weil der Header-CTA sonst sein Polster verlor — den CTA
   gibt es nicht mehr. */
.main-nav > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500; font-size: 0.99rem; text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.main-nav > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0.55rem;
  height: 2px; border-radius: 2px; background: var(--green);
  transition: right var(--speed) var(--ease);
}
.main-nav > a:hover::after,
.main-nav > a[aria-current="page"]::after { right: 0; }
.main-nav > a:hover,
.main-nav > a[aria-current="page"] { color: var(--green-deep); }
/* Die aktuelle Seite traegt zusaetzlich Gewicht — der Unterstrich allein
   waere eine reine Farbaussage. */
.main-nav > a[aria-current="page"] { font-weight: 600; }

/* Die beiden Wege des Menues, als Aktionspaar in der Kopfzeile: gruen
   fuer Bewerber, Petrol fuer Einrichtungen. Sie stehen zusammen, aber
   getrennt — und keiner der beiden ist die kleinere Nebenaktion. */
.nav-wege {
  display: inline-flex;
  align-items: center;
  /* Genug Abstand, dass es zwei Aktionen sind und nicht ein geteilter
     Knopf — und ein groesserer davor, damit die Gruppe sich von den
     Seitenlinks loest. */
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-inline-start: 0.9rem;
}
.nav-weg {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--speed) var(--ease), transform 120ms var(--ease);
}
.nav-weg--job { background: var(--green-dark); color: var(--white); }
.nav-weg--job:hover,
.nav-weg--job:focus-visible { background: var(--green-deep); color: var(--white); }
.nav-weg--personal { background: var(--petrol); color: var(--white); }
.nav-weg--personal:hover,
.nav-weg--personal:focus-visible { background: var(--petrol-deep); color: var(--white); }
.nav-weg:active { transform: scale(0.985); }
/* Ortsmarke auch auf der Aktion — nicht ueber Farbe, sondern ueber einen
   Ring, der sich vom gefuellten Grund abhebt. */
.nav-weg[aria-current="page"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px currentColor; }
.burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 0.75rem; border-radius: var(--radius-sm);
}
.burger span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform var(--speed), opacity var(--speed); }

/* Der Breakpoint steht in em, weil er dann der Schriftgroesse folgt,
   die der Nutzer in seinem Browser eingestellt hat — `em` bezieht sich
   in einer Media Query auf die INITIALE Schriftgroesse, nicht auf ein
   spaeter gesetztes `html { font-size }`. Wer seine Standardschrift auf
   32px stellt, bekommt den Burger also bis 2160px. Wer die Schrift per
   Seiten-CSS vergroessert, nicht — dafuer ist `flex-wrap` an der
   Navigation zustaendig. Der vorherige Kommentar behauptete hier das
   Gegenteil.

   70em statt der frueheren 56.25em (900px). Bei 901px war die
   Navigation zwar sichtbar, aber "Für Bewerber" und "Für Unternehmen"
   brachen zweizeilig um, und das Logo wurde zusammengedrueckt — von
   118px natuerlicher Breite blieben bei 920px noch 5px.

   Der erste Anlauf setzte 67.5em (1080px), weil das Logo ab 1068px
   unbeschnitten ist. Das war die mathematisch gerade noch passende
   Breite und damit falsch: bei exakt 1081px ist `--wrap` (92vw) 994px
   breit, die Navigation braucht 995px — sie rutschte in zwei Reihen,
   .main-nav wurde 107px hoch, der Header 108px. Ein Pixel weiter war
   alles wieder einzeilig. Gemessen am 06.08.2026, live gefunden.

   Der Umschlag liegt bei 1120px: `--wrap` (92vw) ist dort 1030px breit,
   35px mehr als der gemessene Bedarf — Reserve statt eines Pixels.
   Als `max-width` steht deshalb 69.9375em (1119px), damit 1120px schon
   zur Navigation gehoert und nicht mehr zum Burger. */
@media (max-width: 69.9375em) {
  /* Der Abstand darf bei Textzoom nicht wie die Grundschrift wachsen:
     1.5rem wurden bei 200% zu 48px und schoben den Burger auf einem
     320px-Viewport 14px aus dem Bild. Das Logo bleibt gross; nur der
     leere Zwischenraum reagiert jetzt auf die reale Breite. */
  .site-header .bar { min-height: 92px; gap: clamp(0.5rem, 3vw, 1rem); }
  .logo img { height: clamp(62px, 17vw, 70px); max-width: min(58vw, 224px); }
  .burger { display: flex; }
  .main-nav { display: none; }
  body.nav-locked { overflow: hidden; overscroll-behavior: contain; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ─── Menue ────────────────────────────────────────────────────────
   Oeffnet aus dem Burger als voller Layer. Vorher lag hier das Care
   Portal mit Bogen-SVG, Zielgruppen-Schaltern und zehn Links mit
   Meta-Zeilen; das CSS dafuer waren rund 90 Regeln.

   Was ein Menue braucht: lesbare Gruppen, Trefferflaechen, ein
   sichtbarer Schliesser. Mehr nicht. */
.menue {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  /* dvh statt vh: in Safari waechst und schrumpft die Browserleiste, und
     100vh rechnet mit dem groessten Zustand — der Kontaktblock lag dann
     hinter der Leiste. */
  min-height: 100dvh;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.menue.open { opacity: 1; }
.menue[hidden] { display: none; }

/* Der Kopf bleibt stehen: der Schliessen-Knopf muss erreichbar sein,
   auch wenn der Inhalt scrollt. Der obere Sicherheitsabstand liegt hier
   und nicht am Overlay, damit die Flaeche unter der iOS-Statusleiste
   trotzdem durchgefaerbt ist. */
.menue-kopf {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad);
  padding-block-start: calc(1rem + env(safe-area-inset-top));
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}
.menue-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 0;
}
.menue-logo img { display: block; width: clamp(148px, 42vw, 176px); height: auto; }
.menue-schliessen {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--petrol);
  border-radius: 50%;
}
.menue-schliessen:hover { background: var(--cream); }

.menue-inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1rem, 3vw, 1.5rem) var(--pad) clamp(1.5rem, 4vw, 2.5rem);
  padding-block-end: calc(clamp(1.5rem, 4vw, 2.5rem) + env(safe-area-inset-bottom));
  max-width: var(--wrap);
  width: 100%;
  margin-inline: auto;
}

/* Eine Frage statt des Wortes "Menue". Sie hilft bei der Entscheidung,
   die direkt darunter zu treffen ist. Klein genug, dass sie die beiden
   Wege auf dem Telefon nicht aus dem ersten Bild schiebt. */
.menue-titel {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--petrol);
}

/* Eine zusammenhaengende Flaeche mit zwei Zonen, nicht zwei Karten:
   die Rundung liegt aussen, die Zonen stossen aneinander. */
.menue-wege {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 600px) {
  .menue-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zwei Flaechen, nicht zwei Karten: der Bewerberweg hell und offen, der
   Einrichtungsweg dunkel und sachlich. Die Flaeche selbst ist das
   Ordnungsmittel — deshalb keine Rahmen, keine Schatten, kein Icon. */
.weg {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(0.9rem, 3vw, 1.25rem);
}
.weg--job { background: var(--green-tint); }
.weg--personal { background: var(--petrol); }

.weg-marke {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.weg--job .weg-marke { color: var(--green-deep); }
.weg--personal .weg-marke { color: #b9d3a4; }

/* Die Primaeraktion traegt die Farbe des jeweils anderen Pols: gruen auf
   dem hellen Weg, gruen auf dem dunklen — dieselbe Handlungsfarbe, damit
   "hier geht es weiter" nicht zweimal gelernt werden muss. */
.weg-aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--speed) var(--ease), transform 120ms var(--ease);
}
.weg--job .weg-aktion { background: var(--green-dark); color: var(--white); }
.weg--job .weg-aktion:hover,
.weg--job .weg-aktion:focus-visible { background: var(--green-deep); color: var(--white); }
.weg--personal .weg-aktion { background: var(--green); color: var(--petrol-deep); }
.weg--personal .weg-aktion:hover,
.weg--personal .weg-aktion:focus-visible { background: #8ed35f; color: var(--petrol-deep); }
.weg-aktion:active { transform: scale(0.985); }
/* Bei 200 % Textzoom auf 320px ist die Zone 157px breit und "Personal
   anfragen" braucht 239px. Der Text bekommt eine eigene Box, die
   umbrechen darf; der Pfeil behaelt seine Groesse. */
.weg-aktion > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.weg-aktion .arr { flex: 0 0 auto; transition: transform var(--speed) var(--ease); }
.weg-aktion:hover .arr,
.weg-aktion:focus-visible .arr { transform: translateX(4px); }

/* Die Nebenwege der Zone: keine Trennlinie je Zeile, nur Abstand. */
.weg-links { list-style: none; }
.weg-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.weg--job .weg-links a { color: var(--petrol); }
.weg--job .weg-links a:hover,
.weg--job .weg-links a:focus-visible { color: var(--green-deep); }
.weg--personal .weg-links a { color: #dfe9e7; }
.weg--personal .weg-links a:hover,
.weg--personal .weg-links a:focus-visible { color: var(--green); }

/* Die aktuelle Seite traegt einen Balken, keinen Punkt: ein Punkt liest
   sich als Statusanzeige, ein Balken als Ortsmarke. */
.weg-links a[aria-current='page'],
.weg-aktion[aria-current='page'],
.menue-allgemein a[aria-current='page'] {
  font-weight: 600;
  box-shadow: inset 3px 0 0 currentColor;
  padding-inline-start: 0.6rem;
}

/* Unternehmensseiten: vorhanden, aber nachgeordnet. Zwei ruhige
   Spalten statt einer vierten Liste mit Linien. */
.menue-allgemein {
  display: grid;
  /* Zwei Spalten, solange 7.5rem hineinpassen. Bei 200 % Textzoom auf
     320px sind das 240px pro Spalte — dann bleibt eine, statt dass
     "Digitale Transparenz" die Flaeche um 31px sprengt. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: 0 1rem;
  padding-block-start: 0.25rem;
  border-block-start: 1px solid var(--line);
}
.menue-allgemein a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  color: var(--gray);
  text-decoration: none;
}
.menue-allgemein a:hover,
.menue-allgemein a:focus-visible { color: var(--petrol); }

.menue-kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  margin-block-start: auto;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--line);
}
.menue-kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--green-deep);
}
.menue-kontakt span { font-size: var(--fs-sm); color: var(--gray); }

/* Ab zwei Spalten ist mehr Hoehe da als Inhalt. Ohne Zentrierung stand
   die Komposition oben und darunter lagen bei 1440x900 rund 350px Leere,
   mit dem Kontakt allein am unteren Rand. Diese Regeln stehen bewusst
   NACH .menue-kontakt — sonst gewinnt dort `margin-block-start: auto`. */
@media (min-width: 600px) {
  .menue-inhalt {
    justify-content: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    /* Zwei Zonen auf 1240px Satzbreite werden zu zwei Bannern. */
    max-width: min(920px, var(--wrap));
  }
  .menue-kontakt { margin-block-start: 0; }
  .weg { padding: clamp(1.25rem, 2.5vw, 1.75rem); gap: 0.8rem; }
  .weg-links a { min-height: 48px; }
}

/* Die beiden Zonen kommen leicht versetzt an — 12px, einmal, beim
   Oeffnen. Danach bewegt sich nichts mehr. */
.menue .weg {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.menue.open .weg { opacity: 1; transform: none; }
.menue.open .weg--personal { transition-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
  .menue, .menue .weg, .weg-aktion, .weg-aktion .arr { transition: none; }
  .menue .weg { opacity: 1; transform: none; }
  .weg-aktion:active { transform: none; }
}


/* Footer */
.site-footer { background: var(--petrol-deep); color: #c9d6d3; }

/* Markenabschluss: das offizielle Logo transparent auf dem Petrol.
   Die Zielbreite (~200px Desktop, ~160px Mobile) kommt aus den echten
   Proportionen des Logos (232.47 : 110.61), nicht aus einem Kasten.
   Kein Filter, keine Platte, kein Schatten — die Markenfarben bleiben. */
/* Fokusfläche umschließt die optische Marke eng — das Logo nutzt die
   beschnittene Display-Variante (img/logo-allcuramed-footer.svg), deren
   viewBox nur den Schutzraum um die Grafik trägt. Sichtbare Markenbreite
   ~197px Desktop / ~165px Mobile. */
.fuss-logo { display: inline-block; line-height: 0; margin-block-end: clamp(1rem, 2vw, 1.35rem); }
.fuss-logo img { width: clamp(180px, 16vw, 215px); height: auto; display: block; }
.fuss-logo:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 2px; }
.fuss-social {
  display: flex;
  gap: 0.75rem;
  margin-block-start: 1rem;
}
.fuss-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--white);
  opacity: 0.7;
  transition: opacity var(--speed) var(--ease);
}
.fuss-social a:hover,
.fuss-social a:focus-visible { opacity: 1; }
.fuss-social a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.fuss-firma { margin: 0.9rem 0 0; font-size: var(--fs-sm); color: #7f9691; letter-spacing: 0.01em; }
.site-footer .cols {
  display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Auf dem Telefon stapelten sich vier Gruppen mit je 2.5rem Abstand und
   0.6rem zwischen jedem einzelnen Link zu rund 900px Fusszeile. Die
   Angaben bleiben vollstaendig — sie stehen nur enger und ab 380px in
   zwei Spalten. Trefferflaechen bleiben bei 44px, die Schrift bleibt
   ihre Groesse: gekuerzt wird der Leerraum, nicht die Lesbarkeit. */
/* Nur bis 700px: darueber traegt die Fusszeile ohnehin drei bis vier
   Spalten, und zwei erzwungene machten sie hoeher statt kuerzer
   (gemessen bei 768px: 752 -> 862px). */
@media (max-width: 700px) {
  .site-footer .cols {
    gap: 1.5rem 1.25rem;
    padding-block: clamp(2rem, 5vw, 2.75rem) 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Der Kontaktblock traegt Adresse und Zeiten und braucht die Breite. */
  .site-footer .cols > div:first-child { grid-column: 1 / -1; }
  .site-footer .cols > div:first-child ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
  }
  .site-footer h3 { margin-bottom: 0.4rem; font-size: 0.8rem; }
  .site-footer li { margin-bottom: 0; }
  /* Die Trefferflaeche kommt aus der Zeilenhoehe des Links, nicht aus
     einem Abstand zwischen den Zeilen — sonst waechst die Liste wieder. */
  .site-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer .legal { padding-block: 1rem; gap: 0.5rem 1.25rem; }
  .site-footer .legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 479px) {
  /* Zwei Spalten lassen je rund 150px. Die Gruppentitel stehen in
     gesperrten Versalien; "FÜR UNTERNEHMEN" brach dort mitten im Wort
     um ("UNTERNEHME / N") — auf jedem Telefon, auf jeder Seite.
     Die Grenze lag bei 380px und traf damit kein aktuelles Geraet. */
  .site-footer .cols { grid-template-columns: minmax(0, 1fr); }
  .site-footer .cols > div:first-child ul { display: block; }
}
.site-footer h3 {
  color: var(--white); font-size: 0.95rem; margin-bottom: 1rem;
  font-family: var(--font-body); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.site-footer a { color: #c9d6d3; text-decoration: none; }
.site-footer a:hover { color: var(--green); text-decoration: underline; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer .legal {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  border-top: 1px solid var(--line-dark);
  padding-block: 1.4rem; font-size: var(--fs-sm);
}
.site-footer .legal .spacer { flex: 1; }

/* Utility */
.grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
section { padding-block: clamp(3rem, 8vw, 6.5rem); }
.section-tint { background: var(--cream); }
.section-dark { background: var(--petrol); color: #dfe9e7; }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lede { color: #a9bfbb; }

/* Bogen-Übergänge zwischen Flächen */
.arc-divider { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.arc-divider path { fill: var(--paper); }
.arc-divider.to-cream path { fill: var(--cream); }
.arc-divider.to-petrol path { fill: var(--petrol); }

/* Reveal / Motion-Basisklassen (GSAP setzt Werte, CSS nur Fallback) */
/* Reveal — progressive enhancement.
   Standard: sichtbar (kein JS → Endzustand hochwertig).
   Erst unter html.js-reveal wird Startzustand versteckt und via .in
   eingeblendet. main.js setzt html.js-reveal bei Init. */
/* Das einzige Bewegungsmuster der Website. Vorher stand hier 0.7s/28px
   und in editorial.css noch einmal 0.45s/14px — zwei Definitionen für
   dieselbe Klasse, von denen die Ladereihenfolge entschied.

   Werte: 640ms mit ausklingendem Ease — die ersten 200ms tragen fast
   den ganzen Weg, der Rest ist Landen; zügiges Scrollen wartet also nie
   sichtbar. 24px Versatz liest sich als Ankommen. Nur opacity und
   transform — beides läuft ohne Layout im Compositor. js/main.js
   choreografiert damit die ganze Seite: jede Sektion baut sich beim
   Ankommen auf, Listen und Raster staffeln je Kind. */
.rv {
  transition:
    opacity var(--rv-dauer) var(--rv-ease) var(--rv-delay, 0ms),
    transform var(--rv-dauer) var(--rv-ease) var(--rv-delay, 0ms);
}
/* transition: none im Startzustand: die Klasse kommt teils zur Laufzeit
   (Auto-Choreografie in main.js) — ohne das würde das Verstecken selbst
   als 640ms-Ausblendung animieren. Der Weg ZU .in liest die Transition
   aus der .rv-Regel und bleibt animiert. */
html.js-reveal .rv:not(.in) { opacity: 0; transform: translateY(24px); transition: none; }
.rv.in { opacity: 1; transform: none; }

/* Bild-Moment: Zoom-aus + Clip-Aufdeckung. Das Bild startet vergroessert
   und beschnitten, gleitet dann in volle Sicht — cineastischer als ein
   reines Fade. overflow:hidden haelt Parallax und Clip sauber. */
.rv-bild { overflow: hidden; }
.rv-bild img {
  transition:
    transform 900ms var(--rv-ease) var(--rv-delay, 0ms),
    clip-path 800ms var(--rv-ease) var(--rv-delay, 0ms);
}
html.js-reveal .rv-bild:not(.in) img {
  transform: scale(1.12);
  clip-path: inset(6%);
  transition: none;
}
.rv-bild.in img { transform: scale(1.04); clip-path: inset(0); }

/* Wort-Kaskade: Ueberschriften zerfallen in Woerter, die nacheinander
   von unten hereinrutschen. Der Container bleibt sichtbar (opacity 1),
   die Woerter clippen sich selbst. */
html.js-reveal .rv.rv-worte:not(.in) { opacity: 1; transform: none; }
.rv-worte .rv-wort {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  overflow: hidden;
  vertical-align: bottom;
}
.rv-worte .rv-wort > span {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  transition: transform var(--rv-dauer) var(--rv-ease);
}
html.js-reveal .rv-worte:not(.in) .rv-wort > span {
  transform: translateY(105%);
  transition: none;
}
.rv-worte.in .rv-wort > span { transform: none; }

/* Zwei Wege zum Endzustand ohne Bewegung: die Systemeinstellung und der
   Screenshot-Modus. Beide zeigen sofort alles, keiner wartet auf JS. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .rv:not(.in) { opacity: 1; transform: none; }
  html.js-reveal .rv-bild:not(.in) img { transform: none; clip-path: none; }
  .rv-bild.in img { transform: none; }
  html.js-reveal .rv-worte:not(.in) .rv-wort > span { transform: none; }
  .rv, .rv-bild img { transition: none; }
  .rv-worte .rv-wort > span { transition: none; }
}
html[data-shot] .rv:not(.in) { opacity: 1 !important; transform: none !important; }
html[data-shot] .rv-bild:not(.in) img { transform: none !important; clip-path: none !important; }

/* Fusszeilen-Gruppen als natives Akkordeon.
   Auf dem Telefon standen vier Gruppen mit je vier Links vollstaendig
   untereinander. `<details>` bringt Aufklappen, Tastatur und
   Screenreader-Semantik ohne eine Zeile JavaScript mit; ohne JS
   funktioniert es genauso. Ab 700px sind sie immer offen — dort ist
   Platz und ein Klick waere nur eine Huerde. */
.fuss-gruppe > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
.fuss-gruppe > summary::-webkit-details-marker { display: none; }
.fuss-gruppe > summary h3 { margin-bottom: 0; }
.fuss-gruppe > summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--speed) var(--ease);
}
.fuss-gruppe[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.fuss-gruppe > ul { padding-block: 0.35rem 0.75rem; }

@media (min-width: 701px) {
  /* Hier ist Platz — der Klapper waere nur eine Huerde. Die Gruppen
     bleiben offen (das Markup liefert `open`), das Dreieck verschwindet. */
  .fuss-gruppe > summary { pointer-events: none; min-height: auto; }
  .fuss-gruppe > summary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fuss-gruppe > summary::after { transition: none; }
}