/* ==========================================================================
   All.in People & Culture — Design Tokens & Base CSS
   Source of truth: docs/ui/design-system.md
   Rebrand: 2026-06-22 (→ All.in People & Culture)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT-FACE — Self-hosted (DSGVO-konform, kein Google CDN)
   -------------------------------------------------------------------------- */

/* Paths are RELATIVE (no leading slash) so the site works both on GitHub Pages
   project subpaths (/repo/) and on a custom domain root. */

/* ── DM Serif Display — Regular (latin) ── */
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/dm-serif-display-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── DM Serif Display — Regular (latin-ext) ── */
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/dm-serif-display-latin-ext-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── DM Serif Display — Italic (latin) ── */
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/dm-serif-display-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── DM Serif Display — Italic (latin-ext) ── */
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/dm-serif-display-latin-ext-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Inter — Variable 300–700 (latin) ── */
@font-face {
  font-family: 'Inter';
  src: local('Inter'), url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Inter — Variable 300–700 (latin-ext) ── */
@font-face {
  font-family: 'Inter';
  src: local('Inter'), url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS — :root custom properties
   -------------------------------------------------------------------------- */

:root {

  /* ── All.in People & Culture — Markenfarben (Rebrand 2026-07-12) ── */
  /*
     PRIMÄR: Warmgold #FFB82E
     Rationale: Kundenwunsch — Markenfarbe Gold/Amber statt Teal, kombiniert
     mit Weiss/Creme; explizit KEINE dunklen Flächen mehr (Footer, CTA-Banner,
     Navbar-Scrolled-Zustand sind jetzt hell). #FFB82E selbst ist zu hell für
     weissen Text (Kontrast <2:1) — wird daher primär als Flächenfarbe mit
     DUNKLEM Text eingesetzt. Für Text/Icons/Links auf hellem Grund dient die
     dunklere Stufe -700 (#B45309, 4,7:1 auf Weiss, AA-konform).

     AKZENT: Warmes Korall #C0461F (unverändert)
     Rationale: Lebhafter als Terrakotta, menschlicher als Orange. Steht für
     die Kandidat:innen-Seite — Energie, Mut, individuelle Geschichte.
     Kontrast weisser Text auf #C0461F: 5,08:1 (AA, verifiziert).

     NEUTRALS: Leicht warm getönt (kein reines Grau) — passend zur
     menschlichen, nahbaren Markentonalität.

     AUSNAHME — Hero-Foto-Overlays: Echte Foto-Hintergründe (Hero-Sections)
     brauchen weiterhin einen abdunkelnden Scrim für lesbaren hellen Text
     (branchenüblich, unabhängig von der Markenfarbe). Dieser Scrim ist auf
     warmes Gold-Braun umgetont (statt Teal), bleibt aber dunkel. Alle
     FLÄCHIGEN Markenflächen ohne Foto (Footer, CTA-Banner, Navbar) sind neu
     hell/gold/weiss gemäss Kundenwunsch.
  */

  /* ── Primärfarbe — Warmgold ── */
  --pw-primary-900: #6B3900;   /* #6B3900 — dunkelste Gold-Braun-Stufe, Active-States */
  --pw-primary-800: #8F5000;   /* #8F5000 — starke Akzente, Link-Hover */
  --pw-primary-700: #B45309;   /* #B45309 — Link-/Icon-Text auf Hell (4,7:1 AA, verifiziert) */
  --pw-primary-600: #FFB82E;   /* #FFB82E — Haupt-CTA-Fläche, Brand-Primärfarbe (mit dunklem Text) */
  --pw-primary-500: #FFB82E;   /* #FFB82E — Logo-Akzent (alias 600) */
  --pw-primary-400: #FFA713;   /* #FFA713 — Hover auf CTA-Buttons (satter, bleibt hell genug für dunklen Text) */
  --pw-primary-300: #FFD98A;   /* #FFD98A — Badges, Sekundärakzente */
  --pw-primary-200: #FFE7B8;   /* #FFE7B8 — Dekorativ, Zitat-Ornament */
  --pw-primary-100: #FFF1D9;   /* #FFF1D9 — Helle Tints, Section-Borders */
  --pw-primary-050: #FFF8EC;   /* #FFF8EC — Section-Alt-Hintergrund */

  /* ── Akzent / Dual-Audience ── */
  /*
     Kandidat:innen-Akzent: Warmkorall #C0461F
     Kontrast #FFFFFF auf #C0461F: 5,08:1 (AA, verifiziert).
     Hover  #B2461F: 5,54:1 (AA) — dunkler als Default.
     Active #8C3312: 8,09:1 (AA) — dunkelste State-Stufe.
     State-Hierarchie (heller→dunkler): C0461F → B2461F → 8C3312.
  */
  --pw-accent-company:           #B45309;   /* Dunkles Gold — Unternehmens-CTAs mit weissem Text (4,7:1 AA) */
  --pw-accent-candidate:         #C0461F;   /* Warmkorall — Kandidaten-CTAs (5,08:1) */
  --pw-accent-candidate-hover:   #B2461F;   /* Dunkleres Korall — Hover (5,54:1) */
  --pw-accent-candidate-800:     #7A3519;   /* Korall-Tiefton — Tag-/Badge-Text auf -light (8,93:1) */
  --pw-accent-candidate-900:     #8C3312;   /* Korall-Tiefton — Button :active (8,09:1) */
  --pw-accent-candidate-light:   #FAEDE7;   /* Korall-Tint — Kandidaten-Section-BG */

  /* ── Neutralskala (leicht warmgetönt) ── */
  --pw-neutral-950: #131210;   /* #131210 — Haupttext (Kontrast 18,4:1 auf #FAFAF8) */
  --pw-neutral-900: #1E1C1A;
  --pw-neutral-800: #2F2D2A;
  --pw-neutral-700: #433F3B;
  --pw-neutral-600: #5A5652;
  --pw-neutral-500: #726E6A;
  --pw-neutral-400: #928E8A;
  --pw-neutral-300: #B5B1AD;
  --pw-neutral-200: #D4D1CE;
  --pw-neutral-100: #ECEAE8;
  --pw-neutral-050: #F5F4F2;
  --pw-neutral-000: #FAFAF8;   /* Warm-Off-White — Seiten-Hintergrund */

  /* ── Semantische Farben ── */
  --pw-success-600: #0F6E5A;   /* Eigenständiges Grün (nicht an Primary gekoppelt) — Bestätigungs-States */
  --pw-success-100: #C2E8DF;
  --pw-warning-600: #B45309;   /* #B45309 — Kontrast 4,7:1 auf #FFF (AA) */
  --pw-warning-100: #FEF3C7;
  --pw-error-600:   #B91C1C;   /* #B91C1C — Kontrast 5,5:1 auf #FFF (AA) */
  --pw-error-100:   #FEE2E2;
  --pw-info-600:    #1D4ED8;
  --pw-info-100:    #DBEAFE;

  /* ── Hintergrundfarben ── */
  --pw-bg-page:        #FAFAF8;   /* Warm-Off-White — alle Seitenhintergründe */
  --pw-bg-section-alt: #FFF8EC;   /* Gold-Tint — alternierende Sections */
  --pw-bg-dark:        #FFF3D9;   /* Warmes Gold-Creme — Footer (Kundenwunsch: keine dunklen Flächen mehr) */
  --pw-bg-overlay:     rgba(43, 26, 4, 0.72);    /* Hero-Foto-Overlay (Gold-Braun-Scrim, nur auf Fotos) */
  --pw-bg-card:        #FFFFFF;   /* Karten-Weiss */
  --pw-bg-candidate:   #FAEDE7;   /* Korall-Tint — Kandidaten-Section-BG */

  /* ── Textfarben ── */
  --pw-text-primary:   #131210;   /* Haupttext — 18,4:1 auf #FAFAF8 (AAA) */
  --pw-text-secondary: #433F3B;   /* Sekundärtext — 7,6:1 auf #FAFAF8 (AAA) */
  --pw-text-muted:     #5A5652;   /* Hinweistext — 5,1:1 auf #FAFAF8 (AA) */
  --pw-text-on-dark:   #F5F4F2;   /* Text auf dunklem Foto-Scrim (Hero) — 16,8:1 auf #2B1A04 (AAA) */
  --pw-text-on-gold:   #201200;   /* Text auf Footer/CTA-Gold-Creme — dunkel für AA-Kontrast */
  --pw-text-link:      #B45309;   /* Link-Text — 4,7:1 auf #FAFAF8 (AA) */
  --pw-text-link-hover:#6B3900;

  /* ── Border-Farben ── */
  --pw-border-default: #D4D1CE;   /* Standard-Rahmen */
  --pw-border-strong:  #928E8A;   /* Betonte Rahmen */
  --pw-border-focus:   #B45309;   /* Fokus-Ring (WCAG 2.4.11) */

  /* ── Font-Familien ── */
  --pw-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --pw-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Typografische Skala (rem, Basis 16px) ── */
  --pw-text-xs:   0.75rem;   /*  12px */
  --pw-text-sm:   0.875rem;  /*  14px */
  --pw-text-base: 1rem;      /*  16px */
  --pw-text-lg:   1.125rem;  /*  18px */
  --pw-text-xl:   1.25rem;   /*  20px */
  --pw-text-2xl:  1.5rem;    /*  24px */
  --pw-text-3xl:  1.875rem;  /*  30px */
  --pw-text-4xl:  2.25rem;   /*  36px */
  --pw-text-5xl:  3rem;      /*  48px */
  --pw-text-6xl:  3.75rem;   /*  60px */
  --pw-text-7xl:  4.5rem;    /*  72px */

  /* ── Zeilenhohen ── */
  --pw-leading-tight:   1.2;
  --pw-leading-snug:    1.35;
  --pw-leading-normal:  1.5;
  --pw-leading-relaxed: 1.65;

  /* ── Schriftgewichte ── */
  --pw-weight-light:    300;
  --pw-weight-regular:  400;
  --pw-weight-medium:   500;
  --pw-weight-semibold: 600;
  --pw-weight-bold:     700;

  /* ── Buchstabenabstand ── */
  --pw-tracking-tight:  -0.02em;
  --pw-tracking-normal:  0em;
  --pw-tracking-wide:    0.04em;
  --pw-tracking-wider:   0.08em;

  /* ── Spacing-Skala (8px-Grid) ── */
  --pw-space-1:   0.25rem;  /*   4px */
  --pw-space-2:   0.5rem;   /*   8px */
  --pw-space-3:   0.75rem;  /*  12px */
  --pw-space-4:   1rem;     /*  16px */
  --pw-space-5:   1.25rem;  /*  20px */
  --pw-space-6:   1.5rem;   /*  24px */
  --pw-space-8:   2rem;     /*  32px */
  --pw-space-10:  2.5rem;   /*  40px */
  --pw-space-12:  3rem;     /*  48px */
  --pw-space-16:  4rem;     /*  64px */
  --pw-space-20:  5rem;     /*  80px */
  --pw-space-24:  6rem;     /*  96px */
  --pw-space-32:  8rem;     /* 128px */

  /* ── Container & Layout ── */
  --pw-container-max:    1200px;
  --pw-container-wide:   1400px;
  --pw-container-text:    680px;
  --pw-container-gutter: var(--pw-space-6);

  /* ── Border-Radius-Skala ── */
  --pw-radius-sm:   4px;
  --pw-radius-md:   8px;
  --pw-radius-lg:  12px;
  --pw-radius-xl:  16px;
  --pw-radius-2xl: 24px;
  --pw-radius-full: 9999px;

  /* ── Schatten / Elevation ── */
  --pw-shadow-none: none;

  /* Schatten-RGB-Basis: #062E26 (neutral-dunkel, bewusst brand-neutral gehalten) */
  --pw-shadow-xs:
    0 1px 2px rgba(6, 46, 38, 0.07),
    0 1px 3px rgba(6, 46, 38, 0.05);

  --pw-shadow-sm:
    0 2px 4px rgba(6, 46, 38, 0.08),
    0 4px 8px rgba(6, 46, 38, 0.06);

  --pw-shadow-md:
    0 4px 8px  rgba(6, 46, 38, 0.09),
    0 8px 20px rgba(6, 46, 38, 0.09),
    0 0 0 1px rgba(15, 110, 90, 0.08);

  --pw-shadow-lg:
    0 8px 16px rgba(6, 46, 38, 0.10),
    0 16px 40px rgba(6, 46, 38, 0.12);

  --pw-shadow-xl:
    0 12px 24px rgba(6, 46, 38, 0.13),
    0 24px 56px rgba(6, 46, 38, 0.15),
    0 0 0 1px rgba(6, 46, 38, 0.06);

  /* ── Z-Index-Skala ── */
  --pw-z-base:     0;
  --pw-z-raised:   10;
  --pw-z-sticky:   100;
  --pw-z-dropdown: 200;
  --pw-z-overlay:  300;
  --pw-z-modal:    400;
  --pw-z-toast:    500;

  /* ── Transition-Timing ── */
  --pw-transition-fast:   0.10s ease;
  --pw-transition-base:   0.15s ease;
  --pw-transition-medium: 0.20s ease;
  --pw-transition-slow:   0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --pw-transition-reveal: 0.50s ease;

  /* ────────────────────────────────────────────────────────────────────────
     GLASSMORPHISM — Premium-Glas-Look (additiv, Rev. Glass 2026-06-27)
     Wiederverwendbare Tokens für frosted-glass Karten, Bänder & Navbar.
     Werte halten Kartentext (neutral-800/900) bei ≥4,5:1 auf hellem Glas.
     ──────────────────────────────────────────────────────────────────────── */

  /* Faux-Glass-Füllungen (Rev. 2026-06-28, KEIN backdrop-filter).
     Deckender halbtransparentes Weiss statt blur: gleicher glasiger Look
     (Transluzenz + Kante + innerer Glanz), aber GPU-günstig (kein Per-Frame-
     Blur-Recompute). Werte halten Kartentext (neutral-800/900) >=4,5:1. */
  --pw-glass-fill:        rgba(255, 255, 255, 0.86);   /* Default-Glas (war 0.55 + blur) */
  --pw-glass-fill-hover:  rgba(255, 255, 255, 0.93);   /* opaker im Hover */
  --pw-glass-fill-strong: rgba(255, 255, 255, 0.90);   /* Bänder / größere Panels */
  --pw-glass-fill-solid:  rgba(255, 255, 255, 0.94);   /* alter Fallback-Wert */

  /* Glas-Rand & innerer Glanz */
  --pw-glass-border:       1px solid rgba(255, 255, 255, 0.60);
  --pw-glass-border-hover: 1px solid rgba(255, 255, 255, 0.85);

  /* Blur-Tokens: DEPRECATED (Rev. 2026-06-28). Faux-Glass nutzt keinen
     backdrop-filter mehr — der bewegte/überlagerte Blur erzwang Per-Frame-
     Recompute und verursachte Lag bei Hover/Scroll. Tokens bleiben als no-op
     erhalten, werden aber nirgends mehr referenziert. */
  --pw-glass-blur:      none;
  --pw-glass-blur-soft: none;

  /* Glas-Schatten: innerer Glanz + weiche teal-getönte Tiefe */
  --pw-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 8px 30px rgba(13, 61, 43, 0.08);
  --pw-glass-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 16px 44px rgba(13, 61, 43, 0.14);

  /* Faux-Glass für die gescrollte Navbar — hell/creme (Kundenwunsch: keine
     dunkle Fläche mehr). Navbar-Text wechselt im gescrollten Zustand daher
     von Weiss auf dunkles Gold (siehe components.css .pw-navbar.is-scrolled). */
  --pw-glass-teal:       rgba(255, 248, 236, 0.97);
  --pw-glass-teal-solid: var(--pw-primary-050);   /* alter Fallback */

  /* Ambient-Gradient-Alpha-Basen (gold / korall, sehr dezent) */
  --pw-ambient-teal:   rgba(255, 184, 46, 0.09);
  --pw-ambient-teal-2: rgba(255, 167, 19, 0.07);
  --pw-ambient-coral:  rgba(192, 70, 31, 0.055);
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  font-size: 100%; /* respects user browser preference (16px default) */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-regular);
  line-height: var(--pw-leading-normal);
  color: var(--pw-text-primary);
  background-color: var(--pw-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings — DM Serif Display ── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pw-font-display);
  font-weight: var(--pw-weight-regular);
  line-height: var(--pw-leading-tight);
  color: var(--pw-neutral-950);
}

h1 { font-size: var(--pw-text-5xl); letter-spacing: var(--pw-tracking-tight); }
h2 { font-size: var(--pw-text-4xl); line-height: var(--pw-leading-snug); letter-spacing: var(--pw-tracking-tight); }
h3 { font-family: var(--pw-font-body); font-size: var(--pw-text-3xl); font-weight: var(--pw-weight-semibold); line-height: var(--pw-leading-snug); }
h4 { font-family: var(--pw-font-body); font-size: var(--pw-text-xl);  font-weight: var(--pw-weight-semibold); line-height: var(--pw-leading-snug); }
h5 { font-family: var(--pw-font-body); font-size: var(--pw-text-lg);  font-weight: var(--pw-weight-semibold); }
h6 { font-family: var(--pw-font-body); font-size: var(--pw-text-base); font-weight: var(--pw-weight-semibold); }

/* ── Paragraphs & Lists ── */

p {
  color: var(--pw-neutral-800);
  line-height: var(--pw-leading-normal);
}

p + p {
  margin-top: var(--pw-space-4);
}

ul,
ol {
  padding-left: var(--pw-space-6);
}

li {
  line-height: var(--pw-leading-normal);
  color: var(--pw-neutral-800);
}

/* ── Links ── */

a {
  color: var(--pw-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--pw-transition-base);
}

a:hover {
  color: var(--pw-text-link-hover);
}

a:visited {
  color: var(--pw-primary-700);
}

/* ── Focus-Visible — WCAG 2.4.11 ── */

:focus-visible {
  outline: 3px solid var(--pw-primary-700);
  outline-offset: 3px;
  border-radius: var(--pw-radius-sm);
}

/* Focus innerhalb des (weiterhin dunklen) Kandidaten-Heros: heller Ring,
   da der Standard-Ring (dunkles Gold) auf dem dunklen Korall untergehen würde.
   Der allgemeine Gold-Hero (.pw-hero-overlay) ist jetzt hell und braucht
   keine Ausnahme mehr — der Standard-Ring (dunkles Gold) passt dort direkt. */
.pw-hero-overlay--candidate :focus-visible {
  outline-color: var(--pw-primary-200); /* #FFE7B8 — helles Gold, sichtbar auf dunklem Korall */
}

/* ── Images & Media ── */

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

svg {
  overflow: hidden; /* prevents IE clipping */
}

/* ── Tables ── */

table {
  border-collapse: collapse;
  width: 100%;
}

/* ── Forms base reset ── */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
}

/* ── Horizontal Rule ── */

hr {
  border: none;
  border-top: 1px solid var(--pw-border-default);
  margin-block: var(--pw-space-8);
}

/* ── Strong / Em ── */

strong,
b {
  font-weight: var(--pw-weight-semibold);
}

em,
i {
  font-style: italic;
}

/* ── Small / Caption text ── */

small {
  font-size: var(--pw-text-sm);
  color: var(--pw-text-muted);
}

/* ── Blockquote ── */

blockquote {
  font-family: var(--pw-font-display);
  font-style: italic;
  font-size: var(--pw-text-xl);
  color: var(--pw-neutral-700);
  border-left: 3px solid var(--pw-primary-300);
  padding-left: var(--pw-space-6);
  margin-block: var(--pw-space-8);
}

/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

.pw-container {
  width: 100%;
  max-width: var(--pw-container-max);
  margin-inline: auto;
  padding-inline: var(--pw-container-gutter);
}

.pw-container--wide {
  max-width: var(--pw-container-wide);
}

.pw-container--text {
  max-width: var(--pw-container-text);
}

/* --------------------------------------------------------------------------
   5. SKIP LINK (Accessibility — erstes fokussierbares Element)
   -------------------------------------------------------------------------- */

.pw-skip-link {
  position: absolute;
  top: -100%;
  left: var(--pw-space-4);
  z-index: var(--pw-z-toast);
  padding: var(--pw-space-3) var(--pw-space-6);
  background: var(--pw-primary-600);
  color: var(--pw-neutral-950);
  font-weight: var(--pw-weight-semibold);
  border-radius: var(--pw-radius-md);
  text-decoration: none;
  transition: top var(--pw-transition-base);
}

.pw-skip-link:focus {
  top: var(--pw-space-4);
}

/* --------------------------------------------------------------------------
   6. ICON BASE
   -------------------------------------------------------------------------- */

.pw-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   7. FLUID TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */

.pw-hero-headline {
  font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
  font-family: var(--pw-font-display);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight);
}

.pw-section-headline {
  font-size: clamp(1.875rem, 3vw + 0.75rem, 2.25rem);
  font-family: var(--pw-font-display);
  line-height: var(--pw-leading-snug);
}

/* --------------------------------------------------------------------------
   8. SCROLL-REVEAL ANIMATION
   -------------------------------------------------------------------------- */

.pw-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--pw-transition-reveal),
    transform var(--pw-transition-reveal);
}

.pw-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pw-reveal-group > *:nth-child(1) { transition-delay:   0ms; }
.pw-reveal-group > *:nth-child(2) { transition-delay:  80ms; }
.pw-reveal-group > *:nth-child(3) { transition-delay: 160ms; }
.pw-reveal-group > *:nth-child(4) { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   9. BUTTON BASE + VARIANTS
   -------------------------------------------------------------------------- */

.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pw-space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--pw-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--pw-transition-base),
    border-color var(--pw-transition-base),
    transform var(--pw-transition-fast),
    box-shadow var(--pw-transition-base);
}

.pw-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 184, 46, 0.35); /* primary-600 gold */
}

.pw-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.pw-btn:disabled,
.pw-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pw-btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.pw-btn.is-loading::after {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pw-spin 0.6s linear infinite;
  margin-left: var(--pw-space-2);
}

/* Size variants */
.pw-btn--sm { padding: 0.5rem 1.25rem;  font-size: var(--pw-text-sm); }
.pw-btn--lg { padding: 1rem 2.25rem;    font-size: var(--pw-text-lg); }

/* Primary — Gold (helle Fläche → dunkler Text; :active wird dunkel → heller Text) */
.pw-btn--primary {
  background-color: var(--pw-primary-600);
  color: var(--pw-neutral-950);
  border-color: var(--pw-primary-600);
}
.pw-btn--primary:visited                { color: var(--pw-neutral-950); }
.pw-btn--primary:hover                  { background-color: var(--pw-primary-400); border-color: var(--pw-primary-400); color: var(--pw-neutral-950); }
.pw-btn--primary:active                 { background-color: var(--pw-primary-700); border-color: var(--pw-primary-700); color: #F4F6F5; }

/* Candidate — Korall */
.pw-btn--candidate {
  background-color: var(--pw-accent-candidate);
  color: #FFFFFF;
  border-color: var(--pw-accent-candidate);
}
.pw-btn--candidate:visited              { color: #FFFFFF; }
.pw-btn--candidate:hover {
  background-color: var(--pw-accent-candidate-hover);
  border-color: var(--pw-accent-candidate-hover);
  box-shadow: 0 4px 12px rgba(212, 87, 42, 0.30);
  color: #FFFFFF;
}
.pw-btn--candidate:active               { background-color: var(--pw-accent-candidate-900); border-color: var(--pw-accent-candidate-900); color: #FFFFFF; }

/* Outline */
.pw-btn--outline {
  background-color: transparent;
  color: var(--pw-primary-700);
  border-color: var(--pw-primary-700);
}
.pw-btn--outline:visited { color: var(--pw-primary-700); }
.pw-btn--outline:hover   { background-color: var(--pw-primary-050); color: var(--pw-primary-700); }

/* Secondary (same as outline semantically) */
.pw-btn--secondary {
  background-color: transparent;
  color: var(--pw-primary-700);
  border-color: var(--pw-primary-700);
}
.pw-btn--secondary:visited { color: var(--pw-primary-700); }
.pw-btn--secondary:hover   { background-color: var(--pw-primary-050); color: var(--pw-primary-700); }

/* Ghost */
.pw-btn--ghost {
  background-color: transparent;
  color: var(--pw-neutral-800);
  border-color: transparent;
}
.pw-btn--ghost:visited { color: var(--pw-neutral-800); }
.pw-btn--ghost:hover   { background-color: var(--pw-neutral-100); box-shadow: none; color: var(--pw-neutral-800); }

/* --------------------------------------------------------------------------
   10. CARD BASE
   -------------------------------------------------------------------------- */

.pw-card {
  background: var(--pw-bg-card);
  border: 1px solid var(--pw-border-default);
  border-radius: var(--pw-radius-xl);
  padding: var(--pw-space-8);
  box-shadow: var(--pw-shadow-sm);
  transition:
    transform var(--pw-transition-medium),
    box-shadow var(--pw-transition-medium);
  will-change: transform;
}

.pw-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pw-shadow-md);
}

.pw-card:active {
  transform: translateY(-2px);
  box-shadow: var(--pw-shadow-sm);
}

@media (hover: none) {
  .pw-card:hover {
    transform: none;
    box-shadow: var(--pw-shadow-sm);
  }
}

/* --------------------------------------------------------------------------
   11. FORM BASE
   -------------------------------------------------------------------------- */

.pw-label {
  display: block;
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  color: var(--pw-neutral-800);
  margin-bottom: var(--pw-space-2);
}

.pw-label__required {
  color: var(--pw-error-600);
  margin-left: 2px;
}

.pw-input,
.pw-select,
.pw-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-base);
  color: var(--pw-text-primary);
  background: var(--pw-bg-card);
  border: 1.5px solid var(--pw-border-default);
  border-radius: var(--pw-radius-md);
  transition:
    border-color var(--pw-transition-base),
    box-shadow var(--pw-transition-base);
  appearance: none;
}

.pw-input:hover,
.pw-select:hover,
.pw-textarea:hover {
  border-color: var(--pw-border-strong);
}

.pw-input:focus,
.pw-select:focus,
.pw-textarea:focus {
  outline: none;
  border-color: var(--pw-primary-700);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); /* primary-700 gold */
}

.pw-textarea {
  min-height: 120px;
  resize: vertical;
}

.pw-input.is-valid {
  border-color: var(--pw-success-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A6B4B'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--pw-space-3) center;
  background-size: 1.25rem;
  padding-right: var(--pw-space-10);
}

.pw-input.is-invalid {
  border-color: var(--pw-error-600);
  background-color: var(--pw-error-100);
}

.pw-file-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px dashed var(--pw-border-default);
  border-radius: var(--pw-radius-md);
  background: var(--pw-neutral-050);
  cursor: pointer;
  text-align: center;
  font-size: var(--pw-text-sm);
  color: var(--pw-text-muted);
  transition:
    border-color var(--pw-transition-base),
    background-color var(--pw-transition-base);
}

.pw-file-input:hover {
  border-color: var(--pw-primary-400);
  background: var(--pw-primary-050);
}

.pw-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--pw-space-3);
  cursor: pointer;
}

.pw-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--pw-primary-700);
  cursor: pointer;
}

.pw-checkbox-label {
  font-size: var(--pw-text-sm);
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

.pw-field-error {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  margin-top: var(--pw-space-2);
  font-size: var(--pw-text-sm);
  color: var(--pw-error-600);
}

/* --------------------------------------------------------------------------
   12. GRADIENT & EFFECT CLASSES
   -------------------------------------------------------------------------- */

/* Hero-Overlay (Unternehmen) — kein Foto dahinter, reiner Verlauf: die
   Markenfarbe darf hier voll sichtbar sein (Kundenwunsch: Gold soll sich
   gerade im Hero zeigen). Helles, sattes Gold + dunkler Text — siehe die
   zugehörigen Text-Overrides weiter unten (".pw-hero-overlay ..."). */
.pw-hero-overlay {
  background: linear-gradient(
    135deg,
    var(--pw-primary-300) 0%,
    var(--pw-primary-600) 55%,
    var(--pw-primary-400) 100%
  );
}

/* Dunkler Text auf dem hellen Gold-Hero (alle Unternehmens-/allgemeinen
   Heroes: Startseite, Über uns, Für Unternehmen, Kontakt). Die Kandidaten-
   Variante (.pw-hero-overlay--candidate, Korall) bleibt unverändert dunkel
   mit hellem Text — daher hier bewusst NICHT mitselektiert. */
.pw-hero-overlay,
.pw-hero-overlay .pw-hero-headline,
.pw-hero-overlay .pw-section-header__eyebrow {
  color: var(--pw-text-on-gold);
}

.pw-hero-overlay .pw-btn--on-dark {
  color: var(--pw-text-on-gold);
  border-color: rgba(32, 18, 0, 0.35);
}
.pw-hero-overlay .pw-btn--on-dark:hover {
  background-color: rgba(32, 18, 0, 0.08);
  color: var(--pw-text-on-gold);
}

/* Hero overlay — Warmkorall (Kandidat:innen) */
.pw-hero-overlay--candidate {
  background: linear-gradient(
    135deg,
    rgba(178, 70, 31, 0.78) 0%,   /* accent-candidate-hover */
    rgba(212, 87, 42, 0.58) 100%  /* accent-candidate */
  );
}

/* Section fade transition */
.pw-section-fade-top {
  background: linear-gradient(
    to bottom,
    var(--pw-bg-page) 0%,
    var(--pw-bg-section-alt) 100%
  );
}

/* CTA-Banner-Gradient — hell (Kundenwunsch: keine dunkle Fläche mehr).
   Text/Icons in dieser Section werden separat in components.css auf dunkel
   umgestellt (siehe .pw-cta-banner__* Regeln). */
.pw-cta-banner {
  background: linear-gradient(
    100deg,
    var(--pw-primary-100)  0%,
    var(--pw-primary-300) 55%,
    var(--pw-primary-050) 100%
  );
}

/* Decorative shimmer background */
.pw-bg-shimmer {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 184, 46, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 167, 19, 0.07) 0%, transparent 60%),
    var(--pw-bg-page);
}

/* Faux-Glass — Cookie banner / sticky header (kein backdrop-filter, deckend) */
.pw-glass {
  background: rgba(250, 250, 248, 0.97);   /* deckender, da kein blur */
  border-top: 1px solid rgba(212, 209, 206, 0.70);  /* pw-neutral-200 */
  box-shadow: var(--pw-shadow-xl);
}

/* Sticky navbar after scroll (Faux-Glass, deckend; components.css überschreibt
   i.d.R. mit Marken-Teal). */
.pw-navbar.is-scrolled {
  background: rgba(250, 250, 248, 0.97);
  box-shadow: var(--pw-shadow-xs);
  border-bottom: 1px solid var(--pw-border-default);
}

/* --------------------------------------------------------------------------
   13. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes pw-spin {
  to { transform: rotate(360deg); }
}

@keyframes pw-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pw-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   14. PREFERS-REDUCED-MOTION — Universeller Override
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements instantly without movement */
  .pw-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pw-reveal-group > * {
    transition-delay: 0ms;
  }

  /* Suppress card lift */
  .pw-card:hover {
    transform: none;
  }

  /* Suppress button lift */
  .pw-btn:hover {
    transform: none;
  }

  /* Stop spinner */
  .pw-btn.is-loading::after {
    animation: none;
  }

  /* Stop nav overlay slide */
  .pw-nav-overlay {
    transition: none;
  }

  /* Stop accordion arrow rotation */
  .pw-accordion__item summary::after {
    transition: none;
  }
}