/* =========================================================
   Nextep Personal — Marketing Site
   Self-hosted fonts, no external requests.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/LeagueSpartan-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --teal: #0db0a8;
  --teal-dark: #008983;
  --teal-text: #006f6a;      /* AA on white for small text */
  --teal-btn: #007c76;
  --teal-btn-2: #00615c;
  --teal-deep: #00423f;
  --teal-050: #eaf7f6;
  --coral: #f38e95;
  --coral-deep: #d4646d;
  --mint: #f2f9f7;
  --ink: #010f0e;
  --body: #434343;
  --muted: #5f6f6e;
  --border: #d1dfdf;
  --white: #fff;

  --font-display: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'League Spartan', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --shadow-sm: 0 2px 8px rgba(1, 15, 14, .05);
  --shadow-md: 0 14px 34px -18px rgba(1, 15, 14, .22);
  --shadow-lg: 0 34px 70px -34px rgba(0, 66, 63, .38);

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 9vw, 130px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: hidden;      /* fallback */
  overflow-x: clip;        /* keeps position:sticky intact */
}
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .005em;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--teal-text); text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
p { margin: 0; }
:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }

.skip-link {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-140%);
  z-index: 200;
  background: var(--teal-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { transform: none; }

/* ---------- Typography helpers ---------- */
/* pretty (not balance) so the long compound only hyphenates when it truly doesn't fit */
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; text-wrap: pretty; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 18px;
}
.eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.eyebrow-light { color: #8fe9e2; }

.accent-word { color: var(--teal-text); }
.accent-word-light { color: #7fe3dd; }

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  color: var(--body);
  max-width: 54ch;
}
.section-lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 58ch;
  margin-top: 18px;
}
.section-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 60px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
  text-align: center;
}
.btn-sm { padding: 11px 22px; font-size: .95rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--teal-btn), var(--teal-btn-2));
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(0, 97, 92, .75);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 97, 92, .85);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, .8);
  color: var(--teal-text);
  border-color: var(--border);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--teal-text);
  border-color: var(--teal-dark);
}
.btn-outline:hover { background: var(--teal-050); transform: translateY(-2px); }

/* ---------- Decorative blobs ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.blob-a {
  width: 620px; height: 620px;
  top: -230px; right: -180px;
  background: radial-gradient(circle, rgba(13, 176, 168, .28), rgba(13, 176, 168, 0) 70%);
}
.blob-b {
  width: 460px; height: 460px;
  bottom: -180px; left: -200px;
  background: radial-gradient(circle, rgba(243, 142, 149, .24), rgba(243, 142, 149, 0) 70%);
}
.blob-c {
  width: 520px; height: 520px;
  top: 8%; left: -260px;
  background: radial-gradient(circle, rgba(13, 176, 168, .18), rgba(13, 176, 168, 0) 70%);
}
.blob-d {
  width: 520px; height: 520px;
  bottom: -160px; right: -200px;
  background: radial-gradient(circle, rgba(243, 142, 149, .2), rgba(243, 142, 149, 0) 70%);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -18px rgba(1, 15, 14, .5);
  background: rgba(255, 255, 255, .95);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
/* Volles Lockup «Nextep PERSONAL» (Almids Logo vom 15.08.2026 für Website,
   Briefkopf und E-Mail-Signatur). Das Bild trägt die ganze Marke, der frühere
   Text «Personal» daneben ist deshalb entfallen — er hätte das Wort doppelt
   gezeigt. Zweizeilig, also höher als die alte Wortmarke: 44 px statt 30 px,
   damit die kleinere «PERSONAL»-Zeile lesbar bleibt. Auf dem dunklen Footer
   wird dieselbe Datei per Filter rein weiss ausgegeben — das fast schwarze
   «Nextep» wäre dort sonst unsichtbar. */
.brand-mark { width: auto; height: clamp(34px, 4.4vw, 44px); }
.brand-footer .brand-mark { filter: brightness(0) invert(1); }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav-list { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.nav-list a {
  position: relative;
  font-size: .96rem;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 2px;
  transition: color .22s var(--ease);
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-list a:hover { color: var(--teal-text); }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--teal-text); font-weight: 600; }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 120px);
  background:
    radial-gradient(90% 120% at 85% 0%, #eef9f8 0%, rgba(255, 255, 255, 0) 60%),
    var(--white);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(36px, 4.4vw, 72px);
  align-items: center;
}
.hero-copy h1 { margin-bottom: 24px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.hero-tags li {
  position: relative;
  padding-left: 22px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}
.hero-tags li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--teal-050);
  border: 2px solid var(--teal);
}

.hero-media { position: relative; }
.hero-frame {
  position: relative;
  border-radius: 200px 200px var(--r-xl) var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--teal-050);
}
.hero-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(13, 176, 168, .1) 0%, rgba(13, 176, 168, 0) 42%, rgba(0, 66, 63, .3) 100%);
  pointer-events: none;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }

.hero-badge {
  position: absolute;
  left: clamp(-28px, -2vw, -12px);
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 22px 16px 18px;
  box-shadow: var(--shadow-md);
  max-width: 290px;
}
.hero-badge-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
}
.hero-badge-icon svg { width: 20px; height: 20px; }
.hero-badge-text {
  display: flex;
  flex-direction: column;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--muted);
}
.hero-badge-text strong {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

/* =========================================================
   INTRO / TRUST
   ========================================================= */
.intro {
  background: var(--mint);
  padding-block: clamp(64px, 8vw, 110px);
  border-block: 1px solid var(--border);
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.intro-media { position: relative; }
.intro-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.intro-media-glow {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--teal);
  border-radius: var(--r-xl);
  opacity: .35;
  z-index: 0;
}
.intro-copy h2 { margin-bottom: 20px; }
.intro-copy p { color: var(--body); max-width: 56ch; }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.pill-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px 10px 14px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.pill-list svg { width: 18px; height: 18px; color: var(--teal-dark); }

/* =========================================================
   SPLIT SECTIONS (Stellensuchende / Arbeitgeber)
   ========================================================= */
.section-candidates { overflow: hidden; background: var(--white); }
.section-employers {
  background: linear-gradient(180deg, var(--mint) 0%, #fff 100%);
  border-top: 1px solid var(--border);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 1;
}
/* mirrored variant: media left, copy right — copy keeps the wider track */
.split-reverse { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split-reverse .split-copy { grid-column: 2; grid-row: 1; }
.split-reverse .split-media { grid-column: 1; grid-row: 1; }

.media-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame-tall img { aspect-ratio: 4 / 5; }
.media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(13, 176, 168, .1) 0%, rgba(13, 176, 168, 0) 45%, rgba(0, 66, 63, .22) 100%);
  pointer-events: none;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.benefit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 176, 168, .55);
  box-shadow: var(--shadow-md);
}
.benefit-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--teal-050);
  color: var(--teal-dark);
  margin-bottom: 16px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.benefit-card:hover .benefit-icon {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-card h3 { font-size: 1.08rem; margin-bottom: 8px; line-height: 1.25; }
.benefit-card p { font-size: .93rem; color: var(--muted); line-height: 1.55; }

/* ---------- Steps (7-step candidate flow) ---------- */
.steps-block {
  margin-top: clamp(52px, 6vw, 88px);
  background: var(--mint);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 52px) clamp(24px, 4vw, 52px);
  position: relative;
  z-index: 1;
}
.steps-head { text-align: center; max-width: 46ch; margin: 0 auto clamp(30px, 4vw, 46px); }
.steps-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 10px; }
.steps-head p { color: var(--muted); font-size: .98rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  counter-reset: step;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 8px, transparent 8px 16px);
  opacity: .45;
}
.step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.step-num {
  position: relative;
  z-index: 1;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--teal);
  color: var(--teal-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  box-shadow: 0 6px 14px -8px rgba(0, 97, 92, .6);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.step:hover .step-num {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
  transform: translateY(-3px);
}
.step-label {
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  text-wrap: balance;
}

.steps-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}
.steps-cta-note { font-size: .92rem; color: var(--muted); }

/* ---------- Process (4 steps, employers) ---------- */
.process { margin-top: clamp(52px, 6vw, 88px); position: relative; z-index: 1; }
.process-head { text-align: center; max-width: 48ch; margin: 0 auto clamp(30px, 4vw, 46px); }
.process-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 10px; }
.process-head p { color: var(--muted); font-size: .98rem; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.process-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 26px 28px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.process-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.process-card:hover {
  transform: translateY(-5px);
  border-color: rgba(13, 176, 168, .55);
  box-shadow: var(--shadow-md);
}
.process-card:hover::before { transform: scaleX(1); }
.process-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, var(--teal), rgba(0, 137, 131, .55));
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 14px;
}
.process-card h4 {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.25;
}
.process-card p { font-size: .93rem; color: var(--muted); line-height: 1.55; }

/* =========================================================
   KOMPETENZEN (dark)
   ========================================================= */
.section-skills {
  background:
    radial-gradient(120% 100% at 15% 0%, #00726d 0%, rgba(0, 114, 109, 0) 55%),
    linear-gradient(150deg, #00524e 0%, #00342f 100%);
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
}
.section-skills h2, .section-skills h3 { color: #fff; }
.section-skills .section-lead { color: rgba(255, 255, 255, .76); }
.section-skills .section-head { margin-inline: auto; text-align: center; max-width: 58ch; }
.section-skills .eyebrow { justify-content: center; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pillar {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.pillar:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .11);
  border-color: rgba(143, 233, 226, .5);
}
.pillar-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: rgba(143, 233, 226, .16);
  color: #8fe9e2;
  margin-bottom: 20px;
}
.pillar-icon svg { width: 26px; height: 26px; }
.pillar h3 { font-size: 1.22rem; margin-bottom: 12px; }
.pillar p { font-size: .96rem; color: rgba(255, 255, 255, .78); line-height: 1.6; }

.branches {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-align: center;
}
.branches-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8fe9e2;
  margin-bottom: 22px;
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.chip-list li {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: .94rem;
  font-weight: 500;
  color: #fff;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.chip-list li:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(143, 233, 226, .6);
  transform: translateY(-2px);
}

/* =========================================================
   ÜBER UNS
   ========================================================= */
.section-about { overflow: hidden; background: var(--white); }
.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.about-copy h2 { margin-bottom: 20px; }
.about-copy p { max-width: 54ch; }
.values {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--teal-text);
  letter-spacing: -.01em;
}

.quote-card {
  margin: 34px 0 0;
  position: relative;
  background: linear-gradient(140deg, var(--mint), #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 34px 32px 30px;
  box-shadow: var(--shadow-md);
}
.quote-card::before {
  content: '';
  position: absolute;
  left: 0; top: 28px; bottom: 28px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--teal), var(--coral));
}
.monogram {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-dark), var(--teal-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 20px;
  box-shadow: 0 10px 22px -12px rgba(0, 66, 63, .9);
}
.quote-card blockquote { margin: 0; }
.quote-card blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -.01em;
}
.quote-card figcaption {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .92rem;
}
.quote-card figcaption strong { color: var(--ink); font-weight: 700; }
.quote-card figcaption span { color: var(--muted); }

.about-media { position: relative; }
.about-media .media-frame { border-radius: var(--r-xl) 120px var(--r-xl) 120px; }
.about-media .media-frame img { aspect-ratio: 5 / 4; }
.about-media-accent {
  position: absolute;
  right: -22px; bottom: -22px;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 2px dashed rgba(13, 176, 168, .45);
  z-index: -1;
}

/* =========================================================
   KONTAKT
   ========================================================= */
.section-contact {
  background: linear-gradient(180deg, #fff 0%, var(--mint) 45%);
  padding-bottom: clamp(72px, 9vw, 120px);
}
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 60px);
  box-shadow: var(--shadow-lg);
}
.contact-copy h2 { margin-bottom: 4px; line-height: 1.15; }

.contact-cards {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--mint);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.contact-card:hover {
  transform: translateX(4px);
  border-color: rgba(13, 176, 168, .6);
  box-shadow: var(--shadow-sm);
}
.contact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--teal-dark);
}
.contact-icon svg { width: 21px; height: 21px; }
.contact-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-value {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--teal-text);
  line-height: 1.4;
  word-break: break-word;
  transition: color .22s var(--ease);
}
a.contact-value:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.contact-value-static { color: var(--ink); font-weight: 500; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.contact-media .media-frame { border-radius: 120px var(--r-xl) 120px var(--r-xl); }
.contact-media .media-frame img { aspect-ratio: 5 / 4; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: linear-gradient(160deg, #00423f 0%, #010f0e 100%);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(52px, 6vw, 76px);
  font-size: .95rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(40px, 5vw, 58px);
}
.footer-brand p { margin-top: 18px; max-width: 38ch; line-height: 1.6; }

.footer-heading {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8fe9e2;
  margin-bottom: 18px;
}
.footer-nav ul, .footer-contact ul { display: grid; gap: 11px; }
.site-footer a { color: rgba(255, 255, 255, .82); transition: color .22s var(--ease); }
.site-footer a:hover { color: #8fe9e2; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-block: 22px 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 12px 26px; }

/* =========================================================
   REVEAL (progressive enhancement)
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
  .steps::before { display: none; }
}

@media (max-width: 1024px) {
  :root { --r-xl: 32px; --r-lg: 24px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-copy { max-width: 640px; }
  .hero-frame { aspect-ratio: 16 / 11; border-radius: var(--r-xl); }
  .hero-frame img { object-position: 55% 32%; }
  .hero-badge { left: auto; right: 20px; bottom: -22px; }
  .hero-media { margin-bottom: 26px; }

  .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .intro-media { max-width: 420px; margin-inline: auto; }
  .intro-media-glow { inset: 14px -14px -14px 14px; }

  .split, .split-reverse { grid-template-columns: minmax(0, 1fr); }
  .split-reverse .split-copy { grid-column: 1; grid-row: 1; }
  .split-reverse .split-media { grid-column: 1; grid-row: 2; }
  .split-media { max-width: 560px; margin-inline: auto; }
  .media-frame-tall img { aspect-ratio: 16 / 10; }

  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar-grid { grid-template-columns: minmax(0, 1fr); }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-media { max-width: 620px; margin-inline: auto; }
  .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .contact-media { max-width: 560px; margin-inline: auto; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile nav ----------
   Umschaltpunkt 1080px statt 900px (QA 13.08.2026): zwischen 901 und rund
   1080 Pixeln — iPad Pro quer, kleine Notebooks — passte die volle Leiste
   nicht mehr in eine Zeile, «Über uns», «Offene Stellen» und der Knopf
   «Kontakt aufnehmen» brachen zweizeilig um. */
@media (max-width: 1080px) {
  /* header stays above panel + scrim so the toggle turns into a visible, clickable X */
  .site-header {
    z-index: 120;
    /* KEIN backdrop-filter auf Mobile (Almid, 13.08.2026: «wenn man ganz nach
       unten gescrollt hat, kommt das menu nicht mit»). Ein Element mit
       backdrop-filter wird zum Containing Block für alles, was darin
       `position: fixed` ist — das Menü-Panel und sein Verdunkler hingen damit
       an der Dokument-Position des Kopfs statt am Sichtfenster und standen
       nach dem Scrollen weit oberhalb des Bildes. Ohne Filter braucht der Kopf
       einen deckenden Hintergrund, sonst scheint der Inhalt durch. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
  .site-header.is-scrolled { background: #fff; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    z-index: 130;            /* above the sliding panel (110) inside the header */
    padding: 9px 16px 9px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-bars { display: grid; gap: 4px; }
  .nav-toggle-bars span {
    display: block;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--teal-dark);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }

  .site-nav {
    position: fixed;
    inset: 0 0 auto auto;
    top: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #fff;
    padding: 96px 28px 32px;
    box-shadow: -20px 0 60px -30px rgba(1, 15, 14, .5);
    transform: translateX(102%);
    /* `visibility: hidden` im geschlossenen Zustand nimmt das Panel aus der
       Tabreihenfolge (QA 13.08.2026: mit der Tastatur lief man in sieben
       unsichtbare Links ausserhalb des Bildschirms). Die Verzögerung sorgt
       dafür, dass das Ausblenden erst NACH dem Zufahren greift, sonst
       verschwindet das Menü schlagartig statt zu gleiten. */
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
    z-index: 110;
    overflow-y: auto;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid var(--border); }
  .nav-list a { display: block; padding: 15px 2px; font-size: 1.05rem; font-weight: 600; }
  .nav-list a::after { display: none; }
  .nav-cta { margin-top: 26px; width: 100%; }

  .nav-toggle-input:checked ~ header .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s;
  }
  .nav-toggle-input:checked ~ header .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle-input:checked ~ header .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ header .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-toggle-input:checked ~ .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(1, 15, 14, .42);
    z-index: 105;
    animation: fade-in .3s var(--ease);
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .benefit-grid { grid-template-columns: minmax(0, 1fr); }
  .process-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-badge { position: static; margin-top: 18px; max-width: none; }
  .hero-media { margin-bottom: 0; }
  .steps-cta, .contact-actions, .hero-actions { flex-direction: column; align-items: stretch; }
  .steps-cta .btn, .contact-actions .btn, .hero-actions .btn { width: 100%; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { justify-content: flex-start; }
}

@media (max-width: 480px) {
  :root { --r-xl: 26px; --r-lg: 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 10px 0;
  }
  .step + .step { border-top: 1px solid rgba(13, 176, 168, .22); }
  .step-num { width: 42px; height: 42px; font-size: 1rem; }
  .step-label { font-size: .95rem; }
  .hero-frame { aspect-ratio: 4 / 3; }
  .quote-card { padding: 28px 24px 26px; }
  .contact-card { padding: 16px; gap: 13px; }
  .intro-media-glow { inset: 12px -12px -12px 12px; }
}

/* ---------- Motion / print ---------- */
/* ---------- Fingerflächen ----------
   Reiner Text ist auf dem Handy 13–15 Pixel hoch; als Trefferfläche ist das zu
   wenig (QA 13.08.2026). Auf Touch-Geräten bekommen die Linklisten darum Luft
   nach oben und unten und dafür weniger Abstand dazwischen — der sichtbare
   Rhythmus bleibt, die Fläche wächst auf rund 40 Pixel. */
@media (pointer: coarse) {
  .footer-nav ul, .footer-contact ul { gap: 4px; }
  .footer-nav a, .footer-contact a { display: block; padding-block: 10px; }
  .footer-legal { gap: 4px 26px; }
  .footer-legal a { display: inline-block; padding-block: 12px; }
  .back-link { display: inline-flex; padding-block: 10px; }
  .chip-filter-btn { min-height: 40px; }
}

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

@media print {
  .site-header, .nav-scrim, .blob { display: none !important; }
  body { color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   OFFENE STELLEN  (/jobs/ — generated by render-jobs.mjs)
   Same tokens, buttons and card language as the landing page.
   ========================================================= */

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

/* ---------- Hero-lite (list + detail head) ---------- */
.page-hero,
.job-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 84px) clamp(32px, 4vw, 56px);
  /* fades out well before the section edge — a gradient that is still coloured
     at the bottom draws a visible horizontal seam across the page */
  background:
    radial-gradient(120% 165% at 86% -30%, #eef9f8 0%, rgba(255, 255, 255, 0) 66%),
    var(--white);
}
/* The list hero ends with the count line and is followed directly by the filter
   bar — it needs less air below than the detail hero. */
.page-hero { padding-block-end: clamp(22px, 2.4vw, 32px); }
.page-hero-inner,
.job-hero-inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 22px; }
.page-hero .lead { max-width: 62ch; }
.page-hero-note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .93rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ---------- Meta chips (Ort · Pensum · Eintritt) ---------- */
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 16px;
}
.job-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--mint);
  font-size: .86rem;
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.3;
}
.job-meta-icon { display: grid; place-items: center; flex: none; color: var(--teal-dark); }
.job-meta-icon svg { width: 15px; height: 15px; }
.job-meta-lg { margin-top: 22px; gap: 10px 14px; }
.job-meta-lg li { font-size: .93rem; padding: 9px 18px 9px 14px; }
.job-meta-lg .job-meta-icon svg { width: 17px; height: 17px; }

/* ---------- Jobsuche ---------- */
/* Hidden without JS (main.js adds .js to <html>) so the full unfiltered list
   stays the only thing a no-JS visitor sees — never a dead-looking control. */
/* Die Suchmaske ist der Mittelpunkt der Seite (Almid, 12.08.2026): Stichwort,
   Ort mit Umkreis und Branche in einer Zeile, darunter die Berufsgruppen als
   Schnellfilter. Unter 900px stapelt alles. */
.jobs-filters { display: none; margin-bottom: 18px; }
.js .jobs-filters {
  display: block;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--mint);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.jobs-filters-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
}
.jobs-filters-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1.1fr) minmax(130px, .7fr) minmax(170px, 1fr) auto;
  gap: 12px 14px;
  align-items: end;
}
.jobs-filters-grid:not(:has(.jobs-field-branche)) {
  grid-template-columns: minmax(220px, 1.6fr) minmax(180px, 1.2fr) minmax(140px, .8fr) auto;
}

.jobs-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jobs-field > label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal-deep);
  padding-left: 4px;
}
.jobs-field-icon {
  position: absolute;
  left: 16px;
  bottom: 13px;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}
.jobs-field-icon svg { width: 18px; height: 18px; }
.jobs-field input[type="search"],
.jobs-field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.jobs-field-was input[type="search"],
.jobs-field-wo input[type="search"] { padding-left: 44px; }
.jobs-field input[type="search"]:focus,
.jobs-field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-050);
}
.jobs-field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.jobs-field select { cursor: pointer; appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.jobs-field-submit { justify-content: flex-end; }
.jobs-submit { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.jobs-submit-icon { display: grid; place-items: center; }
.jobs-submit-icon svg { width: 17px; height: 17px; }

/* Vorschlagsliste des Ortsfelds — nur mit geladenem Ortsdatensatz. */
.jobs-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.jobs-suggestions[hidden] { display: none; }
.jobs-suggestion {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: .92rem;
  text-align: left;
  color: var(--body);
  cursor: pointer;
}
.jobs-suggestion:hover,
.jobs-suggestion:focus-visible { background: var(--teal-050); color: var(--teal-deep); }

.jobs-place-note {
  margin: 10px 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--teal-text);
}
.jobs-place-note[hidden] { display: none; }

.jobs-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.jobs-chip-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal-deep);
}
.jobs-chip-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-filter-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.chip-filter-btn:hover { border-color: var(--teal); color: var(--teal-text); }
.chip-filter-btn.is-active {
  background: var(--teal-050);
  border-color: var(--teal);
  color: var(--teal-deep);
}
/* Trefferzeile unter der Maske — steht auch ohne JS, darum ausserhalb des
   Formulars und ohne .js-Gate. */
.jobs-filters-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.jobs-filter-count {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--teal-deep);
}
.jobs-filter-count[hidden] { display: none; }
.jobs-filter-stand {
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
}
.jobs-reset {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 600;
  color: var(--teal-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jobs-reset[hidden] { display: none; }
.jobs-empty-filtered { margin-top: 8px; }

/* ---------- List ---------- */
/* The hero already ends with the count line, so a big top pad here only opened
   a hole between the two (Almid, 12.08.2026). */
.section-jobs { padding-block: clamp(18px, 2.2vw, 28px) clamp(52px, 6vw, 84px); }
.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}
/* `display` in einer Autorenregel schlägt das eingebaute [hidden] des Browsers.
   Ohne diese beiden Zeilen setzt jobs-filter.js zwar `hidden`, die Karten
   bleiben aber stehen: die Trefferzahl sagte «3 von 35», gezeigt wurden alle 35
   (QA 13.08.2026). Gleiches Muster wie bei .jobs-suggestions/.jobs-place-note. */
.job-card[hidden], .jobs-grid[hidden] { display: none; }
.job-card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.job-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}
.job-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.job-card-date {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.job-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(243, 142, 149, .18);
  color: #a83a45;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.job-card-badge-besetzt {
  background: rgba(1, 15, 14, .07);
  color: var(--muted);
}

/* ---------- Status-Badge (Besetzt), grosse Variante für Detailseite + Karte ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(1, 15, 14, .06);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.job-card-title {
  font-size: clamp(1.16rem, 1.5vw, 1.34rem);
  line-height: 1.24;
  /* German job titles are long compounds; automatic hyphenation split them in
     the wrong place («Treuhandsachbe-arbeiterin»), so only break if forced */
  hyphens: manual;
  overflow-wrap: break-word;
}
.job-card-title a { color: var(--ink); transition: color .22s var(--ease); }
.job-card:hover .job-card-title a,
.job-card-title a:hover { color: var(--teal-text); }
.job-card-teaser {
  margin-top: 16px;
  margin-bottom: auto;   /* pushes the CTA to the card floor — equal button rows */
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
}
.job-card-cta {
  align-self: flex-start;
  margin-top: 22px;
}
.job-card-cta-icon { display: grid; place-items: center; }
.job-card-cta-icon svg { width: 16px; height: 16px; }

/* ---------- Empty state ---------- */
.jobs-empty {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 48px);
  background: var(--mint);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.jobs-empty-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
}
.jobs-empty-icon svg { width: 26px; height: 26px; }
.jobs-empty h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: 14px; }
.jobs-empty p { color: var(--muted); }
.jobs-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

/* ---------- Hinweis-Band unter der Liste ---------- */
.section-jobs-note { padding-block: 0 clamp(64px, 8vw, 110px); }
.jobs-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
  padding: clamp(26px, 3.4vw, 40px) clamp(26px, 3.4vw, 44px);
  background: linear-gradient(135deg, #f4fbfa, #eaf7f6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.jobs-note-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--teal-dark);
}
.jobs-note-icon svg { width: 24px; height: 24px; }
.jobs-note-body h2 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin-bottom: 8px; }
.jobs-note-body p { color: var(--muted); font-size: .96rem; max-width: 62ch; }
.jobs-note-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Detail ---------- */
.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--teal-text);
}
.back-link span { display: grid; place-items: center; }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: var(--teal-deep); text-decoration: underline; }
.job-hero h1 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }

.section-job-detail { padding-block: clamp(34px, 4vw, 56px) clamp(64px, 8vw, 110px); }
.job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.job-body { min-width: 0; }
.job-lead {
  font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  color: var(--body);
  line-height: 1.7;
  max-width: 68ch;
}
.job-section { margin-top: clamp(30px, 3.4vw, 44px); }
.job-section:first-child { margin-top: 0; }
.job-section h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.job-section > p { color: var(--body); max-width: 68ch; line-height: 1.7; }
/* Impressum / Datenschutzerklärung (render-legal.mjs). Long-form legal copy in
   a single column — no aside, so the shell is not the two-column job-layout. */
.legal-body { max-width: 78ch; }
.legal-body h2 {
  font-size: clamp(1.14rem, 1.7vw, 1.35rem);
  margin: clamp(30px, 3.4vw, 44px) 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.legal-body > h2:first-child { margin-top: 0; }
.legal-body p { color: var(--body); line-height: 1.7; margin-bottom: 14px; }
.legal-body a { color: var(--teal); }

.job-list, .legal-list { display: grid; gap: 12px; max-width: 68ch; }
.legal-list { margin: 4px 0 18px; }
.job-list li, .legal-list li {
  position: relative;
  padding-left: 28px;
  color: var(--body);
  line-height: 1.6;
}
.job-list li::before, .legal-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal-050);
  border: 2px solid var(--teal);
}
.job-reference {
  /* Referenznummer des Inserats (Almid, 14.08.2026): die Nummer, die ein
     Bewerber am Telefon oder in der Bewerbung angibt. Steht dort, wo Schweizer
     Inserate sie tragen — am Fuss des Inseratstexts. */
  margin-top: clamp(18px, 2vw, 26px);
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .01em;
}
.job-outro {
  margin-top: clamp(30px, 3.4vw, 44px);
  padding: 22px 26px;
  background: var(--mint);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--body);
  max-width: 68ch;
}

/* ---------- Bewerbungs-Karte ---------- */
.job-aside { position: sticky; top: 104px; }
.apply-card {
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
/* Icon + title in one row, on a tinted band that separates the invitation from
   the form fields below it. */
.apply-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: -26px -26px 0;
  padding: 22px 26px 20px;
  background: linear-gradient(180deg, var(--mint) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.apply-card-head-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--teal-dark);
}
.apply-card-head-icon svg { width: 19px; height: 19px; }
.apply-card h2 { font-size: 1.32rem; margin-bottom: 6px; }
.apply-hint { font-size: .93rem; color: var(--muted); line-height: 1.6; }
/* display:block (not the .btn default inline-flex) so a two-line label like
   «Bewerbung an info@nextep-personal.ch» wraps as one centred text block
   instead of two flex items sitting next to each other */
.apply-cta {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding-block: 14px;
  font-size: .97rem;
  line-height: 1.4;
}
.nowrap { white-space: nowrap; }

/* ---------- Bewerbungsformular ---------- */
.apply-card-besetzt .apply-cta { margin-top: 18px; }

.apply-form { margin-top: 22px; display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label,
.field-label-static {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Fields sit on a white card, so a white field has only its hairline border
     to be seen by — the faint tint makes the form read as a form. */
  background: #f7fbfb;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-050);
}

.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 16px;
  border: 2px dashed rgba(13, 176, 168, .45);
  border-radius: var(--r-md);
  background: var(--mint);
  text-align: center;
  cursor: pointer;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--teal); }
.dropzone.is-dragover { border-color: var(--teal); background: var(--teal-050); }
.dropzone-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(13, 176, 168, .35);
  color: var(--teal-dark);
}
.dropzone-icon svg { width: 20px; height: 20px; }
.dropzone-text { font-size: .89rem; color: var(--muted); }
.dropzone-link { color: var(--teal-text); font-weight: 700; text-decoration: underline; }
.dropzone-filename {
  font-size: .85rem;
  font-weight: 700;
  color: var(--teal-deep);
  word-break: break-all;
}
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.field-hint { font-size: .8rem; color: var(--muted); }

.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #f7fbfb;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
}
.field-checkbox input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--teal-dark);
}

/* Honeypot: never seen or reachable by a person, only bots that fill every field. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form-message {
  min-height: 1.3em;
  font-size: .87rem;
  font-weight: 600;
}
.form-message-error { color: var(--coral-deep); }
.form-message-success { color: var(--teal-deep); }

.apply-form-submit { width: 100%; padding-block: 14px; }
.apply-form-alt {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--mint);
  font-size: .86rem;
  color: var(--body);
  line-height: 1.55;
}
.apply-form-alt-icon { flex: none; color: var(--teal-dark); display: grid; place-items: center; }
.apply-form-alt-icon svg { width: 17px; height: 17px; }
.apply-form-alt a { color: var(--teal-text); font-weight: 600; }

.apply-note {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.55;
}
.apply-note-icon { flex: none; color: var(--teal-dark); }
.apply-note-icon svg { width: 18px; height: 18px; }
.apply-contact { display: grid; gap: 10px; margin-top: 18px; }
.apply-contact li { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; }
.apply-contact span { display: grid; place-items: center; flex: none; color: var(--teal-dark); }
.apply-contact svg { width: 17px; height: 17px; }

.job-footer-nav { margin-top: clamp(40px, 5vw, 68px); }
.job-back-icon { display: grid; place-items: center; }
.job-back-icon svg { width: 16px; height: 16px; }

/* ---------- Warum über Nextep (jede Detailseite) ---------- */
.job-usp {
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(28px, 3vw, 38px);
  border-top: 1px solid var(--border);
}
.job-usp h2 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin-bottom: 20px; }
.job-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.job-usp-grid li {
  padding: 20px 22px;
  background: var(--mint);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.job-usp-grid h3 { font-size: 1rem; margin-bottom: 6px; }
.job-usp-grid p { font-size: .89rem; color: var(--muted); line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .job-layout { grid-template-columns: minmax(0, 1fr); }
  .job-aside { position: static; }
  .apply-card { max-width: 560px; }
  .jobs-note { grid-template-columns: auto minmax(0, 1fr); }
  .jobs-note-actions { grid-column: 1 / -1; }
  /* Zwei Spalten: Stichwort + Ort oben, Umkreis + Branche darunter, Knopf über
     die volle Breite. */
  .jobs-filters-grid,
  .jobs-filters-grid:not(:has(.jobs-field-branche)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .jobs-field-submit { grid-column: 1 / -1; }
  .jobs-submit { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  .job-grid { grid-template-columns: minmax(0, 1fr); }
  .jobs-filters-grid,
  .jobs-filters-grid:not(:has(.jobs-field-branche)) { grid-template-columns: minmax(0, 1fr); }
  .jobs-note { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .jobs-note-actions, .jobs-empty-actions { flex-direction: column; align-items: stretch; }
  .jobs-note-actions .btn, .jobs-empty-actions .btn { width: 100%; }
  .apply-card { max-width: none; }
  .job-card-cta { align-self: stretch; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .job-card { padding: 24px 22px 22px; }
  .apply-card { padding: 26px 22px 22px; }
  .job-outro { padding: 20px 20px; }
}

/* ---------- Cookie-Banner (consent.js, 27.08.2026) ---------- */
.consent-banner {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 200;
  margin-inline: auto;
  max-width: 720px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.consent-text { margin: 0; font-size: .9rem; color: var(--body); max-width: 46ch; }
.consent-text a { color: var(--teal-text); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}