/* STR8CASTING Board
   Arbeitsoberflaeche in drei Reitern: Uebersicht, Bewerbungen, Nachrichten.
   Volle Breite statt Zweispalter, damit eine Bewerbung Platz hat.
   Gleiche Farbwelt wie die oeffentliche Seite. */

:root {
  --gelb: #f4ce14;
  --ink: #0b0b0b;
  --flaeche: #141414;
  --flaeche2: #1c1c1c;
  --flaeche3: #232323;
  --papier: #fff;
  --stumm: rgba(255, 255, 255, 0.58);
  --leise: rgba(255, 255, 255, 0.38);
  --linie: rgba(255, 255, 255, 0.13);
  --gruen: #4ade80;
  --rot: #f87171;
  --blau: #60a5fa;
  --rand: 4px;
}

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

/* Nichts darf seitlich hinausragen, sonst laesst sich das Board am Handy hin
   und her schieben (Jakob, 26.08.). Die Sperre steht an html und body, weil
   iOS sonst weiterhin mitzieht. */
html { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--papier);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}
img, video, canvas, svg { max-width: 100%; height: auto; }
/* Lange Adressen und Kennungen brechen um, statt die Spalte aufzudehnen. */
.gespraech-kopf b, .gespraech-vor, .zaehler, .msg, .akte { overflow-wrap: anywhere; }

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 600; }

/* ---------- Kopf mit Reitern ---------- */

.top {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 0.7rem 1.5rem 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 0 0.7rem;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}
.brand:hover em { color: var(--papier); }
.brand:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }
.brand span { color: var(--gelb); }
.brand em { font-style: normal; font-weight: 400; color: var(--stumm); margin-left: 0.4rem; }
/* Der Knopf traegt jetzt das Logo. Ohne flex sitzt das Bild auf der
   Grundlinie und „Board" rutscht darunter weg. */
.brand { display: inline-flex; align-items: center; gap: 0.15rem; }
.brand img { display: block; width: auto; height: 1.4rem; }

/* Die drei Reiter passen auf schmalen Schirmen nicht nebeneinander. Statt
   ueber den Rand hinauszuwachsen, scrollen sie in ihrem eigenen Streifen. */
.reiter { display: flex; gap: 0.25rem; order: 3; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
@media (min-width: 56rem) { .reiter { order: 0; width: auto; margin-right: auto; } }

.reiter-knopf {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.55rem 0.7rem 0.7rem;
  color: var(--stumm);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.reiter-knopf:hover { color: var(--papier); }
.reiter-knopf.an { color: var(--papier); border-bottom-color: var(--gelb); }
.reiter-knopf:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }

.pill {
  min-width: 1.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--flaeche3);
  color: var(--stumm);
  font-size: 0.6875rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pill:empty { display: none; }
.pill.warn { background: var(--gelb); color: var(--ink); font-weight: 600; }

.top-right { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.7rem; margin-left: auto; }
.wer { color: var(--stumm); font-size: 0.8125rem; }

.ghost {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--stumm);
  padding: 0.35rem 0.7rem;
  border-radius: var(--rand);
  cursor: pointer;
}
.ghost:hover { color: var(--papier); border-color: var(--stumm); }

/* ---------- Panels ---------- */

.panel[hidden] { display: none; }
.innen { max-width: 74rem; margin-inline: auto; padding: 1.75rem 1.5rem 5rem; }
.innen.weit { max-width: 88rem; }

.seitentitel { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.kopfzeile { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; }
.zaehler { margin: 0; color: var(--stumm); font-size: 0.8125rem; }
.leer { color: var(--stumm); }

h2.abschnitt {
  margin: 2rem 0 0.85rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gelb);
}
.seitentitel + h2.abschnitt { margin-top: 1.5rem; }

/* ---------- Übersicht ---------- */

.kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.kachel {
  background: var(--flaeche);
  border: 0;
  color: inherit;
  text-align: left;
  padding: 0.9rem 1rem 1rem;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;   /* sonst bleibt unter kurzen Kacheln ein Loch in der Reihe */
}
.kachel:hover { background: var(--flaeche2); }
.kachel:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }
.kachel b { display: block; font-size: 1.75rem; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kachel span { display: block; margin-top: 0.2rem; color: var(--stumm); font-size: 0.75rem; }
.kachel.dringend b { color: var(--gelb); }
.kachel.still b { color: var(--leise); }

.trichter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.trichter button {
  width: 100%;
  height: 100%;
  background: var(--flaeche);
  border: 0;
  border-top: 2px solid transparent;
  color: inherit;
  text-align: left;
  padding: 0.8rem 1rem 0.9rem;
  cursor: pointer;
}
.trichter button:hover { background: var(--flaeche2); border-top-color: var(--gelb); }
.trichter b { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.trichter span { color: var(--stumm); font-size: 0.75rem; }

.zwei { display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .zwei { grid-template-columns: 1fr 1fr; } }

.balken { display: grid; gap: 0.5rem; }
.balken-zeile { display: grid; grid-template-columns: 8rem 1fr 2.5rem; gap: 0.6rem; align-items: center; }
.balken-zeile span:first-child { color: var(--stumm); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-bar { height: 0.5rem; background: var(--flaeche3); border-radius: 999px; overflow: hidden; }
.balken-bar i { display: block; height: 100%; background: var(--gelb); }
.balken-zeile span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.balken h3 { margin: 1.25rem 0 0.6rem; font-size: 0.8125rem; color: var(--stumm); font-weight: 500; }

.spur { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.spur li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.8125rem;
}
.spur time { color: var(--leise); font-variant-numeric: tabular-nums; }
.spur em { font-style: normal; color: var(--stumm); }

/* ---------- Filter ---------- */

.filter {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  margin: 1.25rem 0;
}
.filter input[type="search"] { grid-column: 1 / -1; }
@media (min-width: 56rem) { .filter input[type="search"] { grid-column: span 2; } }
.filter.schmal { grid-template-columns: 1fr; margin: 0 0 0.75rem; }
.filter.schmal input[type="search"] { grid-column: auto; }

.filter input, .filter select {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  padding: 0.5rem 0.6rem;
  border-radius: var(--rand);
  min-width: 0;
}
.filter input:focus-visible, .filter select:focus-visible { outline: 2px solid var(--gelb); outline-offset: 1px; }

/* ---------- Bewerbungen als ausklappbare Zeilen ---------- */

.akten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.akte {
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--flaeche);
  overflow: hidden;
}
.akte.offen { border-color: rgba(244, 206, 20, 0.45); }

.akte-zeile {
  display: grid;
  grid-template-columns: 1.25rem 3rem minmax(0, 1fr) auto;
  grid-template-areas: "pfeil bild haupt rechts";
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0.7rem 1rem;
  cursor: pointer;
}
.akte-zeile > .pfeil { grid-area: pfeil; }
.akte-zeile > .zeilenbild { grid-area: bild; }
.akte-zeile > .akte-haupt { grid-area: haupt; }
.akte-zeile > .akte-rechts { grid-area: rechts; }

/* Am Handy passen Name und Zahlenspalte nicht nebeneinander. Die Zahlenspalte
   ist `auto` breit und laesst ihren Inhalt nicht umbrechen, sie nahm sich
   deshalb 275 von 325 Punkten und drueckte den Namen auf null Breite. Der
   brach dann Buchstabe fuer Buchstabe untereinander (Jakob, 28.08.).
   Unterhalb von 48rem stehen die Zahlen daher unter dem Namen. */
@media (max-width: 47.999rem) {
  .akte-zeile {
    grid-template-columns: 1.25rem 3rem minmax(0, 1fr);
    grid-template-areas:
      "pfeil bild haupt"
      "pfeil bild rechts";
    align-items: start;
    row-gap: 0.4rem;
    column-gap: 0.6rem;
  }
  .akte-zeile > .pfeil { align-self: center; }
  .akte-zeile > .akte-rechts {
    white-space: normal;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
  }
}

/* Profilbild in der Zeile */
.zeilenbild {
  width: 3rem;
  height: 4rem;
  border-radius: 3px;
  overflow: hidden;
  background: var(--flaeche2);
  display: block;
}
.zeilenbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zeilenbild.ohne {
  display: grid;
  place-items: center;
  color: var(--leise);
  font-size: 1.125rem;
  font-weight: 600;
  border: 1px dashed var(--linie);
}
.akte-zeile:hover { background: var(--flaeche2); }
.akte-zeile:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }

.pfeil { color: var(--stumm); transition: transform 0.15s ease; font-size: 0.8125rem; justify-self: center; }
.akte.offen .pfeil { transform: rotate(90deg); color: var(--gelb); }

.akte-haupt { min-width: 0; }
/* Die laufende Nummer steht vor dem Namen, ruhig und schmal. */
/* Die laufende Nummer stand bis zum 29.08. in Gelb und halbfett vor dem Namen
   und zog damit den Blick vor dem Menschen auf sich (Jakob). Sie wird
   gebraucht, um über eine Bewerbung zu sprechen, ist aber nie die
   Information, wegen der man die Zeile liest. Jetzt gedeckt und leicht
   kleiner, sie bleibt lesbar und tritt zurueck. */
.nummer { color: var(--leise); font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 400; flex: 0 0 auto; }

.akte-name { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.akte-name b { font-size: 0.9375rem; }
.akte-name .ref { color: var(--leise); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.akte-unter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.akte-rechts { display: flex; align-items: center; gap: 0.75rem; color: var(--stumm); font-size: 0.75rem; white-space: nowrap; }

.chip {
  font-size: 0.6875rem;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  border: 1px solid var(--linie);
  color: var(--stumm);
  white-space: nowrap;
}
.chip.gelb { border-color: var(--gelb); color: var(--gelb); }
.chip.gruen { border-color: var(--gruen); color: var(--gruen); }
.chip.rot { border-color: var(--rot); color: var(--rot); }
.chip.blau { border-color: var(--blau); color: var(--blau); }
.chip.alt { border-style: dashed; }

.akte-inhalt { padding: 0 1rem 1.25rem; border-top: 1px solid var(--linie); }
.akte-inhalt[hidden] { display: none; }

h3.block {
  margin: 1.5rem 0 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gelb);
}

/* Nachschlagewerk in der Akte: Stammdaten, Nachrichten und Einwilligungen
   liegen zugeklappt unter der eigentlichen Arbeit (Jakob, 28.08.). Die
   Beschriftung uebernimmt den Text der jeweiligen h3.block, deshalb sieht
   sie genauso aus. */
.faecher { margin-top: 1.5rem; display: grid; gap: 0.5rem; }

.fach {
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--flaeche);
}
.fach > summary {
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gelb);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fach > summary::-webkit-details-marker { display: none; }
.fach > summary::before {
  content: "▸";
  color: var(--stumm);
  font-size: 0.8125rem;
  letter-spacing: 0;
  transition: transform 0.15s ease;
}
.fach[open] > summary::before { transform: rotate(90deg); color: var(--gelb); }
.fach > summary:hover { background: var(--flaeche2); }
.fach > summary:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }
.fach > div { padding: 0 0.9rem 1rem; }
/* Der erste Absatz im Fach braucht keinen Abstand nach oben, die Beschriftung
   sitzt schon darueber. */
.fach > div > *:first-child { margin-top: 0; }

.daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1.25rem 0 0;
}
.daten div { min-width: 0; }
/* Gruppentitel in der Feldliste, seit 02.09. nach Sinn geordnet. Leiser als
   h3.block, weil er innerhalb eines Blocks gliedert und nicht davor steht. */
h4.daten-titel {
  margin: 1.1rem 0 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--leise);
}
h4.daten-titel:first-of-type { margin-top: 0.4rem; }

/* Creator-Bereich in der Akte: Anfragen, Verlauf, Freigaben (02.09.) */
.creator-anfragen { margin-top: 0.8rem; }
.creator-anfragen .anfrage-zeile { border: 1px solid var(--linie, #222); border-left: 3px solid #555; border-radius: 0.5rem; margin: 0.4rem 0; background: var(--karte, #141414); }
.creator-anfragen .anfrage-zeile.offen { border-left-color: var(--gelb, #F4CE14); }
.creator-anfragen .anfrage-zeile.angenommen { border-left-color: #7ee787; }
.creator-anfragen .anfrage-kopf { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 0.6rem 0.8rem; cursor: pointer; font: inherit; }
.creator-anfragen .anfrage-kopf .chip { margin-left: 0.4rem; }
.creator-anfragen .anfrage-fach { padding: 0 0.8rem 0.8rem; }
.creator-anfragen .verlauf { list-style: none; padding: 0; margin: 0.6rem 0; }
.creator-anfragen .verlauf li { padding: 0.5rem 0.7rem; border-radius: 0.5rem; margin: 0.3rem 0; max-width: 85%; white-space: pre-line; line-height: 1.45; }
.creator-anfragen .verlauf li.raus { background: #1b1b1b; margin-left: auto; }
.creator-anfragen .verlauf li.rein { background: #24230f; }
.creator-anfragen .verlauf .meta { display: block; color: var(--leise, #888); font-size: 0.75rem; margin-top: 0.3rem; }
.creator-anfragen textarea, .creator-anfragen input[type="text"], .creator-anfragen select { display: block; width: 100%; box-sizing: border-box; margin: 0.3rem 0; background: #0b0b0b; color: inherit; border: 1px solid var(--linie, #333); border-radius: 0.4rem; padding: 0.45rem 0.6rem; font: inherit; }
.creator-anfragen .zeile { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.creator-anfragen details.anfrage-neu { margin: 0.6rem 0; padding: 0.5rem 0.8rem; border: 1px dashed var(--linie, #333); border-radius: 0.5rem; }
.creator-anfragen details.anfrage-neu summary { cursor: pointer; }
.creator-anfragen .freigaben { margin-top: 0.6rem; border-top: 1px solid var(--linie, #222); padding-top: 0.4rem; }
.creator-anfragen .freigaben h5 { margin: 0.3rem 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leise, #888); }
.creator-anfragen .verwendungen { padding-left: 1.1rem; font-size: 0.8125rem; }
.creator-anfragen .verwendungen li.warn { color: #ff6b6b; }
.creator-anfragen .zitat { border-left: 3px solid #333; padding-left: 0.8rem; color: #ccc; white-space: pre-line; }
.creator-anfragen label.haken { display: flex; gap: 0.4rem; align-items: center; margin: 0.3rem 0; }
.daten dt { color: var(--leise); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; }
.daten dd { margin: 0.15rem 0 0; word-break: break-word; }
.daten dd a { color: var(--blau); }

.fliesstext {
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--flaeche2);
  border-left: 2px solid var(--linie);
  border-radius: 0 var(--rand) var(--rand) 0;
  white-space: pre-wrap;
  line-height: 1.6;
}
.fliesstext + .fliesstext { margin-top: 0.5rem; }
.fliesstext .orig { display: block; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--linie); color: var(--leise); font-size: 0.75rem; }

/* Bilder */

.bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bilder button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--flaeche2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.bilder button:focus-visible { outline: 2px solid var(--gelb); outline-offset: 1px; }
.bilder img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bilder figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.78);
  color: var(--papier);
  font-size: 0.625rem;
  padding: 0.25rem 0.4rem;
  text-align: left;
}
.bilder .verifikation { border-color: var(--gelb); }
.bilder .video img { aspect-ratio: 3 / 4; }
.bilder .video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.fehlt { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0; }

/* Entscheidung */

.entscheidung { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.entscheidung textarea {
  width: 100%;
  min-height: 3.5rem;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  padding: 0.55rem 0.65rem;
  border-radius: var(--rand);
  resize: vertical;
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.knopf {
  border: 1px solid var(--linie);
  background: var(--flaeche2);
  padding: 0.45rem 0.9rem;
  border-radius: var(--rand);
  cursor: pointer;
}
.knopf:hover { background: var(--flaeche3); }
.knopf.gut { border-color: var(--gruen); color: var(--gruen); }
.knopf.schlecht { border-color: var(--rot); color: var(--rot); }
.knopf.haupt { background: var(--gelb); color: var(--ink); border-color: var(--gelb); font-weight: 600; }
.knopf.klein { padding: 0.28rem 0.6rem; font-size: 0.75rem; }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Nachrichten ---------- */

/* minmax(0,1fr) statt 1fr: sonst waechst eine Spalte mit ihrem laengsten Wort
   ueber die Breite hinaus und der Board-Bereich steht seitlich ueber. */
.post { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; min-width: 0; }
.post-liste, .post-verlauf { min-width: 0; }
@media (min-width: 62rem) { .post { grid-template-columns: 23rem minmax(0, 1fr); align-items: start; } }

.gespraeche { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--rand); overflow: hidden; }
.gespraech {
  width: 100%;
  background: var(--flaeche);
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  display: block;
}
.gespraech:hover { background: var(--flaeche2); }
.gespraech.an { background: var(--flaeche2); border-left-color: var(--gelb); }
.gespraech:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }
.gespraech-kopf { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.gespraech-kopf b { font-size: 0.875rem; }
.gespraech-kopf time { color: var(--leise); font-size: 0.6875rem; white-space: nowrap; }
.gespraech-vor { margin: 0.25rem 0 0; color: var(--stumm); font-size: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gespraech-fuss { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }

.post-verlauf { border: 1px solid var(--linie); border-radius: var(--rand); padding: 1.25rem; background: var(--flaeche); min-height: 20rem; }
/* Auf schmalen Schirmen klappt der Verlauf unter der angeklickten Zeile auf,
   die feste Spalte tritt dort ab (Jakob, 26.08.). */
@media (max-width: 61.999rem) {
  .post-verlauf { display: none; }
  .gespraeche { display: block; }
  .verlauf-fach { background: var(--flaeche); border-top: 2px solid var(--gelb); padding: 1rem 0.85rem; }
  .verlauf-fach:empty { display: none; }
}
.verlauf-fach { overflow-wrap: anywhere; }

.verlauf { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; }
.msg { border: 1px solid var(--linie); border-radius: var(--rand); padding: 0.7rem 0.85rem; background: var(--flaeche2); }
.msg.rein { border-left: 3px solid var(--blau); }
.msg.raus { border-left: 3px solid var(--gelb); }
.msg.entwurf { border-left-style: dashed; }
.msg-kopf { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; justify-content: space-between; color: var(--leise); font-size: 0.6875rem; }
.msg-betreff { margin: 0.3rem 0 0; font-weight: 600; }
.msg-text { margin: 0.4rem 0 0; white-space: pre-wrap; line-height: 1.6; }
.msg-orig { margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--linie); color: var(--leise); font-size: 0.75rem; white-space: pre-wrap; }
.msg-fuss { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }

/* Die zwei Toepfe (29.08.). Sie stehen ueber den Filtern, weil sie die
   groebere Entscheidung sind: erst welche Menge, dann wie eingegrenzt. */
.topfleiste { display: flex; gap: 0.4rem; margin: 0 0 0.8rem; flex-wrap: wrap; }
.topf {
  background: var(--flaeche2); border: 1px solid var(--linie);
  border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer;
  font-size: 0.85rem; color: var(--stumm); display: inline-flex; gap: 0.45rem; align-items: center;
}
.topf:hover { color: var(--papier); }
.topf.an { background: var(--gelb); border-color: var(--gelb); color: var(--ink); font-weight: 600; }
.topf-zahl {
  font-variant-numeric: tabular-nums; font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0 0.4rem; min-width: 1.4rem; text-align: center;
}
.topf.an .topf-zahl { background: rgba(0, 0, 0, 0.16); }

/* Der eigene Text, vollstaendig und mit Absaetzen. Er wurde bis zum 29.08.
   bei 320 Zeichen abgeschnitten, wodurch bei Artem die Angabe zu Tipico und
   DAZN wegfiel, also genau das Unterscheidende. */
.profil-ueber { margin: 0.7rem 0 0; max-width: 65ch; }
.profil-ueber p { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.65; color: var(--papier); }
.profil-ueber p:last-child { margin-bottom: 0; }
.profil-orig { margin: 0.3rem 0 0; }
.profil-orig summary { cursor: pointer; color: var(--stumm); font-size: 0.78rem; }
.profil-orig p { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--stumm); max-width: 65ch; }
.profil-lauf { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--leise); }
.profil-satz a { color: var(--gelb); }

/* Die ruhige Zeile unter den Kacheln: was auf Null steht, bekommt keine
   eigene Flaeche mehr, sondern eine Zeile (29.08.). */
.offen-ruhig { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--leise); }

/* Gespraechsliste mit Gesicht (29.08.). Ohne Bild war sie eine Namensliste,
   und man wusste beim Durchgehen nicht, mit wem man spricht. */
.gespraech-oben { display: flex; gap: 0.6rem; align-items: flex-start; }
.gespraech-text { min-width: 0; flex: 1 1 auto; }
.zeilenbild.klein { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; }
.zeilenbild.klein img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* Die rechte Spalte vor der ersten Auswahl (29.08.) */
.post-leer { padding: 2rem 1.5rem; }
.post-hinweis { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 26rem; }
.post-punkt {
  display: flex; align-items: baseline; gap: 0.7rem; text-align: left;
  background: var(--flaeche2); border: 1px solid var(--linie);
  border-radius: var(--rand); padding: 0.7rem 0.9rem; cursor: pointer; color: inherit;
}
.post-punkt:disabled { cursor: default; opacity: 0.75; }
.post-punkt:not(:disabled):hover { border-color: var(--gelb); }
.post-punkt b { font-size: 1.35rem; color: var(--gelb); font-variant-numeric: tabular-nums; min-width: 1.6rem; }
.post-punkt span { font-size: 0.85rem; color: var(--stumm); }
.post-ruhig { color: var(--leise); font-size: 0.85rem; margin: 0; }
.spur-leise { color: var(--leise); font-size: 0.78rem; font-style: italic; }

/* Steckbrief (29.08.). Ganze Saetze statt Feldliste. Der Name traegt die
   Zeile, alles andere ordnet sich ihm unter. */
/* Zeilenlaenge. Gemessen am 29.08. im Board: 152 Zeichen je Zeile im
   Fliesstext. Lesbar sind 45 bis 75, alles darueber zwingt das Auge, beim
   Zeilenwechsel den Anfang zu suchen. Genau daran lag der Eindruck, die
   Ansicht sei "fuer eine Maschine gemacht": es war nicht die Menge der
   Felder, sondern die Breite der Zeilen.
   65ch trifft die Mitte des lesbaren Bereichs. Chips, Marken und die
   Feldliste sind ausgenommen, sie sind keine Fliesstexte. */
.profil { margin: 0 0 1.6rem; }
.profil-satz, .profil-ueber, .profil-wunsch, .profil-grenze, .profil-eck,
.profil-abweichung, .fliesstext, .msg-text {
  max-width: 65ch;
}
.profil-name { max-width: 30ch; }
.profil-name {
  margin: 0; font-size: 1.45rem; line-height: 1.2; font-weight: 700;
  letter-spacing: -0.01em;
}
.profil-abweichung { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--gelb); }
.profil-eck {
  margin: 0.45rem 0 0; font-size: 0.95rem; color: var(--papier);
}
.profil-satz { margin: 0.55rem 0 0; font-size: 0.9rem; line-height: 1.55; }
.profil-wunsch {
  margin: 0.7rem 0 0; font-size: 0.95rem; line-height: 1.5;
  font-style: italic; color: var(--papier);
  border-left: 2px solid var(--gelb); padding-left: 0.7rem;
}
.profil-grenze {
  margin: 0.7rem 0 0; font-size: 0.9rem; line-height: 1.5;
  background: rgba(248, 113, 113, 0.1); border-radius: 6px;
  padding: 0.5rem 0.7rem;
}
.profil-kontakt { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--stumm); }
/* Der Weg in die Didit-Konsole, wenn eine Pruefung haengt (01.09.) */
.profil-post { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--stumm); }
.profil-post strong { color: var(--papier); }

/* Offene To-dos (01.09.). Jede Zeile ist ein Knopf, nicht nur ein Link am
   Rand: wer eine Aufgabe abarbeiten will, zielt nicht erst auf ein Wort. */
.abschnitt-zahl {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: var(--gelb); color: var(--ink);
  font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0; vertical-align: middle;
}
.abschnitt-zahl:empty { display: none; }

.handeln-block { margin: 0 0 1.6rem; }
.handeln-titel {
  margin: 0 0 0.15rem; font-size: 0.9rem; font-weight: 600; color: var(--papier);
  display: flex; align-items: baseline; gap: 0.5rem;
}
.handeln-zahl {
  font-size: 0.75rem; color: var(--stumm); font-variant-numeric: tabular-nums;
  background: var(--flaeche3); border-radius: 999px; padding: 0 0.45rem;
}
.handeln-hinweis { margin: 0 0 0.55rem; font-size: 0.78rem; color: var(--leise); }

.handeln-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
  border-radius: var(--rand); overflow: hidden;
}
.handeln-zeile {
  width: 100%; background: var(--flaeche); border: 0; color: inherit;
  text-align: left; padding: 0.65rem 0.9rem; cursor: pointer;
  display: flex; gap: 0.65rem; align-items: baseline; flex-wrap: wrap;
}
.handeln-zeile:hover { background: var(--flaeche2); }
.handeln-zeile:hover .handeln-weg { color: var(--gelb); border-color: var(--gelb); }
.handeln-zeile:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }
.handeln-nr { color: var(--leise); font-variant-numeric: tabular-nums; font-size: 0.78rem; flex: 0 0 auto; }
.handeln-zeile b { font-weight: 600; }
.handeln-zusatz { color: var(--stumm); font-size: 0.8rem; }
.handeln-weg {
  margin-left: auto; border: 1px solid var(--linie); border-radius: 999px;
  padding: 0.2rem 0.65rem; font-size: 0.75rem; color: var(--stumm);
  white-space: nowrap; flex: 0 0 auto;
  transition: color .12s ease, border-color .12s ease;
}
@media (max-width: 32rem) {
  .handeln-weg { margin-left: 0; }
}

.profil-pruefung { margin: 0.7rem 0 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.profil-pruefung a { text-decoration: none; }
.profil-kontakt strong { color: var(--papier); }

/* Was er dreht (29.08.). Marken statt Tabelle, weil beim Sichten die Menge
   zaehlt und nicht die einzelne Zeile. */
.pr-gruppe-zeile { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.5rem 0; flex-wrap: wrap; }
.pr-marken { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.pr-marke {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; border: 1px solid var(--linie); white-space: nowrap;
}
.pr-marke.ja { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.4); }
.pr-marke.evtl { background: rgba(244, 206, 20, 0.13); border-color: rgba(244, 206, 20, 0.35); }
.pr-marke.nein { background: rgba(255, 255, 255, 0.05); color: var(--stumm); }
.pr-nein { margin-top: 0.5rem; }
.pr-nein summary { cursor: pointer; color: var(--stumm); font-size: 0.8rem; padding: 0.2rem 0; }
.pr-nein .pr-marken { margin-top: 0.4rem; }

/* Entwurf bearbeiten, klappt in der Karte auf (29.08.) */
.entwurf-form { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.entwurf-form input,
.entwurf-form textarea {
  width: 100%;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  padding: 0.5rem 0.6rem;
  border-radius: var(--rand);
}
.entwurf-form textarea { resize: vertical; line-height: 1.5; min-height: 8rem; }
.entwurf-knoepfe { display: flex; gap: 0.4rem; }

.senden { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.senden select, .senden input, .senden textarea {
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  padding: 0.5rem 0.6rem;
  border-radius: var(--rand);
  width: 100%;
}
.senden textarea { min-height: 7rem; resize: vertical; }
.vorschau { color: var(--stumm); font-size: 0.75rem; margin: 0; }

/* ---------- Lupe ---------- */

.lupe { border: 0; background: transparent; padding: 0; max-width: 96vw; max-height: 96vh; }
.lupe::backdrop { background: rgba(0, 0, 0, 0.9); }
.lupe img { max-width: 92vw; max-height: 82vh; display: block; margin-inline: auto; }
.lupe-leiste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.2rem; color: var(--papier); }
.lupe-leiste button { background: var(--gelb); color: var(--ink); border: 0; padding: 0.4rem 0.9rem; border-radius: var(--rand); cursor: pointer; }

/* ---------- Meldung ---------- */

.meldung { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; border-radius: var(--rand); font-size: 0.8125rem; }
.meldung.ok { border: 1px solid var(--gruen); color: var(--gruen); }
.meldung.fehler { border: 1px solid var(--rot); color: var(--rot); }

/* ---------- Anmeldung ---------- */

.anmelden { max-width: 22rem; margin: 15vh auto; padding: 1.5rem; border: 1px solid var(--linie); border-radius: var(--rand); background: var(--flaeche); }
.anmelden .marke { display: block; width: auto; height: 1.75rem; margin: 0 0 1.25rem; }
.anmelden h1 { margin: 0 0 1rem; font-size: 1.125rem; }
.anmelden label { display: block; margin-bottom: 0.75rem; }
.anmelden span { display: block; color: var(--stumm); font-size: 0.75rem; margin-bottom: 0.2rem; }
.anmelden input { width: 100%; background: var(--ink); border: 1px solid var(--linie); padding: 0.5rem; border-radius: var(--rand); }

/* ---------- Einwilligungen, aufklappbar ---------- */

.zustimmungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--rand); overflow: hidden; }

.zustimmung {
  width: 100%;
  background: var(--flaeche2);
  border: 0;
  border-left: 3px solid var(--gruen);
  text-align: left;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  display: block;
}
.zustimmung:hover { background: var(--flaeche3); }
.zustimmung.an { background: var(--flaeche3); }
.zustimmung:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }
.zustimmung-kopf { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline; }
.zustimmung-kopf b { font-size: 0.875rem; }
.haken { color: var(--gruen); font-weight: 700; }
.zustimmung-meta { color: var(--leise); font-size: 0.6875rem; margin-left: auto; font-variant-numeric: tabular-nums; }

.zustimmung-auf { background: var(--flaeche2); padding: 0.25rem 0.9rem 0.9rem 1.1rem; }
.zustimmung-auf[hidden] { display: none; }
.zustimmung-wortlaut {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--ink);
  border-left: 2px solid var(--gelb);
  border-radius: 0 var(--rand) var(--rand) 0;
  line-height: 1.6;
}
.zustimmung-wortlaut .orig {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 0.8125rem;
}
.zustimmung-auf .daten { margin-top: 0.9rem; }

/* ---------- Vorschlaege fuer Nachrichten ---------- */

.vorschlaege {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.vorschlag {
  width: 100%;
  height: 100%;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  text-align: left;
  padding: 0.7rem 0.8rem 0.8rem;
  cursor: pointer;
  display: block;
}
.vorschlag:hover { background: var(--flaeche3); border-color: var(--stumm); }
.vorschlag.an { border-color: var(--gelb); background: var(--flaeche3); }
.vorschlag:focus-visible { outline: 2px solid var(--gelb); outline-offset: 1px; }
.vorschlag b { display: block; font-size: 0.875rem; margin-bottom: 0.25rem; }
.vorschlag.an b { color: var(--gelb); }
.vorschlag span { display: block; color: var(--stumm); font-size: 0.75rem; line-height: 1.45; }

.muster {
  margin: 0;
  padding: 0.8rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--linie);
  border-left: 2px solid var(--gelb);
  border-radius: var(--rand);
  color: var(--stumm);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 14rem;
  overflow: auto;
}
.muster[hidden] { display: none; }
.senden input[hidden], .senden textarea[hidden] { display: none; }

/* ---------- Hinweis zum zweiten Faktor ---------- */

.faktor {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gelb);
  border-radius: var(--rand);
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  max-width: 42rem;
}
.faktor[hidden] { display: none; }
.faktor b { font-size: 0.9375rem; }
.faktor span { color: var(--stumm); font-size: 0.8125rem; line-height: 1.6; }
.faktor .geheimnis {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--ink);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--gelb);
  user-select: all;
  word-break: break-all;
}
.faktor .adresse {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--leise);
  word-break: break-all;
  user-select: all;
}
.faktor .knopfreihe { width: 100%; }
.faktor input {
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  padding: 0.45rem 0.6rem;
  border-radius: var(--rand);
  width: 11rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
}

.faktor .qr {
  background: #fff;
  padding: 0.7rem;
  border-radius: var(--rand);
  line-height: 0;
}
.faktor .qr svg { display: block; }
.faktor .oder { font-size: 0.75rem; color: var(--leise); }

/* ---------- Vorschau, Sprachumschalter, Antwort anfordern ---------- */

.vorschau { width: min(44rem, 94vw); max-height: 92vh; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rand); padding: 0; }
.vorschau-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--linie);
  color: var(--stumm);
  font-size: 0.8125rem;
}
.vorschau-kopf button { background: var(--gelb); color: var(--ink); border: 0; padding: 0.35rem 0.8rem; border-radius: var(--rand); cursor: pointer; font-weight: 600; }
.vorschau iframe { display: block; width: 100%; height: min(70vh, 40rem); border: 0; background: var(--ink); }

.sprachwahl { display: flex; gap: 0.25rem; margin: 0.5rem 0 0.1rem; }
.sprachknopf {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--leise);
  padding: 0.12rem 0.5rem;
  border-radius: 2px;
  font-size: 0.6875rem;
  cursor: pointer;
}
.sprachknopf:hover { color: var(--papier); }
.sprachknopf.an { border-color: var(--gelb); color: var(--gelb); }
.nur-original { display: block; margin-top: 0.4rem; font-size: 0.6875rem; color: var(--leise); }

.vermerk { font-size: 0.6875rem; color: var(--stumm); align-self: center; }
.vermerk.gut { color: var(--gruen); }
.vermerk.leise { color: var(--leise); font-style: italic; }

.anfordern {
  margin-top: 0.7rem;
  padding: 0.8rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--linie);
  border-left: 2px solid var(--gelb);
  border-radius: var(--rand);
  display: grid;
  gap: 0.5rem;
}
.anfordern b { font-size: 0.875rem; }
.anfordern span { color: var(--stumm); font-size: 0.75rem; line-height: 1.55; }
.anfordern textarea {
  width: 100%;
  min-height: 4.5rem;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  padding: 0.5rem 0.6rem;
  border-radius: var(--rand);
  resize: vertical;
}

/* ---------- Aufnahme einordnen ---------- */

.lupe-arten { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.2rem 0.4rem; }
.artknopf {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--linie);
  color: var(--stumm);
  padding: 0.35rem 0.75rem;
  border-radius: var(--rand);
  cursor: pointer;
  font-size: 0.8125rem;
}
.artknopf:hover:not(:disabled) { color: var(--papier); border-color: var(--stumm); }
.artknopf.an { border-color: var(--gelb); color: var(--gelb); font-weight: 600; }
.artknopf:disabled { opacity: 0.5; cursor: wait; }
.artknopf:focus-visible { outline: 2px solid var(--gelb); outline-offset: 1px; }

/* ---------- Blaettern in der Lupe ---------- */

.lupe-buehne { position: relative; display: block; }
.lupe-buehne img { max-width: 92vw; max-height: 78vh; display: block; margin-inline: auto; }

.blaettern {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 4.5rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--linie);
  color: var(--papier);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--rand);
}
.blaettern:hover { background: rgba(0, 0, 0, 0.8); border-color: var(--gelb); color: var(--gelb); }
.blaettern:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }
.blaettern[hidden] { display: none; }
.blaettern.zurueck { left: 0.5rem; }
.blaettern.vor { right: 0.5rem; }

.zaehlwerk {
  color: var(--stumm);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  margin-right: 0.75rem;
}
.lupe-leiste { flex-wrap: wrap; }
/* Das endgueltige Loeschen. Abgesetzt, ruhig, mit Widerstand vor dem Klick. */
.loeschbereich { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--linie); }
.loeschkasten { margin-top: 0.8rem; border: 1px solid rgba(220, 60, 60, 0.45); border-radius: var(--rand); padding: 0.9rem 1rem; background: rgba(220, 60, 60, 0.06); }
.loeschkasten p { margin: 0 0 0.8rem; color: var(--stumm); font-size: 0.8125rem; line-height: 1.6; }
.loeschkasten input { width: 100%; max-width: 100%; margin-bottom: 0.5rem; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: var(--rand); color: var(--papier); padding: 0.5rem 0.65rem; }
.loeschkasten input:focus { outline: 2px solid var(--gelb); outline-offset: 0; }