ohne eigene Groesse kollabierte
darin auf 0) entfaellt dadurch komplett - kein einziges !important
mehr noetig. Border-radius wie gehabt, da Bootstraps .card kein
overflow:hidden hat (Bootstrap loest das bei eigenen Bildern serien-
maessig mit .card-img-top, hier per eigener Klasse nachgebaut). */
.blog-titelbild {
width: 100%;
display: block;
max-height: 320px;
object-fit: cover;
border-radius: .625rem .625rem 0 0;
}
@media (max-width: 575.98px) {
.blog-titelbild { max-height: 210px; }
}
/* Sehr breite/niedrige Banner-Titelbilder (Titelbild_Format='breitband',
z.B. Kala_Retro_01.jpg mit 1900x378px) auf Blog_Beitrag.php: Punkt 286
Nachtrag - die Breitband-Sonderrolle (Punkt 285: max-height komplett
entfallen lassen) wurde auf User-Wunsch wieder zurueckgenommen, da so
auch extrem breite Bilder bei vollen Container-Breiten unbegrenzt hoch
werden konnten (betraf u.a. den angepinnten Beitrag auf index.php/
Gruppe_Detail.php). ".blog-titelbild--breitband" braucht dadurch keine
eigene max-height/object-fit-Abweichung mehr - beide sind identisch zur
Basisregel oben, die Klasse bleibt nur als Marker erhalten (kein
CSS-Unterschied mehr, evtl. spaeter fuer andere Zwecke nutzbar). Der
Kompromiss: Bilder mit deutlich groesserer rechnerischer Hoehe als
320px (aspect-ratio via Inline-Style) werden jetzt wieder oben/unten
zugeschnitten (object-fit:cover) statt komplett unbeschnitten zu
bleiben - bewusst in Kauf genommen fuer eine durchgaengige, vorhersehbare
Maximalhoehe ueberall. */
/* Header/Sidebar-Kopfleiste (Punkt 133 Nachtrag - Burger-Menue nach unten
gerutscht): Das Shards-Theme legt die Kopfleisten-Hoehe (.main-navbar
.navbar), die Markenzeile (.main-sidebar .navbar-brand) und den daran
gekoppelten Nav-Wrapper-Hoehen-calc() in rem fest (3.75rem/1rem/1.25rem)
- durch die Root-Vergroesserung 16px->21px sind diese Boxen mitgewachsen.
Der mobile Toggle-Button (.toggle-sidebar) ist absolut positioniert und
haengt fuer seine vertikale Lage am statischen Fluss der jetzt hoeheren
Markenzeile, dadurch sichtbar nach unten gerutscht. Fix: dieselben
Selektoren mit den urspruenglichen, bei 16px Root berechneten Pixel-
Werten erneut definiert (feste px statt rem, damit sie unabhaengig von
der Root-Schriftgroesse stabil bleiben) - inkl. der davon abhaengigen
calc()-Werte, damit kein neuer Versatz zwischen Kopfleiste und
Menüpunkten darunter entsteht. */
.main-navbar .navbar { height: 60px; }
.main-navbar .navbar .nav-link { min-width: 60px; }
.main-sidebar .navbar-brand { height: 60px; font-size: 16px; }
.main-sidebar .toggle-sidebar { padding: 20px; font-size: 20px; }
.main-sidebar .nav-wrapper { height: calc(100vh - 61px); }
.main-content > .main-content-container.container-fluid { min-height: calc(100vh - 120px); }
/* User-Icon im Header etwas zu tief (User-Feedback 2026-09-01): Der
Avatar (.user-avatar, 2.5rem = 52.5px bei jetzigem Root von 21px) sitzt
in einem
ohne eigene Flex-
Zentrierung - anders als die reinen Icon-Links daneben (Glocke/Admin-
Zahnrad), die ueber "line-height:2.5rem" auf ihrem -Icon zentriert
werden (siehe Vendor-Regel .nav-link-icon i). Bei einem ![]()
zaehlt
ohne Flexbox die Standard-vertical-align:baseline-Regel, wodurch das
Bild an der Textgrundlinie haengt statt in der fest auf 60px gepinnten
Kopfleiste vertikal zentriert zu sein - dadurch wirkt es zu tief.
.dropdown-toggle ist hier eindeutig (kommt im Header nur einmal vor,
fuer genau diesen Avatar-Link), daher reicht der einfache Selektor. */
.main-navbar .navbar .nav-link.dropdown-toggle {
display: flex;
align-items: center;
height: 60px;
}
/* Nachtrag (User-Feedback: die uebrigen Kopfleisten-Icons - Nachrichten/
Admin/Style/Burger - sitzen ebenfalls zu tief, nicht mittig): Die
line-height:2.5rem-Regel auf dem -Icon (Vendor-CSS, siehe oben)
zentriert das Icon nur INNERHALB seiner eigenen Zeilenbox, nicht
diese Box innerhalb der umgebenden, fest auf 60px gepinnten
Kopfleiste - derselbe Grundfehler wie beim Avatar-Link eben, nur bei
einem statt ![]()
. Die Icon-Box (2.5rem = 52.5px) plus die
Nav-Link-Innenabstaende (.625rem oben/unten = 13.125px, Vendor-Regel
.nav-link{padding:.625rem .625rem}) ergeben zusammen ca. 78.75px -
mehr als die gepinnten 60px Kopfleistenhoehe, wodurch der Inhalt ohne
eigene Flex-Zentrierung nach unten haengt statt sich symmetrisch
ueber die Boxmitte zu verteilen. Betrifft alle vier Icon-Links im
Header (Nachrichten, Admin, Style/Hell-Dunkel, mobiler Burger rechts
aussen) - alle nutzen dieselbe .nav-link-icon-Klasse, daher reicht
ein gemeinsamer Selektor. */
.main-navbar .navbar .nav-link.nav-link-icon {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
/* Punkt 152: Chat-Mini-Eingabezeile (contenteditable statt , damit
Fett/Kursiv/Farbe/Schriftgroesse/Bild/Link direkt eingebettet werden
koennen) - Platzhaltertext per :empty-Trick, da contenteditable kein
natives placeholder-Attribut kennt. */
.chat-eingabe-editierbar:empty:before {
content: attr(data-placeholder);
color: #6c757d;
}
.chat-farbe-picker {
width: 32px;
height: 31px;
padding: 2px;
border: 1px solid #ced4da;
border-radius: 4px;
}
.chat-text img {
max-width: 220px;
max-height: 220px;
border-radius: 4px;
display: block;
margin-top: 0.3rem;
}
/* Einheitlicher Zurueck-Button im Header: absolut positioniert am linken
Rand statt als normales Flex-Element in der Icon-Zeile - der erste
Versuch (nur schmalere Polsterung) reichte nicht, die Zeile brach auf
Mobile weiterhin um und verschob dadurch das Hauptmenue-Symbol
(Sidebar-Toggle, da die Sidebar per transform standardmaessig
ausgeblendet ist und dieses Icon in derselben Zeile das einzige
tatsaechlich sichtbare Oeffnen-Element ist) eine Zeile nach unten.
Da .navbar-nav.ml-auto den gesamten Rest der Zeile ohnehin nach rechts
schiebt, ist der linke Rand dieser Zeile immer leer - der Zurueck-Link
liegt dort unabhaengig vom Flex-Layout der uebrigen Icons, kann also
deren Umbruch-Verhalten nicht mehr beeinflussen (Breite wird gar nicht
erst in die Flex-Berechnung der Zeile eingerechnet). */
.nav-zurueck {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-left: .625rem;
padding-right: .625rem;
z-index: 2;
}
/* Mehrere Funktions-Buttons im page-header (rechts neben der Ueberschrift):
auf Mobile untereinander (rechtsbuendig gestapelt), ab Desktop-Breite
nebeneinander - statt wie zuvor als einfache Inline-Buttons, die auf
schmalen Bildschirmen mittendrin umbrachen. */
.page-header-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .5rem;
}
@media (min-width: 768px) {
.page-header-actions {
flex-direction: row;
align-items: center;
}
}
/* "Nächster Geburtstag"-Box (index.php/Gruppe_Detail.php/Kalender.php):
Profilbild ca. halb so gross wie die schmale Sidebar-Box (~200px netto
Breite nach Card-Padding), Name per h5-Klasse im Markup vergroessert. */
.geburtstag-avatar {
width: 130px;
height: 130px;
}
/* Polyfill fuer .text-reset: Diese App nutzt Bootstrap 4.1.3 (Feb 2018),
das Utility ".text-reset" (color:inherit) kam aber erst mit Bootstrap
4.3.0 (Feb 2019) dazu - dadurch griff die im Markup an 45 Stellen
(22 Dateien, u.a. index.php Gruppen-/Spiele-Karten, Gruppe_Detail.php)
bereits verwendete Klasse nirgends, und betroffene Links fielen auf
die Standard-Linkfarbe #007bff (blau) zurueck statt die umgebende
Textfarbe zu uebernehmen - sichtbar z.B. am blauen Gruppen-Karten-Titel
gegenueber dem schwarzen (nicht verlinkten) Spiele-Karten-Titel. */
.text-reset {
color: inherit !important;
}
/* Blog-Karten (Punkt 191): 1:1 uebernommener Kartenstil aus dem Shards-
Demo (Kala@Basic/demo/components-blog-posts.html) - die Basisklassen
.card-post/.card-post__image/.card-post__category/.card-post__author*
sind bereits Teil des Shards-Themes (identisch mit dem Demo-CSS,
ungenutzt bis jetzt) und werden unveraendert verwendet: Titelbild als
Hintergrundbild-Box mit abgerundeten oberen Ecken, Kategorie-Badge oben
rechts auf dem Bild, Autor-Avatar unten links halb ueber die
Bildunterkante ueberlappend (.card-post--1). Ohne Titelbild wird
stattdessen die zweite Demo-Variante genutzt: Autor-Avatar + Name in
einer .card-footer-Zeile, kein Ueberlappen noetig.
Ergaenzt werden eigene Modifikator-Klassen, die es im Demo nicht gibt:
eine hoehere Variante fuer den vollbreiten angepinnten Banner
(index.php/Gruppe_Detail.php), sowie eine Klasse fuer automatisch
erkannte breite/niedrige Banner-Titelbilder (Titelbild_Format, siehe
blog.php blogTitelbildFormatErkennen()) - background-size:cover wuerde
ein extrem breites/niedriges Bild (Breite/Hoehe >= 2.4, z.B. ein
1900x378px-Banner) seitlich stark hineinzoomen, daher stattdessen
"contain" (ganzes Bild sichtbar, minimaler Leerraum oben/unten) auf
kleinerer Boxhoehe.
Fuer Titelbild_Format='hochkant' (Hoehe > Breite) wird STATTDESSEN die
eigene .card-post--aside-Demo-Variante genutzt (Bild links als schmaler
Streifen ueber die volle Kartenhoehe, Text rechts, Klassen bereits Teil
des Shards-Themes) - eine erste Loesung mit "contain" + vergroesserter
Boxhoehe sah nicht mehr wie im Demo aus (ungleichmaessige Kartenhoehen
im Grid, sichtbare graue Leerraum-Balken); .card-post--aside ist die
im Demo selbst vorgesehene Antwort auf Bilder, die im flachen
Top-Banner-Format nicht gut wirken, und braucht keine eigene Bildklasse
(normales background-size:cover, Kategorie/Avatar ruecken per
Vendor-CSS automatisch auf die linke Bildseite). */
.card-post__image--banner {
min-height: 16rem;
}
.card-post__image--breitband {
min-height: 7rem;
background-size: contain;
background-color: #f1f3f5;
}
/* Kombination Banner + Breitband (User-Feedback: wirkte "nicht passend" -
ein angepinnter Beitrag mit Breitband-Titelbild landet als vollbreiter
Banner, bekommt dadurch aber BEIDE Klassen gleichzeitig. Ohne diese
Regel gewinnt .card-post__image--breitband rein durch Reihenfolge im
Stylesheet (gleiche Spezifitaet, steht weiter unten) und zieht die
Boxhoehe auf 7rem zusammen - der Banner wirkt dadurch neben dem
restlichen Beitragstext viel zu klein/gestaucht. Der Zwei-Klassen-
Selektor hier gewinnt unabhaengig von der Reihenfolge und stellt die
volle Banner-Hoehe wieder her, "contain" (aus .breitband) bleibt
erhalten, damit das Bild trotzdem nicht seitlich zugeschnitten wird. */
.card-post__image--banner.card-post__image--breitband {
min-height: 16rem;
}