dogfather-universe/workspace/assets/css/support.css

/* ===================================================================
   SUPPORT (24.09.2026)

   Filipe: „es soll alles hoch profissionell gemacht werden aber so
   einfach wie möglich, will nichts kompliziertes oder zu viel. kurz
   und knapp und extrem geil."

   Deshalb kein eigenes Aussehen: Kästen, Knöpfe und Marken kommen aus
   start.css und module.css, so wie auf jeder anderen Seite. Hier steht
   nur, was es woanders nicht gibt — das Melde-Feld, die Bildvorschau,
   die Karte einer Meldung und das Zahlenband des Eingangs.

   Eine eigene Farbwelt hätte die Seite fremd wirken lassen. Wer im
   schlechtesten Moment etwas meldet, soll nicht zusätzlich merken,
   dass er woanders ist.
   =================================================================== */

.s-titel {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
  margin: 0 0 12px;
}
.s-zahl {
  display: inline-block; margin-left: 8px; padding: 1px 9px;
  border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--akzent) 15%, transparent);
  color: var(--akzent);
}

/* ---------- Melden ------------------------------------------------- */

.s-melden {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 18px 18px 16px;
  margin-bottom: 22px;
}
/* Für die Leitung rutscht der Melde-Kasten unter den Eingang.

   NICHT ueber `order` (24.09.2026, nachgemessen): `.inhalt` ist in
   start.css ein gewoehnlicher Block, kein Flex-Behaelter -- `order`
   haette dort gar nichts getan, und die Klasse waere eine Regel
   gewesen, die aussieht, als wirke sie. Verschoben wird der Kasten
   deshalb im DOM (support.js), und dieser Abstand gilt dann. */
.s-melden--unten { margin-top: 26px; margin-bottom: 0; }

.s-feld { display: block; }
.s-feld__schild {
  display: block; margin-bottom: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still);
}
.s-melden textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  font: inherit; font-size: .95rem; line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  resize: vertical; min-height: 96px;
}
.s-melden textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px;
  border-color: transparent;
}

.s-bild {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.s-bild__name { font-size: .8rem; color: var(--text-still); }

/* ===== BIS ZU DREI VORSCHAUEN (02.10.2026) =========================

   VanVan, Meldung #11: „2-3 waeren besser." Aus einem Bild wird eine
   Reihe -- sie bricht um, statt schmal zu werden: Drei auf 280 Pixel
   gequetschte Bildschirmfotos zeigen nichts mehr, und genau das Zeigen
   ist der Zweck der Vorschau.

   KLEINER, WENN ES MEHRERE SIND, steht hier NICHT als eigene Regel:
   `max-height` gilt fuer alle gleich, und der Umbruch erledigt den
   Rest. Eine Sonderregel „ab zwei Bildern 140 px" waere eine zweite
   Zahl, die beim naechsten Mal vergessen wird. */
.s-vorschau {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
/* ==== DER KASTEN MUSS SEIN EIGENES KREUZ TRAGEN (02.10.2026) ======

   Gefunden von `pruef-support-bilder`, nicht beim Nachdenken: Beim
   Klick auf das Kreuz des ZWEITEN Bildes meldete Playwright, das
   Kreuz des DRITTEN liege davor. Grund: Das Kreuz ist 44 px breit
   und absolut gesetzt, der Kasten aber nur so breit wie sein Bild.
   Bei einem schmalen Bild -- ein Ausschnitt, ein hochkantes Foto in
   Briefmarkengroesse -- ragt das Kreuz ueber den Kasten hinaus und
   legt sich auf den Nachbarn. Wer dann „das zweite weg" antippt,
   loescht das dritte.

   `min-width` und `min-height` loesen das an der Ursache: Ein Kasten
   ist nie schmaler als der Knopf, der in ihm liegt. */
.s-vorschau__eins {
  position: relative; display: block;
  min-width: 56px; min-height: 56px;
}
.s-vorschau img {
  display: block; max-width: 100%; max-height: 200px;
  width: auto; height: auto;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
}
/* DAS KREUZ GEHOERT ZUM BILD, nicht in eine Liste darunter. Wer das
   dritte Bild falsch erwischt hat, trifft es dort, wo er hinsieht.

   44 PIXEL, wie jeder Knopf im Haus -- auf dem Bild liegend, deshalb
   mit eigenem dunklem Grund: Ein helles Kreuz auf einem hellen
   Bildschirmfoto waere unsichtbar. */
.s-vorschau__weg {
  position: absolute; top: 4px; right: 4px;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: rgba(10, 14, 20, .78);
  color: var(--text);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.s-vorschau__weg:hover,
.s-vorschau__weg:focus-visible {
  background: rgba(10, 14, 20, .92);
  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
}

.s-knopfreihe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
}
.s-hinweis { font-size: .83rem; color: var(--text-still); }

/* ---------- Der Eingang -------------------------------------------- */

.s-eingang__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter.
   Dieselbe Bauart wie in den Personenkacheln -- man vergleicht mit dem
   Auge, statt eine Zeile zu lesen. */
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter --
   und seit dem 25.09.2026 jede in einem eigenen kleinen Feld. Drei
   nackte Zahlen nebeneinander lasen sich als EINE Angabe ("0 1 0");
   mit Rand und Fase sind es drei Auskuenfte. */
.s-bilanz { display: flex; gap: 10px; flex-wrap: wrap; }
.s-bilanz__feld {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 68px; padding: 8px 13px 7px;
  border: 1px solid var(--rand);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background: linear-gradient(163deg,
    rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
}
.s-bilanz__zahl {
  font-size: 1.42rem; font-weight: 700; line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.s-bilanz__wort {
  font-size: .72rem; color: var(--text-still);
  letter-spacing: .04em; text-transform: uppercase;
}
/* EINE NULL IST KEINE WARNUNG. Vorher war die Zahl bei "neu" IMMER
   rot -- auch die 0, und damit stand dauerhaft ein roter Punkt auf der
   Seite, an dem nichts war. Eine Warnung, die immer kommt, ist keine
   Warnung mehr; dieselbe Erkenntnis steht im Projektgedaechtnis vom
   03.09.2026. `data-leer` setzt support.js. */
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) .s-bilanz__zahl { color: var(--warn); }
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) {
  border-color: color-mix(in srgb, var(--warn) 38%, var(--rand));
  background: linear-gradient(163deg,
    color-mix(in srgb, var(--warn) 9%, transparent) 0%,
    rgba(255, 255, 255, .012) 100%);
}

.s-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.s-filter__knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--text-still);
  background: transparent;
  border: 1px solid var(--rand);
  cursor: pointer;
}
.s-filter__knopf:hover { color: var(--text); border-color: var(--akzent); }
.s-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.s-filter__knopf[aria-pressed="true"] {
  color: var(--akzent);
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
.s-filter__zahl { font-size: .78rem; opacity: .8; }

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

/* =====================================================================
   DIE MELDEKARTE IM HAUS-STIL (25.09.2026)

   Filipe zum Bildschirmfoto des Eingangs: "lass das bitte auch geiler
   aussehen bitte."

   WAS VORHER DA WAR: ein flacher Kasten mit runden Ecken und einem
   3 px breiten Strich links. Funktional richtig -- aber die einzige
   Flaeche im Haus, die weder die Fase noch die Leuchtschiene traegt.
   Neben einer Kachel oder einem Dialog sah sie aus wie aus einer
   anderen Anwendung.

   UEBERNOMMEN WIRD, WAS ES SCHON GIBT, nicht etwas Neues erfunden:
   dieselbe `--fase` wie ueberall, dieselbe Bauart der Leuchtschiene
   wie an `.dialog` und an jeder Kachel, derselbe dunkle Verlauf. Eine
   zweite Formensprache waere ein zweites Haus.

   DIE SCHIENE TRAEGT DIE STANDFARBE (`--s`) und nicht den Akzent: An
   ihr liest man ab, ob etwas neu ist, bevor man ein Wort liest. Sie
   ist gedeckt beigemischt, nicht als Leuchtbalken -- augenschonend
   ist Vorgabe, nicht Geschmack.
   ===================================================================== */
.s-karte {
  --s: var(--text-still);
  position: relative;
  padding: 16px 18px 15px 22px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-radius: 0;
  /* Dieselbe Fase wie an Kachel und Dialog. Wer sie spaeter aendert,
     aendert sie an EINER Stelle -- `--fase` steht im Grundblatt. */
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--s) 13%, transparent) 0%,
      color-mix(in srgb, var(--s) 4%, transparent) 16%,
      transparent 44%),
    linear-gradient(163deg, #131b27 0%, #0b1017 62%, #080c13 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 14px 30px -20px rgba(0, 0, 0, .9);
  overflow: hidden;
}

/* Die Leuchtschiene -- dieselbe Bauart wie an `.dialog`, nur in der
   Farbe des Stands. Sie ersetzt den alten flachen Strich links. */
.s-karte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--s) 52%, #fff) 0%,
    var(--s) 24%,
    color-mix(in srgb, var(--s) 42%, transparent) 100%);
  box-shadow:
    0 0 8px 0 color-mix(in srgb, var(--s) 45%, transparent),
    3px 0 18px -4px color-mix(in srgb, var(--s) 34%, transparent);
  z-index: 1;
}

/* Beim Daruebergehen tritt die Karte einen Schritt vor -- ohne
   Bewegung, ohne Aufblitzen. Nur Rand und Schatten. */
.s-karte:hover {
  border-color: color-mix(in srgb, var(--s) 32%, var(--rand));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 18px 38px -20px rgba(0, 0, 0, .95);
}
.s-karte[data-stand="neu"] { --s: var(--warn); }
.s-karte[data-stand="in_arbeit"] { --s: var(--akzent); }
/* --k-gut ist die Hausfarbe fuer "passt, erledigt, freigegeben"
   (gate.css). Gemessen nachgesehen, nicht geraten: --gut gibt es
   nicht, und ein Ersatzwert in Klammern haette hier still eine
   sechste Gruenschattierung ins Haus gebracht. */
.s-karte[data-stand="erledigt"] { --s: var(--k-gut); opacity: .82; }

/* Wer aus einer Benachrichtigung kommt, soll sehen, welche gemeint
   ist -- ohne Blinken, ohne Bewegung. */
.s-karte[data-hervor="ja"] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
}

.s-karte__kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.s-marke {
  padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--s) 16%, transparent);
  color: var(--s);
}
.s-karte__von { font-size: .88rem; font-weight: 600; color: var(--text); }
.s-karte__zeit { font-size: .78rem; color: var(--text-still); margin-left: auto; }

.s-karte__text {
  margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text);
  /* Absätze bleiben erhalten. Wer „Schritt 1 … Schritt 2 …"
     untereinander schreibt, soll es so wiederfinden. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.s-karte__wo { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }

/* MEHRERE BILDER STEHEN NEBENEINANDER und brechen um (02.10.2026).
   Hier stand nur ein `margin-top` -- ein Kasten fuer genau ein Bild.

   DIE SCHRANKE IST DIE BREITE, nicht die Anzahl: 340 Pixel halten die
   Reihe auch dann zusammen, wenn sie rechts neben dem Text steht
   (ab 760 px, siehe unten). Ohne sie waere die Bildspalte bei drei
   Bildern breiter als der Text daneben. */
.s-karte__bild { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.s-karte__bild[data-viele] { max-width: 340px; }
.s-karte__bild[data-viele] img { max-height: 150px; }
.s-karte__bild img {
  display: block; max-width: 100%; max-height: 300px;
  width: auto; height: auto;
  border: 1px solid var(--rand);
  border-radius: 0;
  /* Kleine Fase, damit das Bild zur Karte gehoert und nicht wie ein
     aufgeklebtes Rechteck darauf liegt. */
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
  transition: border-color var(--tempo, .18s);
}
/* Dass man es anklicken kann, sagt bisher nur der Mauszeiger-Text.
   Ein heller werdender Rand sagt es beim Daruebergehen -- ohne
   Bewegung, ohne Vergroessern: `prefers-reduced-motion` braucht hier
   nichts abzuschalten, weil sich nichts bewegt. */
.s-karte__bild a:hover img,
.s-karte__bild a:focus-visible img {
  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
}
.s-karte__bild a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ===== DAS BILD ZUR ANTWORT EINER RUNDE (02.10.2026) ===============

   VanVan: „… damit man nochmal ein Bild anhängen kann, wenn das
   Problem noch besteht oder sich durch die Änderung ein neues
   Problem ergeben hat."

   KLEINER ALS DAS BILD DER MELDUNG (180 statt 300 Pixel hoch). Das
   erste Bild zeigt, worum es geht; ein Rundenbild zeigt einen
   Zwischenstand, und bei vier Runden stünden sonst vier große Fotos
   untereinander. Angeklickt wird es ohnehin größer -- es ist ein
   Verweis, kein Bilderrahmen.

   Dieselbe Fase, derselbe heller werdende Rand und dieselbe
   Fokusmarke wie oben: Was gleich funktioniert, soll gleich
   aussehen. */
/* SEIT DEM 02.10. DERSELBE KASTEN wie oben (`.s-karte__bild`), nur
   kleiner. Hier stand eine eigene Klasse `.s-runde__bild` mit fast
   denselben zwanzig Zeilen -- zwei Stellen, an denen dasselbe steht,
   und beim naechsten Mal wird nur eine davon verbessert. Was bleibt,
   ist der Groessenunterschied, und der ist der ganze Grund: */
.s-runde .s-karte__bild { margin-top: 8px; }
.s-runde .s-karte__bild img { max-height: 180px; }
.s-runde .s-karte__bild[data-viele] img { max-height: 120px; }

/* =====================================================================
   DAS BILD NEBEN DEN TEXT, NICHT DARUNTER (25.09.2026)

   Im Bildschirmfoto stand ein hochkantes Handybild unter zwei Zeilen
   Text -- und rechts daneben eine handbreite leere Flaeche ueber die
   ganze Kartenhoehe. Eine Meldung mit Bild war damit dreimal so hoch
   wie noetig, und im Eingang sah man weniger davon auf einmal.

   ERST AB 760 px, und das ist der Punkt: Auf dem Handy gibt es keine
   zweite Spalte, dort bleibt alles untereinander. Gefragt wird nach
   dem PLATZ, nicht nach dem Geraet.

   `auto` UND NICHT EINE FESTE BREITE fuer die Bildspalte: Gibt es kein
   Bild, greift die ganze Regel gar nicht erst (`:has`). Eine feste
   Breite waere eine Luecke bei jeder Meldung ohne Bild -- und die sind
   die Mehrzahl.
   ===================================================================== */
/* `:has(> …)` UND NICHT `:has(…)` -- der Pfeil ist seit dem 02.10.
   nicht mehr Geschmackssache. Seit die Rundenbilder denselben Kasten
   benutzen (siehe oben), traefe die Regel ohne Pfeil auch auf eine
   Karte zu, deren Bild tief im Verlauf steckt: Die Karte bekaeme eine
   zweite Spalte, in der nichts steht, und der Text waere ohne Grund
   halb so breit. Gefragt ist das EIGENE Bild der Meldung, also das
   direkte Kind. */
@media (min-width: 760px) {
  .s-karte:has(> .s-karte__bild) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kopf    kopf"
      "text    bild"
      "wo      bild"
      "antwort bild"
      "tun     bild";
    column-gap: 20px;
    align-items: start;
  }
  .s-karte:has(> .s-karte__bild) > .s-karte__kopf { grid-area: kopf; }
  .s-karte:has(> .s-karte__bild) > .s-karte__text { grid-area: text; }
  .s-karte:has(> .s-karte__bild) > .s-karte__wo { grid-area: wo; }
  .s-karte:has(> .s-karte__bild) > .s-antwort { grid-area: antwort; }
  .s-karte:has(> .s-karte__bild) > .s-karte__tun { grid-area: tun; }
  .s-karte:has(> .s-karte__bild) > .s-karte__bild {
    grid-area: bild; margin-top: 0; align-self: start;
  }
  /* 180 UND NICHT 260 (gemessen 25.09.2026). Bei 260 war die Karte
     330 px hoch, obwohl der Text zwei Zeilen hat -- die Bildspalte gab
     die Hoehe vor, und links stand eine leere Flaeche. Das Bild ist
     anklickbar ("In voller Groesse ansehen"), eine Vorschau reicht
     also. Ein Handy-Bildschirmfoto ist bei 180 px noch als solches zu
     erkennen; darum geht es an dieser Stelle. */
  .s-karte:has(> .s-karte__bild) > .s-karte__bild img { max-height: 180px; }
  /* UND KLEINER, WENN ES MEHRERE SIND. Bei 180 px stuenden zwei
     nebeneinander und das dritte darunter -- die Karte waere hoeher
     als bei einem einzigen grossen Bild, und genau das sollte die
     zweite Spalte verhindern. Bei 120 px passen drei in zwei Reihen
     in dieselbe Hoehe. */
  .s-karte:has(> .s-karte__bild) > .s-karte__bild[data-viele] img { max-height: 120px; }
}
.s-karte__bild a:focus-visible img { outline: 2px solid var(--akzent); outline-offset: 2px; }

.s-antwort {
  margin-top: 12px; padding: 10px 12px;
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--akzent) 50%, transparent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.s-antwort__schild {
  display: block; margin-bottom: 4px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--akzent);
}
.s-antwort__text {
  margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.s-karte__tun { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

.s-leer {
  padding: 22px 16px; text-align: center;
  font-size: .92rem; color: var(--text-still);
  background: var(--flaeche);
  border: 1px dashed var(--rand);
  border-radius: var(--radius-klein);
}

/* ---------- Am Handy ------------------------------------------------ */

@media (max-width: 560px) {
  .s-melden { padding: 15px 14px 14px; }
  .s-karte { padding: 13px 14px 12px; }
  .s-karte__zeit { margin-left: 0; width: 100%; }
  .s-bilanz { gap: 14px; }
  .s-eingang__kopf { gap: 10px; }
}

/* =====================================================================
   =====================================================================
   DER SUPPORT BEKOMMT EINEN EIGENEN STIL (25.09.2026)
   =====================================================================
   =====================================================================

   Filipe: „ich will dass du bitte diese kachel viel geiler viel
   profissioneller machst, die soll komplett anders aussehen und
   strukturiert sein. mach es wirklich einzigartig und richtig krass
   geil. so dass die leute mehr wie bock haben die zu benutzen. die
   hauptfarbe der kachel soll auch babyblau sein mit bissl lila."

   ---------------------------------------------------------------------
   WARUM AUSGERECHNET HIER DIE FARBE ZAEHLT

   Dies ist die einzige Seite im Haus, auf der jemand etwas MELDET. Wer
   einen Fehler sieht und ihn nicht meldet, kostet mehr als der Fehler
   selbst -- der bleibt naemlich. Die Huerde ist nicht technisch,
   sondern gefuehlt: Ein Formular in Grau und Orange sieht nach
   Verwaltung aus.

   BABYBLAU MIT LILA ist Filipes Ansage und zugleich die einzige Farbe,
   die im Haus noch frei war: Gold gehoert Team Dogi, Lavendel seit
   gestern dem Chat, Gruen dem Erledigten. Die Support-Kachel bekommt
   damit eine eigene Stimme -- man erkennt sie, bevor man die
   Ueberschrift liest.

   ---------------------------------------------------------------------
   DIE LEITFARBE WIRD AN EINER STELLE GETAUSCHT

   Im Chat habe ich gestern zehn Regeln einzeln umgefaerbt und danach
   im Bild gesehen, dass Suchfeld, Knopf und Zaehler weiter golden
   waren -- sie nehmen alle `--akzent`. Einmal an der richtigen Stelle
   ist besser als zehnmal fast.

   #a8d8ff UND NICHT DAS SATTE BABYBLAU: Die Akzentfarbe ist hier auch
   FLAECHE unter dunkler Schrift (die Zahl im Bilanzfeld, der gewaehlte
   Filter). Nachgerechnet traegt #a8d8ff als Flaeche 11,6:1 und als
   Schrift auf dem dunklen Grund 10,4:1 -- beide Richtungen weit ueber
   den noetigen 4,5. Ein sattes #4aa8ff kaeme als Flaeche auf 6,9 und
   als Schrift auf 4,3; die zweite Richtung waere zu knapp. Eine
   Leitfarbe, die nur in einer von zwei Richtungen traegt, ist keine.

   ---------------------------------------------------------------------
   EINE SCHICHT, KEIN UMBAU DER 362 ZEILEN DARUEBER

   Alles, was hier nicht steht, gilt unveraendert weiter -- Abstaende,
   Tippziele, Schriftgroessen. Geaendert wird Leitfarbe, Umriss und
   Struktur. Wer den Stil wieder aendern will, aendert diesen Block.
   ===================================================================== */
.inhalt.support-seite {
  --akzent: #a8d8ff;
  --rand: rgba(168, 216, 255, .14);
  --rand-hell: rgba(168, 216, 255, .28);
  /* Die zwei Toene der Seite -- einmal benannt, damit die Regeln
     darunter nicht dreissigmal dieselbe Zahl wiederholen. */
  --s-blau: #a8d8ff;
  --s-lila: #b9a7ff;
  position: relative;
  isolation: isolate;
}
/* ZWEI LICHTER STATT EINER FLAECHE. Sie liegen hinter allem
   (z-index -1) und ueber dem Buehnenbild: Die Seite bekommt ihre
   Stimmung, ohne dass eine andere im Haus sich aendert. Zusammen unter
   acht Prozent Deckung -- augenschonend ist Vorgabe, und diese Seite
   sieht man im Zweifel im Streit. */
.inhalt.support-seite::before {
  /* ==== KEIN UEBERSTAND NACH RECHTS (25.09.2026) ================

     Hier stand `inset: -8% -4% 0`. Die -4 % rechts sahen nach einer
     Kleinigkeit aus und waren keine: Ein absolut gesetztes Element
     zaehlt zur Scrollbreite, auch wenn es `pointer-events: none` und
     `z-index: -1` traegt. Gemessen hat es die ganze Seite zu breit
     gemacht -- 16 px auf dem Handy, 41 px auf dem Tablet quer, 30 px
     auf dem Laptop, also auf JEDER Breite unter 1440 px.

     Aufgefallen ist es `pruef-breiten`; WAS es war, konnte sie nicht
     sagen („13px Ueberstand []"), denn ein Pseudoelement hat keine
     Box im DOM, die man befragen koennte. Gefunden habe ich es, indem
     ich jedes echte Element gemessen habe -- keines ragte heraus, und
     genau das war der Hinweis.

     NACH OBEN DARF ES WEITER HINAUS (die -8 %): Dort liegt der Kopf
     der Seite, dorthin soll das Licht reichen, und senkrecht wird
     ohnehin gescrollt. Waagerecht nicht. */
  content: ""; position: absolute; inset: -8% 0 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(52% 40% at 12% 4%, rgba(168, 216, 255, .17), transparent 66%),
    radial-gradient(48% 40% at 88% 70%, rgba(185, 167, 255, .14), transparent 68%);
  filter: blur(16px);
}

/* ---- DIE KARTEN WERDEN KOERPER ------------------------------------
   Aus dem Kasten mit Linie wird eine Karte mit Tiefe: Lichtkante oben,
   weiter Schatten, kein Rahmen. Dieselbe Sprache wie im Chat seit
   gestern -- ein Haus, eine Sprache. */
.inhalt.support-seite .s-karte {
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 22%),
    linear-gradient(168deg, rgba(16, 24, 40, .82) 0%, rgba(8, 11, 20, .9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 26px 54px -32px rgba(6, 10, 30, .95);
}
.inhalt.support-seite .s-karte:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px color-mix(in srgb, var(--s-blau) 22%, transparent),
    0 30px 60px -30px rgba(6, 10, 30, .98);
}
/* Die Schiene links traegt die Farbe des Standes -- sie ist das
   Einzige, was man beim Ueberfliegen liest. */
.inhalt.support-seite .s-karte::before {
  border-radius: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--s, var(--s-blau)) 55%, #ffffff) 0%,
    var(--s, var(--s-blau)) 45%,
    color-mix(in srgb, var(--s, var(--s-blau)) 70%, transparent) 100%);
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--s, var(--s-blau)) 70%, transparent);
}
/* WARTET IST EIN EIGENER ZUSTAND UND BEKOMMT EINE EIGENE FARBE. Ohne
   sie saehe „wartet auf den Melder" aus wie „in Arbeit" -- und das ist
   der Unterschied zwischen „wir tun was" und „du bist dran". */
.inhalt.support-seite .s-karte[data-stand="wartet"] { --s: var(--s-lila); }

/* ---- DIE BILANZ ---------------------------------------------------- */
.inhalt.support-seite .s-bilanz__feld {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.inhalt.support-seite .s-bilanz__feld[data-stand="wartet"]:not([data-leer="ja"]) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px color-mix(in srgb, var(--s-lila) 38%, transparent);
}
.inhalt.support-seite
  .s-bilanz__feld[data-stand="wartet"]:not([data-leer="ja"]) .s-bilanz__zahl {
  color: var(--s-lila);
}

/* ---- DIE FILTER WERDEN PILLEN ------------------------------------- */
.inhalt.support-seite .s-filter__knopf {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
}
.inhalt.support-seite .s-filter__knopf[aria-pressed="true"] {
  border-color: transparent;
  color: #08121c;
  background: linear-gradient(140deg, var(--s-blau) 0%, #8fc8ff 52%, var(--s-lila) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 8px 20px -10px color-mix(in srgb, var(--s-blau) 75%, transparent);
}

/* ---- DAS MELDEFELD WIRD EINE EINLADUNG ----------------------------
   Es ist der Grund, warum es diese Seite gibt -- und sah aus wie jedes
   andere Formular im Haus. Jetzt traegt es die zwei Toene und einen
   Saum oben, der sagt „hier geht es los". */
.inhalt.support-seite .s-melden {
  position: relative;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(168, 216, 255, .08) 0%, transparent 26%),
    linear-gradient(168deg, rgba(16, 24, 40, .8) 0%, rgba(8, 11, 20, .9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 26px 54px -32px rgba(6, 10, 30, .95);
  overflow: hidden;
}
.inhalt.support-seite .s-melden::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--s-blau) 0%, var(--s-lila) 55%, transparent 100%);
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--s-blau) 60%, transparent);
  pointer-events: none;
}
.inhalt.support-seite .s-melden textarea {
  border-radius: 15px;
  border-color: rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 6px -3px rgba(0, 0, 0, .95);
}
.inhalt.support-seite .s-melden textarea:focus {
  border-color: color-mix(in srgb, var(--s-blau) 50%, transparent);
  box-shadow:
    inset 0 2px 6px -3px rgba(0, 0, 0, .95),
    0 0 0 3px color-mix(in srgb, var(--s-blau) 14%, transparent);
}

/* =====================================================================
   DER VERLAUF ALS ZEITACHSE -- EINE FARBE JE RUNDE (03.10.2026)
   =====================================================================

   Filipe: „ich will diese komplette seite vom support viel
   uebersichtlicher, profissioneller, jede runde soll auch immer eine
   spezielle farbe haben und anders aufgestellt aufgeteilt sein damit
   man einen viel besseren und krasseren ueberblick hat."

   WAS VORHER DASTAND, an einem Bild mit zwei Runden gemessen: vier
   Textzeilen untereinander, alle in derselben Farbe. Bei fuenf Runden
   muss man die Runden zaehlen, statt sie zu sehen.

   DREI TEILE:
     · `.s-rundenleiste`  alle Runden auf einen Blick, ein Punkt je
                          Runde in ihrer Farbe, mit ihrem Ausgang
     · `.s-verlauf`       die Zeitachse: eine Linie, Punkte darauf
     · `.s-schritt`       zwei Sprechrichtungen je Runde, getrennt

   DIE FARBE KOMMT ALS ZAHL (`--ton`) aus support.js und wird hier zu
   einer Farbe gemacht. Saettigung und Helligkeit stehen NUR hier und
   sind fuer alle Toene gleich -- sonst waere Runde drei blasser als
   Runde eins, und augenschonend ist das Gegenteil von zufaellig.

   AUGENSCHONEND HEISST HIER: 52 % Saettigung, 64 % Helligkeit. Kein
   Neon, kein Gluehen. Die Farbe ordnet Zeilen zu; sie schreit nicht.
   ===================================================================== */

/* ---- Die Leiste: wie oft ging es schon hin und her? --------------- */
.s-rundenleiste {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 10px;
}
.s-rundenleiste__punkt {
  --farbe: hsl(var(--ton, 250) 52% 64%);
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  color: color-mix(in srgb, var(--farbe) 40%, #ffffff);
  background: color-mix(in srgb, var(--farbe) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--farbe) 46%, transparent);
}
/* DER AUSGANG STEHT AM RAND, nicht in der Fuellung: Die Fuellung
   gehoert der RUNDE, der Rand dem ERGEBNIS. Zwei Aussagen, zwei
   Stellen -- in eine Farbe gemischt waere keine mehr zu lesen. */
.s-rundenleiste__punkt[data-urteil="geht"] {
  border-color: color-mix(in srgb, var(--gut, #55d6a0) 60%, transparent);
}
.s-rundenleiste__punkt[data-urteil="nicht"] {
  border-color: color-mix(in srgb, #c99a62 62%, transparent);
}

/* NUR FUER VORLESEPROGRAMME. Die Leiste ist ein Bild; was sie sagt,
   steht als Satz daneben -- sichtbar waere er eine Dopplung. */
.s-nurlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Die Zeitachse ----------------------------------------------- */
.inhalt.support-seite .s-verlauf {
  margin: 12px 0 0;
  display: grid; gap: 14px;
}

/* JEDE RUNDE HAENGT AN DER LINIE. Die Linie ist ein Rand an der
   Runde selbst und nicht am Behaelter: So traegt jede Runde ihr
   eigenes Stueck Achse in ihrer eigenen Farbe -- genau das, was
   „jede Runde eine spezielle Farbe" auf dem Bildschirm bedeutet. */
.s-runde {
  --farbe: hsl(var(--ton, 250) 52% 64%);
  position: relative;
  padding-left: 20px;
  border-left: 2px solid color-mix(in srgb, var(--farbe) 34%, transparent);
}
/* DER PUNKT AUF DER ACHSE. `inset 0 0 0 2px` statt eines zweiten
   Elements: ein Knoten ohne eigenes Markup. */
.s-runde::before {
  content: "";
  position: absolute;
  left: -6px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--farbe);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe) 18%, transparent);
}
.s-runde__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.s-runde__nr {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--farbe) 42%, #ffffff);
}
.s-runde__von { font-size: .78rem; color: var(--text-still); }
.s-runde__zeit { font-size: .74rem; color: var(--text-leise); margin-left: auto; }

/* ---- „Fruehere Runden zeigen" ------------------------------------

   Er steht OBEN im Verlauf, nicht unten: Dort, wo die aelteren
   Runden waeren. Ein Knopf am Ende der Liste wuerde bedeuten, dass
   das Fehlende unten fehlt -- es fehlt aber oben.

   44 Pixel hoch, wie jeder Knopf im Haus. Leise gestaltet: Er ist
   ein Weg, keine Nachricht. */
.s-verlauf__mehr {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  font: inherit; font-size: .82rem;
  color: var(--text-still);
  background: transparent; border: 0;
  cursor: pointer;
  text-align: left;
}
.s-verlauf__mehr:hover,
.s-verlauf__mehr:focus-visible { color: var(--text); }
.s-verlauf__pfeil { font-size: .8rem; line-height: 1; }

/* ---- Zwei Sprechrichtungen je Runde ------------------------------- */

/* WER SPRICHT, STEHT AM RAND. Vorher standen beide Saetze als
   Absaetze untereinander und sahen gleich aus -- man musste lesen, um
   zu wissen, von wem sie sind. Jetzt sagt es die Form. */
.s-schritt {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .12);
}
.s-schritt__schild {
  display: block;
  /* .74rem = 11,84 px. Unter 11,5 px faengt im Haus die Grenze an,
     ab der man zusammenkneift -- `pruef-css-klassen` setzt sie durch.
     Mein erster Entwurf hatte .7rem (11,2 px) und waere rot geworden. */
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-still);
}
.s-schritt__text {
  margin: 4px 0 0;
  font-size: .9rem; line-height: 1.5; color: var(--text-leise);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* DIE LEITUNG HAT DIE FARBE DER RUNDE -- sie hat sie eroeffnet. */
.s-schritt[data-wer="leitung"] {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--farbe) 55%, transparent);
}
.s-schritt[data-wer="leitung"] .s-schritt__schild {
  color: color-mix(in srgb, var(--farbe) 38%, #ffffff);
}
/* DER MELDER TRAEGT DEN AUSGANG. Gruen fuer „geht wieder" --
   der einzige gruene Punkt auf dieser Seite. Bernstein fuer „ging
   noch nicht": KEIN ROT. Eine Absage ist kein Fehler und nichts, was
   jemand falsch gemacht hat (siehe die Begruendung weiter oben bei
   den Bewerbungsantworten); rot laese sich wie ein Urteil ueber den
   Menschen. */
.s-schritt[data-urteil="geht"] {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--gut, #55d6a0) 62%, transparent);
  background: color-mix(in srgb, var(--gut, #55d6a0) 5%, transparent);
}
.s-schritt[data-urteil="geht"] .s-schritt__schild { color: #8fe3b0; }
.s-schritt[data-urteil="nicht"] {
  box-shadow: inset 2px 0 0 color-mix(in srgb, #c99a62 62%, transparent);
  background: color-mix(in srgb, #c99a62 5%, transparent);
}
.s-schritt[data-urteil="nicht"] .s-schritt__schild { color: #e8c49a; }
/* WARTET: kein Kasten mit Inhalt, nur ein Vermerk. Er steht da,
   damit eine Runde ohne Rueckmeldung nicht aussieht wie eine, bei
   der etwas fehlt. */
.s-schritt[data-wer="warte"] {
  background: transparent;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .08);
  padding-top: 6px; padding-bottom: 6px;
}
.s-schritt[data-wer="warte"] .s-schritt__schild { color: var(--text-leise); }

/* „Geht wieder" ist der Knopf, den man drueckt, wenn alles gut ist --
   er darf als Einziger auf dieser Seite gruen sein. */
.inhalt.support-seite .s-tun--geht {
  border-color: color-mix(in srgb, #8fe3b0 45%, transparent);
  color: #bff0d3;
}
.inhalt.support-seite .s-tun--geht:hover {
  background: rgba(143, 227, 176, .14);
  border-color: #8fe3b0;
}

/* =====================================================================
   „WER IST DRAN?" -- der ruhige Hinweis fuer die Leitung (25.09.2026)
   =====================================================================

   Liegt eine Meldung beim Melder, ist die Leitung nicht dran. Das
   steht als Satz da und nicht als Warnung: Es ist der NORMALE Lauf
   der Dinge, und eine Seite, die den Normalfall anschreit, hat am
   Ernstfall keine Lautstaerke mehr uebrig.

   DER PUNKT ATMET, aber langsam (3,2 s) und nur zwischen 40 % und
   100 % Deckkraft -- er soll auffindbar sein, nicht blinken. Bei
   `prefers-reduced-motion` steht er still; das ist Hausregel und hier
   besonders wichtig, weil dieser Hinweis auf jeder wartenden Karte
   steht und sich damit vervielfacht. */
.inhalt.support-seite .s-karte__wartet {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 0 0;
  font-size: .84rem; line-height: 1.45;
  color: color-mix(in srgb, var(--s-lila, #b9a7ff) 34%, #d7e4f2);
}
.inhalt.support-seite .s-karte__wartet-punkt {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--s-lila, #b9a7ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-lila, #b9a7ff) 16%, transparent);
  animation: s-wartet-atmen 3.2s ease-in-out infinite;
}
@keyframes s-wartet-atmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .inhalt.support-seite .s-karte__wartet-punkt { animation: none; }
}
@media (forced-colors: active) {
  .inhalt.support-seite .s-karte__wartet-punkt { background: CanvasText; }
}