/* ============================================================
   Karriere-Template — nahbar, handfest, verkaufend.
   Haltung: die Seite soll sich anfuehlen wie eine Mappe, die
   jemand auf den Tisch legt. Papier, Fotos mit Ecken, Stempel,
   Handschrift, echte Gesichter mit Namen. Kein Software-Look.
   Markenfarbe steuert alles ueber --akzent / --akzent-rgb.
   ============================================================ */

@font-face{font-family:'DM Sans';src:url('fonts/dmsans-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Heebo';src:url('fonts/heebo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Heebo';src:url('fonts/heebo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Heebo';src:url('fonts/heebo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Heebo';src:url('fonts/heebo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/caveat-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/caveat-700.woff2') format('woff2');font-weight:700;font-display:swap}


:root{
  /* --- pro Kunde, kommt aus der Projektdatei --- */
  --akzent:#006EB7;
  --akzent-rgb:0,110,183;
  --akzent-dunkel:#00568F;
  --akzent-hell:#388EC7;       /* Verlaufskopf des Leuchtknopfs */
  --akzent-tiefer:#003D65;   /* tiefste Knopfkante */
  --akzent-leucht:#33AEFF;   /* Akzente AUF dunklem Grund */
  --akzent-leucht2:#5CBEFF; /* hellste Stufe, Eyebrows auf dunkel */

  --nein:#D9342A;
  --nein-rgb:217,52,42;

  /* warmes Papier, kein Software-Weiss */
  --papier:#F2ECE0;
  --papier-2:#E8DFCD;
  --blatt:#FCF9F3;
  --tinte:#1E1A15;
  --tinte-2:#5B5348;
  --tinte-3:#8C8272;
  --kante:rgba(30,26,21,.13);

  --display:'DM Sans',Impact,sans-serif;
  --schrift:'Heebo',-apple-system,BlinkMacSystemFont,sans-serif;
  --hand:'Hand','Segoe Script',cursive;

  --breite:1240px;
  --r:18px;
  --schatten:0 22px 44px -26px rgba(30,26,21,.5), 0 3px 10px -6px rgba(30,26,21,.18);
  --schatten-hoch:0 40px 70px -32px rgba(30,26,21,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
/* hidden muss die display-Regeln der Komponenten schlagen */
[hidden]{display:none!important}
/* Bewusst KEINE overflow- oder Hoehen-Regel auf html/body: jede davon kann
   in eingebetteten Ansichten (Vorschau-Rahmen, Handy-Umschalter) das
   Scrollen des Dokuments abwuergen. Waagerechten Ueberlauf gibt es nicht,
   das ist gemessen. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Sicherheitsnetz: kein Element darf die Seite horizontal aufziehen.
   clip statt hidden -- erzeugt keinen Scroll-Container, sticky bleibt heil. */
html,body{overflow-x:clip}
body{
  font-family:var(--schrift);color:var(--tinte);font-size:17px;line-height:1.62;
  background:var(--papier);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--akzent);color:#fff}
section,header,footer{position:relative;z-index:2}

.wrap{width:100%;max-width:var(--breite);margin:0 auto;padding:0 22px}
.abschnitt{padding:clamp(78px,8.6vw,128px) 0}
.abschnitt.eng{padding:clamp(58px,6vw,92px) 0}
.mitte{text-align:center}
.blattton{background:var(--blatt)}
.dunkelton{background:var(--tinte);color:#F6F1E7}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.02}
.h-riesig{font-size:clamp(33px,4.4vw,62px);line-height:1.02;letter-spacing:-.032em}
h2{font-size:clamp(28px,3.6vw,50px);letter-spacing:-.03em}
h3{font-size:clamp(20px,1.85vw,26px);letter-spacing:-.02em;line-height:1.2}
h4{font-family:var(--schrift);font-size:18px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.gruen{color:var(--akzent)}
.hand{font-family:var(--hand);font-weight:700;color:var(--akzent);font-size:1.25em;line-height:1}

.eyebrow{display:inline-block;font-family:var(--hand);font-weight:700;font-size:25px;color:var(--akzent);
  margin-bottom:8px;transform:rotate(-1.6deg)}
.sub{font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.66;color:var(--tinte-2);max-width:60ch}
.mitte .sub{margin-left:auto;margin-right:auto}
.kopf{max-width:740px}
.kopf.mitte{margin:0 auto}
.kopf .sub{margin-top:16px}
.fliess{color:var(--tinte-2);line-height:1.7}
.fliess p+p{margin-top:14px}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--akzent);color:#fff;font-size:16.5px;font-weight:700;
  padding:17px 30px;border-radius:12px;border:none;cursor:pointer;
  box-shadow:0 5px 0 0 var(--akzent-dunkel);
  transition:transform .12s ease,box-shadow .12s ease,background .2s;
}
.btn:hover{background:var(--akzent-dunkel);box-shadow:0 5px 0 0 var(--akzent-tiefer)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 0 var(--akzent-tiefer)}
.btn-hell{background:var(--blatt);color:var(--tinte);box-shadow:0 5px 0 0 rgba(30,26,21,.22)}
.btn-hell:hover{background:#fff;box-shadow:0 5px 0 0 rgba(30,26,21,.3)}
.btn-zeile{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.mitte .btn-zeile{justify-content:center}

/* ---------- Foto mit Ecken, wie aufgeklebt ---------- */
.foto{position:relative;border-radius:var(--r);overflow:hidden;background:var(--papier-2);box-shadow:var(--schatten)}
.foto img{width:100%;height:100%;object-fit:cover}
.kipp-l{transform:rotate(-1.5deg)}
.kipp-r{transform:rotate(1.6deg)}

/* Stempel */
.stempel{
  width:132px;height:132px;border-radius:50%;border:2.5px solid var(--akzent);color:var(--akzent);
  display:grid;place-items:center;text-align:center;transform:rotate(-13deg);
  font-family:var(--display);font-weight:800;line-height:1;opacity:.9;
  box-shadow:inset 0 0 0 4px rgba(var(--akzent-rgb),.14);
}
.stempel b{display:block;font-size:31px;letter-spacing:-.03em;margin-top:4px}
.stempel small{display:block;font-size:10px;letter-spacing:.24em;font-family:var(--schrift);font-weight:700}

/* ---------- Kopfzeile: liegt auf dem Bild, scrollt mit weg ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px clamp(20px,3vw,38px)}
.nav-logo{display:inline-flex;align-items:center}
.nav-logo img{height:30px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
/* Formularseite: Logo mittig ueber der Karte, ohne Rahmen */
.nav.mittig{justify-content:center;padding-top:26px}
.nav.mittig .nav-logo img{height:34px}
.nav-rechts{display:flex;align-items:center;gap:11px}
/* sekundaer: durchsichtig mit heller Kante */
.btn-glas{
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1);
  font-family:var(--schrift);font-size:15px;font-weight:700;backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s;
}
.btn-glas:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.8)}
.nav .btn{padding:13px 24px;font-size:15px;box-shadow:0 4px 0 0 var(--akzent-dunkel)}
/* auf hellem Grund (Formularseite ohne dunkles Bild dahinter) */
.nav.auf-hell .btn-glas{border-color:var(--kante);color:var(--tinte);background:rgba(255,255,255,.7)}
.nav.auf-hell .nav-logo img{filter:none}
/* auf tiefdunklem Grund (Stellen-Header): Logo rein weiss statt Markenfarbe */
.nav.auf-dunkel .nav-logo img{filter:brightness(0) invert(1);opacity:.94}

/* ---------- Sticky-Knopf unten rechts ---------- */
.sticky-cta{
  position:fixed;right:22px;bottom:22px;z-index:85;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--akzent);color:#fff;font-family:var(--schrift);font-size:16px;font-weight:700;
  padding:16px 26px;border-radius:999px;box-shadow:0 16px 34px -12px rgba(var(--akzent-rgb),.85),0 4px 0 0 var(--akzent-dunkel);
  opacity:0;transform:translateY(20px) scale(.96);pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.7,.3,1),transform .35s cubic-bezier(.2,.7,.3,1),background .2s;
}
.sticky-cta.da{opacity:1;transform:none;pointer-events:auto}
.sticky-cta:hover{background:var(--akzent-dunkel);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:opacity .2s}}

/* ---------- Hero: Bild ueber die volle Breite, Motiv rechts ---------- */
.hero{position:relative;min-height:100dvh;display:flex;overflow:hidden;color:#F6F1E7}
.hero-bild{position:absolute;inset:0;z-index:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:72% center}
/* Verlauf von links: Text bleibt lesbar, das Motiv rechts frei */
.hero-bild::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(20,16,12,.9) 0%,rgba(20,16,12,.76) 34%,rgba(20,16,12,.34) 62%,rgba(20,16,12,.12) 100%),
    linear-gradient(180deg,rgba(20,16,12,.5) 0%,transparent 26%,transparent 62%,rgba(20,16,12,.5) 100%)}
.hero-raster{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:104px 0 clamp(28px,3.4vw,48px)}
.hero-text{margin-top:auto}
.hero-text{max-width:1020px}
.hero-text h1{text-wrap:balance}
.hero-text .sub{max-width:64ch}
/* Breite NUR hier steuern: eine zweite max-width mit gleicher
   Spezifitaet weiter unten wuerde diese still ueberschreiben */
.hero h1{max-width:26ch;color:#fff}
.hero h1 .gruen{color:var(--akzent-leucht)}
.hero .sub{margin-top:16px;max-width:52ch;font-size:clamp(16px,1.15vw,17.5px);color:rgba(246,241,231,.86)}
.hero .stempel{position:absolute;right:6%;top:22%;z-index:3;border-color:var(--akzent-leucht);color:var(--akzent-leucht);
  background:rgba(20,16,12,.42);backdrop-filter:blur(4px);box-shadow:inset 0 0 0 4px rgba(79,224,140,.16)}
.hero .marken-zeile span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(6px)}
.hero .marken-zeile svg{color:var(--akzent-leucht)}
.hero .btn-hell{background:#F6F1E7;box-shadow:0 5px 0 0 rgba(0,0,0,.3)}
.marken-zeile{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.marken-zeile span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  background:var(--blatt);border:1px solid var(--kante);padding:7px 14px;border-radius:999px}
.marken-zeile svg{color:var(--akzent);flex:none}

/* Zahlenband */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(34px,4.5vw,58px);
  background:rgba(20,16,12,.42);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);overflow:hidden}
.zahl{padding:17px 16px;text-align:center;border-left:1px solid rgba(255,255,255,.16)}
.zahl:first-child{border-left:none}
.zahl b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1;letter-spacing:-.035em;color:#fff}
.zahl small{display:block;margin-top:6px;font-size:12.5px;color:rgba(246,241,231,.68);font-weight:600}

/* Willkommen: zentrierter Kopf, mehr Luft zur Karte darunter */
.willkommen-kopf{max-width:820px}
.willkommen-kopf h2{margin-bottom:22px}
.willkommen-kopf .sub{margin-top:0;font-size:clamp(17px,1.3vw,19.5px)}
.willkommen-kopf + .brief{margin-top:clamp(44px,5vw,72px)}

/* ---------- Brief vom Chef ---------- */
.brief{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4vw,58px);align-items:center;
  background:var(--blatt);border:1px solid var(--kante);border-radius:var(--r);padding:clamp(26px,3.4vw,46px);box-shadow:var(--schatten)}
.brief .foto{aspect-ratio:4/5}
.unterschrift{font-family:var(--hand);font-weight:700;font-size:40px;color:var(--tinte);margin-top:22px;transform:rotate(-2.4deg);display:inline-block}
.brief .rolle{font-size:14px;color:var(--tinte-3);margin-top:4px}

/* ---------- Collage ---------- */
.collage{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:34px}
.collage .foto{aspect-ratio:1/1}
.collage .foto:nth-child(1){grid-column:span 3;aspect-ratio:4/3}
.collage .foto:nth-child(2){grid-column:span 3;aspect-ratio:4/3}
.collage .foto:nth-child(3){grid-column:span 2}
.collage .foto:nth-child(4){grid-column:span 2}
.collage .foto:nth-child(5){grid-column:span 2}

/* ---------- Zwei grosse Bloecke ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.block{background:var(--blatt);border:1px solid var(--kante);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten)}
.block .bild{aspect-ratio:16/10;overflow:hidden}
.block .bild img{width:100%;height:100%;object-fit:cover}
.block .text{padding:26px 28px 30px}
.block h3{margin-bottom:10px}
.block p{color:var(--tinte-2);font-size:16px;line-height:1.66}

/* ---------- Vorteile: drei Gruppen, je mit Bild und Haken-Liste ---------- */
.stapel{margin-top:32px;display:grid;gap:20px}
.stapel-karte{
  background:var(--blatt);border:1.5px solid var(--kante);border-radius:var(--r);
  box-shadow:var(--schatten);overflow:hidden;
  display:grid;grid-template-columns:.42fr .58fr;align-items:stretch;
}
.stapel-karte:nth-child(even){grid-template-columns:.58fr .42fr}
.stapel-karte:nth-child(even) .stapel-bild{order:2}
.stapel-bild{position:relative;min-height:290px;overflow:hidden;background:var(--papier-2)}
.stapel-bild img{width:100%;height:100%;object-fit:cover}
.stapel-bild .marke{
  position:absolute;left:20px;top:20px;background:var(--blatt);color:var(--tinte);
  font-family:var(--hand);font-weight:700;font-size:23px;padding:6px 16px;border-radius:999px;
  transform:rotate(-2deg);box-shadow:var(--schatten);
}
.stapel-text{padding:clamp(26px,2.6vw,38px)}
.stapel-text h3{margin-bottom:20px;font-size:clamp(21px,2vw,28px)}
.punkte{display:grid;gap:15px}
.punkt{display:flex;gap:13px;align-items:flex-start}
.punkt .hk{width:25px;height:25px;border-radius:50%;background:rgba(var(--akzent-rgb),.14);color:var(--akzent);
  display:grid;place-items:center;flex:none;margin-top:2px}
.punkt h4{font-size:16.5px;margin-bottom:3px}
.punkt p{font-size:14.5px;color:var(--tinte-2);line-height:1.5}

/* ---------- Stimmen: Video links, Zitat rechts, ohne Karte ---------- */
.stimme{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,60px);align-items:center;margin-top:38px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten-hoch);
  background:var(--papier-2);cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.video:hover img{transform:scale(1.04)}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.1),rgba(20,16,12,.42))}
.video .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.video .play span{width:82px;height:82px;border-radius:50%;background:rgba(252,249,243,.94);display:grid;place-items:center;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:transform .24s}
.video:hover .play span{transform:scale(1.09)}
.video .dauer{position:absolute;right:16px;bottom:14px;z-index:2;background:rgba(20,16,12,.72);color:#fff;
  font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.stimme-text q{
  display:block;font-family:var(--display);font-weight:800;font-size:clamp(23px,2.5vw,34px);line-height:1.16;
  letter-spacing:-.026em;quotes:"„" """;
}
.stimme-text .wer{display:flex;align-items:center;gap:13px;margin-top:26px}
.stimme-text .wer .kopfbild{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;box-shadow:var(--schatten)}
.stimme-text .wer .kopfbild img{width:100%;height:100%;object-fit:cover}
.stimme-text .wer b{display:block;font-size:16px}
.stimme-text .wer span{font-size:14px;color:var(--tinte-3)}

/* ---------- Stellen ---------- */
/* Stellenkarten: das Foto traegt die Karte, deshalb bekommt es Hoehe
   statt eines Streifens. Abschluss als Textlink -- sechs grosse Knoepfe
   nebeneinander wirken laut, die ganze Karte ist ohnehin klickbar. */
.stellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:clamp(20px,2.2vw,28px);margin-top:clamp(34px,3.6vw,48px)}
/* Nur EINE aktive Stelle: kompakte Einzelkarte statt Rasterspalte über
   die volle Breite. Flacheres Bild, schmalere Karte -- alles zusammen
   bleibt unter einer Bildschirmhöhe, damit die Karte beim Scrollen als
   Ganzes zu sehen ist. */
.stellen.einzeln{grid-template-columns:min(620px,100%);justify-content:center}
.stellen.einzeln .stellenkarte .bild{aspect-ratio:16/9;max-height:min(320px,34vh)}
.stellen.einzeln .stellenkarte .text{padding:clamp(20px,2vw,26px)}
.stellen.einzeln .stellenkarte p{margin-bottom:16px}
.stellenkarte h3{font-size:clamp(21px,1.75vw,25px)}
.stellenkarte{background:var(--blatt);border:1px solid var(--kante);border-radius:22px;overflow:hidden;
  box-shadow:var(--schatten);display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease}
.stellenkarte:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.stellenkarte .bild{aspect-ratio:4/3;overflow:hidden;background:var(--papier-2)}
.stellenkarte .bild img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.stellenkarte:hover .bild img{transform:scale(1.045)}
.stellenkarte .text{padding:clamp(22px,2.2vw,28px);display:flex;flex-direction:column;flex:1;gap:0}
.stellenkarte .art{font-size:13.5px;color:var(--tinte-3);font-weight:600;margin:7px 0 14px;display:block}
.stellenkarte p{font-size:15.5px;color:var(--tinte-2);line-height:1.6;margin-bottom:20px;flex:1}
.stellenkarte .btn{align-self:flex-start;margin-top:auto;padding:14px 24px;font-size:15.5px}
.stellenkarte .btn svg{transition:transform .2s ease}
.stellenkarte:hover .btn svg{transform:translateX(4px)}

/* Der Leucht-Knopf: bewusst der EINZIGE seiner Art auf der ganzen Seite.
   Er markiert die Kernstellen -- Verlauf statt Flaeche, warmer Schein
   nach aussen, Lichtkante oben, und ein Glanz, der beim Ueberfahren
   einmal durchlaeuft. Alle anderen gruenen Knoepfe bleiben flach. */
.btn-stelle{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--akzent-hell) 0%,var(--akzent) 52%,var(--akzent-dunkel) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(var(--akzent-rgb),.55),
    0 8px 22px -6px rgba(var(--akzent-rgb),.7),
    0 18px 44px -14px rgba(var(--akzent-rgb),.75);
  animation:knopf-schein 3.4s ease-in-out infinite;
}
@keyframes knopf-schein{
  0%,100%{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(var(--akzent-rgb),.55),
    0 8px 22px -6px rgba(var(--akzent-rgb),.7),
    0 18px 44px -14px rgba(var(--akzent-rgb),.75)}
  50%{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(var(--akzent-rgb),.7),
    0 10px 28px -6px rgba(var(--akzent-rgb),.85),
    0 24px 58px -14px rgba(var(--akzent-rgb),.9)}
}
/* Glanz, der einmal durchwandert */
.btn-stelle::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 47%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.3,.7,.3,1);
}
.stellenkarte:hover .btn-stelle::after,.btn-stelle:hover::after{transform:translateX(120%)}
/* box-shadow ausdruecklich mitgeben: sonst schlaegt .btn:hover den Schein
   tot, sobald die Animation aus ist (reduzierte Bewegung) */
.btn-stelle:hover{background:linear-gradient(180deg,var(--akzent-hell) 0%,var(--akzent) 52%,var(--akzent-dunkel) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(var(--akzent-rgb),.75),
    0 12px 30px -6px rgba(var(--akzent-rgb),.9),
    0 26px 62px -14px rgba(var(--akzent-rgb),.95)}
.btn-stelle:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--akzent-rgb),.6),
    0 6px 18px -6px rgba(var(--akzent-rgb),.7)}
@media (prefers-reduced-motion:reduce){
  .btn-stelle{animation:none}
  .btn-stelle::after{transition:none}
}

/* ---------- Schritte ---------- */
/* Schnellbewerbung: bewusst KEINE Karten wie im Rest der Seite, sondern
   ein Ablauf auf einer durchgehenden Linie. Drei Ziffern, darunter Text,
   sonst nichts -- die Reihenfolge ist die Botschaft. */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.2vw,48px);
  margin-top:clamp(40px,4.4vw,60px);position:relative}
.schritte::before{content:"";position:absolute;top:31px;left:16.6%;right:16.6%;height:2px;
  background:linear-gradient(90deg,var(--kante),rgba(var(--akzent-rgb),.45),var(--kante))}
.schritt{position:relative;text-align:center;background:none;border:0;box-shadow:none;padding:0}
.schritt .nr{position:relative;z-index:2;width:62px;height:62px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;background:var(--akzent);color:#fff;
  font-family:var(--display);font-weight:800;font-size:25px;line-height:1;
  box-shadow:0 0 0 7px var(--papier),0 12px 24px -12px rgba(var(--akzent-rgb),.9)}
.schritt h4{margin-bottom:10px;font-size:clamp(18px,1.5vw,21px)}
.schritt p{font-size:15.5px;color:var(--tinte-2);line-height:1.65;max-width:34ch;margin:0 auto}
/* der Knopf darunter braucht Abstand zur Ablauf-Reihe */
.schritte+.mitte .btn-zeile{margin-top:clamp(32px,3.6vw,50px)}

/* ---------- Klartext: American Landing Page, rot gegen gruen ---------- */
.klartext{
  background:
    radial-gradient(58% 66% at 20% 4%,rgba(196,32,22,.55) 0%,transparent 60%),
    radial-gradient(52% 62% at 88% 26%,rgba(150,18,14,.5) 0%,transparent 58%),
    linear-gradient(158deg,#4A0D0A 0%,#2A0806 46%,#120404 100%);
  color:#fff;position:relative;overflow:hidden;
}
/* leichte Lichtstreifen fuer den Flash-Effekt */
.klartext::before{content:"";position:absolute;inset:0;opacity:.28;
  background:repeating-linear-gradient(112deg,rgba(255,255,255,.04) 0 1.5px,transparent 1.5px 58px)}
.klartext>*{position:relative;z-index:2}
.klartext h2,.klartext h3,.klartext h4{color:#fff}
.klartext .sub{color:rgba(255,255,255,.85)}
.warn-badge{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:#8E140E;
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;transform:rotate(-1.6deg);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.5);margin-bottom:20px;
}
.klartext .h-klartext{font-size:clamp(32px,4.6vw,64px);line-height:1.0;letter-spacing:-.034em;text-shadow:0 4px 30px rgba(60,0,0,.4)}
.nicht{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.nicht-karte{
  background:rgba(12,3,3,.5);border:1.5px solid rgba(255,255,255,.15);border-radius:var(--r);
  padding:28px 26px;backdrop-filter:blur(6px);position:relative;
  box-shadow:0 20px 44px -26px rgba(40,0,0,.8);
}
.x-zeichen{
  width:56px;height:56px;border-radius:50%;background:#E23A2E;color:#fff;
  display:grid;place-items:center;margin-bottom:18px;
  box-shadow:0 0 0 7px rgba(226,58,46,.22),0 10px 26px -10px rgba(0,0,0,.8);
}
.nicht-karte h4{font-size:19px;margin-bottom:10px}
.nicht-karte p{color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.6}

/* Der Umschwung: gruener Block, deutlich lauter */
.doch{
  margin-top:30px;background:linear-gradient(135deg,var(--akzent-hell) 0%,var(--akzent) 48%,var(--akzent-tiefer) 100%);
  border-radius:var(--r);padding:clamp(28px,3.4vw,42px);display:flex;gap:22px;align-items:center;
  box-shadow:0 26px 60px -26px rgba(0,90,44,.9),inset 0 1px 0 rgba(255,255,255,.34);
}
.doch .hk{
  width:64px;height:64px;border-radius:50%;background:#fff;color:var(--akzent);
  display:grid;place-items:center;flex:none;box-shadow:0 0 0 8px rgba(255,255,255,.2);
}
.doch p{color:#fff;font-size:clamp(17px,1.5vw,20px);line-height:1.55;font-weight:500}
.doch p b{font-family:var(--display);font-weight:800;font-size:1.18em;display:block;margin-top:6px;letter-spacing:-.02em}

/* ---------- CTA-Block: Text links, Bild rechts ---------- */
.cta-block{
  background:var(--tinte);color:#F6F1E7;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--schatten-hoch);display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch;
  position:relative;
}
.cta-block::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 8% 10%,rgba(var(--akzent-rgb),.28) 0%,transparent 60%);pointer-events:none}
.cta-text{padding:clamp(32px,4vw,58px);position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.cta-text h2{color:#fff;margin-bottom:16px}
.cta-text .sub{color:rgba(246,241,231,.78);max-width:52ch;margin:0}
.cta-text .eyebrow{color:var(--akzent-leucht2)}
.cta-text .btn-zeile{margin-top:28px;justify-content:flex-start}
/* Das Bild fuegt sich der Karte, nie umgekehrt: absolut fuellend, damit
   auch ein Hochformat den Block nicht auf seine Naturhoehe aufzieht --
   die Hoehe bestimmt allein die Textspalte */
.cta-bild{position:relative;min-height:330px;overflow:hidden}
.cta-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- FAQ: zweispaltig mit Ansprechpartner ---------- */
.faq-raster{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,3.4vw,48px);align-items:start;margin-top:34px}
.faq{display:grid;gap:12px}
.faq details{
  background:var(--blatt);border:1.5px solid var(--kante);border-radius:14px;overflow:hidden;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
.faq details:hover{border-color:rgba(var(--akzent-rgb),.42)}
.faq details[open]{border-color:var(--akzent);box-shadow:0 18px 36px -24px rgba(var(--akzent-rgb),.6)}
.faq summary{
  padding:22px 24px;font-weight:700;font-size:17.5px;line-height:1.35;cursor:pointer;
  display:flex;justify-content:space-between;gap:18px;align-items:center;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
/* klares Plus-Zeichen im Kreis, gross genug zum Treffen */
.faq summary .zeichen{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(var(--akzent-rgb),.13);color:var(--akzent);transition:background .22s,transform .28s,color .22s;
}
.faq summary .zeichen::before{content:"";width:14px;height:2.4px;background:currentColor;border-radius:2px;position:absolute}
.faq summary .zeichen::after{content:"";width:2.4px;height:14px;background:currentColor;border-radius:2px;position:absolute;transition:opacity .22s}
.faq summary .zeichen{position:relative}
.faq details[open] summary .zeichen{background:var(--akzent);color:#fff;transform:rotate(180deg)}
.faq details[open] summary .zeichen::after{opacity:0}
.faq details[open] summary{padding-bottom:12px}
.faq details p{padding:0 24px 22px;color:var(--tinte-2);font-size:16px;line-height:1.68}

/* Ansprechpartner-Karte neben den Fragen */
.ansprech{
  background:var(--blatt);border:1.5px solid var(--kante);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--schatten);position:sticky;top:96px;
}
.ansprech .bild{aspect-ratio:1/1;overflow:hidden}
.ansprech .bild img{width:100%;height:100%;object-fit:cover}
.ansprech .text{padding:26px 26px 28px}
.ansprech h3{font-size:22px;margin-bottom:8px}
.ansprech p{font-size:15.5px;color:var(--tinte-2);line-height:1.6}
.ansprech .btn{width:100%;margin-top:18px}
.ansprech .wer{display:block;margin-top:14px;font-size:14px;color:var(--tinte-3)}
.ansprech .wer b{color:var(--tinte);font-size:15px;display:block}

/* ---------- Standort: Luftaufnahme mit Pin, der herausragt ---------- */
.standort{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;padding:clamp(72px,8vw,118px) 0}
.standort-bild{position:absolute;inset:0;z-index:0}
.standort-bild img{width:100%;height:100%;object-fit:cover}
.standort-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(20,16,12,.9) 0%,rgba(20,16,12,.74) 38%,rgba(20,16,12,.3) 66%,rgba(20,16,12,.14) 100%)}
.standort-innen{position:relative;z-index:3;width:100%}
.standort-karte{
  max-width:520px;background:rgba(252,249,243,.94);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.6);border-radius:var(--r);padding:clamp(28px,3.2vw,40px);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.75);
}
.standort-karte h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}
.standort-karte .sub{color:var(--tinte-2)}
.daten{display:grid;gap:9px;margin-top:22px}
.daten-zeile{display:flex;gap:13px;align-items:center;font-size:16px}
.daten-zeile .hk{width:38px;height:38px;border-radius:11px;background:rgba(var(--akzent-rgb),.12);color:var(--akzent);
  display:grid;place-items:center;flex:none}

/* Der Pin: steht auf dem Bild, wirft Schatten, ragt in den Vordergrund */
.pin{position:absolute;right:16%;top:26%;z-index:4;width:132px;text-align:center;
  animation:pin-schweben 4.2s ease-in-out infinite}
.pin-koerper{position:relative;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.pin-schatten{
  position:absolute;left:50%;bottom:-16px;transform:translateX(-50%) rotateX(70deg);
  width:62px;height:20px;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(7px);z-index:-1;
}
.pin-ring{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:84px;height:28px;
  border-radius:50%;border:2px solid rgba(var(--akzent-rgb),.7);animation:pin-puls 2.6s ease-out infinite}
.pin-ring.v2{animation-delay:1.3s}
.pin-name{margin-top:22px;display:inline-block;background:var(--blatt);color:var(--tinte);
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;
  padding:8px 18px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(0,0,0,.7);white-space:nowrap}
@keyframes pin-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pin-puls{0%{transform:translateX(-50%) scale(.5);opacity:.9}100%{transform:translateX(-50%) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.pin,.pin-ring{animation:none}}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--tinte);color:#F6F1E7;padding:clamp(64px,7vw,100px) 0 30px;position:relative;overflow:hidden}
.fuss::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 82% 0%,rgba(var(--akzent-rgb),.22) 0%,transparent 62%)}
.fuss>*{position:relative;z-index:2}
.fuss h2{color:#fff}
.fuss .sub{color:rgba(246,241,231,.76)}
.fuss .eyebrow{color:var(--akzent-leucht2)}
.fuss-spalten{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  margin-top:clamp(44px,5vw,72px);padding-top:38px;border-top:1px solid rgba(255,255,255,.14);
}
.fuss-spalte h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,231,.5);margin-bottom:16px;font-weight:700}
/* im Fuss steht das Logo statt des Schriftzugs; auf dem dunklen Grund
   laeuft es in Weiss, damit die Markenfarbe nicht absaeuft */
.fuss-spalte .fuss-logo{height:38px;width:auto;display:block;margin-bottom:16px;
  filter:brightness(0) invert(1);opacity:.95}
.fuss-spalte p,.fuss-spalte a{font-size:15px;color:rgba(246,241,231,.74);line-height:1.7;display:block}
.fuss-spalte a:hover{color:#fff}
.fuss-liste{display:grid;gap:9px}
.fuss-unten{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:rgba(246,241,231,.5);
}
.fuss-unten a{color:rgba(246,241,231,.72)}
.fuss-unten a:hover{color:#fff}
.kl-kredit{display:inline-flex;align-items:center;gap:7px}
.kl-kredit b{color:#fff;font-weight:700}

/* ---------- Leiste unten (Handy) ---------- */
.leiste{display:none!important;position:fixed;left:0;right:0;bottom:0;z-index:80;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(242,236,224,.96);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--kante)}
.leiste .btn{width:100%}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.rv.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  body{font-size:16.5px}
  .hero{min-height:auto}
  .hero-raster{padding:96px 0 34px}
  .brief,.zwei,.schritte,.stimme,.cta-block,.nicht,.stellen,.faq-raster,.fuss-spalten{grid-template-columns:1fr}
  /* Ablauf kippt auf die Senkrechte: Linie links, Ziffer daneben */
  .schritte{gap:26px}
  .schritte::before{top:14px;bottom:14px;left:31px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--kante),rgba(var(--akzent-rgb),.45),var(--kante))}
  .schritt{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;text-align:left;align-items:start}
  .schritt .nr{width:62px;height:62px;margin:0;grid-row:span 2}
  .schritt p{max-width:none;margin:0}
  .ansprech{position:static}
  /* display:block ist entscheidend: der Desktop-Flex wuerde Bild und
     Karte sonst NEBENEINANDER quetschen (149px + 197px auf 390px) */
  .standort{min-height:auto;padding:0;display:block}
  .standort-karte{margin:0 16px}
  .standort-karte h2{font-size:24px}
  .pin{right:6%;top:44px;width:92px}
  .standort-bild{position:relative;height:300px}
  .standort-bild::after{background:linear-gradient(180deg,rgba(20,16,12,.35) 0%,rgba(20,16,12,.7) 100%)}
  .standort-innen{margin-top:-70px;padding-bottom:56px}
  .standort-karte{max-width:none}
  .pin-name{font-size:15px}
  .fuss-spalten{gap:28px}
  .hero-bild img{object-position:64% center}
  .hero-bild::after{background:linear-gradient(180deg,rgba(20,16,12,.72) 0%,rgba(20,16,12,.58) 40%,rgba(20,16,12,.86) 100%)}
  .hero .stempel{width:92px;height:92px;right:16px;top:auto;bottom:-10px}
  .hero .stempel b{font-size:22px}
  .hero h1{max-width:none}
  .stapel-karte,.stapel-karte:nth-child(even){grid-template-columns:1fr}
  .stapel-karte:nth-child(even) .stapel-bild{order:0}
  .stapel-bild{min-height:210px}
  .cta-bild{min-height:220px;order:-1}
  .hero{min-height:auto}
  .doch{flex-direction:column;align-items:flex-start;gap:16px}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahl:nth-child(3),.zahl:nth-child(4){border-top:1px solid var(--kante)}
  .zahl:nth-child(3){border-left:none}
  .collage{grid-template-columns:repeat(2,1fr);gap:12px}
  .collage .foto:nth-child(n){grid-column:span 1;aspect-ratio:1/1}
  .collage .foto:nth-child(1){grid-column:span 2;aspect-ratio:16/10}
  .kipp-l,.kipp-r{transform:none}
  .stapel-karte{position:static;padding:24px 20px 26px}
  .brief{padding:24px}
  .nav{padding:16px 16px}
  .nav-logo img{height:22px}
  .nav .btn{padding:11px 16px;font-size:14px}
  .btn-glas{display:none}
  .sticky-cta{right:14px;bottom:14px;padding:14px 20px;font-size:15px}
}


/* ============================================================
   STELLENSEITE
   ============================================================ */
/* Stellen-Hero: dunkle Textseite gegen EIN hohes Foto, darunter die
   Vorteilsleiste als helle Unterkante. Zusammen exakt eine Bildschirmhoehe.
   Bewusst anders als die Onepage-Vorlage (hell, einspaltig, Bildraster). */
.stellen-hero{min-height:100dvh;display:flex;flex-direction:column;background:var(--tinte)}
.stellen-split{flex:1;display:grid;grid-template-columns:1.04fr .96fr;min-height:0}

/* linke Haelfte: Zurueck, Stelle, Datenblatt, ein Knopf */
.stellen-daten{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(112px,10vw,140px) clamp(30px,4.4vw,64px) clamp(44px,5vw,64px) max(24px,calc((100vw - var(--breite))/2));
  color:#fff}
.stellen-daten .zurueck-link{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;
  color:rgba(255,255,255,.5);margin-bottom:clamp(20px,2.6vw,34px);align-self:flex-start}
.stellen-daten .zurueck-link:hover{color:#fff}
.stellen-titel{display:flex;align-items:flex-start;gap:12px}
.stellen-titel h1{font-size:clamp(54px,6.6vw,104px);line-height:.88;letter-spacing:-.04em;margin:0;color:#fff}
.stellen-titel .mwd{font-size:clamp(13px,1vw,16px);font-weight:600;color:rgba(255,255,255,.45);
  padding-top:.75em;white-space:nowrap}

/* Eckdaten: Symbol und Wert, ohne Beschriftung und ohne Trennlinien */
.stellen-eckdaten{list-style:none;margin:clamp(28px,3.4vw,44px) 0 clamp(30px,3.6vw,44px);
  display:flex;flex-direction:column;gap:clamp(13px,1.5vw,18px)}
.stellen-eckdaten li{display:flex;align-items:center;gap:15px;
  font-size:clamp(17px,1.5vw,21px);font-weight:600;color:#fff}
.stellen-eckdaten .sym{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  color:var(--akzent);background:rgba(var(--akzent-rgb),.15);
  box-shadow:inset 0 0 0 1px rgba(var(--akzent-rgb),.3)}
.stellen-daten .btn{align-self:flex-start}
/* Knopf mit Zusatzzeile: Doppelpfeil zeigt von links auf die Handlung,
   Hauptzeile fett, Versprechen direkt darunter */
.btn-zweizeilig{padding:14px 30px 14px 22px;gap:15px}
.btn-zweizeilig .doppel{flex:none;opacity:.72;transition:transform .2s ease,opacity .2s ease}
.btn-zweizeilig:hover .doppel{transform:translateX(4px);opacity:1}
.btn-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.25}
.btn-text small{font-size:13.5px;font-weight:500;opacity:.86;margin-top:2px}
@media (prefers-reduced-motion:reduce){.btn-zweizeilig .doppel{transition:none}
  .btn-zweizeilig:hover .doppel{transform:none}}

/* rechte Haelfte: ein einziges Foto, randlos, volle Hoehe */
.stellen-foto{position:relative;overflow:hidden}
.stellen-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Vorteilsleiste als helle Unterkante des dunklen Blocks */
.vorteilsleiste{background:var(--papier);display:grid;grid-template-columns:repeat(3,1fr);
  padding-left:max(24px,calc((100vw - var(--breite))/2));padding-right:max(24px,calc((100vw - var(--breite))/2))}
.vorteilsleiste div{display:flex;align-items:center;gap:13px;padding:20px clamp(16px,2vw,28px);
  font-size:16.5px;font-weight:600;line-height:1.35;border-left:1px solid var(--kante)}
.vorteilsleiste div:first-child{border-left:none;padding-left:0}
.vorteilsleiste .hk{width:26px;height:26px;border-radius:50%;background:rgba(var(--akzent-rgb),.14);color:var(--akzent);
  display:grid;place-items:center;flex:none}

/* Problem gegen Loesung: ein Raster, dadurch sind Zeilengeschwister
   automatisch gleich hoch, egal wie lang der Text ist */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:40px;align-items:stretch}
.spalte-kopf{display:flex;align-items:center;gap:11px;padding-bottom:4px}
.spalte-kopf .zeichen{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.spalte-kopf h3{font-size:20px}
.spalte-kopf.problem .zeichen{background:rgba(var(--nein-rgb),.14);color:var(--nein)}
.spalte-kopf.loesung .zeichen{background:rgba(var(--akzent-rgb),.14);color:var(--akzent)}
.pl-karte{background:var(--blatt);border:1.5px solid var(--kante);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--schatten);display:flex;flex-direction:column;height:100%}
.pl-karte.ist-problem{background:rgba(217,52,42,.05);border-color:rgba(var(--nein-rgb),.24)}
.pl-karte.ist-loesung{border-color:rgba(var(--akzent-rgb),.32)}
.pl-marke{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:26px}
.pl-marke .nr{font-family:var(--hand);font-weight:700;font-size:20px;color:var(--nein)}
.pl-marke .logo-klein{height:22px;width:auto;display:block}
.pl-karte p{font-size:15.5px;line-height:1.6;color:var(--tinte-2);margin:0}

/* Vorteile-Kategorien, je mit Bild */
.kat{margin-top:36px;display:grid;gap:20px}
.kat-block{background:var(--blatt);border:1.5px solid var(--kante);border-radius:var(--r);box-shadow:var(--schatten);
  overflow:hidden;display:grid;grid-template-columns:.36fr .64fr}
.kat-block:nth-child(even){grid-template-columns:.64fr .36fr}
.kat-block:nth-child(even) .kat-bild{order:2}
.kat-bild{position:relative;min-height:250px;overflow:hidden;background:var(--papier-2)}
.kat-bild img{width:100%;height:100%;object-fit:cover}
.kat-bild .marke{position:absolute;left:18px;top:18px;background:var(--blatt);color:var(--tinte);
  font-family:var(--hand);font-weight:700;font-size:21px;padding:5px 15px;border-radius:999px;transform:rotate(-2deg);box-shadow:var(--schatten)}
.kat-text{padding:clamp(24px,2.6vw,34px)}
.kat-text h3{font-size:21px;margin-bottom:20px}
.kat-liste{display:grid;gap:15px}

/* Aufgaben: Bild links waechst exakt auf die Hoehe der Liste rechts,
   egal wie viele Aufgaben eingetragen sind. Darunter ein Querbild. */
.aufgaben-raster{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(20px,2.6vw,32px);align-items:stretch;margin-top:38px}
/* ohne min-width:0 darf ein Grid-Kind ueber seine Spur hinauswachsen --
   mit aspect-ratio plus min-height rechnet es sich sonst breiter als die Spalte */
.aufgaben-raster>*{min-width:0}
.aufgaben-bild{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);
  background:var(--papier-2);min-height:100%}
.aufgaben-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aufgaben{display:grid;gap:12px;align-content:start}
.aufgabe{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--blatt);
  border:1.5px solid var(--kante);border-radius:var(--r);padding:22px 26px;box-shadow:var(--schatten)}
.aufgabe .nr{width:38px;height:38px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:16px;flex:none}
.aufgabe h4{margin-bottom:5px}
.aufgabe p{font-size:15.5px;color:var(--tinte-2);line-height:1.55}
/* Querbild unter beiden Spalten */
.aufgaben-quer{margin-top:clamp(20px,2.6vw,32px);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);
  aspect-ratio:32/9}
.aufgaben-quer img{width:100%;height:100%;object-fit:cover}

/* Qualifikationen */
.quali{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quali-karte{background:var(--blatt);border:1.5px solid var(--kante);border-radius:var(--r);padding:24px 26px;box-shadow:var(--schatten)}
.quali-karte .hk{width:40px;height:40px;border-radius:11px;background:rgba(var(--akzent-rgb),.13);color:var(--akzent);
  display:grid;place-items:center;margin-bottom:14px}
.quali-karte h4{margin-bottom:7px}
.quali-karte p{font-size:15px;color:var(--tinte-2);line-height:1.55}

@media (max-width:900px){
  .kat-block,.kat-block:nth-child(even){grid-template-columns:1fr}
  .kat-block:nth-child(even) .kat-bild{order:0}
  .kat-bild{min-height:200px}
  .aufgaben-raster{grid-template-columns:1fr}
  .aufgaben-bild{min-height:0;aspect-ratio:16/10;width:100%}
  .aufgaben-quer{aspect-ratio:16/9}
}

/* ============================================================
   FORMULARSEITE — Karte schwebt ueber einem Bild
   ============================================================ */
.form-seite{position:relative;background:var(--papier)}
.form-buehne{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.form-hintergrund{position:absolute;inset:0;z-index:0}
.form-hintergrund img{width:100%;height:100%;object-fit:cover}
.form-hintergrund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,12,.72) 0%,rgba(20,16,12,.62) 40%,rgba(20,16,12,.86) 100%)}
.form-mitte{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding:96px 0 44px}
.form-karte{
  background:var(--papier);border-radius:26px;max-width:760px;box-shadow:0 50px 90px -34px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.5);
  padding:clamp(26px,3.4vw,44px);margin:0 auto;width:100%;
}
.form-kopf{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.form-kopf .kopfbild{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;box-shadow:var(--schatten)}
.form-kopf .kopfbild img{width:100%;height:100%;object-fit:cover}
.form-kopf b{display:block;font-size:15.5px}
.form-kopf span{font-size:13.5px;color:var(--tinte-3)}
.fortschritt{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.fortschritt-bahn{flex:1;height:7px;border-radius:999px;background:rgba(30,26,21,.1);overflow:hidden}
.fortschritt-fuell{height:100%;background:var(--akzent);border-radius:999px;transition:width .45s cubic-bezier(.2,.7,.3,1)}
.fortschritt small{font-size:13px;font-weight:700;color:var(--tinte-3);white-space:nowrap}
.frage{display:none}
.frage.aktiv{display:block;animation:auf .34s cubic-bezier(.2,.7,.3,1)}
@keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.frage h2{font-size:clamp(22px,2.3vw,30px);margin-bottom:22px;line-height:1.16}
/* Antwort-Karten: heben sich klar von der Formularkarte ab, mit Tiefe
   und einem Farbverlauf in der Markenfarbe bei Auswahl */
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.wahl button{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  cursor:pointer;background:#fff;border:1px solid rgba(30,26,21,.09);border-radius:18px;
  padding:26px 16px 22px;font-family:var(--schrift);font-size:15.5px;font-weight:700;color:var(--tinte);
  line-height:1.35;overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(30,26,21,.5),0 2px 5px -3px rgba(30,26,21,.2);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s;
}
/* zarter Schimmer oben, damit die Karte plastisch wirkt */
.wahl button::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;
  background:linear-gradient(180deg,rgba(var(--akzent-rgb),.07),transparent);pointer-events:none}
.wahl button:hover{transform:translateY(-4px);border-color:rgba(var(--akzent-rgb),.4);
  box-shadow:0 24px 46px -22px rgba(var(--akzent-rgb),.55),0 3px 8px -4px rgba(30,26,21,.22)}
.wahl button.gewaehlt{
  border-color:transparent;color:#fff;transform:translateY(-3px);
  background:linear-gradient(150deg,var(--akzent-hell) 0%,var(--akzent) 55%,var(--akzent-dunkel) 100%);
  box-shadow:0 26px 50px -22px rgba(var(--akzent-rgb),.85),inset 0 1px 0 rgba(255,255,255,.3);
}
.wahl button.gewaehlt::before{background:linear-gradient(180deg,rgba(255,255,255,.22),transparent)}
.wahl button .bild{
  width:60px;height:60px;border-radius:18px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(var(--akzent-rgb),.16),rgba(var(--akzent-rgb),.07));
  color:var(--akzent);border:1px solid rgba(var(--akzent-rgb),.16);
  transition:background .18s,color .18s,border-color .18s;
}
.wahl button.gewaehlt .bild{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4)}
.wahl.vier{grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.wahl.vier{grid-template-columns:repeat(4,1fr)}}
.felder{display:grid;gap:14px}
.feld label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--tinte-2)}
.feld input{width:100%;background:var(--papier);border:1.5px solid var(--kante);border-radius:12px;padding:15px 17px;
  font-family:var(--schrift);font-size:16.5px;color:var(--tinte);transition:border-color .18s,box-shadow .18s}
.feld input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 4px rgba(var(--akzent-rgb),.14)}
.feld.fehler input{border-color:var(--nein);background:rgba(var(--nein-rgb),.05)}
.form-fehler{color:var(--nein);font-size:14.5px;font-weight:600;margin-top:14px;display:none}
.form-fehler.an{display:block}
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px}
.zurueck{background:none;border:none;font-family:var(--schrift);font-size:15.5px;font-weight:700;color:var(--tinte-3);cursor:pointer;padding:10px 2px}
.zurueck:hover{color:var(--tinte)}
.sicher{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--tinte-3)}

/* Zuspruch auf dem letzten Schritt */
.zuspruch{text-align:center;margin-bottom:26px}
.zuspruch h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:6px}
.zuspruch-sub{font-size:clamp(17px,1.5vw,20px);font-weight:700;color:var(--tinte);margin-bottom:20px}
.zuspruch .rundbild{width:104px;height:104px;border-radius:50%;overflow:hidden;margin:0 auto 16px;
  box-shadow:0 0 0 4px rgba(var(--akzent-rgb),.16),var(--schatten)}
.zuspruch .rundbild img{width:100%;height:100%;object-fit:cover}
.zuspruch-gruss{font-size:16px;color:var(--tinte-2);margin-bottom:12px}
.zuspruch-pfeil{color:var(--tinte-3);margin-bottom:12px}
.zuspruch-satz{font-size:clamp(16.5px,1.4vw,19px);font-weight:700;line-height:1.45;max-width:44ch;margin:0 auto}
.btn-voll{width:100%}
.datenschutz-hinweis{font-size:12.5px;line-height:1.5;color:var(--tinte-3);text-align:center;margin-top:10px}
.datenschutz-hinweis a{text-decoration:underline}
.datenschutz-hinweis a:hover{color:var(--akzent)}

/* Abschluss nach dem Absenden */
.fertig{display:none;text-align:center;padding:8px 0}
.fertig.an{display:block;animation:auf .4s cubic-bezier(.2,.7,.3,1)}
.fertig .rundbild{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto 20px;
  box-shadow:0 0 0 5px rgba(var(--akzent-rgb),.16),var(--schatten);position:relative}
.fertig .rundbild img{width:100%;height:100%;object-fit:cover}
.fertig .haken-marke{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--akzent);color:#fff;display:grid;place-items:center;border:3px solid var(--blatt)}
.fertig h2{margin-bottom:12px}
.fertig p{color:var(--tinte-2);max-width:44ch;margin:0 auto}
.fertig .zusage{margin-top:22px;background:rgba(var(--akzent-rgb),.1);border:1px solid rgba(var(--akzent-rgb),.3);
  border-radius:14px;padding:16px 20px;font-size:15.5px;font-weight:600;color:var(--tinte);display:inline-flex;align-items:center;gap:10px}
.fertig .zusage svg{color:var(--akzent);flex:none}

.form-fuss{position:relative;z-index:2}

@media (max-width:900px){
  .gegenueber{grid-template-columns:1fr;gap:12px}
  .kat-liste,.quali{grid-template-columns:1fr}
  .spalte-kopf{margin-top:14px}
  .stellen-hero{min-height:auto}
  .stellen-split{grid-template-columns:1fr}
  /* Titel + (m/w/d) stehen im Flex nebeneinander. Ein langes Berufswort
     laesst sich nicht schmaler setzen als sein min-content -- der dunkle
     Block wird dann breiter als das Fenster und rechts entsteht eine
     helle Leiste. Deshalb: (m/w/d) darf umbrechen, lange Woerter trennen. */
  .stellen-titel{flex-wrap:wrap}
  .stellen-titel h1{min-width:0;hyphens:auto;overflow-wrap:break-word}
  .stellen-foto{order:-1;aspect-ratio:5/4}
  .stellen-daten{padding:26px 20px 34px}
  .stellen-daten .zurueck-link{margin-bottom:16px}
  .stellen-eckdaten .sym{width:38px;height:38px;border-radius:12px}
  .vorteilsleiste{grid-template-columns:1fr;padding:0 20px}
  .vorteilsleiste div{border-left:none;border-top:1px solid var(--kante);padding:15px 0;font-size:15.5px}
  .vorteilsleiste div:first-child{border-top:none}
  .form-mitte{padding:84px 0 30px}
  .nav.mittig{padding-top:18px}
  .nav.mittig .nav-logo img{height:26px}
  .form-karte{padding:24px 20px 28px;border-radius:20px}
}

/* ============================================================
   ZUSTIMMUNG — unten angedockt, im Ton der Seite statt Fremdoptik
   ============================================================ */
.kl-consent{position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:16px clamp(14px,3vw,28px) calc(16px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;pointer-events:none}
.kl-consent[hidden]{display:none!important}
.kl-consent-karte{pointer-events:auto;width:100%;max-width:660px;
  background:var(--blatt);border:1px solid var(--kante);border-radius:22px;
  padding:clamp(20px,2.4vw,28px);box-shadow:var(--schatten-hoch);
  animation:kl-consent-rein .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes kl-consent-rein{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kl-consent-karte{animation:none}}

.kl-consent-titel{font-family:var(--display);font-weight:800;font-size:clamp(19px,1.7vw,23px);
  letter-spacing:-.02em;margin-bottom:9px;line-height:1.15}
.kl-consent-text{font-size:15px;line-height:1.6;color:var(--tinte-2)}
.kl-consent-text a{color:var(--akzent);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.kl-consent-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:flex-end}
.kl-consent-knoepfe .btn{padding:13px 24px;font-size:15px}

/* Kategorien in der Auswahl */
.kl-cat{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--kante)}
.kl-cat:first-of-type{border-top:1px solid var(--kante);margin-top:16px}
.kl-cat b{display:block;font-size:15.5px;font-weight:700;margin-bottom:2px}
.kl-cat span{display:block;font-size:14px;color:var(--tinte-2);line-height:1.5}

/* Schalter: gleiche Formsprache wie die Knöpfe */
.kl-schalter{position:relative;flex:none;width:50px;height:29px;cursor:pointer}
.kl-schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kl-riegel{position:absolute;inset:0;border-radius:999px;background:rgba(30,26,21,.2);
  transition:background .2s ease}
.kl-riegel::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;
  border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.kl-schalter input:checked+.kl-riegel{background:var(--akzent)}
.kl-schalter input:checked+.kl-riegel::after{transform:translateX(21px)}
.kl-schalter input:focus-visible+.kl-riegel{outline:2px solid var(--akzent);outline-offset:3px}
.kl-schalter-fest{opacity:.55;cursor:default}
.kl-schalter-fest input{cursor:default}

@media (max-width:900px){
  .kl-consent{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .kl-consent-knoepfe{justify-content:stretch}
  .kl-consent-knoepfe .btn{flex:1;justify-content:center}
}

/* Nur für Vorleseprogramme und Suchmaschinen: im Textfluss vorhanden,
   aber nicht sichtbar. Kein display:none -- das würde die Überschrift
   auch für Vorleseprogramme entfernen. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}