/* =================================================================================================
was.läuft – das öffentliche Veranstaltungsportal.
BEWUSST EIGENSTÄNDIG: Dies ist der einzige öffentliche Bereich, der NICHT die style.css der App
mitbenutzt. Die App ist Petrol, ruhig, ein Arbeitswerkzeug. Diese Seite soll wie ein
Stadtmagazin wirken – dunkler Kopf, große Typografie, Bild zuerst. Wer hier etwas ändert, ändert
es nur hier; umgekehrt zieht eine Änderung an der App hier nichts nach.
ACHTUNG CSP: Die Seiten laufen unter default-src 'none' ohne 'unsafe-inline'. Ein style="…"
im HTML wird stillschweigend verworfen. ALLES Gestalterische steht hier – auch die acht
Platzhalterfarben für Beiträge ohne Bild (.wl-ph-1 … .wl-ph-8, vergeben in wl_placeholder_class()).
================================================================================================= */
/* ---------- Farben ------------------------------------------------------------------------------
ALLES kommt aus dem Logo: der Verlauf Gelb → Koralle und die Limette. MEHR FARBEN GIBT ES
NICHT – jede weitere lässt die Seite beliebig wirken.
Drei Rollen, sauber getrennt:
• Koralle = das Interaktive (Links, aktive Zustände, Ränder)
• Gelb = das Auszeichnende (zusammen mit Koralle im Logo, Glanzlichter)
• Limette = das Signalisierende („kostenlos", Hauptknopf) – knallt und meint auch etwas
Die Grautöne sind WARM (ein Hauch Gelb), nicht kühl-lila: Kühles Grau neben Koralle wirkt
schmutzig, warmes Grau trägt sie. */
:root {
--wl-ink: #17141c; /* Kopf, Fußzeile, Schrift – fast schwarz mit warmem Stich */
--wl-ink-2: #241f2c;
--wl-paper: #fbf9f5; /* warmes Papier statt Blauweiß */
--wl-card: #ffffff;
--wl-line: #eae4da;
--wl-mut: #6e6960; /* auf Papier 5,4:1 – als Fließtext zulässig */
--wl-acc: #ff5c72; /* Koralle: Flächen, Ränder, aktive Zustände */
--wl-acc-2: #ffd93d; /* Gelb: zweite Logo-Farbe */
--wl-acc-3: #d9f24b; /* Limette: „kostenlos", Hauptknopf */
/* Koralle als SCHRIFT auf Weiß hat nur 3,1:1 und wäre unlesbar. Für Text deshalb die
abgedunkelte Fassung – 4,8:1. Das ist kein Schönheitsfehler, sondern der Grund für zwei
Variablen: Fläche und Schrift brauchen verschiedene Helligkeiten. */
--wl-link: #d1364d;
--wl-rad: 16px;
/* 1360 statt 1520: Bei 1520 kippte das Raster auf sehr breiten Schirmen in FÜNF Spalten
(5 × 268 px + Lücken = 1424) und die Seite zerlief. 1360 bleibt unter dieser Schwelle –
höchstens vier Spalten, atmet aber immer noch deutlich mehr als die alten 1180. */
--wl-max: 1360px;
--wl-logo: #ff5c72; /* Koralle – das Zielende des Marken-Verlaufs; färbt Akzente wie den
Strich unterm Zeitwort, damit sie zur Marke gehören */
}
@media (prefers-color-scheme: dark) {
:root {
--wl-paper: #100e13;
--wl-card: #1c1922;
--wl-line: #2f2935;
--wl-mut: #a09a90;
--wl-link: #ff8095; /* umgekehrt: auf Dunkel muss die Koralle HELLER werden */
}
body.wl { color: #f4f1ea; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.wl {
margin: 0;
background: var(--wl-paper);
/* Wie in der App: Der Body ist mindestens sichtbereichshoch und wiederholt seinen
Hintergrund nie – auf kurzen Seiten kachelte der Browser ihn sonst über die Leinwand. */
min-height: 100vh;
background-repeat: no-repeat;
color: var(--wl-ink);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) { body.wl { color: #f4f1ea; } }
body.wl a { color: inherit; text-decoration: none; }
body.wl img { display: block; max-width: 100%; }
/* EIN Container für alles – Kopfleiste, Bühne, Filter, Abschnitte, Fußzeile. Bliebe die
Kopfleiste als einzige randlos (Menü ganz außen, Inhalt darunter eingerückt), ließe genau
dieser Versatz die Seite eng wirken, obwohl sie es nicht ist. */
/* Bewusst als GRUPPE und nicht als Klasse im HTML: Eine im Markup vergessene Klasse ließe
den Bereich randlos über den Bildschirm laufen. Hier kann das nicht passieren – wer einen
Abschnitt anlegt, trägt ihn einmal hier ein. */
/* Banner und Karussell stehen INNERHALB eines .wl-sect („Nicht verpassen") und
dürfen sich deshalb nicht noch einmal selbst begrenzen – sie wären sonst schmaler als der
Abschnitt, in dem sie liegen. */
.wl-in,
.wl-top-in,
.wl-hero-in,
.wl-filters-in,
.wl-sect,
.wl-foot-in,
.wl-wrap {
width: min(100% - 2.4rem, var(--wl-max));
margin-inline: auto;
}
/* ---------- Kopfleiste ------------------------------------------------------------------------ */
.wl-top { background: var(--wl-ink); color: #fff; }
/* Band für angemeldete Gruppen, wenn das Portal für alle anderen zu ist. Es sitzt direkt unter
der Kopfleiste und trägt Gelb – die auszeichnende Farbe: kein Fehler, keine Warnung, sondern
„du siehst hier mehr als die anderen". Bewusst über die volle Breite und nicht als Kärtchen im
Inhalt: Es gilt für die ganze Seite, nicht für einen Abschnitt. */
.wl-intern { background: var(--wl-acc-2); color: var(--wl-ink); font-size: .82rem; line-height: 1.45; }
.wl-intern .wl-in { padding: .5rem 0; }
.wl-intern strong { font-weight: 800; }
.wl-top-in {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: .9rem 0;
}
/* Die Wortmarke. „was" weiß, der Punkt in Limette, „läuft" im Verlauf Gelb → Koralle
(die Verlaufs-Regel steht unten bei „Farbe der Wortmarke"). Sie steht in der
Kopfleiste UND in der Überschrift – deshalb erbt sie Größe und Gewicht vom Umfeld, statt
eigene Werte zu setzen. was/Punkt sind inline-block, damit die Klick-Ostereier sie
verwandeln können – innerhalb des nowrap unbedenklich (die Land/au-Falle betrifft nur
umbrechbare Wortmitten). */
.wl-mark { font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.wl-mark-was, .wl-mark-dot { display: inline-block; }
/* Der Punkt ist der „."-GLYPH der Schrift, bewusst: Ein gezeichneter Ersatz-Kreis (::after
über unsichtbarem Zeichen) schwebt je nach Umgebung neben der Grundlinie und wirkt in der
Größe fremd. Lieber der echte Glyph mit seinen System-Eigenheiten – unter Windows/Segoe
fällt er leicht oval aus – als eine Attrappe, die überall fast stimmt. */
.wl-mark-dot { color: var(--wl-acc-3); }
/* ---------- Ostereier an der großen Überschrift (Klick auf was / Punkt / läuft / Landau) ---- */
.wl-h1 .wl-mark-was, .wl-h1 .wl-mark-dot, .wl-h1 .wl-mark-w, .wl-h1-ort em { cursor: pointer; }
/* „was" wächst kurz, der Impuls hallt zeitversetzt in Punkt und Wort hinein. */
.wl-mark.is-hall .wl-mark-was { animation: wl-hall .5s cubic-bezier(.3,1.5,.5,1); }
.wl-mark.is-hall .wl-mark-dot { animation: wl-hall .5s cubic-bezier(.3,1.5,.5,1) .14s; }
.wl-mark.is-hall .wl-mark-w { animation: wl-hall .5s cubic-bezier(.3,1.5,.5,1) .28s; }
@keyframes wl-hall { 0%, 100% { transform: none; } 40% { transform: scale(1.16); } }
/* „läuft" nimmt sich beim Anklicken wörtlich: Es beugt sich vor und joggt ein paar federnde
Schritte auf der Stelle, dann richtet es sich wieder auf. Absichtlich NUR eine Neigung
plus Hüpfer – kein Weglaufen (das Wort müsste über den restlichen Satz hinweg) und kein
erneutes Rad (das wirkt wie ein Schluckauf, nicht wie Laufen). */
.wl-mark.is-los .wl-mark-w { animation: wl-lauf .75s ease-in-out; transform-origin: 18% 100%; }
@keyframes wl-lauf {
0%, 100% { transform: none; }
16% { transform: skewX(-10deg) scaleY(.95); }
32% { transform: skewX(-13deg) translateY(-.12em); }
48% { transform: skewX(-11deg) translateY(.01em) scaleY(.97); }
64% { transform: skewX(-13deg) translateY(-.08em); }
82% { transform: skewX(-6deg) translateY(0); }
}
/* Der Punkt fliegt wie ein angeschossener Ball davon: EINE Richtung, schräg nach oben raus,
dabei ausfaden – KEIN Bogen (hoch, dann runter), der liest sich wie ein Abprallen an einer
unsichtbaren Decke. Der Nachfolger fällt von oben ein und federt kurz nach. */
.wl-mark-dot.is-kick { animation: wl-dot-kick .64s cubic-bezier(.2,.5,.4,1) forwards; }
@keyframes wl-dot-kick {
0% { transform: none; opacity: 1; }
60% { opacity: .7; }
100% { transform: translate(1.9em, -1.6em); opacity: 0; }
}
.wl-mark-dot.is-fall { animation: wl-dot-fall .55s cubic-bezier(.34,1.4,.6,1); }
@keyframes wl-dot-fall {
0% { transform: translateY(-1.3em); opacity: 0; }
55% { transform: translateY(.1em); opacity: 1; }
78% { transform: translateY(-.07em); }
100% { transform: none; }
}
/* Die Landau-Blase: kleine Frage überm Wort, verschwindet nach 5 Sekunden von selbst.
Der Anker gilt NUR bei offener Blase (.is-pop, setzt das Skript): Ein dauerhaftes
position: relative gibt „in Landau?" eine eigene Render-Ebene, und beim Ebenen-Abbau
nach dem Buchstaben-Auftritt blitzt die linke Worthälfte kurz weg. */
.wl-h1-ort.is-pop { position: relative; }
.wl-stadt-pop {
position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
margin-bottom: .45rem; white-space: nowrap;
background: var(--wl-acc-3); color: var(--wl-ink); border: 0; cursor: pointer;
font: inherit; font-size: .32em; font-weight: 700; letter-spacing: 0;
padding: .55em 1em; border-radius: 99px; box-shadow: 0 8px 24px rgba(23,20,28,.35);
animation: wl-pop-auf .22s cubic-bezier(.34,1.5,.6,1);
}
.wl-stadt-pop::after { /* Sprechblasen-Zipfel */
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: .5em solid transparent; border-top-color: var(--wl-acc-3); border-bottom: 0;
}
@keyframes wl-pop-auf { from { opacity: 0; transform: translateX(-50%) translateY(.4em); } }
/* Die Marke in der Kopfleiste soll sich als klickbar zu erkennen geben: Sie hebt sich beim
Zeigen leicht, und der Punkt hüpft einmal. */
.wl-logo { font-size: 1.1rem; color: #fff; display: inline-block; transition: transform .16s ease; }
.wl-logo:hover { transform: scale(1.05); }
/* Der Hüpfer hängt an einer Skript-Klasse (mouseenter), NICHT an :hover: Nach einem Klick
auf die Marke lädt die Zielseite mit dem Zeiger noch über dem Logo – ein :hover-Auftritt
spielte dann sofort noch einmal, was bei schnellem Klicken wie ein Doppel-Hüpfer wirkt.
mouseenter feuert erst bei echter Zeiger-Bewegung ins Element. */
.wl-logo.is-gruss .wl-mark-dot { animation: wl-dot-hop .4s ease; }
@keyframes wl-dot-hop { 40% { transform: translateY(-.18em); } }
.wl-nav { display: flex; align-items: center; gap: 1.1rem; font-size: .84rem; flex-wrap: wrap; }
.wl-nav a { color: #b5aea4; }
.wl-nav a:hover, .wl-nav a.on { color: #fff; }
.wl-cta {
background: var(--wl-acc-3); color: var(--wl-ink) !important; font-weight: 700; font-size: .8rem;
padding: .45rem .85rem; border-radius: 99px;
}
.wl-cta:hover { filter: brightness(1.06); }
/* Auf sehr schmalen Geräten reicht die Zeile nicht für Marke UND alle drei Verweise – dann
flog ausgerechnet die MARKE heraus. Stattdessen weicht „Veranstaltungen": Ein Klick auf die
Marke führt zur selben Startseite, der Verweis ist dort schlicht doppelt. Die Grenze liegt
knapp unter der Breite, ab der alles nebeneinander passt (~420 px bei Standardschrift) –
wer mehr Platz hat, sieht weiterhin alle drei. */
@media (max-width: 419px) { .wl-nav-events { display: none; } }
/* „Über" ist Kür, nicht Pflicht: nur am Desktop und nur, wenn die Zeile Luft hat – am Handy
und auf schmalen Tablets trüge er zur Enge bei. Der Fußzeilen-Link führt überall hin. */
@media (max-width: 899px) { .wl-nav-ueber { display: none; } }
/* Das Wort-Rad – wie das Auswahlmenü am iPhone.
ENTSCHEIDEND ist, was NICHT im Textfluss steht: Das Rad liegt ABSOLUT über dem Zielwort.
Zwei Dinge gehen sonst kaputt –
• Der Kasten darf weder feste Höhe noch `overflow` bekommen: Ein Inline-Element mit
`overflow: hidden` richtet sich an seiner Unterkante aus statt an der Schriftlinie, „läuft"
säße tiefer als „was.". So groß wie das Wort, sitzt er von selbst richtig.
• Der Kasten ist von Anfang bis Ende genau so breit wie „läuft"; die längeren Wörter ragen
darüber hinaus, statt zu schieben. Änderte sich die Breite, bräche die Überschrift anders
um und die zweite Zeile spränge. Damit die überstehenden Wörter nichts überdecken, liegt
der Rest des Satzes so lange auf durchsichtig und blendet erst ein, wenn das Rad steht.
Die Spalte läuft VERKEHRT HERUM (column-reverse): „läuft" – das letzte Wort der Liste – steht
dadurch oben und ist der Ruhezustand. Ohne JavaScript und bei „Ruhe bewahren" liest man sofort
„was.läuft"; das Rad dreht sich nur auf den Zustand zu, der ohnehin dastünde. */
/* Das Tempo steht in Variablen, nicht in den Regeln: Wer die Seite zum ersten Mal aufruft, soll
die Marke in Ruhe lesen – wer nur auf „Diesen Monat" klickt, will die Ansicht sehen und nicht
noch einmal denselben Vorspann. index.php setzt die Werte am Element neu; die Voreinstellung
hier ist die gemütliche Ankunft. */
.wl-mark { --wl-zeile: 1.16em; --wl-rad-t: .34s; }
.wl-mark-w { display: inline-block; }
/* Die Zeilenhöhe MUSS hier dieselbe sein wie im Rad. Die Überschrift läuft mit 1.06, die
Rad-Zeilen mit 1.16 – dadurch lagen die Schriftlinien 0,05 em auseinander, und das Wort
wanderte beim Überblenden sichtbar nach unten. Beides auf --wl-zeile, dann liegen sie
aufeinander und der Wechsel ist unsichtbar. */
.wl-mark-anim .wl-mark-w { position: relative; line-height: var(--wl-zeile); }
/* Das echte Wort: es allein bestimmt Breite und Schriftlinie.
KEINE Überblendung – der Wechsel zwischen Rad und echtem Wort ist HART. Es sind zwei Kopien
DESSELBEN Wortes an derselben Stelle: Zwei halbdurchsichtige Lagen ergeben nie wieder das
volle Wort, sondern eine Delle in der Dichte – „läuft" scheint am Ende kurz weg- und wieder
aufzupoppen. Beim Verlaufs-Logo fällt das besonders auf, weil der Farbverlauf mit ausdünnt.
Ein harter Schnitt zwischen zwei identischen Darstellungen ist unsichtbar. */
.wl-mark-anim.is-rad .wl-mark-live { opacity: 0; }
/* Das Rad: außerhalb des Textflusses, unten bündig mit dem Zielwort, nach oben offen. */
.wl-mark-rad {
position: absolute; left: 0; bottom: 0; opacity: 0; pointer-events: none;
height: calc(var(--wl-zeile) * 2); overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 54%);
mask-image: linear-gradient(to bottom, transparent 4%, #000 54%);
}
.wl-mark-anim.is-rad .wl-mark-rad { opacity: 1; }
.wl-mark-roll {
display: flex; flex-direction: column-reverse;
transition: transform var(--wl-rad-t) cubic-bezier(.3,.72,.34,1);
}
/* Der Verlauf im Rad – eine BEWUSSTE Ungleichheit: Die Spalte dehnt jedes Wort auf die Breite
des längsten, der Verlauf wird am Kasten ausgeschnitten – jedes Wort zeigt ihn dadurch
anders angeschnitten – das ist so gewollt. NUR das Zielwort ist textbreit: „läuft", das
LETZTE der Liste, das durch column-reverse oben steht. Es trägt damit schon im Rad exakt den
Verlauf des echten Worts, und der harte Wechsel am Ende bleibt unsichtbar. */
.wl-mark-item:last-child { align-self: flex-start; }
.wl-mark-item { display: block; height: var(--wl-zeile); line-height: var(--wl-zeile); white-space: nowrap; }
/* Der Rest der Überschrift wartet, solange sich das Rad dreht – nur Deckkraft, keine Größe:
So kann sich am Umbruch nichts verschieben. */
.wl-h1-rest { transition: opacity var(--wl-rest-t, .3s) ease; }
.wl-h1.is-warten .wl-h1-rest { opacity: 0; }
/* ---------- Farbe der Wortmarke ---------------------------------------------------------------
Der Verlauf Gelb → Koralle ist gesetzt; es gibt keine umschaltbaren Varianten.
Die Regel gilt für .wl-mark-w (die schlichte Marke) UND .wl-mark-item (die Wörter im Rad),
sonst bliebe die Animation farblos. */
.wl-mark-w, .wl-mark-item {
background: linear-gradient(92deg, #ffd93d, #ff5c72 75%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---------- Bühne ----------------------------------------------------------------------------- */
/* Die Bühne ist keine flache dunkle Fläche: Zwei weiche Lichter aus den Logo-Farben liegen
darin – Gelb links unten, Koralle rechts oben. Sie sind so schwach, dass man sie nicht als
„Farbverlauf" liest, sondern nur merkt, dass die Fläche lebt. Sie liegen in einem ::before,
damit der Text darüber nicht mit durchsichtig wird. */
.wl-hero { position: relative; background: var(--wl-ink); color: #fff; padding: 1.2rem 0 2.8rem; overflow: hidden; }
/* Am Handy rückt die Bühne zusammen: ein VIERTEL weniger Luft zwischen Kopfleiste und
Überschrift, die HÄLFTE unter der Suche. Die Rechnung: Oben wirken Bühnen-Polster (1.2rem)
plus Überschrift-Abstand (.6rem) = 1.8rem zusammen → 1.35rem, also Polster auf .75rem.
Unten schlicht 2.8rem → 1.4rem. */
@media (max-width: 640px) {
.wl-hero { padding: .75rem 0 1.4rem; }
}
.wl-hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60% 120% at 8% 118%, rgba(255,217,61,.14), transparent 60%),
radial-gradient(52% 110% at 88% -18%, rgba(255,92,114,.24), transparent 62%);
}
.wl-hero-in { position: relative; padding: 0; }
.wl-h1 {
font-weight: 800; font-size: clamp(1.7rem, 5.2vw, 2.9rem); line-height: 1.06;
letter-spacing: -.03em; margin: .6rem 0 .55rem; max-width: 34ch;
}
/* Die Wortmarke in der Überschrift ist GRÖSSER als der Rest des Satzes – sie ist das Logo,
der Satz nur ihr Rahmen. Gilt nur hier; Kopfleiste und Fußzeile bleiben unberührt. In em,
damit alles Innere (etwa die Rad-Zeilenhöhe --wl-zeile) einfach mitwächst. */
.wl-h1 .wl-mark { font-size: 1.28em; }
.wl-h1 em { font-style: normal; color: var(--wl-acc-3); }
/* KEIN Schein hinter „läuft" – kein ::before mit radial-gradient am Wort. Die Bühne
leuchtet allein über die beiden festen Lichter in .wl-hero::before. */
/* Das Zeitwort – „heute", „diese Woche", „diesen Monat", „am Wochenende".
Es ist das einzige Wort im Satz, das sich beim Umschalten der Ansicht ändert, also bekommt es
auch einen eigenen Auftritt: Es rückt aus der Unschärfe von unten in die Zeile, und ein Strich
in der Markenfarbe zieht darunter durch und verschwindet wieder.
Bewegt werden ausschließlich Deckkraft, Unschärfe und Verschiebung – nie eine Größe. Deshalb
kann sich am Zeilenumbruch nichts verschieben, obwohl „am Wochenende" mehr als doppelt so lang
ist wie „heute". `nowrap` hält die Wortgruppe zusammen: „diese\nWoche" wäre unschön.
Der Strich liegt in einem ::after und damit außerhalb des Textflusses. */
.wl-h1-zeit { position: relative; display: inline-block; white-space: nowrap; }
.wl-h1-zeit::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -.04em; height: .06em;
background: var(--wl-logo); border-radius: 1em;
transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.wl-h1.is-zeit .wl-h1-zeit { animation: wl-zeit-in .52s cubic-bezier(.2,.72,.3,1) both; }
.wl-h1.is-zeit .wl-h1-zeit::after { animation: wl-zeit-strich .8s cubic-bezier(.2,.72,.3,1) both; }
@keyframes wl-zeit-in {
from { opacity: 0; filter: blur(8px); transform: translateY(.24em); }
to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes wl-zeit-strich {
0% { transform: scaleX(0); opacity: 0; }
14% { opacity: 1; }
50% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1); opacity: 0; }
}
/* „Landau" tritt buchstabenweise auf, von links nach rechts – kurz und leise, ein Nicken,
kein zweiter Vorspann. Das Skript zerlegt das Wort erst beim Start in Spannen (im HTML
bleibt es ein Wort, ohne JavaScript steht es einfach da) und staffelt die Verzögerungen
über die CSSOM – das ist unter der CSP erlaubt, nur style="…"-ATTRIBUTE werden verworfen.
Die Spannen MÜSSEN gewöhnliche Inline-Elemente bleiben und die Animation NUR die Deckkraft
bewegen – kein Anheben, denn das bräuchte inline-block, und Atomic-Inline-Kästen erzeugen
Umbruchgelegenheiten ZWISCHEN sich: „Landau" bräche am Handy mitten im Wort („Land / au?").
Gewöhnliche Inline-Spannen brechen wie das Wort selbst, nämlich gar nicht; nowrap ist der
doppelte Boden. */
/* „in Landau?" bricht als GANZES um (beide Startseiten tragen die Klasse im Markup):
Ein einzelnes „in" am Zeilenende sieht verloren aus. */
.wl-h1-ort { white-space: nowrap; }
.wl-h1-stadt { white-space: nowrap; }
/* Versteckt sind die Buchstaben NUR, solange der Auftritt noch bevorsteht (:not(.is-zeit)).
Feuert die Animation dann aus irgendeinem Grund nicht (Browser-Laune beim Einfügen samt
Klasse im selben Moment), stehen die Buchstaben trotzdem da – ohne Auftritt statt gar
nicht. Ein unsichtbares „Landau" wäre der teuerste Preis für eine Spielerei.
.wl-h1-frage ist das Fragezeichen: Es MUSS als letztes Zeichen mit auftreten, sonst hängt es
während des Auftritts allein neben dem freigehaltenen Loch („in ?") und sieht nach
Darstellungsfehler aus. */
.wl-h1:not(.is-zeit) .wl-h1-stadt span, .wl-h1:not(.is-zeit) .wl-h1-frage { opacity: 0; }
.wl-h1.is-zeit .wl-h1-stadt span, .wl-h1.is-zeit .wl-h1-frage { animation: wl-stadt-in .26s ease-out both; }
@keyframes wl-stadt-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Die Begrenzungen sind Absicht – die Zahlen gehören aber zur Container-Breite und müssen
mitwandern, wenn die sich ändert.
Warum überhaupt begrenzt: Eine Textzeile über die volle Breite eines großen Bildschirms
liest sich schlecht – das Auge findet den Zeilenanfang nicht wieder. Deshalb bleibt die
Fließtext-Zeile bei rund 58 Zeichen; die Überschrift darf breiter, sie wird ohnehin
überflogen und nicht gelesen. */
.wl-hero p { color: #cdc6bb; font-size: .95rem; max-width: 58ch; margin: 0 0 1.35rem; }
/* Die Suche ist EIN Bauteil, nicht zwei. Ein dunkles Eingabefeld und ein dunkler Knopf mit
Lücke dazwischen wären beide kaum vom dunklen Hintergrund zu unterscheiden – das Feld sähe
aus wie ein Schatten und der Knopf wie eine Beschriftung. Eine helle Kapsel umschließt
deshalb beides, die Lupe sagt ohne
Wort, worum es geht, und der Knopf trägt den Logo-Verlauf: Er ist das einzige farbige Element
der Bühne und damit unmissverständlich das, was man drückt. */
.wl-suche {
display: flex; align-items: center; gap: .55rem; max-width: 620px;
background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
border-radius: 99px; padding: .3rem .3rem .3rem 1rem;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Der Fokusring liegt AUSSEN als Schatten, nicht als Rahmen: Ein dickerer Rahmen würde die
Kapsel um zwei Pixel wachsen lassen und alles daneben verschieben. */
.wl-suche:focus-within {
background: rgba(255,255,255,.15); border-color: var(--wl-acc);
box-shadow: 0 0 0 4px rgba(255,92,114,.2);
}
.wl-suche-i {
flex: none; width: 19px; height: 19px; color: #a49d92;
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.wl-suche:focus-within .wl-suche-i { color: #fff; animation: wl-lupe-tilt .45s ease; }
/* Die Lupe kippt kurz an, wenn man ins Suchfeld klickt – einmal je Fokus. */
@keyframes wl-lupe-tilt {
0%, 100% { transform: none; }
35% { transform: rotate(-16deg); }
70% { transform: rotate(8deg); }
}
.wl-suche input[type="search"], .wl-suche input[type="text"] {
flex: 1; min-width: 0; background: none; border: 0; outline: none;
color: #fff; padding: .5rem 0; font-size: .95rem; font-family: inherit;
}
.wl-suche input::placeholder { color: #8f8880; }
/* Das Kreuzchen, das Safari in ein type=search malt, sitzt auf hellem Grund und wäre auf der
dunklen Kapsel unsichtbar. */
.wl-suche input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.wl-suche button {
flex: none; border: 0; border-radius: 99px; cursor: pointer; font-family: inherit;
font-weight: 800; font-size: .85rem; padding: .62rem 1.25rem; color: var(--wl-ink);
background: linear-gradient(96deg, var(--wl-acc-2), var(--wl-acc) 88%);
}
.wl-suche button:hover { filter: brightness(1.07); }
/* ---------- Banner (Ankündigung) --------------------------------------------------------------
Der Banner als SCHLAGZEILEN-PLAKAT, in derselben Sprache wie der Rest der Seite: Das Bild
füllt die GANZE Karte (Bild zuerst), darüber liegt von links ein Tinten-Scrim, damit die
Schrift auf jedem Motiv sitzt. Links läuft die Verlaufs-Kante Gelb → Koralle als
Plakat-Merkmal, über dem Titel steht der aus von/bis abgeleitete Zeitraum, und ein Ziel
bekommt eine echte „Mehr dazu"-Pille. Ohne Bild trägt die Karte die dunkle Fläche mit den
Logo-Lichtern – dasselbe Mittel wie bei den Kacheln ohne Bild.
Scrim UND Kante wohnen im ::after (zwei background-Schichten): Ein ::before läge UNTER
dem (Pseudo-Elemente malen vor den echten Kindern), der Scrim muss aber DARÜBER. */
.wl-banners { display: grid; gap: .8rem; margin: 1.2rem auto .2rem; }
.wl-banner {
position: relative; display: block; overflow: hidden; border-radius: var(--wl-rad);
min-height: 150px;
background-color: var(--wl-ink);
background-image: radial-gradient(85% 150% at 8% 135%, rgba(255,217,61,.30), transparent 62%),
radial-gradient(60% 130% at 78% -30%, rgba(255,92,114,.30), transparent 64%);
transition: transform .16s ease, box-shadow .16s ease;
}
a.wl-banner:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23,20,28,.22); }
.wl-banner-bild {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .25s ease;
}
a.wl-banner:hover .wl-banner-bild { transform: scale(1.03); }
.wl-banner::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, var(--wl-acc-2), var(--wl-acc) 75%) left / 5px 100% no-repeat,
linear-gradient(88deg, rgba(23,20,28,.94) 22%, rgba(23,20,28,.55) 52%, rgba(23,20,28,.06) 80%);
}
/* Ohne Bild braucht es keinen Scrim – der würde nur die Marken-Lichter ersäufen. Übrig
bleibt die Kante. (Ältere Browser ohne :has() zeigen den Scrim mit – nur dunkler, nie kaputt.) */
.wl-banner:not(:has(.wl-banner-bild))::after {
background: linear-gradient(180deg, var(--wl-acc-2), var(--wl-acc) 75%) left / 5px 100% no-repeat;
}
.wl-banner-t {
position: relative; z-index: 1; padding: 1.25rem 1.4rem 1.25rem 1.7rem; color: #fff;
max-width: 68%; min-height: 150px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .3rem;
}
.wl-banner-kick {
font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
color: var(--wl-acc-2);
}
.wl-banner-t strong {
font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800;
letter-spacing: -.03em; line-height: 1.12;
}
/* AUSDRÜCKLICH nur der Untertitel – ein allgemeines `.wl-banner-t > span` traf auch Kicker
und CTA-Pille und schlug deren Farben per Spezifität: helle Schrift auf Limette. */
.wl-banner-sub { font-size: .86rem; color: rgba(255, 255, 255, .82); }
.wl-banner-cta {
margin-top: .55rem; display: inline-flex; align-items: center; gap: .45em;
font-size: .78rem; font-weight: 800; color: var(--wl-ink);
background: var(--wl-acc-3); padding: .45em 1em; border-radius: 99px;
}
.wl-banner-cta i { font-style: normal; transition: transform .16s ease; }
a.wl-banner:hover .wl-banner-cta i { transform: translateX(3px); }
@media (max-width: 640px) {
/* Am Handy trägt der Scrim mehr Tinte in die Mitte, weil der Text die volle Breite nutzt –
das Bild bleibt vollflächig, nur die Lesbarkeitsschicht wird kräftiger. */
.wl-banner-t { max-width: 100%; padding-right: 1.2rem; }
.wl-banner::after {
background:
linear-gradient(180deg, var(--wl-acc-2), var(--wl-acc) 75%) left / 5px 100% no-repeat,
linear-gradient(88deg, rgba(23,20,28,.94) 30%, rgba(23,20,28,.7) 62%, rgba(23,20,28,.22) 92%);
}
}
/* ---------- Filterleiste ---------------------------------------------------------------------- */
/* Die Leiste bleibt stehen und liegt über den Kacheln – deshalb ist sie durchscheinend mit
Weichzeichner statt deckend weiß. Man sieht, dass sich darunter etwas bewegt, und die Leiste
wirkt nicht wie ein zweiter Seitenkopf. */
.wl-filters {
position: sticky; top: 0; z-index: 5;
background: rgba(251, 249, 245, .82);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--wl-line); padding: .58rem 0;
}
@media (prefers-color-scheme: dark) { .wl-filters { background: rgba(16, 14, 19, .82); } }
/* DREI GRUPPEN statt einer Reihe aus fünfzehn gleichen Knöpfen: Stünden Zeitraum, Kategorie
und Eigenschaften ununterscheidbar nebeneinander, müsste man jeden einzeln lesen, um zu
merken, dass „Diese Woche" und „Sport" gar nicht dieselbe Art von Entscheidung sind. */
.wl-filters-in { display: flex; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.wl-filters-in::-webkit-scrollbar { display: none; }
/* Ab dieser Breite passt alles ohne Schieben – dann darf es umbrechen statt zu verstecken.
Ein waagerechtes Rollfeld ohne sichtbaren Hinweis versteckt Möglichkeiten, und auf einem
großen Schirm gibt es dafür keinen Grund. */
@media (min-width: 1080px) {
/* Sobald gefiltert wird, kommt „Alles zurücksetzen" dazu und die Leiste braucht eine zweite
Zeile. Das ist in Ordnung – man sieht dann ohnehin auf die Filter – aber sie soll dabei
nicht zum Block werden, deshalb die knappe Zeilenlücke. Ohne Filter bleibt es einzeilig. */
.wl-filters-in { flex-wrap: wrap; overflow: visible; row-gap: .42rem; }
}
.wl-fdiv { flex: none; width: 1px; height: 22px; background: var(--wl-line); margin: 0 .2rem; }
/* Ausgeblendet wird gezielt nur der OBERSTE Trenner (siehe Handy-Block). Eine pauschale
Regel „unter 1080 px kein Trenner" überstimmte die gezielte Regel für die zweite
Handy-Zeile, und der Trenner zwischen Schaltern und Kategorien wäre nie zu sehen. */
/* Am Rechner lösen sich die beiden Behälter auf: Alles steht in EINER Reihe, so als gäbe es
sie nicht. Kein margin-left:auto – das schiebt die Gruppe bei einem Umbruch allein in eine
zweite Zeile rechts, und das sieht nach Versehen aus. */
.wl-frest { display: contents; }
.wl-fend { flex: none; display: flex; align-items: center; gap: .4rem; }
/* ---- Am Handy: ZWEI Zeilen -------------------------------------------------------------------
Der Zeit-Schalter allein ist breiter als ein Handy-Bildschirm. In einer einzigen schiebbaren
Reihe sähe man deshalb nur ihn – dass dahinter noch sieben Kategorien und die zwei beliebten
Schalter „Kostenlos" und „Barrierefrei" stehen, wäre nicht zu ahnen.
Deshalb: Zeile 1 der Zeitraum, Zeile 2 alles andere – und dort stehen die beiden Schalter VORNE
(order: -1), weil sie am häufigsten gebraucht werden. Die Kategorien schließen sich an und
werden geschoben; der weiche Rand rechts sagt, dass da noch mehr kommt.
Die Grenze ist bewusst dieselbe, ab der eine Zeile wirklich reicht (1080 px). Mit 860 px
bliebe dazwischen ein Bereich, in dem es zwar eine Zeile ist, die Schalter aber trotzdem
rechts außer Sicht liegen – also dasselbe Problem, nur auf dem Tablett. */
@media (max-width: 1079px) {
.wl-filters-in { flex-direction: column; align-items: stretch; gap: .4rem; overflow: visible; }
.wl-filters-in > .wl-fdiv { display: none; }
.wl-seg {
align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.wl-seg::-webkit-scrollbar { display: none; }
/* Zeile 2 hat nur DREI Bedienelemente – die passen ohne Schieben nebeneinander. Deshalb
hier weder overflow noch weicher Rand: Beides würde das aufgeklappte Kategorie-Menü
an der Kante abschneiden. Reicht der Platz auf sehr
schmalen Geräten doch nicht, bricht es um statt zu schieben. */
.wl-frest { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.wl-fend { display: flex; align-items: center; gap: .4rem; }
}
/* Der Zeitraum: EINE Entscheidung, also EIN Schalter mit Stufen – nicht fünf lose Knöpfe.
Man sieht auf einen Blick, dass genau eine Stufe aktiv ist und welche Alternativen es gibt. */
.wl-seg {
flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px;
background: var(--wl-line);
}
.wl-seg-i {
white-space: nowrap; font-size: .79rem; font-weight: 600; padding: .38rem .72rem;
border-radius: 99px; color: var(--wl-mut);
}
.wl-seg-i:hover { color: var(--wl-ink); }
@media (prefers-color-scheme: dark) { .wl-seg-i:hover { color: #fff; } }
.wl-seg-i.on { background: var(--wl-card); color: var(--wl-ink); box-shadow: 0 1px 3px rgba(23,20,28,.16); }
@media (prefers-color-scheme: dark) { .wl-seg-i.on { color: #f4f1ea; } }
/* Die Kategorien: neutrale Kapsel mit farbigem Punkt, KEINE farbige Füllung mehr.
Sieben Pastellflächen nebeneinander lassen die Leiste neben dem Zeit-Schalter altbacken
wirken: Der Schalter ist ein Bauteil, getönte Chips sind Dekoration. Sieben Flächen sind
außerdem viel Farbe für etwas, das man nur zum Auswählen ansieht, und sie konkurrieren mit
den Kacheln darunter.
Die Farbe verschwindet aber nicht, sie wird zum MERKMAL statt zur Fläche: derselbe Punkt, den
die Kachel schon für die Veranstalter-Art benutzt (.wl-pip). Ein Gedanke, zweimal verwendet. */
.wl-chip {
flex: none; display: inline-flex; align-items: center; gap: .45rem;
white-space: nowrap; font-size: .8rem; font-weight: 600; padding: .42rem .7rem;
border-radius: 99px; border: 1px solid var(--wl-line); color: var(--wl-mut); background: transparent;
transition: border-color .12s ease, color .12s ease;
}
.wl-chip:hover { border-color: var(--wl-acc); color: var(--wl-link); }
.wl-chip.on { background: var(--wl-ink); color: #fff; border-color: var(--wl-ink); }
.wl-cat-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wl-c); }
/* Ist die Kategorie gewählt, liegt ihr Punkt auf dunklem Grund – im Feld selbst wie im
aufgeklappten Menü. Dort braucht es die helle Fassung der Farbe, sonst versinkt er. */
.wl-drop.on > summary .wl-cat-punkt,
.wl-drop-i.on .wl-cat-punkt { background: var(--wl-c-d); }
/* Die beiden Eigenschaften-Schalter: größer und kräftiger als alles andere in der Leiste.
Sie werden am häufigsten gebraucht – „kostenlos" und „barrierefrei" sind für viele die
eigentliche Frage – und dürfen deshalb nicht als zwei von neun gleichen Chips am Rand stehen.
Eingeschaltet werden sie LIMETTE, nicht dunkel wie die übrigen aktiven Zustände: Limette ist
in diesem Entwurf die Signalfarbe, sie klebt auch als „kostenlos" auf den Kacheln. Damit sagt
die Leiste dieselbe Sprache wie das Ergebnis darunter.
Die Rahmenstärke ist in beiden Zuständen gleich – sonst wüchse der Knopf beim Einschalten und
die Leiste bräche um. */
.wl-prom { font-size: .84rem; font-weight: 700; padding: .5rem .95rem; border-width: 1.5px; }
.wl-prom:hover { border-color: var(--wl-acc); }
.wl-prom.on {
background: var(--wl-acc-3); border-color: var(--wl-acc-3); color: var(--wl-ink);
box-shadow: 0 1px 3px rgba(23,20,28,.14);
}
@media (prefers-color-scheme: dark) { .wl-prom.on { color: var(--wl-ink); } }
/* ---- Kategorie als Aufklapp-Menü -------------------------------------------------------------
Sieben Chips füllten die halbe Leiste. Eingeklappt ist es EIN Feld; ist eine Kategorie
gewählt, steht sie samt Punkt darin, man sieht den Zustand also ohne zu öffnen.
Kein Skript – siehe wl_kat_dropdown(): Unter der strengen CSP wäre ein Menü, das erst durch
JavaScript aufgeht, ohne JavaScript unbedienbar. */
.wl-drop { position: relative; flex: none; }
.wl-drop > summary {
display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none;
white-space: nowrap; font-size: .8rem; font-weight: 600; padding: .42rem .7rem;
border-radius: 99px; border: 1px solid var(--wl-line); color: inherit;
}
.wl-drop > summary::-webkit-details-marker { display: none; }
.wl-drop > summary:hover { border-color: var(--wl-acc); }
.wl-drop.on > summary { background: var(--wl-ink); color: #fff; border-color: var(--wl-ink); }
/* Der Pfeil dreht sich beim Öffnen – das ist die einzige Rückmeldung, die ein von
sich aus nicht mitbringt. */
.wl-drop-pfeil {
width: 0; height: 0; margin-left: .1rem;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; transition: transform .14s ease;
}
.wl-drop[open] .wl-drop-pfeil { transform: rotate(180deg); }
.wl-drop-p {
position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; min-width: 190px;
background: var(--wl-card); border: 1px solid var(--wl-line); border-radius: 12px;
padding: .35rem; box-shadow: 0 12px 28px rgba(23,20,28,.16);
display: flex; flex-direction: column;
}
.wl-drop-i {
display: flex; align-items: center; gap: .5rem; white-space: nowrap;
font-size: .84rem; font-weight: 600; padding: .42rem .6rem; border-radius: 8px;
}
.wl-drop-i:hover { background: var(--wl-paper); }
.wl-drop-i.on { background: var(--wl-ink); color: #fff; }
/* Rechts darf das Menü nicht aus dem Bild laufen – am Handy sitzt es deshalb rechtsbündig. */
@media (max-width: 520px) { .wl-drop-p { left: auto; right: 0; } }
/* Das Etikett auf der Detailseite ist etwas anderes als ein Filter: Es sagt, WAS das hier ist,
und man kann es nicht drücken. Deshalb behält es die getönte Fläche – dort ist Farbe eine
Auskunft und keine Verzierung. */
.wl-badge {
display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700;
padding: .3rem .7rem; border-radius: 99px;
background: var(--wl-c-bg, #efeae1); color: var(--wl-c, #5c564b);
}
/* Eigenschaften sind Schalter – erkennbar an derselben Füllung wie überall sonst, NICHT an
einem zusätzlichen Häkchen.
Ein Häkchen macht den Schalter breiter, sobald er aktiv ist – und ein Bedienelement, das
seine Breite ändert, bricht die Leiste um, sobald beide Schalter an sind.
Gefüllt = an, das genügt: Die Kategorien machen es genauso, und die Bedeutung steht für
Vorlesegeräte ohnehin in aria-pressed. Die Leiste hat damit in JEDEM Zustand dieselbe
Breite – das ist mehr wert als die feine Unterscheidung zwischen Auswahl und Schalter. */
/* Zurücksetzen erscheint nur, wenn es etwas zurückzusetzen gibt – und zwar in der Zeile über
den Treffern, nicht in der Filterleiste: Dort ließe es die Leiste bei jedem gesetzten Filter
umbrechen (siehe index.php). Oben sitzt es neben der Überschrift, wo ohnehin Platz ist. */
.wl-fclear { white-space: nowrap; font-size: .8rem; font-weight: 600; color: var(--wl-link); }
.wl-fclear:hover { text-decoration: underline; }
/* Kategorien tragen ihre eigene Farbe – die Zuordnung steht in wl_cats().
Die Palette liegt jetzt in der warmen Familie (Koralle, Gelb, Limette, Sand, Terrakotta) mit
EINEM kühlen Ton für „Markt & Tausch", damit die Reihe nicht monoton wird. Sieben Farben
aus sieben verschiedenen Familien ergäben dagegen einen Regenbogen-Eindruck.
Alle Textfarben sind so gewählt, dass sie auf ihrem eigenen Feld über 4,5:1 liegen. */
/* Jede Kategorie legt ihre zwei Werte EINMAL fest. Chip und Kachel-Zeile greifen beide darauf zu –
sonst stünde dieselbe Farbe an zwei Stellen und eine davon würde beim nächsten Mal vergessen. */
/* Drei Werte je Kategorie: Schrift auf hell, Feldfarbe, Schrift auf dunkel. Der dritte wird
gebraucht, weil die Kategorie-Zeile auf der Kachel direkt auf dem Seitenhintergrund steht –
im Dunkelmodus wäre das dunkle Oliv dort unlesbar. Der Chip dagegen behält seine Farbe, denn
er bringt sein helles Feld mit. */
.c-party { --wl-c: #bf2b41; --wl-c-bg: #ffe4e7; --wl-c-d: #ff8093; }
.c-kultur { --wl-c: #a4501a; --wl-c-bg: #ffe7d3; --wl-c-d: #f5a25f; }
.c-sport { --wl-c: #4d6b0a; --wl-c-bg: #eaf5c9; --wl-c-d: #b6d95a; }
.c-bildung { --wl-c: #8a6100; --wl-c-bg: #fff0c9; --wl-c-d: #ffd166; }
.c-ehrenamt { --wl-c: #b03f1e; --wl-c-bg: #fddcd3; --wl-c-d: #ff9673; }
.c-markt { --wl-c: #10646f; --wl-c-bg: #dceef2; --wl-c-d: #6ec7d6; }
.c-sonstiges { --wl-c: #5c564b; --wl-c-bg: #efeae1; --wl-c-d: #b8b0a3; }
.wl-chip.c-party.on, .wl-chip.c-kultur.on, .wl-chip.c-sport.on, .wl-chip.c-bildung.on,
.wl-chip.c-ehrenamt.on, .wl-chip.c-markt.on, .wl-chip.c-sonstiges.on {
background: var(--wl-ink); color: #fff;
}
/* ---------- Abschnitte und Kachelraster ------------------------------------------------------- */
.wl-sect { padding: 1.4rem 0 0; }
.wl-sect-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
/* Größer als die Kacheltitel (1rem): Mit 1,1rem sähe eine Abschnitts-Überschrift daneben
nicht mehr wie eine Überschrift aus. */
.wl-sect-h h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
/* nowrap: Am Handy bricht „Alle Kurse →" hinter der zweizeiligen Überschrift sonst um und der
Pfeil steht allein in einer Zeile. Der Link ist kurz – er darf nie brechen. */
.wl-sect-h a { font-size: .8rem; color: var(--wl-link); font-weight: 600; white-space: nowrap; flex: none; }
/* Rechts neben der Überschrift können ZWEI Links stehen (kurse.php: „Filter zurücksetzen" +
„Eigenen Kurs eintragen") – als eigene kleine Reihe, damit sie nicht aneinanderkleben.
Die REIHE darf umbrechen (am Handy stehen die beiden dann rechtsbündig untereinander),
die einzelnen Links bleiben ungebrochen – zusammen sind sie schmaler als 375 px nie. */
.wl-sect-links { display: flex; align-items: baseline; gap: .3rem 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1.7rem 1.3rem; }
/* Zuordnung Text→Bild über das NÄHE-Gesetz:
Der Abstand IN der Kachel (Bild→Text, .5rem) ist deutlich kleiner als der zwischen den
Zeilen (2.4rem am Desktop) – so liest sich jedes Duo als Einheit, ohne dass irgendeine
Trenn-Optik an die Kachel muss (die bleibt gesperrt, siehe ENDSTAND-Kommentar unten). */
@media (min-width: 621px) { .wl-grid { row-gap: 2.4rem; } }
/* Die Kachel ist KEIN Kasten: Ein weißes Feld mit Rahmen, Bild oben bündig eingeklebt, Text
eng darunter, ergäbe auf einer ohnehin weißen Seite ein Raster aus Umrissen, das an eine
Tabelle erinnert.
Stattdessen: das Bild ist das einzige Objekt mit Kante, der Text steht frei auf dem Papier.
Getrennt werden die Kacheln durch Luft, nicht durch Linien. Das ist der Unterschied zwischen
einem Formular und einem Magazin. */
.wl-card { display: flex; flex-direction: column; gap: .5rem; }
.wl-card-img {
position: relative; aspect-ratio: 3 / 2; border-radius: var(--wl-rad); overflow: hidden;
background-color: var(--wl-ink-2);
transition: transform .16s ease, box-shadow .16s ease;
}
.wl-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ein 1px-Innenring NUR auf dem Bild – er fasst vor allem helle Plakate, die sonst mit dem
Seitenhintergrund verschwimmen.
Die Kachel selbst bleibt nackt (siehe ENDSTAND-Kommentar unten). Als Overlay-::after,
nicht als Ring am Container: Ein inset-Schatten dort läge UNTER dem absoluten .
Kein z-index – die Chips (.wl-day/.wl-free/.wl-card-tipp, z-index 1) bleiben darüber. */
.wl-card-img::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(23, 20, 28, .1);
pointer-events: none;
}
@media (prefers-color-scheme: dark) {
.wl-card-img::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
}
/* Es hebt sich nur das BILD, nicht die ganze Kachel: Springender Text unter dem Zeiger ist
unruhig, ein anhebendes Bild wirkt greifbar. */
.wl-card:hover .wl-card-img { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,20,28,.18); }
.wl-card:hover .wl-card-t {
text-decoration: underline; text-decoration-color: var(--wl-acc);
text-decoration-thickness: .1em; text-underline-offset: .16em;
}
/* Der Datumsblock – das Element, das der Kachel ihren Kalender-Charakter gibt. Er sitzt jetzt
oben links statt unten: Dort beginnt der Blick, und dort verdeckt er kein Motiv-Zentrum.
Drei Zeilen (Wochentag / Zahl / Monat) statt zwei – so ist er auch ohne Umgebung eindeutig. */
.wl-day {
position: absolute; top: .62rem; left: .62rem; z-index: 1; min-width: 3.05rem;
background: #fff; color: var(--wl-ink); border-radius: 13px; padding: .36rem .5rem .32rem;
text-align: center; font-weight: 800; line-height: 1; box-shadow: 0 4px 12px rgba(23,20,28,.22);
}
.wl-day i { display: block; font-style: normal; font-size: .58rem; letter-spacing: .1em; color: var(--wl-link); }
.wl-day b { display: block; font-size: 1.34rem; letter-spacing: -.035em; margin: .12rem 0 .1rem; }
.wl-day em { display: block; font-style: normal; font-size: .58rem; letter-spacing: .08em; color: #8b857b; }
.wl-day-kurs { min-width: 0; font-size: .68rem; letter-spacing: .06em; padding: .42rem .6rem; }
/* „Empfohlen" bleibt IN der chronologischen Liste – eine eigene Reihe nähme wertvollen Platz
weg – und sticht dort NUR über den Stern-Chip heraus, unten links (oben sind Datum und
„kostenlos" zu Hause). Kein goldener Rahmen ums Bild dazu. GELB, nicht Koralle: Gelb ist
die Auszeichnungs-Farbe der Seite, Koralle heißt „interaktiv". */
.wl-card-tipp {
position: absolute; bottom: .55rem; left: .62rem; z-index: 1;
background: #ffd93d; color: var(--wl-ink); font-size: .68rem; font-weight: 800;
letter-spacing: .04em; padding: .24rem .55rem; border-radius: 99px;
box-shadow: 0 4px 12px rgba(23,20,28,.28);
}
.wl-free {
position: absolute; top: .62rem; right: .62rem; z-index: 1;
background: var(--wl-acc-3); color: var(--wl-ink);
font-weight: 800; font-size: .64rem; letter-spacing: .03em; padding: .34rem .58rem; border-radius: 99px;
}
/* „Wir erinnern dich …"-Sprechblase am Erinnere-mich-Knopf (kein Dialog,
den man wegklicken muss): dieselbe Sprache wie die Landau-Blase – Limette, Zipfel unten,
ploppt auf und geht nach ein paar Sekunden von selbst. Das Skript setzt sie fixed über
den Knopf (kein Ahnen-Clipping) und räumt sie selbst wieder ab. */
.wl-push-pop {
position: fixed; transform: translate(-50%, -100%); z-index: 60; pointer-events: none;
/* width: max-content, sonst quetscht die left-Position die Blase am rechten Rand schmal,
BEVOR das transform sie zentriert (shrink-to-fit rechnet mit dem Platz rechts von left). */
width: max-content; max-width: min(280px, 88vw); text-align: center;
background: var(--wl-acc-3); color: #17141c;
font-size: .8rem; font-weight: 700; line-height: 1.35;
padding: .5rem .8rem; border-radius: 13px; box-shadow: 0 8px 24px rgba(23, 20, 28, .35);
/* Eigene Auftritts-Keyframe: wl-pop-auf (Landau-Blase) setzt nur translateX und würde
unser translate(-50%, -100%) im from-Zustand überschreiben – die Blase spränge. */
animation: wl-push-pop-auf .22s cubic-bezier(.34, 1.5, .6, 1);
transition: opacity .5s ease;
}
@keyframes wl-push-pop-auf {
from { opacity: 0; transform: translate(-50%, calc(-100% + .4rem)); }
}
.wl-push-pop::after {
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: .45rem solid transparent; border-top-color: var(--wl-acc-3); border-bottom: 0;
}
.wl-push-pop.weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.wl-push-pop { animation: none; transition: none; }
}
/* Absage-Banderole: Abgesagtes bleibt in der Liste stehen – wer den Termin gesehen
hat, soll auch die Absage sehen. Gefahr-Rot wie .wl-note.bad, NICHT Marken-Koralle: Koralle
heißt interaktiv, das hier ist eine Warnung. Oben rechts, wo sonst „kostenlos" säße – die
beiden schließen sich aus (wl_kachel lässt „kostenlos" bei Absagen weg). */
.wl-card-abges {
position: absolute; top: .62rem; right: .62rem; z-index: 1;
background: #a51e33; color: #fff; font-size: .68rem; font-weight: 800;
letter-spacing: .04em; padding: .24rem .55rem; border-radius: 99px;
box-shadow: 0 4px 12px rgba(23, 20, 28, .28);
}
.wl-card-b { display: flex; flex-direction: column; gap: .26rem; }
/* Die Kategorie steht als kleine Zeile über dem Titel und bringt die Farbe ins Raster, ohne
dass dafür die ganze Kachel eingefärbt werden müsste. */
.wl-card-cat { font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
color: var(--wl-c, var(--wl-mut)); }
/* „Tipp" steht in derselben Zeile wie die Kategorie, aber in der Signalfarbe – es erklärt, warum
diese Kachel vor einem früheren Termin steht. Ein Wort, kein Etikett. */
/* Die Empfehlung sitzt als .wl-card-tipp-Chip auf dem Bild, nicht als Wort-Marke in der
Kategoriezeile. */
.wl-card-t { font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -.015em; }
.wl-card-m { font-size: .8rem; color: var(--wl-mut); }
.wl-card-by { margin-top: .12rem; font-size: .77rem; color: var(--wl-mut);
display: flex; align-items: center; gap: .42rem; }
/* Ein Punkt in der Farbe der Veranstalter-Art, KEIN Quadrat mit Initialen: Zwei Buchstaben in
9 Pixeln kann niemand lesen, und der Name steht daneben. */
.wl-pip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wl-dot {
width: 17px; height: 17px; border-radius: 5px; flex: none; color: #fff;
font-weight: 800; font-size: .58rem; line-height: 17px; text-align: center;
}
.o-asta { background: var(--wl-acc); }
.o-hsg { background: #e8a300; }
.o-fs { background: #7fa515; }
.o-ext { background: #8b857b; }
/* Platzhalter für Beiträge OHNE Bild – acht Stück, vergeben aus der ID.
Sie müssen hier stehen: unter der CSP gibt es kein style="…" im HTML.
KEINE kräftigen Zweifarben-Verläufe aus verschiedenen Familien (Violett auf Koralle, Türkis
auf Blau, Neongrün …): Nebeneinander im Raster sieht das aus wie eine Farbmustertafel und hat
mit dem Logo nichts zu tun.
Stattdessen ist jeder Platzhalter dieselbe dunkle Fläche wie Kopf und Fußzeile, in die zwei
weiche Lichter aus den Logo-Farben scheinen. Sie unterscheiden sich nur in Ort und Mischung. Damit
sind Kacheln ohne Bild ruhige dunkle Karten – ein Gestaltungsmittel statt eines Notbehelfs –
und der weiße Datumsblock steht auf allen acht gleich gut lesbar. */
.wl-ph-1, .wl-ph-2, .wl-ph-3, .wl-ph-4,
.wl-ph-5, .wl-ph-6, .wl-ph-7, .wl-ph-8 { background-color: var(--wl-ink); }
.wl-ph-1 { background-image: radial-gradient(85% 115% at 12% 112%, rgba(255,92,114,.82), transparent 68%),
radial-gradient(65% 85% at 92% -8%, rgba(255,217,61,.44), transparent 66%); }
.wl-ph-2 { background-image: radial-gradient(80% 110% at 88% 112%, rgba(255,217,61,.70), transparent 68%),
radial-gradient(70% 90% at 6% 4%, rgba(255,92,114,.48), transparent 66%); }
.wl-ph-3 { background-image: radial-gradient(90% 120% at 50% 128%, rgba(217,242,75,.58), transparent 66%),
radial-gradient(60% 80% at 84% 6%, rgba(255,92,114,.66), transparent 68%); }
.wl-ph-4 { background-image: radial-gradient(75% 105% at 14% -12%, rgba(255,217,61,.58), transparent 66%),
radial-gradient(85% 110% at 82% 116%, rgba(255,92,114,.44), transparent 64%); }
.wl-ph-5 { background-image: radial-gradient(95% 120% at 96% 52%, rgba(255,92,114,.64), transparent 68%),
radial-gradient(70% 95% at 4% 96%, rgba(217,242,75,.48), transparent 66%); }
.wl-ph-6 { background-image: radial-gradient(80% 110% at 20% 8%, rgba(255,92,114,.56), transparent 66%),
radial-gradient(75% 100% at 74% 110%, rgba(255,217,61,.52), transparent 66%); }
.wl-ph-7 { background-image: radial-gradient(120% 130% at 50% 132%, rgba(255,217,61,.66), transparent 64%),
radial-gradient(55% 75% at 12% 2%, rgba(217,242,75,.44), transparent 64%); }
.wl-ph-8 { background-image: radial-gradient(90% 115% at 6% 50%, rgba(255,217,61,.54), transparent 66%),
radial-gradient(90% 115% at 98% 52%, rgba(255,92,114,.62), transparent 66%); }
/* ---------- Kurse-Streifen -------------------------------------------------------------------- */
/* Kurse sind keine Termine, sondern Angebote – sie bekommen deshalb ein eigenes Bild: dunkle
Tafeln statt heller Kästchen. Das hat zwei Gründe. Erstens sind sie so auf einen Blick vom
Terminraster zu unterscheiden, ohne dass es einer Überschrift bedarf. Zweitens haben Kurse
fast nie ein Bild – als weiße Kästen mit Rahmen sähen sie aus wie ein Formular, das man
vergessen hat auszufüllen. */
.wl-kurse { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; }
.wl-ku {
position: relative; overflow: hidden;
border: 0; border-radius: var(--wl-rad); padding: 1.05rem 1.1rem 1.1rem; min-height: 138px;
background-color: var(--wl-ink);
background-image: radial-gradient(85% 130% at 96% 118%, rgba(255,217,61,.42), transparent 66%);
display: flex; flex-direction: column; gap: .28rem;
transition: transform .16s ease, box-shadow .16s ease;
}
.wl-ku:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,20,28,.2); }
/* Das Foto unter der Tafel (siehe index.php): Es liegt zuunterst, darüber der Abdunkler im
::before, obenauf der Text. Die drei Lagen sind ausdrücklich gestapelt – ohne die z-Indizes
läge der Abdunkler auch über dem Text, und die Tafel sähe „ausgegraut" aus. Der Abdunkler
ist unten am dunkelsten, dort stehen Meta-Zeile und der limette Rhythmus. Ohne Foto (keine
Kategorie-Zuordnung, Registry leer) bleibt die alte dunkle Tafel mit dem gelben Licht –
der Abdunkler darüber ist auf dem ohnehin dunklen Grund praktisch unsichtbar. */
.wl-ku-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-ku::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(rgba(23,20,28,.62), rgba(23,20,28,.86) 78%);
}
.wl-ku > span { position: relative; z-index: 2; }
/* Die Farben stehen auf den KINDERN, nicht auf .wl-ku – die a-Falle von weiter oben:
.wl-ku ist ein , und `body.wl a { color: inherit }` ist
spezifischer als eine einzelne Klasse – ein color am Element selbst würde still verworfen. */
/* Auf der dunklen Kurs-Tafel braucht „Tipp" die helle Fassung der Signalfarbe. */
.wl-ku-tipp { font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
color: #ff8095; margin-bottom: .1rem; }
.wl-ku-t { font-weight: 700; font-size: .95rem; line-height: 1.28; color: #fff; }
.wl-ku-m { font-size: .78rem; color: #b5aea4; }
.wl-ku-w {
align-self: flex-start; margin-top: auto; padding-top: .1rem; font-size: .7rem; font-weight: 700;
color: var(--wl-acc-3);
}
/* ---------- Detailseite ----------------------------------------------------------------------- */
/* background-COLOR, nicht die Kurzschrift: Ohne Bild trägt die Fläche eine .wl-ph-Klasse mit den
Logo-Lichtern (v.php). Diese Regel steht SPÄTER in der Datei als die .wl-ph-Regeln – ein
`background:` setzte deshalb auch background-image zurück auf none und löschte die Lichter
stillschweigend. Zu sehen war ein toter dunkler Balken über die volle Breite. */
/* ACHTUNG Falle: aspect-ratio ÜBERTRÄGT eine feste min-height auf die Breite (190 px × 21/8
= 499 px Mindestbreite) – unter 499 px Viewport scrollte die Detailseite deshalb seitwärts.
Die Mindesthöhe ist darum an die Breite gekoppelt: nie mehr, als das Seitenverhältnis
bei voller Breite hergibt (8/21 ≈ 38vw); ab ~500 px greifen die 190 px. */
.wl-det-hero { position: relative; aspect-ratio: 21 / 8; background-color: var(--wl-ink-2); min-height: min(190px, 38vw); }
.wl-det-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a-FALLE (siehe .wl-uc-voll): `body.wl a { color: inherit }` schlägt die nackte Klasse –
ohne das body.wl-Präfix steht hier dunkle Tinte auf der dunklen Pille. */
body.wl .wl-back {
position: absolute; top: .8rem; left: .8rem; background: rgba(23,20,28,.75); color: #fff;
font-size: .78rem; font-weight: 600; padding: .35rem .7rem; border-radius: 99px; backdrop-filter: blur(4px);
}
.wl-det { width: min(100% - 2.4rem, 820px); margin-inline: auto; padding: 1.3rem 0 2.5rem; }
.wl-det h1 { font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 800; letter-spacing: -.025em;
line-height: 1.14; margin: .5rem 0 .7rem; }
/* Fakten als ruhige ZEILEN (Symbol + Wert), NICHT als gerahmte Chips: lauter Kästchen unterm
Bild wirken wie Streuware. Die Symbole tragen die Marken-Koralle (wie der Strich unterm
Zeitwort) – Schmuck der Marke, kein Interaktions-Versprechen. */
.wl-df-list { display: flex; flex-direction: column; gap: .5rem; margin: .15rem 0 1.25rem; }
.wl-df { display: flex; gap: .62rem; align-items: flex-start; font-size: .9rem; color: var(--wl-mut); line-height: 1.45; }
.wl-df > svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--wl-logo); margin-top: .14rem; }
.wl-df b { color: var(--wl-ink); font-weight: 700; }
@media (prefers-color-scheme: dark) { .wl-df b { color: #f4f1ea; } }
.wl-text { font-size: .93rem; line-height: 1.62; color: var(--wl-mut); margin: 0 0 1.2rem; white-space: pre-line; }
.wl-btns { display: flex; gap: .55rem; flex-wrap: wrap; }
/* Die Knopfreihe der Detailseite: EIN dunkler Hauptknopf (Anmeldung > Kalender > Infos),
alles andere gleich leise, jeder mit Symbol; sonst konkurrieren bis zu fünf Knöpfe.
Am Handy bekommt der Hauptknopf die volle Zeile. */
.wl-det-akt { margin: 0 0 1.4rem; }
.wl-det-akt .wl-btn { display: inline-flex; align-items: center; gap: .5rem; }
.wl-det-akt .wl-btn svg { width: 1.02rem; height: 1.02rem; flex: none; }
.wl-det-akt .wl-push-btn .pa { display: inline-flex; align-items: center; gap: .5rem; }
.wl-det-akt .wl-push-btn.on .pb { display: inline-flex; align-items: center; gap: .5rem; }
/* Am Handy FESTES Knopf-Raster statt Flatterzeile (die Knöpfe „flubbern
ohne festen Platz"): zwei gleich breite Spalten, der Hauptknopf über die volle Zeile –
und bleibt am Ende ein Knopf allein übrig (gerade Kinderzahl = ungerade Zahl Nebenknöpfe),
bekommt auch er die volle Zeile, statt als Stummel links zu hängen. */
@media (max-width: 540px) {
.wl-det-akt { display: grid; grid-template-columns: 1fr 1fr; }
.wl-det-akt .wl-btn { justify-content: center; }
.wl-det-akt .wl-btn.p,
.wl-det-akt .wl-btn:last-child:nth-child(even) { grid-column: 1 / -1; }
}
.wl-btn {
font-weight: 700; font-size: .85rem; padding: .68rem 1.1rem; border-radius: 11px;
border: 1px solid var(--wl-line); background: var(--wl-card); cursor: pointer; font-family: inherit;
/* color MUSS gesetzt sein: