/* =============================================================================
   Mini Cafe · Entwürfe v2 · basis.css
   Beide Looks als Variablen, Grundlage, Grundlayout, Umbruch Handy ↔ Computer.

   Umschalter: <html data-look="hell">  = A „Haven in Mahdis Grün“ (Tafel a3)
               <html data-look="dunkel"> = B „Dunkel: abends im Lokal“ (Tafel b3)
   Die Werte kommen direkt aus stimmung/a3/stil.css und stimmung/b3/b3.css.

   Computer = ab 1024 px Breite:  @media (min-width: 1024px) { … }
   (Variablen gehen in Media-Queries nicht, darum steht die Zahl hier fest.)

   Regel für alle Seiten: nur Rollen-Variablen benutzen (--grund, --text, --haupt …),
   keine Farbwerte direkt. Dann stimmt jede Seite automatisch in beiden Looks.
   ============================================================================= */

/* ---------- A · hell (Tafel a3) ---------------------------------------------- */
:root,
html[data-look="hell"] {
  color-scheme: light;

  /* Rohfarben (nur hier verwenden) */
  --c-beige: #EFE7DA;        /* Grund der Seite                          */
  --c-beige-hell: #F7F2EA;   /* Karten, Listen, Leisten, Text auf Grün   */
  --c-beige-tief: #E4D9C6;   /* Chips, Nebenknöpfe, ruhige Flächen       */
  --c-beige-rand: #D3C4AA;   /* gedrückt, Ausverkauft                    */
  --c-gruen: #14523A;        /* Mahdis Grün: alles zum Antippen          */
  --c-gruen-tief: #0E3D2B;   /* gedrückt                                 */
  --c-gold: #E3B54A;         /* nur Licht, Abzeichen, Haken – nie Schrift auf Beige */
  --c-schwarz: #1D1D1B;      /* Schrift, Logo                            */
  --c-schwarz-2: #55514A;    /* Nebentext (6,4 : 1 auf Beige)            */
  --c-schwarz-3: #8C857A;    /* nur Deko und Feldränder, nie Text        */

  /* Rollen: Flächen */
  --grund: var(--c-beige);             /* Seitengrund                         */
  --grund-tief: var(--c-beige-tief);   /* ruhiger Block (z. B. Fuß)           */
  --flaeche: var(--c-beige-hell);      /* Karten, Listen, Kacheln             */
  --flaeche-tief: var(--c-beige-tief); /* Nebenknöpfe, runde Knöpfe, Größe   */
  --flaeche-druck: var(--c-beige-rand);/* gedrückt / Maus darüber             */
  --leiste-oben: var(--c-beige);       /* klebende Kategorie-Leiste           */
  --leiste-unten: var(--c-beige);      /* feste Leiste unten                  */
  --fuss-grund: var(--c-beige-tief);
  --feld: var(--c-beige-hell);         /* Formularfeld                        */
  --feld-rand: var(--c-schwarz-3);     /* 3,3 : 1 gegen das Feld              */
  --aus: var(--c-beige-rand);          /* Ausverkauft-Abzeichen               */
  --aus-knopf: var(--c-beige-tief);    /* gesperrter Knopf                    */

  /* Rollen: Schrift und Aktion */
  --text: var(--c-schwarz);
  --text-neben: var(--c-schwarz-2);
  --text-still: var(--c-schwarz-3);    /* nur Deko                            */
  --haupt: var(--c-gruen);             /* der eine Hauptknopf-Stil            */
  --haupt-druck: var(--c-gruen-tief);
  --auf-haupt: var(--c-beige-hell);
  --gewaehlt: var(--c-gruen);          /* aktiver Chip, gewählte Kachel       */
  --auf-gewaehlt: var(--c-beige-hell);
  --plus: var(--c-gruen);              /* runder „+“-Knopf                     */
  --auf-plus: var(--c-beige-hell);
  --plus-druck: var(--c-gruen-tief);
  --akzent: var(--c-gold);             /* Licht, Abzeichen, Zähler, Haken     */
  --auf-akzent: var(--c-schwarz);
  --link: var(--c-gruen);
  --link-linie: var(--c-gruen);
  --live: var(--c-gruen);              /* lebende Abholzeit                   */
  --live-zeit: var(--c-gruen);
  --live-punkt: var(--c-gruen);
  --warn: #9E2B17;                     /* Warnung/Rot (7,0 : 1 auf --flaeche) */
  --auf-warn: #FFF8F2;
  --warn-flaeche: rgba(158, 43, 23, .09);
  --fokus: var(--c-gruen);
  --logo-farbe: var(--c-schwarz);      /* Logo wie das Schild über der Tür    */
  --klaeren: var(--c-schwarz);         /* Abzeichen „mit Mahdi klären“        */
  --auf-klaeren: var(--c-beige-hell);

  /* Schrift: eine Familie (Figtree) */
  --schrift: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: var(--schrift);
  --schrift-wort: var(--schrift);      /* großes Fotowort „MINI CAFE“         */
  --gewicht-titel: 800;
  --gewicht-wort: 900;
  --gewicht-stark: 700;
  --gewicht-knopf: 700;
  --gewicht-chip: 600;
  --gewicht-name: 600;                 /* Produktname in Listen               */
  --gewicht-preis: 700;
  --sperrung-titel: -0.025em;
  --sperrung-klein: -0.015em;
  --zeile-titel: 1.06;

  /* Schriftgrößen (Handy) */
  --gr-titel-1: 34px;   /* h1 */
  --gr-titel-2: 28px;   /* h2 */
  --gr-titel-3: 20px;   /* h3 */
  --gr-lead: 17px;      /* Satz unter dem Titel */
  --gr-text: 16px;
  --gr-klein: 15px;
  --gr-mini: 13px;
  --gr-knopf: 17px;
  --gr-chip: 15px;
  --gr-name: 16px;
  --gr-preis: 16px;

  /* Abstände */
  --rand: 24px;                 /* Seitenrand (Handy; Fassung 1: 20, Mahdi 9.1.2 „mehr Rand“) */
  --abstand-abschnitt: 76px;    /* zwischen Abschnitten (Handy; Fassung 1: 56, Mahdi 9.1.1)   */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px;
  --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-12: 48px; --a-16: 64px;
  --breite-max: 1360px;         /* Inhaltsbreite am großen Bildschirm  */
  --tippen: 44px;               /* kleinste Tippfläche                 */

  /* Kopf */
  --kopf-h: 64px;
  --kopf-klebt: 0px;            /* Abstand für klebende Leisten oben   */
  --logo-h: 30px;               /* Quer-Logo im Kopf (Handy 30, Computer 42) */

  /* Rundungen */
  --rund-pille: 999px;
  --rund-karte: 24px;
  --rund-kachel: 16px;
  --rund-foto: 18px;
  --rund-feld: 16px;
  --rund-gross: 28px;

  /* Schatten (nur für Schwebendes; Flächen bleiben flach) */
  --schatten-schwebend: 0 10px 30px rgba(29, 29, 27, .18);
  --schatten-bowl: drop-shadow(0 14px 18px rgba(29, 29, 27, .16));

  /* Licht (Jazean-Lichtschein) */
  --licht: var(--c-gold);
  --licht-staerke: .34;

  /* Bewegung (Jazean gemessen) */
  --kurve-gleiten: cubic-bezier(.22, .61, .36, 1);
  --kurve-druck: cubic-bezier(.2, 0, 0, 1);
  --dauer-gleiten: 500ms;
  --dauer-druck: 120ms;
  --dauer-wechsel: 200ms;
  --dauer-auftritt: 720ms;
  --versatz-auftritt: 26px;
}

/* ---------- B · dunkel (Tafel b3) -------------------------------------------- */
html[data-look="dunkel"] {
  color-scheme: dark;

  --c-gruen-schwarz: #081a16;
  --c-gruen-tief: #0a201b;
  --c-gruen: #0f2e27;          /* Samtgrün wie die Sitzkissen (Foto 035) */
  --c-gruen-flaeche: #163b33;
  --c-gruen-hoch: #1e4a40;
  --c-gruen-hoch-2: #285849;
  --c-schwarz: #070b0a;        /* wie das Nasenschild (Foto 034) */
  --c-beige: #f0e6d3;          /* wie Wand und Holzbank */
  --c-beige-2: #cfc2aa;
  --c-beige-3: #a99c84;
  --c-gold: #e9b949;           /* wie der Schriftzug über der Tür */
  --c-gold-hell: #f3cd6e;

  --grund: var(--c-gruen);
  --grund-tief: var(--c-gruen-tief);
  --flaeche: var(--c-gruen-flaeche);
  --flaeche-tief: var(--c-gruen-hoch);
  --flaeche-druck: var(--c-gruen-hoch-2);
  --leiste-oben: var(--c-gruen-tief);
  --leiste-unten: var(--c-schwarz);
  --fuss-grund: var(--c-gruen-schwarz);
  --feld: var(--c-gruen-flaeche);
  --feld-rand: var(--c-beige-3);
  --aus: var(--c-gruen-hoch-2);
  --aus-knopf: var(--c-gruen-hoch);

  --text: var(--c-beige);
  --text-neben: var(--c-beige-2);
  --text-still: var(--c-beige-3);
  --haupt: var(--c-gold);
  --haupt-druck: var(--c-gold-hell);
  --auf-haupt: var(--c-schwarz);
  --gewaehlt: var(--c-beige);
  --auf-gewaehlt: var(--c-gruen-tief);
  --plus: var(--c-beige);
  --auf-plus: var(--c-gruen-tief);
  --plus-druck: var(--c-beige-2);
  --akzent: var(--c-gold);
  --auf-akzent: var(--c-schwarz);
  --link: var(--c-beige);
  --link-linie: var(--c-gold);
  --live: var(--c-beige);
  --live-zeit: var(--c-gold);
  --live-punkt: var(--c-gold);
  --warn: #FF9F85;                     /* Warnung/Rot (7,1 : 1 auf --flaeche) */
  --auf-warn: #1A0905;
  --warn-flaeche: rgba(255, 159, 133, .13);
  --fokus: var(--c-gold);
  --logo-farbe: var(--c-beige);
  --klaeren: var(--c-beige);
  --auf-klaeren: var(--c-schwarz);

  /* Schrift: Gloock (Überschriften) + Jost (Text, Bedienung, Fotowort) */
  --schrift: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: "Gloock", Georgia, serif;
  --schrift-wort: "Jost", system-ui, sans-serif;
  --gewicht-titel: 400;
  --gewicht-wort: 900;
  --gewicht-stark: 600;
  --gewicht-knopf: 600;
  --gewicht-chip: 500;
  --gewicht-name: 500;
  --gewicht-preis: 600;
  --sperrung-titel: -0.01em;
  --sperrung-klein: -0.005em;
  --zeile-titel: 1.04;

  --gr-titel-1: 34px;
  --gr-titel-2: 32px;
  --gr-titel-3: 24px;
  --gr-lead: 17px;
  --gr-text: 17px;
  --gr-klein: 15px;
  --gr-mini: 14px;
  --gr-knopf: 17px;
  --gr-chip: 16px;
  --gr-name: 17px;
  --gr-preis: 17px;

  --rand: 22px;                 /* Handy; Fassung 1: 16 */
  --rund-kachel: 18px;
  --rund-foto: 20px;

  --schatten-schwebend: 0 12px 32px rgba(0, 0, 0, .45);
  --schatten-bowl: drop-shadow(0 16px 22px rgba(0, 0, 0, .38));
  --licht-staerke: .34;
}

/* ---------- Computer (ab 1024 px) -------------------------------------------- */
@media (min-width: 1024px) {
  :root, html[data-look="hell"] {
    --gr-titel-1: 56px;
    --gr-titel-2: 48px;
    --gr-titel-3: 24px;
    --gr-lead: 20px;
    --gr-text: 17px;
    --gr-knopf: 18px;
    --rand: max(40px, calc((100vw - var(--breite-max)) / 2));
    --abstand-abschnitt: 120px;
    --kopf-h: 96px;
    --kopf-klebt: 96px;
    --logo-h: 42px;
  }
  html[data-look="dunkel"] {
    --gr-titel-1: 62px;
    --gr-titel-2: 54px;
    --gr-titel-3: 30px;
    --gr-lead: 19px;
    --gr-text: 18px;
    --gr-knopf: 18px;
    --rand: max(48px, calc((100vw - var(--breite-max)) / 2));
    --licht-staerke: .36;
  }
}

/* ---------- Grundlage ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--grund);
  scroll-padding-top: calc(var(--kopf-klebt) + 16px);
}
body {
  min-height: 100svh;
  background: var(--grund);
  color: var(--text);
  font: 400 var(--gr-text)/1.5 var(--schrift);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, a, [role="button"], label, summary { touch-action: manipulation; }
button, .knopf, .chip, .rund, .plus { -webkit-user-select: none; user-select: none; }
input, select, textarea { font: inherit; color: inherit; font-size: max(16px, 1em); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
::selection { background: var(--akzent); color: var(--auf-akzent); }
html[data-look="dunkel"] { scrollbar-color: var(--c-gruen-hoch-2) var(--c-gruen-tief); caret-color: var(--c-gold); }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--sperrung-titel);
  line-height: var(--zeile-titel);
  text-wrap: balance;
}
h1 { font-size: var(--gr-titel-1); }
h2 { font-size: var(--gr-titel-2); }
h3 { font-size: var(--gr-titel-3); letter-spacing: var(--sperrung-klein); }
h4 { font-size: var(--gr-text); letter-spacing: 0; }
p, li { text-wrap: pretty; }
strong, b { font-weight: var(--gewicht-stark); }
.zahl, .preis { font-variant-numeric: tabular-nums; }
.text-neben { color: var(--text-neben); }

/* ---------- Grundlayout -------------------------------------------------------- */
/* Inhalt mit Seitenrand; am großen Bildschirm mittig, höchstens --breite-max breit. */
.rand { padding-inline: var(--rand); }
/* bis an den Bildschirmrand (z. B. waagrechte Chips-Reihe in einem Abschnitt) */
.voll-breit { margin-inline: calc(-1 * var(--rand)); }
.abschnitt { padding: var(--abstand-abschnitt) var(--rand) 0; scroll-margin-top: calc(var(--kopf-klebt) + 16px); }
.abschnitt--eng { padding-top: var(--a-8); }
.seitenkopf { padding: var(--a-3) var(--rand) 0; }
.seitenkopf p { margin-top: var(--a-2); font-size: var(--gr-lead); color: var(--text); max-width: 34em; }

/* Stapel: Kinder untereinander mit gleichem Abstand */
.stapel { display: flex; flex-direction: column; gap: var(--a-3); }
.stapel--gross { gap: var(--a-6); }
/* Reihe: nebeneinander, darf umbrechen */
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); }
/* Raster: zwei Spalten am Handy, mehr am Computer */
.raster { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Spalten: am Handy untereinander, am Computer nebeneinander */
.spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-8); }   /* minmax(0,1fr): langer Inhalt schiebt die Spalte nicht über den Rand */
@media (min-width: 1024px) {
  .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-16); align-items: start; }
  .spalten--seite { grid-template-columns: minmax(0, 1fr) 400px; }   /* Inhalt + Seitenspalte (z. B. Warenkorb) */
  .spalten--gross-klein { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* ---------- Sichtbarkeit -------------------------------------------------------- */
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html[data-look="hell"] .nur-dunkel, html:not([data-look]) .nur-dunkel { display: none !important; }
html[data-look="dunkel"] .nur-hell { display: none !important; }
@media (max-width: 1023.98px) {
  .nur-computer { display: none !important; }
  /* nur am Handy unsichtbar, für Vorleseprogramme aber da (z. B. h1 bei schmalem Kopf) */
  .unsichtbar-handy { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) {
  .nur-handy { display: none !important; }
}

/* ---------- Bewegung ------------------------------------------------------------ */
/* Auftritt: Teile tauchen gestaffelt auf (Verzögerung über style="--v:120ms").
   Nur wenn JavaScript läuft, keine Fotos gemacht werden (?bild=1) und „weniger Bewegung“ aus ist. */
html.bewegung .erscheinen:not(.da) { opacity: 0; }
html.bewegung .erscheinen.da { animation: mc-auftauchen var(--dauer-auftritt) var(--kurve-gleiten) both; animation-delay: var(--v, 0ms); }
@keyframes mc-auftauchen { from { opacity: 0; transform: translateY(var(--versatz-auftritt)); } to { opacity: 1; transform: none; } }
/* Foto holt sich langsam heran (Bild im Rahmen mit class="bild-atmen") */
.bild-atmen { overflow: hidden; }
html.bewegung .bild-atmen:not(.da) > img { transform: scale(1.07); }
html.bewegung .bild-atmen.da > img { animation: mc-heranholen 1800ms var(--kurve-gleiten) both; }
@keyframes mc-heranholen { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Fotos (?bild=1): alles sofort im Endzustand, nichts läuft */
html.bild *, html.bild *::before, html.bild *::after {
  animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition: none !important; caret-color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ---------- Menü-Blatt (Handy/Tablet, seite.js → MC.menueHtml) ----------------------------
   Füllt den Bildschirm, gleitet kurz von oben herein. Zu = unsichtbar (visibility), also nicht fokussierbar.
   Nur Rollen-Variablen, deshalb in beiden Looks stimmig. Computer hat die Kopf-Leiste: Blatt dort aus. */
html.menue-offen, html.menue-offen body { overflow: hidden; }
.menue {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: var(--grund); color: var(--text);
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity var(--dauer-wechsel) var(--kurve-gleiten), transform var(--dauer-wechsel) var(--kurve-gleiten), visibility 0s linear var(--dauer-wechsel);
}
.menue.offen { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menue-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--kopf-h); padding: 0 var(--rand); padding-top: env(safe-area-inset-top, 0px); }
.menue-kopf .kopf-logo { margin-right: 0; }
.menue-zu { background: var(--flaeche-tief); }
.menue-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 4px var(--rand) calc(20px + env(safe-area-inset-bottom, 0px)); }
.menue-liste { border-top: 1px solid var(--menue-linie); }
.menue-liste li { border-bottom: 1px solid var(--menue-linie); }
.menue-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 62px; padding: 8px 2px;
  font: var(--gewicht-titel) 26px/1.15 var(--schrift-titel); letter-spacing: var(--sperrung-klein);
  transition: color 160ms var(--kurve-druck), padding-left var(--dauer-druck) var(--kurve-druck);
}
.menue-zeile > span:first-child { flex: 1 1 auto; min-width: 0; }
.menue-zeile .symbol { width: 22px; height: 22px; flex: none; color: var(--text-neben); }
.menue-zeile[aria-current="page"] { color: var(--link); }
html[data-look="hell"] .menue-zeile[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--link-linie); }
html[data-look="dunkel"] .menue-zeile[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--akzent); }
.menue-zeile:active { padding-left: 8px; }
/* „Mein Konto“: ruhiger, mit rundem Symbol vorn */
.menue-zeile--konto { justify-content: flex-start; font-size: 19px; font-family: var(--schrift); font-weight: 600; }
.menue-zeile--konto > span:nth-child(2) { flex: 1 1 auto; }
.menue-zeile.menue-zeile--konto > .rund { flex: none; width: var(--tippen); background: var(--flaeche-tief); }
html[data-look="dunkel"] .menue-zeile--konto { font-weight: 500; }
.menue-unten { margin-top: auto; padding-top: 24px; display: grid; gap: 18px; }
.menue-sprache { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 15px/1 var(--schrift); color: var(--text-neben); }
.menue-sprache-wahl { display: inline-flex; padding: 3px; border-radius: var(--rund-pille); background: var(--flaeche-tief); }
.menue-sprache-wahl a { display: inline-grid; place-items: center; min-width: 56px; height: var(--tippen); padding: 0 14px; border-radius: var(--rund-pille); font: 700 16px/1 var(--schrift); color: var(--text-neben); transition: background-color 160ms var(--kurve-druck), color 160ms; }
.menue-sprache-wahl a[aria-current="true"] { background: var(--gewaehlt); color: var(--auf-gewaehlt); }
html[data-look="dunkel"] .menue-sprache-wahl a { font-weight: 600; }
/* feine Linie: aus Schriftfarbe gemischt, keine feste Farbe */
:root { --menue-linie: color-mix(in srgb, var(--text) 16%, transparent); }
/* Zeilen tauchen gestaffelt auf (nur mit Bewegung) */
html.bewegung .menue .menue-liste li { opacity: 0; transform: translateY(8px); transition: opacity var(--dauer-wechsel) var(--kurve-gleiten), transform var(--dauer-wechsel) var(--kurve-gleiten); }
html.bewegung .menue.offen .menue-liste li { opacity: 1; transform: none; }
html.bewegung .menue.offen .menue-liste li:nth-child(2) { transition-delay: 30ms; }
html.bewegung .menue.offen .menue-liste li:nth-child(3) { transition-delay: 60ms; }
html.bewegung .menue.offen .menue-liste li:nth-child(4) { transition-delay: 90ms; }
html.bewegung .menue.offen .menue-liste li:nth-child(5) { transition-delay: 120ms; }
html.bewegung .menue.offen .menue-liste li:nth-child(6) { transition-delay: 150ms; }
@media (hover: hover) and (pointer: fine) {
  .menue-zeile:hover { color: var(--link); }
  html[data-look="dunkel"] .menue-zeile:hover { color: var(--akzent); }
}
@media (min-width: 1024px) { .menue { display: none; } }
@media (prefers-reduced-motion: reduce) { .menue, .menue li { transform: none !important; } }