/* ═══════════════════════════════════════════════════════════════
GOTCHA (Brush-Script) — nur für Überschriften/Kacheln.
Dateien liegen unter /wwapp/fonts/. Eingebunden 27.08.2026.
Der Zählpixel aus dem MyFonts-Kit (@import hello.myfonts.net)
wurde bewusst NICHT übernommen: Er sendet bei jedem Aufruf die
IP-Adresse der Nutzer an MyFonts (USA) — einwilligungspflichtig
und im Widerspruch zur Datenschutzerklärung. Die Schrift
funktioniert ohne den Zähler vollständig.
═══════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Gotcha';
src: url('fonts/gotcha-regular.woff2') format('woff2'),
url('fonts/gotcha-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ════════════════════════════════════════════════════════════════
STYLEGUIDE „Erlebniswelten Westerwald" 2020
Westerwald Touristik-Service – Multi-Page App
════════════════════════════════════════════════════════════════ */
:root {
--gelb: #FFED00;
--hellgruen-p: #289B38;
--dunkelgruen: #00663A;
--hellgruen-s: #88C340;
--grau-dk: #333333;
--grau-md: #6B6B6B;
--grau-lt: #E5E5E5;
--weiss: #FFFFFF;
--creme: #FAFAF6;
--rot: #C8262A;
--orange: #E8861F;
--blau: #0277BD;
--font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
/* Nur Überschriften/Kacheln — NIE Fließtext (27.08.2026) */
--font-display: 'Gotcha', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;
-webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
font-family: var(--font); font-weight: 400;
font-size: 17px; line-height: 1.55;
color: var(--grau-dk);
background: var(--weiss);
-webkit-font-smoothing: antialiased;
/* Runde 46 (07.09.2026): "overflow-x: hidden" allein zwingt den Browser
per Spec dazu, die eigentlich "visible" gelassene Y-Achse zu "auto"
umzurechnen (CSS Overflow Level 3: ist eine Achse nicht "visible" und
die andere schon, wird "visible" zu "auto"). body wurde dadurch
unbeabsichtigt zu einem eigenen Scroll-Container statt html -- genau
die Art Vorfahren-Eigenschaft, die position:sticky zuverlaessig
bricht (hier: .app-header). Auf einem statischen Desktop-/Emulations-
Viewport faellt das nicht auf, auf einem echten Geraet mit sich
aendernder sichtbarer Viewport-Hoehe (Statusleiste/Adressleiste,
relevant wegen .app{min-height:100dvh}) schon -- gemeldet als
"Header/Footer beim Scrollen nicht mehr fixiert", live nach
Neuinstallation bestaetigt. "overflow-x: clip" erzielt denselben
Effekt (kein horizontales Scrollen/Scrollbalken) OHNE diese
Spec-Kopplung -- html bleibt der alleinige Scroll-Container. */
overflow-x: clip;
}
button { font-family: var(--font); cursor: pointer; background: none; border: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* APP CONTAINER */
.app {
width: 100%; max-width: 480px; margin: 0 auto;
background: var(--weiss);
display: flex; flex-direction: column;
min-height: 100vh; min-height: 100dvh;
}
.app-header {
background: var(--weiss);
flex-shrink: 0;
cursor: pointer;
/* HEADER ist immer oben fixiert (sticky), egal welche Seite */
position: sticky;
top: 0;
/* Fund beim Handy-Test (05.09.2026, Kartenseiten-Runde): mit 60 lag der
Header UNTER Leaflets eigenen Ebenen/Steuerelementen (z-index bis 1000,
siehe .sticky-region weiter unten -- dieselbe Ursache, die dort schon
einmal behoben wurde, hier aber beim Header vergessen). Reicht die
Karte beim Scrollen weit genug (z.B. durch ein offenes Info-Panel) an
den oberen Rand heran, konnte sie den Header sichtbar ueberdecken --
"Streifen Karte ueber der Leiste". 1100 liegt sicher darueber, wie bei
.sticky-region; beide ueberlappen sich nie, die Reihenfolge zwischen
ihnen spielt also keine Rolle. Gilt fuer ALLE Seiten (Header ist
ueberall gleich), nicht nur Kartenseiten. */
z-index: 1100;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.app-header img { width: 100%; height: auto; display: block; }
/* Design-Vereinheitlichung 05.09.2026: Footer ist jetzt immer fixiert
(siehe footer{} weiter unten) und beansprucht keinen Platz mehr im
Fluss. Normale Seiten reservieren seine Hoehe deshalb hier unten als
Padding, damit der letzte Inhalt nicht darunter verschwindet. Auf
Kartenseiten macht das stattdessen .karte-wrap/.osm-karte selbst
(eigene calc(100vh...)-Hoehe, siehe dort) -- hier deshalb ausgenommen,
sonst wuerde die Fusszeilen-Hoehe doppelt abgezogen.
FUND (Fehler auf der Etappen-Uebersichtskarte, 06.09.2026): .karte-
vollflaeche gehoerte bis hierher mit zur Ausnahme, kommt in app.js aber
NIE allein vor -- immer zusammen mit .listen-karte-map-wrap UND einem
inline `flex:1 1 auto` (renderTourenKarte/renderPoiKarte/Suche-Karte).
Bei flex-basis:auto (Default) ist die eigene calc(...)-Hoehe dort nur
der STARTWERT; flex-grow:1 zieht das Element danach auf die volle
Resthoehe von .app-main -- die eigene Hoehenformel (inkl. --footer-h,
siehe dort) greift also gar nicht, weil sie von flex-grow ueberschrieben
wird. War hier trotzdem .app-main{padding-bottom:0} gesetzt, reservierte
NICHTS mehr die Fusszeilenhoehe -- die Karte (und mit ihr .karte-info-
panel, bottom:0) reichte bis exakt zum unteren Rand, sprich HINTER den
Footer. Behoben: .karte-vollflaeche ist aus dieser Ausnahme raus, .app-
main behaelt sein normales padding-bottom -- genau das begrenzt jetzt
den Raum, den flex-grow der Karte zuteilt. */
.app-main { flex: 1; display: flex; flex-direction: column; padding-bottom: var(--footer-h, 0px); }
.app-main:has(.karte-wrap),
.app-main:has(.osm-karte-wrap) { padding-bottom: 0; }
/* Reservierter Streifen unter jeder Karte fuer den POI-Info-Kasten
(Vorgabe 08/2026). Auf kleinen Handys etwas knapper, damit die Karte
dort nicht zu stark schrumpft. */
:root { --poi-panel-reserve: 200px; }
@media (max-width: 380px) { :root { --poi-panel-reserve: 180px; } }
@media (min-width: 768px) { :root { --poi-panel-reserve: 170px; } }
/* Rahmen um JEDE Karte (Nacharbeit 04.09.2026, achte Runde): einfacher
1px hellgrauer Rahmen statt des bisherigen doppelten CI-Rahmens (5px
helles Grün innen + 4px dunkles Grün als aeusserer box-shadow-Ring).
Der seitliche Abstand blieb bewusst stehen (schuetzte vorher vor dem
4px-Ausbluten des Rings, stoert als schmale Luft aber auch beim
duennen Rahmen nicht). box-sizing sorgt dafuer, dass der Rahmen die
Kartenhoehe nicht vergroessert. */
.karte-vollflaeche,
.osm-karte,
.karte-wrap {
border: 1px solid #D5D5D5;
background: var(--weiss);
box-sizing: border-box;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 0;
/* Fund beim Live-Test (siebte Runde, 04.09.2026): ohne eigene
Höhenvorgabe blieb um die Karte viel Leerraum -- .karte-leaflet
(Leaflet-Container) hat selbst keine Höhe, die Karte fuellte also
nur so viel Platz, wie ihr Inhalt zufaellig brauchte. Jetzt fuellt
sie die restliche Viewport-Hoehe nach Header und .sticky-region
(--header-h/--sticky-h werden per JS gemessen, measureHeaderHeight()/
measureStickyRegionHeight() in app.js). 100vh zuerst als Rueckfall,
100dvh danach ueberschreibt es dort, wo verstanden (mobile
Adressleisten-Hoehe).
Korrektur (Kartenseiten-Fehler 1, 06.09.2026): Der Footer ist fixiert
und liegt ueber der Kartenunterkante -- --footer-h stand hier bisher
NICHT in der Hoehenformel, sondern nur als padding-bottom. Das
padding schob zwar den KARTENINHALT (Leaflet, 100% Hoehe) korrekt
nach oben, die Box selbst (border-box) reichte aber weiterhin bis zum
Fusszeilenrand -- darauf setzt absolut positionierter Nachwuchs wie
.karte-info-panel (bottom:0) auf und landete dadurch teils HINTER dem
Footer. Jetzt zieht --footer-h direkt von der Hoehe ab, kein Padding
mehr noetig: die Box selbst endet an der Fusszeilen-Oberkante, jeder
bottom:0-Nachwuchs darin automatisch mit. */
height: calc(100vh - var(--header-h, 0px) - var(--sticky-h, 0px) - var(--footer-h, 0px));
height: calc(100dvh - var(--header-h, 0px) - var(--sticky-h, 0px) - var(--footer-h, 0px));
min-height: 260px;
}
.karte-leaflet { width: 100%; height: 100%; }
/* Der Ring braucht auch oben/unten Luft, sonst überlappt er die
Trefferzeile bzw. den Panel-Streifen. */
.karte-vollflaeche { margin-top: 4px; }
/* Fest reservierter Streifen unterhalb jeder Karte. Er ist immer da —
dadurch klappt der POI-Info-Kasten vollstaendig sichtbar auf, ohne dass
gescrollt werden muss und ohne dass die Karte sich verschiebt. */
/* Das Karten-Div fuellt seinen Rahmen immer vollstaendig. height:100%
greift dort nicht, weil der Rahmen seine Hoehe nur aus flex-grow
bezieht — deshalb absolute Fuellung (Fix 14.08.2026). */
.listen-karte-map-wrap { position: relative; }
.listen-karte-map-wrap > .listen-karte-map {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: auto; height: auto;
}
/* ══════════════════════════════════════════════════════════════
BILD-SPLASH (löst das Eichhörnchen-Intro ab, sechste Runde 04.09.2026)
══════════════════════════════════════════════════════════════ */
#eichhoernchen-overlay {
position: fixed; inset: 0;
background: var(--weiss);
z-index: 9000;
/* Wird per JS-Klasse "weg" entfernt, auf festem Zeitplan (index.html,
inline) -- unabhaengig vom tatsaechlichen Ladezustand. */
transition: opacity 0.4s ease;
}
#eichhoernchen-overlay.weg {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* bilder/startbildschirm.jpg ist 667×1024 -- hochformatig wie ein
Handybildschirm, deshalb randfüllend per object-fit:cover. Waere die
Bilddatei quer/quadratisch, wuerde stattdessen object-fit:contain auf
weissem Grund besser passen (kein Beschnitt, aber Rand sichtbar) --
dieser Fall liegt hier nicht vor. */
#splash-bild {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
/* Schreib-Effekt "Hui Wäller? Allemol!" im oberen (blauen) Himmelbereich
des Bilds (06.09.2026, Vektorpfade aus splash-schrift-pfade.js). Groesse
der einzelnen Zeilen kommt komplett per JS (getBBox()/getTotalLength(),
siehe index.html) -- hier nur Position, Zeilenabstand und Strich-Optik. */
#splash-schrift-wrap {
position: absolute;
top: 8%;
left: 0; right: 0;
display: flex;
flex-direction: column;
align-items: center; /* jede Zeile fuer sich zentriert, nicht linksbuendig */
gap: 30px; /* deutlich mehr als eine normale Zeilenhoehe, wirkt licht */
pointer-events: none;
}
.splash-schrift-svg {
display: block;
overflow: visible;
}
.splash-schrift-pfad {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
visibility: hidden; /* bis JS d/dasharray gesetzt hat -- kein Blitz-Aufblitzen */
}
.splash-schrift-pfad.sichtbar {
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
#eichhoernchen-overlay { transition: none; }
.splash-schrift-pfad { transition: none !important; }
}
/* ══════════════════════════════════════════════════════════════
COOKIE / DATENSCHUTZ-OVERLAY
══════════════════════════════════════════════════════════════ */
#cookie-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
z-index: 8000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
#cookie-box {
background: var(--weiss);
max-width: 440px; width: 100%;
padding: 28px 24px;
border-top: 6px solid var(--hellgruen-s);
max-height: 88vh; overflow-y: auto;
}
#cookie-box h2 {
font-family: var(--font); font-weight: 700;
font-size: 22px; color: var(--dunkelgruen);
margin-bottom: 12px;
}
#cookie-box p {
font-family: var(--font); font-weight: 400;
font-size: 15px; color: var(--grau-dk);
line-height: 1.55; margin-bottom: 12px;
}
#cookie-box a {
color: var(--hellgruen-p); text-decoration: underline; cursor: pointer;
}
#cookie-akzeptieren {
background: var(--dunkelgruen); color: var(--weiss);
font-family: var(--font); font-weight: 700;
font-size: 16px; letter-spacing: 0.5px;
padding: 14px 24px; text-transform: uppercase;
border: 2px solid var(--dunkelgruen);
cursor: pointer; transition: all .15s;
width: 100%; margin-top: 8px;
}
#cookie-akzeptieren:hover:not(:disabled) { background: var(--hellgruen-p); border-color: var(--hellgruen-p); }
#cookie-akzeptieren:disabled {
background: var(--grau-lt); color: var(--grau-md);
border-color: var(--grau-lt);
cursor: not-allowed;
}
/* Checkbox-Block — muss aktiv angehakt werden, damit der Zustimmen-Button aktiv wird */
#cookie-checkbox-label {
display: flex; align-items: flex-start; gap: 10px;
font-family: var(--font); font-size: 14px; color: var(--grau-dk);
line-height: 1.5;
padding: 12px 14px;
background: var(--creme);
border: 1px solid var(--grau-lt);
border-radius: 6px;
margin-top: 8px; margin-bottom: 14px;
cursor: pointer;
}
#cookie-checkbox-label:hover { background: #fff; border-color: var(--hellgruen-s); }
#cookie-checkbox {
flex: 0 0 auto;
width: 22px; height: 22px;
margin-top: 1px;
accent-color: var(--dunkelgruen);
cursor: pointer;
}
/* Aufzählung im Cookie-Box */
#cookie-text ul {
margin: 8px 0 12px 0;
padding-left: 22px;
font-family: var(--font); font-size: 14px; color: var(--grau-dk);
line-height: 1.55;
}
#cookie-text ul li { margin-bottom: 6px; }
/* Ablehnen-Button (sekundär, gleichwertig sichtbar) */
#cookie-ablehnen {
background: transparent; color: var(--grau-dk);
font-family: var(--font); font-weight: 700;
font-size: 14px; letter-spacing: 0.3px;
padding: 10px 16px;
border: 1px solid var(--grau-lt);
cursor: pointer; transition: all .15s;
width: 100%; margin-top: 8px;
}
#cookie-ablehnen:hover { background: var(--grau-lt); }
/* Ablehnungs-Ansicht (wird angezeigt, wenn der Nutzer „Nicht zustimmen" wählt) */
#cookie-ablehnung p {
font-family: var(--font); font-size: 15px; color: var(--grau-dk);
line-height: 1.55; margin-bottom: 12px;
}
#cookie-ablehnung a {
color: var(--hellgruen-p); text-decoration: underline; cursor: pointer;
}
/* ══════════════════════════════════════════════════════════════
MODAL für Impressum / Datenschutz
══════════════════════════════════════════════════════════════ */
#modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
z-index: 8500;
display: none; align-items: center; justify-content: center;
padding: 20px;
}
#modal-overlay.aktiv { display: flex; }
#modal-box {
background: var(--weiss);
max-width: 500px; width: 100%;
max-height: 88vh; display: flex; flex-direction: column;
border-top: 6px solid var(--hellgruen-s);
}
#modal-titel {
font-family: var(--font); font-weight: 700;
font-size: 18px; color: var(--dunkelgruen);
padding: 18px 22px 12px;
border-bottom: 1px solid var(--grau-lt);
}
#modal-inhalt {
padding: 18px 22px;
overflow-y: auto;
font-family: var(--font); font-weight: 400;
font-size: 14px; color: var(--grau-dk); line-height: 1.6;
}
#modal-inhalt strong { color: var(--dunkelgruen); font-weight: 700; }
#modal-inhalt h3 {
font-size: 15px; color: var(--dunkelgruen);
margin: 14px 0 6px; font-weight: 700;
}
#modal-inhalt p { margin-bottom: 8px; }
#modal-inhalt a { color: var(--hellgruen-p); text-decoration: underline; }
#modal-schliessen {
background: var(--dunkelgruen); color: var(--weiss);
font-family: var(--font); font-weight: 700;
font-size: 14px; letter-spacing: 0.5px;
padding: 12px 20px; text-transform: uppercase;
border: none; cursor: pointer; transition: background .15s;
margin: 12px 22px 22px; align-self: stretch;
}
#modal-schliessen:hover { background: var(--hellgruen-p); }
/* ══════════════════════════════════════════════════════════════
INTRO BLOCK
══════════════════════════════════════════════════════════════ */
.section-intro {
text-align: center;
padding: 18px 20px 14px;
flex-shrink: 0;
}
.section-intro .gruss {
/* Vorgabe 05.09.2026 (Sichtpruefung): Seitentitel auf Kategorie-/
Listenseiten ("Wandern", "WesterwaldSteig" …) jetzt in der
Gotcha-Schrift statt fetter kursiver Systemschrift -- dunkelgruen,
zentriert (schon vorher ueber .section-intro{text-align:center}) und
~30px waren bereits korrekt, nur font-family/-style/-weight geaendert.
Betrifft NICHT die Startseite: dort ruft renderHome() intro() gar
nicht mehr auf (eigener Kopf .start-kopf), .home-page .section-intro
.gruss (falls doch mal erreicht) bleibt unten unveraendert. */
font-family: var(--font-display);
font-weight: 400; font-style: normal;
font-size: clamp(24px, 6.5vw, 30px);
color: var(--dunkelgruen);
line-height: 1.2;
margin-bottom: 8px;
letter-spacing: 0.3px;
}
body.barrierefrei:not(.home-page) .section-intro .gruss {
font-family: var(--font);
font-weight: 700;
font-style: normal;
}
.section-intro .untertitel {
font-family: var(--font); font-weight: 400;
font-size: clamp(15px, 4vw, 17px);
color: var(--grau-dk);
line-height: 1.5;
}
.section-intro .untertitel em {
font-family: var(--font); font-weight: 700; font-style: italic;
color: var(--hellgruen-s);
}
/* HOME-Animation: Hauptseite Hero-Animationen */
.home-page .gruss {
animation: gruss-zoom 1.0s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes gruss-zoom {
0% { opacity: 0; transform: scale(0.4); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1.0); }
}
/* Wellen-Animation: jeder Buchstabe wird einzeln auf-/ab bewegt */
/* Funktioniert global – nicht mehr auf Home-Page beschränkt */
.untertitel:has(.welle-text) {
display: inline-block;
}
.welle-text {
display: inline-block;
}
.welle-text span {
display: inline-block;
opacity: 0;
animation: welle-letter 1.4s ease forwards;
}
@keyframes welle-letter {
0% { opacity: 0; transform: translate(-10px, 6px); }
40% { opacity: 1; transform: translate(0, -5px); }
70% { transform: translate(0, 1px); }
100% { opacity: 1; transform: translate(0, 0); }
}
/* WASSERZEICHEN-HERO */
.hero-wm {
flex: 0 0 auto;
width: 100%;
padding: 4px 0;
display: flex; align-items: center; justify-content: center;
opacity: 0.32;
}
.hero-wm svg { width: 100%; max-width: 460px; height: auto; display: block; }
/* ════════════════════════════════════════════════════════════════
START-SEITE: 4 Hauptkategorien
════════════════════════════════════════════════════════════════ */
.kategorien {
/* Bodenabstand kommt jetzt komplett ueber .wochenend-section{margin-top}
(Vorgabe 06.09.2026: 48px bis "Am Wochenende"), deshalb hier auf 0. */
padding: 14px 16px 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px; flex-shrink: 0;
}
.kat {
background: var(--weiss);
border: 2px solid var(--dunkelgruen);
padding: 16px 12px 18px;
display: flex; flex-direction: column;
align-items: center; gap: 10px;
cursor: pointer; position: relative; overflow: hidden;
transition: all .2s ease; min-height: 160px;
}
.kat:hover { background: var(--dunkelgruen); }
.kat:hover .kat-icon svg { stroke: var(--weiss); }
.kat:hover .kat-icon svg circle[fill] { fill: var(--weiss); }
.kat:hover .kat-icon svg path[fill] { fill: var(--weiss); }
.kat:hover .kat-label { color: var(--weiss); }
.kat::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
background: var(--hellgruen-s);
}
.kat-label {
font-family: var(--font); font-weight: 700;
font-size: clamp(13px, 3.6vw, 16px);
color: var(--dunkelgruen);
text-transform: uppercase; letter-spacing: 0.3px;
line-height: 1.2; text-align: center; margin-top: 4px;
transition: color .2s; min-height: 38px;
display: flex; align-items: center; justify-content: center;
/* Lange Worte (z.B. "Veranstaltungen") muessen auf engen Smartphones
umbrechen koennen, sonst klebt der Text am Kachel-Rand. */
hyphens: auto; -webkit-hyphens: auto;
word-break: break-word;
overflow-wrap: anywhere;
padding: 0 2px;
}
.kat-icon {
width: 60px; height: 60px;
display: flex; align-items: center; justify-content: center;
margin-top: auto;
}
.kat-icon svg {
width: 100%; height: 100%; fill: none;
stroke: var(--dunkelgruen); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: stroke .2s;
}
/* ── Foto-Kacheln der Startseite (Vorlage bilder/startseite_v5.png,
Umbau 04.09.2026): Foto oben, weisse Leiste unten mit gruenem
Icon-Badge und Label. Betrifft nur Kacheln mit Bild (kachel() setzt
die Klasse automatisch, wenn ein bildBasis-Parameter uebergeben
wird) -- die Service-Buttons ("Gesundheit & Mobilität") sind seit
05.09.2026 ein eigenes Bauteil (.dienst-karte), nutzen .kat-foto gar
nicht mehr. ────────────── */
.kat.kat-foto {
padding: 0;
align-items: stretch;
gap: 0;
border-radius: 14px;
}
.kat.kat-foto::before { display: none; }
.kat.kat-foto:hover { background: var(--weiss); }
.kat.kat-foto:hover .kat-bild { filter: brightness(0.94); }
.kat-bild {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background: var(--grau-lt, #e6e3da); /* Platzhalterflaeche, falls das Bild noch laedt */
}
.kat-leiste {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 8px;
margin-top: auto;
}
/* Kompakter (Nacharbeit 04.09.2026, vierte/fuenfte Runde): 26px statt
34px, damit bei allen vier Kacheln mehr Platz fuer das Label neben dem
Badge bleibt -- Badge steht jetzt bei allen vieren nebeneinander, keine
Ausnahme mehr fuer die Unternehmensdatenbank-Kachel (siehe
.kat-hart-umbruch weiter unten). */
.kat-badge {
flex: 0 0 auto;
width: 26px; height: 26px;
border-radius: 7px;
background: var(--dunkelgruen);
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.kat-badge svg {
width: 15px; height: 15px;
fill: none; stroke: var(--weiss);
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Bewusster Bruch mit der GOTCHA-ZUWEISUNG weiter unten (.kat-label
{font-family:var(--font-display) !important}, 27.08.2026): Die
Vorlage startseite_v5.png zeigt fette serifenlose Schrift in der
schmalen Leiste, nicht die Script-Schrift -- und Gotcha hat laut
dortigem Kommentar ohnehin nur EINEN Schnitt ohne Fett. Deshalb hier
mit !important zurueck auf die Systemschrift, nur fuer .kat-foto. */
.kat.kat-foto .kat-label {
font-family: var(--font) !important;
font-weight: 700 !important;
text-align: left;
text-transform: none;
margin-top: 0;
min-height: 0;
min-width: 0;
justify-content: flex-start;
font-size: clamp(12px, 3.3vw, 15px);
/* Einheitliche Schriftgroesse fuer alle vier Kacheln (Nacharbeit
04.09.2026, zweite Runde): "Veranstaltungen" ist die Referenzgroesse.
hyphens:auto erlaubt den Umbruch am eingebauten -- ohne das lief
der Text bei 360-380px ueber den Kachelrand hinaus und wurde vom
overflow:hidden der Kachel abgeschnitten (Fund bei der Vorschau
04.09.2026, dritte Runde). Untergrenze auf 12px gesenkt (fuenfte
Runde, 04.09.2026): "Unternehmens-" hatte bei 360px trotz 26px-Badge
und -0.3px letter-spacing noch -1px Marge zum Kachelrand statt der
geforderten mindestens 3px. */
hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
overflow-wrap: anywhere;
/* Einheitlich auf allen vier Labels (Nacharbeit 04.09.2026, fuenfte
Runde): etwas engerer Zeichenabstand schafft zusaetzlichen Spielraum
fuer "Unternehmens-" neben dem Badge, ohne nur diese eine Kachel
abweichend zu behandeln. */
letter-spacing: -0.3px;
}
.kat.kat-foto:hover .kat-label { color: var(--dunkelgruen); }
/* Nur die Unternehmensdatenbank-Kachel: garantiert GENAU zwei Zeilen durch
den harten Trennstrich mit
im Label ("Unternehmens-
datenbank") --
hyphens/word-break aus, damit der Browser nicht zusaetzlich mitten im
Wort trennt und daraus drei Zeilen macht. Badge steht seit der vierten
Runde (04.09.2026) wieder wie bei den anderen drei Kacheln NEBEN dem
Label -- die kompaktere Leiste (28px-Badge, siehe oben) macht dafuer
genug Platz, die eigene Spalten-Variante von der dritten Runde ist
damit ueberfluessig und entfernt. */
.kat.kat-foto.kat-hart-umbruch .kat-label {
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* ════════════════════════════════════════════════════════════════
KATEGORIE-SEITE: Subkategorien (LINKSBÜNDIG)
════════════════════════════════════════════════════════════════ */
.subkategorien {
padding: 8px 16px 16px;
display: flex; flex-direction: column; gap: 10px;
flex-shrink: 0;
}
.subkat {
background: var(--weiss);
border: 2px solid var(--dunkelgruen);
padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
cursor: pointer; position: relative; overflow: hidden;
transition: all .2s ease;
text-align: left; /* LINKSBÜNDIG */
}
.subkat:hover { background: var(--dunkelgruen); }
.subkat:hover .subkat-label, .subkat:hover .subkat-meta { color: var(--weiss); }
.subkat:hover .subkat-icon svg { stroke: var(--weiss); }
.subkat:hover .subkat-icon svg circle[fill] { fill: var(--weiss); }
.subkat:hover .subkat-icon svg path[fill] { fill: var(--weiss); }
.subkat:hover .subkat-icon svg rect[fill] { fill: var(--weiss); }
.subkat:hover .subkat-pfeil { color: var(--weiss); }
.subkat::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
background: var(--hellgruen-s);
}
.subkat-icon {
width: 48px; height: 48px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
margin-left: 4px;
}
.subkat-icon svg {
width: 100%; height: 100%; fill: none;
stroke: var(--dunkelgruen); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: stroke .2s;
}
.subkat-text { flex: 1; min-width: 0; text-align: left; }
.subkat-label {
font-family: var(--font); font-weight: 700;
font-size: 16px; color: var(--dunkelgruen);
text-transform: uppercase; letter-spacing: 0.4px;
line-height: 1.2; transition: color .2s;
}
.subkat-meta {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
margin-top: 3px; line-height: 1.3;
transition: color .2s;
}
.subkat-pfeil {
font-family: var(--font); font-weight: 400;
font-size: 24px; color: var(--dunkelgruen);
flex-shrink: 0; transition: color .2s;
}
/* ── Foto-Kacheln Tourismus-Ast (kategorie/tourismus Ebene 2, sowie
liste/tourismus-wandern & liste/tourismus-radfahren Ebene 3): Optik wie
die Startseiten-Kacheln (.kat.kat-foto) -- Bild oben volle Kachelbreite
3:2 randlos, darunter weisse Leiste mit Label+Meta+Pfeil, 12px Ecken
rundum, leichter Schatten statt Rahmen, kein Icon. Andere Aeste
(Regionale Produkte, Service) bleiben bei .subkat oben.
Markup: subkatFoto() in app.js. Raster: .subkategorien-foto unten. ──── */
.subkat.subkat-foto {
padding: 0;
gap: 0;
flex-direction: column;
align-items: stretch;
border: none;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
transition: box-shadow .2s ease;
}
.subkat.subkat-foto::before { display: none; }
.subkat.subkat-foto:hover {
background: var(--weiss);
box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
.subkat.subkat-foto:hover .subkat-foto-bild { filter: brightness(0.94); }
.subkat.subkat-foto:hover .subkat-label { color: var(--dunkelgruen); }
.subkat.subkat-foto:hover .subkat-meta { color: var(--grau-md); }
.subkat.subkat-foto:hover .subkat-pfeil { color: var(--dunkelgruen); }
.subkat-foto-bild,
.subkat-foto-bild-leer {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
}
.subkat-foto-bild-leer {
background: #EAF4D9;
position: relative;
display: flex; align-items: center; justify-content: center;
}
/* Icon-Flaeche statt Foto (Regionale Produkte, solange KACHEL_BILDER dafuer
keinen Eintrag hat, s. subkatFoto()): Icon ca. 40% der Flaechenhoehe,
mittig, in Dunkelgruen -- gleicher Strichstil wie .subkat-icon svg. */
.subkat-foto-icon {
height: 40%;
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
}
.subkat-foto-icon svg {
width: 100%; height: 100%; fill: none;
stroke: var(--dunkelgruen); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.subkat-foto-leiste {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: var(--weiss);
padding: 10px 12px;
}
/* Bewusster Bruch mit der GOTCHA-ZUWEISUNG (.subkat-label{font-family:
var(--font-display) !important; font-size:clamp(22px,5.6vw,30px)
!important}, Sektion "EBENE II + III" weiter unten in dieser Datei):
Vorlage zeigt fette serifenlose Schrift in normaler Groesse, kein
Script -- gleiche Loesung wie schon bei .kat.kat-foto .kat-label. */
.subkat.subkat-foto .subkat-label {
font-family: var(--font) !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: none !important;
letter-spacing: normal;
line-height: 1.25;
}
.subkat.subkat-foto .subkat-meta {
font-size: 11px;
}
/* Zweierraster mobil (Ebene 2+3 des Tourismus-Asts, .subkategorien-foto
nur bei mitFoto gesetzt, s. app.js). Ungerade Anzahl: letzte Kachel
faellt automatisch in die linke Spalte der letzten Zeile, halbe Breite
-- kein Sonderfall noetig. Desktop: drei Spalten, s. desktop.css. */
.subkategorien.subkategorien-foto {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* ════════════════════════════════════════════════════════════════
LISTE / TOUREN (LINKSBÜNDIG)
════════════════════════════════════════════════════════════════ */
.liste {
padding: 8px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
flex-shrink: 0;
}
.eintrag {
background: var(--weiss);
border: 1.5px solid var(--grau-lt);
padding: 12px 14px;
cursor: pointer; transition: all .15s ease;
position: relative;
display: flex; align-items: flex-start; gap: 10px;
text-align: left; /* LINKSBÜNDIG */
}
.eintrag:hover {
border-color: var(--dunkelgruen);
background: #f8fbf5;
}
.eintrag::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--hellgruen-s);
}
.eintrag-text { flex: 1; min-width: 0; padding-left: 4px; text-align: left; }
.eintrag-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
line-height: 1.3; margin-bottom: 4px;
text-align: left;
}
.eintrag-meta {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
line-height: 1.4;
display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.eintrag-meta span {
display: inline-flex; align-items: center; gap: 4px;
}
.eintrag-meta strong {
font-weight: 700; color: var(--grau-dk);
}
.eintrag-ort {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
line-height: 1.4;
}
/* ════════════════════════════════════════════════════════════════
REGIONALER EINKAUFSFÜHRER — Einzelbild + Hofverkauf-Box
════════════════════════════════════════════════════════════════ */
.einkauf-bild-wrap {
margin: 4px 0 14px;
border-radius: 8px;
overflow: hidden;
line-height: 0;
}
.einkauf-bild {
display: block; width: 100%; height: auto;
}
.hofverkauf-box {
background: var(--creme);
border: 1.5px solid var(--grau-lt);
border-left: 4px solid var(--hellgruen-s);
border-radius: 4px;
padding: 12px 14px;
margin: 14px 0 4px;
}
.hofverkauf-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
margin-bottom: 6px;
}
.hofverkauf-box p {
font-size: 14px; line-height: 1.5; color: var(--grau-dk);
margin: 0;
}
.diff-leicht { color: var(--hellgruen-p); }
.diff-mittel { color: var(--orange); }
.diff-schwer { color: var(--rot); }
.eintrag-pfeil {
color: var(--dunkelgruen); font-size: 20px; flex-shrink: 0;
margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════
DETAIL-SEITE
════════════════════════════════════════════════════════════════ */
.detail-section {
padding: 14px 18px 16px;
flex-shrink: 0;
}
.detail-titel {
font-family: var(--font); font-weight: 700;
font-size: 19px; color: var(--dunkelgruen);
line-height: 1.25; margin-bottom: 12px;
}
/* TOP-AKTIONEN (GPX gut sichtbar oben) */
.top-aktionen {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 14px;
}
/* Schwierigkeit + GPX nebeneinander */
.diff-gpx-row {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 14px; align-items: center;
}
.diff-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--hellgruen-s);
color: var(--dunkelgruen);
font-family: var(--font); font-weight: 700;
font-size: 13px; text-transform: uppercase;
letter-spacing: 0.5px;
}
.diff-pill.diff-leicht-bg { background: #C8E6C9; color: #1B5E20; }
.diff-pill.diff-mittel-bg { background: #FFE0B2; color: #E65100; }
.diff-pill.diff-schwer-bg { background: #FFCDD2; color: #B71C1C; }
.stats-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px; margin-bottom: 16px;
}
.stat {
background: var(--creme);
padding: 10px 12px;
border-left: 3px solid var(--hellgruen-s);
}
.stat-label {
font-family: var(--font); font-weight: 700;
font-size: 11px; color: var(--grau-md);
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 2px;
}
.stat-wert {
font-family: var(--font); font-weight: 700;
font-size: 16px; color: var(--dunkelgruen);
}
/* Textformatierung fuer den Inhalt eines .detail-kasten (Runde 41,
07.09.2026): Klasse hiess urspruenglich ".dropdown-inhalt" (Inhalt
eines Auf-/Zuklapp-Dropdowns) -- die Auf-/Zuklapp-Mechanik (.dropdown/
.dropdown-header/.dropdown-pfeil/".offen") ist mit der Umstellung aller
dropdown()-Aufrufe auf statische, immer sichtbare .detail-kasten-Boxen
komplett entfallen. Der Name bleibt trotzdem stehen: initPinchZoom()
(app.js) sucht per findPinchTarget() gezielt nach dieser Klasse fuer
die Zwei-Finger-Zoom-Geste -- eine Umbenennung haette dort mitziehen
muessen, ohne dass fuer den Umbau selbst ein Vorteil dabei heraussprang. */
.dropdown-inhalt {
position: relative;
touch-action: pan-y;
font-family: var(--font); font-weight: 400;
font-size: 15px; color: var(--grau-dk);
line-height: 1.6;
text-align: left;
}
.dropdown-inhalt strong {
font-weight: 700; color: var(--dunkelgruen);
}
.dropdown-inhalt p { margin-bottom: 10px; }
.dropdown-inhalt p:last-child { margin-bottom: 0; }
.dropdown-inhalt a {
color: var(--hellgruen-p); text-decoration: underline;
word-break: break-word;
}
.dropdown-inhalt ul {
list-style: none; padding-left: 0;
}
.dropdown-inhalt ul li {
padding: 6px 0 6px 16px;
position: relative;
border-bottom: 1px solid var(--grau-lt);
}
.dropdown-inhalt ul li:last-child { border-bottom: none; }
.dropdown-inhalt ul li::before {
content: '›';
position: absolute; left: 4px; top: 6px;
color: var(--hellgruen-s); font-weight: 700;
}
/* BUTTONS */
.btn-action {
background: var(--dunkelgruen);
color: var(--weiss);
font-family: var(--font); font-weight: 700;
font-size: 13px; letter-spacing: 0.5px;
padding: 10px 16px;
text-transform: uppercase;
border: 2px solid var(--dunkelgruen);
cursor: pointer; transition: all .15s;
text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
}
.btn-action:hover { background: var(--hellgruen-p); border-color: var(--hellgruen-p); }
.btn-action.outline {
background: var(--weiss);
color: var(--dunkelgruen);
}
.btn-action.outline:hover { background: var(--dunkelgruen); color: var(--weiss); }
.btn-gpx {
background: var(--hellgruen-p); color: var(--weiss);
border-color: var(--hellgruen-p);
}
.btn-gpx:hover { background: var(--dunkelgruen); border-color: var(--dunkelgruen); }
/* NAV-BAR */
.nav-bar {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: var(--creme);
border-bottom: 1px solid var(--grau-lt);
flex-shrink: 0;
}
/* Textknopf statt gefuellter Button (Nacharbeit 04.09.2026) -- der
Hamburger links macht daraus schon eine klare Aktion, der massive
gruene Block rechts war daneben zu dominant. */
.nav-zurueck {
flex: 0 0 auto;
background: none;
color: var(--dunkelgruen);
border: none;
font-family: var(--font); font-weight: 700;
font-size: 13px;
padding: 8px 2px 8px 8px;
cursor: pointer; transition: color .15s;
display: inline-flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.nav-zurueck:hover { color: var(--hellgruen-p); text-decoration: underline; }
.nav-pfad {
font-family: var(--font); font-weight: 400;
/* Runde 41 (07.09.2026): EINE feste Groesse app-weit, unabhaengig von der
Textlaenge -- vorher gab es zusaetzlich in index.html eine
wrapper-abhaengige 17px-Regel (".sticky-region .nav-bar .nav-pfad"), die
nur griff, wenn navBar() zufaellig in ein .sticky-region-div eingepackt
war. Die meisten render*Detail()-Funktionen (z.B. renderUnterkunftDetail)
packen navBar() aber OHNE diesen Wrapper direkt in ziel.innerHTML, fielen
also auf die alte 13px-Basisregel zurueck -- daher "addacio"/"Alte
Dorfschmiede" (Detailseiten) sichtbar kleiner als "Gastronomie"
(Listentitel). Keine laengenabhaengige Formel, kein Shrink-Skript, nur
dieser eine verstreute Override. Jetzt vereinheitlicht, die
Override-Regel in index.html ist entfallen. */
font-size: 17px; color: var(--grau-md);
flex: 1 1 auto; min-width: 0;
/* Kopfzeilen-Vereinfachung (Block 9/10, 07.09.2026): navBar() zeigt nur
noch den aktuellen Namen, keinen Breadcrumb-Verlauf mehr -- bei
Platzmangel jetzt zweizeilig statt abgeschnitten (vorher white-space:
nowrap + ellipsis), NIEMALS eine kleinere Schrift. Linksbuendig direkt
neben dem Hamburger statt zentriert. */
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.25;
text-align: left;
}
.nav-pfad strong {
color: var(--dunkelgruen); font-weight: 700;
}
.spacer { flex: 1 1 auto; min-height: 8px; }
/* FOOTER */
/* Design-Vereinheitlichung 05.09.2026: immer am unteren Bildschirmrand
fixiert, auch auf Kartenseiten -- vorher lag er im normalen Fluss und
war dort erst nach dem Scrollen ans Seitenende sichtbar. Die Copyright-
Zeile ("© 2026 Wir Westerwälder gAöR") entfaellt ersatzlos (rechtlich
nicht noetig, Impressum bleibt verlinkt) -- der Footer ist dadurch
einzeilig. left:50%/translateX(-50%) haelt ihn auf die Breite von
.app zentriert (fixed ignoriert deren max-width sonst), Breite hier
mobil, Desktop-Buehnenbreite in desktop.css. Hoehe wird wie --header-h
per JS gemessen (measureFooterHeight(), app.js) und als --footer-h an
.karte-wrap/.osm-karte/.karte-vollflaeche sowie .app-main weitergereicht,
damit nichts dahinter verschwindet. */
footer {
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
background: var(--hellgruen-s);
color: var(--dunkelgruen);
padding: 6px 20px;
flex-shrink: 0;
z-index: 1100;
}
.footer-row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px 14px;
}
.footer-row a {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--dunkelgruen);
text-decoration: none; cursor: pointer;
}
.footer-row a:hover { text-decoration: underline; }
.footer-row .sep {
color: var(--dunkelgruen); opacity: 0.5;
font-weight: 400; font-size: 13px;
}
/* Genau eine Zeile bei 360-414px (Nacharbeit 04.09.2026): mit der
Basis-Schrift (13px, gap 8/14px) brach "Barrierefreiheit" in diesem
Bereich um. Schrift und Abstaende knapp genug verkleinert, dass die
fuenf Links durchgehend in eine Zeile passen (nachgemessen bei
360/375/390/414px). */
@media (max-width: 414px) {
.footer-row { gap: 4px 7px; }
.footer-row a, .footer-row .sep { font-size: 10.5px; }
}
/* HINWEIS */
.hinweis {
margin: 8px 16px;
padding: 10px 14px;
background: #fff8e1;
border-left: 4px solid var(--orange);
font-size: 13px; color: var(--grau-dk);
line-height: 1.5;
}
/* Daten-Liste mit Cookie-Crumbs Schutz vor Modal-Stacking */
body.modal-offen { overflow: hidden; }
/* RESPONSIVE */
@media (max-height: 700px) {
.section-intro { padding: 14px 18px 10px; }
.section-intro .gruss { font-size: 23px; margin-bottom: 6px; }
.section-intro .untertitel { font-size: 14px; }
.hero-wm { padding: 2px 0; opacity: 0.28; }
.kategorien { gap: 10px; padding: 8px 14px 12px; }
.kat { padding: 12px 10px 14px; min-height: 140px; }
.kat-label { font-size: 14px; min-height: 32px; }
.kat-icon { width: 50px; height: 50px; }
footer { padding: 6px 16px; }
.footer-row { gap: 6px 12px; }
.footer-row a, .footer-row .sep { font-size: 12px; }
}
@media (min-height: 900px) {
.section-intro { padding: 28px 20px 18px; }
.hero-wm { padding: 8px 0; }
.kat { min-height: 175px; }
.kat-icon { width: 70px; height: 70px; }
}
/* ════════════════════════════════════════════════════════════════
STICKY HEADER für Listen-Seiten (Wandern + Radfahren)
bleibt beim Scrollen oben kleben
════════════════════════════════════════════════════════════════ */
.sticky-region {
position: sticky;
/* Direkt unter dem Banner-Header andocken */
top: var(--header-h, 0px);
/* Leaflet-Steuerelemente liegen bei z-index 1000 (Fund beim
Live-Test, sechste Runde) -- mit 50 schob sich die Karte beim
Hochscrollen sichtbar UEBER die Leiste mit Hamburger und
Ebenen-Icons. 1100 liegt sicher darueber; der deckende weisse
Hintergrund unten verhindert zusaetzlich jedes Durchscheinen. */
z-index: 1100;
background: var(--weiss);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Im Sticky-Bereich kompaktere Darstellung */
.sticky-region .nav-bar { padding: 8px 14px; }
.sticky-region .section-intro { padding: 10px 16px 8px; }
/* Vorgabe 05.09.2026 (Sichtpruefung): kein kleinerer Sonderfall mehr fuer
den klebenden Bereich -- ca. 30px gilt jetzt auch hier, die Basisregel
(.section-intro .gruss, weiter oben) greift unveraendert durch. */
.sticky-region .section-intro .gruss { margin-bottom: 2px; }
.sticky-region .section-intro .untertitel { font-size: 12px; }
/* ════════════════════════════════════════════════════════════════
STICKY HEADER für DETAIL-Seiten (Wander-/Rad-Etappen)
Zurück-Button + Trail-Titel + Untertitel + Etappen-Titel +
Schwierigkeitspille bleiben beim Scrollen oben sichtbar
════════════════════════════════════════════════════════════════ */
.sticky-detail {
position: sticky;
/* Direkt unter dem Banner-Header andocken */
top: var(--header-h, 0px);
z-index: 50;
background: var(--weiss);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-bottom: 2px solid var(--hellgruen-s);
}
.sticky-detail .nav-bar { padding: 8px 14px; }
.sticky-detail .section-intro {
padding: 8px 16px 6px;
}
/* Vorgabe 05.09.2026 (Sichtpruefung): kein kleinerer Sonderfall mehr,
siehe .sticky-region .section-intro .gruss oben. */
.sticky-detail .section-intro .gruss {
margin-bottom: 2px;
}
.sticky-detail .section-intro .untertitel {
font-size: 12px;
line-height: 1.35;
}
.sticky-detail-titel {
padding: 0 16px 10px;
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
line-height: 1.3;
}
/* .termin-titel und die zugehoerige :has()-Vergroesserung der Breadcrumb
sind mit dem Rundumschlag vom 07.09.2026 entfallen: navBar() zeigt auf der
Veranstaltungs-Detailseite jetzt selbst den vollen Namen (siehe
renderTerminDetail(), app.js), die vormals separate Gotcha-Titelzeile
darunter wird ueber kopfZeigtSchonTitel() nie mehr gerendert. */
.sticky-detail .diff-gpx-row {
padding: 0 16px 10px;
margin-bottom: 0;
}
.sticky-detail .diff-pill {
padding: 5px 10px;
font-size: 11px;
}
/* Aktionsreihe Einzeltouren-Detailseite (renderRouteDetail, Nacharbeit
05.09.2026): bis zu drei gleich breite Felder -- Schwierigkeit (nicht
klickbar, Farbe wie im Tourenkasten), GPX, Routing. Eigene Klassen statt
.diff-gpx-row/.btn-action, die andere Detailseiten weiterhin nutzen. */
.dtl-knopfreihe {
display: flex;
gap: 8px;
padding: 0 16px 10px;
}
.dtl-knopf {
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 8px 6px;
font-family: var(--font); font-weight: 700;
font-size: 12.5px;
border-radius: 6px;
text-decoration: none;
cursor: pointer;
background: var(--weiss);
color: var(--dunkelgruen);
border: 2px solid var(--dunkelgruen);
}
a.dtl-knopf:hover, button.dtl-knopf:hover { background: var(--dunkelgruen); color: var(--weiss); }
.dtl-knopf.dtl-knopf-sw {
cursor: default;
border: none;
color: #1A1A1A;
}
.dtl-knopf.dtl-knopf-sw-leicht { background: #E4F1DC; }
.dtl-knopf.dtl-knopf-sw-mittel { background: #FBF3D5; }
.dtl-knopf.dtl-knopf-sw-schwer { background: #F8E1DE; }
/* Foto-Reihe Einzeltouren-Detailseite: bis zu drei Fotos nebeneinander
statt der Einzel-Vorschau .foto-vorschau-*. */
.dtl-foto-reihe {
display: flex;
gap: 6px;
padding: 0 4px;
margin: 4px 0 0;
}
.dtl-foto-btn {
flex: 1 1 0;
min-width: 0;
padding: 0;
border: none;
background: none;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
line-height: 0;
}
.dtl-foto-bild {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 10px;
}
.sticky-detail .btn-action {
padding: 6px 12px;
font-size: 12px;
}
/* Tour-in-Vorbereitung Hinweis-Karte */
.tour-vorbereitung {
background: linear-gradient(90deg, var(--gelb), var(--creme));
border-left: 4px solid var(--dunkelgruen);
padding: 10px 14px;
margin: 10px 0 4px;
font-family: var(--font); font-weight: 600;
font-size: 13px; color: var(--dunkelgruen);
display: flex; align-items: center; gap: 8px;
}
.tour-vorbereitung::before {
content: '⏳';
font-size: 18px;
}
.tourenkasten.in-vorbereitung {
opacity: 0.85;
}
.tourenkasten.in-vorbereitung .tk-titel::after {
content: ' · in Vorbereitung';
font-weight: 600;
color: var(--hellgruen-p);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ════════════════════════════════════════════════════════════════
TOURENKASTEN (Ebene 4: Einzeltouren-Listen Wandern/Radfahren)
Vorlage bilder/tourenkasten_farbig.png. Foto+Titel links (~70%),
Schwierigkeits-Flaeche mit Kennzahlen rechts (~30%), Karte komplett
anklickbar (button). Ersetzt die alte .eintrag-Zeile mit Icon.
Markup: baueTourenkasten()/tkFotoCheck() in app.js.
════════════════════════════════════════════════════════════════ */
.tourenkasten {
display: flex;
width: 100%;
background: var(--weiss);
border: none;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
cursor: pointer;
padding: 0;
text-align: left;
transition: box-shadow .15s ease;
}
.tourenkasten:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.18); }
/* Grosszuegigerer Abstand zwischen den Tourenkasten-Karten (20px statt
der allgemeinen .liste-Vorgabe 8px) -- ueber :has() auf die Listen mit
Tourenkasten beschraenkt, andere .liste-Typen (.eintrag) bleiben bei
8px. Desktop 24px, s. desktop.css. */
.liste:has(.tourenkasten) { gap: 20px; }
.tk-links {
flex: 0 0 70%;
width: 70%;
min-width: 0;
display: flex;
flex-direction: column;
}
.tk-foto-wrap {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #EAF4D9;
}
/* Bildnachweis-Overlay auf Tourenkasten-Karten (Etappen-/Wäller-Schätze-
Listen) -- Nacharbeit 08.09.2026, dritte Bildnachweis-Runde. Gleiches
Muster wie .foto-vorschau-zaehler, nur unten links statt unten rechts. */
.tk-foto-credit {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
color: var(--weiss);
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 10px;
max-width: calc(100% - 16px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tk-foto {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Nur hochformatige Fotos verfuegbar: unscharfe, vergroesserte Kopie als
Fuellung (::before, background wird per JS auf dasselbe Bild gesetzt),
das scharfe Foto mittig mit object-fit:contain davor. */
.tk-foto-wrap.hochkant::before {
content: '';
position: absolute; inset: 0;
background: inherit;
filter: blur(14px);
transform: scale(1.15);
}
.tk-foto-wrap.hochkant .tk-foto {
object-fit: contain;
position: relative;
z-index: 1;
}
.tk-textblock { padding: 10px 14px 12px; }
.tk-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
line-height: 1.3;
}
.tk-subtitel {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
margin-top: 3px; line-height: 1.35;
}
.tk-stats {
flex: 0 0 30%;
width: 30%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 6px;
text-align: center;
}
.tk-stats.tk-stats-leicht { background: #E4F1DC; }
.tk-stats.tk-stats-mittel { background: #FBF3D5; }
.tk-stats.tk-stats-schwer { background: #F8E1DE; }
.tk-stats.tk-stats-ohne { background: #F1F1F1; }
.tk-stat-zahl {
display: block;
font-family: var(--font); font-weight: 800;
font-size: 21px; color: #1A1A1A; line-height: 1.05;
/* FIX 06.09.2026 (Sichtpruefung, POI-Kasten): Kennzahlen wie "16,9" sind
immer kurz, aber .tk-stat-zahl traegt seit dieser Runde auch laengere
Wortlabel (Kategorie, z.B. "Restaurant", "Ferienwohnung") -- ein
einzelnes, zusammenhaengendes Wort hat ohne diese Regel keine
Umbruchstelle und ragte ueber die ~30%-Spalte hinaus. */
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
/* Betriebsart-Label in der Gastronomie-/Unterkuenfte-/Ausflugsziele-
Uebersichtsliste (bauePoiKasten()): eigene, kleinere Variante ohne den
erzwungenen Wort-Innen-Umbruch von .tk-stat-zahl -- der liess "Restaurant"
als "Restaura"/"nt" und "Bar/Kneipe" als "Bar/Knei"/"pe" mitten im Wort
abreissen (Fund 07.09.2026, Rundumschlag). Bricht jetzt nur noch an
Wortgrenzen bzw. nach dem Schraegstrich ("Bar" / "Kneipe"), bei genug
Platz passt "Restaurant" einzeilig. */
.tk-stat-zahl.tk-stat-typ {
font-size: 13px;
font-weight: 700;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
.tk-stat-einheit {
display: block;
font-family: var(--font); font-weight: 400;
font-size: 11px; color: #1A1A1A; margin-top: 1px;
}
.tk-stat-sw {
font-family: var(--font); font-weight: 800;
font-size: 13px; margin-top: 2px;
}
.tk-stats-leicht .tk-stat-sw { color: var(--dunkelgruen); }
.tk-stats-mittel .tk-stat-sw { color: #8A6A00; }
.tk-stats-schwer .tk-stat-sw { color: var(--rot); }
.tk-stats-ohne .tk-stat-sw { color: var(--grau-dk); }
/* Wäller-Schätze-Karte: rechte Kontakt-Flaeche (.tk-stats-kontakt/
.tk-stat-kontakt, Block 7 vom 07.09.2026) ist mit Runde 41 (07.09.2026)
wieder entfallen -- Kontaktdaten stehen jetzt nur noch auf der
Detailseite (renderWaellerSchatzDetail(), "Kontakt"-Kasten). Stattdessen
nimmt das Foto die volle Kartenbreite ein: .tk-links-voll ersetzt die
70%-Vorgabe von .tk-links nur bei dieser Karte (baueWaellerSchatzKasten()),
.tk-titel-gross vergroessert den Namen darunter, da jetzt die volle
Breite zur Verfuegung steht. */
.tk-links.tk-links-voll {
flex: 1 1 100%;
width: 100%;
}
.tk-titel.tk-titel-gross {
font-size: 19px;
}
/* ════════════════════════════════════════════════════════════════
EINKAUFSFÜHRER-KARTE (liste/regional-einkaufsfuehrer)
NEU 06.09.2026 (Nacharbeit, neunundzwanzigste Runde): ersetzt die
vorherige zweispaltige Karte mit Dropdown -- auf Nutzerwunsch stark
vereinfacht: einspaltig, kein Klickziel außer den einzelnen Zeilen/
Knöpfen selbst (s. baueEinkaufKasten()). "Details" führt auf die neue,
ebenfalls vereinfachte renderEinkaufDetail() (zwei statische Kästen
weiter unten in dieser Datei). Knopfreihe nutzt bewusst .dtl-knopf/
.dtl-knopfreihe (Referenzstil GPX/Navi bei den Einzeltouren) statt
.btn-action. ════════════════════════════════════════════════════ */
.einkauf-karte {
background: var(--weiss);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
padding: 14px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
}
/* Kartenhintergrund im Wechsel gruen/gelb (Vorgabe 07.09.2026) -- dieselben
Farbtoene wie Schwierigkeitsgrad "leicht"/"mittel" bei Wanderungen. */
.einkauf-karte.einkauf-karte-gruen { background: #E4F1DC; }
.einkauf-karte.einkauf-karte-gelb { background: #FBF3D5; }
.liste:has(.einkauf-karte) { gap: 20px; }
.einkauf-karte-name {
font-family: var(--font); font-weight: 700;
font-size: 19px; color: var(--dunkelgruen);
line-height: 1.3;
}
/* Vorgabe: die Adresse steht in EINER Zeile, kein Zeilenumbruch. Passt sie
bei schmalen Bildschirmen nicht, bricht sie bewusst NICHT um, sondern
scrollt horizontal (statt kleinerer Schrift -- robuster, kein JS zum
Nachmessen der Textbreite nötig). */
.einkauf-karte-adresse {
font-family: var(--font); font-weight: 400;
font-size: 16px; color: var(--grau-md);
line-height: 1.35;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.einkauf-karte-zeile {
display: block;
font-family: var(--font); font-weight: 600;
font-size: 16px; color: var(--dunkelgruen);
text-decoration: none;
overflow-wrap: anywhere;
word-break: break-word;
}
.einkauf-karte-zeile:hover { text-decoration: underline; }
.einkauf-karte .dtl-knopfreihe { padding: 4px 0 0; }
/* ════════════════════════════════════════════════════════════════
DETAILSEITEN-KASTEN: statische, immer sichtbare Abschnitte statt
Auf-/Zuklapp-Dropdowns. Eingefuehrt 06.09.2026 fuer die
Einkaufsfuehrer-Detailseite (damals .einkauf-detail-kasten*), Runde 41
(07.09.2026) app-weit auf alle festen Inhaltsabschnitte von
Detailseiten ausgeweitet (siehe detailKasten() in app.js) und deshalb
in .detail-kasten* umbenannt -- der alte Name war nur noch fuer den
Einkaufsfuehrer zutreffend. Farbe wechselt grün/gelb je Abschnitt,
IMMER beginnend mit Grün (detailKasten() zaehlt nur tatsaechlich
gerenderte Abschnitte, uebersprungene/leere Abschnitte verschieben die
Reihenfolge nicht).
════════════════════════════════════════════════════════════════ */
.detail-kasten {
background: var(--weiss);
border: 1.5px solid var(--grau-lt);
border-radius: 8px;
padding: 14px 16px 18px;
margin-bottom: 16px;
}
.detail-kasten-gruen { background: #E4F1DC; border-color: transparent; }
.detail-kasten-gelb { background: #FBF3D5; border-color: transparent; }
.detail-kasten-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
text-transform: uppercase; letter-spacing: 0.5px;
margin: 0 0 10px;
}
.detail-kasten p {
font-family: var(--font); font-weight: 400;
font-size: 15px; color: var(--grau-dk);
line-height: 1.6; margin-bottom: 10px;
}
.detail-kasten p:last-child { margin-bottom: 0; }
.detail-kasten ul { margin: 0; padding-left: 18px; }
.detail-kasten ul li {
font-family: var(--font); font-weight: 400;
font-size: 15px; color: var(--grau-dk);
line-height: 1.5; margin-bottom: 6px;
}
.detail-kasten ul li:last-child { margin-bottom: 0; }
/* ════════════════════════════════════════════════════════════════
FILTER-LEISTE
════════════════════════════════════════════════════════════════ */
.filter-leiste {
background: var(--weiss);
padding: 8px 14px 10px;
border-top: 1px solid var(--grau-lt);
border-bottom: 2px solid var(--hellgruen-s);
}
.filter-titel {
font-family: var(--font); font-weight: 700;
font-size: 12px; letter-spacing: 0.5px;
color: var(--dunkelgruen);
text-transform: uppercase;
margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.filter-titel .reset-btn {
margin-left: auto;
background: none; border: none;
color: var(--hellgruen-p);
font-family: var(--font); font-weight: 700;
font-size: 11px; text-transform: uppercase;
cursor: pointer; padding: 2px 6px;
}
.filter-titel .reset-btn:hover { text-decoration: underline; }
.filter-row {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 4px;
}
.filter-row:last-child { margin-bottom: 0; }
.filter-label-mini {
font-family: var(--font); font-weight: 700;
font-size: 11px; color: var(--grau-md);
text-transform: uppercase; letter-spacing: 0.5px;
margin-right: 4px;
align-self: center;
}
.filter-pill {
background: var(--weiss);
border: 1.5px solid var(--grau-lt);
color: var(--grau-dk);
font-family: var(--font); font-weight: 600;
font-size: 12px;
padding: 5px 11px;
cursor: pointer; transition: all 0.12s;
}
.filter-pill:hover {
border-color: var(--dunkelgruen);
color: var(--dunkelgruen);
}
.filter-pill.aktiv {
background: var(--dunkelgruen);
border-color: var(--dunkelgruen);
color: var(--weiss);
}
/* Filter-Treffer-Info */
.filter-treffer {
padding: 6px 14px 0;
font-family: var(--font); font-weight: 600;
font-size: 12px; color: var(--grau-md);
}
.filter-treffer strong { color: var(--dunkelgruen); }
.filter-treffer .treffer-extra {
display: inline-block;
margin-left: 4px;
background: var(--gelb);
color: var(--dunkelgruen);
padding: 1px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Untertitel auf Eintrag */
.eintrag-sub {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
margin-bottom: 4px; line-height: 1.3;
}
/* Detail-Subtitle */
.detail-subtitle {
font-family: var(--font); font-weight: 400;
font-size: 14px; color: var(--grau-md);
margin-bottom: 10px;
font-style: italic;
}
/* ════════════════════════════════════════════════════════════════
MODAL: Lange Texte besser lesbar
════════════════════════════════════════════════════════════════ */
#modal-inhalt h3 {
margin-top: 16px; margin-bottom: 6px;
color: var(--dunkelgruen);
font-size: 16px; font-weight: 700;
}
#modal-inhalt h3:first-child { margin-top: 0; }
#modal-inhalt p { margin-bottom: 8px; }
#modal-inhalt em { font-style: italic; color: var(--grau-md); }
/* ════════════════════════════════════════════════════════════════
LINKLIST: Externe Links + Sub-Link-Cards
(Regionale Produkte, Mobilität & Verkehr, Museen)
════════════════════════════════════════════════════════════════ */
.linklist a.eintrag {
display: flex;
align-items: center;
text-decoration: none;
}
.linklist a.eintrag:hover .eintrag-titel {
color: var(--hellgruen-p);
}
.linklist .eintrag-pfeil {
font-size: 18px;
color: var(--hellgruen-p);
font-weight: 700;
}
.linklist .link-card {
background: var(--creme);
border-left: 4px solid var(--hellgruen-s);
margin: 6px 14px;
border-radius: 4px;
padding: 10px 12px;
}
.linklist .link-card-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
margin-bottom: 6px;
}
.linklist .link-eintrag {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(0,102,58,0.15);
text-decoration: none;
color: var(--grau-dk);
}
.linklist .link-eintrag:last-child { border-bottom: 0; }
.linklist .link-eintrag:hover .link-eintrag-titel {
color: var(--hellgruen-p);
}
.linklist .link-eintrag-titel {
flex: 1;
font-size: 14px;
font-weight: 600;
}
.linklist .link-eintrag-pfeil {
color: var(--hellgruen-p);
font-weight: 700;
margin-left: 12px;
}
/* ════════════════════════════════════════════════════════════════
WW-LIT: Westerwälder Literaturtage
════════════════════════════════════════════════════════════════ */
.wwlit-eintrag {
display: flex;
align-items: stretch;
gap: 10px;
}
.wwlit-eintrag .wwlit-datum {
flex: 0 0 80px;
background: var(--gelb);
border-radius: 4px;
padding: 8px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wwlit-eintrag .wwlit-tag {
font-family: var(--font); font-weight: 700;
font-size: 13px; color: var(--dunkelgruen);
text-align: center;
line-height: 1.2;
}
.wwlit-eintrag .wwlit-zeit {
font-size: 11px; color: var(--grau-md);
margin-top: 2px;
}
.wwlit-eintrag .wwlit-werk {
font-size: 13px;
color: var(--grau-md);
margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════
TERMINE: Naturerlebnisse & Veranstaltungen
════════════════════════════════════════════════════════════════ */
.termine-filter {
padding: 6px 12px 8px;
}
.termine-filter .filter-gruppe {
margin-bottom: 5px;
}
.termine-filter .filter-label {
font-size: 11px;
font-weight: 700;
color: var(--dunkelgruen);
margin-right: 6px;
display: inline-block;
}
/* Termin-Kasten (Design-Vereinheitlichung 06.09.2026, dreiundzwanzigste
Runde, rechte Flaeche nachgebessert in der sechsundzwanzigsten Runde):
gleiches Grundgeruest wie .tourenkasten (Foto+Text links ~70%, Farb-
flaeche rechts ~30%, volle Karte anklickbar). Die rechte Flaeche nutzt
jetzt exakt dieselben Klassen wie das Schwierigkeits-Feld
(.tk-stats.tk-stats-leicht/.tk-stat-zahl) -- Wochentag/Datum/Uhrzeit
sehen dadurch identisch aus wie dort km/Std./hm, kein eigenes CSS mehr
noetig. Region und Marken (kostenfrei/Familie/Naturerlebnis/…) sind
ersatzlos entfernt (Vorgabe), die zugehoerigen Klassen .termin-frei/
.termin-kids/.termin-quelle/.termin-tk-* gibt es damit nicht mehr.
Markup: baueTerminKasten() in app.js. */
/* Region-Filter in einer Zeile */
.filter-bezirk {
white-space: nowrap;
overflow-x: auto;
}
.filter-bezirk .filter-pill {
font-size: 10.5px;
padding: 4px 7px;
}
/* ════════════════════════════════════════════════════════════════
PINCH-ZOOM für Dropdown-Inhalte
(touch-action: pan-y fuer .dropdown-inhalt steht jetzt direkt bei der
Basisregel oben -- der Kasten ist seit Runde 41 immer sichtbar, es
gibt kein ".offen" mehr, an das die Regel geknuepft sein muesste.)
════════════════════════════════════════════════════════════════ */
.dropdown-inhalt[data-zoom]:not([data-zoom="1"])::before {
content: '🔍 ' attr(data-zoom) '×';
position: absolute;
margin-top: -10px;
margin-left: -8px;
background: var(--dunkelgruen);
color: var(--weiss);
font-size: 11px;
padding: 2px 6px;
border-radius: 3px;
font-weight: 700;
z-index: 5;
}
/* ════════════════════════════════════════════════════════════════
GEFILTERT-FILTER (Ausflugsziele, Unterkünfte)
════════════════════════════════════════════════════════════════ */
.gefiltert-filter {
padding: 8px 12px;
}
.gefiltert-filter .filter-gruppe.filter-bezirk {
margin-bottom: 6px;
}
.gefiltert-filter .filter-suche {
margin-top: 4px;
}
/* Dasselbe Feld in den Tourenlisten (NEU 02.09.2026). Die Leiste dort
heisst .filter-leiste ohne .gefiltert-filter, deshalb ein eigener
Selektor — die Optik soll aber identisch sein. */
.filter-leiste .filter-gruppe.filter-suche {
margin-top: 4px;
}
.filter-such-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
font-family: var(--font);
border: 1px solid var(--grau-md);
border-radius: 4px;
background: var(--weiss);
box-sizing: border-box;
}
.filter-such-input:focus {
outline: none;
border-color: var(--hellgruen-p);
}
/* ════════════════════════════════════════════════════════════════
KARTENANSICHT-KNOPF NEBEN DER SUCHE (Umbau 05.09.2026, Sichtpruefung)
Vorher: eigener Textlaenge-abhaengiger Knopf ("Karte mit allen …
öffnen" / "Karte mit den N angezeigten … öffnen") in eigener Zeile
unter dem Suchfeld, komplett inline in index.html gepflegt. Jetzt:
fester Text "Kartenansicht", Groesse wie der kleine Routing-Knopf
(padding 6px 12px, 13px, fett), rechts neben dem Suchfeld in
derselben Zeile -- die Suche gibt dafuer Breite ab. Betrifft alle
Listen mit diesem Knopf: Wandern/Radfahren (filterUI()), Ausflugsziele/
Gastronomie/Unterkünfte (gefiltertFilterUI()), Veranstaltungen
(termineFilterUI()), Einkaufsführer, Naturgenuss Erzeuger/Gastgeber,
Unternehmen (jeweils eigenes Markup, siehe app.js karteAnsichtBtn()).
════════════════════════════════════════════════════════════════ */
.filter-such-karte-row {
display: flex;
align-items: stretch;
gap: 8px;
}
.filter-such-karte-row .filter-suche,
.filter-such-karte-row .filter-suche-gruppe {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
/* Beide moeglichen Sucheingaben (Tourenlisten/Ausflugsziele vs.
Veranstaltungen, je eigene Klasse) auf dieselbe kompakte Groesse wie
der Knopf daneben -- "gleiche Hoehe wie der Knopf" laut Vorgabe. */
.filter-such-karte-row .filter-such-input,
.filter-such-karte-row .termine-such-input {
padding: 6px 12px;
font-size: 13px;
box-sizing: border-box;
}
.listen-karte-btn-row,
.listen-karte-row {
margin: 8px 0;
display: flex;
justify-content: flex-start;
}
.listen-karte-btn {
/* 27.08.2026 (Wälli): Farbwelt des Footers uebernommen — helles Gruen
als Flaeche (#88C340, wie footer), Schrift fast schwarz statt
vorher weiss auf #1d6b3e (3,35:1 auf hellgruen vs. 8,2:1 mit
#1A1A1A). */
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
background: var(--weiss);
color: var(--dunkelgruen);
border: 2px solid var(--dunkelgruen);
border-radius: 8px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease;
}
.listen-karte-btn:hover, .listen-karte-btn:active {
background: var(--dunkelgruen);
color: var(--weiss);
}
/* ════════════════════════════════════════════════════════════════
FILTEROPTIONEN-SAMMELKNOPF (Design-Vereinheitlichung 06.09.2026):
ersetzt die vorher immer sichtbare Reihe einzelner Filter-Dropdown-
Koepfe. Optisch an .listen-karte-btn angeglichen (nicht am groesseren
.btn-action.outline-Grundmass), damit beide Knoepfe in derselben Zeile
gleich hoch sind -- gleiches Prinzip wie schon beim Suchfeld daneben
(siehe .filter-such-karte-row .filter-such-input oben). Farb-/
Rahmenlogik ist die von .btn-action.outline (weiss/dunkelgruen). */
.filter-opts-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--weiss);
color: var(--dunkelgruen);
border: 2px solid var(--dunkelgruen);
border-radius: 8px;
font-family: var(--font);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease;
}
.filter-opts-btn:hover, .filter-opts-btn:active {
background: var(--dunkelgruen);
color: var(--weiss);
}
.filter-opts-zahl { font-weight: 700; }
/* Feld unter dem Knopf, in dem die Gruppen-Dropdowns stehen -- bleibt bis
zum Antippen zu (kein leerer Abstand), .filter-dropdown darin behaelt
sein eigenes, bereits bestehendes Erscheinungsbild unveraendert. */
.filter-opts-panel {
display: none;
margin-top: 8px;
}
.filter-opts-panel.offen { display: block; }
/* Aktive Filter als kurze Chip-Zeile unter dem Knopf, unabhaengig davon
ob das Panel gerade offen oder zu ist -- damit sieht man auf einen
Blick, was aktiv ist, ohne das Panel zu oeffnen. */
.filter-aktiv-zeile {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: #EAF4D9;
color: var(--dunkelgruen);
border: 1px solid #CFE3D6;
border-radius: 14px;
padding: 4px 4px 4px 10px;
font-size: 12.5px;
font-weight: 600;
max-width: 100%;
}
.filter-chip-x {
background: none;
border: none;
color: var(--dunkelgruen);
font-size: 12px;
line-height: 1;
padding: 3px 5px;
border-radius: 50%;
cursor: pointer;
}
.filter-chip-x:hover { background: rgba(0,0,0,0.08); }
/* ════════════════════════════════════════════════════════════════
IFRAME-Seite (PDFs)
════════════════════════════════════════════════════════════════ */
.iframe-wrap {
width: 100%;
height: calc(100vh - var(--header-h, 0px) - 200px);
min-height: 480px;
background: var(--grau-lt);
position: relative;
}
.inhalts-iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.iframe-fallback {
text-align: center;
padding: 14px;
font-size: 13px;
color: var(--grau-md);
background: var(--creme);
}
.iframe-fallback a {
color: var(--hellgruen-p);
text-decoration: underline;
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════
INHALTS-Seite (Westerwald-Box, Westerwälder Ernte)
════════════════════════════════════════════════════════════════ */
.inhalts-seite > p:first-of-type {
font-size: 16px;
line-height: 1.5;
color: var(--grau-dk);
margin-bottom: 18px;
padding: 0 4px;
}
.inhalts-seite h3 {
font-family: var(--font);
font-weight: 700;
font-size: 18px;
color: var(--dunkelgruen);
margin-top: 0;
margin-bottom: 12px;
padding: 0 4px;
}
/* PDF-Aktion: prominenter Öffnen-Button im Sticky-Header */
.iframe-aktionen {
padding: 8px 12px;
background: var(--weiss);
border-top: 1px solid var(--grau-lt);
}
.btn-pdf-oeffnen {
display: inline-block;
background: var(--weiss);
color: var(--dunkelgruen) !important;
border: 2px solid var(--dunkelgruen);
text-decoration: none;
padding: 8px 14px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
}
.btn-pdf-oeffnen:hover {
background: var(--dunkelgruen);
color: var(--weiss) !important;
}
/* ════════════════════════════════════════════════════════════════
BETRIEBE-LISTE und LOGO
════════════════════════════════════════════════════════════════ */
.betriebe-liste {
margin-top: 8px;
}
.betrieb-eintrag {
align-items: center;
}
.betrieb-logo {
width: 44px;
height: 44px;
object-fit: contain;
margin-right: 12px;
flex-shrink: 0;
background: var(--weiss, #fff);
border-radius: 3px;
}
.betrieb-logo-platzhalter {
width: 44px;
height: 44px;
background: var(--hellgruen-s, #C8E6A4);
color: var(--dunkelgruen, #00663A);
font-family: var(--font);
font-weight: 700;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
border-radius: 3px;
}
/* Öffnungszeiten-Tabelle */
.oeffnungszeiten-tab {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.oeffnungszeiten-tab th {
background: var(--hellgruen-s, #C8E6A4);
color: var(--dunkelgruen, #00663A);
padding: 6px 8px;
text-align: left;
font-size: 12px;
font-weight: 700;
border-bottom: 1px solid var(--grau-lt, #e5e5e5);
}
.oeffnungszeiten-tab td {
padding: 6px 8px;
border-bottom: 1px solid var(--grau-lt, #e5e5e5);
}
.oeffnungszeiten-tab tr:last-child td { border-bottom: 0; }
/* Hinweistext in leeren Dropdowns */
.hinweis-leer {
color: var(--grau-md);
font-style: italic;
font-size: 14px;
}
/* ════════════════════════════════════════════════════════════════
PDF-Karte für mobile Geräte (statt iframe)
════════════════════════════════════════════════════════════════ */
.pdf-mobile-karte {
background: var(--weiss, #fff);
margin: 16px;
padding: 32px 20px;
border-radius: 6px;
border: 1px solid var(--grau-lt, #e5e5e5);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
text-align: center;
}
.pdf-mobile-icon {
font-size: 64px;
line-height: 1;
margin-bottom: 12px;
}
.pdf-mobile-titel {
font-family: var(--font);
font-weight: 700;
font-size: 20px;
color: var(--dunkelgruen, #00663A);
margin-bottom: 12px;
}
.pdf-mobile-hinweis {
color: var(--grau-md, #777);
font-size: 14px;
margin: 0 0 24px;
line-height: 1.5;
}
.btn-pdf-oeffnen-gross {
display: inline-block;
background: var(--weiss, #fff);
color: var(--dunkelgruen, #00663A) !important;
border: 2px solid var(--dunkelgruen, #00663A);
text-decoration: none;
padding: 16px 28px;
border-radius: 6px;
font-weight: 700;
font-size: 17px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.btn-pdf-oeffnen-gross:hover,
.btn-pdf-oeffnen-gross:active {
color: var(--weiss, #fff) !important;
background: var(--dunkelgruen, #00663A);
}
.pdf-mobile-meta {
margin-top: 18px;
font-size: 12px;
color: var(--grau-md, #777);
word-break: break-all;
}
.pdf-mobile-meta a {
color: var(--grau-md, #777);
text-decoration: underline;
}
/* ════════════════════════════════════════════════════════════════
BARRIEREFREIER MODUS
Aktiviert über body.barrierefrei
──────────────────────────────────────────────────────────────────
Konzept: Hochkontrast (schwarz/weiß), 1.5x Schrift, klare Fokus-
Indikatoren, größere Touch-Ziele, reduzierte Animationen, klar
erkennbare Links durch Unterstreichung.
════════════════════════════════════════════════════════════════ */
/* Toggle-Button im Modal */
.bf-toggle-box {
background: #f0f8f4;
border-left: 4px solid var(--dunkelgruen, #00663A);
padding: 16px;
margin-bottom: 24px;
border-radius: 0 4px 4px 0;
}
.bf-toggle-btn {
display: flex;
align-items: center;
gap: 12px;
background: var(--weiss, #fff);
border: 2px solid var(--dunkelgruen, #00663A);
padding: 14px 20px;
font-family: var(--font);
font-weight: 700;
font-size: 16px;
color: var(--dunkelgruen, #00663A);
cursor: pointer;
border-radius: 4px;
margin: 12px 0;
width: 100%;
text-align: left;
}
.bf-toggle-btn:hover {
background: #e8f3ec;
}
.bf-toggle-btn.bf-an {
background: var(--dunkelgruen, #00663A);
color: var(--weiss, #fff);
}
.bf-toggle-status {
display: inline-block;
padding: 4px 12px;
background: rgba(0,0,0,0.1);
border-radius: 3px;
font-size: 14px;
letter-spacing: 1px;
min-width: 50px;
text-align: center;
}
.bf-toggle-btn.bf-an .bf-toggle-status {
background: rgba(255,255,255,0.2);
}
.bf-toggle-label {
flex: 1;
}
.bf-toggle-hinweis {
margin-top: 12px;
font-size: 13px;
color: var(--grau-dk, #333);
}
/* ────────────────────────────────────────────────────────────────
AKTIV-Stil: alle Anpassungen
──────────────────────────────────────────────────────────────── */
body.barrierefrei {
font-size: 18px; /* +20% Basis */
}
/* Schriftgrößen-Skalierung 1.4x bis 1.6x */
body.barrierefrei .eintrag-titel,
body.barrierefrei .subkat-label,
body.barrierefrei .kachel-label,
body.barrierefrei .detail-kasten-titel {
font-size: 19px;
font-weight: 700;
line-height: 1.4;
}
body.barrierefrei .eintrag-meta,
body.barrierefrei .subkat-meta,
body.barrierefrei .kachel-meta {
font-size: 16px;
line-height: 1.5;
}
body.barrierefrei .dropdown-inhalt,
body.barrierefrei .dropdown-inhalt p,
body.barrierefrei .dropdown-inhalt li,
body.barrierefrei .detail-section p,
body.barrierefrei .inhalts-seite p,
body.barrierefrei .inhalts-seite li {
font-size: 17px !important;
line-height: 1.7 !important;
}
body.barrierefrei h1, body.barrierefrei h2, body.barrierefrei h3 {
line-height: 1.3;
}
body.barrierefrei .intro h1,
body.barrierefrei .intro .titel {
font-size: 26px;
}
body.barrierefrei .untertitel {
font-size: 16px;
}
/* Größere Touch-Ziele (mind. 48px hoch) */
body.barrierefrei .eintrag,
body.barrierefrei .subkat,
body.barrierefrei .kachel,
body.barrierefrei .filter-pill,
body.barrierefrei .btn-action,
body.barrierefrei #cookie-akzeptieren,
body.barrierefrei .nav-zurueck,
body.barrierefrei .modal-schliessen {
min-height: 48px;
padding-top: 14px;
padding-bottom: 14px;
}
/* Hochkontrast: alle Texte schwarz auf weiß */
body.barrierefrei {
color: #000 !important;
background: #fff !important;
}
body.barrierefrei .eintrag,
body.barrierefrei .subkat,
body.barrierefrei .kachel,
body.barrierefrei .detail-kasten,
body.barrierefrei .detail-section,
body.barrierefrei .pdf-mobile-karte {
background: #fff !important;
border: 2px solid #000 !important;
color: #000 !important;
}
body.barrierefrei .eintrag-titel,
body.barrierefrei .subkat-label,
body.barrierefrei .kachel-label,
body.barrierefrei .detail-kasten-titel,
body.barrierefrei .detail-titel,
body.barrierefrei .sticky-detail-titel,
body.barrierefrei .intro h1,
body.barrierefrei .intro .titel,
body.barrierefrei h1, body.barrierefrei h2, body.barrierefrei h3 {
color: #000 !important;
}
body.barrierefrei .eintrag-meta,
body.barrierefrei .subkat-meta,
body.barrierefrei .kachel-meta,
body.barrierefrei .untertitel,
body.barrierefrei .breadcrumb {
color: #222 !important;
}
/* Pillen mit klarem Schwarz-Rahmen */
body.barrierefrei .filter-pill,
body.barrierefrei .diff-pill {
background: #fff !important;
color: #000 !important;
border: 2px solid #000 !important;
}
body.barrierefrei .filter-pill.aktiv,
body.barrierefrei .diff-pill.diff-mittel-bg {
background: #000 !important;
color: #fff !important;
}
/* Buttons mit klar abgegrenztem Rahmen */
body.barrierefrei .btn-action,
body.barrierefrei .btn-pdf-oeffnen,
body.barrierefrei .btn-pdf-oeffnen-gross,
body.barrierefrei #cookie-akzeptieren {
background: #000 !important;
color: #fff !important;
border: 3px solid #000 !important;
font-weight: 700 !important;
}
body.barrierefrei .btn-action:hover,
body.barrierefrei .btn-pdf-oeffnen:hover,
body.barrierefrei .btn-pdf-oeffnen-gross:hover,
body.barrierefrei #cookie-akzeptieren:hover {
background: #fff !important;
color: #000 !important;
}
/* Alle Links unterstrichen, gut sichtbare Farbe */
body.barrierefrei a {
color: #003d80 !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 2px !important;
}
body.barrierefrei a:hover, body.barrierefrei a:focus {
background: #003d80 !important;
color: #fff !important;
}
/* Klare Fokus-Indikatoren für Tastatur-Navigation */
body.barrierefrei *:focus,
body.barrierefrei *:focus-visible {
outline: 4px solid #ff6600 !important;
outline-offset: 2px !important;
z-index: 100 !important;
position: relative;
}
/* Reduzierte Animationen */
body.barrierefrei * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Footer höher und klarer */
body.barrierefrei .footer,
body.barrierefrei #app-footer {
background: #000 !important;
color: #fff !important;
padding: 20px !important;
font-size: 16px !important;
}
body.barrierefrei .footer a,
body.barrierefrei #app-footer a {
color: #fff !important;
}
/* Sticky-Header mit klarer Trennlinie */
body.barrierefrei .sticky-region,
body.barrierefrei .sticky-detail {
background: #fff !important;
border-bottom: 3px solid #000 !important;
}
/* Splash und Cookie-Overlay weniger animiert */
body.barrierefrei #eichhoernchen-overlay {
transition: none !important;
}
body.barrierefrei #cookie-overlay {
background: rgba(0,0,0,0.85);
}
body.barrierefrei #cookie-box {
border: 4px solid #000;
}
/* Modal selbst auch barrierefrei stylen */
body.barrierefrei #modal-box {
border: 4px solid #000;
}
body.barrierefrei #modal-titel {
color: #000 !important;
font-size: 24px;
}
body.barrierefrei #modal-inhalt {
font-size: 17px;
line-height: 1.7;
}
/* Eintrag-Pfeile größer und sichtbarer */
body.barrierefrei .eintrag-pfeil,
body.barrierefrei .subkat-pfeil,
body.barrierefrei .nav-zurueck::before {
font-size: 28px;
font-weight: 700;
color: #000;
}
/* ════════════════════════════════════════════════════════════════
IFRAME-INFO-KARTE (Desktop, oberhalb des iframe-Versuchs)
Immer sichtbar, damit der User auch dann ein Ziel hat,
wenn der Anbieter das Embedding via X-Frame-Options blockiert.
════════════════════════════════════════════════════════════════ */
.iframe-info-karte {
display: flex;
align-items: center;
gap: 16px;
background: #f0f8f4;
border-left: 4px solid var(--dunkelgruen, #00663A);
padding: 16px 20px;
margin: 12px 16px;
border-radius: 0 4px 4px 0;
}
.iframe-info-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
color: var(--dunkelgruen, #00663A);
font-size: 14px;
}
.iframe-info-text strong {
font-size: 15px;
}
.iframe-info-hinweis {
color: var(--grau-dk, #333);
font-size: 13px;
}
.btn-info-karte {
flex-shrink: 0;
font-size: 14px !important;
padding: 12px 18px !important;
letter-spacing: 0 !important;
}
.iframe-versuch {
position: relative;
min-height: 60vh;
background: #f5f5f5;
}
.iframe-lade-hinweis {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--grau-md, #777);
font-size: 14px;
background: rgba(255,255,255,0.9);
padding: 8px 16px;
border-radius: 20px;
z-index: 1;
pointer-events: none;
}
@media (max-width: 600px) {
.iframe-info-karte {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.btn-info-karte {
width: 100%;
text-align: center;
}
}
/* ════════════════════════════════════════════════════════════════
STANDORT-EINWILLIGUNGS-BANNER (Variante 3: Hybrid)
Wird als Overlay über der Karte eingeblendet und fragt aktiv,
ob der Standort angezeigt werden soll. Karte rendert sofort,
Standort-Abfrage nur bei "Ja" (Datenschutz-Audit Mai 2026, A.5).
════════════════════════════════════════════════════════════════ */
.standort-banner {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
max-width: calc(100% - 24px);
width: 360px;
background: #ffffff;
border-left: 5px solid var(--dunkelgruen);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
border-radius: 6px;
padding: 14px 16px 14px 14px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon text"
"actions actions";
gap: 10px 12px;
animation: standort-banner-in 0.25s ease-out;
font-family: var(--font);
}
@keyframes standort-banner-in {
from { opacity: 0; transform: translate(-50%, -10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.standort-banner-close {
position: absolute;
top: 4px;
right: 6px;
background: transparent;
border: none;
font-size: 22px;
line-height: 1;
color: var(--grau-md);
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s ease;
}
.standort-banner-close:hover,
.standort-banner-close:focus {
background: var(--grau-lt);
color: var(--grau-dk);
outline: none;
}
.standort-banner-icon {
grid-area: icon;
font-size: 26px;
line-height: 1;
align-self: center;
}
.standort-banner-text {
grid-area: text;
align-self: center;
display: flex;
flex-direction: column;
gap: 2px;
padding-right: 18px; /* Platz für ×-Button */
}
.standort-banner-text strong {
font-weight: 700;
font-size: 15px;
color: var(--dunkelgruen);
}
.standort-banner-text span {
font-size: 13px;
color: var(--grau-dk);
line-height: 1.4;
}
.standort-banner-actions {
grid-area: actions;
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.standort-banner-btn {
flex: 1;
padding: 10px 14px;
font-family: var(--font);
font-size: 14px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
border: 2px solid var(--dunkelgruen);
transition: all 0.15s ease;
}
.standort-banner-btn.ja {
background: var(--dunkelgruen);
color: #ffffff;
}
.standort-banner-btn.ja:hover,
.standort-banner-btn.ja:focus {
background: var(--hellgruen-p);
border-color: var(--hellgruen-p);
outline: none;
}
.standort-banner-btn.nein {
background: #ffffff;
color: var(--grau-dk);
border-color: var(--grau-lt);
}
.standort-banner-btn.nein:hover,
.standort-banner-btn.nein:focus {
background: var(--grau-lt);
border-color: var(--grau-md);
outline: none;
}
.standort-banner.laedt .standort-banner-actions {
font-size: 13px;
color: var(--grau-dk);
justify-content: center;
gap: 10px;
}
.standort-banner-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--grau-lt);
border-top-color: var(--dunkelgruen);
border-radius: 50%;
animation: standort-banner-rotate 0.7s linear infinite;
}
@keyframes standort-banner-rotate {
to { transform: rotate(360deg); }
}
.standort-banner.fehler {
border-left-color: var(--rot);
}
.standort-banner.fehler .standort-banner-text strong {
color: var(--rot);
}
/* Mobile-Anpassung: Banner nimmt fast volle Breite */
@media (max-width: 420px) {
.standort-banner {
width: calc(100% - 16px);
top: 8px;
padding: 12px 14px 12px 12px;
}
.standort-banner-btn {
padding: 9px 10px;
font-size: 13px;
}
}
/* ── AUFGABE A: Zwei-Klick-Einwilligung für externe iFrames ────────── */
.iframe-consent-wrap { position: relative; margin: 12px 0; }
/* iframe bleibt unsichtbar, solange keine Zustimmung erteilt wurde
(er hat ohnehin kein src -> lädt nichts). */
.iframe-consent-wrap iframe { display: none; width: 100%; border: 0; }
.iframe-consent-wrap.consent-erteilt iframe { display: block; width: 100%; min-height: 70vh; }
.iframe-consent-overlay {
background: #f4f8f2; border: 1px solid #cfe3c6; border-radius: 10px;
padding: 24px 18px; text-align: center;
}
.iframe-consent-box { max-width: 520px; margin: 0 auto; }
.iframe-consent-icon { font-size: 34px; line-height: 1; }
.iframe-consent-titel { font-weight: 700; color: #1B4D1B; margin: 8px 0 4px; font-size: 1.05em; }
.iframe-consent-text { color: #444; font-size: 0.95em; margin: 0 0 16px; line-height: 1.45; }
.iframe-consent-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.iframe-consent-ja {
background: #2E7D32; color: #fff; border: 0; border-radius: 8px;
padding: 11px 20px; font-weight: 700; cursor: pointer; font-size: 1em;
}
.iframe-consent-ja:hover { background: #256628; }
.iframe-consent-nein {
background: #fff; color: #333; border: 1px solid #bbb; border-radius: 8px;
padding: 11px 20px; cursor: pointer; font-size: 1em;
}
.iframe-consent-nein:hover { background: #f2f2f2; }
.iframe-consent-meta { color: #777; font-size: 0.8em; margin: 14px 0 0; }
/* ── Karten-Kachel-Einwilligung (Zwei-Klick vor OpenStreetMap) ─────── */
.karten-consent-overlay {
position: absolute; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
background: #f4f8f2; padding: 18px; text-align: center;
}
.karten-consent-box { max-width: 460px; }
.karten-consent-icon { font-size: 32px; line-height: 1; }
.karten-consent-titel { font-weight: 700; color: #1B4D1B; margin: 6px 0 4px; font-size: 1.02em; }
.karten-consent-text { color: #444; font-size: 0.92em; margin: 0 0 14px; line-height: 1.45; }
.karten-consent-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.karten-consent-ja {
background: #2E7D32; color: #fff; border: 0; border-radius: 8px;
padding: 10px 18px; font-weight: 700; cursor: pointer; font-size: 0.98em;
}
.karten-consent-ja:hover { background: #256628; }
.karten-consent-nein {
background: #fff; color: #333; border: 1px solid #bbb; border-radius: 8px;
padding: 10px 18px; cursor: pointer; font-size: 0.98em;
}
.karten-consent-nein:hover { background: #f2f2f2; }
.karten-consent-meta { color: #777; font-size: 0.78em; margin: 12px 0 0; }
/* ════════════════════════════════════════════════════════════════
ERWEITERUNGSMODUL 07/2026
Globale Suche · Heute-Chips · Wochenend-Block · Tages-Pakete ·
Praktisches vor Ort · Anreise-Block · Kurzporträts · Notdienste
Nutzt ausschließlich vorhandene Design-Tokens aus :root.
════════════════════════════════════════════════════════════════ */
/* ── Globale Suche ─────────────────────────────────────────────── */
.global-suche-wrap {
display: flex; gap: 8px; align-items: stretch;
padding: 4px 16px 12px;
}
.global-suche-wrap-innen { padding-top: 12px; }
/* NEU 06.09.2026: auf dieselbe kompakte Groesse gebracht wie das Suchfeld
in den Tourenlisten (.filter-such-karte-row .filter-such-input,
z.B. liste/tourismus-wandern-westerwaldsteig, unter "Filteroptionen"/
"Karte") -- vorher deutlich groesser (12px/14px Polsterung, 15px
Schrift, 2px Rahmen, 10px Eckenradius). Der Suchen-Knopf daneben ist
mitgeschrumpft, sonst waeren Feld und Knopf unterschiedlich hoch. */
.global-suche-input {
flex: 1; min-width: 0;
padding: 6px 12px;
border: 1px solid var(--grau-md);
border-radius: 4px;
font-family: var(--font); font-size: 13px;
background: var(--weiss); color: var(--dunkelgruen);
box-sizing: border-box;
}
.global-suche-input:focus {
outline: none;
border-color: var(--hellgruen-p);
}
.global-suche-btn {
padding: 6px 12px; min-height: 0;
border: 1px solid var(--grau-md); border-radius: 4px;
background: var(--weiss); color: var(--dunkelgruen);
font-family: var(--font); font-weight: 700; font-size: 13px;
cursor: pointer; transition: all .2s;
}
.global-suche-btn:hover { background: var(--dunkelgruen); color: var(--weiss); }
.suche-gruppe { padding: 0 0 6px; }
.suche-gruppe-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
margin: 14px 16px 6px;
text-transform: uppercase; letter-spacing: 0.3px;
}
.suche-mehr-row { text-align: right; padding: 4px 16px 6px; }
/* Karte-Knopf ueber der Trefferliste (NEU 06.09.2026, Punkt 2). */
.suche-karte-row { padding: 4px 16px 10px; }
.suche-mehr-link {
font-family: var(--font); font-weight: 700; font-size: 13px;
color: var(--hellgruen-p); text-decoration: none;
}
.suche-mehr-link:hover { text-decoration: underline; }
/* ── "Was unternehme ich heute?"-Chips ─────────────────────────── */
.heute-ideen-section { padding: 4px 16px 8px; }
/* NEU 08/2026: aufklappbares Dropdown statt vier fester Kacheln */
.heute-dropdown {
border: 2px solid var(--dunkelgruen);
border-radius: 8px;
background: var(--weiss);
}
.heute-dropdown-summary {
list-style: none;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: 12px 14px;
font-family: var(--font); font-weight: 800; font-size: 16px;
color: var(--dunkelgruen);
cursor: pointer;
-webkit-user-select: none; user-select: none;
}
.heute-dropdown-summary::-webkit-details-marker { display: none; }
.heute-dropdown-pfeil { transition: transform .2s; font-size: 18px; }
.heute-dropdown[open] .heute-dropdown-pfeil { transform: rotate(180deg); }
.heute-dropdown .heute-chips { padding: 2px 12px 12px; }
/* Punkt 2 (31.07.2026): viereckige Buttons im 2x2-Raster, gleiche Breite
wie die Hauptkacheln, Höhe ca. 1/5 der Kachelhöhe (Kachel ~180px → 40px) */
.heute-chips {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; padding: 2px 0 6px;
}
.heute-chip {
min-height: 40px;
padding: 8px 10px;
border: 2px solid var(--dunkelgruen); border-radius: 8px;
background: var(--weiss); color: var(--dunkelgruen);
font-family: var(--font); font-weight: 700; font-size: 14px;
cursor: pointer; transition: all .2s;
display: flex; align-items: center; justify-content: center;
text-align: center;
}
.heute-chip::before {
content: ''; display: none; /* kein Farbbalken — bewusst schlichter als Kacheln */
}
.heute-chip:hover { background: var(--dunkelgruen); color: var(--weiss); }
.prakt-chips { padding: 8px 16px 4px; }
.prakt-chip { opacity: 0.45; }
.prakt-chip.aktiv { opacity: 1; background: var(--dunkelgruen); color: var(--weiss); }
/* ════════════════════════════════════════════════════════════════
STARTSEITE: "Am Wochenende" / "Tipp des Tages" (Vorlage
bilder/startseite_v5.png, Umbau 05.09.2026). Ersetzt die bisherige,
rein inline in index.html gepflegte .heute-karte-Optik (Icon links,
gruener Rahmen links, kein Foto) durch dieselbe Foto-Kachel-Sprache
wie die Startkacheln (.kat-badge) und der Tourenkasten (.tk-foto-wrap/
.tk-foto/tkFotoCheck() werden 1:1 wiederverwendet, s. app.js
heuteKarteFoto()): Foto oben 3:2, darunter weisse Leiste mit Badge,
Titel fett dunkelgruen, Meta-Zeile grau. Ohne Bildzuordnung entfaellt
die Bildflaeche, die Leiste bildet dann die ganze Karte -- deshalb
sitzen Radius/Schatten/Ueberlauf-Clip am AEUSSEREN Button, nicht an
den einzelnen Teilen.
════════════════════════════════════════════════════════════════ */
.heute-section {
/* Bodenabstand kommt jetzt ueber margin-bottom auf den einzelnen
Rubriken (.wochenend-section/.tipp-section, s.u.), nicht mehr ueber
Padding hier -- sonst waere der 40px-Rubrik-Abstand (Vorgabe
05.09.2026) nicht exakt einstellbar. */
padding: 4px 14px 4px;
max-width: 720px;
margin: 0 auto;
box-sizing: border-box;
width: 100%;
}
.heute-karten {
display: flex;
flex-direction: column;
/* Vorgabe 05.09.2026 (Sichtpruefung): 24px statt 10px, damit der
Uebergang von Karte zu Karte klar erkennbar ist -- gilt fuer "Am
Wochenende" UND "Tipp des Tages" (beide nutzen .heute-karten). */
gap: 24px;
}
.heute-karte-foto {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
background: var(--weiss);
border: none;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
cursor: pointer;
padding: 0;
text-align: left;
font-family: inherit;
transition: box-shadow .15s ease;
}
.heute-karte-foto:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.18); }
.heute-karte-leiste {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
}
.heute-karte-text { flex: 1 1 0; min-width: 0; }
.heute-karte-titel {
font-family: var(--font); font-weight: 700;
font-size: 15px; color: var(--dunkelgruen);
line-height: 1.3;
/* Auf sehr kleinen Screens umbrechen statt abschneiden, max. 2 Zeilen */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.heute-karte-meta {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
margin-top: 2px; line-height: 1.35;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 380px) {
.heute-section { padding: 4px 10px 4px; }
.heute-karte-leiste { padding: 8px 10px; }
.heute-karte-titel { font-size: 14px; }
.heute-karte-meta { font-size: 12px; }
}
/* Zeitraum unter der Ueberschrift "Am Wochenende" ("(Fr 04.09. – So 06.09.)") */
.wochenend-kopf-text { display: flex; flex-direction: column; min-width: 0; }
.wochenend-zeitraum {
font-family: var(--font); font-weight: 400;
font-size: 13px; color: var(--grau-md);
margin: 0 0 0 4px;
}
/* "Tipp des Tages": Rahmen entfallen (Vorgabe 07.09.2026), jetzt optisch
identisch mit "Am Wochenende" -- kein eigener Rahmen/eigenes Padding
mehr, nur noch der Abstand zur naechsten Rubrik bleibt bestehen. */
.tipp-section {
margin: 4px 14px 40px;
}
@media (max-width: 380px) {
.tipp-section { margin: 4px 10px 40px; }
}
/* ── Wochenend-Block (erbt die heute-section-Optik) ────────────── */
.wochenend-section {
/* Vorgabe 06.09.2026: 48px Abstand zu den vier Kacheln darueber. Die
Sektion selbst hat noch 4px eigenes padding-top (.heute-section) --
44+4 = 48px, da sie (anders als .tipp-section) keinen sichtbaren
Rahmen hat, der die Innenpolsterung optisch abtrennen wuerde. */
margin-top: 44px;
/* Vorgabe 06.09.2026: 48px Abstand zur naechsten Rubrik ("Tipp des
Tages"), statt vorher 40px (Vorgabe 05.09.2026, davor 18px). 44px
margin, weil .tipp-section selbst 4px margin-top mitbringt (eigenes
margin:4px 14px 40px) und die Abstaende zwischen den Sektionen HIER
nicht kollabieren (Elternelement ist Flex/Grid) -- 44+4=48,
nachgemessen per getBoundingClientRect(). */
margin-bottom: 44px;
}
/* ── Anreise-Block auf Tour-Detailseiten ───────────────────────── */
.anreise-block {
margin: 14px 0;
padding: 14px 16px;
border: 2px solid var(--hellgruen-s);
border-radius: 12px;
background: rgba(136, 195, 64, 0.08);
}
.anreise-titel {
font-family: var(--font); font-weight: 700; font-size: 15px;
color: var(--dunkelgruen); margin-bottom: 6px;
}
.anreise-text { font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 10px; }
.anreise-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── Kurzporträt ("Warum lohnt sich das?") ─────────────────────── */
.kurzportraet {
margin: 12px 0;
padding: 14px 16px;
border-left: 5px solid var(--hellgruen-s);
border-radius: 0 10px 10px 0;
background: rgba(136, 195, 64, 0.10);
}
.kurzportraet-label {
font-family: var(--font); font-weight: 700; font-size: 13px;
color: var(--dunkelgruen); text-transform: uppercase;
letter-spacing: 0.4px; margin-bottom: 4px;
}
.kurzportraet-text { font-size: 15px; line-height: 1.55; color: #222; margin: 0; }
/* ── Tages-Ideen (Paket-Karten) ────────────────────────────────── */
.paket-karte {
margin: 12px 16px;
border: 2px solid var(--dunkelgruen);
border-radius: 12px;
background: var(--weiss);
padding: 14px 16px;
position: relative; overflow: hidden;
}
.paket-karte::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: var(--hellgruen-s);
}
.paket-kopf { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.paket-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; }
.paket-titel {
font-family: var(--font); font-weight: 700; font-size: 17px;
color: var(--dunkelgruen); line-height: 1.25;
}
.paket-meta {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 12.5px; color: #555; margin-top: 3px;
}
.paket-text { font-size: 14px; line-height: 1.5; color: #333; margin: 10px 0 4px; }
.paket-stationen { margin: 8px 0 2px; padding-left: 0; list-style: none; }
.paket-station {
padding: 8px 0 8px 14px; margin: 0;
border-left: 3px solid rgba(0, 102, 58, 0.25);
}
.paket-station:last-child { border-left-color: transparent; }
.paket-station-label { font-weight: 700; font-size: 14px; color: var(--dunkelgruen); }
.paket-station-text { font-size: 13.5px; line-height: 1.45; color: #444; margin-top: 2px; }
.paket-station-link {
display: inline-block; margin-top: 4px;
font-family: var(--font); font-weight: 700; font-size: 13px;
color: var(--hellgruen-p); text-decoration: none;
}
.paket-station-link:hover { text-decoration: underline; }
/* ── Notdienste-Inhaltsseite ───────────────────────────────────── */
.notdienst-warnbox {
margin: 10px 0 16px;
padding: 14px 16px;
border: 2px solid #C0392B; border-radius: 12px;
background: rgba(192, 57, 43, 0.07);
font-size: 15px; line-height: 1.6;
}
.notdienst-tel-gross {
display: inline-block; margin-top: 6px;
font-size: 22px; font-weight: 800;
color: #C0392B; text-decoration: none;
}
.notdienst-h {
font-family: var(--font); font-weight: 700; font-size: 16px;
color: var(--dunkelgruen); margin: 18px 0 6px;
}
.notdienst-liste { margin: 6px 0; padding-left: 20px; }
.notdienst-liste li { margin: 6px 0; line-height: 1.55; font-size: 14.5px; }
.notdienst-fussnote { font-size: 12.5px; color: #666; margin-top: 18px; line-height: 1.5; }
/* ── 5. Kachel: bei ungerader Anzahl volle Breite ──────────────── */
.kategorien .kat:nth-child(odd):last-child {
grid-column: 1 / -1;
min-height: 110px;
flex-direction: row; justify-content: center; gap: 14px;
}
.kategorien .kat:nth-child(odd):last-child .kat-label { margin-top: 0; min-height: 0; }
/* ── Barrierefreier Modus: größere Ziele/Schrift auch hier ─────── */
body.barrierefrei .global-suche-input,
body.barrierefrei .global-suche-btn { font-size: 17px; min-height: 52px; }
body.barrierefrei .heute-chip { font-size: 16px; min-height: 48px; }
body.barrierefrei .kurzportraet-text,
body.barrierefrei .paket-text,
body.barrierefrei .anreise-text,
body.barrierefrei .notdienst-liste li { font-size: 16.5px; }
/* ════════════════════════════════════════════════════════════════
STARTSEITE: "Gesundheit & Mobilität" (Vorlage bilder/startseite_v5.png,
Umbau 05.09.2026). Ersetzt die bisherigen 6 Service-Buttons
(.kat.kat-mini.kat-notfall, kachelMini() gab allen sechs Buttons
unconditional die rote Notdienst-Farbe -- der gemeldete Fehler) durch
ein 3x2-Raster weisser Karten mit Icon oben/Label darunter, leichter
Schatten statt Rahmen. Nur "Notfälle & Apotheken" bleibt rot
(.dienst-warnung), die übrigen fünf sind dunkelgrün. Ziele (Hashes)
unverändert, nur Optik. Markup: kachelMini() in app.js.
════════════════════════════════════════════════════════════════ */
.dienst-section {
padding: 4px 14px 18px;
max-width: 720px;
margin: 0 auto;
box-sizing: border-box;
width: 100%;
}
.dienst-titel {
border-bottom: 3px solid var(--hellgruen-s);
padding-bottom: 6px;
display: inline-block;
}
.dienst-grid {
display: grid;
/* Vorgabe 05.09.2026 (Sichtpruefung): mobil zwei Spalten/drei Zeilen
statt drei Spalten/zwei Zeilen -- Desktop bleibt bei drei Spalten,
siehe desktop.css. */
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.dienst-karte {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 84px;
background: var(--weiss);
border: none;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
padding: 16px 6px 12px;
cursor: pointer;
text-align: center;
font-family: inherit;
transition: box-shadow .15s ease;
}
.dienst-karte:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.16); }
.dienst-icon { width: 30px; height: 30px; }
.dienst-icon svg {
width: 100%; height: 100%;
fill: none; stroke: var(--dunkelgruen);
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.dienst-icon svg circle[fill],
.dienst-icon svg path[fill],
.dienst-icon svg rect[fill] { fill: var(--dunkelgruen); }
.dienst-label {
font-family: var(--font); font-weight: 600;
font-size: clamp(11px, 3vw, 12.5px);
color: var(--dunkelgruen);
line-height: 1.25;
}
/* Nur "Notfälle & Apotheken": warmes Terrakotta-Rot statt hartem
Signalrot (Farbe uebernommen aus der bisherigen .kat-notfall-Regel,
Nachbesserung 31.07.2026). Kontrast auf Weiß ≈ 6,4:1. */
.dienst-karte.dienst-warnung .dienst-icon svg { stroke: #B7472A; }
.dienst-karte.dienst-warnung .dienst-icon svg circle[fill],
.dienst-karte.dienst-warnung .dienst-icon svg path[fill],
.dienst-karte.dienst-warnung .dienst-icon svg rect[fill] { fill: #B7472A; }
.dienst-karte.dienst-warnung .dienst-label { color: #B7472A; }
body.barrierefrei .dienst-karte { min-height: 96px; padding: 18px 8px; }
body.barrierefrei .dienst-icon { width: 36px; height: 36px; }
body.barrierefrei .dienst-label { font-size: 15px; }
/* ════════════════════════════════════════════════════════════════
NOTDIENSTE-SEITE (Neubau 06.09.2026): neun Info-Kacheln, gleiche
Basisoptik wie .dienst-karte oben, aber die Kachel *enthält* die
Information (Rufnummer/Link/Suchfeld) statt nur zu einem Ziel zu
navigieren -- deshalb /
statt