:root {
  --brand-color:#7a1d2d;
  --brand-accent:#fff;
  --page-bg:#f2f2f2;
  --card-bg:#fff;
  --text:#333;
  --muted:#747474;
  --border:#d9d9d9;
  --content-width:1280px;
  --sidebar-width:330px;
  --card-pad:48px;

  /* Der Kalender aus EXT:bw_cal greift auf diese Namen zurueck. So folgt er
     der Mandantenfarbe und der kantigen Formensprache dieser Seite, ohne dass
     die Extension angefasst werden muss. */
  --rot:var(--brand-color);
  --schwarz:#3f3f3f;
  --weiss:var(--card-bg);
  --font-display:Georgia,"Times New Roman",serif;
  --radius-klein:0;
  --radius-gross:0;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--page-bg);color:var(--text);
  font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65
}
a{color:inherit;text-decoration:none}
.site-header{background:var(--brand-color);color:var(--brand-accent)}
.header-inner{
  max-width:var(--content-width);margin:auto;min-height:68px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:30px
}
.site-title{
  font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:700;white-space:nowrap
}
.main-nav{display:flex;align-items:stretch;align-self:stretch;flex-wrap:wrap;gap:2px}
.main-nav > a,
.nav-item > a{display:flex;align-items:center}
.main-nav a{padding:10px 14px;font-size:12px;text-transform:uppercase}
.main-nav a:hover{background:rgba(255,255,255,.1)}
.main-nav a.active{background:rgba(255,255,255,.18)}

/* Zweite Menueebene: aufklappbar per Maus und per Tastatur.
   Der Menuepunkt fuellt die Hoehe der Kopfzeile, damit das Panel buendig an
   deren Unterkante ansetzt und nicht direkt unter dem Text haengt. */
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-item.has-sub > a::after{content:"▾";margin-left:6px;font-size:10px}
.sub-nav{
  position:absolute;left:0;top:100%;z-index:20;min-width:100%;
  display:none;flex-direction:column;
  background:var(--brand-color);
  box-shadow:0 6px 18px rgba(0,0,0,.22)
}
.nav-item:hover > .sub-nav,
.nav-item:focus-within > .sub-nav{display:flex}
.sub-nav a{
  /* Gleiche Einrueckung wie im Hauptmenue, damit die Textkanten fluchten. */
  padding:11px 14px;font-size:12px;text-transform:uppercase;white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.14)
}
.sub-nav a:first-child{border-top:0}
.sub-nav a:hover,
.sub-nav a:focus{background:var(--brand-accent);color:var(--brand-color)}

.page{
  max-width:var(--content-width);margin:38px auto 70px;padding:0 22px;
  display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-width);gap:30px;align-items:start
}
.post{
  background:var(--card-bg);border:1px solid var(--border);
  padding:40px var(--card-pad);margin-bottom:28px
}
.post-title{
  margin:0 0 18px;font-family:Georgia,"Times New Roman",serif;
  font-size:31px;line-height:1.2;color:#3f3f3f
}
.post-meta{margin-bottom:28px;color:var(--muted);font-size:13px}
.post-meta span+span{margin-left:14px}
.post-content p{margin:0 0 18px}
.post-image{
  margin-top:24px;background:#e6e6e6;min-height:300px;display:grid;
  place-items:center;color:#888;font-size:14px
}

.sidebar{
  background:var(--card-bg);border:1px solid var(--border);padding:28px
}
.sidebar-block+.sidebar-block{
  margin-top:34px;padding-top:28px;border-top:1px solid #eee
}
.sidebar-title{
  margin:0 0 16px;font-family:Georgia,"Times New Roman",serif;
  font-size:17px;text-transform:uppercase;color:#222
}
.sidebar-logo{
  min-height:120px;border:1px dashed #c9c9c9;display:grid;place-items:center;
  text-align:center;padding:20px;color:#777;margin-bottom:24px
}
.sidebar p{margin:0 0 10px}
.sidebar strong{color:#222}

/* Logos oben in der Spalte, untereinander und mittig.
   Fluid Styled Content zentriert seine Galerien ueber float- und
   position-Verschiebungen; die werden hier zurueckgenommen, sonst rutschen
   die Bilder aus dem sichtbaren Bereich. */
.sidebar > .frame-type-image .ce-outer,
.sidebar > .frame-type-image .ce-inner{position:static;float:none;right:auto;left:auto}
.sidebar > .frame-type-image .ce-column{float:none;margin:0}
.sidebar > .frame-type-image .ce-row{margin:0 0 16px}
.sidebar > .frame-type-image .ce-row:last-child{margin-bottom:0}
/* Logos duerfen die Spaltenbreite ausnutzen. */
.sidebar > .frame-type-image img{width:100%;height:auto;max-width:100%;margin:0 auto}

/* Jedes Inhaltselement der rechten Spalte wird zu einem Block. */
.sidebar > .frame + .frame{
  margin-top:34px;padding-top:28px;border-top:1px solid #eee
}
.sidebar > .frame > h2,
.sidebar > .frame > h3{
  margin:0 0 16px;font-family:Georgia,"Times New Roman",serif;
  font-size:17px;text-transform:uppercase;color:#222;font-weight:700
}
.sidebar > .frame > *:last-child{margin-bottom:0}

.page.no-sidebar{grid-template-columns:minmax(0,820px);justify-content:center}
.page.no-sidebar .sidebar{display:none}

.site-footer{border-top:1px solid var(--border);background:#fff}
.footer-inner{
  max-width:var(--content-width);margin:auto;padding:28px 22px;color:#777;
  font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap
}

/* Redaktionelle Content-Elemente bekommen dieselbe Karte wie ein Beitrag.
   Das News-Plugin liefert seine Beitraege bereits als .post und wird ausgenommen. */
.feed > .frame{
  background:var(--card-bg);border:1px solid var(--border);
  padding:40px var(--card-pad);margin-bottom:28px
}
.feed > .frame:has(.post),
.feed > .frame:has(.f3-widget-paginator){background:none;border:0;padding:0}
.feed > .frame > h1,
.feed > .frame > h2,
.feed > .frame > h3{
  margin:0 0 18px;font-family:Georgia,"Times New Roman",serif;
  font-size:31px;line-height:1.2;color:#3f3f3f;font-weight:700
}
.feed > .frame > h3{font-size:22px}
.feed > .frame p{margin:0 0 18px}
.feed > .frame > *:last-child{margin-bottom:0}

/* Bilder aus Redaktion und News duerfen das Raster nicht sprengen.
   Die Breitenangaben stammen aus WordPress und sind teils groesser als die
   Spalte; ohne diese Regel schiebt ein einzelnes Bild die ganze Seite auf. */
.feed img,
.post-content img,
.post-image img,
.sidebar img{max-width:100%;height:auto;display:block}
.feed table{max-width:100%;display:block;overflow-x:auto}
.post-image:has(img){min-height:0;background:none;padding:0}
.post-content figure{margin:24px 0}
.feed hr,
.sidebar hr{border:0;border-top:1px solid var(--border);margin:26px 0}
.post-content figcaption{color:var(--muted);font-size:13px;margin-top:6px}
.post-teaser p{font-weight:700}
.post-more{display:inline-block;margin-top:6px;color:var(--brand-color);font-weight:700}

/* Blaetterleiste des News-Plugins. Das Markup kommt aus EXT:news und ist
   unformatiert eine Aufzaehlung – hier wird daraus eine Seitenleiste. */
.f3-widget-paginator{
  list-style:none;margin:6px 0 28px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;justify-content:center
}
.f3-widget-paginator li{display:flex}
.f3-widget-paginator li a,
.f3-widget-paginator li.current{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;padding:9px 13px;
  background:var(--card-bg);border:1px solid var(--border);
  font-size:13px;line-height:1;color:var(--text)
}
.f3-widget-paginator li a:hover,
.f3-widget-paginator li a:focus{
  border-color:var(--brand-color);color:var(--brand-color)
}
.f3-widget-paginator li.current{
  background:var(--brand-color);border-color:var(--brand-color);
  color:var(--brand-accent);font-weight:700
}
/* Auslassungspunkte zwischen weit auseinanderliegenden Seitenzahlen */
.f3-widget-paginator li:not(.current):not(:has(a)){
  align-items:center;padding:9px 4px;color:var(--muted)
}
.f3-widget-paginator li.previous a,
.f3-widget-paginator li.next a{
  text-transform:uppercase;font-size:12px;letter-spacing:.03em;font-weight:700
}

@media(max-width:900px){
  .header-inner{align-items:flex-start;flex-direction:column;padding-top:18px;padding-bottom:14px;gap:8px}
  /* Lange Haeuser-Namen wie "Kinder- und Jugendhaus Barenburg" passen auf ein
     Telefon nicht in eine Zeile; ohne Umbruch schoebe der Titel die Seite auf. */
  .site-title{white-space:normal}
  .main-nav{flex-direction:column;align-items:flex-start;align-self:auto;width:100%}
  .main-nav a{padding-left:0;padding-right:18px}
  .nav-item{width:100%;flex-direction:column;align-items:flex-start}
  /* Auf schmalen Geraeten die Unterpunkte ausklappen statt ueberlagern. */
  .sub-nav{position:static;display:flex;background:none;box-shadow:none;min-width:0}
  /* Im ausgeklappten Zustand duerfen lange Menuetitel umbrechen; mit nowrap
     schoben sie die ganze Seite seitlich auf. */
  .sub-nav a{padding:6px 0 6px 18px;border-top:0;opacity:.85;white-space:normal}
  /* minmax(0,...) statt 1fr: sonst waechst die Spalte auf die Mindestbreite
     ihres breitesten Inhalts an, statt ihn umbrechen zu lassen. */
  .page{grid-template-columns:minmax(0,1fr)}
  /* Ueberlange Zeichenketten aus dem Import brechen um, statt aufzuschieben. */
  .feed,.sidebar,.post-title{overflow-wrap:break-word}
}
@media(max-width:620px){
  .page{margin-top:20px;padding:0 12px}
  .post{padding:28px 22px}
  .post-title{font-size:26px}
  .sidebar{padding:22px}
}

/* Raster der Einrichtungen auf der Portalseite. */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;align-items:stretch
}
.logo-tile{
  display:flex;align-items:center;justify-content:center;
  min-height:84px;padding:10px;
  background:var(--card-bg);border:1px solid var(--border)
}
.logo-tile:hover,
.logo-tile:focus{border-color:var(--brand-color)}
.logo-tile img{max-width:100%;max-height:64px;width:auto;height:auto}
.logo-tile-text{
  font-size:12px;text-transform:uppercase;text-align:center;
  color:var(--text);line-height:1.3
}

/* Verweise auf Dateien als Schaltflaeche kennzeichnen – im Fliesstext ist
   sonst nicht erkennbar, dass sich dahinter ein Download verbirgt.
   Die Farbe folgt dem Mandanten, also derselben wie in der Kopfzeile. */
.feed a[href$=".pdf" i],
.feed a[href$=".doc" i],
.feed a[href$=".docx" i],
.feed a[href$=".odt" i],
.sidebar a[href$=".pdf" i]{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 8px 8px 0;padding:10px 16px;
  background:var(--brand-color);color:var(--brand-accent);
  font-size:13px;font-weight:700;line-height:1.2;
  border:1px solid var(--brand-color)
}
.feed a[href$=".pdf" i]::before,
.feed a[href$=".doc" i]::before,
.feed a[href$=".docx" i]::before,
.feed a[href$=".odt" i]::before,
.sidebar a[href$=".pdf" i]::before{
  content:"↓";font-size:15px;line-height:1
}
.feed a[href$=".pdf" i]:hover,
.feed a[href$=".doc" i]:hover,
.feed a[href$=".docx" i]:hover,
.feed a[href$=".odt" i]:hover,
.sidebar a[href$=".pdf" i]:hover,
.feed a[href$=".pdf" i]:focus,
.sidebar a[href$=".pdf" i]:focus{
  background:var(--brand-accent);color:var(--brand-color)
}
/* Stehen mehrere Datei-Schaltflaechen hintereinander, werden die
   Zeilenumbrueche aus dem Text unterdrueckt: die Knoepfe reihen sich dann
   nebeneinander und umbrechen erst, wenn die Zeile voll ist. */
.feed a[href$=".pdf" i] + br,
.feed a[href$=".doc" i] + br,
.feed a[href$=".docx" i] + br,
.feed a[href$=".odt" i] + br{display:none}

/* Verweise ohne Beschriftung wuerden als leere Schaltflaeche erscheinen. */
.feed a:empty,
.sidebar a:empty{display:none}

/* Schnellzugriff oben in der rechten Spalte: Portal und Termine.
   Ersetzt zwei lange Menuepunkte, die die Navigation ueberfrachtet haben. */
.quicklinks{display:flex;gap:8px;margin:0 0 24px}
.quicklink{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 8px;
  background:var(--brand-color);color:var(--brand-accent);
  border:1px solid var(--brand-color);
  font-size:10px;font-weight:700;text-transform:uppercase;
  text-align:center;line-height:1.3;
  /* Lange Woerter wie "Veranstaltungen" sauber trennen statt hart umbrechen. */
  hyphens:auto;-webkit-hyphens:auto
}
.quicklink svg{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round
}
.quicklink:hover,
.quicklink:focus{background:var(--brand-accent);color:var(--brand-color)}

@media(max-width:900px){
  .quicklinks{max-width:420px}
}

/* Termine im Sammelkalender des Portals in der Farbe ihrer Einrichtung.
   Die Zahl ist der Sysordner, in dem der Termin liegt – damit traegt jeder
   Eintrag die Kopfzeilenfarbe des Hauses, zu dem er gehoert.
   Kommt eine Einrichtung dazu, ist hier eine Zeile zu ergaenzen. */
.bwcal-ev--137{background:#0085a0}   /* Jugend in Emden  */
.bwcal-ev--139{background:#1e73be}   /* Barenburg        */
.bwcal-ev--141{background:#660000}   /* Alte Post        */
.bwcal-ev--143{background:#1e73be}   /* Borssum          */
.bwcal-ev--145{background:#28608a}   /* Big Point        */
.bwcal-ev--147{background:#6a1c2a}   /* JUZ Larrelt      */
.bwcal-ev[class*="bwcal-ev--"]{color:#fff}
.bwcal-ev[class*="bwcal-ev--"]:hover,
.bwcal-ev[class*="bwcal-ev--"]:focus{filter:brightness(1.18)}

/* Legende unter dem Monatskalender. Die Punkte greifen dieselben Klassen wie
   die Termine selbst, damit jede Farbe nur einmal definiert ist. */
.bwcal-legend{
  list-style:none;margin:22px 0 0;padding:18px 0 0;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px 20px
}
.bwcal-legend li{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted)
}
.bwcal-legend-dot{
  width:13px;height:13px;flex:none;display:block;
  border:1px solid rgba(0,0,0,.14)
}


/* --------------------------------------------------------------------
   Zurueckhaltende Aufwertung – vier kleine Eingriffe, kein neues Design.
   -------------------------------------------------------------------- */

/* 1. Bilder nutzen die volle Kartenbreite, statt im Innenabstand zu schwimmen.
      Das gibt den Beitraegen Gewicht, ohne etwas hinzuzufuegen. */
.post-content .post-image,
.post-content > figure,
.feed > .frame > .ce-image:not([class*="ce-layout-"]){
  margin-left:calc(var(--card-pad) * -1);
  margin-right:calc(var(--card-pad) * -1)
}
.post-content .post-image img,
.post-content > figure img,
.feed > .frame > .ce-image:not([class*="ce-layout-"]) img{width:100%}

/* 2. Das Datum traegt die Farbe des Hauses – der einzige Farbtupfer im
      Textbereich, dafuer auf jeder Karte wiederkehrend. */
.post-meta span:first-child{color:var(--brand-color);font-weight:700}

/* 3. Ueberschriften reagieren auf den Mauszeiger, damit erkennbar wird,
      dass der ganze Beitrag anklickbar ist. */
.post-title a{transition:color .15s}
.post-title a:hover,
.post-title a:focus{color:var(--brand-color)}

/* 4. Eine Spur Tiefe: heller Rahmen, minimaler Schatten. Die Karten heben
      sich damit vom Grund ab, ohne dass es nach Schatten aussieht. */
.post,
.feed > .frame,
.sidebar{
  border-color:#e8e8e8;
  box-shadow:0 1px 2px rgba(0,0,0,.05)
}
.feed > .frame:has(.post),
.feed > .frame:has(.f3-widget-paginator){box-shadow:none}

@media(max-width:620px){
  :root{--card-pad:22px}
}


/* --------------------------------------------------------------------
   Darstellungen des Inhaltselements "Bilder".
   Die Nummer kommt aus dem Feld "Layout" und steht als Klasse im Markup.
   -------------------------------------------------------------------- */

/* 20 – Laufband. Ersetzt den Slider der alten Seite. Geblaettert wird durch
   Wischen oder seitliches Scrollen; das uebernimmt der Browser, es braucht
   dafuer weder ein Skript noch eine Erweiterung. */
.ce-layout-20 .ce-outer,
.ce-layout-20 .ce-inner,
.ce-layout-23 .ce-outer,
.ce-layout-23 .ce-inner{position:static;float:none;left:auto;right:auto}
.ce-layout-20 .ce-inner,
.ce-layout-23 .ce-inner{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:12px
}
.ce-layout-20 .ce-row,
.ce-layout-23 .ce-row{display:flex;gap:14px;margin:0;flex:0 0 auto}
.ce-layout-20 .ce-column,
.ce-layout-23 .ce-column{
  flex:0 0 auto;margin:0;float:none;
  width:min(78vw,540px);
  scroll-snap-align:center
}
.ce-layout-20 img,
.ce-layout-23 img{
  width:100%;height:300px;display:block;
  /* Einheitliche Hoehe, sonst springt die Zeile beim Weiterschieben. */
  object-fit:cover
}
/* Die Leiste bleibt sichtbar, damit erkennbar ist, dass es weitergeht. */
.ce-layout-20 .ce-inner::-webkit-scrollbar{height:8px}
.ce-layout-20 .ce-inner::-webkit-scrollbar-thumb{background:var(--border)}

/* 21 – Portraits in gleicher Groesse. Gilt ebenso fuer die Teamfotos aus
   WordPress: dort tragen die Bilder die Klasse der runden Darstellung, sind
   aber unterschiedlich beschnitten. Ein fester Ausschnitt bringt sie auf ein
   Mass, ohne dass die Vorlagen einzeln nachbearbeitet werden muessen. */
.ce-layout-21 img,
.feed figure.is-style-rounded img{
  /* Hochformat statt Quadrat: die Aufnahmen sind hochkant, ein quadratischer
     Ausschnitt schnitte zu viel weg. */
  width:240px;height:290px;
  object-fit:cover;object-position:center top;
  border-radius:12px;
  margin:0 auto
}
.feed figure.is-style-rounded{margin:0 auto;text-align:center}
.feed figure.is-style-rounded figcaption{margin-top:12px}
.ce-layout-21 .ce-column{float:none;margin:0 auto}
.ce-layout-21 figcaption{
  text-align:center;margin-top:12px;
  /* Die Bildbeschreibung aus der Dateiverwaltung traegt ihre Zeilenumbrueche
     als Zeilenschaltung, nicht als Markup – sonst klebt alles aneinander. */
  white-space:pre-line
}

/* 22 – kleine Karten. Fuer Bildstrecken, die frueher als lange Reihe grosser
   Bilder untereinander standen. Als Raster kleiner Ausschnitte bleibt eine
   Seite ueberschaubar; ein Klick oeffnet das Bild in voller Groesse. */
.ce-layout-22 .ce-outer,
.ce-layout-22 .ce-inner{position:static;float:none;left:auto;right:auto}
.ce-layout-22 .ce-inner,
.ce-gallery-mini{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin:0
}
.ce-layout-22 .ce-row,
.ce-layout-22 .ce-column{display:contents;float:none;margin:0}
.ce-layout-22 figure,
.ce-gallery-mini figure{margin:0}
.ce-layout-22 img,
.ce-gallery-mini img{
  width:100%;height:140px;display:block;
  object-fit:cover;
  border:1px solid var(--border);
  background:var(--page-bg)
}
.ce-gallery-mini a:hover img,
.ce-gallery-mini a:focus img{border-color:var(--brand-color)}
.ce-gallery-mini figcaption{display:none}

/* Bild mit Beschriftung aus WordPress. */
.feed figure.ce-caption{margin:24px auto;text-align:center}
.feed figure.ce-caption img{margin:0 auto}
.feed figure.ce-caption figcaption{color:var(--muted);font-size:13px;margin-top:8px}

/* --------------------------------------------------------------------
   Eingebettete Inhalte fremder Anbieter.
   Nichts davon wird geladen, bevor der Besucher zugestimmt hat.
   -------------------------------------------------------------------- */
.ce-embed{margin:24px 0}
.ce-embed-notice{
  border:1px solid var(--border);background:var(--page-bg);
  padding:26px 22px;text-align:center
}
.ce-embed-notice h3{
  margin:0 0 10px;font-family:Georgia,"Times New Roman",serif;
  font-size:19px;color:#3f3f3f
}
.ce-embed-notice p{margin:0 0 16px;color:var(--muted);font-size:14px}
.ce-embed-notice button{
  font:inherit;cursor:pointer;
  padding:11px 20px;
  background:var(--brand-color);color:var(--brand-accent);
  border:1px solid var(--brand-color);
  font-size:13px;font-weight:700;text-transform:uppercase
}
.ce-embed-notice button:hover,
.ce-embed-notice button:focus{background:var(--brand-accent);color:var(--brand-color)}
.ce-embed-rahmen{position:relative;padding-top:56.25%;height:0}
.ce-embed-rahmen iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0
}
.ce-embed:not(.is-freigegeben) .ce-embed-rahmen{display:none}
.ce-embed-alt{margin:14px 0 0 !important;font-size:13px}
.ce-embed-alt a{text-decoration:underline}

/* Kacheln mit Beschriftung – fuer Bildseiten, auf denen zu jeder Aufnahme
   eine Erlaeuterung gehoert. Die Kacheln duerfen dafuer etwas groesser sein. */
.ce-gallery-mini--text{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ce-gallery-mini--text img{height:130px}
.ce-gallery-mini--text figcaption{
  display:block;
  margin-top:6px;font-size:12px;line-height:1.35;color:var(--muted)
}

/* --------------------------------------------------------------------
   Grosse Bildansicht ueber dem Kachelraster.
   -------------------------------------------------------------------- */
.bwjie-lupe{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:28px 18px;
  background:rgba(0,0,0,.92)
}
.bwjie-lupe[hidden]{display:none}
body.bwjie-lupe-offen{overflow:hidden}
.bwjie-lupe-buehne{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:min(1000px,100%);max-height:100%
}
.bwjie-lupe-buehne img{
  display:block;max-width:100%;max-height:78vh;
  width:auto;height:auto;
  background:#111
}
.bwjie-lupe-buehne figcaption{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;
  color:#f2f2f2;font-size:14px;text-align:center
}
.bwjie-lupe-zaehler{color:rgba(255,255,255,.6);font-size:13px}
.bwjie-lupe-zu,
.bwjie-lupe-blaettern{
  flex:none;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.3);
  line-height:1
}
.bwjie-lupe-zu{
  position:absolute;top:16px;right:18px;
  width:42px;height:42px;font-size:26px
}
.bwjie-lupe-blaettern{width:46px;height:64px;font-size:30px}
.bwjie-lupe-blaettern[hidden]{display:none}
.bwjie-lupe-zu:hover,
.bwjie-lupe-zu:focus,
.bwjie-lupe-blaettern:hover,
.bwjie-lupe-blaettern:focus{background:var(--brand-color);border-color:var(--brand-color)}
/* Die Kacheln zeigen, dass sich etwas oeffnen laesst. */
.ce-gallery-mini a{cursor:zoom-in;display:block}

@media(max-width:620px){
  .bwjie-lupe{padding:14px 8px;gap:4px}
  .bwjie-lupe-blaettern{width:38px;height:54px;font-size:24px}
  .bwjie-lupe-buehne img{max-height:66vh}
}


/* 23 – Slider, der von selbst weiterschaltet. Wie das Laufband, aber ein Bild
   fuellt die Breite. Das Weiterschalten uebernimmt slider.js; ohne Skript
   bleibt es ein Laufband, das sich schieben laesst. */
/* Die Reihen sind die unmittelbaren Kinder des scrollenden Bereichs – Breite
   und Fangpunkt gehoeren deshalb dorthin, nicht an die Spalte darin. */
.ce-layout-23 .ce-row{flex:0 0 100%;width:100%;scroll-snap-align:center}
.ce-layout-23 .ce-column{width:100%;max-width:100%;scroll-snap-align:none}
.ce-layout-23 img{height:380px}
.ce-layout-23 .ce-inner{
  scrollbar-width:none;
  padding-bottom:0
}
.ce-layout-23 .ce-inner::-webkit-scrollbar{height:0}
/* Fortschritt: ein Strich je Bild, der laufende ist hervorgehoben. */
.bwjie-slider-punkte{
  display:flex;justify-content:center;gap:6px;
  margin-top:12px;padding:0;list-style:none
}
.bwjie-slider-punkte button{
  width:26px;height:4px;padding:0;border:0;cursor:pointer;
  background:var(--border)
}
.bwjie-slider-punkte button[aria-current="true"]{background:var(--brand-color)}
.bwjie-slider-punkte button:focus-visible{outline:2px solid var(--brand-color);outline-offset:3px}

@media(max-width:620px){
  .ce-layout-23 img{height:230px}
}