/* Kontaktseite — Formularblock, Hero-Panel, FAQ.
   Wird nur geladen, wenn die Seite den Block ketex/kontaktformular trägt
   (mu-plugin/ketex-helpers/modules/contact-block.php).
   Tokens aus global.css; keine eigenen Farbwerte. */

/* --- Formularblock --------------------------------------------------- */

.ketex-contact-form {
  background: var(--ketex-bg);
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ketex-contact-form__title {
  font-family: var(--ketex-font-title);
  font-size: var(--ketex-title-card);
  font-weight: var(--ketex-title-weight-strong);
  margin: 0 0 8px;
}

.ketex-contact-form__intro {
  color: var(--ketex-text-muted);
  margin: 0 0 20px;
}

.ketex-contact-form__field { display: block; margin-bottom: 16px; }

.ketex-contact-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--ketex-label);
  font-weight: 600;
}

.ketex-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* box-sizing explizit: das Theme hat keinen globalen border-box-Reset. Ohne die
   Zeile rechnet `width: 100%` bei input und textarea die 26 px Innenabstand und
   2 px Rahmen obendrauf — die Felder standen 28 px über die Formularkarte hinaus
   (rechter Innenabstand faktisch 5 px statt 32 px), Name und E-Mail überlappten
   im zweispaltigen Raster um 12 px, und das select — das border-box erbt — war
   als einziges Feld korrekt und dadurch sichtbar kürzer als die anderen. */
.ketex-contact-form__field input,
.ketex-contact-form__field select,
.ketex-contact-form__field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ketex-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ketex-text);
  font-family: var(--ketex-font-ui);
  font-size: 15px;
}

.ketex-contact-form__field textarea { resize: vertical; min-height: 140px; }

.ketex-contact-form__field input:focus-visible,
.ketex-contact-form__field select:focus-visible,
.ketex-contact-form__field textarea:focus-visible {
  outline: 2px solid var(--ketex-primary);
  outline-offset: 1px;
  border-color: var(--ketex-primary);
}

/* Bot-Falle: für Menschen unsichtbar, für Screenreader ausgeblendet.
   Über die Klasse, nicht per style-Attribut (Projektregel). */
.ketex-contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ketex-contact-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ketex-text-muted);
}

.ketex-contact-form__consent a { color: var(--ketex-primary); }

.ketex-contact-form__submit {
  display: inline-block;
  padding: 13px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--ketex-primary);
  color: #fff;
  font-family: var(--ketex-font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--ketex-dur-fast, 150ms) var(--ketex-ease-out, ease);
}

.ketex-contact-form__submit:hover { opacity: 0.9; }
.ketex-contact-form__submit:focus-visible { outline: 2px solid var(--ketex-dark); outline-offset: 2px; }

.ketex-contact-form__form.is-submitting .ketex-contact-form__submit { opacity: 0.6; cursor: progress; }

.ketex-contact-form__status:empty { display: none; }
.ketex-contact-form__status { margin-top: 14px; font-size: 14px; }
.ketex-contact-form__status.is-error { color: var(--ketex-secondary); }
.ketex-contact-form__status.is-success { color: var(--ketex-primary); font-weight: 600; }

/* Editor-Vorschau des Blocks. */
.ketex-contact-form__hint {
  margin: 0;
  color: var(--ketex-kicker-color);
  font-size: 13px;
  font-style: italic;
}

/* --- Hero-Panel (Block-Stil auf core/group) --------------------------- */

.wp-block-group.is-style-ketex-panel {
  background: var(--ketex-bg-warm);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 56px);
  margin-bottom: 56px;
}

.wp-block-group.is-style-ketex-panel > .wp-block-columns { gap: clamp(24px, 4vw, 56px); align-items: start; }

/* Die Panel-Überschrift trägt Seitentitel-Größe, ist aber eine h2: das h1
   gehört dem Seitentitel aus der Shell.
   Der Selektor greift bewusst nur auf direkte Spaltenkinder — als er noch
   `.is-style-ketex-panel h2` lautete, erwischte er auch die Überschrift im
   Formularblock und blies „Schreib uns" auf Seitentitel-Größe auf. */
.wp-block-group.is-style-ketex-panel > .wp-block-columns > .wp-block-column > h2 {
  font-family: var(--ketex-font-title);
  font-size: var(--ketex-title-page);
  font-weight: var(--ketex-title-weight);
  margin: 0 0 16px;
}

/* Hinweisliste in der linken Spalte — was in eine gute Anfrage gehört. */
.wp-block-group.is-style-ketex-panel .wp-block-column > .wp-block-list {
  margin: 20px 0 0;
  padding-left: 1.1rem;
  color: var(--ketex-text-muted);
}

.wp-block-group.is-style-ketex-panel .wp-block-column > .wp-block-list li { margin-bottom: 6px; }

/* --- FAQ (Block-Stil auf core/details) -------------------------------- */

.wp-block-details.is-style-ketex-faq {
  border-bottom: 1px solid var(--ketex-border);
  padding: 18px 0;
}

.wp-block-details.is-style-ketex-faq > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.wp-block-details.is-style-ketex-faq > summary::-webkit-details-marker { display: none; }

.wp-block-details.is-style-ketex-faq > summary::after {
  content: "+";
  color: var(--ketex-primary);
  font-size: 20px;
  line-height: 1;
}

.wp-block-details.is-style-ketex-faq[open] > summary::after { content: "–"; }

.wp-block-details.is-style-ketex-faq > summary:focus-visible {
  outline: 2px solid var(--ketex-primary);
  outline-offset: 2px;
}

.wp-block-details.is-style-ketex-faq p {
  margin: 12px 0 0;
  color: var(--ketex-text-muted);
  max-width: 70ch;
}

.wp-block-details.is-style-ketex-faq a { color: var(--ketex-primary); }

/* --- Mobil ------------------------------------------------------------ */

@media (max-width: 900px) {
  .ketex-contact-form__row { grid-template-columns: 1fr; gap: 0; }
}