@import url("fonts.css");
:root{--ink:#0E1726;--gelb:#FFC72C;--papier:#F7F5F0;--grau:#5B6472;--linie:#E5E1D8;--wa:#1FA855}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.6}
a{color:inherit}
.innen{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:5;background:rgba(14,23,38,.96);backdrop-filter:blur(8px)}
header .innen{display:flex;align-items:center;justify-content:space-between;height:64px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.wort{font-family:'Space Grotesk',sans-serif;font-size:24px;letter-spacing:-.03em;line-height:1}.wort b{font-weight:700}.wort span{font-weight:500}
.sprache{display:flex;gap:4px;background:rgba(255,255,255,.1);border-radius:999px;padding:3px}
.sprache button{font:600 13px Inter,sans-serif;border:0;background:none;color:#B8C0CC;padding:6px 11px;border-radius:999px;cursor:pointer}
.sprache button[aria-pressed="true"]{background:var(--gelb);color:var(--ink)}
.held{background:var(--ink);color:#fff;padding:56px 0 64px}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.025em;line-height:1.08}
.held h1{font-size:clamp(40px,9vw,76px);font-weight:700}
.held h1 em{font-style:normal;color:var(--gelb);display:block}
.held p{color:#C9D0DA;font-size:clamp(17px,2.4vw,20px);margin:20px 0 30px;max-width:620px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gelb);color:var(--ink);border:0;font-family:inherit;cursor:pointer;transition:transform .1s ease-out,filter .15s;font-weight:600;font-size:18px;text-decoration:none;padding:16px 26px;border-radius:14px;min-height:56px}
.knopf:hover{filter:brightness(1.05)}.knopf:active{transform:scale(.98)}.knopf:focus-visible{outline:3px solid #fff;outline-offset:3px}.knopf:disabled{cursor:progress;filter:saturate(.6)}.knopf.voll{width:100%}
.hinweis{font-size:14px;color:#9AA4B2;margin-top:14px}
section{padding:64px 0;border-bottom:1px solid var(--linie)}
h2{font-size:clamp(28px,5vw,40px);margin-bottom:26px}
.schritte{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.schritt{background:var(--papier);border-radius:18px;padding:24px}
.nr{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--gelb);font:700 16px 'Space Grotesk',sans-serif;align-items:center;justify-content:center;margin-bottom:12px}
.schritt h3{font-size:20px;margin-bottom:6px}
.berufe{display:flex;flex-wrap:wrap;gap:10px}
.berufe span{background:var(--papier);border:1px solid var(--linie);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px}
.klein{font-size:14px;color:var(--grau)}
.zwei{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kasten{border:1px solid var(--linie);border-radius:18px;padding:24px}
.kasten h3{font-size:20px;margin-bottom:10px}
ul{padding-left:20px}li{margin:6px 0}
details{border-bottom:1px solid var(--linie);padding:16px 0}
summary{font-weight:600;cursor:pointer;font-size:17px}
details p{margin-top:10px;color:var(--grau)}
.schluss{background:var(--gelb);border:0}
.schluss h2{margin-bottom:10px}
footer{background:var(--ink);color:#9AA4B2;padding:36px 0;font-size:14px}
footer .innen{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between}
footer a{color:#fff}
.recht{padding:48px 0 72px}.recht h1{font-size:40px;margin-bottom:24px}.recht h2{font-size:22px;margin:30px 0 8px}.recht p{margin:8px 0}
[data-en]{display:none}
html[lang="en"] [data-de]{display:none} html[lang="en"] [data-en]{display:revert}

/* Bewerbungsformular (eine Seite, groß antippbar, Handy zuerst) */
.bewerben{background:var(--papier)}
.bewerben .unter{color:var(--grau);margin:-14px 0 22px}
.formular{display:grid;gap:16px;max-width:560px;background:#fff;border:1px solid var(--linie);border-radius:18px;padding:22px}
.reihe{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.feld{display:grid;gap:6px;min-width:0}
.feld label{font-weight:600;font-size:15px}
.feld input,.feld select{width:100%;min-height:52px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #D7D2C7;border-radius:12px;appearance:none;-webkit-appearance:none}
.feld select{background-image:linear-gradient(45deg,transparent 50%,var(--grau) 50%),linear-gradient(135deg,var(--grau) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.feld input:focus-visible,.feld select:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,199,44,.5)}
.haken{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.5;color:var(--ink);cursor:pointer}
.haken input{width:22px;height:22px;margin-top:2px;accent-color:var(--ink)}
.fehler{min-height:22px;color:#C42F62;font-weight:600;font-size:15px}
.fehler:empty{min-height:0}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.danke{max-width:560px;background:#fff;border:1px solid var(--linie);border-left:6px solid var(--gelb);border-radius:18px;padding:22px}
.danke h3{font-size:22px;margin-bottom:8px}
.danke:focus{outline:none}
.held .knopf{padding:16px 30px}
@media (prefers-reduced-motion:reduce){.knopf{transition:none}}

/* Sprachwahl oben rechts und Hinweis auf die eigene Sprache */
.sprachwahl{position:relative;display:flex;align-items:center;gap:6px;color:#fff;background:rgba(255,255,255,.1);border-radius:999px;padding:0 6px 0 12px;height:40px}
.sprachwahl select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:#fff;font:600 15px Inter,sans-serif;padding:0 22px 0 2px;height:40px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.sprachwahl select option{color:var(--ink)}
.sprachwahl:focus-within{outline:2px solid var(--gelb);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sprachhinweis{background:var(--gelb)}
.sprachhinweis .innen{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.sprachhinweis a{font-weight:700;text-decoration:none}
.sprachhinweis button{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink);width:44px;height:44px}
.berufe a{background:var(--papier);border:1px solid var(--linie);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px;text-decoration:none}
.berufe a:hover{border-color:var(--ink)}
.sprachlink{color:#fff;font-weight:600;font-size:15px;text-decoration:none}