/* DMC fix-05-forms.css  Formulare & Kontakt (Notturno di Modena).
   Ergaenzt .field/.stepper/.login-card aus components.css. Nur Tokens.
   Deckt: Aufnahmeantrag (7 Schritte), Kontaktformular, Login/Gate. */

/* ============================================================
   SEITEN-WRAPPER  (nur Artikel-Ebene zentrieren; .page tut das bereits,
   Body-Klassen NICHT beschraenken, sonst wuerde der sticky Header/Footer
   auf Container-Breite gestaucht)
   ============================================================ */
.apply-page,.contact-page,.login-page{width:100%;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
.apply-page .section,.contact-page .section{padding-block:var(--space-7) var(--space-9)}

/* ============================================================
   AUFNAHMEANTRAG  -  Layout
   ============================================================ */
.apply-grid{display:grid;gap:var(--space-8);align-items:start}
@media (min-width:1024px){.apply-grid{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--space-10)}}
.apply-main{min-width:0}
.apply-aside{min-width:0;display:flex;flex-direction:column;gap:var(--space-6)}
@media (min-width:1024px){.apply-aside{position:sticky;top:calc(var(--header-h) + var(--space-5))}}
.apply-intro{max-width:64ch;color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-relaxed);margin-bottom:var(--space-7)}

/* Seitenkarten „Ihre Vorteile" / „Lieber klassisch?" */
.apply-benefits,.apply-pdf{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-6)}
.apply-aside .section__header{max-width:none;margin-bottom:var(--space-4)}
.apply-benefits .section__header,.apply-pdf .section__header{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);line-height:var(--leading-snug)}
.apply-benefits .benefit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.apply-benefits .benefit-list li{position:relative;padding-left:var(--space-6);color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-snug)}
.apply-benefits .benefit-list li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:var(--radius-round);background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.apply-pdf p{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal);margin-bottom:var(--space-4)}
.apply-pdf .btn{margin-bottom:var(--space-4)}
.apply-pdf__addr{display:block;font-style:normal;color:var(--text-faint);font-size:var(--text-caption);line-height:var(--leading-normal)}

/* Erfolgs-Panel nach Absenden */
.apply-success{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:clamp(var(--space-7),4vw,var(--space-10));box-shadow:var(--shadow-3),var(--edge-catch);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;max-width:60ch;margin-inline:auto}
.apply-success[hidden]{display:none}
.apply-success h2{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);line-height:var(--leading-snug)}
.apply-success h2:focus{outline:none}
.apply-success h2:focus-visible{outline:2px solid var(--accent-hover);outline-offset:6px;border-radius:var(--radius-sm)}
.apply-success p{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal);max-width:52ch}
.apply-success .btn{margin-top:var(--space-2)}
.apply-success__ref{font-family:var(--font-mono);color:var(--accent-hover);font-size:var(--text-body);letter-spacing:.04em;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-5)}
.apply-success__ref:empty{display:none}

/* ============================================================
   STEPPER  (7 Schritte; forms.js schaltet .is-active <=current, .is-current ==current)
   done+aktuell = gefuellt; aktuell zusaetzlich Glow; kommend = Umriss/blass
   ============================================================ */
.stepper{margin-bottom:var(--space-7)}
.stepper[hidden]{display:none}
.stepper__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);flex:1;text-align:center;color:var(--text-faint);font-size:var(--text-caption)}
.stepper__item::before{content:"";position:absolute;top:1.05em;left:-50%;width:100%;height:1px;background:var(--hairline);z-index:0}
.stepper__item:first-child::before{display:none}
.stepper__num{position:relative;z-index:1;width:2.1em;height:2.1em;display:grid;place-items:center;border-radius:var(--radius-round);border:1px solid var(--hairline-strong);background:var(--surface);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-body);line-height:1;transition:border-color var(--dur-normal) var(--ease-standard),background-color var(--dur-normal) var(--ease-standard),color var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard)}
.stepper__label{padding-inline:.25rem;letter-spacing:.02em;line-height:1.25}
/* erledigt + aktuell: gefuellt */
.stepper__item.is-active{color:var(--text-muted)}
.stepper__item.is-active .stepper__num{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.stepper__item.is-active::before{background:var(--accent-line)}
/* aktueller Schritt: kraeftig + Glow-Ring */
.stepper__item.is-current{color:var(--text)}
.stepper__item.is-current .stepper__num{box-shadow:var(--glow-accent-soft),0 0 0 4px var(--accent-soft)}
@media (max-width:640px){
  .stepper__label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .stepper__num{width:1.9em;height:1.9em;font-size:var(--text-caption)}
  .stepper__item::before{top:.95em}
}

/* ============================================================
   FORMULAR  -  Schritte & Felder
   ============================================================ */
.antrag-form{display:flex;flex-direction:column;gap:var(--space-6)}
.antrag-form[hidden]{display:none}
.form-step{display:flex;flex-direction:column;gap:var(--space-5)}
.form-step[hidden]{display:none}
.form-step__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);line-height:var(--leading-snug)}

.field-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr))}
.field-grid > .field,.field-grid > .field--choices{min-width:0}
@media (max-width:560px){.field-grid{grid-template-columns:1fr}}
/* volle Breite fuer Auswahlgruppen, Einzelfelder und Textareas */
.field-grid > .field--choices,
.field-grid > .field--single,
.field-grid > .field:has(.field__textarea),
.field-grid > .field:has(textarea){grid-column:1 / -1}
.field--single{grid-column:1 / -1}

.field__req{color:var(--accent-hover);margin-left:.15em;font-weight:600}
.field__help{font-size:var(--text-caption);color:var(--text-faint);line-height:var(--leading-snug)}

/* Textarea (Markup nutzt textarea.field__input) grosszuegig + nur vertikal groesser */
.antrag-form textarea.field__input,
.contact-form textarea.field__input,
.field__textarea{min-height:8.5em;resize:vertical;line-height:var(--leading-normal)}

/* ---- FEHLERZUSTAND (klar sichtbar) ---- */
.antrag-form .field__error,.contact-form .field__error{align-items:flex-start;line-height:var(--leading-snug)}
.antrag-form .field__error:empty,.contact-form .field__error:empty{display:none}
/* Warn-Icon vor der Meldung (tokenisierte Farbe via Mask) */
.antrag-form .field__error:not(:empty)::before,
.contact-form .field__error:not(:empty)::before{content:"";flex:none;width:1.05em;height:1.05em;margin-top:.1em;background:var(--danger);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%202a10%2010%200%201%200%200%2020a10%2010%200%201%200%200-20ZM11%207h2v8h-2zM11%2017h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%202a10%2010%200%201%200%200%2020a10%2010%200%201%200%200-20ZM11%207h2v8h-2zM11%2017h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Roter Rahmen: ueber has-error (JS, Antrag) UND ueber nicht-leere Meldung
   (Kontakt setzt kein has-error, nur die Meldung) */
.field.has-error .field__input,
.field.has-error .field__textarea,
.field.has-error .field__select,
.antrag-form .field:has(> .field__error:not(:empty)) .field__input,
.contact-form .field:has(> .field__error:not(:empty)) .field__input,
.antrag-form .field:has(> .field__error:not(:empty)) textarea,
.contact-form .field:has(> .field__error:not(:empty)) textarea{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}

/* ============================================================
   AUSWAHL-GRUPPEN  (Checkbox/Radio als Karten)
   ============================================================ */
.field--choices{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.field--choices > legend.field__label{padding:0;margin:0}
.choice-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.choice{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-4);cursor:pointer;background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--radius-md);color:var(--text);font-size:var(--text-body);line-height:var(--leading-snug);transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out-quint)}
.choice::before{content:"";flex:none;width:18px;height:18px;border-radius:var(--radius-round);border:1px solid var(--hairline-strong);background:var(--bg);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.choice:has(input[type=checkbox])::before{border-radius:var(--radius-xs)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice:hover{border-color:var(--accent-line);background:var(--surface-2)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice:has(input:checked)::before{border-color:var(--accent);box-shadow:inset 0 0 0 5px var(--accent)}
.choice:has(input:focus-visible){outline:2px solid var(--accent-hover);outline-offset:2px}
/* Fehlerzustand einer Auswahlgruppe: Legende rot markieren */
.field--choices.has-error > legend.field__label,
.field--choices:has(> .field__error:not(:empty)) > legend.field__label{color:var(--danger)}

/* ============================================================
   ZUSTIMMUNG / EINZEL-CHECKBOX  (Datenschutz)
   Eigenes Steuerelement im Systemstil (Basis .consent ist der Cookie-Banner,
   hier statisch ueberschrieben)
   ============================================================ */
.contact-form .consent,.antrag-form .consent,.form-step .consent{position:static;left:auto;bottom:auto;width:auto;transform:none;opacity:1;visibility:visible;box-shadow:none;background:none;border:0;border-radius:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;gap:var(--space-3);font-size:var(--text-body);line-height:var(--leading-snug);color:var(--text);cursor:pointer}
.contact-form .consent a,.antrag-form .consent a,.form-step .consent a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.15em}
.contact-form .consent a:hover,.antrag-form .consent a:hover,.form-step .consent a:hover{color:var(--accent)}
/* natives Kaestchen ausblenden, eigenes ueber ::before zeichnen */
.contact-form .consent input[type=checkbox],.antrag-form .consent input[type=checkbox],.form-step .consent input[type=checkbox],
.checkbox-inline input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.contact-form .consent::before,.antrag-form .consent::before,.form-step .consent::before,
.checkbox-inline::before{content:"";flex:none;width:22px;height:22px;margin-top:.05em;border:1px solid var(--hairline-strong);border-radius:var(--radius-xs);background:var(--surface);transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.contact-form .consent:hover::before,.antrag-form .consent:hover::before,.form-step .consent:hover::before,
.checkbox-inline:hover::before{border-color:var(--accent-line)}
.contact-form .consent:has(input:checked)::before,.antrag-form .consent:has(input:checked)::before,.form-step .consent:has(input:checked)::before,
.checkbox-inline:has(input:checked)::before{background:var(--accent) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012l5%205%209-10'/%3E%3C/svg%3E") center/64% no-repeat;border-color:var(--accent)}
.contact-form .consent:has(input:focus-visible)::before,.antrag-form .consent:has(input:focus-visible)::before,.form-step .consent:has(input:focus-visible)::before,
.checkbox-inline:has(input:focus-visible)::before{outline:2px solid var(--accent-hover);outline-offset:2px}
.checkbox-inline{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--text-body);color:var(--text);line-height:var(--leading-snug)}
/* Fehler: Einzel-Checkbox (Datenschutz-Pflicht) rot umranden */
.field--single.has-error .consent::before,
.field--single:has(> .field__error:not(:empty)) .consent::before{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}

/* ============================================================
   HINWEIS-BLOCK  (SEPA)
   ============================================================ */
.callout{background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal)}
.callout--sepa{border-left-color:var(--rame)}

/* ============================================================
   NAVIGATION / STATUS  (Zurueck / Weiter / Absenden)
   ============================================================ */
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--hairline)}
.form-nav [data-next],.form-nav [data-submit]{margin-left:auto}
.form-nav .btn[hidden]{display:none}
@media (max-width:560px){
  .form-nav{flex-direction:column-reverse;align-items:stretch}
  .form-nav .btn{width:100%}
  .form-nav [data-next],.form-nav [data-submit]{margin-left:0}
}
.form-status{margin-top:var(--space-3);font-size:var(--text-caption);color:var(--text-muted);line-height:var(--leading-snug)}
.form-status:empty{display:none}
.form-status--error{color:var(--danger)}
.form-status--ok,.form-status--success{color:var(--ok)}
.form-note{color:var(--text-faint);font-size:var(--text-caption);line-height:var(--leading-normal)}

/* ============================================================
   UEBERPRUEFEN  -  Zusammenfassung (dl.review__list > div.review__row > dt/dd)
   ============================================================ */
.review{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-6)}
.review__list{display:grid;grid-template-columns:fit-content(42%) 1fr;column-gap:var(--space-5);row-gap:0;margin:0}
.review__row{display:contents}
.review__key{color:var(--text-muted);font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding-block:var(--space-3);border-bottom:1px solid var(--hairline-soft);align-self:start}
.review__val{margin:0;color:var(--text);font-size:var(--text-body);padding-block:var(--space-3);border-bottom:1px solid var(--hairline-soft);align-self:start;overflow-wrap:anywhere}
.review__row:last-child .review__key,.review__row:last-child .review__val{border-bottom:0}
@media (max-width:480px){
  .review__list{grid-template-columns:1fr}
  .review__key{border-bottom:0;padding-bottom:var(--space-1)}
  .review__val{padding-top:0}
}

/* ============================================================
   HONEYPOT  (sichtbar verborgen, aber im DOM praesent)
   ============================================================ */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ============================================================
   KONTAKT  -  Layout
   ============================================================ */
.contact-grid{display:grid;gap:var(--space-8);align-items:start}
@media (min-width:1024px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10)}}
.contact-form{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.contact-form .btn{align-self:flex-start;margin-top:var(--space-2)}
@media (max-width:560px){.contact-form .btn{align-self:stretch;width:100%}}
.contact-aside{min-width:0;display:flex;flex-direction:column;gap:var(--space-8)}
.contact-aside .section__header{max-width:none;margin-bottom:var(--space-5);font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);line-height:var(--leading-snug)}

.person-grid{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.person-card__meta{font-style:normal;color:var(--text-muted);font-size:var(--text-caption);line-height:var(--leading-normal)}
.person-card__meta:empty{display:none}
.person-card__contact{min-width:0;display:flex;flex-direction:column;gap:var(--space-1);margin-top:auto;padding-top:var(--space-2)}
.person-card__contact:empty{display:none}
.person-card__contact a{color:var(--text-muted);font-size:var(--text-caption);overflow-wrap:anywhere;transition:color var(--dur-fast) var(--ease-standard)}
.person-card__contact a:hover{color:var(--accent-hover)}

.contact-address{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-6)}
.contact-address .section__header{margin-bottom:var(--space-3)}
.contact-address address{font-style:normal;color:var(--text);font-size:var(--text-body);line-height:var(--leading-normal)}
.contact-address .note{margin-top:var(--space-3);color:var(--text-faint);font-size:var(--text-caption)}

/* ============================================================
   LOGIN / MITGLIEDER-GATE  (nutzt .login-card aus components.css)
   ============================================================ */
.login-wrap{width:100%;max-width:var(--container-prose);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding-block:var(--space-4) var(--space-section)}
.login-wrap .page-hero{width:100%;text-align:center;margin-bottom:0;padding-bottom:var(--space-4)}
.login-wrap .page-hero__title{max-width:none}
.login-wrap .page-hero__lead{margin-inline:auto}
.login-wrap .login-card{width:100%}
.login-card form{display:flex;flex-direction:column;gap:var(--space-5)}
.login-card__foot{display:flex;flex-direction:column;gap:var(--space-3);align-items:center}
.login-note{color:var(--text-muted);font-size:var(--text-caption);text-align:center}
.login-note a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.15em}
.login-note a:hover{color:var(--accent)}
.field__pw{position:relative;display:flex;align-items:center}
.field__pw .field__input{width:100%;padding-right:5.5em}
.field__pw-toggle{position:absolute;right:.4em;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;min-height:34px;padding:.35em .6em;background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.02em;text-transform:uppercase;transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.field__pw-toggle:hover{color:var(--text);background:var(--surface-2)}
.field__pw-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.login-card--gate{max-width:420px;text-align:center;gap:var(--space-4)}
.login-card--gate .gate-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);color:var(--text)}
.login-card--gate .lead{margin-top:0;color:var(--text-muted);font-size:var(--text-body);max-width:none}
.login-card--gate .btn{align-self:center;margin-top:var(--space-2)}
.empty-note{color:var(--text-muted);font-size:var(--text-body);text-align:center;padding:var(--space-8) var(--space-5);line-height:var(--leading-normal)}