@charset "UTF-8";
/* ==========================================================================
ABS - Aktive Bürger Süderbrarup
FLUSS - die Bewegungs- und Stimmungsebene.
Diese Datei liegt bewusst getrennt von abs.css.
abs.css = Struktur, Farbe, Lesbarkeit. Funktioniert allein vollständig.
abs-fluss.css = Wasser, Wellen, Reaktion auf Berührung.
Wird abs-fluss.css entfernt, bleibt die Website vollständig benutzbar.
Sie sieht dann nur ruhiger aus. Das ist Absicht: Die Wirkung darf nie
Voraussetzung für die Funktion sein.
Einbindung NACH abs.css:
Gestaltungsgedanke
------------------
Süderbrarup liegt in Angeln, zwischen Schlei und Ostsee. Das Logo ist eine
wehende Fahne, deren Faltung als weicher Verlauf über 27 Stützpunkte läuft.
Diese Faltung ist der Anker: Die Seite nimmt dieselbe Bewegung auf, damit
Logo und Website als ein Stück wirken und nicht als zwei Entwürfe.
Regeln, die hier gelten
-----------------------
1. Nichts bewegt sich schnell. Zyklen zwischen 24 und 61 Sekunden.
Die Laufzeiten sind bewusst teilerfremd gewählt, damit sich das
Gesamtbild nie sichtbar wiederholt.
2. Gelb bleibt Licht auf Wasser, niemals Textfläche. Deckkraft höchstens 16 %.
3. Jede Bewegung ist über prefers-reduced-motion vollständig abschaltbar.
Der letzte Abschnitt dieser Datei schaltet sie ab, nicht bloß herunter.
4. Keine externe Bibliothek, keine externe Anfrage, kein Bild.
Alles sind Verläufe und Pfade.
5. Kein Element, das Bewegung trägt, enthält Text. Bewegter Text ist
schlecht lesbar und für manche Menschen unangenehm.
Aufbau
------
01 Token: Tiefen, Zeiten, Kurven
02 Bühne: Wasserfläche mit driftendem Licht
03 Wellen: Übergänge zwischen Abschnitten
04 Berührung: Tropfen beim Klick
05 Karten: Auftauchen und Tragen
06 Navigation, Schaltflächen, Formulare
07 Galerie und Lightbox
08 Auftauchen beim Scrollen
09 Ruhe: prefers-reduced-motion
========================================================================== */
/* ==========================================================================
01 TOKEN
========================================================================== */
:root {
/* Wassertiefen, von tief nach flach.
--fluss-tief ist dunkel genug, dass weißer Text auch dann sicher
lesbar bleibt, wenn ein gelber Reflex darüber liegt. */
--fluss-tief: #071A42;
--fluss-mittel: #10306E;
--fluss-hell: #2B54A8;
--fluss-flach: #4E7FD0;
--fluss-schaum: #E8EEF8;
/* Bewegungskurven.
--fluss-weich klingt lange aus - das erzeugt den Eindruck, dass etwas
getragen wird, statt geschoben zu werden. */
--fluss-weich: cubic-bezier(0.16, 1, 0.3, 1);
--fluss-sanft: cubic-bezier(0.4, 0, 0.2, 1);
/* Zeiten */
--fluss-kurz: 240ms;
--fluss-mittel-zeit: 520ms;
--fluss-lang: 900ms;
/* Weiche Schatten. Wasser wirft keine harten Kanten. */
--fluss-schatten-ruhe: 0 2px 8px rgba(7, 26, 66, 0.05),
0 12px 32px rgba(7, 26, 66, 0.06);
--fluss-schatten-hoch: 0 4px 12px rgba(7, 26, 66, 0.07),
0 24px 56px rgba(7, 26, 66, 0.12);
}
/* ==========================================================================
02 BÜHNE - die Wasserfläche
Aufbau in Schichten, von hinten nach vorn:
Grundfarbe (tief) -> zwei blaue Lichter -> zwei gelbe Reflexe
-> Inhalt -> Wellen am unteren Rand
Alle Lichter liegen in .buehne-wasser und sind aria-hidden.
========================================================================== */
.buehne {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--fluss-tief);
padding-block: clamp(4rem, 9vw, 7.5rem) clamp(6rem, 12vw, 10rem);
/* Ohne diese Datei trennt eine gelbe Kante die Bühne vom Inhalt.
Das ist dort richtig. Sobald die Welle den Übergang übernimmt,
wäre diese Kante genau die harte Grenze, die hier vermieden
werden soll - deshalb hier zurückgenommen. */
border-bottom: 0;
/* Die Bühne bekommt Ruhe durch Höhe. Der Inhalt sitzt mittig,
damit oben und unten Wasser bleibt. */
min-height: clamp(380px, 68vh, 660px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Schutzschicht für die Lesbarkeit.
Die Lichter dürfen kräftig sein, weil dieser weiche Schleier die
linke Seite - dort steht der Text - zuverlässig dunkel hält.
Ohne ihn müssten die Lichter so schwach bleiben, dass man sie
kaum sieht. Rechts läuft er auf null aus, dort darf es leuchten. */
.buehne::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(103deg,
rgba(7, 26, 66, 0.62) 0%,
rgba(7, 26, 66, 0.42) 34%,
rgba(7, 26, 66, 0.12) 58%,
rgba(7, 26, 66, 0) 78%);
}
/* Reihenfolge der Schichten in der Bühne, von hinten nach vorn:
-2 .buehne-wasser die driftenden Lichter
-1 .buehne::before der Schleier, der den Text dunkel hält
1 .buehne-innen der Inhalt
0 .wellen die Uferlinie am unteren Rand
Der Schleier MUSS über den Lichtern liegen, sonst schützt er nichts. */
.buehne-wasser {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
/* Verhindert, dass die driftenden Lichter am Rand sichtbar abreißen. */
overflow: hidden;
}
/* Gemeinsame Grundform aller Lichter: eine sehr weiche runde Fläche.
Bewusst als radial-gradient und nicht mit filter: blur() - Verläufe
sind billiger zu zeichnen und flackern auf schwachen Geräten nicht. */
.buehne-wasser > span {
position: absolute;
display: block;
border-radius: 50%;
will-change: transform;
}
/* Zwei blaue Lichter geben dem Wasser Tiefe.
Sie dürfen kräftig sein, weil der Schleier den Textbereich schützt. */
.tiefe-1 {
width: 92vw;
aspect-ratio: 1;
top: -34%;
left: -18%;
background: radial-gradient(circle closest-side,
rgba(43, 84, 168, 0.85) 0%,
rgba(43, 84, 168, 0.38) 46%,
rgba(43, 84, 168, 0) 100%);
animation: fluss-drift-a 38s var(--fluss-sanft) infinite;
}
.tiefe-2 {
width: 74vw;
aspect-ratio: 1;
bottom: -34%;
right: -18%;
background: radial-gradient(circle closest-side,
rgba(78, 127, 208, 0.70) 0%,
rgba(78, 127, 208, 0.28) 48%,
rgba(78, 127, 208, 0) 100%);
animation: fluss-drift-b 46s var(--fluss-sanft) infinite;
}
/* Die Reflexe: Licht auf Wasser, keine Fläche.
WICHTIG - warum hier nicht das reine Markengelb steht:
Gelb hat keinen Blauanteil. Über dem tiefen Blau gemischt ergibt
#F2EB00 bei 34 % rechnerisch #5F7560 - ein Olivgrün. Das ist keine
Marke, das ist ein Fehler. Sonnenlicht auf Wasser hat immer
Blauanteil. Deshalb ein warmes Hellgelb mit Blau darin:
#FFECA8 landet unter denselben Bedingungen bei einem warmen
Blaugrau und bleibt damit in der Farbwelt.
Das reine Markengelb bleibt den Flächen vorbehalten, wo es
ungemischt steht: Akzentbalken, Schaltflächen, Marken.
Beide Reflexe liegen rechts und unten, also dort, wo kein Text
steht. Ungünstigster Fall - weißer Text genau über der hellsten
Stelle - liegt mit Schleier bei rund 10:1 und damit weit über
den geforderten 4,5:1. */
.reflex-1 {
width: 54vw;
aspect-ratio: 1;
top: -4%;
right: -2%;
background: radial-gradient(circle closest-side,
rgba(255, 236, 168, 0.40) 0%,
rgba(255, 236, 168, 0.15) 42%,
rgba(255, 236, 168, 0) 100%);
animation: fluss-drift-c 52s var(--fluss-sanft) infinite;
}
.reflex-2 {
width: 40vw;
aspect-ratio: 1;
bottom: -6%;
left: 26%;
background: radial-gradient(circle closest-side,
rgba(255, 236, 168, 0.26) 0%,
rgba(255, 236, 168, 0.09) 44%,
rgba(255, 236, 168, 0) 100%);
animation: fluss-drift-d 61s var(--fluss-sanft) infinite;
}
/* Vier Bahnen mit unterschiedlicher Richtung und Amplitude.
Weil 38, 46, 52 und 61 Sekunden keine gemeinsamen Teiler haben,
ergibt sich nie zweimal dasselbe Bild. */
@keyframes fluss-drift-a {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(6%, 4%, 0) scale(1.14); }
}
@keyframes fluss-drift-b {
0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
50% { transform: translate3d(-7%, -5%, 0) scale(1); }
}
@keyframes fluss-drift-c {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(-5%, 6%, 0) scale(1.18); }
66% { transform: translate3d(4%, -3%, 0) scale(1.05); }
}
@keyframes fluss-drift-d {
0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
40% { transform: translate3d(8%, -4%, 0) scale(1); }
70% { transform: translate3d(-3%, 5%, 0) scale(1.12); }
}
/* Inhalt der Bühne liegt über allen Lichtern. */
.buehne-innen {
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------
Der Seitenkopf der Unterseiten bekommt dieselbe Behandlung, nur
kleiner. Sonst hätte die Startseite eine eigene Sprache und alle
anderen Seiten eine zweite - das wäre der Punkt, an dem ein
Gesamtbild in zwei Entwürfe zerfällt.
-------------------------------------------------------------------- */
.seiten-kopf {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--fluss-tief);
border-bottom: 0;
padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(4rem, 8vw, 6.5rem);
}
.seiten-kopf::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(103deg,
rgba(7, 26, 66, 0.62) 0%,
rgba(7, 26, 66, 0.40) 36%,
rgba(7, 26, 66, 0.10) 62%,
rgba(7, 26, 66, 0) 82%);
}
.seiten-kopf > .huelle {
position: relative;
z-index: 1;
}
/* Im Seitenkopf stehen nur zwei Lichter im Markup - ein blaues für
die Tiefe, ein warmes für den Reflex. Vier wären auf der kleineren
Fläche zu viel und würden unruhig wirken. */
/* Der gelbe Akzentbalken über der Überschrift wird zur Wasserlinie:
er läuft einmal weich ein, statt einfach dazustehen. */
.buehne-balken {
transform-origin: left center;
animation: fluss-linie var(--fluss-lang) var(--fluss-weich) both;
}
@keyframes fluss-linie {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
/* Titel und Text steigen einmal sanft auf. Nur beim Laden, nicht wiederholt. */
.buehne-titel { animation: fluss-auftauchen var(--fluss-lang) var(--fluss-weich) 80ms both; }
.buehne-text { animation: fluss-auftauchen var(--fluss-lang) var(--fluss-weich) 180ms both; }
.buehne-aktionen { animation: fluss-auftauchen var(--fluss-lang) var(--fluss-weich) 280ms both; }
@keyframes fluss-auftauchen {
from { opacity: 0; transform: translate3d(0, 18px, 0); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
03 WELLEN - Übergänge zwischen Abschnitten
Ein Abschnitt endet nicht mit einer Linie, sondern läuft in den nächsten
hinein. Der Wellenpfad ist so gebaut, dass er sich nahtlos aneinanderreiht:
Anfang und Ende liegen auf derselben Höhe und haben dieselbe Steigung.
Deshalb kann er endlos wandern, ohne dass ein Sprung sichtbar wird.
Markup dazu siehe projekt/_bausteine.html, Block E.
========================================================================== */
.wellen {
position: absolute;
left: 0;
right: 0;
z-index: 0;
line-height: 0;
pointer-events: none;
}
.wellen-unten { bottom: -1px; } /* -1px schließt Rundungsspalten */
.wellen-oben { top: -1px; transform: scaleY(-1); }
.wellen svg {
display: block;
width: 100%;
height: clamp(44px, 6vw, 88px);
}
/* Drei Höhen, damit die Seite einen Rhythmus bekommt:
hoch an den beiden großen Übergängen - hinein in die Seite,
hinaus in die Fußzeile
normal wo ein Abschnittswechsel betont werden soll
flach zwischen benachbarten hellen Flächen. Dort geht es nur
darum, die gerade Linie zu vermeiden - eine hohe Welle
wäre an dieser Stelle Selbstzweck. */
.wellen-hoch svg { height: clamp(64px, 9.5vw, 148px); }
.wellen-flach svg { height: clamp(26px, 3.4vw, 54px); }
/* Flache Wellen laufen langsamer. Gleiche Geschwindigkeit bei
kleinerer Amplitude wirkt hektisch. */
.wellen-flach .wellen-lage-1 { animation-duration: 38s; }
.wellen-flach .wellen-lage-2 { animation-duration: 51s; }
.wellen-flach .wellen-lage-3 { animation-duration: 63s; }
/* Ein Abschnitt mit flacher Welle braucht weniger Zusatzluft. */
.hat-welle-flach { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
/* Jede Lage besteht aus drei aneinandergesetzten Pfaden und wandert um
genau eine Pfadbreite. Weil der Pfad an beiden Enden auf derselben Höhe
mit derselben Steigung ankommt, ist der Übergang unsichtbar.
Drei Kopien statt zwei, damit auch die rückwärts laufende Lage
jederzeit die volle Breite abdeckt. */
.wellen-lage {
will-change: transform;
animation: fluss-wandern linear infinite;
}
.wellen-lage-1 { animation-duration: 24s; }
.wellen-lage-2 { animation-duration: 33s; animation-direction: reverse; }
.wellen-lage-3 { animation-duration: 41s; }
@keyframes fluss-wandern {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-1440px, 0, 0); }
}
/* --------------------------------------------------------------------
Farbgebung der Wellen, zwei unabhängige Achsen.
Achse 1 WORAUF die Welle liegt -> Farbe der beiden hinteren Lagen.
Das ist der Schaum. Auf dunklem Grund hell, auf hellem dunkel.
Achse 2 WOHIN die Welle fließt -> Farbe der vorderen Lage.
Das ist die tatsächliche Grenze zum nächsten Abschnitt und
muss exakt dessen Hintergrundfarbe treffen.
Beispiel Bühne -> weißer Abschnitt:
class="wellen wellen-unten wellen-auf-dunkel wellen-in-weiss"
-------------------------------------------------------------------- */
.wellen-auf-dunkel .wellen-lage-1 { fill: rgba(255, 255, 255, 0.10); }
.wellen-auf-dunkel .wellen-lage-2 { fill: rgba(255, 255, 255, 0.17); }
.wellen-auf-hell .wellen-lage-1 { fill: rgba(16, 48, 110, 0.05); }
.wellen-auf-hell .wellen-lage-2 { fill: rgba(16, 48, 110, 0.09); }
.wellen-in-weiss .wellen-lage-3 { fill: var(--abs-flaeche); }
.wellen-in-grund .wellen-lage-3 { fill: var(--abs-grund); }
.wellen-in-tint .wellen-lage-3 { fill: var(--abs-blau-tint); }
.wellen-in-tief .wellen-lage-3 { fill: var(--abs-blau-dunkel); }
/* Läuft die letzte Fläche der Seite mit einer Welle in die Farbe der
Fußzeile aus, schließt die Fußzeile direkt an. Sonst bliebe zwischen
Welle und Fußzeile deren Außenabstand als heller Streifen stehen. */
main:has(> :last-child .wellen-in-tief) + .fusszeile { margin-top: 0; }
/* Ein Abschnitt, der unten eine Welle trägt, braucht zusätzliche Luft.
Sonst läuft der letzte Absatz in die Welle hinein. */
.bereich, .buehne { position: relative; }
.hat-welle { padding-bottom: clamp(5.5rem, 11vw, 9.5rem); }
/* ==========================================================================
04 BERÜHRUNG - der Tropfen
Wer ins Wasser fasst, erzeugt einen Ring. Genau das passiert beim Klick:
Ein Ring läuft von der Berührungsstelle aus und verläuft.
Die Koordinaten setzt assets/js/abs-fluss.js.
Wichtig: Der Ring nimmt currentColor. Dadurch stimmt er auf jeder
Schaltflächenvariante automatisch und muss nicht je Farbe gepflegt werden.
========================================================================== */
.btn,
.filter-knopf,
.nav-link,
.galerie-knopf,
.lightbox-schliessen {
position: relative;
overflow: hidden;
isolation: isolate;
}
.tropfen {
position: absolute;
z-index: 0;
border-radius: 50%;
background: currentColor;
opacity: 0.28;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
animation: fluss-tropfen 680ms var(--fluss-weich) forwards;
}
@keyframes fluss-tropfen {
to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* Der Inhalt der Schaltfläche muss über dem Ring liegen - der Ring selbst
ausgenommen: Mit position: relative stünde er im Fluss und bliese die
Schaltfläche für die Dauer der Animation auf seine Größe auf. */
.btn > :not(.tropfen),
.filter-knopf > :not(.tropfen),
.nav-link > :not(.tropfen) { position: relative; z-index: 1; }
/* ==========================================================================
05 KARTEN - auftauchen und getragen werden
========================================================================== */
.karte {
box-shadow: var(--fluss-schatten-ruhe);
transition:
transform var(--fluss-mittel-zeit) var(--fluss-weich),
box-shadow var(--fluss-mittel-zeit) var(--fluss-weich),
border-color var(--fluss-kurz) var(--fluss-sanft);
}
.karte:hover,
.karte:focus-within {
transform: translate3d(0, -6px, 0);
box-shadow: var(--fluss-schatten-hoch);
}
/* Druckgefühl: die Karte sinkt kurz ein. Das ist die körperliche
Rückmeldung, die eine reine Farbänderung nicht liefert. */
.karte:active {
transform: translate3d(0, -2px, 0) scale(0.995);
transition-duration: 90ms;
}
/* Nach einem Filterwechsel setzt abs-fluss.js diese Klasse neu.
Der Verzögerungswert kommt als --i (Index) aus dem Skript, dadurch
tauchen die Treffer versetzt auf statt alle gleichzeitig. */
.taucht-auf {
animation: fluss-auftauchen 620ms var(--fluss-weich) both;
animation-delay: calc(var(--i, 0) * 45ms);
}
/* ==========================================================================
06 NAVIGATION, SCHALTFLÄCHEN, FORMULARE
========================================================================== */
/* Die Fahne im Logo fängt Wind, wenn man sie berührt.
Sehr kleine Amplitude - es soll auffallen, wenn man hinsieht,
und nicht stören, wenn man es nicht tut. Der Ursprung liegt links,
weil eine Fahne am Mast hängt und dort nicht ausschlägt. */
.logo img {
transform-origin: left center;
transition: transform var(--fluss-lang) var(--fluss-weich);
}
.logo:hover img,
.logo:focus-visible img {
animation: fluss-fahne 2.4s var(--fluss-sanft) infinite;
}
@keyframes fluss-fahne {
0%, 100% { transform: skewY(0deg) scale(1); }
25% { transform: skewY(-0.9deg) scale(1.012); }
50% { transform: skewY(0deg) scale(1.02); }
75% { transform: skewY(0.9deg) scale(1.012); }
}
/* Der Navigationsstrich läuft aus der Mitte auf, wie eine Welle,
die den Rand erreicht. */
.nav-link::after {
transform-origin: center;
transition: transform var(--fluss-mittel-zeit) var(--fluss-weich);
}
.btn {
transition:
transform var(--fluss-kurz) var(--fluss-weich),
box-shadow var(--fluss-mittel-zeit) var(--fluss-weich),
background-color var(--fluss-kurz) var(--fluss-sanft),
color var(--fluss-kurz) var(--fluss-sanft);
}
.btn:hover { transform: translate3d(0, -2px, 0); }
.btn:active { transform: translate3d(0, 1px, 0) scale(0.985); transition-duration: 80ms; }
/* Der Fokusring blüht auf, statt hart zu erscheinen.
Die Sichtbarkeit selbst bleibt in abs.css geregelt - hier nur die
Bewegung dorthin, damit ein Abschalten dieser Datei nichts kaputt macht. */
.btn,
.nav-link,
.filter-knopf,
.feld input,
.feld select,
.feld textarea {
transition-property: transform, box-shadow, background-color, color, border-color, outline-offset;
}
/* Ein Eingabefeld im Fokus hebt sich leicht - man sieht sofort, wo man ist. */
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
box-shadow: 0 6px 20px rgba(16, 48, 110, 0.10);
}
/* Die Trefferzahl pulst kurz, wenn sie sich ändert. Damit merkt man,
dass der eigene Klick etwas bewirkt hat - auch wenn die Liste
weiter unten steht und gerade nicht im Blick ist. */
.zahl-puls { animation: fluss-puls 600ms var(--fluss-weich); }
@keyframes fluss-puls {
0% { transform: scale(1); }
35% { transform: scale(1.14); }
100% { transform: scale(1); }
}
/* ==========================================================================
07 GALERIE UND LIGHTBOX
========================================================================== */
.galerie-bild {
transition: transform var(--fluss-lang) var(--fluss-weich);
}
.galerie-knopf:hover .galerie-bild,
.galerie-knopf:focus-visible .galerie-bild {
transform: scale(1.05);
}
/* Das große Bild taucht auf, statt einzublenden. */
.lightbox[open] {
animation: fluss-lightbox 420ms var(--fluss-weich);
}
.lightbox::backdrop {
background: rgba(7, 26, 66, 0.72);
backdrop-filter: blur(6px);
}
@keyframes fluss-lightbox {
from { opacity: 0; transform: scale(0.96) translate3d(0, 12px, 0); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
08 AUFTAUCHEN BEIM SCROLLEN
Bewusst über animation-timeline gelöst und nicht über JavaScript:
kein zusätzliches Skript, kein Beobachter, kein Ruckeln.
Browser ohne Unterstützung zeigen die Inhalte einfach sofort -
das ist kein Mangel, sondern der ruhigere Zustand.
========================================================================== */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.karten-raster > *,
.bereich > .huelle > .abschnitt-kopf,
.hinweis,
.datei-eintrag {
animation: fluss-auftauchen linear both;
animation-timeline: view();
animation-range: entry 0% cover 18%;
}
/* Die Bühne bleibt ausgenommen: Sie ist beim Laden schon sichtbar
und hat ihre eigene, einmalige Bewegung. */
.buehne * { animation-timeline: auto; }
}
}
/* ==========================================================================
09 RUHE
Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie hier
auch wirklich nicht - nicht bloß langsamer, sondern gar nicht.
Die Seite verliert dadurch nichts an Inhalt und nichts an Bedienbarkeit.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.tiefe-1, .tiefe-2, .reflex-1, .reflex-2,
.wellen-lage,
.buehne-balken, .buehne-titel, .buehne-text, .buehne-aktionen,
.taucht-auf,
.zahl-puls,
.logo:hover img, .logo:focus-visible img,
.lightbox[open] {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.tropfen { display: none; }
.karte, .btn, .galerie-bild, .nav-link::after {
transition-duration: 1ms;
}
.karte:hover, .karte:focus-within, .karte:active,
.btn:hover, .btn:active {
transform: none;
}
.lightbox::backdrop { backdrop-filter: none; }
}
/* Hinweis zur Ausnahme von der !important-Regel:
abs.css kommt ohne !important aus, und das bleibt so. Hier ist es
berechtigt, weil dieser Block Bewegung zuverlässig abschalten muss -
auch dann, wenn eine spätere Ergänzung eine höhere Spezifität mitbringt.
Barrierefreiheit darf nicht davon abhängen, wer zuletzt geschrieben hat. */