:root {
    --bg:#0f172a;
    --card:#111827;
    --muted:#94a3b8;
    --text:#e5e7eb;
    --acc:#22c55e;
  }
  *{box-sizing:border-box}
  html,body{
    margin:0;
    font-family:system-ui,Segoe UI,Roboto,Arial;
    background:linear-gradient(180deg,#0b1022,#0f172a 30%);
    overflow-x:hidden;
  }
  header{padding:48px 24px;text-align:center;color:var(--text)}
  header h1{margin:0 0 8px;font-size:clamp(32px,15vw,52px)}
  header p{margin:0;color:var(--muted)}
  .wrap{max-width:1100px;margin:0 auto;padding:24px}
  .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  @media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.grid{grid-template-columns:1fr}}
  .card{
    background:radial-gradient(1200px 500px at 90% -10%,rgba(34,197,94,.15),transparent),var(--card);
    border:1px solid #1f2937;
    border-radius:16px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    color:var(--text);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .pill{display:inline-block;font-size:12px;color:#a7f3d0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);padding:6px 10px;border-radius:999px}
  .card h3{margin:2px 0 6px}
  .card p{margin:0;color:var(--muted)}
  .card ul{margin:10px 0 0 18px;color:var(--muted)}
  .btn{margin-top:auto;display:inline-block;background:var(--acc);color:#052e16;border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
  .panel{margin-top:24px;background:#0b1220;border:1px solid #1f2937;border-radius:16px;padding:18px;color:var(--muted)}

  /* Dialog */
  dialog{
    border:none;
    border-radius:16px;
    padding:0;
    width:clamp(520px,70vw,960px); /* Desktop breiter */
    max-width:96vw;
    background:#0b1220;
    color:var(--text);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    margin:0 auto;
    overflow-x:hidden;
  }
  dialog::backdrop{background:rgba(0,0,0,.6)}

  form{
    display:flex;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:20px;
    max-width:100%;
    word-break:break-word;
  }
  form h2{grid-column:1/-1;margin:0 0 6px}
  /* Consent-Zeile: Checkbox + Text sauber ausrichten */
label.consent{
display:flex;
align-items:flex-start;   /* Text beginnt oben bündig */
gap:10px;
line-height:1.4;
}

/* Checkbox größer + mit Akzentfarbe, ohne komische Offsets */
label.consent input[type="checkbox"]{
appearance:auto;          /* nativer Look, kompatibel */
width:20px;
height:20px;
margin:2px 0 0 0;         /* leicht nach unten, bündig mit Text */
flex:0 0 auto;
accent-color: var(--acc); /* grün */
}

/* Tastatur-Fokus sichtbar */
label.consent input[type="checkbox"]:focus-visible{
outline:2px solid var(--acc);
outline-offset:2px;
}
  input,select,textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #263143;
    border-radius:10px;
    background:#0a1426;
    color:var(--text);
    font-size:16px;
  }
  textarea{min-height:110px;resize:vertical}
  .row{grid-column:1/-1}
  .actions{
    grid-column:1/-1;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    padding:12px 20px;
    background:#0a1420;
    border-top:1px solid #1f2937;
    border-radius:0 0 16px 16px;
  }
  .danger{color:#fecaca}
  .success{color:#bbf7d0}
  small.muted{color:var(--muted)}
  .hidden{display:none!important}

  /* Wizard */
  .wizard{width:100%;max-width:none}
  .progress{height:6px;background:#0a1426;border-radius:999px;overflow:hidden;margin:0 20px;width:auto}
  .progress .bar{height:100%;background:var(--acc);transition:width .25s ease}
  .steps{padding:20px 24px;max-width:100%;overflow-x:hidden}
  .step h2{margin:0 0 10px}
  .wizard-actions{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    background:#0a1420;
    border-top:1px solid #1f2937;
    border-radius:0 0 16px 16px;
    flex-wrap:wrap;
    max-width:100%;
    overflow-x:hidden;
  }
  .wizard-actions .spacer{flex:1}
  .wizard-actions button{min-width:0;flex:0 1 auto}
  button.ghost{background:transparent;border:1px solid #263143;color:var(--text)}
  label.consent{display:flex;gap:8px;align-items:center}

  /* Basis für alle Buttons */
button {
font-family: inherit;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
padding: 10px 16px;
cursor: pointer;
border: none;
transition: background .2s ease, transform .1s ease;
}

/* Schöne kleine Animation */
button:active { transform: scale(0.97); }

/* Abbrechen = grau */
button.ghost#closeBtn {
background: #374151;
color: #e5e7eb;
}
button.ghost#closeBtn:hover {
background: #4b5563;
}

/* Zurück = dunkel */
button.ghost#prevBtn {
background: #1f2937;
color: #e5e7eb;
}
button.ghost#prevBtn:hover {
background: #374151;
}

/* Weiter + Bewerbung senden = grün */
#nextBtn,
#submitBtn {
background: var(--acc);
color: #052e16;
}
#nextBtn:hover,
#submitBtn:hover {
background: #16a34a; /* dunkleres Grün */
}

/* Akkordeon */
.accordion{
border:1px solid #1f2937;
border-radius:16px;
background:#0b1220;
color:var(--text);
margin:16px 0;
overflow:hidden;
}
.accordion summary{
display:flex; align-items:center; justify-content:space-between;
gap:12px; cursor:pointer; list-style:none; outline:none;
padding:16px 18px; font-weight:700; color:var(--text);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion .chev{ transition: transform .2s ease; opacity:.9 }
.accordion[open] .chev{ transform: rotate(180deg); }

.accordion .content{
padding:0 18px; /* animierbarer Padding-Trick */
max-height:0; overflow:hidden;
transition:max-height .25s ease, padding .25s ease;
color:var(--muted);
}
.accordion[open] .content{
padding:12px 18px 18px;
max-height:600px; /* ausreichend groß für Text */
}
  /* Mobile-Fixes */
  @media (max-width:640px){
    dialog{width:100vw;max-width:100vw;border-radius:0}
    form{grid-template-columns:1fr}
    .row{grid-column:1}
    .wizard-actions{flex-direction:column;align-items:stretch;gap:8px}
    .wizard-actions .spacer{display:none}
    .wizard-actions button{width:100%}
    .progress{margin:0 12px}
  }