/*
 * Coretica — Kasten über dem Kontaktformular für Besucher, die aus dem Brief
 * kommen. Eigene Datei, damit die Content-Security-Policy unangetastet bleibt
 * (kein style-Attribut, kein <style>-Block).
 *
 * Einbinden im <head> von index.html:
 *     <link rel="stylesheet" href="brief.css?v=1">
 *
 * Verwendet ausschließlich die Farbvariablen aus style.css. Ohne diese Datei
 * funktioniert der Kasten weiterhin — er sieht nur schmucklos aus.
 *
 * ---------------------------------------------------------------------------
 * ZWEI STELLEN, DIE NICHT NACH GESTALTUNG AUSSEHEN, ABER WELCHE SIND
 *
 * 1. [hidden] steht ausdrücklich darunter, wo ein display gesetzt ist.
 *    Ein display aus dieser Datei schlägt das display:none, das der Browser
 *    dem hidden-Merkmal mitgibt — das Element bliebe sichtbar, obwohl im
 *    Skript alles richtig steht. Genau dieser Fehler ist im Cockpit schon
 *    einmal aufgetreten. Deshalb jedes Mal beides.
 * 2. Die Übergänge hängen an prefers-reduced-motion. Wer Bewegung abbestellt
 *    hat, bekommt denselben Zustand, nur sofort.
 * ---------------------------------------------------------------------------
 */

.brief-antwort {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--line, rgba(224, 169, 109, 0.14));
  border-left: 3px solid var(--bronze, #e0a96d);
  border-radius: var(--radius, 14px);
  background: var(--surface-2, #241d18);
}

/* Eingeklappt bleibt nur noch eine Zeile stehen. Dass der Kasten dabei
   schrumpft, ist der eigentliche Zweck: die Nachricht darunter rückt sichtbar
   nach oben, und man sieht, dass die Wahl angekommen ist. */
.brief-antwort.ist-eingeklappt {
  padding: 0.7rem 1.1rem 0.75rem;
  margin-bottom: 1.2rem;
}

.brief-antwort-titel {
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--text, #f2ece4);
  line-height: 1.4;
}

.brief-antwort.ist-eingeklappt .brief-antwort-titel {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted, #a5978a);
}

.brief-antwort-hinweis {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted, #a5978a);
}

.brief-antwort-hinweis[hidden] { display: none; }

.brief-antwort-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.brief-antwort-reihe[hidden] { display: none; }

.brief-antwort-knopf {
  flex: 1 1 auto;
  min-height: 44px;                 /* Fingergröße, nicht Mausgröße */
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line, rgba(224, 169, 109, 0.28));
  border-radius: 999px;
  background: transparent;
  color: var(--text, #f2ece4);
  font: inherit;
  font-size: 0.93rem;
  cursor: pointer;
  transition: background var(--transition, 0.3s), border-color var(--transition, 0.3s),
              color var(--transition, 0.3s);
}

.brief-antwort-knopf:hover {
  border-color: var(--bronze, #e0a96d);
  background: rgba(224, 169, 109, 0.08);
}

.brief-antwort-knopf:focus-visible {
  outline: 2px solid var(--bronze, #e0a96d);
  outline-offset: 2px;
}

.brief-antwort-knopf.ist-gewaehlt {
  border-color: var(--bronze, #e0a96d);
  background: var(--bronze, #e0a96d);
  color: #17130f;                   /* dunkle Schrift auf Bronze: 8,9:1 */
  font-weight: 600;
}

/* --------------------------------------------------- Die eingeklappte Zeile */

.brief-antwort-kurz {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text, #f2ece4);
}

.brief-antwort-kurz[hidden] { display: none; }

.brief-antwort-kurz-text { font-weight: 600; }

.brief-antwort-aendern {
  min-height: 34px;
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--line, rgba(224, 169, 109, 0.28));
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted, #a5978a);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--transition, 0.3s), color var(--transition, 0.3s);
}

.brief-antwort-aendern:hover {
  border-color: var(--bronze, #e0a96d);
  color: var(--text, #f2ece4);
}

.brief-antwort-aendern:focus-visible {
  outline: 2px solid var(--bronze, #e0a96d);
  outline-offset: 2px;
}

/* ------------------------------- Das Textfeld, wenn gerade geschrieben wurde */

@keyframes brief-frisch-puls {
  0%   { box-shadow: 0 0 0 0 rgba(224, 169, 109, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(224, 169, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 169, 109, 0); }
}

.brief-frisch {
  border-color: var(--bronze, #e0a96d) !important;
  animation: brief-frisch-puls 1.4s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .brief-antwort-knopf,
  .brief-antwort-aendern { transition: none; }
  .brief-frisch { animation: none; }
}

@media (max-width: 520px) {
  .brief-antwort-knopf { flex: 1 1 100%; }
}

/* ------------------------- Wer aus einem Brief kommt, braucht keinen Umschlag
 *
 * Im Normalfall fliegt im Kontaktbereich ein Umschlag herein, klappt auf, und
 * daraus entfaltet sich das Formular. Dafuer haelt .kontakt-stage oben Platz
 * frei (auf dem Telefon 74 + 124 Pixel), der Umschlag liegt absolut darin, und
 * das Formular steht bis zum Aufklappen auf opacity 0.
 *
 * Fuer jemanden, der gerade einen QR-Code vom Papier gescannt hat, ist das
 * dreimal im Weg: der freie Platz und der Umschlag schieben das Formular einen
 * halben Bildschirm nach unten, und das Formular ist unsichtbar, solange die
 * Aufklapp-Beobachtung nicht ausgeloest hat - was ausgerechnet dann passieren
 * kann, wenn die Seite direkt dorthin springt.
 *
 * Deshalb fuer diesen einen Fall derselbe Zustand, den die Seite ohnehin schon
 * kennt und ausliefert: der Block unter "prefers-reduced-motion" weiter oben in
 * style.css. Kein neuer Sonderweg, nur ein zweiter Anlass fuer einen erprobten.
 *
 * Das Klassenmerkmal setzt kontakt-vorbelegen.js nur, wenn ein Kennzeichen in
 * der Adresse steht. Der normale Besuch sieht den Umschlag wie bisher.
 */
/* Der Abschnitt beginnt mit 120 Pixeln Luft nach oben - richtig, wenn man
   von oben herangescrollt kommt, verschenkt, wenn die Seite genau hierher
   springt. Fuer den Brief-Fall knapper. */
.kontakt.kommt-aus-dem-brief { padding-top: 56px; }

.kontakt.kommt-aus-dem-brief .kontakt-stage {
  margin-top: 24px;
  padding-top: 0;
}

.kontakt.kommt-aus-dem-brief .envelope { display: none; }

.kontakt.kommt-aus-dem-brief .kontakt-form,
.kontakt.kommt-aus-dem-brief.is-open .kontakt-form {
  opacity: 1;
  /* MUSS hier stehen (Fund E-10): style.css setzt im geschlossenen
     Zustand visibility: hidden. Ohne diese Zeile waere das Formular
     ausgerechnet fuer Briefempfaenger unsichtbar - also fuer die
     Gruppe, fuer die dieser ganze Weg gebaut wurde. */
  visibility: visible;
  transform: none;
  transition: none;
}
