/* ===================================================================
   Calls & Meeting-Protokolle.

   Nur eine Gruppe wird optisch hervorgehoben: die, in der etwas fehlt.
   Alles andere bleibt bewusst ruhig -- sonst schreit die ganze Seite
   und man sieht nicht mehr, was wirklich dran ist.
   =================================================================== */

.gruppe { margin-bottom: 32px; }
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.stufe__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.stufe__zahl {
  min-width: 22px; padding: 1px 7px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06); border-radius: 999px;
}
.block__frage { margin: 0 0 12px; font-size: .85rem; color: var(--text-still); }
.gruppe__karten { display: grid; gap: 10px; margin-top: 12px; }

.gruppe[data-gruppe="offen"] .stufe__titel { color: #f0c48a; }
.gruppe[data-gruppe="offen"] .stufe__zahl {
  color: #f0c48a; background: rgba(240, 196, 138, .13);
}

/* ---------- Karte --------------------------------------------------------- */

.call {
  position: relative;
  padding: 15px 18px 15px 21px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  transition: border-color .18s ease;
}
.call::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rand-stark, rgba(255, 255, 255, .18));
}
.call[data-gruppe="offen"] {
  border-color: rgba(240, 196, 138, .32);
  background: rgba(240, 196, 138, .045);
}
.call[data-gruppe="offen"]::before { background: #f0c48a; }
.call[data-gruppe="anstehend"]::before { background: var(--akzent); }
.call[data-gruppe="erledigt"] { opacity: .82; }
.call[data-gruppe="erledigt"]:hover { opacity: 1; }
.call[data-gruppe="erledigt"]::before { background: #79d1a2; opacity: .55; }
.call:hover { border-color: rgba(255, 255, 255, .18); }

.call__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.call__titel { margin: 0; font-size: 1.02rem; font-weight: 650; }
.call__zeit { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
.call__text, .call__ort { margin: 10px 0 0; font-size: .86rem; color: var(--text-leise); }
.call__ort::before { content: "Ort: "; color: var(--text-still); }

.marke-fehlt {
  padding: 3px 9px; border-radius: 999px;
  font-size: .71rem; font-weight: 600;
  color: #f0c48a; background: rgba(240, 196, 138, .12);
  border: 1px solid rgba(240, 196, 138, .35);
}

/* ---------- Aufgeklappt ---------------------------------------------------- */

.call__detail { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--rand); }
.call__abschnitt {
  margin: 2px 0 14px; font-size: .88rem; color: var(--text-leise);
  white-space: pre-wrap; max-width: 78ch;
}
.call__quelle { margin: 12px 0 0; font-size: .77rem; color: var(--text-still); }
.call__verweis { color: var(--akzent); }

.todo-liste { margin: 4px 0 0; padding: 0; list-style: none; }
.todo-liste li {
  padding: 9px 13px; margin-bottom: 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font-size: .87rem;
}
.todo-liste li[data-status="erledigt"] { opacity: .6; }
.todo-liste li[data-status="erledigt"] .todo-liste__titel { text-decoration: line-through; }
.todo-liste__titel { display: block; }
.todo-liste .kk__still { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-still); }

/* ---------- Protokollbogen -------------------------------------------------- */

.bogen__hinweis { margin: 1px 0 6px; font-size: .78rem; color: var(--text-still); max-width: 70ch; }
.bogen__feld {
  width: 100%; margin-bottom: 16px; padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit; resize: vertical;
}
.bogen__zeit {
  margin-bottom: 14px; padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.todos { display: grid; gap: 7px; margin: 4px 0 10px; }
.todo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.todo__titel, .todo__frist {
  padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.bogen__feld:focus, .bogen__zeit:focus, .todo__titel:focus, .todo__frist:focus {
  outline: none; border-color: rgba(63, 189, 245, .65);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}


@media (max-width: 560px) {
  .todo { grid-template-columns: minmax(0, 1fr) auto; }
  .todo__frist { grid-column: 1 / 2; }
  .todo__weg { grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .call, .todo__weg { transition: none; }
}

/* ---------- Aufklappbare Zeitraum-Blöcke --------------------------------

   Wunsch Filipe, 06.09.2026, mit einem Bild von "STEHT AN 27":
   *"die liste da soll kategorisiert sein und werden mit einem button
   zum auf und zu machen."*

   Siebenundzwanzig Karten am Stück beantworten keine Frage -- man
   scrollt an allem vorbei, was diese Woche ansteht, um zu sehen, dass
   der Rest im November liegt. Jetzt: Heute · Diese Woche · Nächste
   Woche · Später, und offen ist nur der erste gefüllte Block.

   Gestaltet wie der Bereich "Abgebrochen" auf dem Aufgabenbrett --
   dasselbe Bauteil soll auch gleich aussehen. */

.zeitblock {
  margin-top: 10px;
  border: 1px solid var(--rand);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
}
.zeitblock + .zeitblock { margin-top: 8px; }

.zeitblock__kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px;
  cursor: pointer;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-still);
  /* Das eigene Dreieck von <summary> weg -- es wird unten selbst
     gezeichnet, damit es links steht und sich beim Öffnen dreht. */
  list-style: none;
}
.zeitblock__kopf::-webkit-details-marker { display: none; }
.zeitblock__kopf:hover { color: var(--text-leise); }
.zeitblock__kopf:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 13px;
}

.zeitblock__kopf::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
.zeitblock[open] .zeitblock__kopf::before { transform: rotate(90deg); }

.zeitblock__name { flex: none; }
.zeitblock__zahl {
  padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: 0;
  color: var(--text-leise);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--rand);
  font-variant-numeric: tabular-nums;
}
/* "ab 23. Sep" -- ohne das sagt "Später" nicht, ob morgen oder im
   November. Steht rechts und tritt zurück. */
.zeitblock__ab {
  margin-left: auto;
  font-size: .74rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-still);
}

/* Der offene Block hebt sich ab -- sonst sieht man beim Scrollen nicht,
   wo man gerade ist. */
.zeitblock[open] { border-color: var(--rand-hell); }
.zeitblock[open] .zeitblock__kopf { color: var(--text-leise); }
.zeitblock .gruppe__karten { padding: 4px 13px 14px; }

/* ZUGEKLAPPT HEISST WIRKLICH WEG (06.09.2026, gefunden von
   pruef-call-kategorien).

   <details> versteckt seinen Inhalt von selbst -- aber nur, solange
   niemand dem Inhalt eine eigene `display`-Angabe gibt. `.gruppe__karten`
   traegt `display: grid` (aus dem gemeinsamen Stil der Gruppen), und
   damit war der Block zwar ZUGEKLAPPT, seine Karten standen aber
   weiterhin darunter: gemessen 367 Pixel Hoehe bei open=false.

   Die ganze Funktion waere damit wirkungslos gewesen -- der Knopf
   haette sich bewegt und sonst nichts getan. Im Bildschirmfoto fiel es
   nicht auf, weil der Ausschnitt genau darueber endete.

   Deshalb hier ausdruecklich: zu ist zu. */
.zeitblock:not([open]) .gruppe__karten { display: none; }

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

@media (forced-colors: active) {
  .zeitblock { border: 1px solid CanvasText; }
  .zeitblock__zahl { border: 1px solid CanvasText; }
}


/* =====================================================================
   CALLS & PROTOKOLLE — übersichtlicher (07.09.2026)

   Wunsch Filipe: "ich will dass du diese komplette seite viel
   übersichtlicher machst ... total übersichtlich und hoch profissionell."

   ---------------------------------------------------------------------
   WAS AN DER SEITE UNÜBERSICHTLICH WAR

   Nicht die Menge -- 27 anstehende Gespräche sind viele, aber sie waren
   schon sauber gruppiert. Unübersichtlich waren DREI Dinge, und alle
   drei sind Abstände, keine Inhalte:

     1. ALLES STAND GLEICH WEIT AUSEINANDER. Zwischen zwei Karten
        derselben Woche lag derselbe Abstand wie zwischen zwei Gruppen.
        Damit sieht man die Gliederung nicht mehr -- man liest eine
        lange Reihe statt drei Blöcke. Jetzt: 10 px innerhalb einer
        Gruppe, 32 px zwischen Gruppen, und die Gruppenüberschrift
        bekommt eine eigene Linie.

     2. DIE KARTEN WAREN FAST DURCHSICHTIG. Auf einem Bild mit einem
        großen hellen Logo bedeutet das: Der Untergrund kämpft mit dem
        Text. Sie bekommen jetzt dasselbe Material wie überall --
        beleuchtete Platte, Leuchtschiene in der Farbe ihres Zustands.

     3. DER ZUSTAND STAND NUR IN DER FARBE. "Protokoll fehlt" war ein
        bernsteinfarbener Strich am Rand. Farbe allein ist nie genug --
        die Schiene bleibt, aber die Karte trägt den Zustand ohnehin
        schon als Wort in ihrer Marke.

   Die Farben sind dieselben wie im ganzen Haus: Bernstein = wartet,
   Blau = steht an, Grün = erledigt.
   ===================================================================== */

.gruppe { margin-bottom: 34px; }
/* Die Gruppenüberschrift bekommt eine Grundlinie über die ganze Breite
   -- das ist der billigste und stärkste Trick für Gliederung: Das Auge
   sieht einen Block, bevor es ein Wort gelesen hat. */
.gruppe > .stufe {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(150, 186, 220, .12);
}
.gruppe__karten { gap: 10px; margin-top: 14px; }

.call {
  --c: var(--akzent);
  padding: 16px 18px 16px 22px;
  border-radius: 3px 16px 16px 3px;
  border-color: color-mix(in srgb, var(--c) 16%, rgba(150, 186, 220, .12));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c) 20%, transparent) 0%,
      color-mix(in srgb, var(--c) 6%, transparent) 14%,
      color-mix(in srgb, var(--c) 2%, transparent) 30%,
      transparent 50%),
    linear-gradient(163deg,
      rgba(21, 28, 41, .95) 0%,
      rgba(11, 15, 24, .95) 62%,
      rgba(8, 11, 18, .95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 2px 4px -2px rgba(0, 0, 0, .5),
    0 12px 26px -18px rgba(0, 0, 0, .85);
  transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
/* Die Schiene läuft über die ganze Höhe, nicht mit 10 px Luft oben und
   unten. Ein Strich, der vor der Ecke aufhört, sieht aus wie ein
   Fehler; einer, der durchgeht, sieht aus wie Bauweise. */
.call::before {
  top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 80%, transparent) 0%,
    color-mix(in srgb, var(--c) 42%, transparent) 100%);
  opacity: .75;
  transition: opacity var(--tempo);
}
.call[data-gruppe="offen"]     { --c: #f0c48a; }
.call[data-gruppe="anstehend"] { --c: var(--akzent); }
.call[data-gruppe="erledigt"]  { --c: #79d1a2; }
/* Die alten Sonderregeln setzten Fläche und Strichfarbe getrennt --
   jetzt steckt beides in --c. Diese eine Zeile ersetzt vier. */
.call[data-gruppe="offen"]::before,
.call[data-gruppe="anstehend"]::before,
.call[data-gruppe="erledigt"]::before { background: linear-gradient(180deg,
  color-mix(in srgb, var(--c) 80%, transparent) 0%,
  color-mix(in srgb, var(--c) 42%, transparent) 100%); }
/* Erledigtes tritt zurück -- aber über die Fläche, nicht über die
   Schriftdeckkraft. `opacity` auf der ganzen Karte hätte auch den Text
   erfasst, und genau dieser Fehler hat am 07.09. an anderer Stelle
   einen Kontrast unter die Schwelle gedrückt. */
.call[data-gruppe="erledigt"] {
  opacity: 1;
  border-color: rgba(150, 186, 220, .10);
}
.call[data-gruppe="erledigt"]::before { opacity: .5; }

.call:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 34%, rgba(150, 186, 220, .16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 4px 9px -4px rgba(0, 0, 0, .55),
    0 18px 36px -20px rgba(0, 0, 0, .9);
}
.call:hover::before { opacity: 1; }

.call__titel { font-size: 1.05rem; font-weight: 700; color: #eaf2fb; }
.call__zeit { color: var(--text-leise); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .call, .call:hover { transform: none; }
}
@media (forced-colors: active) {
  .call { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
}


/* =====================================================================
   DAS BRETT — zwei Spalten statt einer Liste (07.09.2026)

   Filipe: "immer noch gleich aufgestellt, man kann sogar bestimmt zwei
   kategorien neben einander legen ... wenn ich sage komplett aendern
   dan komplett aendern."

   Er hatte recht. Beim letzten Mal habe ich nur das Material der Karten
   getauscht -- die Aufstellung blieb eine Spalte, in der drei Gruppen
   untereinander standen. Und weil "Steht an" siebenundzwanzig Eintraege
   hat, lagen die beiden anderen ausserhalb des Bildes: Man SAH die
   Aenderung gar nicht, weil man nie so weit kam.

   Jetzt sind die Gruppen eigenstaendige Tafeln in einem Raster. Die
   kurze, dringende ("Protokoll fehlt") und das Archiv ("Festgehalten")
   liegen NEBEN der langen Liste statt darunter.

   `align-items: start` ist dabei der entscheidende Punkt: Ohne ihn
   waeren alle Tafeln so hoch wie die hoechste, und neben der langen
   Liste stuenden zwei fast leere Kaesten. So endet jede Tafel dort, wo
   ihr Inhalt endet.

   KEINE feste Spaltenzuweisung im Skript. Welche Tafel wo landet,
   entscheidet die Breite -- eine im Skript festgeschriebene Spalte waere
   eine Zahl, die beim naechsten Fenster falsch ist.
   ===================================================================== */
/* =====================================================================
   DREI TAFELN NEBENEINANDER, JEDE MIT EIGENEM LAUF (07.09.2026)

   Filipe: "das bewegt sich immer noch mit, das ist so scheissen.
   gestalte die 3 kategorien anders, es soll richtig geil sein."

   DAS EIGENTLICHE PROBLEM WAR DIE AUFTEILUNG, nicht die Gestaltung.
   Zwei Spalten, und "Steht an" hatte siebenundzwanzig Karten: Die
   rechte Spalte lief ueber mehrere Bildschirmhoehen nach unten, die
   linke war nach zwei Koepfen zu Ende. Wer scrollt, sieht dann
   minutenlang eine leere halbe Seite mit einer Ueberschrift, die
   scheinbar "mitwandert" -- sie steht bloss still, waehrend daneben
   alles laeuft.

   Ein Brett loest das anders: Jede Tafel bekommt DIESELBE Hoehe und
   einen EIGENEN Lauf. Damit sind alle drei Gruppen immer gleichzeitig
   zu sehen, egal wie viel in einer steckt, und die Seite selbst
   scrollt kaum noch. Das ist die Bauart jedes Aufgabenbretts, und sie
   ist es aus genau diesem Grund.

   Die Hoehe haengt am Fenster (`min(62vh, 620px)`) statt an einer
   festen Zahl: Auf einem Laptop bleibt unten Luft, auf einem grossen
   Schirm nutzt das Brett den Platz. Unter 900 px stehen die Tafeln
   untereinander und laufen wieder frei -- auf dem Handy ist ein
   Kaestchen mit eigenem Balken eine Falle, keine Hilfe.
   ===================================================================== */
.call-brett {
  /* EINE REIHE, VIER TAFELN (07.09.2026).

     Filipe: "die sollen alle in einer reihe sein und nicht 3 und dann
     eins drunter."

     Vorher stand hier `auto-fit` mit 340 px Mindestbreite. Das rechnet
     sich selbst aus, wie viele nebeneinanderpassen -- und bei vier
     Tafeln in einer 1240 px breiten Spalte reichte es fuer drei. Die
     vierte rutschte in eine zweite Zeile, und das Brett sah aus wie
     ein Versehen. `auto-fit` ist bequem, solange die Anzahl offen ist;
     sobald sie feststeht, ist es eine Rechnung, die man nicht
     kontrolliert.

     Vier sind es, vier stehen nebeneinander -- und zwar mit `flex`
     statt `grid`, weil damit die OFFENE Tafel breiter sein kann als
     die drei geschlossenen. Es ist immer genau eine offen (siehe
     calls.js), und die bekommt doppelten Anteil: Dort wird gearbeitet,
     die anderen sind Reiter. Das ist der Unterschied zwischen vier
     gleich grossen Kaesten und einem Brett. */
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: stretch;
}
.call-brett .gruppe { flex: 1 1 0; min-width: 0; }
.call-brett .gruppe:not([data-zu="ja"]) { flex: 1.5 1 0; }

/* DER TITEL MUSS GANZ HINEINPASSEN, nicht abgeschnitten werden.

   Im ersten Anlauf standen dort "LAEUFT AUTO..." und "FESTGEHALT..." --
   gemessen bei 222 px je zugeklappter Tafel. Ein abgeschnittener Name
   auf einem Reiter ist das Gegenteil von uebersichtlich: Man muss ihn
   aufklappen, um zu wissen, was drin ist.

   Zwei Stellschrauben statt einer: Die offene Tafel nimmt 1,5 Anteile
   statt 2,2 (die geschlossenen wachsen dadurch von 222 auf 266 px), und
   die Sperrung der Grossbuchstaben faellt von 0,08 auf 0,035 em. Beides
   zusammen bringt "LAEUFT AUTOMATISCH" unter -- Punkte bleiben als
   letzte Rueckfallebene stehen, falls jemand eine laengere Gruppe
   erfindet. */
.call-brett .stufe__titel {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .035em;
  font-size: .74rem;
}
.call-brett .stufe__kopf { gap: 8px; padding-left: 13px; padding-right: 11px; }
.call-brett .stufe__zahl, .call-brett .gruppe__pfeil { flex: none; }

@media (max-width: 1100px) {
  /* Vier nebeneinander unter 1100 px waeren vier Streifen von 250 px --
     lesbar, aber nicht mehr benutzbar. Ab hier zwei Reihen zu zwei. */
  .call-brett { flex-wrap: wrap; }
  .call-brett .gruppe,
  .call-brett .gruppe:not([data-zu="ja"]) { flex: 1 1 calc(50% - 7px); }
}
@media (max-width: 700px) {
  .call-brett .gruppe,
  .call-brett .gruppe:not([data-zu="ja"]) { flex: 1 1 100%; }
}
.call-brett .gruppe {
  display: flex; flex-direction: column;
  min-height: 0;
}
/* EINE ZUGEKLAPPTE TAFEL SCHRUMPFT AUF IHREN KOPF.

   Im Bildschirmfoto stand sie als leerer Kasten ueber die volle Hoehe
   -- die Regel "align-items: stretch" am Brett gilt eben auch fuer die,
   die nichts zeigt. Drei gleich hohe Tafeln sind richtig, solange sie
   etwas enthalten; eine geschlossene enthaelt nichts und soll dann
   auch nichts belegen. */
.call-brett .gruppe[data-zu="ja"] { align-self: start; }
.call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ein eigener Lauf braucht einen eigenen Balken -- der Systembalken
     ist hell und reisst ein weisses Band in eine dunkle Flaeche. */
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 186, 220, .35) transparent;
}
.call-brett .gruppe__karten::-webkit-scrollbar { width: 10px; }
.call-brett .gruppe__karten::-webkit-scrollbar-track { background: transparent; }
.call-brett .gruppe__karten::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(150, 186, 220, .42), rgba(150, 186, 220, .22));
  border: 3px solid transparent; background-clip: content-box;
  border-radius: 999px;
}
@media (max-width: 900px) {
  /* Untereinander und ohne eigenen Lauf -- siehe oben. */
  .call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten {
    max-height: none; overflow: visible;
  }
}

.call-brett .gruppe {
  margin: 0;
  padding: 4px 14px 14px;
  border: 1px solid rgba(150, 186, 220, .12);
  border-radius: 4px 18px 18px 4px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--tafel-ton, var(--akzent)) 16%, transparent) 0%,
      color-mix(in srgb, var(--tafel-ton, var(--akzent)) 5%, transparent) 12%,
      transparent 34%),
    linear-gradient(163deg,
      rgba(21, 28, 41, .95) 0%,
      rgba(11, 15, 24, .95) 62%,
      rgba(8, 11, 18, .95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 2px 4px -2px rgba(0, 0, 0, .5),
    0 14px 30px -20px rgba(0, 0, 0, .88);
  overflow: hidden;
  position: relative;
}
/* Jede Tafel traegt die Farbe ihres Zustands in einer Schiene links --
   dieselbe Sprache wie ueberall: Bernstein wartet, Blau steht an, Gruen
   ist erledigt. */
.call-brett .gruppe[data-gruppe="offen"]      { --tafel-ton: #f0c48a; }
.call-brett .gruppe[data-gruppe="anstehend"]  { --tafel-ton: var(--akzent); }
.call-brett .gruppe[data-gruppe="erledigt"]   { --tafel-ton: #79d1a2; }
.call-brett .gruppe::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tafel-ton) 85%, transparent) 0%,
    color-mix(in srgb, var(--tafel-ton) 35%, transparent) 100%);
}

/* Der Kopf ist der Schalter -- <button>, also muessen die Vorgaben des
   Browsers zurueck (eigene Schrift, Rand, zentrierter Text). */
/* =====================================================================
   DIE GRUPPENKOEPFE SIND SCHALTER AN EINEM GERAET (07.09.2026)

   Filipe: "das soll besser viel besser geregelt sein, weil wenn man die
   aufmachst sieht das so beschissen aus, mach es im insgesamten viel
   krasser besser und geiler."

   Vorher war der Kopf eine Textzeile mit einem Pfeil daneben, und die
   Karten darunter begannen ohne Uebergang. Aufgeklappt sah man deshalb
   nicht, wo eine Gruppe aufhoert und die naechste anfaengt -- drei
   Ueberschriften und dazwischen eine Wand.

   Jetzt ist der Kopf ein SCHALTER mit Zustand:

     ZU        eine flache Leiste, dunkel
     AUF       die Leiste sitzt in einer Fassung, die Zahl wird zum
               gefassten Schild, und die Karten darunter stehen in einer
               eigenen, leicht vertieften Bahn mit einer Farbschiene
               links -- man sieht auf einen Blick, was zu welcher
               Gruppe gehoert

   Die abgeschnittene Ecke oben links nimmt die Sprache der Module auf,
   ohne dass der Kopf ein Modul waere: Er ist ein Bedienelement, und
   deshalb hat er keine Eckwinkel und kein Raster. */
.call-brett .stufe__kopf {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  font: inherit; color: inherit; text-align: left;
  border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px 11px 15px;
  border-radius: 0;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c, var(--akzent)) 22%, transparent) 0%,
      transparent 42%),
    linear-gradient(180deg, #101724, #0a0f18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 0 rgba(0, 0, 0, .6);
  transition: background var(--tempo), box-shadow var(--tempo);
}
.call-brett .stufe__kopf:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c, var(--akzent)) 30%, transparent) 0%,
      transparent 46%),
    linear-gradient(180deg, #141d2d, #0c121c);
}
.call-brett .stufe__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.call-brett .stufe__titel { margin: 0; color: var(--c, var(--akzent)); }

/* Die Zahl als gefasstes Schild -- dieselbe Bauart wie auf den Kacheln
   und in der Tageskachel. Eine Oberflaeche, eine Sprache. */
.call-brett .stufe__zahl {
  margin-left: auto;
  min-width: 26px; padding: 2px 8px;
  border-radius: 0;
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px);
  color: var(--c, var(--akzent));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .12) 0%, transparent 52%),
    linear-gradient(color-mix(in srgb, var(--c, var(--akzent)) 12%, #080d15),
                    color-mix(in srgb, var(--c, var(--akzent)) 5%, #080d15));
  box-shadow: 0 0 0 1px rgba(190, 215, 245, .18);
}

.call-brett .gruppe__pfeil {
  width: 16px; height: 16px; flex: none;
  color: var(--text-still);
  transition: transform var(--tempo);
}
.call-brett .gruppe[data-zu="ja"] .gruppe__pfeil { transform: rotate(-90deg); }
.call-brett .gruppe[data-zu="ja"] { padding-bottom: 4px; }

/* AUFGEKLAPPT: die Karten stehen in einer eigenen Bahn. Das ist der
   Teil, der gefehlt hat -- ohne ihn hoerte die Gruppe optisch beim
   Kopf auf, und darunter lagen einfach Karten im Nichts. */
.call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten {
  margin-top: 0;
  padding: 12px 12px 12px 14px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c, var(--akzent)) 10%, transparent) 0 3px,
      transparent 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .006));
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .5),
    inset 3px 0 0 -1px color-mix(in srgb, var(--c, var(--akzent)) 55%, transparent);
}

/* Die Karten stehen jetzt IN einer Tafel -- sie brauchen keine zweite
   schwere Flaeche, sonst liegt Kasten in Kasten. Leichter Grund, gleiche
   Schiene. */
.call-brett .call {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c) 14%, transparent) 0%,
      transparent 38%),
    rgba(255, 255, 255, .028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.call-brett .call:hover {
  transform: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c) 20%, transparent) 0%,
      transparent 42%),
    rgba(255, 255, 255, .05);
}

@media (prefers-reduced-motion: reduce) {
  .call-brett .stufe__kopf, .call-brett .gruppe__pfeil { transition: none; }
}
@media (max-width: 900px) {
  /* Eine Spalte -- und die Reihenspanne muss weg, sonst reisst sie in
     der einspaltigen Ansicht eine leere Zeile auf. */
  .call-brett .gruppe[data-gruppe="anstehend"] { grid-row: auto; }
}
@media (forced-colors: active) {
  .call-brett .gruppe { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
}

/* EINE LEERE TAFEL BLEIBT STEHEN -- gedaempft (08.09.2026).

   Filipe hatte zwei Bildschirmfotos nebeneinander gestellt: bei einem
   Scout EINE Tafel ueber die volle Breite, bei einer Managerin vier
   nebeneinander. Der Grund war, dass leere Gruppen gar nicht gebaut
   wurden (calls.js) -- die Seite war damit nicht nur leerer, sondern
   anders aufgeteilt.

   Jetzt stehen immer alle vier. Die leeren treten zurueck, statt zu
   verschwinden: weniger Deckkraft, die Null in Grau. Dieselbe Sprache
   wie bei den Aufgabenzahlen auf der Startseite -- gedaempft ist auch
   eine Antwort, nur eine leise. */
.gruppe[data-leer="ja"] { opacity: .58; }
.gruppe[data-leer="ja"] .stufe__zahl {
  color: var(--text-still);
  background: rgba(150, 186, 220, .09);
  border-color: rgba(150, 186, 220, .14);
}
.gruppe[data-leer="ja"] .stufe__titel { color: var(--text-leise); }

/* DER LEER-HINWEIS STEHT UEBER DEN TAFELN, NICHT NEBEN IHNEN.

   Seit dem 08.09.2026 bleiben alle vier Tafeln stehen, auch wenn nichts
   drin ist -- damit die Seite bei jeder Rolle gleich aufgebaut ist.
   Der Hinweis "Noch keine Calls" ist damit zum GESCHWISTER der Tafeln
   geworden, und `.call-brett` ist ein Flex-Kasten in einer Reihe: Er
   nahm sich eine Spalte und quetschte die vier Tafeln daneben auf je
   80 Pixel zusammen. Im Bildschirmfoto standen vier Stummel neben
   einem breiten Satz.

   `width: 100%` plus Umbruch loest das: Der Hinweis nimmt die ganze
   erste Zeile, die vier Tafeln stehen darunter nebeneinander wie
   immer. */
.call-brett { flex-wrap: wrap; }
.call-brett > .leer-hinweis {
  width: 100%;
  margin-bottom: 4px;
}

/* =====================================================================
   DIE VIER TAFELN BEKOMMEN EINE FLAECHE (screen1, 09.09.2026)

   Filipe, mit Bildschirmfoto der vier Reiter: "lass die viel geiler
   aussehen bitte."

   NACHGESEHEN, WAS DAS BILD WIRKLICH ZEIGT: Sie sind fast
   DURCHSICHTIG. `.gruppe[data-gruppe]` steht in der Modulliste und
   bekommt von dort Fase, Kantenlicht und Eckwinkel -- aber die
   Modulliste gibt nur die FORM, die Flaeche bringt jedes Bauteil
   selbst mit, und hier stand nur `margin-bottom`. Im Bildschirmfoto
   liest man "WIEDERHOLUNGEN" quer ueber dem Schriftzug SPICY MEDIA
   des Hintergrundbildes.

   Genau derselbe Fehler wie beim Entscheidungsblock auf der
   Report-Seite und bei der Anlasskachel im Kalender -- dreimal in
   einer Nacht dieselbe Ursache: Wer ein Bauteil in die Modulliste
   aufnimmt, denkt, es sei fertig gestaltet. Es hat dann eine
   Silhouette und keinen Koerper.

   DIE VIER FARBEN GAB ES SCHON -- an der falschen Stelle. `#f0c48a`
   fuer "Protokoll fehlt" und `#79d1a2` fuer "Festgehalten" standen
   bereits im Code, aber nur an den EINTRAEGEN in der Tafel. Der Reiter
   selbst, den man zuerst sieht, trug sie nicht. Jetzt stehen sie
   einmal als `--gton` und faerben beides: die Flaeche der Tafel und
   ueber `--ton` das Kantenlicht aus der Modulliste.

   WAS DIE FARBEN SAGEN (sie sind nicht ausgesucht, sondern zugeordnet):
     Protokoll fehlt   Bernstein -- etwas ist offen und wartet
     Steht an          Babyblau  -- der Normalfall, es kommt noch
     Wiederholungen    Lila      -- laeuft von allein
     Festgehalten      Gruen     -- erledigt

   AUGENSCHONEND: Die Flaeche traegt hoechstens 10 Prozent Farbe auf
   einem tiefen Grund; laut ist nur die Beschriftung, und die war es
   vorher schon. Vier gleich helle Reiter waeren vier gleich laute
   Rufe.
   ===================================================================== */
.gruppe[data-gruppe] {
  --gton: var(--akzent);
  --ton: var(--gton);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--gton) 10%, transparent),
      color-mix(in srgb, var(--gton) 3%, transparent) 40%,
      transparent 72%),
    linear-gradient(178deg, rgba(18, 25, 37, .93), rgba(9, 13, 21, .96));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--gton) 68%, transparent),
    inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
}
.gruppe[data-gruppe="offen"]     { --gton: #f0c48a; }
.gruppe[data-gruppe="anstehend"] { --gton: #7ec8f2; }
.gruppe[data-gruppe="serien"]    { --gton: #a78bfa; }
.gruppe[data-gruppe="erledigt"]  { --gton: #79d1a2; }
/* Eine leere Tafel tritt zurueck -- sie ist eine gute Nachricht, keine
   Aufgabe. Dieselbe Ueberlegung wie bei den Zahlen auf der Uebersicht:
   Null darf leise sein. */
.gruppe[data-gruppe][data-leer="ja"] {
  background: linear-gradient(178deg, rgba(14, 19, 29, .9), rgba(8, 12, 19, .94));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--gton) 26%, transparent),
    inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
}