/* =================================================================== * UCB - Auftritte, Proben und News * news-detail.css - Galerien auf der News-DETAILSEITE * * 2.5.0 (21.09.2026). Uebernommen von der Stadtkapelle (Plugin * "StakaLD - News und Auftritte" 1.7.29 und 1.7.33, assets/news-detail.css) * und auf die UCB-Klassen und -Farben umgeschrieben. * * WARUM EINE EIGENE DATEI und nicht inhalt.css: * inhalt.css wird an DREI Orte ausgeliefert - fertige Seite, Editorfenster * und Editor-Leinwand. Diese Regeln hier gehoeren NUR auf die fertige Seite. * Eine waagerecht scrollende Strecke auf der Leinwand machte das Bearbeiten * schwer: Man kaeme an die Bilder dahinter nicht mehr heran. Im Editor * bleibt die Galerie deshalb das gewohnte Raster. * * Geladen wird die Datei nur bei is_singular('ucb_news'); die Fassung ist * die Aenderungszeit der Datei (ucb_an_asset_fassung), niemand muss also * eine Nummer hochzaehlen. * * Die Farbvariablen (--ucb-blue-deep usw.) stehen auf .ucb-an-seite, nicht * auf :root. Alles hier liegt innerhalb von main.ucb-an-seite, sie gelten * also - ausserhalb waeren sie leer. * =================================================================== */ /* =================================================================== * 1. BILDSTRECKE * * Ein Galerie-Block mit dem Stil "Bildstrecke" * (is-style-ucb-news-strecke) wird zur waagerechten Strecke: ein Bild je * Ansicht, Blaetterpfeile links und rechts, Zaehler oben rechts. Die * Huelle mit den Knoepfen legt ucb-an-assets/bildschau.js darum. * * Warum eine feste Hoehe und nicht aspect-ratio: Bilder in News kommen * meist vom Handy und sind hochkant. Ein festes Seitenverhaeltnis liesse * sie winzig in der Mitte stehen. Mit fester Hoehe und * object-fit:contain passen Hoch- und Querformat nebeneinander. * * Das Praefix ucb-news-strecke ist bewusst ein eigenes: .ucb-bildschau * ist die News-Grossansicht dieses Plugins. Bis zum 20.09.2026 trug auch * die Galerie-Grossansicht des Themes diesen Namen (seit Theme 1.4.16 * .ucb-galerie-schau, seit 1.4.17 entfallen); eine weitere Bedeutung * desselben Namens waere genau die Kollision, die dort Muehe gemacht hat * (Regel 3.11). * =================================================================== */ .ucb-an-fliesstext .wp-block-gallery.is-style-ucb-news-strecke{ display:flex!important; flex-wrap:nowrap!important; align-items:stretch!important; gap:0!important; margin:0!important; padding:0!important; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--ucb-radius); background:var(--ucb-sky); -webkit-overflow-scrolling:touch } .ucb-an-fliesstext .wp-block-gallery.is-style-ucb-news-strecke::-webkit-scrollbar{display:none} .ucb-an-fliesstext .wp-block-gallery.is-style-ucb-news-strecke>figure.wp-block-image{ display:block!important; flex:0 0 100%!important; width:100%!important; max-width:100%!important; margin:0!important; height:min(70vh,620px); scroll-snap-align:start; scroll-snap-stop:always } .ucb-an-fliesstext .wp-block-gallery.is-style-ucb-news-strecke>figure.wp-block-image img{ display:block!important; width:100%!important; height:100%!important; max-height:none!important; object-fit:contain!important; margin:0!important; border-radius:var(--ucb-radius) } .ucb-an-fliesstext .wp-block-gallery.is-style-ucb-news-strecke>figure.wp-block-image figcaption{ position:absolute; left:1rem; right:1rem; bottom:1rem; margin:0; padding:.35rem .75rem; border-radius:10px; background:rgb(var(--skl-karte-rgb, 255 255 255) / .88); color:var(--ucb-text); font-size:.9rem; line-height:1.45; text-align:center } /* Die Huelle traegt die Knoepfe; sie sitzen absolut darin. */ .ucb-news-strecke-huelle{position:relative;margin:1.4rem 0} .ucb-news-strecke-knopf{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; border:1px solid var(--ucb-line); border-radius:50%; background:rgb(var(--skl-karte-rgb, 255 255 255) / .92); color:var(--skl-blau-schrift, #0876b8); font:700 1.7rem/1 Arial,Helvetica,sans-serif; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 16px rgb(var(--skl-schatten-rgb, 34 73 106) / .16) } .ucb-news-strecke-knopf--zurueck{left:1rem} .ucb-news-strecke-knopf--weiter{right:1rem} .ucb-news-strecke-knopf:hover, .ucb-news-strecke-knopf:focus-visible{background:var(--ucb-blue-deep);color:var(--skl-auf-farbe, #fff);border-color:var(--ucb-blue-deep)} .ucb-news-strecke-knopf:focus-visible{outline:4px solid var(--skl-vereinsblau, #0876b8);outline-offset:3px} .ucb-news-strecke-zaehler{ position:absolute; right:1rem; top:1rem; padding:.25rem .7rem; border-radius:999px; /* 2.6.62: Vereinsblau aus der Palette statt des alten UCB-Blaus #126b99 (rgba(18,107,153,.85)) */ background:rgb(var(--skl-vereinsblau-rgb, 8 118 184) / .85); color:var(--skl-auf-farbe, #fff); font-size:.85rem; font-weight:700; pointer-events:none } /* Ein einzelnes Bild braucht weder Pfeile noch Zaehler. */ .ucb-news-strecke-huelle[data-anzahl="1"] .ucb-news-strecke-knopf, .ucb-news-strecke-huelle[data-anzahl="1"] .ucb-news-strecke-zaehler{display:none} @media(max-width:620px){ .ucb-news-strecke-knopf{width:36px;height:36px;font-size:1.35rem} .ucb-news-strecke-knopf--zurueck{left:.6rem} .ucb-news-strecke-knopf--weiter{right:.6rem} .ucb-news-strecke-zaehler{right:.6rem;top:.6rem} } /* =================================================================== * 2. MEHR BREITE UND GLEICH GROSSE BILDER * * Dasselbe Bild wie bei der Stadtkapelle vor deren 1.7.33: Von vier * Galeriebildern nebeneinander sind drei schmal und das vierte so breit * wie der Rest zusammen - die letzte Reihe eines Flex-Behaelters teilt * den uebrigen Platz unter den verbliebenen Bildern auf. * * Beides gilt NUR auf der News-Detailseite und NUR ab 1000 px * Fensterbreite. Am Smartphone bleibt alles, wie es war. * =================================================================== */ @media (min-width: 1000px){ /* 1. Der Artikel darf breiter werden - 2.6.28: so breit wie bei der Stadtkapelle (deren Blatt ist min(1280px, 100% - 2rem), Innenabstand hoechstens 2,2rem), Wunsch des Benutzers. Bis 2.6.27 1180 px. Das Element traegt auch .ucb-an-inhalt (1180 px) - diese Regel ist staerker. */ body.single-ucb_news .ucb-an-einzeln{width:min(1280px,100%)} /* Der Textbereich nutzt die neue Breite ... */ body.single-ucb_news .ucb-an-einzeln>.ucb-an-fliesstext{max-width:none} /* ... aber der FLIESSTEXT bleibt schmal und mittig. Breiter Text liest sich schlecht: Das Auge verliert beim Zeilenwechsel die Spur. Das !important ist hier kein Reflex, sondern die Antwort auf ein bestehendes: inhalt.css setzt .ucb-an-fliesstext p auf max-width:100%!important, und das muss dort auch so bleiben - jene Datei gilt zugleich im Editor und muss sich gegen dessen eigene Regeln behaupten. Am 21.09.2026 im Testsystem gemessen: ohne !important blieb der Absatz bei 1099 px stehen statt bei 880. Die Stadtkapelle loest dieselbe Stelle genauso (1.7.33). 2.6.62: Hier stehen nur noch Einbettungen und Tabellen-Bloecke in der 880-px-Spalte. Absaetze, Ueberschriften, Listen und Zitate standen bis dahin auch hier und wurden vom Block darunter (40rem, gleich schwer, spaeter) fuer jedes Element ueberstimmt. */ body.single-ucb_news .ucb-an-fliesstext>.wp-block-embed, body.single-ucb_news .ucb-an-fliesstext>.wp-block-table{ max-width:880px!important; margin-left:auto!important; margin-right:auto!important } /* 2.6.39 (11.10.2026): Text schmaler, wie bei der Stadtkapelle (1.8.1/1.8.2) - 40rem, bei 17px etwa 70 Zeichen je Zeile; rem statt ch, damit Ueberschriften genau ueber dem Text stehen. Dazu Buttons und Text in einem
ohne Bild, Video und Tabelle. Tabellen ohne Bild (und ein
mit einer solchen) in der 880-px-Spalte; Bilder, Galerien, Spalten und Einbettungen bleiben breit. */ body.single-ucb_news .ucb-an-fliesstext>p, body.single-ucb_news .ucb-an-fliesstext>h2, body.single-ucb_news .ucb-an-fliesstext>h3, body.single-ucb_news .ucb-an-fliesstext>h4, body.single-ucb_news .ucb-an-fliesstext>ul, body.single-ucb_news .ucb-an-fliesstext>ol, body.single-ucb_news .ucb-an-fliesstext>blockquote, body.single-ucb_news .ucb-an-fliesstext>.wp-block-buttons, body.single-ucb_news .ucb-an-fliesstext>div:not([class*="wp-block"]):not(.ucb-durchklick):not(:has(img,iframe,video,table,figure)){ max-width:40rem!important; margin-left:auto!important; margin-right:auto!important } body.single-ucb_news .ucb-an-fliesstext>table:not(:has(img)), body.single-ucb_news .ucb-an-fliesstext>div:not([class*="wp-block"]):has(table):not(:has(img,iframe,video,figure)){ max-width:880px!important; margin-left:auto!important; margin-right:auto!important } /* 2.6.10 (04.10.2026): Wunsch des Benutzers - die News-Detailseite am Rechner ueber die ganze Breite, wie bei der Stadtkapelle (News und Auftritte 1.7.63). 2.6.29 (08.10.2026): Der TEXT steht wieder in einer schmalen Spalte (Regeln oben), dazu Kopf, Box "gespeichert" und Zurueck-Verweis - das Blatt bleibt breit, Bild, Bildschau, Galerie und Videos nutzen die ganze Breite. Wunsch des Benutzers: "den Text, nicht die ganze Box". Wie Staka 1.7.90. 2.6.62: Die Regel ".ucb-an-einzeln>*:not(.ucb-an-titelbild){max-width:none}" ist entfernt - sie hob die 880 px aus seiten.css fuer Kopf, Box und Zurueck auf, die die Regel hier gleich wieder auf 40rem setzt, und fuer den Text, den die Regel ganz oben (max-width:none) schon freigibt. Weitere Kinder hat .ucb-an-einzeln nicht. */ body.single-ucb_news .ucb-an-einzeln>.ucb-an-kopf, body.single-ucb_news .ucb-an-einzeln>.ucb-an-erfolg, body.single-ucb_news .ucb-an-einzeln>.ucb-an-zurueck{max-width:40rem;margin-left:auto;margin-right:auto} /* 2.6.39: 40rem wie der Text */ /* 2. Galerien als Raster: gleich breite Spalten, quadratische Kacheln. auto-fill statt fester Spaltenzahl - so passt sich das Raster der Breite an und bleibt bei jeder Bildanzahl gleichmaessig. 2.6.16: ausgenommen die Bildschau .ucb-durchklick des Themes (ein Bild gross mit Pfeilen) - als Raster stand ihr Bild klein links in einer leeren hellblauen Flaeche (Theaterbummel Herxheim 2026). */ body.single-ucb_news .ucb-an-fliesstext .wp-block-gallery:not(.is-style-ucb-news-strecke):not(.ucb-durchklick){ display:grid!important; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important; gap:.85rem!important; align-items:stretch!important } body.single-ucb_news .ucb-an-fliesstext .wp-block-gallery:not(.is-style-ucb-news-strecke):not(.ucb-durchklick)>figure.wp-block-image{ width:auto!important; max-width:none!important; flex:none!important; margin:0!important; aspect-ratio:1/1 } body.single-ucb_news .ucb-an-fliesstext .wp-block-gallery:not(.is-style-ucb-news-strecke):not(.ucb-durchklick)>figure.wp-block-image img{ width:100%!important; height:100%!important; max-height:none!important; object-fit:cover!important; border-radius:10px } } /* 2.6.28 (08.10.2026): Innenabstand des weissen Blatts wie bei der Stadtkapelle (.m-blatt: clamp(1.2rem, 3vw, 2.2rem)) - zusammen mit der Breite oben steht der Text auf derselben Breite. Bis 2.6.27 clamp(1.25rem, 3vw, 2.5rem). */ body.single-ucb_news .ucb-an-einzeln{padding:clamp(1.2rem,3vw,2.2rem)} @media(max-width:760px){ body.single-ucb_news .ucb-an-einzeln{padding:1.1rem} }