/* Krone Consulting – Kurzumfrage. Navy trägt, Gold akzentuiert, warmweißer Grund, Inter. */
@font-face{font-family:"Inter";src:url("inter-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("inter-semibold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("inter-bold.woff") format("woff");font-weight:700;font-display:swap}

:root{
  --navy:#2D3850; --navy-60:#727B8C; --navy-20:#D5D7DD; --navy-08:#EDEEF1;
  --gold:#E8A820; --grund:#F7F5F0; --weiss:#FFFFFF;
  --schrift:"Inter",Arial,"Helvetica Neue",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--navy);font-family:var(--schrift);font-size:17px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--navy);text-underline-offset:2px}
.kopf,main,.fuss{width:100%;max-width:680px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.kopf{padding-block:24px 8px}
.logo{display:block;width:160px;height:auto}
main{flex:1;padding-block:16px 24px}
.fuss{display:flex;gap:20px;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));font-size:.85rem}
.fuss a{color:var(--navy-60)}

h1,h2{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.75rem,5vw,2.3rem);line-height:1.15}
h2{font-size:clamp(1.3rem,3.8vw,1.6rem);line-height:1.25;font-weight:600}
p{margin:0}
form{display:grid;gap:56px}

.schritt{border:0;margin:0;padding:0;min-width:0;display:grid;gap:18px}
legend{padding:0;margin-bottom:2px;float:left;width:100%}
legend+*{clear:both}
.vorzeile{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--navy-60)}
.vorzeile::after{content:"";display:block;width:40px;height:2px;background:var(--gold);margin-top:10px}
.einleitung{font-size:1.05rem;max-width:58ch}
.eckdaten{list-style:none;margin:4px 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.95rem;color:var(--navy-60)}
.eckdaten strong{display:block;font-size:1.5rem;color:var(--navy);font-weight:700;line-height:1.2}
.dank-vorab{font-weight:600}
.hinweis{color:var(--navy-60);font-size:.95rem;margin-top:-8px}
.klein{font-size:.82rem;color:var(--navy-60);max-width:60ch}

.optionen{display:grid;gap:10px}
.option{position:relative;display:block;cursor:pointer}
.option input{position:absolute;opacity:0;width:1px;height:1px}
.option span{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;background:var(--weiss);border:1.5px solid var(--navy-20);border-radius:10px;font-weight:500;transition:border-color .15s,background-color .15s}
.option span::before{content:"";flex:none;width:22px;height:22px;border:1.5px solid var(--navy-60);border-radius:50%;background:var(--weiss) center/14px no-repeat}
.option input[type=checkbox]+span::before{border-radius:5px}
.option:hover span{border-color:var(--navy-60)}
.option input:checked+span{border-color:var(--navy);background:var(--navy-08)}
.option input:checked+span::before{border-color:var(--navy);background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23E8A820' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.option input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.option input:disabled+span{opacity:.45;cursor:not-allowed}

textarea,input[type=text]{width:100%;font:inherit;color:var(--navy);background:var(--weiss);border:1.5px solid var(--navy-20);border-radius:10px;padding:12px 14px}
textarea{min-height:110px;resize:vertical}
textarea:focus,input[type=text]:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
::placeholder{color:var(--navy-60);opacity:.8}
.feld{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.freitext{font-weight:500;color:var(--navy-60);margin-top:4px}
.optional{font-weight:400;color:var(--navy-60)}
.kontakt{display:grid;gap:14px}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--navy)}
.zustimmung input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--navy)}

.knopf{font:inherit;font-weight:600;font-size:1rem;min-height:50px;padding:12px 24px;border-radius:10px;border:1.5px solid var(--navy);background:var(--weiss);color:var(--navy);cursor:pointer;justify-self:start}
.knopf.haupt{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.knopf.haupt:hover{filter:brightness(.96)}
.knopf.leise{border-color:transparent;background:none;padding-inline:8px;color:var(--navy-60)}
.knopf:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.knopf:disabled{opacity:.5;cursor:wait}
.fehler{background:var(--weiss);border-left:3px solid var(--gold);padding:10px 14px;font-weight:600;border-radius:4px}
.danke h2{font-size:clamp(1.6rem,5vw,2rem)}
.falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Ohne JavaScript: alles untereinander, Navigation aus */
.nur-js{display:none!important}
.nur-ohne-js{display:block}
[hidden]{display:none!important}

/* Mit JavaScript: eine Frage pro Bildschirm */
.js .nur-js{display:revert!important}
.js .nur-ohne-js{display:none}
.js form{gap:0}
.js .schritt{display:none}
.js .schritt.aktiv{display:grid;animation:rein .25s ease-out}
.js .leiste{position:sticky;bottom:0;margin-top:32px;padding-block:14px calc(14px + env(safe-area-inset-bottom,0px));background:var(--grund);display:grid;gap:12px}
.js .leiste[hidden]{display:none!important}
.fortschritt{height:4px;background:var(--navy-20);border-radius:2px;overflow:hidden}
.fortschritt i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease}
.leiste-knoepfe{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zaehler{font-size:.85rem;color:var(--navy-60);font-variant-numeric:tabular-nums}
@keyframes rein{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .schritt.aktiv{animation:none}.fortschritt i,.option span{transition:none}}
@media (max-width:420px){body{font-size:16px}.option span{min-height:52px}}