/* =========================================================================
   OP·DZ – Theme-Styles (UIkit-3-Overrides)
   Webfonts: siehe fonts.css (wird zusammen mit dieser Datei gebundelt)
   ========================================================================= */

/* =========================================================================
   1. DESIGN-TOKENS (CSS Custom Properties)
   ========================================================================= */
:root {
  --op-blau:        #1e2758; /* Primär / Nacht – verifiziert gegen Logo_OP_DZ_blau.svg */
  --op-blau-dunkel: #141b45; /* Hover */
  --op-gelb:        #edf489; /* Sekundär / Signalfarbe */
  --op-gelb-hell:   #f7fbc9;
  --op-papier:      #fafae1; /* Creme – Markenhintergrund (offener-prozess.de) */
  --op-koralle:     #ff6900; /* Akzent für Kategorie-Labels (Marke) */
  --op-linie:       #d9dbcf; /* Rahmen */
  --op-text:        #23242a; /* Fließtext */

  --op-radius:      5px;      /* dezente Rundung wie auf offener-prozess.de */

  --op-font: "ABC Favorit", Helvetica, Arial, sans-serif;
}

/* =========================================================================
   2. BASIS / RESET-ERGÄNZUNGEN
   ========================================================================= */
html { scroll-behavior: smooth; }

body {
  font-family: var(--op-font);
  color: var(--op-text);
  background: #fff;
}

/* Dezente Marken-Rundung auf den zentralen Komponenten */
.uk-button, .uk-input, .uk-textarea, .uk-select, .uk-card,
.op-oeffnungsbox, .op-scard, .op-scard__img, .op-map, .op-side-box,
.op-content-box, .op-map-filter__item, .op-kategorie, .op-search input,
.op-bild, .leaflet-popup-content-wrapper {
  border-radius: var(--op-radius);
}

/* Textauswahl: gelb mit blauem Text */
::selection { background: var(--op-gelb); color: var(--op-blau); }

/* Sichtbarer Tastaturfokus */
:focus-visible {
  outline: 3px solid var(--op-blau);
  outline-offset: 2px;
}

/* Utility: gelber Textmarker */
.op-marker {
  background-image: linear-gradient(var(--op-gelb), var(--op-gelb));
  background-repeat: no-repeat;
  background-position: 0 0.15em;
  background-size: 100% 0.85em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.05em;
}

/* =========================================================================
   3. TYPOGRAFIE (UIkit-Overrides)
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4 {
  color: var(--op-blau);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1, .uk-h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
}

a {
  color: var(--op-blau);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--op-blau-dunkel); }

/* =========================================================================
   4. BUTTONS
   ========================================================================= */
.uk-button {
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* primary = blaue Fläche / weißer Text */
.uk-button-primary {
  background: var(--op-blau);
  color: #fff;
  border: 2px solid var(--op-blau);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  background: var(--op-blau-dunkel);
  border-color: var(--op-blau-dunkel);
  color: #fff;
}

/* secondary = gelbe Fläche / blauer Text */
.uk-button-secondary {
  background: var(--op-gelb);
  color: var(--op-blau);
  border: 2px solid var(--op-blau);
}
.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background: var(--op-gelb-hell);
  color: var(--op-blau-dunkel);
  border-color: var(--op-blau-dunkel);
}

/* default = blaue Outline, bei Hover gefüllt */
.uk-button-default {
  background: transparent;
  color: var(--op-blau);
  border: 2px solid var(--op-blau);
}
.uk-button-default:hover,
.uk-button-default:focus {
  background: var(--op-blau);
  color: #fff;
  border-color: var(--op-blau);
}

/* uk-button-text mit gelber Unterstreichung */
.uk-button-text {
  color: var(--op-blau);
  text-transform: none;
  font-weight: 700;
}
.uk-button-text::before {
  border-bottom: 3px solid var(--op-gelb);
}

/* =========================================================================
   5. NAVBAR
   ========================================================================= */
.op-navbar,
.op-navbar.uk-navbar-container {
  background: var(--op-gelb);
  border-bottom: 0;
}
.op-navbar .uk-navbar-nav > li > a {
  color: var(--op-blau);
  font-weight: 700;
  text-transform: none;
  text-decoration: none;
  min-height: 72px;
}
.op-navbar .uk-navbar-nav > li:hover > a,
.op-navbar .uk-navbar-nav > li > a:focus,
.op-navbar .uk-navbar-nav > li.uk-active > a,
.op-navbar .uk-navbar-nav > li > a[aria-current="page"] {
  color: var(--op-blau-dunkel);
  box-shadow: inset 0 -5px 0 var(--op-blau);
}
.op-navbar .uk-navbar-toggle { color: var(--op-blau); }

/* Sprachumschalter */
.op-langswitch { position: relative; display: inline-flex; align-items: center; }
.op-langswitch__flag { font-size: 1.2rem; line-height: 1; }

/* Toggle-Button (Navbar) */
.op-langswitch__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 0; cursor: pointer;
  padding: .4rem .55rem; min-height: 40px; border-radius: var(--op-radius);
  color: var(--op-blau); font-family: var(--op-font); font-weight: 700; font-size: .85rem;
}
.op-langswitch__toggle:hover,
.op-langswitch__toggle:focus-visible { background: rgba(30,39,88,.10); }
.op-langswitch__code { letter-spacing: .03em; }
.op-langswitch__caret {
  width: .45rem; height: .45rem; margin-left: .05rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
/* Dropdown-Panel */
.op-langswitch__drop { min-width: 170px; padding: .5rem; background: var(--op-papier); border: 0; box-shadow: 0 14px 36px rgba(20,27,69,.18); }
.op-langswitch__drop .uk-dropdown-nav > li > a {
  display: flex; align-items: center; gap: .55rem;
  color: var(--op-blau); text-decoration: none; font-weight: 700;
  padding: .5rem .6rem; border-radius: var(--op-radius); min-height: 40px;
}
.op-langswitch__drop .uk-dropdown-nav > li > a:hover { color: var(--op-blau-dunkel); background: var(--op-gelb-hell); }
.op-langswitch__drop .uk-dropdown-nav > li.uk-active > a { box-shadow: inset 0 0 0 2px var(--op-blau); }

/* Liste (mobiles Offcanvas) */
.op-langswitch--list { flex-direction: column; align-items: stretch; gap: .25rem; }
.op-langswitch--list .op-langswitch__item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .3rem; text-decoration: none; color: #fff; font-weight: 700;
}
.op-langswitch--list .op-langswitch__item.is-current { box-shadow: inset 0 -3px 0 var(--op-gelb); }

/* Dropdown-Panel wie auf offener-prozess.de: cremefarben, weicher Schatten, kein Rahmen */
.uk-navbar-dropdown {
  background: var(--op-papier);
  border: 0;
  border-radius: 0;
  box-shadow: 0 14px 36px rgba(20,27,69,.18);
  padding: 1.6rem 1.9rem;
  min-width: 264px;
}
.uk-navbar-dropdown-nav > li > a {
  color: var(--op-blau);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  padding: .55rem 0;
}
.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:focus {
  color: var(--op-blau-dunkel);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Logo */
.op-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.op-logo__img {
  display: block;
  height: 40px;
  width: auto;
}
.op-navbar .op-logo__img { height: 44px; }

/* Mobiles Offcanvas-Menü im Hausstil (Blau statt UIkit-Default-Grau) */
.uk-offcanvas-bar { background: var(--op-blau); color: #fff; }
.uk-offcanvas-bar .uk-nav-primary > li > a {
  color: #fff; font-weight: 700; text-transform: none;
}
.uk-offcanvas-bar .uk-nav-primary > li > a:hover,
.uk-offcanvas-bar .uk-nav-primary > li > a:focus,
.uk-offcanvas-bar .uk-nav-primary > li.uk-active > a,
.uk-offcanvas-bar .uk-nav-primary > li > a[aria-current="page"] {
  color: var(--op-gelb);
}
.uk-offcanvas-bar .uk-nav-sub a { color: rgba(255,255,255,.75); font-weight: 600; }
.uk-offcanvas-bar .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-sub a:focus { color: var(--op-gelb); }
.uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a .uk-nav-parent-icon,
.uk-offcanvas-bar .uk-close,
.uk-offcanvas-bar .uk-offcanvas-close { color: #fff; }
.uk-offcanvas-bar .uk-offcanvas-close:hover { color: var(--op-gelb); }

/* =========================================================================
   6. TOPBAR
   ========================================================================= */
.op-topbar {
  background: var(--op-gelb);
  border-bottom: 1px solid rgba(30,39,88,.12);
  font-size: .85rem;
}
.op-topbar a { text-decoration: none; color: var(--op-blau); }
.op-topbar .uk-subnav > li > a {
  color: var(--op-blau);
  text-transform: none;
  font-weight: 700;
}
.op-topbar .uk-subnav > li.uk-active > a { color: var(--op-blau); }
.op-topbar .uk-subnav > li.uk-active > a::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--op-blau);
  margin-top: 2px;
}

/* =========================================================================
   7. CARDS
   ========================================================================= */
.uk-card-default {
  background: #fff;
  border: 1px solid var(--op-linie);
  box-shadow: none !important;
  transition: border-color .15s ease;
}
.uk-card-default:hover { border-color: var(--op-blau); }

.op-card-datum {
  color: var(--op-blau);
  font-weight: 700;
  letter-spacing: .01em;
}
.op-card-titel a { text-decoration: none; }
.op-card-titel a:hover { text-decoration: underline; }

/* Kategorie-Label */
.op-kategorie {
  display: inline-block;
  background: var(--op-gelb);
  color: var(--op-blau);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 700;
  padding: .25em .6em;
}

.op-meta { color: #555; font-size: .82rem; }

/* =========================================================================
   8. FORMULARE
   ========================================================================= */
.uk-input,
.uk-textarea,
.uk-select {
  border: 2px solid var(--op-blau);
  background: #fff;
  color: var(--op-text);
}
.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus {
  border-color: var(--op-blau);
  background: var(--op-gelb-hell);
}
.uk-checkbox {
  border: 2px solid var(--op-blau);
  background: #fff;
}
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
  background-color: var(--op-blau);
  border-color: var(--op-blau);
}
.uk-form-label { font-weight: 700; color: var(--op-blau); }

/* =========================================================================
   9. BILD-PLATZHALTER
   ========================================================================= */
.op-bild {
  position: relative;
  border: 1px solid var(--op-linie);
  background-color: var(--op-papier);
  background-image: repeating-linear-gradient(
    45deg,
    var(--op-papier) 0,
    var(--op-papier) 10px,
    var(--op-gelb-hell) 10px,
    var(--op-gelb-hell) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-bild__label {
  background: #fff;
  border: 1px solid var(--op-linie);
  color: var(--op-blau);
  font-size: .78rem;
  font-weight: 700;
  padding: .2em .6em;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.op-bild--16-9 { aspect-ratio: 16 / 9; }
.op-bild--4-3  { aspect-ratio: 4 / 3; }
.op-bild--1-1  { aspect-ratio: 1 / 1; }

/* =========================================================================
   10. SEKTIONS-FARBEN & DIVIDER
   ========================================================================= */
.op-section-gelb  { background: var(--op-gelb); }
.op-section-muted { background: var(--op-papier); }
.op-section-blau  { background: var(--op-blau); color: #fff; }

.op-oeffnungsbox {
  background: #fff;
  border: 2px solid var(--op-blau);
  padding: 1.75rem;
}
.op-divider { display: block; width: 100%; height: 46px; }

/* Bogen-Illustration (Formen-Asset) */
.op-bogen { display: block; width: 100%; height: auto; }

/* =========================================================================
   11. SLIDER / DOTNAV
   ========================================================================= */
.uk-dotnav > * > * {
  border: 1px solid var(--op-blau);
  background: transparent;
}
.uk-dotnav > .uk-active > * { background: var(--op-blau); }
.op-slidenav { color: var(--op-blau); }

/* =========================================================================
   12. FOOTER
   ========================================================================= */
.op-footer { position: relative; overflow: hidden; }
/* Punktraster („Teppich") rechts, angeschnitten – wie im dunklen Bereich der Vorlage */
.op-footer::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  width: 44%; max-width: 640px; pointer-events: none;
  background-image: radial-gradient(rgba(237,244,137,.30) 2px, transparent 2.6px);
  background-size: 22px 22px;
  background-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
          mask-image: linear-gradient(to left, #000 55%, transparent);
}
.op-footer > * { position: relative; } /* Inhalt über der Deko */
.op-footer a { color: #fff; text-decoration: none; }
.op-footer a:hover { color: var(--op-gelb); }
.op-footer .op-footer-head {
  color: var(--op-gelb);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 700;
}
.op-footer hr { border-top: 1px solid rgba(255,255,255,.25); }
.op-footer .uk-subnav > li > a { color: #fff; text-transform: none; }
.op-footer .uk-subnav > li > a:hover { color: var(--op-gelb); }
.op-foerder {
  border: 2px dashed rgba(255,255,255,.5);
  color: rgba(255,255,255,.85);
  padding: 2rem 1rem;
  text-align: center;
  font-size: .85rem;
}
/* Förderlogo auf weißem Panel (dunkle Grafik wäre auf Blau unsichtbar) */
.op-foerder--logo {
  background: #fff;
  border: 0;
  padding: 1.5rem;
  border-radius: var(--op-radius);
}
.op-foerder--logo img { max-width: 640px; width: 100%; height: auto; }

/* =========================================================================
   13. SKIP-LINK
   ========================================================================= */
.op-skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 2000;
  background: var(--op-gelb);
  color: var(--op-blau);
  font-weight: 700;
  padding: .6rem 1rem;
  text-decoration: none;
  transition: top .15s ease;
}
.op-skip-link:focus { top: 1rem; }

/* =========================================================================
   14. SUCH-ICON
   ========================================================================= */
.op-such-icon { color: var(--op-blau); }

/* =========================================================================
   15. KARTE (Leaflet + OpenStreetMap)
   ========================================================================= */
.op-map {
  width: 100%;
  height: 560px;
  border: 2px solid var(--op-blau);
  background: #d9e1ea; /* neutrale Fläche „ausserhalb DE" (kein Tile-Grau) */
  z-index: 0; /* unter der Sticky-Navbar halten */
}
/* Leaflet-eigener Container-Hintergrund (ohne Tiles) an den Hausstil angleichen */
.op-map .leaflet-container { background: #d9e1ea; }
.op-map--klein { height: 320px; }

/* Leaflet-Popup im Hausstil: Bild oben, gelber Body (wie im Original) */
.leaflet-popup-content-wrapper {
  background: var(--op-gelb) !important; /* niemals weiß */
  padding: 0; overflow: hidden; border: 0;
  box-shadow: 0 4px 16px rgba(20,27,69,.28);
}
.leaflet-popup-content { margin: 0 !important; background: var(--op-gelb); }
.leaflet-popup-tip { background: var(--op-gelb); border: 0; box-shadow: none; }
.op-popup { display: block; text-decoration: none; background: var(--op-gelb); }
.op-popup__img {
  display: block; width: 100%; height: 150px;
  background-size: cover; background-position: center;
}
.op-popup__body { display: block; padding: .9rem 1rem 1.1rem; }
.op-popup__title {
  display: block; color: var(--op-blau); font-weight: 700;
  font-size: 1.15rem; line-height: 1.15;
}
.op-popup__addr {
  display: block; margin-top: .5rem;
  color: var(--op-blau); opacity: .8; font-size: .85rem;
}

/* Cluster-Bubbles im Hausstil (Blau/Gelb) */
.marker-cluster { background: transparent; }
.marker-cluster div {
  background: var(--op-blau); color: #fff;
  font-family: var(--op-font); font-weight: 700;
  border: 2px solid var(--op-gelb);
}
.marker-cluster span { line-height: 30px; }

/* Pin-Marker (Tropfenform, Kategoriefarbe) – Standard-DivIcon-Look entfernen */
.op-pinwrap { background: transparent !important; border: 0 !important; }
.op-pin {
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
  transition: transform .1s ease;
  transform-origin: 50% 100%;
}
.op-pinwrap:hover .op-pin,
.op-pinwrap:focus-visible .op-pin { transform: scale(1.18); }
.op-pinwrap:focus-visible { outline: 3px solid var(--op-blau); outline-offset: 3px; }

/* --- 15a. Split-View (Karte + Liste), Vorbild map.offener-prozess.de --- */
.op-split { display: flex; align-items: flex-start; }
.op-split__list { box-sizing: border-box; width: 50%; padding: 2rem clamp(1rem, 3vw, 2.5rem); }
.op-split__map {
  width: 50%;
  position: sticky;
  top: 75px;                 /* Höhe der sticky Navbar */
  height: calc(100vh - 75px);
}
.op-split__map .op-map { height: 100%; border: 0; border-left: 3px solid var(--op-blau); }
@media (max-width: 959px) {
  .op-split { display: block; }
  .op-split__list, .op-split__map { width: 100%; }
  .op-split__map { position: static; height: 60vh; }
  .op-split__map .op-map { border-left: 0; border-top: 3px solid var(--op-blau); }
  .op-split__list { order: 2; }
}

/* Listenkopf: Ergebniszahl + Suche */
.op-listhead { margin-bottom: 1.5rem; }
.op-listhead__count { font-weight: 700; color: var(--op-blau); font-size: 1.1rem; }
.op-search { position: relative; margin-top: .75rem; }
.op-search input {
  width: 100%; border: 2px solid var(--op-blau); background: #fff;
  padding: .6rem .8rem; font-family: var(--op-font); color: var(--op-text);
}
.op-search input:focus { outline: none; background: var(--op-gelb-hell); }

/* Aufklappbarer Kategorie-Filter (standardmäßig eingeklappt), dezent */
.op-filter { margin: 0 0 1.25rem; }
.op-filter__summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--op-blau); font-size: .9rem; font-weight: 600;
  padding: .3rem 0; user-select: none;
}
.op-filter__summary::-webkit-details-marker { display: none; }
.op-filter__summary::before {
  content: ""; width: .5rem; height: .5rem; flex: 0 0 auto;
  border-right: 2px solid var(--op-blau); border-bottom: 2px solid var(--op-blau);
  transform: rotate(-45deg); transition: transform .15s ease;
  margin-right: .1rem;
}
.op-filter[open] .op-filter__summary::before { transform: rotate(45deg); }
.op-filter__summary:focus-visible { outline: 3px solid var(--op-blau); outline-offset: 2px; }
.op-filter__state { color: #6a6d78; font-weight: 400; }
.op-filter__panel { padding-top: .75rem; }

/* Filter-Aktionen: Alle auswählen / abwählen */
.op-filter-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .75rem;
}
.op-filter-btn {
  font-family: var(--op-font); font-weight: 700; font-size: .8rem;
  color: var(--op-blau); background: #fff;
  border: 2px solid var(--op-blau); border-radius: var(--op-radius);
  padding: .4rem .8rem; min-height: 40px; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.op-filter-btn:hover,
.op-filter-btn:focus-visible { background: var(--op-blau); color: #fff; }

/* Kategorie-Filter (kompakte Chips, dezent) */
.op-map-filter {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: 0;
}
.op-map-filter__item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 500; color: var(--op-blau);
  cursor: pointer; border: 1px solid var(--op-linie);
  padding: .25rem .5rem; user-select: none;
}
.op-map-filter__item input { margin: 0; }
.op-map-filter__swatch {
  width: 12px; height: 12px; display: inline-block;
  border: 1px solid rgba(0,0,0,.15);
}

/* --- 15b. Schauplatz-Card (gelb, Original-Anmutung) --- */
/* Kartengitter: fester Gap + gleiche Zeilenhöhe → einheitliche Kachelhöhe */
.op-scards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}
@media (max-width: 639px) { .op-scards { grid-template-columns: 1fr; } }

.op-scard {
  display: flex; flex-direction: column;
  background: var(--op-gelb);
  border: 1px solid var(--op-gelb); text-decoration: none;
  height: 100%;
  transition: outline-color .12s ease;
  outline: 3px solid transparent; outline-offset: -3px;
}
.op-scard:hover, .op-scard:focus-visible { outline-color: var(--op-blau); }
.op-scard.is--hidden { display: none; }
.op-scard__img {
  display: block; flex: 0 0 auto;
  aspect-ratio: 3 / 2;               /* responsiv: Höhe skaliert mit der Kartenbreite */
  background-color: var(--op-gelb-hell);
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(30,39,88,.12);
  border-radius: var(--op-radius) var(--op-radius) 0 0;
  position: relative; overflow: hidden;
}
/* Echtes Bild füllt den Rahmen ohne Verzerrung (schneidet nur bei Bedarf zu) */
.op-scard__photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Platzhalter (kein Foto): Punktraster + Bogen in Kategoriefarbe (Marken-Motiv) */
.op-scard__img--ph {
  background-color: var(--op-papier);
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 13px 13px;
  display: flex; align-items: flex-end; justify-content: center;
}
.op-scard__bogen { width: 78%; height: auto; display: block; }
.op-scard__tipp {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--op-blau); color: #fff;
  font-size: .65rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .2em .5em;
}
.op-scard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1rem 1.1rem 1.2rem; }
.op-scard__cat {
  display: inline-block; margin: 0 0 .4rem;
  color: var(--op-blau); /* hoher Kontrast auf Gelb; Farbcode steckt im Punkt */
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.op-scard__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--op-blau); font-weight: 700; font-size: 1.15rem; line-height: 1.15; margin: 0;
}
.op-scard__sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--op-blau); opacity: .8; font-size: .85rem; margin: .3rem 0 0;
}
.op-scard__addr {
  display: flex; align-items: flex-start; gap: .35rem;
  color: var(--op-blau); font-size: .8rem;
  margin-top: auto; padding-top: .9rem; /* Adresse unten bündig */
}
.op-scard__dot {
  flex: 0 0 auto; width: 11px; height: 11px; margin-top: .15rem;
  border: 1px solid rgba(0,0,0,.15);
}

/* --- 15c. Detailseite (Hero-Band + Sidebar), Original-Anmutung --- */
.op-detail-hero { background: var(--op-gelb); position: relative; overflow: hidden; }
.op-detail-hero > * { position: relative; z-index: 1; }
/* Punktraster („Teppich") oben rechts – blau auf gelb */
.op-detail-hero::before {
  content: ""; position: absolute; top: -12px; right: -12px;
  width: 280px; height: 150px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(30,39,88,.26) 2px, transparent 2.6px);
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(225deg, #000 45%, transparent 80%);
          mask-image: linear-gradient(225deg, #000 45%, transparent 80%);
}
/* Großer angeschnittener Ring („Kringel") links hinter der Überschrift */
.op-detail-hero::after {
  content: ""; position: absolute; left: -160px; top: 50%;
  width: 360px; height: 360px; transform: translateY(-50%);
  border-radius: 50%; border: 40px solid rgba(30,39,88,.07);
  pointer-events: none; z-index: 0;
}
.op-detail-hero .op-breadcrumb { color: var(--op-blau); font-weight: 700; font-size: .9rem; }
.op-detail-hero .op-breadcrumb a { text-decoration: none; }
.op-side-box {
  background: var(--op-gelb);
  padding: 0;
  margin-bottom: 1.5rem;
}
.op-side-box__pad { padding: 1.25rem 1.35rem; }
.op-side-box .op-map { border: 0; }
.op-side-box__cat { font-size: 1.1rem; font-weight: 700; color: var(--op-blau); }
.op-side-box__date { color: var(--op-blau); margin-top: .4rem; }
.op-directions { display: inline-block; margin-top: .6rem; font-weight: 700; }
.op-content-box { background: var(--op-gelb); padding: 1.75rem; }
/* Bildnachweis (Foto-Credit unter dem Bild) */
.op-bildnachweis { font-size: .75rem; color: #5a5d68; margin-top: 0; }
.op-bildnachweis a { color: inherit; }
.op-theme-blau .op-bildnachweis { color: rgba(255,255,255,.7); }
.op-theme-blau .op-bildnachweis a { color: var(--op-gelb); }
.op-content-box .op-quelle-head { font-weight: 700; color: var(--op-blau); margin-top: 1.5rem; }
.op-content-box .op-quelle-link { color: var(--op-blau); text-decoration: underline; word-break: break-word; }
.op-theme-blau .op-content-box .op-quelle-link { color: var(--op-gelb); }

/* Kiosk-Modus (?kiosk=true): externe Links werden von kiosk.js entschärft und
   sollen wie normaler Fliesstext wirken – nicht anklickbar, keine Link-Optik. */
.op-link-disabled { color: inherit; text-decoration: none; cursor: default; pointer-events: none; }

/* =========================================================================
   16. TOUCH-KIOSK & BARRIEREFREIHEIT
   ========================================================================= */
/* Etwas größere Basisschrift für Lesbarkeit auf Distanz (Kiosk) */
html { font-size: 17px; }

/* Tap-Ziele ≥ 44–48px, angenehmes Antippen */
a, button, label, summary, .op-scard { -webkit-tap-highlight-color: rgba(30,39,88,.15); }

.uk-button {
  min-height: 48px;
  padding-top: .7rem; padding-bottom: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
}

.op-search input { min-height: 52px; font-size: 1.05rem; }

.op-map-filter__item {
  min-height: 42px; padding: .5rem .7rem; font-size: .82rem; gap: .5rem;
}
.op-map-filter__item input[type="checkbox"] {
  width: 22px; height: 22px; flex: 0 0 auto;
}

/* Topbar: Sprachen & Suche gut antippbar */
.op-topbar a,
.op-topbar .uk-subnav > li > a { display: inline-block; padding: .5rem .35rem; }
.op-such-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* Leaflet-Bedienelemente vergrößern (Zoom, Popup-Close, Attribution) */
.leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px; font-size: 22px;
}
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.leaflet-popup-close-button {
  top: 8px !important; right: 8px !important;
  width: 30px !important; height: 30px !important;
  line-height: 28px !important; font-size: 22px !important;
  color: var(--op-blau) !important;
  background: rgba(255,255,255,.9); border-radius: 50%;
}
.op-popup__link { padding: .85em .9em 1em; min-height: 44px; }
.leaflet-control-attribution a { padding: 0; }

/* Karten-Cluster gut sicht- und antippbar */
.marker-cluster div { width: 40px; height: 40px; line-height: 36px; margin-left: -5px; margin-top: -5px; }

/* Deutlich sichtbarer Tastatur-/Touch-Fokus überall */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.op-scard:focus-visible {
  outline: 3px solid var(--op-blau);
  outline-offset: 2px;
}
/* Fokus auf die Filter-Chips (Checkbox darin) sichtbar machen */
.op-map-filter__item:focus-within {
  outline: 3px solid var(--op-blau);
  outline-offset: 2px;
}

/* Auf Touch-Geräten (kein Hover): Aktiv-Feedback statt Hover */
@media (hover: none) {
  .op-scard:active { outline-color: var(--op-blau); }
  .uk-card-default:active { border-color: var(--op-blau); }
}

/* =========================================================================
   17. INVERTIERTES THEMA (Erinnerungsorte): Blau statt Gelb im Vordergrund
   ========================================================================= */
/* Navbar → blau, Logo weiß */
.op-theme-blau .op-navbar,
.op-theme-blau .op-navbar.uk-navbar-container { background: var(--op-blau); }
.op-theme-blau .op-navbar .op-logo__img { filter: brightness(0) invert(1); }
.op-theme-blau .op-navbar .uk-navbar-nav > li > a { color: #fff; }
.op-theme-blau .op-navbar .uk-navbar-nav > li:hover > a,
.op-theme-blau .op-navbar .uk-navbar-nav > li.uk-active > a,
.op-theme-blau .op-navbar .uk-navbar-nav > li > a[aria-current="page"] {
  color: #fff; box-shadow: inset 0 -5px 0 var(--op-gelb);
}
.op-theme-blau .op-navbar .uk-navbar-toggle,
.op-theme-blau .op-langswitch__toggle { color: #fff; }
.op-theme-blau .op-langswitch__toggle:hover,
.op-theme-blau .op-langswitch__toggle:focus-visible { background: rgba(255,255,255,.14); }

/* Hero-Band → blau, helle Schrift */
.op-theme-blau .op-detail-hero { background: var(--op-blau); }
.op-theme-blau .op-detail-hero h1 { color: #fff; }
.op-theme-blau .op-detail-hero .uk-text-lead,
.op-theme-blau .op-detail-hero .op-breadcrumb,
.op-theme-blau .op-detail-hero .op-breadcrumb a { color: var(--op-gelb); }
.op-theme-blau .op-detail-hero::before { color: rgba(237,244,137,.5); }   /* Punktraster gelb */
.op-theme-blau .op-detail-hero::after { border-color: rgba(255,255,255,.10); } /* Ring hell */

/* Cards → blau, helle Schrift, gelbe Akzente */
.op-theme-blau .op-scard { background: var(--op-blau); border-color: var(--op-blau); }
.op-theme-blau .op-scard:hover,
.op-theme-blau .op-scard:focus-visible { outline-color: var(--op-gelb); }
.op-theme-blau .op-scard__img { background-color: #2a3566; border-bottom-color: rgba(255,255,255,.12); }
.op-theme-blau .op-scard__title { color: #fff; }
.op-theme-blau .op-scard__cat { color: var(--op-gelb); }
.op-theme-blau .op-scard__sub { color: rgba(255,255,255,.82); opacity: 1; }
.op-theme-blau .op-scard__addr { color: var(--op-gelb); }
.op-theme-blau .op-scard__dot { background: var(--op-gelb) !important; }

/* Detailseite: Inhalts- & Sidebar-Boxen → blau */
.op-theme-blau .op-content-box,
.op-theme-blau .op-side-box { background: var(--op-blau); color: #fff; }
.op-theme-blau .op-content-box a,
.op-theme-blau .op-content-box .op-quelle-head,
.op-theme-blau .op-side-box__date,
.op-theme-blau .op-side-box a,
.op-theme-blau .op-directions { color: var(--op-gelb); }
.op-theme-blau .op-content-box a:hover,
.op-theme-blau .op-side-box a:hover { color: #fff; }

/* Gelbes „Art"-Label auf blauem Grund */
.op-kategorie--gelb { background: var(--op-gelb); color: var(--op-blau); }

/* =========================================================================
   18. REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}