/* ============================================================ Angepasstes Farb-/Schrift-Schema für bielefeld.webkurs.app angelehnt an das Design von www.1-bielefelder-sv.de So einbauen: Diese Datei komplett so wie sie ist hochladen unter System → Einstellungen → Layout → "CSS-Datei hochladen". Die Datei enthält alles (Farben, Schriften, Kategorie-Kacheln, Header-Banner, Mobile-Optimierung) und muss nicht manuell aufgeteilt oder in eine andere Datei kopiert werden. ============================================================ */ /* ============================================================ 1. FARBVARIABLEN (ersetzt den vorhandenen :root-Block) ============================================================ */ :root { --nav_schrift_farbe: #FFFFFF; /* Schriftfarbe Navigation (vorher #EBECEE) */ --nav_bg_farbe: #0170B9; /* Hintergrundfarbe Navigation – Vereinsblau (vorher #00445B) */ --nav_schrift_inaktiv: rgba(255,255,255,0.55); /* Schriftfarbe Navigation inaktiv (vorher #CCCCCC) */ --nav_schrift_hover: #0170B9; /* Schriftfarbe Navigation bei hover (vorher #00445B) */ --nav_bg_hover: #F2F5F7; /* Hintergrundfarbe Navigation bei hover (vorher #EBECEE) */ --frame_std_farbe: #0170B9; /* Standard für Rahmen (vorher #00445B) */ --table_odd: #FFFFFF; /* Hintergrundfarbe Tabellenzeile ungerade (unverändert) */ --table_even: #F5F5F5; /* Hintergrundfarbe Tabellenzeile gerade (vorher #EBECEE) */ --table_hover: #E9F3FB; /* Hintergrundfarbe Tabellenzeile bei hover – helles Blau statt Rosa (vorher #F2DEDE) */ --table_head: #F5F5F5; /* Hintergrundfarbe Tabelle Kopfzeile (vorher #FFFFFF) */ } /* ============================================================ 2. SCHRIFTEN & AKZENTE (optional, ans Ende von default.css anhängen) Übernimmt die auf 1-bielefelder-sv.de verwendeten Schriftarten (Varela Round für Fließtext, Rubik für Überschriften, Montserrat für Navigation/Buttons) sowie die Akzentfarben der Brotkrumen- Navigation (.bc), passend zum Vereinsblau. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Varela+Round&family=Rubik:wght@600;700&family=Montserrat:wght@600;700&display=swap'); body { font-family: 'Varela Round', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #3a3a3a; } h1, h2, h3, h4, h5, h6 { font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; } /* Brotkrumen-Navigation an das Vereinsblau angleichen (vorher lightblue/coral) */ .bc li.active a { background: #0170B9; color: white; } .bc li.active a:after { border-left-color: #0170B9 !important; } .bc li a:hover { background: #3a9bd9; } .bc li a:hover:after { border-left-color: #3a9bd9 !important; } /* Buttons als abgerundete Pill-Form wie auf der Vereinsseite (optional) */ .btn-primary { background-color: #0170B9; border-color: #0170B9; border-radius: 50px; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; } .btn-primary:hover { background-color: #015a92; border-color: #015a92; } /* ============================================================ 3. LESBARKEIT DER KATEGORIE-KACHELN (ans Ende von default.css anhängen) Der Titel-Balken lag bisher als absolut positioniertes Element (position: absolute; top/bottom/left/right) ÜBER dem Bild – ursprünglich nur 50% grau-transparent (rgba(127,127,127,0.5)), dadurch war der Text schlecht lesbar. Ein einfaches "deckender machen" löst das bei kurzen Titeln, aber sobald der Text mehrzeilig wird (z. B. Kursname + Termin + Uhrzeit), wächst der Balken und verdeckt einen großen Teil des Fotos. Sauberere Lösung: der Titel wird aus dem Bild herausgelöst und läuft als eigener Block UNTER dem Foto (position: static statt absolute). Das Bild bleibt dadurch immer vollständig sichtbar, unabhängig davon wie lang der Titeltext ist, und der Text sitzt auf einer deckenden Fläche statt auf einem Foto – dadurch ist auch kein Textschatten mehr nötig. ============================================================ */ .listview .title { position: static; /* statt absolut über dem Bild */ background-color: #0170B9; /* deckend, Vereinsblau statt Foto-Overlay */ color: #FFFFFF; padding: 10px 14px; font-size: 15px; letter-spacing: 0.2px; } .listview .item { height: auto; /* Kachel wächst jetzt mit Bild + Titel-Block */ } /* ============================================================ 4. GRÖSSERE KACHELN (ans Ende von default.css anhängen) Die Kachelbreite wird pro Kachel per Inline-Style gesetzt (style="flex-basis: 19%"), ausgelegt auf ein 5er-Raster. Dadurch bleiben die Bilder/Banner klein und der eingebettete Bildtext (z. B. "Der Weg zum sicheren Schwimmen") ist auf Desktop-Bildschirmen kaum lesbar – selbst wenn nur 2-3 Kacheln in der Zeile stehen. Fix: auf breiteren Bildschirmen (ab 992px, dort greift bei dieser Seite das feste Bootstrap-Raster) werden es nur noch 3 Kacheln pro Zeile statt 5, wodurch jede einzelne rund 60% größer wird. Bewusst nur ab 992px, damit die vermutlich per JavaScript berechnete Spaltenzahl auf Tablet/Handy unangetastet bleibt (!important ist nötig, um den Inline-Style zu schlagen). ============================================================ */ @media (min-width: 992px) { .listview .item { flex-basis: 31% !important; } } /* ============================================================ 5. HEADER-BANNER: EIGENES DESIGN (SVG von dir) (ans Ende von default.css anhaengen) Ersetzt die generische Fitness-Collage im Kopfbereich durch dein selbst gestaltetes SVG-Banner (Ozeanblau-Verlauf, dezente Schwimmbahn-Linien, Welle unten, abgedunkelte Mittelzone fuer das Vereinslogo). Zwei Anpassungen gegenueber deiner Original-Datei: 1) Der eingebaute Text ("1. Bielefelder Schwimmverein 1902 e.V.") wurde entfernt. Die Seite schreibt diesen Text bereits selbst als echtes, rechtsbuendiges Element rechts im Kopfbereich -- mit deinem Text im Bild waere er doppelt und an zwei verschiedenen Stellen (einmal links im Bild, einmal rechts als echter Text) zu sehen. 2) Der Bildausschnitt wurde von 1200x300 (Seitenverhaeltnis 4:1) auf 1200x148.7 (ca. 8:1) zugeschnitten -- so breit/flach ist der tatsaechliche Kopfbereich der Seite. Ohne diesen Zuschnitt wuerde background-size:cover automatisch oben und unten stark beschneiden (nur der schmale Mittelstreifen waere sichtbar); der Ausschnitt hier ist bewusst zentriert gewaehlt, sodass die abgedunkelte Mittelzone und die Welle vollstaendig sichtbar bleiben. Kontrastpruefung (rechte Textzone, gegen weissen Text): im Schnitt ca. 9,7:1, minimal ca. 5,5:1 -- beides deutlich ueber dem empfohlenen Minimum von 4,5:1. ============================================================ */ header.container { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgNzUuNjQgMTIwMCAxNDguNzIiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjE0OC43MiI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnR3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDgxODM2IiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMzU2NiIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA1Yjk2IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0id2F2ZUdyYWRpZW50MSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBiNGQ4IiBzdG9wLW9wYWNpdHk9IjAuMjUiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzdiNiIgc3RvcC1vcGFjaXR5PSIwLjQ1IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iY2VudGVyRm9jdXMiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDBkMWEiIHN0b3Atb3BhY2l0eT0iMC42NSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDQwZDFhIiBzdG9wLW9wYWNpdHk9IjAuMCIgLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgoKICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9InVybCgjYmdHcmFkaWVudCkiIC8+CgogIDxnIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjEyIDEwIiBvcGFjaXR5PSIwLjA1Ij4KICAgIDxsaW5lIHgxPSIwIiB5MT0iNjAiIHgyPSIxMjAwIiB5Mj0iNjAiIC8+CiAgICA8bGluZSB4MT0iMCIgeTE9IjEyMCIgeDI9IjEyMDAiIHkyPSIxMjAiIC8+CiAgICA8bGluZSB4MT0iMCIgeTE9IjE4MCIgeDI9IjEyMDAiIHkyPSIxODAiIC8+CiAgICA8bGluZSB4MT0iMCIgeTE9IjI0MCIgeDI9IjEyMDAiIHkyPSIyNDAiIC8+CiAgPC9nPgoKICA8cGF0aCBkPSJNMCwyMTAgQzMwMCwxNjUgNjAwLDI1NSA5MDAsMTg1IEMxMDUwLDE1NSAxMTUwLDE5NSAxMjAwLDE4MCBMMTIwMCwzMDAgTDAsMzAwIFoiIGZpbGw9InVybCgjd2F2ZUdyYWRpZW50MSkiIC8+CiAgPHBhdGggZD0iTTAsMjM1IEMyNTAsMjA1IDU1MCwyNTUgODUwLDIxNSBDMTAyMCwxOTAgMTEyMCwyMjUgMTIwMCwyMTAgTDEyMDAsMzAwIEwwLDMwMCBaIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjA4IiAvPgoKICA8ZWxsaXBzZSBjeD0iNjAwIiBjeT0iMTUwIiByeD0iMjAwIiByeT0iMTI1IiBmaWxsPSJ1cmwoI2NlbnRlckZvY3VzKSIgLz4KPC9zdmc+Cg==") !important; } /* ============================================================ 6. MOBILE OPTIMIERUNG (ans Ende von default.css anhängen) Zwei separate Anpassungen, nur unterhalb 992px aktiv (Tablet/Handy; ab 992px greift ohnehin das Desktop-Layout aus Abschnitt 4, das hier nicht angefasst wird): a) Kopfbereich kompakter: Auf Handy-Breite stapelt Bootstrap Logo, Vereinsname und Navigation automatisch untereinander (das ist unverändertes Standardverhalten der Seite, kein Bug). Das Logo und die zweizeilige Schrift waren dabei aber unnötig groß und haben den Kopfbereich auf ca. 265px Höhe aufgebläht – auf einem 812px hohen Handy-Bildschirm blieb dann kaum noch Platz für Inhalte. Logo, Schriftgröße und oberer Abstand werden hier deutlich reduziert (Kopfbereich danach ca. 170px). b) Kein horizontales Wegrutschen der Seite: Die Kategorie-Kacheln (Abschnitt 3) laufen auf dem Handy als Karussell mit Pfeil-Steuerung; das ist ebenfalls Standardverhalten der Seite. Der Karussell-Container selbst hat aber kein "overflow: hidden", wodurch die Kacheln real über den Bildschirmrand hinausragen und die gesamte Seite dadurch horizontal wegrutschen bzw. sich verschieben lässt (auf einem 375px breiten Bildschirm wurde die Seite dadurch de facto 962px breit). Das betrifft nicht nur die Kacheln, sondern die komplette Seite und ist auf jedem Handy reproduzierbar. Fix: html/body wird auf Handy-Breite auf die Bildschirmbreite begrenzt; die Karussell-Pfeile selbst funktionieren unverändert weiter, da sie die Kacheln per JavaScript verschieben und nicht auf natives Scrollen angewiesen sind. ============================================================ */ @media (max-width: 991px) { header.container .t-r { font-size: 22px !important; } header.container .logoimg { width: 90px !important; height: 90px !important; } header.container { padding-top: 14px !important; } html, body { overflow-x: hidden !important; max-width: 100vw !important; } }