:root{
  --dsr-green:#10382C; --dsr-green-dark:#142d23; --dsr-gold:#CE9E2F; --dsr-gray:#AFABA5;
  --dsr-black:#1C1C1C; --dsr-white:#fff; --dsr-bg:#F6F5F2;
  --dsr-err:#9B2C2C; --dsr-ok:#2F6B3A; --dsr-warn:#9A6A12;
  --radius:8px; --maxw:760px;
  --font:'Libre Franklin','franklin-gothic-urw',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{font-size:16px}                /* >=16px gegen iOS-Zoom */
body{margin:0;font-family:var(--font);color:var(--dsr-black);background:var(--dsr-bg);
  line-height:1.5;-webkit-text-size-adjust:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* Header / Footer (Kanzlei-Identität, Anti-Phishing) */
.site-header{background:var(--dsr-green);color:var(--dsr-white)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px}
.brand{display:flex;flex-direction:column}
.brand__name{font-weight:500;font-size:1.05rem;letter-spacing:.02em}
.brand__sub{font-size:.78rem;color:#d7e0db}
.site-footer{margin-top:40px;padding:20px 0;border-top:1px solid var(--dsr-gray);
  color:#5b5b58;font-size:.85rem}
.lock{margin-right:4px}

/* Headings */
h1{font-size:1.6rem;font-weight:500;margin:.4em 0 .6em}
h2{font-size:1.15rem;font-weight:500;margin:.2em 0 .5em}
.gold{color:var(--dsr-gold)}            /* nur große Überschriften (Kontrastregel) */
.center{text-align:center}
.lead{font-size:1.05rem}
.muted{color:#5b5b58;font-size:.9rem}

/* Cards */
.card{background:var(--dsr-white);border:1px solid #e4e2dd;border-radius:var(--radius);
  padding:22px;margin:18px 0}
.card--note{padding:16px}
.narrow{max-width:480px;margin-left:auto;margin-right:auto}

/* Buttons (Grün; Hover = dunkleres Grün wie Start-CTA — kein Gold) */
.btn{display:inline-block;border:1px solid var(--dsr-green);background:var(--dsr-white);
  color:var(--dsr-green);font:inherit;font-size:1rem;padding:11px 18px;border-radius:var(--radius);
  cursor:pointer;text-decoration:none;min-height:48px;transition:.15s}
.btn:hover{border-color:var(--dsr-green-dark);color:var(--dsr-green-dark);background:#eef3f1}
.btn:active{background:#e3ebe7}
.btn:focus-visible{outline:2px solid var(--dsr-green);outline-offset:2px}
.btn--primary{background:var(--dsr-green);color:var(--dsr-white)}
.btn--primary:hover{background:var(--dsr-green-dark);border-color:var(--dsr-green-dark);color:var(--dsr-white)}
.btn--primary:active{background:#0d2a20}
.btn--ghost{border-color:var(--dsr-gray);color:#444}
.btn--ghost:hover{border-color:var(--dsr-green-dark);color:var(--dsr-green-dark);background:#f1f4f3}
.btn--lg{font-size:1.05rem;padding:14px 24px;width:100%;margin-top:10px}
.btn--sm{min-height:36px;padding:6px 12px;font-size:.9rem}
.btn--test{background:#fbf3dd;border-color:var(--dsr-gold);color:#7a5a10}
.btn--test:hover{background:#f3e6c3;border-color:var(--dsr-green-dark);color:#5f4a0c}

/* Flash */
.flash{padding:12px 16px;border-radius:var(--radius);margin:14px 0;font-size:.95rem}
.flash--error{background:#fbeaea;border:1px solid var(--dsr-err);color:var(--dsr-err)}
.flash--ok{background:#eaf4ec;border:1px solid var(--dsr-ok);color:var(--dsr-ok)}

/* Wizard progress — label sits ABOVE the track (never inside the 8px bar) */
.progress__text{display:block;font-size:.82rem;color:#5b5b58;margin:1rem 0 6px;font-weight:500}
.progress{position:relative;background:#e7e5e0;border-radius:99px;height:8px;margin:0 0 14px;overflow:hidden}
.progress__bar{position:absolute;left:0;top:0;bottom:0;background:var(--dsr-green);border-radius:99px;transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}}
.steps-nav{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;padding:0;margin:0 0 18px;
  font-size:.82rem;color:#5b5b58}
.steps-nav .is-current{color:var(--dsr-green);font-weight:600}
.steps-nav .is-done{color:var(--dsr-ok)}
.steps-nav a{color:inherit;text-decoration:none;display:inline-block;padding:5px 2px}
.steps-nav a:hover,.steps-nav a:focus-visible{color:var(--dsr-green);text-decoration:underline}

/* Fields */
.section{border:1px solid #e4e2dd;border-radius:var(--radius);padding:16px;margin:0 0 16px;background:#fff}
.section legend{font-weight:500;padding:0 6px;color:var(--dsr-green)}
.field{margin:0 0 16px}
.field__label{display:block;font-weight:500;margin-bottom:5px;font-size:.95rem}
.field__help{margin:5px 0 0;font-size:.82rem;color:#5b5b58}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=password],select,textarea{
  width:100%;font:inherit;font-size:1rem;padding:11px 12px;min-height:48px;
  border:1px solid var(--dsr-gray);border-radius:var(--radius);background:#fff;color:var(--dsr-black)}
textarea{min-height:84px;resize:vertical}
/* Focus: no offset ring – just a crisp darker (green) border (inset shadow = 2px, no layout shift) */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dsr-green);box-shadow:inset 0 0 0 1px var(--dsr-green)}
input:disabled,textarea:disabled{background:#f1efeb;color:#9a978f}
.radios{display:flex;gap:18px;flex-wrap:wrap}
.radios--stack{flex-direction:column;gap:8px}
.radio,.check{display:flex;align-items:center;gap:8px;font-size:.97rem;min-height:36px;cursor:pointer}
.radio input,.check input{width:20px;height:20px;min-height:0;flex:0 0 auto}
.check--unsure{font-size:.85rem;color:#6a675f;margin-top:6px}
.check--toggle{font-weight:500;margin-bottom:10px}
.check--error{color:var(--dsr-err)}
.field--bool .field__label{margin-bottom:8px}

/* === Segmented control (yes/no + short 2–3-option radios) ===================
   One pill; radios stay in the a11y tree (visually hidden, never display:none).
   Selected state = green fill + weight (not colour alone — WCAG 1.4.1).

   The pill/card look HIDES the native radio and shows the selected state only
   via :has(input:checked). So the whole enhancement is gated behind
   @supports (selector(:has(*))): a browser without :has() never hides the
   input and falls back to plain VISIBLE native radios (base .radio / .radios--
   stack), instead of a control with no visible selection at all. Gating the
   enhancement (not a `not(...)` fallback) also covers browsers that lack
   selector() in @supports, since an unknown @supports query is treated as
   false and the plain radios remain. */
.radios--card{gap:8px}

@supports (selector(:has(*))){
  .radios--seg{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;
    border:1px solid var(--dsr-gray);border-radius:var(--radius);overflow:hidden}
  .radios--seg .radio{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    line-height:1.25;min-height:48px;padding:10px 14px;gap:0;margin:0}
  .radios--seg .radio + .radio{border-left:1px solid var(--dsr-gray)}
  .radios--seg .radio input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .radios--seg .radio:has(input:checked){background:var(--dsr-green);color:#fff;font-weight:600}
  .radios--seg .radio:has(input:focus-visible){outline:2px solid var(--dsr-green);outline-offset:-2px}
  /* Hover-Vorschau nur auf NICHT gewählten Segmenten (das gewählte ist schon grün) */
  .radios--seg .radio:not(:has(input:checked)):hover{background:#eef3f1;color:var(--dsr-green-dark)}

  /* === Card radios (3 long-label options) — full-width tappable cards ======= */
  .radios--card .radio{display:flex;align-items:flex-start;min-height:48px;padding:12px 14px;margin:0;
    border:1px solid var(--dsr-gray);border-radius:var(--radius);background:#fff}
  .radios--card .radio input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .radios--card .radio:has(input:checked){border-color:var(--dsr-green);background:#eef3f1;font-weight:500}
  .radios--card .radio:has(input:focus-visible){outline:2px solid var(--dsr-green);outline-offset:2px}
  /* Hover-Vorschau nur auf NICHT gewählten Karten */
  .radios--card .radio:not(:has(input:checked)):hover{border-color:var(--dsr-green);background:#f6f9f8}
}

/* === Prefix affix (e.g. EUR) — reads as one control ========================= */
.input-affix{display:flex;align-items:stretch}
.input-affix__prefix{display:inline-flex;align-items:center;padding:0 13px;
  border:1px solid var(--dsr-gray);border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  background:#f1efeb;color:#5b5b58;font-size:.95rem;white-space:nowrap}
.input-affix input{flex:1 1 0;min-width:0;border-top-left-radius:0;border-bottom-left-radius:0}
.input-affix:focus-within .input-affix__prefix{border-color:var(--dsr-green)}

/* PLZ: signal the expected 5-digit width */
input[name$=".plz"]{max-width:8ch}

/* === Inline validation error =============================================== */
.field__error{color:var(--dsr-err);font-size:.82rem;margin:5px 0 0;font-weight:500}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--dsr-err)}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{border-color:var(--dsr-err);box-shadow:inset 0 0 0 1px var(--dsr-err)}

/* Single checkbox as a card tap-target */
.check--card{align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid #e4e2dd;
  border-radius:var(--radius);background:#fff}

/* autosave reassurance line */
.savebar__note{margin:14px 0;color:#5b5b58;font-size:.82rem}
.restore-notice{margin:0 0 14px;padding:8px 12px;background:#eaf4ec;border:1px solid var(--dsr-ok);
  border-radius:var(--radius);color:var(--dsr-ok);font-size:.85rem}
.wizard__nav{display:flex;gap:10px;flex-wrap:wrap}
.wizard__nav .btn--primary{margin-left:auto}
/* Dev-only test-data tool: compact, clearly secondary, no outline (off in production) */
.autofill{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.autofill__note{color:#6a675f;font-size:.82rem}

/* review / detail */
.review-block{background:#fff;border:1px solid #e4e2dd;border-radius:var(--radius);padding:16px;margin:14px 0}
.review-block__head{display:flex;justify-content:space-between;align-items:baseline}
.kv{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid #f0eee9}
.kv__k{flex:0 0 44%;color:#5b5b58;font-size:.9rem}
.kv__v{flex:1;font-size:.95rem}
.link{color:var(--dsr-green);text-decoration:underline;background:none;border:0;cursor:pointer;font:inherit;padding:0}
.link:hover{color:var(--dsr-gold)}
.error-text{color:var(--dsr-err);font-size:.9rem}

/* admin */
.table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid #e4e2dd}
.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid #eee}
.table th{background:#f3f1ec;font-weight:500}
.row--error{background:#fbeaea}
.detail-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.detail-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status-form{display:flex;gap:6px;align-items:center}
.status-form select{min-height:36px;width:auto}
.cols{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.col--main{flex:1 1 380px}
.col--side{flex:1 1 240px;max-width:320px}
.check-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f0eee9;font-size:.9rem}
.header-logout{margin:0}

/* badges / pills */
.badge{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:99px;background:#eee;color:#444;vertical-align:middle}
.badge--ok{background:#e3f0e6;color:var(--dsr-ok)}
.badge--warn{background:#f7ecd2;color:var(--dsr-warn)}
.badge--unsure{background:#f7ecd2;color:var(--dsr-warn);font-style:normal}
.badge--eingereicht{background:#e6eef5;color:#234e6e}
.badge--entwurf_erstellt{background:#e3f0e6;color:var(--dsr-ok)}
.badge--in_pruefung{background:#f7ecd2;color:var(--dsr-warn)}
.badge--erledigt{background:#eee;color:#555}
.badge--offen{background:#f1efeb;color:#777}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.8rem}
.pill--warn{background:#f7ecd2;color:var(--dsr-warn)}

.checklist ul{margin:.4em 0}
@media (max-width:560px){
  .kv{flex-direction:column;gap:2px}
  .kv__k{flex-basis:auto}
  .wizard__nav .btn{flex:1 1 auto}
}

/* ===== Fragebogen-Startseite (Hero) =====
   Genuinely responsive: type/spacing scale with the screen's own width via
   clamp() + container-query units (cqi). No fixed breakpoints. */
.start{container-type:inline-size;background:var(--dsr-bg);min-height:100%}
.start__strip{height:4px;background:var(--dsr-green)}
.start__area{padding:clamp(28px,4cqi,56px) clamp(28px,4cqi,56px) clamp(36px,5cqi,64px)}
.start__inner{max-width:1040px;margin:0 auto}
/* margin-top = der Lockup→Inhalt-Abstand (vorher .start__title margin-top),
   jetzt zwischen Masthead-Lockup und der Titel/Karte-Zeile */
.start__hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(28px,3.5cqi,52px);align-items:stretch;margin-top:clamp(26px,3cqi,40px)}

/* Logo lockup (live text) */
.start__lockup{display:flex;flex-direction:column;gap:3px}
.start__wordmark{font-size:clamp(18px,12px + 1.2cqi,24px);font-weight:800;color:var(--dsr-green);
  letter-spacing:-.01em;line-height:1.05}
.start__descriptor{font-size:clamp(9.5px,8px + 0.25cqi,11px);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dsr-gold)}

/* Title / intro / meta */
.start__title{font-size:clamp(26px,16px + 2.2cqi,40px);font-weight:800;line-height:1.14;
  color:var(--dsr-green);letter-spacing:-.015em;margin:0}
.start__intro{font-size:clamp(15px,12.5px + 0.6cqi,18px);line-height:1.6;color:#555;
  margin:clamp(12px,1.4cqi,18px) 0 0;max-width:42ch}
.start__intro span{white-space:nowrap}
.start__meta{font-size:clamp(13px,11.5px + 0.35cqi,15px);color:#6a6a6a;margin-top:clamp(8px,1cqi,12px)}

/* Step list (vertical, connected) */
.start__steps{margin-top:clamp(26px,3cqi,40px)}
.start__step{display:flex;gap:14px;align-items:stretch}
.start__step-rail{flex:none;display:flex;flex-direction:column;align-items:center}
.start__step-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--dsr-green);
  color:var(--dsr-white);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* flex:1 + parent align-items:stretch => connector fills the row, no gaps */
.start__step-line{width:2px;flex:1;min-height:clamp(16px,1.8cqi,26px);background:#d8d3c5}
.start__step-body{padding-top:5px;padding-bottom:clamp(16px,1.8cqi,26px)}
.start__step-title{font-size:clamp(15px,13px + 0.3cqi,16.5px);font-weight:700;color:#1f1f1f;line-height:1.25}
.start__step-sub{font-size:clamp(12.5px,11.5px + 0.25cqi,14px);color:#6a6a6a;line-height:1.4;margin-top:2px}

/* Checklist panel (right column; CTA pinned to bottom) */
.start__panel{background:var(--dsr-white);border:1px solid #ece9e2;border-radius:clamp(10px,1.2cqi,16px);
  padding:clamp(20px,2.6cqi,32px);display:flex;flex-direction:column}
.start__panel-head{font-size:clamp(15px,13px + 0.4cqi,17px);font-weight:700;color:var(--dsr-green)}
.start__panel-list{margin-top:14px;border-bottom:1px solid #eceae2}
.start__panel-row{display:flex;gap:12px;align-items:flex-start;padding:clamp(12px,1.4cqi,18px) 0;
  border-top:1px solid #eceae2}
.start__check{flex:none;color:var(--dsr-gold);font-size:clamp(15px,13px + 0.3cqi,17px);font-weight:800;line-height:1.4}
.start__row-text{font-size:clamp(14px,12.5px + 0.3cqi,15.5px);color:#333;line-height:1.45}
.start__row-note{color:#6a6a6a}
.start__helper{font-size:clamp(12.5px,11.5px + 0.25cqi,14px);line-height:1.55;color:#6a6a6a;margin:14px 0 0}
.start__spacer{flex:1;min-height:clamp(20px,2cqi,28px)}

/* CTA (the single primary action) */
.start__form{display:flex}
.start__cta{width:100%;min-height:48px;border:0;background:var(--dsr-green);color:var(--dsr-white);
  font:inherit;font-size:clamp(15px,13px + 0.4cqi,17px);font-weight:700;
  padding:clamp(14px,1.6cqi,18px) clamp(28px,3cqi,42px);border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s}
.start__cta:hover{background:var(--dsr-green-dark)}
.start__cta:focus-visible{outline:2px solid var(--dsr-gold);outline-offset:2px}
.start__cta-arrow{font-size:1.15em}

/* Footer auf der Startseite am Inhaltsraster ausrichten (statt 760px-Container):
   eigener Query-Container (volle Breite wie .start) => 4cqi == .start__area,
   .start__inner cappt auf 1040px => linke Kante bündig mit Titel/Karte. */
.start__footer{container-type:inline-size}
.start__footer-frame{padding:0 clamp(28px,4cqi,56px)}