/* ===================================================================
   Gemeinsame Ansicht für LIVE, Content, Technik, Community und Schutz.
   =================================================================== */

.eintrag-karte {
  padding: 15px 17px; margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: var(--radius-klein);
}
.eintrag-karte[data-dringlich="hoch"]    { border-left-color: #d8656e; }
.eintrag-karte[data-dringlich="mittel"]  { border-left-color: #4b6c8a; }
.eintrag-karte[data-dringlich="niedrig"] { border-left-color: #3c4a5a; }
.eintrag-karte[data-status="erledigt"] { opacity: .55; }

/* DIE KLICKBARE KARTE (19.09.2026) -- nur dort, wo ein Video dahinter
   liegt.

   Sie muss SAGEN, dass sie klickbar ist, bevor jemand darauf tippt.
   Eine Fläche, die erst beim Berühren verrät, dass sie ein Weg war,
   ist auf dem Handy unsichtbar -- dort gibt es kein Darüberfahren.
   Deshalb der ruhige, dauerhaft sichtbare Rand links: Er steht schon
   da, bevor die Maus kommt.

   Bewusst KEIN Farbwechsel der Fläche und kein Leuchten. Zwischen
   siebzehn Karten untereinander wäre das Unruhe, und was hier gefragt
   ist, ist eine Einladung, kein Blinken. */
.eintrag-karte[data-klickbar="ja"] {
  cursor: pointer;
  border-left-color: color-mix(in srgb, var(--akzent, #5aa0e0) 55%, var(--rand));
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.eintrag-karte[data-klickbar="ja"]:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--akzent, #5aa0e0) 34%, var(--rand));
  border-left-color: color-mix(in srgb, var(--akzent, #5aa0e0) 85%, transparent);
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .9);
}
/* Wer über den Knopf fährt, soll den Knopf spüren und nicht die ganze
   Karte wackeln sehen. */
.eintrag-karte[data-klickbar="ja"]:has(.videozeile__weg:hover) {
  transform: none;
}
/* Das Standbild bekommt denselben Hinweis: Der Zeiger sagt „hier geht
   es weiter", schon bevor man liest. */
.eintrag-karte[data-klickbar="ja"] .bildstreifen__feld { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .eintrag-karte[data-klickbar="ja"] { transition: none; }
  .eintrag-karte[data-klickbar="ja"]:hover { transform: none; }
}

.eintrag-kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.eintrag-titel { font-weight: 600; font-size: .96rem; flex: 1 1 240px; }

/* ---- DER KARTENKOPF AUF DEM HANDY (18.09.2026) --------------------

   Am Rechner stehen Etikett, Titel und Zustand nebeneinander, und das
   ist richtig. Auf 412 px hing es dagegen an der Länge des Etiketts:
   Bei „SONSTIGES" passte der Titel noch daneben, und „Offen" rutschte
   in die Zeile darunter. Bei „FÜR DEN STREAM" passte er nicht mehr --
   dann stand das Etikett allein oben und „Offen" plötzlich RECHTS vom
   Titel.

   Fünf Karten untereinander sahen damit auf drei verschiedene Arten
   aus, ohne dass sich inhaltlich etwas unterschied. Das liest man als
   Unordnung, nicht als Information.

   Unter 560 px deshalb feste Reihenfolge: die Marken oben
   nebeneinander, der Titel darunter über die volle Breite. Immer
   gleich, unabhängig davon, wie lang das Etikett ist. */
@media (max-width: 560px) {
  .eintrag-kopf { align-items: center; row-gap: 6px; }
  .eintrag-titel { flex: 1 1 100%; order: 2; }
  .marke-art { order: 1; }
  .wunsch-stand { order: 1; }
  .bewertung { order: 3; }
}

.marke-art {
  padding: 1px 9px; border-radius: 999px;
  background: rgba(63, 189, 245, .14); color: #7fd2fb;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

/* Bewertung als Punktreihe statt als Zahl -- auf einen Blick erfassbar,
   und ohne Sterne, die im Dunkeln flimmern. */
.bewertung { display: inline-flex; gap: 3px; align-items: center; }
.bewertung__punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(150, 186, 220, .22);
}
.bewertung__punkt[data-voll="ja"] { background: var(--akzent); }

.eintrag-text {
  margin: 9px 0 0; font-size: .87rem; color: var(--text-leise);
  line-height: 1.55; white-space: pre-wrap;
}

.eintrag-fuss {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 11px; font-size: .77rem; color: var(--text-still);
}
.eintrag-knoepfe { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

/* =====================================================================
   DER TREFF (11.09.2026)

   Drei Zusaetze, und nur auf den sieben Brettern der Community.

   SIE STEHEN IN EINER EIGENEN ZEILE UNTER DEM FUSS und nicht darin.
   Der Fuss ist eine Auskunft (Datum, wer, Stand); hier stehen Dinge,
   die man TUT. Zusammen in einer Reihe waere "von Frida" so breit wie
   "Will ich auch" -- und auf einem Handy laege beides ineinander.
   ===================================================================== */
.treff-knoepfe {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rand);
}

/* Der Rollenname am Beitrag. Leise, aber nicht versteckt: Er soll
   beim Lesen auffallen, ohne den Beitrag zu ueberschreiben. Deshalb
   dieselbe Groesse wie der Fuss und nur ein kraeftigerer Ton. */
.treff-rolle {
  color: var(--text-leise);
  font-weight: 600;
  letter-spacing: .01em;
}

/* "Will ich auch". Der einzige Knopf auf diesen Brettern, der keine
   Verwaltung ist, sondern eine Meinung -- er darf deshalb als
   einziger einen Ton tragen.

   GEDRUECKT WIRD ER RUHIGER, NICHT LAUTER. Der naheliegende Entwurf
   waere ein kraeftiges Leuchten fuer "ich bin dabei". Nur sieht man
   auf einer Wunschliste meist ZEHN Karten gleichzeitig, und wer bei
   der Haelfte mitgestimmt hat, saehe zehn leuchtende Flaechen
   untereinander. Das ist genau das, was diese Seite nicht sein soll
   (Hausregel: augenschonend). Der gedrueckte Zustand bekommt deshalb
   eine gefuellte Flaeche in gedecktem Ton, der ungedrueckte bleibt
   ein Umriss -- unterscheidbar, ohne zu blenden. */
.treff-will {
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand-hell);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.treff-will:hover:not(:disabled) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
}
.treff-will[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  border-color: color-mix(in srgb, var(--akzent) 42%, transparent);
}
.treff-will:disabled { opacity: .55; cursor: default; }

/* Dieselbe Ruecksicht wie ueberall: Wer Bewegung abbestellt hat,
   bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .treff-will { transition: none; }
}

/* Die Filterleiste steht seit 22.09.2026 in gate.css -- sie wird
   inzwischen auf drei Seiten gebraucht, und gate.css laedt jede.
   Sie hier zu lassen hiesse, sie beim vierten Mal wieder zu
   kopieren; genau so ist .knopf-still schon einmal auf einer
   Seite als nacktes Kaestchen erschienen. */


@media (max-width: 620px) {
  .eintrag-knoepfe { margin-left: 0; width: 100%; }
}

/* =====================================================================
   UNTERWEISUNGEN — beidseitig bestaetigen

   Drei Stufen, drei Farben. Die mittlere ("halb") ist die wichtigste:
   Ein Nachweis, bei dem nur einer unterschrieben hat, ist KEIN Nachweis.
   Wer das nicht sieht, haelt ihn fuer fertig -- und merkt es erst, wenn
   jemand danach fragt. Deshalb bekommt sie eine eigene, warnende Farbe
   und nicht einfach ein blasses Gruen.
   ===================================================================== */

.schulung { margin: 0 0 30px; }
.schulung__kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.schulung__unter {
  margin: 4px 0 0; max-width: 68ch;
  font-size: .86rem; line-height: 1.55; color: var(--text-leise);
}
.schulung__wahl { display: grid; gap: 4px; min-width: 0; }
.schulung__liste { display: grid; gap: 11px; }

.unterweisung {
  --stufe-ton: var(--text-still);
  position: relative; overflow: hidden;
  padding: 15px 17px 14px;
  border: 1px solid color-mix(in srgb, var(--stufe-ton) 26%, var(--rand));
  border-radius: var(--radius-klein);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--stufe-ton) 8%, transparent), transparent 55%),
    var(--flaeche);
}
.unterweisung::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--stufe-ton),
    color-mix(in srgb, var(--stufe-ton) 30%, transparent));
}
.unterweisung[data-stufe="offen"]  { --stufe-ton: #6f89a8; }
/* Bewusst warnend: halb bestaetigt sieht nach fertig aus, ist es aber
   nicht. Diese Verwechslung ist genau die, die einen Nachweis wertlos
   macht. */
.unterweisung[data-stufe="halb"]   { --stufe-ton: #e0a33c; }
.unterweisung[data-stufe="fertig"] { --stufe-ton: #4dab77; }

.unterweisung__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.unterweisung__titel { margin: 0 0 3px; font-size: .98rem; font-weight: 650; color: var(--text); }
.unterweisung__datei { margin: 0; font-size: .8rem; color: var(--ton, var(--akzent)); }
.unterweisung__text { margin: 5px 0 0; font-size: .85rem; color: var(--text-leise); }
.unterweisung__marke {
  flex: none; padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--stufe-ton) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--stufe-ton) 12%, transparent);
  color: var(--stufe-ton);
  font-size: .72rem; letter-spacing: .06em;
}

/* Die beiden Unterschriften nebeneinander -- man soll auf einen Blick
   sehen, WER fehlt, nicht nur DASS etwas fehlt. */
.unterschriften {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-bottom: 12px;
}
/* =====================================================================
   SIE SIND UNTERSCHRIFTEN -- ALSO SEHEN SIE JETZT AUCH SO AUS
   (screen6, 09.09.2026)

   Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler
   sein."

   WAS SIE WIRKLICH SIND, stand nur im Klassennamen: Auf einer
   Unterweisung bestaetigen ZWEI Personen, dass sie sie gelesen haben
   -- der Creator und seine Betreuung. Das ist kein Statusfeld, das ist
   eine Gegenzeichnung. Gezeichnet waren sie aber als zwei graue
   Kaesten mit abgerundeten Ecken, die man auf dem dunklen Grund kaum
   sah. Zwei Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile
   sagt "hier fehlt jemand".

   ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code schon als
   `data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch
   Gruen:

     OFFEN   eine gestrichelte Linie mit einem leeren Platz darauf.
             Sie WARTET sichtbar. Der Federstrich links davor deutet
             an, wo man ansetzt.
     DA      eine durchgezogene gruene Linie, der Name darueber, und
             rechts oben ein gepraegtes Siegel mit Haken -- wie ein
             abgestempeltes Formular.

   GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die
   beiden Felder stehen nebeneinander in einem Raster. Waere das
   unterschriebene hoeher, spraenge die Karte in dem Moment, in dem
   jemand unterschreibt -- und zwar unter dem Finger dessen, der gerade
   auf den Knopf gedrueckt hat.

   KEINE ZWEITE FASE. Die Karte drumherum (`.unterweisung`) hat schon
   eine aus der Modulliste. Eine abgeschraegte Ecke IN einer
   abgeschraegten Ecke liest sich als Fehler, nicht als Absicht. Das
   Feld traegt deshalb die andere Formensprache des Hauses: die Linie.
   ================================================================== */
.unterschrift {
  position: relative;
  display: grid; gap: 3px;
  padding: 9px 12px 11px 15px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .035), transparent 60%);
}
/* Der Federstrich links: ein kurzer senkrechter Anstrich, der zeigt,
   wo eine Unterschrift beginnt. Offen ist er blass, gesetzt traegt er
   das Gruen der Bestaetigung. */
.unterschrift::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: rgba(150, 186, 220, .22);
  transition: background .18s ease;
}
/* Die Zeile selbst -- unter der Angabe, nicht um sie herum. */
.unterschrift::after {
  content: "";
  position: absolute; left: 15px; right: 12px; bottom: 6px; height: 0;
  border-bottom: 1px dashed rgba(150, 186, 220, .30);
}

.unterschrift[data-da="ja"] {
  background: linear-gradient(100deg, rgba(95, 201, 154, .11), transparent 62%);
}
.unterschrift[data-da="ja"]::before { background: rgba(95, 201, 154, .8); }
.unterschrift[data-da="ja"]::after {
  border-bottom: 1px solid rgba(95, 201, 154, .55);
}

.unterschrift__wer {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-still);
}
.unterschrift__wann { font-size: .84rem; color: var(--text); }
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }

/* DAS SIEGEL. Es sitzt in der oberen rechten Ecke des Feldes und ist
   nur da, wenn wirklich unterschrieben wurde.

   Gebaut aus zwei Radialverlaeufen und einem Haken als Maske -- kein
   Element, kein Bild, kein Zeichensatz. Ein Zeichensatz-Haken (✓) sieht
   in jeder Schrift anders aus und faellt weg, wenn eine fehlt; ein
   `mask-image` mit einem SVG-Pfad sieht ueberall gleich aus.

   `content: ""` auf einem dritten Pseudoelement geht nicht -- es gibt
   nur zwei. Deshalb haengt es am Wer-Text, der ohnehin oben steht. */
.unterschrift[data-da="ja"] .unterschrift__wer { position: relative; }
.unterschrift[data-da="ja"] .unterschrift__wer::after {
  content: "";
  /* INNERHALB des Feldes, nicht daneben. Der erste Anlauf schob es mit
     `translate(100%)` ueber die rechte Kante hinaus -- bei der breiten
     Ansicht sah das gut aus, auf einem schmalen Feld waere es aus der
     Karte gelaufen. Ein Siegel gehoert auf das Blatt, nicht daneben. */
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .2), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(95, 201, 154, .3) 55%, rgba(10, 24, 19, .95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(95, 201, 154, .6),
    inset 0 1px 2px -1px rgba(255, 255, 255, .25);
}
/* DER HAKEN IM SIEGEL. Als Maske ueber einer hellgruenen Flaeche --
   kein Zeichensatz-Haken (der sieht in jeder Schrift anders aus und
   faellt weg, wenn eine fehlt) und kein Bild (eine Datei mehr fuer
   fuenfzehn Pixel).

   Er liegt auf `::before` desselben Elements, weil es nur zwei
   Pseudoelemente je Element gibt und `::after` schon die Muenze
   traegt. Beide sind absolut gesetzt und liegen deshalb genau
   uebereinander. */
.unterschrift[data-da="ja"] .unterschrift__wer::before {
  content: "";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  z-index: 1;
  background: #a8ecc8;
  -webkit-mask: center / 9px 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: center / 9px 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .unterschrift::before { transition: none; }
}

.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
/* Ausgetauschtes Dokument: Das ist der einzige Fall, in dem ein
   abgeschlossener Nachweis seinen Wert verliert -- und dann muss es
   auch laut sein. */
.unterweisung__warnung {
  padding: 3px 10px;
  border: 1px solid rgba(255, 154, 162, .4); border-radius: 999px;
  background: rgba(255, 154, 162, .1);
  color: var(--warn); font-size: .8rem; font-weight: 600;
}

.schulung__neu {
  margin-top: 18px; padding: 16px 17px;
  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.schulung__neu .neu__raster { margin-top: 12px; }
.schulung__neu .knopf { margin-top: 12px; }

@media (max-width: 560px) {
  .schulung__kopf { flex-direction: column; align-items: stretch; }
  .unterweisung__kopf { flex-direction: column; }
  .unterweisung__marke { align-self: flex-start; }
}

/* =====================================================================
   AMPEL UND RUECKMELDUNG

   Drei Stufen, drei Farben. Die Stufe steht IMMER da -- auch fuer den
   Creator, auch wenn sie "noch nicht angesehen" lautet. Das ist der
   ganze Sinn: Er soll sehen, wo er steht, ohne fragen zu muessen.
   ===================================================================== */

.ampel {
  --a-ton: #6f89a8;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--rand);
}
.ampel[data-stufe="gut"]        { --a-ton: #4dab77; }
.ampel[data-stufe="verbessern"] { --a-ton: #e0a33c; }
.ampel[data-stufe="offen"]      { --a-ton: #6f89a8; }

.ampel__marke {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--a-ton) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--a-ton) 13%, transparent);
  color: var(--a-ton);
  font-size: .76rem; font-weight: 600;
}
.ampel__marke::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--a-ton);
  box-shadow: 0 0 8px color-mix(in srgb, var(--a-ton) 70%, transparent);
}
.ampel__von { font-size: .76rem; color: var(--text-still); }
/* Der Grund steht auf einer eigenen Zeile und in voller Breite --
   "noch verbessern" ohne Grund ist nicht umsetzbar, nur entmutigend.
   Deshalb darf er nicht in eine Ecke gequetscht werden. */
.ampel__grund {
  flex-basis: 100%; margin: 4px 0 0;
  padding: 8px 11px;
  border-left: 2px solid var(--a-ton);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--a-ton) 8%, transparent);
  font-size: .85rem; line-height: 1.5; color: var(--text);
}
.ampel .schritt { margin-left: auto; }

/* ---------- Der ausgeklappte Bereich ------------------------------------ */
.rueckmeldung {
  margin-top: 11px; padding: 13px 14px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(0, 0, 0, .2);
}
.rueckmeldung__hinweis {
  margin: 0 0 12px; font-size: .84rem; color: var(--text-leise);
}
.rueckmeldung__bewerten { margin-bottom: 14px; }
.ampel__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.ampel__knopf {
  padding: 8px 14px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-leise);
  font: inherit; font-size: .84rem; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ampel__knopf[data-stufe="gut"]:hover,
.ampel__knopf[data-stufe="gut"][data-an="ja"] {
  border-color: rgba(77, 171, 119, .5); color: #6fbd95;
  background: rgba(77, 171, 119, .12);
}
.ampel__knopf[data-stufe="verbessern"]:hover,
.ampel__knopf[data-stufe="verbessern"][data-an="ja"] {
  border-color: rgba(224, 163, 60, .5); color: #e0b45c;
  background: rgba(224, 163, 60, .12);
}

/* ---------- Das Gespraech ------------------------------------------------ */
.nachrichten { display: grid; gap: 8px; margin-bottom: 12px; }
.nachrichten__leer { margin: 0; font-size: .84rem; color: var(--text-still); }
.nachricht {
  padding: 9px 12px;
  border: 1px solid var(--rand); border-radius: 9px;
  background: var(--flaeche);
}
/* Eigene Nachrichten heben sich ab -- in einem Gespraech will man auf
   einen Blick sehen, was man selbst gesagt hat. */
.nachricht[data-eigen="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 26%, transparent);
  background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
}
.nachricht__kopf {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 4px;
}
.nachricht__von { font-size: .8rem; font-weight: 650; color: var(--text); }
.nachricht__wann { font-size: .74rem; color: var(--text-still); }
.nachricht__weg {
  margin-left: auto;
  width: 24px; height: 24px;
  border: 0; border-radius: 6px;
  background: none; color: var(--text-still);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.nachricht__weg:hover { color: var(--warn); background: rgba(255, 154, 162, .1); }
.nachricht__text {
  margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.nachricht-neu { display: grid; gap: 8px; }
/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
   EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
   Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
   entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
   verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
.nachricht-neu textarea { width: 100%; min-height: 44px; }
.nachricht-neu .knopf { justify-self: start; }

@media (max-width: 560px) {
  .ampel .schritt { margin-left: 0; }
  .ampel__knopf { flex: 1 1 auto; text-align: center; }
}

/* =====================================================================
   AGENTUR-EVENTS (07.09.2026)

   Ein Event ist die einzige Eintragsart, die eine LAUFZEIT hat. Alles
   andere in diesen Bereichen ist ein Vermerk zu einem Tag; ein Event
   ist eine Einladung, an der man teilnehmen kann -- oder eben nicht
   mehr. Deshalb ist der Zustand (kommt / läuft / vorbei) das Erste auf
   der Karte und nicht eine Fussnote.

   Farbe wird hier als AUSKUNFT eingesetzt, nicht als Schmuck: gedecktes
   Grün heisst "du kannst mitmachen", Bernstein "noch nicht", Grau
   "vorbei". Die Farben stammen aus derselben Familie wie die Ampel
   (--k-gut / --k-mittel), damit nicht zwei Bedeutungssysteme
   nebeneinander laufen. Und weil Farbe allein nie ausreicht, steht der
   Zustand zusaetzlich als WORT da ("läuft bis 30.09.2026").
   ===================================================================== */

.event-zeitraum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 10px;
  font-size: .82rem;
}
.event-zeitraum__marke {
  --f: var(--k-neutral);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--f) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--f) 12%, transparent);
  color: color-mix(in srgb, var(--f) 82%, #fff);
  font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
/* Der Punkt davor ist reine Zierde und darf deshalb NICHT vorgelesen
   werden -- ein Screenreader saehe sonst ein Aufzaehlungszeichen mitten
   im Satz. */
.event-zeitraum__marke::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--f); flex: none;
}
.event-zeitraum[data-stand="laeuft"] .event-zeitraum__marke { --f: var(--k-gut); }
.event-zeitraum[data-stand="kommt"]  .event-zeitraum__marke { --f: var(--k-mittel); }
.event-zeitraum[data-stand="vorbei"] .event-zeitraum__marke { --f: var(--k-neutral); }
.event-zeitraum__spanne {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Ein vorbeigelaufenes Event bleibt lesbar, tritt aber zurueck. Kein
   display:none -- was gelaufen ist, will man nachschlagen koennen.
   Gedaempft wird nur die Flaeche, nicht die Schrift: Text unter 4.5:1
   waere nicht mehr lesbar, und "alt" ist kein Grund, jemanden
   auszuschliessen. */
.eintrag-karte[data-event="vorbei"] { opacity: .82; }

.event-block {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .022);
}
.event-block__schild {
  margin: 0 0 4px;
  /* .74rem = 11.84 px, nicht .7rem. Die Schriftgroessen-Pruefung zieht
     die Grenze bei 11.5 px, und sie hat recht: In Grossbuchstaben mit
     Sperrung wirkt eine Schrift kleiner, als die Zahl sagt -- und das
     hier ist die Beschriftung, an der man die Regeln vom Aufgabenteil
     unterscheidet. */
  font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still);
}
.event-block__text {
  margin: 0;
  font-size: .87rem; line-height: 1.6; color: var(--text);
  /* pre-line, nicht pre-wrap: Zeilenumbrueche bleiben (die Aufzaehlung
     ist der Sinn dieser Felder), aber eine versehentlich eingefuegte
     Einrueckung aus einer Chatnachricht reisst die Karte nicht auf. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* .feld-hinweis steht seit dem 07.09.2026 in aufgaben.css -- bei den
   uebrigen Formularstilen. Grund: Die Dashboard-Seite braucht ihn jetzt
   auch (Creator anlegen), laedt aber diese Datei hier nicht. Ein
   Formularbaustein, der in der Bereichsdatei liegt, ist nur so lange
   richtig, wie ihn keine zweite Seite braucht. */

@media (max-width: 560px) {
  /* Auf dem Handy untereinander: Marke und Spanne nebeneinander
     ergaeben bei "vorbei seit 30.09.2026" einen Umbruch mitten im
     Datum. */
  .event-zeitraum { gap: 6px; }
  .event-zeitraum__spanne { flex-basis: 100%; }
}

/* =====================================================================
   RÜCKMELDUNG: „fürs Team" oder „nur an DogFather" (10.09.2026)

   Kapitel 5 des Pflichtenhefts. Der Schalter steht ÜBER der
   Dringlichkeit und nicht darunter: Wer schreibt, soll wissen, wer
   mitliest, BEVOR er den Text formuliert -- danach ist die Entscheidung
   nur noch eine Korrektur.
   ===================================================================== */
.vertraulich-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
}
.vertraulich-zeile input {
  /* 18 px und nicht die Vorgabe des Browsers: Das Kästchen ist die
     eigentliche Entscheidung auf diesem Formular und darf nicht das
     kleinste Element darauf sein. */
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--akzent);
}
.vertraulich-zeile strong {
  display: block; font-size: .86rem; color: var(--text);
}
.vertraulich-zeile em {
  display: block; margin-top: 2px;
  font-size: .76rem; font-style: normal; color: var(--text-still);
}
.vertraulich-zeile:hover { border-color: var(--rand-hell); }
.vertraulich-zeile:focus-within {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* Das Kennzeichen an der Zeile selbst. Bewusst eine ANDERE Farbe als
   die Art daneben -- zwei gleich aussehende Fähnchen liest man als
   eines. Bernstein wie beim angehefteten Chat: derselbe Gedanke
   ("das hier ist besonders"), dieselbe Farbe. */
.marke-art--nur {
  background: rgba(217, 174, 98, .16);
  color: #d9ae62;
}

/* =====================================================================
   ENTWICKLUNG: der Weg zur Person (11.09.2026)

   Der Knopf steht IM KOPF der Karte, neben der Art -- nicht unten bei
   den anderen Handgriffen. Er ist keine Bearbeitung, sondern der eine
   Schritt, der den Eintrag aus der Aufzeichnung heraus zur Person
   bringt; unten zwischen „Ändern" und „Löschen" wäre er einer von
   dreien statt der besondere.
   ===================================================================== */
.eintrag-schicken {
  appearance: none;
  padding: 2px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  color: var(--text);
  /* .72rem und nicht .68 -- unter 11,5 px gilt im Haus als zu klein,
     und dieser Knopf traegt den einzigen Schritt, der einen Eintrag
     zur Person bringt. Gefunden von pruef-css-klassen. */
  font: inherit; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background var(--tempo), border-color var(--tempo);
}
.eintrag-schicken:hover {
  background: color-mix(in srgb, var(--akzent) 22%, transparent);
  border-color: color-mix(in srgb, var(--akzent) 60%, transparent);
}
.eintrag-schicken:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.eintrag-schicken[disabled] { opacity: .5; cursor: default; }

/* Schon geschickt: kein Knopf mehr, sondern eine Auskunft. Leise --
   sie ist eine Fußnote, keine Meldung. */
.marke-art--weg {
  background: rgba(255, 255, 255, .05);
  color: var(--text-still);
  text-transform: none; letter-spacing: 0; font-weight: 600;
}

/* =====================================================================
   AUS EINER IDEE WURDE ARBEIT (15.09.2026)

   Der Verweis steht dort, wo vorher der Knopf stand -- er ersetzt ihn.
   Er sieht deshalb aus wie ein Zustand und nicht wie eine Schaltflaeche:
   Wer ihn sieht, soll wissen, dass etwas passiert IST, nicht dass er
   etwas tun kann.
   ===================================================================== */

.eintrag__aufgabe {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  text-decoration: none;
  color: var(--text-leise);
  border: 1px solid color-mix(in srgb, #668e6e 50%, transparent);
}
.eintrag__aufgabe:hover { color: var(--text); border-color: #668e6e; }

/* =====================================================================
   DER COUNTDOWN BEI „WAS ANSTEHT" (17.09.2026)

   Filipe wollte für den Community-Bereich „eine richtige perfektion".
   Hier ist das keine Frage der Optik: Es gibt genau EINE Frage, die ein
   Zuschauer auf dieser Seite hat — *wann* — und sie stand bisher in
   Zeile vier einer Liste.

   GROSS, ABER NICHT LAUT. Die Zeitangabe ist das Größte auf der Seite,
   weil sie die Antwort ist. Sie leuchtet aber nicht: kein Neon, kein
   Blinken, keine Animation. Auf dieser Seite steht niemand unter
   Zeitdruck — er will es nur wissen.

   DER TON FOLGT DER NÄHE, nicht der Wichtigkeit: Was gleich anfängt,
   ist wärmer; was in vier Wochen kommt, ist ruhig. Das ist die einzige
   Information, die eine Farbe hier tragen kann, ohne zu behaupten, ein
   Termin sei „besser" als ein anderer.
   ------------------------------------------------------------------- */
.countdown {
  --c-ton: #6f89a8;
  margin: 0 0 22px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--c-ton) 30%, var(--rand));
  border-radius: var(--radius);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-ton) 13%, transparent),
      transparent 64%),
    var(--flaeche);
}
.countdown[data-stufe="jetzt"]   { --c-ton: #d97a45; }
.countdown[data-stufe="bald"]    { --c-ton: #e0a33c; }
.countdown[data-stufe="woche"]   { --c-ton: #5f93c4; }
.countdown[data-stufe="spaeter"] { --c-ton: #6f89a8; }

.countdown__schild {
  margin: 0 0 4px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ton) 62%, #ffffff);
}
/* DIE ANTWORT. clamp statt fester Größe: Auf 390 px soll sie die Zeile
   nicht sprengen, auf dem Rechner soll sie wirken. Eine feste Zahl wäre
   an einem der beiden Enden falsch. */
.countdown__wann {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.countdown__titel {
  margin: 8px 0 0;
  font-size: 1.02rem; font-weight: 600; color: var(--text);
}
.countdown__datum {
  margin: 3px 0 0;
  font-size: .86rem; color: var(--text-leise);
}
.countdown__weitere {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--rand);
  font-size: .8rem; color: var(--text-still);
}
/* Wenn nichts ansteht: ein Satz, keine leere Fläche. Ein Bereich, der
   schweigt, wenn nichts da ist, sieht kaputt aus statt leer. */
.countdown[data-leer] { --c-ton: #6f89a8; }
.countdown__leer { margin: 0; font-size: .95rem; color: var(--text-leise); }

/* ---------------------------------------------------------------------
   DER ZEITSTRAHL — die Abschnitte in der Liste darunter
   ------------------------------------------------------------------- */
.zeitstrahl__schild {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 12px;
  font-size: .76rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still);
}
.zeitstrahl__schild:first-child { margin-top: 4px; }
/* Eine Linie, die nach rechts ausläuft — sie trennt, ohne eine Wand zu
   bauen. Dieselbe Überlegung wie bei den Spalten des Aufgabenbretts. */
.zeitstrahl__schild::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--rand), transparent);
}
.zeitstrahl__zahl {
  padding: 1px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: .74rem; letter-spacing: normal; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   DIE WUNSCHLISTE ALS RANGFOLGE (17.09.2026)

   Aus dem Plan im Vault, Stufe 3. Eine Wunschliste ist keine Liste —
   sie ist eine Rangfolge mit einem Zustand. Ohne beides ist sie ein
   Briefkasten ohne Postbote: Nach dem dritten unbeantworteten Wunsch
   schreibt niemand mehr.
   ------------------------------------------------------------------- */

/* DER RANGBALKEN. Er zeigt den ABSTAND zum meistgewünschten, nicht die
   absolute Zahl — die steht ohnehin auf dem Knopf daneben. Ein Wunsch
   mit 12 Stimmen neben einem mit 14 sieht sonst aus wie einer mit 1
   neben einem mit 40.

   Drei Pixel hoch und ohne Beschriftung: Er ist ein Hinweis, kein
   Diagramm. Wer die Zahl will, liest sie. */
.wunsch-rang {
  height: 3px; margin: 10px 0 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.wunsch-rang__fuellung {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--akzent) 70%, transparent),
    color-mix(in srgb, var(--akzent) 30%, transparent));
  transition: width .3s ease;
}
/* Der meistgewünschte bekommt etwas mehr — aber nur etwas. Er ist der
   erste unter Gleichen, nicht der Gewinner. */
.wunsch-rang[data-spitze="ja"] .wunsch-rang__fuellung {
  background: linear-gradient(90deg, var(--akzent),
    color-mix(in srgb, var(--akzent) 45%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  .wunsch-rang__fuellung { transition: none; }
}

/* DER ZUSTAND. Er steht im Kopf neben dem Titel, weil er das ist,
   weswegen jemand wiederkommt.

   „Diesmal nicht" ist bewusst NICHT rot. Ein Nein ist eine Antwort und
   keine Strafe — und wer ein rotes Schild an seinem Wunsch sieht,
   schreibt keinen zweiten. */
.wunsch-stand {
  --w-ton: #6f89a8;
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--w-ton) 72%, #ffffff);
  background: color-mix(in srgb, var(--w-ton) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--w-ton) 32%, transparent);
}
.wunsch-stand[data-stand="offen"]      { --w-ton: #6f89a8; }
.wunsch-stand[data-stand="angenommen"] { --w-ton: #5f93c4; }
.wunsch-stand[data-stand="erledigt"]   { --w-ton: #4dab77; }
.wunsch-stand[data-stand="abgelehnt"]  { --w-ton: #8e8577; }

/* DIE ENTSCHEIDUNG — vier Knöpfe statt eines Umschalters. Der aktuelle
   Zustand ist abgeschaltet: Ein Knopf, der nichts tut, gehört nicht
   anfassbar auszusehen. */
.wunsch-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wunsch-wahl__knopf {
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand-hell);
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.wunsch-wahl__knopf:hover:not(:disabled) {
  color: var(--text); border-color: var(--rand);
  background: rgba(255, 255, 255, .04);
}
.wunsch-wahl__knopf[aria-pressed="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  cursor: default;
}

/* =====================================================================
   HIGHLIGHTS ALS GALERIE (17.09.2026)

   Aus dem Plan im Vault, Stufe 5. „Eure Clips und Bilder" zeigte
   bisher Textkarten mit einem Anhang darunter. **Ein Bild als Anhang
   unter einer Überschrift ist kein Highlight** — dieser Bereich lebt
   vom Sehen. Der Text wird zur Bildunterschrift, nicht umgekehrt.
   ------------------------------------------------------------------- */

/* Das Raster. `auto-fill` mit `minmax` statt einer festen Spaltenzahl:
   Auf 390 px wird es eine Spalte, auf dem Rechner drei — und zwar
   gemessen, nicht gerechnet. Eine feste Zahl wäre an einem der beiden
   Enden falsch. */
#liste[data-galerie="ja"] {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* GLEICH HOCH, nicht oben buendig (18.09.2026).

     Mit `start` endete jede Karte dort, wo ihr Text aufhoerte -- drei
     nebeneinander hoerten auf drei verschiedenen Hoehen auf, und die
     Reihe sah aus, als waere beim Laden etwas schiefgegangen. Eine
     Galerie ist ein Raster; ungleiche Kanten liest man als Fehler,
     nicht als Absicht. */
  align-items: stretch;
}

/* Der Bildstreifen auf einer Karte. */
.bildstreifen {
  display: grid; gap: 4px; margin: -4px -4px 12px;
  border-radius: var(--radius-klein); overflow: hidden;
}
/* Bei mehreren Bildern zwei Spalten — mehr wird auf einer Karte zu
   klein, um noch etwas zu erkennen. */
.bildstreifen[data-mehrere="ja"] { grid-template-columns: 1fr 1fr; }

.bildstreifen__feld {
  display: block; position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .03);
  border-radius: var(--radius-klein);
  overflow: hidden;
  /* Ein Bild, das man anfassen kann, muss auch anspringbar sein — der
     Fokusring kommt aus start.css und darf nicht abgeschnitten werden. */
  outline-offset: 2px;
}
.bildstreifen__bild {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Beim Überfahren ganz leicht näher — genug, um zu sagen „das geht
     auf", zu wenig, um zu zappeln. */
  transition: transform var(--tempo);
}
.bildstreifen__feld:hover .bildstreifen__bild,
.bildstreifen__feld:focus-visible .bildstreifen__bild { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .bildstreifen__bild { transition: none; }
  .bildstreifen__feld:hover .bildstreifen__bild { transform: none; }
}

/* =====================================================================
   DER STARTKATALOG (17.09.2026)

   Filipe, mit drei Bildschirmfotos leerer Bretter: „ich will fertige
   sachen schon drin". Im Plan stand es sogar (§5.1): „Acht leere Seiten
   sind schlimmer als keine."

   DER KASTEN SIEHT ANDERS AUS ALS DIE EINTRÄGE DARUNTER — und das ist
   der Punkt: Was hier steht, ist noch nichts. Sähe er aus wie ein
   Beitrag, würde man ihn für einen halten und sich fragen, warum er
   sich nicht anfassen lässt. Deshalb: gestrichelter Rand statt
   durchgezogener. Das Zeichen für „Platzhalter" ist alt und wird
   sofort verstanden.
   ------------------------------------------------------------------- */
.startkatalog {
  margin: 0 0 24px; padding: 18px 20px;
  border: 1px dashed color-mix(in srgb, var(--akzent) 34%, var(--rand));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--akzent) 5%, transparent);
}
.startkatalog__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  margin-bottom: 14px;
}
.startkatalog__titel {
  margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--text);
}
.startkatalog__unter {
  margin: 0; flex: 1 1 260px;
  font-size: .85rem; color: var(--text-leise);
}
.startkatalog__alle { flex: 0 0 auto; }
.startkatalog__andere { flex: 0 0 auto; }

/* DER WECHSELKNOPF IST DER ZWEITE, NICHT DER ERSTE (20.09.2026).

   Neben ihm steht "Alle N uebernehmen" -- das ist die Handlung, die
   etwas bewirkt. "Andere zeigen" blaettert nur. Stuenden beide gleich
   kraeftig da, muesste man jedes Mal lesen, welcher welcher ist.
   Deshalb bekommt er dieselbe Form und weniger Farbe: erkennbar als
   Knopf, aber nicht als Angebot. */
.startkatalog__andere {
  background: transparent;
  border-color: var(--rand);
  color: var(--text-leise);
}
.startkatalog__andere:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand));
  background: color-mix(in srgb, var(--akzent) 7%, transparent);
}

/* Auto-fill: Auf dem Handy eine Spalte, am Rechner drei — gemessen,
   nicht gerechnet. */
.startkatalog__liste {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.startkatalog__karte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
}
.startkatalog__name {
  margin: 0; font-size: .95rem; font-weight: 640; color: var(--text);
}
.startkatalog__text {
  margin: 0; flex: 1;
  font-size: .84rem; line-height: 1.5; color: var(--text-leise);
}

/* =====================================================================
   DIE KETTE (17.09.2026) — Stufe 8 des Plans

   Bisher waren die acht Bretter acht Silos. Ein Wunsch wurde
   angenommen, irgendwann passierte etwas im Stream, irgendwann lag ein
   Clip bei den Highlights — und nichts davon wusste voneinander. Wer
   den Wunsch geschrieben hatte, erfuhr nie, dass er erfüllt wurde.

   ZWEI RICHTUNGEN, ZWEI TÖNE: Woher etwas kam, steht ruhig da — es ist
   Herkunft, kein Ergebnis. Was daraus wurde, ist grün: Das ist die
   Nachricht, auf die jemand gewartet hat.

   KLEIN GEHALTEN. Die Kette erklärt den Eintrag, sie ersetzt ihn
   nicht — eine Zeile, kein Kasten.
   ------------------------------------------------------------------- */
.kette {
  --k-ton: #6f89a8;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 8px 0 0; padding: 6px 10px;
  border-left: 2px solid color-mix(in srgb, var(--k-ton) 55%, transparent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: color-mix(in srgb, var(--k-ton) 8%, transparent);
  font-size: .82rem;
}
/* „Daraus wurde" ist die gute Nachricht — sie darf als Einzige
   auffallen. */
.kette--hin { --k-ton: #4dab77; }

.kette__wort {
  font-weight: 650; letter-spacing: .02em;
  color: color-mix(in srgb, var(--k-ton) 70%, #ffffff);
}
.kette__weg { color: var(--text); text-decoration: none; }
.kette__weg:hover { text-decoration: underline; }
.kette__wer { color: var(--text-still); }

/* =====================================================================
   DAS GESPRÄCH (17.09.2026) — Stufe 6 des Plans

   „Der Treff" war eine Liste aus Karten. Der einzige Bereich, in dem
   Menschen MITEINANDER reden sollen, zwang sie, nebeneinander zu reden.

   EINE STUFE EINGERÜCKT, NICHT MEHR. Auf 390 px ist bei der zweiten
   Schluss — dann steht der Text in einer Spalte von vier Wörtern. Die
   Linie links macht die Zugehörigkeit deutlicher als jeder Abstand.
   ------------------------------------------------------------------- */
.antworten {
  margin: 12px 0 0 0; padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--akzent) 22%, var(--rand));
}
.antwort { padding: 8px 0; }
.antwort + .antwort { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.antwort__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0 0 3px; font-size: .78rem;
}
.antwort__wer { font-weight: 640; color: var(--text); }
/* Wer aus dem Team antwortet, ist eine andere Auskunft als wer
   mitredet — deshalb sichtbar, aber leise. */
.antwort__rolle {
  padding: 0 7px; border-radius: 999px;
  /* .74rem und nicht .7rem: Bei 11,2 px liegt die Marke unter der
     Grenze, die pruef-css-klassen im Haus haelt (11,5 px). Die Grenze
     anzuheben waere der bequeme Weg gewesen -- und ab da haette die
     Pruefung nichts mehr gehalten. */
  font-size: .74rem; font-weight: 600;
  color: color-mix(in srgb, var(--akzent) 70%, #ffffff);
  background: color-mix(in srgb, var(--akzent) 13%, transparent);
}
.antwort__wann { color: var(--text-still); margin-left: auto; }
.antwort__text {
  margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-leise);
  overflow-wrap: anywhere;
}
.antwort__weg {
  margin-top: 4px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .74rem; color: var(--text-still);
  text-decoration: underline;
}
.antwort__weg:hover { color: var(--text-leise); }

/* Das Feld steht immer da — ein leeres Feld ist die deutlichste
   Einladung, die es gibt. */
.antwort-neu { display: flex; gap: 8px; margin-top: 10px; }
.antwort-neu__feld {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: .88rem;
}
.antwort-neu__ab {
  flex: 0 0 auto;
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: 0 14px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand-hell);
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.antwort-neu__ab:hover:not(:disabled) {
  color: var(--text); background: rgba(255, 255, 255, .05);
}

/* =====================================================================
   STUFE 7: JEDES BRETT BEKOMMT SEINE FORM (17.09.2026)

   „Regeln & Hilfe" ist ein Nachschlagewerk, kein Feed — man schlägt es
   im Streitfall auf und will **finden**, nicht scrollen. „Mitmachen"
   ist ein Weg. „Anschlagbrett" ist ein schwarzes Brett: wenige, große
   Aushänge.
   ------------------------------------------------------------------- */

/* Die Sprungmarken — der Unterschied zwischen einem Dokument und einer
   langen Seite. */
/* WARUM DAS HIER KEINE PILLEN MEHR SIND (18.09.2026).

   Sie sahen aus wie die Filterknöpfe darüber: gleiche Form, gleiche
   Größe, gleiche Wörter. Auf „Regeln & Hilfe" standen damit zwei
   identisch wirkende Reihen untereinander, von denen die eine filterte
   und die andere sprang. Niemand kann das erraten.

   Jetzt sind es Links, und sie sehen aus wie Links: unterstrichen,
   ohne Rahmen, mit „Springe zu" davor und der Anzahl dahinter. Die
   Filterreihe entfällt auf diesen Brettern ganz. */
.brettmarken {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline;
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rand);
}
.brettmarken__wort {
  font-size: .78rem;
  color: var(--text-still);
  margin-inline-end: 2px;
}
.brettmarken__weg {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: .84rem; font-weight: 600;
  color: var(--text-leise);
  text-decoration: underline;
  text-decoration-color: var(--rand-hell);
  text-underline-offset: 3px;
  /* Die Fläche zum Tippen bleibt groß genug, obwohl nichts umrandet
     ist -- sonst trifft man auf dem Handy den Nachbarn. */
  padding: 6px 2px;
  transition: color var(--tempo), text-decoration-color var(--tempo);
}
.brettmarken__weg:hover,
.brettmarken__weg:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
}
/* Die Anzahl sagt, ob sich der Sprung lohnt -- und dass hier nicht
   gefiltert wird. */
.brettmarken__zahl {
  font-size: .72rem; font-weight: 700;
  color: var(--text-still);
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

/* Die Abschnittsüberschrift. scroll-margin, damit die Überschrift beim
   Anspringen nicht unter der Kopfleiste verschwindet — ohne das landet
   man auf dem Text darunter und glaubt, der Sprung sei ins Leere
   gegangen. */
.brettabschnitt {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 12px; scroll-margin-top: 80px;
  font-size: .82rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still);
}
.brettabschnitt:first-child { margin-top: 4px; }
.brettabschnitt::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--rand), transparent);
}
.brettabschnitt__zahl {
  order: 3; padding: 1px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: .74rem; letter-spacing: normal; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   DAS ANSCHLAGBRETT — wenige, große Aushänge

   Ein Aushang zwischen dreißig anderen ist kein Aushang. Größerer
   Titel, mehr Luft, ein Rahmen, der nach Papier aussieht statt nach
   Zeile.
   ------------------------------------------------------------------- */
/* ZWEI NEBENEINANDER, WENN DER PLATZ REICHT (24.09.2026).

   Filipe: "gestalte diese seite auch anders bitte. viel krasser
   geiler übersichtlicher."

   Hier stand ein einspaltiges Raster. Auf einem breiten Schirm wurde
   damit jeder Aushang 1700 px breit -- und ein Titel in 1,32 rem ueber
   1700 px ist keine Ueberschrift mehr, sondern eine Zeile, die man
   beim Lesen verliert. Auf seinem Bildschirmfoto lief genau das ueber
   die volle Breite.

   "Wenige, grosse Aushaenge" bleibt richtig -- gross heisst aber
   auffaellig, nicht breit. Ein Zettel am schwarzen Brett ist auch
   keine anderthalb Meter breit.

   auto-fit mit einer OBERGRENZE je Spalte: Bei viel Platz stehen zwei
   nebeneinander, bei wenig eine, und keine wird je breiter als 620 px.
   Gerechnet wird nichts -- der Browser entscheidet nach dem Platz,
   den er hat. */
#liste[data-aushang="ja"] {
  display: grid; gap: 18px;
  /* DIE OBERGRENZE GEHOERT AN DIE KARTE, NICHT AN DIE SPALTE.

     Erster Versuch war "minmax(..., 620px)". Gemessen: Die
     Inhaltsspalte ist 1160 px breit, zwei Karten a 620 plus Luecke
     waeren 1258 -- es passte genau eine, und die Aenderung bewirkte
     nichts. Eine Obergrenze an der Spalte rechnet gegen eine Breite,
     die man vorher nicht kennt.

     Mit "1fr" teilt der Browser den vorhandenen Platz: bei 1160 px
     zwei Spalten a 571, bei 390 px eine. Dass eine EINZELNE Karte
     nicht ueber die ganze Breite laeuft, sagt dann ihre eigene
     max-width -- an der Stelle, an der es hingehoert. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
}
#liste[data-aushang="ja"] .eintrag-karte { max-width: 620px; }
#liste[data-aushang="ja"] .eintrag-karte { padding: 22px 24px; }
#liste[data-aushang="ja"] .eintrag-titel {
  font-size: 1.32rem; line-height: 1.25;
  /* Auch innerhalb einer 620-px-Spalte: In Zeichen gemessen, damit es
     bei groesser gestellter Schrift stimmt. */
  max-width: 30ch;
}
#liste[data-aushang="ja"] .eintrag-text {
  font-size: .98rem; line-height: 1.6;
}
@media (max-width: 560px) {
  #liste[data-aushang="ja"] .eintrag-karte { padding: 17px 16px; }
  #liste[data-aushang="ja"] .eintrag-titel { font-size: 1.12rem; }
}

/* =====================================================================
   EIN VIDEO EINLESEN (17.09.2026) — Stufe A des Video-Plans
   ------------------------------------------------------------------- */
.videoholen {
  margin: 0 0 20px; padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.videoholen__form { margin: 0; }
.videoholen__zeile { display: flex; gap: 10px; }
.videoholen__zeile input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: .9rem;
}
.videoholen__zeile .knopf { flex: 0 0 auto; }

/* WOHIN DAS VIDEO GELEGT WIRD (22.09.2026).
   Eine eigene Zeile UNTER dem Link, nicht daneben: Am Handy stehen
   dort schon Feld und Knopf, und ein drittes Element in derselben
   Reihe quetscht das Eingabefeld auf wenige Buchstaben -- derselbe
   Fehler, der am 21.09. schon einmal die Chat-Eingabe getroffen hat.

   Die Breite ist begrenzt, nicht gefuellt: Drei Kanalnamen brauchen
   keine 1200 Pixel, und ein Auswahlfeld ueber die ganze Seite sieht
   aus wie ein Pflichtfeld. */
.videoholen__wohin { margin: 12px 0 0; max-width: 22rem; }
.videoholen__wohin select { width: 100%; }
@media (max-width: 560px) {
  .videoholen__wohin { max-width: none; }
}

/* Der Knopf zum Video. Er ist die Antwort auf „und dann liken": Er
   führt dorthin, wo das Liken zählt. Deshalb steht er deutlich da und
   nicht als kleiner Textlink unter dem Datum. */
.videozeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 12px;
}
.videozeile__kanal {
  --v-ton: #6f89a8;
  padding: 2px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 650; letter-spacing: .02em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--v-ton) 76%, #ffffff);
  background: color-mix(in srgb, var(--v-ton) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-ton) 32%, transparent);
}
/* Dieselben drei Töne wie am Kanal einer Aufgabe — ein Kanal sieht im
   ganzen Haus gleich aus, sonst lernt man sie zweimal. */
.videozeile__kanal[data-kanal="dogfather"] { --v-ton: #c2544f; }
.videozeile__kanal[data-kanal="hasidog"]   { --v-ton: #7d6bbd; }
.videozeile__kanal[data-kanal="clips"]     { --v-ton: #3f9c8a; }

.videozeile__weg { flex: 0 0 auto; text-decoration: none; }

/* Ein Video, das es bei TikTok nicht mehr gibt.

   BEWUSST KEIN ROT und keine Warnfarbe: Es ist kein Fehler, es ist
   eine Auskunft. Rot an dieser Stelle liesse die ganze Kachel wie
   einen Schaden aussehen, obwohl Titel, Text und Cover weiter
   stimmen -- die liegen bei uns.

   Gestrichelter Rand statt Flaeche: Der Platz des Knopfes bleibt
   sichtbar, aber nichts darin laedt zum Tippen ein. */
.videozeile__fort {
  flex: 0 0 auto;
  padding: .34rem .7rem;
  border: 1px dashed rgba(150, 170, 195, .45);
  border-radius: .6rem;
  color: #8fa3bb;
  font-size: .84rem;
  cursor: default;
}

/* ---------------------------------------------------------------------
   DIE KANALZEILE (17.09.2026) -- Schritt 3 aus dem Video-Plan

   Sie steht als eigene Reihe UNTER dem Art-Filter, nicht daneben. Zwei
   Fragen in einer Zeile sehen aus wie eine: Man klickt „Highlights"
   und dann „HasiDog" und wundert sich, warum das erste wieder aus ist.
   Getrennte Reihen zeigen, dass es zwei Dinge sind.

   DIESELBEN DREI TÖNE WIE AUF DER KARTE (.videozeile__kanal). Wer
   „DogFather Clips" in Türkis filtert, soll darunter Karten mit
   türkisem Zeichen finden -- sonst muss er bei jedem Video neu lesen.
   ------------------------------------------------------------------- */
.filter__kanaele {
  display: flex; flex-wrap: wrap; gap: 8px;
  /* Volle Breite erzwingt die eigene Reihe, auch wenn oben noch Platz
     wäre. Das ist Absicht: Es sind zwei Fragen, keine Fortsetzung.
     Und es ist eine REGEL statt einer Schwelle -- keine Pixelzahl, die
     beim nächsten hinzugefügten Knopf still falsch wird. */
  flex-basis: 100%;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rand);
}

.filter__kanal {
  --v-ton: #6f89a8;
  display: inline-flex; align-items: center; gap: 7px;
}
.filter__kanal[data-kanal="dogfather"] { --v-ton: #c2544f; }
.filter__kanal[data-kanal="hasidog"]   { --v-ton: #7d6bbd; }
.filter__kanal[data-kanal="clips"]     { --v-ton: #3f9c8a; }

/* GEWÄHLT heißt: der Ton wird sichtbar. Ungewählt bleibt er gedeckt --
   drei bunte Knöpfe nebeneinander wären eine Ampel, und eine Ampel
   sagt „gut/schlecht", wo nur „welcher Kanal" gemeint ist. */
.filter__kanal[aria-pressed="true"] {
  color: color-mix(in srgb, var(--v-ton) 76%, #ffffff);
  border-color: color-mix(in srgb, var(--v-ton) 55%, transparent);
  background: color-mix(in srgb, var(--v-ton) 13%, transparent);
}

.filter__kanal-zahl {
  /* .72rem = 11,5 px, die Grenze, die pruef-css-klassen bewacht. */
  font-size: .72rem; font-weight: 700;
  min-width: 1.5em; padding: 1px 5px;
  border-radius: 999px; text-align: center;
  color: var(--text-still);
  background: rgba(255, 255, 255, .07);
}
.filter__kanal[aria-pressed="true"] .filter__kanal-zahl {
  color: color-mix(in srgb, var(--v-ton) 82%, #ffffff);
  background: color-mix(in srgb, var(--v-ton) 20%, transparent);
}

/* =====================================================================
   DIE TEILEN-SEITE (17.09.2026) — Schritt 4 aus dem Video-Plan

   Ziel des Teilen-Menüs auf dem Handy. Sie wird fast ausschließlich
   mit einer Hand bedient, im Stehen, direkt nach dem Posten — deshalb
   große Flächen, viel Abstand und nur eine Entscheidung je Bildschirm.
   ===================================================================== */
.tl-seite {
  max-width: 44rem;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
}

.tl-label {
  margin: 0 0 8px;
  font-size: .78rem; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-still);
}

/* WAS ANGEKOMMEN IST. Steht ganz oben und ist umbrechbar: Eine
   TikTok-Adresse ist länger als ein Handybildschirm, und eine Adresse,
   die rechts abgeschnitten ist, beantwortet die Frage „hab ich den
   richtigen Link erwischt?" nicht. */
.tl-fund {
  padding: 16px 18px;
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.tl-url {
  margin: 0;
  font-size: .86rem; line-height: 1.5;
  color: var(--text-leise);
  overflow-wrap: anywhere;
}

/* WOHIN. Untereinander und nicht nebeneinander: Drei Knöpfe in einer
   Reihe sind auf 360 px drei schmale Streifen, und der Satz darunter
   passt in keinen davon. */
.tl-bretter {
  display: flex; flex-direction: column; gap: 10px;
}
.tl-brett {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%;
  padding: 14px 16px; text-align: start;
  font: inherit; cursor: pointer;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
  color: var(--text-leise);
  transition: border-color .16s ease, background .16s ease;
}
.tl-brett:hover { border-color: var(--rand-hell); }
.tl-brett:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* GEWÄHLT — und das muss man SEHEN.

   Im Bildschirmfoto auf 390 px war der Unterschied ein Hauch heller,
   mehr nicht. Bei einer echten Wahl (wohin geht das Video?) ist das zu
   wenig — und wer Farben schlecht unterscheidet, sieht gar nichts.

   Deshalb drei Dinge zusammen statt eines allein: ein farbiger Streifen
   links, ein deutlicherer Grund — und ein HAKEN. Der Haken ist der
   Teil, der ohne jede Farbwahrnehmung funktioniert. */
.tl-brett[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand-hell));
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  box-shadow: inset 3px 0 0 0 var(--akzent);
}
.tl-brett[aria-pressed="true"] .tl-brett-name::after {
  content: " ✓";
  color: var(--akzent);
  font-weight: 700;
}
.tl-brett-name { font-size: .95rem; font-weight: 700; }
.tl-brett-satz { font-size: .8rem; color: var(--text-still); }

.tl-knoepfe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.tl-knoepfe .knopf { min-width: 11rem; }

/* DAS FELD ZUM EINFÜGEN. Es erscheint nur, wenn gar kein Link dabei
   war -- als Angebot, nicht als Strafe. */
.tl-haendisch input {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px;
  font: inherit; font-size: 1rem;      /* 16 px: darunter zoomt iOS beim Tippen */
  color: var(--text);
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  border: 1px solid var(--rand-hell);
  border-radius: 10px;
}
.tl-haendisch input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.tl-fertig {
  padding: 18px;
  border: 1px solid var(--rand-hell);
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  display: flex; flex-direction: column; gap: 16px;
}
.tl-fertig-satz {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .tl-brett { transition: none; }
}

/* =====================================================================
   „STEHT IM KALENDER" (17.09.2026)

   Die Verbindung zwischen Brett und Kalender war einseitig: Vom
   Kalender kam man auf das Brett, zurueck nicht. Am Kartenfuss stand
   bloss ein Datum -- und „24.09.2026" sieht aus wie „17.09.2026",
   obwohl das eine ein Termin ist und das andere der Tag, an dem
   jemand getippt hat.

   ES IST EIN LINK UND KEINE MARKE. Wer liest „steht im Kalender", will
   als Naechstes wissen, was sonst noch an dem Tag ist.
   ===================================================================== */
.im-kalender {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--akzent) 34%, var(--rand));
  border-radius: 999px;
  /* Undurchsichtig gemischt, nicht mit `transparent`: Sonst scheint das
     Wasserzeichen der Seite durch den Text. Am 17.09. genau so an einer
     vertraulichen Bewerbung aufgefallen. */
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  color: var(--text-leise);
  font-size: .78rem; font-weight: 600;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
.im-kalender:hover { border-color: var(--akzent); color: var(--text); }
.im-kalender:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.im-kalender__zeichen { font-size: .9rem; line-height: 1; }

/* EINE ZUSAGE SIEHT ANDERS AUS ALS EIN EIGENER TERMIN. „Wird gemacht --
   am 24." ist ein Versprechen an jemanden; ein selbstgesetztes Datum
   ist eine Notiz an sich selbst. Unterschieden wird ueber das WORT
   („Zugesagt für") und zusaetzlich ueber den Rand -- eine Auskunft,
   die nur aus einer Farbe besteht, kommt bei niemandem an, der Farben
   schlecht unterscheidet. */
.im-kalender[data-grund="zugesagt"] {
  border-color: color-mix(in srgb, var(--gut, #79d1a2) 48%, var(--rand));
  color: color-mix(in srgb, var(--gut, #79d1a2) 30%, #ffffff);
}

/* Der Hinweis unter dem Datumsfeld. Wenn er „steht damit im Kalender"
   sagt, darf man das sehen -- sonst liest man ihn nicht. */
#hinweis-datum[data-imkalender="ja"] {
  color: color-mix(in srgb, var(--akzent) 42%, #ffffff);
}

/* ---- „Video dazu einfügen" an einer Wunschkarte (Stufe 7) ----------
   Eine Zeile, kein Kasten mit Rahmen: Es ist ein Zwischenschritt, der
   gleich wieder verschwindet. Ein aufwendig gestaltetes Formular an
   dieser Stelle sähe aus, als gehörte es dauerhaft zur Karte. */
.videodazu {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(140, 160, 185, .18);
}
.videodazu__feld {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .45rem .6rem;
  border: 1px solid rgba(140, 160, 185, .35);
  border-radius: .55rem;
  background: rgba(10, 18, 30, .55);
  color: #e8f1fa;
  font-size: .9rem;
}
.videodazu__feld:focus-visible {
  outline: 2px solid #6ea8d8;
  outline-offset: 1px;
}
.videodazu__senden { flex: 0 0 auto; }
/* Die Rückmeldung bekommt eine eigene Zeile, damit eine lange
   Fehlermeldung das Feld nicht aus der Zeile drückt. */
.videodazu__sagt {
  flex: 1 0 100%;
  margin: 0;
  min-height: 1.1em;
  color: #9fb3c9;
  font-size: .84rem;
}

/* ---- STARTHILFE BEIM SCHREIBEN (18.09.2026) -----------------------
   Ein leeres Feld ist der häufigste Grund, warum ein Brett still
   bleibt, obwohl viele mitlesen. Die Zeile steht ganz oben im
   Formular — vor Art und Datum, weil sie beides mit ausfüllt.

   Gedämpft gehalten: Es ist ein Angebot, keine Aufforderung. Wer weiß,
   was er schreiben will, soll daran vorbeilesen können. */
.starthilfe {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px dashed var(--rand-hell);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.starthilfe__wort {
  margin: 0 0 9px;
  font-size: .84rem;
  color: var(--text-leise);
}
.starthilfe__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.starthilfe__beispiel {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--rand-hell);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tinte) 86%, #ffffff 14%);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.starthilfe__beispiel:hover { border-color: var(--akzent); }
.starthilfe__beispiel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---- EIN TON JE ART (18.09.2026) ----------------------------------
   Erzeugt von tools/art-farben.mjs -- NICHT von Hand ändern.
   Das Werkzeug misst zweierlei und lässt sich nicht überreden:
   den Abstand zwischen zwei Arten auf DEMSELBEN Brett (OKLab, ab
   0.1) und den Kontrast auf dunklem Grund (ab 4.5:1).

   Warum überhaupt: Alle Etiketten trugen denselben blauen Ton. Bei
   siebzehn Karten untereinander hatte das Auge nichts, woran es sich
   festhalten konnte -- man liest dann jede Überschrift, statt zu
   überfliegen. Der Ton folgt der BEDEUTUNG, nicht der Reihenfolge:
   Lob grün, „etwas stimmt nicht" warmrot, Fragen blau. Deshalb trägt
   die Art „frage" auf drei Brettern denselben Ton. */
.marke-art[data-art] {
  background: color-mix(in srgb, var(--art-ton) 16%, transparent);
  color: var(--art-ton);
}
.marke-art[data-art="frage"] { --art-ton: #a8baca; }
.marke-art[data-art="regel"] { --art-ton: #c2b981; }
.marke-art[data-art="stream"] { --art-ton: #bab3c8; }
.marke-art[data-art="hallo"] { --art-ton: #90e1e6; }
.marke-art[data-art="lob"] { --art-ton: #90b888; }
.marke-art[data-art="problem"] { --art-ton: #e4a59f; }
.marke-art[data-art="ansage"] { --art-ton: #e2ccc0; }
.marke-art[data-art="hinweis"] { --art-ton: #a9b9ce; }
.marke-art[data-art="danke"] { --art-ton: #c592b3; }
.marke-art[data-art="event"] { --art-ton: #f8bcdd; }
.marke-art[data-art="turnier"] { --art-ton: #d69b81; }
.marke-art[data-art="pause"] { --art-ton: #7ba2cc; }
.marke-art[data-art="technik"] { --art-ton: #8ed7ef; }
.marke-art[data-art="gemeinsam"] { --art-ton: #86c4a8; }
.marke-art[data-art="sonstiges"] { --art-ton: #dbcaff; }
.marke-art[data-art="clip"] { --art-ton: #b5b5ca; }
.marke-art[data-art="bild"] { --art-ton: #8adbdb; }
.marke-art[data-art="fanart"] { --art-ton: #b88dba; }
.marke-art[data-art="moment"] { --art-ton: #deac83; }
.marke-art[data-art="hilfe"] { --art-ton: #a4deb7; }
.marke-art[data-art="folge"] { --art-ton: #e8a5b4; }
.marke-art[data-art="gesucht"] { --art-ton: #ceb480; }
.marke-art[data-art="lust"] { --art-ton: #bfdbb1; }

/* =====================================================================
   AUF- UND ZUKLAPPEN, UND DIE SPRUNGLEISTE (19.09.2026)

   Filipe, zwei Sätze an einem Abend:
     „man soll auf dieser seite jede kategorie auf und zu klappen können
      mit einem button ... überall wo so eine liste entstehen kann"
     „das soll viel geiler aussehen bitte"  (zur Sprungleiste)
   ===================================================================== */

/* ---- Die Abschnittsköpfe sind jetzt Knöpfe --------------------------

   Sie sahen als Überschrift gut aus und sollen genauso aussehen — ein
   Knopf, der wie ein Knopf aussieht, wäre hier ein Rückschritt: Die
   Gliederung ist das Wichtige, das Zuklappen die Zugabe. Deshalb erbt
   der Knopf das komplette Aussehen der alten Überschrift und bekommt
   nur zwei Dinge dazu: einen Zeiger und einen Pfeil. */
.brettabschnitt,
.zeitstrahl__schild {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* 44 px hoch, damit ein Daumen ihn trifft — als Überschrift waren es
     je nach Schriftgröße auch mal 18. */
  min-height: 44px;
}
.brettabschnitt:focus-visible,
.zeitstrahl__schild:focus-visible {
  outline: 2px solid var(--akzent, #5aa0e0);
  outline-offset: 3px;
  border-radius: 4px;
}
.brettabschnitt:hover .brettabschnitt__wort,
.zeitstrahl__schild:hover .zeitstrahl__wort { color: var(--text); }

.brettabschnitt__wort,
.zeitstrahl__wort { flex: 0 0 auto; }

/* Der Pfeil steht GANZ RECHTS, hinter der auslaufenden Linie — dort
   sucht man ihn, und dort steht er auch auf der Startseite. */
.klapp-pfeil {
  order: 9;
  flex: none;
  width: 18px; height: 18px;
  color: var(--text-still);
  transition: transform .2s ease, color .2s ease;
}
[data-zu="ja"] .klapp-pfeil { transform: rotate(-90deg); }
.brettabschnitt:hover .klapp-pfeil,
.zeitstrahl__schild:hover .klapp-pfeil { color: var(--text-leise); }

/* Ein zugeklappter Abschnitt soll SICHTBAR zu sein, nicht nur leer.
   Ohne diesen Hinweis sieht es aus, als fehle der Inhalt. */
.brettabschnitt[data-zu="ja"] .brettabschnitt__zahl,
.zeitstrahl__schild[data-zu="ja"] .zeitstrahl__zahl {
  background: color-mix(in srgb, var(--akzent, #5aa0e0) 22%, transparent);
  color: var(--text-leise);
}

.brettabschnitt__inhalt[hidden],
.zeitstrahl__inhalt[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .klapp-pfeil { transition: none; }
}

/* ---- Die Sprungleiste ------------------------------------------------

   Vorher: eine Reihe unterstrichener Wörter mit kleinen Zahlen. Auf
   dem Bildschirmfoto sah das aus wie eine Fußzeile — man übersieht
   sie, und wer sie sieht, hält sie für Filter (genau die Verwechslung,
   gegen die schon die Wörter „Springe zu" gebaut wurden).

   Jetzt: echte Marken mit Rahmen und eigenem Grund. Sie sehen nach
   etwas aus, das man anfassen kann — und die Zahl sitzt darin statt
   daneben. Die Unterstreichung entfällt: Ein Rahmen sagt dasselbe,
   ohne die Zeile unruhig zu machen. */
.brettmarken {
  gap: 8px 10px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  /* Ein sehr flacher Verlauf statt einer Trennlinie: Die Leiste hebt
     sich als BLOCK ab, statt nur einen Strich zu ziehen. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.brettmarken__wort {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-inline-end: 4px;
}
.brettmarken__weg {
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  transition: border-color var(--tempo), background-color var(--tempo),
              color var(--tempo), transform var(--tempo);
}
.brettmarken__weg:hover,
.brettmarken__weg:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent, #5aa0e0) 45%, var(--rand));
  background: color-mix(in srgb, var(--akzent, #5aa0e0) 12%, transparent);
  transform: translateY(-1px);
}
.brettmarken__zahl {
  background: rgba(255, 255, 255, .09);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .brettmarken__weg { transition: none; }
  .brettmarken__weg:hover { transform: none; }
}

/* =====================================================================
   JEDE SEITE TRÄGT DIE FARBE IHRER KACHEL (19.09.2026)

   Filipe: „die kacheln sollen auch in jeder seite die farben der
   kategorie haben. ich will dass alles perfekt angepasst ist."

   `bereich.js` setzt `data-ton` am <body>; die Zuordnung Nummer→Farbe
   steht in start.css und gilt damit schon. Hier wird nur der AKZENT
   der Seite darauf umgestellt — und weil die Seite ihn an 44 Stellen
   benutzt (Ränder, Linien, Knöpfe, Marken), färbt sich damit alles
   mit, ohne dass irgendwo eine zweite Farbliste entsteht.

   WARUM NICHT REIN, SONDERN GEMISCHT: Einige Töne sind sehr hell
   (Ton 30 ist fast Weißgrün, Ton 36 Zitronengelb). Als Fläche und
   Rahmen sind sie schön, als Akzentfarbe für dünne Linien und kleinen
   Text auf dunklem Grund blenden sie. Die Beimischung von 12 % des
   ruhigen Blaugraus nimmt genau diese Spitze, ohne die Kategorie
   unkenntlich zu machen — die Farbe bleibt eindeutig zuzuordnen.

   Steht kein `data-ton` da (Direktaufruf ohne passende Kachel), bleibt
   alles wie bisher. Eine Seite ohne Farbe ist unauffällig, eine Seite
   mit der falschen führt in die Irre. */
/* DIESE REGEL STEHT SEIT DEM 22.09.2026 IN start.css.

   Sie stand hier -- und bereich.css laden genau DREI von
   fuenfunddreissig Seiten (bereich.html, bewerben.html,
   teilen.html). Auf den anderen zweiunddreissig setzte kopf.js brav
   `data-ton` an den Koerper, und niemand las es. Die Farbe der Seite
   gab es, sie kam nur nicht an.

   Filipe: „je nachdem auf welcher seite ich bin wechseln gaaanz oben
   in der leiste gewissene symbole und sachen mit ... ich will das auf
   jeder seite".

   start.css liegt auf allen fuenfunddreissig. */

/* Der Kopf der Seite bekommt die Farbe deutlicher — dort schaut man
   zuerst hin, und dort beantwortet sie die Frage „wo bin ich". */
body[data-ton] .kopf-zeile {
  position: relative;
}
body[data-ton] .kopf-zeile::before {
  content: "";
  position: absolute;
  inset: -10px -14px auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ton) 70%, transparent),
    transparent 62%);
  pointer-events: none;
}


/* =====================================================================
   DIE HIGHLIGHTS: DREI ACCOUNTS NEBENEINANDER (20.09.2026)

   Filipe: „die highlights sollen in 3 kategorien sein nebeneinander,
   dogfather, hasidog und dogfather clips. und die liste soll man auch
   zu und auf klappen können."

   ---------------------------------------------------------------------
   `auto-fit` UND NICHT `repeat(3, …)`

   Drei feste Spalten wären auf einem Handy drei Streifen von 100 px,
   in denen kein Titel steht. `minmax(230px, 1fr)` misst statt zu
   rechnen: Nebeneinander, solange der Platz für 230 px je Spalte
   reicht, sonst untereinander. Kommt ein vierter Account dazu, bricht
   die Regel von selbst richtig um — bei einer festen 3 wäre er die
   Zeile, die jemand vergisst.

   Das ist dieselbe Lehre wie bei der Kopfleiste am 06.09.2026: Wo es
   geht, eine Regel statt einer Zahl.
   ===================================================================== */
.kanalspalten {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start;
}

.kanalspalte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--flaeche) 70%, transparent);
  overflow: hidden;
  /* Der farbige Strich oben ist das, was die drei auf einen Blick
     unterscheidet -- vor jedem gelesenen Wort. */
  border-top: 3px solid var(--kfarbe, var(--rand-hell));
}
.kanalspalte[data-kanal="dogfather"] { --kfarbe: #7c6cf0; }
.kanalspalte[data-kanal="hasidog"]   { --kfarbe: #e58bbd; }
.kanalspalte[data-kanal="clips"]     { --kfarbe: #4fb9c8; }
.kanalspalte[data-kanal="ohne"]      { --kfarbe: var(--rand-hell); }

.kanalspalte__kopf {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 0; background: color-mix(in srgb, var(--kfarbe) 9%, transparent);
  color: var(--text);
  font: inherit; font-weight: 650;
  text-align: left; cursor: pointer;
}
.kanalspalte__kopf:hover { background: color-mix(in srgb, var(--kfarbe) 16%, transparent); }
.kanalspalte__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

.kanalspalte__wort { flex: 1 1 auto; min-width: 0; display: block; }
/* Das Handle DARUNTER, nicht daneben: In einer Spalte von 230 px
   schöbe „@dogis.modi.gang" neben dem Namen die Zahl aus dem Bild. */
.kanalspalte__handle {
  display: block;
  font-size: .72rem; font-weight: 500; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanalspalte__zahl {
  flex: 0 0 auto;
  min-width: 22px; padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kfarbe) 26%, transparent);
  font-size: .74rem; font-variant-numeric: tabular-nums;
}

.kanalspalte__inhalt {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
}
/* Die Galerie-Form IN der Spalte. `minmax(180px, 1fr)` statt der 280 px
   von `#liste`: Eine Spalte ist schmaler als die ganze Seite, und mit
   280 px bliebe in einer 376-px-Spalte eine Kachel je Reihe, auch wenn
   zwei hineinpassen. */
.kanalspalte__inhalt[data-galerie="ja"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: stretch;
}
.kanalspalte__leer { margin: 0; font-size: .82rem; }

/* =====================================================================
   DIE ZEITLEISTE

   Sie steht ÜBER den Kanalknöpfen und sieht anders aus als sie: zwei
   Reihen, die gleich aussehen und Verschiedenes tun, sind die Sorte
   Doppeldeutigkeit, die am 18.09. auf „Regeln & Hilfe" schon einmal
   aufgefallen ist.
   ===================================================================== */
.filter__zeiten {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.filter__zeit { display: inline-flex; align-items: center; gap: 6px; }
.filter__zeit[aria-pressed="true"] {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 16%, transparent);
  color: var(--text);
}
.filter__zeit:disabled { opacity: .42; cursor: default; }
.filter__zeit-zahl {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
.filter__zeit[aria-pressed="true"] .filter__zeit-zahl { color: inherit; }

@media (forced-colors: active) {
  .kanalspalte { border: 1px solid CanvasText; border-top-width: 4px; }
  .filter__zeit[aria-pressed="true"] { border: 2px solid Highlight; }
}

/* =====================================================================
   EIN VORSCHLAG IST EIN VORSCHLAG (21.09.2026)

   Filipe: „immer wenn es um was geht was ich machen soll ... dass ich
   immer am ende entscheide ob ich was mache oder nicht. ich kann immer
   annehmen oder ablehnen."

   EIGENE ZEILE, NICHT MITGESCHWOMMEN. Der Kopf des Vorschlagsblocks
   ist eine Flex-Zeile; ohne `flex-basis: 100%` säße der Satz neben der
   Überschrift und zwischen zwei Knöpfen — also genau dort, wo man ihn
   überliest. Er bekommt die ganze Breite und steht unter dem Titel,
   bevor die erste Karte kommt.

   SICHTBAR, ABER KEIN ALARM. Ein roter Kasten würde wie eine Warnung
   aussehen; das hier ist keine. Deshalb der Akzentton des Hauses mit
   9 % Deckkraft — man sieht, dass es zusammengehört und dazugehört,
   und es blendet auf einem dunklen Bildschirm nicht. */
.startkatalog__entscheidung {
  margin: 4px 0 0;
  flex: 1 0 100%;
  padding: .55rem .8rem;
  border-radius: var(--radius-klein);
  border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent);
  background: color-mix(in srgb, var(--akzent) 9%, transparent);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
}

/* WER ENTSCHEIDET -- die Zeile unter der Brett-Ueberschrift
   (21.09.2026). Gleiche Gestaltung wie ueber den Vorschlagskarten:
   Es ist derselbe Satz, und zwei Aussehen fuer eine Aussage waeren
   eines zu viel. */
.brett-entscheidung {
  margin: .6rem 0 0;
  max-width: 62ch;
  padding: .55rem .8rem;
  border-radius: var(--radius-klein);
  border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent);
  background: color-mix(in srgb, var(--akzent) 9%, transparent);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
}
.brett-entscheidung[hidden] { display: none; }

/* =====================================================================
   DAS ANSCHLAGBRETT (22.09.2026)
   =====================================================================

   Filipe: „die sachen sollen in der seite vom anschlagbrett immer
   automatisch nach 24h von da verschwinden. weil alles hat seine
   kategorie und was nicht ist auch nicht um ewig auf der seite zu
   bleiben fertig." Dazu: „viel besser gestaltet, übersichtlicher,
   moderner, hochwertiger, professioneller" — und ausdrücklich auch
   auf dem Handy.

   WAS HÄNGT, SIEHT AUS WIE ETWAS, DAS HÄNGT. Eine Ansage vom Team ist
   keine Notiz unter vielen: Sie gilt jetzt, für alle, und sie ist in
   24 Stunden weg. Deshalb bekommt sie hier eine eigene Sprache —
   kräftiger Rand links in der Farbe ihrer Art, ein Band oben, mehr
   Luft. Nicht mehr Schmuck, sondern mehr Gewicht.

   DIE ART TRÄGT DIE FARBE, und die vier sind das, was `BEREICHE
   .anschlag.arten` im Server aufzählt: Ansage, Neue Regel, Hinweis,
   Danke an euch. Steht dort morgen eine fünfte, fällt sie hier auf den
   neutralen Ton zurück — sichtbar unbeschadet, nur ohne eigene Farbe.
   ===================================================================== */
[data-bereich="anschlag"] .eintrag-karte {
  --anschlag: var(--akzent);
  position: relative;
  padding-left: 18px;
  border-left: 3px solid color-mix(in srgb, var(--anschlag) 65%, transparent);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--anschlag) 10%, transparent) 0%,
      color-mix(in srgb, var(--anschlag) 3%, transparent) 26%,
      transparent 52%),
    linear-gradient(178deg, rgba(10, 14, 22, .96), rgba(5, 8, 14, .98));
}
[data-bereich="anschlag"] .eintrag-karte[data-art="ansage"]  { --anschlag: #8ec9ff; }
[data-bereich="anschlag"] .eintrag-karte[data-art="regel"]   { --anschlag: #f0c14b; }
[data-bereich="anschlag"] .eintrag-karte[data-art="hinweis"] { --anschlag: #a98bff; }
[data-bereich="anschlag"] .eintrag-karte[data-art="danke"]   { --anschlag: #8fd6a6; }

/* ---- Was abgehängt ist ---------------------------------------------- */
/* DIE ZEILE IST LEISE UND ZU. „Von da verschwinden" heißt: nicht mehr
   auf dem Brett. Sie steht trotzdem da, weil gelöscht etwas anderes
   ist als abgehängt — wer eine Ansage geschrieben hat, soll sie
   wiederfinden. */
.anschlag-alt__kopf {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 10px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-still);
}
.anschlag-alt__kopf::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--rand), transparent 70%);
}
.anschlag-alt__zahl {
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--rand);
  font-size: .72rem; letter-spacing: 0;
}
.anschlag-alt { display: grid; gap: 10px; }
/* Sie sind grau, nicht halb durchsichtig: Durchsichtig hieße, dass
   das Bühnenbild hindurchscheint — Text auf einem Foto, und ausgerechnet
   der, den man selten liest. */
.anschlag-alt .eintrag-karte {
  --anschlag: #6b7a8d;
  filter: grayscale(.55);
}

@media (forced-colors: active) {
  [data-bereich="anschlag"] .eintrag-karte { border-left: 3px solid CanvasText; }
  .anschlag-alt__kopf::after { background: CanvasText; }
}


/* =====================================================================
   NICHT ALLES AUF EINMAL (23.09.2026)
   =====================================================================

   Filipe: "ohne so dass es extrem lange listen gibt mit der zeit."

   Der Knopf steht am Ende eines Abschnitts und sagt, wie viele noch
   kommen. Er sieht bewusst NICHT aus wie eine Karte: Er ist die
   Fortsetzung der Liste, kein weiterer Eintrag darin -- wer ihn fuer
   eine Karte haelt, tippt ihn versehentlich an.

   Ueber die ganze Breite, damit er in einer Galerie mit zwei Spalten
   nicht als halbe Kachel danebensteht. */
.mehr-zeigen {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px;
  padding: 11px 14px;
  font: inherit; font-size: .84rem;
  color: var(--text-leise, #9fb3c8);
  text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
  border-radius: 10px;
  transition: border-color .16s ease, color .16s ease;
}
.mehr-zeigen:hover, .mehr-zeigen:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mehr-zeigen { transition: none; }
}

/* Der Satz an einer Spalte, die sagt, was zu tun ist -- siehe
   "Noch einzusortieren" in bereich.js. Leise, aber lesbar: Er ist eine
   Anleitung, keine Warnung. */
.kanalspalte__satz {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  font-size: .82rem; line-height: 1.5;
  color: var(--text-leise, #9fb3c8);
}


/* =====================================================================
   GLIEDERT NACH ALTER (24.09.2026)
   =====================================================================

   Filipe: "ich will da unterkategorien die man auf und zu klappen
   kann, so wie heute gestern, diese woche, diesen monate ..."

   Der Kopf einer Gruppe ist KLEINER als der Kopf der Spalte darueber
   -- er gliedert innerhalb, er teilt nicht neu ein. Gleich grosse
   Koepfe auf zwei Ebenen lesen sich als eine, und dann weiss man
   nicht mehr, was wozu gehoert.

   Die Zahl daneben sagt, wie viel darin liegt. Zugeklappt ist sie die
   einzige Auskunft, die die Gruppe noch gibt -- ohne sie waere eine
   zugeklappte Zeile eine Ueberschrift ohne Inhalt, und niemand macht
   sie je auf. */
.zeitgruppe__kopf {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin: 12px 0 6px;
  padding: 7px 10px;
  font: inherit; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-leise, #9fb3c8);
  text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  border-radius: 9px;
}
.zeitgruppe__kopf:hover, .zeitgruppe__kopf:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
}
/* Die erste Gruppe braucht oben keinen Abstand -- darueber steht
   schon der Kopf der Spalte. */
.zeitgruppe__kopf:first-child { margin-top: 2px; }

.zeitgruppe__wort { flex: 1 1 auto; min-width: 0; }
.zeitgruppe__zahl {
  flex: none;
  padding: 1px 8px;
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--text);
  background: color-mix(in srgb, var(--tinte) 70%, #ffffff 30%);
  border-radius: 999px;
}
/* Der Pfeil sitzt rechts und dreht sich mit -- dieselbe Hilfe wie
   ueberall (klappPfeil aus kopf.js). */
.zeitgruppe__kopf .klapp-pfeil { flex: none; }

/* Der Inhalt einer Gruppe ist wieder eine Galerie, genau wie die
   Spalte es war -- die Kacheln sollen gleich aussehen, egal ob
   gegliedert wird oder nicht. */
.zeitgruppe__inhalt[data-galerie="ja"] {
  grid-column: 1 / -1;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}