/* Bewerbungsformular – Pitchback-CI: Anton/Barlow, dunkler Header, ruhige weiße Karte, große Touch-Flächen */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(anton-latin.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(barlow-400-latin.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(barlow-600-latin.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(barlow-700-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(plexmono-400-latin.woff2) format('woff2')}
@font-face{font-family:'Anton Fallback';src:local('Arial Narrow'),local('Impact');size-adjust:100%}
@font-face{font-family:'Barlow Fallback';src:local('Arial');size-adjust:92%}

:root{
  --ink:#0A0E11;--ink-2:#11181C;--text-dark:#1A2226;--muted-dark:#55666B;
  --line-l:#D5DDDF;--line-l2:#B9C6C9;--bg:#E8EDEE;
  --teal:#4FA5AD;--teal-deep:#2F7F87;--teal-soft:#EAF4F5;
  --amber:#F0A93C;--amber-deep:#D98A18;--err:#C0392B;
  --muted:#93A5AA;--line:rgba(255,255,255,.10);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text-dark);
  font-family:"Barlow","Barlow Fallback","Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--teal-deep)}

/* Header */
.topbar{background:var(--ink);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#E9EFF0;margin-right:auto}
.brand img{width:34px;height:auto;display:block}
.brand b{font-family:"Anton","Anton Fallback",sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em;line-height:1;display:block}
.brand .name span{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.34em;color:var(--teal);display:block;margin-top:3px}
.tb-tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:right}

/* Karte */
.page{flex:1;padding:32px 16px 40px}
.card{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--line-l);border-radius:4px;padding:36px 40px 40px;box-shadow:0 1px 2px rgba(10,14,17,.05)}
h1{font-family:"Anton","Anton Fallback","Arial Narrow",Impact,sans-serif;font-weight:400;font-size:clamp(27px,5.2vw,36px);line-height:1.15;letter-spacing:.005em;margin:0;color:var(--ink)}

.progress{display:flex;align-items:center;gap:14px;margin:22px 0 30px}
.bar{flex:1;height:10px;background:#E3E9EA;border-radius:5px;overflow:hidden}
.fill{height:100%;width:0;background:var(--teal);border-radius:5px;transition:width .35s ease}
.pct{flex:none;min-width:3.2em;text-align:right;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--muted-dark)}
.intro{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--muted-dark)}
#ctx{margin-bottom:28px}

/* Felder */
fieldset{border:0;margin:0;padding:0;min-width:0}
.field{margin:0 0 26px}
.lbl{display:block;font-weight:600;font-size:19px;line-height:1.4;margin:0 0 10px;padding:0;color:var(--ink)}
.req{color:var(--err);font-weight:700}
.sub{display:block;font-size:15px;color:var(--muted-dark);margin-top:6px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  display:block;width:100%;font:inherit;font-size:18px;color:var(--text-dark);background:#fff;
  border:1.5px solid var(--line-l2);border-radius:4px;padding:14px 14px;min-height:54px;
  -webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:170px;resize:vertical;line-height:1.5}
select{padding-right:44px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2355666B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
::placeholder{color:#9AA8AC;opacity:1}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal-deep);box-shadow:0 0 0 3px rgba(79,165,173,.25)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.opt{display:flex;align-items:flex-start;gap:14px;padding:15px 16px;margin:0 0 10px;border:1.5px solid var(--line-l2);border-radius:4px;cursor:pointer;line-height:1.45;transition:border-color .15s ease,background-color .15s ease}
.opt input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--teal-deep);cursor:pointer}
.opt:hover{border-color:var(--teal)}
.opt:has(input:checked){border-color:var(--teal-deep);background:var(--teal-soft)}
.opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(79,165,173,.25)}


/* Fehler */
.invalid input,.invalid select,.invalid textarea,.invalid .opt{border-color:var(--err)}
.errmsg{color:var(--err);font-size:16px;font-weight:600;margin:8px 0 0}
.formerr{color:var(--err);font-weight:600;font-size:16px;margin:0 0 16px}

/* Navigation */
.nav{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:"Barlow","Barlow Fallback",sans-serif;font-weight:700;font-size:19px;
  border:0;cursor:pointer;padding:17px 34px;min-height:58px;border-radius:2px;background:var(--amber);color:#1B1204;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transition:background-color .15s ease}
.btn:hover{background:var(--amber-deep)}
.btn:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:wait}
.back{background:none;border:0;padding:6px 0;font:inherit;font-size:17px;color:var(--muted-dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.back:hover{color:var(--ink)}

.thanks{font-size:21px;line-height:1.55;font-weight:600;margin:6px 0 0;color:var(--ink)}
.done:focus{outline:0}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.nojs{color:var(--err);font-weight:600}

/* Footer */
.foot{text-align:center;padding:22px 16px calc(28px + env(safe-area-inset-bottom,0px));font-size:15px;color:var(--muted-dark)}
.foot a{color:var(--muted-dark);margin:0 5px;text-underline-offset:3px}
.foot .sep{margin:0 6px 0 8px}

@media (max-width:560px){
  .topbar-in{padding:10px 16px}
  .brand b{font-size:18px}
  .tb-tag{font-size:10px;letter-spacing:.14em}
  .page{padding:16px 10px 28px}
  .card{padding:24px 18px 28px;border-radius:3px}
  .progress{margin:16px 0 24px}
  #ctx{margin-bottom:22px}
  .lbl{font-size:18px}
  .pair{gap:10px}
  .btn{width:100%}
  .nav{align-items:stretch}
  .back{align-self:center}
}