/* ============================================================
   Redaktionsportal · Design System
   ------------------------------------------------------------
   Zentrale, wiederverwendbare Styles für alle Portal-Seiten —
   für alle Arbeitsbereiche, nicht nur für geladen. Deshalb heißt
   die Datei seit 2026-08-22 portal.css und nicht mehr geladen.css.
   Neue Seiten binden nur diese Datei ein:
     <link rel="stylesheet" href="/assets/portal.css">
   und nutzen die .gl-* Klassen. Seiten-spezifisches CSS kommt
   in einen eigenen <style>-Block ODER besser hierher, wenn es
   mehrfach gebraucht wird.

   Konvention: alle Klassen und Custom-Properties sind mit
   "gl-" / "--gl-" praefixiert, damit nichts kollidiert.
   ============================================================ */

/* ---- Schriften: selbst gehostet (kein Google-CDN) -------
   Barlow + Barlow Condensed liegen lokal unter assets/fonts/
   als woff2 (klein) mit ttf-Fallback. Genau die Schnitte, die
   die Seiten wirklich nutzen: Barlow 400/500/600, Barlow
   Condensed 700/800. Erzeugt aus den Original-TTFs per fonttools.
   Grund: keine externen Requests -> strenge CSP 'self' in P9.
   -------------------------------------------------------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Barlow-Regular.woff2') format('woff2'),
       url('/assets/fonts/Barlow-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/Barlow-Medium.woff2') format('woff2'),
       url('/assets/fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
       url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
}
@font-face {
  /* Nur fuer duenne Ueberschriften-Teile (Reels-Seite). Der Rest der
     Kopfzeile laeuft auf 700/800 – ein Gewicht, das nicht geladen ist,
     faellt still auf das naechste zurueck und sieht dann aus wie nichts. */
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 200; font-display: swap;
  src: url('/assets/fonts/BarlowCondensed-ExtraLight.woff2') format('woff2'),
       url('/assets/fonts/BarlowCondensed-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/BarlowCondensed-Bold.woff2') format('woff2'),
       url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/BarlowCondensed-ExtraBold.woff2') format('woff2'),
       url('/assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
}

@font-face {
  /* Archivo, IBM Plex Sans und IBM Plex Mono: die Schriften des Episoden-
     Raums (lencastr-Look, seit 2026-09-11). Dieselben latin-Subsets wie in
     lencastr/frontend/fonts, OFL-lizenziert (OFL-*.txt daneben). Archivo und
     Plex Sans sind variable Schnitte — ein File deckt alle Gewichte ab. */
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* Newsreader (Titel) und Instrument Sans (Bedienung) — seit dem Umbau auf die
   Entwuerfe 5a/6a. Beide sind Variable Fonts: EINE Datei deckt den ganzen
   Gewichtsbereich ab, darum steht am font-weight eine Spanne und kein Wert.
   Lokal gehostet wie alles andere; die CSP des Portals laesst keine fremde
   Schriftquelle zu (SIL OFL, Lizenztexte liegen daneben). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
}

/* ---- Design Tokens -------------------------------------- */
/* Zwei Themes, ein Satz Rollen.
   ------------------------------------------------------------------
   Aufbau (wichtig beim Erweitern):

     :root                     = HELL, die vollstaendige Palette
     :root[data-theme="dark"]  = DUNKEL, nur die Farben, die sich aendern

   Es gibt bewusst KEINE @media (prefers-color-scheme)-Regel. `theme.js`
   laeuft synchron im <head> und setzt `data-theme` IMMER explizit — auch
   dann, wenn niemand gewaehlt hat und die Systemeinstellung entscheidet.
   Damit steht jeder dunkle Wert genau EINMAL im Stylesheet. Die uebliche
   Variante (Media-Regel plus Attribut-Regel) braucht jeden Dark-Wert
   doppelt, und zwei Listen, die man von Hand synchron halten muss, laufen
   irgendwann auseinander. Ohne JavaScript zeigt das Portal die helle
   Fassung; es ist ohnehin eine JS-Anwendung (die Listen entstehen erst im
   Browser), also ist das kein Zustand, den jemand zu sehen bekommt.

   Regel fuer neue Farben: NIE einen Literalwert in eine Regel schreiben,
   immer erst hier eine Rolle anlegen. Eine Farbe, die nur im :root steht
   und im dark-Block fehlt, gilt in BEIDEN Themes — das ist manchmal
   richtig (Cyan ist in beiden Modi dasselbe Cyan) und manchmal der Fehler,
   der dunkle Schrift auf dunklem Grund erzeugt.

   Die hellen Werte stammen aus design_handoff_episoden_raum/README-light.md
   (Entwurf 5a), die dunklen aus 6a.
   ------------------------------------------------------------------ */
:root {
  /* ---- Flaechen -------------------------------------------------- */
  --gl-grund:          #f4f1ea;   /* Seitenhintergrund */
  --gl-reiterstreifen: #efebe2;   /* Flaeche hinter den Reitern */
  --gl-flaeche:        #faf7f1;   /* inaktiver Reiter, Schublade */
  --gl-flaeche-2:      #e8e3d9;   /* Segmentschiene, gedaempfte Flaeche */
  /* "Blatt" ist die grosse Arbeitsflaeche (Werkbank, Liste). Ein Verlauf,
     kein Flachton: er gibt dem Blatt oben Licht und laesst es unten
     aufliegen. In beiden Themes derselbe Kniff, nur andere Enden. */
  --gl-blatt:          linear-gradient(180deg, #fffdf9, #fbf8f2 60%);
  /* Der obere Ton des Blattes als FLACHE Farbe. Keine neue Farbe: derselbe
     Wert, der oben im Verlauf steht — nur als Wert, den man mischen kann.
     Gebraucht fuer halbdurchsichtige Unterlegungen, die auf dem Blatt liegen
     (Beschriftungen in der Trendkarte, 56a: `rgba(255,253,249,.75)`). */
  --gl-blatt-hell:     #fffdf9;
  --gl-karte:          linear-gradient(180deg, #fffefb, #faf7f1);
  --gl-bedienelement:  linear-gradient(180deg, #ffffff, #f7f3ec);
  --gl-app-symbol:     linear-gradient(180deg, #ffffff, #f3eee4);
  /* Der Werkbankkopf hebt sich im Dunkeln als eigene Flaeche ab. Im Hellen
     traegt ihn die Haarlinie allein — eine zweite helle Flaeche auf hellem
     Blatt waere nur Schmutz. */
  --gl-werkbankkopf:   transparent;
  --gl-werkbankkopf-schatten: none;

  /* ---- Linien und Schatten --------------------------------------- */
  --gl-haarlinie:      rgba(60, 45, 20, .08);
  --gl-rahmen:         rgba(60, 45, 20, .18);
  --gl-ring:           rgba(60, 45, 20, .09);   /* Ring um Bedienelemente */
  /* Schatten im Hellen sind WARM getoent, nie grau: grauer Schatten auf
     warmem Papier sieht schmutzig aus. */
  --gl-blatt-schatten: 0 0 0 1px rgba(60, 45, 20, .07),
                       0 2px 4px rgba(60, 45, 20, .04),
                       0 24px 48px -28px rgba(60, 45, 20, .4);
  --gl-shadow:         0 8px 30px rgba(60, 45, 20, .16);
  --gl-menue-schatten: 0 18px 40px rgba(60, 45, 20, .22);
  /* Drei Schatten aus 61a, die es so noch nicht gab (02.10.2026).
     --gl-blatt-schatten darueber ist Zeichen fuer Zeichen der grosse
     Kartenschatten des Entwurfs (SH_CARD) und wird nicht verdoppelt.
       klein    kleine Karte, Knopfkarte, zentrales Feld im Bedienband (SH_K)
       gewaehlt die markierte Karte: Cyan-Ring plus weicher Wurf (SH_SEL)
       knopf    heller Knopf mit Haarkante */
  --gl-schatten-klein:    0 0 0 1px rgba(60, 45, 20, .08),
                          0 1px 2px rgba(60, 45, 20, .05),
                          0 10px 20px -16px rgba(60, 45, 20, .35);
  --gl-schatten-gewaehlt: 0 0 0 2px var(--gl-cyan),
                          0 8px 18px -10px color-mix(in srgb, var(--gl-akzent-schrift) 50%, transparent);
  --gl-schatten-knopf:    0 0 0 1px rgba(60, 45, 20, .14),
                          0 1px 2px rgba(60, 45, 20, .08);
  --gl-schatten-akzent:   0 1px 2px color-mix(in srgb, var(--gl-akzent-schrift) 30%, transparent),
                          0 6px 14px -8px color-mix(in srgb, var(--gl-akzent-schrift) 60%, transparent);

  /* ---- Schrift ---------------------------------------------------- */
  --gl-text-1:         #26231f;   /* Fliesstext, Titel */
  /* Die Stufe zwischen 1 und 2, nachgetragen am 02.10.2026 fuer 61a.
     Der Entwurf arbeitet mit FUENF Grautoenen (#26231f, #4a453e, #5c564d,
     #6f685e, #8a8276), das Portal hatte vier. #4a453e und #5c564d liegen
     ΔE 7,5 auseinander und stehen in 61a in derselben Karte nebeneinander
     (Herkunftszeile gegen Begruendung) — da ist der Unterschied zu sehen.
     8,6:1 gegen das Blatt, also nirgends knapp. */
  --gl-text-1b:        #4a453e;   /* kraeftige zweite Ebene: inaktive Reiter, Beiwerk in Karten */
  --gl-text-2:         #5c564d;   /* zweite Ebene */
  /* #8a8276 stand hier bis zum 28.09.2026 und war zu hell: gegen das Blatt
     (#fffdf9) nur 3,73:1, gegen den Grund 3,36:1. Etiketten und Mono-Zusaetze
     sind 10-12 px gross, fuer sie gilt die WCAG-Schwelle 4,5:1 — nicht die 3:1
     fuer grosse Schrift. Gemessen bei der Sichtpruefung der Datenfrage
     (test-datenfrage.sh), betroffen war aber jede Seite: .gl-hinweis,
     .gl-etikett, .gl-leer und alle Mono-Zusaetze in den Listen.
     #706a5f haelt 4,75:1 im schlechtesten Fall und bleibt sichtbar leichter
     als --gl-text-2 (6,43:1) — die Abstufung "Text, zweite Ebene, gedaempft"
     bleibt also erhalten. Der dunkle Wert (#8b949e, 6,15:1) war nie das
     Problem und bleibt unangetastet. */
  --gl-gedaempft:      #706a5f;   /* Etiketten, Mono-Zusaetze */
  --gl-deaktiviert:    #a39b8d;   /* abgeschaltet */
  /* Frueher woertlich Weiss. Die Rolle ist "staerkster Kontrast zum Grund",
     und die ist im Hellen fast schwarz. Der Name bleibt, weil ihn rund
     dreissig Regeln benutzen. */
  --gl-white:          #1d1a16;
  --gl-text:           var(--gl-text-1);
  --gl-muted:          var(--gl-text-2);
  --gl-faint:          var(--gl-gedaempft);
  --gl-platzhalter:    #a8a094;

  /* ---- Akzent ----------------------------------------------------- */
  /* Zwei Rollen, nicht eine. Die FLAECHE bleibt das volle Cyan (auf ihr
     steht dunkle Schrift, das traegt in beiden Themes). Als SCHRIFT oder
     feine Linie ist reines Cyan auf Papier unlesbar — dafuer gibt es
     --gl-akzent-schrift. portal-theme.js rechnet den Wert je
     Arbeitsbereich aus der Markenfarbe aus. */
  --gl-cyan:           #16E1DE;
  /* Den Wert rechnet portal-theme.js je Arbeitsbereich aus der Markenfarbe
     und legt ihn als --gl-marke-schrift-* ab — EINMAL, fuer beide Themes.
     Deshalb steht hier eine Weiche und kein fester Wert: der Umschalter
     greift dann, ohne dass JavaScript vom Wechsel erfahren muss. Der
     Rueckfallwert ist das abgedunkelte Cyan von geladen. */
  --gl-akzent-schrift: var(--gl-marke-schrift-hell, #0B7A78);
  --gl-akzent-flaeche: linear-gradient(180deg, #4ae9e6, #16E1DE);
  --gl-akzent-tinte:   #0d1117;   /* Schrift auf gefuellter Akzentflaeche */
  --gl-akzent-tint:    #eafbfa;   /* zarte Toenung, z.B. gewaehlte Karte */
  --gl-akzent-rahmen:  color-mix(in srgb, var(--gl-cyan) 55%, transparent);
  --gl-cyan-dim:       color-mix(in srgb, var(--gl-cyan) 12%, transparent);
  --gl-cyan-mid:       color-mix(in srgb, var(--gl-cyan) 30%, transparent);
  /* Der Rahmen um das GEWAEHLTE Bild — die aktive Vorlage in der
     Vorlagenauswahl und die gewaehlte Miniatur in der Ablageleiste.
     Bestellt von Lennart am 29.09.2026: erst „ganz weiß machen und doppelt so
     dick", nach dem Ansehen dann „das ist bissl schwer. dann nehmen wir ein
     helles entsättigtes cyan."
     EIN Token und nicht zwei lose Hexwerte: es sind zwei Stellen, die
     dieselbe Sache sagen („dieses Bild ist gewaehlt"), und sie sind schon
     einmal auseinandergelaufen.
     Warum nicht --gl-cyan: das volle Cyan ist die Rolle FLAECHE (siehe den
     Kommentar darueber) — als 4 px breiter Strich auf einem Bild wirkt es wie
     ein Knopf und nicht wie eine Auswahl. Und warum nicht --gl-text-1: das ist
     im Hellen fast schwarz, und genau das war Lennarts Klage.
     Hell und entsaettigt, damit derselbe Wert in BEIDEN Modi traegt: auf dem
     dunklen Grund des Dunkelmodus (#0d1117) wie auf der hellen Toenung der
     Ablageleiste. Der Kontrast an beiden Stellen ist am laufenden Browser
     gemessen (sichtpruefung/generator.js, 30.09.2026). */
  --gl-rahmen-gewaehlt: #ffffff;
  /* Der SCHATTEN hinter der gewaehlten Karte (30.09.2026).
     Lennart, nach vier Runden am Bildschirm: „lass die haarlinie weg und gib
     dafuer der markierten karte noch einen schatten dahinter einen weichen.
     dann hebt sie sich gut ab".
     Das ist die Loesung fuer das Problem, das keine Farbe loesen konnte: der
     weisse Ring steht gegen den cremefarbenen Seitengrund nur bei 1,33:1 (an
     echten Bildschirmpixeln gemessen, nicht gerechnet). Ein Schatten braucht
     keinen Kontrast — er hebt die Karte von der Flaeche ab, und zusammen mit
     der Groesse (10 % ueber den Nachbarn) ist die Auswahl von aussen eindeutig.
     Im Dunkeln darf er kraeftiger sein: dort verschluckt der Grund ihn sonst. */
  --gl-rahmen-gewaehlt-schatten: 0 6px 18px -4px rgba(38, 35, 31, .38);
  --gl-border:         var(--gl-rahmen);
  --gl-border-2:       var(--gl-haarlinie);

  /* ---- Produktionszustaende (Entwurf 5a/6a) ----------------------- */
  /* Der Farbcode hat sich mit 5a/6a gedreht: GRUEN heisst jetzt "gesendet,
     fertig" statt "abgenommen", und Abgenommen traegt Violett. Gelesen wird
     die Reihe als Weg: blaugrau angelegt -> gelb in Arbeit -> orange im
     Review -> violett abgenommen -> gruen gesendet. */
  --gl-z-angelegt:          #7d93ab;
  --gl-z-produktion:        #c9a227;
  --gl-z-review:            #d98a3d;
  --gl-z-abgenommen:        #9a7bb5;
  --gl-z-gesendet:          #5fa577;

  /* ---- Farben der Datenreihen (Datenfrage) -------------------------------
     NEU GESETZT am 02.10.2026 nach Entwurf 61a und Kritikerbefund 2.

     Die ersten VIER sind die des Entwurfs — Petrol, warmes Grau, Orange,
     Violett —, und sie stehen vorn, weil 61a sie in dieser Reihenfolge
     zeichnet: die fuehrende Reihe petrol und dicker, die Begleiter duenner.
     Die acht weiteren setzen den Tonkreis in derselben gedaempften
     Saettigung fort; laute Primaerfarben saehen auf diesem Papier aus wie
     ein Fremdkoerper.

     Zwei Dinge sind gemessen, nicht geschaetzt (werkzeug: der Palettenlauf
     im Bericht zur Runde):

       KONTRAST gegen das DUNKELSTE gemalte Papier. Das ist der Punkt, an dem
       die Fassung vom 02.10.2026 danebenlag: sie rechnete gegen #fffdf9, den
       HELLSTEN Ton von --gl-blatt, und meldete 4,53:1 als Schwaechstes.
       --gl-blatt ist aber ein Verlauf. Am Bildschirm ausgelesen liegt unter
       der Zeichnung #fdfbf6 oben bis #fbf8f3 unten (gemessen 02.10.2026) —
       und gegen #fbf8f3 fielen SIEBEN der zwoelf Toene auf 4,35 bis 4,40.
       Gewaehlt wird deshalb gegen den dunkelsten Papierton, mit einem Boden
       von 4,65:1, damit auch die Kantenglaettung noch Luft hat.
       Nicht 3:1, obwohl eine Linie ein Grafikelement ist — denn 61a schreibt
       den REIHENNAMEN in der Farbe seiner Linie ans Kurvenende, und das ist
       Text (13,5 px, fett). Fuer ihn gilt 4,5:1.

       ABSTAND untereinander, CIEDE2000, in BEIDEN Themes. Kleinster Abstand
       hell ΔE 12,9, dunkel ΔE 12,2 (Reihe 6/12). Die alte Zwoelferreihe
       hatte zwei Paare bei ΔE 7,5 — das war Befund 2.

       Drei Riegel hielten beim Nachziehen am 02.10.2026 (Palettenlauf im
       Bericht zur Reparaturrunde):
         * keine Farbe wurde SCHWAECHER als zuvor (Reihe 7 traegt 6,27:1),
         * keine wurde LAUTER (Saettigung hoechstens +8 %) — laute
           Primaerfarben saehen auf diesem warmen Papier aus wie ein
           Fremdkoerper,
         * keine entfernte sich weiter von ihrer dunklen Schwester als zuvor.
           Eine Palette, die nur in einem Theme zusammenpasst, ist keine.
       Darum sind die Aenderungen klein (ΔE 0,0 bis 2,3) und der kleinste
       Abstand stieg trotzdem von 12,1 auf 12,9.

     Die Farbe ist nie die einzige Auskunft: in 61a steht der Name der Reihe
     direkt an ihrem Kurvenende. Wer nur Farben unterscheidet, hat bei zwoelf
     Reihen ohnehin verloren. */
  --gl-reihe-1:        #007a78;   /* 61a, fuehrend */
  --gl-reihe-2:        #766f65;   /* 61a #8a8276, auf Kontrast gezogen */
  --gl-reihe-3:        #a45f1c;   /* 61a #d98a3d, auf Kontrast gezogen */
  --gl-reihe-4:        #8561a4;   /* 61a #9a7bb5, auf Kontrast gezogen */
  --gl-reihe-5:        #1d8218;
  --gl-reihe-6:        #256bb1;   /* traegt schon 5,19:1 */
  --gl-reihe-7:        #b12525;   /* traegt schon 6,27:1 */
  --gl-reihe-8:        #797216;
  --gl-reihe-9:        #b1256d;   /* traegt schon 5,91:1 */
  --gl-reihe-10:       #417c5b;
  --gl-reihe-11:       #8b5c4b;   /* traegt schon 5,31:1 */
  --gl-reihe-12:       #4f7684;
  --gl-z-abgesagt:          #c0543f;
  /* Tint und Rahmen werden aus dem Ton GERECHNET, nicht einzeln gepflegt.
     Vorher standen hier dreissig rgba()-Literale, die bei jeder Tonaenderung
     von Hand nachgezogen werden mussten — und es sechsmal nicht wurden. */
  --gl-z-tint-anteil:       12%;
  --gl-z-rahmen-anteil:     38%;
  --gl-z-angelegt-tint:     color-mix(in srgb, var(--gl-z-angelegt) var(--gl-z-tint-anteil), transparent);
  --gl-z-angelegt-rahmen:   color-mix(in srgb, var(--gl-z-angelegt) var(--gl-z-rahmen-anteil), transparent);
  --gl-z-produktion-tint:   color-mix(in srgb, var(--gl-z-produktion) var(--gl-z-tint-anteil), transparent);
  --gl-z-produktion-rahmen: color-mix(in srgb, var(--gl-z-produktion) var(--gl-z-rahmen-anteil), transparent);
  --gl-z-review-tint:       color-mix(in srgb, var(--gl-z-review) var(--gl-z-tint-anteil), transparent);
  --gl-z-review-rahmen:     color-mix(in srgb, var(--gl-z-review) var(--gl-z-rahmen-anteil), transparent);
  --gl-z-abgenommen-tint:   color-mix(in srgb, var(--gl-z-abgenommen) var(--gl-z-tint-anteil), transparent);
  --gl-z-abgenommen-rahmen: color-mix(in srgb, var(--gl-z-abgenommen) var(--gl-z-rahmen-anteil), transparent);
  --gl-z-gesendet-tint:     color-mix(in srgb, var(--gl-z-gesendet) var(--gl-z-tint-anteil), transparent);
  --gl-z-gesendet-rahmen:   color-mix(in srgb, var(--gl-z-gesendet) var(--gl-z-rahmen-anteil), transparent);
  --gl-z-abgesagt-tint:     color-mix(in srgb, var(--gl-z-abgesagt) var(--gl-z-tint-anteil), transparent);
  --gl-z-abgesagt-rahmen:   color-mix(in srgb, var(--gl-z-abgesagt) 50%, transparent);
  /* Das Zustandsetikett ist vollflaechig in der Zustandsfarbe; darauf steht
     dunkle Schrift. Ein Wert je Theme, nicht je Zustand. */
  --gl-z-etikett-tinte:     #1d1a16;

  /* ---- Raum Grafiken (Entwurf 61a, 02.10.2026) --------------------
     Der Raum kennt genau ZWEI Zustaende, und mehr soll er nicht kennen:
     „bestellt" heisst, der Auftrag liegt in der Ablage und in animiert/
     liegt noch nichts; „fertig" heisst, die Vorschau-mp4 ist da. Was
     dazwischen passiert (analysiert, aber noch nicht gerendert), sieht das
     Portal nicht und zaehlt als bestellt.

     Der PUNKT auf dem Zeitstrahl ist Vollfarbe, das SCHILD ist Toenung mit
     dunkler Schrift — zwei Rollen je Zustand, wie bei den Produktions-
     zustaenden darueber. Der Punkt fuer „bestellt" ist Zeichen fuer Zeichen
     --gl-z-angelegt (#7d93ab); er steht trotzdem unter eigenem Namen hier,
     weil die beiden Bedeutungen nichts miteinander zu tun haben und sonst
     beim naechsten Tonwechsel still mitwandern wuerden.

     Amber gibt es in diesem Raum NUR fuer die Antwort „die Frage ist
     mehrdeutig". Bis 60a trug „bestellt" dieses Gelb; 61a hat es
     weggenommen, damit die Farbe wieder genau eine Sache bedeutet. */
  --gl-g-bestellt:        #7d93ab;   /* Punkt auf dem Zeitstrahl */
  --gl-g-bestellt-tint:   #e6ebf1;   /* Schildflaeche */
  --gl-g-bestellt-schrift:#4d6680;   /* Schrift auf dem Schild */
  --gl-g-fertig:          #3f8a5c;
  --gl-g-fertig-tint:     #e3f1e8;
  --gl-g-fertig-schrift:  #2f6b4a;
  /* Vorschlag aus dem Gespraech: kein gefuellter Punkt, sondern ein Ring —
     „hier koennte etwas entstehen" ist kein Zustand, sondern eine Leerstelle. */
  --gl-g-vorschlag:       var(--gl-blatt-hell);
  --gl-g-vorschlag-ring:  color-mix(in srgb, var(--gl-akzent-schrift) 55%, transparent);
  /* Mehrdeutig — und sonst nichts. */
  --gl-g-unklar-tint:     #f8efe0;
  --gl-g-unklar-schrift:  #8a5a12;
  /* Nichts gefunden, ungepruefte Reihe */
  --gl-g-nichts-schrift:  #a2452f;
  --gl-g-nichts-tint:     #f4e3dc;
  --gl-g-gepruefte-tint:  #e6f5f4;
  --gl-g-ungepruefte-tint:#efe9df;
  /* Der Fuss der grossen Trefferkarte: eine Spur dunkler als das Blatt,
     damit Lizenz und Knoepfe als eigene Zeile lesen. */
  --gl-g-kartenfuss:      #f9f6f0;

  /* ---- Terminarten (Kalender, Zeitstrahl, Zeitleiste) ------------- */
  --gl-t-aufnahme:     var(--gl-z-produktion);
  --gl-t-review:       var(--gl-z-review);
  --gl-t-abnahme:      var(--gl-z-abgenommen);
  --gl-t-sendung:      var(--gl-z-gesendet);
  --gl-zeit-schiene:   #ebe5da;
  --gl-zeit-erledigt:  #b9dcc4;

  /* ---- Meldungen -------------------------------------------------- */
  --gl-success:        #2f7d4f;
  --gl-error:          #b3392c;
  --gl-warn:           #b8741f;
  /* Zaehlerplakette an den Apps. 5a nennt #5FA477 mit weisser Schrift; die
     Zahl darauf kommt damit aber nur auf 2.97:1, und sie ist 13 px — also
     Kleintext, fuer den 4.5:1 gilt. Derselbe Gruenton, so weit abgedunkelt,
     dass die Zahl traegt (4.61:1 gegen Weiss, 4.31:1 gegen das Papier).
     Im Dunkeln stellt sich die Frage nicht: #93d7a5 auf #0d1117 sind 11.3:1. */
  --gl-plakette:       #4a805d;
  --gl-plakette-tinte: #ffffff;

  /* ---- Altlasten aus dem ersten Portal ---------------------------- */
  /* Noch in Login, Trends, Reels und Kacheln im Einsatz. Sie zeigen jetzt
     auf die Rollen oben, damit sie mitschalten, statt eigene Werte zu
     haben. Wer eine dieser Regeln anfasst, ersetzt den Namen gleich. */
  --gl-bg:             var(--gl-grund);
  --gl-surface:        var(--gl-flaeche);
  --gl-card:           var(--gl-flaeche);
  --gl-card-2:         var(--gl-flaeche-2);

  /* ---- Typografie ------------------------------------------------- */
  --gl-font-titel: 'Newsreader', Georgia, 'Times New Roman', serif;
  --gl-font-text:  'Instrument Sans', system-ui, -apple-system, sans-serif;
  --gl-font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gl-font:       var(--gl-font-text);
  --gl-font-head:  var(--gl-font-titel);

  /* ---- Form ------------------------------------------------------- */
  --gl-radius:      6px;
  --gl-radius-lg:   10px;
  --gl-radius-pill: 999px;
  --gl-radius-knopf: 9px;
  --gl-radius-feld:  10px;
  --gl-radius-blatt: 18px;
  --gl-gap:         16px;
  /* --gl-maxw und .gl-main sind die Mittelstreifen-Regel des ERSTEN Portals.
     Am 30.09.2026 nachgesehen: keine Seite und kein Skript benutzt beide noch
     (`grep -rn gl-main` findet nur diese Datei). Das Mass, das die Raeume
     wirklich traegt, steht unten als --gl-kasten. */
  --gl-maxw:        980px;

  /* ---- Der Seitenkasten ------------------------------------------
     Die drei Light-Entwuerfe (5a Episoden, 56a Trends Verlauf, 58a Trends
     Heute) zeigen die Seite nicht randlos, sondern als KASTEN: 1440 px breit,
     zentriert, Radius 14, mit Schatten auf einem etwas dunkleren Grund.
     Zeichen fuer Zeichen derselbe Block in allen dreien:
       width:1440px; border-radius:14px; overflow:hidden; background:#f4f1ea;
       box-shadow:0 0 0 1px rgba(60,45,20,.08),0 30px 60px -30px rgba(60,45,20,.35)
     Der Grund DAHINTER ist der Canvas der Entwuerfe: hell #e9e7e2 (steht im
     <style> der Light-Dateien), dunkel #08090c (Portal Trends.dc.html).
     Bis 1440 px Fensterbreite sieht es aus wie vorher — der Rand entsteht
     erst darueber. Unter 900 px faellt der Kasten ganz weg (siehe unten):
     am Telefon waere der Rand verschenkter Platz.
     ---------------------------------------------------------------- */
  --gl-kasten:         1440px;
  --gl-kasten-radius:  14px;
  --gl-aussen:         #e9e7e2;
  --gl-kasten-schatten: 0 0 0 1px rgba(60, 45, 20, .08),
                        0 30px 60px -30px rgba(60, 45, 20, .35);

  /* Wie lange der Wechsel zwischen den Themes dauert. Steht hier, damit
     jede Regel dieselbe Zeit nimmt und der Uebergang nicht gestaffelt
     wirkt. theme.js schaltet die Klasse, die das ueberhaupt erlaubt. */
  --gl-theme-dauer: 200ms;
  /* Hover auf GEFUELLTEN Akzentflaechen. Im Dunkeln hellt filter:brightness
     auf und die Flaeche wirkt aktiver; auf einem hellen Knopf liefe dieselbe
     Zahl Richtung Weiss und der Hover verschwaende. Also je Theme die
     andere Richtung. */
  --gl-hover-helligkeit: .93;

  color-scheme: light;
}

/* ================= DUNKEL (Entwurf 6a) =========================== */
/* Nur die Rollen, die sich aendern. Was hier fehlt, gilt in beiden. */
:root[data-theme="dark"] {
  --gl-grund:          #0d1117;
  --gl-reiterstreifen: #0a0c11;
  --gl-flaeche:        #12161d;
  --gl-flaeche-2:      #161b22;
  --gl-blatt:          linear-gradient(180deg, #171c24, #12161d 60%);
  --gl-blatt-hell:     #171c24;
  --gl-karte:          linear-gradient(180deg, #171c24, #13171e);
  --gl-bedienelement:  linear-gradient(180deg, #1f252e, #191e25);
  --gl-app-symbol:     linear-gradient(160deg, #252b34, #191e25);
  --gl-werkbankkopf:   linear-gradient(180deg, #1f2b38, #1a2430);
  --gl-werkbankkopf-schatten: 0 10px 24px -14px rgba(0, 0, 0, .7);

  --gl-haarlinie:      rgba(255, 255, 255, .06);
  --gl-rahmen:         #30363d;
  --gl-ring:           rgba(255, 255, 255, .07);
  --gl-blatt-schatten: inset 0 1px 0 rgba(255, 255, 255, .05),
                       0 0 0 1px rgba(255, 255, 255, .06),
                       0 24px 48px -28px rgba(0, 0, 0, .8);
  --gl-shadow:         0 8px 30px rgba(0, 0, 0, .35);
  --gl-menue-schatten: 0 18px 40px rgba(0, 0, 0, .55);
  /* Der Kasten im Dunkeln. Der Grund dahinter ist der Canvas von
     "Portal Trends.dc.html" (#08090c); der Schatten folgt der Rechnung von
     --gl-blatt-schatten: statt der warmen Toenung ein Lichtsaum als Kante und
     ein tiefschwarzer Wurf. Dieselbe Geometrie wie im Hellen (1 px Kante,
     0 30px 60px -30px). */
  --gl-aussen:         #08090c;
  --gl-kasten-schatten: 0 0 0 1px rgba(255, 255, 255, .07),
                        0 30px 60px -30px rgba(0, 0, 0, .85);

  --gl-text-1:         #e6edf3;
  /* Spiegelbild von --gl-text-1b: im Hellen liegt die Stufe ZWISCHEN
     Fliesstext und zweiter Ebene, also auch hier — nur andersherum, weil die
     Skala im Dunkeln von hell nach dunkel laeuft. */
  --gl-text-1b:        #d8e0e8;
  --gl-text-2:         #c9d1d9;
  --gl-gedaempft:      #8b949e;
  --gl-deaktiviert:    #6e7681;
  --gl-white:          #ffffff;
  --gl-platzhalter:    rgba(255, 255, 255, .38);
  --gl-rahmen-gewaehlt-schatten: 0 6px 20px -4px rgba(0, 0, 0, .7);

  --gl-akzent-schrift: var(--gl-marke-schrift-dunkel, var(--gl-cyan));
  --gl-akzent-flaeche: var(--gl-cyan);
  --gl-akzent-tint:    color-mix(in srgb, var(--gl-cyan) 9%, transparent);
  --gl-akzent-rahmen:  color-mix(in srgb, var(--gl-cyan) 45%, transparent);

  --gl-z-angelegt:     #9fb3c8;
  --gl-z-produktion:   #e3cd7e;
  --gl-z-review:       #eab27a;
  --gl-z-abgenommen:   #c39ad2;
  --gl-z-gesendet:     #93d7a5;

  /* Datenreihen im Dunkeln: dieselben zwoelf Toene, aufgehellt gegen die
     dunkle Karte. Auch hier ist der Grund ein Verlauf; an gemalten Pixeln
     gemessen (02.10.2026) liegt er unter der Zeichnung zwischen #151a21 oben
     und #12161e unten. Gegen den HELLSTEN dieser Toene — #151a21, der
     schlechtere Fall fuer helle Schrift — tragen alle zwoelf 7,12 bis 7,19:1.
     Diese Haelfte war in Ordnung und wurde am 02.10.2026 nicht angefasst.
     Die Abstaende sind GEMEINSAM mit der hellen Fassung gewaehlt worden —
     eine Palette, die nur in einem Theme auseinanderliegt, ist keine.
     Schwaechster Abstand dunkel ΔE 12,2. */
  --gl-reihe-1:        #11b9b6;
  --gl-reihe-2:        #aba59c;
  --gl-reihe-3:        #dd9652;
  --gl-reihe-4:        #b49dc8;
  --gl-reihe-5:        #33bf29;
  --gl-reihe-6:        #73aae1;
  --gl-reihe-7:        #e78d8d;
  --gl-reihe-8:        #b3a926;
  --gl-reihe-9:        #e688b9;
  --gl-reihe-10:       #72b48e;
  --gl-reihe-11:       #c39e90;
  --gl-reihe-12:       #81adbb;
  --gl-z-abgesagt:     #f2857e;
  --gl-z-tint-anteil:  9%;
  --gl-z-rahmen-anteil: 26%;
  --gl-z-etikett-tinte: #0d1117;

  /* ---- Raum Grafiken im Dunkeln -------------------------------
     Dieselben Hues, umgedreht: der Punkt wird aufgehellt (er liegt auf
     dunklem Grund), das Schild wird eine dunkle Toenung derselben Farbe mit
     heller Schrift darauf. Gerechnet statt gepflegt — dieselbe Technik wie
     bei den Produktionszustaenden, damit ein Tonwechsel nicht an sechs
     Stellen von Hand nachgezogen werden muss. */
  --gl-g-bestellt:        #9fb3c8;
  --gl-g-bestellt-tint:   color-mix(in srgb, #9fb3c8 14%, transparent);
  --gl-g-bestellt-schrift:#bdcddd;
  --gl-g-fertig:          #6fc48d;
  --gl-g-fertig-tint:     color-mix(in srgb, #6fc48d 14%, transparent);
  --gl-g-fertig-schrift:  #93d7a5;
  --gl-g-unklar-tint:     color-mix(in srgb, #eab27a 14%, transparent);
  --gl-g-unklar-schrift:  #eab27a;
  --gl-g-nichts-schrift:  #f2857e;
  --gl-g-nichts-tint:     color-mix(in srgb, #f2857e 14%, transparent);
  --gl-g-gepruefte-tint:  color-mix(in srgb, var(--gl-cyan) 12%, transparent);
  --gl-g-ungepruefte-tint:#1b2029;
  --gl-g-kartenfuss:      #141920;

  --gl-schatten-klein:    inset 0 1px 0 rgba(255, 255, 255, .04),
                          0 0 0 1px rgba(255, 255, 255, .06),
                          0 10px 20px -16px rgba(0, 0, 0, .8);
  --gl-schatten-knopf:    0 0 0 1px rgba(255, 255, 255, .10),
                          0 1px 2px rgba(0, 0, 0, .4);

  --gl-zeit-schiene:   #2f3b48;
  --gl-zeit-erledigt:  color-mix(in srgb, var(--gl-z-gesendet) 50%, transparent);

  --gl-success:        #4ADE80;
  --gl-error:          #FF5C5C;
  --gl-warn:           #FFB347;
  --gl-plakette:       #93d7a5;
  --gl-plakette-tinte: #0d1117;
  --gl-hover-helligkeit: 1.08;

  color-scheme: dark;
}

/* Der weiche Uebergang haengt an einer Klasse, die theme.js erst NACH dem
   ersten Anstrich setzt. Ohne das animiert der Seitenaufbau selbst — man
   saehe bei jedem Laden, wie sich die Farben einschleichen. */
html.gl-theme-weich,
html.gl-theme-weich body,
html.gl-theme-weich .gl-blatt,
html.gl-theme-weich .gl-karte,
html.gl-theme-weich .gl-zeile,
html.gl-theme-weich .gl-knopf,
html.gl-theme-weich .gl-feld {
  transition: background-color var(--gl-theme-dauer) ease,
              border-color var(--gl-theme-dauer) ease,
              color var(--gl-theme-dauer) ease;
}
@media (prefers-reduced-motion: reduce) {
  html.gl-theme-weich, html.gl-theme-weich * { transition: none !important; }
}

/* ---- Umschalter Hell/Dunkel (Entwurf 5a) ------------------ */
/* Das Markup baut theme.js; hier steht nur, wie es aussieht. Die Pille
   sitzt rechts in der Kopfzeile nach "Abmelden". */
.gl-themeschalter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-left: 14px;
  border: 0;
  cursor: pointer;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-flaeche-2);
  flex: none;
  align-self: center;
}
/* Die Pille ist seit dem 30.09.2026 EIN Schalter (role="switch"), nicht mehr
   zwei Knoepfe: ein Klick irgendwo darauf kippt ihn. Die beiden Felder sind
   Beschriftung. */
.gl-themeschalter__feld {
  width: 28px;
  height: 24px;
  border-radius: var(--gl-radius-pill);
  background: transparent;
  color: var(--gl-gedaempft);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.gl-themeschalter__feld svg { width: 14px; height: 14px; }
/* Das gewaehlte Feld ist eine kleine aufliegende Flaeche, das Symbol traegt
   den Akzent. Bewusst --gl-akzent-schrift und nicht --gl-cyan: auf dem
   hellen Papier waere reines Cyan nicht zu erkennen. */
/* --gl-bedienelement, NICHT --gl-blatt: im Dunkeln liegt das Blatt (#171c24)
   fast auf der Schiene (#161b22), das gewaehlte Feld waere kaum zu erkennen.
   Das Bedienelement ist die Rolle fuer "aufliegender Knopf" und in beiden
   Themes heller als seine Umgebung. */
.gl-themeschalter[aria-checked="false"] .gl-themeschalter__feld[data-fuer="light"],
.gl-themeschalter[aria-checked="true"]  .gl-themeschalter__feld[data-fuer="dark"] {
  background: var(--gl-bedienelement);
  color: var(--gl-akzent-schrift);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--gl-text-1) 14%, transparent);
}
.gl-themeschalter:focus-visible {
  outline: 2px solid var(--gl-akzent-schrift);
  outline-offset: 1px;
}

/* ---- Reset / Base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  /* dvh nach vh: auf Mobil-Safari schrumpft 100vh nicht mit der ein-/
     ausfahrenden Adressleiste (es meint IMMER das grosse Fenster), 100dvh
     schon. Die vh-Zeile bleibt als Fallback fuer Browser ohne dvh davor. */
  min-height: 100dvh;
  background: var(--gl-bg);
  color: var(--gl-text);
  font-family: var(--gl-font);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--gl-akzent-schrift); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout-Container ----------------------------------- */
.gl-main {
  max-width: var(--gl-maxw);
  margin: 0 auto;
  padding: 48px 24px 100px;
}
.gl-main--narrow { max-width: 760px; }

.gl-section { margin-bottom: 40px; }

/* ---- Header (Logo + Titel + Navigation) ----------------- */
.gl-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  border-bottom: 3px solid var(--gl-cyan-mid);
}

.gl-header__logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

.gl-header__brand { display: flex; flex-direction: column; }

.gl-header__title {
  font-family: var(--gl-font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gl-akzent-schrift);
  line-height: 1.1;
}

.gl-header__sub {
  font-size: 13px;
  color: var(--gl-muted);
  letter-spacing: 0.03em;
}

/* ---- Navigation ----------------------------------------- */
.gl-nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-family: var(--gl-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gl-nav a {
  color: var(--gl-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.gl-nav a:hover { color: var(--gl-akzent-schrift); text-decoration: none; }
.gl-nav a.is-active { color: var(--gl-akzent-schrift); border-bottom-color: var(--gl-akzent-schrift); }

/* ---- Titel / Labels ------------------------------------- */
.gl-page-title {
  font-family: var(--gl-font-head);
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.gl-page-sub { color: var(--gl-muted); font-size: 15px; margin-bottom: 40px; }

/* Gesperrte Versalien: Untergrenze 13 px, nicht 12 (01.10.2026). Sperrung
   und Grossbuchstaben kosten Lesbarkeit, die die Schriftgroesse zurueckgeben
   muss — dieselbe Entscheidung wie bei .tr-etikett im Raum Trends. */
.gl-label {
  font-family: var(--gl-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gl-akzent-schrift);
  margin-bottom: 12px;
}
.gl-label--muted { color: var(--gl-muted); }

/* ---- Buttons -------------------------------------------- */
.gl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--gl-font-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--gl-radius);
  padding: 14px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s, transform 0.1s;
}
.gl-btn:hover { text-decoration: none; }
.gl-btn:active { transform: scale(0.98); }
.gl-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.gl-btn--primary { background: var(--gl-cyan); color: var(--gl-bg); }
.gl-btn--primary:hover { opacity: 0.9; }

.gl-btn--secondary { background: transparent; border-color: var(--gl-border); color: var(--gl-white); }
.gl-btn--secondary:hover { border-color: var(--gl-akzent-schrift); }

.gl-btn--ghost {
  background: transparent;
  border-color: var(--gl-border);
  color: var(--gl-muted);
  font-family: var(--gl-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  padding: 5px 12px;
}
.gl-btn--ghost:hover { color: var(--gl-akzent-schrift); border-color: var(--gl-akzent-schrift); }
.gl-btn--ghost.is-danger:hover { color: var(--gl-error); border-color: var(--gl-error); }

/* ---- Karten --------------------------------------------- */
.gl-card {
  background: var(--gl-card);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  overflow: hidden;
}
.gl-card--link { display: block; transition: border-color 0.2s, background 0.15s; }
.gl-card--link:hover { border-color: var(--gl-akzent-schrift); text-decoration: none; }

/* ---- Formularelemente ----------------------------------- */
.gl-input, .gl-textarea, .gl-select {
  width: 100%;
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  color: var(--gl-white);
  font-family: var(--gl-font);
  font-size: 15px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s;
}
.gl-input:focus, .gl-textarea:focus, .gl-select:focus { border-color: var(--gl-cyan); }
.gl-input::placeholder, .gl-textarea::placeholder { color: var(--gl-platzhalter); }
.gl-textarea { resize: vertical; min-height: 120px; }
/* native Datepicker/Timepicker im Dark-Mode */
.gl-input[type="date"], .gl-input[type="time"] { color-scheme: dark; }

/* ---- Status-Meldungen ----------------------------------- */
.gl-status {
  display: none;
  border-radius: var(--gl-radius);
  padding: 14px 18px;
  font-size: 14px;
}
.gl-status.is-visible { display: block; }
/* Die rgba-Werte waren fest auf das DUNKLE Gruen/Rot/Orange gemuenzt
   (74,222,128 = #4ADE80 usw. — exakt die dark-Token). Im Hellen sind
   Erfolg/Fehler/Warnung andere Toene; color-mix nimmt immer den Ton des
   aktuellen Themes. Umgestellt fuers Light Theme, 27.09.2026. */
.gl-status.is-success { background: color-mix(in srgb, var(--gl-success) 10%, transparent); border: 1px solid var(--gl-success); color: var(--gl-success); }
.gl-status.is-error   { background: color-mix(in srgb, var(--gl-error) 10%, transparent);   border: 1px solid var(--gl-error);   color: var(--gl-error); }
.gl-status.is-warn    { background: color-mix(in srgb, var(--gl-warn) 10%, transparent);    border: 1px solid var(--gl-warn);    color: var(--gl-warn); }

/* ---- Spinner -------------------------------------------- */
.gl-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--gl-cyan-dim);
  border-top-color: var(--gl-akzent-schrift);
  border-radius: 50%;
  animation: gl-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }

/* ---- Footer --------------------------------------------- */
.gl-footer {
  text-align: center;
  font-size: 12px;
  color: var(--gl-faint);
  padding: 24px;
  border-top: 1px solid var(--gl-border-2);
  margin-top: 40px;
}

/* ---- Responsive ----------------------------------------- */
@media (max-width: 640px) {
  .gl-header { padding: 16px 20px; flex-wrap: wrap; }
  /* Der Einzug von 60px setzt die Navigation unter den Markennamen (Logo 44 +
     gap 16). Als margin bei width:100% schob er die Leiste um genau diese 60px
     aus der Seite heraus - jede Portalseite lief auf dem Handy quer. Als
     padding zaehlt er dank border-box in die Breite hinein. */
  .gl-nav { gap: 12px 16px; width: 100%; margin-left: 0; padding-left: 60px;
            flex-wrap: wrap; }
  .gl-page-title { font-size: 32px; }
}

@media (max-width: 430px) {
  /* Auf schmalen Geraeten ist der Einzug den Platz nicht mehr wert. */
  .gl-nav { padding-left: 0; }
}

/* ---- Raeume im lencastr-Look: gemeinsame Bausteine -------------
   Seit dem 11.09.2026 tragen die umgebauten Raeume (Episoden, Trends,
   Zitatkacheln, Reels) die Klasse gl-raum am body. Dann gelten der dunkle
   Grund, die schlanke Kopfzeile und diese Grundbausteine; die Seiten legen
   nur noch ihr eigenes Layout darueber. portal-theme.js setzt Logo und
   .gl-header__title (= Marke) weiter — nur das Kleid ist ein anderes.
   ------------------------------------------------------------------ */
body.gl-raum { background: var(--gl-grund); color: var(--gl-text-1); font-family: var(--gl-font-text); font-size: 15px; line-height: 1.6; }
body.gl-raum a { color: var(--gl-akzent-schrift); }
body.gl-raum a:hover { text-decoration: none; color: var(--gl-text-1); }
body.gl-raum :focus-visible { outline: 2px solid var(--gl-cyan); outline-offset: 2px; }
/* Der Knopf-Reset steht in :where() und hat damit die Spezifitaet NULL.
   Jede Klassenregel schlaegt ihn, ohne dass jemand nachzaehlen muss.
   
   Warum das wichtig ist: ein Reset gehoert unter alles andere, sonst gewinnt
   er gegen genau die Regeln, fuer die er Platz machen soll. In der ersten
   Fassung stand hier `body.gl-raum button` — Spezifitaet (0,0,1,2), und damit
   staerker als JEDE Einzelklasse im Haus. Die Folgen waren unsichtbar und
   ueberall: der Rahmen der Listenkarte war weg (gefunden am 25.09.2026), und
   am selben Abend stellte sich heraus, dass auch kein einziger gefuellter
   Knopf je seine Flaeche hatte — Erstellen, Ablehnen, die Blaetterpfeile, der
   Einplanen-Knopf: alle transparent und ohne Rahmen, auf jeder Raumseite.
   `border: none` setzt dabei border-style auf none, und ein Rahmen ohne Stil
   ist 0 px breit, egal welche Breite spaeter noch kommt.

   Wer hier etwas ergaenzt: in :where() lassen. */
:where(body.gl-raum) :where(button) { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; text-align: left; background: none; border: none; }
body.gl-raum button, body.gl-raum .gl-knopf, body.gl-raum .gl-pille { transition: color .12s, background-color .12s, border-color .12s; }
body.gl-raum .gl-header { padding: 13px 24px; gap: 12px; border-bottom: 1px solid var(--gl-haarlinie); }
body.gl-raum .gl-header__logo { width: 22px; height: 22px; border-radius: 0; }
body.gl-raum .gl-wortmarke { font-family: var(--gl-font-text); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-gedaempft); }
body.gl-raum .gl-header__brand { flex-direction: row; align-items: baseline; gap: 6px; font-size: 13px; color: var(--gl-text-2); }
body.gl-raum .gl-header__title { font-family: var(--gl-font-text); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gl-text-2); line-height: inherit; }
body.gl-raum .gl-header__sub { font-size: 13px; color: var(--gl-text-2); }
body.gl-raum .gl-header__sub:empty { display: none; }
body.gl-raum .gl-nav { gap: 22px; font-family: var(--gl-font-text); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
body.gl-raum .gl-nav a { color: var(--gl-gedaempft); padding-bottom: 3px; border-bottom: 1px solid transparent; }
body.gl-raum .gl-nav a:hover { color: var(--gl-text-1); }
body.gl-raum .gl-nav a.is-active { color: var(--gl-text-1); border-bottom-color: var(--gl-akzent-schrift); }
.gl-mono { font-family: var(--gl-font-mono); }
/* Zeichen fuer Zeichen dieselbe Regel wie .tr-etikett in trends.html, das in
   der Design-Runde vom 30.09.2026 von 10 auf 13 px ging: Lennart ueber die
   alte Fassung — „diese kleine schriftgroesse ist einfach nie gut, egal was."
   Die Sperrung geht mit von .13em auf .1em zurueck (sonst wird die Zeile zu
   lang), und die Farbe von --gl-gedaempft auf --gl-text-2: ein Etikett traegt
   die Ueberschrift seines Kastens und ist keine Fussnote. 01.10.2026. */
.gl-etikett { font-family: var(--gl-font-mono); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gl-text-2); white-space: nowrap; }
.gl-luft { flex: 1; }
/* Kopfzeile eines Raums: Titel Archivo 900/26, Mono-Meta, rechts die Aktion. */
.gl-raum-kopf { padding: 18px 26px; border-bottom: 1px solid var(--gl-haarlinie); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gl-raum-kopf__titel { font-family: var(--gl-font-titel); font-weight: 900; font-size: 26px; letter-spacing: -.026em; line-height: 1.1; }
.gl-raum-kopf__meta { font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-text-2); }
/* Knoepfe: Rahmen (Standard) und gefuellt (die eine Aktion). Links wie Knoepfe. */
.gl-knopf, a.gl-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--gl-rahmen); border-radius: 8px; padding: 6px 13px; font-size: 13px; color: var(--gl-text-2); text-decoration: none; white-space: nowrap; }
.gl-knopf:hover, a.gl-knopf:hover { color: var(--gl-text-1); border-color: var(--gl-gedaempft); text-decoration: none; }
.gl-knopf--voll, a.gl-knopf--voll { display: inline-flex; align-items: center; justify-content: center; background: var(--gl-cyan); color: var(--gl-akzent-tinte); border: 1px solid transparent; border-radius: 9px; padding: 9px 18px; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.gl-knopf--voll:hover, a.gl-knopf--voll:hover { color: var(--gl-akzent-tinte); filter: brightness(var(--gl-hover-helligkeit)); text-decoration: none; }
/* Links als Knoepfe: body.gl-raum a (Cyan) ist spezifischer als a.gl-knopf--voll und
   wuerde den Text auf dem gefuellten Knopf unsichtbar machen — hier ausdruecklich ueberstimmt. */
body.gl-raum a.gl-knopf--voll, body.gl-raum a.gl-knopf--voll:hover { color: var(--gl-akzent-tinte); }
body.gl-raum a.gl-knopf { color: var(--gl-text-2); }
body.gl-raum a.gl-knopf:hover { color: var(--gl-text-1); }
.gl-knopf--gross { padding: 11px 22px; font-size: 15px; }
.gl-knopf:disabled, .gl-knopf--voll:disabled { opacity: .5; cursor: progress; }
.gl-knopf[hidden], .gl-knopf--voll[hidden] { display: none; }
.gl-x { border: 1px solid var(--gl-rahmen); border-radius: 7px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--gl-text-2); font-size: 12px; }
.gl-x:hover { color: var(--gl-text-1); border-color: var(--gl-gedaempft); }
.gl-pille { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gl-rahmen); border-radius: 99px; padding: 5px 13px; color: var(--gl-text-2); font-size: 13px; }
.gl-pille:hover { color: var(--gl-text-1); border-color: var(--gl-gedaempft); }
.gl-pille.is-aktiv { border-color: var(--gl-akzent-rahmen); background: var(--gl-akzent-tint); color: var(--gl-akzent-schrift); }
/* Eingaben im Raum: ruhig, Haarlinie statt Kasten, wo es der Entwurf will. */
.gl-feld { width: 100%; background: transparent; border: 1px solid var(--gl-rahmen); border-radius: 9px; color: var(--gl-text-1); font-family: var(--gl-font-text); font-size: 14px; line-height: 1.55; padding: 12px 14px; outline: none; resize: vertical; }
.gl-feld:focus { border-color: var(--gl-cyan); }
.gl-feld::placeholder { color: var(--gl-gedaempft); }
.gl-termin { display: flex; flex-direction: column; gap: 5px; }
.gl-termin > span { font-size: 12px; color: var(--gl-gedaempft); }
.gl-termin input { background: transparent; border: none; border-bottom: 1px solid var(--gl-rahmen); border-radius: 0; font-family: var(--gl-font-mono); font-size: 17px; color: var(--gl-text-1); padding: 0 0 7px; outline: none; color-scheme: dark; width: 100%; }
.gl-termin input:focus { border-bottom-color: var(--gl-akzent-schrift); }
/* Farbe mit angehoben (01.10.2026): an der Untergrenze 12 px traegt die
   dritte Textebene nicht mehr. Gemessen am GEMALTEN Pixel im Hellen —
   .kg-folge__n 3,83:1, .re-folge__n 4,15:1, .da-folge__meta 4,36:1 gegen den
   Kartengrund. Die reine Farbe #706a5f haelt 4,75:1, aber bei 12 px Mono ist
   kein Buchstabenstamm voll gedeckt: was auf dem Schirm ankommt, ist der
   kantengeglaettete Ton, und der liegt darunter. --gl-text-2 (#5c564d, rein
   6,43:1) haelt die Latte und bleibt sichtbar leichter als --gl-text-1. */
.gl-hinweis { font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-text-2); line-height: 1.55; }
.gl-leer { color: var(--gl-gedaempft); font-size: 14px; padding: 24px; }
/* ---- Ablage am Seitenfuss (Entwurf 30a) ---------------------------------
   Die Leiste, in der die fertigen Kacheln liegen. Steht seit dem 25.09.2026
   hier und nicht mehr im Generator: das Staging zeigt dieselbe Leiste mit
   denselben Miniaturen, und ein Klick darauf waehlt dort denselben Gegenstand
   wie ein Klick in der Liste. Zweimal dasselbe in zwei Dateien waere zweimal
   dasselbe zum Pflegen.
   ------------------------------------------------------------------ */
/* ── Ablage am Seitenfuss ─────────────────────────────────── */
/* Masse aus Entwurf 32a: 12/26 Innenabstand, 16 Luft zwischen den Teilen,
   Miniaturen im Kachelformat 4:5 (nicht quadratisch), und der Knopf steht
   dicht bei den Angaben statt am rechten Rand. */
/* rgba(147,215,165,…) war Gruen aus dem alten Farbcode, wo Gruen noch
   "abgenommen" hiess. Seit 5a/6a heisst Gruen "gesendet/fertig" — genau das
   ist die Ablage. Auf --gl-z-gesendet-* umgestellt, 27.09.2026. */
.gl-ablage { flex: none; border-top: 1px solid var(--gl-z-gesendet-rahmen); background: var(--gl-z-gesendet-tint); padding: 12px 26px; display: flex; align-items: center; gap: 16px; }
.gl-ablage__wort { font-family: var(--gl-font-titel); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gl-z-gesendet); white-space: nowrap; }
.gl-ablage__zahl { font-family: var(--gl-font-mono); font-size: 14px; color: var(--gl-text-1); white-space: nowrap; }
/* 10 px Luft statt 6: die gewaehlte Miniatur waechst um 10 % und wuerde ihre
   Nachbarin sonst anschneiden. 3 px Polsterung oben, damit der Schatten der
   gewaehlten nicht am Rand der Leiste abgeschnitten wird. */
.gl-ablage__bilder { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding: 3px 0 5px; }
.gl-ablage__bild { width: 34px; height: 42px; padding: 0; border-radius: 5px; border: 1px solid var(--gl-akzent-rahmen); flex: none; overflow: hidden; background: var(--gl-flaeche); cursor: pointer; }
.gl-ablage__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-ablage__bild:hover { border-color: var(--gl-text-1); }
/* Die gewaehlte Miniatur: 4 px in --gl-rahmen-gewaehlt — dieselbe Aenderung
   wie bei .kg-vorlage.is-aktiv (site/kacheln/index.html), und aus demselben
   Anlass (Lennart, 29.09.2026). Das Token steht oben bei den Akzentfarben,
   mit der Begruendung. */
/* Der weisse Ring mit dem Schatten dahinter, siehe den Kommentar bei
   --gl-rahmen-gewaehlt-schatten. Hier 4 px und nicht 6 wie bei den
   Vorlagenminiaturen: dieses Bild ist nur 34 x 42 px gross, ein 6-px-Ring
   liesse davon 22 x 30 uebrig. */
.gl-ablage__bild { transition: transform .12s ease; }
.gl-ablage__bild.is-gewaehlt { border-color: var(--gl-rahmen-gewaehlt); border-width: 4px; box-shadow: var(--gl-rahmen-gewaehlt-schatten); transform: scale(1.10); position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gl-ablage__bild { transition: none; } }
.gl-ablage__leer { width: 34px; height: 42px; border-radius: 5px; border: 1px dashed var(--gl-rahmen); flex: none; }
/* Die Aktion am Ende der Ablage. Sie stand bis zum 29.09.2026 auf
   `background: var(--gl-text-1)` — im Dunkeln ist das fast weiss und traegt
   dunkle Schrift, im Hellen ist es fast schwarz und traegt dieselbe dunkle
   Schrift. Der Knopf war dort also unlesbar (gemeldet am 29.09.2026, Bild aus
   dem Zitate-Raum). Dieselbe Falle wie bei der Plakette am 27.09.: eine Rolle
   als FLAECHE benutzt, die als SCHRIFT gedacht ist.
   Jetzt dieselbe Fuellung wie `.gl-knopf--voll` (der Mixpost-Knopf), und das
   ist keine Notloesung, sondern die richtige Auskunft: es ist derselbe
   Handgriff — etwas Fertiges weitergeben. */
.gl-ablage__knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--gl-cyan); color: var(--gl-akzent-tinte); border: 1px solid transparent; border-radius: 9px; padding: 10px 18px; font-weight: 600; font-size: 14px; white-space: nowrap; margin-left: 10px; }
.gl-ablage__knopf:hover { filter: brightness(var(--gl-hover-helligkeit)); }
/* cursor: default, nicht progress: ein leerer Knopf wartet auf nichts. */
.gl-ablage__knopf:disabled { opacity: .45; cursor: default; filter: none; }
/* Die ruhige Zweitfassung: "alle herunterladen" steht neben "einplanen",
   aber es ist nicht der Weg, den wir empfehlen — also Rahmen statt Flaeche.
   Zwei gleich laute Knoepfe nebeneinander lassen den Bediener raten, welcher
   der richtige ist. */
.gl-ablage__knopf--stiller { background: var(--gl-flaeche); color: var(--gl-text-1); border-color: var(--gl-rahmen); margin-left: 0; }
.gl-ablage__knopf--stiller:hover { border-color: var(--gl-text-1); filter: none; }
@media (max-width: 899px) {
  .gl-ablage { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  /* Die Bestandszahl darf am Telefon umbrechen. Mit `white-space: nowrap`
     wurde sie bei einer vollen Folge 395 px breit ("29 / 29 erstellt · 29
     offen") und schob die ganze Seite 21 px quer — samt der Raumleiste, die
     dadurch 46 px unter den unteren Rand rutschte. Gemessen am 30.09.2026 bei
     390 px; vorher ist es niemandem aufgefallen, weil die Mobilprobe den
     Generator nur OHNE Folge geoeffnet hat und die Ablage dort leer war. */
  .gl-ablage__zahl { white-space: normal; font-size: 13px; }
}

/* ---- Werkbank-Grammatik der Social-Raeume (Entwurf 31d, 25.09.2026) ----
   Kachelgenerator, Staging Zitatkacheln und Staging Reels sind dieselbe
   Werkbank: oben die Schrittleiste 1 · 2 · 3, rechts dieselben Schritte als
   nummerierte Ueberschriften, in der Mitte der Beitrag so, wie er spaeter im
   Feed steht. Lennart hielt die beiden Staging-Seiten fuer eine einzige —
   genau so sollen sie sich anfuehlen. Deshalb steht das hier und nicht
   dreimal in drei Dateien.
   ------------------------------------------------------------------ */

/* ── Schrittleiste ueber der Arbeitsflaeche ───────────────── */
.gl-schritte { display: flex; align-items: center; gap: 14px; padding: 12px 26px; border-bottom: 1px solid var(--gl-haarlinie); background: var(--gl-reiterstreifen); flex: none; }
/* Eine Klassenregel mit display schlaegt das display:none des Browsers fuer
   [hidden] — ohne diese Zeile stuende die leere Leiste als dunkler Streifen
   auf jeder Seite ohne gewaehlten Gegenstand. */
.gl-schritte[hidden] { display: none; }
.gl-schritt { display: flex; align-items: center; gap: 10px; }
.gl-schritt__n { width: 24px; height: 24px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--gl-font-mono); font-size: 12px; border: 1px solid var(--gl-rahmen); color: var(--gl-gedaempft); flex: none; }
.gl-schritt__wort { font-family: var(--gl-font-titel); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gl-gedaempft); white-space: nowrap; }
.gl-schritt.is-fertig .gl-schritt__n { border-color: var(--gl-z-gesendet); color: var(--gl-z-gesendet); }
.gl-schritt.is-fertig .gl-schritt__wort { color: var(--gl-z-gesendet); }
.gl-schritt.is-jetzt .gl-schritt__n { background: var(--gl-cyan); border-color: transparent; color: var(--gl-akzent-tinte); }
.gl-schritt.is-jetzt .gl-schritt__wort { color: var(--gl-text-1); }
.gl-schritte__strich { flex: 1; max-width: 60px; height: 1px; background: var(--gl-rahmen); }
.gl-schritte__strich.is-fertig { background: var(--gl-z-gesendet); }

/* ── Dieselben Schritte als Ueberschrift in der rechten Spalte ── */
.gl-stufe { display: flex; align-items: center; gap: 10px; }
.gl-stufe__n { width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--gl-font-mono); font-size: 12.5px; border: 1px solid var(--gl-rahmen); color: var(--gl-text-2); flex: none; }
.gl-stufe__wort { font-family: var(--gl-font-titel); font-weight: 800; font-size: 20px; letter-spacing: -.015em; color: var(--gl-text-1); }
.gl-stufe.is-fertig .gl-stufe__n { border-color: var(--gl-z-gesendet); color: var(--gl-z-gesendet); }
.gl-stufe.is-jetzt .gl-stufe__n { background: var(--gl-cyan); border-color: transparent; color: var(--gl-akzent-tinte); }

/* ── "So erscheint der Post": der Beitrag im Feed-Rahmen ──── */
/* #0b0e14 war der feste dunkle Grund — im Hellen zeigte die Vorschau damit
   einen schwarzen Kasten mitten auf dem Papier. --gl-grund traegt dieselbe
   Rolle je Theme mit, 27.09.2026. */
.gl-post { width: 300px; max-width: 100%; border: 1px solid var(--gl-haarlinie); border-radius: 14px; overflow: hidden; background: var(--gl-grund); display: flex; flex-direction: column; }
.gl-post__kopf { display: flex; align-items: center; gap: 9px; padding: 10px 12px; min-width: 0; }
.gl-post__logo { width: 30px; height: 30px; border-radius: 99px; object-fit: cover; border: 1px solid var(--gl-rahmen); flex: none; background: var(--gl-flaeche); }
.gl-post__konto { font-size: 13.5px; font-weight: 600; color: var(--gl-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-post__mehr { margin-left: auto; color: var(--gl-text-2); font-size: 16px; letter-spacing: .1em; line-height: 1; flex: none; }
/* Platzhalter, bevor Bild/Video geladen ist. Reines Schwarz war im Hellen
   ein Loch im Papier; --gl-flaeche-2 ist dieselbe gedaempfte Flaeche wie
   sonst im Portal, 27.09.2026. */
.gl-post__medium { position: relative; overflow: hidden; background: var(--gl-flaeche-2); }
.gl-post__medium img, .gl-post__medium video { width: 100%; height: auto; display: block; }
.gl-post__aktionen { display: flex; align-items: center; gap: 14px; padding: 10px 12px 12px; color: var(--gl-text-1); }
/* Mehrbild-Post (32b): Zaehler im Kopf, Punkte unter dem Bild — wie im Feed. */
/* rgba(13,17,23,.8) war --gl-grund fest in Dunkel, egal welches Theme lief.
   color-mix haengt die Toenung an den jeweils aktuellen Grund, 27.09.2026. */
.gl-post__zaehler { margin-left: auto; background: color-mix(in srgb, var(--gl-grund) 80%, transparent); border: 1px solid var(--gl-rahmen); border-radius: 99px; padding: 2px 9px; font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-text-1); flex: none; }
.gl-post__punkte { display: flex; justify-content: center; gap: 5px; padding: 9px 0 2px; }
.gl-post__punkt { width: 6px; height: 6px; border-radius: 99px; background: var(--gl-rahmen); border: none; padding: 0; flex: none; }
.gl-post__punkt.is-jetzt { background: var(--gl-cyan); }
.gl-post__aktionen svg { flex: none; }

/* ── Text im Stil des Posts, direkt anklickbar ─────────────
   Kein beschriftetes Formularfeld: was auf Instagram steht, wird dort
   bearbeitet, wo es spaeter steht. Die Cyan-Marke ueber bzw. unter dem Feld
   traegt Namen und Zaehler. Waehrend des Tippens bleibt der Text roh —
   Hashtags faerbt erst das Verlassen des Feldes ein, sonst springt bei jedem
   Neuzeichnen die Schreibmarke ans Ende. */
/* Der Rahmen steht nicht dauernd da, sondern nur, wenn wirklich in dem Feld
   geschrieben wird. Zwei gleichzeitig umrandete Felder lasen sich wie zwei
   Formularkaesten — genau das, was der Entwurf hier NICHT will. Die
   Cyan-Marke mit Name und Zaehler bleibt und sagt schon, dass hier Text
   steht, der bearbeitet wird. Gemeldet am 26.09.2026.
   Die Breite: buendig mit dem Terminfeld darunter (400 px). Ueber die volle
   Spalte gezogen liefen die Zeilen zu lang zum Lesen und in der schmalen
   Ansicht sogar aus dem Bild. */
.gl-posttext { position: relative; width: 100%; max-width: 400px; box-sizing: border-box; outline: 1px solid transparent; outline-offset: 4px; border-radius: 2px; transition: outline-color .12s; }
.gl-posttext:hover { outline-color: var(--gl-akzent-rahmen); }
/* Reines Cyan, nicht die abgedunkelte Schriftfarbe: das ist der Ring um das
   Textfeld, den der Handoff ausdruecklich als Cyan-Fokusring nennt, und er
   steht nie allein — das Feld ist dabei weiss und der Text dunkel. */
.gl-posttext:focus-within { outline-color: var(--gl-cyan); }
/* 9,5 px war die kleinste Schrift im ganzen Portal. 13 px, weil gesperrte
   Versalien — und weil die Marke dadurch hoeher baut, wandern die beiden
   Abstaende mit: 9,5 px Mono bauen rund 12 px, 13 px bauen rund 16 px.
   Ohne das Mitwandern saesse die Marke auf dem Rand des Textfelds. */
.gl-posttext__marke { position: absolute; left: 0; font-family: var(--gl-font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gl-akzent-schrift); white-space: nowrap; }
.gl-posttext--oben .gl-posttext__marke { top: -25px; }
.gl-posttext--unten .gl-posttext__marke { bottom: -26px; }
.gl-posttext__feld { outline: none; min-height: 1.25em; overflow-wrap: anywhere; }
.gl-posttext__feld:empty::before { content: attr(data-leer); color: var(--gl-gedaempft); }
/* #fff ging von der frueher immer dunklen Post-Karte aus. Die Karte
   traegt jetzt --gl-grund je Theme, der Titel zieht mit --gl-text-1 nach,
   27.09.2026. */
.gl-posttext--titel .gl-posttext__feld { font-family: var(--gl-font-titel); font-weight: 800; font-size: 16px; line-height: 1.25; color: var(--gl-text-1); }
.gl-posttext--text .gl-posttext__feld { font-size: 13.5px; line-height: 1.5; color: var(--gl-text-1); white-space: pre-wrap; }
.gl-posttext__feld .gl-tag { color: var(--gl-akzent-schrift); }
.gl-posttext.is-voll { outline-color: var(--gl-z-abgesagt); }
.gl-posttext.is-voll .gl-posttext__marke { color: var(--gl-z-abgesagt); }

/* ── Termin: Datum und Uhrzeit in einem Feld ───────────────
   Ein Rahmen, eine Trennlinie, zwei Werte in Mono. Die Wochentagsmarke steht
   vor dem Datum, weil das Eingabefeld sie von sich aus nicht zeigt — und
   "Fr" ist beim Planen die halbe Information. */
/* 32a: hoechstens 400 px breit und in einer Zeile — auf einem breiten Schirm
   zog das Feld sonst ueber die halbe Spalte, und Datum und Uhrzeit standen
   weit auseinander. */
.gl-terminfeld { display: grid; grid-template-columns: 1.5fr 1fr; width: 100%; max-width: 400px; white-space: nowrap; box-sizing: border-box; border: 1px solid var(--gl-rahmen); border-radius: 10px; overflow: hidden; }
.gl-terminfeld:focus-within { border-color: var(--gl-cyan); }
.gl-terminfeld label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0; cursor: text; }
.gl-terminfeld label + label { border-left: 1px solid var(--gl-rahmen); }
.gl-terminfeld svg { flex: none; color: var(--gl-akzent-schrift); }
.gl-terminfeld input { flex: 1; min-width: 0; background: transparent; border: none; border-radius: 0; padding: 0; font-family: var(--gl-font-mono); font-size: 16px; color: var(--gl-text-1); outline: none; color-scheme: dark; }
.gl-terminfeld__tag { font-family: var(--gl-font-mono); font-size: 16px; color: var(--gl-text-1); flex: none; }

/* ── Schritt 3: Termin, darunter der eine gefuellte Knopf ──
   Beide linksbuendig, 12 px Luft dazwischen, und der Knopf nur so breit wie
   sein Text (Entwurf 32a). Ueber die volle Spalte gezogen sah er auf einem
   breiten Schirm aus wie eine Werkzeugleiste. */
.gl-planen { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
/* align-self statt align-items am Block: sonst schrumpft auch der
   Zwischenbehaelter mit, und ein width:100% auf dem Telefon rechnet sich
   gegen seine eigene Textbreite — der Knopf blieb dort 219 px schmal. */
.gl-planen .gl-knopf--voll { align-self: flex-start; padding: 13px 22px; border-radius: 10px; font-size: 15px; gap: 9px; white-space: nowrap; }

/* ── Steuerleiste unter dem Beitrag ────────────────────────
   Dieselbe Form wie im Generator: Pfeile aussen, die Aktion in der Mitte.
   Blaettern gehoert dorthin, wo der Gegenstand steht — nicht nur in die
   Liste links. Die Leiste ist so breit wie der Beitrag darueber. */
.gl-steuer { display: grid; grid-template-columns: 46px 1fr 46px; column-gap: 8px; align-items: stretch; width: 300px; max-width: 100%; }
.gl-steuer button, .gl-steuer a { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; font-size: 14px; }
.gl-steuer__pfeil { border: 1px solid var(--gl-rahmen); color: var(--gl-text-2); font-size: 17px; min-height: 44px; }
.gl-steuer__pfeil:hover:not(:disabled) { color: var(--gl-text-1); border-color: var(--gl-gedaempft); }
.gl-steuer__pfeil:disabled { color: var(--gl-deaktiviert); cursor: default; }
/* Entwurf 32a: die Aktion in der Mitte ist ein UMRISSknopf im Akzent, kein
   gefuellter. Gefuellt gibt es je Gegenstand genau einen, und das ist
   "In Mixpost einplanen". Die 12 px Luft nach aussen halten die Pfeile frei. */
.gl-steuer__aktion { margin: 0 12px; border: 1px solid var(--gl-akzent-rahmen); color: var(--gl-akzent-schrift); border-radius: 9px; padding: 12px 10px; font-weight: 600; font-size: 14px; background: transparent; }
.gl-steuer__aktion:hover { background: var(--gl-akzent-tint); }
/* Ohne Aktion in der Mitte (Reels) stehen die beiden Pfeile als Paar
   beieinander — zwei einsame Knoepfe an den Raendern sahen nach Luecke aus. */
.gl-steuer--leer { grid-template-columns: 46px 46px; justify-content: center; column-gap: 12px; }

@media (max-width: 899px) {
  /* Auf dem Telefon nimmt die eine Aktion die ganze Breite — dort ist sie das
     Ende des Weges und kein Knopf unter vielen. */
  .gl-planen .gl-knopf--voll { align-self: stretch; min-height: 48px; }
  .gl-terminfeld { max-width: none; }
  .gl-steuer { width: 100%; }
  .gl-schritte { padding: 10px 16px; gap: 8px; overflow-x: auto; }
  .gl-schritte__strich { display: none; }
  .gl-post { width: 100%; }
  /* Auf 390 px ist die Uhrzeit-Spalte knapp: weniger Luft am Rand, und die
     beiden Haelften gleich breit. Unter 16 px zoomt iOS beim Antippen. */
  .gl-terminfeld { grid-template-columns: 1fr 1fr; }
  .gl-terminfeld label { padding: 12px 10px; gap: 8px; }
  .gl-terminfeld input { font-size: 16px; }
}

/* ---- Listenregel: ruhige Karten in einem eigenen Rollbereich -----------
   Seit dem 25.09.2026 (Handoff README.md, Abschnitt "Listenregel") sehen ALLE
   Listen links in den Werkbaenken gleich aus — Episoden, Zitatkacheln, Reels,
   Themenfelder, mobil wie am Schreibtisch. Vorher hatte jede Seite ihre eigene
   Zeile an einer Haarlinie; die Rundungen und Abstaende sind dabei
   auseinandergelaufen.

   Zwei Dinge macht dieser Baustein, die eine Zeilenliste nicht kann:

   1. Jede Karte steht fuer sich (Radius 12, eigener Rahmen, eigene Flaeche).
      Die Auswahl ist ein 2px-Rahmen in der Zustands- bzw. Akzentfarbe; das
      Padding geht dafuer um 1px zurueck, damit die Karte nicht springt.
   2. Die Liste rollt UNABHAENGIG von der Werkbank. Dafuer braucht sie eine
      begruenzte Hoehe — .gl-kartenliste ist ein Flex-Container mit
      min-height:0, der Rollbereich darin bekommt flex:1 und overflow-y:auto.
      Ohne das min-height:0 waechst ein Flex-Kind ueber seinen Inhalt hinaus
      und rollt nie, egal was am overflow steht.

   Der Fuss bleibt unten stehen, darueber blendet ein Verlauf die letzte Karte
   aus — sonst sieht eine volle Liste am unteren Rand abgeschnitten aus wie
   eine leere.
   ------------------------------------------------------------------ */
.gl-kartenliste { display: flex; flex-direction: column; min-height: 0; position: relative; }
.gl-kartenliste__rollen {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--gl-rahmen) transparent;
  padding-bottom: 10px;
}
/* WebKit kennt scrollbar-width nicht; ohne diese drei Regeln ist die Leiste
   dort breit und hell und macht die schmale Spalte unruhig. */
.gl-kartenliste__rollen::-webkit-scrollbar { width: 8px; }
.gl-kartenliste__rollen::-webkit-scrollbar-thumb { background: var(--gl-rahmen); border-radius: 99px; }
.gl-kartenliste__rollen::-webkit-scrollbar-track { background: transparent; }
/* Verlauf ueber dem Fuss. pointer-events:none, sonst schluckt er Klicks auf
   die letzte Karte. Sitzt im Fluss ueber dem Fuss, nicht absolut — so muss
   niemand die Fusshoehe doppelt pflegen. */
/* margin-top, NICHT margin-bottom: der Verlauf soll ueber den letzten Pixeln
   der Liste liegen, nicht ueber dem Fuss. Mit margin-bottom rutschte der Fuss
   unter den Verlauf und sah aus, als waere er durchgestrichen. */
.gl-kartenliste__verlauf {
  height: 32px; margin-top: -32px; position: relative; z-index: 2; pointer-events: none;
  /* rgba(13,17,23,0) war die dunkle Grundfarbe, nur eben durchsichtig
     gemacht — im Hellen blieb die dunkle Farbe drin sichtbar (Alpha 0 aendert
     die Farbe selbst nicht) und legte einen grauen Schleier auf das Papier.
     color-mix mischt den durchsichtigen Endpunkt aus dem AKTUELLEN Grund,
     interpoliert also im selben Farbraum wie das Ziel und faerbt nicht
     durch Schwarz durch. 27.09.2026. */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--gl-grund) 0%, transparent), var(--gl-grund));
}
.gl-kartenliste__fuss {
  flex: none; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 18px; border-top: 1px solid var(--gl-haarlinie); background: var(--gl-grund);
  font-size: 13.5px; color: var(--gl-text-2); text-align: left;
}
.gl-kartenliste__fuss > span:first-child { border-bottom: 1px dotted var(--gl-rahmen); }
.gl-kartenliste__fuss:hover > span:first-child { color: var(--gl-text-1); }

/* Gruppenkopf (Gast, "In Arbeit"): freie Ueberschrift, kein Balken. */
.gl-gruppe { padding: 18px 18px 10px; display: flex; align-items: center; gap: 12px; }
.gl-gruppe__name { font-family: var(--gl-font-titel); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--gl-text-2); }
.gl-gruppe.is-aktiv .gl-gruppe__name { color: var(--gl-text-1); }
.gl-gruppe__meta { font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-text-2); }

/* Die Karte selbst. --z / --z-tint / --z-rahmen setzt die Seite je Eintrag,
   wenn er eine Zustandsfarbe hat; --z-wahl ist die Farbe des Auswahlrahmens
   (bei gesendeten Folgen Weiss, weil abgeschlossen — Terminart "Sendung").
   Ohne diese Variablen faellt alles auf Flaeche, Haarlinie und Akzent. */
.gl-karte {
  display: block; width: calc(100% - 28px); margin: 0 14px 8px; text-align: left;
  padding: 13px 15px; border: 1px solid var(--z-rahmen, var(--gl-haarlinie)); border-radius: 12px;
  background: var(--z-tint, var(--gl-flaeche)); color: var(--gl-text-1);
}
.gl-karte:hover { border-color: var(--z-wahl, var(--z, var(--gl-rahmen))); }
/* Erledigt/eingeplant: gruene Toenung wie in den Staging-Listen. Steht VOR
   der Auswahl — beide haben dieselbe Spezifitaet, und die spaetere Regel
   gewinnt. Andersherum uebermalte der Zustand die Auswahl: eine erstellte
   Kachel sah gewaehlt genauso aus wie ungewaehlt, nur ein Hauch heller
   (gemeldet am 25.09.2026). Der Zustand sagt, wie es um den Eintrag steht;
   die Auswahl sagt, welcher gerade bearbeitet wird — und das ist die
   dringendere Auskunft. */
/* Dieselbe alte Gruen-Verwechslung wie bei .gl-ablage: "fertig" heisst
   gesendet, nicht abgenommen. Auf --gl-z-gesendet-* umgestellt, 27.09.2026. */
.gl-karte.is-fertig { background: var(--gl-z-gesendet-tint); border-color: var(--gl-z-gesendet-rahmen); }
/* Gewaehlt: 2px in der Akzent- bzw. Zustandsfarbe, Flaeche leicht getoent
   (Entwurf 30a: border 2px #22dfe0 auf rgba(34,223,224,.1)). Das Padding geht
   um 1px zurueck, damit die Karte beim Auswaehlen nicht springt. */
.gl-karte.is-gewaehlt {
  border-width: 2px; padding: 12px 14px;
  border-color: var(--z-wahl, var(--z, var(--gl-cyan)));
  background: var(--z-tint, var(--gl-akzent-tint));
}
/* Gestrichelte Plus-Karte am Gruppenende. */
.gl-karte--plus {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  border: 1px dashed var(--gl-rahmen); background: transparent; font-size: 12.5px; color: var(--gl-gedaempft);
}
.gl-karte--plus:hover { color: var(--gl-text-1); border-color: var(--gl-gedaempft); }
.gl-karte--plus i { width: 22px; height: 22px; border: 1px solid var(--gl-rahmen); border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; flex: none; }

/* Zustaende der Listen: offen (warm) und erledigt (gruen, Haekchen + Termin). */
.gl-zeile--gewaehlt { background: var(--gl-akzent-tint); border-bottom-color: var(--gl-akzent-rahmen) !important; }
/* s.o. (.gl-karte.is-fertig): gesendet-Gruen statt der alten
   abgenommen-Verwechslung. 27.09.2026. */
.gl-zeile--fertig { background: var(--gl-z-gesendet-tint); border-top: 1px solid var(--gl-z-gesendet-rahmen); }
.gl-status--offen { color: var(--gl-z-review); }
.gl-status--fertig { color: var(--gl-z-gesendet); }
.gl-status--akzent { color: var(--gl-akzent-schrift); }
/* Abgelehnt/verworfen — die Gegenfarbe zu --fertig. */
.gl-status--nein { color: var(--gl-z-abgesagt); }
@media (max-width: 640px) {
  body.gl-raum .gl-header { flex-wrap: wrap; }
  .gl-raum-kopf { padding: 14px 16px; }
}

/* ---- Kopfzeile mit Raumleiste (Entwuerfe 26a Schreibtisch, 25a Telefon) --
   Seit 11.09.2026 tragen alle Raeume dieselbe Kopfzeile: links Logo + PORTAL,
   daneben die vier Raeume mit Symbol, Versalie und Zaehler (raumleiste.js),
   rechts hinter einer Haarlinie Podcastname, Kennung und Abmelden. Unter
   900 px wandert die Raumleiste als feste Leiste an den unteren Rand, der
   rechte Block faellt weg (Podcastname neben die Marke, Abmelden ins Menue
   hinter der Marke), und rechts steht die raumeigene Aktion (Neu, Suchen).
   ------------------------------------------------------------------ */
/* 56 px, nicht 52: die drei Light-Entwuerfe zeigen die Kopfzeile alle mit
   `height:56px`. */
body.gl-raum .gl-header { display: flex; align-items: stretch; gap: 0; padding: 0; min-height: 56px; border-bottom: 1px solid var(--gl-haarlinie); position: relative; }
body.gl-raum .gl-marke { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-right: 1px solid var(--gl-haarlinie); cursor: pointer; }
body.gl-raum .gl-marke .gl-header__logo { width: 22px; height: 22px; }
body.gl-raum .gl-marke__name { display: none; font-size: 12.5px; color: var(--gl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gl-raum .gl-raeume { margin: 0; display: flex; align-items: stretch; gap: 0; }
/* Der aktive Reiter ist ein INNENLIEGENDER Schatten, kein Rahmen — so steht
   es in allen drei Light-Entwuerfen (`box-shadow: inset 0 -2px 0 #16E1DE`).
   Ein `border-bottom` veraendert die Kastenhoehe und musste mit
   `margin-bottom:-1px` gegen die Haarlinie der Kopfzeile geschoben werden;
   der Schatten liegt einfach darauf. Schrift: Instrument Sans 700 / 13.5 px /
   .08em, nicht Newsreader — die Bedienung laeuft im ganzen Entwurf auf der
   Textschrift. */
/* `border-bottom: none` ist kein Ueberbleibsel: die Leiste traegt auch die
   Klasse gl-nav, und `body.gl-raum .gl-nav a` (weiter oben) gibt jedem Link
   dort eine 1-px-Haarlinie. Ohne diese Zeile blieb sie stehen — unsichtbar,
   aber 1 px hoch, und der Entwurf kennt am Reiter keinen Rahmen. */
/* Der stille Raumreiter steht in 5a wie in 61a auf #4a453e — das ist
   --gl-text-1b, nicht --gl-text-2 (#5c564d). Nachgezogen am 02.10.2026 beim
   Messen des Grafiken-Raums gegen seinen Entwurf; eine Stufe dunkler, in
   allen fuenf Raeumen gleich, und gegen das Papier 8,6:1 statt 6,4:1. */
body.gl-raum .gl-raeume a { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: none; font-family: var(--gl-font-text); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-text-1b); text-decoration: none; white-space: nowrap; }
body.gl-raum .gl-raeume a svg { width: 17px; height: 17px; color: var(--gl-gedaempft); flex: none; }
body.gl-raum .gl-raeume a:hover { color: var(--gl-text-1); }
body.gl-raum .gl-raeume a:hover svg { color: var(--gl-text-1); }
body.gl-raum .gl-raeume a.is-active, body.gl-raum .gl-raeume a.is-active svg { color: var(--gl-akzent-schrift); }
body.gl-raum .gl-raeume a.is-active { box-shadow: inset 0 -2px 0 var(--gl-cyan); }
body.gl-raum .gl-raeume__n { font-family: var(--gl-font-text); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--gl-gedaempft); }
body.gl-raum .gl-raeume__n:empty { display: none; }
body.gl-raum .gl-raeume__n.is-warm { color: var(--gl-z-review); }
body.gl-raum .gl-raeume__n.is-akzent { color: var(--gl-akzent-schrift); }
body.gl-raum .gl-header__aktion { display: none; }
body.gl-raum .gl-header__brand { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 0 24px; border-left: 1px solid var(--gl-haarlinie); font-size: 13.5px; color: var(--gl-text-2); }
body.gl-raum .gl-header__strich { width: 1px; height: 15px; background: var(--gl-rahmen); flex: none; }

/* ---- Die Kopfzeile bei schmalem Fenster (Reparatur 02.10.2026) ----------
   GEMESSEN bei 1024 px Fensterbreite, angemeldet, alle fuenf Raeume: Marke
   131 + Raumleiste 675 + rechter Block 263 = 1069 px. Der Kasten traegt
   `overflow: clip` (die runden Ecken), also gab es KEINEN Rollbalken —
   `scrollWidth - clientWidth` war 0. Der Themeschalter endete bei 1045 und
   war damit unerreichbar. Wer im Dunkelmodus steckte, kam auf halbiertem
   Bildschirm oder iPad quer nicht mehr heraus. Bei genau 900 px, wo die
   Mobilansicht noch nicht greift, fehlten 145 px.

   Zwei Dinge, nicht eins — weil der Grund ein wachsender ist:

   1. DIE RAUMLEISTE GIBT NACH. Sie war ein Flex-Kind mit `min-width: auto`
      und konnte deshalb nicht schmaler werden als ihr Inhalt; was nicht
      passte, wurde abgeschnitten. Jetzt schrumpft sie und rollt ihren
      Ueberschuss selbst.

      WAS DABEI WIRKLICH TRAEGT, steht hier zweimal — und bis zum 02.10.2026
      stand die falsche Haelfte als Erklaerung da. `min-width: 0` UND
      `overflow-x: auto` koennen die Zusage jedes fuer sich halten: eine
      Mindestbreite 0 erlaubt das Schrumpfen ausdruecklich, und ein
      Scroll-Container hat ohnehin die automatische Mindestgroesse 0. Also
      deckt jedes den Ausfall des anderen.
      Nachgemessen am 02.10.2026 (Raum Grafiken, 900 px, fuenf Raeume;
      Inhalt der Leiste 675 px, Platz 599 px — sie rollt dort schon heute):

        wie gebaut                     Leiste 599 px, Themeschalter im Bild
        ohne `min-width: 0`            Leiste 599 px   (kein Pixel Unterschied)
        ohne das `overflow`            Leiste 599 px   (kein Pixel Unterschied)
        ohne BEIDES                    Leiste 675 px, der rechte Block
                                       beginnt bei 864 px — der Schalter
                                       rutscht aus der Kopfzeile
        ohne beides, acht Raeume       Leiste 1235 px, rechter Block bei
                                       1424 px — der Kopf kippt vollstaendig

      Wer hier aufraeumt, darf also nicht an einer Zeile messen: einzeln sieht
      jede ueberfluessig aus. Dass sie sich decken, ist in Ordnung — aber ein
      Riegel, der heute von einem zweiten gedeckt wird, ist morgen der
      einzige.

      Marke und rechter Block stehen auf `flex: none` — sie geben NICHT nach,
      denn in ihnen steckt der Themeschalter. Damit kann kein sechster,
      siebter oder achter Raum den Schalter mehr hinausschieben: er schiebt
      dann in die Rolle der Leiste, nicht aus der Kopfzeile hinaus. Der
      Rollbalken selbst bleibt unsichtbar (in einer 56-px-Leiste frisst er die
      Beschriftung); erreichbar bleibt alles trotzdem, weil der Tabulator
      jeden Raumlink von sich aus ins Bild rollt.
   2. DER RECHTE BLOCK GIBT SEINEN TEXT HER, solange das Fenster schmal ist
      (die Regel darunter, 900–1199 px). „Redaktionsportal" und die Unterzeile
      sind Auskunft, der Themeschalter ist Bedienung. Dieselbe Entscheidung
      trifft die Mobilansicht unter 900 px schon; hier gilt sie eine Stufe
      frueher. Sie ist der Grund, warum bei 900 px ueberhaupt 599 px fuer die
      Leiste uebrig sind.
   Nachgemessen in mobil.js, Abschnitt „Kopfzeile bei 1024 px". */
@media (min-width: 900px) {
  body.gl-raum .gl-marke { flex: none; }
  body.gl-raum .gl-header__brand { flex: none; }
  body.gl-raum .gl-raeume {
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.gl-raum .gl-raeume::-webkit-scrollbar { width: 0; height: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  body.gl-raum .gl-header__brand > :not(.gl-themeschalter) { display: none; }
  body.gl-raum .gl-header__brand { padding: 0 16px; }
  /* Der Arbeitsbereich darf dabei nicht verschwinden: wer in drei Bereichen
     arbeitet (geladen, bamtalk, servus-ki), muss sehen, in welchem er steht.
     `.gl-marke__name` traegt denselben Namen wie `.gl-header__title`
     (raumleiste.js) und wandert hier neben die Marke — genauso, wie es die
     Mobilansicht unter 900 px schon macht. `max-width` ist kein Schmuck: die
     Marke steht auf `flex: none`, ein langer Bereichsname wuerde die
     Raumleiste sonst unbegrenzt zusammendruecken. */
  body.gl-raum .gl-marke__name { display: block; max-width: 140px; }
}
/* Menue hinter der Marke */
/* box-shadow gab es als Token schon (--gl-menue-schatten, warm getoent im
   Hellen) — hier stand noch das alte graue rgba() daneben. 27.09.2026. */
body.gl-raum .gl-menue { position: absolute; top: calc(100% + 6px); left: 12px; z-index: 60; min-width: 220px; background: var(--gl-flaeche); border: 1px solid var(--gl-rahmen); border-radius: 10px; padding: 6px 0; box-shadow: var(--gl-menue-schatten); }
body.gl-raum .gl-menue[hidden] { display: none; }
body.gl-raum .gl-menue__marke { padding: 10px 16px 4px; font-family: var(--gl-font-titel); font-weight: 800; font-size: 14px; }
body.gl-raum .gl-menue__zeile { padding: 3px 16px; font-size: 12.5px; color: var(--gl-text-2); }
body.gl-raum .gl-menue__zeile.gl-mono { font-size: 12px; color: var(--gl-text-2); }
/* Die laufende Version im Menue, mit Weg zu "Was ist neu". Sieht aus wie eine
   Infozeile (.gl-menue__zeile) und ist eine, nur anklickbar — deshalb hier die
   Masse der Zeile und nicht die des Abmelden-Knopfs: zwei abgesetzte Bloecke
   mit Trennlinie uebereinander lesen sich als zwei Aktionen, und die Version
   ist keine. Farbe ausdruecklich gesetzt, weil `body.gl-raum a` sonst die
   Akzentschrift gibt und die Zeile dann lauter waere als der Podcastname. */
body.gl-raum a.gl-menue__version { display: block; padding: 3px 16px; font-size: 12.5px; color: var(--gl-text-2); text-decoration: none; }
body.gl-raum a.gl-menue__version:hover { color: var(--gl-text-1); }
body.gl-raum a.gl-menue__abmelden { display: block; margin-top: 6px; padding: 10px 16px; border-top: 1px solid var(--gl-haarlinie); font-size: 13px; color: var(--gl-text-2); text-decoration: none; }
body.gl-raum a.gl-menue__abmelden:hover { color: var(--gl-text-1); background: var(--gl-flaeche-2); }

/* ---- Mobilansicht: gemeinsame Bausteine (README-mobil.md) -----------
   .gl-mobil-nur / .gl-desktop-nur schalten Markup je Geraet; .gl-zurueck ist
   die Kopfzeile des zweiten Bildes („‹ Alle Folgen“ + Zustandsmarke),
   .gl-blaettern die Fusszeile mit dem Blaetterpaar. body.ist-objekt heisst:
   auf dem Telefon ist Bild 2 offen — Kopfzeile und Liste verschwinden.
   ------------------------------------------------------------------ */
.gl-mobil-nur { display: none !important; }
.gl-zurueck { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 44px; border-bottom: 1px solid var(--gl-haarlinie); }
.gl-zurueck__link { display: inline-flex; align-items: center; gap: 7px; color: var(--gl-akzent-schrift); font-size: 13px; padding: 10px 0; }
.gl-zurueck__link i { font-style: normal; font-size: 15px; }
.gl-zurueck__meta { margin-left: auto; font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-text-2); white-space: nowrap; }
.gl-zurueck__marke { margin-left: auto; border-radius: 5px; padding: 3px 9px; font-family: var(--gl-font-titel); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.gl-blaettern { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--gl-haarlinie); font-size: 13px; color: var(--gl-gedaempft); }
.gl-blaettern > button:first-child { color: var(--gl-gedaempft); padding: 4px 0; }
.gl-blaettern__paar { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-text-2); }
.gl-blaettern__paar button { color: var(--gl-text-2); padding: 8px 6px; font-family: inherit; font-size: inherit; }
.gl-blaettern__paar button:disabled { color: var(--gl-deaktiviert); cursor: default; }
.gl-blaettern__paar button:hover:not(:disabled) { color: var(--gl-text-1); }

@media (max-width: 899px) {
  .gl-desktop-nur { display: none !important; }
  .gl-mobil-nur { display: revert !important; }
  body.gl-raum { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.gl-raum .gl-header { min-height: 44px; padding: 0 16px; gap: 9px; flex-wrap: nowrap; }
  body.gl-raum .gl-marke { padding: 0; border-right: none; gap: 9px; min-width: 0; }
  body.gl-raum .gl-marke .gl-header__logo { width: 19px; height: 19px; }
  body.gl-raum .gl-marke .gl-wortmarke { font-size: 12px; }
  body.gl-raum .gl-marke__name { display: block; }
  /* Der Markenblock geht, der Umschalter BLEIBT (Lennart, 30.09.2026: "bring
     den schalter auch in die mobile fassung noch"). Er haengt in diesem Block —
     mit `display: none` auf dem Block war er auf dem Telefon die einzige
     Einstellung, die es gar nicht gab. */
  body.gl-raum .gl-header__brand { margin-left: auto; padding: 0 12px; border-left: none; }
  body.gl-raum .gl-header__brand > :not(.gl-themeschalter) { display: none; }
  body.gl-raum .gl-header__aktion { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  body.gl-raum .gl-header__aktion .gl-knopf--voll { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
  body.gl-raum .gl-header__aktion .gl-knopf { padding: 5px 12px; font-size: 12px; border-radius: 99px; color: var(--gl-gedaempft); }
  /* Raumleiste am unteren Rand: gleich breite Felder, Symbol ueber Wort. */
  /* #0b0e14 war derselbe feste dunkle Grund wie bei .gl-post — die
     Mobil-Raumleiste blieb im Hellen ein schwarzer Riegel. --gl-grund,
     27.09.2026. */
  /* Die Spaltenzahl steht NICHT mehr als Ziffer da (`repeat(4, 1fr)`), sondern
     zaehlt sich selbst. Mit dem fuenften Raum (GRAFIKEN, 02.10.2026) wurde aus
     der 4 sonst eine zweite Zeile: fuenf Eintraege in vier Spalten sind zwei
     Reihen, und die Leiste waere 128 px hoch ueber den Inhalt gewachsen, waehrend
     `padding-bottom` am body weiter mit 64 px rechnet. `grid-auto-flow: column`
     legt alle Kinder in EINE Zeile, egal wie viele es sind; `1fr` je Spalte
     teilt die Breite gleich auf. Ein sechster Raum braucht hier dann gar keine
     Aenderung mehr. */
  body.gl-raum .gl-raeume { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--gl-grund); border-top: 1px solid var(--gl-haarlinie); }
  /* min-width:0 am Link und Umbruchschutz am Wort: ein Grid-Item hat implizit
     min-width:auto und schrumpft nicht unter sein laengstes Wort. Bei fuenf
     Spalten auf 360 px sind das 72 px je Feld — „Episoden" braucht bei 12 px
     rund 51 px, das traegt. Ohne min-width:0 haette ein langes Wort die Leiste
     stattdessen breiter als den Schirm gemacht (derselbe Mechanismus wie bei
     .da-folge am 01.10.2026). */
  body.gl-raum .gl-raeume a { flex-direction: column; justify-content: center; gap: 5px; padding: 9px 4px 11px; margin: -1px 0 0; min-width: 0; border-bottom: none; border-top: 2px solid transparent; font-family: var(--gl-font-text); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--gl-text-2); }
  body.gl-raum .gl-raeume__wort { white-space: nowrap; }
  body.gl-raum .gl-raeume a svg { width: 21px; height: 21px; }
  /* Der Zustand steht im Strich oben und im Schriftschnitt, nicht allein in
     der Farbe — deshalb darf „still" auf die lesbare zweite Ebene steigen und
     „gewaehlt" auf die erste. 01.10.2026. */
  body.gl-raum .gl-raeume a.is-active { border-top-color: var(--gl-akzent-schrift); font-weight: 600; color: var(--gl-text-1); }
  body.gl-raum .gl-raeume__wort { display: inline-flex; align-items: baseline; gap: 4px; }
  /* Unten ist kein Platz fuer die Zaehler (25a zeigt keine): Symbol und Wort reichen. */
  body.gl-raum .gl-raeume__n { display: none; }
  body.gl-raum .gl-menue { left: 8px; }
  /* Bild 2 offen: Kopfzeile weg, die Zurueck-Zeile uebernimmt.
     Nicht per display:none am Kasten: die Raumleiste haengt im Markup IN der
     Kopfzeile, und ein ausgeblendeter Elternteil nimmt auch ein
     position:fixed-Kind aus dem Rendering — die Leiste waere in Bild 2 weg
     (Regel 8 verlangt sie in beiden Bildern). Also: Inhalte weg, Kasten platt. */
  body.gl-raum.ist-objekt .gl-header > *:not(.gl-raeume) { display: none; }
  body.gl-raum.ist-objekt .gl-header { min-height: 0; padding: 0; border-bottom: none; }
  .gl-raum-kopf { padding: 12px 16px; gap: 8px 10px; }
  .gl-raum-kopf__titel { font-size: 22px; flex-basis: 100%; }
  .gl-raum-kopf .gl-knopf, .gl-raum-kopf .gl-knopf--voll { padding: 8px 12px; font-size: 13px; }
}


/* ---- Datenbild: eine Datenreihe ansehen (site/assets/datenbild.js) -------
   Die Grafik ist SVG und erbt ihre Farben aus denselben Rollen wie der Rest
   der Seite — sie zieht also mit dem Theme mit, ohne dass das Skript etwas
   davon weiss. Jede Linie und jeder Balken bekommt seine Farbe ueber die
   eigene Variable --f, die das Skript setzt. */
/* Die Zeichnung — Entwurf 61a (02.10.2026).
   Eine Einheit im viewBox ist ein Pixel auf dem Schirm, solange die Flaeche
   ihre natuerliche Breite hat (640 in der grossen Karte, 700 im Player). Die
   Schriftgroessen hier sind deshalb die des Entwurfs und keine Umrechnung.
   Schriftart: Instrument Sans wie im Entwurf, nicht Mono — die Achsenzahlen
   bekommen dafuer tabular-nums, damit die Spalte trotzdem stehen bleibt. */
.db-bild { display: block; width: 100%; height: auto; }
.db-raster { stroke: var(--gl-haarlinie); stroke-width: 1; }
.db-grundlinie { stroke: var(--gl-rahmen); stroke-width: 1; }
.db-achse { font-family: var(--gl-font-text); font-size: 13px; font-variant-numeric: tabular-nums; fill: var(--gl-gedaempft); }
.db-achse--y { text-anchor: end; }
.db-achse--x { text-anchor: middle; }
/* Strichstaerke je Reihe: 61a zeichnet die fuehrende mit 3, die Begleiter mit
   2, das Mini-Bild mit 1,6. Der Wert kommt aus der Zeichnung, weil er dort
   eine Aussage ist („diese Reihe beantwortet die Frage") und nicht ein
   Geschmack. */
.db-linie { fill: none; stroke: var(--f); stroke-width: var(--w, 2); stroke-linejoin: round; stroke-linecap: round; }
/* Der gefuellte Punkt am Kurvenende, mit heller Kante gegen das Papier (61a:
   `stroke="#fffdf9" stroke-width="2"` — hier als Rolle, damit er im Dunkeln
   die dunkle Karte als Kante bekommt und nicht einen weissen Ring). */
.db-ende { fill: var(--f); stroke: var(--gl-blatt-hell); stroke-width: 2; }
/* Fuehrungslinie vom Kurvenende zu seinem Namen (02.10.2026).
   Sie entsteht nur, wenn die Reihe NICHT bis zum rechten Rand reicht — wenn
   sie hinten Luecken hat. Der Name steht in 61a immer am rechten Rand, der
   Punkt aber dort, wo der letzte Wert ist; gemessen lagen beide 249 px
   auseinander, und der Name stand auf Hoehe der Nachbarreihe. Gestrichelt und
   1 px: sie soll zeigen, nicht mitzeichnen. Ein Grafikelement, keine Schrift —
   3:1 genuegt, und die Reihenfarben tragen ueber 4,6:1. */
.db-fuehrung { fill: none; stroke: var(--f); stroke-width: 1; stroke-dasharray: 2 3; stroke-linecap: round; }
/* Der Name der Reihe am Kurvenende. Er ERSETZT die Legende unter der Grafik:
   61a bindet Name und Kurve ueber den Ort aneinander statt ueber einen
   Farbfleck, den man erst suchen muss. Der Name traegt die Reihenfarbe (alle
   zwoelf halten 4,5:1 gegen das Papier, siehe die Token oben), der Wert
   dahinter steht in der ruhigeren Schriftfarbe. */
.db-name { font-family: var(--gl-font-text); font-size: 13.5px; text-anchor: start; }
.db-name__wort { font-weight: 700; fill: var(--f); }
.db-name__wert { font-weight: 500; fill: var(--gl-text-1b); font-variant-numeric: tabular-nums; }
/* Der Wert ueber dem Balken (61a). Vorher stand er nur im `title` und war
   damit fuer jeden unsichtbar, der nicht mit der Maus daraufgeht. */
.db-wert { font-family: var(--gl-font-text); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--gl-text-1); text-anchor: middle; }
.db-punkt { fill: var(--f); }
/* Offen = vorlaeufig oder geschaetzt. Ein gefuellter Punkt saehe aus wie eine
   endgueltige Zahl. */
.db-punkt--offen { fill: var(--gl-blatt-hell); stroke: var(--f); stroke-width: 2.5; }
/* Balken tragen ALLE denselben Ton. Das ist 61a: ein Balkenbild entsteht hier
   nur beim Vergleich mehrerer Reihen an EINEM Zeitpunkt (SE, DK, PT, DE …),
   und dort steht die Zugehoerigkeit unter dem Balken. Zwoelf Farben
   nebeneinander waeren eine Unterscheidung, die niemand braucht.
   61a faerbt sie `rgba(11,122,120,.5)`; das sind an gemalten Pixeln 2,10:1
   gegen das Papier und damit unter der 3:1 fuer Grafikelemente. Hier steht
   deshalb derselbe Ton voll (5,08:1) — es ist die Farbe, die der Entwurf dem
   hervorgehobenen Balken ohnehin gibt. */
.db-balken { fill: var(--gl-reihe-1); }
.db-balken--offen { fill: color-mix(in srgb, var(--gl-reihe-1) 45%, transparent); stroke: var(--gl-reihe-1); stroke-width: 2; }
.db-fehlt { font-family: var(--gl-font-text); font-size: 13px; fill: var(--gl-gedaempft); text-anchor: middle; }

/* ---- Der Seitenkasten: EINE Regel fuer alle Raeume ---------------
   Jede Raumseite hat denselben Bau: <body class="gl-raum"> enthaelt genau
   einen <div class="gl-kasten">, darin die Kopfzeile und <main>. Die Kopfzeile
   gehoert IN den Kasten — in allen drei Light-Entwuerfen sitzt sie innen, mit
   den abgerundeten Ecken. Deshalb steht hier auch keine Breite je Seite mehr:
   wer einen Raum baut, schreibt den Kasten ins Markup und bekommt Breite,
   Radius, Schatten und den Grund darum von hier.

   overflow:clip, NICHT hidden. Beides beschneidet an den runden Ecken, aber
   hidden macht den Kasten zu einem Scroll-Container: die stehenden Spalten des
   Raums Trends (position:sticky, top:0) haetten dann nichts mehr, woran sie
   kleben koennen, und wuerden mit dem Inhalt davonrollen. clip erzeugt keinen
   Scrollport und laesst sticky am Fenster haengen (im Browser nachgemessen).

   Der Grund um den Kasten sitzt am <html>. Das ist noetig, weil der
   Hintergrund des <body> sonst auf die ganze Leinwand durchschlaegt und den
   Rand mit einfaerbt — der Kasten waere unsichtbar. Also: html traegt aussen,
   der Kasten traegt innen, body ist dazwischen durchsichtig.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
  html { background: var(--gl-aussen); }
  /* Die Breite sitzt am <body>, nicht am Kasten. Grund: jede Raumseite setzt
     in ihrem eigenen <style> noch einmal `body.xx-raum { background: … }` —
     das steht hinter dieser Datei und gewinnt. Ein `background:transparent`
     hier waere also wirkungslos, und der Koerper wuerde den Grund draussen
     mit seiner eigenen Flaeche zustreichen. Bekommt der Koerper stattdessen
     die Breite, ist seine Flaeche genau die Flaeche des Kastens — egal, wer
     sie setzt. Radius, Schatten und der Beschnitt bleiben am Kasten, weil
     `overflow` am <body> auf das Fenster durchschlaegt und die Seite dann
     gar nicht mehr rollt. */
  body.gl-raum { width: min(var(--gl-kasten), 100%); margin-inline: auto; }
  .gl-kasten {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--gl-grund);
    border-radius: var(--gl-kasten-radius);
    overflow: clip;
    box-shadow: var(--gl-kasten-schatten);
  }
}
/* Luft nach oben und unten gibt es erst, wenn es sie auch zur Seite gibt.
   Bis 1440 px fuellt der Kasten das Fenster und soll aussehen wie vorher;
   ein Rand oben ohne Rand links waere ein Streifen, kein Kasten. */
@media (min-width: 1520px) {
  body.gl-raum { padding-block: 32px; }
  .gl-kasten { min-height: calc(100vh - 64px); }
}
/* Unter 900 px gibt es keinen Kasten: der Rand waere verschenkter Platz.
   display:contents nimmt den <div> aus dem Layout heraus, ohne ihn aus dem
   Markup zu nehmen — Kopfzeile und <main> liegen dann wieder direkt im body,
   genau wie vor dieser Runde. */
@media (max-width: 899px) {
  .gl-kasten { display: contents; }
}