/* ============================================================
   Aktiva Personalmanagement · gemeinsame Gestaltung
   Hell und luftig: Papierweiß als Grundton, Aktiva-Blau als
   Akzent, Ocker als zweite Stimme. Schibsted Grotesk als
   Hausschrift, ein kursiver Newsreader für die betonten Wörter,
   IBM Plex Mono für kleine Marken.

   Abstände kommen aus Geschwister-Regeln (h2 + .lede und so
   weiter), nicht aus eingestreuten Inline-Angaben. Wer den
   Rhythmus ändern will, ändert ihn hier einmal.
   ============================================================ */
:root{
  --paper:#FBFAF7;
  --paper-2:#F3F0EA;
  --paper-3:#FFFFFF;
  --ink:#0F1E2B;
  --ink-2:#55677A;
  --ink-3:#C2C5CB;
  --line:#E4DFD6;
  --line-2:#CFC8BB;
  --accent:#0070AF;
  --accent-deep:#005182;
  --accent-soft:#E9F2F8;
  --accent-line:#BBD9EC;
  --deep:#0A1520;
  --warm:#9A5F12;
  --warm-bright:#F2B25C;
  --warm-soft:#F6EEE0;
  --f-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:Newsreader,Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --wrap:1160px;
  --r-s:12px;
  --r-m:18px;
  --r-l:24px;
  --sec-eng:clamp(2.2rem,1.7rem + 2.2vw,3.6rem);
  --shadow-s:0 1px 2px -1px rgba(15,30,43,.06),0 5px 14px -8px rgba(15,30,43,.10);
  --shadow-m:0 3px 6px -3px rgba(15,30,43,.07),0 18px 40px -20px rgba(15,30,43,.18);
  --shadow-l:0 6px 14px -8px rgba(15,30,43,.08),0 36px 72px -34px rgba(15,30,43,.26);
}
*{box-sizing:border-box}
/* Muss über allem stehen: eigene display-Regeln würden das hidden-Attribut sonst aushebeln. */
[hidden]{display:none !important}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(.99rem,.95rem + .18vw,1.05rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---- Schrift ---- */
h1,h2,h3{font-weight:600;line-height:1.09;letter-spacing:-.03em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.2rem,1.35rem + 3.1vw,3.9rem)}
h2{font-size:clamp(1.75rem,1.25rem + 1.95vw,2.65rem)}
h3{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem);letter-spacing:-.02em}
/* Das hervorgehobene Wort traegt das Aktiva-Blau und bekommt seitlich Luft.
   Ein Satzzeichen unmittelbar dahinter steht deshalb mit im <em> — sonst
   loeste der rechte Abstand es sichtbar vom Wort ab. */
h1 em,h2 em,h3 em,.acc{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  letter-spacing:-.005em;color:var(--accent);margin-inline:.08em}
p{margin:0}
ul,ol{margin:0}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%}
strong{font-weight:600}

/* ---- Hilfsklassen ---- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.kicker{color:var(--warm);display:block;margin-bottom:.9rem}
.lede{font-size:clamp(1.02rem,.98rem + .42vw,1.2rem);color:var(--ink-2);max-width:56ch;line-height:1.56}
.muted{color:var(--ink-2)}
.leise{color:var(--ink-3)}
.small{font-size:.9rem}

/* Antwortabsatz direkt unter einer Frage-Ueberschrift. Er traegt die Antwort in
   40 bis 60 Woertern und ist beim Laden sichtbar, nicht zugeklappt: genau diese
   Reihenfolge - Frage, dann Antwort - loesen Antwortmaschinen heraus. Etwas
   groesser als Fliesstext, damit er als Antwort erkennbar bleibt. */
.antwort{font-size:clamp(1.02rem,.98rem + .42vw,1.2rem);color:var(--ink-2);
  max-width:58ch;line-height:1.62}
/* Der Antwortabsatz sitzt im Gefuege wie eine .lede; --sp-* stehen unten. */
h2 + .antwort{margin-top:var(--sp-1)}
.antwort + .liste{margin-top:var(--sp-2)}
.antwort + .btn-row{margin-top:var(--sp-4)}
.antwort + .cards,.antwort + .steps,.antwort + .tiles,
.antwort + .tabellenrahmen,.antwort + .team,
.antwort + .zahlen{margin-top:var(--sp-5)}
/* Besteht ein Abschnitt nur aus Fragen, folgt auf jede Antwort die naechste
   Ueberschrift. */
.antwort + h2{margin-top:var(--sp-6)}

/* Nur fuer Vorleser, nicht sichtbar. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Vergleichstabelle. Sie darf als einziges Element seitlich rollen; die Seite
   selbst bleibt dabei stehen. */
.tabellenrahmen{overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--paper)}
.vgl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:600px}
.vgl th,.vgl td{padding:.85rem 1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.vgl thead th{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);background:var(--paper-3);
  white-space:nowrap}
.vgl tbody th{font-weight:600;color:var(--ink);width:14rem}
.vgl tbody td{color:var(--ink-2)}
.vgl tbody tr:last-child th,.vgl tbody tr:last-child td{border-bottom:none}
.skip{position:absolute;left:-9999px;background:var(--accent);color:#fff;padding:.8rem 1.2rem;z-index:200}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Der Rhythmus: Abstände aus Geschwistern statt aus Inline-Angaben ----
   Die Rangfolge ist die Aussage, auf jeder Fensterbreite dieselbe.
   0 Kleinzeilen · 1 ->Text, Absatz->Absatz · 2 ->Liste · 3 ->Kleintext ·
   4 ->Knopfzeile · 5 ->Karten · 6 ->Ueberschrift · 7 ->Abschnitt */
:root{--sp-0:.5rem;--sp-1:1.1rem;--sp-2:1.4rem;--sp-3:1.5rem;
      --sp-4:1.9rem;--sp-5:2.3rem;--sp-6:2.9rem;--sp-7:4.2rem}
h1 + .lede,h2 + .lede,h3 + .lede{margin-top:var(--sp-1)}
.lede + .btn-row,h1 + .btn-row,h2 + .btn-row,p + .btn-row{margin-top:var(--sp-4)}
h2 + .liste,.lede + .liste,h3 + .liste{margin-top:var(--sp-2)}
.liste + .btn-row,.liste + .small{margin-top:var(--sp-3)}
h2 + .cards,.lede + .cards,h2 + .steps,.lede + .steps,
h2 + .tiles,.lede + .tiles,h2 + .quotes,.lede + .quotes,
h2 + .team,.lede + .team,
h2 + .zahlen,.lede + .zahlen{margin-top:var(--sp-5)}
/* 1,6rem statt --sp-3: Karten bringen eigenen Rand mit. */
.cards + .small,.tiles + .small,.steps + .small,.joblist + .small,.leer + .small,
.tabellenrahmen + .small{margin-top:1.6rem}
.split__txt .btn-row{margin-top:var(--sp-4)}

/* Die Luecken: ohne sie galt margin:0 und die Ueberschriften klebten am Text
   darueber - auf allen 57 Seiten. */
h2 + p,h3 + p{margin-top:var(--sp-1)}
p + p{margin-top:var(--sp-1)}
p + h2,ul + h2{margin-top:var(--sp-6)}
.btn-row + p{margin-top:var(--sp-3)}
/* Adresse, Rechtsangabe, Laufzeit sind ein Block. */
.small + .small{margin-top:var(--sp-0)}

/* ---- Signatur: das Tageslicht wandert mit ---- */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52vw 52vw at var(--gx,72%) var(--gy,26%),rgba(0,112,175,.06) 0%,rgba(0,112,175,.024) 40%,rgba(0,112,175,0) 70%),
    radial-gradient(40vw 40vw at calc(100% - var(--gx,72%)) calc(100% - var(--gy,26%)),rgba(154,95,18,.045) 0%,rgba(154,95,18,0) 66%)}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(15,30,43,.032) 1px,transparent 1px);background-size:3px 3px}

/* ---- Kopfzeile mit Navigation ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(251,250,247,.84);backdrop-filter:blur(14px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.top.solid{background:rgba(251,250,247,.95);box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(15,30,43,.5)}
.top__in{display:flex;align-items:center;gap:1rem;min-height:72px}
.top__logo{display:flex;align-items:center;flex-shrink:0}
.top__logo img{height:60px;width:auto;display:block;transition:transform .35s var(--ease)}
@media (max-width:720px){.top__logo img{height:48px}}
.top__logo:hover img{transform:scale(1.04)}
.nav{display:flex;align-items:center;gap:.05rem;margin-left:auto;flex-wrap:nowrap}
.nav a{
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.885rem;
  padding:.5rem .68rem;border-radius:8px;white-space:nowrap;position:relative;
  transition:color .28s var(--ease),background .28s var(--ease)}
.nav a:hover{color:var(--accent-deep);background:rgba(0,112,175,.07)}
.nav a[aria-current="page"]{color:var(--accent-deep)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:.68rem;right:.68rem;bottom:.26rem;height:2px;border-radius:2px;background:var(--warm)}
.top__cta{background:var(--accent);color:#fff;border-radius:999px;padding:.58rem 1.15rem;font-weight:600;
  font-size:.885rem;text-decoration:none;white-space:nowrap;margin-left:.7rem;
  box-shadow:0 10px 24px -13px rgba(0,112,175,.9);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.top__cta:hover{background:var(--accent-deep);color:#fff;transform:translateY(-1px)}
/* Zweiter Handlungsaufruf: der Weg fuer Betriebe. Ruhiger gesetzt als
   "Bewerben", damit die Kopfzeile einen Schwerpunkt behaelt und nicht zwei
   gleich laute Knoepfe zeigt. Blendet sich unter 1080px mit .top__cta aus. */
.top__cta--line{background:transparent;color:var(--accent-deep);
  border:1.5px solid var(--line-2);box-shadow:none;margin-left:.45rem}
.top__cta--line:hover{background:rgba(0,112,175,.08);border-color:var(--accent);
  color:var(--accent-deep)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:10px;
  color:var(--ink);padding:.52rem .76rem;font:inherit;font-size:.9rem;cursor:pointer;align-items:center;gap:.45rem}
.burger:hover{border-color:var(--accent);color:var(--accent-deep)}
.mnav{display:none;flex-direction:column;padding:.6rem 1.25rem 1.5rem;gap:.1rem;
  background:rgba(251,250,247,.985);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mnav a{color:var(--ink);text-decoration:none;padding:.82rem .6rem;border-radius:10px;font-weight:500}
.mnav a:hover,.mnav a[aria-current="page"]{background:rgba(0,112,175,.08);color:var(--accent-deep)}
.mnav .btn{margin-top:.8rem}
@media (max-width:1080px){
  .nav,.top__cta{display:none}
  .burger{display:inline-flex}
  .top.open .mnav{display:flex}
  .top.open{background:rgba(251,250,247,.985)}
}

/* ---- Schaltflächen ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:999px;font-weight:600;font-size:.98rem;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.btn--solid{background:var(--accent);color:#fff;box-shadow:0 12px 26px -14px rgba(0,112,175,1)}
.btn--solid:hover{background:var(--accent-deep);color:#fff;transform:translateY(-2px)}
.btn--line{border-color:var(--line-2);color:var(--ink);background:var(--paper-3)}
.btn--line:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---- Startseiten-Hero ---- */
.hero{position:relative;padding-block:8.6rem 3rem;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center}
.hero h1{max-width:14ch;font-size:clamp(2.35rem,1.3rem + 3.9vw,4.4rem)}
.hero .lede{margin-top:1.35rem;max-width:46ch}
.hero .btn-row{margin-top:2.1rem}
.hero__note{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.1rem;
  color:var(--ink-2);font-size:.88rem}
.hero__note > span{display:inline-flex;align-items:center;gap:.45rem}
.hero__note > span + span::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;
  background:var(--line-2);margin-right:.65rem}
.hero__note .stars{color:var(--warm);letter-spacing:.16em}
@media (max-width:560px){
  .hero__note{flex-direction:column;align-items:flex-start;gap:.4rem 0}
  .hero__note > span + span::before{display:none}
}
.hero__pic{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l);
  background:var(--paper-2);aspect-ratio:4/5;max-height:min(56vh,470px)}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block;
  transform:scale(1.04);animation:slowzoom 22s var(--ease-soft) both}
@keyframes slowzoom{from{transform:scale(1.04)}to{transform:scale(1)}}
.hero__stamp{position:absolute;left:1rem;bottom:1rem;z-index:2;max-width:calc(100% - 2rem);
  background:rgba(251,250,247,.94);backdrop-filter:blur(8px);
  padding:.8rem 1.15rem .9rem;border-radius:var(--r-s);box-shadow:var(--shadow-s)}
.hero__stamp b{display:block;font-size:1.4rem;line-height:1;letter-spacing:-.03em;color:var(--accent-deep)}
.hero__stamp span{display:block;color:var(--ink-2);font-size:.82rem;margin-top:.28rem}
@media (min-width:900px){
  .hero{padding-block:9.4rem 3.6rem}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(2.4rem,1rem + 3.6vw,4.4rem)}
}
.hero__cue{margin-top:3rem;display:flex;align-items:center;gap:.7rem;color:var(--ink-2)}
.hero__cue i{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(154,95,18,0),var(--warm));
  animation:cue 2.6s var(--ease-soft) infinite}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media (max-width:899px){.hero__cue{display:none}}

/* Wortaufbau der Startseiten-Überschrift */
.w{display:inline-block;white-space:pre;
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 22px))}

/* ---- Kopf der Unterseiten ---- */
.phead{position:relative;padding-block:8.6rem 2.6rem}
.phead__in{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:end}
@media (min-width:960px){
  .phead__in{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:clamp(2.4rem,1rem + 3.6vw,4.6rem)}
}
.phead h1{max-width:19ch}
.crumbs{color:var(--ink-2);font-size:.86rem;margin-bottom:1rem}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep)}
@media (max-width:880px){.phead{padding-block:7.4rem 2.2rem}}

/* Kurzfakten neben der Seitenüberschrift */
.pfacts{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:1.25rem 1.5rem 1.4rem;box-shadow:var(--shadow-s)}
.pfacts > .mono{color:var(--warm);display:block;margin-bottom:.3rem}
.pfact{padding:.9rem 0}
.pfact + .pfact{border-top:1px solid var(--line)}
.pfact:last-child{padding-bottom:0}
.pfact b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.018em;line-height:1.3}
.pfact span{display:block;color:var(--ink-2);font-size:.88rem;line-height:1.5;margin-top:.15rem}

/* ---- Bildband über die volle Breite ---- */
.band{position:relative;margin-top:1.2rem}
.band__pic{overflow:hidden;background:var(--paper-2)}
/* Nichts abschneiden: das Band zeigt das ganze Bild in seinem eigenen
   Verhältnis. Deshalb sind alle Bandbilder Panoramen im Format 4:1 — bei
   1440 px Fensterbreite ergibt das genau die 360 px, die der Streifen vorher
   hatte, nur eben ohne Beschnitt. */
.band__pic img{display:block;width:100%;height:auto;
  transform:scale(1.02);transition:transform 2s var(--ease)}
.band.in .band__pic img{transform:scale(1)}
.band__cap{margin-top:.8rem;color:var(--ink-2);font-size:.86rem}
/* Branchenseiten: hier hängt kein Panorama im Band, sondern das Branchenbild
   im Verhältnis 4:3. Über die volle Breite wird es fast quadratisch und
   schiebt die Anzeige unter die Falz — der Text soll aber ohne Scrollen
   anfangen. Deshalb ein flacher Streifen auf Textbreite: 260 Pixel hoch,
   der Rest wird beschnitten. Wo der Ausschnitt sitzt, steht je Branche in
   BEREICHE in build.py, denn ein gemeinsamer Wert schnitte die Hälfte der
   Köpfe ab. Am Telefon ist der Streifen schmal und schneidet fast nichts. */
.band--stelle .band__pic{background:none;
  width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.band--stelle .band__pic img{width:100%;height:260px;object-fit:cover;
  border-radius:var(--r-m)}
/* Stellenseiten: das Bild der Stelle ist eine ganze Szene (Person, Hände,
   Werkzeug, Umfeld) und wird nicht beschnitten. Es steht im eigenen
   Verhältnis 3:2 neben der Einleitung; am Telefon über ihr, volle Breite. */
.einstieg{display:grid;gap:1.6rem;align-items:center}
.einstieg__bild{margin:0;order:-1}
.einstieg + h2{margin-top:var(--sp-6)}
.einstieg__bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;
  border-radius:var(--r-m);box-shadow:var(--shadow-s);background:var(--paper-2)}
@media (min-width:880px){
  .einstieg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 2.6vw,3.6rem)}
  .einstieg__bild{order:0}
}

/* ---- Bildstreifen aus drei Türen ---- */
/* Grundstellung: drei gleich breite Felder, jedes auch ohne Zeiger lesbar.
   Nichts hier hängt an JavaScript, ein ausbleibendes .in versteckt nichts. */
.trio__titel{margin-bottom:var(--sp-5)}
.trio__row{display:flex;gap:3px;background:var(--paper-2)}
.tuer{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;
  height:clamp(175px,26vw,360px);color:#fff;text-decoration:none;
  transition:flex-grow .55s var(--ease)}
/* Acht Felder passen nicht in eine Reihe: bei 1440 Pixeln wäre jedes 177
   breit und der Name bräche in vier Zeilen. Die Reihe bricht deshalb um,
   vier je Zeile, unter 1000 Pixeln zwei. Weil daraus zwei Reihen werden,
   sind die Felder flacher. Am Telefon bleibt es eine Wischreihe. */
@media (min-width:700px){
  .trio__row{flex-wrap:wrap}
  .tuer{flex:1 1 calc(50% - 3px);height:clamp(175px,18vw,280px)}
}
@media (min-width:1000px){.tuer{flex:1 1 calc(25% - 3px)}}
.tuer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.1s var(--ease),filter .5s var(--ease)}
/* Der Ausschnitt je Bild steht nicht mehr hier, sondern in build.py bei der
   Tür selbst. Vorher hing er an der Nummer der Tür, und die Nummer ändert
   sich, sobald eine Branche mehr offene Stellen hat als eine andere. */
.trio.in .tuer img{transform:scale(1)}
.tuer::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,16,24,.94) 0,rgba(6,16,24,.86) 17%,
    rgba(6,16,24,.55) 36%,rgba(6,16,24,.2) 56%,rgba(6,16,24,.02) 78%)}
.tuer__txt{position:absolute;inset:auto 0 0 0;z-index:2;display:grid;gap:.3rem;
  padding:clamp(.85rem,1.5vw,1.35rem)}
.tuer .mono{color:#CBE6FA}
.tuer b{font-size:clamp(1rem,.9rem + .35vw,1.24rem);line-height:1.24;font-weight:600}
.tuer__mehr{font-size:.87rem;color:#EDF3F7}
.tuer__mehr i{font-style:normal;color:#CBE6FA}
/* Die allgemeine Linkregel faerbt beim Ueberfahren blau. Auf dem dunklen
   Bildrand waere das kaum lesbar, hier bleibt der Text weiss. */
.tuer:hover,.tuer:focus-visible,.tuer:hover b,.tuer:focus-visible b{color:#fff}
.tuer:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}

/* Nur wo es einen Zeiger gibt und Platz da ist: eine Tür wächst, die anderen
   treten zurück. Die Tastatur bekommt dasselbe über :focus-visible. */
@media (hover:hover) and (min-width:820px){
  .tuer__mehr{opacity:0;transform:translateY(9px);
    transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .trio__row:hover .tuer,.trio__row:focus-within .tuer{flex-grow:.75}
  .trio__row .tuer:hover,.trio__row .tuer:focus-visible{flex-grow:1.9}
  .trio .tuer:hover img,.trio .tuer:focus-visible img{transform:scale(1.06);filter:none}
  .trio__row:hover .tuer:not(:hover) img{filter:saturate(.5) brightness(.92)}
  .tuer:hover .tuer__mehr,.tuer:focus-visible .tuer__mehr{opacity:1;transform:none}
}

/* Ohne Zeiger hilft kein Aufklappen: aus den Feldern werden Karten zum Wischen,
   der Text steht immer da. */
@media (max-width:699px){
  .trio__row{gap:.6rem;background:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:1.25rem;scroll-padding-inline:1.25rem;scrollbar-width:none}
  .trio__row::-webkit-scrollbar{display:none}
  .tuer{flex:0 0 76%;height:210px;scroll-snap-align:center;border-radius:var(--r-m)}
  .tuer b{font-size:1.06rem}
  .tuer__ort{display:none}
}

/* ---- Abschnitte ---- */
main{position:relative;z-index:1}
.sec{padding-block:clamp(3rem,2.2rem + 3.6vw,5.4rem);position:relative}
.sec--tight{padding-block:var(--sec-eng)}
.sec--tint{background:var(--paper-2)}
/* Zwei enge Abschnitte addierten beide Polster: bis 7,2rem. Nur das obere zu
   streichen genuegt nicht - die Grenze faellt am Telefon sonst unter die --sp-6
   INNERHALB des Abschnitts. Die Rechnung ergibt auf jeder Breite --sp-7.
   Getoente Streifen behalten ihren Abstand. */
.sec--tight + .sec--tight{padding-top:0;margin-top:calc(var(--sp-7) - var(--sec-eng))}
.rise{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
/* Im Hero nie einblenden: der wird vom Scroll-Beobachter nicht erfasst,
   ein .rise dort bliebe für immer unsichtbar. */
.hero .rise{opacity:1 !important;transform:none !important}
.in .rise,.in.rise{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.06s}
.in .rise:nth-child(3){transition-delay:.12s}
.in .rise:nth-child(4){transition-delay:.18s}
.in.ruhe .rise,.in.ruhe .rise:nth-child(2),.in.ruhe .rise:nth-child(3),.in.ruhe .rise:nth-child(4){transition-delay:0s !important}
.rule{height:1px;width:100%;transform:scaleX(var(--dr,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--warm),rgba(154,95,18,.2) 42%,rgba(154,95,18,0));
  transition:transform 1.4s var(--ease)}

/* ---- Zahlen ---- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1.5rem 1.4rem}
.zahl{border-top:1px solid var(--line);padding-top:1.05rem}
.zahl b{display:block;font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);font-weight:600;line-height:1;
  letter-spacing:-.045em;color:var(--accent-deep)}
.zahl em{display:block;font-style:normal;font-weight:600;margin-top:.45rem;color:var(--ink);font-size:1rem}
.zahl span{display:block;color:var(--ink-2);font-size:.89rem;margin-top:.12rem;line-height:1.45}

/* ---- Karten ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.15rem}
.card{position:relative;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-m);padding:clamp(1.45rem,1.15rem + 1.1vw,2.05rem);overflow:hidden;
  box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
a.card{text-decoration:none;color:inherit;display:block}
.card:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--shadow-m)}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--warm),rgba(154,95,18,0) 62%);opacity:.85}
.card--b::after{background:linear-gradient(90deg,var(--accent),rgba(0,112,175,0) 62%)}
.card h3{margin:.6rem 0 .6rem}
.card p{color:var(--ink-2)}
.card .go{display:inline-block;margin-top:1.15rem;color:var(--accent-deep);font-weight:600;font-size:.94rem}
.card:hover .go{color:var(--accent)}
.card .mono{color:var(--warm)}
.card--b .mono{color:var(--accent-deep)}
.card h3 + .liste{margin-top:1rem}

/* ---- Bild-Text-Blöcke ---- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,1rem + 3.4vw,4rem);align-items:center}
.split--flip .split__txt{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr}.split--flip .split__txt{order:0}}
.shot{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m);background:var(--paper-2)}
.shot img{display:block;width:100%;height:auto;transform:scale(1.03);transition:transform 1.6s var(--ease)}
.in .shot img{transform:scale(1)}

/* ---- Bildkacheln der Bereiche ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:1rem}
@media (max-width:560px){.tiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.75rem}}
.tile{display:block;text-decoration:none;color:inherit;background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--accent-line)}
.tile__pic{overflow:hidden;background:var(--paper-2)}
.tile__pic img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .9s var(--ease)}
.tile:hover .tile__pic img{transform:scale(1.05)}
.tile__cap{padding:.8rem .95rem 1rem}
.tile b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.018em;line-height:1.25;
  overflow-wrap:break-word;hyphens:auto}
.tile span{display:block;color:var(--ink-2);font-size:.83rem;margin-top:.22rem;line-height:1.42;
  overflow-wrap:break-word}

/* ---- Schritte ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:1.05rem}
.step{padding:1.4rem;border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper-3);
  box-shadow:var(--shadow-s)}
.step .mono{color:var(--warm);display:block;margin-bottom:.6rem}
.step b{display:block;font-size:1.1rem;font-weight:600;margin-bottom:.3rem;letter-spacing:-.018em}
.step p{color:var(--ink-2);font-size:.94rem;line-height:1.56}

/* ---- Bereichswähler ---- */
.picker{margin-top:2.3rem;padding:clamp(1.5rem,1.15rem + 1.4vw,2.3rem);border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--paper-3);box-shadow:var(--shadow-s);
  position:relative;overflow:hidden}
.picker::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 92% at 16% 6%,rgba(0,112,175,.09),rgba(0,112,175,0) 62%);
  opacity:var(--picked,0);transition:opacity .5s var(--ease)}
.picker>*{position:relative}
.picker .mono{color:var(--warm)}
.picker h3{margin-top:.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{font-family:inherit;font-size:.92rem;font-weight:500;cursor:pointer;
  padding:.55rem 1rem;border-radius:999px;border:1.5px solid var(--line-2);
  background:var(--paper);color:var(--ink);
  transition:border-color .28s var(--ease),background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.picker__out{margin-top:1.4rem;min-height:3.2em;color:var(--ink-2);max-width:60ch}
.picker__out b{color:var(--ink)}

/* ---- Stellen ---- */
.filterbar{display:flex;flex-wrap:wrap;gap:.9rem;align-items:end;
  padding:1.05rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-3);
  box-shadow:var(--shadow-s)}
.filterbar label{display:grid;gap:.32rem;font-size:.85rem;color:var(--ink-2);min-width:0;max-width:100%}
.filterbar select{font:inherit;font-size:.94rem;padding:.58rem .78rem;border-radius:10px;
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);
  width:100%;max-width:100%;min-width:min(186px,100%);text-overflow:ellipsis}
.filterbar select:focus{border-color:var(--accent);outline:none}
.count{margin-left:auto;color:var(--ink-2);font-size:.89rem}
.count button{background:none;border:none;padding:0;font:inherit;color:var(--accent-deep);cursor:pointer;text-decoration:underline}
.joblist{display:grid;gap:.85rem;margin-top:1.4rem}
.job{display:grid;grid-template-columns:150px 1fr;grid-template-rows:auto auto auto;
  gap:0 1.3rem;align-items:center;
  padding:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:var(--paper-3);text-decoration:none;color:inherit;box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.job:hover{transform:translateX(4px);border-color:var(--accent-line);box-shadow:var(--shadow-m)}
.job__pic{display:block;grid-column:1;grid-row:1/-1;align-self:stretch;
  overflow:hidden;background:var(--paper-2)}
.job__pic img{display:block;width:100%;height:100%;object-fit:cover;min-height:116px}
.job h3{font-size:1.14rem;padding-top:1.25rem;padding-right:1.4rem}
.job .meta{color:var(--ink-2);font-size:.9rem;padding-right:1.4rem}
/* Der Stellentitel stand bisher ohne jeden Abstand auf der Badge-Zeile: .job ist
   ein Raster ohne Zeilenabstand (gap:0 1.3rem) und h3 traegt global margin:0, die
   Unterkante des Titels lag dadurch 0,8 Pixel unter der Badge-Oberkante. Die .6rem
   sind gemessen, nicht geschaetzt: sie stellen den Titel etwas luftiger als den
   darunter liegenden Abstand Badges zu Beschreibung, so gewaehlt am 23.09.2026. */
.job h3 + .meta{margin-top:.6rem}
.job .meta:last-child{padding-bottom:1.25rem}
.job .meta + .meta{margin-top:.3rem}
@media (max-width:600px){
  .job{grid-template-columns:1fr}
  .job__pic{grid-row:auto}
  .job__pic img{aspect-ratio:16/7;min-height:0}
  .job h3{padding:1rem 1.2rem 0}
  .job .meta{padding-inline:1.2rem}
  .job .meta:last-child{padding-bottom:1.15rem}
}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.67rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.24rem .55rem;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-line)}
.tag--warm{background:var(--warm-soft);color:var(--warm);border-color:#E4D2B4}
.leer{padding:1.9rem;border:1px dashed var(--line-2);border-radius:var(--r-m);color:var(--ink-2);text-align:center}

/* ---- Listen ---- */
.liste{display:grid;gap:.68rem;padding:0;list-style:none}
.liste li{position:relative;padding-left:1.6rem;color:var(--ink-2)}
.liste li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--warm);opacity:.9}
.liste strong{color:var(--ink)}
/* Liste mit Icons statt Punkten: das Icon sitzt in einer hellen Kachel im
   Chip-Stil des Brand Boards und steht mittig zur ersten Zeile. */
.liste--icons{gap:.9rem}
.liste--icons li{display:flex;align-items:flex-start;gap:.95rem;padding-left:0}
.liste--icons li::before{content:none}
.liste__icon{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;margin-top:-.4rem;
  border-radius:12px;background:var(--paper-3);border:1px solid var(--accent-line);color:var(--accent)}
.liste__icon svg{display:block}

/* ---- Bewertungen und Team ---- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.1rem}
.quote{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-m);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.8rem;box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.quote .stars{color:var(--warm);letter-spacing:.2em;line-height:1}
.quote blockquote{margin:0;font-family:var(--f-serif);font-size:1.12rem;line-height:1.48;color:var(--ink)}
.quote figcaption{color:var(--ink-2);font-size:.88rem;margin-top:auto}
.src{color:var(--ink-2);font-size:.87rem;margin-top:1.5rem}
.team{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
@media (min-width:760px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{display:flex;align-items:center;gap:1rem;padding:1.15rem;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--paper-3);box-shadow:var(--shadow-s)}
.person img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.person__ini{width:60px;height:60px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep);font-weight:600;font-size:1.1rem;border:1px solid var(--accent-line)}
.person b{display:block;font-weight:600}
.person span{display:block;color:var(--ink-2);font-size:.87rem}
.person a{font-size:.9rem;text-decoration:none;font-weight:600;display:block}

/* Bewerbungsabschnitt der Stellenseite: Aufruf links, Ansprechpartner rechts */
.bewerben{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:start;margin-bottom:var(--sp-3)}
@media(min-width:880px){.bewerben{grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr)}}
.ansprech{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-m);padding:1.5rem 1.55rem 1.4rem}
.ansprech .kicker{margin-bottom:1.05rem}
.ansprech__kopf{display:flex;align-items:center;gap:1.05rem}
/* picture steht auf display:contents; ohne das wuerde <source> ein eigenes Flex-Element samt Abstand */
.ansprech__kopf source{display:none}
.ansprech__kopf img,.ansprech__kopf .person__ini{width:84px;height:84px;border-radius:50%;flex-shrink:0;
  object-fit:cover;border:3px solid var(--paper-3);box-shadow:0 0 0 1px var(--accent-line)}
.ansprech__kopf b{display:block;font-weight:600;font-size:1.18rem;line-height:1.2;letter-spacing:-.01em}
.ansprech__kopf span{display:block;color:var(--ink-2);font-size:.9rem;margin-top:.25rem}
.ansprech__wege{list-style:none;margin:1.25rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.5rem}
.ansprech__wege li{margin:0;padding:0}
.ansprech__wege li::before{content:none}
.ansprech__wege a{font-weight:600;text-decoration:none;font-size:.95rem;overflow-wrap:anywhere}
/* WhatsApp: Outline-Button nach Board, einziger Farbakzent ist das Logo */
.btn--wa .wa-logo{width:20px;height:20px;fill:#25D366;flex-shrink:0}
.btn-row + .wa-hinweis{margin-top:.8rem;max-width:34rem}
/* Sprungziel aus "Mehr dazu": nicht unter der festen Kopfleiste verschwinden */
#whatsapp{scroll-margin-top:6.5rem}

/* ---- FAQ ---- */

/* ---- Formular ---- */
.formbox{border-radius:var(--r-l);border:1px solid var(--line);overflow:hidden;
  background:var(--paper-3);box-shadow:var(--shadow-m);position:relative}
.formbox::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(76% 62% at 90% 2%,rgba(0,112,175,.085),rgba(0,112,175,0) 60%)}
.formbox__in{position:relative;padding:clamp(1.7rem,1.35rem + 2.6vw,3.2rem)}
.formbox .mono{color:var(--warm)}
.formbox h2{margin-top:.7rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(234px,1fr));gap:1rem;margin-top:1.8rem}
/* Personalanfrage: drei Felder in einer Reihe. Mit auto-fit legte das Raster
   vier Spalten an, und rechts neben "Telefon" blieb eine leere stehen. */
@media (min-width:760px){.form-grid--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* min-width:0 ist nötig: sonst zwingt die längste Auswahlmöglichkeit
   das Feld breiter als seine Spalte und es wird abgeschnitten. */
.field{display:grid;gap:.4rem;min-width:0}
.field label{font-size:.89rem;font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;padding:.85rem .95rem;border-radius:11px;
  width:100%;max-width:100%;min-width:0;
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);
  transition:border-color .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}
.field select{text-overflow:ellipsis}
.field input::placeholder,.field textarea::placeholder{color:#8D9BA8}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);outline:none;background:#fff;box-shadow:0 0 0 4px rgba(0,112,175,.1)}
.field--wide{grid-column:1/-1}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.5rem}
.form-foot .mono{color:var(--ink-2)}
.form-note{color:var(--ink-2);font-size:.85rem;max-width:58ch;margin-top:1.1rem}
.formbox .done{display:grid;gap:.6rem;padding:1.3rem 0}
.formbox .done b{font-size:1.4rem;font-weight:600;letter-spacing:-.028em}
.formbox .done p{color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Bewerbungsformular (bewerbung.js) */
.field--breit{grid-column:1/-1}
.field input[type=file]{padding:.55rem .6rem}
.field__fehler{margin:0;font-size:.85rem;color:#B42318}
.field.is-fehler input,.field.is-fehler select,.field.is-fehler textarea{border-color:#B42318}
.field input:disabled{opacity:.5;cursor:not-allowed}
.form-teil{margin:2.2rem 0 0;font-size:1.05rem}
.form-teil+.form-grid,.form-teil+.form-note+.form-grid{margin-top:1rem}
.form-teil+.form-note{margin-top:.4rem}
.field__titel{font-size:.89rem;font-weight:500}
.wahl{display:flex;gap:1.6rem;align-items:center;min-height:46px}
.wahl label{display:inline-flex;gap:.45rem;align-items:center;font-weight:400}
/* Wie bei der Einwilligung: .field input wuerde die Optionsfelder aufblaehen. */
.field .wahl input{width:auto;min-height:0;padding:0;margin:0;accent-color:var(--accent)}
.field--einwilligung{margin-top:1.2rem;grid-template-columns:auto 1fr;align-items:start;gap:.6rem}
/* Absendeknopf der Bewerbung: Luft zum Einwilligungshaekchen; am Desktop
   linksbuendig, auf dem Handy mittig */
form[data-bewerbung] .btn-row{margin-top:1.4rem}
@media (max-width:720px){form[data-bewerbung] .btn-row{justify-content:center}}
.field--einwilligung input{margin-top:.25rem}
/* Doppelte Klasse: sticht .field input und die Fingerregel (pointer:coarse) weiter unten. */
.field.field--einwilligung input{width:auto;min-height:0;padding:0}
.field--einwilligung .field__fehler{grid-column:1/-1}
[data-status]:empty{margin:0}
[data-status].is-fehler{color:#B42318}
.bewerbung-danke h3{margin:0 0 .4rem}

/* ---- Kontakt ---- */
/* Drei Spalten erst ab 1080 px: darunter ist eine Kachel zu schmal fuer
   "bewerbung@aktivapersonal.at". Dazwischen zwei Spalten, die erste Kachel
   ueber die volle Breite. */
.kontaktgrid{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media (min-width:721px) and (max-width:1079px){
  .kontaktgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kontaktgrid > .kbox:first-child{grid-column:1 / -1}
}
@media (min-width:1080px){.kontaktgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kbox{padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-3);
  box-shadow:var(--shadow-s)}
.kbox h2{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem);letter-spacing:-.02em;margin-bottom:.75rem}
.kbox p{color:var(--ink-2);line-height:1.75}
.kbox p + p{margin-top:.7rem}
.kbox a{text-decoration:none;font-weight:600}
.kbox{min-width:0}
.kbox hr{border:0;border-top:1px solid var(--line);margin:1.1rem 0}
.kbox .mono.kicker{display:block;margin-bottom:.3rem}
.kbox__knopf{display:flex;flex-direction:column}
/* Ab zwei Spalten teilen sich die Kacheln ueber Subgrid dieselben vier Zeilen
   (Ueberschrift, Inhalt, Strich, unterer Teil): die Striche liegen auf einer
   Hoehe, die Knoepfe stehen auf Hoehe der Buerozeiten. */
@media (min-width:721px){
  .kontaktgrid > .kbox{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .kontaktgrid > .kbox > hr{align-self:start}
  .kontaktgrid > .kbox > .kbox__knopf{align-self:stretch}
}
/* Knopf mittig zwischen Strich und Unterkante der Kachel: die negativen
   Abstaende heben den Strich-Abstand (1.1rem) und den Innenabstand der Kachel
   (1.5rem) auf, der gleich grosse Innenabstand verteilt sie gleichmaessig
   neu. Ist die Zeile hoeher (Buerozeiten daneben), zentriert Flex. */
.kontaktgrid > .kbox > .kbox__knopf{justify-content:center;margin-block:-1.1rem -1.5rem;padding-block:1.3rem}
/* Die Handy-Regel ".kbox a" (inline-block, seitlich ohne Innenabstand) soll
   nur Textlinks treffen, nicht diese Knoepfe -- daher Anzeige und Abstand hier
   noch einmal ausdruecklich. */
.kbox__knopf .btn{display:flex;width:100%;justify-content:center;text-align:center;padding:.85rem 1.6rem}
/* Aufklappende Formulare unter den Kacheln (assets/kontakt.js). Im DOM steht
   jedes Fenster direkt hinter seiner Kachel -- auf dem Handy oeffnet es sich
   also dort, wo getippt wurde. Ab 721 px ruecken die Fenster per order hinter
   alle Kacheln und damit zwischen Kacheln und Karte. Aufgeklappt wird ueber
   grid-template-rows 0fr -> 1fr; der negative Abstand gleicht die Rasterluecke
   aus, damit die Karte im geschlossenen Zustand nicht springt. */
.kfenster{grid-column:1 / -1;display:grid;grid-template-rows:0fr;opacity:0;margin-top:-1.1rem;
  transition:grid-template-rows .6s var(--ease),margin-top .6s var(--ease),opacity .45s var(--ease)}
.kfenster.offen{grid-template-rows:1fr;opacity:1;margin-top:0}
.kfenster__in{min-height:0;overflow:hidden}
.kfenster.fertig .kfenster__in{overflow:visible}
.kfenster .formbox{margin-block:.2rem .6rem}
@media (min-width:721px){.kfenster{order:1}}
.kfenster__zu{position:absolute;top:1rem;right:1rem;z-index:2;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--ink);background:var(--paper-3);border:1px solid var(--line-2);border-radius:999px;
  padding:.45rem .95rem;cursor:pointer}
.kfenster__zu:hover{border-color:var(--ink-3)}
.kfenster h2[tabindex="-1"]:focus{outline:none}
/* Pflichtfelder im Bewerbungsformular */
.pflicht{color:var(--accent);font-weight:600;margin-left:.1em}
.form-note--pflicht{margin:0 0 1rem}
.kbox__knopf .btn[aria-expanded="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
@media (prefers-reduced-motion:reduce){.kfenster{transition:none}}
.mapwrap{display:block;position:relative;margin-top:2rem;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-m)}
.mapwrap img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.mapwrap:hover img{transform:scale(1.015)}
.mapwrap:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mapwrap__knopf{position:absolute;left:1rem;bottom:1rem}
.mapwrap--split{margin-top:0}
.mapwrap:hover .mapwrap__knopf{background:var(--accent-deep)}
@media (max-width:600px){.mapwrap__knopf{left:.6rem;bottom:.6rem;padding:.6rem 1.1rem;font-size:.9rem}}
.mapwrap + .small{margin-top:.85rem}

/* ---- Rechtstexte ---- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.22rem,1.08rem + .8vw,1.6rem);margin-top:2.3rem;margin-bottom:.8rem}
.legal h2:first-of-type{margin-top:.8rem}
.legal h3{margin-top:1.6rem;margin-bottom:.6rem}
.legal p{color:var(--ink-2);margin-bottom:.95rem}
.legal ul{color:var(--ink-2);padding-left:1.3rem;margin-bottom:.95rem}
.legal li{margin-bottom:.35rem}
.legal strong{color:var(--ink)}

/* ---- Schlussruf ---- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--accent-line);
  background:linear-gradient(158deg,var(--accent-soft),#F7FAFC 62%);
  padding:clamp(1.9rem,1.45rem + 2.6vw,3.2rem);display:grid;gap:1rem;justify-items:start;
  box-shadow:var(--shadow-s)}
.cta::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--warm-bright) 78%,rgba(242,178,92,0))}
.cta>*{position:relative}
.cta p{color:var(--ink-2);max-width:52ch}

/* ---- Fußzeile ---- */
.foot{background:var(--deep);color:#D6E0EA;padding-block:3.2rem 2.2rem;margin-top:clamp(2.6rem,1.8rem + 3.4vw,5rem)}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(194px,1fr));gap:1.9rem}
/* Die Rubriken im Fuss waren h4 unter einem h2 — die Gliederung sprang auf
   jeder der 57 Seiten eine Stufe. Sie sind jetzt h2 und sehen nur klein aus. */
.foot .fussrubrik{margin:0 0 .75rem;font-size:.98rem;font-weight:600;color:#fff;letter-spacing:-.012em}
.foot p,.foot li{color:#A9BCCC;font-size:.9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.32rem}
.foot a{text-decoration:none;color:#D6E0EA}
.foot a:hover{color:var(--warm-bright);text-decoration:underline}
.foot img{display:block;height:46px;width:auto;margin-bottom:1.1rem}
.foot__legal{margin-top:2.1rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14);
  color:#8DA2B5;font-size:.81rem;line-height:1.72}

/* ---- Sticky CTA Handy ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.6rem;padding:.6rem .9rem;
  background:rgba(251,250,247,.96);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line),0 -12px 30px -24px rgba(15,30,43,.6)}
.sticky .btn{flex:1;padding:.78rem .6rem;font-size:.94rem}
@media (max-width:720px){.sticky{display:flex}.foot{padding-bottom:6rem}}

/* ============================================================
   Stellen entdecken
   ============================================================ */

/* ---- Der Matcher: drei Fragen ---- */
.matcher{margin-top:2.2rem;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-m);overflow:hidden}
.mfrage{list-style:none;margin:0;padding:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);display:grid;gap:1.5rem}
.mfrage li{display:grid;gap:.55rem;position:relative;padding-left:2.4rem}
.mfrage li::before{content:attr(data-step);position:absolute;left:0;top:.05rem;
  width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.78rem;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.mfrage li.beantwortet::before{content:"✓";background:var(--accent);color:#fff;border-color:var(--accent)}
.mfrage li > b{font-size:1.12rem;font-weight:600;letter-spacing:-.018em}
.mfrage .chips{margin-top:.25rem}
.mergebnis{border-top:1px solid var(--line);background:var(--paper-2);
  padding:clamp(1.3rem,1.05rem + 1.2vw,2rem) clamp(1.4rem,1.1rem + 1.4vw,2.2rem)}
.mhint{color:var(--ink-2);max-width:62ch;font-size:.96rem}
.mtreffer{font-size:1.15rem;letter-spacing:-.018em}
.mtreffer b{font-weight:600}
.mliste{display:grid;gap:.5rem;margin-top:1rem}
.mjob{display:grid;gap:.15rem;padding:.75rem .95rem;border-radius:var(--r-s);
  background:var(--paper-3);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.mjob:hover{border-color:var(--accent-line);transform:translateX(3px)}
.mjob__t{font-weight:600;letter-spacing:-.015em}
.mjob__m{color:var(--ink-2);font-size:.88rem}
.mergebnis .btn-row{margin-top:1.4rem}

/* ---- Das Kartenspiel ---- */
.deck{margin-top:2.2rem;display:grid;justify-items:center;gap:1.2rem}
.deck__stage{position:relative;width:min(100%,340px);height:430px;perspective:900px}
.dcard{position:absolute;inset:0;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m);
  display:grid;grid-template-rows:auto 1fr;touch-action:pan-y;cursor:grab;
  transition:transform .35s var(--ease),opacity .3s var(--ease),box-shadow .35s var(--ease)}
.dcard.zieht{transition:none;cursor:grabbing}
/* Ohne z-index läge die zuletzt gezeichnete, also die unterste Karte obenauf. */
.dcard[data-tiefe="0"]{z-index:3}
.dcard[data-tiefe="1"]{z-index:2;transform:translateY(14px) scale(.955);box-shadow:var(--shadow-s);pointer-events:none}
.dcard[data-tiefe="2"]{z-index:1;transform:translateY(28px) scale(.91);box-shadow:none;pointer-events:none}
.dcard.weg--rechts{transform:translateX(130%) rotate(16deg);opacity:0}
.dcard.weg--links{transform:translateX(-130%) rotate(-16deg);opacity:0}
.dcard__pic{display:block;overflow:hidden;background:var(--paper-2)}
.dcard__pic img{display:block;width:100%;height:205px;object-fit:cover;pointer-events:none}
.dcard__txt{padding:1.1rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.45rem}
.dcard h3{font-size:1.18rem;margin-top:.15rem}
.dcard__m{color:var(--ink-2);font-size:.92rem}
.dcard__l{color:var(--ink-2);font-size:.92rem;margin-top:auto;padding-top:.5rem;
  border-top:1px solid var(--line)}
.dcard__l b{color:var(--accent-deep);font-weight:600}
.dcard__marke{position:absolute;top:1rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;border-radius:8px;
  border:2px solid currentColor;background:rgba(251,250,247,.9)}
.dcard__marke--ja{left:1rem;color:#1E7A46;opacity:var(--ja,0);transform:rotate(-8deg)}
.dcard__marke--nein{right:1rem;color:#A5342B;opacity:var(--nein,0);transform:rotate(8deg)}
.deck__ctrl{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.dbtn{font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;display:inline-flex;
  align-items:center;gap:.5rem;padding:.75rem 1.3rem;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--paper-3);color:var(--ink);
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.dbtn:hover{transform:translateY(-2px)}
.dbtn--no:hover{border-color:#C9776E;color:#A5342B;background:#FCF3F2}
.dbtn--yes:hover{border-color:#66B189;color:#1E7A46;background:#F1F9F4}
@media (pointer:coarse){.dbtn{min-height:44px}}
.deck__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  color:var(--ink-2);font-size:.88rem}
.dots{display:inline-flex;gap:.35rem}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block}
.dots i.voll{background:var(--accent-line)}
.dots i.jetzt{background:var(--accent);transform:scale(1.25)}
.deck__done{width:min(100%,520px);background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-s);padding:clamp(1.3rem,1.05rem + 1.2vw,1.9rem)}
.deck__done .btn-row{margin-top:1.3rem}
@media (max-width:420px){.deck__stage{height:400px}.dcard__pic img{height:160px}}

/* ---- Werkzeug im Kopfbereich statt Bild ---- */
.hero--tool h1{font-size:clamp(2.05rem,1.25rem + 2.9vw,3.3rem);max-width:15ch}
.hero--tool .hero__cue{display:none}
.hero__tool{width:100%;display:grid;justify-items:center}
@media (min-width:900px){
  .hero--tool .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}
  .hero--tool{padding-block:9rem 3.4rem}
}
/* Am Handy zuerst die Überschrift, dann sofort das Werkzeug, der Rest darunter.
   display:contents löst den Textblock auf, damit die drei Teile Geschwister werden. */
@media (max-width:899px){
  .hero--tool .hero__in{display:flex;flex-direction:column;gap:1.7rem}
  .hero--tool .hero__txt{display:contents}
  .hero--tool .hero__lead{order:1}
  .hero--tool .hero__tool{order:2}
  .hero--tool .hero__rest{order:3}
  .hero--tool .hero__rest .lede{margin-top:0}
}
.hero__tool .deck{margin-top:0}
.hero__tool .deck__stage{height:392px;width:min(100%,320px)}
.hero__tool .dcard__pic img{height:172px}
.hero__tool .deck__done{width:100%}

/* ---- Matcher kompakt: eine Frage nach der anderen ---- */
.matcher--kompakt{margin-top:0;width:100%;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-m);overflow:hidden}
.mkopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--line);background:var(--paper-2)}
.mkopf .mono{color:var(--warm)}
.mprog{display:inline-flex;gap:.3rem;flex:none}
.mprog i{width:24px;height:4px;border-radius:2px;background:var(--line-2);display:block;
  transition:background .3s var(--ease)}
.mprog i.voll{background:var(--accent-line)}
.mprog i.jetzt{background:var(--accent)}
.mbuehne{padding:1.2rem 1.25rem 1.35rem;min-height:238px;display:flex;flex-direction:column}
.mfrage-t{font-size:1.18rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.mbuehne .chips{margin-top:.95rem}
/* Die Bereiche stehen serverseitig im Quelltext, damit Suchmaschinen und
   Sprachmodelle sie lesen; entdecken.js ersetzt sie beim Laden durch die
   anwaehlbaren Felder. Bis dahin sollen sie aussehen wie diese Felder, sonst
   blitzt eine unformatierte Aufzaehlung auf. */
.mbereiche{list-style:none;margin:.95rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem}
.mbereiche li{font-size:.92rem;font-weight:500;padding:.55rem 1rem;
  border-radius:999px;border:1.5px solid var(--line-2);
  background:var(--paper);color:var(--ink)}
.mbereiche b{font-weight:600;color:var(--ink-2);margin-right:.35rem;
  font-variant-numeric:tabular-nums}
.mbuehne .mhint{margin-top:auto;padding-top:.9rem;font-size:.9rem}
.mzurueck{margin-top:auto;align-self:start;background:none;border:none;padding:.75rem 0 0;
  font:inherit;font-size:.9rem;color:var(--ink-2);cursor:pointer;text-decoration:underline}
.mzurueck:hover{color:var(--accent-deep)}
.mfertig .mliste{margin-top:.85rem}
.mfertig .btn-row{margin-top:1.1rem}
.mfertig .mhint{margin-top:.6rem;font-size:.9rem}

/* Variante „beides": Fragen am Rechner, Karten am Handy */
.nur-gross{display:none}
.nur-klein{display:block}
@media (min-width:900px){.nur-gross{display:block}.nur-klein{display:none}}

/* Was gerade auf der obersten Karte steht, für Vorleseprogramme */
.deck__sagen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hinweis über dem vorbelegten Formular */
.vorbelegt{margin-bottom:1.4rem;padding:.9rem 1.1rem;border-radius:var(--r-s);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink);font-size:.93rem}
.vorbelegt b{font-weight:600}

/* ============================================================
   Handy: grössere Tippflächen, lesbarere Kleinschrift
   ============================================================ */
@media (max-width:720px){
  /* Fusszeile: aus 18 Pixel hohen Zeilen werden antippbare Blöcke */
  .foot__grid{gap:1.6rem}
  .foot ul{gap:0}
  .foot li{font-size:.95rem}
  .foot li a{display:block;padding:.62rem 0}
  .foot p{font-size:.95rem}
  .foot__legal{font-size:.85rem}
  /* Kontaktkästen und Team: mehr Luft zwischen den Zeilen */
  .kbox p{line-height:2.05}
  .kbox h2{margin-bottom:.6rem}

  .person span{font-size:.9rem}
  /* Kleinschrift anheben */
  .mono{font-size:.83rem;letter-spacing:.14em}
  .tag{font-size:.82rem;padding:.32rem .64rem;letter-spacing:.08em}
  .crumbs{font-size:.92rem}
  .crumbs a{display:inline-block;padding:.72rem .2rem .72rem 0}
  /* Einzelne Zeilen mit Kontaktdaten sollen eine ganze Fingerbreite hoch sein */
  .kbox a,.person a{display:inline-block;padding:.62rem 0}
  .top__logo{padding-block:.25rem}
  .band__cap,.src,.form-note,.mjob__m{font-size:.9rem}
  /* Stellenkarten: Bild höher, Köpfe nicht anschneiden */
  .job__pic img{aspect-ratio:16/9;object-position:center 32%}
  .job h3{font-size:1.1rem}
  /* Der Kopfbereich darf am Handy nicht so tief anfangen */
  .hero{padding-block:7.4rem 2.4rem}
  .hero--tool{padding-block:7.4rem 2.4rem}
  .mbuehne{min-height:250px}
}
/* Fingerbedienung: nichts unter 44 Pixel */
@media (pointer:coarse){
  .chip{min-height:44px}
  .dbtn{min-height:46px}
  .filterbar select,.field input,.field select,.field textarea{min-height:46px}
  .mzurueck{padding-block:.85rem .35rem}
  .count button{padding:.5rem 0}
}

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .rise{opacity:1 !important;transform:none !important}
  .rule{transform:scaleX(1) !important}
  .w{opacity:1 !important;transform:none !important}
  .hero__pic img,.shot img,.band__pic img,.tuer img{transform:scale(1) !important}
  .tuer__mehr{opacity:1 !important;transform:none !important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* <picture> soll im Seitenaufbau nicht mitzaehlen: es umhuellt nur das Bild,
   damit der Browser die WebP-Fassung nehmen kann. */
picture{display:contents}