/* ================================================================================ webinare.css — nur fuer die Webinare-Seite (idcat 67), Milestone WEB-4c ================================================================================ Geladen ueber $addCssFiles in include/sws.php (siehe include/sws.php.patch.md). include/css.php:123-125 haengt die Datei ans ENDE von $cssFiles, sie wird also nach norm.css, main.css, responsive.css und vars.css eingebunden. Bei gleicher Spezifitaet gewinnt daher diese Datei — darauf beruhen die Ueberschreibungen unten, ohne dass irgendwo !important noetig waere. KEINE Bestands-CSS-Datei wird veraendert. Alle Werte stammen aus den vorhandenen Custom Properties (definiert auf html{}in css/vars.css und je Breakpoint in css/responsive.css) — es wird kein neuer Absolutwert gesetzt. -------------------------------------------------------------------------- Aufbau, den diese Datei gestaltet (erzeugt von include/template/webinare.php) -------------------------------------------------------------------------- div.contentWrapper.bgColor-X <- von elementStart.php div.content.contentWebinare <- EIN Grid fuer alle Kategorien div.webinarGruppe <- EINE Rasterzelle je Kategorie h2.webinarGruppeHeader <- Ueberschrift (+ span = Sub) div.bildtextv.webinarKachel <- Kachel im Bestandsstil div div <- Bild div div <- Titel div <- Beschreibung div.webinarTermine <- Terminliste a.webinarTermin <- ein Termin (mit Anmeldelink) span.webinarTerminInfo span.webinarTerminDatum span.webinarTerminZeit span.webinarTerminDauer details.webinarMehr <- ab dem 5. Termin summary div.webinarTermineMehr Warum Ueberschrift und Kachel in EINER Rasterzelle liegen:Die Ueberschriften sollen ueber der jeweiligen Kachel stehen UND alle Kacheln sollen nebeneinander liegen. Beides zugleich geht nur, wenn Ueberschrift + Sub-Ueberschrift + Kachel EIN Grid-Item bilden. Folge davon:Die Kachel ist nicht mehr direktes Kind von .content. Die Bestandsregeln in main.css, die genau das voraussetzen (`> .content > *.bildtextv`), greifen deshalb nicht mehr und werden im Abschnitt "Rahmen bei gleicher Box- und Sektionsfarbe" auf der neuen Verschachtelungstiefe nachgebildet. */ /* -------------------------------------------------------------------------------- 1. Raster der Kachel-Spalten -------------------------------------------------------------------------------- Werte 1:1 aus dem Bestandsraster .c111 uebernommen, damit die Webinar-Kacheln spaltengenau mit jedem anderen dreispaltigen Raster der Seite fluchten:responsive.css:553 (min-width 1610px) repeat(3,…) + gap-contentNarrow responsive.css:960 (1260-1609px) repeat(3,…) + gap-contentNarrow responsive.css:1339 (1020-1259px) repeat(3,…) + gap-contentNarrow responsive.css:1818 (480-1019px) repeat(1,…) + gap-contentMedium responsive.css:2389 (max-width 479px) repeat(1,…) + gap-contentMedium Die fuenf Breakpoints des Bestands lassen sich hier auf ZWEI Bloecke zusammenfassen, weil sich die Spaltenzahl nur an EINER Stelle aendert, naemlich bei 1020px. Die Variablen --gap-* sind je Breakpoint bereits unterschiedlich definiert (responsive.css:413/820/1227/1614/2185) und ziehen automatisch mit. .content selbst liefert bereits display:grid, Breite und Zentrierung (main.css:967-972);hier werden nur Spalten und gap gesetzt. Bewusst NICHT die Klasse .c111 am Container:deren Farb- und Rahmenregeln in main.css adressieren direkte Kinder (`> .c111 > div.text`), die es in diesem Aufbau nicht mehr gibt. Wird das Bestandsraster spaeter geaendert, ist dieser Block nachzuziehen — die Quellzeilen stehen oben. */ main > section > div > .contentWebinare{grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap-contentNarrow)}@media screen and (max-width:1019px){main > section > div > .contentWebinare{grid-template-columns:repeat(1, minmax(0, 1fr));gap:var(--gap-contentMedium)}}/* -------------------------------------------------------------------------------- 2. Die Rasterzelle einer Kategorie -------------------------------------------------------------------------------- Flex-Spalte:Ueberschrift oben, Kachel darunter. Die Kachel bekommt flex:1 1 auto und fuellt damit die Resthoehe der Zelle — dadurch schliessen alle Kacheln einer Zeile unten buendig ab, auch wenn die Ueberschriften unterschiedlich viele Zeilen brauchen. min-width:0 hebt das Grid-Default min-width:auto auf, damit lange Woerter die Spalte nicht aufblaehen (gleiche Absicht wie minmax(0, 1fr) im Raster oben). gap:--gap-box ist der Abstand, den der Bestand innerhalb einer Kachel verwendet (main.css:1400) — hier zwischen Ueberschriftenblock und Kachel. */ .webinarGruppe{display:flex;flex-direction:column;gap:var(--gap-box);min-width:0}.webinarGruppe > .webinarKachel{flex:1 1 auto}/* -------------------------------------------------------------------------------- 3. Ueberschrift und Sub-Ueberschrift ueber der Kachel -------------------------------------------------------------------------------- Basis liefert die Bestandsregel fuer h1-h6 (main.css:71-85):font-weight 700, line-height --line-height-header, font-variation-settings --font-condensed, margin 0, display:flex/column (dadurch steht das span automatisch in einer eigenen Zeile). Groessen NICHT frei gewaehlt, sondern aus dem Bestandsstil fuer eine untergeordnete Ueberschrift uebernommen (main.css:1082-1101, `.content .textBox > h1..h6`):Ueberschrift --font-size-minorheader 42px ab 1610px, sonst 34px Sub-Ueberschrift --font-size-minorsubheader 24px ab 1610px, sonst 20px Damit ist die Ueberschrift kleiner als bisher — die alte Fassung nutzte die h2-Basisgroesse --font-size-header (62/48/44/42/42px, responsive.css:382 ff.), weil sie als Zwischenueberschrift ueber die volle Seitenbreite lief. Bei drei Spalten nebeneinander ist die naechstkleinere Stufe der Bestandsleiter richtig:header > minorheader > boxheader2 > subheader/boxheader > font-size > medium > smaller. "Deutlich kleiner" fuer die Sub-Ueberschrift ist damit belegt:24/42 = 0,57 ab 1610px und 20/34 = 0,59 darunter — also gut vier Zehntel kleiner als die Ueberschrift, nicht nur eine Nuance. text-transform:none ebenfalls aus main.css:1082-1090:die Grossschreibung der h2-Basisregel (main.css:82) passt zu Sektionsueberschriften, nicht zu einem Produktnamen wie "HGK-ChefsCockpit", dessen Binnengrossschreibung sonst verloren ginge. Farbe, Gewicht (400) und der Abstand 0.5em der Sub-Ueberschrift kommen unveraendert aus der Bestandsregel h1-h6 > span (main.css:87-111);das span steht im Markup als LETZTES Kind, greift also die Variante:last-child mit margin-top:0.5em und steht dadurch UNTER der Ueberschrift. */ .webinarGruppeHeader{font-size:var(--font-size-minorheader);text-transform:none}.webinarGruppeHeader > span{font-size:var(--font-size-minorsubheader)}/* -------------------------------------------------------------------------------- 4. Schriftgroessen in der Kachel — je eine Stufe kleiner als im Bestand -------------------------------------------------------------------------------- Die Kachel enthaelt jetzt zusaetzlich eine Terminliste und muss deshalb mehr Inhalt auf gleicher Flaeche tragen. Jede Groesse ruecht daher genau EINE Stufe auf der vorhandenen Groessenleiter nach unten — es wird kein neuer Zahlenwert eingefuehrt:Rolle bisher (Bestand) neu Beleg Kachel-Titel --font-size-boxheader 24/20 --font-size 20/16 main.css:1422-1438 Kachel-Text --font-size (html) 20/16 --font-size-medium 16/14 main.css:4 Termin-Dauer - --font-size-smaller 12 (kleinste Stufe) Die Leiter selbst stammt aus responsive.css (je Breakpoint identisch gestaffelt):boxheader 24/20 > font-size 20/16 > medium 16/14 > smaller 12/12. Spezifitaet:Die Bestandsregel fuer den Kachel-Titel ist `.bildtextv > div > div:nth-child(2) > div:nth-child(1)` = (0,3,3). Die Regel unten hat mit .webinarKachel dieselbe Form und damit dieselbe Spezifitaet;sie gewinnt, weil diese Datei spaeter geladen wird. */ .webinarKachel > div > div:nth-child(2){font-size:var(--font-size-medium)}.webinarKachel > div > div:nth-child(2) > div:nth-child(1){font-size:var(--font-size)}/* -------------------------------------------------------------------------------- 5. Terminliste -------------------------------------------------------------------------------- Trennlinie zum Beschreibungstext. Farbe UND Staerke aus dem Bestand:die einzige Stelle, an der --color-line (vars.css:50) als Trennlinie eingesetzt wird, ist main.css:888 mit `border-bottom:2px solid var(--color-line)`. Eine 1px-Linie kommt in main.css nirgends vor — 2px ist hier also nicht gewaehlt, sondern die Hauslinienstaerke. Der Abstand darueber entsteht bereits durch das gap der Kachel (--gap-box, main.css:1400), darum nur padding-top statt zusaetzlichem margin. Abstand zwischen den Terminen:--gap-formclose (8px ab 1610px, sonst 6px, responsive.css:418/825/1232/1619/2190) — die kleinste im Projekt definierte Abstandsstufe, passend fuer Zeilen innerhalb eines Blocks. */ .webinarTermine{display:flex;flex-direction:column;gap:var(--gap-formclose);border-top:2px solid var(--color-line);padding-top:var(--gap-box)}/* -------------------------------------------------------------------------------- 6. Einzelner Termin -------------------------------------------------------------------------------- Das Markup nutzt die Bestandsklassen `button buttonText buttonArrow` (main.css:317-334, 390-403, 433-451):Textfarbe --color-textbutton-text und der Pfeil als:after-Element. Hier werden nur die Eigenschaften angepasst, die fuer eine zeilenbreite Liste statt eines freistehenden Buttons noetig sind:display inline-flex -> flex, damit die Zeile die Kachelbreite fuellt justify-content space-between schiebt den Pfeil an den rechten Rand text-align center -> left line-height 1 -> --line-height-smaller, weil die Zeile zweizeilig ist font-weight 600 -> 400;nur das Datum bleibt hervorgehoben Alle Selektoren sind mit .webinarKachel praefixiert und erreichen damit (0,2,0) — dieselbe Spezifitaet wie .buttonText.buttonArrow;entschieden wird ueber die spaetere Ladereihenfolge. Der Aufzaehlungs-Aufbau innerhalb einer Zeile:Datum und Uhrzeit stehen nebeneinander, die Dauer erzwingt ueber flex-basis:100% einen Umbruch und steht dadurch in der zweiten Zeile — wie im bestaetigten Zielaufbau. */ .webinarKachel .webinarTermin{display:flex;justify-content:space-between;align-items:center;/* 0.5em ist der Abstand, den der Bestand fuer .buttonText.buttonArrow zwischen Beschriftung und Pfeil vorsieht (main.css:433-438). Vorher stand hier var(--gap-box) (16px bzw. 13px) — das galt als Abstand zwischen ALLEN Flex-Kindern und schob damit auch den Pfeil vom Text weg. */ gap:0.5em;width:100%;text-align:left;line-height:var(--line-height-smaller);font-weight:400}/* Sichtbare Anmelde-Aufforderung zwischen Termindaten und Pfeil. Der Elterncontainer .webinarTermin ist flex mit justify-content:space-between — dieses Element sitzt dadurch rechts neben den Termindaten und links vom Pfeil, den buttonArrow als::after anhaengt (main.css:433-451). Groesse:--font-size-smaller, dieselbe Stufe wie die Dauer darunter (.webinarTerminDauer). Die Aufforderung soll die Termindaten begleiten, nicht mit ihnen konkurrieren. white-space:nowrap verhindert, dass "anmelden" in der schmalen Kachel umbricht;flex-shrink:0 haelt es bei knappem Platz vollstaendig sichtbar — umbrechen darf stattdessen der Datumsblock, der dafuer bereits flex-wrap traegt. */ .webinarKachel .webinarTerminAktion{/* Sammelt den gesamten freien Platz VOR sich. Ohne das verteilt justify-content:space-between den Raum gleichmaessig auf beide Luecken — also auch zwischen "anmelden" und dem Pfeil. Mit margin-left:auto stehen Text und Pfeil im Bestandsabstand (0.5em) beieinander am rechten Rand. */ margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:var(--font-size-smaller);text-decoration:underline}.webinarKachel .webinarTerminInfo{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--gap-box);min-width:0}.webinarKachel .webinarTerminDatum{font-weight:600}/* Erzwingt den Umbruch vor der Dauer und macht sie zur kleinsten Stufe. */ .webinarKachel .webinarTerminDauer{flex:0 0 100%;font-size:var(--font-size-smaller)}/* Leere Felder (Dauer 0 = "unbekannt", unplausibles Datum) duerfen keinen Leerraum erzeugen — gleiche Absicht wie main.css:1403-1408 fuer die Kachel. */ .webinarKachel .webinarTerminInfo > span:empty{display:none}/* Der Pfeil darf nicht schrumpfen, wenn das Datum lang wird. */ .webinarKachel .webinarTermin:after{flex:0 0 auto}/* Termin ohne gueltigen Link:kein Pfeil (die Klasse buttonArrow fehlt dann im Markup), kein Zeigefinger, Textfarbe wie der uebrige Kachelinhalt. */ .webinarKachel .webinarTerminOhneLink{cursor:default;color:var(--color-text)}/* -------------------------------------------------------------------------------- 7. Aufklapper ab dem 5. Termin -------------------------------------------------------------------------------- Natives <details>/<summary>, ohne JavaScript. Der Block existiert im Markup nur, wenn es tatsaechlich mehr Termine als die sichtbaren gibt. Das Standard-Dreieck wird entfernt (list-style fuer Firefox/Chrome,::-webkit-details-marker fuer Safari) und durch einen eigenen Indikator ersetzt, der beim Aufklappen umschlaegt. Der Indikator ist ein reines CSS-Dreieck aus Rahmen in currentColor — keine zusaetzliche Grafikdatei und keine absoluten Groessen:die em-Werte skalieren mit der Schriftgroesse. Die Beschriftung bleibt bewusst in jedem Zustand "mehr anzeigen" (so im Auftrag vorgegeben);den Zustand zeigt der gedrehte Indikator an. */ .webinarMehr > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.5em;font-size:var(--font-size-medium);font-weight:600;color:var(--color-textbutton-text)}.webinarMehr > summary::-webkit-details-marker{display:none}/* Aufklapp-Indikator (Dreieck nach unten, dreht sich beim Oeffnen). Herleitung der Masse:Fuer einen Aufklapp-Indikator gibt es im Bestand KEIN Vorbild — der Pfeil von .buttonArrow (main.css:441-451) ist eine Hintergrund- grafik mit aspect-ratio 1/1 und laesst sich nicht drehen. Die Werte sind daher eine gestalterische Festlegung, bewusst in em statt px:der Indikator skaliert damit mit der Schriftgroesse des summary-Elements mit, egal auf welchem Breakpoint. Breite 0.7em (2 x 0.35em) zu Hoehe 0.4em ergibt ein flaches Dreieck (Verhaeltnis 1.75:1) — die uebliche Form fuer Aufklapp-Indikatoren, im Gegensatz zum gleichseitigen Dreieck (Verhaeltnis 1.16:1), das bei dieser Groesse gedrungen wirkt. Transition 0.3s:Bestandswert — die einzigen beiden Transitions in css/main.css verwenden 0.3s (u. a. "transition:opacity 0.3s linear"). */ .webinarMehr > summary:after{content:'';width:0;height:0;border-left:0.35em solid transparent;border-right:0.35em solid transparent;border-top:0.4em solid currentColor;transition:transform 0.3s ease}.webinarMehr[open] > summary:after{transform:rotate(180deg)}.webinarTermineMehr{display:flex;flex-direction:column;gap:var(--gap-formclose);padding-top:var(--gap-formclose)}/* -------------------------------------------------------------------------------- 8. Rahmen bei gleicher Box- und Sektionsfarbe -------------------------------------------------------------------------------- Nachbildung der Bestandsregeln fuer die neue Verschachtelungstiefe. Der Bestand setzt einen Rahmen um den Textteil der Kachel, wenn die Boxfarbe der Sektionsfarbe ENTSPRICHT — sonst waere die Kachel vor gleichfarbigem Hintergrund unsichtbar. Diese Regeln adressieren die Kachel als DIREKTES Kind von .content:main.css:1531-1542 bgColor-white + boxColor-white -> --color-lightblue main.css:1607-1618 bgColor-lightblue + boxColor-lightblue -> --color-white main.css:1686-1697 bgColor-blue + boxColor-blue -> --color-lightblue main.css:1765-1776 bgColor-red + boxColor-red -> --color-lightblue Da die Kachel jetzt unter .webinarGruppe haengt, greifen sie nicht mehr. Ohne diesen Abschnitt verloere die Kachel in genau diesen vier Kombinationen ihre Kontur. Nur der .bildtextv-Fall wird nachgebildet — die Varianten textbildv, bildtexth und textbildh kommen in diesem Template nicht vor. */ main > section > .bgColor-white > .content > .webinarGruppe > .boxColor-white.bildtextv > div > div:nth-child(2), main > section > .bgColor-blue > .content > .webinarGruppe > .boxColor-blue.bildtextv > div > div:nth-child(2), main > section > .bgColor-red > .content > .webinarGruppe > .boxColor-red.bildtextv > div > div:nth-child(2){border:2px solid var(--color-lightblue)}main > section > .bgColor-lightblue > .content > .webinarGruppe > .boxColor-lightblue.bildtextv > div > div:nth-child(2){border:2px solid var(--color-white)}/* Der Rahmen umschliesst nur den Textteil;oben schliesst er an das Bild an, unten uebernimmt er die Kachelrundung (identisch zu main.css:1538-1542). */ main > section > .bgColor-white > .content > .webinarGruppe > .boxColor-white.bildtextv > div > div:nth-child(2), main > section > .bgColor-lightblue > .content > .webinarGruppe > .boxColor-lightblue.bildtextv > div > div:nth-child(2), main > section > .bgColor-blue > .content > .webinarGruppe > .boxColor-blue.bildtextv > div > div:nth-child(2), main > section > .bgColor-red > .content > .webinarGruppe > .boxColor-red.bildtextv > div > div:nth-child(2){border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top:0 none}