/* Konzept „Schaltplan“: die Karriereseite als Produktoberfläche eines Büros, das Umspannwerke zeichnet und Software liefert.
   Ein ruhiges Blatt (hell: Weiß, dunkel: die Markenfarbe #0f1720 selbst), 1px-Haarlinien statt Karten und Schatten,
   zwei Stimmen: Instrument Sans für Text und Bedienung, JetBrains Mono für alle Metadaten (Stellen-Nr., Daten, Beschriftungen).
   Hochspannungs-Gelb nur als Zeichenfarbe: energieführender Pfad im Übersichtsschaltplan, Entwurf-Chip, 6px-Marke im Status.
   Der Rahmen (.frame, 72rem) trägt ab 1200px zwei senkrechte Ränder wie ein Zeichnungsblatt; die Fußzeile ist das Schriftfeld. */

/* ---------- Farbtoken ---------- */
:root{
  --bg:#ffffff;--bg-2:#f5f7f9;--bg-3:#eceff3;
  --fg:#0f1720;--fg-2:#4a5563;--fg-3:#5f6b79;
  --line:#e3e8ed;--line-2:#c6cfd8;--line-3:#7f8b9a;
  --accent:#e5b000;--accent-text:#805600;--accent-soft:#fdf3d0;
  --logo-blue:#103663;
  --ok:#1a7f37;--err:#b42318;--focus:#0f1720;--btn-fg:#ffffff;--field:#ffffff;
  --diagram-line:#c6cfd8;--diagram-text:#5f6b79;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1720;--bg-2:#141e29;--bg-3:#1b2633;
    --fg:#e6ebf0;--fg-2:#aab6c2;--fg-3:#8794a3;
    --line:#223040;--line-2:#34465a;--line-3:#66748a;
    --accent:#f2c230;--accent-text:#f3cf5a;--accent-soft:#33290d;
    --logo-blue:#5b95d6;
    --ok:#3fb950;--err:#f09c93;--focus:#f2c230;--btn-fg:#0f1720;--field:#141e29;
    --diagram-line:#34465a;--diagram-text:#8794a3;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1720;--bg-2:#141e29;--bg-3:#1b2633;
  --fg:#e6ebf0;--fg-2:#aab6c2;--fg-3:#8794a3;
  --line:#223040;--line-2:#34465a;--line-3:#66748a;
  --accent:#f2c230;--accent-text:#f3cf5a;--accent-soft:#33290d;
  --logo-blue:#5b95d6;
  --ok:#3fb950;--err:#f09c93;--focus:#f2c230;--btn-fg:#0f1720;--field:#141e29;
  --diagram-line:#34465a;--diagram-text:#8794a3;
  color-scheme:dark;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
/* Weiches Scrollen nur nach einer Interaktion (Fokus auf der Seite), nicht beim Laden mit Anker:
   Chrome berechnet das Ziel sonst vor dem Schriftwechsel und landet daneben. */
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:1rem;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;hyphens:auto;-webkit-hyphens:auto;position:relative;min-height:100vh}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg,canvas{display:block}
img{max-width:100%}
address{font-style:normal}
kbd,code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--accent-soft);color:var(--fg)}
[hidden]{display:none !important}

.skip{position:absolute;left:calc(16px + env(safe-area-inset-left));top:-80px;z-index:50;background:var(--fg);color:var(--btn-fg);padding:8px 12px;font-size:.875rem;font-weight:500}
.skip:focus{top:12px}
#sentinel{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}

/* ---------- Rahmen mit Rändern ---------- */
.frame{max-width:72rem;margin:0 auto;position:relative;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media (min-width:1200px){.frame{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.pad{padding-left:24px;padding-right:24px}
@media (max-width:639px){.pad{padding-left:16px;padding-right:16px}}

/* ---------- Typografie-Helfer ---------- */
.label{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;line-height:1.4;color:var(--fg-3);font-variant-numeric:tabular-nums}
.value{font-family:var(--mono);font-weight:400;font-size:.8125rem;line-height:1.5;font-variant-numeric:tabular-nums}
.small{font-size:.8125rem;line-height:1.5}
h1{font-size:clamp(2.125rem,1.4rem + 3vw,3.5rem);line-height:1.05;font-weight:600;letter-spacing:-.025em;font-stretch:95%}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.15;font-weight:600;letter-spacing:-.02em}
h3{font-size:1.0625rem;line-height:1.3;font-weight:500;letter-spacing:-.005em}
.lead{font-size:1.125rem;line-height:1.55;color:var(--fg-2);max-width:56ch}
kbd{display:inline-block;font-size:.6875rem;line-height:1;padding:4px 5px;border:1px solid var(--line-2);border-radius:3px;background:var(--bg-2);color:var(--fg-2);min-width:20px;text-align:center}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;font-size:.9375rem;font-weight:500;border-radius:4px;border:1px solid transparent;white-space:nowrap;transition:background-color 120ms ease-out,border-color 120ms ease-out,color 120ms ease-out}
.btn-primary{background:var(--fg);color:var(--btn-fg);border-color:var(--fg)}
.btn-primary:hover{background:var(--fg-2);border-color:var(--fg-2)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--fg-3)}
.btn-sm{height:32px;padding:0 12px;font-size:.875rem}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--bg);height:56px}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);opacity:0;transition:opacity 120ms ease-out}
.site-head.scrolled::after{opacity:1}
.head-in{height:56px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.brand-logo{height:19px;width:auto;flex:0 0 auto} /* Wortmarke REIZ aus dem EPS; Schwarz folgt der Textfarbe, Blau dem Token */
.brand-logo .k{fill:var(--fg)}
.brand-logo .k.s{fill:none;stroke:var(--fg)}
.brand-logo .b{fill:var(--logo-blue)}
.crumb{font-family:var(--mono);font-size:.8125rem;color:var(--fg-3);white-space:nowrap}
.head-right{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:.875rem;font-weight:500;color:var(--fg-2);white-space:nowrap;transition:color 120ms ease-out;line-height:1}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="true"]{color:var(--fg);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav .ext{font-family:var(--mono);font-size:.8125rem;font-weight:400}
.seg{display:inline-flex;height:28px;border:1px solid var(--line);border-radius:4px;padding:2px;gap:2px}
.seg button{width:28px;height:22px;display:grid;place-items:center;border-radius:2px;color:var(--fg-3);transition:background-color 120ms ease-out,color 120ms ease-out}
.seg button:hover{color:var(--fg)}
.seg button[aria-checked="true"]{background:var(--bg-3);color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg-3)}
.seg svg{width:14px;height:14px}
.menu-btn{display:none;font-family:var(--mono);font-size:.8125rem;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;color:var(--fg)}
.menu-panel{display:none}
@media (max-width:1040px){.head-right .btn{display:none}} /* Kopf-CTA weicht, bevor die Navigation den Rand erreicht; Hero und Liste bieten ihn weiter an */
@media (max-width:900px){
  .head-right .nav,.head-right .seg,.head-right .btn{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .menu-panel.open{display:block;position:absolute;top:56px;left:0;right:0;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:39}
  .menu-panel>a,.menu-panel .row-theme,.menu-panel .row-cta{display:flex;align-items:center;min-height:48px;padding:0 16px;border-bottom:1px solid var(--line);font-size:.9375rem;font-weight:500;color:var(--fg)}
  .menu-panel .row-theme{justify-content:space-between;border-bottom:0}
  .menu-panel .row-cta{border-bottom:1px solid var(--line)}
  .menu-panel .ext{font-family:var(--mono);font-weight:400;font-size:.8125rem;color:var(--fg-2)}
  .menu-panel .seg{height:44px;padding:3px} /* im Panel Text statt Glyphen (Text-Idiom wie „Menü“/„Schließen“), größere Tipp-Ziele */
  .menu-panel .seg button{width:auto;min-width:48px;height:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.02em;line-height:1}
  .menu-panel .seg svg{display:none}
}
@media (min-width:901px){.menu-panel{display:none !important}}

/* ---------- Hero: Kopfzeile, Schaltplan, Legende ---------- */
.hero-1{padding:64px 24px 40px;border-top:1px solid var(--line)}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-family:var(--mono);font-size:.8125rem;color:var(--fg-3);font-variant-numeric:tabular-nums;margin-bottom:28px}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:4px;vertical-align:middle;position:relative;top:-1px}
.status .sq{width:6px;height:6px;background:var(--accent);display:inline-block;margin-right:6px;vertical-align:middle;position:relative;top:-1px}
.status .sep{color:var(--line-2)}
@media (max-width:639px){.status{flex-direction:column;align-items:flex-start;gap:4px}.status .sep{display:none}}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.hero-1 h1{grid-column:1/9;max-width:18ch;margin-bottom:24px}
.hero-1 .lead{grid-column:1/9;margin-bottom:32px}
.btn-row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px}
/* Das Canvas hat feste CSS-Maße (220px / 180px / 140px), die Geometrie wird in app.js daraus berechnet. */
.hero-2{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:220px}
.hero-2 canvas{width:100%;height:220px}
.hero-2 .cap{position:absolute;left:24px;bottom:10px;font-family:var(--mono);font-size:.75rem;line-height:1.4;color:var(--fg-3)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.facts div{padding:16px 24px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts dt{margin-bottom:6px}
.facts dd{margin:0;font-size:.9375rem;line-height:1.5}
@media (max-width:900px){
  .hero-1{padding:40px 16px 32px}
  .hero-1 h1,.hero-1 .lead{grid-column:1/-1}
  .hero-2{height:auto}
  .hero-2 canvas{height:140px}
  .hero-2 .cap{position:static;padding:4px 16px 10px;font-size:.6875rem}
  .facts{grid-template-columns:1fr 1fr}
  .facts div{padding:14px 16px;border-top:1px solid var(--line)}
  .facts div:nth-child(1),.facts div:nth-child(2){border-top:0}
  .facts div:nth-child(3){border-left:0}
}
@media (min-width:640px) and (max-width:900px){.hero-2 canvas{height:180px}} /* Tablet: höheres Band, Bildunterschrift bleibt statisch darunter */

/* ---------- Abschnitte ---------- */
.sec{padding:64px 0;border-top:1px solid var(--line);position:relative}
@media (min-width:1200px){
  .sec::before,.sec::after{content:"";position:absolute;top:-5px;width:1px;height:9px;background:var(--line-2)}
  .sec::before{left:-1px}.sec::after{right:-1px}
}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.sec-head .intro{color:var(--fg-2);max-width:60ch;margin-top:10px;font-size:.9375rem;line-height:1.55}
.sec-head .intro.muted{color:var(--fg-3)}
.sec-head .count{font-family:var(--mono);font-size:.8125rem;color:var(--fg-3);white-space:nowrap;font-variant-numeric:tabular-nums;padding-bottom:4px}
.sec-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}
@media (max-width:900px){.sec{padding:40px 0}.sec-head{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---------- Stellen: Werkzeugleiste (Chips, Standort, Tastaturhinweise) ---------- */
.toolbar{min-height:48px;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:8px 24px}
.chips{display:flex;gap:8px;flex-wrap:nowrap}
.chip{font-family:var(--mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:3px;color:var(--fg-2);background:transparent;white-space:nowrap;transition:background-color 120ms ease-out,color 120ms ease-out,border-color 120ms ease-out}
.chip:hover{border-color:var(--line-2);color:var(--fg)}
.chip[aria-checked="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;height:32px;padding:0 32px 0 10px;border:1px solid var(--line-3);border-radius:4px;background:var(--bg);color:var(--fg);font:inherit;font-size:.875rem;font-weight:500;line-height:1;cursor:pointer}
.sel select:hover{border-color:var(--fg-3)}
.sel svg{position:absolute;right:11px;top:50%;margin-top:-5px;width:10px;height:10px;pointer-events:none;color:var(--fg-3)}
.hints{display:flex;gap:16px;font-family:var(--mono);font-size:.75rem;color:var(--fg-3);white-space:nowrap}
.hints span{display:inline-flex;align-items:center;gap:6px}
@media (hover:none),(max-width:1199px){.hints{display:none}} /* Tastaturhinweise nur auf Zeigergeräten und im vollen 72rem-Rahmen */
@media (hover:none){.dbar kbd{display:none}}
@media (hover:none){.sel select{font-size:1rem}} /* iOS Safari zoomt bei Formularfeldern unter 16px */
@media (max-width:900px){
  .toolbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:0}
  .toolbar .chips{flex-wrap:wrap;overflow:visible;padding:12px 16px 8px;gap:8px} /* umbrechen statt scrollen: alle Bereiche sichtbar, keine angeschnittenen Chips */
  .toolbar .chip{height:36px}
  .toolbar .sel{padding:0 16px 12px}
  .toolbar .sel select{width:100%;font-size:1rem;height:40px}
  .toolbar .sel svg{right:27px;top:20px}
  .hints{display:none}
}

/* ---------- Stellen: Zeilen ---------- */
.jobs{border-bottom:1px solid var(--line)}
.jobs li{border-top:1px solid var(--line)}
.jobs li:first-child{border-top:0}
.row{display:grid;grid-template-columns:96px minmax(0,1fr) 248px 24px;column-gap:24px;align-items:start;padding:20px 24px;min-height:72px;transition:background-color 120ms ease-out;position:relative}
.row:hover{background:var(--bg-2)}
.row:hover .ttl{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.row .id{font-family:var(--mono);font-size:.8125rem;line-height:1.5;color:var(--fg-3);display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-variant-numeric:tabular-nums;padding-top:2px}
.chip-pool{display:inline-block;font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;line-height:1;padding:3px 5px;border:1px solid var(--line-2);color:var(--fg-2);border-radius:3px;white-space:nowrap}
.banner.banner-pool{background:transparent;color:var(--fg-2);border-color:var(--line-2)}
.banner.banner-pool strong{color:var(--fg)}
.chip-draft{display:inline-block;font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;line-height:1;padding:4px 6px;background:var(--accent-soft);color:var(--accent-text);border-radius:3px;white-space:nowrap}
.row .main{min-width:0}
.row .ttl{font-size:1.0625rem;line-height:1.3;font-weight:500;color:var(--fg);letter-spacing:-.005em}
.row .sum{font-size:.9375rem;line-height:1.55;color:var(--fg-2);max-width:60ch;margin-top:4px}
.row .meta{font-family:var(--mono);font-size:.8125rem;line-height:1.5;color:var(--fg-3);font-variant-numeric:tabular-nums;padding-top:2px}
.row .meta span{display:block;text-wrap:balance}
.row .arr{width:24px;height:24px;color:var(--fg-3)}
.row .tags{display:none}
.jobs .empty,.jobs-noscript{padding:20px 24px;color:var(--fg-3);font-size:.9375rem;line-height:1.55}
.jobs-noscript{border-bottom:1px solid var(--line)}
.jobs-noscript a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .row{grid-template-columns:1fr;padding:18px 16px;gap:4px}
  .row .id{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
  .row .meta{display:none}
  .row .arr{display:none}
  .row .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .row .tags span{font-family:var(--mono);font-size:.6875rem;line-height:1.3;padding:4px 7px;border:1px solid var(--line);border-radius:3px;color:var(--fg-3);overflow-wrap:anywhere}
  .jobs .empty,.jobs-noscript{padding:18px 16px}
}
.initiativ{margin:24px 24px 0;border:1px dashed var(--line-2);border-radius:4px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.initiativ p{color:var(--fg-2);font-size:.9375rem;line-height:1.55;max-width:60ch;margin-top:4px}
@media (max-width:900px){.initiativ{margin:16px 16px 0;flex-direction:column;align-items:flex-start;padding:18px 16px}.initiativ .btn{width:100%}}

/* ---------- Arbeitsweise: Datenblatt ---------- */
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.sheet .left{grid-column:1/5;align-self:start;position:sticky;top:72px}
.sheet .right{grid-column:5/13}
.kv{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:24px 0;border-top:1px solid var(--line)}
.kv:last-child{border-bottom:1px solid var(--line)}
.kv p{color:var(--fg-2);font-size:.9375rem;line-height:1.55;max-width:60ch;margin-top:6px}
@media (max-width:900px){
  .sheet{display:block}
  .sheet .left{position:static;margin-bottom:24px}
  .kv{grid-template-columns:1fr;gap:8px;padding:20px 0}
}

/* ---------- Bereiche ---------- */
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.field{padding:28px 24px 32px;border-left:1px solid var(--line);min-width:0}
.field:first-child{border-left:0}
.field svg{width:28px;height:28px;color:var(--fg)}
.field h3{margin-top:16px}
.field ul{margin-top:12px}
.field li{border-top:1px solid var(--line);padding:10px 0;font-size:.9375rem;line-height:1.55;color:var(--fg-2)}
.field li:first-child{border-top:0}
.field li:last-child{border-bottom:1px solid var(--line)}
.field-link{display:inline-block;padding:12px 0;margin:4px 0 -12px;font-family:var(--mono);font-size:.8125rem;line-height:1.5;color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.field-link:hover{color:var(--fg)}
@media (max-width:900px){
  .fields{grid-template-columns:1fr}
  .field{border-left:0;border-top:1px solid var(--line);padding:24px 16px 28px}
  .field:first-child{border-top:0}
}

/* ---------- Bewerbung: Ablauf als Leitung mit vier Knoten ---------- */
.pipe{position:relative;padding-top:28px}
.pipe::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.step{position:relative}
.step::before{content:"";position:absolute;left:0;top:-29px;width:12px;height:12px;border-radius:50%;border:1px solid var(--fg);background:var(--bg)}
.step:first-child::before{background:var(--fg)}
.step h3{margin-top:8px}
.step p{color:var(--fg-2);font-size:.9375rem;line-height:1.55;margin-top:8px;max-width:34ch}
@media (max-width:900px){
  .pipe{padding-top:0;padding-left:24px}
  .pipe::before{left:5px;top:6px;bottom:6px;right:auto;width:1px;height:auto}
  .steps{grid-template-columns:1fr;gap:24px}
  .step::before{left:-24px;top:3px}
}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq .left{grid-column:1/5;position:sticky;top:72px;align-self:start}
.faq .left p{margin-top:12px;font-size:.8125rem;color:var(--fg-3);font-family:var(--mono);line-height:1.5}
.faq .left a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq .left a:hover{color:var(--fg)}
.faq .right{grid-column:5/13}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 0;font-size:1rem;line-height:1.4;font-weight:500}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.plus{position:relative;width:12px;height:12px;flex:0 0 12px;transition:transform 160ms ease-out}
.plus::before,.plus::after{content:"";position:absolute;background:var(--fg);left:0;top:5.5px;width:12px;height:1px}
.plus::after{transform:rotate(90deg)}
details[open] .plus{transform:rotate(45deg)}
details p{color:var(--fg-2);font-size:.9375rem;line-height:1.55;max-width:60ch;padding-bottom:20px}
details p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:900px){.faq{display:block}.faq .left{position:static;margin-bottom:20px}}

/* ---------- Fußzeile: Schriftfeld ---------- */
.foot{margin-top:48px;border-top:1px solid var(--line)}
.schriftfeld{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.schriftfeld>div{padding:20px 24px;border-left:1px solid var(--line);font-size:.9375rem;line-height:1.55}
.schriftfeld>div:first-child{border-left:0}
.schriftfeld .label{margin-bottom:8px}
.schriftfeld a{display:block;padding:2px 0}
.schriftfeld a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.schriftfeld .mono a{font-family:var(--mono);font-size:.8125rem;line-height:1.7}
.stand{border-top:1px solid var(--line);min-height:40px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:8px 24px;font-family:var(--mono);font-size:.75rem;line-height:1.4;color:var(--fg-3);font-variant-numeric:tabular-nums}
.stand a{display:inline-block;position:relative;padding:12px 0;margin:-12px 0} /* 40px Trefferfläche, Statuszeile bleibt 40px */
.stand a:hover{color:var(--fg)}
@media (max-width:900px){
  .schriftfeld{grid-template-columns:1fr}
  .schriftfeld>div{border-left:0;border-top:1px solid var(--line);padding:16px}
  .schriftfeld>div:first-child{border-top:0}
  .schriftfeld a{display:flex;align-items:center;min-height:44px} /* Tipp-Ziele 44px (WCAG 2.5.8), Desktop-Schriftfeld unverändert */
  .schriftfeld .mono a{line-height:1.5}
  .schriftfeld .label{margin-bottom:0}
  .stand{padding:10px 16px;gap:6px 16px}
}

/* ---------- Stellenanzeige (Detail) ---------- */
#detail{animation:fadein 160ms ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.dbar{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;font-family:var(--mono);font-size:.8125rem;color:var(--fg-3)}
.dbar a{display:inline-flex;align-items:center;align-self:stretch;gap:10px;padding:0 8px;margin-left:-8px;color:var(--fg);white-space:nowrap;flex:0 0 auto} /* füllt die 48px-Leiste, Text bleibt am Rand */
.dbar a:focus-visible{outline-offset:-2px}
.dbar a:hover{text-decoration:underline;text-underline-offset:3px}
.dbar .path{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:640px){.dbar .path-pre{display:none}} /* Telefon: rechts nur die Stellen-Nr.; der volle Pfad passt erst ab etwa 520px */
.dtitle{padding:48px 24px 32px}
.dtitle h1{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);max-width:24ch;margin-top:12px}
.dtitle .dmeta{font-family:var(--mono);font-size:.8125rem;color:var(--fg-3);margin-top:16px;line-height:1.6}
.dbody{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:48px;padding:0 24px 64px}
.dbody article{grid-column:1/9;min-width:0}
.dbody aside{grid-column:9/13;position:sticky;top:72px;align-self:start}
.banner{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--line);border-radius:6px;padding:12px 16px;font-size:.875rem;line-height:1.5;margin-bottom:24px}
.banner strong{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;margin-right:8px}
.dintro{font-size:1.125rem;line-height:1.55;color:var(--fg-2);max-width:60ch}
.dintro a{text-decoration:underline;text-underline-offset:3px}
.dsec{margin-top:40px}
.dsec h2{font-size:1.25rem;line-height:1.3;margin-bottom:12px}
.dsec li{border-top:1px solid var(--line);padding:10px 0 10px 24px;position:relative;font-size:.9375rem;line-height:1.55;color:var(--fg-2)}
.dsec li:last-child{border-bottom:1px solid var(--line)}
.dsec li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:1px;background:var(--fg)}
.note{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-top:12px;font-size:.9375rem;color:var(--fg-2)}
.panel{border:1px solid var(--line);border-radius:6px;padding:16px 20px}
.panel h2{font-size:1rem;margin-bottom:8px}
.panel .krow{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.panel .krow .label{padding-top:3px}
.panel .acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.panel .acts .btn{width:100%}
.codechip{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;background:var(--bg-3);border-radius:4px;padding:4px 4px 4px 10px;font-family:var(--mono);font-size:.8125rem;min-width:0}
.codechip code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codechip .btn{height:36px;padding:0 10px;font-size:.8125rem;flex:0 0 auto}
.panel .small{color:var(--fg-3);margin-top:10px;font-family:var(--mono);font-size:.75rem;line-height:1.5;overflow-wrap:anywhere}
@media (max-width:900px){
  .dbody{display:flex;flex-direction:column;padding:0 16px 48px}
  .dbody aside{position:static;order:-1;margin-bottom:32px}
  .panel .krow-meta,.panel .acts,.panel .codechip,.panel .small{display:none} /* Telefon: Standorte, Anstellung, Start stehen schon in der Metazeile; die feste Leiste trägt „Jetzt bewerben“ */
  .dbody article{width:100%}
  .dtitle{padding:32px 16px 24px}
  .dbar{padding:0 16px}
}

/* ---------- Formular ---------- */
.form-wrap{margin-top:48px;max-width:44rem;border:1px solid var(--line);border-radius:6px;padding:24px}
.form-wrap h2{font-size:1.25rem;margin-bottom:4px}
.form-wrap .sub{font-family:var(--mono);font-size:.75rem;color:var(--fg-3);margin-bottom:20px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.frow .fld{margin-bottom:0}
.fld label{font-size:.8125rem;font-weight:500;line-height:1.4}
.fld input,.fld select,.fld textarea{height:40px;border:1px solid var(--line-3);background:var(--field);color:var(--fg);border-radius:4px;padding:0 12px;font:inherit;font-size:1rem;width:100%}
.fld .sel select{height:40px;padding-right:36px;font-size:1rem;font-weight:400;background:var(--field)}
.fld textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-3);opacity:1}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--fg-3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--fg);outline:2px solid var(--focus);outline-offset:2px}
.fld .hint{font-family:var(--mono);font-size:.75rem;color:var(--fg-3);line-height:1.5}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;line-height:1.5;color:var(--fg-2);margin:4px 0 4px}
.consent input{accent-color:var(--fg);width:16px;height:16px;margin:3px 0 0;flex:0 0 16px;padding:0}
.consent a{text-decoration:underline;text-underline-offset:3px}
.fld-consent{margin-bottom:20px}
.form-wrap .expl{font-size:.8125rem;line-height:1.5;color:var(--fg-3);margin-top:14px}
.form-wrap .msg{font-size:.875rem;line-height:1.5;margin-top:8px;min-height:1.3em}
.form-wrap .msg a{text-decoration:underline;text-underline-offset:3px}
.fld.err input,.fld.err textarea,.fld.err select{border-color:var(--err)}
.fld .errtxt{font-size:.8125rem;line-height:1.5;color:var(--err)}
@media (max-width:640px){.frow{grid-template-columns:1fr}}
@media (max-width:900px){
  .form-wrap{padding:20px}
  .form-wrap .btn{width:100%}
}

/* ---------- Feste Leiste auf dem Telefon (nur in der Stellenanzeige) ---------- */
.actbar{display:none}
@media (max-width:900px){
  .actbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);padding:8px calc(16px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
  .actbar .btn{width:100%}
  .actbar.off{display:none}
  #detail{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ---------- Ohne JavaScript ---------- */
html:not(.js) .hero-2,html:not(.js) .toolbar,html:not(.js) .js-only{display:none}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html:focus-within{scroll-behavior:auto}}