/*
Theme Name: UCB Landau
Theme URI: https://ucb-landau.de/
Description: Eigenes Theme der United Concert Band Landau-Suedliche Weinstrasse. Loest OceanWP ab und traegt das Erscheinungsbild selbst, ohne fremde Baukastenschicht.
Author: United Concert Band Landau Ab 1.4.10 sind Kind-Themes moeglich: das Eltern-CSS wird immer aus dem Eltern-Ordner geladen (get_template_directory_uri), das Kind haengt sich dahinter. Ohne aktives Kind aendert sich nichts. Ab 1.4.11 liest UCB_THEME_VERSION ausdruecklich die Fassung dieses Themes (wp_get_theme(get_template())); vorher stand bei aktivem Kind dessen Nummer am Eltern-CSS. Ab 1.4.12 gibt der REST-Weg ucb/v1/fusszeile die Fusszeilen-Einstellung heraus (nur lesend, edit_theme_options) - daraus holt sie der Live-Abgleich des Testsystems. 1.4.13 nennt dabei Name UND Fassung des Eltern-Themes zusammen und das aktive Theme gesondert; in 1.4.12 waren beide vermischt und ergaben eine Fassung, die es nicht gibt.
Version: 1.4.15
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: ucb-landau
*/

/* ===== Farbwerte: uebernommen aus dem Plugin UCB-Landau Design ===== */
:root{
  --ucb-blue:#669dce;
  --ucb-blue-deep:#126b99;
  --ucb-navy:#123f5b;
  --ucb-sky:#dbeaf5;
  --ucb-cream:#f5f4ee;
  --ucb-white:#ffffff;
  --ucb-text:#263d4b;
  --ucb-muted:#627582;
  --ucb-line:rgba(18,63,91,.14);
  --ucb-radius:22px;
  --ucb-shadow:0 16px 40px rgba(18,63,91,.12);
  --ucb-content:1180px;
  --ucb-serif:Georgia,"Times New Roman",serif;
  --ucb-sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ucb-cream);
  color:var(--ucb-text);
  font-family:var(--ucb-sans);
  /* 17px statt 16px: bis Theme 1.2.4 hat das Plugin "UCB-Landau Design"
     diese Groesse gesetzt. Ohne sie faellt die ganze Seite sichtbar
     kleiner aus. */
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--ucb-blue-deep);text-decoration-thickness:.08em;text-underline-offset:.16em}
a:hover,a:focus{color:var(--ucb-navy)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ucb-blue);outline-offset:2px
}

.ucb-breite{width:min(var(--ucb-content),calc(100% - 2rem));margin-inline:auto}

/* Sprungmarke fuer Tastaturbedienung */
.ucb-skip{position:absolute;left:-9999px}
.ucb-skip:focus{left:1rem;top:1rem;z-index:1000;padding:.7rem 1.1rem;background:#fff;border-radius:10px}

/* ===================== Kopfbereich =====================

   1.4.5: Die Kopfleiste rechnet in festen PIXELN, nicht in rem.

   rem haengt an der Grundschrift des Browsers. Die steht im Edge des
   Benutzers hoeher als 16 px, und weil body font-size:1.0625rem traegt und
   der Menuepunkt gar keine eigene Groesse hatte, erbte er sie: bei 20 px
   Grundschrift wuchs die Menueschrift von 17 auf 21,25 px, das Menue von
   541 auf 677 px Breite und die Leiste von 111 auf 126 px Hoehe. Am
   09.09.2026 im Testsystem nachgemessen.

   Umgerechnet ist exakt mit dem Faktor 16 (.6rem = 9.6px und nicht gerundet
   auf 10px), damit die Leiste bei der ueblichen Grundschrift Pixel fuer
   Pixel so aussieht wie vorher. Neu ist allein die Zeile font-size:17px am
   Menuepunkt - der Wert, den er bisher geerbt hat.

   NUR die Leiste. Der uebrige Seiteninhalt bleibt in rem und waechst
   weiterhin mit der eingestellten Schriftgroesse mit; wer gross eingestellt
   hat, soll den Text auch gross bekommen.

   Dasselbe Verfahren wie bei der Stadtkapelle (Theme 0.7.11, Kind-Theme
   1.0.28 vom 08.09.2026).
   ===================================================== */
.ucb-kopf{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg,#7aa9d4 0%,var(--ucb-blue) 100%);
  transition:box-shadow .2s ease
}
.ucb-kopf.ucb-gescrollt{box-shadow:0 6px 24px rgba(18,63,91,.18)}
.admin-bar .ucb-kopf{top:32px}
.ucb-kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17.6px 0}

.ucb-logo{display:block;flex:0 0 auto;padding:12px 17.6px;background:#fff;border-radius:16px;box-shadow:var(--ucb-shadow);line-height:0}
.ucb-logo img{display:block;width:auto;max-height:52px}
.ucb-logo-text{font-family:var(--ucb-serif);font-size:22.4px;font-weight:700;color:var(--ucb-navy);text-decoration:none;line-height:1.2}

.ucb-nav{display:flex;align-items:center;gap:6.4px}
.ucb-nav ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.ucb-nav li{position:relative}
.ucb-kopf .ucb-nav a{
  display:block;padding:9.6px 16.8px;border-radius:999px;
  color:#fff;font-size:17px;font-weight:650;text-decoration:none;white-space:nowrap
}
.ucb-kopf .ucb-nav a:hover,.ucb-kopf .ucb-nav a:focus{background:rgba(255,255,255,.22)}
.ucb-kopf .ucb-nav .current-menu-item>a,.ucb-kopf .ucb-nav .current_page_item>a{background:#fff;color:var(--ucb-navy)}

/* Untermenues */
.ucb-nav ul ul{
  position:absolute;left:0;top:100%;display:block;min-width:224px;padding:6.4px;
  background:#fff;border-radius:14px;box-shadow:var(--ucb-shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s ease
}
.ucb-nav li:hover>ul,.ucb-nav li:focus-within>ul{opacity:1;visibility:visible;transform:none}
.ucb-nav ul ul li{display:block;width:100%}
.ucb-kopf .ucb-nav ul ul a{color:var(--ucb-navy);border-radius:10px}
.ucb-kopf .ucb-nav ul ul a:hover{background:var(--ucb-sky)}

.ucb-kopf-aktionen{display:flex;align-items:center;gap:8px}
.ucb-kopf .ucb-rundknopf{
  display:grid;place-items:center;width:42px;height:42px;
  background:#fff;border-radius:50%;color:var(--ucb-blue-deep);text-decoration:none;box-shadow:var(--ucb-shadow)
}
.ucb-kopf .ucb-rundknopf:hover{background:var(--ucb-sky)}
.ucb-rundknopf svg{width:19px;height:19px;fill:currentColor}

/* Menueschalter fuer schmale Bildschirme */
.ucb-menue-schalter{
  display:none;align-items:center;gap:0;padding:9px 11px;
  background:transparent;border:2px solid #fff;border-radius:8px;color:#fff;
  font:inherit;font-size:21.6px;line-height:1;cursor:pointer
}

/* ===================== Inhalt =====================

   1.4.6: Der Rahmen des Inhalts rechnet in festen PIXELN. Aus demselben
   Grund wie die Kopfleiste in 1.4.5: rem haengt an der Grundschrift des
   Browsers, und im Edge des Benutzers wuchs damit auch der Abstand nach
   oben mit - die Kuerzung auf der News-Seite (Plugin 2.2.0) war dort
   praktisch aufgehoben (57 px bei Grundschrift 16, aber 86 px bei 24).
   Exakt umgerechnet mit Faktor 16, bei ueblicher Einstellung aendert sich
   nichts. Die Schriftgroessen darunter bleiben in rem und clamp() - der
   TEXT soll mitwachsen, nur der Leerraum nicht.
   ===================================================== */
.ucb-inhalt{min-height:55vh;padding:40px 0 64px}
.ucb-seitenkopf{margin:0 0 1.75rem}
.ucb-seitenkopf h1{margin:0;font-family:var(--ucb-serif);font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.1;color:var(--ucb-navy);text-wrap:balance}

.entry-content{max-width:none}
.entry-content h2{font-family:var(--ucb-serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;color:var(--ucb-navy);margin:2.25rem 0 .85rem}
.entry-content h3{font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--ucb-navy);margin:1.75rem 0 .6rem}
.entry-content p{margin:0 0 1.1rem}
.entry-content ul,.entry-content ol{margin:0 0 1.2rem;padding-left:1.4rem}
.entry-content li{margin:0 0 .4rem}
.entry-content img{border-radius:14px}
.entry-content figure{margin:1.5rem 0}
.entry-content blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--ucb-sky);border-left:5px solid var(--ucb-blue-deep);border-radius:0 12px 12px 0}
.entry-content table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.entry-content th{background:var(--ucb-blue-deep);color:#fff;text-align:left}
.entry-content th,.entry-content td{padding:.75rem;border:1px solid var(--ucb-line)}
.entry-content tbody tr:nth-child(even) td{background:#f7fafd}

/* Gutenberg-Schaltflaechen im Hausdesign
   1.4.15: Jede Zeile hier beginnt mit :root. Das ist kein Zierrat, sondern
   noetig: WordPress schreibt seine eigenen Vorgaben
   (:root :where(.wp-element-button, .wp-block-button__link)) SPAETER in den
   Seitenkopf. Ohne :root sind beide gleich stark, und bei Gleichstand
   gewinnt die spaetere - deshalb waren bis zum 16.09.2026 alle Knoepfe
   WordPress-grau (#32373c), obwohl hier Vereinsblau steht. Aufgefallen ist
   es nie, weil jeder vorhandene Knopf eine eigene, staerkere Regel hatte.
   Die :not()-Ausnahmen lassen eine im Editor gewaehlte Farbe in Ruhe.
   Wer hier etwas ergaenzt: mindestens gleich stark UND weiter unten. */
:root .wp-block-button__link{
  display:inline-block;padding:.78rem 1.5rem;
  border:2px solid transparent;border-radius:999px;font-weight:750;text-decoration:none
}
:root .wp-block-button__link:not(.has-background){background:var(--ucb-blue-deep);border-color:var(--ucb-blue-deep)}
:root .wp-block-button__link:not(.has-text-color){color:#fff}
:root .wp-block-button__link:not(.has-background):hover{background:var(--ucb-navy);border-color:var(--ucb-navy)}
:root .is-style-outline .wp-block-button__link{background:transparent;border-color:var(--ucb-blue-deep);color:var(--ucb-blue-deep)}
:root .is-style-outline .wp-block-button__link:hover{background:var(--ucb-blue-deep);color:#fff}

/* Beitragsliste (Blog, Suche) */
.ucb-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.5rem}
@media(min-width:62rem){.ucb-liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ucb-karte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ucb-line);border-radius:var(--ucb-radius);box-shadow:var(--ucb-shadow);overflow:hidden}
.ucb-karte-bild{display:block;aspect-ratio:16/10;background:var(--ucb-sky);overflow:hidden}
.ucb-karte-bild img{width:100%;height:100%;object-fit:cover;display:block}
.ucb-karte-text{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem}
.ucb-karte-text h2{margin:0;font-size:1.25rem;line-height:1.25}
.ucb-karte-text h2 a{color:var(--ucb-navy);text-decoration:none}
.ucb-karte-text h2 a:hover{text-decoration:underline}
.ucb-datum{margin:0;color:var(--ucb-muted);font-size:.9rem;font-variant-numeric:tabular-nums}

.ucb-blaettern{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.4rem}
.ucb-blaettern .page-numbers{display:inline-block;padding:.45rem .85rem;background:#fff;border:1px solid var(--ucb-line);border-radius:10px;text-decoration:none}
.ucb-blaettern .current{background:var(--ucb-blue-deep);color:#fff;border-color:var(--ucb-blue-deep)}

/* Suchformular */
.ucb-suche{display:flex;gap:.5rem;flex-wrap:wrap}
.ucb-suche input[type=search]{flex:1 1 14rem;padding:.65rem .85rem;border:1px solid var(--ucb-line);border-radius:12px;font:inherit}
.ucb-suche button{padding:.65rem 1.3rem;background:var(--ucb-blue-deep);color:#fff;border:0;border-radius:999px;font:inherit;font-weight:750;cursor:pointer}

/* ===================== Fussbereich ===================== */
.ucb-fuss{background:var(--ucb-blue);color:#fff;padding:2rem 0;margin-top:3rem}
.ucb-fuss-innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.5rem;text-align:center}
.ucb-fuss .ucb-fuss-innen a{color:#fff;font-weight:700;text-decoration:none}
.ucb-fuss .ucb-fuss-innen a:hover{text-decoration:underline}
.ucb-fuss-trenner{opacity:.6}
.ucb-fuss-name{opacity:.92}

/* ===================== Schmale Bildschirme ===================== */
@media(max-width:900px){
  .ucb-menue-schalter{display:inline-flex}
  .ucb-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:9.6px 16px 17.6px;background:var(--ucb-blue);
    box-shadow:0 14px 28px rgba(18,63,91,.22)
  }
  .ucb-nav.ucb-offen{display:flex}
  .ucb-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ucb-kopf .ucb-nav a{padding:12.8px 6.4px;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0}
  .ucb-nav ul ul{
    position:static;opacity:1;visibility:visible;transform:none;
    padding:0 0 0 16px;background:transparent;box-shadow:none
  }
  .ucb-kopf .ucb-nav ul ul a{color:#fff}
  .ucb-kopf .ucb-nav ul ul a:hover{background:rgba(255,255,255,.18)}
  .ucb-kopf-innen{position:relative;flex-wrap:nowrap;gap:9.6px}
  .ucb-logo{flex:0 1 auto;min-width:0;overflow:hidden;padding:7.2px 9.6px}
  .ucb-logo img{max-height:32px;max-width:100%;width:auto}
  .ucb-kopf-aktionen{margin-left:auto;gap:5.6px;flex:0 0 auto}
  .ucb-kopf .ucb-rundknopf{width:34px;height:34px}
  .ucb-rundknopf svg{width:16px;height:16px}
  .ucb-menue-schalter{padding:6px 9px;font-size:19.2px}
  .ucb-menue-schalter{flex:0 0 auto;order:3}
}

@media(max-width:430px){
  .ucb-logo{padding:5.6px 8px}
  .ucb-logo img{max-height:26px}
  .ucb-kopf-aktionen{gap:4.8px}
  .ucb-kopf .ucb-rundknopf{width:30px;height:30px}
  .ucb-rundknopf svg{width:14px;height:14px}
  .ucb-kopf-innen{gap:6.4px;padding:12.8px 0}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ===================== Galerieübersicht =====================
   Markup stammt aus den Gutenberg-Blöcken der Seite (ucb-wpg-*).
   Gutenberg erzeugt für Blockgruppen eigene Layout-Regeln
   (is-layout-constrained, wp-container-core-group-is-layout-*),
   die Breiten vorgeben. Die müssen hier ausgehebelt werden,
   sonst wird die Textspalte auf wenige Pixel zusammengedrückt. */

.ucb-wpg-index>.wp-block-group__inner-container{max-width:none!important}

/* Kopfblock der Uebersicht und jeder einzelnen Galerie: abgesetzte Karte
   mit blauem Oberrand, wie sie die Stadtkapelle verwendet. */
.ucb-wpg-hero{
  margin:0 0 2rem;padding:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(135deg,#eef6fc 0%,var(--ucb-sky) 100%);
  border:1px solid #c7e0f0;border-top:7px solid var(--ucb-blue);
  border-radius:var(--ucb-radius);box-shadow:var(--ucb-shadow);text-align:center
}
.ucb-wpg-hero>.wp-block-group__inner-container{max-width:none!important}
.ucb-wpg-hero h2{
  margin:.15rem auto .5rem;font-family:var(--ucb-serif);color:var(--ucb-navy);
  font-size:clamp(1.65rem,4vw,2.5rem);line-height:1.2;text-wrap:balance
}
.ucb-wpg-hero p{max-width:760px;margin:.4rem auto 0;color:var(--ucb-muted)}
.ucb-wpg-kicker,.ucb-wpg-hero p.ucb-wpg-kicker{
  max-width:none;margin:0 0 .35rem;color:var(--ucb-blue-deep);font-size:.82rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase
}


/* Kartenraster */
.ucb-wpg-cards,
.ucb-wpg-cards>.wp-block-group__inner-container{
  display:grid!important;gap:1.25rem;width:100%!important;max-width:none!important
}
@media(min-width:52rem){
  .ucb-wpg-cards,
  .ucb-wpg-cards>.wp-block-group__inner-container{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
}

/* Einzelne Karte */
.ucb-wpg-card{
  margin:0!important;padding:1.1rem;background:#fff;border:1px solid var(--ucb-line);
  border-radius:var(--ucb-radius);box-shadow:var(--ucb-shadow);
  width:100%!important;max-width:none!important;align-self:stretch!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important
}
.ucb-wpg-card>.wp-block-group__inner-container{max-width:none!important;padding:0!important}

/* Zeile: Bild links, Text rechts */
.ucb-wpg-card-row{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:flex-start!important;gap:1.1rem!important;max-width:none!important
}
.ucb-wpg-card-thumb{
  flex:0 0 auto!important;width:clamp(6rem,22vw,9.5rem)!important;margin:0!important
}
.ucb-wpg-card-thumb img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px
}
.ucb-wpg-card-content{
  flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important
}
.ucb-wpg-card-content>.wp-block-group__inner-container{max-width:none!important;width:100%!important}
.ucb-wpg-card-content h3{
  margin:0 0 .3rem!important;color:var(--ucb-blue-deep);
  font-family:var(--ucb-sans);font-size:clamp(1.02rem,1.6vw,1.22rem);font-weight:750;
  line-height:1.3;text-wrap:balance
}
.ucb-wpg-card-content p{margin:0 0 .85rem!important;color:var(--ucb-muted);font-size:.95rem}
.ucb-wpg-card-content .wp-block-buttons{margin:0!important;justify-content:flex-start!important}
.ucb-wpg-card-content .wp-block-button{margin:0!important}
.ucb-wpg-card-content .wp-block-button__link{
  padding:.58rem 1.15rem!important;font-size:.95rem!important;white-space:nowrap!important
}
/* 1.4.14: Die Knoepfe der Galeriekarten in den Farben der Stadtkapelle -
   Wunsch des Benutzers vom 16.09.2026, an deren Galerieseite abgelesen.
   Feste Werte statt UCB-Variablen ist Absicht; die Variablen gelten
   weiter fuer den Rest der Website. Diese beiden Regeln muessen HINTER
   .wp-block-button__link:hover stehen: gleich stark, also entscheidet
   die Reihenfolge. */
:root .ucb-wpg-card-content .wp-block-button__link{
  background:linear-gradient(135deg,#0876b8,#075d91);border-color:#0876b8;color:#fff
}
:root .ucb-wpg-card-content .wp-block-button__link:hover,
:root .ucb-wpg-card-content .wp-block-button__link:focus{
  background:#075d91;border-color:#075d91;color:#fff
}

@media(max-width:34rem){
  .ucb-wpg-card-row{flex-wrap:wrap!important}
  .ucb-wpg-card-thumb{width:100%!important}
  .ucb-wpg-card-thumb img{aspect-ratio:16/9}
}

/* ===================== Bildschau der Galerien =====================
   Klick auf ein Galeriebild zeigt es gross; darunter der Weg zurueck. */
.ucb-bildschau[hidden]{display:none}
.ucb-bildschau{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;
  padding:clamp(.8rem,3vw,2rem);
  background:rgba(18,63,91,.92);overscroll-behavior:contain
}
.ucb-bildschau figure{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:0;max-height:78vh}
.ucb-bildschau img{
  display:block;max-width:min(100%,1400px);max-height:74vh;width:auto;height:auto;
  border-radius:12px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.45)
}
.ucb-bildschau figcaption{color:#fff;font-size:.95rem;text-align:center;max-width:70ch}
.ucb-bildschau-zurueck{
  padding:.8rem 1.4rem;background:#fff;color:var(--ucb-blue-deep);
  border:0;border-radius:10px;font:inherit;font-weight:800;cursor:pointer
}
.ucb-bildschau-zurueck:hover{background:var(--ucb-sky)}
.ucb-bildschau-zaehler{color:#dbeaf5;font-size:.9rem;font-variant-numeric:tabular-nums}
body.ucb-bildschau-offen{overflow:hidden}
/* Angemeldete sehen oben die Adminleiste; die Bildschau haelt Abstand,
   damit der Bildzaehler nicht darunter verschwindet. */
.admin-bar .ucb-bildschau{top:32px}
@media(max-width:782px){.admin-bar .ucb-bildschau{top:46px}}
/* Galeriebilder als anklickbar kennzeichnen */
.wp-block-gallery a[href$=".jpg"],.wp-block-gallery a[href$=".jpeg"],.wp-block-gallery a[href$=".png"],a.ucb-wpg-lightbox-link{cursor:zoom-in}

/* ===================== Weisse Kaesten in Spalten =====================
   Vorbild Stadtkapelle: blauer Oberrand, weiche Ecken, leichter Schatten.
   Zusaetzlich gleiche Hoehe je Zeile, damit die Reihe ruhig wirkt. */
.ucb-inhalt .wp-block-columns{align-items:stretch!important}
.ucb-inhalt .wp-block-columns>.wp-block-column{display:flex!important;flex-direction:column!important}
.ucb-inhalt .wp-block-columns>.wp-block-column>.wp-block-group.has-background{
  flex:1 1 auto!important;
  border-top:6px solid var(--ucb-blue)!important;
  border-radius:14px!important;
  box-shadow:0 7px 18px rgba(18,63,91,.1)!important
}
.ucb-inhalt .wp-block-columns>.wp-block-column>.wp-block-group.has-background>.wp-block-group__inner-container{
  display:flex;flex-direction:column;height:100%
}
@media(max-width:781px){
  .ucb-inhalt .wp-block-columns>.wp-block-column{display:block!important}
}

/* ===================== Startseite: Kopfkasten und Schlusszeile =====================
   Der einleitende Kasten und die Schlusszeile standen als einzige Teile der
   Startseite ohne Fassung da. Beide bekommen dieselbe Gestalt wie die weissen
   Kaesten in Spalten darueber: blaue Oberkante, feine Linie ringsum, leichter
   Schatten. Hintergrund und Eckenrundung des Kopfkastens stehen im Block selbst
   und bleiben unangetastet - deshalb wird hier nur ergaenzt, nichts ueberschrieben. */
body.home .entry-content>.wp-block-group:first-child{
  border:1px solid #d7e6f1;
  border-top:6px solid var(--ucb-blue);
  box-shadow:0 7px 18px rgba(18,63,91,.1)
}

/* Die Ueberschrift im Kopfkasten.
   Im Testsystem traegt der Block die Angaben selbst; auf dem Livesystem sind
   sie verlorengegangen - dort steht zwar noch die Klasse has-text-color, aber
   keine Farbe mehr. Ohne sie faellt die Zeile auf die Browser-Standardgroesse
   und die dunkle Grundfarbe zurueck, und die beiden Systeme sehen an dieser
   Stelle verschieden aus. Die Regel holt genau die Werte des Testsystems nach.
   Wo der Block seine eigene Angabe hat, gewinnt weiterhin diese - die Regel
   greift also nur dort, wo etwas fehlt, und ueberschreibt nichts. */
body.home .entry-content>.wp-block-group:first-child h1{
  margin-top:0;
  margin-bottom:14px;
  color:#5d9fd2;
  font-size:36px;
  line-height:1.08
}
body.home .entry-content>p:last-child{
  padding:1.15rem 1.4rem;
  background:var(--ucb-white);
  border:1px solid #d7e6f1;
  border-top:6px solid var(--ucb-blue);
  border-radius:14px;
  box-shadow:0 7px 18px rgba(18,63,91,.1);
  /* Schrift etwas groesser und in Blau. Hier ist !important noetig, anders
     als beim Rest dieses Abschnitts: Groesse und Farbe stehen als Stilangabe
     im Block selbst (15px, #607987) und gewinnen sonst gegen jede Regel aus
     dem Stylesheet. Ueberstimmt werden ausdruecklich nur diese beiden
     Angaben; Zeilenabstand und Ausrichtung bleiben, wie sie im Block stehen.
     Das Blau ist dasselbe wie in den drei Partnerkaesten darueber. */
  color:#0d6fa8!important;
  font-size:1.0625rem!important
}

/* ===================== Bildraster der Galerieseiten ===================== */
.wp-block-gallery.ucb-wpg-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))!important;
  gap:1rem!important
}
@media(min-width:52rem){
  .wp-block-gallery.ucb-wpg-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
.wp-block-gallery.ucb-wpg-grid figure.wp-block-image{
  width:100%!important;margin:0!important;flex:none!important
}
.wp-block-gallery.ucb-wpg-grid figure.wp-block-image img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px
}
.wp-block-gallery.ucb-wpg-grid a{display:block;line-height:0}

/* Der Ueberlagerer der alten Bildschau steht noch im Seiteninhalt, sein Skript
   ist stillgelegt (siehe functions.php). Er wird hier ausgeblendet. */
.ucb-wpg-lightbox{display:none!important}

/* Zurueck-Verweis unter einem Album und Rahmen der Albumseite. Beide Regeln
   standen frueher im "Zusaetzlichen CSS" von OceanWP und gehoeren ins Theme. */
.ucb-wpg-gallery{width:100%;max-width:none;margin:0 auto 2rem}
.ucb-wpg-back{margin:1.5rem 0 0;font-weight:700}
.ucb-wpg-back a{color:var(--ucb-blue-deep);font-weight:800}

/* ===== Bilder zum Durchklicken (Ersatz fuer den Jetpack-Slider) =====
   Der frueher genutzte Slider stammte aus Jetpack. Jetpack ist nicht mehr
   installiert, der Block blieb wirkungslos im Seiteninhalt zurueck. Statt
   eine fremde Abhaengigkeit wieder einzufuehren, zeigt das Theme die Bilder
   selbst: eines gross, mit Pfeilen zum Blaettern. Ohne JavaScript bleibt es
   eine gewoehnliche Bilderstrecke - nichts geht verloren. */
.ucb-durchklick{position:relative;margin:0 0 2.5rem;border-radius:var(--ucb-radius);overflow:hidden;background:var(--ucb-sky);box-shadow:var(--ucb-shadow)}
.ucb-durchklick figure{margin:0}
/* Die Gutenberg-Regel fuer Galerien (.wp-block-gallery.has-nested-images
   figure.wp-block-image) ist spezifischer als eine schlichte Angabe hier;
   deshalb ausdruecklich vorrangig. */
.ucb-durchklick.ucb-bereit figure.wp-block-image{display:none!important}
.ucb-durchklick.ucb-bereit figure.wp-block-image.ucb-sichtbar{display:block!important;width:100%!important;max-width:none!important;flex:1 1 100%!important}
.ucb-durchklick img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.ucb-durchklick figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.4rem 1.2rem .9rem;
  background:linear-gradient(180deg,rgba(18,63,91,0) 0%,rgba(18,63,91,.75) 100%);
  color:#fff;font-size:.95rem
}
.ucb-durchklick-knopf{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;width:46px;height:46px;
  background:rgba(255,255,255,.9);color:var(--ucb-blue-deep);
  border:0;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(18,63,91,.25)
}
.ucb-durchklick-knopf:hover{background:#fff}
.ucb-durchklick-zurueck{left:.9rem}
.ucb-durchklick-weiter{right:.9rem}
.ucb-durchklick-zaehler{
  position:absolute;top:.9rem;right:.9rem;z-index:2;margin:0;
  padding:.25rem .65rem;background:rgba(18,63,91,.75);color:#fff;
  border-radius:999px;font-size:.82rem;font-variant-numeric:tabular-nums
}
@media(max-width:640px){
  .ucb-durchklick img{aspect-ratio:4/3}
  .ucb-durchklick-knopf{width:40px;height:40px;font-size:1.3rem}
}

/* ===================== Rechtsseiten =====================
   Impressum und Datenschutzerklaerung. Diese Regeln lagen bis Theme 1.3.0 im
   Plugin "UCB-Landau Design", das urspruenglich OceanWP ueberformt hat. Sie
   sind hierher gewandert, damit das Theme ohne dieses Plugin auskommt - und
   dabei von Stadtkapellen-Blau auf die eigenen Farbwerte umgestellt worden. */

.ucb-legal{width:100%;max-width:var(--ucb-content);margin:0 auto 2rem;line-height:1.65}

.ucb-legal-intro{
  margin:0 0 1.25rem;padding:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(135deg,#eef6fc 0%,var(--ucb-sky) 100%);
  border:1px solid #c7e0f0;border-top:7px solid var(--ucb-blue);
  border-radius:var(--ucb-radius);box-shadow:var(--ucb-shadow)
}
.ucb-legal-kicker{
  margin:0 0 .35rem;color:var(--ucb-blue-deep);font-size:.82rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase
}
.ucb-legal .ucb-legal-title{
  margin:0 0 .5rem;color:var(--ucb-navy);font-family:var(--ucb-serif);
  font-size:clamp(1.65rem,4vw,2.5rem);font-weight:700;line-height:1.2;text-wrap:balance
}
.ucb-legal-lead{
  max-width:48rem;margin:.4rem 0 0;color:var(--ucb-text);
  font-size:1.15rem;line-height:1.6
}
.ucb-legal-stand{margin:.75rem 0 0;color:var(--ucb-muted);font-size:.95rem}

.ucb-legal-nav{
  margin:0 0 1.25rem;padding:1rem 1.25rem;background:var(--ucb-white);
  border:1px solid var(--ucb-line);border-radius:14px;
  box-shadow:0 6px 18px rgba(18,63,91,.07)
}
.ucb-legal-nav p{margin:0}

.ucb-legal-section{
  margin:0 0 1.15rem;padding:clamp(1.4rem,3vw,2rem);background:var(--ucb-white);
  border:1px solid var(--ucb-line);border-radius:16px;
  box-shadow:0 8px 24px rgba(18,63,91,.08);scroll-margin-top:6rem
}
.ucb-legal-section>:first-child{margin-top:0}
.ucb-legal-section>:last-child{margin-bottom:0}
.ucb-legal-section h2,
.ucb-legal-section h3{
  margin:0 0 1rem;color:var(--ucb-navy);font-family:var(--ucb-serif);
  line-height:1.25
}
.ucb-legal-section h2{font-size:clamp(1.35rem,3vw,1.8rem)}
.ucb-legal-section h3{font-size:1.25rem}
.ucb-legal-section p,
.ucb-legal-section ul{max-width:none}

.ucb-legal a{color:var(--ucb-blue-deep);font-weight:650}
.ucb-legal code{padding:.1em .35em;background:var(--ucb-sky);border-radius:5px;color:var(--ucb-text)}

@media(max-width:52rem){
  .ucb-legal-lead{font-size:1.05rem;line-height:1.55}
  .ucb-legal-nav{padding:.85rem 1rem}
}

/* ===================== Startseite: Kontakt und Instagram =====================
Bis Theme 1.3.4 sassen dafuer zwei runde Symbolknoepfe rechts im Seitenkopf.
Sie waren dort leicht zu uebersehen und auf schmalen Bildschirmen eng am
Menueknopf. Seit 1.4.0 stehen sie stattdessen als beschriftete Schaltflaechen
im Kopfkasten der Startseite - dort, wo Besucher ohnehin hinsehen.

Die beiden Schaltflaechen sind gewoehnliche Gutenberg-Knoepfe im Seiteninhalt
und lassen sich im Editor aendern. Das Instagram-Zeichen kommt als Bild aus
dem Theme (assets/instagram-logo.jpg, dasselbe wie bei der Stadtkapelle) und
nicht aus der Mediathek - so bleibt es beim Bearbeiten der Seite unantastbar. */

body.home .entry-content .wp-block-buttons.ucb-startseite-aktionen{
gap:.6rem;
margin:1.5rem 0 .25rem
}

body.home .ucb-knopf-kontakt .wp-block-button__link{
display:inline-flex;align-items:center;
padding:.62rem 1.35rem;
background:var(--ucb-blue-deep);border-color:var(--ucb-blue-deep);color:#fff
}
body.home .ucb-knopf-kontakt .wp-block-button__link:hover,
body.home .ucb-knopf-kontakt .wp-block-button__link:focus{
background:var(--ucb-navy);border-color:var(--ucb-navy);color:#fff
}

/* Instagram: weisse Pille mit dem echten Zeichen davor, wie bei der
   Stadtkapelle. Das Bild steckt in ::before, damit im Seiteninhalt nur ein
   gewoehnlicher Knopf mit dem Wort "Instagram" steht. */
body.home .ucb-knopf-instagram .wp-block-button__link{
display:inline-flex;align-items:center;gap:.5rem;
padding:.62rem 1.35rem;
background:#fff;border-color:#fff;color:var(--ucb-navy)
}
body.home .ucb-knopf-instagram .wp-block-button__link::before{
content:"";flex:0 0 auto;
width:21px;height:21px;
background:url("assets/instagram-logo.jpg") center/contain no-repeat;
border-radius:6px
}
body.home .ucb-knopf-instagram .wp-block-button__link:hover,
body.home .ucb-knopf-instagram .wp-block-button__link:focus{
background:var(--ucb-sky);border-color:var(--ucb-sky);color:var(--ucb-navy)
}

@media(max-width:430px){
body.home .entry-content .wp-block-buttons.ucb-startseite-aktionen{gap:.45rem}
body.home .ucb-knopf-kontakt .wp-block-button__link,
body.home .ucb-knopf-instagram .wp-block-button__link{padding:.55rem 1.05rem}
}

/* Galerie-Bildschau: Bild deckte Zaehler und Zurueck-Knopf zu.

   Zwei Bildschauen teilen sich denselben Klassennamen .ucb-bildschau:
   die News-Grossansicht aus dem mu-plugin, die ihr Bild absolut in eine
   .ucb-bildschau-buehne stellt und per transform zentriert - und die
   Galerie-Grossansicht hier im Theme, die stattdessen eine <figure> im
   normalen Fluss benutzt (Zaehler oben, Bild in der Mitte, Knopf unten).

   Das Stilblatt des mu-plugins wird auf JEDER Seite ausgeliefert, auch auf
   Galerieseiten. Seine Regel .ucb-bildschau img{position:absolute...} traf
   deshalb auch das Galeriebild. Die Folge: Die figure fiel auf 0 px
   zusammen, und das Bild legte sich ueber "Bild 1 von 7" und ueber
   "Zurueck zur Galerie" - der Knopf war da, aber unsichtbar und nicht
   anklickbar.

   Hier wird das nur fuer die Galerie-Variante zurueckgenommen.
   .ucb-bildschau figure img wiegt schwerer als .ucb-bildschau img; auf die
   Ladereihenfolge kommt es also nicht an. Die schoenen Zutaten der
   Plugin-Regel - Ecken, weisser Grund, Schatten - werden mitgenommen.
   Die Hoehengrenze laesst bewusst Platz fuer Zaehler und Knopf. */
.ucb-bildschau figure img{
	position:static;
	transform:none;
	display:block;
	width:auto;
	max-width:100%;
	max-height:min(72vh, calc(100vh - 250px));
	margin:0 auto;
	border-radius:12px;
	background:#fff;
	box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* Galerie-Bildschau: Zoom.
   Die figure schneidet ueber, damit das vergroesserte Bild den Zaehler und
   den Zurueck-Knopf nicht ueberdeckt - genau der Fehler, der vorher schon
   ohne Zoom auftrat. touch-action:none gibt dem Skript die Fingerbewegung,
   sonst scrollt der Browser dazwischen. */
.ucb-bildschau figure{overflow:hidden}
.ucb-bildschau figure img{
	cursor:zoom-in;
	touch-action:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	transition:transform .15s ease;
}
.ucb-bildschau figure img.gezoomt{cursor:grab;transition:none}
.ucb-bildschau figure img.gezogen{cursor:grabbing}

@media (prefers-reduced-motion: reduce){
	.ucb-bildschau figure img{transition:none}
}

/* ===================== Fussbereich: oberer Teil (1.4.9) =====================
Der Fussbereich ist seit 1.4.9 einstellbar (Design -> Fusszeile). Die untere
Zeile ist unveraendert; dieser obere Teil erscheint nur, wenn dort etwas
eingetragen ist - Vereinsname, Satz, Symbole oder Spalten mit Verweisen.
Die Farben kommen aus dem Fussbereich selbst (weiss auf --ucb-blue), es
braucht keine eigenen Werte. */
.ucb-fuss-oben{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.6rem 2rem;padding-bottom:1.6rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.28);text-align:left}
.ucb-fuss-oben h3{margin:0 0 .5rem;color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.ucb-fuss-oben ul{list-style:none;margin:0;padding:0}
.ucb-fuss-oben li{margin:0 0 .35rem}
.ucb-fuss-oben a{color:#fff;font-weight:700;text-decoration:none}
.ucb-fuss-oben a:hover{text-decoration:underline}
.ucb-fuss-marke{margin:0 0 .3rem;font-size:1.15rem;font-weight:800}
.ucb-fuss-satz{margin:0 0 .9rem;max-width:32rem;opacity:.92}
.ucb-fuss-sozial{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.ucb-fuss-sozial a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:8px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:rgba(255,255,255,.12);text-decoration:none}
.ucb-fuss-sozial a:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);text-decoration:none}
.ucb-fuss-sozial img{display:block;width:24px;height:24px;border-radius:6px;object-fit:cover}
.ucb-fuss-sozial svg{width:24px;height:24px;fill:#f00}
.ucb-fuss-sozial-f{display:grid;width:24px;height:24px;place-items:center;border-radius:6px;background:#1877f2;color:#fff;font:800 1.15rem/1 Arial,sans-serif}
@media (max-width:620px){.ucb-fuss-oben{text-align:center;justify-items:center}.ucb-fuss-sozial{justify-content:center}}