/* ==========================================================================
   VERON Karriereportal — jobs.veron-store.de
   Zentrales Stylesheet. Einbindung: Blocksy 2.1.49 →
   Design → Customizer → "Zusätzliches CSS" ODER als eigene Datei im
   Child-Theme (wp_enqueue_style). Kein Build-Schritt, keine externen
   Ressourcen, keine @import-Aufrufe.

   Aufbau
   00  Schrift (Archivo, selbst gehostet)
   01  Tokens (:root)
   02  Basis & Reset-Ergänzungen
   03  Layout-Container & Abschnitte
   04  Typografie
   05  Kopfzeile & Wortmarke
   06  Hero
   07  Badges, Meta-Daten, Hairlines
   08  Stellen-Karten-Raster
   09  Stellendetail-Layout
   10  Listen im Fließtext
   11  Buttons
   12  Fakten-Raster & Sprachhinweis
   13  CTA-Band
   14  Ausklapp-Block (Bewerberdatenschutz)
   15  Fußzeile & Rechtslinks
   16  Fokus, Skip-Link, Screenreader
   17  Breakpoints
   18  prefers-reduced-motion & Druck
   ========================================================================== */


/* 00 — SCHRIFT ------------------------------------------------------------
   Archivo wird AKTIV eingebunden — ohne diesen Block greift nur die
   System-Fallback-Kette und die Wortmarke sieht falsch aus.

   ⚠️ PLATZHALTER-PFAD ⚠️
   Der Ablageort der Schriftdatei auf jobs.veron-store.de ist noch nicht
   bestätigt. Vor dem Go-Live BEIDE url()-Angaben unten auf den tatsächlichen
   Pfad ändern und im Netzwerk-Tab prüfen, dass die Datei mit 200 lädt
   (nicht 404). Externe Schriftdienste (Google Fonts o. ä.) sind bewusst
   ausgeschlossen — die Datei muss selbst gehostet sein.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/wp-content/uploads/fonts/InterVariable.woff2') format('woff2-variations');}
/* Archivo ist ein SUBSET (nur Wortmarken-Glyphen). unicode-range verhindert,
   dass es je fuer Fliesstext greift - sonst Buchstabensalat. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/veron-fonts/archivo-600.woff2') format('woff2');
  unicode-range:U+0041-005A,U+002E;}


/* 01 — TOKENS -------------------------------------------------------------
   Verbindlich aus dem Live-Theme des Shops übernommen. Werte hier NICHT
   überschreiben, sondern bei Theme-Änderungen zentral nachziehen.
   -------------------------------------------------------------------------- */
:root {
  /* Farben — Flächen */
  --v-paper:        #FBFAF7;   /* Seitenhintergrund, warmes Off-White */
  --v-cloud:        #F3F1EC;   /* Panels, Auffang-Boxen, Bewerber-Karte */
  --v-putty:        #E7E1D3;   /* warmer Trenner, Rahmen auf Cloud */

  /* Farben — Text */
  --v-ink:          #0F1013;   /* Haupttext */
  --v-ink-soft:     #2A2C31;   /* Fließtext-Alternative, Hover-Flächen */
  --v-stone:        #6B6C6E;   /* Sekundärtext, Meta */
  --v-stone-soft:   #B7B6B0;   /* Deaktiviert, dekorative Linien */

  /* Farben — Akzent (sparsam einsetzen: CTA, Wortmarken-Punkt, Marker)
     WCAG-Regel für dieses Portal:
       · --v-zinnober       NUR als Fläche/Kante (Punkte, Hover-Linien,
                            Fokusring). 3,97:1 auf Papier — für Text zu wenig.
       · --v-zinnober-deep  Fläche des Primärbuttons (5,16:1 gegen Weiß).
       · --v-zinnober-deeper Hover des Primärbuttons (7,02:1 gegen Weiß).
       · --v-zinnober-text  jede rote SCHRIFT (6,09:1 auf Papier,
                            5,56:1 auf Wolke). */
  --v-zinnober:        #E7443C;
  --v-zinnober-soft:   #F2B4AF;
  --v-zinnober-deep:   #C9372F;
  --v-zinnober-deeper: #A82820;
  --v-zinnober-text:   #B32C25;
  --v-zinnober-tint:   rgba(231, 68, 60, 0.07);

  /* Linien */
  --v-hairline:      rgba(15, 16, 19, 0.09);
  --v-hairline-firm: rgba(15, 16, 19, 0.22);

  /* Geometrie — bewusst fast kantig, KEINE runden Karten */
  --v-radius:    1px;
  --v-radius-lg: 2px;

  /* Raster */
  --v-container:        1280px;
  --v-container-narrow: 920px;
  --v-gutter:  clamp(20px, 4vw, 44px);
  --v-section: clamp(80px, 11vh, 140px);

  /* Abstände */
  --v-1: 4px;
  --v-2: 8px;
  --v-3: 12px;
  --v-4: 16px;
  --v-5: 24px;
  --v-6: 32px;
  --v-7: 40px;
  --v-8: 56px;
  --v-9: 72px;
  --v-10: 96px;

  /* Typo-Skala (fluid) */
  --v-s--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --v-s--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --v-s-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
  --v-s-1:  clamp(1.10rem, 1.02rem + 0.35vw, 1.28rem);
  --v-s-2:  clamp(1.35rem, 1.18rem + 0.75vw, 1.75rem);
  --v-s-3:  clamp(1.75rem, 1.40rem + 1.40vw, 2.50rem);
  --v-s-4:  clamp(2.40rem, 1.80rem + 2.60vw, 3.80rem);
  --v-s-5:  clamp(3.00rem, 2.10rem + 3.60vw, 4.80rem);
  --v-s-6:  clamp(3.60rem, 2.40rem + 4.80vw, 6.00rem);

  /* Schriftfamilien */
  --v-font: 'Inter', 'Helvetica Neue', Helvetica, Arial,
            system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Bewegung — dezent, nie dekorativ */
  --v-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --v-dur:  160ms;

  /* Höhe der klebenden Kopfzeile — steuert scroll-margin der Sprungziele */
  --v-header-h: 64px;
}


/* 02 — BASIS & RESET-ERGÄNZUNGEN -----------------------------------------
   Bewusst auf .v-page gescoped, damit Blocksy-Bereiche außerhalb des
   Karriereportals unangetastet bleiben.
   -------------------------------------------------------------------------- */
.v-page {
  background: var(--v-paper);
  color: var(--v-ink);
  font-family: var(--v-font);
  font-size: var(--v-s-0);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Blocksy setzt auf manchen Layouts eine eigene Hintergrundfarbe.
   Falls das Portal nicht durchgängig auf Papier steht, einkommentieren:
body.veron-karriere { background: var(--v-paper); }
*/

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

.v-page p,
.v-page ul,
.v-page ol,
.v-page dl,
.v-page figure { margin: 0; }

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

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

.v-page a { color: inherit; text-underline-offset: 0.22em; }

.v-page hr {
  border: 0;
  border-top: 1px solid var(--v-hairline);
  margin: var(--v-7) 0;
}

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
.v-page [id] { scroll-margin-top: calc(var(--v-header-h) + var(--v-5)); }

html:has(.v-page) { scroll-behavior: smooth; }


/* 03 — CONTAINER & ABSCHNITTE -------------------------------------------- */
.v-container {
  width: 100%;
  max-width: var(--v-container);
  margin-inline: auto;
  padding-inline: var(--v-gutter);
}

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

.v-section { padding-block: var(--v-section); }

/* Abschnitte werden durch Haarlinien getrennt, nicht durch Schatten */
.v-section + .v-section { border-top: 1px solid var(--v-hairline); }

.v-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-4);
  margin-bottom: var(--v-7);
  padding-bottom: var(--v-4);
  border-bottom: 1px solid var(--v-hairline);
}

.v-section__count {
  font-size: var(--v-s--1);
  color: var(--v-stone);
  font-variant-numeric: tabular-nums;
}


/* 04 — TYPOGRAFIE --------------------------------------------------------- */
.v-page h1,
.v-page h2,
.v-page h3,
.v-page h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.v-page h1 { font-size: var(--v-s-4); }
.v-page h2 { font-size: var(--v-s-3); }
.v-page h3 { font-size: var(--v-s-2); line-height: 1.16; }
.v-page h4 { font-size: var(--v-s-1); letter-spacing: -0.008em; }

/* Kleine Vorzeile über Überschriften — Versalien, weit gesperrt */
.v-eyebrow {
  font-size: var(--v-s--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--v-stone);
  display: flex;
  align-items: center;
  gap: var(--v-3);
  margin-bottom: var(--v-4);
}

/* Zinnober-Punkt als einziges dekoratives Element der Vorzeile */
.v-eyebrow::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  background: var(--v-zinnober);
  flex: none;
}

.v-lead {
  font-size: var(--v-s-1);
  line-height: 1.55;
  color: var(--v-ink-soft);
  max-width: 62ch;
}

.v-prose > * + * { margin-top: var(--v-4); }
.v-prose p { max-width: 68ch; color: var(--v-ink-soft); }

.v-note {
  font-size: var(--v-s--1);
  color: var(--v-stone);
  max-width: 68ch;
}


/* 05 — KOPFZEILE & WORTMARKE ---------------------------------------------- */
.v-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--v-paper);
  border-bottom: 1px solid var(--v-hairline);
}

.v-header__inner {
  min-block-size: var(--v-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-5);
}

/* Wortmarke: "VERON" in Archivo 600 + roter Punkt */
.v-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--v-s-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-ink);
}

.v-wordmark__dot { color: var(--v-zinnober); }

.v-wordmark__sub {
  font-size: var(--v-s--1);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--v-stone);
  padding-left: 0.7ch;
  border-left: 1px solid var(--v-hairline);
  margin-left: 0.3ch;
}

.v-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--v-4), 2.4vw, var(--v-6));
}

.v-header__nav a {
  font-size: var(--v-s--1);
  text-decoration: none;
  color: var(--v-stone);
  padding-block: var(--v-2);
  border-bottom: 1px solid transparent;
  transition: color var(--v-dur) var(--v-ease),
              border-color var(--v-dur) var(--v-ease);
}

.v-header__nav a:hover,
.v-header__nav a[aria-current='page'] {
  color: var(--v-ink);
  border-bottom-color: var(--v-zinnober);
}


/* 06 — HERO --------------------------------------------------------------- */
.v-hero {
  padding-block: clamp(56px, 9vh, 116px) clamp(48px, 7vh, 88px);
}

.v-hero__title { max-width: 16ch; }

.v-hero__lead { margin-top: var(--v-5); }

.v-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-3);
  margin-top: var(--v-7);
}

/* Kennzahlen-Zeile unter dem Hero — nur belegbare Fakten */
.v-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--v-9);
  border-top: 1px solid var(--v-hairline);
}

.v-hero__fact {
  padding: var(--v-5) var(--v-5) var(--v-5) 0;
  border-right: 1px solid var(--v-hairline);
}
.v-hero__fact:last-child { border-right: 0; }
.v-hero__fact + .v-hero__fact { padding-left: var(--v-5); }

.v-hero__fact dt {
  font-size: var(--v-s--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v-stone);
  margin-bottom: var(--v-2);
}

.v-hero__fact dd {
  margin: 0;
  font-size: var(--v-s-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* 07 — BADGES, META, HAIRLINES -------------------------------------------- */
.v-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-2);
}

.v-badge {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--v-hairline-firm);
  border-radius: var(--v-radius);
  font-size: var(--v-s--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--v-ink-soft);
  background: transparent;
  white-space: nowrap;
}

/* Akzent nur für das Arbeitszeitmodell — der wichtigste Filter im Handel.
   Schriftfarbe ist der Text-Zinnober (5,56:1 auf Papier, 5,16:1 auf Wolke). */
.v-badge--accent {
  border-color: var(--v-zinnober-soft);
  background: var(--v-zinnober-tint);
  color: var(--v-zinnober-text);
}

.v-badge--muted {
  border-color: var(--v-hairline);
  color: var(--v-stone);
}

/* Meta-Datenliste (Ort / Bereich / Umfang) */
.v-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-2) var(--v-5);
  font-size: var(--v-s--1);
  color: var(--v-stone);
}

.v-meta > div { display: flex; gap: 0.6ch; }
/* --v-stone-soft käme hier auf 1,95:1 — als echter Text nicht zulässig. */
.v-meta dt { color: var(--v-stone); }
.v-meta dt::after { content: ':'; }
.v-meta dd { margin: 0; color: var(--v-ink-soft); }


/* 08 — STELLEN-KARTEN-RASTER ---------------------------------------------- */
.v-jobs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--v-hairline);
  border-left: 1px solid var(--v-hairline);
}

.v-job {
  border-right: 1px solid var(--v-hairline);
  border-bottom: 1px solid var(--v-hairline);
}

.v-job__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--v-4);
  block-size: 100%;
  padding: var(--v-6) var(--v-6) var(--v-7);
  background: transparent;
  transition: background-color var(--v-dur) var(--v-ease);
}

/* Kantige Akzentlinie oben — erscheint erst bei Hover/Fokus */
.v-job__card::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  block-size: 2px;
  background: var(--v-zinnober);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--v-dur) var(--v-ease);
}

.v-job__card:hover,
.v-job__card:focus-within { background: var(--v-cloud); }

.v-job__card:hover::before,
.v-job__card:focus-within::before { transform: scaleX(1); }

.v-job__title { font-size: var(--v-s-2); }

/* Die gesamte Karte ist klickbar, der Linktext bleibt aber die
   eigentliche Bedienelement-Beschriftung (Screenreader + Tastatur). */
.v-job__title a {
  text-decoration: none;
  background-image: linear-gradient(var(--v-ink), var(--v-ink));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--v-dur) var(--v-ease);
}
.v-job__card:hover .v-job__title a { background-size: 100% 1px; }

.v-job__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.v-job__teaser {
  color: var(--v-ink-soft);
  max-width: 46ch;
}

/* Im Ruhezustand tintenfarben — Rot bleibt der Hover-Zustand vorbehalten,
   damit pro Ansicht nicht ein Dutzend rote Elemente konkurrieren. */
.v-job__more {
  margin-top: auto;
  padding-top: var(--v-4);
  font-size: var(--v-s--1);
  font-weight: 600;
  color: var(--v-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  transition: color var(--v-dur) var(--v-ease);
}
.v-job__card:hover .v-job__more,
.v-job__card:focus-within .v-job__more { color: var(--v-zinnober-text); }

.v-job__more::after {
  content: '→';
  transition: transform var(--v-dur) var(--v-ease);
}
.v-job__card:hover .v-job__more::after { transform: translateX(3px); }


/* 09 — STELLENDETAIL ------------------------------------------------------ */
.v-back {
  display: inline-flex;
  align-items: center;
  gap: 0.7ch;
  font-size: var(--v-s--1);
  color: var(--v-stone);
  text-decoration: none;
  padding-block: var(--v-5);
}
.v-back::before { content: '←'; }
.v-back:hover { color: var(--v-ink); text-decoration: underline; }

.v-detail__head {
  padding-bottom: var(--v-7);
  border-bottom: 1px solid var(--v-hairline);
}

.v-detail__head .v-badges { margin-bottom: var(--v-5); }
.v-detail__head h1 { max-width: 20ch; }
.v-detail__head .v-meta { margin-top: var(--v-5); }

/* Zweispaltiges Layout: Inhalt links, Bewerbungs-Karte rechts (klebend) */
.v-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(var(--v-7), 6vw, var(--v-10));
  padding-block: var(--v-8);
  align-items: start;
}

.v-detail__main > * + * { margin-top: var(--v-8); }

.v-block__title {
  font-size: var(--v-s-2);
  padding-bottom: var(--v-3);
  margin-bottom: var(--v-5);
  border-bottom: 1px solid var(--v-hairline);
}

/* Bewerbungs-Karte */
.v-apply {
  position: sticky;
  top: calc(var(--v-header-h) + var(--v-5));
  background: var(--v-cloud);
  border: 1px solid var(--v-putty);
  border-radius: var(--v-radius-lg);
  padding: var(--v-6);
}

.v-apply h2 { font-size: var(--v-s-1); }
.v-apply p { font-size: var(--v-s--1); color: var(--v-stone); margin-top: var(--v-3); }
.v-apply .v-btn { width: 100%; margin-top: var(--v-5); }
.v-apply .v-btn + .v-btn { margin-top: var(--v-2); }

.v-apply__facts {
  margin-top: var(--v-5);
  padding-top: var(--v-4);
  border-top: 1px solid var(--v-putty);
  font-size: var(--v-s--1);
}
.v-apply__facts div { display: flex; justify-content: space-between; gap: var(--v-3); padding-block: var(--v-2); }
.v-apply__facts dt { color: var(--v-stone); }
.v-apply__facts dd { margin: 0; text-align: right; font-weight: 600; }


/* 10 — LISTEN IM FLIESSTEXT ----------------------------------------------- */
.v-list { display: grid; gap: var(--v-3); }

.v-list li {
  position: relative;
  padding-left: 1.7em;
  color: var(--v-ink-soft);
  max-width: 64ch;
}

/* Kantiger Strich statt Punkt — passt zum 1px-Charakter.
   Bewusst NICHT rot: bei drei Listen je Stellenseite entstünden sonst
   zwölf rote Marker, die dem einen roten Bewerbungs-Button die Wirkung
   nehmen. Der Akzent bleibt der Handlungsaufforderung vorbehalten.

   Zum Kontrast: --v-stone-soft erreicht auf Papier 1,95:1. Das ist zulässig,
   weil der Strich rein dekorativ ist — die Listenstruktur transportieren
   <ul>/<li> selbst, WCAG 1.4.11 greift für solche Marker nicht. Soll der
   Marker optisch kräftiger werden, ist var(--v-stone) (5,04:1) der richtige
   Griff, NICHT die Rückkehr zu Zinnober. */
.v-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.78em;
  inline-size: 11px;
  block-size: 1px;
  background: var(--v-stone-soft);
}

/* Zweispaltig, wenn genug Platz und viele Punkte */
.v-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-3) var(--v-6); }


/* 11 — BUTTONS ------------------------------------------------------------ */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7ch;
  padding: 14px 26px;
  min-block-size: 48px;            /* Touch-Ziel, >60 % bewerben sich mobil */
  border: 1px solid transparent;
  border-radius: var(--v-radius);
  font: inherit;
  font-size: var(--v-s--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--v-dur) var(--v-ease),
              color var(--v-dur) var(--v-ease),
              border-color var(--v-dur) var(--v-ease);
}

/* Primär — GENAU EIN Primärbutton je Ansicht.
   Ruhezustand ist der dunklere Zinnober: #E7443C erreicht gegen Weiß nur
   3,97:1 und fällt damit unter 4,5:1. #C9372F liegt bei 5,16:1,
   der Hover-Ton #A82820 bei 7,02:1. */
.v-btn--primary {
  background: var(--v-zinnober-deep);
  color: #FFFFFF;
  border-color: var(--v-zinnober-deep);
}
.v-btn--primary:hover {
  background: var(--v-zinnober-deeper);
  border-color: var(--v-zinnober-deeper);
}

/* Sekundär — Outline in Tinte */
.v-btn--ghost {
  background: transparent;
  color: var(--v-ink);
  border-color: var(--v-hairline-firm);
}
.v-btn--ghost:hover {
  background: var(--v-ink);
  color: var(--v-paper);
  border-color: var(--v-ink);
}

/* Tertiär — reiner Textlink im Button-Raster */
.v-btn--quiet {
  background: transparent;
  color: var(--v-stone);
  border-color: transparent;
  padding-inline: 4px;
  text-decoration: underline;
}
.v-btn--quiet:hover { color: var(--v-ink); }

.v-btn-row { display: flex; flex-wrap: wrap; gap: var(--v-3); }


/* 12 — FAKTEN-RASTER & SPRACHHINWEIS -------------------------------------- */
/* Die frühere Auffang-Box (.v-catch) für Initiativbewerbungen ist entfallen:
   ein solches Versprechen war nie zugesagt und darf nicht behauptet werden.
   Die Regeln dazu sind mit dem Markup gelöscht worden. */

/* Sprachhinweis DE ↔ NL — die Grenzregion liest zweisprachig */
.v-langnote {
  margin-top: var(--v-5);
  padding: var(--v-3) var(--v-4);
  background: var(--v-cloud);
  border: 1px solid var(--v-hairline);
  border-left: 2px solid var(--v-putty);
  border-radius: var(--v-radius);
  font-size: var(--v-s--1);
  color: var(--v-ink-soft);
  max-width: 68ch;
}
.v-langnote a { color: var(--v-ink); text-decoration: underline; }

/* Fakten-Raster "Warum VERON" */
.v-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--v-hairline);
}

.v-fact {
  padding: var(--v-6) var(--v-5) var(--v-7) 0;
  border-right: 1px solid var(--v-hairline);
}
.v-fact:last-child { border-right: 0; padding-right: 0; }
.v-fact + .v-fact { padding-left: var(--v-5); }

/* Trägt auch echte Wörter ("Kleve", "Goch") und ist damit Text, kein Dekor —
   deshalb der Text-Zinnober mit 6,09:1 statt der Flächenfarbe mit 3,97:1. */
.v-fact__num {
  display: block;
  font-size: var(--v-s--2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--v-zinnober-text);
  margin-bottom: var(--v-4);
}

.v-fact h3 { font-size: var(--v-s-1); margin-bottom: var(--v-3); }
.v-fact p { font-size: var(--v-s--1); color: var(--v-stone); }
.v-fact p + p { margin-top: var(--v-3); }

/* Filialanschrift im Fakten-Raster */
.v-fact__addr {
  font-style: normal;
  font-size: var(--v-s--1);
  color: var(--v-ink-soft);
  line-height: 1.5;
}
.v-fact__addr + p { margin-top: var(--v-3); }


/* 13 — CTA-BAND ----------------------------------------------------------- */
.v-cta {
  background: var(--v-cloud);
  border-top: 1px solid var(--v-putty);
  border-bottom: 1px solid var(--v-putty);
  padding-block: clamp(64px, 9vh, 120px);
}

.v-cta h2 { max-width: 18ch; }
.v-cta .v-lead { margin-top: var(--v-5); }
.v-cta .v-btn-row { margin-top: var(--v-7); }

.v-cta__channels {
  margin-top: var(--v-8);
  padding-top: var(--v-5);
  border-top: 1px solid var(--v-putty);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-6);
  max-width: var(--v-container-narrow);
}

.v-cta__channel h3 { font-size: var(--v-s-0); margin-bottom: var(--v-2); }
.v-cta__channel p { font-size: var(--v-s--1); color: var(--v-stone); }


/* 14 — AUSKLAPP-BLOCK (BEWERBERDATENSCHUTZ) ------------------------------- */
.v-disclosure {
  border: 1px solid var(--v-hairline);
  border-radius: var(--v-radius);
  background: var(--v-paper);
}

.v-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--v-4) var(--v-5);
  font-size: var(--v-s--1);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-4);
}
.v-disclosure > summary::-webkit-details-marker { display: none; }

/* Das Plus/Minus ist ein Zeichen, kein Rechteck — also Text-Zinnober. */
.v-disclosure > summary::after {
  content: '+';
  font-weight: 400;
  color: var(--v-zinnober-text);
  font-size: var(--v-s-1);
  line-height: 1;
}
.v-disclosure[open] > summary::after { content: '–'; }

.v-disclosure__body {
  padding: 0 var(--v-5) var(--v-5);
  border-top: 1px solid var(--v-hairline);
  padding-top: var(--v-5);
  font-size: var(--v-s--1);
  color: var(--v-stone);
}
.v-disclosure__body > * + * { margin-top: var(--v-3); }
.v-disclosure__body dt { font-weight: 600; color: var(--v-ink-soft); }
.v-disclosure__body dd { margin: 0 0 var(--v-3); }
.v-disclosure__body a { color: var(--v-ink-soft); }


/* 15 — FUSSZEILE & RECHTSLINKS -------------------------------------------- */
.v-footer {
  background: var(--v-paper);
  border-top: 1px solid var(--v-hairline);
  padding-block: var(--v-9) var(--v-7);
  font-size: var(--v-s--1);
}

.v-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--v-7) var(--v-6);
}

.v-footer__brand p {
  margin-top: var(--v-4);
  color: var(--v-stone);
  max-width: 34ch;
}

.v-footer h2 {
  font-size: var(--v-s--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v-stone);
  margin-bottom: var(--v-4);
  font-weight: 600;
}

.v-footer ul { display: grid; gap: var(--v-3); }

.v-footer a {
  color: var(--v-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.v-footer a:hover {
  color: var(--v-ink);
  border-bottom-color: var(--v-zinnober);
}

/* Externe Ziele (Shop-Rechtstexte) klein markieren */
.v-footer a[rel~='external']::after,
.v-ext::after {
  content: '↗';
  font-size: 0.82em;
  margin-left: 0.4ch;
  color: var(--v-stone-soft);
}

.v-footer__legal {
  margin-top: var(--v-8);
  padding-top: var(--v-5);
  border-top: 1px solid var(--v-hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--v-3) var(--v-5);
  color: var(--v-stone);
  font-size: var(--v-s--2);
}

/* Links MITTEN IM FLIESSTEXT müssen ohne Farbwahrnehmung erkennbar sein
   (WCAG 1.4.1). In den Link-Listen darüber genügt die Position, hier nicht. */
.v-footer__legal a {
  color: var(--v-ink-soft);
  text-decoration: underline;
  border-bottom: 0;
}
.v-footer__legal a:hover { color: var(--v-ink); }


/* 16 — FOKUS, SKIP-LINK, SCREENREADER ------------------------------------- */
/* Sichtbarer Fokus für Tastaturbedienung — nie entfernen. */
.v-page :focus-visible {
  outline: 2px solid var(--v-zinnober);
  outline-offset: 3px;
  border-radius: var(--v-radius);
}

/* Auf zinnoberfarbener Fläche kontrastiert Tinte besser */
.v-btn--primary:focus-visible {
  outline-color: var(--v-ink);
  outline-offset: 2px;
}

/* Karte als Ganzes markieren, wenn der Titellink Fokus hat */
.v-job__card:has(a:focus-visible) { outline: 2px solid var(--v-zinnober); outline-offset: -2px; }
.v-job__card a:focus-visible { outline: none; }

.v-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--v-ink);
  color: var(--v-paper);
  padding: 12px 20px;
  border-radius: var(--v-radius);
  font-size: var(--v-s--1);
  text-decoration: none;
}
.v-skiplink:focus {
  left: var(--v-gutter);
  top: var(--v-3);
}

.v-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 17 — BREAKPOINTS -------------------------------------------------------- */

/* Tablet quer / kleines Notebook */
@media (max-width: 1080px) {
  .v-detail__grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .v-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-fact:nth-child(2) { border-right: 0; padding-right: 0; }
  .v-fact:nth-child(3) { padding-left: 0; border-top: 1px solid var(--v-hairline); }
  .v-fact:nth-child(4) { border-top: 1px solid var(--v-hairline); }
}

/* Tablet hoch */
@media (max-width: 900px) {
  :root { --v-header-h: 58px; }

  .v-jobs { grid-template-columns: minmax(0, 1fr); }

  .v-detail__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v-8);
  }
  .v-apply { position: static; }

  .v-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefon — Bewerbungsweg Nr. 1, deshalb hier großzügig */
@media (max-width: 640px) {
  .v-header__nav { gap: var(--v-4); }
  .v-header__nav a:not([data-keep]) { display: none; }  /* nur CTA behalten */

  .v-hero__facts { grid-template-columns: minmax(0, 1fr); }
  .v-hero__fact {
    border-right: 0;
    border-bottom: 1px solid var(--v-hairline);
    padding: var(--v-4) 0;
  }
  .v-hero__fact + .v-hero__fact { padding-left: 0; }
  .v-hero__fact:last-child { border-bottom: 0; }

  .v-hero__actions .v-btn,
  .v-cta .v-btn { width: 100%; }

  .v-job__card { padding: var(--v-5) var(--v-4) var(--v-6); }

  .v-list--split { grid-template-columns: minmax(0, 1fr); }

  .v-facts { grid-template-columns: minmax(0, 1fr); }
  .v-fact {
    border-right: 0;
    border-bottom: 1px solid var(--v-hairline);
    padding: var(--v-5) 0;
  }
  .v-fact + .v-fact { padding-left: 0; border-top: 0; }
  .v-fact:last-child { border-bottom: 0; }

  .v-cta__channels { grid-template-columns: minmax(0, 1fr); }

  .v-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--v-6); }
  .v-footer__legal { flex-direction: column; }
}

@media (max-width: 400px) {
  .v-wordmark__sub { display: none; }
}


/* 18 — BEWEGUNG & DRUCK ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.v-page) { scroll-behavior: auto; }

  .v-page *,
  .v-page *::before,
  .v-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Akzentlinie der Karte trotzdem zeigen, nur ohne Bewegung */
  .v-job__card:hover::before,
  .v-job__card:focus-within::before { transform: none; }
}

@media print {
  .v-header,
  .v-footer__grid,
  .v-btn,
  .v-langnote,
  .v-back { display: none !important; }

  .v-page { background: #fff; font-size: 11pt; }
  .v-section { padding-block: 12pt; }
  .v-detail__grid { display: block; }
  .v-disclosure[open] > summary::after { content: ''; }

  /* Bewerbungsadresse beim Ausdruck sichtbar machen */
  .v-page a[href^='mailto:']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}


/* ============ Fuss aus dem Shop (1:1) ============ */
.veron-footer{background:var(--v-ground);color:var(--v-text);border-top:1px solid var(--v-hairline);padding-top:clamp(48px,7vh,88px);padding-bottom:24px;margin-top:clamp(48px,8vh,128px)}
.veron-footer__top{display:grid;grid-template-columns:1fr 2.9fr;gap:clamp(32px,4vw,72px);padding-bottom:48px;border-bottom:1px solid var(--v-hairline)}
@media(max-width:900px){.veron-footer__top{grid-template-columns:1fr;gap:40px}
.veron-footer__wordmark{display:inline-block;font-family:"Archivo",var(--v-font-sans),sans-serif;font-weight:600;font-size:1.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--v-text);text-decoration:none;white-space:nowrap}
.veron-footer__wordmark:after{content:"";display:inline-block;width:.17em;height:.17em;margin-left:-.13em;border-radius:50%;background:var(--v-accent);vertical-align:baseline}
.veron-footer__strap{margin-top:14px;font-family:var(--v-font-sans);font-size:var(--v-s-0);line-height:1.35;color:var(--v-text);max-width:22ch}
.veron-footer__strap em{display:block;color:var(--v-mute)}
.veron-footer__addr{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px;font-style:normal;font-family:var(--v-font-mono);font-size:.86rem;line-height:1.5;color:var(--v-text)}
.veron-footer__addr strong{display:block;font-family:var(--v-font-sans);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v-text);margin-bottom:6px}
.veron-footer__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,40px)}
@media(max-width:640px){.veron-footer__nav{grid-template-columns:repeat(2,1fr)}
.veron-footer__col-title{font-family:var(--v-font-sans);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v-text);margin-bottom:16px}
.veron-footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.veron-footer__note{font-family:var(--v-font-mono);font-size:.9rem;letter-spacing:.04em;color:var(--v-mute)}
.veron-footer__col a{font-family:var(--v-font-mono);font-size:.9rem;letter-spacing:.04em;color:var(--v-text);text-decoration:none;transition:color var(--v-t-quick)}
.veron-footer__col a:hover{color:var(--v-accent)}
.veron-footer__news{min-width:0}
.veron-footer__news-sub{font-family:var(--v-font-sans);font-size:.9rem;color:var(--v-mute);line-height:1.4;margin:0 0 14px;max-width:32ch}
.veron-footer__news-form{display:flex;flex-direction:column;gap:10px}
.veron-footer__news-row{display:flex;gap:6px;align-items:stretch;border:1px solid var(--v-hairline-mid);border-radius:var(--v-radius);overflow:hidden;transition:border-color var(--v-t-quick)}
.veron-footer__news-row:focus-within{border-color:var(--v-accent)}
.veron-footer__news-row input[type=email]{flex:1;min-width:0;border:0;padding:12px 14px;background:transparent;color:var(--v-text);font-family:var(--v-font-sans);font-size:.9rem}
.veron-footer__news-row input[type=email]:focus{outline:0}
.veron-footer__news-row button{min-width:48px;padding:0 18px;min-height:unset;border-radius:0;font-size:1.1rem}
.veron-footer__news-row button:after{display:none}
.veron-footer__news-msg{font-family:var(--v-font-mono);font-size:.82rem;color:var(--v-accent);padding:8px 0}
.veron-footer__bottom{padding-top:24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--v-font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--v-mute)}
.veron-footer__copy{margin:0;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.veron-footer__mini-links{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;row-gap:8px}
.veron-footer__mini-links a{color:var(--v-mute);text-decoration:none;transition:color var(--v-t-quick)}
.veron-footer__mini-links a:hover{color:var(--v-accent)}
.veron-footer__mini-links span[aria-hidden]{opacity:.5}
.veron-footer__pay{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.12em}
.veron-footer__pay span[aria-hidden]{opacity:.5}
.veron-footer__seal{flex-basis:100%;margin-top:12px;display:inline-block;line-height:0}
.veron-footer__seal img{height:80px;width:auto;max-width:100%;display:block}
@media(max-width:640px){.veron-footer__bottom{flex-direction:column;align-items:flex-start;gap:20px}
.veron-footer__widerruf{margin-top:4px}
@media(max-width:900px)and (min-width:641px){.veron-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.veron-footer__top{grid-template-columns:1fr;gap:40px}}
@media(max-width:640px){.veron-footer__nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.veron-footer__bottom{flex-direction:column;align-items:flex-start;gap:20px}.veron-footer__widerruf{margin-top:4px}}
@media(max-width:900px)and (min-width:641px){.veron-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}}