/* Cravanto Careers — gleiches System wie cravanto.com */
:root{
  --paper:#F1F0ED; --surf:#F7F6F3; --surf-2:#EAE9E5;
  --ink:#1B1B1A; --ink-2:#3D3D3A; --ink-3:#6D6D68; --ink-4:#9A9A94;
  --line:rgba(27,27,26,.14); --hair:rgba(27,27,26,.075);
  --accent:#77897C; --accent-d:#566A5C; --accent-w:rgba(119,137,124,.13);
  --danger:#8B3A32; --ease:cubic-bezier(.22,.9,.28,1);
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent-d); outline-offset:3px; }
.top{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem clamp(1.25rem,5vw,3rem); border-bottom:1px solid var(--hair); }
.top img{ width:8.6rem; display:block; }
.top span{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }
main{ width:min(44rem,100% - 2.5rem); margin:0 auto; padding:3.2rem 0 5rem; }
.eyebrow{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin:0; }
h1{ font-family:'Satoshi',system-ui,sans-serif; font-weight:500; letter-spacing:-.035em; line-height:1.05; font-size:clamp(2.2rem,6vw,3.4rem); margin:.8rem 0 .9rem; }
.intro{ color:var(--ink-2); margin:0 0 2.6rem; max-width:36rem; }
fieldset{ border:0; margin:0 0 2.2rem; padding:0; }
legend{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:1.2rem; letter-spacing:-.02em; padding:0; margin-bottom:1rem; display:flex; gap:.7rem; align-items:baseline; }
legend small{ font-family:'Switzer',sans-serif; font-size:.72rem; color:var(--accent-d); letter-spacing:.06em; }
.field{ margin-bottom:1.15rem; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:640px){ .row{ grid-template-columns:1fr; } }
label{ display:block; font-size:.86rem; font-weight:500; margin-bottom:.4rem; }
label .opt{ color:var(--ink-4); font-weight:400; }
.hint{ font-size:.78rem; color:var(--ink-3); margin:.35rem 0 0; }
input[type=text],input[type=email],input[type=url],input[type=number],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:var(--surf);
  border:1px solid var(--line); border-radius:10px; padding:.75rem .85rem; transition:border-color .2s, background .2s;
}
textarea{ min-height:6.5rem; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent-d); background:#fff; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips label{ margin:0; font-weight:400; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips span{ display:inline-block; padding:.5rem .9rem; border:1px solid var(--line); border-radius:999px; font-size:.88rem; cursor:pointer; background:var(--surf); transition:all .2s; }
.chips input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chips input:focus-visible + span{ outline:2px solid var(--accent-d); outline-offset:2px; }
.work{ display:grid; gap:.7rem; }
.work-item{ display:grid; grid-template-columns:1.6rem 1fr auto; gap:.6rem; align-items:center; padding:.6rem .7rem; border:1px solid var(--line); border-radius:12px; background:var(--surf); }
.work-item .n{ font-family:'Satoshi',sans-serif; font-size:.8rem; color:var(--accent-d); text-align:center; }
.work-item input[type=url]{ border:0; background:transparent; padding:.45rem .2rem; }
.work-item input[type=url]:focus{ background:transparent; }
.file-btn{ font-size:.8rem; padding:.45rem .8rem; border-radius:999px; border:1px solid var(--line); cursor:pointer; white-space:nowrap; background:var(--paper); }
.file-btn input{ display:none; }
.file-name{ grid-column:2 / 4; font-size:.78rem; color:var(--accent-d); margin-top:-.2rem; }
.check{ display:flex; gap:.6rem; align-items:flex-start; font-weight:400; font-size:.88rem; color:var(--ink-2); }
.check input{ margin-top:.25rem; accent-color:var(--ink); }
.err{ color:var(--danger); font-size:.78rem; margin:.35rem 0 0; min-height:0; }
.submit{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
button.primary{ font:inherit; font-weight:500; font-size:.95rem; border:0; border-radius:999px; padding:1rem 1.7rem; background:var(--ink); color:var(--paper); cursor:pointer; transition:background .3s, transform .3s var(--ease); }
button.primary:hover{ background:var(--accent-d); transform:translateY(-1px); }
button.primary[disabled]{ opacity:.55; cursor:progress; transform:none; }
.status{ font-size:.86rem; color:var(--ink-3); }
.progress{ height:3px; background:var(--hair); border-radius:3px; overflow:hidden; width:100%; display:none; }
.progress i{ display:block; height:100%; width:0; background:var(--accent-d); transition:width .2s; }
footer{ border-top:1px solid var(--hair); padding:1.6rem clamp(1.25rem,5vw,3rem); font-size:.78rem; color:var(--ink-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
footer a{ text-decoration:none; margin-left:1.2rem; }
.thanks{ text-align:center; padding-top:5rem; }
.thanks .id{ display:inline-block; margin-top:1rem; padding:.45rem .9rem; border-radius:999px; background:var(--accent-w); color:var(--accent-d); font-size:.85rem; letter-spacing:.04em; }

/* Karriereseite */
.nav-top{ display:flex; gap:1.4rem; align-items:center; font-size:.82rem; }
.nav-top a{ text-decoration:none; color:var(--ink-2); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2); max-width:38rem; margin:0 0 2.4rem; }
.section{ margin:3.2rem 0 0; }
.section h2{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.03em; margin:.6rem 0 1.2rem; }
.list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.list li{ padding:.95rem 0; border-bottom:1px solid var(--hair); color:var(--ink-2); display:grid; grid-template-columns:2rem 1fr; gap:.4rem; }
.list li b{ font-weight:500; color:var(--ink); }
.list .k{ font-family:'Satoshi',sans-serif; font-size:.78rem; color:var(--accent-d); padding-top:.15rem; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.card{ padding:1.3rem; border-radius:14px; background:var(--surf); border:1px solid var(--hair); }
.card h3{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:1.05rem; margin:0 0 .4rem; letter-spacing:-.01em; }
.card p{ margin:0; font-size:.9rem; color:var(--ink-3); }
@media (max-width:720px){ .cards{ grid-template-columns:1fr; } }
.roles a, .roles div{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--line); text-decoration:none; }
.roles{ border-top:1px solid var(--line); }
.roles h3{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:1.25rem; letter-spacing:-.02em; margin:0; }
.roles p{ grid-column:1 / -1; margin:0; color:var(--ink-3); font-size:.9rem; }
.roles a:hover h3{ color:var(--accent-d); }
.tag{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; padding:.4rem .75rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-3); white-space:nowrap; }
.tag.open{ background:var(--accent-w); border-color:transparent; color:var(--accent-d); }
.btn-dark{ display:inline-flex; gap:.6rem; align-items:center; padding:.95rem 1.5rem; border-radius:999px; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:500; font-size:.92rem; }
.btn-dark:hover{ background:var(--accent-d); }
.facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.facts span{ font-size:.8rem; padding:.4rem .8rem; border-radius:999px; background:var(--surf-2); color:var(--ink-2); }
.divider{ border:0; border-top:1px solid var(--line); margin:3.6rem 0 2.4rem; }
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem; margin:0 0 2rem; }
.cols h3{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin:0 0 .5rem; }
.cols ul{ margin:0; padding:0; list-style:none; }
.cols li{ padding:.5rem 0; border-top:1px solid var(--hair); color:var(--ink-2); font-size:.95rem; }
@media (max-width:560px){ .cols{ grid-template-columns:1fr; } }
.divider{ margin:3rem 0 2rem; }

/* Footer immer unten */
body{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; width:min(44rem,100% - 2.5rem); }
footer{ flex-shrink:0; }

/* Stellen-Karten */
.jobs{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.4rem; }
.job{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:2.4rem; min-height:15rem;
  padding:1.6rem; border-radius:20px; background:var(--surf); border:1px solid var(--hair); text-decoration:none; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.job::after{ content:""; position:absolute; right:-3.5rem; top:-3.5rem; width:11rem; height:11rem; border-radius:50%; border:1px solid var(--hair); box-shadow:0 0 0 2.4rem transparent, inset 0 0 0 2.4rem transparent; }
.job:hover{ transform:translateY(-4px); box-shadow:0 30px 70px rgba(27,27,26,.09); border-color:var(--line); }
.job .tag{ align-self:flex-start; }
.job h3{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:1.5rem; letter-spacing:-.03em; margin:0 0 .35rem; line-height:1.15; }
.job p{ margin:0; color:var(--ink-3); font-size:.9rem; }
.job .go{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--hair); padding-top:1rem; font-size:.86rem; font-weight:500; }
.job .go i{ font-style:normal; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--paper); transition:transform .4s var(--ease); }
.job:hover .go i{ transform:rotate(-45deg); }
.job.alt{ background:var(--accent-w); border-color:transparent; }
.job.alt .go i{ background:var(--accent-d); }
@media (max-width:640px){ .jobs{ grid-template-columns:1fr; } .job{ min-height:12rem; } }
.top{ border-bottom:0; }

/* Einheitliche Kopfzeile wie join.cravanto.com */
.top{ padding:clamp(1.15rem,2.2vw,1.7rem) clamp(1.15rem,3vw,2.25rem); }
.top img{ width:clamp(8rem,12vw,10.25rem); }
@media (max-width:620px){ .top img{ width:7.4rem; } }