/* stil.css Karriereseite Zahntechnik Balz (AO Consulting, Oktober 2026)
   Wiedererkennung zur Hauptseite zahntechnik-balz.de über Logo, Orange #F28F0D und Schwarz.
   Schrift Jost (OFL, lokal), passt zur geometrischen Logoschrift. Farben kommen aus ci.css (kunde.json). */

@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-700-normal.woff2") format("woff2")}

:root{
  --orange:var(--akzent,#f28f0d);
  --orange-dunkel:#c96f00;
  --schwarz:var(--primaer,#111);
  --anthrazit:#1c1c1c;
  --creme:#f6f2ec;
  --grau:#5b5b5b;
  --grau-hell:#a7a7a7;
  --linie:rgba(17,17,17,.12);
  --radius:20px;
  --radius-gross:32px;
  --abstand:clamp(4rem,8vw,7.5rem);
  --kopf-hoehe:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 12px)}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--schrift-text);font-weight:400;font-size:17px;line-height:1.65;color:var(--text);background:var(--hintergrund);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit}
p{margin:0 0 1rem}
h1,h2,h3{font-family:var(--schrift-ueberschrift);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 1.1rem;color:inherit}
h1{font-size:clamp(2.4rem,5.2vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.4vw,3rem)}
h3{font-size:1.22rem;line-height:1.3;letter-spacing:0}
strong{font-weight:600}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#111;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* Kicker im Stil der Logozeile „ZAHNTECHNIK“: gesperrte Versalien mit orangem Punkt */
.kicker{display:inline-flex;align-items:center;gap:.65rem;font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin:0 0 1.1rem;color:var(--schwarz)}
.kicker::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--orange);flex-shrink:0}
.kicker-hell{color:#fff}
.akzent{color:var(--orange)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--orange);color:#111;text-decoration:none;font-weight:600;font-size:1rem;line-height:1.2;padding:1rem 1.7rem;border-radius:999px;border:2px solid var(--orange);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap;font-family:inherit}
.knopf:hover{background:#111;border-color:#111;color:#fff}
.flaeche-dunkel .knopf:hover,.hero .knopf:hover,.fuss .knopf:hover,.ansprech .knopf:hover{background:#fff;border-color:#fff;color:#111}
.knopf-klein{padding:.65rem 1.25rem;font-size:.95rem}
.knopf-mittel{padding:.8rem 1.4rem;font-size:.95rem}
.knopf-rahmen{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.knopf-rahmen:hover{background:#fff;color:#111;border-color:#fff}
.knopf-hell{background:#fff;border-color:#111;color:#111}
.knopf-hell:hover{background:#111;color:#fff}
.mehr{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:.2rem}
.mehr svg{width:20px;height:20px;transition:transform .2s}
.mehr:hover svg{transform:translateX(4px)}
.mehr-klein{font-size:.92rem}
.hinweis-klein{font-size:.88rem;color:var(--grau)}

/* Kopfzeile: schwarz wie auf der Hauptseite */
.kopf{position:sticky;top:0;z-index:50;background:#111;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;height:var(--kopf-hoehe);gap:1.5rem}
.logo img{height:50px;width:auto}
.hauptnavi{display:flex;align-items:center;gap:1.9rem}
.hauptnavi a{color:#fff;text-decoration:none;font-weight:500;font-size:.98rem;position:relative}
.hauptnavi a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s;transform-origin:left}
.hauptnavi a:not(.knopf):hover::after{transform:scaleX(1)}
.hauptnavi .knopf{color:#111}
.hauptnavi .knopf:hover{color:#111;background:#fff;border-color:#fff}
.navi-schalter{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:10px;flex-direction:column;justify-content:center;gap:6px}
.navi-schalter span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.navi-schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navi-schalter[aria-expanded="true"] span:nth-child(2){opacity:0}
.navi-schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1023px){
  :root{--kopf-hoehe:66px}
  .logo img{height:42px}
  .navi-schalter{display:flex}
  .hauptnavi{position:absolute;left:0;right:0;top:100%;background:#111;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 20px 1.5rem;border-top:1px solid rgba(255,255,255,.1);display:none}
  .hauptnavi.offen{display:flex}
  .hauptnavi a:not(.knopf){padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.1rem}
  .hauptnavi a:not(.knopf)::after{display:none}
  .hauptnavi .knopf{margin-top:1.2rem}
}

/* Hero: schwarz, Text links, Teamfoto rechts mit orangem Kreis aus dem Logo */
.hero{background:#111;color:#fff;display:grid;grid-template-columns:1fr;position:relative;overflow:hidden}
.hero-bild{position:relative;order:-1}
.hero-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 80%}
.hero-text{padding:2.6rem 20px 3.4rem;position:relative;z-index:2}
.hero h1{margin-bottom:1.3rem}
.hero-unter{font-size:1.15rem;color:rgba(255,255,255,.82);max-width:34rem;margin-bottom:2rem}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem}
.kreis{position:absolute;border-radius:50%;background:var(--orange);pointer-events:none}
.hero-bild .kreis{width:84px;height:84px;right:20px;bottom:-42px;z-index:3}
@media (min-width:1024px){
  .hero{grid-template-columns:calc((100vw - min(100vw,1440px)) / 2 + min(100vw,1440px) * .41) minmax(0,1fr);min-height:min(74vh,720px,44vw)}
  .hero-text{padding-top:3.5rem!important;padding-bottom:3.5rem!important}
  .hero-bild{order:0}
  .hero-bild img{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0 0 0 var(--radius-gross)}
  .hero-text{align-self:center;padding:5rem 3.5rem 5rem max(32px,calc((100vw - 1440px) / 2 + 32px))}
  .hero-bild .kreis{width:130px;height:130px;left:-65px;right:auto;top:auto;bottom:-65px}
  .hero h1{font-size:clamp(2.6rem,4.3vw,4.3rem)}
}
@media (min-width:1440px){.hero-unter{font-size:1.25rem}}

/* Zahlen: orange Fläche wie der Fuß der Hauptseite */
.zahlen{background:var(--orange);color:#111}
.zahlen-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.2rem;padding-top:2.2rem;padding-bottom:2.2rem}
.zahlen p{margin:0;display:flex;flex-direction:column;line-height:1.25}
.zahlen strong{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.zahlen span{font-size:.95rem;font-weight:500;margin-top:.3rem}
@media (min-width:900px){.zahlen-raster{grid-template-columns:repeat(4,minmax(0,1fr))}.zahlen p{border-left:2px solid rgba(17,17,17,.25);padding-left:1.3rem}}

/* Abschnitte */
.abschnitt{padding:var(--abstand) 0;position:relative}
.flaeche-creme{background:var(--creme)}
.flaeche-dunkel{background:#111;color:#fff;overflow:hidden}
.kopf-mitte{text-align:center;max-width:760px;margin:0 auto 3rem}
.kopf-mitte .kicker{justify-content:center}
.einleitung{font-size:1.1rem;color:var(--grau)}
.flaeche-dunkel .einleitung{color:rgba(255,255,255,.75)}
.zwei{display:grid;gap:3rem;align-items:center}
@media (min-width:900px){.zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem,6vw,6rem)}.zwei-umgekehrt>:first-child{order:0}}
.text-block p{color:#333}
.text-block .knopf,.text-block .mehr{margin-top:.8rem}
.bild-rahmen{margin:0}
.bild-rahmen img{border-radius:var(--radius-gross);width:100%}

.bild-collage{position:relative;padding:0 0 18% 0}
.bild-collage a{display:block}
.bild-collage .gross img{border-radius:var(--radius-gross);width:78%;aspect-ratio:4/5;object-fit:cover}
.bild-collage .klein{position:absolute;right:0;bottom:0;width:52%}
.bild-collage .klein img{border-radius:var(--radius);border:8px solid #fff;aspect-ratio:4/3;object-fit:cover}
.kreis-klein{width:clamp(70px,9vw,110px);height:clamp(70px,9vw,110px);right:8%;top:6%}


/* Benefits */
.benefits-raster{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media (min-width:640px){.benefits-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.benefits-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
.benefit{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:1.8rem 1.7rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.benefit:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35);border-color:transparent}
.benefit svg{width:56px;height:56px;padding:14px;border-radius:50%;background:var(--orange);color:#111;margin-bottom:1.2rem;stroke-width:1.7}
.benefit h3{margin-bottom:.45rem}
.benefit p{margin:0;color:var(--grau)}

/* Stellen */
.kreis-stellen{width:clamp(260px,40vw,560px);height:clamp(260px,40vw,560px);right:calc(clamp(260px,40vw,560px) / -2.4);top:-10%;opacity:.95}
#stellen .wrap{position:relative;z-index:1}
.stellen-liste{display:grid;gap:.9rem;max-width:980px;margin:0 auto}
.stelle-zeile{display:grid;grid-template-columns:1fr auto;grid-template-areas:"marken pfeil" "text pfeil";align-items:center;gap:.5rem 1.2rem;background:var(--anthrazit);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.4rem 1.4rem 1.4rem 1.6rem;text-decoration:none;color:#fff;transition:background .2s,border-color .2s,transform .2s}
.stelle-zeile>.marken{grid-area:marken}
.stelle-zeile>span:nth-child(2){grid-area:text}
.stelle-zeile h3{margin:0 0 .25rem;font-size:clamp(1.15rem,2vw,1.45rem)}
.stelle-zeile .meta{margin:0;color:rgba(255,255,255,.65);font-size:.95rem}
.stelle-zeile .pfeil{grid-area:pfeil;width:52px;height:52px;border-radius:50%;background:var(--orange);color:#111;display:grid;place-items:center;transition:transform .2s}
.stelle-zeile:hover{background:#262626;border-color:var(--orange)}
.stelle-zeile:hover .pfeil{transform:translateX(4px)}
.marken{display:flex;flex-wrap:wrap;gap:.4rem}
.marke{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;background:#111;color:#fff}
.flaeche-dunkel .marke{background:rgba(242,143,13,.16);color:var(--orange)}
.marke-orange{background:var(--orange);color:#111}
.marke-grau{background:#efece7;color:#333}
.initiativ{text-align:center;margin:2.4rem auto 0;color:rgba(255,255,255,.8)}
.initiativ a{color:var(--orange);font-weight:600}

/* Stimmen */
.stimmen{display:grid;gap:2rem}
.stimme{margin:0;display:grid;gap:0;background:var(--creme);border-radius:var(--radius-gross);overflow:hidden}
.stimme img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%}
.stimme blockquote{margin:0;padding:2rem 1.6rem 2.2rem;position:relative}
.stimme blockquote p{font-size:1.05rem;color:#2a2a2a}
.stimme blockquote::before{content:"";display:block;width:44px;height:44px;border-radius:50%;background:var(--orange);margin-bottom:1.2rem}
.stimme footer{display:flex;flex-direction:column;margin-top:1.2rem}
.stimme footer strong{font-size:1.2rem}
.stimme footer span{color:var(--grau);font-size:.95rem}
@media (min-width:900px){
  .stimme{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:stretch}
  .stimme img{height:100%;aspect-ratio:auto}
  .stimme blockquote{padding:3rem 3.2rem;align-self:center}
  .stimme:nth-child(2){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .stimme:nth-child(2) picture{order:2}
}

/* Tipps und Prozess */
.tipps{display:grid;gap:1.2rem}
@media (min-width:900px){.tipps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
.tipp{background:#fff;border-radius:var(--radius);padding:1.9rem 1.7rem}
.tipp svg{width:30px;height:30px;color:var(--orange-dunkel);margin-bottom:1rem}
.tipp p{margin:0;color:var(--grau)}
.prozess-kopf{margin-top:var(--abstand)}
.prozess{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;counter-reset:schritt}
@media (min-width:900px){.prozess{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prozess li{counter-increment:schritt;position:relative;background:#fff;border-radius:var(--radius);overflow:hidden}
.prozess li img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prozess li>div{padding:2.2rem 1.6rem 1.8rem;position:relative}
.prozess li>div::before{content:counter(schritt);position:absolute;top:-28px;left:1.6rem;width:56px;height:56px;border-radius:50%;background:var(--orange);color:#111;font-weight:700;font-size:1.35rem;display:grid;place-items:center;border:4px solid #fff}
.prozess p{margin:0;color:var(--grau)}

/* FAQ und Ansprechpartnerin */
.faq-raster{align-items:start}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 3rem 1.15rem 0;font-weight:600;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s,background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--orange)}
.faq details p{margin:0 0 1.2rem;color:var(--grau);max-width:40rem}
.faq-zwischen{margin:2.4rem 0 .4rem;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.ansprech{background:#111;color:#fff;border-radius:var(--radius-gross);overflow:hidden;position:sticky;top:calc(var(--kopf-hoehe) + 24px)}
.ansprech img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 18%}
.ansprech-text{padding:2rem 1.8rem 2.2rem}
.ansprech h2{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.ansprech-text>p{color:rgba(255,255,255,.8)}
.ansprech-name{display:flex;flex-direction:column;margin:1.4rem 0 1rem!important}
.ansprech-name strong{font-size:1.25rem;color:#fff}
.ansprech-wege{display:flex;flex-direction:column;gap:.6rem;margin:0}
.ansprech-wege a{display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-weight:500;word-break:break-word}
.ansprech-wege svg{width:38px;height:38px;padding:9px;border-radius:50%;background:var(--orange);color:#111}
.ansprech-wege a:hover{color:var(--orange)}

/* Fuß */
.fuss{background:#111;color:rgba(255,255,255,.8);border-top:6px solid var(--orange);font-size:.98rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:var(--orange)}
.fuss-oben{display:grid;gap:2.4rem;padding-top:4rem;padding-bottom:3rem}
@media (min-width:900px){.fuss-oben{grid-template-columns:1.3fr 1fr 1fr;gap:3rem}}
.fuss-marke img{width:200px;margin-bottom:1.2rem}
.fuss-marke p{max-width:22rem}
.fuss-titel{font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--orange);margin-bottom:1rem}
.fuss .knopf{color:#111;margin-top:.4rem}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding-top:1.4rem;padding-bottom:1.6rem;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem}
.fuss-unten p{margin:0}
.stelle-datum{width:100%;order:3;color:rgba(255,255,255,.55)}

/* Stellenseite: zweispaltig, rechts klebend Ansprechpartnerin und Fakten */
.brotkrumen{padding-top:1.6rem;padding-bottom:1.4rem;font-size:.9rem;color:var(--grau)}
.brotkrumen a{color:var(--grau)}
.stelle-raster{display:grid;gap:2rem;padding-bottom:var(--abstand);grid-template-areas:"kopf" "seite" "text"}
.stelle-kopf{grid-area:kopf}
.stelle-seite{grid-area:seite;display:grid;gap:1.2rem;align-content:start}
.stelle-text{grid-area:text;max-width:46rem}
@media (min-width:1024px){
  .stelle-raster{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"kopf seite" "text seite";column-gap:4rem}
  .stelle-seite{position:sticky;top:calc(var(--kopf-hoehe) + 24px);align-self:start}
}
.stelle-bild{margin:0 0 1.6rem}
.stelle-bild img{border-radius:var(--radius-gross);width:100%;aspect-ratio:16/9;object-fit:cover}
.marken-zeile{margin-bottom:1rem}
.stelle-kopf h1{font-size:clamp(2rem,4vw,3.2rem)}
.untertitel{font-size:1.15rem;color:#333;max-width:42rem}
.stelle-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.4rem}
.karte{background:var(--creme);border-radius:var(--radius);padding:1.6rem}
.ansprech-karte{background:#111;color:#fff;text-align:left}
.ansprech-karte img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--orange);margin-bottom:1rem}
.ansprech-karte .ansprech-name{margin:0 0 1rem!important}
.ansprech-karte .ansprech-name span{color:rgba(255,255,255,.7);font-size:.95rem}
.ansprech-karte .knopf-hell{background:var(--orange);border-color:var(--orange);color:#111;width:100%}
.ansprech-karte .knopf-hell:hover{background:#fff;border-color:#fff}
.ansprech-kontakt{margin:.7rem 0 0;font-size:.95rem}
.ansprech-kontakt a{color:#fff}
.fakten{margin:0;display:grid;gap:1rem}
.fakten div{border-bottom:1px solid var(--linie);padding-bottom:.9rem}
.fakten div:last-child{border-bottom:0;padding-bottom:0}
.fakten dt{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--grau);margin-bottom:.2rem}
.fakten dd{margin:0;font-weight:500}
.fakten address{font-style:normal;margin-bottom:.5rem}
.stelle-text h2{font-size:1.45rem;margin:2.6rem 0 1rem}
.stelle-text ul{list-style:none;padding:0;margin:0 0 1rem}
.stelle-text li{position:relative;padding:.45rem 0 .45rem 1.9rem}
.stelle-text li::before{content:"";position:absolute;left:0;top:.95rem;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.benefits-liste{display:grid;gap:.1rem 1.5rem}
@media (min-width:640px){.benefits-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Bewerbungsformular */
.bewerben{margin-top:3rem;background:var(--creme);border-radius:var(--radius-gross);padding:2.2rem 1.4rem}
@media (min-width:640px){.bewerben{padding:2.8rem 2.6rem}}
.bewerben h2{margin-top:0}
.bewerbungsformular{display:grid;gap:1.1rem;margin-top:1.6rem}
.feld{display:flex;flex-direction:column;gap:.4rem}
.feld label{font-weight:600;font-size:.95rem}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea{font:inherit;font-size:1rem;padding:.9rem 1rem;border:1.5px solid #d9d3ca;border-radius:12px;background:#fff;color:#111;width:100%}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,143,13,.25)}
.feld input[type=file]{font:inherit;font-size:.95rem;padding:.8rem;border:1.5px dashed #c9c1b5;border-radius:12px;background:#fff}
.feld-reihe{display:grid;gap:1.1rem}
@media (min-width:640px){.feld-reihe{grid-template-columns:1fr 1fr}}
.feld-zustimmung label{flex-direction:row;display:flex;gap:.7rem;font-weight:400;font-size:.92rem;align-items:flex-start}
.feld-zustimmung input{margin-top:.3rem;width:20px;height:20px;accent-color:var(--orange);flex-shrink:0}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bewerbungsformular .knopf{justify-self:start}
.formular-meldung{margin:0;font-weight:500}
.formular-meldung.fehler{color:#b42318}
.formular-meldung.erfolg{color:#1b7a3d}

/* Neben- und Rechtsseiten */
.rechtstext{max-width:820px;padding-top:3.5rem;padding-bottom:var(--abstand)}
.rechtstext h1{font-size:clamp(2.2rem,4vw,3rem)}
.rechtstext h2{font-size:1.3rem;margin-top:2.4rem}
.rechtstext a{color:#111;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.meldung-seite{min-height:60vh;padding-top:5rem;padding-bottom:5rem;position:relative}
.meldung-seite h1{max-width:18ch}
.kreis-meldung{width:120px;height:120px;position:relative;display:block;margin-bottom:2rem}

/* Vorschau-Hinweisleiste (setzt der Vorschau-Ablauf) bleibt über allem */
.vorschau-hinweis{position:relative;z-index:60}
.stelle-raster>*{min-width:0}
.ansprech-karte .kicker{color:#fff}
.ansprech-karte .ansprech-name br{display:none}
.ansprech-karte .ansprech-name strong{font-size:1.2rem}
.vorschau-hinweis{background:#fff3e0;color:#111;text-align:center;font-size:.85rem;font-weight:500;padding:.5rem 16px;border-bottom:1px solid #f2c48a}

/* Galerie „Einblicke“ mit Großansicht */
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:900px){.galerie{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.galerie-bild{display:block;border-radius:var(--radius);overflow:hidden;position:relative;cursor:zoom-in}
.galerie-bild img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s}
.galerie-bild:hover img{transform:scale(1.05)}
.galerie-bild::after{content:"";position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center/20px no-repeat;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.galerie-bild:hover::after,.galerie-bild:focus-visible::after{opacity:1;transform:none}
.galerie-bild.gross{grid-column:span 2;grid-row:span 2}
.galerie-bild.versteckt{display:none}
.galerie-mehr{text-align:center;margin:2.2rem 0 0}
a[data-galerie]{cursor:zoom-in}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;padding:64px 16px 72px}
.lightbox.offen{display:flex}
.lightbox figure{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:14px;object-fit:contain;user-select:none}
.lightbox figcaption{color:rgba(255,255,255,.85);margin-top:1rem;font-size:.95rem;text-align:center}
.lightbox-zaehler{position:absolute;top:20px;left:20px;color:#fff;font-weight:600;letter-spacing:.12em;font-size:.9rem}
.lightbox button{position:absolute;width:52px;height:52px;border-radius:50%;border:0;background:var(--orange);color:#111;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.lightbox button:hover{background:#fff}
.lightbox button svg{width:24px;height:24px;stroke-width:2.2}
.lightbox-zu{top:14px;right:14px}
.lightbox-zurueck{left:16px;top:50%;margin-top:-26px}
.lightbox-weiter{right:16px;top:50%;margin-top:-26px}
@media (max-width:700px){.lightbox-zurueck,.lightbox-weiter{top:auto;bottom:14px;margin-top:0}.lightbox-zurueck{left:calc(50% - 64px)}.lightbox-weiter{right:calc(50% - 64px)}}
.lightbox[data-einzeln] .lightbox-zurueck,.lightbox[data-einzeln] .lightbox-weiter,.lightbox[data-einzeln] .lightbox-zaehler{display:none}
body.lightbox-auf{overflow:hidden}

/* Ansprechpartnerin als eigener Abschnitt (AO-Reihenfolge: nach den Stellen) */
.ansprech-abschnitt{display:grid;gap:3rem;align-items:center}
@media (min-width:900px){.ansprech-abschnitt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem)}}
.ansprech-foto{margin:0;position:relative;max-width:520px}
.ansprech-foto img{border-radius:var(--radius-gross);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.kreis-ansprech{width:clamp(80px,10vw,130px);height:clamp(80px,10vw,130px);right:-24px;bottom:-24px}
.ansprech-abschnitt .ansprech-name{display:flex;flex-direction:column;margin:1.6rem 0 1rem}
.ansprech-abschnitt .ansprech-name strong{font-size:1.35rem}
.ansprech-abschnitt .ansprech-name span{color:var(--grau)}
.ansprech-abschnitt .ansprech-wege{margin-bottom:1.8rem}
.ansprech-abschnitt .ansprech-wege a{color:#111;font-size:1.08rem}
.ansprech-abschnitt .ansprech-wege a:hover{color:var(--orange-dunkel)}

.faq-raster{align-items:start}
.faq .faq-zwischen{margin:0 0 .4rem}
.faq-rueckfrage{margin-top:2.4rem;background:#111;color:#fff;border-radius:var(--radius);padding:2rem 1.8rem}
.faq-rueckfrage h3{font-size:1.35rem}
.faq-rueckfrage p{color:rgba(255,255,255,.8)}
.flaeche-creme .benefit{border-color:transparent}
.ansprech-abschnitt .ansprech-name strong{color:#111}
@media (max-width:899px){.kreis-ansprech{right:-8px;bottom:-20px}}

/* Überschriften links mit Zusatz rechts: bringt Abwechslung in den Seitenaufbau */
.kopf-links{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:2.8rem}
.kopf-links h2{margin-bottom:0;font-size:clamp(2.1rem,4vw,3.4rem);max-width:16ch}
.kopf-links>p{margin:0;max-width:34rem}
.kopf-links .einleitung{color:var(--grau)}

/* Benefits als Bento-Raster */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:768px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-bild{grid-column:span 2}}
@media (min-width:1100px){.bento{grid-template-columns:5fr 4fr 5fr}.bento-bild{grid-column:auto}}
.bento-kachel{border-radius:var(--radius-gross);padding:2.2rem 2rem;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;text-decoration:none}
.bento-kachel svg{position:absolute;top:2rem;left:2rem;width:64px;height:64px;stroke-width:1.5}
.bento-kachel h3,.bento-kachel .h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:600;line-height:1.1;margin:0 0 .6rem;display:block}
.bento-kachel p{margin:0;font-size:1.08rem}
.bento-dunkel{background:#111;color:#fff}
.bento-dunkel svg{color:var(--orange)}
.bento-dunkel p{color:rgba(255,255,255,.78)}
.bento-dunkel::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--orange);right:-80px;top:-80px;opacity:.95}
.bento-orange{background:var(--orange);color:#111}
.bento-bild{color:#fff;padding:0}
.bento-bild picture,.bento-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bento-bild:hover img{transform:scale(1.04)}
.bento-bild::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.85) 100%);z-index:1}
.bento-bild-text{position:relative;z-index:2;padding:2.2rem 2rem;display:block}
.benefits-klein{display:grid;gap:1.6rem 2.4rem;margin-top:2.8rem;grid-template-columns:1fr}
@media (min-width:640px){.benefits-klein{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.benefits-klein{grid-template-columns:repeat(3,minmax(0,1fr))}}
.benefit-klein{display:flex;gap:1rem;align-items:flex-start;padding-top:1.4rem;border-top:1px solid var(--linie)}
.benefit-klein svg{width:46px;height:46px;padding:11px;border-radius:50%;background:var(--creme);color:var(--orange-dunkel);flex-shrink:0}
.benefit-klein h3{font-size:1.08rem;margin:.3rem 0 .25rem}
.benefit-klein p{margin:0;color:var(--grau);font-size:.98rem}

/* Hier arbeitest Du */
.standort-bilder{position:relative;padding-bottom:22%}
.standort-bilder a{display:block}
.standort-bilder .gross img{border-radius:var(--radius-gross);width:88%;aspect-ratio:7/4;object-fit:cover}
.standort-bilder .klein{position:absolute;right:0;bottom:0;width:52%}
.standort-bilder .klein img{border-radius:var(--radius);border:8px solid var(--creme);aspect-ratio:7/4;object-fit:cover}
.kreis-standort{width:clamp(60px,8vw,96px);height:clamp(60px,8vw,96px);left:-14px;bottom:8%}
.standort-adresse{margin:1.4rem 0 1.6rem}

/* Stimmen: großes Zitat, ganzer Text zum Aufklappen */
.stimmen{display:grid;gap:1.6rem}
@media (min-width:900px){.stimmen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stimme{display:flex;flex-direction:column;background:var(--creme);border-radius:var(--radius-gross);overflow:hidden;margin:0}
.stimme picture{order:0}
.stimme img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;height:auto}
.stimme-text{padding:2rem 1.8rem 1.8rem;position:relative}
.stimme-text::before{content:"";position:absolute;top:-28px;left:1.8rem;width:56px;height:56px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v1a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v1a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5z'/%3E%3C/svg%3E") center/24px no-repeat}
.stimme blockquote{margin:0;padding:0}
.stimme blockquote::before{display:none}
.stimme .zitat{font-size:clamp(1.35rem,2.1vw,1.75rem);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#111;margin:.6rem 0 1.2rem}
.stimme figcaption{display:flex;flex-direction:column}
.stimme figcaption strong{font-size:1.15rem}
.stimme figcaption span{color:var(--grau);font-size:.95rem}
.stimme-mehr{margin-top:1.2rem;border-top:1px solid var(--linie);padding-top:.9rem}
.stimme-mehr summary{cursor:pointer;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:.5rem}
.stimme-mehr summary::-webkit-details-marker{display:none}
.stimme-mehr summary::after{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--orange);font-weight:700}
.stimme-mehr[open] summary::after{content:"−"}
.stimme-mehr p{margin:1rem 0 0;color:#333}
@media (min-width:900px){.stimme:nth-child(2){grid-template-columns:none}.stimme:nth-child(2) picture{order:0}}

/* Einblenden beim Scrollen (nur wenn Bewegung erlaubt ist) */
@media (prefers-reduced-motion:no-preference){
  html.bewegung .einblenden{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
  html.bewegung .einblenden.sichtbar{opacity:1;transform:none}
}

/* Mitlaufender Knopf auf dem Handy */
.mobil-knopf{display:none}
@media (max-width:899px){
  .mobil-knopf{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;justify-content:center;align-items:center;background:var(--orange);color:#111;font-weight:600;text-decoration:none;padding:1rem;border-radius:999px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transform:translateY(140%);transition:transform .3s ease}
  .mobil-knopf.zeigen{transform:none}
  body{padding-bottom:0}
}

/* Stimmen dreispaltig: Überschrift, Rasheed, Lea. Bilder im Hochformat, damit kein Kopf angeschnitten wird */
.stimme img{aspect-ratio:4/5;object-position:50% 0%}
.stimmen-kopf h2{font-size:clamp(2.1rem,3.6vw,3.2rem)}
.stimmen-kopf .einleitung{margin:1rem 0 1.4rem}
@media (min-width:640px) and (max-width:1023px){.stimmen{grid-template-columns:repeat(2,minmax(0,1fr))}.stimmen-kopf{grid-column:span 2}}
@media (min-width:1024px){.stimmen{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.stimmen-kopf{position:sticky;top:calc(var(--kopf-hoehe) + 40px);padding-right:1rem}}
@media (max-width:639px){.stimme img{aspect-ratio:1;object-position:50% 0%}}

/* ===== Version „2026“: gläsernes Labor als Gestaltungsidee ===== */

/* Kopfzeile als schwebende Milchglas-Leiste */
.kopf{position:fixed;top:12px;left:12px;right:12px;border-radius:999px;background:rgba(17,17,17,.58);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 40px -18px rgba(0,0,0,.6);transition:background .3s,top .3s}
.kopf.gescrollt{background:rgba(17,17,17,.82)}
.kopf .kopf-zeile{height:64px;padding-left:22px;padding-right:12px;max-width:none}
.kopf .logo img{height:42px}
main{padding-top:calc(64px + 36px)}
.startseite main{padding-top:0}
[id]{scroll-margin-top:96px}
@media (max-width:1023px){
  .kopf{top:8px;left:8px;right:8px;border-radius:28px}
  .kopf .kopf-zeile{height:58px;padding-left:16px;padding-right:6px}
  .kopf .logo img{height:36px}
  .hauptnavi{position:static;top:auto;background:none;border:0;padding:0 18px 18px;grid-column:1/-1}
  .kopf-zeile{flex-wrap:wrap;height:auto!important;min-height:58px}
  .hauptnavi.offen{display:flex;width:100%}
  main{padding-top:84px}
}
.vorschau-hinweis{position:fixed;bottom:0;left:0;right:0;z-index:95;font-size:.78rem;padding:.3rem 12px}

/* Hero: dunkel, Bild im Rahmen, Glaskarte, orange Lichtkreis */
.hero{padding-top:92px;background:#0d0d0d}
.hero-licht{position:absolute;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,143,13,.55),rgba(242,143,13,0) 65%);left:-18%;top:-30%;pointer-events:none;filter:blur(10px)}
.h1-klein{display:block;font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.7);margin-bottom:.9rem}
.h1-gross{display:block;font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.05;letter-spacing:-.025em}
.wechsel{display:inline-block;color:var(--orange);transition:opacity .35s,transform .35s;white-space:nowrap}
.wechsel.raus{opacity:0;transform:translateY(.25em)}
.hero h1{font-size:inherit;margin-bottom:1.4rem}
.hero-bild{padding:0 20px}
.hero-bild picture img{border-radius:var(--radius-gross)}
.glas-karte{display:flex;align-items:center;gap:1rem;text-decoration:none;color:#fff;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.28);border-radius:22px;padding:1rem 1.1rem 1rem 1.2rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.glas-karte strong{display:block;font-size:1.15rem}
.glas-karte span span{font-size:.9rem;color:rgba(255,255,255,.82)}
.glas-punkt{width:14px;height:14px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 6px rgba(61,220,132,.25);flex-shrink:0}
.glas-pfeil{margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--orange);color:#111;display:grid;place-items:center;flex-shrink:0}
.hero-karte{position:relative;margin:-36px 16px 0;z-index:3}
@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:min(92vh,860px);padding-top:84px;align-items:center}
  .hero-text{padding:3rem 2rem 4rem max(32px,calc((100vw - 1440px) / 2 + 32px))!important}
  .hero-bild{padding:24px max(24px,calc((100vw - 1440px) / 2 + 32px)) 40px 0;align-self:stretch;display:flex}
  .hero-bild picture{flex:1;position:relative}
  .hero-bild picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
  .hero-karte{position:absolute;left:-40px;bottom:72px;margin:0;max-width:340px}
}
@media (max-width:1023px){.hero-bild img{aspect-ratio:4/3;object-fit:cover;object-position:50% 75%}}

/* Werkstück-Geschichte: horizontale Spur, auf großen Bildschirmen beim Scrollen geführt */
.werk{position:relative;padding:var(--abstand) 0}
.werk-kopf{margin-bottom:2.4rem}
.werk-kopf h2{font-size:clamp(2.1rem,4vw,3.6rem);max-width:18ch;margin:0}
.werk-spur{list-style:none;margin:0;padding:0 20px 8px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.werk-spur::-webkit-scrollbar{display:none}
.werk-schritt{flex:0 0 min(82vw,520px);scroll-snap-align:start;background:#1a1a1a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-gross);overflow:hidden}
.werk-schritt a{display:block}
.werk-schritt img{width:100%;aspect-ratio:3/2;object-fit:cover}
.werk-schritt>div{padding:1.6rem 1.6rem 1.8rem}
.werk-nr{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--orange);color:#111;font-weight:700;margin-bottom:1rem}
.werk-schritt h3{font-size:1.5rem;margin-bottom:.5rem}
.werk-schritt p{margin:0;color:rgba(255,255,255,.75)}
.werk-fortschritt{margin-top:1.6rem;height:4px}
.werk-fortschritt span{display:block;height:4px;border-radius:4px;background:var(--orange);width:0;transition:width .1s linear}
@media (min-width:768px){.werk-spur{padding-left:max(32px,calc((100vw - 1440px) / 2 + 32px));padding-right:32px}}
.werk.gefuehrt{padding:0}
.werk.gefuehrt .werk-buehne{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:70px}
.werk.gefuehrt .werk-spur{overflow:visible;scroll-snap-type:none;will-change:transform}
.werk.gefuehrt .werk-schritt{flex-basis:min(36vw,520px)}
.werk.gefuehrt .werk-schritt img{aspect-ratio:16/10}

/* Laufendes Schriftband */
.laufband{overflow:hidden;background:var(--orange);color:#111;padding:1.1rem 0;border-block:2px solid #111}
.laufband-spur{display:flex;width:max-content;animation:lauf 32s linear infinite}
.laufband span{font-size:clamp(2rem,5vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:1;padding:0 .6em;display:flex;align-items:center;gap:.6em;white-space:nowrap}
.laufband span::after{content:"";width:.45em;height:.45em;border-radius:50%;background:#111;display:inline-block;margin-left:.6em}
.laufband span:nth-child(even){color:transparent;-webkit-text-stroke:2px #111}
@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.laufband-spur{animation:none}}

/* Stellen-Finder */
.finder{max-width:980px;margin:0 auto 1.6rem;text-align:center}
.finder-frage{font-weight:600;margin-bottom:.9rem;color:#fff}
.finder-chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chip{font:inherit;font-weight:500;font-size:.98rem;padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--orange)}
.chip.aktiv{background:var(--orange);border-color:var(--orange);color:#111}
.stelle-zeile.ausgeblendet{display:none}
.finder-leer{text-align:center;color:rgba(255,255,255,.75)}

/* Großer Abschluss */
.abschluss{background:#0d0d0d;color:#fff;padding:clamp(5rem,10vw,9rem) 0;text-align:center;position:relative;overflow:hidden}
.abschluss::before{content:"";position:absolute;width:min(80vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,143,13,.45),rgba(242,143,13,0) 62%);left:50%;top:50%;transform:translate(-50%,-50%)}
.abschluss .wrap{position:relative}
.abschluss h2{font-size:clamp(3.4rem,11vw,9.5rem);line-height:.95;letter-spacing:-.04em;margin-bottom:2.4rem}
.abschluss-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.fuss{border-top:0}
.werk.flaeche-dunkel{overflow:clip}
.wechsel{display:block;white-space:nowrap}
main.rechtstext,main.meldung-seite{padding-top:calc(100px + 2.5rem)}
/* Korrektur 14.10.: Schriftband ohne Umriss-Schrift (Jost zeigt dabei Überlappungen) */
.laufband span:nth-child(even){color:#111;-webkit-text-stroke:0;font-weight:500;opacity:.85}
/* Korrektur 14.10.: Teamfoto im Kopfbereich immer vollständig (Seitenverhältnis wie das Foto) */
@media (min-width:1024px){
  .hero-bild{display:block;align-self:center;padding-top:24px;padding-bottom:24px}
  .hero-bild picture{display:block;position:relative;aspect-ratio:3/2;width:100%}
  .hero-bild picture img{object-position:50% 50%}
  .hero{min-height:0}
}
@media (max-width:1023px){.hero-bild img{aspect-ratio:3/2;object-position:50% 50%}}
/* Korrektur 14.10.: Kopfzeile wieder durchgehend schwarz, eckig, etwas größer */
.kopf,.kopf.gescrollt{top:0;left:0;right:0;border-radius:0;background:#111;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}
.kopf .kopf-zeile{height:84px;max-width:1440px;padding-left:32px;padding-right:32px}
.kopf .logo img{height:54px}
.hauptnavi a{font-size:1.02rem}
main{padding-top:84px}
.startseite main{padding-top:0}
.hero{padding-top:84px}
@media (min-width:1024px){.hero{padding-top:84px}}
main.rechtstext,main.meldung-seite{padding-top:calc(84px + 3rem)}
[id]{scroll-margin-top:100px}
@media (max-width:1023px){
  .kopf,.kopf.gescrollt{top:0;left:0;right:0;border-radius:0}
  .kopf .kopf-zeile{height:auto;min-height:70px;padding-left:20px;padding-right:12px}
  .kopf .logo img{height:44px}
  main{padding-top:70px}
  .hero{padding-top:70px}
  .hero-bild{padding-top:16px}
  main.rechtstext,main.meldung-seite{padding-top:calc(70px + 2rem)}
}

/* ===== Korrektur 14.10.: weniger „KI-Optik“, ruhiger und handwerklicher ===== */
:root{--radius:4px;--radius-gross:6px}
.knopf,.chip,.mobil-knopf,.wahl span,.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea,.feld input[type=file],.stelle-zeile .pfeil,.galerie-bild::after,.lightbox button,.marke{border-radius:3px}
.benefit:hover{box-shadow:none;transform:none}
.mobil-knopf{box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}

/* Abschnittsbezeichnung: Nummer, feine Linie, Wort (statt Punkt und gesperrter Großschrift) */
.kicker{font-size:.9rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:#555;gap:0}
.kicker::before{content:"";width:2.4rem;height:1px;border-radius:0;background:currentColor;margin-right:.8rem}
.kicker-hell{color:rgba(255,255,255,.75)}
.startseite main{counter-reset:abschnitt}
.startseite main section:not(.hero) .kicker{counter-increment:abschnitt}
.startseite main section:not(.hero) .kicker::before{content:counter(abschnitt,decimal-leading-zero);width:auto;height:auto;background:linear-gradient(currentColor,currentColor) right center/2.2rem 1px no-repeat;padding-right:3rem;margin-right:.8rem;font-weight:600;color:#111;font-variant-numeric:tabular-nums}
.startseite main section:not(.hero) .kicker-hell::before{color:#fff}
.kopf-mitte .kicker{justify-content:center}

/* Kopfbereich: Leiste statt Glaskarte */
.hero-bild picture img{border-radius:6px 6px 0 0}
.hero-leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--orange);color:#111;font-weight:600;font-size:1.05rem;padding:1rem 1.2rem;text-decoration:none;border-radius:0 0 6px 6px;transition:background .2s}
.hero-leiste:hover{background:#fff}
.hero-leiste svg{width:22px;height:22px}

/* Zahlen statt Kreise */
.werk-nr{display:block;width:auto;height:auto;background:none;color:var(--orange);font-size:2.6rem;font-weight:300;line-height:1;margin-bottom:.8rem;border-radius:0}
.prozess li>div::before{position:static;display:block;width:auto;height:auto;background:none;border:0;border-radius:0;color:var(--orange-dunkel);font-size:2.6rem;font-weight:300;line-height:1;margin-bottom:.8rem;content:counter(schritt,decimal-leading-zero)}
.prozess li>div{padding:1.6rem 1.6rem 1.8rem}
.tipps{counter-reset:tipp}
.tipp{counter-increment:tipp}
.tipp::before{content:counter(tipp,decimal-leading-zero);display:block;color:var(--orange-dunkel);font-size:2.6rem;font-weight:300;line-height:1;margin-bottom:1rem}
.benefit-klein{display:block}
.benefit-klein h3{margin-top:0}

/* Bento ohne Deko */
.bento-dunkel::after{display:none}
.bento-kachel{min-height:230px}

/* Stimmen: schlichtes Anführungszeichen */
.stimme-text::before{content:"“";position:static;display:block;width:auto;height:auto;background:none;border-radius:0;color:var(--orange);font-size:5rem;font-weight:600;line-height:.7;margin-bottom:.2rem}

/* FAQ und Kontaktwege ohne Kreise */
.faq summary::after{background-color:transparent!important;border-radius:0}
.ansprech-wege svg{width:22px;height:22px;padding:0;background:none;border-radius:0;color:var(--orange-dunkel)}
.ansprech .ansprech-wege svg{color:var(--orange)}
.ansprech-rolle{margin:1.6rem 0 0;font-size:.85rem;color:var(--grau)}
.ansprech-abschnitt .ansprech-name{margin-top:.2rem}


/* Abschluss: flache orange Fläche wie der Fuß der Hauptseite */
.abschluss{background:var(--orange);color:#111;text-align:left;padding:clamp(3rem,6vw,5rem) 0}
.abschluss::before{display:none}
.abschluss-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 3rem}
.abschluss h2{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.025em;margin:0;line-height:1.05}
.knopf-rahmen-dunkel{background:transparent;border-color:#111;color:#111}
.knopf-rahmen-dunkel:hover{background:#111;color:#fff}
.abschluss .knopf-dunkel:hover{background:#fff;border-color:#fff;color:#111}
.hero h1{font-size:clamp(2.5rem,4.6vw,4.6rem);line-height:1.04;letter-spacing:-.025em}
.hero-leiste{justify-content:flex-start}
.hero-leiste svg{margin-left:auto}
.stimme-mehr summary::after{border-radius:3px}
.knopf-dunkel{background:#111;border-color:#111;color:#fff}
.knopf-dunkel:hover{background:#fff;border-color:#fff;color:#111}

/* Arbeitsweise auf dem Handy: Pfeile, Zähler, nächste Karte deutlich angeschnitten */
.werk-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.4rem}
.werk-nav button{width:48px;height:48px;border-radius:3px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.werk-nav button:hover{background:var(--orange);border-color:var(--orange);color:#111}
.werk-nav button:disabled{opacity:.3;cursor:default;background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.werk-nav svg{width:22px;height:22px;stroke-width:2}
.werk-zaehler{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;min-width:3.5em;text-align:center}
.werk.gefuehrt .werk-nav{display:none}
.werk:not(.gefuehrt) .werk-fortschritt{display:none}
@media (max-width:1023px){.werk-schritt{flex-basis:74vw}.werk-spur{scroll-padding-left:20px}}
@media (min-width:768px) and (max-width:1023px){.werk-schritt{flex-basis:46vw}.werk-spur{scroll-padding-left:32px}}
@keyframes anstupsen{0%,100%{transform:none}40%{transform:translateX(-56px)}70%{transform:translateX(-56px)}}
.werk-spur.anstupsen .werk-schritt{animation:anstupsen 1.1s ease-in-out}
@media (prefers-reduced-motion:reduce){.werk-spur.anstupsen .werk-schritt{animation:none}}
.werk-spur{position:relative}

/* Bewerbungstipps als Merkzettel */
.tipps-raster{display:grid;gap:2rem}
@media (min-width:960px){.tipps-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5rem;align-items:start}.tipps-kopf{position:sticky;top:120px}}
.tipps-kopf h2{font-size:clamp(2.1rem,4vw,3.4rem)}
.tipps-kopf .einleitung{max-width:28rem}
.tipps-liste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(17,17,17,.18)}
.tipp-zeile{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1rem;padding:1.8rem 0;border-bottom:1px solid rgba(17,17,17,.18)}
.tipp-nr{font-size:2.6rem;font-weight:300;line-height:1;color:#b9b2a7;transition:color .25s;font-variant-numeric:tabular-nums}
.tipp-zeile:hover .tipp-nr{color:var(--orange)}
.tipp-zeile h3{font-size:1.35rem;margin:.2rem 0 .5rem}
.tipp-zeile p{margin:0;color:#444;max-width:36rem}
@media (min-width:640px){.tipp-zeile{grid-template-columns:6rem minmax(0,1fr)}.tipp-nr{font-size:3.2rem}}

/* Bewerbungsprozess als Zeitstrahl */
.prozess-bereich{margin-top:var(--abstand)}
.zeitstrahl{position:relative;--fortschritt:0}
.zeitstrahl-schritte{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem}
.schritt{position:relative;padding-left:2.4rem}
.schritt picture img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.schritt>div{padding-top:1.2rem}
.schritt-nr{font-size:.85rem;font-weight:600;color:var(--orange-dunkel);margin:0 0 .3rem;letter-spacing:.02em}
.schritt h3{font-size:1.35rem;margin:0 0 .5rem}
.schritt p:last-child{margin:0;color:#444}
.schritt-punkt{position:absolute;left:0;top:0;width:14px;height:14px;background:var(--creme);border:2px solid #111;z-index:2;transition:background .3s,border-color .3s}
.schritt.erreicht .schritt-punkt{background:var(--orange);border-color:var(--orange)}
.zeitstrahl-linie{position:absolute;left:6px;top:7px;bottom:0;width:2px;background:rgba(17,17,17,.18)}
.zeitstrahl-linie span{position:absolute;left:0;top:0;width:100%;height:calc(var(--fortschritt) * 100%);background:var(--orange)}
@media (min-width:900px){
  .zeitstrahl-schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .schritt{padding-left:0;padding-top:2.6rem}
  .zeitstrahl-linie{left:0;right:0;top:6px;bottom:auto;width:auto;height:2px}
  .zeitstrahl-linie span{height:100%;width:calc(var(--fortschritt) * 100%)}
}