/* Formular (Teilservice-Gestaltung) und Mandatsseiten. */

/* --- Formularseite --- */
.flow-page { background: var(--white); }
.flow-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 40px; }
.flow-top .logo { height: 26px; width: auto; }
.flow-top a.flow-help { font: 600 14px/1 var(--display); color: var(--ink); text-decoration: none; }
.flow-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 64px); }
.flow-main { display: flex; flex-direction: column; justify-content: space-between; padding: 72px 40px 24px; }
.flow-shell { width: 100%; max-width: 400px; margin: 0 auto; }
.flow-shell h1 { font: 700 22px/1.3 var(--display); color: var(--ink); letter-spacing: -.01em; margin-bottom: 8px; }
.flow-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font: 600 12px/1 var(--display); color: var(--muted); }
.flow-progress span { flex: 1; height: 4px; border-radius: var(--r); background: #e6ebf5; overflow: hidden; }
.flow-progress span i { display: block; height: 100%; background: var(--flow); transition: width .3s; }
.flow-panel h2 { font: 600 16px/1.4 var(--display); color: var(--ink); margin: 0 0 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.field > span, .field > label, fieldset.field > legend { font: 500 13px/1.3 var(--display); color: var(--ink); padding: 0; }
.field b, legend b { color: #d92d20; font-weight: 600; margin-left: 2px; }
.field small.hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.field input, .field select, .field textarea { width: 100%; height: 40px; border: 1px solid #d0d5dd; border-radius: var(--r); padding: 0 12px; font: 400 15px/1.2 var(--body); color: var(--ink); background: var(--white); transition: border-color .15s, box-shadow .15s; }
.field textarea { height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.field select { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23344054' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 32px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--flow); box-shadow: 0 0 0 3px rgba(28, 78, 216, .14); }
.field.invalid input, .field.invalid select { border-color: #d92d20; }
.unit { position: relative; }
.unit input { padding-right: 44px; }
.unit em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; color: var(--muted); pointer-events: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: flex; align-items: center; justify-content: center; text-align: center; height: 38px; padding: 0 8px; border: 1px solid #d0d5dd; border-radius: var(--r); font: 400 14px/1.2 var(--body); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.seg input:checked + span { border-color: var(--flow); background: #eef3ff; color: var(--flow); font-weight: 600; }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(28, 78, 216, .2); }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); cursor: pointer; }
.check-line input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--flow); }
.suggest { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--white); border: 1px solid #d0d5dd; border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.suggest button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; font: 400 14px/1.35 var(--body); color: var(--ink); cursor: pointer; }
.suggest button small { display: block; color: var(--muted); font-size: 12px; }
.suggest button[aria-selected="true"], .suggest button:hover { background: #eef3ff; }
.flow-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.fbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--flow); font: 600 14px/1 var(--display); cursor: pointer; text-decoration: none; }
.fbtn-primary { background: var(--flow); color: var(--white); }
.fbtn-primary:hover { background: #1a43bd; color: var(--white); }
.fbtn-secondary { background: var(--white); color: var(--flow); }
.fbtn-secondary:hover { background: #eef3ff; }
.fbtn[disabled] { opacity: .6; cursor: progress; }
.form-error { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--r); background: #fef3f2; color: #b42318; font-size: 14px; }
.upload { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; border: 1px dashed #b8c2d6; border-radius: var(--r); text-align: center; font-size: 14px; color: var(--muted); cursor: pointer; position: relative; }
.upload strong { color: var(--flow); font-weight: 600; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload.drag { background: #eef3ff; border-color: var(--flow); }
.file-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 13px; }
.file-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--soft); border-radius: var(--r); }
.file-list button { border: 0; background: none; color: var(--flow); cursor: pointer; font-size: 13px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Ergebnis der Vorprüfung */
.result { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.result-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.result-badge { flex: none; width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; }
.result-head h3 { font: 700 var(--s-18)/1.3 var(--body); }
.result.gut .result-badge { background: var(--flow); color: var(--white); }
.result.pruefen .result-badge { background: #eef3ff; color: var(--flow); }
.result.eher_nicht .result-badge, .result.nein .result-badge { background: #e6ebf5; color: var(--navy); }
.result p { font-size: 14px; }
.result-range { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; margin: 16px 0; }
.result-range div { background: var(--soft); padding: 12px; }
.result-range b { display: block; font: 700 18px/1.25 var(--display); color: var(--navy); }
.result-range span { font-size: 12px; color: var(--muted); line-height: 1.35; display: block; margin-top: 2px; }
.result ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 6px; }
.result .result-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

.flow-trust { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.flow-trust .checks { gap: 8px; font-size: 13px; color: var(--muted); }
.flow-trust .checks svg { width: 16px; height: 16px; color: var(--flow); margin-top: 1px; }
.flow-trust strong { color: var(--ink); font-weight: 700; }
.flow-legal { display: flex; justify-content: center; gap: 16px; padding-top: 40px; font-size: 12px; }
.flow-legal a { color: var(--muted); text-decoration: none; }

.flow-aside { background: var(--flow); color: var(--white); display: flex; align-items: center; justify-content: center; padding: 64px 48px; }
.flow-aside-inner { max-width: 400px; width: 100%; }
.flow-aside h2 { font: 500 clamp(24px, 2.3vw, 29px)/1.18 var(--display); color: var(--white); letter-spacing: -.03em; margin-bottom: 28px; text-align: center; text-wrap: balance; }
.flow-aside .checks { gap: 14px; font-size: 14px; font-weight: 400; color: var(--white); }
.flow-aside .checks li, .flow-aside .checks span, .flow-aside .checks svg { color: var(--white); }
.flow-aside-rows { margin-top: 32px; border-top: 1px solid rgba(255, 255, 255, .25); }
.flow-aside-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); font-size: 14px; font-weight: 400; }
.flow-aside-rows b { font: 500 22px/1.2 var(--display); color: var(--white); white-space: nowrap; }
.flow-aside small { display: block; margin-top: 16px; font-size: 12px; font-weight: 400; color: var(--white); line-height: 1.5; }

@media (max-width: 960px) {
  .flow-top { padding: 0 var(--gutter); }
  .flow-layout { grid-template-columns: 1fr; }
  .flow-main { padding: 32px var(--gutter) 24px; }
  .flow-aside { padding: 48px var(--gutter); }
  .flow-aside h2 { font-size: 28px; }
}
@media (max-width: 420px) {
  .grid2 { grid-template-columns: 1fr; }
  .seg { grid-auto-flow: row; }
}

/* --- Mandatsseiten --- */
.mandate-page { padding: 48px 0 96px; }
.mandate-hero { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.mandate-hero h1 { font-size: var(--s-36); font-weight: 700; color: var(--navy); }
.mandate-hero p { margin-top: 14px; font-size: var(--s-18); color: var(--muted); }
.mandate-shell { max-width: 608px; margin: 0 auto; }
.mandate-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font: 600 13px/1 var(--display); color: var(--muted); }
.mandate-progress span { flex: 1; height: 4px; background: #e6ebf5; border-radius: var(--r); overflow: hidden; }
.mandate-progress i { display: block; height: 100%; background: var(--btn); }
.mandate-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 40px rgba(16, 24, 40, .06); padding: 40px; }
.mandate-state { text-align: center; padding: 24px 0; }
.mandate-state h2 { font-size: var(--s-24); margin-bottom: 12px; color: var(--ink); }
.spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid var(--brand-light); border-top-color: var(--brand); border-radius: var(--r); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mandate-intro { text-align: center; }
.mandate-intro .icon-ring { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: var(--r); background: var(--brand-light); color: var(--brand); display: grid; place-items: center; }
.mandate-intro h2 { font-size: var(--s-24); color: var(--ink); margin-bottom: 12px; }
.mandate-summary { display: flex; gap: 14px; align-items: flex-start; text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 24px 0; }
.mandate-summary .icon-ring { flex: none; width: 40px; height: 40px; margin: 0; }
.mandate-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; }
.mandate-summary dt { font-weight: 700; color: var(--ink); }
.mandate-summary dd { margin: 0; }
.mandate-steps { list-style: none; padding: 0; margin: 0 auto 28px; display: grid; gap: 14px; max-width: 420px; text-align: left; font-size: 15px; }
.mandate-steps li { display: flex; gap: 12px; align-items: center; }
.mandate-steps b { flex: none; width: 26px; height: 26px; border-radius: var(--r); background: var(--brand-light); color: var(--navy); display: grid; place-items: center; font: 700 12px/1 var(--display); }
.mbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 340px; min-height: 48px; margin: 0 auto; padding: 10px 20px; border: 0; border-radius: var(--r); background: var(--btn); color: var(--white); font: 600 var(--s-16)/1.2 var(--body); text-decoration: none; cursor: pointer; }
.mbtn small { font: 400 12px/1.3 var(--body); opacity: .9; margin-top: 2px; }
.mbtn:hover { background: var(--btn-hover); color: var(--white); }
.mbtn[disabled] { opacity: .6; cursor: progress; }
.mbtn-outline { background: var(--white); color: var(--btn-hover); border: 1px solid var(--btn); }
.mbtn-outline:hover { background: var(--brand-light); color: var(--btn-hover); }
.fineprint { margin-top: 20px; text-align: center; font-size: 12px; color: var(--muted); }
.mandate-section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.mandate-section h2 { font-size: 17px; color: var(--ink); margin-bottom: 16px; }
.mandate-card .field input { height: 44px; }
.mandate-card .field > span { font-weight: 600; font-size: 13px; }
.confirm-list { display: grid; gap: 10px; }
.confirm { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font-size: 13.5px; line-height: 1.55; cursor: pointer; transition: border-color .15s, background .15s; }
.confirm input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.confirm:has(input:checked) { border-color: #9fd3ff; background: #f6fafd; }
.confirm.invalid { border-color: #d92d20; }
.sig-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sig-wrap canvas { display: block; width: 100%; height: 160px; touch-action: none; background: var(--white); cursor: crosshair; }
.sig-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--soft); font-size: 12px; color: var(--muted); }
.sig-bar button { border: 0; background: none; color: var(--brand); font: 600 12px/1 var(--display); cursor: pointer; }
.sig-wrap.invalid { border-color: #d92d20; }
.mandate-trust { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.mandate-trust .checks { font-size: 14px; max-width: 460px; margin: 0 auto; }
.mandate-trust .checks svg { color: var(--brand); }
.done-list { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.done-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 15px; }
.done-list b.n { width: 28px; height: 28px; border-radius: var(--r); background: var(--brand-light); color: var(--navy); display: grid; place-items: center; font: 700 12px/1 var(--display); }
.done-list strong { display: block; }
.eyebrow-center { text-align: center; }
.contact-view { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; font-size: 15px; }
.contact-view button { border: 0; background: none; color: var(--brand); font: 600 14px/1 var(--display); cursor: pointer; padding: 4px 0; }

@media (max-width: 560px) {
  .mandate-page { padding: 32px 0 64px; }
  .mandate-hero h1 { font-size: var(--s-30); }
  .mandate-card { padding: 24px 18px; }
  .mandate-summary dl { grid-template-columns: 1fr; gap: 0; }
  .mandate-summary dd { margin-bottom: 6px; }
}
.fbtn { white-space: nowrap; }
@media (max-width: 420px) {
  .flow-actions .fbtn { flex: 1; padding: 0 10px; }
  .result-range b { font-size: 15px; }
}

/* Kreise bleiben Kreise */
.result-badge, .spinner, .icon-ring, .mandate-steps b, .done-list b.n { border-radius: 50%; }