erster brauchbarer stand.
This commit is contained in:
maik
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user