/* /anfrage/ and /en/inquiry/: the four-step inquiry form. The page stays ink; the form sits on a white panel with
   the Weftery corner, so errors (crimson) and focus (ink) have contrast. Neon only for the one action and the
   checked tiles (both on ink). Steps are hidden only under .is-stepper, which inquiry.js sets once it runs:
   without it all four steps stand one below the other. */

.af-page{gap:40px}
.af{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
@media (min-width:1024px){.af{grid-template-columns:minmax(0,760px) minmax(220px,280px);gap:48px}}
@media (min-width:1280px){.af{grid-template-columns:minmax(0,760px) minmax(260px,380px);gap:96px}}
.af [hidden]{display:none!important}

/* ---------- panel: white surface, corner drawn on a background layer so focus rings are never clipped ---------- */
.af-panel{position:relative;isolation:isolate;min-width:0;padding:28px 20px 32px;color:var(--ink);--focus:var(--ink);--tone-fg:var(--ink)}
.af-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
@media (min-width:640px){.af-panel{padding:40px 40px 44px}}
.af-form{position:relative;display:flex;flex-direction:column}
.af-form a{text-decoration:underline;text-underline-offset:3px}
.af-form fieldset{min-width:0}
[tabindex="-1"]:focus{outline:none}

.af-topic{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:2px 12px;margin-bottom:24px;border:1px solid var(--ink);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;scroll-margin-top:96px}

/* ---------- progress: count chip and four segments (done ink, current moss, open Nebel with an ink edge) ---------- */
.af-progress{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;scroll-margin-top:96px}
.af-segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.af-seg{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;min-height:44px;padding:0 0 6px;text-align:left;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--mid);cursor:default}
.af-seg i{display:block;height:6px;background:var(--grey);box-shadow:inset 0 0 0 1px var(--ink)}
.af-seg b{font-weight:700}
.af-seg-name{display:none}
@media (min-width:480px){.af-seg-name{display:inline}}
.af-segs li[data-state="done"] .af-seg{color:var(--ink);cursor:pointer}
.af-segs li[data-state="done"] .af-seg i{background:var(--ink)}
.af-segs li[data-state="done"] .af-seg:hover span{text-decoration:underline;text-underline-offset:3px}
.af-segs li[aria-current="step"] .af-seg{color:var(--moss);font-weight:700}
.af-segs li[aria-current="step"] .af-seg i{background:var(--moss);box-shadow:none}

/* ---------- steps and questions ---------- */
.step{display:flex;flex-direction:column;gap:36px}
.step+.step{margin-top:56px;padding-top:40px;border-top:1px dashed var(--mid)}
.is-stepper .step{display:none}
.is-stepper .step.is-active{display:flex;margin-top:0;padding-top:0;border-top:0;animation:afIn .16s var(--ease)}
@keyframes afIn{from{opacity:0;transform:translateY(6px)}}
.step-h{display:flex;flex-direction:column;gap:10px;font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;scroll-margin-top:120px}
.step-n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--mid)}
.is-stepper .step-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.q{display:block;scroll-margin-top:110px}
.q legend,.q-l{display:block;padding:0 0 12px;font-size:15px;font-weight:600;line-height:1.4}
.q-hint{display:inline-block;margin-left:4px;font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--mid)}
.q-help{margin:-6px 0 12px;font-size:12.5px;line-height:1.5;color:var(--mid)}
.q.is-invalid{box-shadow:inset 3px 0 0 var(--crimson);padding-left:14px}
.err{margin:-4px 0 12px;font-size:13px;font-weight:600;line-height:1.4;color:var(--crimson)}
.cond{margin-top:16px}

/* Tiles: the native input covers the tile invisibly, so the whole tile is the hit area and screen reader focus
   boxes match it. Radios and checkboxes share the square marker; the hint says how many can be picked. */
.opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:480px){.opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{position:relative;display:block;min-width:0}
.opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;scroll-margin-top:140px}
.opt-box{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;height:100%;min-height:56px;padding:12px 14px 12px 44px;border:1px solid var(--mid);background:var(--paper);font-size:14px;font-weight:500;line-height:1.35;transition:background-color .15s,color .15s,border-color .15s}
.opt-box::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border:1.5px solid currentColor}
.opt-box small{font-size:12px;font-weight:400;line-height:1.4;color:var(--mid)}
.opt:hover .opt-box{border-color:var(--ink)}
.opt input:checked+.opt-box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:checked+.opt-box::before{background:var(--neon);border-color:var(--neon)}
.opt input:checked+.opt-box small{color:rgba(251,251,248,.74)}
.opt input:focus-visible+.opt-box{outline:2px solid var(--ink);outline-offset:3px}
.q.is-invalid>.opts .opt-box{border-color:var(--crimson)}

/* ---------- text fields: 16 px below 1024 px, so iOS does not zoom on focus ---------- */
.af-input{display:block;width:100%;height:48px;padding:0 12px;border:1px solid var(--mid);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.4;scroll-margin-top:140px}
textarea.af-input{height:auto;min-height:104px;padding:12px;resize:vertical;line-height:1.5}
@media (min-width:1024px){.af-input{font-size:14px}}
.af-input:hover{border-color:var(--ink)}
.af-input:focus-visible{outline-offset:2px}
.af-input[aria-invalid="true"]{border-color:var(--crimson);box-shadow:inset 0 0 0 1px var(--crimson)}
.af-input::placeholder{color:var(--mid);opacity:1}
.af-grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
@media (min-width:640px){.af-grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

.af-privacy{font-size:12.5px;line-height:1.55;color:var(--mid)}
.af-privacy a{color:var(--ink)}

/* ---------- navigation: Back (secondary) left, the one primary action right ---------- */
.af-nav{display:flex;align-items:center;gap:12px;margin-top:36px}
.af-back{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s}
.af-back:hover{background:var(--ink);color:var(--paper)}
.af-submit{--chip:var(--ink);--chip-fg:var(--neon);display:inline-flex;align-items:stretch;height:44px;margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:scale .15s}
.af-submit svg{height:44px;width:9px;flex-shrink:0;fill:var(--chip);transition:transform .2s var(--ease)}
.af-label{display:flex;align-items:center;justify-content:center;padding:0 18px;margin:0 -1px;background:var(--chip);color:var(--chip-fg);white-space:nowrap}
.af-submit:hover svg:first-child{transform:translateX(-3px)}
.af-submit:hover svg:last-child{transform:translateX(3px)}
.af-submit:active{scale:.97}
.af-submit[aria-disabled="true"]{cursor:progress;opacity:.75}
@media (max-width:479px){.af-submit{flex:1}.af-label{flex:1;padding:0 10px}}
@media (max-width:359px){.af-label{white-space:normal;text-align:center;line-height:1.2}}

.af-fail:not(:empty){display:flex;flex-direction:column;gap:6px;margin-top:20px;padding:14px 16px;border:1px solid var(--crimson);font-size:13px;font-weight:600;line-height:1.5;color:var(--crimson)}
.af-fail a{color:inherit}

/* Honeypot: off screen, never display:none (bots skip hidden fields). */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- side column on ink: what happens next ---------- */
.af-aside{display:flex;flex-direction:column;gap:28px;min-width:0}
@media (min-width:1024px){.af-aside{position:sticky;top:112px}}
/* The aside gets narrow (1024 to 1279 px), so its chips may wrap instead of sticking out. */
.af-aside .supertitle .chip{white-space:normal;padding:4px 10px;line-height:1.3}
.af-next{display:flex;flex-direction:column;gap:28px}
.af-next li{display:flex;flex-direction:column;gap:12px}
.af-next p,.af-direct{font-size:13.5px;line-height:1.6;color:rgba(251,251,248,.86)}
.af-direct{padding-top:24px;border-top:1px dashed rgba(251,251,248,.4)}
.af-direct a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

/* Forced colours: the checked state is a background colour, which the mode removes. */
@media (forced-colors:active){
  .opt input:checked+.opt-box{outline:3px solid Highlight;outline-offset:-3px}
  .opt input:checked+.opt-box::before{forced-color-adjust:none;background:Highlight}
  .af-panel::before{border:1px solid CanvasText}
}