/* =================================================================== * UCB - Auftritte, Proben und News * seiten.css - Gestaltung der Seiten dieses Plugins: Uebersichten und * Detailseiten von News, Auftritten und Proben, die Masken, die * Handytabelle und die Grossansicht der Bilder. * * 2.6.62 (24.10.2026): Bis 2.6.61 stand dieses CSS als Zeichenkette in * ucb_an_stile() und ging EINGEBETTET in jede Seite der Website - rund 54 KB * je Aufruf, auch auf Startseite, Galerien und Impressum (Plugin-Pruefung * 23.10.2026, Nr 7). Jetzt eine Datei: Sie laedt weiter auf jeder Seite, aber * der Browser holt sie nur einmal und nimmt sie danach aus seinem Speicher. * Bewusst KEINE Bedingung "nur auf den Plugin-Seiten": eine Bedingung, die * eine Seite vergisst, liesse sie ungestaltet stehen. Fassung (?ver=) ist die * Aenderungszeit der Datei (ucb_an_asset_fassung), Reihenfolge und Handle * (ucb-an) wie bisher - inhalt.css haengt weiter daran. * * Die Farbvariablen (--ucb-blue-deep usw.) stehen an .ucb-an-seite und * verweisen auf die Palette des Themes (--skl-...), mit dem bisherigen Wert * als Ersatz. Regel 3.11: Was das Plugin ausgibt, gestaltet das Plugin. * =================================================================== */ .ucb-an-seite{--ucb-blue:var(--skl-hellblau, #679dce);--ucb-blue-deep:var(--skl-vereinsblau, #0876b8);--ucb-navy:var(--skl-vereinsblau-dunkel, #075d91);--ucb-sky:var(--skl-flaeche-3, #dceef9);--ucb-cream:var(--skl-seite, #f5f8fb);--ucb-text:var(--skl-schrift, #203243);--ucb-muted:var(--skl-schrift-leise, #4a5f72);--ucb-line:var(--skl-rand, #d5e2ec);--ucb-radius:14px;--ucb-shadow:0 7px 18px rgb(var(--skl-schatten-rgb, 34 73 106) / .1)} .ucb-an-seite,.ucb-an-seite *{box-sizing:border-box} .ucb-an-seite{width:100%;max-width:100%;margin:0;padding:48px 16px 64px;overflow:hidden;color:var(--ucb-text)} /* 2.6.56: Uebersichten Auftritte und Proben ohne eigenen Abstand oben - es bleiben die 40 px des Themes (Wunsch des Benutzers). Zwei Klassen (0,2,0) schlagen auch die Regel .ucb-an-seite im 760er weiter unten. */ .ucb-an-seite.ucb-an-seite--uebersicht{padding-top:0} .ucb-an-inhalt{width:min(1180px,100%);max-width:100%;min-width:0;margin:0 auto} /* Kopf */ .ucb-an-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin:0 0 1.5rem} .ucb-an-kicker{margin:0;color:var(--skl-blau-schrift-dunkel, #075d91);font-size:.88rem;font-weight:800;letter-spacing:.14em;line-height:1.4;text-transform:uppercase} .ucb-an-seite h1{max-width:100%;margin:0;color:var(--skl-blau-schrift, #0876b8);font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.15;overflow-wrap:anywhere} /* Buttons. 2.6.62: ohne !important bei Farbe und Unterstrich - eine Gegenregel gibt es nicht mehr (die Verweisregeln des Themes, a und a:hover, wiegen 0,1,1, diese 0,2,1). */ .ucb-an-seite a.ucb-an-knopf{display:inline-block;padding:.65rem 1.2rem;color:var(--skl-auf-farbe, #fff);background:var(--ucb-blue-deep);border:2px solid var(--ucb-blue-deep);border-radius:999px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.96rem;font-weight:800;line-height:1.25;text-decoration:none;box-shadow:0 7px 17px rgb(var(--skl-vereinsblau-rgb, 8 118 184) / .2)} .ucb-an-seite a.ucb-an-knopf:hover{background:var(--ucb-navy);border-color:var(--ucb-navy)} /* 2.6.57: unten ein Textverweis "Historie ->" wie bei der Stadtkapelle (News und Auftritte 1.8.24, .skl-ar-umschalter) */ .ucb-an-umschalter{margin:1.8rem 0 0;text-align:right} .ucb-an-seite .ucb-an-umschalter a{color:var(--skl-blau-schrift-dunkel, #075d91);font-weight:600;text-decoration:none} .ucb-an-seite .ucb-an-umschalter a:hover{text-decoration:underline} /* Tabelle Auftritte */ .ucb-an-tabelle{max-width:100%;margin-top:2rem;overflow-x:auto;border:1px solid var(--ucb-line);border-radius:12px;background:var(--skl-karte, #fff)} .ucb-an-tabelle table{width:100%;max-width:100%;margin:0;border:0;border-collapse:collapse} /* 2.2.3: Listenansicht in der Optik der Repertoire-Seite der Stadtkapelle, uebersetzt in die UCB-Palette: Kopfzeile im Verlauf vom mittleren ins dunkelste Blau, GROSSBUCHSTABEN mit Sperrung, Zebrastreifen, feine Trennlinien, Radius 12 statt 22 - eine Tabelle ist keine Karte. */ .ucb-an-tabelle th{padding:.8rem 1rem;color:var(--skl-auf-farbe, #fff);background:linear-gradient(135deg,var(--ucb-blue-deep),var(--ucb-navy));font-size:.84rem;font-weight:800;letter-spacing:.04em;line-height:1.35;text-align:left;text-transform:uppercase} .ucb-an-tabelle td{padding:.85rem 1rem;vertical-align:top;border-top:1px solid var(--skl-rand, #d5e2ec);line-height:1.55;overflow-wrap:anywhere} .ucb-an-tabelle tbody tr:first-child td{border-top:0}.ucb-an-tabelle tbody tr:nth-child(even){background:var(--skl-flaeche-1, #f4f9fc)} .ucb-an-tabelle td[data-spalte=Datum],.ucb-an-tabelle td[data-spalte=Uhrzeit]{white-space:nowrap;font-variant-numeric:tabular-nums} .ucb-an-tabelle td p{margin:0 0 .45rem} .ucb-an-tabelle a{color:var(--skl-blau-schrift, #0876b8);font-weight:700;overflow-wrap:anywhere} .ucb-an-details{display:inline-block;margin-top:.35rem} .ucb-an-leer{padding:1.2rem;border-left:5px solid var(--ucb-blue);background:var(--skl-flaeche-2, #eaf4fb);border-radius:8px} /* 2.6.34: Fehler beim Speichern eines Auftritts, als Liste ueber der Maske (wie bei der Stadtkapelle). */ .ucb-an-fehler{margin:0 0 1.5rem;padding:1rem 1.2rem;border-left:5px solid var(--skl-fehler, #b42318);background:var(--skl-fehler-flaeche, #fff3f2);border-radius:8px;color:var(--skl-schrift, #203243)} .ucb-an-fehler ul{margin:.5rem 0 0 1.2rem;padding:0} .ucb-an-erfolg{margin:0 0 1.5rem;padding:1rem 1.2rem;border-left:5px solid var(--skl-erfolg, #2d7d46);background:var(--skl-erfolg-flaeche, #f0f8f2);border-radius:8px} /* Suche - 2.1.0: dezent in der Kopfzeile statt als eigene Box darunter. Vorbild ist .skl-news-suche der Stadtkapelle (dort seit 1.0.26); die Masse sind von dort uebernommen, die Farben aus der Palette. Der Fokusring ist seit 2.6.61 im ganzen Plugin blau (Wahl des Benutzers; ueber dunklem Grund hellblau) - bis dahin teils gelb (--skl-fokus). Die Zeilendarstellung haengt an der Zusatzklasse --news, nicht an .ucb-an-kopf selbst: dieselbe Kopfzeile tragen auch Auftritte, Proben und die Detailseiten, und die bleiben untereinander. */ .ucb-an-kopf--news{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem} .ucb-an-kopf--news>div:first-child{flex:1 1 auto;min-width:0} /* Abstand ueber den News: nur der eigene Anteil (48 px aus .ucb-an-seite) faellt weg, es bleiben die 40 px des Themes (.ucb-inhalt, gilt fuer jede Seite). Zwei Klassen, damit die Regel auch die fuer schmale Bildschirme weiter unten schlaegt. 2.2.0 noch 16 px, seit 2.6.54 0 (Wunsch des Benutzers). */ .ucb-an-seite.ucb-an-seite--news{padding-top:0} /* 2.6.62: margin ohne !important hier und bei .ucb-an-suchhinweis - keine Gegenregel (Theme und Plugin geben Formularen und Absaetzen dort keinen Rand) */ .ucb-an-suche{margin:0;flex:0 0 auto;display:inline-block} .ucb-an-suche input[type=search]{width:12em;max-width:100%;padding:.35em .8em;border:1px solid var(--ucb-blue);border-radius:999px;background:var(--skl-karte, #fff);font:inherit;font-size:.9rem;line-height:1.3;color:var(--ucb-text);box-shadow:none} .ucb-an-suche input[type=search]::placeholder{color:var(--ucb-muted)} .ucb-an-suche input[type=search]:focus-visible{outline:3px solid var(--ucb-blue-deep);outline-offset:2px;border-color:var(--ucb-blue-deep)} .ucb-an-suchhinweis{margin:-.4rem 0 1.2rem;font-size:.9rem;color:var(--ucb-muted)} .ucb-an-suchhinweis a{color:var(--skl-blau-schrift, #0876b8)} /* News-Karten */ /* Spalten: Smartphone eine, Tablet zwei, Rechner vier (Bloecke weiter unten). 2.6.62: die alte Regel "drei Spalten ab 62rem" ist entfernt - sie griff nur noch bei 1001 bis 1040 px Breite und hoechstens 500 px Hoehe, und dort ergibt auto-fill ebenfalls drei gleich breite Spalten. */ .ucb-an-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.5rem;margin-top:2rem} .ucb-an-karte{display:flex;flex-direction:column;background:var(--skl-karte, #fff);border:1px solid var(--ucb-line);border-radius:var(--ucb-radius);box-shadow:var(--ucb-shadow);overflow:hidden} .ucb-an-karte-bild{display:block;aspect-ratio:4/3;background:var(--ucb-sky);overflow:hidden} /* 1.3.12: 4/3 statt 16/10 */ .ucb-an-karte-bild img{width:100%;height:100%;object-fit:cover;display:block} /* 1.3.12: Hochformate ganz zeigen - mittig auf dem hellblauen Grund, mit Rand links und rechts. */ .ucb-an-karte-bild--hoch img{object-fit:contain;object-position:50% 50%} .ucb-an-platzhalter{display:grid;place-items:center;width:100%;height:100%;color:var(--ucb-blue);font-size:3rem} .ucb-an-karte-text{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem} /* 2.6.62: Rand, Farbe und Groesse von Datum und Titel stehen nur noch in den Bloecken KARTEN DER ANSICHT KOMPAKT/OFFEN (2.6.47/2.6.48) - die Grundwerte hier wurden dort fuer jede Karte ueberstimmt. */ .ucb-an-datum{font-variant-numeric:tabular-nums} .ucb-an-karte-text h2 a{text-decoration:none} .ucb-an-karte-text h2 a:hover{text-decoration:underline} .ucb-an-karte-text p{margin:0;color:var(--ucb-text);line-height:1.6} .ucb-an-weiter{margin-top:auto;color:var(--skl-blau-schrift, #0876b8);font-weight:800;text-decoration:none} .ucb-an-weiter:hover{text-decoration:underline} /* 2.5.0: Der ganze Beitragstext steht im Markup, ist aber nur am Smartphone zu sehen (Block unten bei 620px). Auf breiten Bildschirmen bleibt das gewohnte Kartenraster mit Anriss. */ .ucb-an-karte-voll{display:none} /* 2.6.33: der Hinweis auf Bilder und Videos auf jeder Breite (2.6.21 bis 2.6.32 nur am Smartphone). Er traegt die Klasse von "Weiterlesen" (margin-top:auto) und steht so unten; "Weiterlesen" folgt direkt darunter. */ .ucb-an-weiter.ucb-an-medien-hinweis{display:block;align-self:flex-start} .ucb-an-medien-hinweis+.ucb-an-weiter{margin-top:.25rem} /* 2.6.10: News ohne Beitragsbild - solange die Karten nebeneinander stehen, schrumpft der Kopf wie am Smartphone, und statt des kurzen Anrisses fuellt eine formatierte Vorschau die Karte bis zur Hoehe der Nachbarn (flex-basis 0: sie zaehlt nicht zur Hoehe, die Reihe wird nicht hoeher; unten blendet sie aus). "Weiterlesen" steht in allen Karten unten auf einer Hoehe. Wie bei der Stadtkapelle (Theme 2.1.16). */ .ucb-an-karte-vorschau{display:none} .ucb-an-karte-text .ucb-an-karte-vorschau>*{margin:0 0 .55em} .ucb-an-karte-text .ucb-an-karte-vorschau .ucb-vorschau-zwischentitel{margin:.75em 0 .15em;color:var(--skl-blau-schrift, #0876b8);font-weight:750;line-height:1.3} .ucb-an-karte-text .ucb-an-karte-vorschau>:first-child{margin-top:0} .ucb-an-karte-vorschau ul,.ucb-an-karte-vorschau ol{padding-left:1.2em} .ucb-an-karte-vorschau li{margin:0 0 .2em} @media(min-width:621px){ .ucb-an-karte-text{flex:1} /* der schmale Kopf ohne Bild gilt seit 2.6.14 auf jeder Breite (Regel unten; 2.6.62 hier die gleichlautende entfernt) */ .ucb-an-karte--ohne-bild .ucb-an-karte-anriss{display:none} .ucb-an-karte--ohne-bild .ucb-an-karte-vorschau{display:block;flex:1 1 0;min-height:9.5em;overflow:hidden;color:var(--ucb-text);line-height:1.55;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 3em),transparent)} } /* 2.6.10: Smartphone im Querformat - eine Karte je Zeile in voller Breite, Bilder 16:9, Karten ohne Bild mit dem kurzen Anriss wie im Hochformat. Erkannt an Querformat und hoechstens 500 px Hoehe (Tablets bleiben). */ @media (orientation:landscape) and (max-height:500px) and (max-width:1000px){ .ucb-an-raster{grid-template-columns:1fr} .ucb-an-karte-bild{aspect-ratio:16/9} .ucb-an-karte--ohne-bild .ucb-an-karte-anriss{display:block} .ucb-an-karte--ohne-bild .ucb-an-karte-vorschau{display:none} } /* 2.6.14: Karten ohne Bild haben auf JEDER Breite den schmalen Kopf (5rem), auch am Smartphone hoch und quer - bis 2.6.13 erst ab 621 px, darunter das volle Bildfeld. Wie die Stadtkapelle (Theme 2.1.34), Wunsch des Benutzers "alle umstellen". Hinter der Querformat-Regel, die gleich schwer ist. */ .ucb-an-karte--ohne-bild .ucb-an-karte-bild{aspect-ratio:auto;height:5rem;flex:none} /* Detailseiten */ /* Feldtabelle wie bei der Stadtkapelle: Beschriftung als blaues Band, Wert daneben auf Weiss. Kein Innenabstand am Behaelter, die Zellen bringen ihn selbst mit - sonst entstehen Luecken zwischen den Baendern. */ .ucb-an-felder{margin:2rem 0;padding:0;background:var(--skl-karte, #fff);border:1px solid var(--ucb-line);border-radius:var(--ucb-radius);overflow:hidden} .ucb-an-felder>div{display:grid;grid-template-columns:minmax(10rem,.35fr) minmax(0,1fr);border-top:1px solid var(--skl-rand, #d5e2ec)} .ucb-an-felder>div:first-child{border-top:0} .ucb-an-felder dt,.ucb-an-felder dd{margin:0;padding:.95rem 1.15rem} .ucb-an-felder dt{background:var(--skl-flaeche-2, #eaf4fb);color:var(--skl-blau-schrift-dunkel, #075d91);font-weight:800} .ucb-an-felder dd{color:var(--ucb-text);overflow-wrap:anywhere} .ucb-an-felder dd>:first-child{margin-top:0} .ucb-an-felder dd>:last-child{margin-bottom:0} .ucb-an-feld-text dd img{max-width:100%;height:auto;border-radius:10px} .ucb-an-feld-text dd p{margin:0 0 .8rem} /* Einzelansicht einer News: EINE weisse Flaeche. Bis 1.2.1 standen Titel, Bild und Text ohne Traeger auf dem Seitenhintergrund. Das Titelbild lief dabei ueber die vollen 1180px und rechnete ein stehendes Plakat von 724px Breite auf 1180px hoch - unscharf und ueberlebensgross. Jetzt traegt der Behaelter die Flaeche, das Bild behaelt seine Groesse. Vorbild ist die Detailseite der Stadtkapelle Landau. */ .ucb-an-einzeln{width:min(1040px,100%);margin:0 auto;padding:clamp(1.25rem,3vw,2.5rem);background:var(--skl-karte, #fff);border:1px solid var(--ucb-line);border-radius:18px;box-shadow:0 10px 30px rgb(var(--skl-schatten-rgb, 34 73 106) / .10)} .ucb-an-titelbild{margin:0 0 1.75rem} /* Breite automatisch, damit das Seitenverhaeltnis stimmt; die Hoehe begrenzt, damit ein Hochformat nicht die halbe Seite fuellt. Kein Hochrechnen mehr. */ .ucb-an-titelbild img{display:block;width:auto;max-width:100%;max-height:min(80vh,780px);height:auto;margin:0 auto;border-radius:var(--ucb-radius)} /* Ohne display:block misst die Umgebung die Zeilenbox statt das Bild, und unter dem Bild entstuende eine Grundlinienluecke. */ .ucb-an-titelbild a{display:block;line-height:0} .ucb-an-titelbild a:focus-visible{outline:4px solid var(--skl-vereinsblau, #0876b8);outline-offset:3px} /* Zeiger nur dort, wo die Grossansicht wirklich aufgeht */ .ucb-an-titelbild a,.ucb-an-fliesstext img,.ucb-an-fliesstext a[href$=".jpg"],.ucb-an-fliesstext a[href$=".jpeg"],.ucb-an-fliesstext a[href$=".png"],.ucb-an-fliesstext a[href$=".webp"],.ucb-an-fliesstext a[href$=".gif"]{cursor:zoom-in} /* Schrift, Farben und Absaetze des Fliesstextes stehen seit 1.3.0 in ucb-an-assets/inhalt.css. Grund: Dieselben Regeln sollen ZUGLEICH im Editor gelten, und dafuer braucht es eine Datei statt einer Zeichenkette. Hier bleibt nur das Raeumliche. */ .ucb-an-fliesstext{max-width:100%} /* 1.3.12: Artikel 1040 statt 920 px breit, damit das Titelbild groesser wird (80vh/780px statt 68vh/620px, Querformat fuellt die Breite, Hochformat bleibt ueber die Hoehe begrenzt). Alles ausser dem Bild sitzt mittig in 880 px, damit die Zeilen nicht laenger werden als vorher. */ .ucb-an-einzeln>*:not(.ucb-an-titelbild){max-width:880px;margin-left:auto;margin-right:auto} /* Grossansicht der Bilder (bildschau.js, nur News-Detailseite): eine gewoehnliche feste Ebene mit eigenem Hintergrund und sehr hoher Stapelnummer - bewusst KEIN (bis 1.3.1: dort fehlte der dunkle Hintergrund, und die Werkzeugleiste fing den Klick auf den Schliess-Button ab). Die Buehne hat eine feste Groesse und schneidet ab; das Bild wird darin verschoben und vergroessert, nicht die Seite. touch-action:none, damit die Zwei-Finger-Geste nicht als Seitenzoom ankommt. */ .ucb-bildschau{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:1rem;background:rgba(9,47,91,.92);overscroll-behavior:contain} .ucb-bildschau[hidden]{display:none} .ucb-bildschau .ucb-bildschau-buehne{position:relative;width:min(96vw,1400px);max-width:100%;height:82vh;overflow:hidden;border-radius:12px;cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none} .ucb-bildschau .ucb-bildschau-buehne.gezoomt{cursor:grab} .ucb-bildschau .ucb-bildschau-buehne.gezoomt:active{cursor:grabbing} .ucb-bildschau img{position:absolute;left:50%;top:50%;display:block;width:auto;max-width:100%;max-height:82vh;transform:translate(-50%,-50%);transform-origin:center center;border-radius:12px;background:var(--skl-karte, #fff);box-shadow:0 24px 60px rgba(0,0,0,.45);-webkit-user-drag:none} .ucb-bildschau .ucb-bildschau-hinweis{flex:0 0 auto;margin:.7rem 0 0;color:rgb(var(--skl-auf-farbe-rgb, 255 255 255) / .82);font:400 .85rem/1.4 Arial,Helvetica,sans-serif;text-align:center} /* Der Schliessknopf sitzt in der Ecke der Ebene, also immer an derselben Stelle am Bildschirmrand, und ist reichlich gross fuer den Finger. */ .ucb-bildschau .ucb-bildschau-zu{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:3rem;height:3rem;padding:0;color:var(--skl-blau-schrift-dunkel, #075d91);background:var(--skl-karte, #fff);border:0;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.35);font:700 1.6rem/1 Arial,Helvetica,sans-serif;cursor:pointer} .ucb-bildschau .ucb-bildschau-zu:hover{background:var(--skl-flaeche-3, #dceef9)} .ucb-bildschau .ucb-bildschau-zu:focus-visible{outline:4px solid var(--skl-hellblau, #679dce);outline-offset:3px} .ucb-an-zurueck{margin-top:2.5rem} .ucb-an-zurueck a{color:var(--skl-blau-schrift, #0876b8);font-weight:800} /* Blaettern (2.6.3, 29.09.2026): dieselbe Form wie bei der Stadtkapelle und in der Suche des Themes (Wahl "C" des Benutzers) - rund im Vereinsblau, 44 px, nur die aktuelle Seite gefuellt, Zurueck und Weiter weiss mit Rand. Am Smartphone EINE Zeile: Zurueck, "Seite x von y", Weiter; die Zahlen sind dort ausgeblendet, das