/* * Radio GUDE Sendeplan – Frontend. * * Alle Regeln hängen an einem eigenen Wrapper (.radio-gude-sendeplan bzw. * .radio-gude-programm-widget). Es gibt bewusst keine generischen Selektoren wie * h2, button oder .card, die das MH-Magazine-Theme oder andere Plugins treffen * könnten. Keine externe Bibliothek, keine Abhängigkeit vom Admin-Stylesheet. */ .radio-gude-sendeplan, .radio-gude-programm-widget, .radio-gude-kalender-widget, .rgs-abo { --rgs-rot: #da0000; /* Dunkler beim Betätigen, sehr hell als Hover-Fläche. */ --rgs-rot-dunkel: #b00000; --rgs-rot-zart: #fdf1f1; --rgs-text: #1c1c1c; --rgs-gedaempft: #6b6b6b; /* Dieselbe zurückgenommene Wirkung, eine Spur kräftiger: Die Zeitangabe im Programmpunkt liegt auf den Grundtönen der Beiträge, und der dunkelste von ihnen ist dunkler als die frühere Fläche. Mit diesem Wert bleibt sie auf jedem der vier Töne über dem Schwellenwert 4,5:1 – auf dem hellsten bei 6,0:1, auf dem dunkelsten bei 4,6:1. */ --rgs-gedaempft-punkt: #616161; --rgs-linie: #e3e3e3; --rgs-flaeche: #fafafa; --rgs-weiss: #ffffff; /* Der Abstand unter einem Tageskopf. Er steht hier, weil ihn zwei Stellen kennen müssen: der Kopf selbst und der Platzhalter, der im Sieben-Spalten-Raster seine Rasterzeile freihält. */ --rgs-tagkopf-abstand: 0.35rem; /* Die Maße der HEUTE-Marke. Sie stehen hier, weil auch der Statusbereich sie kennen muss: Er hält genau die Höhe dieser Marke frei, damit ein Tageskopf ohne HEUTE nicht niedriger ausfällt als einer mit. Aus denselben Werten entsteht die Marke selbst – eine Quelle, kein Nachbau. */ --rgs-marke-groesse: 0.62rem; --rgs-marke-polster: 0.05rem; --rgs-marke-zeile: 1.25; /* Der Abstand zwischen den Teilen einer Tageskopfzeile. Er zählt zur freigehaltenen Höhe mit, weil die Marke unter dem Datum eine eigene Zeile beginnt. */ --rgs-tagkopf-luecke: 0.4rem; /* * Die Höhe, die die HEUTE-Marke im Tageskopf einnimmt: ihr Kasten plus die * Zeilenlücke darüber. Genau diesen Betrag hält die erste Rasterzeile in * JEDER Woche frei – auch in einer ohne HEUTE. Das Wochenraster beginnt * damit immer auf derselben Höhe, ohne dass ein einziger Tageskopf dafür * eine leere Zeile tragen müsste. */ --rgs-marke-zeile-hoehe: calc(var(--rgs-marke-groesse) * var(--rgs-marke-zeile) + 2 * var(--rgs-marke-polster) + var(--rgs-tagkopf-luecke)); box-sizing: border-box; color: var(--rgs-text); } .radio-gude-sendeplan *, .radio-gude-programm-widget *, .radio-gude-kalender-widget *, .rgs-abo * { box-sizing: inherit; } /* Nur für Bildschirmleser sichtbar. */ .radio-gude-sendeplan .rgs-nur-lesbar, .radio-gude-programm-widget .rgs-nur-lesbar, .radio-gude-kalender-widget .rgs-nur-lesbar, .rgs-abo .rgs-nur-lesbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Wochenkopf ─────────────────────────────────────────────────────── */ /* * Der Wochenblock ist ein Abfragecontainer: ob sieben Tage nebeneinander passen, * entscheidet seine eigene Breite – nicht die des Bildschirms. Das Plugin weiß * nicht, wie breit sein WordPress-Container ist. * * Der Container wird aber erst ab der Schwelle eingerichtet, ab der die * Sieben-Spalten-Ansicht überhaupt in Frage kommt. Das kostet nichts: der * Wochenblock ist immer schmaler als das Fenster, unter 62 rem Fensterbreite * könnte die Abfrage also ohnehin nie zutreffen. * * Der Grund für die Einschränkung ist ein Zusammenspiel mit der Umgebung: * `container-type: inline-size` bringt Größeneinschluss mit. Steht der * Wochenplan in einem umbrechenden Spalten-Flexcontainer – Elementor schaltet * seine Container unterhalb von 768 px auf `flex-wrap: wrap` –, dann rechnet * der Browser die Höhe dieses Flexelements deutlich zu groß. Auf einem * 390-Pixel-Gerät waren das rund 1900 Pixel leere Fläche unter dem Sonntag, * gemessen an der produktiven Seite. Ohne den Größeneinschluss in diesem * Bereich stimmt die Höhe wieder – und die Ansicht bleibt dieselbe, weil * unterhalb von 62 rem ohnehin die kompakte Liste gilt. */ @media (min-width: 62rem) { .radio-gude-sendeplan .rgs-woche { container-type: inline-size; container-name: rgs-woche; } } /* * Die Bedienleiste – Kalenderwoche, Suche und Wochennavigation – bleibt beim * Scrollen am oberen Rand stehen. Sie klebt innerhalb des Wochenblocks und * verschwindet damit wieder, sobald der Sendeplan verlassen wird. * * Der obere Abstand kommt aus `--rgs-leiste-oben`. Ohne WordPress-Adminleiste * ist er null; ist sie da, hält er genau ihre Höhe frei (32 px, auf schmalen * Geräten 46 px, unterhalb von 600 px scrollt sie mit und braucht keinen Platz). * Es steht nirgends eine für einen einzelnen Rechner passende Zahl. */ .radio-gude-sendeplan .rgs-wochenkopf { position: sticky; top: var(--rgs-leiste-oben, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; padding: 0.55rem 0 0.6rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--rgs-text); /* Solide Fläche: das Programm darf nicht durchscheinen. */ background: var(--rgs-weiss); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35); } /* * Die Leiste soll die volle Breite des Wochenblocks abdecken, auch wenn dieser * ein Innenpolster hat – sonst blitzt an den Rändern Programm durch. */ .radio-gude-sendeplan .rgs-wochenkopf::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.6rem; right: -0.6rem; z-index: -1; background: var(--rgs-weiss); } /* Freiraum für die WordPress-Adminleiste, sofern sie angezeigt wird. */ body.admin-bar .radio-gude-sendeplan { --rgs-leiste-oben: 32px; } @media screen and (max-width: 782px) { body.admin-bar .radio-gude-sendeplan { --rgs-leiste-oben: 46px; } } @media screen and (max-width: 600px) { /* Unterhalb dieser Breite scrollt die Adminleiste mit – kein Freiraum nötig. */ body.admin-bar .radio-gude-sendeplan { --rgs-leiste-oben: 0px; } } /* Auf dem Telefon soll die Leiste möglichst wenig Bildschirm verdecken. */ @media (max-width: 47.99rem) { .radio-gude-sendeplan .rgs-wochenkopf { gap: 0.4rem 0.8rem; padding: 0.45rem 0 0.5rem; margin-bottom: 0.9rem; } .radio-gude-sendeplan .rgs-kw { font-size: 1.15rem; } .radio-gude-sendeplan .rgs-zeitraum { font-size: 0.9rem; } } .radio-gude-sendeplan .rgs-wochentitel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; /* * Schrumpfen erlaubt, wachsen nicht: Auf dem Desktop bleibt die Breite * damit genau wie bisher, bei großer Grundschrift gibt der Titel aber nach, * statt die Seite waagerecht überlaufen zu lassen. `min-width: 0` hebt die * Vorgabe auf, dass ein Flex-Kind nie schmaler wird als sein Inhalt – ohne * sie liefe der eigene Umbruch der beiden Zeilen ins Leere. */ flex: 0 1 auto; min-width: 0; } .radio-gude-sendeplan .rgs-kw { font-size: 1.35rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; } .radio-gude-sendeplan .rgs-zeitraum { font-size: 1rem; color: var(--rgs-gedaempft); } /* Mitte: die Suche. Sie darf wachsen, bleibt aber in vernünftigen Grenzen. */ .radio-gude-sendeplan .rgs-suche { position: relative; flex: 1 1 16rem; /* Aus demselben Grund gedeckelt wie das Hinweisraster: Eine schriftrelative Mindestbreite darf nie breiter werden als der Platz, den es gibt. */ min-width: min(12rem, 100%); max-width: 24rem; margin: 0; } .radio-gude-sendeplan .rgs-suche-feld { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border: 1px solid var(--rgs-linie); border-radius: 4px; background: var(--rgs-weiss); } .radio-gude-sendeplan .rgs-suche-feld:focus-within { border-color: var(--rgs-rot); box-shadow: 0 0 0 2px rgba(218, 0, 0, 0.12); } .radio-gude-sendeplan .rgs-suche-icon { display: flex; flex: 0 0 auto; color: var(--rgs-gedaempft); } .radio-gude-sendeplan .rgs-suche-icon .rgs-icon { width: 17px; height: 17px; } /* * `flex: 1 4 auto` statt `1 1 auto`: Wächst die Eingabe wie bisher in ein * breites Feld, schrumpft sie aber schneller als die Auswahlpille neben ihr. * Wird es eng, soll der Titel der Auswahl lesbar bleiben und nicht die leere * Platzhalterzeile. Unter `min-width` geht es dabei nicht – ein Feld, in dem * man nichts mehr tippen kann, wäre kein Feld mehr. */ .radio-gude-sendeplan .rgs-suche-eingabe { flex: 1 4 auto; min-width: 4.5rem; margin: 0; padding: 0.15rem 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: 0.9rem; color: var(--rgs-text); } /* * Safari auf iOS vergrößert beim Antippen die ganze Seite, sobald das * fokussierte Feld weniger als 16 px Schrift trägt – gemessen waren es 14,4 px. * Der Zoom bleibt danach stehen; der Leser muss von Hand zurückzoomen. * * Die Abfrage trifft Fingerbedienung, nicht eine Fensterbreite: Der Zoom hängt * am Gerät, und ein Tablet fiele durch eine Breitenabfrage. Maus-bediente * Fenster behalten die kompakte Schrift. * * `user-scalable=no` oder `maximum-scale=1` kämen nicht in Frage – sie nähmen * dem Leser das eigene Zoomen. Die Schriftgröße löst dasselbe, ohne etwas zu * verbieten. */ @media (pointer: coarse) { .radio-gude-sendeplan .rgs-suche-eingabe { font-size: 16px; } } .radio-gude-sendeplan .rgs-suche-eingabe:focus { outline: none; box-shadow: none; } .radio-gude-sendeplan .rgs-suche-eingabe::-webkit-search-cancel-button { cursor: pointer; } /* Vorschlagsliste unmittelbar unter dem Feld. */ .radio-gude-sendeplan .rgs-suche-liste { position: absolute; /* Über der klebenden Leiste (20) und über einem hervorgehobenen Treffer (5). */ z-index: 40; top: calc(100% + 0.25rem); left: 0; right: 0; max-height: 19rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; background: var(--rgs-weiss); border: 1px solid var(--rgs-linie); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .radio-gude-sendeplan .rgs-suche-liste[hidden] { display: none; } .radio-gude-sendeplan .rgs-vorschlag { margin: 0; padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--rgs-linie); cursor: pointer; line-height: 1.3; } .radio-gude-sendeplan .rgs-vorschlag:last-child { border-bottom: 0; } .radio-gude-sendeplan .rgs-vorschlag[aria-selected="true"], .radio-gude-sendeplan .rgs-vorschlag:hover { background: var(--rgs-flaeche); box-shadow: inset 3px 0 0 var(--rgs-rot); } .radio-gude-sendeplan .rgs-vorschlag-titel { display: block; font-size: 0.9rem; font-weight: 700; color: var(--rgs-text); } .radio-gude-sendeplan .rgs-vorschlag-zeit, .radio-gude-sendeplan .rgs-vorschlag-moderation { display: block; font-size: 0.78rem; color: var(--rgs-gedaempft); } .radio-gude-sendeplan .rgs-suche-meldung { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--rgs-gedaempft); min-height: 0; } .radio-gude-sendeplan .rgs-suche-meldung:empty { display: none; } /* * Rechts: die Wochensteuerung. * * Die drei Schaltflächen wirken als eine Gruppe: gleiche Höhe, gleiche Rundung, * kleine Abstände. „Vorherige“ und „Nächste“ bleiben zurückhaltend – weiße * Fläche, feine graue Kontur, dunkle Schrift –, das Rot ist dort nur Akzent * beim Überfahren. „Diese Woche“ ist der Hauptweg zurück und deshalb als * einzige Fläche gefüllt. * * `flex: 0 1 auto` statt `0 0 auto`: die Gruppe darf schrumpfen. Sonst bliebe * sie auf schmalen Geräten in ihrer vollen Breite stehen und ragte seitlich * aus dem Wochenblock heraus. */ .radio-gude-sendeplan .rgs-wochennav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; margin-left: auto; flex: 0 1 auto; min-width: 0; } .radio-gude-sendeplan .rgs-navlink { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 36px; padding: 0.3rem 0.85rem; border: 1px solid var(--rgs-linie); border-radius: 6px; background: var(--rgs-weiss); color: var(--rgs-text); font-size: 0.875rem; font-weight: 500; line-height: 1.25; /* Die Beschriftung bleibt in der Schreibweise der Seite. */ text-transform: none; letter-spacing: 0; text-decoration: none; transition: border-color 0.15s, color 0.15s, background-color 0.15s; } .radio-gude-sendeplan .rgs-navlink:hover, .radio-gude-sendeplan .rgs-navlink:focus { border-color: var(--rgs-rot); background: var(--rgs-rot-zart); color: var(--rgs-rot); text-decoration: none; } .radio-gude-sendeplan .rgs-navlink:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: 2px; } /* Der Hauptaktionspunkt: gefüllt im Radio-GUDE-Rot. */ .radio-gude-sendeplan .rgs-navlink--heute { border-color: var(--rgs-rot); background: var(--rgs-rot); color: var(--rgs-weiss); font-weight: 600; } .radio-gude-sendeplan .rgs-navlink--heute:hover, .radio-gude-sendeplan .rgs-navlink--heute:focus { border-color: var(--rgs-rot-dunkel); background: var(--rgs-rot-dunkel); color: var(--rgs-weiss); } .radio-gude-sendeplan .rgs-navlink .rgs-icon { width: 15px; height: 15px; flex: 0 0 auto; } /* * Schmale Geräte: die Gruppe rückt auf eine eigene Zeile und teilt sie sich zu * dritt. Nichts wird abgeschnitten, nichts ragt heraus, und jede Fläche ist * groß genug zum Antippen. Der Block steht bewusst hinter den Grundregeln, * damit er sie überschreibt. */ @media (max-width: 47.99rem) { .radio-gude-sendeplan .rgs-wochennav { flex: 1 1 100%; justify-content: space-between; gap: 0.3rem; } .radio-gude-sendeplan .rgs-navlink { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0.3rem 0.45rem; font-size: 0.82rem; } } /* ── Icons ──────────────────────────────────────────────────────────── */ /* * Alle Symbole stammen aus dem eigenen Inline-Set: gleiche 24er-ViewBox, gleiche * Strichstärke, gleiche Rundungen. Die Grundform folgt der Textfarbe, der Akzent * ist das Radio-GUDE-Rot. Beides ist über Variablen steuerbar. * * Zwei weitere Töne gehören allein zum Wetterteil des Nachrichtensymbols. Sie * stehen hier und nicht im Markup, damit alle Farben des Plugins an einer * Stelle liegen; das SVG trägt dieselben Werte nur als Rückfallebene. * * Das Blau ist ein klarer, freundlicher Wetterton, kein Signalblau: Es soll die * Wolke sofort als Wetter lesbar machen, ohne die Karte zu beherrschen. Das * Gelb ist bewusst warm und nicht knallig – die Sonne ist ein Akzent hinter der * Wolke, kein zweites Symbol. Rot bleibt für Zeitung und Schlagzeile. */ .radio-gude-sendeplan .rgs-icon, .radio-gude-kalender-widget .rgs-icon { --rgs-icon-akzent: var(--rgs-rot); --rgs-icon-wolke: #4a90e2; --rgs-icon-sonne: #f5b942; display: block; width: 24px; height: 24px; flex: 0 0 auto; vertical-align: middle; } /* ── Programmhinweise ───────────────────────────────────────────────── */ /* * Zwei gleichwertige Felder. Auf breiten Containern nebeneinander und gleich * hoch, auf schmalen untereinander – beides über dieselbe Rasterangabe, ohne * eigenen Breakpoint. */ /* * Größe der beiden großen Hinweissymbole. Sie sollen die Felder prägen und ihre * Details auf einen Blick zeigen; auf schmalen Geräten etwas kleiner, damit * neben ihnen genug Platz für den Text bleibt. Nur diese beiden Symbole sind * gemeint – Lupe, Chevrons und das Wdh.-Zeichen behalten ihre Größe. */ .radio-gude-sendeplan .rgs-hinweise { --rgs-hinweis-icon: 38px; display: grid; /* * `min(18rem, 100%)` statt `18rem`: Die Mindestbreite ist schriftrelativ, * und wer auf dem Telefon eine größere Textgröße eingestellt hat, bekommt * daraus schnell mehr, als das Fenster breit ist – bei 24 px Grundschrift * sind 18 rem bereits 432 px. Eine feste Mindestbreite kann eine Rasterspalte * nicht mehr unterschreiten; die Seite lief dann waagerecht über. * `min(…, 100%)` deckelt sie an der tatsächlichen Breite des Rasters. */ grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0.5rem; margin: 0 0 1.1rem; padding: 0; align-items: stretch; } .radio-gude-sendeplan .rgs-hinweis { display: flex; align-items: flex-start; /* Etwas mehr Luft, damit das größere Symbol nicht am Text klebt. */ gap: 0.75rem; padding: 0.55rem 0.8rem; background: var(--rgs-flaeche); border: 1px solid var(--rgs-linie); border-left: 3px solid var(--rgs-rot); border-radius: 3px; } .radio-gude-sendeplan .rgs-hinweis-icon { display: flex; flex: 0 0 auto; /* Optisch auf die Höhe der Feldüberschrift ausgerichtet – Desktop wie Mobile. Der kleine Versatz gleicht den Abstand zwischen Zeilenkasten und Versalhöhe der Überschrift aus. */ align-items: flex-start; padding-top: 0.12rem; color: #262626; } .radio-gude-sendeplan .rgs-hinweis-icon .rgs-icon { width: var(--rgs-hinweis-icon, 38px); height: var(--rgs-hinweis-icon, 38px); } .radio-gude-sendeplan .rgs-hinweis-text { min-width: 0; } .radio-gude-sendeplan .rgs-hinweis-titel { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rgs-text); } .radio-gude-sendeplan .rgs-hinweis-satz { display: block; font-size: 0.84rem; line-height: 1.35; color: var(--rgs-gedaempft); } /* ── Tage ───────────────────────────────────────────────────────────── */ /* * Standard – und damit die Darstellung auf schmalen Containern: die sieben Tage * stehen untereinander, sehr kompakt. Ist genügend Breite vorhanden, schaltet * der Block weiter unten auf sieben gleichberechtigte Spalten um. Ein * Zwischenlayout mit zwei oder drei Tagen gibt es bewusst nicht. * * Umgeschaltet wird ausschließlich über diese Variablen, damit die * Sieben-Spalten-Regel an genau einer Stelle steht. */ .radio-gude-sendeplan .rgs-tage { display: grid; grid-template-columns: var(--rgs-wochenraster, 1fr); gap: var(--rgs-tage-luecke, 1.15rem); align-items: start; /* Der Bezugskasten der Jetzt-Linie: Sie liegt absolut darin und misst ihre Höhe gegen genau diese Oberkante. Ohne eigenen z-index entsteht dabei kein neuer Stapelzusammenhang – Suchtreffer und Tagesköpfe behalten ihre Reihenfolge. */ position: relative; /* Senkrechte Spaltentrenner. Sie liegen als Hintergrund im Raster, damit sie auch dort durchlaufen, wo eine Tageszelle leer bleibt. */ background-image: var(--rgs-spaltenlinien, none); } /* Platzierung im gemeinsamen Wochenraster. Ohne dieses Raster – also in der kompakten Liste – sind beide Angaben wirkungslos. */ .radio-gude-sendeplan .rgs-tagkopf, .radio-gude-sendeplan .rgs-punkt, .radio-gude-sendeplan .rgs-tag-leer { grid-column: var(--rgs-spalte, auto); } .radio-gude-sendeplan .rgs-punkt { grid-row: var(--rgs-zeile, auto); } /* Ein Tag ohne Programm setzt seinen Hinweis in die erste Inhaltszeile. */ .radio-gude-sendeplan .rgs-tag-leer { grid-row: 2; } .radio-gude-sendeplan .rgs-tag { min-width: 0; margin: 0; padding-left: var(--rgs-tag-innen, 0); border-left: var(--rgs-tag-kante, 0) solid var(--rgs-linie); } .radio-gude-sendeplan .rgs-tag:first-child { padding-left: 0; border-left: 0; } .radio-gude-sendeplan .rgs-tagkopf { grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rgs-tagkopf-luecke, 0.4rem); margin: 0 0 var(--rgs-tagkopf-abstand, 0.35rem); padding-bottom: 0.25rem; border-bottom: 1px solid var(--rgs-linie); font-size: var(--rgs-tagkopf-groesse, 0.95rem); line-height: 1.25; } .radio-gude-sendeplan .rgs-wochentag { font-weight: 700; } .radio-gude-sendeplan .rgs-trenner { color: var(--rgs-linie); font-weight: 400; } .radio-gude-sendeplan .rgs-tagdatum { font-size: 0.85em; font-weight: 400; color: var(--rgs-gedaempft); font-variant-numeric: tabular-nums; } /* Der heutige Tag wird über Textmarke UND Linie gekennzeichnet, nie nur über Farbe. */ .radio-gude-sendeplan .rgs-heute-marke { padding: var(--rgs-marke-polster, 0.05rem) 0.35rem; border-radius: 2px; background: var(--rgs-rot); color: var(--rgs-weiss); font-size: var(--rgs-marke-groesse, 0.62rem); line-height: var(--rgs-marke-zeile, 1.25); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .radio-gude-sendeplan .rgs-tag--heute .rgs-tagkopf { border-bottom-color: var(--rgs-rot); } /* ── Zweite klebende Ebene: die Tagesköpfe ──────────────────────────── */ /* * Beim Scrollen bleiben zwei Ebenen stehen: oben die Bedienleiste wie bisher, * direkt darunter die Zeile der Tagesköpfe. Darunter laufen nur noch die * Programmpunkte durch. * * Der Abstand von oben ist an keiner Stelle eine feste Zahl. Er ist die Summe * aus dem Freiraum für die WordPress-Adminleiste (`--rgs-leiste-oben`, 0 ohne * Adminleiste) und der tatsächlich gemessenen Höhe der Bedienleiste * (`--rgs-leiste-hoehe`, vom Skript gesetzt und bei jeder Größenänderung neu * bestimmt). Bricht die Bedienleiste auf einem schmaleren Gerät in zwei Zeilen * um oder wächst die Schrift, wandert die zweite Ebene automatisch mit: sie * sitzt immer bündig unter der ersten und überlappt sie nie. * * Die Schwelle ist 48 rem – dieselbe, ab der das Plugin ohnehin auf die * breitere Darstellung umschaltet. Es kommt kein eigener Haltepunkt hinzu. * Auf dem Telefon bleibt damit alles unverändert; dort ist der Bildschirm zu * niedrig, als dass zwei stehende Ebenen noch genug Programm übrig ließen. */ @media (min-width: 48rem) { .radio-gude-sendeplan .rgs-tagkopf { position: sticky; top: calc(var(--rgs-leiste-oben, 0px) + var(--rgs-leiste-hoehe, 5rem)); /* Unter der Bedienleiste (20), aber über den Programmpunkten und über einem hervorgehobenen Treffer (5): nichts scheint hindurch. */ z-index: 10; /* Dieselbe deckende Fläche wie die Bedienleiste – keine neue Farbe. */ background: var(--rgs-weiss); } /* * Ein angesprungener Treffer darf auch hinter der zweiten Ebene nicht * verschwinden. Der Freiraum über ihm wächst deshalb um die gemessene * Kopfhöhe – wieder ohne feste Zahl. */ .radio-gude-sendeplan { --rgs-kopfzeile-frei: var(--rgs-tagkopf-hoehe, 2.4rem); } } .radio-gude-sendeplan .rgs-tag-leer { margin: 0.3rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--rgs-gedaempft); } /* ── Programmpunkte ─────────────────────────────────────────────────── */ /* * In der Wochenübersicht ist ein Programmpunkt eine kompakte Zeile, keine Karte: * Zeit und Titel, sonst nichts. Beschreibungen und Moderation liefert die API * weiterhin – sie gehören in eine spätere Detailansicht. */ .radio-gude-sendeplan .rgs-programme { list-style: none; margin: 0; padding: 0; display: block; } /* * Der Rahmen eines Programmpunkts. * * Bis 0.1.25 trug die Karte nur zwei Kanten: die farbige links und eine * Trennlinie unten. Rechts stand nichts – in der kompakten Liste endete die * Karte dort im Nichts, und auf dem Telefon, wo diese Liste die einzige * Darstellung ist, wirkten die Programmpunkte deshalb nach rechts offen. * * Jetzt ist der Rahmen vollständig: oben, rechts und unten dieselbe feine * Linie, die den Plan ohnehin gliedert (`--rgs-linie`, #e3e3e3), links * unverändert die drei Pixel Farbe. Es kommt kein neuer Farbwert hinzu und * keine zweite Stärke. * * Zwei Punkte übereinander ergäben zusammen eine doppelt so dicke Linie. Der * folgende Punkt rückt deshalb um genau eine Kantenstärke nach oben, sodass * seine Oberkante und die Unterkante des Vorgängers auf derselben Linie * liegen – eine Linie, nicht zwei. Das verschiebt nur senkrecht; an der * Breite ändert es nichts. * * `--rgs-punkt-kante` steuert beides an einer Stelle. Im Sieben-Spalten- * Raster steht sie auf 0: Dort zeichnen die senkrechten Spaltenlinien des * Wochenrasters bereits die rechte Kante, eine zweite daneben wäre eine * Verdopplung. Die Darstellung auf Tablet und Desktop bleibt damit exakt wie * bisher. * * `box-sizing: border-box` gilt im ganzen Plugin (siehe ganz oben). Die neuen * Kanten liegen deshalb INNERHALB des vorhandenen Außenmaßes: Die Karte wird * dadurch um kein Pixel breiter. */ .radio-gude-sendeplan .rgs-punkt { display: grid; grid-template-columns: var(--rgs-punkt-raster, 3.5rem minmax(0, 1fr)); gap: 0 0.5rem; align-items: baseline; margin: 0; padding: var(--rgs-punkt-polster-y, 0.3rem) var(--rgs-punkt-polster, 0.5rem); border-top: var(--rgs-punkt-kante, 1px) solid var(--rgs-linie); border-right: var(--rgs-punkt-kante, 1px) solid var(--rgs-linie); border-bottom: 1px solid var(--rgs-linie); border-left: 3px solid transparent; font-size: var(--rgs-titel-groesse, 0.88rem); line-height: var(--rgs-punkt-zeile, 1.3); /* * Der eigene Abschluss der Karte dort, wo sie keine Kante trägt – drei * Seiten, drei voneinander unabhängige Variablen. Ohne Wert bleibt ein * Schein durchsichtig und zeichnet nichts: In der kompakten Liste * verhalten sich diese drei Zeilen deshalb wie gar nicht vorhanden. * Wozu sie im Sieben-Spalten-Raster da sind, steht unten. */ box-shadow: var(--rgs-abschluss-oben, 0 0 transparent), var(--rgs-abschluss-rechts, 0 0 transparent), var(--rgs-abschluss-unten, 0 0 transparent); } /* Eine Linie zwischen zwei Karten, nicht zwei. Siehe oben. */ .radio-gude-sendeplan .rgs-punkt + .rgs-punkt { margin-top: calc(-1 * var(--rgs-punkt-kante, 1px)); } /* * Der letzte Punkt schließt seine Karte unten ab wie jeder andere. Im * Sieben-Spalten-Raster steht `--rgs-punkt-kante` auf 0 – dort übernimmt den * Abschluss der innere Schein (siehe `--rgs-abschluss-unten`), damit die Karte * um kein Pixel höher wird. */ .radio-gude-sendeplan .rgs-punkt:last-child { border-bottom-width: var(--rgs-punkt-kante, 1px); } /* * Auf dem Telefon etwas mehr Präsenz. * * Die kompakte Liste ist auf dem iPhone die einzige Darstellung, und dort war * sie zu fein: Titel 14,08 px, Uhrzeit und Moderation 11,55 px, gemessen auf * der produktiven Seite bei 390 px. Lesbar, aber nichts, was man im Vorbeigehen * erfasst. * * Vergrößert wird über genau eine Zahl: die Titelgröße. Alles andere im * Programmpunkt ist relativ zu ihr gesetzt – die Uhrzeit mit 0.82em, die * Moderation ebenso, das Wiederholungskennzeichen und die KI-Angabe wiederum * relativ dazu. Ein einziger Wert hebt deshalb die ganze Karte gleichmäßig um * knapp acht Prozent, ohne dass sich das Größenverhältnis der Zeilen * zueinander verschiebt: * * Titel 14,08 px -> 15,20 px * Uhrzeit 11,55 px -> 12,46 px * Moderation 11,55 px -> 12,46 px * Wdh. 9,15 px -> 9,88 px * KI-Stimme 9,47 px -> 10,22 px * * Damit die Karte dabei nicht enger wirkt, wachsen Zeilenhöhe und Innenabstand * im selben Maß mit. Die Zeitspalte bleibt bei 3,5 rem: Sie hängt an der * Grundschrift, nicht an dieser Größe, und das Wiederholungskennzeichen bleibt * mit rund 48 px deutlich schmaler. * * Die Schwelle ist 47.99 rem – dieselbe, die im Plugin bereits Wochenkopf und * Wochennavigation aufs Telefon umstellt. Es kommt kein neuer Haltepunkt hinzu, * und Tablet wie Desktop bleiben unverändert. * * Ausdrücklich kein `transform: scale()` auf der Seite, kein Browser-Zoom und * keine Änderung am Viewport-Etikett: Größer wird allein der Programmpunkt, * nicht Kopfbereich, Menü, Theme oder Player. */ @media (max-width: 47.99rem) { .radio-gude-sendeplan { --rgs-titel-groesse: 0.95rem; --rgs-punkt-polster: 0.55rem; --rgs-punkt-polster-y: 0.35rem; --rgs-punkt-zeile: 1.35; } } /* Beitrag: zurückhaltend, sehr helle Fläche, graue Markierung. */ .radio-gude-sendeplan .rgs-punkt--beitrag { background: var(--rgs-flaeche); border-left-color: #d8d8d8; } /* * Die farbige Ecke eines Beitrags. * * Bis 0.1.22 gliederten vier automatisch vergebene Grautöne die Fläche. Das * war ruhig, aber stumm: Der Ton sagte nichts über den Beitrag, und im * Normalzustand wirkte der Vormittag trotzdem grau in grau. An seine Stelle * tritt eine kleine Ecke in einer redaktionell gepflegten Farbe – dieselbe für * Erstsendung und Wiederholung, weil sie am Inhalt hängt. Alle Beiträge teilen * sich damit wieder eine einheitliche, ruhige Fläche. * * Gezeichnet wird sie als Dreieck über einen Farbverlauf im Hintergrund. Das * kostet kein zusätzliches Element, keine Höhe und keine Breite: Der Verlauf * liegt im vorhandenen Kasten, verschiebt nichts und kann keinen Text * verdecken – das Dreieck sitzt in der Ecke vor der Zeitangabe, dort ist * ohnehin Innenabstand. * * Nur Beiträge mit gepflegter Farbe tragen die Klasse. Ohne sie bleibt der * Programmpunkt genau so, wie er ohne diese Erweiterung aussähe. */ .radio-gude-sendeplan .rgs-punkt--farbig { /* * Kantenlänge der Ecke, im Browser an der tatsächlichen Tinte gemessen – * nicht am Zeilenkasten, der deutlich über den Buchstaben liegt. Engster * Fall ist die schmale Spalte des Sieben-Tage-Rasters; dort bleibt zur * Oberkante der Uhrzeit: * * 10 px -> 2,54 px 11 px -> 1,54 px 12 px -> 0,54 px * 13 px -> Überlappung 14 px -> Überlappung * * Auf Tablet und Mobil ist die Karte breiter, dort sind es bei 10 px * 7,30 px. Zehn Pixel sind damit der einzige Wert mit echtem Abstand und * bleiben zugleich groß genug, um sofort aufzufallen. */ --rgs-ecke: 10px; } .radio-gude-sendeplan .rgs-punkt--farbig::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; /* * Ein rechtwinkliges Dreieck aus zwei Rahmen: der obere trägt die Farbe, * der rechte ist durchsichtig. Beide Schenkel sind damit exakt so lang wie * `--rgs-ecke` – anders als bei einem 135-Grad-Verlauf, dessen Schenkel um * das Wurzel-Zwei-Fache länger ausfallen und in den Zeittext reichten. * * Absolut gesetzt und ohne eigene Größe: Das Dreieck liegt im Polster der * Karte, erzeugt weder Höhe noch Breite und verschiebt nichts. Der Bezug * ist der Innenkasten, die graue Kante links bleibt also frei. */ border-top: var(--rgs-ecke) solid var(--rgs-beitragsfarbe); border-right: var(--rgs-ecke) solid transparent; /* Rein dekorativ – die Ecke fängt keine Klicks ab. */ pointer-events: none; } /* Sendung: weiße Fläche, roter Akzent, kräftigerer Titel – die höhere Ebene. */ .radio-gude-sendeplan .rgs-punkt--sendung { background: var(--rgs-weiss); border-left-color: var(--rgs-rot); } /* * Trägt eine Sendung eine gepflegte öffentliche Farbe, zeigt sie ihr * vorhandener senkrechter Strich – und nur er. Eine Ecke bekommt sie nie: * Die Ecke ist das Zeichen für einen Beitrag, der Strich das für eine Sendung. * Ohne gepflegte Farbe bleibt der Strich rot wie bisher. * * Die Regel steht bewusst hier: nach der Sendungsfarbe, die sie ablöst, und * vor dem Suchtreffer, der weiterhin über allem steht. */ .radio-gude-sendeplan .rgs-punkt--kantenfarbe { border-left-color: var(--rgs-beitragsfarbe); } /* * Die Zeitzeile trägt neben der Uhrzeit auch das Wiederholungskennzeichen. * Die Zeitangabe selbst bricht nie um (nowrap steht an ihr, siehe unten), die * Pille bricht intern ebenfalls nicht - zwischen beiden darf die Zeile aber * umbrechen, wenn der Platz nicht reicht. In der schmalen Zeitspalte der * kompakten Liste rutscht die Pille dadurch unter die Uhrzeit, statt in die * Titelspalte zu ragen. */ .radio-gude-sendeplan .rgs-punkt-zeit { color: var(--rgs-gedaempft-punkt, #616161); font-size: 0.82em; font-variant-numeric: tabular-nums; } /* * Die Zeitzeile ist kleiner gesetzt als die Titelzeile. Damit die Pille * unverändert gross erscheint, wird ihre relative Groesse um genau diesen * Faktor ausgeglichen: 0.65em der Titelzeile entsprechen 0.65/0.82 em hier. */ .radio-gude-sendeplan .rgs-punkt-zeit .rgs-badge--wdh { font-size: calc(0.65em / 0.82); } /* * Titel brechen ausschließlich an Stellen um, die im Text selbst stehen: an * Leerzeichen und an vorhandenen Bindestrichen. Ein technisch erzwungener Bruch * mitten im Wort („Wochenrückblic|k“) darf nie entstehen; deshalb steht hier * bewusst kein overflow-wrap: break-word / anywhere und kein word-break: break-all. * * `hyphens: manual` schaltet die automatische deutsche Silbentrennung * ausdrücklich ab. Mit `auto` entstanden in den schmalen Spalten Trennungen wie * „Gude Gedan-/ken“ oder „Landesgarten-/schau-Wissen“ – fachlich korrekt, in * einer kompakten Programmübersicht aber unruhig und schlecht lesbar. Ein * ausdrücklich gesetztes weiches Trennzeichen (­) bliebe weiterhin wirksam, * falls redaktionell je eines gepflegt wird. * * text-wrap: balance verteilt zweizeilige Titel sprachlich angenehmer * („Bauernregel / des Tages“ statt „Bauernregel des / Tages“). Browser ohne * Unterstützung ignorieren die Zeile schlicht – es entsteht keine Abhängigkeit. */ .radio-gude-sendeplan .rgs-punkt-titel { display: block; min-width: 0; color: var(--rgs-text); overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; } .radio-gude-sendeplan .rgs-punkt-inhalt { min-width: 0; } /* Moderation – als kleine zweite Zeile, wo die API eine Person nennt. */ .radio-gude-sendeplan .rgs-punkt-moderation { display: block; margin-top: 0.05rem; font-size: 0.82em; line-height: 1.25; color: var(--rgs-gedaempft); overflow-wrap: normal; word-break: normal; } .radio-gude-sendeplan .rgs-punkt--sendung .rgs-punkt-titel { font-weight: 700; } /* ── Kalenderaktionen am Programmpunkt ──────────────────────────────── */ /* * Genau **eine** Aktion je Sendung (Issue #114): die Glocke für „diesen einen * Termin einmalig in meinen Kalender“. Das Sendungsabo, das bis 0.1.43 * daneben stand, ist in das Auswahl-Modal gewandert – zwei ähnlich aussehende * Angebote an derselben Karte waren eine Entscheidung, die niemand treffen * wollte. * * Die Hülle bleibt trotzdem. Sie ist es, die im Sieben-Spalten-Raster absolut * in der Kartenecke sitzt und die Sprechblase auf Kartenbreite hält. * * In der kompakten Liste – auf dem Telefon die einzige Darstellung – sitzt die * Hülle in der Titelspalte unter dem Titel. `grid-column: 2` setzt sie dorthin; * die Zeile darunter ergibt sich von selbst, weil sie das letzte Kind der Karte * ist. Sie ist so breit wie ihr Inhalt und drückt in der schmalen Zeitspalte * nichts auseinander. * * `flex-wrap: wrap` bleibt ebenfalls: Die Karte kann in einem fremden Theme * schmaler werden als die Schaltfläche breit ist, und dann soll sie umbrechen * statt die Zeile zu sprengen. Im Sieben-Spalten-Raster wird aus der * Schaltfläche ein dezentes Symbol in der Kartenecke – siehe weiter unten. */ .radio-gude-sendeplan .rgs-kalender-aktionen { grid-column: 2; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; min-width: 0; } /* * Der Verweis auf die Einzeldatei einer Sendung – seit Issue #114 die einzige * Aktion an der Karte. * * Es kommt kein neuer Farbwert hinzu: heller roter Grund, roter Rand in * derselben Deckung wie der Nachrichtenfuß des Widgets, dunkles Rot als Schrift. */ .radio-gude-sendeplan .rgs-kalender-knopf { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.35rem 0.7rem; border: 1px solid rgba(218, 0, 0, 0.22); border-radius: 4px; background: var(--rgs-rot-zart); color: var(--rgs-rot-dunkel); font-size: 0.8em; font-weight: 700; line-height: 1.2; text-decoration: none; } .radio-gude-sendeplan .rgs-kalender-knopf:hover, .radio-gude-sendeplan .rgs-kalender-knopf:focus { background: var(--rgs-weiss); border-color: var(--rgs-rot); color: var(--rgs-rot-dunkel); text-decoration: none; } .radio-gude-sendeplan .rgs-kalender-knopf:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: 2px; } .radio-gude-sendeplan .rgs-kalender-symbol { display: inline-flex; flex: 0 0 auto; align-items: center; } .radio-gude-sendeplan .rgs-kalender-knopf .rgs-icon { width: 18px; height: 18px; } /* * Die Sprechblase an der Kalenderaktion (Issue #90, seit #114 an einer statt * an zwei Aktionen). * * Sie erklärt genau dort, wo von der Aktion nur noch ein Symbol übrig ist: * im Sieben-Spalten-Raster. Solange die Beschriftung neben dem Symbol steht – * in der kompakten Liste und auf dem Telefon –, sagte die Blase dasselbe ein * zweites Mal; deshalb schaltet sie nicht die Breite frei, sondern das Raster * selbst. `--rgs-kalender-hinweis` steht hier auf `none` und wird unten in den * beiden Blöcken des Rasters auf `block` gesetzt. Eine eigene Medienabfrage * kommt für den Kalender damit nicht hinzu. * * Der Text kommt aus `data-rgs-hinweis` am Verweis selbst – dieselbe Quelle * für Mauszeiger und Tastatur, es gibt ihn also nicht zweimal im Markup. Der * zugängliche Name steht unabhängig davon im `aria-label`: Ein Bildschirmleser * liest kein `content` aus CSS, und er soll zusätzlich die Sendung hören. * * Gezeigt wird bei `:hover` und bei `:focus-visible` – nicht bei `:focus`. * Nach einem Mausklick bliebe die Blase sonst stehen, obwohl der Zeiger längst * woanders ist; beim Durchtabben erscheint sie dagegen zuverlässig. * * Aus dem Bildschirm laufen kann sie nicht: Sie ist an die Hülle der Aktionen * gebunden, und die spannt im Raster die volle Kartenbreite (siehe unten). Die * Blase ist deshalb höchstens so breit wie die Karte, bricht sonst um und sitzt * an deren rechter Kante – in der Montagsspalte genauso wie in der Sonntags- * spalte. Sie liegt unter dem Symbol und damit im eigenen Kartenkopf; sie * verdeckt nichts, was der Besucher in diesem Moment nicht ohnehin selbst * angesteuert hätte, und verschwindet mit dem Zeiger wieder. * * Farben sind die vorhandenen: dunkler Grundton des Plugins, weiße Schrift. * Dieses Paar liest sich auf einem hellen wie auf einem dunklen Theme und * bringt keinen neuen Farbwert mit. * * Die 7 im `z-index` sitzt bewusst in der Mitte der vorhandenen Ordnung: über * den Nachbarkarten (0), über einem hervorgehobenen Suchtreffer (5) und über * der Jetzt-Linie (6) – aber unter dem klebenden Tageskopf (10) und unter der * Bedienleiste (20). Beide bleiben damit stehen, wo sie stehen; verdeckt werden * kann die Blase von ihnen nicht, denn wer ein Symbol anzeigen kann, hat die * Karte ohnehin unter ihnen hervor. */ .radio-gude-sendeplan .rgs-kalender-knopf::after { content: attr(data-rgs-hinweis); display: var(--rgs-kalender-hinweis, none); position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; width: fit-content; max-width: 100%; margin-left: auto; z-index: 7; padding: 0.25rem 0.4rem; border-radius: 4px; background: var(--rgs-text); color: var(--rgs-weiss); font-size: 0.68rem; font-weight: 600; line-height: 1.3; text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; } .radio-gude-sendeplan .rgs-kalender-knopf:hover::after, .radio-gude-sendeplan .rgs-kalender-knopf:focus-visible::after { opacity: 1; visibility: visible; } /* ── Das Gesamtangebot am Fuß der Woche ─────────────────────────────── */ /* * Textblock links, Schaltfläche am Ende. Auf schmalen Geräten bricht die Zeile * um, und die Schaltfläche nimmt die volle Breite ein; eine eigene * Medienabfrage braucht es dafür nicht. * * Das Kalendersymbol links ist mit Issue #114 entfallen: Seit die Schaltfläche * selbst das Kalenderblatt trägt, stand es zweimal in derselben Zeile. */ .radio-gude-sendeplan .rgs-kalenderangebot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.1rem 0 0; padding: 0.7rem 0.8rem; background: var(--rgs-flaeche); border: 1px solid var(--rgs-linie); border-left: 3px solid var(--rgs-rot); border-radius: 3px; } .radio-gude-sendeplan .rgs-kalenderangebot-text { display: block; /* Wächst mit, darf aber schrumpfen: In einer schmalen Spalte rückt die Schaltfläche dadurch in die nächste Zeile, statt die Zeile zu sprengen. */ flex: 1 1 12rem; min-width: 0; } .radio-gude-sendeplan .rgs-kalenderangebot-titel { display: block; font-size: 0.9rem; font-weight: 700; line-height: 1.25; color: var(--rgs-text); } .radio-gude-sendeplan .rgs-kalenderangebot-satz { display: block; font-size: 0.85rem; line-height: 1.35; color: var(--rgs-gedaempft); } /* * Die Hauptaktion – im Wochenfuß wie im Sidebar-Baustein dieselbe Schaltfläche. * Auf schmalen Geräten über die volle Breite (`flex: 1 1 100%` greift erst, * wenn die Zeile ohnehin umgebrochen ist), immer mindestens 44 px hoch. */ .radio-gude-sendeplan .rgs-kalender-abo, .radio-gude-kalender-widget .rgs-kalender-abo { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; padding: 0.55rem 0.9rem; border: 1px solid var(--rgs-rot); border-radius: 4px; background: var(--rgs-rot); color: var(--rgs-weiss); font-size: 0.9rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; } .radio-gude-sendeplan .rgs-kalender-abo { /* Neben dem Text bleiben, solange Platz ist – sonst eine eigene Zeile. */ flex: 0 1 auto; } .radio-gude-sendeplan .rgs-kalender-abo:hover, .radio-gude-sendeplan .rgs-kalender-abo:focus, .radio-gude-kalender-widget .rgs-kalender-abo:hover, .radio-gude-kalender-widget .rgs-kalender-abo:focus { background: var(--rgs-rot-dunkel); border-color: var(--rgs-rot-dunkel); color: var(--rgs-weiss); text-decoration: none; } .radio-gude-sendeplan .rgs-kalender-abo:focus-visible, .radio-gude-kalender-widget .rgs-kalender-abo:focus-visible { outline: 2px solid var(--rgs-rot-dunkel); outline-offset: 2px; } /* Das Symbol trägt hier die Schriftfarbe – Weiß auf Rot. */ .radio-gude-sendeplan .rgs-kalender-abo .rgs-icon, .radio-gude-kalender-widget .rgs-kalender-abo .rgs-icon { --rgs-icon-akzent: currentColor; width: 20px; height: 20px; } /* * Zeitdarstellung: in der kompakten Liste die konkrete Uhrzeit aus `start`, * im Sieben-Spalten-Layout der vollständige öffentliche Zeittext. Immer nur * eine der beiden Angaben steht im Dokument sichtbar. */ /* ── Auswahl: „Wo läuft das noch?" ──────────────────────────────────── */ /* * Ein Klick auf einen Programmpunkt hebt alle seine übrigen Vorkommen in der * dargestellten Woche mit hervor – bei einer Sendung wie bei einem Beitrag * (Issue #91). Zusammengehörig sind sie über die Inhaltskennung, nie über den * Titel. * * Die erste Fassung war zu leise: Sie setzte einen Grund von 233 gegen ein * Umfeld von 238 – fünf Helligkeitsstufen, die zwischen den Grundtönen * untergingen. Die Gruppe arbeitet jetzt mit dem Gegensatz zum Umfeld statt * mit einer eigenen Farbe: * * – die Gruppe bekommt die hellste Fläche des Plans und eine deutlich * sichtbare, aber neutrale Kontur, * – alles andere tritt gleichzeitig zurück (siehe unten). * * Bewusst ohne Rot: Diese Farbe trägt im Wochenplan bereits zwei Aussagen – * die linke Kante einer Sendung und den Suchtreffer. Eine dritte hätte beide * verwässert. Die Kontur liegt als innerer Schein im Kasten und verschiebt * deshalb nichts; Schriftgrößen bleiben unberührt. * * Fällt Gruppe und Suchtreffer auf denselben Punkt, gewinnt der Treffer: * Seine Regeln stehen weiter unten und überschreiben diese. */ .radio-gude-sendeplan .rgs-punkt--gruppe { /* Bewusst `background-color` und nicht die Kurzform: Diese setzte das Hintergrundbild zurück, und mit ihm die farbige Ecke des Beitrags. Sie soll in der ausgewählten Gruppe gerade voll sichtbar bleiben. */ background-color: var(--rgs-weiss); box-shadow: inset 0 0 0 2px #8e8e96; /* Gegen die Abblendung der übrigen Punkte – die Gruppe bleibt voll da. */ opacity: 1; filter: none; } /* * Solange eine Gruppe ausgewählt ist, tritt alles andere zurück: die übrigen * Beiträge ebenso wie die Sendungen. Die Regel nimmt keinen Eintragstyp aus – * was nicht zur Auswahl gehört, gehört zur Hintergrundebene, gleich ob Sendung * oder Beitrag. * * Zurückgenommen, nicht ausgeblendet: Bei dieser Deckkraft bleibt jede Zeile * lesbar, und der Plan lässt sich weiter überblicken. Ein Suchtreffer ist * ausgenommen; er behält seinen Vorrang. */ .radio-gude-sendeplan { --rgs-gruppe-abblendung: 0.34; } .radio-gude-sendeplan.rgs-hat-gruppe .rgs-punkt:not(.rgs-punkt--gruppe):not(.rgs-punkt--treffer) { opacity: var(--rgs-gruppe-abblendung, 0.34); transition: opacity 0.25s ease; } /* * Die Tagesköpfe bleiben voll lesbar – ohne sie wüsste man nicht, an welchem * Tag die hervorgehobenen Ausstrahlungen liegen. Genau darum geht es hier. * Dieselbe Ausnahme gilt bereits während einer Suche. */ .radio-gude-sendeplan.rgs-hat-gruppe .rgs-tagkopf, .radio-gude-sendeplan.rgs-hat-gruppe .rgs-hinweise, .radio-gude-sendeplan.rgs-hat-gruppe .rgs-wochenkopf { opacity: 1; filter: none; } /* * Bedienbar ist jeder Programmpunkt, der eine Kennung trägt – und nur dort, wo * das Skript die Bedienung eingerichtet hat; auf dem Telefon tut es das nicht. * Diese Grenze verläuft nach der Bildschirmbreite und nicht nach dem * Eintragstyp: Sendung und Beitrag werden gleich behandelt. Ohne Skript bleibt * der Programmpunkt ein gewöhnlicher Listeneintrag ohne Zeigerwechsel. */ .radio-gude-sendeplan[data-rgs-gruppen] .rgs-punkt[data-rgs-inhalt] { cursor: pointer; } /* * Ein sichtbarer Fokus, sobald der Programmpunkt wirklich bedienbar ist. * `:focus-visible` zeigt ihn bei Tastaturbedienung und lässt ihn beim Klicken * mit der Maus weg – dieselbe Erwartung wie bei den übrigen Bedienelementen. * * Der Tabstopp liegt am Titel und nicht am ganzen Listeneintrag: Eine * Sendungskarte trägt die beiden Kalenderverweise in sich, und die dürfen * weder in einem `role="button"` verschwinden noch dessen Tastatur abbekommen * (Issue #91, siehe `auswahlschalter()` im Skript). Der Ring liegt deshalb um * die Titelzeile – knapp außerhalb, damit er die Schrift nicht berührt. */ .radio-gude-sendeplan[data-rgs-gruppen] .rgs-punkt[data-rgs-inhalt] .rgs-punkt-titel:focus-visible { outline: 2px solid var(--rgs-text); outline-offset: 2px; border-radius: 2px; } /* ── Die Pille für eine aktive Auswahl ──────────────────────────────── */ /* * Die Auswahl bleibt beim Wochenwechsel erhalten. In einer Woche ohne * passendes Vorkommen ist deshalb nichts hervorgehoben – ohne einen Hinweis * sähe das aus, als wäre die Auswahl verloren gegangen. * * Sie steht als kleine Pille im vorhandenen Suchfeld, zwischen Lupe und * Eingabe, und damit in der klebenden Leiste: sichtbar, egal wie weit die * Woche gescrollt ist. * * Dieser Platz ist eine Höhenfrage. Als eigene Zeile im Wochenkopf machte der * Hinweis die Leiste höher: Der ganze Plan sprang beim Auswählen nach unten * und beim Aufheben zurück. Im Suchfeld nimmt die Pille Breite von der Eingabe * und keine Höhe von der Seite – ihre Zeile ist niedriger als die des Feldes, * `flex: 0 1 auto` mit `min-width: 0` lässt sie schrumpfen statt drücken, und * ein langer Titel endet in drei Punkten. Der Wochenkopf misst mit Auswahl * genau so viel wie ohne. * * Gesetzt wie ein Merker und nicht wie eine Meldung: zarter roter Grund, keine * Kontur, kleine Schrift. Das Skript erzeugt sie nur, solange eine Auswahl * aktiv ist; ohne Auswahl gibt es das Element gar nicht. */ .radio-gude-sendeplan .rgs-auswahl { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 0.1rem; min-width: 0; /* * Sie darf den größeren Teil des Feldes einnehmen, aber nicht das ganze: * Was der Eingabe bleibt, steht als deren `min-width` unten – zusammen * ergibt das einen lesbaren Titel und ein weiter benutzbares Suchfeld. */ max-width: 70%; padding: 0 0.1rem 0 0.45rem; border-radius: 999px; background: var(--rgs-rot-zart); color: var(--rgs-rot-dunkel); font-size: 0.78rem; line-height: 1.45; white-space: nowrap; } .radio-gude-sendeplan .rgs-auswahl-text { /* Ein langer Titel darf das Feld nicht auseinandertreiben. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * Das Kreuz – dieselbe Aktion, die Escape auslöst, nur sichtbar. Als Knopf * gesetzt, weil es einer ist. */ .radio-gude-sendeplan .rgs-auswahl-loesen { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 1.05em; line-height: 1; cursor: pointer; } /* * Die Tippfläche ist 44 px hoch und liegt unsichtbar über dem Kreuz: Ein * Knopf, der wirklich 44 px misst, machte das Suchfeld höher – und damit * genau den Sprung, den diese Fassung abschafft. Die Pille erscheint ohnehin * erst ab 48 rem, und dort gibt es auch Tablets. */ .radio-gude-sendeplan .rgs-auswahl-loesen::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 44px; transform: translate(-50%, -50%); } .radio-gude-sendeplan .rgs-auswahl-loesen:hover, .radio-gude-sendeplan .rgs-auswahl-loesen:focus { background: var(--rgs-rot); color: var(--rgs-weiss); } .radio-gude-sendeplan .rgs-auswahl-loesen:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: 1px; } /* * Treffer-Hervorhebung nach einer Suche. * * Der gefundene Programmpunkt soll sofort ins Auge springen: kräftiger roter * Rahmen, heller roter Grund, deutlicher Schein und eine sehr dezente * Vergrößerung. Gleichzeitig treten alle übrigen Punkte zurück – abgedunkelt * statt ausgeblendet, damit die Orientierung in der Woche erhalten bleibt. * Kein Blinken. Die Hervorhebung bleibt, bis der Besucher etwas anderes tut – * ein Klick daneben, Escape oder eine neue Suche; sie läuft nicht nach einer * festen Zeit ab. (Der frühere Hinweis auf sechs Sekunden stimmte nicht mehr.) * * `scroll-margin` hält den Treffer frei vom persistenten Player und von * klebrigen Theme-Leisten. */ .radio-gude-sendeplan .rgs-punkt { position: relative; /* Adminleiste + tatsächlich gemessene Leistenhöhe + etwas Luft. So verschwindet ein angesprungener Programmpunkt nie darunter. */ scroll-margin-top: calc(var(--rgs-leiste-oben, 0px) + var(--rgs-leiste-hoehe, 5rem) + var(--rgs-kopfzeile-frei, 0px) + 1.25rem); scroll-margin-bottom: 7rem; } /* * Der Treffer hebt sich allein durch Farbe ab – nicht durch Größe. * * Bis 0.1.25 vergrößerte ihn `transform: scale(1.025)` um zweieinhalb Prozent, * und `transform-origin: left center` schob dieses Mehr vollständig nach * rechts. Auf einem 390 px breiten iPhone maß die Karte 370 px, der Treffer * 379,25 px: Seine rechte Kante lag bei 389,25 statt bei 380 – gut neun Pixel * außerhalb des Inhaltsbereichs. Der rote Ring lag als äußerer Schatten noch * einmal zwei Pixel weiter draußen, bei 391,25, also hinter dem Fensterrand. * Genau diese abgeschnittene rechte Kante war im Screenshot zu sehen. Auf dem * Tablet erzeugte derselbe Faktor sogar echten waagerechten Überlauf * (scrollWidth 912 bei clientWidth 900). * * Beide Ursachen sind beseitigt: * * – Die Vergrößerung entfällt ersatzlos. Treffer und gewöhnliche Karte haben * damit dieselbe Außenbreite, dieselbe Rasterbreite und dieselbe Lage im * Tag – gemessen auf 320, 360, 375 und 390 px. * – Der rote Ring liegt jetzt als `inset` INNEN im Kasten, wie schon beim * Gruppenhighlight. Er kann deshalb nirgends über den Rand hinausragen und * ist immer vollständig zu sehen. Zusammen mit dem roten Kartenrahmen * ergibt das drei rote Pixel Kontur statt zwei – der Treffer ist eher * deutlicher als vorher, nicht leiser. * * Der abgesetzte Schlagschatten bleibt, aber ohne Streuung nach außen: Er * bleibt innerhalb des Seitenrands und wird nirgends angeschnitten. Grund, * Schriftschnitt und Rotton sind unverändert. * * Bewusst NICHT verwendet: `overflow-x: hidden` auf Seite, Plan oder Tag. Das * verstecke nur eine falsch liegende Box; hier stimmt stattdessen die Geometrie. */ .radio-gude-sendeplan .rgs-punkt--treffer { z-index: 5; /* Wie bei der Gruppe: keine Kurzform, damit die farbige Ecke erhalten bleibt. Der Farbwert ist unverändert. */ background-color: #fff1f1; border-color: var(--rgs-rot); border-left-color: var(--rgs-rot); box-shadow: inset 0 0 0 2px var(--rgs-rot), 0 6px 14px rgba(218, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.10); /* * Der Rahmen läuft beim Treffer auf allen vier Seiten in Rot – auch dort, * wo die gewöhnliche Karte keine Kante trägt. Im Sieben-Spalten-Raster * steht `--rgs-punkt-kante` auf 0; ohne diese drei Zeilen bliebe der * Treffer dort oben und rechts offen. Breiter wird er dadurch nicht: * `box-sizing: border-box` gilt im ganzen Plugin. */ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; opacity: 1; filter: none; transition: background-color 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease; } .radio-gude-sendeplan .rgs-punkt--treffer .rgs-punkt-titel { font-weight: 700; color: var(--rgs-text); } .radio-gude-sendeplan .rgs-punkt--treffer .rgs-punkt-zeit { color: var(--rgs-rot); font-weight: 700; } /* * Während ein Treffer leuchtet, nimmt sich der Rest zurück. Auf schmalen * Geräten milder, damit alles lesbar bleibt; auf dem Desktop deutlicher, * weil dort viel mehr gleichzeitig zu sehen ist. */ .radio-gude-sendeplan { --rgs-abblendung: 0.5; --rgs-entsaettigung: 0.25; } @media (min-width: 48rem) { .radio-gude-sendeplan { --rgs-abblendung: 0.3; --rgs-entsaettigung: 0.45; } /* Auf dem Desktop ist Platz für das größere Symbol. */ .radio-gude-sendeplan .rgs-hinweise { --rgs-hinweis-icon: 42px; } } .radio-gude-sendeplan.rgs-hat-treffer .rgs-punkt:not(.rgs-punkt--treffer) { opacity: var(--rgs-abblendung, 0.4); filter: grayscale(var(--rgs-entsaettigung, 0.35)); transition: opacity 0.45s ease, filter 0.45s ease; } /* Tagesköpfe und Hinweise bleiben lesbar – sonst ginge die Orientierung verloren. */ .radio-gude-sendeplan.rgs-hat-treffer .rgs-tagkopf, .radio-gude-sendeplan.rgs-hat-treffer .rgs-hinweise, .radio-gude-sendeplan.rgs-hat-treffer .rgs-wochenkopf { opacity: 1; filter: none; } @media (prefers-reduced-motion: reduce) { .radio-gude-sendeplan .rgs-punkt--treffer, .radio-gude-sendeplan.rgs-hat-treffer .rgs-punkt:not(.rgs-punkt--treffer), .radio-gude-sendeplan.rgs-hat-gruppe .rgs-punkt:not(.rgs-punkt--gruppe) { transition: none; } } /* ── „Läuft gerade" und die Jetzt-Linie ─────────────────────────────── */ /* * Eine eigene Ebene – bewusst neben den vorhandenen Zuständen und nicht auf * ihnen. * * Der Plan kennt schon drei Hervorhebungen, und alle drei arbeiten mit der * Fläche der Karte: der Suchtreffer (roter Grund, roter Ring), die Gruppe * (weißer Grund, grauer Ring) und die Farbe des Elements (Ecke beim Beitrag, * linke Kante bei der Sendung). Eine vierte, die dieselbe Fläche noch einmal * einfärbte, verdeckte eine der drei – und genau das darf die Jetzt-Markierung * nicht. Ein Programmpunkt, der gerade läuft und zugleich der gefundene ist, * muss beides sagen. * * Sie liegt deshalb als eigenes Element IM Kasten (`::after`) und rührt weder * Hintergrund noch Rahmen an. Wer einen laufenden Suchtreffer vor sich hat, * sieht innen den roten Ring des Treffers und darüber den petrolfarbenen der * Jetzt-Ebene; beide bleiben ganze Ringe und beide bleiben lesbar. `::before` * bleibt unangetastet – dort sitzt die farbige Ecke eines Beitrags. * * Rot war keine Wahl: Es trägt hier bereits die linke Kante einer Sendung, den * Suchtreffer und die HEUTE-Marke. Ein vierter roter Zustand wäre kein eigener * mehr. Das Petrol kommt im Plan sonst nicht vor und steht auf Weiß mit 6,1:1 * deutlich über dem Schwellenwert. * * Größe und Lage der Karte bleiben unberührt: Das Element liegt absolut im * vorhandenen Kasten, erzeugt weder Höhe noch Breite und fängt keine Klicks * ab. Der Wechsel von einem laufenden Programmpunkt zum nächsten ist deshalb * ein Farbwechsel und kein Umbruch – nichts springt. * * Was während einer Suche oder einer Auswahl zurücktritt, tritt auch hier * zurück: Der laufende Programmpunkt ist von der Abblendung nicht ausgenommen. * Die neue Ebene drängt sich nicht vor die Aussage, die der Besucher selbst * ausgelöst hat. */ .radio-gude-sendeplan { --rgs-jetzt: #0a6b74; } .radio-gude-sendeplan .rgs-punkt--jetzt::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid var(--rgs-jetzt); /* Rein anzeigend – der Ring nimmt keiner Kalenderaktion den Klick weg. */ pointer-events: none; } /* * Die Jetzt-Linie – wo auf der Zeitachse wir gerade stehen. * * Zwei Aussagen, zwei Ebenen: Der Ring oben sagt, WAS gerade läuft; diese * Linie sagt, WANN gerade ist. Bis 0.1.38 war sie die Kante einer Karte * (`::after` der ersten ausstehenden) und konnte deshalb nur dort liegen, wo * eine Karte anfängt – sie wirkte an das nächste Element angeheftet statt an * die Uhr. Jetzt ist sie ein eigenes Element im Wochenraster und liegt auf * genau der Höhe, die die Uhrzeit verlangt; die Höhe misst und setzt das * Skript (siehe `linienhoehe` in frontend.js). * * Sie läuft über die ganze Breite des Rasters. Im Sieben-Spalten-Raster ist * das keine Anmaßung, sondern die Aussage selbst: Eine Rasterzeile steht dort * in allen sieben Spalten für dieselbe Tageszeit. * * Gestrichelt, damit sie sich von den durchgezogenen Kanten des Plans * unterscheidet und nicht als Rahmen einer Karte gelesen wird. Dieselbe Farbe * wie der Ring: Beide sagen dasselbe Wort. * * Absolut und ohne eigene Höhe: Sie erzeugt keine Rasterzeile, verschiebt * keine Karte und ändert keine Kartenabmessung. `margin-top: -1px` legt ihre * Mitte auf die gemessene Höhe statt ihre Oberkante. * * Über den Karten, aber unter den klebenden Tagesköpfen: 6 liegt über dem * hervorgehobenen Suchtreffer (5) und unter dem Tageskopf (10). Beim Scrollen * verschwindet sie deshalb hinter dem Kopf, statt über ihm zu liegen. */ .radio-gude-sendeplan .rgs-jetztlinie { position: absolute; top: 0; right: 0; left: 0; height: 0; margin-top: -1px; border-top: 2px dashed var(--rgs-jetzt); z-index: 6; pointer-events: none; } /* * Was während einer Suche oder einer Auswahl zurücktritt, tritt auch hier * zurück – dieselbe Entscheidung wie beim Ring, und mit denselben Werten. Als * Kante einer abgeblendeten Karte geschah das früher von selbst; als eigenes * Element braucht die Linie die Regel ausdrücklich. */ .radio-gude-sendeplan.rgs-hat-treffer .rgs-jetztlinie { opacity: var(--rgs-abblendung, 0.4); } .radio-gude-sendeplan.rgs-hat-gruppe .rgs-jetztlinie { opacity: var(--rgs-gruppe-abblendung, 0.34); } .radio-gude-sendeplan .rgs-badge--wdh, .radio-gude-programm-widget .rgs-badge--wdh { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0 0.25rem 0 0.15rem; border: 1px solid var(--rgs-linie); border-radius: 2px; background: var(--rgs-weiss); font-size: 0.65em; font-weight: 600; color: var(--rgs-gedaempft); vertical-align: 0.1em; white-space: nowrap; } /* * Kennzeichen einer künstlichen Stimme. Es steht hinter dem Namen in derselben * Zeile – deshalb `inline`, keine eigene Zeilenhöhe und kein Außenabstand nach * unten. Bewusst grau und leise: es ist eine Angabe, keine Warnung. Dieselbe * Fläche und Kante wie die übrigen kleinen Kennzeichen; die Schriftgröße ist * relativ, damit es in der ohnehin kleineren Moderationszeile mitschrumpft und * auf schmalen Geräten lesbar bleibt. */ .radio-gude-sendeplan .rgs-badge--ki, .radio-gude-programm-widget .rgs-badge--ki { display: inline; padding: 0 0.28rem; border: 1px solid var(--rgs-linie); border-radius: 2px; background: var(--rgs-flaeche); font-size: 0.82em; font-weight: 600; color: var(--rgs-gedaempft); white-space: nowrap; } .radio-gude-sendeplan .rgs-badge--wdh .rgs-icon { width: 11px; height: 11px; stroke-width: 2.1; } .radio-gude-sendeplan .rgs-woche-container[data-rgs-laedt] { opacity: 0.55; transition: opacity 0.12s; } /* ── Störungshinweis ────────────────────────────────────────────────── */ .radio-gude-sendeplan .rgs-stoerung, .radio-gude-programm-widget .rgs-stoerung { margin: 0; padding: 0.7rem 0.85rem; background: var(--rgs-flaeche); border-left: 3px solid var(--rgs-linie); font-size: 0.9rem; color: var(--rgs-gedaempft); } /* * Sieben Tage nebeneinander – aber nur, wenn der Container das wirklich hergibt. * Unterhalb dieser Breite bleibt es bei der kompakten Liste untereinander; ein * Zwischenschritt mit zwei oder drei Tagesspalten existiert bewusst nicht. * * Woher die 62 rem kommen – gerechnet, nicht geraten: * * Overhead je Spalte = 2 × 0,35 rem Polster + 3 px Farbkante + 1 px Trennlinie * = 15,2 px * längstes Einzelwort = „Veranstaltungstipps“ bei 0,78 rem ≈ 120,6 px * Mindestspalte = 135,8 px → Mindestcontainer ≈ 950 px * * 62 rem (992 px) ist die kleinste runde Schwelle darüber und lässt je Spalte * rund 6 px Reserve – genug, damit weder die Pixelrundung von 1fr noch eine * etwas breiter laufende Theme-Schrift etwas kippt. Bliebe ein Wort doch zu * lang, greift die Silbentrennung; ein Bruch mitten im Wort entsteht nie. * * Der Regelsatz steht genau einmal und wird zweimal eingehängt: über eine * Container-Abfrage (die richtige Technik, weil die Containerbreite zählt) und * über eine Bildschirmabfrage als Rückfallebene für Browser ohne * Container-Abfragen. Beide verwenden dieselbe Schwelle. */ @container rgs-woche (min-width: 62rem) { /* * Die Tages- und Listenboxen lösen sich auf, damit alle Programmpunkte * direkt im Wochenraster liegen und gleiche Startzeiten dieselbe Zeile * teilen. Kennt ein Browser `display: contents` nicht, verwirft er genau * diese Zeile: dann bleiben sieben unabhängige Tagesspalten – dieselbe * Darstellung wie zuvor, nur ohne horizontale Ausrichtung. */ .radio-gude-sendeplan .rgs-tag, .radio-gude-sendeplan .rgs-programme { display: contents; } .radio-gude-sendeplan .rgs-tagkopf { padding-left: var(--rgs-zellen-polster, 0); padding-right: var(--rgs-zellen-polster, 0); } .radio-gude-sendeplan .rgs-tage { --rgs-wochenraster: repeat(7, minmax(0, 1fr)); --rgs-tage-luecke: 0; --rgs-tag-innen: 0; --rgs-tagkopf-groesse: 0.86rem; /* Eine Spalte ist zu schmal für „Zeit links, Titel rechts“: die Zeit steht dort über dem Titel – als voller Zeittext. */ --rgs-punkt-raster: minmax(0, 1fr); --rgs-zeit-kurz-anzeige: none; --rgs-zeit-lang-anzeige: inline; /* Knapper Innenabstand und etwas kleinere Schrift, damit auch die längsten Titel der Woche in jeder der sieben gleich breiten Spalten einzeilig bleiben – auch wenn 1fr um ein Pixel rundet. */ --rgs-punkt-polster: 0.35rem; --rgs-titel-groesse: 0.78rem; /* Ohne Kante oben und rechts – der Abschluss der Karte entsteht hier nicht aus Rahmen, sondern aus inneren Scheinen. Warum, steht unter „Der Rahmen einer Karte schließt sich selbst“ weiter unten. */ --rgs-punkt-kante: 0px; --rgs-abschluss-rechts: inset -1px 0 0 0 var(--rgs-linie); --rgs-zellen-polster: 0.45rem; --rgs-spaltenlinien: repeating-linear-gradient(to right, transparent 0 calc(100% / 7 - 1px), var(--rgs-linie) calc(100% / 7 - 1px) calc(100% / 7)); } /* * Der Rahmen einer Karte schließt sich selbst. * * Im Sieben-Spalten-Raster trug die Karte bis 0.1.38 weder oben noch rechts * eine Kante. Für die rechte sollten die senkrechten Spaltenlinien * einspringen, die als Hintergrund im Wochenraster liegen. Das ging nicht * auf: Eine Karte deckt ihre ganze Spalte ab – bei 1280 px Fenster von 16 * bis 194,28 px –, und die Spaltenlinie sitzt im letzten Pixel genau dieser * Spalte. Der deckende Grund der Karte (#fff bei einer Sendung, #fafafa bei * einem Beitrag) lag also davor. Sichtbar blieb die Linie nur in den leeren * Zellen dazwischen; an der Karte selbst verschwand sie. Zusammen mit der * fehlenden Unterkante des jeweils letzten Punktes einer Spalte entstand * daraus die offene rechte untere Ecke. * * Jede Karte zeichnet ihre Kanten deshalb selbst, und zwar als inneren * Schein. Das ist kein Schmuck, sondern der einzige Weg ohne Nebenwirkung: * * – Ein `border` an derselben Stelle nähme dem Inhalt ein Pixel Breite * und der Karte ein Pixel Höhe. Beides ist im Wochenraster gerechnet * (siehe die 62-rem-Schwelle oben), und die Karte soll ihre Maße * behalten – auch die Rasterzeilen bleiben so, wie sie sind. * – Ein Schein liegt im vorhandenen Kasten. Er erzeugt weder Höhe noch * Breite, verschiebt keine Rasterzeile und kann keinen Umbruch * auslösen. * * Gezeichnet wird nur, was sonst niemand zeichnet – sonst stünden zwei * Linien, wo eine gemeint ist: * * rechts immer. Rechts von einer Karte steht nie eine zweite Karte, * die diese Kante mitbrächte. * unten beim letzten Punkt einer Spalte. Bei allen anderen ist die * Trennlinie zur nächsten Karte deren gemeinsame Kante – eine * Linie, nicht zwei, genau wie in der kompakten Liste. * oben bei einer Karte, über der in ihrer Spalte keine steht: der * ersten des Tages und jeder, die auf eine Lücke im Zeilenraster * folgt. Welche das sind, weiß der Renderer beim Platzieren – * er setzt dafür `rgs-punkt--oberkante`. CSS kann es nicht * wissen: Zwei Karten können im Markup aufeinanderfolgen und * trotzdem in weit auseinanderliegenden Rasterzeilen sitzen. * * Farbe und Stärke sind unverändert: dieselbe feine Linie (`--rgs-linie`), * die den Plan ohnehin gliedert. Es kommt kein neuer Farbwert hinzu. * * Suchtreffer und Auswahl setzen einen eigenen `box-shadow` und * lösen diesen damit ab. Das ist richtig so: Beide legen einen vollständig * umlaufenden Ring um die Karte (2 px rot bzw. 2 px grau) und schließen sie * damit erst recht. Der Grundrahmen verschwindet in keinem Zustand – die * farbige Ecke sitzt im Hintergrundbild, der Ring der Jetzt-Ebene in * `::after`, und keiner der beiden rührt den `box-shadow` an. */ .radio-gude-sendeplan .rgs-punkt:last-child { --rgs-abschluss-unten: inset 0 -1px 0 0 var(--rgs-linie); } .radio-gude-sendeplan .rgs-punkt--oberkante { --rgs-abschluss-oben: inset 0 1px 0 0 var(--rgs-linie); } /* * Im Sieben-Spalten-Raster ist der Tageskopf selbst ein Rasterfeld. Ein * Rasterfeld klebt nur innerhalb seines eigenen Feldes – in seiner einen * Kopfzeile hätte es keinen Weg vor sich und bliebe wirkungslos. Der Kopf * spannt sein Feld deshalb über alle belegten Zeilen der Woche und sitzt an * dessen oberem Rand. Wie viele Zeilen das sind, sagt `--rgs-kopfspanne`: * die tatsächlich belegte Zeilenzahl, die der Renderer beim Platzieren * mitzählt – es entstehen keine Zeilen auf Vorrat. */ /* * Ein angesprungener Suchtreffer muss auch unter dem höchsten Tageskopf * hervorkommen – und das ist hier der heutige, mit seiner Markenzeile. */ .radio-gude-sendeplan { --rgs-kopfzeile-frei: calc(var(--rgs-tagkopf-hoehe, 2.4rem) + var(--rgs-marke-zeile-hoehe)); } .radio-gude-sendeplan .rgs-tagkopf { grid-row: 1 / span var(--rgs-kopfspanne, 2); align-self: start; /* Die senkrechten Spaltenlinien liegen als Hintergrund im Wochenraster und lägen sonst hinter der deckenden Fläche. Auf dem Kopf laufen sie deshalb selbst weiter – dieselbe Farbe an derselben Stelle. */ background-image: linear-gradient(to left, var(--rgs-linie) 0 1px, transparent 1px); } /* * Im Sieben-Spalten-Raster wird aus der Kalenderaktion ein dezentes Symbol in * der oberen rechten Ecke der Karte: die Glocke für „diesen einen Termin * einmalig in meinen Kalender“. Seit Issue #114 ist es genau eines – das * Kalenderblatt daneben ist mit dem Sendungsabo ins Auswahl-Modal gewandert. * * Die Hülle liegt absolut im vorhandenen Polster: Die Karte wird dadurch * weder höher noch breiter, keine Rasterzeile der Woche verschiebt sich, und * der Plan bleibt so kompakt, wie er am Schreibtisch sein soll. Sichtbar * bleibt allein das Symbol – den Namen des Verweises trägt sein `aria-label`, * das die Sendung mitnennt; ohne es hätte der Verweis hier gar keinen. * * Genau hier – und nur hier – erklärt sich das Symbol beim Zeigen und beim * Tabben selbst: `--rgs-kalender-hinweis` schaltet die Sprechblase frei, die * weiter oben beschrieben ist. * * Damit die Blase nie über den Kartenrand hinausläuft, spannt die Hülle die * volle Breite der Karte statt nur die des Symbols; `flex-end` hält das * Symbol trotzdem in der rechten Ecke. Die Hülle liegt damit über der * Zeitzeile – für den Zeiger ist sie deshalb nicht vorhanden * (`pointer-events: none`), und nur der Verweis darin nimmt ihn wieder an. * Die Zeitangabe bleibt markierbar, und ein Klick auf die Karte bleibt ein * Klick auf die Karte. */ .radio-gude-sendeplan .rgs-kalender-aktionen { --rgs-kalender-hinweis: block; position: absolute; top: 0; left: 0; right: 0; /* Die Karte ist ein Raster, und für ein absolut gesetztes Rasterkind gilt `justify-self` weiter: Mit dem `start` der Grundregel bliebe die Hülle so breit wie ihr Symbol, und `left`/`right` blieben ohne Wirkung. Die Sprechblase darunter wäre dann nicht kartenbreit, sondern symbolbreit – und bräche in einzelne Silben um. */ justify-self: stretch; /* Ohne diese Angabe legte die Hülle im einspaltigen Kartenraster eine zweite Rasterspalte an. */ grid-column: 1; justify-content: flex-end; margin: 0; pointer-events: none; } .radio-gude-sendeplan .rgs-kalender-knopf { min-height: 0; margin: 0; padding: 0.1rem 0.15rem; border: 0; background: none; color: var(--rgs-gedaempft-punkt, #616161); pointer-events: auto; } .radio-gude-sendeplan .rgs-kalender-knopf:hover, .radio-gude-sendeplan .rgs-kalender-knopf:focus { background: none; border-color: transparent; color: var(--rgs-rot); } .radio-gude-sendeplan .rgs-kalender-knopf .rgs-kalender-text { display: none; } .radio-gude-sendeplan .rgs-kalender-knopf .rgs-icon { width: 14px; height: 14px; } /* Der Platz für das Symbol wird freigehalten, damit es nie auf der Zeitangabe liegt. Nur Karten mit einer Kalenderaktion tragen diese Klasse. Seit Issue #114 ist es ein Symbol statt zweier – die Zeitzeile bekommt entsprechend weniger Polster zurück. */ .radio-gude-sendeplan .rgs-punkt--kalender .rgs-punkt-zeit { padding-right: 1.5rem; } /* * Weil der Kopf jetzt über alle Zeilen spannt, bemisst er die erste * Rasterzeile nicht mehr. Diesen Platz hält ein leerer Platzhalter frei. * * Er ist so hoch wie ein Tageskopf OHNE HEUTE-Marke – dieses Maß misst das * Skript, und es ist in jeder Woche dasselbe, weil überall dieselben * Wochentagsnamen stehen – zuzüglich der Zeile, die die Marke einnimmt. * Damit beginnt das Wochenraster mit und ohne HEUTE geometrisch identisch, * und die Marke braucht dafür keinen leeren Zwilling in den übrigen sechs * Tagesköpfen: Die trägt niemand, sie bleiben kompakt. Der heutige Kopf ragt * einfach in den Platz hinein, der ohnehin für ihn frei ist. * * Ohne Skript greift ein Rückfallwert, der auch für einen zweizeiligen Kopf * reicht. * * Der Platzhalter setzt voraus, dass sich die Tagesbox auflöst. Kennt ein * Browser `display: contents` nicht, bleibt es bei sieben eigenständigen * Spalten – dort wäre er nur eine Lücke und entsteht deshalb gar nicht. */ @supports (display: contents) { .radio-gude-sendeplan .rgs-tag::before { content: ""; grid-column: var(--rgs-spalte, auto); grid-row: 1; height: calc(var(--rgs-tagkopf-hoehe, 2.6rem) + var(--rgs-marke-zeile-hoehe) + var(--rgs-tagkopf-abstand, 0.35rem)); } } } @supports not (container-type: inline-size) { @media (min-width: 62rem) { .radio-gude-sendeplan .rgs-tag, .radio-gude-sendeplan .rgs-programme { display: contents; } .radio-gude-sendeplan .rgs-tagkopf { padding-left: var(--rgs-zellen-polster, 0); padding-right: var(--rgs-zellen-polster, 0); } .radio-gude-sendeplan .rgs-tage { --rgs-wochenraster: repeat(7, minmax(0, 1fr)); --rgs-tage-luecke: 0; --rgs-tag-innen: 0; --rgs-tagkopf-groesse: 0.86rem; /* Eine Spalte ist zu schmal für „Zeit links, Titel rechts“: die Zeit steht dort über dem Titel – als voller Zeittext. */ --rgs-punkt-raster: minmax(0, 1fr); --rgs-zeit-kurz-anzeige: none; --rgs-zeit-lang-anzeige: inline; /* Knapper Innenabstand und etwas kleinere Schrift, damit auch die längsten Titel der Woche in jeder der sieben gleich breiten Spalten einzeilig bleiben – auch wenn 1fr um ein Pixel rundet. */ --rgs-punkt-polster: 0.35rem; --rgs-titel-groesse: 0.78rem; /* Ohne Kante oben und rechts – der Abschluss der Karte entsteht hier nicht aus Rahmen, sondern aus inneren Scheinen. Warum, steht unter „Der Rahmen einer Karte schließt sich selbst“ weiter unten. */ --rgs-punkt-kante: 0px; --rgs-abschluss-rechts: inset -1px 0 0 0 var(--rgs-linie); --rgs-zellen-polster: 0.45rem; --rgs-spaltenlinien: repeating-linear-gradient(to right, transparent 0 calc(100% / 7 - 1px), var(--rgs-linie) calc(100% / 7 - 1px) calc(100% / 7)); } /* Unterkante und Oberkante dort, wo keine Nachbarkarte sie mitzeichnet. Siehe „Der Rahmen einer Karte schließt sich selbst“. */ .radio-gude-sendeplan .rgs-punkt:last-child { --rgs-abschluss-unten: inset 0 -1px 0 0 var(--rgs-linie); } .radio-gude-sendeplan .rgs-punkt--oberkante { --rgs-abschluss-oben: inset 0 1px 0 0 var(--rgs-linie); } /* * Im Sieben-Spalten-Raster ist der Tageskopf selbst ein Rasterfeld. Ein * Rasterfeld klebt nur innerhalb seines eigenen Feldes – in seiner einen * Kopfzeile hätte es keinen Weg vor sich und bliebe wirkungslos. Der Kopf * spannt sein Feld deshalb über alle belegten Zeilen der Woche und sitzt an * dessen oberem Rand. Wie viele Zeilen das sind, sagt `--rgs-kopfspanne`: * die tatsächlich belegte Zeilenzahl, die der Renderer beim Platzieren * mitzählt – es entstehen keine Zeilen auf Vorrat. */ /* * Ein angesprungener Suchtreffer muss auch unter dem höchsten Tageskopf * hervorkommen – und das ist hier der heutige, mit seiner Markenzeile. */ .radio-gude-sendeplan { --rgs-kopfzeile-frei: calc(var(--rgs-tagkopf-hoehe, 2.4rem) + var(--rgs-marke-zeile-hoehe)); } .radio-gude-sendeplan .rgs-tagkopf { grid-row: 1 / span var(--rgs-kopfspanne, 2); align-self: start; /* Die senkrechten Spaltenlinien liegen als Hintergrund im Wochenraster und lägen sonst hinter der deckenden Fläche. Auf dem Kopf laufen sie deshalb selbst weiter – dieselbe Farbe an derselben Stelle. */ background-image: linear-gradient(to left, var(--rgs-linie) 0 1px, transparent 1px); } /* * Im Sieben-Spalten-Raster wird aus der Kalenderaktion ein dezentes Symbol * in der oberen rechten Ecke der Karte: die Glocke für „diesen einen Termin * einmalig in meinen Kalender“. Seit Issue #114 ist es genau eines – das * Kalenderblatt daneben ist mit dem Sendungsabo ins Auswahl-Modal gewandert. * * Die Hülle liegt absolut im vorhandenen Polster: Die Karte wird dadurch weder * höher noch breiter, keine Rasterzeile der Woche verschiebt sich, und der Plan * bleibt so kompakt, wie er am Schreibtisch sein soll. Sichtbar bleibt allein * das Symbol – den Namen des Verweises trägt sein `aria-label`, das die * Sendung mitnennt; ohne es hätte der Verweis hier gar keinen. * * Und wie in der Container-Abfrage: Die Sprechblase wird freigeschaltet, * die Hülle spannt dafür die volle Kartenbreite, hält das Symbol mit * `flex-end` in der Ecke und gibt den Zeiger an die Zeitzeile darunter * durch. */ .radio-gude-sendeplan .rgs-kalender-aktionen { --rgs-kalender-hinweis: block; position: absolute; top: 0; left: 0; right: 0; /* Die Karte ist ein Raster, und für ein absolut gesetztes Rasterkind gilt `justify-self` weiter: Mit dem `start` der Grundregel bliebe die Hülle so breit wie ihr Symbol, und `left`/`right` blieben ohne Wirkung. Die Sprechblase darunter wäre dann nicht kartenbreit, sondern symbolbreit – und bräche in einzelne Silben um. */ justify-self: stretch; /* Ohne diese Angabe legte die Hülle im einspaltigen Kartenraster eine zweite Rasterspalte an. */ grid-column: 1; justify-content: flex-end; margin: 0; pointer-events: none; } .radio-gude-sendeplan .rgs-kalender-knopf { min-height: 0; margin: 0; padding: 0.1rem 0.15rem; border: 0; background: none; color: var(--rgs-gedaempft-punkt, #616161); pointer-events: auto; } .radio-gude-sendeplan .rgs-kalender-knopf:hover, .radio-gude-sendeplan .rgs-kalender-knopf:focus { background: none; border-color: transparent; color: var(--rgs-rot); } .radio-gude-sendeplan .rgs-kalender-knopf .rgs-kalender-text { display: none; } .radio-gude-sendeplan .rgs-kalender-knopf .rgs-icon { width: 14px; height: 14px; } /* Der Platz für das Symbol wird freigehalten, damit es nie auf der Zeitangabe liegt. Nur Karten mit einer Kalenderaktion tragen diese Klasse. Seit Issue #114 ist es ein Symbol statt zweier – die Zeitzeile bekommt entsprechend weniger Polster zurück. */ .radio-gude-sendeplan .rgs-punkt--kalender .rgs-punkt-zeit { padding-right: 1.5rem; } /* * Weil der Kopf jetzt über alle Zeilen spannt, bemisst er die erste * Rasterzeile nicht mehr. Diesen Platz hält ein leerer Platzhalter frei. * * Er ist so hoch wie ein Tageskopf OHNE HEUTE-Marke – dieses Maß misst das * Skript, und es ist in jeder Woche dasselbe, weil überall dieselben * Wochentagsnamen stehen – zuzüglich der Zeile, die die Marke einnimmt. * Damit beginnt das Wochenraster mit und ohne HEUTE geometrisch identisch, * und die Marke braucht dafür keinen leeren Zwilling in den übrigen sechs * Tagesköpfen: Die trägt niemand, sie bleiben kompakt. Der heutige Kopf ragt * einfach in den Platz hinein, der ohnehin für ihn frei ist. * * Ohne Skript greift ein Rückfallwert, der auch für einen zweizeiligen Kopf * reicht. * * Der Platzhalter setzt voraus, dass sich die Tagesbox auflöst. Kennt ein * Browser `display: contents` nicht, bleibt es bei sieben eigenständigen * Spalten – dort wäre er nur eine Lücke und entsteht deshalb gar nicht. */ @supports (display: contents) { .radio-gude-sendeplan .rgs-tag::before { content: ""; grid-column: var(--rgs-spalte, auto); grid-row: 1; height: calc(var(--rgs-tagkopf-hoehe, 2.6rem) + var(--rgs-marke-zeile-hoehe) + var(--rgs-tagkopf-abstand, 0.35rem)); } } } } /* * Zeitdarstellung, gesteuert über dieselben Variablen: * * kompakte Liste – Zeit links, Titel rechts, konkrete Uhrzeit aus `start` * sieben Spalten – Zeit über dem Titel, vollständiger öffentlicher Zeittext * * Beide Angaben stehen im Markup; sichtbar ist immer genau eine. */ .radio-gude-sendeplan .rgs-zeit-kurz { display: var(--rgs-zeit-kurz-anzeige, inline); white-space: nowrap; } .radio-gude-sendeplan .rgs-zeit-lang { display: var(--rgs-zeit-lang-anzeige, none); white-space: nowrap; } /* ── Sidebar-Widget ─────────────────────────────────────────────────── */ /* * Ein zusammenhängendes Widget statt mehrerer loser Kästen: ein gemeinsamer * Rahmen, innen nur feine waagerechte Trennungen. * * Die Schriftfamilie wird hier ausdrücklich gesetzt. Zuvor erbte das Widget * alles vom umgebenden Behälter – steht der Shortcode in einem Element, das * (wie `pre`/`code` im Theme) eine Schreibmaschinenschrift vorgibt, schlug das * bis in den Nachrichtenhinweis durch. Mit einer eigenen Angabe ist das Widget * davon unabhängig, ohne dass irgendwo `!important` nötig wäre. Alle Regeln * hängen ausschließlich an den Widget-Klassen; das Theme bleibt unberührt. */ .radio-gude-programm-widget { --rgs-widget-innen: 0.9rem; /* Das Markup besteht aus Inline-Elementen (siehe Renderer) – die Blockdarstellung kommt ausschließlich von hier. */ display: block; --rgs-schrift: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: var(--rgs-schrift); font-size: 0.9rem; line-height: 1.4; color: var(--rgs-text); /* Die sichtbare Überschrift über dem Widget stammt von der Seite selbst. Das Plugin setzt keine eigene und bringt deshalb keinen Vorlauf mit. */ margin-top: 0; padding-top: 0; background: var(--rgs-weiss); border: 1px solid var(--rgs-linie); border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); overflow: hidden; } .radio-gude-programm-widget * { font-family: inherit; } .radio-gude-programm-widget .rgs-widget-bereich, .radio-gude-programm-widget .rgs-widget-inhalt { margin: 0; padding: 0; display: block; } /* ── Die drei Positionen ────────────────────────────────────────────── */ .radio-gude-programm-widget .rgs-slot { display: block; margin: 0; /* Etwas knapper als in 0.1.10 – rund 7 Prozent weniger, ohne dass sich an der Informationshierarchie etwas ändert. */ padding: 0.65rem var(--rgs-widget-innen); background: var(--rgs-weiss); /* Keine eigenen Kästen mehr – die Bereiche trennt eine feine Linie. */ border-top: 1px solid var(--rgs-linie); } .radio-gude-programm-widget .rgs-slot:first-child { border-top: 0; } /* * „Jetzt“ ist der wichtigste Bereich: als einziger mit rotem Akzent, sehr * hellem rötlichem Grund und der größten Schrift im Widget. Bewusst ohne * Live-Kennzeichen – die Angabe ist planbasiert. */ .radio-gude-programm-widget .rgs-slot--jetzt { background: #fff7f7; border-left: 3px solid var(--rgs-rot); padding: 0.8rem var(--rgs-widget-innen) 0.82rem; padding-left: calc(var(--rgs-widget-innen) - 3px); } .radio-gude-programm-widget .rgs-slot-label { display: block; margin: 0 0 0.25rem; font-size: 0.68rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.09em; color: var(--rgs-gedaempft); } .radio-gude-programm-widget .rgs-slot--jetzt .rgs-slot-label { color: var(--rgs-rot); } .radio-gude-programm-widget .rgs-slot-zeit { display: block; margin: 0 0 0.15rem; font-size: 0.78rem; font-weight: 400; line-height: 1.3; color: var(--rgs-gedaempft); font-variant-numeric: tabular-nums; } .radio-gude-programm-widget .rgs-slot-titel { display: block; margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.32; color: var(--rgs-text); overflow-wrap: normal; word-break: normal; hyphens: manual; } .radio-gude-programm-widget .rgs-slot--jetzt .rgs-slot-titel { font-size: 1.08rem; font-weight: 700; line-height: 1.28; } .radio-gude-programm-widget .rgs-slot-moderation { display: block; margin: 0.2rem 0 0; font-size: 0.8rem; line-height: 1.3; color: var(--rgs-gedaempft); } /* ── Nachrichtenhinweis – Teil desselben Widgets ────────────────────── */ /* * Kein vierter Programmbereich, sondern der Fuß des Widgets: Symbol links, * Textblock rechts, beide auf einer Zeile. * * `flex-wrap: nowrap` steht ausdrücklich da, damit der Textblock unter keinen * Umständen unter das Symbol rutscht, und `min-width: 0` erlaubt ihm, in einer * schmalen Spalte zu schrumpfen statt die Zeile zu sprengen. */ .radio-gude-programm-widget .rgs-dauerhinweis { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.65rem; margin: 0; padding: 0.8rem var(--rgs-widget-innen); background: var(--rgs-flaeche); border-top: 2px solid rgba(218, 0, 0, 0.22); } .radio-gude-programm-widget .rgs-dauerhinweis-icon { display: flex; flex: 0 0 auto; align-items: center; color: #262626; } .radio-gude-programm-widget .rgs-dauerhinweis-icon .rgs-icon { --rgs-icon-akzent: var(--rgs-rot); width: 30px; height: 30px; } .radio-gude-programm-widget .rgs-dauerhinweis-text { display: block; flex: 1 1 auto; min-width: 0; } .radio-gude-programm-widget .rgs-dauerhinweis-titel { display: block; margin: 0 0 0.08rem; font-size: 0.82rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.05em; color: #262626; } .radio-gude-programm-widget .rgs-dauerhinweis-satz { display: block; margin: 0; font-size: 0.84rem; font-weight: 400; line-height: 1.35; letter-spacing: normal; color: var(--rgs-gedaempft); } /* ── Wiederholung und Störung im Widget ─────────────────────────────── */ /* * Das Wiederholungskennzeichen wirkt im Widget etwas feiner: kleiner, leichter, * weniger wie eine Schaltfläche. Die Regel gilt nur hier – im Wochenplan bleibt * das Kennzeichen unverändert. */ .radio-gude-programm-widget .rgs-badge--wdh { padding: 0 0.22rem; border-color: #ececec; border-radius: 2px; background: #fbfbfb; font-size: 0.6em; font-weight: 500; color: var(--rgs-gedaempft); vertical-align: 0.08em; } /* * Die Tageskennzeichnung vor der Uhrzeit. Sie soll auffallen genug, um „ca. * 06:15 Uhr“ eindeutig zu machen, aber dem roten JETZT nicht die Aufmerksamkeit * nehmen: deshalb dieselbe ruhige Fläche wie andere kleine Kennzeichen, dunkle * Schrift statt Farbe, und die Versalien der Positionsbeschriftung. */ .radio-gude-programm-widget .rgs-badge--tag { display: inline-block; margin-right: 0.3rem; padding: 0 0.32rem; border: 1px solid var(--rgs-linie); border-radius: 3px; background: var(--rgs-flaeche); font-size: 0.62rem; font-weight: 700; line-height: 1.55; text-transform: uppercase; letter-spacing: 0.07em; color: var(--rgs-text); vertical-align: 0.06em; white-space: nowrap; } .radio-gude-programm-widget .rgs-stoerung { display: block; margin: 0; padding: 0.8rem var(--rgs-widget-innen); background: var(--rgs-flaeche); font-size: 0.85rem; color: var(--rgs-gedaempft); } /* ── Kalender-Baustein für Sidebar und Widget-Flächen ───────────────── */ /* * Derselbe Kartenaufbau wie beim Programm-Widget: weiße Fläche, feiner Rahmen, * gerundete Ecken, dieselbe Schriftfamilie – damit beide Bausteine in einer * Sidebar untereinander wie ein System aussehen und nicht wie zwei Plugins. * * Das Markup besteht ausschließlich aus Inline-Elementen (siehe Renderer); die * Blockdarstellung kommt allein von hier. `width: 100%` und `max-width: 100%` * stehen ausdrücklich da: Der Baustein soll die verfügbare Breite ausfüllen – * in einer 300 px schmalen Sidebar ebenso wie als Block auf dem Telefon – und * unter keinen Umständen darüber hinauslaufen. */ .radio-gude-kalender-widget { --rgs-widget-innen: 0.9rem; --rgs-schrift: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: block; width: 100%; max-width: 100%; margin: 0; padding: var(--rgs-widget-innen); font-family: var(--rgs-schrift); font-size: 0.9rem; line-height: 1.4; color: var(--rgs-text); background: var(--rgs-weiss); border: 1px solid var(--rgs-linie); border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .radio-gude-kalender-widget * { font-family: inherit; } /* * Die Karte beginnt mit ihrem Satz: Die Überschrift steht als Widget- oder * Blocktitel darüber, den WordPress selbst setzt. Oben bleibt deshalb nur das * Polster der Karte stehen – kein Außenabstand, der sonst als Leerraum unter * dem Titel säße. */ .radio-gude-kalender-widget .rgs-kalenderkarte-satz { display: block; margin: 0 0 0.7rem; font-size: 0.85rem; line-height: 1.35; color: var(--rgs-gedaempft); } /* * Die Hauptaktion füllt die Karte in voller Breite – in einer schmalen Sidebar * wie auf dem Telefon dieselbe Schaltfläche, mindestens 44 px hoch. Ihre Farben * und Maße stehen weiter oben und gelten für beide Einbauorte gemeinsam; hier * steht nur, was der Baustein zusätzlich braucht. */ .radio-gude-kalender-widget .rgs-kalender-abo { width: 100%; } /* * Der sekundäre Verweis ist bewusst keine zweite Schaltfläche: eine Karte hat * eine Hauptaktion. Er bleibt trotzdem ein volles Tippziel – 44 px hoch und * über die ganze Breite, damit auf dem Telefon niemand ein 14 px hohes * Textstück treffen muss. */ .radio-gude-kalender-widget .rgs-kalender-ansehen { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.15rem; padding: 0.3rem 0.4rem; font-size: 0.85rem; font-weight: 600; line-height: 1.3; text-align: center; color: var(--rgs-rot-dunkel); text-decoration: underline; } .radio-gude-kalender-widget .rgs-kalender-ansehen:hover, .radio-gude-kalender-widget .rgs-kalender-ansehen:focus { color: var(--rgs-rot); } .radio-gude-kalender-widget .rgs-kalender-ansehen:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: 2px; } /* ── Das Auswahl-Modal des Kalenderabos (Issue #114) ────────────────── */ /* * Das Fenster steht als `` im Fußbereich der Seite und damit außerhalb * jedes Plugin-Wrappers – deshalb trägt `.rgs-abo` die Farbvariablen und das * Kastenmodell oben selbst mit. Es gibt hier keinen einzigen generischen * Selektor: Alles hängt an dieser Klasse, wie im übrigen Stylesheet auch. * * Ein eigener Haltepunkt kommt für das Fenster nicht hinzu. Es ist auf jedem * Gerät gleich gebaut und rechnet seine Maße aus dem, was da ist: die Breite * als `min()` aus Wunschbreite und Fensterbreite, die Höhe gedeckelt, der * Inhalt scrollt darin. Auf einem 320-Pixel-Telefon füllt es damit den * Bildschirm, am Schreibtisch bleibt es eine Karte in der Mitte. * * Bedient wird es mit dem, was der Browser mitbringt: `showModal()` sperrt den * Hintergrund, hält den Fokus im Fenster und schließt bei Escape. Native * Browserdialoge (`alert`, `confirm`, `prompt`) kommen nirgends vor. */ .rgs-abo { width: min(34rem, calc(100vw - 1.5rem)); max-width: min(34rem, calc(100vw - 1.5rem)); max-height: min(44rem, calc(100vh - 1.5rem)); padding: 0; border: 1px solid var(--rgs-linie); border-radius: 6px; background: var(--rgs-weiss); color: var(--rgs-text); font-size: 1rem; line-height: 1.45; overflow: hidden; } /* * Kopf oben, Körper darunter – und der Körper nimmt genau den Platz, der * übrig bleibt. Deshalb ein Flexcontainer und **kein** gerechneter * `max-height` am Körper: Bricht die Überschrift auf einem schmalen Telefon in * zwei Zeilen um, wächst der Kopf, und eine Rechnung mit einer festen Kopfhöhe * schnitte unten etwas ab. * * Die Regel hängt bewusst an `[open]`. `display: flex` ohne diese Bedingung * überschriebe die Browserregel `dialog:not([open]) { display: none }` – * Autorenregeln gehen vor –, und das Fenster stünde dauerhaft offen auf der * Seite. */ .rgs-abo[open] { display: flex; flex-direction: column; } .rgs-abo::backdrop { background: rgba(28, 28, 28, 0.55); } .rgs-abo .rgs-abo-kopf { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 0.5rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--rgs-linie); background: var(--rgs-flaeche); } .rgs-abo .rgs-abo-titel { flex: 1 1 auto; margin: 0; padding: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--rgs-text); } /* 44 px auch hier – das X ist auf dem Telefon das erste, was jemand trifft. */ .rgs-abo .rgs-abo-schliessen { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin: -0.5rem -0.4rem -0.5rem 0; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--rgs-gedaempft); font-size: 1.5rem; line-height: 1; cursor: pointer; } .rgs-abo .rgs-abo-schliessen:hover, .rgs-abo .rgs-abo-schliessen:focus { color: var(--rgs-rot-dunkel); } .rgs-abo .rgs-abo-schliessen:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: -2px; } /* * Der Körper scrollt, der Kopf bleibt stehen. `min-height: 0` gehört dazu: * Ein Flexelement schrumpft ohne diese Angabe nie unter die Höhe seines * Inhalts, und dann scrollte statt seiner das ganze Fenster – das aber ist * gedeckelt und schnitte unten ab. */ .rgs-abo .rgs-abo-koerper { flex: 1 1 auto; min-height: 0; padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .rgs-abo .rgs-abo-satz { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.45; color: var(--rgs-text); } .rgs-abo .rgs-abo-punkte { margin: 0 0 0.7rem; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.45; color: var(--rgs-gedaempft); } .rgs-abo .rgs-abo-punkte li { margin: 0 0 0.25rem; } /* * Der ehrliche Satz aus dem Auftrag: Ein fremdes Kalenderprogramm lässt sich * nicht zwingen, einen eigenen Kalender anzulegen. Er steht abgesetzt, damit * ihn niemand überliest – aber nicht als Warnung in Rot, denn es ist keine. */ .rgs-abo .rgs-abo-ehrlich { margin: 0 0 1rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--rgs-linie); background: var(--rgs-flaeche); font-size: 0.85rem; line-height: 1.45; color: var(--rgs-gedaempft); } .rgs-abo .rgs-abo-umfang { margin: 0 0 0.8rem; padding: 0; border: 0; } .rgs-abo .rgs-abo-umfang legend, .rgs-abo .rgs-abo-zwischentitel { margin: 0 0 0.45rem; padding: 0; font-size: 0.8rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rgs-gedaempft); } /* Die ganze Zeile ist das Tippziel, nicht nur der kleine Kreis davor. */ .rgs-abo .rgs-abo-option { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; margin: 0 0 0.3rem; padding: 0.45rem 0.6rem; border: 1px solid var(--rgs-linie); border-radius: 4px; cursor: pointer; } .rgs-abo .rgs-abo-option:has(input:checked) { border-color: var(--rgs-rot); background: var(--rgs-rot-zart); } .rgs-abo .rgs-abo-option:has(input:disabled) { opacity: 0.55; cursor: default; } .rgs-abo .rgs-abo-option input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0.25rem 0 0; accent-color: var(--rgs-rot); } .rgs-abo .rgs-abo-optiontext { display: block; min-width: 0; } .rgs-abo .rgs-abo-optiontitel { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--rgs-text); } .rgs-abo .rgs-abo-optionsatz { display: block; font-size: 0.82rem; line-height: 1.35; color: var(--rgs-gedaempft); } /* * Die Liste der einzelnen Sendungen. Sie ist gedeckelt und scrollt in sich – * dreißig Sendungen sollen das Fenster nicht zur Endlosseite machen. Darüber * steht das Suchfeld, das immer da ist: eine Schwelle, ab der es erscheint, * wäre eine Zahl, die niemand kennt. */ .rgs-abo .rgs-abo-liste { margin: 0 0 1rem; } .rgs-abo .rgs-abo-suche { margin: 0 0 0.4rem; } .rgs-abo .rgs-abo-feld { width: 100%; min-height: 44px; padding: 0.4rem 0.6rem; border: 1px solid var(--rgs-linie); border-radius: 4px; background: var(--rgs-weiss); color: var(--rgs-text); font-family: inherit; font-size: 0.9rem; line-height: 1.3; } .rgs-abo .rgs-abo-feld:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: -1px; } .rgs-abo .rgs-abo-sendungen { max-height: 15rem; margin: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rgs-linie); border-radius: 4px; list-style: none; } .rgs-abo .rgs-abo-sendung + .rgs-abo-sendung { border-top: 1px solid var(--rgs-linie); } .rgs-abo .rgs-abo-kaestchen { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.35rem 0.6rem; font-size: 0.9rem; line-height: 1.3; cursor: pointer; } .rgs-abo .rgs-abo-kaestchen:hover { background: var(--rgs-flaeche); } .rgs-abo .rgs-abo-kaestchen input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--rgs-rot); } /* * Der Titel bricht wie überall im Plugin nur an sinnvollen Stellen: kein * `break-all`, kein `anywhere`, keine automatische Silbentrennung. `min-width` * erlaubt ihm dafür, in seiner Flexzeile überhaupt schmaler zu werden als sein * längstes Wort – ohne diese Zeile schöbe ein langer Titel das Kästchen * hinaus. */ .rgs-abo .rgs-abo-sendungstitel { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; } .rgs-abo .rgs-abo-hinweis, .rgs-abo .rgs-abo-zaehler, .rgs-abo .rgs-abo-meldung { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.35; color: var(--rgs-gedaempft); } .rgs-abo .rgs-abo-meldung:empty { margin: 0; } /* * Die drei Wege in die Kalenderprogramme – untereinander, volle Breite, je * eine 44-px-Fläche. Nebeneinander wären sie auf dem Telefon drei Stückchen, * und am Schreibtisch gewinnt eine Liste ohnehin an Lesbarkeit. * * Ein Weg ohne gültige Adresse – „Nur ausgewählte Sendungen“ und noch nichts * angekreuzt – trägt `aria-disabled` und kein `href`. Er sieht dann auch so * aus und nimmt den Zeiger nicht an. */ .rgs-abo .rgs-abo-wege { margin: 0 0 1rem; } .rgs-abo .rgs-abo-weg { display: block; min-height: 44px; margin: 0 0 0.3rem; padding: 0.5rem 0.7rem; border: 1px solid var(--rgs-linie); border-radius: 4px; background: var(--rgs-weiss); color: var(--rgs-text); text-decoration: none; } .rgs-abo .rgs-abo-weg:hover, .rgs-abo .rgs-abo-weg:focus { border-color: var(--rgs-rot); background: var(--rgs-rot-zart); color: var(--rgs-text); text-decoration: none; } .rgs-abo .rgs-abo-weg:focus-visible { outline: 2px solid var(--rgs-rot); outline-offset: 2px; } .rgs-abo .rgs-abo-weg[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .rgs-abo .rgs-abo-wegtitel { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; } .rgs-abo .rgs-abo-wegzusatz { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--rgs-gedaempft); } /* * Der Weg, der überall geht: die nackte Adresse. Sie steht in einem Feld zum * Markieren und nicht als Text – auf dem Telefon ist ein Textabsatz kaum zu * treffen. Der Knopf daneben kopiert; klappt das nicht, sagt die Zeile * darunter genau das, statt einen Erfolg zu behaupten. */ .rgs-abo .rgs-abo-adresszeile { display: flex; flex-wrap: wrap; gap: 0.4rem; } .rgs-abo .rgs-abo-adresszeile .rgs-abo-feld { flex: 1 1 12rem; width: auto; min-width: 0; } .rgs-abo .rgs-abo-kopieren { flex: 0 0 auto; min-height: 44px; padding: 0.4rem 0.8rem; border: 1px solid var(--rgs-rot); border-radius: 4px; background: var(--rgs-rot); color: var(--rgs-weiss); font-family: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1.3; cursor: pointer; } .rgs-abo .rgs-abo-kopieren:hover, .rgs-abo .rgs-abo-kopieren:focus { background: var(--rgs-rot-dunkel); border-color: var(--rgs-rot-dunkel); } .rgs-abo .rgs-abo-kopieren:focus-visible { outline: 2px solid var(--rgs-rot-dunkel); outline-offset: 2px; } /* Solange nichts angekreuzt ist, gibt es auch nichts zu kopieren. */ .rgs-abo .rgs-abo-kopieren:disabled, .rgs-abo .rgs-abo-feld:disabled { opacity: 0.45; cursor: default; } @media (prefers-reduced-motion: reduce) { .radio-gude-sendeplan .rgs-navlink, .radio-gude-sendeplan .rgs-woche-container { transition: none; } }