/* ================================================== VEREINE - KARTENANSICHT Angleichung an Bindlach - Rathaus (dort layout/frontend/b2c/dist/css/components/col_vereine.css). Zwei Punkte weichen ab von dem, was in bc-style.min.css steht, und werden hier bewusst ueberschrieben: 1. Fehlende Verlinkungen wurden bisher ausgeblendet. Dadurch sprang die Karte je nach Datenlage um und man sah nicht, dass es den Kanal gar nicht gibt. Jetzt bleibt der Knopf stehen und ist gesperrt (Klasse "disabled", gesetzt in bc.min.js). 2. Die rechte Spalte bekommt eine feste Breite. Vorher lief sie mit dem Inhalt mit, wodurch die Karten unterschiedlich breit wurden. Diese Datei wird nach bc-style.min.css eingebunden (get_gulp_sources in mysyde/frontend/frontend_functions.inc.php) und gewinnt deshalb bei gleicher Spezifitaet. ================================================== */ body.vereine { /* ================================================== KARTE: links Inhalt, Mitte Trennlinie, rechts feste Spalte ================================================== */ #content .collection_list.vereine .collection_container { display: grid; grid-template-columns: minmax(0, 1fr) 1px 200px; column-gap: 35px; align-items: stretch; min-width: 0; } #content .collection_list.vereine .collection_container::after { content: ''; display: block; grid-column: 2; grid-row: 1; width: 1px; min-height: 100%; background: var(--clr-primary-dark); align-self: stretch; } .col_vereine_left { grid-column: 1; min-width: 0; } /* ================================================== RECHTE SPALTE / VERLINKUNGEN ================================================== */ .col_vereine_right { grid-column: 3; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 12px; } .col_vereine_right::before { content: "Verlinkungen"; display: block; width: 100%; color: var(--primary-accent); font-weight: var(--fw-semibold); font-size: var(--fs-600); margin-bottom: 8px; } /* ================================================== WEBSITE / FACEBOOK / INSTAGRAM ================================================== */ .collection_content.vereine_website, .collection_content.vereine_facebook, .collection_content.vereine_insta { margin: 0; flex: 0 0 auto; } .collection_content.vereine_website a, .collection_content.vereine_facebook a, .collection_content.vereine_insta a { display: inline-block; padding: 8px 16px; border: 1px solid var(--primary-accent); border-radius: var(--br-button); color: var(--clr-primary-dark); font-size: var(--fs-500); text-decoration: none; white-space: nowrap; transition: transform 0.2s ease; } /* Nur aktive Knoepfe reagieren auf die Maus */ .collection_content.vereine_website a:not(.disabled):hover, .collection_content.vereine_facebook a:not(.disabled):hover, .collection_content.vereine_insta a:not(.disabled):hover { transform: scale(1.05); } /* Gesperrte Knoepfe: sichtbar, aber nicht anklickbar */ .collection_content.vereine_website a.disabled, .collection_content.vereine_facebook a.disabled, .collection_content.vereine_insta a.disabled { pointer-events: none; cursor: default; opacity: 0.4; } /* Gegenstueck zu den "Hide empty links"-Regeln in bc-style.min.css: ohne diese Zeilen blieben die gesperrten Knoepfe unsichtbar. */ .collection_content.vereine_website:empty, .collection_content.vereine_facebook:empty, .collection_content.vereine_insta:empty, .collection_content.vereine_website:has(a[href=""]), .collection_content.vereine_facebook:has(a[href=""]), .collection_content.vereine_insta:has(a[href=""]), .collection_content.vereine_website:has(a:not([href])), .collection_content.vereine_facebook:has(a:not([href])), .collection_content.vereine_insta:has(a:not([href])) { display: block; } .collection_content.vereine_website a[href=""], .collection_content.vereine_facebook a[href=""], .collection_content.vereine_insta a[href=""], .collection_content.vereine_website a:not([href]), .collection_content.vereine_facebook a:not([href]), .collection_content.vereine_insta a:not([href]) { display: inline-block; } /* ================================================== LEERE KONTAKTFELDER Adresse, Telefon und E-Mail tragen ihr Symbol als ::before. Ist das Feld nicht gefuellt, blieb bisher das nackte Symbol stehen. Anders als bei den Verlinkungen gibt es hier nichts zu sperren - ein Symbol ohne Angabe sagt nichts aus, also faellt das Feld weg. Telefon und E-Mail sind nie wirklich leer: sie enthalten immer ein , bei fehlender Angabe mit href="". ================================================== */ .collection_content.vereine_adress:empty, .collection_content.vereine_telefon:empty, .collection_content.vereine_email:empty, .collection_content.vereine_telefon:has(a[href=""]), .collection_content.vereine_email:has(a[href=""]), .collection_content.vereine_telefon:has(a:not([href])), .collection_content.vereine_email:has(a:not([href])) { display: none; } /* ================================================== SCHMALE BILDSCHIRME Ab hier steht die Verlinkungsspalte unter dem Inhalt, die Trennlinie entfaellt - sonst bliebe fuer den Text zu wenig uebrig. ================================================== */ @media (max-width: 768px) { #content .collection_list.vereine .collection_container { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } #content .collection_list.vereine .collection_container::after { display: none; } .col_vereine_left, .col_vereine_right { grid-column: 1; } .col_vereine_right { padding-top: 16px; border-top: 1px solid var(--clr-primary-dark); } } } /* ================================================== FILTERLEISTE UEBER DEN KARTEN bc-style.min.css gibt ihr grid-column: span 2, damit sie ueber beide Kartenspalten reicht. Ab 992px hat #position aber nur noch eine Spalte - "span 2" erzwingt dann eine zweite, die das Raster selbst anlegt: die Karten liefen in zwei ungleiche Spalten (bei 390px 60px und 305px). "1 / -1" reicht ueber alle vorhandenen Spalten, egal wie viele es sind. ================================================== */ body.vereine #position > .filter_display { grid-column: 1 / -1; }