/* Erzeugt von tools/rtl_css.py aus assets/css/kontakt.css — nicht von Hand aendern.
   Die Spiegelung fuer Seiten mit dir="rtl"; LTR-Seiten laden die Quelle. */
/* ==========================================================================
   Das Kontaktformular (tools/kontakt.py, kontakt.php, assets/js/kontakt.js)

   Die Rueckmeldung braucht kein Skript: kontakt.php leitet ohne JavaScript
   auf diese Seite mit dem Anker #kontakt-ok (usw.) zurueck, und `:target`
   zeigt genau diesen Kasten. kontakt.js setzt dieselbe Klasse `ist-an`.
   ========================================================================== */

.kontakt-status { display: none; scroll-margin-top: 6rem; }
.kontakt-status:focus { outline: none; }
.kontakt-status:target,
.kontakt-status.ist-an { display: block; }
/* Mit Skript entscheidet allein die Klasse: Der Anker bliebe sonst nach
   einer zweiten Antwort neben ihr stehen. */
html[data-kontakt-js] .kontakt-status:not(.ist-an) { display: none; }

.kontakt-form { margin-top: 1.5rem; }
.kontakt-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea {
  display: block;
  width: 100%;
  max-width: 36rem;
  font: inherit;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"] { min-height: 2.75rem; }   /* 44 px */
.kontakt-form textarea { min-height: 10rem; resize: vertical; }
.kontakt-hinweis { display: block; font-size: .85rem; color: var(--ink-3); margin-top: .25rem; }
.kontakt-einwilligung { display: flex; gap: .5rem; align-items: flex-start; }
.kontakt-einwilligung input { margin-top: .3rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.kontakt-einwilligung label { font-weight: 400; margin: 0; }
.kontakt-form button[disabled] { opacity: .6; cursor: progress; }

/* Der Honigtopf: aus dem Bild, nicht `display:none` — ein Automat erkennt
   das eine, ein Mensch sieht das Feld hier nie. */
.kontakt-falle {
  position: absolute; right: -10000px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Feedback (tools/feedback.py) — dasselbe Formular in kurz, auf der
   Startseite jedes Paares zugeklappt und auf /kontakt offen. Die Kaesten
   und Felder sind die des Kontaktformulars oben; hier steht nur, was dazu
   kommt: die Klappe, die drei Gesichter und der Abstand des Abschnitts.
   ========================================================================== */

.feedback { margin-top: 2.4rem; scroll-margin-top: 6rem; }
.feedback .kontakt-status { margin-top: 1rem; }
.feedback-klappe { margin-top: 1rem; }
.feedback-klappe > summary {
  list-style: none;
  min-height: 2.75rem;            /* 44 px: ein Ziel fuer den Finger */
}
.feedback-klappe > summary::-webkit-details-marker { display: none; }
.feedback-klappe > summary:focus-visible {
  outline: 3px solid var(--marke); outline-offset: 3px;
}
.feedback-klappe[open] > summary { margin-bottom: .25rem; }
.feedback-form { margin-top: 1rem; max-width: 36rem; }

.feedback-gesichter {
  border: 0; margin: 0 0 1rem; padding: 0; min-width: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.feedback-gesichter legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.kontakt-form .feedback-gesicht {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .35rem .9rem;
  margin: 0; font-weight: 500;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink);
  cursor: pointer;
}
/* Das Optionsfeld bleibt bedienbar und vorlesbar, nur unsichtbar: Die
   ganze Pille ist das Ziel. */
.feedback-gesicht input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.feedback-gesicht-bild { font-size: 1.35rem; line-height: 1; }
.feedback-gesicht:hover { border-color: var(--ink-3); }
.feedback-gesicht:has(input:checked) {
  border-color: var(--marke); box-shadow: inset 0 0 0 1px var(--marke);
  background: var(--bg-tief);
}
.feedback-gesicht:has(input:focus-visible) {
  outline: 3px solid var(--marke); outline-offset: 2px;
}
.feedback-form textarea { min-height: 6rem; }
.feedback-weiter { margin-top: 1rem; }