/*
 * Stil der Erhebung.
 *
 * Eine Datei, kein Bauschritt, keine Abhängigkeit. Die Erhebung ist ein
 * Werkzeug für ein Interview, keine Kundenwebsite — Tailwind und der
 * Astro-Bau des Fundaments haben hier nichts zu suchen.
 *
 * Die Schrift liegt selbst gehostet unter `schriften/` (ADR 0001). Kein
 * fremder Host, auch nicht für eine interne Anwendung: die
 * Content-Security-Policy in `.htaccess` (`default-src 'self'`) liesse ihn
 * ohnehin nicht durch. Die Datei stammt aus dem Paket, das die Pilotseite
 * ohnehin führt (`@fontsource-variable/inter`) — kopiert, nicht nachgeladen.
 * Instrument Serif ist seit dem 26.09.2026 weg: Die Seite setzt seit
 * Variante E auch ihre Titel in Inter.
 *
 * ── Farben: wörtlich aus `kunden/webfluencer/tokens.css` ─────────────
 *
 * Die Erhebung sah aus wie ein fremdes Werkzeug (warmes Off-White, dunkles
 * Petrol). Sie ist das Erste, was ein Kunde von Webfluencer bedient, und
 * trägt deshalb dieselben Werte wie die Website.
 *
 * **Nur ein Erscheinungsbild, kein `prefers-color-scheme`.** Die Marke hat
 * eine Fassung, nicht zwei; eine zweite Palette wäre eine, die niemand je
 * nachmisst.
 *
 * **Türkis seit dem 26.09.2026.** Die Website ist am 10.09.2026 von Violett
 * auf Türkis umgestellt worden (`tokens.css`, Commit 02b16e5); die
 * Erhebung trug bis hierhin die alten Werte und sah damit wieder aus wie
 * ein fremdes Werkzeug.
 *
 * ── Gemessen am dunklen Grund (WCAG 2.1, Kontrastverhältnis) ─────────
 *
 *   · Der Akzent `#2ee6c8` trägt **auch als Text** (10.29 auf der Karte,
 *     12.38 auf dem Grund) — anders als das Violett, das dafür einen
 *     helleren Zweitton brauchte. `--akzent-text` bleibt als Name stehen,
 *     damit die Regeln unten nicht wissen müssen, welche Welt gilt.
 *   · **Auf der Akzentfläche steht dunkle Schrift**, der Grund: 12.38.
 *     Weiss käme auf 1.58 — die violette Regel «reines Weiss» ist hier
 *     genau falsch herum.
 *   · Bedienelemente brauchen 3:1 gegen ihren Grund (WCAG 1.4.11). Die
 *     Haarlinie `#1d3a34` liegt bei 1.32 — schön als Trennung, zu wenig als
 *     Feldrand. Deshalb zwei Werte: `--linie` trennt, `--rand` umrandet
 *     Eingabefelder (`#557570`, 3.23 gegen die Karte).
 *   · Der Akzent als Fläche bleibt klein — Weiter-Knopf und gewählter Chip.
 *     Mint ist so hell, dass er grossflächig zieht (tokens.css).
 *
 * Text 12.76, gedämpfter Text 5.39, Warnfarbe 8.15 — je auf der Karte.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  color-scheme: dark;

  /* Marke: Verlauf aus der Wortmarke (kunden/webfluencer/tokens.css) */
  --marke-tief: #0a7f6b;
  --marke-mitte: #17c7a4;
  --marke-hell: #2ee6c8;
  --marken-verlauf: linear-gradient(
    100deg,
    var(--marke-tief) 0%,
    var(--marke-mitte) 55%,
    var(--marke-hell) 100%
  );

  --grund: #070d0c;
  --erhoben: #0d1816;
  --karte: #132320;

  --text: #d4e8e3;
  --text-hell: #eafff9;
  --gedaempft: #7f9a94;

  /* Fläche, Rand, Knopfgrund — und als Text ebenfalls lesbar */
  --akzent: #2ee6c8;
  --akzent-text: #2ee6c8;
  /* Dunkel auf Mint: 12.38. Weiss käme auf 1.58. */
  --auf-akzent: #070d0c;
  --warnung: #f0a868;

  --linie: #1d3a34;
  --rand: #557570;
  --wortlaut-grund: #0d1816;

  --breite: 44rem;
  --rundung: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem 1rem 5rem;
  background: var(--grund);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--marke-hell);
  color: var(--auf-akzent);
}

main,
header.kopf {
  max-width: var(--breite);
  margin-inline: auto;
}

/*
 * Der Markenverlauf als Haarlinie unter dem Kopf.
 *
 * Die einzige Stelle, an der er vorkommt — als Fläche, nicht als Text: Der
 * dunkle Anfang `#0a7f6b` erreicht auf dem Grund 3.98 und wäre als Schrift
 * zu schwach.
 */
header.kopf {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid transparent;
  border-image: var(--marken-verlauf) 1;
}

h1,
h2,
h3 {
  color: var(--text-hell);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.4rem;
  line-height: 1.2;
}

h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.gedaempft {
  color: var(--gedaempft);
  font-size: 0.875rem;
}

/* ── Abschnitt und Frage ─────────────────────────────────────────── */

.karte {
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
}

.frage {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ── Der Chat (ADR 0013) ─────────────────────────────────────────── */

/*
 * Sprechblasen, links gefragt, rechts gesagt.
 *
 * Die Rundung ist hier die Ausnahme von `--rundung: 2px`: Eine Blase mit
 * zwei Pixeln Radius sieht aus wie eine Tabellenzelle, und die ganze
 * Entscheidung hängt daran, dass es **nicht** nach Formular aussieht. Eine
 * Ecke bleibt jeweils spitz — die zur eigenen Seite hin; das ist es, was
 * eine Blase von einer Karte unterscheidet.
 */
.faden {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.blase {
  max-width: min(90%, 34rem);
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--karte);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.blase.gefragt {
  border-bottom-left-radius: 3px;
}

/*
 * Die Antwortblase ist ein Knopf — sie führt zurück und speichert dabei.
 *
 * Sie darf trotzdem nicht wie ein Knopf aussehen: `button` bringt
 * Markenfarbe, zentrierten Text und `font-weight: 500` mit, und alles
 * dreie ist hier falsch. Zurückgesetzt wird deshalb ausdrücklich.
 */
.blase.gesagt {
  align-self: flex-end;
  padding: 0.75rem 1rem;
  border: 1px solid var(--akzent);
  border-bottom-right-radius: 3px;
  background: var(--wortlaut-grund);
  color: var(--text);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.blase.gesagt:hover {
  border-color: var(--akzent-text);
}

/*
 * Der Wortlaut wird nirgends geglättet, auch nicht in der Anzeige (FR-011).
 * `pre-wrap` statt `<br>`: So bleibt auch eine Einrückung stehen, die der
 * Kunde gesetzt hat — und `nl2br()` daneben machte aus jedem Umbruch zwei.
 */
.blase.gesagt .wortlaut-inline,
.blase.versucht {
  display: block;
  white-space: pre-wrap;
}

/* Die schon festgehaltene Antwort über dem Textfeld — sie ist hier keine
   Schaltfläche, sondern der Beleg, dass nichts verloren ist. */
.blase.steht {
  cursor: default;
}

/* Der Hinweis, dass die Blase antippbar ist. Leise — sie ist eine
   Antwort, kein Bedienelement, und wird nur zu einem, wenn man will. */
.blase .aendern {
  display: block;
  margin-top: 0.25rem;
  color: var(--gedaempft);
  font-size: 0.75rem;
}

/*
 * Kurzes steht als Zeile, nicht als Blasenpaar.
 *
 * «Ort → Zürich → Branche → Handel» als vier abwechselnd eingerückte
 * Zweiwortblasen ist ein Ping-Pong: viel Höhe, schlecht zu überfliegen.
 * Die Rolle soll nach FR-043 **zugleich die Übersicht** sein, und dafür
 * taugt eine Liste. Sprechblasen bleiben, wo wirklich geredet wurde — bei
 * den elf Feldgesprächen — und bei Listen, die ohnehin mehrzeilig sind.
 */
.rueckblick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
  align-self: stretch;
  width: 100%;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: none;
  color: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.rueckblick:hover {
  background: var(--erhoben);
}

.rueckblick-frage {
  flex: 0 1 auto;
  color: var(--gedaempft);
  font-size: 0.875rem;
}

.rueckblick-wert {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Auf einer Zeile, nicht darunter — und erst beim Zeigen sichtbar, damit
   «ändern» nicht dreissigmal untereinander steht. */
.rueckblick .aendern {
  flex: 0 0 auto;
  color: var(--gedaempft);
  font-size: 0.75rem;
  opacity: 0;
}

.rueckblick:hover .aendern,
.rueckblick:focus-visible .aendern {
  opacity: 1;
}

/* Ohne Zeigegerät gibt es kein «hover» — dort steht der Hinweis immer. */
@media (hover: none) {
  .rueckblick .aendern {
    opacity: 1;
  }
}

.rueckblick.uebergangen .rueckblick-wert,
.rueckblick.offen .rueckblick-wert {
  color: var(--gedaempft);
}

.blase .adresse {
  display: block;
  color: var(--akzent-text);
  font-size: 0.875rem;
}

/* Die Kurzfassung steht beim Wortlaut, sobald sie entsteht: Sie landet am
   Ende auf einer Seite, für die der Kunde haftet. */
.blase .kurz {
  display: block;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: 0.875rem;
}

.blase.uebergangen,
.blase.offen {
  border-style: dashed;
  border-color: var(--rand);
  color: var(--gedaempft);
}

/* Ein verworfener Anlauf und die Rückfrage darauf — nur an der offenen
   Frage, denn beim Festhalten wird der Verlauf gelöscht (D8). */
.blase.versucht {
  border-color: var(--rand);
  border-style: dashed;
}

.blase.nachgehakt {
  border-left: 3px solid var(--akzent);
}

/* Die Abschnittsgrenze: Überschrift und, wenn sie hinter dem Kunden
   liegt, eine Bilanz. **Kein Fortschrittsbalken** (Conrad et al.). */
.abschnittsmarke {
  align-self: stretch;
  margin: 1.5rem 0 0.25rem;
  font-size: 1.25rem;
}

.faden > .abschnittsmarke:first-child {
  margin-top: 0;
}

.wegmarke {
  align-self: center;
  margin: 1rem 0 0;
  color: var(--gedaempft);
  font-size: 0.8125rem;
}

/* Die offene Frage. Sie hebt sich ab, weil hier etwas zu tun ist. */
.jetzt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  margin-top: 0.5rem;
  scroll-margin-top: 1rem;
}

.jetzt .blase.gefragt {
  font-size: 1.0625rem;
}

/*
 * Getipptes: mehrere Zeilen in **einer** Blase, die Beschriftung ist die
 * Frage.
 *
 * Volle Breite, weil ein Eingabefeld in einer schmalen Blase unbedienbar
 * wäre. Und eine Blase statt dreier: Ort, Branche und die bisherige
 * Website sind drei Zeilen einer Frage, nicht drei Fragen.
 */
.blase.tippen {
  align-self: stretch;
  max-width: none;
}

.blase.tippen .zeile + .zeile {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

.blase.tippen label,
.blase.tippen .beschriftung {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Der Ausweg steht bei seiner Zeile — bei drei Chips untereinander wüsste
   sonst niemand, welcher wozu gehört. */
.blase.tippen .knoepfe {
  margin-top: 0.625rem;
}

.jetzt form.tippen {
  align-self: stretch;
  width: 100%;
}

.jetzt .uebergangen {
  margin: 0;
}

.jetzt .ankreuzen,
.jetzt .achsen {
  align-self: stretch;
  width: 100%;
}

/*
 * Chips: Antippen statt ankreuzen-und-dann-weiter.
 *
 * Sie sind Knöpfe mit Nebenrolle — der Grund steht bei `button.neben`:
 * kein Abbruch, keine Warnfarbe. Der bereits gewählte trägt die
 * Markenfarbe, damit «was steht hier schon?» ohne Lesen zu sehen ist.
 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: stretch;
}

.chip {
  padding: 0.5rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 400;
}

.chip:hover {
  border-color: var(--akzent);
}

.chip.gewaehlt {
  border-color: var(--akzent);
  background: var(--akzent);
  color: var(--auf-akzent);
}

/* Die freie Stelle `______` — Feld und Chip gehören zusammen. */
.eigenes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  margin-top: 0.25rem;
}

.eigenes label {
  flex: 0 0 100%;
  margin: 0;
  color: var(--gedaempft);
  font-size: 0.875rem;
  font-weight: 400;
}

.eigenes input {
  flex: 1 1 12rem;
  width: auto;
}

/* ── Formular ────────────────────────────────────────────────────── */

label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
}

/*
 * Feldränder tragen `--rand`, nicht `--linie`.
 *
 * WCAG 1.4.11 verlangt 3:1 für Bedienelemente. Die Haarlinie der Marke
 * kommt auf 1.3 — ein Eingabefeld wäre auf der Karte praktisch randlos.
 */
textarea,
input[type="text"],
input[type="url"],
input[type="email"],
select {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--erhoben);
  color: inherit;
  font: inherit;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--akzent);
}

::placeholder {
  color: var(--gedaempft);
  opacity: 1;
}

/* Häkchen und Punkte in der Markenfarbe statt im Systemblau. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--akzent);
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

textarea:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

fieldset {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  font-weight: 600;
}

.ankreuzen li,
.optionen li {
  list-style: none;
}

.ankreuzen,
.optionen {
  margin: 0.5rem 0 0;
  padding: 0;
}

/*
 * Tippziel 44 px, auch wenn nur eine Zeile darinsteht.
 *
 * Gemessen am 01.09.2026 auf der Variantenauswahl bei 320 px: Die vier
 * Radios in Schritt 1 waren 288 px breit und **26 px hoch**. Das
 * erfüllt WCAG 2.5.8 (24 px) und ist trotzdem zu knapp für einen
 * Daumen; das Sektionsraster daneben lag längst über 44.
 *
 * `align-items: baseline` bleibt: Bei einer zweizeiligen Beschriftung
 * soll das Kästchen an der **ersten** Zeile hängen, nicht in der Mitte
 * des Blocks schweben. Die Höhe macht deshalb das Polster, nicht die
 * Ausrichtung.
 */
.ankreuzen label,
.optionen label {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-weight: 400;
  min-height: 2.75rem;
  padding-block: 0.5rem;
}

/* ── Knöpfe ──────────────────────────────────────────────────────── */

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.25rem;
}

/* Dunkle Schrift auf Mint (12.38) — Weiss fiele mit 1.58 durch. */
button {
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--akzent);
  border-radius: var(--rundung);
  background: var(--akzent);
  color: var(--auf-akzent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

button[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/*
 * «Habe ich nicht» (FR-013a) und «jetzt beenden» (FR-017b).
 *
 * Beide sind Nebenknöpfe, aber ausdrücklich **kein Abbruch**: keine
 * Warnfarbe, keine kleinere Schrift, kein Verstecken. Wer keine
 * Referenzen hat, trifft damit eine Aussage — und wer nach Abschnitt 13
 * beenden will, tut nichts Falsches.
 */
button.neben {
  border-color: var(--rand);
  background: transparent;
  color: var(--text);
}

/* ── Achsen (Abschnitt 4) ────────────────────────────────────────── */

/*
 * Sechs Achsen mit je fünf Stufen, zwischen zwei Polen.
 *
 * Auf dem Handy passen Pol, Skala und Pol nicht nebeneinander — «kantig/
 * klar» und «ausdrucksstark» sind lang. Deshalb ab hier zweizeilig: die
 * Pole oben, die Skala darunter über die ganze Breite. Die Alternative
 * wäre eine Seite, die seitlich wegscrollt, und das gilt hier wie
 * überall als Fehler.
 */
.achse {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "links stufen rechts";
  gap: 0.25rem 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.achse .pol {
  grid-area: links;
  color: var(--gedaempft);
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

.achse .pol.rechts {
  grid-area: rechts;
  text-align: right;
}

.achse .stufen {
  grid-area: stufen;
  display: flex;
  gap: 0.75rem;
}

/*
 * Die Antippfläche, nicht der Punkt.
 *
 * Gemessen am 28.08.2026 bei 375 px: Das Label war **21 × 26 px**, das
 * Kreuzchen darin 13 × 13. WCAG 2.5.8 verlangt 24 × 24 — an der Breite
 * fehlten drei Pixel, und zwar an dem Feld, das der Kunde dreissigmal
 * hintereinander trifft. Der Punkt bleibt so klein, wie er ist; nur was
 * ihn umgibt, wird gross genug.
 *
 * **40 statt der geforderten 24**, weil der Platz da ist: Die Stufenzeile
 * misst bei 375 px 343 px, fünf Ziele à 40 brauchen 200. Das Minimum
 * einzuhalten und den Rest verfallen zu lassen, wäre an einem Handy die
 * schlechtere Wahl — WCAG 2.5.5 nennt 44 als das eigentliche Mass.
 */
.achse .stufen label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

@media (max-width: 34rem) {
  .achse {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "links rechts"
      "stufen stufen";
  }

  .achse .stufen {
    justify-content: space-between;
    padding: 0.25rem 0.5rem 0;
  }
}

/* ── Tabellen ────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--gedaempft);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabellenrahmen {
  overflow-x: auto;
}

/* ── Das Verzeichnis: was es sonst noch gibt ──────────────────────── */

/*
 * Es steht **unter** der offenen Frage, nicht über dem Faden: Der Kunde ist
 * am Fuss der Rolle, und eine Navigation am Kopf wäre mit jeder Antwort
 * weiter weg.
 *
 * **Kein Fortschrittsbalken mehr** (ADR 0013). Conrad/Couper/Tourangeau/
 * Peytchev, «first impressions matter»: Eine Anzeige erhöht Abbrüche, wenn
 * sie vor allem mitteilt, wie viel noch aussteht. Zugeklappt sagt das
 * Verzeichnis deshalb keine Zahl; die Zahlen stehen drinnen.
 */
.stand {
  margin: 2.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
}

.stand summary {
  cursor: pointer;
}

.stand summary::marker {
  color: var(--gedaempft);
}

.stand .gedaempft {
  display: block;
}

.abschnitte {
  margin: 1rem 0 0;
  padding: 0;
}

.abschnitte li {
  list-style: none;
}

/*
 * Knöpfe, keine Verweise: Sie hängen am Abschnittsformular und **speichern
 * beim Springen**. Ein Verweis würde die Eingaben des offenen Abschnitts
 * lautlos verwerfen — genau der Verlust, den ein Formular je Abschnitt sonst
 * einhandelt. Gestaltet sind sie trotzdem als Navigation, nicht als Tat.
 */
.abschnitte button {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  text-align: left;
}

.abschnitte li:last-child button {
  border-bottom: 0;
}

.abschnitte button:hover {
  background: var(--erhoben);
}

.abschnitte .abschnitt-name {
  overflow-wrap: anywhere;
}

.abschnitte .marke {
  color: var(--gedaempft);
}

.abschnitte .offen {
  font-weight: 600;
}

.abschnitte .offen .marke,
.abschnitte .fertig .marke {
  border-color: var(--akzent);
  color: var(--akzent-text);
}

.abschnitte .pflicht-offen .marke {
  border-color: var(--warnung);
  color: var(--warnung);
}

/* ── Festgehaltenes ──────────────────────────────────────────────── */

.wortlaut {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rundung);
  background: var(--wortlaut-grund);
  white-space: pre-wrap;
}

.kurzfassung {
  margin: 0;
  color: var(--gedaempft);
}

/* ── Hinweise und Fehler ─────────────────────────────────────────── */

.meldung {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--warnung);
  border-radius: var(--rundung);
  color: var(--warnung);
}

.sperre {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--rand);
  border-radius: var(--rundung);
}

/* ── Was der Inline-Schnipsel zeichnet (T123) ─────────────────────── */

/*
 * Die eigene Blase, solange die Antwort unterwegs ist.
 *
 * Sie ist der Beleg, dass der Fingertipp angekommen ist, und verschwindet
 * beim Tausch des Rumpfes — was danach steht, kommt vom Server. Gedämpft,
 * weil sie genau so lange gilt, wie sie zu sehen ist.
 */
.blase.unterwegs {
  opacity: 0.55;
}

/*
 * Solange die Antwort unterwegs ist, tritt die offene Frage zurück.
 *
 * Was der Kunde gerade gesagt hat, steht als Blase **unter** ihr — das
 * Eingabefeld mit demselben Text daneben wäre ein zweites Mal dasselbe,
 * und die Chips wären ein Angebot, das schon angenommen ist. Die Frage
 * selbst bleibt, ebenso der bisherige Verlauf des Feldgesprächs: Der Chat
 * verliert nichts, er wartet nur.
 */
.jetzt.wartet > form,
.jetzt.wartet > .chips,
.jetzt.wartet > .eigenes,
.jetzt.wartet > .knoepfe,
.jetzt.wartet > .ankreuzen,
.jetzt.wartet > .achsen {
  display: none;
}

/*
 * Tippen-Punkte — **nur beim Modellaufruf**, der gemessen 0.86 s dauert.
 * Ohne Rückmeldung klickt ein Kunde ein zweites Mal und zahlt einen
 * zweiten Zug. Sie ersetzen das «denkt nach…» aus research.md D4.
 */
.blase.tippt {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 1rem;
}

.blase.tippt span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gedaempft);
  animation: tippen 1.2s infinite;
}

.blase.tippt span:nth-child(2) {
  animation-delay: 0.2s;
}

.blase.tippt span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes tippen {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }

  30% {
    opacity: 1;
  }
}

/* Wer Bewegung abgestellt hat, bekommt drei ruhige Punkte statt keiner
   Rückmeldung — die Anzeige ist der Zweck, die Bewegung nur ihr Mittel. */
@media (prefers-reduced-motion: reduce) {
  .blase.tippt span {
    animation: none;
    opacity: 0.5;
  }
}

/* ── Verwaltung ──────────────────────────────────────────────────── */

.verwaltung main {
  max-width: 68rem;
}

.verwaltung header.kopf {
  max-width: 68rem;
}

.verwaltung .zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.verwaltung .zeile > * {
  flex: 1 1 12rem;
}

.verwaltung .zeile > button {
  flex: 0 0 auto;
}

.verwaltung details {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
}

.verwaltung summary {
  cursor: pointer;
  font-weight: 600;
}

.verwaltung .ablauf {
  font-size: 0.9375rem;
}

.verwaltung .ablauf pre {
  overflow-x: auto;
  padding: 0.75rem;
  border-radius: var(--rundung);
  background: var(--wortlaut-grund);
}

.verwaltung code {
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background: var(--wortlaut-grund);
  font-size: 0.9em;
}

.marke {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/*
 * `pflicht` aus `templates/brief.md`, sichtbar am Feld.
 *
 * Der Kunde erfuhr bisher erst beim Abschliessen, dass etwas fehlt — und
 * dann als Meldung oben, nicht am Feld. Kein `required` im Formular: Der
 * Fortschritt soll über mehrere Sitzungen wachsen dürfen (FR-016, SC-005),
 * und ein halb ausgefüllter Abschnitt muss sich speichern lassen.
 */
.marke.pflicht {
  border-color: var(--warnung);
  color: var(--warnung);
  font-weight: 500;
  vertical-align: middle;
}

/* ── Kaltakquise (FR-070) ────────────────────────────────────────── */

/*
 * Das Löschdatum bei «anschreiben» steht in der Warnfarbe: Dort kostet ein
 * vergessenes «Mail ist raus» den Kandidaten. Dieselbe Farbe trägt eine
 * markierte Kennzahl — beides heisst «hier hinsehen».
 */
.marke.warnung {
  border-color: var(--warnung);
  color: var(--warnung);
}

.verwaltung .domain {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375em;
  overflow-wrap: anywhere;
}

.verwaltung summary .marke {
  font-weight: 400;
}

.kandidat-stand {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 1rem 0;
}

.kandidat-stand dt {
  color: var(--gedaempft);
}

.kandidat-stand dd {
  margin: 0;
}

.verwaltung .kandidat form {
  margin-top: 1rem;
}