/* BBSC Galerie 1.0.0 */

.bbsc-notice{padding:14px;background:#f6f7f7;border-left:4px solid #2563eb;margin:0 0 20px}

/* ---------------------------------------------------- Album-Uebersicht
 *
 * Aufbau wie das Event-Raster in Q Events Pro (events-public-grid.css):
 * drei Spalten mit 24px Abstand, Karten mit 12px Radius und Schatten
 * statt Rahmen, Bild im Verhaeltnis 16:10, beim Ueberfahren hebt die
 * Karte an und das Bild zoomt leicht.
 */

.bbsc-albums {
  --bbsc-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --bbsc-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);

  display: grid;
  /* Rueckfall. Die tatsaechliche Spaltenzahl setzt das eingebettete
     Stylesheet mit festen Zahlen, siehe grid_css() im Frontend. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--bbsc-gap, 24px);
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.bbsc-albums > * { min-width: 0; }

.bbsc-album {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--bbsc-radius, 8px);
  box-shadow: var(--bbsc-shadow);
  overflow: hidden;
  transition: all .2s ease;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  max-width: 100%;
}

.bbsc-album-img {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 62.5%;            /* 16:10 */
  overflow: hidden;
  background: #f3f4f6;
}

.bbsc-album-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

/* Anzahl als Plakette oben rechts, wie die Preisplakette bei Q Events */
.bbsc-album-n {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  background: rgba(255,255,255,.95);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  line-height: 1.2;
}

.bbsc-album-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Mittig, auch wenn der Name ueber zwei Zeilen laeuft. justify-content
     zentriert dabei senkrecht, align-items waagerecht. */
  justify-content: center;
  align-items: center;
  /* Seitlich knapper als oben und unten, damit lange Namen wie
     Braunschweig auf einer Zeile Platz finden. */
  padding: 18px 10px 20px;
}

.bbsc-album-name {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0;
  text-align: center;
}

/* ------------------------------------------------------- Galerie-Grid */

/* Aeusserer Behaelter der Galerieansicht. Setzt nur den Kontext, damit
   Brotkrumen und Raster einen gemeinsamen Bezugspunkt haben. */
.bbsc-wrap{position:relative;width:100%;box-sizing:border-box}

.bbsc-crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 16px;font-size:13px}
.bbsc-crumbs a{text-decoration:none;color:#2563eb}
.bbsc-crumbs span{color:#666}
.bbsc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--bbsc-gap,20px)}
/* Seitenverhaeltnis 3:2 ueber padding-top statt aspect-ratio. Funktioniert
   auch auf aelteren Android-Browsern und Safari vor 15, wo aspect-ratio
   fehlt und die Kacheln sonst auf Hoehe null zusammenfallen wuerden. */
.bbsc-item{position:relative;display:block;height:0;padding-top:66.6667%;overflow:hidden;border-radius:var(--bbsc-radius,8px);background:#f0f0f0;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.bbsc-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.bbsc-more{grid-column:1/-1;height:1px}

/* Hover-Effekte nur auf Geraeten mit echtem Zeiger. Auf dem Handy bliebe
   der Zustand sonst nach dem Antippen haengen. */
@media (hover:hover) and (pointer:fine){
  .bbsc-album:hover{box-shadow:var(--bbsc-shadow-lg);transform:translateY(-4px)}
  .bbsc-album:hover .bbsc-album-img img{transform:scale(1.05)}
  .bbsc-item:hover img{transform:scale(1.04)}
}

/* ------------------------------------------------------------ Lightbox */

/* Scroll-Sperre. position:fixed statt nur overflow:hidden, weil iOS Safari
   den Hintergrund sonst weiterscrollt. Die Position stellt das Skript
   danach wieder her. */
body.bbsc-lb-on{position:fixed;width:100%;overflow:hidden}

.bbsc-lb{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.97);
  /* Nicht display:none, sonst laesst sich das Einblenden nicht animieren. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility 0s linear .22s;
  /* Erst der einfache Wert, danach derselbe mit Sicherheitsabstand fuer
     Notch und Home-Indikator. Kennt der Browser env() nicht, verwirft er
     nur die zweite Zeile. */
  padding:12px;
  padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
.bbsc-lb.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}

.bbsc-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;max-height:100%}

.bbsc-lb-img{
  max-width:92vw;
  /* dvh beruecksichtigt die ein- und ausfahrende Browserleiste am Handy.
     Die vh-Zeile davor bleibt als Rueckfall fuer aeltere Browser. */
  max-height:78vh;
  max-height:78dvh;
  object-fit:contain;display:block;
  /* Etwas groesser als im Raster: bei einem bildschirmfuellenden Foto
     wirkt derselbe Radius sonst kaum sichtbar. */
  border-radius:calc(var(--bbsc-radius, 8px) * 1.5);
  box-shadow:0 4px 30px rgba(0,0,0,.18);
  transition:opacity .15s ease;
}
.bbsc-lb.is-busy .bbsc-lb-img{opacity:.4}

/* Richtungsabhaengiges Einblenden beim Blaettern, Aufziehen beim Oeffnen. */
@keyframes bbsc-next{from{opacity:0;transform:translate3d(34px,0,0)}to{opacity:1;transform:none}}
@keyframes bbsc-prev{from{opacity:0;transform:translate3d(-34px,0,0)}to{opacity:1;transform:none}}
@keyframes bbsc-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.bbsc-lb-img.a-next{animation:bbsc-next .26s cubic-bezier(.22,.61,.36,1) both}
.bbsc-lb-img.a-prev{animation:bbsc-prev .26s cubic-bezier(.22,.61,.36,1) both}
.bbsc-lb-img.a-open{animation:bbsc-zoom .24s cubic-bezier(.22,.61,.36,1) both}

.bbsc-lb-cap{margin-top:12px;font-size:13px;color:#7a7a7a;text-align:center;max-width:70ch}
.bbsc-lb-cap[hidden]{display:none}

/* Runde orange Schalter wie im Karussell auf der Startseite.
   Farbe und Radius kommen dort aus .wdcl_image_carousel_0 .slick-arrow. */
.bbsc-lb-p,.bbsc-lb-n{
  position:absolute;
  border:0;
  cursor:pointer;
  background:var(--bbsc-arrow,#ff9858);
  color:#fff;
  line-height:1;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Kreis, nach dem Vorbild des Karussells auf der Startseite. Bewusst
     eine Ausnahme von der sonst eckigen Form aller Schalter: hier zaehlt
     die Uebereinstimmung mit dem uebrigen Frontend mehr. */
  border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:background .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Schliessen bewusst ohne Kreis: nur das Kreuz, damit es sich nicht mit
   den beiden runden Pfeilen um Aufmerksamkeit streitet. Die Flaeche von
   44px bleibt fuer den Finger erhalten, sie ist nur unsichtbar. */
.bbsc-lb-x{
  position:absolute;
  top:14px;right:14px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;padding:0;
  background:none;
  color:#4b5563;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transition:color .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.bbsc-lb-x{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}
.bbsc-lb-p,.bbsc-lb-n{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:20px}
.bbsc-lb-p{left:20px}
.bbsc-lb-p{left:calc(20px + env(safe-area-inset-left))}
.bbsc-lb-n{right:20px}
.bbsc-lb-n{right:calc(20px + env(safe-area-inset-right))}
.bbsc-lb-num{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:12px;color:#7a7a7a;letter-spacing:.04em}
.bbsc-lb-num{bottom:calc(14px + env(safe-area-inset-bottom))}

@media (hover:hover) and (pointer:fine){
  .bbsc-lb-p:hover,.bbsc-lb-n:hover{background:var(--bbsc-arrow-hover,#f97316);transform:translateY(-50%) scale(1.06)}
  .bbsc-lb-x:hover{color:#111827;transform:scale(1.1)}
}
.bbsc-lb-p:active,.bbsc-lb-n:active{background:var(--bbsc-arrow-hover,#f97316)}
.bbsc-lb-x:active{color:#111827}
.bbsc-lb-p:focus-visible,.bbsc-lb-n:focus-visible{outline:3px solid var(--bbsc-arrow,#ff9858);outline-offset:3px}
.bbsc-lb-x:focus-visible{outline:2px solid #4b5563;outline-offset:2px;border-radius:4px}

/* --------------------------------------------------------------- Handy */

/* Gestufte Spaltenzahl. Der eingestellte Wert gilt ab 1400px, darunter
   wird heruntergezaehlt, damit die Kacheln nicht zu schmal werden. */
@media (max-width:1100px){
  .bbsc-albums{gap:20px}
}
/* Ab hier bleiben es zwei Spalten, auch auf dem schmalsten iPhone.
   Bewusst keine weitere Stufe auf eine Spalte: nebeneinander sieht man
   mehr auf einmal, und die Kacheln bleiben mit 40 Prozent Bildschirm-
   breite gross genug zum Antippen. */
@media (max-width:782px){
  .bbsc-albums{gap:14px}
  .bbsc-grid{gap:10px}
}
@media (max-width:480px){
  .bbsc-albums{gap:12px}
  .bbsc-grid{gap:8px}
  .bbsc-album{box-shadow:0 2px 12px 0 rgba(0,0,0,.13);border-radius:10px}
  /* Auf halber Breite muss die Beschriftung enger sitzen, sonst wird die
     Karte hoeher als das Bild. */
  .bbsc-album-meta{padding:12px 12px 14px}
  /* Zwei Zeilen fest einplanen. Auf halber Bildschirmbreite bricht
     "Hannover 2023 SoSe" um, "Aachen 2025 SoSe" nicht. Ohne die
     Mindesthoehe waeren die Karten nebeneinander unterschiedlich hoch. */
  .bbsc-album-name{font-size:15px;line-height:1.25;min-height:2.5em}
  .bbsc-album-n{top:8px;right:8px;padding:4px 9px;font-size:11px}
}

@media (max-width:782px){
  /* Etwas flacher als am Desktop, damit unter dem Bild Platz fuer
     Bildunterschrift, Zaehler und die Pfeile bleibt. */
  .bbsc-lb-img{max-width:100%;max-height:66vh;max-height:66dvh}
  /* Am unteren Rand statt an den Seiten, damit die Pfeile nicht auf dem
     Foto liegen und nicht mit der Wischgeste kollidieren. */
  .bbsc-lb-p,.bbsc-lb-n{top:auto;transform:none;bottom:14px;width:48px;height:48px}
  .bbsc-lb-p,.bbsc-lb-n{bottom:calc(14px + env(safe-area-inset-bottom))}
  .bbsc-lb-p{left:16px}
  .bbsc-lb-p{left:calc(16px + env(safe-area-inset-left))}
  .bbsc-lb-n{right:16px}
  .bbsc-lb-n{right:calc(16px + env(safe-area-inset-right))}
  .bbsc-lb-num{bottom:26px}
  .bbsc-lb-num{bottom:calc(26px + env(safe-area-inset-bottom))}
  .bbsc-lb-cap{margin-top:10px;font-size:12px;padding:0 8px}
}

@media (prefers-reduced-motion:reduce){
  .bbsc-lb,.bbsc-lb-img,.bbsc-item img,.bbsc-album{transition:none}
  .bbsc-lb-img.a-next,.bbsc-lb-img.a-prev,.bbsc-lb-img.a-open{animation:none}
}

/* Wechsel ohne Neuladen: waehrend geladen wird, bleibt der alte Inhalt
   stehen und wird nur abgeblendet. Das vermeidet ein Springen des Layouts. */
/* Volle Breite erzwingen. Sitzt die Galerie in einem Container, der sich
   auf seinen Inhalt zusammenzieht, haette das Raster sonst keine
   verlaessliche Breite und fiele auf eine Spalte zusammen.

   display:block ist dabei nicht ueberfluessig: landet der Shortcode
   versehentlich in einem Inline-Element wie <code>, erbt die Galerie
   dessen Schrift und Zusammenzieh-Verhalten. Die folgende Zeile stellt
   Schrift und Blockverhalten wieder her. */
.bbsc-view {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: opacity .15s ease;
}
/* Setzt die Schrift zurueck, falls ein Vorfahre eine Monospace erzwingt. */
.bbsc-view, .bbsc-wrap, .bbsc-albums, .bbsc-grid {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Landet der Shortcode in einem Inline-Element, etwa weil er samt
   Auszeichnung aus dem Backend kopiert wurde, schiebt der Parser dieses
   Element zwischen Raster und Kacheln. Es wird dann zum einzigen
   Rasterkind, und alle Kacheln stapeln sich darin untereinander.

   display:contents loest den Kasten auf, die Kacheln werden wieder
   unmittelbare Rasterkinder. font:inherit nimmt die Monospace zurueck,
   die ein code-Element mitbringt. */
.bbsc-albums > code, .bbsc-albums > kbd, .bbsc-albums > samp, .bbsc-albums > pre,
.bbsc-grid > code, .bbsc-grid > kbd, .bbsc-grid > samp, .bbsc-grid > pre {
  display: contents;
  font: inherit;
}
.bbsc-view.is-loading { opacity: .45; pointer-events: none; }
.bbsc-view.is-loading::after {
  content: '';
  position: absolute;
  top: 40px; left: 50%;
  width: 28px; height: 28px;
  margin-left: -14px;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: bbsc-spin .7s linear infinite;
}
@keyframes bbsc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bbsc-view { transition: none; }
  .bbsc-view.is-loading::after { animation: none; }
}

/* Fotografenzeile unten links unter den Bildern */
.bbsc-credit{margin:20px 0 0;font-size:13px;color:#6b7280;line-height:1.5;text-align:left}
.bbsc-credit-label{color:#9ca3af}
.bbsc-credit-link{color:#374151;text-decoration:none;border-bottom:1px solid rgba(55,65,81,.25);transition:color .15s ease,border-color .15s ease}
.bbsc-credit-at{display:inline-flex;align-items:center;gap:4px;margin-left:7px;color:#9ca3af;font-size:12px;vertical-align:middle}
.bbsc-credit-icon{flex-shrink:0;display:block}

@media (hover:hover) and (pointer:fine){
  .bbsc-credit-link:hover{color:var(--bbsc-arrow,#ff9858);border-bottom-color:var(--bbsc-arrow,#ff9858)}
  .bbsc-credit-link:hover .bbsc-credit-at{color:var(--bbsc-arrow,#ff9858)}
}
.bbsc-credit-link:focus-visible{outline:2px solid var(--bbsc-arrow,#ff9858);outline-offset:3px;border-radius:2px}

/* Marke fuer das Nachladen weiterer Album-Kacheln */
.bbsc-alben-mehr{grid-column:1 / -1;height:1px}

/* --------------------------------------------------- Gruppen und Suche */

.bbsc-suchzeile{display:flex;justify-content:flex-end;margin:0 0 20px}
.bbsc-suche{position:relative;display:inline-flex;align-items:center;width:100%;max-width:280px}
.bbsc-suche-icon{position:absolute;left:12px;display:flex;color:#9ca3af;pointer-events:none}
.bbsc-suche-feld{
  width:100%;
  padding:9px 34px 9px 36px;
  font-size:14px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#111827;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:8px;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.bbsc-suche-feld:focus{outline:none;border-color:var(--bbsc-arrow,#ff9858);box-shadow:0 0 0 3px rgba(255,152,88,.18)}
.bbsc-suche-feld::-webkit-search-cancel-button{display:none}
.bbsc-suche-x{
  position:absolute;right:8px;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:6px;
  background:none;color:#9ca3af;font-size:18px;line-height:1;cursor:pointer;
}
.bbsc-suche-x:hover{background:#f3f4f6;color:#374151}

.bbsc-gruppe{
  margin:34px 0 14px;
  font-size:20px;
  font-weight:700;
  color:#111827;
  line-height:1.3;
}
.bbsc-gruppe:first-child{margin-top:0}

.bbsc-leer{margin:24px 0;color:#6b7280;font-size:15px;text-align:center}

@media (max-width:782px){
  .bbsc-suche{max-width:200px}
  .bbsc-gruppe{margin:26px 0 12px;font-size:17px}
}

/* ------------------------------------------------- Stadtauswahl

   Bildet die Auswahl aus dem Staedte-Plugin nach. Die Werte stammen aus
   dessen Bootstrap-Regeln: .btn-lg mit 0.5rem/1rem Innenabstand und
   1.25rem Schrift, .staedte-filter-button mit weissem Grund, Rahmen
   #dee2e6 und fester Breite von 200px.

   Eigene Klassen statt der Bootstrap-Klassen, weil Bootstrap auf der
   Fotoseite nicht geladen wird. */

/* Rueckfall fuer den Fall, dass Bootstrap auf einer Seite doch fehlt.

   Auf bierbachelor.com ist es geladen, dort tragen dessen Klassen mit
   !important und diese Regeln sind wirkungslos. Sie bilden nur nach, was
   Bootstrap ohnehin tut, damit die Auswahl auch ohne funktioniert. */

.bbsc-kopfzeile{display:flex;flex-direction:column;justify-content:space-between}
@media (min-width:992px){
  .bbsc-kopfzeile{flex-direction:row;align-items:flex-end}
}
.bbsc-kopfzeile-frei{flex:1 1 auto;min-width:0}

.bbsc-stadtzeile{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  margin-bottom:1rem;
}
.bbsc-stadtzeile > *{display:inline-block;vertical-align:middle}
.bbsc-stadtzeile p,.bbsc-stadtzeile b{display:inline;margin:0;padding:0}

/* Auch auf dem b: der Text steht darin, und manche Themes geben fetten
   Text eine eigene Schrift mit. */
.bbsc-stadtzeile-text,
.bbsc-stadtzeile-text b,
.bbsc-stadtzeile-text strong,
.bbsc-stadtzeile-text code{
  font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.bbsc-stadtzeile-text{
  flex:0 0 auto;
  margin:auto 1rem auto 0;
  font-size:16px;
  line-height:1.4;
  color:#212529;
  white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.bbsc-wahl{flex:0 0 auto;position:relative;margin-left:auto;text-align:left}

/* --------------------------- Auswahl, Aufbau aus dem Staedte-Plugin

   Das Staedte-Plugin laedt Bootstrap 5.3.8 vollstaendig, allerdings nur
   im Fachschaften-Shortcode. Auf der Fotoseite ist davon nur ein Teil
   vorhanden: die Hilfsklassen wie .d-flex greifen, das Komponenten-CSS
   fuer dropdown fehlt. Ohne .dropdown-menu{position:absolute} steht die
   Liste im Textfluss und schiebt alles darunter nach unten.

   Deshalb stehen die noetigen Regeln hier, mit den Werten aus Bootstrap
   5.3 und den sechs eigenen Regeln aus App.css des Staedte-Plugins.
   Alles auf .bbsc-wahl eingegrenzt und ohne !important, damit die
   Originalregeln gewinnen, wo Bootstrap doch geladen ist. */

.bbsc-wahl.dropdown{position:relative}

.bbsc-wahl .dropdown-menu{
  position:absolute;
  z-index:1000;
  display:none;
  min-width:10rem;
  padding:.5rem 0;
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:#212529;
  text-align:left;
  list-style:none;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid rgba(0,0,0,.175);
  border-radius:.375rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.bbsc-wahl .dropdown-menu.show{display:block}

.bbsc-wahl .dropdown-item{
  display:block;
  width:100%;
  /* Ohne das zaehlt das seitliche Polster zur Breite hinzu und die
     Eintraege ragen ueber den Rand der Liste hinaus. Bootstrap setzt es
     global, verlassen sollte man sich darauf aber nicht. */
  box-sizing:border-box;
  padding:.25rem 1rem;
  clear:both;
  font-weight:400;
  color:#212529;
  text-align:inherit;
  text-decoration:none;
  white-space:nowrap;
  background-color:transparent;
  border:0;
  cursor:pointer;
}
.bbsc-wahl .dropdown-item:hover,
.bbsc-wahl .dropdown-item:focus{color:#1e2125;background-color:#e9ecef}

/* Die vier eigenen Regeln aus dem Staedte-Plugin: abgerundete Ecken oben
   und unten, Tuerkis fuer den gewaehlten Eintrag. */
.bbsc-wahl .dropdown-menu li:first-child{border-radius:.375rem .375rem 0 0}
.bbsc-wahl .dropdown-menu li:last-child{border-radius:0 0 .375rem .375rem}
.bbsc-wahl .dropdown-menu li.active{background-color:rgb(56,181,207);color:#fff}
.bbsc-wahl .dropdown-menu li:active{background-color:unset}

/* Der Knopf. Breite, Grund und Rahmen entsprechen .staedte-filter-button,
   das nur im Stylesheet des Staedte-Plugins steht und hier fehlt. Die
   Schrift muss ebenfalls gesetzt werden, weil Bootstrap bei .btn eine
   leere Variable verwendet und der Knopf sonst die Schrift der Umgebung
   erbt. */
.bbsc-wahl-knopf{
  display:flex;
  align-items:center;
  width:200px;
  max-width:200px;
  padding:.5rem 1rem;
  font-size:1.25rem;
  line-height:1.5;
  font-weight:400;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#000;
  background-color:#fff;
  border:1px solid #dee2e6;
  border-radius:.375rem;
  cursor:pointer;
  text-align:left;
}
.bbsc-wahl-wert{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dreieck rechts, mit den Abstandsregeln aus dem Staedte-Plugin. */
.bbsc-wahl .dropdown-toggle::after{
  display:inline-block;
  content:"";
  border-top:.3em solid;
  border-right:.3em solid transparent;
  border-bottom:0;
  border-left:.3em solid transparent;
  margin-top:auto;
  margin-bottom:auto;
  margin-left:auto;
}

@media only screen and (max-width:700px){
  .bbsc-wahl-knopf{width:170px;max-width:170px}
}

@media (max-width:782px){
  /* Weiterhin eine Zeile, nur enger. Die Auswahl bleibt rechts. */
  .bbsc-stadtzeile-text{margin-right:10px}
  .bbsc-wahl-knopf{width:150px;max-width:150px;padding:.4rem .7rem;font-size:1rem}
}


/* --------------------------------- Schutz gegen fremde Auszeichnung

   Steht der Shortcode auf der Seite in einem code-Element, erzeugt der
   HTML-Parser dieses Element in jedem enthaltenen Block neu. Es taucht
   dann mitten in der Galerie auf, obwohl das Plugin keines ausgibt, und
   bringt seine Schreibmaschinenschrift mit.

   Diese Regeln nehmen die Wirkung zurueck. Sie beheben nicht die
   Ursache: das code-Element gehoert aus dem Seiteninhalt entfernt. */
.bbsc-view code,
.bbsc-view kbd,
.bbsc-view samp,
.bbsc-view tt{
  font-family:inherit;
  font-size:inherit;
  background:none;
  padding:0;
  border:0;
  color:inherit;
}
/* Als unmittelbares Kind eines Rasters wuerde es zur einzigen Kachel und
   alles darin stapeln. display:contents loest den Kasten auf. */
.bbsc-albums > code,.bbsc-albums > kbd,.bbsc-albums > samp,.bbsc-albums > pre,
.bbsc-grid > code,.bbsc-grid > kbd,.bbsc-grid > samp,.bbsc-grid > pre,
.bbsc-stadtzeile > code,.bbsc-kopfzeile > code{
  display:contents;
}