/* Was nur die Kontaktseite braucht. Kopf, Fuss und Grundfarben kommen
   aus rechtstext.css, das Geruest der erzaehlenden Seiten aus seite.css.

   Das Formular traegt dieselben Klassennamen wie das der Startseite
   (.request-form, .absender, .form-submit) — daran haengt der gemeinsame
   Mailto-Handler in seite.js. Die REGELN sind bewusst nicht dieselben:
   die Startseite schreibt feste Toene (#55524a, #767366, --anthracite),
   die Unterseiten arbeiten oberflaechengebunden ueber --fg, --fg-muted
   und --feld. Eine geteilte Datei muesste beide Systeme bedienen und
   taete keinem gut; die Ideenbox haelt es mit .ew-form genauso.
   Begruendung ausfuehrlich im Umsetzungsplan unter „Stufe 2 entfaellt". */

/* ---- Der Wegweiser ----
   Drei Zeilen, jede ein Ziel. Steht VOR dem Formular, damit niemand mit
   einem Anliegen im falschen Formular landet, fuer das es eine eigene
   Seite gibt. */
.wege {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wege li {
  border-top: 1px solid var(--rule);
}
.wege li:last-child {
  border-bottom: 1px solid var(--rule);
}
/* `color: var(--fg)` und nicht `inherit`: die Oberflaechen in seite.css
   setzen nur die Variablen, angewandt werden sie vom Bauteil (so macht es
   `.gs b` auch). Wer hier erbt, bekommt das cremeweisse `color` vom
   <body> — auf Cream ist das 1:1, also unsichtbar. Genau so stand es
   beim ersten Durchgang dieser Seite. */
.wege a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  color: var(--fg);
  text-decoration: none;
}
.wege b {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.wege p {
  grid-column: 1 / -1;
  max-width: 46ch;
  margin: 7px 0 0;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.55;
}
.wege .pfeil {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  transition: transform 180ms var(--ease);
}
.wege a:hover .pfeil {
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  .wege .pfeil {
    transition: none;
  }
  .wege a:hover .pfeil {
    transform: none;
  }
}

/* Der erste Weg ist der, um den es hier geht. Zwei Pixel statt einem,
   genau wie `.gs div:first-child` in seite.css — sonst stehen drei
   gleich schwere Zeilen da und das Auge hat keinen Einstieg. */
.wege li:first-child {
  border-top: 2px solid var(--accent);
}

/* ---- Der Weg der Nachricht ----
   Was nach dem Absenden passiert. Ein mailto-Formular fuehlt sich immer
   an wie ein schwarzes Loch — es gibt keine Empfangsbestaetigung, die
   Seite kann keine geben, und die Zusage „innerhalb eines Werktages"
   steht als Fliesstext weit oben auf der Goldflaeche.

   Die Grammatik ist die der `.zeitleiste` auf flaechen.html: Linie oben,
   Punkt am Anfang jeder Station, die letzte offen, weil sie noch
   bevorsteht. Dieselbe Figur traegt die Fussachse der Startseite
   (seit 1857 · ab 2026 · Q2 2027) und der Zeitstrahl der Geschichte —
   das Haus erzaehlt Ablaeufe auf einer Linie, hier eben einen, der
   einen Tag dauert statt 169 Jahre. */
.weg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.weg > div {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--rule-solid);
}
.weg > div::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
}
/* Die Linie laeuft ueber die erste Station hinaus bis zur naechsten —
   sie verbindet, statt drei Striche nebeneinanderzulegen. */
.weg > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: calc(100% + 30px);
  height: 1px;
  background: var(--accent);
}
/* Die letzte Station steht noch aus: offener Punkt, keine Linie danach.
   Genau die Unterscheidung, die `.zeitleiste` zwischen „laeuft" und
   „kommt noch" macht. */
.weg > div:last-child::before {
  background: var(--flaeche);
  border: 2px solid var(--accent);
}
.weg .wann {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.weg b {
  display: block;
  margin-bottom: 8px;
  color: var(--fg);
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.weg p {
  margin: 0;
  max-width: 34ch;
  color: var(--fg-muted);
  font-size: 15.5px;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .weg {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  /* Gestapelt zeigt eine waagrechte Verbindungslinie in die Leere. */
  .weg > div:not(:last-child)::after {
    width: 100%;
  }
}

/* ---- Die Erreichbarkeit ----
   Auf Gold, weil das die Pointe dieser Seite ist — eine warme Flaeche je
   Seite, wie der Zuschnitt auf flaechen.html.

   Verweise tragen hier --fg und nicht --accent: auf Gold IST der Akzent
   das Anthrazit, und --gold-text waere Gold auf Gold. Die Beschriftungen
   sind ueber --fg-muted gedaempft und nicht ueber `opacity` — Deckkraft
   nimmt den Kontrast mit und unterschreitet ihn unsichtbar. */
.erreichbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px 26px;
  margin: 0;
}
.erreichbar > div {
  display: grid;
  align-content: start;
  gap: 8px;
}
/* Voller Textton, nicht --fg-muted: auf Gold kommt der gedaempfte Ton auf
   4,34:1, und bei 10px gilt die Schwelle 4,5. Den Rang tragen hier
   Groesse, Sperrung und Versalien, nicht die Farbe. */
.erreichbar dt {
  color: var(--fg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.erreichbar dd {
  margin: 0;
  color: var(--fg);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.4;
}
.erreichbar a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.erreichbar .zusage {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* ---- Das Formular ---- */
.request-form {
  display: grid;
  gap: 24px;
  align-content: start;
  max-width: 560px;
  margin: 34px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.request-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--fg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* 16px ist keine Geschmacksfrage: darunter zoomt iOS beim Fokus in das
   Feld hinein und die Seite steht danach verschoben. */
.request-form input,
.request-form textarea {
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--fg-muted);
  border-radius: 0;
  outline: 0;
  background: var(--feld);
  color: var(--fg);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 180ms ease;
}
.request-form textarea {
  resize: vertical;
}
/* Nur die Linie wird dunkler — kein Rahmen, kein Schatten. Die Staerke
   bleibt bei 1px, sonst bricht beim Sprung von Feld zu Feld die Zeile um.
   (Der sichtbare Fokusring kommt zusaetzlich aus seite.css.) */
.request-form input:focus,
.request-form textarea:focus {
  border-bottom-color: var(--fg);
}
.form-submit {
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Kein Goldwechsel beim Hover wie auf der Startseite: der Knopf ist das
   letzte Element vor dem Absenden, er muss nicht auffallen, sondern nur
   eindeutig sein. */
.form-submit button {
  flex: none;
  min-height: 58px;
  padding: 0 26px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--flaeche);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 180ms ease;
}
.form-submit button:hover {
  opacity: 0.82;
}
.form-submit p {
  max-width: 340px;
  margin: 0;
  color: var(--fg-muted);
  /* 12px statt 10px: dieselbe Zeile traegt nach dem Absenden auch die
     Statusmeldung („Ihre E-Mail-Anwendung wurde geoeffnet") — die
     einzige Rueckmeldung auf der Seite selbst. */
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Der Absender ----
   Das Gesicht zur Behauptung. Steht auch auf der Startseite; die
   Wiederholung ist gewollt — wer ueber eine Unterseite hierherkommt, hat
   die Startseite womoeglich nie gesehen. */
.absender {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 480px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
/* `height: auto` ist noetig, nicht kosmetisch: die Attribute width/height
   am <img> wirken als Darstellungshinweis und setzen eine feste Hoehe,
   die `aspect-ratio` sticht. Ohne die Zeile bliebe das Bild bei jeder
   Breitenaenderung auf 200px Hoehe stehen. Die Attribute selbst bleiben,
   damit vor dem Laden kein Sprung entsteht. */
.absender img {
  flex: none;
  width: 180px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--flaum);
}
.absender figcaption {
  display: grid;
  gap: 7px;
}
.absender b {
  color: var(--fg);
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}
.absender span {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  /* Bei 375px blieben neben einem 180er Portrait nur 133px fuer den Text.
     Mit 130px sind es 183px und zwei Zeilen. */
  .absender img {
    width: 130px;
  }
  .form-submit {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}