/* Automationsbereich im Mohana-Look (Design-Umbau 21.10.2026, Auftrag auftrag-automation-design.md mit Nachtrag Marcel).
   Lädt nach allen anderen Stylesheets und ändert nur die Darstellung. Farben kommen nur aus Tokens in style.css
   (Palette mit Stufe v und g2, Rollen --auf-farbe und --auto-*), hier stehen keine rohen Farbwerte. Grundsätze:
   - Zwei Farbfamilien, durch die Form getrennt: Bausteine und Auslöser als satte Fläche (Stufe v, weiße Schrift),
     Zustände nur als Punkt mit Wort (Live salbei voll, Probe salbei Ring, Entwurf sonne, Aus grau).
   - Eine Farbe, eine Bedeutung: Gespräch meer (Mohana-Blau), Warten sand, Verzweigen lavendel, Aktion salbei, Weiter grau,
     Auslöser koralle. Die Notiz ist ein heller Zettel mit grauem Symbol, keine volle Farbe.
   - Kopf als blaues Band mit drei Wellen (Cobalt zu Ocean), darin nur Titel und Reiter; der Erklärsatz steht darunter.
   Kontrastwerte im Konzept (Scratch konzept-automation-design.md, Nachtrag Marcel und Runde 2). */

/* ---------- Rollen je Farbe ---------- */
:root {
  /* Zustandspunkt: hell der Textton (mindestens 5,77:1 auf Weiß), dunkel der Punktton */
  --salbei-punkt: var(--salbei-t); --sonne-punkt: var(--sonne-t); --grau-punkt: var(--grau-t); --koralle-punkt: var(--koralle-t); --meer-punkt: var(--meer-t); --sand-punkt: var(--sand-t);
  --auto-band: linear-gradient(140deg, var(--auto-band-1) 0%, var(--auto-band-2) 45%, var(--auto-band-3) 100%);
  --auf-farbe-leise: color-mix(in oklch, var(--auf-farbe) 20%, transparent);
}
:root[data-theme="dark"] {
  --salbei-punkt: var(--salbei-p); --sonne-punkt: var(--sonne-p); --grau-punkt: var(--grau-p); --koralle-punkt: var(--koralle-p); --meer-punkt: var(--meer-p); --sand-punkt: var(--sand-p);
}
.f-koralle, .t-koralle { --v: var(--koralle-v); --g2: var(--koralle-g2); --pk: var(--koralle-punkt); }
.f-sand, .t-sand { --v: var(--sand-v); --g2: var(--sand-g2); --pk: var(--sand-punkt); }
.f-salbei, .t-salbei { --v: var(--salbei-v); --g2: var(--salbei-g2); --pk: var(--salbei-punkt); }
.f-meer, .t-meer { --v: var(--meer-v); --g2: var(--meer-g2); --pk: var(--meer-punkt); }
.f-lavendel, .t-lavendel { --v: var(--lavendel-v); --g2: var(--lavendel-g2); --pk: var(--lavendel-t); }
.f-sonne, .t-sonne { --v: var(--sonne-v); --g2: var(--sonne-g2); --pk: var(--sonne-punkt); }
.f-grau, .t-grau { --v: var(--grau-v); --g2: var(--grau-g2); --pk: var(--grau-punkt); }
.t-sonne { --fb-kopf-g: var(--sonne-g); --fb-kopf-t: var(--sonne-t); --fb-kopf-p: var(--sonne-p); }

@keyframes auto-ein { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Kopf: blaues Band mit Wellen, nur Titel und Reiter ---------- */
.seite.auto-seite { max-width: 1120px; }
.auto-band { position: relative; overflow: hidden; margin: 0 0 var(--abst-12); padding: var(--abst-16) var(--abst-24) 28px; border-radius: var(--rund-flaeche);
  background: var(--auto-band); color: var(--auto-band-text); }
.auto-band > * { position: relative; }
.seite.auto-seite .auto-band .seite-kopf { margin-bottom: var(--abst-4); gap: var(--abst-4); }
.auto-band .sk-werkzeuge { margin-top: 0; }
.auto-band .seite-kopf h1 { color: var(--auto-band-text); font-size: var(--sg-24); letter-spacing: -.01em; }
.auto-band .sk-zeile .icon-knopf { color: var(--auto-band-text); }
@media (hover: hover) { .auto-band .sk-zeile .icon-knopf:hover { background: color-mix(in oklch, var(--auf-farbe) 14%, transparent); } }
.auto-band .sk-werkzeuge .umschalter { background: color-mix(in oklch, var(--auf-farbe) 16%, transparent); }
.auto-band .sk-werkzeuge .umschalter button, .auto-band .sk-werkzeuge .umschalter a { color: var(--auto-band-text); }
.auto-band .sk-werkzeuge .umschalter [aria-checked="true"] { background: var(--auf-farbe); color: var(--auto-band-tinte); box-shadow: none; }
@media (hover: hover) { .auto-band .sk-werkzeuge .umschalter button:hover { color: var(--auto-band-text); } .auto-band .sk-werkzeuge .umschalter [aria-checked="true"]:hover { color: var(--auto-band-tinte); } }
.auto-band .reiter-zeile { margin: 0; border-bottom: 0; gap: var(--abst-24); position: relative; z-index: 1; }
/* aktiver Reiter: Strich als innerer Schatten, damit die scrollbare Reiterzeile ihn nicht abschneidet */
.auto-band .reiter-zeile a { color: var(--auto-band-leise); border-bottom: 0; margin-bottom: 0; padding: 6px 0 8px; }
.auto-band .reiter-zeile a .leise { color: inherit; }
.auto-band .reiter-zeile a[aria-selected="true"] { color: var(--auto-band-text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--auto-band-text); }
@media (hover: hover) { .auto-band .reiter-zeile a:hover { color: var(--auto-band-text); } }
.auto-band .reiter-zeile a:focus-visible, .auto-band .icon-knopf:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--auf-farbe); border-radius: var(--rund-mini); }
.auto-band .reiter-zeile a[aria-selected="true"]:focus-visible { box-shadow: inset 0 -3px 0 var(--auto-band-text), 0 0 0 2px var(--auf-farbe); }
.auto-band .reiter-zeile .ki-zahl { background: var(--auf-farbe); color: var(--auto-band-tinte); }
.auto-welle { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 30px; display: block; pointer-events: none; z-index: 0; }
.auto-welle .w1 { fill: var(--auto-welle-1); opacity: .45; }
.auto-welle .w2 { fill: var(--auto-welle-2); opacity: .6; }
.auto-welle .w3 { fill: var(--grund); }
/* Erklärsatz unter dem Band; über der eigenen Liste entfällt er (B4b: erste Karte bei 1440 x 900 höchstens bei 360 px) */
.auto-erklaer { margin: 0 0 var(--abst-16); max-width: 760px; font-size: var(--sg-14); }
.seite:has(.al-abschnitt) .auto-erklaer { display: none; }

@media (max-width: 760px) {
  .auto-band { margin: calc(-1 * var(--abst-12)) calc(-1 * var(--abst-16)) var(--abst-12); padding: var(--abst-12) var(--abst-16) 26px; border-radius: 0; }
  .auto-band .seite-kopf { margin-bottom: var(--abst-8); }
  .auto-band .reiter-zeile { gap: var(--abst-20); -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); scroll-snap-type: x proximity; }
  .auto-band .reiter-zeile a { scroll-snap-align: start; }
  .auto-welle { height: 20px; }
  .auto-erklaer { font-size: var(--sg-13); margin-bottom: var(--abst-12); }
}

/* ---------- Zustände als Punkt mit Wort ---------- */
.al-loz, .ae-loz, .fb-lozenge { --pk: var(--grau-punkt); }
.al-loz, .ae-loz, .fb-lozenge { background: transparent !important; border-color: transparent !important; box-shadow: none; padding: 0; gap: 6px; height: 22px; color: var(--text-2); }
.al-loz::before, .ae-loz::before, .fb-lozenge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pk); flex: none; }
.al-loz-live, .ae-loz-live, .fb-lozenge.z-live { --pk: var(--salbei-punkt); color: var(--salbei-t); font-weight: 600; }
.al-loz-entwurf, .ae-loz-entwurf, .fb-lozenge.z-entwurf { --pk: var(--sonne-punkt); color: var(--sonne-t); }
.ae-loz-probe { --pk: var(--salbei-punkt); color: var(--salbei-t); }
.ae-loz-probe::before { background: transparent; box-shadow: inset 0 0 0 2px var(--pk); }
.al-loz-beliebt { --pk: var(--sonne-punkt); color: var(--sonne-t); height: 18px; font-weight: 600; }
.ae-loz-punkt { display: none; }
.ae-feldname + .ae-loz-aus::before { display: none; }
/* Entwurfsmarke hinter dem Wort wie ein Hinweispunkt, damit vor dem Wort nur der Zustandspunkt steht */
.al-zustand { display: inline-flex; align-items: center; gap: 2px; }
.al-entwurf-punkt { order: 1; align-self: flex-start; margin-top: 3px; width: 6px; height: 6px; background: var(--sonne-punkt); }
/* Editor-Kopf: der Entwurfspunkt steht beim Speicherstand "Entwurf gespeichert" (Konzept 2.4) */
.fb-entwurf-punkt { flex: none; margin: 0 3px; background: var(--sonne-punkt); }
.fb-versionen-liste .fb-lozenge { height: 18px; }

/* Protokoll: Ergebnis als Punkt mit Wort, Probe als Ring */
.status-chip.erg { background: transparent; padding: 0; gap: 6px; color: var(--t); }
.status-chip.erg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pk, var(--p)); flex: none; }
.status-chip.erg.ring::before { background: transparent; box-shadow: inset 0 0 0 2px var(--pk, var(--p)); }

/* Hauptschalter: an = voller Punkt, aus (nur Probe) = Ring */
.al-hs { background: var(--meer-g); color: var(--meer-t); }
@media (hover: hover) { .al-hs:hover { background: var(--meer-g2); color: var(--meer-t); } }
.al-hs > .ic { color: var(--meer-t); }
.al-hs-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--salbei-punkt); }
.al-hs-punkt.an { background: var(--salbei-punkt); box-shadow: none; }

/* ---------- Liste der Automationen: kompakte Zeilen auf einer Fläche ---------- */
.al { --al-neu: var(--text-2); }
.al-titel { font-size: var(--sg-20); line-height: 32px; }
.al-karten:has(> .al-karte) { gap: 0; background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: var(--al-schatten); overflow: clip; }
.al-karten > .al-karte { border-radius: 0; box-shadow: none; padding: var(--abst-8) var(--abst-16); gap: 2px; background: transparent; }
.al-karten > .al-karte + .al-karte { border-top: var(--haar) solid var(--linie); }
@media (hover: hover) { .al-karten > .al-karte:hover { box-shadow: none; background: color-mix(in oklch, var(--meer-g) 45%, var(--grund)); } }
.al-k-name { font-size: var(--sg-15); }
.al-zahl { font-weight: 600; }
.al-ausloeser { gap: 2px; }
/* eine Auslöserzeile wiederholt nur die Zahlen der Kopfzeile: dann leise ausblenden (Text bleibt im Markup) */
.al-ausloeser > .al-az:only-child .al-zahl { visibility: hidden; }
.al-az-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--koralle-v); color: var(--auf-farbe); }
.al-az-ic .ic { width: 13px; height: 13px; }
.al-az-ic.ohne { background: var(--grau-v); }
.al-az-text { font-size: var(--sg-13); }
.al-rang .bk-rang { border-top: 0; padding-top: 0; font-size: var(--sg-12); color: var(--text-3); }
.al-rang .bk-rang .ic { width: 13px; height: 13px; }
/* die kompakte Zeile rückt den Rang in die Kartenmitte: sein Text bleibt Teil der ziehbaren Karte, nur die Pfeile reagieren */
.al-karten > .al-karte .bk-rang { pointer-events: none; }
.al-karten > .al-karte .bk-rang-knoepfe { pointer-events: auto; }
/* mit Maus: Knöpfe der Zeile behalten ihre Trefferfläche, nehmen aber keine Zeilenhöhe ein (Ziel etwa 8 Zeilen bei 1440 x 900) */
@media (pointer: fine) {
  .al-karten > .al-karte .al-mehr, .al-karten > .al-karte .al-schalter, .al-karten > .al-karte .bk-rang-knoepfe .icon-knopf { margin-block: -5px; }
  .al-karten > .al-karte .al-mehr-platz { height: 22px; }
  .al-karten > .al-karte .al-k-kopf, .al-karten > .al-karte .al-az { min-height: 22px; }
}

/* Ordner: warme Ablage-Fläche in sand */
.al-ordner-kachel:not(.al-ordner-neu) { background: var(--sand-g); box-shadow: none; color: var(--text); }
@media (hover: hover) { .al-ordner-kachel:not(.al-ordner-neu):hover { background: var(--sand-g2); box-shadow: none; } }
.al-ordner-kachel:not(.al-ordner-neu) .al-ordner-ic { color: var(--sand-t); }
.al-ordner-kachel:not(.al-ordner-neu) .al-ordner-zahl { color: var(--sand-t); font-weight: 600; }
.al-ordner-neu, .al-neu-flaeche { color: var(--text-2); border-color: var(--linie-stark); }
@media (hover: hover) { .al-ordner-neu:hover, .al-neu-flaeche:hover { background: var(--meer-g); color: var(--meer-t); border-color: var(--meer-p); } }
.al-link:not(.leise) { color: var(--text-2); }

/* Raster: Vorschau auf hellblauer Fläche unter dem Zustand (das Schild hat keine Fläche und verdeckt nichts) */
.al-kachel-bild { background: var(--auto-flaeche); padding-top: 30px; }
.al-kachel-zustand { top: 6px; }
.al-vs-kopf.f-koralle { fill: var(--koralle-v); } .al-vs-kopf.f-sand { fill: var(--sand-v); } .al-vs-kopf.f-meer { fill: var(--meer-v); }
.al-vs-kopf.f-lavendel { fill: var(--lavendel-v); } .al-vs-kopf.f-salbei { fill: var(--salbei-v); } .al-vs-kopf.f-grau { fill: var(--grau-v); }
.al-vs-kopf.f-sonne { fill: var(--sonne-p); fill-opacity: .55; }
.al-vs-linien path { stroke: var(--auto-linie); stroke-opacity: .8; }

/* Leerzustand: ein Satz, ein Knopf, darunter eine ruhige Welle (Maske, Farbe aus dem Token) */
.al-leer { position: relative; overflow: hidden; padding-bottom: 44px; }
.al-leer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; opacity: .6; background: var(--auto-welle-2);
  -webkit-mask: no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C60 2 120 26 200 14 C280 2 340 24 400 12' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M0 22 C70 12 130 30 210 20 C290 10 340 28 400 20' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask: no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C60 2 120 26 200 14 C280 2 340 24 400 12' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M0 22 C70 12 130 30 210 20 C290 10 340 28 400 20' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }

/* Menüs wachsen aus ihrem Knopf */
.al-menue, .fb-menue { animation: auto-ein 160ms var(--kurve-rein); transform-origin: top left; }

/* Dialog "Neue Automation": Vorlagen mit blauer Kopfkante */
.al-vk { box-shadow: inset 0 3px 0 var(--meer-v), 0 0 0 var(--haar) var(--linie-stark); }

/* ---------- Flow-Builder ---------- */
.bk.fb-an { --fb-flaeche: var(--auto-flaeche); --fb-linie: var(--auto-linie); --fb-auswahl: var(--tinte); }
.fb-block .fb-kopf { background: var(--v, var(--grau-v)); color: var(--auf-farbe); }
.fb-block .fb-titel strong { color: var(--auf-farbe); }
.fb-block .fb-unter { color: var(--auf-farbe); font-size: var(--sg-12); opacity: 1; }
.fb-block .fb-sym { background: var(--auf-farbe-leise); color: var(--auf-farbe); }
.fb-block .fb-kopf .fb-warn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--auf-farbe); color: var(--sonne-t); }
.fb-block .fb-kopf .fb-warn.fehler { color: var(--koralle-t); }
.fb-block .fb-kopf .fb-warn .ic { width: 14px; height: 14px; }
.fb-start .fb-kopf { background: var(--koralle-v); }
/* Notiz: heller Zettel, Symbol grau umrandet, damit sie nicht mit Warten (sand) verwechselt wird */
.fb-block.notiz .fb-kopf { background: transparent; color: var(--text); }
.fb-block.notiz .fb-titel strong { color: var(--text); }
.fb-block.notiz .fb-unter { color: var(--text-2); }
.fb-block.notiz .fb-sym { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.fb-block.gewaehlt { box-shadow: 0 0 0 2px var(--fb-auswahl), var(--schatten); }
.fb-klein, .fb-ctr { font-size: var(--sg-12); }
.fb-stat { font-size: var(--sg-12); }
.fb-zeile { font-size: var(--sg-13); }
.fb-seite .bk-panel-kopf[data-farbe] { box-shadow: inset 0 3px 0 var(--fb-kopf-v, var(--fb-kopf-p, var(--grau-p))); }
.fb-seite .bk-panel-kopf[data-farbe="sand"] { --fb-kopf-v: var(--sand-v); } .fb-seite .bk-panel-kopf[data-farbe="meer"] { --fb-kopf-v: var(--meer-v); }
.fb-seite .bk-panel-kopf[data-farbe="lavendel"] { --fb-kopf-v: var(--lavendel-v); } .fb-seite .bk-panel-kopf[data-farbe="salbei"] { --fb-kopf-v: var(--salbei-v); }
.fb-seite .bk-panel-kopf[data-farbe="koralle"] { --fb-kopf-v: var(--koralle-v); } .fb-seite .bk-panel-kopf[data-farbe="grau"] { --fb-kopf-v: var(--grau-v); }
.fb-seite .bk-panel-kopf[data-farbe="sonne"] { --fb-kopf-v: var(--sonne-p); }

/* Blatt "Block hinzufügen": zwei Spalten, kurze Beschreibung in der Kachel statt Tooltip; Weiter und Extras teilen
   sich eine Zeile, damit das Blatt auch bei 1280 x 720 ganz zu sehen ist. Die Lage klemmt flowbuilder.js links der
   Werkzeugspalte. */
.fb-menue { width: 404px; max-width: calc(100% - 24px); padding: var(--abst-8) var(--abst-12) var(--abst-12);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--abst-8); align-content: start; }
.fb-menue-kopf, .fb-menue-abschnitt { grid-column: 1 / -1; }
.fb-menue-abschnitt { padding: 4px 0; gap: 4px; }
.fb-menue-abschnitt:has(> .fb-kacheln-menue > :only-child) { grid-column: auto; }
.fb-menue-abschnitt:has(> .fb-kacheln-menue > :only-child) .fb-kacheln-menue { grid-template-columns: 1fr; }
.fb-menue-kopf strong { font: 600 var(--sg-16)/1.3 var(--schrift-marke); }
.fb-menue-titel { font-size: var(--sg-12); }
.fb-kacheln-menue { gap: 6px; }
.fb-kachel { align-items: center; min-height: 52px; padding: 6px 8px; border-radius: var(--rund-mittel); background: var(--g, var(--flaeche)); }
@media (hover: hover) { .fb-kachel:hover { background: var(--g2, var(--flaeche-2)); box-shadow: none; } }
.fb-kachel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tinte); }
.fb-kachel .fb-sym { flex: none; width: 28px; height: 28px; background: var(--v, var(--grau-v)); color: var(--auf-farbe); }
.fb-kachel[data-fb-neu="notiz"] .fb-sym { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.fb-kachel-text { display: grid; gap: 1px; min-width: 0; }
.fb-kachel-name { font-size: var(--sg-13); font-weight: 600; color: var(--text); line-height: 1.25; }
.fb-kachel-zus { font-size: var(--sg-12); font-weight: 400; color: var(--t, var(--text-2)); line-height: 1.3; }
.fb-kachel[data-fb-neu="notiz"] .fb-kachel-zus { color: var(--text-2); }

/* ---------- Schrittliste und Panels: dieselben vollen Farben ---------- */
.bk-sym.t-koralle { background: var(--koralle-v); } .bk-sym.t-sand { background: var(--sand-v); } .bk-sym.t-meer { background: var(--meer-v); }
.bk-sym.t-lavendel { background: var(--lavendel-v); } .bk-sym.t-salbei { background: var(--salbei-v); } .bk-sym.t-grau { background: var(--grau-v); }
.bk-sym:not(.t-tinte) { color: var(--auf-farbe); }
.bk-sym.t-sonne { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.bk-karte:has(> .bk-sym.t-meer) { box-shadow: inset 3px 0 0 var(--meer-v); }
.bk-karte:has(> .bk-sym.t-koralle) { box-shadow: inset 3px 0 0 var(--koralle-v); }
.bk-karte:has(> .bk-sym.t-sand) { box-shadow: inset 3px 0 0 var(--sand-v); }
.bk-karte:has(> .bk-sym.t-lavendel) { box-shadow: inset 3px 0 0 var(--lavendel-v); }
.bk-karte:has(> .bk-sym.t-salbei) { box-shadow: inset 3px 0 0 var(--salbei-v); }
.bk-karte:has(> .bk-sym.t-grau) { box-shadow: inset 3px 0 0 var(--grau-v); }
.bk-karte.aktiv { box-shadow: 0 0 0 .5px var(--text), inset 3px 0 0 var(--text); }

/* ---------- Basics, Felder, Auswertung, KI-Vorschläge ---------- */
.ae-unternav a[aria-current="page"] { background: var(--meer-g); color: var(--meer-t); font-weight: 600; }
.ae-rund-ic { background: var(--meer-g); color: var(--meer-t); }
/* Kennzahlen: Titel darf zweizeilig sein, Zahl und Zusatz stehen per Subgrid in jeder Reihe auf einer Höhe */
.ae-kacheln { row-gap: 10px; }
.ae-kachel { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start; box-shadow: inset 0 3px 0 var(--meer-v); }
.ae-kacheln > .ae-kachel:nth-child(n+4) { box-shadow: inset 0 3px 0 var(--salbei-v); }
.ae-kachel-titel { align-self: start; }
.ae-kacheln > .ae-kachel:nth-child(n+4) .ae-kachel-zahl { color: var(--salbei-t); }
.ae-kacheln + .ae-erklaer { margin: var(--abst-8) 0 var(--abst-16); }
.ae-bestenliste { margin-top: var(--abst-24); }
.ae-bl-platz { background: var(--meer-g); color: var(--meer-t); }
.ae-ki-karte { box-shadow: inset 3px 0 0 var(--meer-v), 0 0 0 var(--haar) var(--linie-stark); }

@media (prefers-reduced-motion: reduce) {
  .al-menue, .fb-menue { animation: none; }
}