/* =====================================================================
   DIE ANFRAGE AUS DER COMMUNITY (17.09.2026)

   Zwei Seiten teilen sich diese Datei: der Fragebogen (bewerben.html)
   und der Eingang (bewerbungen.html). Eine gemeinsame Datei und nicht
   zwei -- die Anfrage soll in beiden Richtungen gleich aussehen, und
   zwei Dateien wären zwei Gelegenheiten, eine davon zu vergessen.

   DIE FLAECHEN SIND DECKEND, UND DAS WAR EIN FEHLER WERT.

   Zuerst stand hier `color-mix(in srgb, var(--tinte) 94%, transparent)`.
   Das mischt mit DURCHSICHTIG -- 94 % heisst also: 6 % Foto scheint
   durch. Auf dem Bildschirmfoto stand der Schriftzug der Buehne mitten
   im Text einer Anfrage. Gefunden hat das kein Messwert, sondern das
   Hinsehen; dieselbe Stelle hat mich am 17.09. schon einmal erwischt
   (Talente, leerer Zustand).

   Richtig ist `#ffffff 6%` -- derselbe Ton, aber deckend. So macht es
   das Haus in .t-karte.

   ALLES GEDECKT, NICHTS BLINKT. Hier liest jemand Sätze, die ein
   anderer über sich selbst geschrieben hat; und auf der anderen Seite
   sitzt jemand, der gerade nach Worten sucht. Beides verträgt keine
   Signalfarben. Rot kommt nur an einer Stelle vor: an einem Feld, das
   wirklich fehlt -- und auch dort nur als Rand.
   ===================================================================== */

/* =====================================================================
   1. DER FRAGEBOGEN
   ===================================================================== */

.bw-stand {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  /* EIGENE FLÄCHE, KEIN DURCHSCHEINEN. Auf der Bühne liegt ein Motiv;
     ohne deckenden Grund steht der Text darauf statt darüber. Das ist
     am 17.09. schon einmal passiert (Talente, leerer Zustand). */
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.bw-stand__wort { margin: 0; font-size: 1.05rem; font-weight: 700; }
.bw-stand__grund {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--akzent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
  line-height: 1.55;
}
.bw-stand__sperre { margin: 0; font-size: 1.05rem; font-weight: 700; }
.bw-stand .knopf { margin-top: 14px; }

.bw-bogen { display: block; }

.bw-gruppe {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.bw-gruppe__kopf { margin-bottom: 14px; }
.bw-gruppe__titel { margin: 0; font-size: 1.02rem; font-weight: 700; }
.bw-gruppe__unter { margin: 4px 0 0; font-size: .86rem; opacity: .75; }

.bw-feld { margin: 0 0 18px; }
.bw-feld:last-child { margin-bottom: 0; }

.bw-feld__schild {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 4px;
  font-weight: 600;
}
/* „nötig" und „freiwillig" stehen als WORT da und nicht als Sternchen.
   Ein Sternchen muss man erklären; wer die Erklärung überliest, füllt
   aus Vorsicht alles aus und schreibt am Ende nirgends etwas
   Ehrliches. */
.bw-feld__pflicht,
.bw-feld__frei {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.bw-feld__pflicht {
  color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
.bw-feld__frei { opacity: .6; background: color-mix(in srgb, var(--rand) 40%, transparent); }

.bw-feld__hinweis { margin: 0 0 6px; font-size: .86rem; opacity: .75; line-height: 1.5; }

.bw-feld__eingabe {
  display: block; width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: .95rem; line-height: 1.55;
  color: inherit;
  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
  border: 1px solid var(--rand); border-radius: 10px;
  resize: vertical;
}
.bw-feld__eingabe:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
  border-color: var(--akzent);
}
/* Ein fehlendes Pflichtfeld wird MARKIERT, nicht angeschrien: Rand und
   ein Wort in der Meldung oben. Rot flächig wäre auf fünfzehn Feldern
   eine Wand. */
.bw-feld--fehlt .bw-feld__eingabe {
  border-color: color-mix(in srgb, var(--warn) 70%, var(--rand));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent);
}

.bw-feld__zaehler { margin: 4px 0 0; font-size: .78rem; opacity: .65; text-align: end; }

.bw-wer-liest {
  margin: 0 0 14px;
  font-size: .86rem; opacity: .8;
  padding: 10px 12px;
  border: 1px dashed var(--rand); border-radius: 10px;
}

.bw-abschluss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* =====================================================================
   2. DER EINGANG
   ===================================================================== */

.bw-zahlen {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 0 0 22px;
}

.bw-karte {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
/* Der Zustand als feine Kante links -- er sagt beim Scrollen, was
   erledigt ist, ohne dass man das Schild lesen muss. */
.bw-karte[data-zustand="neu"] { border-inline-start: 3px solid var(--akzent); }
.bw-karte[data-zustand="gespraech"],
.bw-karte[data-zustand="warteschlange"] {
  border-inline-start: 3px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
}
/* ENTSCHIEDENE KARTEN TRETEN ZURUECK -- ueber die SCHRIFT, nicht ueber
   `opacity`. Ein durchsichtiges Element nimmt seine Flaeche mit, und
   hinter dieser Seite liegt ein Foto: Aus "etwas leiser" waere wieder
   "das Motiv scheint durch" geworden. Derselbe Fehler, zehn Zeilen
   weiter oben. */
.bw-karte[data-zustand="angenommen"] .bw-karte__bogen,
.bw-karte[data-zustand="abgelehnt"] .bw-karte__bogen,
.bw-karte[data-zustand="angenommen"] .bw-karte__kopf,
.bw-karte[data-zustand="abgelehnt"] .bw-karte__kopf { color: color-mix(in srgb, var(--text) 78%, transparent); }

.bw-karte__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.bw-karte__wer { min-width: 0; }
.bw-karte__name { margin: 0; font-size: 1.08rem; font-weight: 700; }
.bw-karte__unter { margin: 3px 0 0; font-size: .84rem; opacity: .72; }

.bw-marke {
  font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
}

.bw-karte__frueher { margin: 0 0 12px; }
.bw-karte__grund {
  margin: 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--akzent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
  line-height: 1.55;
}

.bw-karte__bogen { margin: 0 0 16px; }
.bw-karte__gruppe {
  margin: 16px 0 8px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .65;
}
.bw-karte__gruppe:first-child { margin-top: 0; }

.bw-antwort { margin: 0 0 10px; }
.bw-antwort__frage { margin: 0; font-size: .84rem; opacity: .7; }
.bw-antwort__text {
  margin: 2px 0 0;
  line-height: 1.6;
  white-space: pre-wrap;
}
/* Was NICHT beantwortet wurde, steht dabei. Eine übersprungene
   freiwillige Frage ist selbst eine Auskunft. */
.bw-karte__ohne { margin: 14px 0 0; font-size: .8rem; opacity: .55; line-height: 1.5; }

.bw-wahl {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--rand);
}
.bw-wahl__schild { margin: 0 0 8px; font-size: .84rem; opacity: .75; }
.bw-wahl__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.bw-weg {
  font: inherit; font-size: .88rem; font-weight: 600;
  color: inherit;
  padding: 8px 14px;
  min-height: 40px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  cursor: pointer;
}
.bw-weg:hover { border-color: color-mix(in srgb, var(--akzent) 60%, var(--rand)); }
.bw-weg[aria-pressed="true"] {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 16%, transparent);
}
.bw-weg:disabled { opacity: .45; cursor: default; }
.bw-weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.bw-wahl__feld { margin: 12px 0 0; }
.bw-wahl__feldschild { display: block; margin: 0 0 4px; font-size: .86rem; opacity: .8; }
.bw-wahl__eingabe {
  display: block; width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: .93rem; line-height: 1.55;
  color: inherit;
  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
  border: 1px solid var(--rand); border-radius: 10px;
  resize: vertical;
}
.bw-wahl__eingabe:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
  border-color: var(--akzent);
}
.bw-wahl .knopf { margin-top: 12px; }

.bw-leer {
  padding: 22px 20px;
  border: 1px dashed var(--rand); border-radius: 14px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.bw-leer__wort { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }

.bw-hinweis {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
  border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}

/* Der Weg von der Talente-Seite hierher. */
.bw-tor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--rand); border-radius: 12px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.bw-tor[data-neu="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 50%, var(--rand));
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}
.bw-tor__wort { margin: 0; font-size: .95rem; }

/* =====================================================================
   WER SICH KÜMMERT (17.09.2026)

   Bis heute sahen DogFather und die rechte Hand jede Anfrage, und
   niemand war benannt. Das ist nicht „geteilt", das ist „jeder dachte,
   der andere macht es" -- und hier wartet ein Mensch darauf.

   DER UNBESETZTE ZUSTAND IST DER AUFFÄLLIGE. „Ich kümmere mich" steht
   als Knopf da; wer schon übernommen hat, sieht eine ruhige Zeile.
   Andersherum wäre die Liste ein Feld aus Namen, in dem die Lücke
   nicht auffällt -- und genau die Lücke ist die Auskunft.
   ===================================================================== */
.bw-kuemmern {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 10px;
}

.bw-kuemmern__knopf {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  color: color-mix(in srgb, var(--akzent) 30%, #ffffff);
  font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.bw-kuemmern__knopf:hover { border-color: var(--akzent); color: #ffffff; }
.bw-kuemmern__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Schon übernommen: ruhiger. Es ist eine Auskunft, keine Aufforderung. */
.bw-kuemmern[data-wer="ich"] .bw-kuemmern__knopf {
  border-color: color-mix(in srgb, var(--gut, #79d1a2) 45%, var(--rand));
  color: color-mix(in srgb, var(--gut, #79d1a2) 30%, #ffffff);
}
/* Fremd: kein Ziel mehr, also sieht es auch nicht danach aus. Ein
   Knopf, der aussieht wie einer und nichts tut, ist eine Falle. */
.bw-kuemmern[data-wer="anderer"] .bw-kuemmern__knopf {
  border-style: dashed;
  border-color: var(--rand);
  background: none;
  color: var(--text-still);
  cursor: default;
}
.bw-kuemmern__seit { font-size: .78rem; color: var(--text-still); }