erster brauchbarer stand.
This commit is contained in:
maik
@@ -0,0 +1,118 @@
|
||||
/* =========================================================================
|
||||
ABC Favorit – lokal gehostet (DSGVO: keine Third-Party-Font-Requests)
|
||||
Dateien: /static/fonts/favorit/ → ausgeliefert unter /fonts/favorit/
|
||||
Pfade relativ zur gebundelten CSS (/css/…) ⇒ funktioniert auch unter
|
||||
Subpfad-baseURL.
|
||||
========================================================================= */
|
||||
|
||||
/* --- Light 300 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Light.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Light.woff") format("woff");
|
||||
font-weight: 300; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-LightItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-LightItalic.woff") format("woff");
|
||||
font-weight: 300; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Book 350 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Book.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Book.woff") format("woff");
|
||||
font-weight: 350; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-BookItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-BookItalic.woff") format("woff");
|
||||
font-weight: 350; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Regular 400 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Regular.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Regular.woff") format("woff");
|
||||
font-weight: 400; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-RegularItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-RegularItalic.woff") format("woff");
|
||||
font-weight: 400; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Medium 500 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Medium.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Medium.woff") format("woff");
|
||||
font-weight: 500; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-MediumItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-MediumItalic.woff") format("woff");
|
||||
font-weight: 500; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Bold 700 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Bold.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Bold.woff") format("woff");
|
||||
font-weight: 700; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-BoldItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-BoldItalic.woff") format("woff");
|
||||
font-weight: 700; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Extrabold 800 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Extrabold.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Extrabold.woff") format("woff");
|
||||
font-weight: 800; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-ExtraboldItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-ExtraboldItalic.woff") format("woff");
|
||||
font-weight: 800; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Black 900 --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Black.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Black.woff") format("woff");
|
||||
font-weight: 900; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-BlackItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-BlackItalic.woff") format("woff");
|
||||
font-weight: 900; font-style: italic; font-display: swap;
|
||||
}
|
||||
|
||||
/* --- Ultra 950 (schwerster Schnitt) --- */
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-Ultra.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-Ultra.woff") format("woff");
|
||||
font-weight: 950; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("../fonts/favorit/ABCFavorit-UltraItalic.woff2") format("woff2"),
|
||||
url("../fonts/favorit/ABCFavorit-UltraItalic.woff") format("woff");
|
||||
font-weight: 950; font-style: italic; font-display: swap;
|
||||
}
|
||||
@@ -0,0 +1,832 @@
|
||||
/* =========================================================================
|
||||
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; }
|
||||
|
||||
/* =========================================================================
|
||||
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: var(--op-papier);
|
||||
z-index: 0; /* unter der Sticky-Navbar halten */
|
||||
}
|
||||
.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 { 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; }
|
||||
|
||||
/* =========================================================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/* =========================================================================
|
||||
OP·Karte – Leaflet + OpenStreetMap
|
||||
- farbige Kreis-Marker je Kategorie, Clustering (markercluster)
|
||||
- Kategorie-Filter (Checkboxen) + Textsuche, synchron mit der Card-Liste
|
||||
- Klick auf Card öffnet den zugehörigen Marker
|
||||
Daten kommen aus <script type="application/json" id="op-map-data">.
|
||||
========================================================================= */
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function init() {
|
||||
var el = document.getElementById("op-map");
|
||||
if (!el || typeof L === "undefined") return;
|
||||
var dataNode = document.getElementById("op-map-data");
|
||||
if (!dataNode) return;
|
||||
|
||||
var payload = JSON.parse(dataNode.textContent || "{}");
|
||||
var places = payload.places || [];
|
||||
var colors = payload.colors || {};
|
||||
var defaultColor = payload.defaultColor || "#1e2758";
|
||||
var tileUrl = payload.tileUrl || "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||
var attribution = payload.attribution ||
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende';
|
||||
|
||||
var map = L.map(el, { scrollWheelZoom: false });
|
||||
L.tileLayer(tileUrl, { maxZoom: 19, attribution: attribution }).addTo(map);
|
||||
map.on("focus", function () { map.scrollWheelZoom.enable(); });
|
||||
map.on("blur", function () { map.scrollWheelZoom.disable(); });
|
||||
|
||||
var useCluster = places.length > 1 && typeof L.markerClusterGroup === "function";
|
||||
var group = useCluster
|
||||
? L.markerClusterGroup({ maxClusterRadius: 45, showCoverageOnHover: false })
|
||||
: L.featureGroup();
|
||||
map.addLayer(group);
|
||||
|
||||
var byUrl = {};
|
||||
var records = [];
|
||||
|
||||
places.forEach(function (p) {
|
||||
if (typeof p.lat !== "number" || typeof p.lng !== "number") return;
|
||||
var cat = (p.categories && p.categories[0]) || "";
|
||||
var color = colors[cat] || defaultColor;
|
||||
var marker = L.marker([p.lat, p.lng], {
|
||||
icon: pinIcon(color),
|
||||
riseOnHover: true,
|
||||
keyboard: true,
|
||||
title: p.title, // nativer Browser-Tooltip / a11y
|
||||
alt: "Schauplatz: " + p.title
|
||||
});
|
||||
// Popup ohne autoPan, damit die Karte beim Hover nicht springt
|
||||
marker.bindPopup(popupHtml(p, cat, color), { autoPan: false, closeButton: true, minWidth: 250, maxWidth: 250 });
|
||||
// Beim Drüberfahren (Desktop) öffnet sich die Kurzinfo; Tap/Klick ebenso
|
||||
marker.on("mouseover", function () { marker.openPopup(); });
|
||||
var rec = { p: p, marker: marker, cats: p.categories || [], text: (p.title + " " + (p.subtitle || "") + " " + (p.address || "")).toLowerCase() };
|
||||
records.push(rec);
|
||||
if (p.url) byUrl[p.url] = rec;
|
||||
});
|
||||
|
||||
var allBounds = records.length ? L.latLngBounds(records.map(function (r) { return r.marker.getLatLng(); })) : null;
|
||||
|
||||
// --- Filter-Status ---
|
||||
var activeCats = null; // null = alle
|
||||
var query = "";
|
||||
|
||||
function visible(rec) {
|
||||
if (query && rec.text.indexOf(query) === -1) return false;
|
||||
if (activeCats) {
|
||||
var ok = rec.cats.some(function (c) { return activeCats[c]; });
|
||||
if (!ok) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function apply() {
|
||||
group.clearLayers();
|
||||
var shown = 0, bounds = L.latLngBounds([]);
|
||||
records.forEach(function (rec) {
|
||||
var v = visible(rec);
|
||||
if (v) { group.addLayer(rec.marker); shown++; bounds.extend(rec.marker.getLatLng()); }
|
||||
});
|
||||
// Cards synchronisieren
|
||||
cards.forEach(function (card) {
|
||||
var url = card.getAttribute("data-url");
|
||||
var rec = url && byUrl[url];
|
||||
var show;
|
||||
if (rec) show = visible(rec);
|
||||
else {
|
||||
// Cards ohne Koordinaten: nur Textsuche greift
|
||||
var t = (card.getAttribute("data-text") || "").toLowerCase();
|
||||
show = !query || t.indexOf(query) !== -1;
|
||||
}
|
||||
card.classList.toggle("is--hidden", !show);
|
||||
});
|
||||
var countCards = cards.filter(function (c) { return !c.classList.contains("is--hidden"); }).length;
|
||||
if (countEl) countEl.textContent = countCards;
|
||||
if (bounds.isValid()) map.fitBounds(bounds.pad(0.15));
|
||||
else if (allBounds) map.fitBounds(allBounds.pad(0.15));
|
||||
}
|
||||
|
||||
// --- DOM-Hooks ---
|
||||
var cards = Array.prototype.slice.call(document.querySelectorAll("[data-op-card]"));
|
||||
var countEl = document.querySelector("[data-op-count]");
|
||||
var searchEl = document.querySelector("[data-op-search]");
|
||||
var filterEl = document.querySelector("[data-op-map-filter]");
|
||||
|
||||
if (filterEl) {
|
||||
var stateEl = document.querySelector("[data-op-filter-state]");
|
||||
var wordAll = (stateEl && stateEl.getAttribute("data-word-all")) || "alle";
|
||||
var wordOf = (stateEl && stateEl.getAttribute("data-word-of")) || "von";
|
||||
var updateState = function () {
|
||||
if (!stateEl) return;
|
||||
var boxes = filterEl.querySelectorAll("input[type=checkbox]");
|
||||
var total = boxes.length, on = 0;
|
||||
boxes.forEach(function (cb) { if (cb.checked) on++; });
|
||||
stateEl.textContent = on === total ? "· " + wordAll : "· " + on + " " + wordOf + " " + total;
|
||||
};
|
||||
var updateCats = function () {
|
||||
var boxes = filterEl.querySelectorAll("input[type=checkbox]");
|
||||
activeCats = {};
|
||||
var anyUnchecked = false;
|
||||
boxes.forEach(function (cb) { activeCats[cb.value] = cb.checked; if (!cb.checked) anyUnchecked = true; });
|
||||
if (!anyUnchecked) activeCats = null; // alle aktiv → kein Filter
|
||||
updateState();
|
||||
apply();
|
||||
};
|
||||
filterEl.addEventListener("change", updateCats);
|
||||
updateState(); // Anfangszustand im eingeklappten Filter anzeigen
|
||||
|
||||
// Schnellauswahl: alle auswählen / abwählen
|
||||
var setAll = function (state) {
|
||||
filterEl.querySelectorAll("input[type=checkbox]").forEach(function (cb) { cb.checked = state; });
|
||||
updateCats();
|
||||
};
|
||||
var btnAll = document.querySelector("[data-op-filter-all]");
|
||||
var btnNone = document.querySelector("[data-op-filter-none]");
|
||||
if (btnAll) btnAll.addEventListener("click", function () { setAll(true); });
|
||||
if (btnNone) btnNone.addEventListener("click", function () { setAll(false); });
|
||||
}
|
||||
if (searchEl) {
|
||||
var deb;
|
||||
searchEl.addEventListener("input", function () {
|
||||
clearTimeout(deb);
|
||||
deb = setTimeout(function () { query = searchEl.value.trim().toLowerCase(); apply(); }, 150);
|
||||
});
|
||||
}
|
||||
|
||||
// Cards sind normale Links → Klick führt direkt zur Detailseite.
|
||||
// (Die Verortung passiert über die Marker/Popups auf der Karte.)
|
||||
|
||||
// Vorbelegung aus URL (?q=…), z.B. von der Kopf-Suche
|
||||
try {
|
||||
var q0 = new URLSearchParams(location.search).get("q");
|
||||
if (q0) { query = q0.trim().toLowerCase(); if (searchEl) searchEl.value = q0; }
|
||||
} catch (e) {}
|
||||
|
||||
// Erstanzeige (apply() befüllt die Layer-Gruppe und setzt den Ausschnitt)
|
||||
if (!records.length) map.setView([50.9, 11.6], 6);
|
||||
apply();
|
||||
}
|
||||
|
||||
function pinIcon(color) {
|
||||
var svg =
|
||||
'<svg class="op-pin" width="30" height="42" viewBox="0 0 30 42" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
|
||||
'<path d="M15 41 C15 41 3 24 3 14 A12 12 0 1 1 27 14 C27 24 15 41 15 41 Z" fill="' + color + '" stroke="#ffffff" stroke-width="2.5"/>' +
|
||||
'<circle cx="15" cy="14" r="5" fill="#ffffff"/>' +
|
||||
'</svg>';
|
||||
return L.divIcon({
|
||||
html: svg,
|
||||
className: "op-pinwrap",
|
||||
iconSize: [30, 42],
|
||||
iconAnchor: [15, 41],
|
||||
popupAnchor: [0, -36]
|
||||
});
|
||||
}
|
||||
|
||||
function popupHtml(p, cat, color) {
|
||||
var tag = p.url ? "a" : "div";
|
||||
var href = p.url ? ' href="' + p.url + '"' : "";
|
||||
var h = "<" + tag + ' class="op-popup"' + href + ">";
|
||||
if (p.img) h += '<span class="op-popup__img" style="background-image:url(\'' + p.img + '\')"></span>';
|
||||
h += '<span class="op-popup__body">';
|
||||
h += '<span class="op-popup__title">' + esc(p.title) + "</span>";
|
||||
var meta = p.address || p.subtitle || "";
|
||||
if (meta) h += '<span class="op-popup__addr">' + esc(meta) + "</span>";
|
||||
h += "</span></" + tag + ">";
|
||||
return h;
|
||||
}
|
||||
function esc(s) {
|
||||
return String(s == null ? "" : s).replace(/&/g, "&").replace(/</g, "<")
|
||||
.replace(/>/g, ">").replace(/"/g, """);
|
||||
}
|
||||
|
||||
if (document.readyState !== "loading") init();
|
||||
else document.addEventListener("DOMContentLoaded", init);
|
||||
})();
|
||||
Reference in New Issue
Block a user