[data-block="contact-form"] { display: grid; gap: var(--space-4); }
[data-block="contact-form"] form { display: grid; gap: var(--space-4); }
.block-contact-form-group,
[data-block="contact-form"] label { display: grid; gap: var(--space-1); }
.block-contact-form-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-anthrazit); }
.block-contact-form-input,
.block-contact-form-textarea,
[data-block="contact-form"] input,
[data-block="contact-form"] textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.block-contact-form-input:focus,
.block-contact-form-textarea:focus,
[data-block="contact-form"] input:focus,
[data-block="contact-form"] textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.block-contact-form-input.is-valid,
[data-block="contact-form"] input.is-valid { border-color: var(--color-accent); }
.block-contact-form-input.is-error,
[data-block="contact-form"] input.is-error,
.block-contact-form-textarea.is-error,
[data-block="contact-form"] textarea.is-error { border-color: var(--color-primary-hover); }
.block-contact-form-textarea,
[data-block="contact-form"] textarea { min-height: 120px; resize: vertical; }
/* 2026-Auffrischung: Gradient-Rand (Mask-Technik) statt Vollfarb-Left-Border,
   Akzent Violett fuer den ruhigen Hinweiskasten (Datenschutz). */
.block-contact-form-privacy,
[data-block="contact-form"] p {
  position: relative;
  font-size: var(--text-xs); color: var(--color-text-faint); background: var(--color-surface);
  border-radius: var(--radius-md); padding: var(--space-3); margin: 0;
}
.block-contact-form-privacy::before,
[data-block="contact-form"] p::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--color-secondary), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.block-contact-form-submit,
[data-block="contact-form"] button[type="submit"] {
  background: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8); font-weight: 700; font-size: var(--text-base); cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition); justify-self: start;
}
.block-contact-form-submit:hover,
[data-block="contact-form"] button[type="submit"]:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.block-contact-form-submit:active,
[data-block="contact-form"] button[type="submit"]:active { transform: translateY(0); }
.block-contact-form-submit[disabled],
[data-block="contact-form"] button[type="submit"][disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
/* 2026-Auffrischung: Gradient-Rand (Mask-Technik) statt Vollfarb-Left-Border. */
.block-contact-form-feedback,
[data-form-status] { position: relative; font-size: var(--text-sm); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.block-contact-form-feedback::before,
[data-form-status]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.block-contact-form-feedback.is-success,
[data-form-status].is-success { background: var(--color-accent-soft); color: var(--color-secondary-ink); }
.block-contact-form-feedback.is-success::before,
[data-form-status].is-success::before { background: linear-gradient(135deg, var(--color-accent), transparent 65%); }
.block-contact-form-feedback.is-error,
[data-form-status].is-error { background: var(--color-surface-warm); color: var(--color-primary-ink); }
.block-contact-form-feedback.is-error::before,
[data-form-status].is-error::before { background: linear-gradient(135deg, var(--color-primary-hover), transparent 65%); }

/* Rueckweg ohne JavaScript.
   Mit JS schreibt contact-form.js die Antwort in [data-form-status], die Seite
   wechselt nicht. Ohne JS ist der Submit ein normaler POST; mailer.php leitet
   dann per 303 auf #<formId>-gesendet bzw. #<formId>-fehler zurueck. Beide
   Meldungen liegen fertig (mit hidden-Attribut) in der Seite, :target macht
   genau die passende sichtbar.
   Spezifitaet: :target zaehlt wie eine Klasse (0,2,0) und schlaegt damit die
   UA-Regel [hidden]{display:none} (0,1,0). Faellt dieses CSS aus, bleiben beide
   Absaetze unsichtbar — nicht dauerhaft sichtbar. */
.block-contact-form-static {
  position: relative;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  /* Der 303 des Mailers springt diesen Absatz per #anker an. Ohne
     scroll-margin laege er unter der 64px hohen sticky-Kopfleiste
     (main.css .site-header.is-sticky) — die Seite wirkte "verspungen",
     die Meldung blieb unsichtbar. 6rem = Kopfleiste + Luft. */
  scroll-margin-top: 6rem;
}
.block-contact-form-static:target { display: block; }
/* Der Live-Status-Absatz ([data-form-status]) faellt unter die generische
   p-Kasten-Optik oben — auch LEER. Vor dem ersten Absenden stand so ein
   fertig dekorierter leerer Kasten unterm Knopf. :empty nimmt Polster und
   Deko weg, laesst das Element aber im Fluss (aria-live bleibt zuverlaessig,
   anders als bei display:none). */
.block-contact-form-feedback:empty,
[data-block="contact-form"] [data-form-status]:empty { padding: 0; background: none; }
.block-contact-form-feedback:empty::before,
[data-block="contact-form"] [data-form-status]:empty::before { content: none; }
.block-contact-form-static.is-success { background: var(--color-accent-soft); color: var(--color-secondary-ink); }
.block-contact-form-static.is-error { background: var(--color-surface-warm); color: var(--color-primary-ink); }

.captcha-dummy {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}


/* Breakpoint: --breakpoint-md = 767px */
@media (max-width: 767px) {
  [data-block="contact-form"] { width: 100%; max-width: 100%; }
  [data-block="contact-form"] img,
  [data-block="contact-form"] video,
  [data-block="contact-form"] iframe { max-width: 100%; height: auto; }
}


/* 2026-Auffrischung: mehr Luft zwischen Items + Öffnen-Chevron (violett, wie beim
   Akkordeon — beide sind Ausklapp-Komponenten, gleiche Akzentfarbe = ein Muster).
   BUGFIX: gap sass vorher auf [data-block="list-faq"] (Root) statt auf
   .block-list-faq-wrapper (der tatsaechliche Grid-Container mit den Items als
   direkte Kinder) — dadurch griff der Abstand nie, Border-Linien beruehrten sich. */
.block-list-faq-wrapper { display: grid; gap: var(--space-6); }
/* Gechunkte FAQ (>6 Fragen = mehrere list-faq-Bloecke): Abstand zwischen zwei
   aufeinanderfolgenden Bloecken = Item-Abstand, sonst klafft eine groessere Luecke. */
[data-block="list-faq"] + [data-block="list-faq"] { margin-top: var(--space-6); }
/* FAQ-Frage ist eine echte Ueberschrift (h4), Optik bleibt aber die des Buttons:
   h4-Wrapper vollstaendig neutralisieren, Styling traegt .block-list-faq-trigger. */
.block-list-faq-heading { margin: 0; padding: 0; font: inherit; color: inherit; }
.block-list-faq-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-bg); transition: box-shadow var(--transition);
}
.block-list-faq-item:hover { box-shadow: var(--shadow-sm); }
.block-list-faq-trigger {
  width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: var(--space-3);
  padding: var(--space-4); text-align: left; font-weight: 600; font-size: var(--text-base);
  color: var(--color-anthrazit); background: none; border: none; border-left: 3px solid transparent;
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.block-list-faq-trigger::before {
  content: "▶";
  flex-shrink: 0;
  font-size: .65em;
  color: var(--color-secondary);
  line-height: 1;
  transition: transform var(--transition-fast);
}
.block-list-faq-trigger[aria-expanded="true"] { border-left-color: var(--color-secondary); background: var(--color-secondary-pale); }
.block-list-faq-trigger[aria-expanded="true"]::before { transform: rotate(90deg); }
.block-list-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms cubic-bezier(0.16,1,0.3,1); }
.block-list-faq-panel.is-open { grid-template-rows: 1fr; }
.block-list-faq-panel > div { overflow: hidden; padding: 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65; }
.block-list-faq-panel.is-open > div { padding: var(--space-3) var(--space-4) var(--space-4); }

/* Breakpoint: --breakpoint-md = 767px */
@media (max-width: 767px) {
  [data-block="list-faq"] { width: 100%; max-width: 100%; }
  [data-block="list-faq"] img,
  [data-block="list-faq"] video,
  [data-block="list-faq"] iframe { max-width: 100%; height: auto; }
}