/* Textseiten (Ueber mich, Impressum, Datenschutz) und Formular (Kontakt).
   Lesbreite 66 Zeichen, klare Hierarchie, keine Karten-Optik. */

/* Nur oben und unten, der seitliche Abstand kommt vom Container. */
.textseite { padding-top: var(--abst-sektion); padding-bottom: var(--abst-sektion-gross); }
/* Lesbreite nur fuer den Vorspann; der Archivo-Titel darf die volle Breite nutzen,
   sonst ragt AUFNEHMEN bei 70px ueber die 66ch hinaus. */
.textseite__kopf { max-width: none; }
.textseite__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.96;
  font-size: clamp(2rem, 6vw, 4.4rem);
}
.textseite__titel span { display: block; color: var(--volt); }
/* Archivo 800: "AUFNEHMEN" misst bei 32px rund 279px, der Container hat bei 320px
   nur 280px. Unter 480px faellt die Untergrenze, wie bei den Sektionstiteln. */
@media (max-width: 479px) {
  .textseite__titel { font-size: clamp(1.4rem, 7.2vw, 2rem); }
}
.textseite__lead { margin-top: 20px; max-width: 66ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; }
.textseite__inhalt {
  margin-top: var(--abst-block);
  max-width: 66ch;
  overflow-wrap: break-word; /* lange Adressen im Fliesstext (z. B. support.google.com/analytics/...) brechen um statt die Seite zu verbreitern */
}
.textseite__inhalt h2 {
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
}
.textseite__inhalt h3 {
  margin-top: 24px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--volt);
}
.textseite__inhalt p { margin-top: 14px; }
.textseite__inhalt ul, .textseite__inhalt ol { margin-top: 12px; padding-left: 1.2em; }
.textseite__inhalt li { margin-top: 6px; }
.textseite__inhalt a { color: var(--volt); text-decoration: underline; text-underline-offset: 3px; }
.textseite__inhalt .hinweis { margin-top: 20px; }
.textseite__stand {
  margin-top: var(--abst-block);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}
.klaeren {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--coral);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}

/* Band ueber einem Textabschnitt, der noch nicht freigegeben ist (z. B. Person in Ich-Form). */
.entwurf-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(20px, 2.6vw, 28px);
  padding: 8px 16px;
  background: var(--obsidian-3);
  border: 1px solid var(--coral);
  border-left: 3px solid var(--coral);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
}

/* ---------- Ueber mich ----------
   Volle Containerbreite wie die Startseite: Kopf, dann Portrait und Personentext
   nebeneinander, "Der Weg" und "Warum Paragames in Trier" als Raster aus Ueberschrift
   links und Lesespalte rechts (max. 66ch), Zitat ueber die volle Breite, Kontaktblock
   als Abschluss. Unter 720px alles einspaltig. */
.ueber__kopf { display: flex; flex-direction: column; align-items: flex-start; }
.ueber__kopf .entwurf-band { margin: clamp(24px, 3vw, 32px) 0 0; }
.ueber__person {
  margin-top: var(--abst-sektion);
  grid-template-columns: minmax(240px, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.ueber__person .person__text { margin-top: 0; max-width: 62ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }
.ueber__person .person__text p:first-child { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; color: var(--offwhite); }
.ueber__person .person__text p + p { margin-top: 18px; }
.ueber__block {
  margin-top: var(--abst-sektion);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--slate);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--abst-block) clamp(28px, 5vw, 80px);
  align-items: start;
}
.ueber__block h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
}
.ueber__text { max-width: 66ch; font-size: clamp(1.02rem, 1.3vw, 1.125rem); line-height: 1.65; }
.ueber__text p + p { margin-top: 1.1em; }
.ueber__text a { color: var(--volt); text-decoration: underline; text-underline-offset: 3px; }
.ueber__zitat { margin-top: var(--abst-sektion); padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--slate); }
.ueber__zitat-titel {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.ueber__zitat .zitat { margin-top: 18px; padding-top: 0; border-top: 0; }
.ueber__zitat .zitat blockquote { font-size: clamp(1.6rem, 4.4vw, 3.6rem); line-height: 1.04; }
.ueber__zitat-fuss { margin-top: clamp(20px, 2.6vw, 28px); max-width: 66ch; font-size: 1.125rem; }
.ueber__kontakt {
  margin-top: var(--abst-sektion);
  padding: clamp(24px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--abst-block) clamp(28px, 5vw, 80px);
  align-items: center;
  background: var(--obsidian-2);
  border: 1px solid var(--slate);
  border-left: 4px solid var(--volt);
}
.ueber__aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ueber__aktionen .knopf { justify-content: center; text-align: center; padding: 0 16px; }
.ueber__aktionen .knopf--volt, .ueber__aktionen .knopf:last-child { grid-column: 1 / -1; }
@media (max-width: 719px) {
  .ueber__person, .ueber__block, .ueber__kontakt { grid-template-columns: minmax(0, 1fr); }
  .ueber__person { align-items: start; }
  .ueber__block { gap: 20px; }
}
@media (max-width: 479px) {
  .ueber__aktionen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Formular ---------- */
.formular { margin-top: var(--abst-block); max-width: 62ch; }
.formular__feld { margin-top: 20px; }
.formular label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}
.formular__hilfe { display: block; margin-top: -2px; margin-bottom: 8px; font-size: 14px; color: var(--mist); }
.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: inherit;
  color: var(--offwhite);
  background: var(--obsidian-2);
  border: 1px solid var(--slate);
  border-radius: 0;
  transition: border-color var(--t-ui) ease-in-out;
}
.formular textarea { min-height: 160px; resize: vertical; }
.formular input:focus-visible, .formular textarea:focus-visible { border-color: var(--volt); outline-offset: 0; }
.formular [aria-invalid="true"] { border-color: var(--coral); }
.formular__fehler { display: block; margin-top: 8px; font-size: 14px; color: var(--coral); }
.formular__fehler:empty { display: none; }
.formular__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__aktion { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.formular__antwort { margin-top: 20px; padding: 14px 18px; border-left: 3px solid var(--volt); background: var(--obsidian-3); }
.formular__antwort:empty { display: none; }

/* ---------- Formular, Ergaenzungen ---------- */
/* Auswahlfeld in derselben Optik wie die Eingabefelder. Der Pfeil ist ein
   eingebettetes SVG in Mist (#A8B0BC, identisch mit --mist), kein externer
   Request. color-scheme: dark haelt die native Optionsliste auf dunklem Grund. */
.formular select {
  width: 100%;
  min-height: 52px;
  padding: 12px 48px 12px 16px;
  font: inherit;
  color: var(--offwhite);
  background-color: var(--obsidian-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23A8B0BC' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 10px;
  border: 1px solid var(--slate);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  transition: border-color var(--t-ui) ease-in-out;
}
.formular select:focus-visible { border-color: var(--volt); outline-offset: 0; }
.formular select option { color: var(--offwhite); background: var(--obsidian-2); }

/* Kontaktdaten auf der Textseite: die Adressliste behaelt ihre Optik von der
   Startseite (Haarlinie statt Unterstreichung, Zeilen nur so breit wie der Text),
   statt die allgemeine Linkregel der Textseite zu erben. */
.textseite__inhalt .kontakt__daten { margin-top: 20px; align-items: flex-start; }
.textseite__inhalt .kontakt__daten a { color: var(--offwhite); text-decoration: none; }
.textseite__inhalt .kontakt__daten a.volt { color: var(--volt); }