/* ============================================= Ranklerminis – Custom Styles (auf Basis von Quark 2 / Blades CSS) Nutzt die --q2-* Variablen aus quark2/css/theme.css für automatisches Light/Dark-Theming statt fixer Hex-Farben. ============================================= */ /* Captcha-Bild in seiner ECHTEN Groesse zeigen. quark2s eigene Regel zwingt es per object-fit:cover auf max-width:130px - gedacht fuer ein kleines Icon, nicht fuer ein Bild-Captcha: dabei wurden links/rechts Zeichen abgeschnitten und das Captcha teils unloesbar. Ebenso wichtig ist height:auto. Die Zeile ist ein Flex-Container, dessen Elemente auf volle Zeilenhoehe gestreckt werden - zusammen mit width:auto wuchs das 135x40-Bild dadurch auf 228x68, also aufs 1,7-fache. Das sah nicht nur unscharf aus, es ragte auch aus seinem Rahmen heraus und schob den Neu-laden-Knopf unter das Eingabefeld, wo er nicht mehr anklickbar war. Mit height:auto behaelt das Bild seine Groesse, der Knopf bleibt im Rahmen. Hoehere Spezifitaet als die Theme-Regel noetig (dieselbe Selektorkette), sonst gewinnt quark2 durch spaetere Quellreihenfolge. */ .form-wrapper .form-data.basic-captcha .form-input-prepend img { width: auto; height: auto; max-width: none; max-height: 100%; object-fit: contain; /* Der entscheidende Punkt: quark2 setzt align-self:stretch. In einer Flex-Zeile streckt das ein Element ueber die volle Zeilenhoehe - und zwar UNABHAENGIG von height:auto. Genau dadurch wuchs das Bild wieder auf Zeilenhoehe und in der Folge ueber seinen Rahmen hinaus. */ align-self: center; } /* Bild und Knopf mittig statt gestreckt, mit etwas Luft zum Eingabefeld. */ .form-wrapper .form-data.basic-captcha .form-input-prepend { align-items: center; gap: .25rem; padding: 0 .35rem; } /* quark2/Blades definiert nur .text-center, kein .text-left - die Klasse wurde an vielen Kartenelementen (News/Termine/verwandte Beitraege) bereits verwendet, um die Zentrierung von uebergeordneten ".container text-center"-Wrappern (Onepager-Sektionen) abzufangen, lief dort aber ins Leere (geerbtes text-center gewann mangels Gegenregel). */ .text-left { text-align: left; } :root { --rm-primary: #f2a900; --rm-primary-contrast: #2a2200; /* Gedecktes Grau fuer Hover-Zustaende, die bewusst NICHT die Akzentfarbe verwenden (Ueber-uns-Kacheln: Ueberschrift + Icon-Kreis). Muss pro Theme kippen: ein fixes Dunkelgrau waere im Dunkelmodus dunkler als der Hintergrund und damit unlesbar. Hellmodus = dunkles Grau wie .btn-dark, Dunkelmodus siehe :root[data-theme="dark"] weiter unten. */ --rm-hover-grau: #4b4b4b; /* Hoehe der fixierten Kopfzeile (header.section) - gemessen 61-62px, sowohl mobil als auch am Desktop und unabhaengig davon, ob die Seite schon gescrollt ist. Wird als Sprungziel-Abstand fuer Anker verwendet; bei einer Aenderung der Kopfzeilenhoehe nur hier anpassen. */ --rm-kopfzeile-hoehe: 62px; } /* quark2s --q2-text-muted (#898989 im Hellmodus) ist die gemeinsame Grauton-Variable fuer allen "leiseren" Text: Termin-/News-Teaser, Veranstaltungsbeschreibungen (rm-special-text), die Ueber-uns-Kacheln (rm-service-text) und die Gruppenbeschreibungen - ueberall dasselbe --q2-text-muted, deshalb reicht eine einzige Stelle. #898989 auf Weiss ist nur ~3.5:1 Kontrast (faellt durch WCAG AA fuer Fliesstext, das braucht 4.5:1). #757575 kam auf dem Seitenhintergrund nur auf 4.46:1 - hauchduenn unter der Schwelle, auf weissen Karten reichte es mit 4.61:1. #707070 liegt auf beiden Flaechen sicher darueber, ohne so dunkel zu werden wie der normale Text (--q2-text #242424) und damit die Hierarchie "gedaempft vs. normal" zu verlieren. Nur fuer den Hellmodus - im Dunkelmodus hat quark2s eigener Wert (#9a9aa0 auf dunklem Grund) mit ~5.9:1 bereits guten Kontrast, "dunkler" waere dort sogar die falsche Richtung. :not([data-theme="dark"]) statt eines schlichten :root reicht: der Seiten-Bootstrap in base.html.twig setzt data-theme synchron vor dem ersten Rendern, nie undefiniert. */ :root:not([data-theme="dark"]) { --q2-text-muted: #707070; } /* Gegenstueck zu --rm-hover-grau im :root oben: im Dunkelmodus muss das "gedecktere" Grau HELLER als der Grundton sein, nicht dunkler. #b0b0b6 liegt spuerbar unter dem normalen Ueberschriftenweiss (#f2f2f3), kommt auf dem dunklen Grund aber immer noch auf ~9:1 Kontrast. */ :root[data-theme="dark"] { --rm-hover-grau: #b0b0b6; } /* Sanftes Scrollen zu den Anker-Sektionen beim Klick auf die Navigation (das Original hatte dafür jQuery/page-scroll aus dem Agency-Theme). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* -- Startseiten-Sektionen abwechselnd hinterlegen (wie im rm-site-Original: .bg-light-gray auf Aktuelles/Impressionen/Kontakt) - sorgt fuer sichtbare Abgrenzung zwischen den Onepager-Abschnitten, auch zwischen Kontakt und Footer (Footer bleibt unveraendert/hell). --q2-bg-muted statt fixem Grauton, damit es im Dark Mode automatisch mitzieht. -- */ .rm-section-alt { background: var(--q2-bg-muted); } /* Pico/Blades setzt serienmaessig section { margin-bottom: 16px } auf JEDES
(Tag-Selektor, nicht nur .section) - war bislang unsichtbar, da alle Sektionen dieselbe Hintergrundfarbe hatten. Jetzt, wo Sektionen wechselnde Hintergruende haben, blitzt dort ein heller Spalt der Standard-Seitenfarbe durch. .section's eigenes grosszuegiges padding-block (48-96px) macht diesen zusaetzlichen Rand ohnehin ueberfluessig. */ section { margin-bottom: 0; } /* -- Anker-Ausgleich für die fixierte Kopfzeile -- scroll-margin-top statt des frueheren "position:relative; top:-70px"- Tricks: das ist die dafuer vorgesehene Eigenschaft, sie wirkt sowohl beim Klick auf einen #anker als auch bei scrollIntoView() und haengt nicht davon ab, dass der verschobene Anker zufaellig zur Kopfzeile passt. Die alten -70px lagen 8-9px ueber der tatsaechlichen Kopfzeilenhoehe (61-62px), dadurch blieb nach jedem Sprung ein schmaler Streifen der darueberliegenden Sektion sichtbar. */ .module-anchor { display: block; height: 0; visibility: hidden; pointer-events: none; /* Bewusst 15px WENIGER als die Kopfzeilenhoehe, nicht mehr: ein kleinerer Wert laesst den Sprung etwas tiefer in die Zielsektion laufen. Deren Innenabstand betraegt ~90px bis zur Ueberschrift, es bleiben also immer noch ~75px Luft - es verschwindet nur ungenutzter Leerraum hinter der Kopfzeile, nie Inhalt. Ein GROESSERER Wert waere der umgekehrte Fehler und wuerde (wie zuvor mit 70px) einen Streifen der darueberliegenden Sektion stehen lassen. */ scroll-margin-top: calc(var(--rm-kopfzeile-hoehe) - 15px); } /* -- Allgemeines Card-Grid (responsive, ersetzt Bootstrap-Row/Col) -- */ .rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.75rem; } /* .rm-grid's minmax(260px, 1fr) stretches cards to fill the row when there are fewer entries than columns fit (e.g. 1-2 Termine/News) - cap the track size and stop justifying to fill the row so the card/tile size stays constant regardless of item count. */ .rm-grid--fixed { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: start; } /* Unter ~600px passt ohnehin nur noch eine Spalte (2*260px+Gap > 600px) - der 320px-Max-Deckel greift dann trotzdem weiter und laesst die Karte schmaler als den verfuegbaren Platz, mit sichtbarer Luecke daneben. Auf dem Smartphone soll die Karte hier stattdessen die volle Breite nutzen. (Dieselbe Regel fuer .rm-related-section .rm-grid steht bei dessen eigener Definition weiter unten - gleiche Spezifitaet, muss in Quellreihenfolge NACH der unbedingten Regel dort stehen, sonst gewinnt die unbedingte Regel trotz zutreffender Media Query.) */ @media (max-width: 600px) { .rm-grid--fixed { grid-template-columns: 1fr; justify-content: stretch; } } /* Termine-Startseiten-Ausschnitt (immer max. 3 Karten, slice(0,3)): jede Karte ca. 1/3 der ~1200px-Containerbreite (900-1020px reichen fuer 3 Spuren, ein 4. Track braeuchte >1200px und passt nie hinein - garantiert immer genau 3 pro Zeile statt 4 auf breiten Bildschirmen). Bei 1-2 Terminen kollabieren die uebrigen Spuren (auto-fit) und die verbleibenden Karten werden als Gruppe zentriert statt linksbuendig zu kleben. */ .rm-grid--termine-home { grid-template-columns: repeat(auto-fit, minmax(300px, 340px)); justify-content: center; } /* Suchergebnisse: immer exakt 4 gleich breite Spalten (25% je Kachel), unabhaengig von der Trefferzahl. Bewusst repeat(4, 1fr) statt auto-fit - auto-fit stretcht eine einzelne oder wenige Kachel(n) sonst ueber die ganze Zeile (wie bei .rm-grid), waehrend ein fester minmax(...,1fr)-Deckel je nach Containerbreite mal 3, mal 4 Spuren ergibt (siehe .rm-grid--fixed) - hier soll die Breite pro Kachel konstant 25% bleiben, auch bei nur einem Treffer (bleibt dann einfach linksbuendig, keine leeren Spuren werden sichtbar gefuellt). Eigenstaendige Klasse statt Zusatz zu .rm-grid, damit keine Kaskaden-Reihenfolge mit dessen eigener grid-template-columns-Regel entscheiden muss. */ .rm-grid--search { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* quark2/theme.css widerspricht sich bei .card-footer selbst: ".card > footer" (Reset gegen Picos Standard-Sectioning-Stile, Zeile ~171) setzt "margin: 0", waehrend die spaetere Regel ".card-footer { margin-top: auto }" (Zeile ~1402) den Footer eigentlich an den unteren Kartenrand schieben soll. "*.card > footer*" hat durch Klasse+Element aber hoehere Spezifitaet als die reine Klasse ".card-footer" und gewinnt IMMER - margin-top:auto griff dadurch nie wirklich. Sichtbar wurde das erst, als hier die Suchergebnis-Karten ohne Teaser (.card-body) auskamen: bisher fuellte dessen "flex:1" als Nebeneffekt den Platz und schob den Footer optisch nach unten. Ohne Teaser fehlte dieser Fuellstoff, der Footer ruckte nach oben. Betrifft jede Karte ohne .card-body, nicht nur die Suche - deshalb hier allgemein und nicht auf die Suchergebnisse beschraenkt behoben: ".card > footer.card-footer" schlaegt ".card > footer" durch die zusaetzliche Klasse (hoehere Spezifitaet). */ .card > footer.card-footer { margin-top: auto; } /* Der "Zum Termin"/"Zum Beitrag"/"Zur Seite"-Knopf soll so breit sein wie der Titel/Text darueber, nicht nur so breit wie sein eigenes, kurzes Label (.btn ist von Haus aus inline-flex, also eigentlich schrumpft er auf den Textinhalt). .card-footer hat dasselbe seitliche Padding (1.375rem) wie .card-header/.card-body (quark2/theme.css) - Breite 100% des Footers richtet den Knopf damit exakt an der Titel-/Textkante aus. */ .rm-search-result-btn { display: flex; width: 100%; justify-content: center; } @media (max-width: 900px) { .rm-grid--search { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .rm-grid--search { grid-template-columns: 1fr; } } .rm-empty-state { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; color: var(--q2-text-muted); } .rm-empty-state i { font-size: 2em; /* FontAwesome setzt selbst eine feste width (ca. 1.25em) - ein block-Element mit expliziter Breite wird von text-align:center NICHT zentriert (das wirkt nur auf Inline-Inhalt), sondern braucht margin:auto. */ margin: 0 auto .5rem; display: block; } /* -- Termine -- */ .termin-datum { display: inline-flex; align-items: center; gap: .4em; background: var(--rm-primary); color: var(--rm-primary-contrast); font-weight: 700; font-size: .875rem; padding: .25rem .75rem; border-radius: var(--q2-radius-pill); margin-bottom: .75rem; } /* Termine-Uebersichtsseite: dezenter Akzent bei Kategorie "Hervorgehoben" - ein kleiner Punkt am Datums-Icon statt eines Rahmens/Rands, da linke Rand-Linien schon bei .rm-event-meta eine andere Bedeutung tragen (Detail- Metadaten) und die volle 2px-Gelbumrandung der eigenen Hervorhebungs-Box auf der Startseite vorbehalten bleibt (siehe termin_hervorgehoben.html. twig). Frueher fuer "hat Einladung/Formular" verwendet - das ist inzwischen als Button direkt auf der Karte sichtbar, daher nicht mehr noetig. Siehe rm-card--hervorgehoben-Bedingung in termine_item.html. twig. */ .rm-termine-liste .rm-card--hervorgehoben .termin-datum { position: relative; } .rm-termine-liste .rm-card--hervorgehoben .termin-datum::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--rm-primary-contrast); border: 2px solid var(--q2-bg-elev); } /* Icon-only Buttons auf Termin-Karten (Einladung + Formular BEIDE hinterlegt - siehe nur_icons in termine_item.html.twig, gilt gleich auf der Terminuebersicht wie im Kachel-Teaser der Startseite) - neben dem Details-Button, ohne Textlabel, in derselben (schwarzen) Farbe wie der Badge-Punkt (der allerdings nur auf der Uebersicht erscheint, siehe rm-termine-liste-Scope oben). Helles Grau hinterlegt statt des .btn-outline-Weiss, damit sie sich als eigene Gruppe neben dem gelben Details-Button abheben. Nur die Seiten-Innenabstaende werden ueberschrieben, oben/unten bleibt exakt der Wert von .btn (0.625rem) erhalten - dadurch garantiert gleich hoch wie der Details-Button, ohne den Wert hier zu wiederholen. */ .rm-icon-btn { padding-left: .875rem; padding-right: .875rem; color: var(--rm-primary-contrast); background: var(--q2-bg-muted); } .rm-icon-btn:hover { color: var(--rm-primary-contrast); background: var(--q2-border-strong); } .rm-icon-btn i { margin: 0; } /* "Einladung herunterladen (PDF)" auf der Termin-Einzelansicht: bewusst NICHT in der Akzentfarbe (siehe termine_item.html.twig) - "Jetzt anmelden" bleibt die gelbe Haupt-Handlung, die Einladung nur ansehen ist die zweitrangige Option daneben. quark2s .btn:hover erzwingt sonst ueberall color:var(--q2-accent-contrast) beim Hover - hier extra zurueckgesetzt, damit die weisse Schrift auch beim Draueberfahren weiss bleibt (die Aufhellung durch .btn:hover { opacity: .9 } reicht als Hover-Feedback). Fixe Hex-Werte statt Theme-Variablen, weil ein dunkles Grau in Hell- UND Dunkelmodus gleich gut funktioniert - anders als z.B. --q2-text-strong, das im Dunkelmodus auf Weiss umspringt. */ .btn.btn-dark { background: #4b4b4b; color: #fff; } .btn.btn-dark:hover { color: #fff; } /* Schrift auf den gelben Knoepfen im DUNKELMODUS. Dort hellt das Theme die Akzentfarbe auf (#f2a900 -> rgb(246,187,91)), die Schrift bleibt aber weiss (--q2-accent-contrast). Ergebnis: 1,72:1 - noch schwaecher als im Hellmodus (2,01:1) und deutlich unter den 4,5:1, die fuer Text gefordert sind. Mit der ohnehin verwendeten Textfarbe #242424 sind es 9,0:1. Bewusst NUR im Dunkelmodus: im Hellmodus bleibt die weisse Schrift wie gehabt (ausdrueckliche Entscheidung, die Markenoptik dort so zu lassen). Nicht ueber die Variable --q2-accent-contrast geloest, weil die auch an anderen Akzentflaechen haengt - hier soll sich nur der Knopf aendern. btn-outline und btn-dark ausgenommen, die haben eigene Farben. */ :root[data-theme="dark"] .btn:not(.btn-outline):not(.btn-dark), :root[data-theme="dark"] .btn:not(.btn-outline):not(.btn-dark):hover { color: #242424; } /* Ausnahme nur fuer die Gold-Variante: dort sitzt der Knopf nicht auf Gelb, sondern auf einem eigenen Laubgruen (#297326, siehe weiter unten) - da ist Weiss die kontraststarke Wahl (5,87:1), dunkle Schrift faellt auf 2,64:1 ab. Die Varianten blau/himmelblau faerben ihren Knopf NICHT selbst, nutzen also das globale Gelb und brauchen wie alle anderen die dunkle Schrift. Dieselben :not()-Bedingungen wie oben, damit die Regel die gleiche Gewichtung erreicht und als spaetere gewinnt. */ :root[data-theme="dark"] .rm-special-section--gold .btn:not(.btn-outline):not(.btn-dark), :root[data-theme="dark"] .rm-special-section--gold .btn:not(.btn-outline):not(.btn-dark):hover { color: #fff; } /* Termin-Einzelansicht nutzte bisher die volle .container-Breite (1200px), waehrend die News-Einzelansicht (.rm-news-article) bei 1000px gedeckelt ist - dadurch klaffte bei der Bild/Text-Aufteilung darunter (25%/75%, siehe rm-event-single-content--mit-bild) auf breiten Bildschirmen viel Platz zwischen Bild und Text. Gleiche Breite wie bei News, aus demselben Grund (siehe Kommentar dort). */ .rm-event-single { max-width: 1000px; } /* Beschreibungstext links / Bild rechts (schmaler, ca. 1/3) fuer Termine mit Bild UND Beschreibungstext in der Einzelansicht (siehe rm-event-single-content--mit-bild-Bedingung in termine_item.html.twig) - betrifft nur dieses innere Grid (33/67-Aufteilung), Titel/Termindetails- Box und Buttons bleiben einspaltig, aber wie alles in .rm-event-single jetzt ebenfalls auf 1000px gedeckelt (siehe oben). Bild steht im Markup VOR dem Text (auf Mobile dadurch weiterhin oben) - ab 700px wird nur die sichtbare Reihenfolge per order umgedreht, ohne die DOM-Reihenfolge/Barrierefreiheits-Lesereihenfolge anzutasten. Selbes Grundmuster wie .rm-termin-featured-grid auf der Startseite (fixes Seitenverhaeltnis, das bei laengerem Text durch align-items:stretch + object-fit:cover ueberstimmt wird), hier aber per einfachem @media statt @container, weil diese Seite nicht - wie die Startseiten-Box - an der Spaltenbreite eines Geschwister-Grids ausgerichtet werden muss. */ .rm-event-single-content--mit-bild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 700px) { .rm-event-single-content--mit-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 33%); align-items: stretch; gap: 2rem; } .rm-event-single-content--mit-bild .rm-event-single-img { order: 2; } } .rm-event-single-img { aspect-ratio: 3 / 2; border-radius: var(--q2-radius-md); overflow: hidden; } .rm-event-single-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Termin mit Bild, aber ohne Beschreibungstext (siehe rm-event-single-content--nur-bild-Bedingung in termine_item.html.twig): einspaltig statt 33/67-Aufteilung, sonst bliebe links eine leere Spalte. Das Bild steht linksbuendig wie Titel und Termindetails darueber und ist auf 600px gedeckelt - ueber die volle 1000px-Breite wuerde es die Seite dominieren. */ .rm-event-single-content--nur-bild .rm-event-single-img { max-width: 600px; } .rm-event-meta { background: var(--q2-bg-muted); border-left: 4px solid var(--rm-primary); padding: .875rem 1.25rem; border-radius: 0 var(--q2-radius-md) var(--q2-radius-md) 0; margin: 1rem 0 1.5rem; } .rm-event-meta p { margin-bottom: .25rem; } .rm-event-meta p:last-child { margin-bottom: 0; } /* Kalender-Export: klein/dezent statt eigener Button (die Einladung ist die eigentliche Handlungsaufforderung auf dieser Seite). */ .rm-event-ics-link { display: inline-flex; align-items: center; font-size: .8125rem; font-weight: 600; color: var(--q2-text-muted); margin-left: .75rem; white-space: nowrap; /* Weder im Ruhezustand noch beim Hover unterstrichen. */ text-decoration: none; } .rm-event-ics-link:hover { color: var(--q2-text); text-decoration: none; } .rm-event-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; } /* -- Hervorgehobener Termin auf der Startseite (Kategorie "Hervorgehoben" + Einladungs-PDF, z. B. Sommerlager) - eigene, breite Karte unterhalb der regulaeren Termine-Kacheln. -- */ /* Breite exakt an die 3-Kachel-Reihe darueber angleichen (3 * 340px + 2 * 1.5rem-Gap = 1068px), statt die volle .container-Breite zu nutzen - sonst wirkt die Box breiter als die Termine-Kacheln darueber. container-type:inline-size, damit die Bild/Text-Aufteilung unten per @container an DERSELBEN verfuegbaren Breite haengt wie .rm-grid--termine- home's eigener repeat(auto-fit, minmax(300px, 340px))-Umbruch - eine fixe @media-Breakpoint-Vermutung lag unabhaengig davon und brach an anderer Stelle um als das Kachel-Grid (z. B. Bild+Text schon nebeneinander, waehrend das Grid oben noch einspaltig war). */ .rm-termin-featured { position: relative; container-type: inline-size; max-width: 1068px; margin: 2rem auto 0; background: var(--q2-bg-elev); border: 2px solid var(--rm-primary); border-radius: var(--q2-radius-md); box-shadow: var(--q2-shadow-card); overflow: hidden; } .rm-termin-featured-grid { display: grid; grid-template-columns: 1fr; } /* Kein Badge mehr (der farbige Rahmen signalisiert "besonders" bereits) - das Bild sitzt dadurch buendig an der oberen Kartenkante. auto-fit(minmax(300px,340px)) im Kachel-Grid springt bei genau 2*340+24 = 704px (2 Spalten) bzw. 3*340+2*24 = 1068px (3 Spalten, = die volle Breite dieser Box) auf die naechste Spaltenzahl - dieselben Schwellen hier fuer die Bild/Text-Aufteilung verwendet, damit beide Komponenten bei derselben verfuegbaren Breite umbrechen. */ @container (min-width: 704px) { .rm-termin-featured-grid { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: stretch; } } @container (min-width: 1060px) { .rm-termin-featured-grid { /* 1060 statt 1068px Schwelle: .rm-termin-featured selbst hat max-width:1068px - bei EXAKT dieser Breite greift eine "min-width:1068px"-Abfrage durch Sub-Pixel-Rundung beim Layout nicht zuverlaessig (die Box landet layoutbedingt oft hauchduenn darunter). Kleiner Sicherheitsabstand, damit die volle Breite (= 3-Spalten-Schwelle des Kachel-Grids) den 33%-Schnitt sicher auslaesst - 340px von 1068px Gesamtbreite ~= 32%, liegt dann auf einer Linie mit der ersten Kachel der Reihe darueber. */ grid-template-columns: minmax(0, 33%) minmax(0, 1fr); } } .rm-termin-featured-grid.rm-termin-featured-grid--ohne-bild { grid-template-columns: 1fr; } /* aspect-ratio auf dem WRAPPER, nicht auf dem : der Wrapper ist ein gestrecktes Grid-Element (align-items:stretch). Solange der Text kuerzer ist als das Bild, bestimmt das Seitenverhaeltnis die Zeilenhoehe (3:2 = ~15:10, dasselbe Format wie in der Galerie). Braucht der Text ausnahmsweise mehr Platz, gewinnt die Streckung und das Bild fuellt die groessere Hoehe per object-fit:cover - so entsteht in keinem Fall eine Luecke. Vorher erzwang ein quadratischer Zuschnitt (500x500) plus height:100% eine unnoetig hohe Box. width:100% ist noetig, sonst berechnet der Browser bei Zeilen, die durch den Text hoeher gestreckt werden, aus dieser gestreckten Hoehe per aspect-ratio eine zu breite Spalten-Breite (statt sich an der Grid-Spur zu orientieren) - der Wrapper ragt dann in die Text-Spalte hinein und Text/ Buttons liegen sichtbar ueber dem Bild. Trat vor allem bei schmaleren, aber ausreichend breiten Containern auf (z. B. Smartphone-Querformat), wo die Text-Spalte durch mehr Zeilenumbrueche hoeher wird als das Seitenverhaeltnis dem Bild an sich zugestehen wuerde. */ .rm-termin-featured-img { display: block; width: 100%; aspect-ratio: 3 / 2; } .rm-termin-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .rm-termin-featured-body { padding: 1.75rem 2rem; } /* quark2s Standard-h3 (24px) stach neben den Kartentiteln der restlichen Termine (siehe .card-title weiter unten) zu stark heraus - 21px behaelt die Hervorhebung (weiterhin klar groesser als die normalen Karten), wirkt aber nicht mehr so extrem. */ .rm-termin-featured-body h3 { margin: 0 0 .5rem; font-size: 1.3125rem; } /* Nur die Termine-Vorschaukarten auf der Startseite (neben der Hervor- hebungsbox, siehe .rm-termin-featured-body h3 oben) - eigene Klasse ".rm-termine-home-karten" noetig, weil ".rm-grid--termine-home" (reine Layout-Klasse) auch von modular/aktuelles.html.twig fuer die News- Vorschau mitgenutzt wird; darueber waeren News/verwandte Beitraege/ Suchergebnisse (alle ".card-title") versehentlich mitgezogen worden. Unsere Kartentitel sind ein reines statt ein , treffen damit quark2s eigentliche Groessen-Regel (".card-title :is(h1,h2,h3,h4,h5,h6)", 1.1875rem) nicht und erben nur die normale Textgroesse (16px) - hier etwas groesser (18px), damit sie sich klarer vom Beschreibungstext darunter abheben. */ .rm-termine-home-karten .card-title { font-size: 1.125rem; } /* font-size bewusst NICHT gesetzt (vorher .875rem/14px): auf der kompakten Terminkarte (card-body) haben Uhrzeit/Ort dieselbe Groesse wie der Beschreibungstext - hier sonst kleiner als die Beschreibung direkt darunter (16px), obwohl beides zusammengehoerige Metadaten zum selben Termin sind. Erbt jetzt die normale Textgroesse. */ /* Bewusst normale Textfarbe statt --q2-text-muted: bei den regulaeren Terminkarten steckt Datum/Zeit in einem farbigen Badge (siehe .termin-datum), der auch bei gedaempfter Farbe praesent bleibt - hier in der Hervorhebungsbox gibt es keinen Badge-Hintergrund (und soll auch keinen geben), gedaempftes Grau liess Datum/Uhrzeit/Ort dadurch zu sehr in den Hintergrund treten. */ .rm-termin-featured-meta { color: var(--q2-text); margin-bottom: .75rem; } /* -- Zurueck-Link (z. B. "Alle Termine"): Querstrich zur klaren Trennung vom Inhalt darueber. -- */ .rm-back-link { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--q2-divider); } /* -- Galerie / Bildergrid mit eigener Lightbox -- */ .rm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; } /* Startseiten-Impressionen-Streifen zeigt immer genau 6 Fotos (slice(0,6)) - die responsive Spaltenzahl von .rm-gallery kann dabei eine unvollstaendige letzte Zeile erzeugen (z. B. 4 Spalten -> 4+2, unschoener Leerraum). Feste Spaltenzahl statt dessen, die 6 immer restlos aufteilt. */ .rm-gallery--strip { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .rm-gallery--strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .rm-gallery--strip { grid-template-columns: 1fr; } } .rm-gallery-item { display: block; overflow: hidden; border-radius: var(--q2-radius-md); box-shadow: var(--q2-shadow-card); } /* aspect-ratio statt fester height:220px: bei fester Pixelhoehe aendert sich das Seitenverhaeltnis mit jeder Spaltenbreite (auto-fill/auto-fit je nach Viewport) - auf manchen Breiten wurde die Karte dadurch sehr breit/flach und wirkte wie ein Kinoformat-Crop statt einem normalen Foto. 3:2 (~15:10) bleibt bei jeder Spaltenbreite gleich und ist ein uebliches Fotoformat. */ .rm-gallery-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .25s ease, filter .25s ease; } .rm-gallery-item:hover img { transform: scale(1.04); filter: brightness(.94); } .rm-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(10, 10, 12, .92); } .rm-lightbox.is-open { display: flex; } /* Wurde bisher zwar gesetzt, aber nie gestylt - die Seite scrollte hinter der offenen Lightbox weiter, was beim Wischen besonders stoerte. */ body.rm-lightbox-open { overflow: hidden; } .rm-lightbox-viewport { position: absolute; inset: 0; overflow: hidden; } /* Drei Slides nebeneinander (Vorgaenger/aktuell/Nachfolger); verschoben wird der Track per transform - siehe lightbox.js. touch-action: none, weil wir die Wischgeste selbst auswerten und der Browser sonst dazwischenfunkt. */ .rm-lightbox-track { display: flex; height: 100%; touch-action: none; will-change: transform; } .rm-lightbox-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; } .rm-lightbox-slide img { max-width: 100%; max-height: 88vh; border-radius: var(--q2-radius-sm); box-shadow: var(--q2-shadow-dropdown); user-select: none; -webkit-user-drag: none; /* Unsichtbar, bis das Bild dieser Slide vollstaendig geladen ist (Klasse is-ready, siehe lightbox.js). Sonst bleibt beim Wechsel des src so lange das zuvor angesehene Foto stehen - der Besucher haelt es fuer das falsche. */ opacity: 0; visibility: hidden; transition: opacity .2s ease; } .rm-lightbox-slide img.is-ready { opacity: 1; visibility: visible; } /* Ladekreis, solange die Slide auf ihr Bild wartet. Erscheint erst nach 0,3 s, damit er bei schnell (oder aus dem Cache) geladenen Bildern nicht aufblitzt. */ .rm-lightbox-slide { position: relative; } .rm-lightbox-slide.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: rm-lb-spin .8s linear infinite, rm-lb-spin-in .01s linear .3s forwards; pointer-events: none; } @keyframes rm-lb-spin { to { transform: rotate(360deg); } } @keyframes rm-lb-spin-in { to { opacity: 1; } } .rm-lightbox-close, .rm-lightbox-prev, .rm-lightbox-next { position: absolute; z-index: 2; /* ueber dem Track, sonst faengt der die Klicks ab */ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 50%; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: background .15s ease; } .rm-lightbox-close:hover, .rm-lightbox-prev:hover, .rm-lightbox-next:hover { background: rgba(255,255,255,.2); } .rm-lightbox-close { top: 1.25rem; right: 1.25rem; } .rm-lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); } .rm-lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); } .rm-lightbox-counter { position: absolute; z-index: 2; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .875rem; } @media (max-width: 600px) { .rm-lightbox-slide { padding: .5rem; } .rm-lightbox-prev, .rm-lightbox-next { width: 2.5rem; height: 2.5rem; } } /* -- Kontakt-Section -- */ .rm-kontakt-cards { display: flex; flex-direction: column; gap: 1.25rem; max-width: 640px; margin: 0 auto; } /* Optionales Foto der Gruppenleitung neben den Kontakt-Karten (nur wenn ein Bild im Seitenordner liegt - page.media.images|first in kontakt.html.twig). */ .rm-kontakt-layout--mit-foto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; max-width: 900px; margin: 0 auto; } @media (min-width: 700px) { .rm-kontakt-layout--mit-foto { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } } .rm-kontakt-layout--mit-foto .rm-kontakt-cards { max-width: none; margin: 0; } .rm-kontakt-foto-col { text-align: center; } .rm-leitung-foto-wrap { border-radius: var(--q2-radius-md); overflow: hidden; box-shadow: var(--q2-shadow-card); } .rm-leitung-foto { width: 100%; height: auto; display: block; } .rm-leitung-name { margin-top: .75rem; font-weight: 700; } .rm-kontakt-item { display: flex; align-items: flex-start; gap: 1.25rem; background: var(--q2-bg-elev); border-radius: var(--q2-radius-md); padding: 1.5rem 1.75rem; box-shadow: var(--q2-shadow-card); text-align: left; } .rm-kontakt-icon { font-size: 1.8em; color: var(--rm-primary); margin-top: .15em; flex-shrink: 0; width: 2rem; text-align: center; } .rm-kontakt-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--q2-text-muted); margin: 0 0 .25rem; } .rm-kontakt-value { font-size: 1rem; margin: 0 0 .875rem; word-break: break-word; } /* Antispam-Plugin macht aus der reinen Text-Adresse hier automatisch einen -Link (das Verschluesseln laesst sich davon nicht trennen) - visuell/funktional wieder wie normalen Text behandeln, da der eigentliche Mailto-Aufruf schon der Button darunter uebernimmt. */ .rm-kontakt-value a { color: inherit; text-decoration: none; pointer-events: none; cursor: default; } .rm-kontakt-social-link { font-size: 1.0625rem; font-weight: 700; text-decoration: none; } .rm-kontakt-social-link:hover { color: var(--rm-primary); } /* -- Special/Featured-Section -- */ .rm-special-section { color: #fff; padding: 4.5rem 0; } /* Farbschema je Kampagne (header.farbe in special.md) - z.B. Miniwerbung frisches Gruen, Sternsingen passend zur kalten Jahreszeit das urspruengliche Navy-Blau. */ /* War zuerst ein gruener Hintergrund - verschwamm aber mit der ebenfalls gruenen Navigationsleiste und wiederholte nur, was im Foto (gruene UND violette Ministranten-Gewaender) schon steckt. Jetzt umgekehrt: Gold als Flaeche (Gelb ist die Gegenfarbe zu Gruen auf dem Farbkreis - maximaler Abstand zur Navigation), Gruen als Akzent bei Badge/Button. Gold ist ausserdem ohnehin die Markenfarbe der Seite (--rm-primary). Erster Versuch nahm die Lightness weit runter, um bei WEISSEM Text auf 4.5:1 zu kommen - das Ergebnis sah aber nicht nach Gold aus, sondern nach Braun (dunkles Gelb kippt perzeptiv ins Braeunliche, anders als z.B. dunkles Blau/Gruen, die "ihre" Farbe auch bei niedriger Helligkeit behalten). Deshalb jetzt umgekehrt: Hintergrund bleibt hell/gesaettigt (echtes Gold, nah an --rm-primary selbst), dafuer wird der TEXT dunkel (--rm-primary-contrast) statt weiss - dasselbe Prinzip, das die Gold-Badges anderswo auf der Seite schon verwenden. */ .rm-special-section--gold { background: linear-gradient(135deg, #bd8005 0%, #eba400 55%, #f9c11a 100%); color: var(--rm-primary-contrast); } .rm-special-section--gold .rm-special-title { color: var(--rm-primary-contrast); } .rm-special-section--gold .rm-special-sub { color: rgba(42,34,0,.75); } .rm-special-section--gold .rm-special-text, .rm-special-section--gold .rm-special-text p { color: rgba(42,34,0,.85); } .rm-special-section--gold .rm-special-details li { color: rgba(42,34,0,.9); border-bottom-color: rgba(42,34,0,.15); } /* Badge und Formular-Button dieser Variante bewusst NICHT ueber die globale --rm-primary/--q2-accent, sondern lokal auf ein warmes, natuerliches Laubgruen umgeschaltet - das waere sonst auch jeder andere Button der Seite (Hero, Gruppen, ...) betroffen. Weisser Text darauf, der Grünton ist dunkel genug dafuer (5.87:1). */ .rm-special-section--gold .rm-special-badge, .rm-special-section--gold .btn { background: #297326; color: #fff; } .rm-special-section--gold .btn:hover { color: #fff; } .rm-special-section--blau { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%); } /* Lebendiges Azurblau fuer die Miniwerbung (Ministranten-Recruiting) - bewusst deutlich heller/frischer als das dunkle Navy von --blau (Sternsingen), damit beide nebeneinander nicht wie dieselbe Farbe wirken. Weisser Text ueberall min. 5.53:1 Kontrast, Badge/Button bleiben unveraendert auf der globalen Gold-Akzentfarbe (kein eigenes Override noetig, wie schon bei --blau). */ .rm-special-section--himmelblau { background: linear-gradient(135deg, #0d3359 0%, #0e5381 55%, #0f7099 100%); } /* quark2s generische h2::before-Akzentleiste ist dunkel (fuer helle Sections gedacht) und auf dem dunklen Hintergrund kaum sichtbar - selbes Muster wie .hero h2::before, einfach ausblenden. */ .rm-special-title::before { display: none; } .rm-special-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem; } @media (min-width: 860px) { .rm-special-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .rm-special-badge { display: inline-block; background: var(--rm-primary); color: var(--rm-primary-contrast); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .3rem 1rem; border-radius: var(--q2-radius-pill); margin-bottom: 1rem; } .rm-special-title { color: #fff; margin: 0 0 .5rem; line-height: 1.2; } .rm-special-sub { color: rgba(255,255,255,.75); margin-bottom: .75rem; } /* quark2's `p, li { color: var(--q2-text) }` matches the raw

from {{ content|raw }} directly (specificity beats plain inheritance from this wrapper), so the paragraph itself needs the color repeated explicitly. */ .rm-special-text, .rm-special-text p { color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 1.25rem; } .rm-special-details { list-style: none; padding: 0; margin: 0 0 1.75rem; } /* Der 1.75rem-Abstand ist fuer die Details-NACH-Text-Reihenfolge gedacht (Luft vor dem Button). Steht die Liste stattdessen direkt unter der Ueberschrift (details_zuerst, aktuell nur Heurigen 2026), erkennbar am Geschwister-Selektor unten, wirkte derselbe Abstand vor dem folgenden Absatz unnoetig groszuegig. */ .rm-special-title + .rm-special-details { margin-bottom: .75rem; } .rm-special-details li { list-style: none; /* list-style:none on the ul doesn't cascade to override Pico/Blades' `ul li { list-style: square }`, which targets li directly */ padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.9); } .rm-special-details li:last-child { border-bottom: none; } .rm-special-img { width: 100%; border-radius: var(--q2-radius-md); box-shadow: 0 8px 40px rgba(0,0,0,.4); } /* -- Gruppen-Section -- */ .rm-gruppe { padding: 3rem 0; } .rm-gruppe + .rm-gruppe { border-top: 1px solid var(--q2-divider); } .rm-gruppe-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1.75rem; } @media (min-width: 860px) { .rm-gruppe-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .rm-gruppe-grid.rm-gruppe-grid--flip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .rm-gruppe-grid.rm-gruppe-grid--flip .rm-gruppe-foto-col { order: 2; } .rm-gruppe-grid.rm-gruppe-grid--flip .rm-gruppe-info-col { order: 1; } } .rm-gruppe-foto { width: 100%; border-radius: var(--q2-radius-md); box-shadow: var(--q2-shadow-card); display: block; object-fit: cover; max-height: 420px; } .rm-gruppe-foto--placeholder { height: 280px; background: var(--q2-bg-muted); border-radius: var(--q2-radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--q2-text-muted); gap: .5rem; } .rm-gruppe-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .25rem .875rem; border-radius: var(--q2-radius-pill); color: #2b2b2b; margin-bottom: .75rem; } .rm-gruppe-name { font-size: 1.7em; margin: 0 0 .75rem; } .rm-gruppe-text { color: var(--q2-text-muted); line-height: 1.75; margin-bottom: 1.25rem; } .rm-gruppe-ministunde { background: var(--q2-bg-elev); border-left: 4px solid var(--rm-primary); padding: .625rem 1rem; border-radius: 0 var(--q2-radius-sm) var(--q2-radius-sm) 0; font-size: .9375rem; box-shadow: var(--q2-shadow-card); } .rm-gruppe-ministunde i { color: var(--rm-primary); margin-right: .4em; } /* -- Links-Section -- */ .rm-links-section { padding: 2.5rem 0; background: #14142b; } .rm-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; } .rm-link-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.25rem .75rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--q2-radius-md); color: #fff; text-decoration: none; text-align: center; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease; } .rm-link-card i { font-size: 1.7em; color: var(--rm-primary); transition: color .2s ease; } .rm-link-card:hover { background: var(--rm-primary); border-color: var(--rm-primary); color: var(--rm-primary-contrast); text-decoration: none; } .rm-link-card:hover i { color: var(--rm-primary-contrast); } /* -- Über uns-Kacheln (Feature-Icon-Kreis) -- */ .rm-feature-icon { width: 4.5rem; height: 4.5rem; margin: 0 auto .875rem; border-radius: 50%; background: var(--rm-primary); color: var(--rm-primary-contrast); display: flex; align-items: center; justify-content: center; font-size: 1.5em; /* box-sizing + transparenter Rahmen schon im Ruhezustand: verhindert, dass der Kreis beim Hover-Rahmen (siehe .rm-service-item:hover .rm-feature-icon) ploetzlich groesser wird. */ box-sizing: border-box; border: 2px solid transparent; /* Eigene, laengste Dauer (.6s) - Karte (.4s) und Ueberschrift (.5s) laufen jeweils kuerzer, bewusst gestaffelt. */ transition: transform .6s ease, box-shadow .6s ease, background .6s ease, color .6s ease, border-color .6s ease; } /* Duenner Rahmen statt der vorherigen "randlosen" Kacheln - Icon+Text standen davor ohne erkennbare Zusammengehoerigkeit einfach im Grid. Bewusst nur ein Rahmen (keine gefuellte Flaeche/kein Schatten im Ruhezustand), damit es sich von den bereits kraeftigeren Karten bei Termine/News/Special-Sections weiter abhebt. Linksbuendig statt zentriert (Icon+Ueberschrift in einer Zeile, Text darunter) - bei mehrzeiligem Text und der Liste in "Minis in der Freizeit" liest sich zentrierter Text/zentrierte Listen deutlich schlechter. */ .rm-service-item { text-align: left; border: 1px solid var(--q2-border-ring); border-radius: var(--q2-radius-md); padding: 1.75rem 1.5rem; transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } /* .rm-inview: gleicher Effekt wie :hover, aber per JS (theme://js/inview- hover.js) gesetzt, waehrend die Karte beim Scrollen im Sichtbereich ist - nur auf Geraeten ohne Maus/Hover (matchMedia "(hover: none)"), damit Desktop unveraendert bei reinem :hover bleibt. */ .rm-service-item:hover, .rm-service-item.rm-inview { transform: translateY(-4px); border-color: var(--rm-primary); box-shadow: var(--q2-shadow-dropdown); } /* Eigene Dauer (.5s), zwischen Karte (.4s) und Icon (.7s) gestaffelt. Auf dem Grundzustand (nicht nur :hover) gesetzt, damit auch das Zurueckfaerben beim Verlassen gleich schnell ablaeuft. */ .rm-service-item h4 { transition: color .5s ease; } .rm-service-item:hover h4, .rm-service-item.rm-inview h4 { color: var(--rm-hover-grau); } /* Icon-Kreis dreht beim Hover auf Dunkelgrau (#4b4b4b wie .btn-dark) - das Icon-Symbol selbst wechselt auf Gelb, damit trotz der grauen Flaeche/ Ueberschrift genug Gelb (Rahmen + Symbol) stehen bleibt. Hier bewusst KEIN --rm-hover-grau wie bei der Ueberschrift daneben: das Gelb sitzt AUF dieser Flaeche. Der feste dunkle Ton traegt es in beiden Themes (~4.4:1), der helle Dunkelmodus-Wert der Variablen wuerde Gelb auf Hellgrau ergeben und damit unlesbar. */ .rm-service-item:hover .rm-feature-icon, .rm-service-item.rm-inview .rm-feature-icon { background: #4b4b4b; color: var(--rm-primary); } .rm-service-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; } .rm-service-heading h4 { margin: 0; } /* Direkte Regel statt sich auf die .text-muted-Farbe des umschliessenden Divs zu verlassen: p/li aus dem |markdown-Filter werden von Blades' eigener p/li-Farbregel ueberschrieben, eine vererbte Farbe vom Vorfahren gewinnt dagegen nie (unabhaengig von dessen Spezifitaet) - derselbe Fallstrick wie bei .rm-special-text p, siehe dort. */ .rm-service-text p, .rm-service-text li { color: var(--q2-text-muted); } .rm-service-text ul { margin: .75rem 0; padding-left: 1.15rem; } .rm-service-text li { margin-bottom: .35rem; } .rm-service-text > :last-child { margin-bottom: 0; } /* -- Footer: Copyright | Suche | Quicklinks nebeneinander (wie im Original) -- */ .rm-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1rem; text-align: center; } @media (min-width: 700px) { .rm-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); text-align: left; } } .rm-footer-copyright { margin: 0; } .rm-footer-quicklinks { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; } .rm-footer-quicklinks li { list-style: none; /* list-style:none on the ul doesn't cascade to override Pico/Blades' `ul li { list-style: square }`, which targets li directly */ } @media (min-width: 700px) { .rm-footer-quicklinks { justify-content: flex-end; } } .rm-footer-search { margin: 0 auto; max-width: 320px; width: 100%; } /* -- Suche -- */ .rm-search-form { margin-bottom: 0; } /* Kein box-shadow hier: --q2-shadow-card enthaelt selbst schon einen 1px-Spread ohne Weichzeichnung (wirkt wie ein zweiter Rahmen), zusaetzlich zum eigenen "border" von .rm-search-input weiter unten. Beide zusammen ergaben einen sichtbar doppelten, leicht versetzten Rahmen um das Feld - der versetzt wirkte, weil der Schatten alle 4 Ecken der GANZEN Gruppe gleichmaessig rundet, waehrend der harte Rand nur am Eingabefeld selbst liegt (border-right:none, nur 2 abgerundete Ecken links). Der Fusszeilen- Variante (.rm-footer-search) ging es genauso, dort war der Schatten deshalb schon abgeschaltet - jetzt einheitlich fuer beide. */ .rm-search-input-group { display: flex; border-radius: var(--q2-radius-md); overflow: hidden; } /* input[type="text"] { border-radius: var(--q2-radius) } (quark2) hat wegen des Attribut-Selektors hoehere Spezifitaet als eine reine Klasse und ueberschreibt sonst diese Regel komplett mit einem gleichmaessigen Radius - deshalb hier explizit auch "input" im Selektor mitfuehren. */ input.rm-search-input { flex: 1 1 0%; width: auto; min-width: 0; height: 3rem; padding: 0 1rem; font-size: 1rem; border: 1px solid var(--q2-border-strong); border-right: none; border-radius: var(--q2-radius-md) 0 0 var(--q2-radius-md); background: var(--q2-bg-elev); color: var(--q2-text); } .rm-search-input:focus { outline: none; box-shadow: 0 0 0 3px var(--q2-focus-ring); } /* Blades' classless Default (button[type="submit"] { width: 100% }) macht flex-basis:auto sonst zu "100% des Containers" - hier explizit neutralisieren, sonst frisst der Button fast die ganze Breite und das Feld wird winzig. quark2s eigene Regel [type="submit"].btn { border-radius: var(--q2-radius) } hat dieselbe Spezifitaet wie eine reine .rm-search-input-group .btn-Regel - deshalb hier zusaetzlich "button" im Selektor, um sicher zu gewinnen. */ .rm-search-input-group button.btn { flex: 0 0 auto; width: auto; border-radius: 0 var(--q2-radius-md) var(--q2-radius-md) 0; } .rm-footer-search .rm-search-input { height: 2.5rem; font-size: .875rem; } /* -- Breadcrumbs (Abstand vor der eigentlichen Seite) -- */ /* #body-wrapper hat ~49px eigenes padding-top (clamp(2.5rem,5vw,4rem)) - zusaetzlich zum margin-bottom der Breadcrumb selbst ergab das viel Leerraum zwischen Navbar und Breadcrumb/Seitentitel. Negativer margin-top zieht die Breadcrumb naeher an die Navbar heran, ohne das padding von #body-wrapper generell zu kuerzen (das wuerde auch den Abstand am Seitenende beeinflussen). */ .breadcrumbs { margin-top: -1.75rem; margin-bottom: 1rem; } /* li/a erben sonst padding:16px 8px bzw. 8px von einer generischen Menue-Regel (nicht von den Breadcrumb-Styles) - blaeht die Zeile auf ~59px auf, viel Leerraum bis zur Seitenueberschrift. Kompakt zurueckgesetzt. */ .breadcrumbs li { padding: 0; font-size: inherit; white-space: nowrap; /* flex-shrink:1 (Default) liess die

  • -Box schmaler werden als ihr eigener -Inhalt (min-width:auto greift bei Flex-Items nur bedingt) - der Linktext lief dadurch sichtbar ueber den eigenen Rand hinaus in die naechste Kachel hinein, wirkte wie "kein Abstand zum Trenner". */ flex-shrink: 0; } /* quark2s eigener Clearfix-Trick fuer normale