/* harrypepl.com: öffentliche Formulare (Kontakt, Zugang, Beitragen). Seit 18.10.2026.
   Fehlerliste mit Sprunglinks, Pflichtfeld-Marke, Hinweise, Spamschutz ALTCHA in den Farben der Seite.
   Wird nur auf Seiten mit Formular geladen (layout.php, formular_seite()). */

.formular__hinweis { color: var(--grau); font-size: .875rem; margin: 0 0 1rem; }
.feld__hinweis { color: var(--grau); font-size: .8125rem; margin: -.1rem 0 .45rem; }
.pflicht { color: var(--akzent); font-weight: 600; margin-left: .15em; }

.fehlerliste { border: 2px solid var(--fehler); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.4rem; background: color-mix(in srgb, var(--fehler) 6%, var(--papier)); }
.fehlerliste:focus { outline: 3px solid color-mix(in srgb, var(--fehler) 45%, transparent); outline-offset: 2px; }
.fehlerliste__titel { font-weight: 600; margin: 0 0 .4rem; color: var(--fehler); }
.fehlerliste ul { margin: 0; padding-left: 1.2rem; }
.fehlerliste li { margin: .25rem 0; color: var(--fehler); }
.fehlerliste a { color: var(--fehler); text-decoration: underline; text-underline-offset: 2px; }

/* Häkchen: größere Klickfläche, Fehler deutlich sichtbar */
.formular .feld--check { padding: .45rem .55rem; margin-left: -.55rem; border-radius: var(--radius); }
.formular .feld--check input { width: 22px; height: 22px; cursor: pointer; }
.formular .feld--check label { cursor: pointer; }
.formular .feld--check.hat-fehler { outline: 2px solid var(--fehler); outline-offset: -2px; background: color-mix(in srgb, var(--fehler) 5%, transparent); }

/* Spamschutz ALTCHA: Variablen des Widgets auf die Farbwelt der Seite (hell und dunkel) */
altcha-widget {
  display: block;
  --altcha-color-base: var(--papier-2);
  --altcha-color-base-content: var(--tinte);
  --altcha-border-color: var(--linie);
  --altcha-color-neutral: var(--linie);
  --altcha-color-neutral-content: var(--grau);
  --altcha-color-primary: var(--akzent);
  --altcha-color-primary-content: var(--papier);
  --altcha-color-success: var(--akzent);
  --altcha-color-success-content: var(--papier);
  --altcha-color-error: var(--fehler);
  --altcha-color-error-content: var(--papier);
  --altcha-checkbox-border-color: var(--grau);
  --altcha-checkbox-outline-color: var(--akzent);
  --altcha-input-background-color: var(--papier);
  --altcha-spinner-color: var(--akzent);
  --altcha-border-radius: var(--radius);
  --altcha-checkbox-size: 24px;
  --altcha-max-width: 34rem;
  --altcha-shadow: none;
}
.spamschutz { margin: 1.4rem 0 1.2rem; }
.spamschutz:focus { outline: none; }
.spamschutz .altcha label { display: inline; margin: 0; font-weight: 500; font-size: .9375rem; line-height: 1.35; cursor: pointer; color: var(--tinte); }
.spamschutz .altcha-main { padding: .7rem .9rem; }
.spamschutz[data-zustand="verified"] .altcha-main { border-color: var(--akzent); }
.spamschutz.hat-fehler .altcha-main { border: 2px solid var(--fehler); }
.spamschutz__hilfe { color: var(--grau); font-size: .8125rem; margin: .45rem 0 0; max-width: 34rem; }

/* E-Mail-Adresse: Hinweis und Vorschlag unter dem Feld (Domain-Prüfung, seit 18.10.2026) */
.mailhinweis:empty { display: none; }
.mailhinweis p { margin: .45rem 0 0; font-size: .875rem; color: var(--tinte); }
.mailhinweis__warnung { color: var(--fehler) !important; }
.mailhinweis__knopf { white-space: normal; text-align: left; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; padding: .55rem .9rem; min-height: 44px; margin-top: .25rem; }

/* Zugang: Ablauf ohne Passwort und Hilfe, wenn keine Mail kommt */
.zugang__ablauf { border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: var(--radius); padding: clamp(16px, 2.5vw, 28px); margin: 0 0 2rem; background: var(--papier-2); }
.zugang__ablauf h2 { font-size: 1.45rem; margin: 0 0 .7rem; }
.zugang__schritte { margin: 0 0 .8rem; padding-left: 1.4rem; }
.zugang__schritte li { margin: .4rem 0; max-width: 46rem; }
.zugang__ablauf .klein { margin: 0; max-width: 46rem; }
.zugang__hilfe { margin-top: 1.2rem; border-top: 1px solid var(--linie); padding-top: .9rem; }
.zugang__hilfe summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.zugang__hilfe ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .9375rem; }
.zugang__hilfe li { margin: .35rem 0; }
.meldung-inline p { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.meldung-inline p:last-child { margin-bottom: 0; }