/* ==========================================================================
   Eigenes CSS fuer Element: eingehaengt vom Dockerfile ans ENDE des Kopfes
   ==========================================================================
   Zwei Aufgaben, beide nicht anders loesbar:

   1. Die Startseite (embedded_pages.home_url) gestalten. Element bereinigt
      eingebettete Seiten und wirft <style> UND style-Attribute weg: Regeln
      koennen also nur von hier kommen.

   2. Zwei Fehler in Elements eigenem Theme ueberschreiben, die ein
      custom_theme nicht erreichen kann.

   REIHENFOLGE STATT !important: diese Datei steht hinter allen
   Theme-Stylesheets im Kopf. Bei gleicher Spezifitaet gewinnt die spaetere
   Regel. Deshalb tragen die Ueberschreibungen unten dieselben Selektoren wie
   das Original, Zeichen fuer Zeichen, nicht mehr Spezifitaet, nur mehr
   Naehe zum Ende.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Der schwarze Balken: zweimal dieselbe Krankheit
   --------------------------------------------------------------------------
   Elements Theme benutzt --sidebar-color an fuenf Stellen. Drei davon sind
   richtig: der Hintergrund der Space-Leiste und die Raender der
   Benachrichtigungspunkte darauf, die zu ihm passen muessen.

   Zwei sind es nicht: dort dient dieselbe Farbe als HOVER-HINTERGRUND fuer
   Zeilen, die auf hellem Grund stehen. Bei einer dunklen Seitenleiste malt
   Element damit Schwarz hinter schwarzen Text. Am 18.08.2026 im
   Space-Verzeichnis gemeldet; der Weiterleiten-Dialog hat denselben Fehler
   und war nur noch niemandem aufgefallen.

   Vorher stand hier die Notloesung "mach --sidebar-color hell". Die kostete
   die dunkle Seitenleiste und machte die Benachrichtigungsraender falsch.
   Jetzt bleibt die Variable die Markenfarbe, und die zwei falschen
   Verwendungen werden hier geradegerueckt.

   NACHGEBESSERT AM 22.08.2026: die erste Fassung hat nicht gegriffen.
   ---------------------------------------------------------------------------
   Zwei Fehler auf einmal, und beide waren vermeidbar, weil die Regel im
   ausgelieferten Buendel nachzulesen ist:

     1. ZU WENIG VORFAHREN. Elements Regel beginnt mit
        '.mx_SpaceRoomView_landing'. Ohne diese Klasse hatte unsere Fassung
        eine Klasse WENIGER, und bei geringerer Spezifitaet hilft es nicht,
        spaeter zu stehen. Der Kopf dieser Datei sagt es selbst: dieselben
        Selektoren wie das Original, Zeichen fuer Zeichen. Genau daran hat es
        gefehlt.

     2. NUR ':hover' ABGEDECKT. Element faerbt auch ':focus-within'. Das ist
        der Zustand nach einem KLICK, also genau das, was am 22.08.2026
        gemeldet wurde: ausgewaehlte Zeile, dunkelblau, Schrift unlesbar. Beim
        blossen Darueberfahren war der Fehler nie zu sehen.

   Nachgesehen mit:

       docker exec seachat-element-1 cat /app/bundles/*/theme-light-custom.css \
         | grep -oE '[^{};]*SpaceHierarchy_roomTile[^{}]*\{[^{}]*var\(--sidebar-color[^{}]*\}'

   Dieselbe Abfrage zeigt auch, dass die UEBRIGEN Verwendungen von
   --sidebar-color in Ordnung sind und hier nichts zu suchen haben:
   '.mx_Dialog_background' und '.mx_SpaceCreateMenu_wrapper' nehmen
   --sidebar-color-50pct als Schleier hinter einem Dialog (dunkel ist dort
   richtig), '.mx_SpacePanel .mx_NotificationBadge_*' braucht die Farbe als
   Rand, damit die Punkte zur Leiste passen, und
   '.mx_SpaceHierarchy_roomTile:before' ist eine 1 Pixel breite Linie des
   Baumgeruests: darauf steht keine Schrift.

   Im hellen Theme ist --sidebar-color (#0B1F42) der EINZIGE dunkle Wert
   ueberhaupt; alle anderen Farben in custom_themes sind hell. Wer also
   irgendwo dunkel auf dunkel findet, sucht hier, und nirgends sonst.
   -------------------------------------------------------------------------- */
.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list
  li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within,
.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list
  li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover {
  background-color: var(--roomlist-highlights-color, rgba(0, 0, 0, .06));
}

/* Der Vollstaendigkeit halber die kuerzere Fassung ohne
   '.mx_SpaceRoomView_landing': dasselbe Kachelgeruest taucht auch ausserhalb
   der Space-Startseite auf (Space-Verzeichnis im Dialog). Dort gewinnt sie,
   weil Element fuer diesen Fall gar keine eigene Regel hat. */
.mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper
  .mx_SpaceHierarchy_roomTile:focus-within,
.mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper
  .mx_SpaceHierarchy_roomTile:hover,
.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within,
.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover {
  background-color: var(--roomlist-highlights-color, rgba(0, 0, 0, .06));
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results
  .mx_ForwardList_entry:hover,
.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results
  .mx_ForwardList_entry.mx_ForwardList_entry_active {
  background-color: var(--roomlist-highlights-color, rgba(0, 0, 0, .06));
}

/* --------------------------------------------------------------------------
   2. Die Startseite als Kachelraster
   --------------------------------------------------------------------------
   STRUKTURELL statt ueber Klassen: mit Absicht. Ob Elements Bereinigung
   class-Attribute durchlaesst, ist von aussen nicht zu beantworten; die
   Struktur der Seite kennen wir dagegen genau, weil sie uns gehoert
   (lab/brand/home.html):

       h1                          Titel
       p                           Vorspann
       div                         das Raster
         a  > em + strong + span     je eine Kachel
       p                           Fusszeile

   Die Klassenselektoren stehen zusaetzlich da: greifen sie, ist es dieselbe
   Gestaltung; greifen sie nicht, aendert sich nichts. Beide Seiten gehoeren
   uns, es kann also nichts Fremdes getroffen werden.

   Elements eigene Regel setzt .mx_HomePage auf place-items:center und eine
   Breite von 960 px. Zentrierte Kacheln in einer schmalen Spalte sind nicht
   gemeint: deshalb hier ausdruecklich anders.
   -------------------------------------------------------------------------- */

/* WAAGERECHTER INNENABSTAND IST HIER KEINE ZIERDE.
   Hier stand 'padding: 3rem 0 4rem', und die Kacheln waren links und rechts
   angeschnitten. Der Grund ist eine Regel des Kastenmodells, die man leicht
   uebersieht: sobald EINE Achse nicht 'visible' ist: hier overflow-y:auto,
   rechnet der Browser die andere auf 'auto'. Es wird also auch waagerecht
   beschnitten. Der Schatten der Kacheln ragt 18 px weit hinaus und die
   Hover-Anhebung noch etwas weiter; ohne Innenabstand faellt beides genau an
   der Kante ab. Der Abstand gibt ihm Platz INNERHALB des rollenden Kastens. */
/* WARUM HIER VIER ZEILEN STEHEN, DIE NACH ZIERDE AUSSEHEN (29.08.2026).
   Beschwerde Cedric: "wenn ich im PC-Browser den rechten Rand nach links
   ziehe, sind die Kacheln immer noch zu weit rechts ausserhalb vom Browser".
   Die Startseite sitzt RECHTS NEBEN der Raumliste, ihr Kasten ist also nicht
   so breit wie das Fenster. 'width: min(100%, 68rem)' allein hindert ihn
   nicht daran, breiter zu werden als der Platz, den er bekommt: 100% rechnet
   gegen den umgebenden Block, und als Rasterzelle darf er sich an seinem
   eigenen Inhalt aufrichten. min-width:0 nimmt ihm das, max-width:100%
   deckelt ihn zusaetzlich, und border-box haelt die 1.75rem Innenabstand
   INNERHALB der Breite statt sie daraufzuschlagen. Die zweite Haelfte des
   Fehlers steckt im Raster weiter unten. */
.mx_HomePage {
  align-content: start;
  box-sizing: border-box;
  justify-items: stretch;
  margin-inline: auto;
  max-width: 100%;
  min-width: 0;
  overflow-y: auto;
  padding: 3rem 1.75rem 4rem;
  width: min(100%, 68rem);
}

.mx_HomePage h1 {
  color: var(--timeline-text-color, #16202f);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 .35rem;
  text-align: left;
}

.mx_HomePage > p,
.mx_HomePage p {
  color: var(--timeline-text-secondary-color, #5d6a7d);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 46rem;
  text-align: left;
}

/* Das Raster.
   :has(> a) statt schlicht 'div', und das ist kein Feinschliff: Element
   setzt die geholte Seite in einen eigenen Container. Ein nacktes
   '.mx_HomePage div' haette AUCH den getroffen und damit Titel, Vorspann und
   Fusszeile zu Rasterzellen gemacht. Getroffen werden soll nur der Kasten,
   der Kacheln unmittelbar enthaelt. */
/* minmax(min(15rem, 100%), 1fr) und nicht minmax(15rem, 1fr): das ist die
   zweite Haelfte des Ueberlaufs vom 29.08.2026. 'auto-fit' darf eine Spalte
   NICHT unter ihre Untergrenze druecken. Steht weniger als 15rem zur
   Verfuegung, laeuft das Raster deshalb hinaus, statt umzubrechen. Das
   'min(..., 100%)' erlaubt der Spalte, im Notfall schmaler zu werden als
   15rem, und genau dann bricht sie stattdessen um. Auf breiten Schirmen
   aendert sich nichts: dort gewinnt immer die 15rem. */
.mx_HomePage div:has(> a),
.mx_HomePage .sea-raster {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  min-width: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Die Farbtoene der Kacheln
   --------------------------------------------------------------------------
   Je Kachel ein eigener Ton. Er faerbt die obere Kante, das Symbolplaettchen
   und den Titel; die FLAECHE bleibt ruhig, damit der Satz darunter in beiden
   Themen lesbar bleibt.

   Woher der Ton kommt, ist der interessante Teil. Ein Farbton, der auf Weiss
   funktioniert, ist auf Fast-Schwarz zu dunkel und umgekehrt: es braucht
   also zwei Saetze und einen Schalter dazwischen. Element setzt aber weder
   eine Theme-Klasse noch ein data-Attribut auf das Dokument (am 20.08.2026
   im Buendel nachgesehen: 'cpd-theme-dark' steht dort nur in der
   Chat-Export-Vorlage und in der Vorschau der Theme-Auswahl).

   Der Weg fuehrt deshalb ueber die Themes selbst: was unter
   custom_themes[].colors steht, schreibt Element als CSS-Variable auf
   document.body. In chat/00-chat-setup.sh tragen "Volunteers" und
   "Volunteers Dark" darum je einen eigenen Satz --sea-ton-1..6. Der Schalter
   ist damit das Theme, und diese Datei muss ihn gar nicht kennen.

   Die Rueckfallwerte hinter dem Komma sind Mitteltoene: sie gelten, wenn
   jemand ein eingebautes Element-Theme waehlt, und sind auf hell wie dunkel
   ertraeglich. Sie sind ausdruecklich der Kompromiss, nicht das Ziel.

   Die Zuordnung Ton → Kachel steht ausgeschrieben. Wer die Reihenfolge in
   lab/brand/home.html aendert, aendert hier die Kommentare mit: ein
   falscher Ton ist Kosmetik, aber eine falsche Zeile im Kommentar ist eine
   Falle fuer den Naechsten.

   Am 29.08.2026 ist die erste Kachel ("Your country") entfallen, und alle
   Toene sind um eins gerueckt. Der marineblaue --sea-ton-6 wird damit gar
   nicht mehr benutzt; er bleibt in 00-chat-setup.sh stehen, weil ein Theme
   ohne ihn eine Aenderung an gespeicherten Nutzereinstellungen waere. */
.mx_HomePage div > a:nth-child(1) { --sea-ton: var(--sea-ton-1, #17a094); } /* Announcements */
.mx_HomePage div > a:nth-child(2) { --sea-ton: var(--sea-ton-2, #4b86df); } /* Events        */
.mx_HomePage div > a:nth-child(3) { --sea-ton: var(--sea-ton-3, #8e6ede); } /* Trainings     */
.mx_HomePage div > a:nth-child(4) { --sea-ton: var(--sea-ton-4, #c08c22); } /* Resources     */
.mx_HomePage div > a:nth-child(5) { --sea-ton: var(--sea-ton-5, #3aa872); } /* The rules     */
.mx_HomePage div > a:nth-child(6) { --sea-ton: var(--sea-ton-0, #7d8b9e); } /* Darstellung   */
.mx_HomePage div > a:nth-child(7) { --sea-ton: var(--sea-ton-2, #4b86df); } /* How to sign in */

/* Die Kacheln. */
.mx_HomePage div > a,
.mx_HomePage .sea-kachel {
  background: var(--timeline-highlights-color, #f4f8fd);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(17, 35, 73, .07),
    0 18px 40px -18px rgba(17, 35, 73, .22),
    0 2px 5px -2px rgba(17, 35, 73, .10);
  color: var(--timeline-text-color, #16202f);
  display: block;
  overflow: hidden;              /* haelt die Kante in der Rundung */
  padding: 1.35rem 1.3rem 1.25rem;
  position: relative;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Die obere Kante: der einzige Ort, an dem der Ton flaechig auftritt. */
.mx_HomePage div > a::before,
.mx_HomePage .sea-kachel::before {
  background: var(--sea-ton, #17a094);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.mx_HomePage div > a:hover,
.mx_HomePage .sea-kachel:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sea-ton, #17a094) 55%, transparent),
    0 22px 46px -18px rgba(17, 35, 73, .30),
    0 2px 6px -2px rgba(17, 35, 73, .14);
  text-decoration: none;
  transform: translateY(-2px);
}

.mx_HomePage div > a:focus-visible,
.mx_HomePage .sea-kachel:focus-visible {
  outline: 2px solid var(--sea-ton, #17a094);
  outline-offset: 2px;
}

/* Innerhalb einer Kachel: Symbolplaettchen, Titel, Satz.

   Der Titel ist fett und der Satz kleiner, dazwischen mehr Luft: das ist
   der zusaetzliche Umbruch, um den es ging. Beides zusammen, sonst sieht
   eine Kachel aus wie ein Absatz mit fettem Anfang. */
.mx_HomePage div > a > em,
.mx_HomePage .sea-symbol {
  align-items: center;
  background: color-mix(in srgb, var(--sea-ton, #17a094) 15%, transparent);
  border-radius: 11px;
  display: inline-flex;
  font-size: 1.3rem;
  font-style: normal;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  margin-bottom: .8rem;
  width: 2.5rem;
}

.mx_HomePage div > a > strong,
.mx_HomePage .sea-titel {
  color: var(--sea-ton, #17a094);
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.005em;
  margin: 0 0 .5rem;
}

.mx_HomePage div > a > span,
.mx_HomePage .sea-satz {
  color: var(--timeline-text-secondary-color, #5d6a7d);
  display: block;
  font-size: .85rem;
  line-height: 1.5;
}

/* Hier stand die hervorgehobene Kachel (.sea-wichtig). Sie war "Your country"
   und ist am 29.08.2026 mit ihr aus lab/brand/home.html entfallen. Die Regel
   geht mit: sie traefe nichts mehr und waere beim naechsten Lesen eine
   falsche Faehrte, genau wie die Fusszeile darunter. */

/* Hier stand die Fusszeile der Startseite. Sie ist am 20.08.2026 aus
   lab/brand/home.html entfallen, und die Regel mit ihr: sie traefe nichts
   mehr und waere beim naechsten Lesen eine falsche Faehrte. */

/* --------------------------------------------------------------------------
   3. Schmale Fenster
   --------------------------------------------------------------------------
   Element zeigt die Startseite auf dem Handy ueber die ganze Breite. Was
   auf einem 27-Zoll-Schirm grosszuegig wirkt, frisst dort den halben
   Bildschirm, bevor die erste Kachel kommt.

   Die Kachelanzahl je Zeile regelt sich schon von selbst: bei
   minmax(min(15rem, 100%), 1fr) bleibt unter etwa 30 rem nur eine Spalte
   uebrig, und darunter wird sie schmaler statt hinauszulaufen. Hier geht es
   deshalb um Abstaende und Schriftgroessen, und um das Ueberfahren.

   ACHTUNG, DIESE ABFRAGE MISST DAS FENSTER, NICHT DEN KASTEN. Die
   Startseite sitzt neben der Raumliste und ist damit immer schmaler als das
   Fenster. Sie greift also spaeter, als man beim Lesen annimmt. Gegen den
   Ueberlauf hilft sie nicht; das tun die zwei Regeln weiter oben.
   -------------------------------------------------------------------------- */
@media (max-width: 48em) {
  .mx_HomePage {
    padding: 1.75rem 1rem 2.5rem;
  }
  .mx_HomePage h1 {
    font-size: 1.4rem;
    margin-bottom: .3rem;
  }
  .mx_HomePage > p,
  .mx_HomePage p {
    font-size: .95rem;
    margin-bottom: 1.4rem;
  }
  .mx_HomePage div:has(> a),
  .mx_HomePage .sea-raster {
    gap: .8rem;
  }
  .mx_HomePage div > a,
  .mx_HomePage .sea-kachel {
    padding: 1.1rem 1.1rem 1rem;
  }
  .mx_HomePage div > a > em,
  .mx_HomePage .sea-symbol {
    font-size: 1.15rem;
    height: 2.1rem;
    width: 2.1rem;
    margin-bottom: .6rem;
  }
  .mx_HomePage div > a > strong,
  .mx_HomePage .sea-titel {
    font-size: .98rem;
    margin-bottom: .35rem;
  }
}

/* Das Ueberfahren gehoert einem Zeiger, nicht einem Finger.
   Auf einem Touchgeraet feuert :hover beim Antippen und BLEIBT danach
   haengen, bis irgendwo anders getippt wird: die Kachel steht dann
   dauerhaft angehoben da. Deshalb die Regeln oben in @media (hover: hover)
   wiederholen und fuer Finger stattdessen eine kurze Rueckmeldung beim
   Druecken geben. */
@media (hover: none) {
  .mx_HomePage div > a:hover,
  .mx_HomePage .sea-kachel:hover {
    box-shadow:
      0 0 0 1px rgba(17, 35, 73, .07),
      0 18px 40px -18px rgba(17, 35, 73, .22),
      0 2px 5px -2px rgba(17, 35, 73, .10);
    transform: none;
  }
  .mx_HomePage div > a:active,
  .mx_HomePage .sea-kachel:active {
    transform: scale(.985);
  }
}

/* ==========================================================================
   Menuepunkte, die sea.js weggeraeumt hat
   ==========================================================================
   Gehoert zur Sperre "nur Direktnachrichten" vom 20.08.2026 und ist ihr
   sichtbarer, unwichtigster Teil: die eigentliche Sperre steht in
   chat/module/sea_regeln.py und wirkt auch gegen einen handgebauten Aufruf.

   Warum ein Attribut und keine Klasse: React setzt className bei jedem
   Neuzeichnen aus seinem eigenen Zustand und wuerde eine fremde Klasse
   wegputzen. Ein zusaetzliches Attribut fasst es nicht an. Die Begruendung
   in voller Laenge steht im Kopf des Blocks in sea.js.

   !important ist hier ausnahmsweise richtig: der Menuepunkt bringt aus dem
   Designsystem ein display mit, und wir wollen ihn nicht ueberreden, sondern
   entfernen.

   ZWEI MARKEN SEIT DEM 05.09.2026, weil die beiden Punkte seither
   verschieden behandelt werden:

     data-sea-weg          "Export Chat", faellt UEBERALL weg
     data-sea-weg-schmal   "People", faellt nur bis 1179px weg

   Am Rechner ist der Weg zur Mitgliederliste wieder offen (Abschnitt 6,
   Ansage Cedric). Es waere sinnlos, dort die Liste zu zeigen und den
   Menuepunkt zu verstecken, der sie oeffnet. */
[data-sea-weg] {
  display: none !important;
}

@media (max-width: 1179px) {
  [data-sea-weg-schmal] {
    display: none !important;
  }
}

/* ==========================================================================
   Systemzeilen aus der Zeitleiste nehmen: nur Gespraech bleibt uebrig
   ==========================================================================
   Ansage Cedric, 21.08.2026: "nur chatnachrichten und keine systemnachrichten".

   Was vorher dastand, und zwar in JEDEM der 264 Raeume, weil die Struktur per
   Skript entsteht:

       seaadmin ist dem Chat beigetreten
       seaadmin hat als Hauptadresse des Chats #se-si-stajerska-leadership… festgelegt
       seaadmin hat den Chat auf eingeladene Nutzer beschraenkt
       seaadmin hat Gaesten erlaubt, diesem Chat beizutreten
       seaadmin hat den kuenftigen Nachrichtenverlauf … sichtbar gemacht
       seaadmin hat den Namen des Chats zu … geaendert
       seaadmin hat das Thema geaendert in …
       jonalion und ein anderer wurden eingeladen und sind dem Chat beigetreten
       seaadmin hat das Berechtigungslevel von jonalion … geaendert

   Neun Zeilen Einrichtungsprotokoll vor der ersten echten Nachricht. Fuer eine
   Freiwillige ist das kein Kontext, sondern Laerm, und es erzaehlt ihr die
   halbe Verwaltungsstruktur, die sie nichts angeht.

   WARUM CSS UND NICHT EINE EINSTELLUNG
   ------------------------------------------------------------------------
   Element kennt Schalter fuer showJoinLeaves, showDisplaynameChanges und
   showAvatarChanges: die stehen in element-config.json auch auf false. Aber:
   sie sind VORGABEN je Konto, greifen also nicht bei jemandem, der schon eine
   eigene Einstellung gespeichert hat, und sie decken das meiste hier gar nicht
   ab. Fuer Machtstufen-Aenderungen und fuer den Einrichtungsblock gibt es
   KEINEN Schalter. Das ist am 20.08.2026 in Settings.tsx nachgesehen worden.

   DIE ZWEI KLASSEN
   ------------------------------------------------------------------------
   Am 21.08.2026 im ausgelieferten theme-light.css der laufenden Fassung
   1.12.25 nachgesehen, nicht geraten:

     mx_EventTile_info           jede einzelne Systemzeile. Element setzt sie
                                 auf alles, was kein m.room.message ist.
     mx_GenericEventListSummary  der zusammengeklappte Block mit dem
                                 "ausklappen"/"verbergen"-Umschalter.

   UND WAS ES NICHT IST: eine Sperre. Die Ereignisse bleiben im Raum. Ein
   anderer Matrix-Client zeigt sie weiterhin. Das ist hier vertretbar, weil
   Foederation aus ist und wir den Client selbst ausliefern, aber es ist
   Darstellung, nicht Vertraulichkeit. Wer etwas wirklich verbergen muss,
   braucht history_visibility, nicht dieses Stylesheet.

   SEIT DEM 03.09.2026 STEHT HIER KEIN display:none MEHR. Die Hoehe null
   hat genau das Ruckeln erzeugt, das die Zeitleiste seither plagte:
   Begruendung, A/B-Test und die geltenden Regeln stehen in Abschnitt 12
   (unsichtbar per opacity:0, aber mit echter Resthoehe). Der Tombstone
   bleibt damit weiter unsichtbar: Raum-Aktualisierungen muessen angesagt
   werden, nicht erschlossen, wie seit dem 21.08. Wer hier je wieder ein
   display:none auf Zeitleisten-Kacheln setzt, holt sich das Springen
   zurueck. */

/* --------------------------------------------------------------------------
   4b. Die Raum-Eroeffnung: "Cedric Bode hat diesen Chat erstellt"
   --------------------------------------------------------------------------
   Ansage vom 22.08.2026: der Kasten am Anfang jedes Raums ("X created this
   room. This is the beginning of ...") fliegt in allen Kanaelen heraus. Er
   ist KEIN EventTile: die Regeln oben greifen ihn nicht, sondern eine
   eigene Kachel, die Element vor den Verlauf setzt.

   Der Selektor ist am 22.08.2026 im ausgelieferten Buendel nachgesehen
   (theme-*.css kennt genau .mx_NewRoomIntro und .mx_NewRoomIntro_buttons):

       docker exec seachat-element-1 sh -c 'cat /app/bundles/*/*.css' \
         | grep -oE '\.mx_NewRoomIntro[a-zA-Z_-]*' | sort -u

   Mit der Kachel verschwinden auch ihre Knoepfe ("Invite to this room").
   Das ist hier kein Verlust: eingeladen wird ueber die Verwaltung und die
   Seed-Skripte, nicht von Hand aus dem Raum heraus.

   GRENZE, damit sie niemand wieder sucht: das hier ist Element WEB. In
   Element X gibt es weder diese Kachel-Klasse noch irgendeinen Schalter
   fuer Systemzeilen: dort bleiben sie sichtbar, und daran aendert kein
   Stylesheet und keine Server-Einstellung etwas (Stand 1.12.25 / Element X
   August 2026, runbook/13). */
.mx_NewRoomIntro {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Hausschrift und Claim (CI vom 22.08.2026)
   --------------------------------------------------------------------------
   Plus Jakarta Sans kommt pfad-absolut aus /brand/schrift/: derselbe
   Ursprung auf Apex UND chat-Host, und Font-Aenderungen brauchen keinen
   Abbild-Neubau. Angewendet wird sie NICHT hier, sondern ueber Elements
   eigenen Schalter (setting_defaults: useSystemFont + systemFont in
   element-config.json), so bleibt es eine Vorgabe, die eine Person in den
   Einstellungen zuruecknehmen kann. Hier steht nur die @font-face-Quelle.

   Der Claim haengt seit dem 24.08.2026 als ::before an .mx_AuthPage,
   NICHT mehr am Anmelde-Logo: .mx_AuthHeaderLogo gibt es nur auf #/login,
   und die Hauptseite #/welcome blieb damit leer, obwohl genau sie das
   Erste ist, was jeder sieht (Zielbild: Cedrics Mockup vom 24.08., Kasten
   links auf der Europakarte). .mx_AuthPage tragen Welcome, Login und
   Register gemeinsam (v1.12.25 belegt). Englisch seit dem 23.08.2026
   (Ansage Cedric): reines ASCII, darum keine CSS-Escapes; kommen je
   wieder Umlaute hinein, gilt die alte Regel (Datei geht durch sed und
   scp, Escapes statt UTF-8, sonst faellt zerschossenes UTF-8 erst auf der
   Anmeldeseite auf). HELL (#f3f4f6), denn er liegt auf dem dunklen
   Karten-Hintergrund. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(/brand/schrift/PlusJakartaSans.woff2) format("woff2-variations"),
       url(/brand/schrift/PlusJakartaSans.woff2) format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(/brand/schrift/PlusJakartaSans-Italic.woff2) format("woff2-variations"),
       url(/brand/schrift/PlusJakartaSans-Italic.woff2) format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Die Anmeldeseite (10.09.2026, neu am 11.09.2026)
   ==========================================================================
   HIER STAND VOM 10. BIS 11.09.2026 DIE INFOSPALTE (#sea-anmelde-info, rund
   340 Zeilen): Claim, Pillen, Schaufenster, Knopf, und eine Regel, die
   Elements Anmeldekarte nach rechts rueckte. Seit Runde 1109c ist die
   Startseite eine eigene Datei, lab/brand/anmeldeseite.html, mit ihrem
   eigenen <style>: sea.js holt sie und setzt sie als Ebene ueber Elements
   Seite (Block "Die Startseite" dort). Gestalt aendern heisst seither:
   die Datei aendern, kein Abbild-Neubau.

   Auf #/login steht Elements Karte wieder in der Mitte, unangeruehrt
   (Ansage Cedric, 11.09.2026): deshalb hier keine Regel mehr fuer
   .mx_AuthPage_modal. Der Hintergrund kommt weiter aus der Konfiguration
   (welcome_background_url), die Startseite malt denselben. */

/* ==========================================================================
   5. "Seen by": Lesebestaetigungen verschwinden aus der Darstellung
   ==========================================================================
   Ansage Cedric, 24.08.2026: "this message has been seen by" soll GLOBAL
   weg. Die Schalter in element-config.json (sendReadReceipts,
   showReadReceipts, beide false) sind nur VORGABEN je Konto: wer je selbst
   umgeschaltet hat, behaelt seine Wahl, und die Vorgabe erreicht ihn nie.
   Global geht nur hier: die Anzeige stirbt fuer JEDEN Nutzer dieses
   Element Web, egal was sein Konto gespeichert hat.

   .mx_ReadReceiptGroup ist der Avatar-Stapel rechts an der Nachricht; das
   aufklappende "Seen by"-Fenster (…_popup) haengt als Kind darunter und
   geht mit. Am 24.08.2026 im ausgelieferten Buendel (v1.12.25) nachgesehen:
   theme-*.css kennt genau mx_ReadReceiptGroup und seine Unterklassen.

   GRENZE, dieselbe wie bei den Systemzeilen: das ist Darstellung, nicht
   Vertraulichkeit. Die Empfangsbestaetigungen bleiben Protokolldaten, und
   Element X zeigt sie weiterhin an: dort gibt es keinen Schalter und kein
   Stylesheet (Stand v1.12.25 / Element X August 2026). Wer im Web selbst
   Bestaetigungen SENDET, steuert weiter sendReadReceipts; die Vorgabe
   steht auf false, seit dem 23.08. */
.mx_ReadReceiptGroup {
  display: none !important;
}

/* ==========================================================================
   6. Die Mitgliederliste: niemand blaettert 100 Profile durch
   ==========================================================================
   Ansage Cedric, 24.08.2026: auch "People" im Kanal soll weg, ein L1
   saehe dort in einem vollen Kanal hunderte Konto-Kennungen auf einen
   Blick.

   WAS HIER GESCHIEHT UND WAS NICHT: die Einordnung steht laenger schon in
   verwaltung/app.py (Kennungs-Kommentar) und runbook/13: die Mitgliederliste
   eines Raums laesst sich vor beigetretenen Mitgliedern NICHT verbergen,
   das ist Matrix-Protokoll, keine Konfiguration. Ein handgebauter API-Ruf
   sieht sie immer. Deshalb tragen die Konten seit dem 24.08. nichtssagende
   Laender-Kennungen ('5683921'): der NAME schuetzt, nicht die Liste.
   Hier faellt nur der bequeme Blaetterweg im eigenen Client weg:

     mx_FacePile             der Avatar-Stapel mit Mitgliederzahl im
                             Raumkopf (und auf der Space-Startseite):
                             der Klick darauf OEFFNET die Liste
     mx_MemberListView       die Liste selbst im rechten Seitenpanel
     mx_MemberListHeaderView ihr Kopf mit Suche und Einladen-Knopf
     mx_MemberList           der Klassenname aelterer Fassungen, kostet
                             nichts und ueberlebt ein Downgrade

   Der Menuepunkt "People" in der Rauminfo traegt keine eigene Klasse:
   den raeumt sea.js weg (data-sea-weg, wie beim Plus-Menue). Alle vier
   Selektoren am 24.08.2026 im ausgelieferten Buendel v1.12.25 nachgesehen.

   MITGENOMMEN, bewusst: der Avatar-Stapel an Anruf-Kacheln (auch
   mx_FacePile). Die Teilnehmerzahl steht dort weiterhin als Text.
   Element X zeigt seine Mitgliederliste weiterhin: siehe oben.

   AM RECHNER IST SIE SEIT DEM 05.09.2026 WIEDER DA (Ansage Cedric:
   "Desktop People list of chat wieder sichtbar machen, rechte Info-Leiste
   wieder rueckgaengig"). Das Verstecken gilt nur noch bis 1179px, also auf
   Handy und schmalem Fenster, wo die Liste ohnehin das halbe Bild nimmt.

   DIESELBE GRENZE WIE IN ABSCHNITT 5 (max-width: 1179px), und zwar
   absichtlich dieselbe Zahl: zwei Schwellen, die fast gleich sind, ergeben
   ein Fenster, in dem die halbe Oberflaeche umschaltet und die andere
   nicht. Wer eine davon aendert, aendert beide.

   Die Lesebestaetigungen (mx_ReadReceiptGroup, Abschnitt 5) bleiben GLOBAL
   aus. Sie wurden am 24.08. zusammen mit der Liste abgeschaltet, sind aber
   eine andere Sache: die Liste sagt WER da ist, die Bestaetigung sagt WER
   WANN gelesen hat. Zurueckgefordert war nur die Liste. */
@media (max-width: 1179px) {
  .mx_FacePile,
  .mx_MemberListView,
  .mx_MemberListHeaderView,
  .mx_MemberList {
    display: none !important;
  }
}

/* ==========================================================================
   6b. "Export Chat": der Knopf faellt weg, der Export selbst nicht
   ==========================================================================
   Frage Cedric, 28.08.2026: "geht es die Export-Chat-Funktion global zu
   deaktivieren?" Nachgesehen: Element hat dafuer KEINEN Schalter. Die
   UIFeature-Familie in element-config.json kennt Registrierung,
   Identitaetsserver, Widgets und mehr, aber nichts fuer den Export.

   Der Menuepunkt faellt in sea.js (Schluessel 'export_chat.title', am
   28.08.2026 in der ausgelieferten en_EN-Datei nachgesehen). Diese Regel
   ist der zweite Riegel: sie trifft den Dialog selbst, falls ihn eine
   kuenftige Fassung noch anders erreichbar macht: ueber eine Tastenfolge,
   ein Kontextmenue in der Raumliste, was auch immer. Zwei Riegel, weil ein
   umbenannter Uebersetzungsschluessel den ersten stillschweigend oeffnet.

   DIE GRENZE IST DIESELBE WIE BEI DER MITGLIEDERLISTE, und sie ist hier
   sogar deutlicher: der Export ist rein klientenseitig. Element schreibt
   zusammen, was es ohnehin geladen hat. Es gibt keinen Endpunkt, den man
   sperren koennte; Element X und jeder andere Klient exportieren weiter,
   und wer die Nachrichten lesen darf, kann sie mitnehmen. Was hier
   verschwindet, ist der bequeme Weg, nicht die Moeglichkeit. Wer etwas
   anderes braucht, braucht andere Leseberechtigungen: nicht anderes CSS. */
.mx_ExportDialog {
  display: none !important;
}

/* ==========================================================================
   7. Die Willkommensseite: "Sign in" und "Create account" in die Mitte
   ==========================================================================
   Gemeldet von Cedric am 24.08.2026: beide Knoepfe kleben links, waehrend
   Ueberschrift und Text zentriert sind. Der Grund, am ausgelieferten CSS
   nachgesehen: .mx_DefaultWelcome zentriert per text-align, aber die
   Knoepfe sind Compound-Buttons mit display:flex und width:380px:
   Blockkaesten, die text-align nicht bewegt. Auto-Seitenraender zentrieren
   den Kasten selbst; max-width haelt ihn in schmalen Fenstern im Rahmen.
   Selektor Zeichen fuer Zeichen wie das Original (Kopf dieser Datei):
   gleiche Spezifitaet, spaeter im Kopf, gewinnt. */
.mx_DefaultWelcome .mx_DefaultWelcome_buttons a {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* ==========================================================================
   8. Der Heim-Knopf: der Rueckweg zur Kachel-Startseite
   ==========================================================================
   Ansage Cedric, 25.08.2026: wer einmal in einem Raum ist, findet nie zur
   Startseite (#/home) zurueck, Element merkt sich den letzten Raum und
   bietet keinen staendigen Rueckweg an. Der Knopf kommt aus sea.js (Block
   "Der Heim-Knopf"); hier steht nur seine Gestalt.

   BEWUSST EIN EIGENES OVERLAY, kein Anbau an Elements Space-Leiste: eine
   Aktualisierung kann jede mx_-Klasse umbenennen, aber niemandem ein
   position:fixed-Element wegnehmen. Links unten, oberhalb der Ecke, in der
   Elements Schnelleinstellungen wohnen (deshalb bottom 62px, nicht 10px).
   Das Teal ist der Markenton (#1b8074, CI 22.08.2026): er steht auf
   beiden Themes auf eigenem Grund und braucht keine Theme-Weiche. */
/* AM 30.08.2026 VERSCHOBEN (Ansage Cedric mit Bildschirmfoto: der Knopf sass
   auf dem Threads-Symbol und verdeckte es). Er steht jetzt auf der Hoehe der
   untersten Zeile, RECHTS neben "Settings", also neben der Beschriftung und
   nicht auf einem Symbol.

   Es bleibt ein festes Overlay ueber Elements Oberflaeche: die 150 Punkte
   sind an der ausgeklappten Seitenspalte gemessen, nicht an einer Klasse von
   Element. Steht die Spalte einmal schmaler, ist es diese eine Zahl. Ein
   Element-Internum waere die Alternative, und die ist teurer: die Klassen im
   ausgelieferten Buendel sind nicht stabil (siehe sea.js, Heim-Knopf). */
/* AM 30.08.2026 ZUM ZWEITEN MAL VERSCHOBEN (Ansage Cedric: "ganz links
   ueber dem Threads symbol"). Der erste Versuch sass AUF dem Threads-Symbol
   (left 10, bottom 62), der zweite daneben auf der Hoehe von "Settings"
   (left 150, bottom 10). Jetzt: dieselbe Spalte wie die Symbole der linken
   Leiste, aber eine Etage HOEHER als Threads. Damit verdeckt er nichts und
   steht trotzdem dort, wo die Hand ohnehin ist.

   Die 114 Punkte sind gemessen, nicht gerechnet: unten sitzen die
   Schnelleinstellungen, darueber das Threads-Symbol, und darueber ist
   Platz. Wenn Element diese Leiste einmal umbaut, ist es diese eine Zahl. */
#sea-heim {
  position: fixed;
  left: 10px;
  bottom: 114px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1b8074;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  z-index: 98;
  cursor: pointer;
}
#sea-heim:hover {
  background: #16685e;
}
#sea-heim svg {
  width: 22px;
  height: 22px;
}
#sea-heim[hidden] {
  display: none;
}


/* ==========================================================================
   9. Die Handy-Weiche vor der Anmeldung
   ==========================================================================
   Ansage Cedric, 28.08.2026: wer sich am HANDY-BROWSER anzumelden versucht,
   soll erkannt werden, moeglichst gar nicht durchkommen und auf Element X
   verwiesen werden. Am PC-Browser bleibt alles, wie es ist.

   Warum das nicht schon geloest war, obwohl es die Handy-Startseite gibt:
   Elements eigene Weiche (index.html, siehe chat/element/Dockerfile) greift
   nur beim Aufruf OHNE Route. Wer ein Lesezeichen auf '#/login' hat, wer aus
   einer Mail auf eine Raumadresse kommt oder wer von der Registrierung
   zurueckgeschickt wird, laeuft daran vorbei und steht mitten in der
   Anmeldemaske. Das Uebrige faengt sea.js.

   Die Flaeche liegt UEBER allem und laesst die Maske dahinter stehen, statt
   sie zu entfernen: Element soll seinen Zustand behalten, falls jemand den
   leisen Ausweg unten nimmt.
   ========================================================================== */
/* SEIT DEM 11.09.2026 IM KLEID DER STARTSEITE (Runde 1109c): dieselbe
   Europakarte als Grund wie lab/brand/anmeldeseite.html und mobil.html,
   das Wappen auf der hellen Schildplatte, der Verlaufs-Claim, Glaskarten,
   der tuerkise Knopf. Werte wortgleich mit den beiden anderen: wer eine
   Seite aendert, aendert alle drei. */
#sea-handy {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  background: #141d3a url(/brand/anmelde-hintergrund-karte.jpg) 68% 50% / cover no-repeat;
  color: #e8eef8;
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#sea-handy::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 16, 36, .62) 0%, rgba(10, 16, 36, .18) 30%,
    rgba(10, 16, 36, .18) 60%, rgba(10, 16, 36, .66) 100%);
}
#sea-handy .innen {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 34px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
#sea-handy .schild-schatten {
  display: inline-block;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55))
          drop-shadow(0 0 1px rgba(255, 255, 255, .6));
}
#sea-handy .schild {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 20px 30px;
  clip-path: url(#sea-handy-schildform);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(223, 238, 236, .94) 100%);
}
#sea-handy .schild img { display: block; height: 78px; width: auto; }
#sea-handy .augenbraue {
  margin: 14px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6fe3d6;
}
#sea-handy h1.claim {
  margin: 0 0 22px;
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: #ffffff;
  background: linear-gradient(96deg, #ffffff 0%, #d5f2ee 44%, #6fe3d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #sea-handy h1.claim { color: transparent; }
}
#sea-handy .karte {
  background: rgba(10, 22, 46, .62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 24px 48px -30px rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 20px 18px;
  text-align: left;
}
#sea-handy .karte + .karte { margin-top: 14px; }
#sea-handy .karte p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
#sea-handy .karte p:last-child { margin-bottom: 0; }
#sea-handy .laeden {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 6px 0 2px;
}
#sea-handy .laeden img { display: block; max-width: 44vw; height: auto; }
#sea-handy a { color: #6fd6c9; }
#sea-handy .knopf {
  display: block;
  margin-top: 14px;
  padding: 13px 18px;
  border-radius: 13px;
  background: linear-gradient(180deg, #7ff0e2 0%, #17a094 100%);
  box-shadow: 0 12px 28px -12px rgba(23, 160, 148, .95),
              inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: #04231f;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
}
#sea-handy .knopf:hover { filter: brightness(1.06); }
/* Der Ausweg ist bewusst leise: er soll da sein, aber nicht einladen. */
#sea-handy .ausweg {
  display: inline-block;
  margin-top: 22px;
  font-size: 13px;
  color: rgba(232, 238, 248, .55);
}

/* ==========================================================================
   11. Der graue Aktivitaetspunkt in der Raumliste ist AUS (01.09.2026)
   ==========================================================================
   Befund Cedric: Chats melden sich immer wieder als ungelesen, obwohl
   nichts Neues drin ist, auch voellig leere. Die Ursache sind die
   laufenden Beitritte: die Zuteilung bringt jeden Newcomer in seine
   Raeume, jeder Beitritt ist ein Ereignis in der Zeitleiste, und Element
   setzt fuer JEDES Ereignis den grauen Aktivitaetspunkt. Bei hunderten
   Anmeldungen blinkt so die halbe Raumliste, dauerhaft.

   Versteckt wird NUR der graue Punkt (Aktivitaet ohne Benachrichtigung).
   Der gruene Punkt und die Zaehler tragen die Klasse _notification_ bzw.
   _badge2Char_/_badge3Char_ und bleiben stehen: echte Nachrichten und
   Erwaehnungen melden sich weiter.

   Die Klassennamen der neuen Raumliste sind gehasht (_dot_10dt2_21), der
   Hash wechselt mit jedem Element-Neubau: deshalb [class*=]-Selektoren
   ohne Hash. '_notification_' trifft dabei nicht '_notificationBadge_',
   auf den Unterstrich am Ende kommt es an (Grossbuchstabe dahinter).
   Element X zeigt seine Punkte weiter, wie bei Seen-by und People. */
[class*="_notificationBadge_"][class*="_dot_"]:not([class*="_notification_"]) {
  display: none !important;
}

/* DER ZWEITE GRAUE PUNKT, GEFUNDEN AM 02.09.2026 SPAET (Befund Cedric:
   Punkte in der Raumliste eines Space, nach Rollout und Neuanmeldung).
   Die Raumliste zeichnet ihren Aktivitaetspunkt NICHT ueber das
   NotificationBadge von oben, sondern ueber compound-webs ActivityMarker
   'Unread': ein 8-Pixel-Kreis, Klasse _unread_<hash>, verschachtelt in
   der _notificationDecoration_ der Zeile. Am laufenden Buendel abgelesen
   (v1.12.25, Modul ActivityMarker/Unread.js): der Selektor von oben traf
   ihn nie, der Punkt stand also seit dem 01.09. nur dort nicht, wo man
   beim Abnehmen hinsah.

   Eingegrenzt auf die Decoration, damit nichts anderes faellt: der gruene
   Zaehler heisst _unread-counter_ (Bindestrich, kein Treffer fuer
   '_unread_'), Erwaehnung und Stummschaltung sind eigene Symbole. */
[class*="_notificationDecoration_"] [class*="_unread_"] {
  display: none !important;
}

/* ==========================================================================
   12. Systemmeldungen: unsichtbar mit echter Hoehe (v17, 03.09.2026)
   ==========================================================================
   Die Geschichte, damit sie niemand rueckwaerts geht: seit dem 21.08.
   standen .mx_EventTile_info und .mx_GenericEventListSummary auf
   display:none (Ansage: nur Gespraech). Am 01.09. kam gegen "die
   Zeitleiste wackelt" dieselbe Regel als v14 noch einmal dazu, ein
   funktionsloses Duplikat: das Ruckeln blieb, in allen Chats.

   Der A/B-Test am 03.09. (Cedric): app.element.io gegen denselben
   Server, also unveraendertes Element mit ALLEN Systemzeilen sichtbar,
   laeuft voellig ruhig, nur mit zu viel Text. Unser Frontend ruckelt.
   Der Unterschied ist NUR dieses Stylesheet. Der Mechanismus: mit
   display:none zaehlt Element die Kacheln als gerendert, sie haben aber
   Hoehe null. Beim Fuellen des Fensters und beim Verankern des Scrollens
   rechnet Element mit Hoehen, die es nicht gibt: daher das Springen.

   v16 machte die Zeilen erst klein und blass (11px, halbe Deckkraft):
   die Zeitleiste stand, aber Cedric wollte sie ganz weg. Deshalb v17,
   noch in derselben Nacht: UNSICHTBAR, ABER MIT ECHTER HOEHE. opacity:0
   statt display:none. Die Kachel bleibt im Fluss, behaelt 8 Pixel
   echte, messbare Hoehe (max-height + overflow:hidden, min-height und
   Aussenabstaende auf null, damit das Theme nichts zurueckholt), und
   Elements Rechnung stimmt, weil sie mit realen Pixeln rechnet. Optisch
   sind 8 Pixel ein Hauch Abstand zwischen zwei Nachrichten, mehr nicht.
   pointer-events:none, damit niemand unsichtbare Knoepfe trifft
   (die Sammelzeile traegt einen Aufklapp-Umschalter).

   WARUM NICHT WIEDER NULL: 8px sind der Puffer gegen genau den alten
   Fehler. Bei Hoehe null wird der Schirm beim Fuellen nie "voll" und
   die Verankerung rechnet mit Kacheln ohne Ausdehnung: das war das
   Springen. Wer die 8px auf 0 dreht, hat display:none nachgebaut.

   Echte Nachrichten, Remis Umfragen und die Datumstrenner sind eigene
   Klassen und bleiben unberuehrt. Joins, Leaves und Namenswechsel bleiben
   ueber Elements EIGENE Schalter unsichtbar (setting_defaults in der
   element-config.json): das ist der Standardweg, dort entstehen gar keine
   Kacheln, und der ruhige Testlauf zeigt, dass Element damit rechnet.
   Element X zeigt weiter alles, dieselbe Grenze wie immer. */
.mx_GenericEventListSummary,
li.mx_EventTile_info {
  opacity: 0 !important;
  pointer-events: none !important;
  min-height: 0 !important;
  max-height: 8px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   PROBE: die Landesflagge hinter dem Anzeigenamen (10.09.2026)
   ==========================================================================
   Gegenstueck zum Block in sea.js. Sie soll den Namen begleiten und ihn
   nicht verdraengen: Zeilenhoehe des Textes, kleiner Abstand davor, und
   sie schiebt keine Zeile auf. Ohne feste Breite waere ein SVG in seiner
   natuerlichen Groesse da, und das sind bei manchen Flaggen 60 Pixel. */
.sea-landflagge {
  display: inline-block;
  width: 1.05em;
  height: .72em;
  margin-left: .34em;
  vertical-align: baseline;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}