/* Gedenkblüte — gemeinsames Fundament aller Seiten.
   Keine externen Schriften und keine externen Dienste: nichts, was beim
   Aufruf Daten an Dritte gibt. */

:root {
  --tinte: #16231b;
  --tinte-tief: #0c1611;
  --creme: #f4efe6;
  --creme-still: #cfc9bd;
  --gold: #c8a97e;
  --moos: #7d9078;
  /* Zwei Schriften mit klarer Aufgabenteilung: Cormorant ist fein und
     hochkontrastig — herrlich groß, zu zart für Fließtext. Den trägt Georgia. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --display: "Cormorant", Georgia, "Palatino Linotype", serif;
  --fahrt: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rand: min(6vw, 5.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Der Rollbalken gehört zum Haus: schmal, ohne Rahmen, in Moos und Gold
   statt im Grau des Systems.

   Die Rinne bleibt IMMER stehen (scrollbar-gutter: stable). Öffnet sich ein
   Fenster und die Seite darunter wird festgestellt, verschwindet sonst der
   Balken — und die ganze Ansicht springt um seine Breite zur Seite. Mit
   stehender Rinne bleibt alles, wo es ist.

   Zwei Wege, weil die Browser zwei sprechen: Firefox und Chrome ab 121
   verstehen scrollbar-color, Safari nur ::-webkit-scrollbar. Wo die
   genormten Angaben gelten, werden die webkit-Regeln von selbst
   übergangen — beides zu setzen ist also kein Widerspruch. */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 144, 120, 0.5) transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(125, 144, 120, 0.5);
  border-radius: 999px;
  /* Der Rand ist durchsichtig und schneidet den Griff schmal — so liegt er
     als feiner Strich in der Rinne, nicht als Klotz. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200, 169, 126, 0.7); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Papier bleibt Papier: Wo eine helle Fläche rollt — die Buchseiten, der
   Editor —, trägt der Balken die Farben des Papiers, nicht die der Nacht. */
.buchseite, .editor__seite, .editor__text {
  scrollbar-color: rgba(138, 111, 69, 0.45) transparent;
}

/* Die festgestellte Seite: Solange ein Fenster offen ist, steht sie still —
   aber ihr Rollbalken bleibt gezeichnet, und nichts rutscht zur Seite.
   Das Wie steht in kopf.js bei gbFeststellen(). */
html.seite-steht { overflow-y: scroll; }
html.seite-steht body {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
}

body {
  background: var(--tinte-tief);
  color: var(--creme);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: rgba(200, 169, 126, 0.32); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.hueter { width: min(72rem, 100% - 2 * var(--rand)); margin-inline: auto; }
.hueter--schmal { width: min(46rem, 100% - 2 * var(--rand)); }

/* ---------- Die gläserne Fläche ---------- */

/* Das Bauteil, das die beiden Hälften des Ortes verbindet. Über der Landschaft
   trägt es die Schrift, ohne das Bild zuzudecken — man sieht die Wiese durch
   sie hindurch. In der App ist dieselbe Fläche die Karte um ein Formular.
   Ein Stil für Bildwelt und Bedienung, damit der Übergang keine Kante hat.

   Warum nicht einfach ein Schatten hinter der Schrift: Auf einem hellen,
   unruhigen Bild — Gräser im Gegenlicht — braucht heller Text so viel Schatten,
   dass er schmutzig wird. Die Fläche senkt stattdessen das Bild darunter ab. */
.glas {
  position: relative;
  background: rgba(12, 22, 17, 0.34);
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  border: 1px solid rgba(244, 239, 230, 0.16);
  border-radius: clamp(1.1rem, 2.4vw, 1.9rem);
  /* Der innere Lichtstrich oben ist das, was Glas von Milchfolie unterscheidet:
     eine Kante, auf die Licht fällt. */
  box-shadow:
    0 26px 70px rgba(9, 17, 13, 0.42),
    inset 0 1px 0 rgba(244, 239, 230, 0.11);
  padding: clamp(1.9rem, 4.5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
}
/* Wo die Fläche trägt, braucht die Schrift keinen Schatten mehr — er würde sie
   nur wieder weich machen. */
.glas h1, .glas h2, .glas p { text-shadow: none; }

/* Ohne Weichzeichner hinter der Fläche (ältere Browser, abgeschaltete
   Verzierungen) würde man das Bild ungetrübt durchsehen und läse nichts.
   Dann wird die Fläche eben dichter — dasselbe Bauteil, nur weniger Glas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: rgba(11, 20, 15, 0.82); }
}

/* ---------- Schrift ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

/* ---------- Die Wortmarke ---------- */

.marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.7rem);
  margin: 0;
}
/* <picture> soll die Anordnung nicht stören — das Bild selbst ist das Element. */
.marke picture { display: contents; }
.marke__zeichen {
  width: clamp(160px, 22vw, 320px);
  height: auto;
  filter: drop-shadow(0 10px 46px rgba(12, 22, 17, 0.8));
}
.marke__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.6rem, 12vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--creme);
  /* Mehrere Schatten übereinander: ein enger für die Kante, ein weiter für die
     Ablösung vom Bild. Ein einzelner müsste so hart sein, dass er schmutzt. */
  text-shadow:
    0 1px 2px rgba(12, 22, 17, 0.9),
    0 3px 14px rgba(12, 22, 17, 0.85),
    0 8px 60px rgba(12, 22, 17, 0.95);
}
.marke__spruch {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.7rem);
  /* Näher an den Namen als der Abstand zwischen Zeichen und Name: Spruch und
     Name gehören zusammen, das Emblem steht für sich. Der Flex-Abstand wird
     hier also wieder ein Stück zurückgenommen. */
  margin-top: clamp(-1.05rem, -1.7vw, -0.45rem);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.9vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--creme);
  text-shadow:
    0 1px 2px rgba(12, 22, 17, 0.9),
    0 3px 16px rgba(12, 22, 17, 0.9),
    0 6px 44px rgba(12, 22, 17, 0.95);
}
/* Die feinen Striche links und rechts des Spruchs. */
.marke__spruch::before,
.marke__spruch::after {
  content: "";
  display: block;
  width: clamp(1.6rem, 5vw, 3.4rem);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(244, 239, 230, 0.55), transparent);
}

.ueberschrift-klein {
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.fliesstext { color: var(--creme-still); max-width: 40rem; }
.fliesstext + .fliesstext { margin-top: 1.2rem; }

/* ---------- Kopf ---------- */

/* Die Aktionsleiste steht auf jeder Seite an derselben Stelle und bleibt beim
   Scrollen oben. Über einem Bild ist sie zunächst unsichtbar — erst wenn Inhalt
   darunter durchläuft, legt sich ein dunkler Schleier darunter, damit die
   Schrift lesbar bleibt, ohne das Bild von Anfang an zu zerschneiden. */
.kopf {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.7rem, 1.6vw, 1.1rem) clamp(1.2rem, 3.5vw, 3rem);
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background 500ms ease, border-color 500ms ease, padding 400ms ease;
}
/* Die Leiste hält sich zurück: Sie liegt nur als Hauch über dem Bild und
   wird erst dichter, wenn Inhalt darunter durchläuft. Sie soll den Ort
   nicht anschneiden — man soll zuerst den Baum sehen, dann die Leiste. */
.kopf {
  background: rgba(9, 17, 13, 0.3);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.kopf[data-gescrollt="true"], .kopf--fest {
  background: rgba(9, 17, 13, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom-color: rgba(244, 239, 230, 0.08);
}
.kopf__logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.kopf__logo img { height: clamp(32px, 3.2vw, 42px); width: auto; }
.kopf__text { display: flex; flex-direction: column; gap: 0.15rem; }
.kopf__name {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--creme);
  white-space: nowrap;
}
.kopf__spruch {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  letter-spacing: 0.13em;
  line-height: 1.1;
  color: var(--creme-still);
  white-space: nowrap;
}
/* Anker für das ausklappbare Menü-Panel: Der Knopf bleibt der Bezugspunkt,
   das Panel hängt darunter und nach links, ohne die ganze Seite zu legen. */
.kopf__werkzeuge {
  position: relative;
  display: flex; align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.4rem);
}

/* Auf der Eingangsseite trägt das Emblem in der Bildmitte die Marke — die Leiste
   führt dort kein Zeichen. Ohne zweites Element würde 'space-between' den
   Menü-Knopf nach links ziehen; er bleibt rechts, wie auf allen anderen Seiten. */
.kopf--ohne-zeichen { justify-content: flex-end; }

/* ---------- Menü ---------- */

/* Ein gläserner Kreis mit drei Strichen — auf jedem Gerät derselbe, vom
   Handy bis zum großen Schirm. Er trägt kein Wort: Drei Striche versteht
   jeder, und ein Wort weniger ist ein Wort weniger im Bild. Für Hilfsmittel
   steht "Menü" im Knopf, nur eben unsichtbar. Die mittlere Linie zeichnet
   der Hintergrund selbst, die äußeren die beiden Pseudoelemente; beim
   Öffnen zieht sich die Mitte zusammen und die anderen kreuzen sich. */
.menue-knopf {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.18);
  background: linear-gradient(150deg, rgba(244, 239, 230, 0.13), rgba(206, 212, 198, 0.05));
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  color: var(--creme);
  cursor: pointer;
  transition: background 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}
.menue-knopf:hover, .menue-knopf:focus-visible {
  background: linear-gradient(150deg, rgba(200, 169, 126, 0.24), rgba(200, 169, 126, 0.08));
  border-color: rgba(200, 169, 126, 0.5);
  box-shadow: 0 0 18px rgba(200, 169, 126, 0.22);
}
.menue-knopf__striche {
  display: block; width: 19px; height: 12px; position: relative;
  background: linear-gradient(currentColor, currentColor) no-repeat 50% 50% / 100% 1px;
  transition: background-size 320ms var(--fahrt);
}
.menue-knopf__striche::before,
.menue-knopf__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform 400ms var(--fahrt);
}
.menue-knopf__striche::before { top: 0; }
.menue-knopf__striche::after { bottom: 0; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche { background-size: 0 1px; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { transform: translateY(5.5px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { transform: translateY(-5.5px) rotate(-45deg); }

/* Kompaktes Glas-Panel unter dem Menü-Knopf — kein Vollbild mehr.
   Dunkles Glas, Goldrand, Cormorant: derselbe Ton wie die Leiste, nur
   näher am Knopf statt über der ganzen Landschaft. */
.menue {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 41;
  box-sizing: border-box;
  width: max-content;
  min-width: 15.5rem;
  max-width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.7rem 0.35rem 0.65rem;
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 0.05rem;
  background:
    linear-gradient(165deg, rgba(18, 28, 22, 0.96), rgba(9, 17, 13, 0.98));
  border: 1px solid rgba(200, 169, 126, 0.28);
  border-radius: 0.75rem;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(244, 239, 230, 0.04) inset,
    0 0 28px rgba(200, 169, 126, 0.06);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0; visibility: hidden;
  transform: translateY(-0.4rem);
  pointer-events: none;
  transition:
    opacity 280ms ease,
    visibility 280ms,
    transform 320ms var(--fahrt);
}
.menue[data-offen="true"] {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.menue a {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  line-height: 1.25;
  color: var(--creme);
  text-decoration: none;
  opacity: 0.88;
  padding: 0.48rem 1.05rem;
  border-radius: 0.4rem;
  transition: opacity 280ms ease, background 280ms ease, color 280ms ease;
}
.menue a:hover, .menue a:focus-visible {
  opacity: 1;
  background: rgba(244, 239, 230, 0.06);
}
.menue a[aria-current="page"] { opacity: 1; }
/* Ort-Handlungen oben im Menü (Kerze, Erinnerung, …) — Knöpfe und Links
   teilen sich die Zeilenform der Wege, damit das Panel eine Liste bleibt. */
.menue__ort {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.05rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.menue__ort-tat {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  line-height: 1.25;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0.48rem 1.05rem;
  border-radius: 0.4rem;
  text-decoration: none;
  opacity: 0.92;
  cursor: pointer;
  transition: opacity 280ms ease, background 280ms ease, color 280ms ease;
}
.menue__ort-tat:hover,
.menue__ort-tat:focus-visible {
  opacity: 1;
  background: rgba(200, 169, 126, 0.1);
  outline: none;
}
.menue__ort-tat--still {
  color: var(--creme);
  opacity: 0.88;
}
.menue__ort-tat--still:hover,
.menue__ort-tat--still:focus-visible {
  background: rgba(244, 239, 230, 0.06);
}
/* Die beiden Wege, um die es geht: dezente Glas-Knöpfe oben im Panel.
   Angemeldet: Gedenkblüten und Abmelden. Sonst: setzen und pflegen.
   Darunter folgt in Creme, was erklärt und zeigt. */
.menue__taten {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.15rem 0.55rem 0.55rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.menue a.menue__knopf {
  display: block;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  line-height: 1.2;
  color: var(--gold);
  text-decoration: none;
  opacity: 1;
  padding: 0.62rem 0.9rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(200, 169, 126, 0.32);
  background: linear-gradient(150deg, rgba(244, 239, 230, 0.12), rgba(200, 169, 126, 0.06));
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.04) inset;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  transition:
    background 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease,
    color 280ms ease;
}
.menue a.menue__knopf:hover,
.menue a.menue__knopf:focus-visible {
  background: linear-gradient(150deg, rgba(200, 169, 126, 0.22), rgba(200, 169, 126, 0.08));
  border-color: rgba(200, 169, 126, 0.55);
  box-shadow: 0 0 16px rgba(200, 169, 126, 0.16);
  color: var(--gold);
  outline: none;
}
.menue a.menue__knopf[aria-current="page"] {
  border-color: rgba(200, 169, 126, 0.48);
  background: linear-gradient(150deg, rgba(200, 169, 126, 0.16), rgba(200, 169, 126, 0.06));
}
.menue a.menue__knopf--still {
  color: var(--creme);
  border-color: rgba(244, 239, 230, 0.16);
  background: linear-gradient(150deg, rgba(244, 239, 230, 0.08), rgba(206, 212, 198, 0.03));
}
.menue a.menue__knopf--still:hover,
.menue a.menue__knopf--still:focus-visible {
  color: var(--creme);
  border-color: rgba(244, 239, 230, 0.28);
  background: linear-gradient(150deg, rgba(244, 239, 230, 0.14), rgba(244, 239, 230, 0.05));
  box-shadow: none;
}
.menue__rechtliches {
  margin-top: 0.35rem;
  padding: 0.45rem 1.05rem 0.2rem;
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem;
  border-top: 1px solid rgba(244, 239, 230, 0.1);
}
.menue__rechtliches a {
  font-family: var(--serif);
  font-size: 0.88rem;
  opacity: 0.55;
  padding: 0;
  border-radius: 0;
}
.menue__rechtliches a:hover,
.menue__rechtliches a:focus-visible {
  opacity: 0.9;
  background: transparent;
}

@media (max-width: 380px) {
  .menue {
    min-width: 0;
    width: min(17.5rem, calc(100vw - 1.25rem));
  }
}

/* Die mitlaufenden Textlinks sind fort — auf jeder Breite. Sollte eine Seite
   noch welche mitbringen, bleiben sie verborgen statt die Leiste zu sprengen. */
.kopf__werkzeuge .nur-weit { display: none; }

@media (max-width: 560px) {
  .kopf__spruch { display: none; }
}
@media (max-width: 360px) {
  .kopf__text { display: none; }
}

/* ---------- Knöpfe ---------- */

/* Alle Knöpfe teilen sich Schrift, Schreibweise, Laufweite und Höhe.
   Unterschiedlich ist allein die Füllung — nie die Beschriftung. */
.knopf-still, .knopf-rand, .knopf-voll {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
}

.knopf-still {
  background: none;
  color: var(--creme);
  opacity: 0.74;
  padding: 0.9rem 0.35rem;
  transition: opacity 400ms ease;
  text-shadow: 0 2px 18px rgba(12, 22, 17, 0.9);
}
.knopf-still:hover, .knopf-still:focus-visible { opacity: 1; }

.knopf-rand {
  border-color: rgba(244, 239, 230, 0.42);
  padding: 0.9rem 1.9rem;
  backdrop-filter: blur(7px);
  background: rgba(12, 22, 17, 0.22);
  transition: opacity 400ms ease, border-color 400ms ease, background 400ms ease;
}
.knopf-rand:hover { border-color: rgba(244, 239, 230, 0.9); background: rgba(12, 22, 17, 0.4); }

.knopf-voll {
  background: var(--creme);
  color: var(--tinte);
  padding: 0.9rem 1.9rem;
  transition: transform 400ms var(--fahrt), background 400ms ease;
}
.knopf-voll:hover { transform: translateY(-2px); background: #fff; }

:focus-visible { outline: 1px solid rgba(244, 239, 230, 0.6); outline-offset: 5px; }

/* ---------- Fuß ---------- */

.fuss {
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  margin-top: clamp(3rem, 8vw, 6rem);
}
/* Eine Zeile, alles auf einer Höhe: das Zeichen ganz links, daneben der
   Satz, die Wege rechts. Auf schmalen Schirmen bricht die Reihe weich um. */
.fuss__reihe {
  display: flex; flex-wrap: wrap; gap: 1.2rem 1.1rem;
  align-items: center;
}
.fuss__zeichen { display: flex; align-items: center; }
.fuss__zeichen img { height: 34px; width: auto; opacity: 0.75; }
.fuss__wege { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-left: auto; }
.fuss__wege a {
  color: var(--creme-still); text-decoration: none;
  font-size: 0.88rem; letter-spacing: 0.06em;
  opacity: 0.8; transition: opacity 300ms ease;
}
.fuss__wege a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.fuss__wort { font-size: 0.85rem; color: var(--creme-still); opacity: 0.62; margin: 0; }

/* ---------- Sanftes Erscheinen beim Scrollen ---------- */

.kommt { opacity: 0; transform: translateY(22px); transition: opacity 1100ms var(--fahrt), transform 1100ms var(--fahrt); }
.kommt[data-da="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kommt { opacity: 1; transform: none; transition: none; }
}