/* ==========================================================================
   Formular + Textseiten (/kontakt/, /datenschutz/)
   Basis: tokens.css + layout.css. Diese Datei ergaenzt nur, sie ueberschreibt
   nichts aus dem Fundament.

   Alle Masse sind an bestand-inhalt/screenshots/kontakt-desktop.png gemessen
   (1920 px). Herleitung siehe docs/REPORT-inhalt.md Abschnitt 4 und 5.1.
   ========================================================================== */

:root {
  /* Gemessen am Original-Render, nicht aus dem Theme-Preset (#bbb, 3px).
     Kontrast 5,3:1 auf Weiss - erfuellt die 3:1 fuer Bedienelemente. */
  --form-border: #6b6b6b;
  /* UMZUGSPLAN A7: Original-Label ist #777771 = 4,17:1 und verfehlt AA.
     #767670 ist optisch identisch und liegt bei 4,57:1. */
  --form-label: #767670;
  --form-row-gap: 30px;
  --form-input-height: 41px;
}

/* --------------------------------------------------------------------------
   Vertikaler Rhythmus der Textseiten

   Im Original entsteht der Abstand aus WP-Spacer-Bloecken (feste px) PLUS
   dem block-gap var(--wp--preset--spacing--20) vor jedem Block. Beides wird
   hier zusammengefasst, damit die Seite auf 390 px genauso schrumpft wie
   das Original (block-gap = min(20px, 2vw)).
   -------------------------------------------------------------------------- */

.textpage {
  /* Spacer 60 px + block-gap davor + block-gap vor der H1 */
  padding-block-start: calc(2 * var(--space-20) + 60px);
  /* block-gap + Spacer 60 px + block-gap vor dem Footer */
  padding-block-end: calc(2 * var(--space-20) + 60px);
}

.textpage__title {
  text-align: center;
  /* Gemessen: 48 px / 500 / LH 1.0 auf 1920 - das ist die h2-Stufe,
     nicht die h1-Stufe des Themes. */
  font-size: var(--fs-h2);
}

/* Spacer 20 px + 2x block-gap zwischen H1 und Intro */
.textpage__lead {
  margin-block-start: calc(2 * var(--space-20) + 20px);
  text-align: center;
  font-size: var(--fs-medium);
}

/* Spacer 40 px + 2x block-gap zwischen Intro und Spaltenblock */
.textpage__body {
  margin-block-start: calc(2 * var(--space-20) + 40px);
}

/* --------------------------------------------------------------------------
   /kontakt/ - Zweispalter
   Original: wp-block-columns, flex-basis 40 % / 60 %, column-gap
   var(--wp--preset--spacing--50) = min(80px, 8vw), Umbruch bei 782 px
   (WP-Core-Regel, nicht der 600-px-Breakpoint der Site).
   Gemessen 1920: linke Spalte 216 px, rechte 324 px, Luecke 80 px.
   -------------------------------------------------------------------------- */

.kontakt-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2em var(--space-50);
}

.kontakt-cols__info,
.kontakt-cols__form {
  flex: 0 1 100%;
  min-width: 0;
}

@media (min-width: 782px) {
  .kontakt-cols {
    flex-wrap: nowrap;
  }

  .kontakt-cols__info { flex: 0 1 40%; }
  .kontakt-cols__form { flex: 0 1 60%; }
}

.kontakt-cols h3 {
  font-size: var(--fs-medium);
}

.kontakt-cols p {
  margin-block-start: var(--space-20);
}

/* A3: Telefon und E-Mail sind hier klickbar (Original: reiner Text). */
.kontakt-cols__info a {
  overflow-wrap: anywhere;
}

.address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Formular
   Reihen-Pitch gemessen: 91,4 px = Label 20,4 + Input 41 + 30 Abstand.
   -------------------------------------------------------------------------- */

.form {
  margin-block-start: var(--space-20);
}

.form__row + .form__row,
.form__actions {
  margin-block-start: var(--form-row-gap);
}

.form__label {
  display: block;
  color: var(--form-label);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1.7; /* 20,4 px - gemessen */
}

.form__required {
  color: var(--color-error);
}

.form__input,
.form__textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 16px; /* ergibt zusammen mit LH 20,8 die gemessenen 41 px */
  border: 1px solid var(--form-border);
  border-radius: var(--radius-6);
  background-color: var(--color-theme-1);
  color: var(--color-theme-5);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.3; /* 20,8 px */
}

/* Original: #8f8f8f = 3,3:1 auf Weiss. Die Platzhalter tragen hier echte
   Information (Beispielformate), deshalb A7-Variante mit 4,57:1. */
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--form-label);
  opacity: 1;
}

.form__textarea {
  min-height: 140px; /* Original: --forminator-textarea-min-height */
  resize: vertical;
}

.form__counter {
  display: block;
  margin-block-start: 4px;
  color: var(--form-label);
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
}

/* Einverstaendniserklaerung ------------------------------------------------ */

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-theme-5);
}

.form__consent-text {
  font-size: 14px;
  line-height: 20px; /* gemessener Zeilenabstand im Original */
}

.form__consent-text a {
  color: inherit;
}

/* Submit -------------------------------------------------------------------
   Original 198 x 40,3 px, #1a1a1a, radius 2 px, 14 px / 500.
   Abweichung A6: min-height 44 px statt 40,3 (Trefferflaeche).
   Unter 600 px ist der Button im Original ueber die volle Breite.
   -------------------------------------------------------------------------- */

.form__submit {
  display: inline-block;
  min-height: var(--tap-target-min);
  padding: 10px; /* Original: 198 x 40,3 px */
  border: 0;
  border-radius: var(--radius-2);
  background-color: var(--color-form-submit);
  color: var(--color-theme-1);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form__submit:hover,
.form__submit:focus-visible {
  background-color: var(--color-theme-5);
}

@media (max-width: 599px) {
  .form__submit {
    width: 100%;
  }
}

/* Honeypot -----------------------------------------------------------------
   Nicht display:none - sonst fuellen ihn viele Bots gar nicht erst aus.
   Aus dem Fluss genommen, aus der Tab-Reihenfolge, fuer AT versteckt.
   -------------------------------------------------------------------------- */

.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fortschritts- und Fehlermeldungen (nur mit JS sichtbar) ------------------ */

.form__error {
  display: block;
  margin-block-start: 4px;
  color: var(--color-error);
  font-size: 12px;
  line-height: 1.7;
}

.form__row.is-invalid .form__input,
.form__row.is-invalid .form__textarea {
  border-color: var(--color-error);
  box-shadow: inset 2px 0 0 var(--color-error); /* wie im Original */
}

.form__status {
  margin-block-start: var(--form-row-gap);
  padding: 12px 16px;
  border-radius: var(--radius-6);
  font-size: 14px;
  line-height: 1.5;
}

.form__status[hidden] {
  display: none;
}

.form__status--error {
  background-color: var(--color-error-bg);
  color: #a01010;
}

.form__status--ok {
  background-color: #e6f4ea;
  color: #0b6b2e;
}

/* ==========================================================================
   /datenschutz/ - Rechtstext
   Bewusst NICHT der zentrierte Wall des Originals: Fliesstext linksbuendig
   in der 620-px-Spalte, damit der Text lesbar bleibt. Ueberschriften folgen
   der Typo-Stufe des Themes.
   ========================================================================== */

.legal__meta {
  margin-block-start: var(--space-20);
  text-align: center;
  color: var(--form-label);
  font-size: var(--fs-small);
}

.legal__notice {
  margin-block-start: var(--space-30);
  padding: 20px 24px;
  border-radius: var(--radius-6);
  background-color: var(--color-theme-5);
  color: var(--color-theme-1);
}

.legal__notice-label {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--color-theme-3);
}

.legal__notice-text {
  margin-block-start: 6px;
  font-size: var(--fs-li);
  line-height: 1.5;
}

.legal__notice-hint {
  margin-block-start: 8px;
  font-size: var(--fs-small);
  color: var(--color-theme-3);
}

.legal__toc {
  margin-block-start: var(--space-40);
  padding-block-start: var(--space-20);
  border-block-start: 1px solid var(--form-border);
}

.legal__toc h2 {
  font-size: var(--fs-medium);
}

.legal__toc ol {
  margin: var(--space-20) 0 0;
  padding-inline-start: 1.4em;
}

.legal__toc li {
  font-size: var(--fs-small);
  line-height: 1.9;
}

.legal__section {
  margin-block-start: var(--space-40);
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.legal__section h2 {
  font-size: var(--fs-medium);
}

.legal__section h3 {
  margin-block-start: var(--space-30);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.legal__section p,
.legal__section ul {
  margin-block-start: var(--space-20);
  max-width: 62ch;
}

.legal__section ul {
  padding-inline-start: 1.2em;
}

.legal__section li {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.legal__section li + li {
  margin-block-start: 6px;
}

/* A4: Ursache des 923-px-Overflows auf 390 px waren nicht umbrechende
   URLs. tokens.css deckt nur a[href^="http"] ab - hier gilt es fuer alle
   Links des Rechtstextes (mailto:, tel:, Anker). */
.legal__section a,
.legal__toc a,
.legal__notice a {
  overflow-wrap: anywhere;
}