/*
  Kopf, Fuß, Warenkorb-Schublade und Toast. Lädt überall (Handle ajm-kopf-fuss, nach ajm-global).
  Übertragen aus Header.astro, Footer.astro, CartDrawer.astro und Base.astro: Die gekapselten Selektoren stehen
  unter der Wurzelklasse der Komponente (.kopf, body > .fuss), :global(x) wurde zu x. Deklarationen unverändert.
  Reihenfolge wie im gebauten Astro-CSS: Kopf, Fuß, Schublade, Rahmen.
*/

/* ---------- Kopf (Header.astro) ---------- */
.kopf {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--flaeche); color: var(--text);
  border-bottom: 1px solid var(--linie);
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}
.kopf .kopf-innen { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); height: var(--header-h); }

/* Über dem Hero: transparent, bis gescrollt oder das Menü offen ist */
.kopf-ueber-hero { position: fixed; inset: 0 0 auto 0; }
.kopf-ueber-hero:not(.ist-fest):not(.menue-offen) { background: transparent; border-color: transparent; color: #fff; }
.kopf-ueber-hero:not(.ist-fest):not(.menue-offen) .burger-balken i { background: #fff; }
.kopf-ueber-hero:not(.ist-fest):not(.menue-offen) .suche-feld { border-color: rgb(255 255 255 / 0.7); }
.kopf-ueber-hero:not(.ist-fest):not(.menue-offen) .suche-feld input { color: #fff; }

.kopf .burger {
  position: relative; display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0.25rem 0.5rem 0.25rem 0;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 650 var(--fs-s) / 1 var(--font-display); letter-spacing: 0.02em;
}
.kopf .burger-balken { display: grid; gap: 5px; width: 28px; transition: transform 160ms var(--ease-out); }
.kopf .burger:active .burger-balken { transform: scale(0.94); }
.kopf .burger-balken i { display: block; height: 3px; border-radius: 2px; background: var(--akzent-text); transition: transform 250ms var(--ease-out), opacity 150ms ease, background-color 250ms ease; transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .kopf .burger:hover .burger-balken i:nth-child(1) { transform: translateX(3px); }
  .kopf .burger:hover .burger-balken i:nth-child(3) { transform: translateX(-3px); }
}
.kopf .burger[aria-expanded='true'] .burger-balken i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf .burger[aria-expanded='true'] .burger-balken i:nth-child(2) { opacity: 0; }
.kopf .burger[aria-expanded='true'] .burger-balken i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Originallogo des Verbands. Im dunklen Schema steht es auf weißem Grund, damit alle Logofarben erhalten bleiben. */
.kopf .marke { display: inline-flex; align-items: center; flex: none; text-decoration: none; background: var(--logo-grund); border-radius: var(--r-feld); }
.kopf .marke-logo { height: calc(var(--header-h) - 1.5rem); width: auto; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .kopf .marke { padding: 0.2rem 0.5rem; } }
:root[data-theme='dark'] .kopf .marke { padding: 0.2rem 0.5rem; }

.kopf .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: clamp(0.35rem, 1.2vw, 1rem); }
.kopf .suche, .kopf .mm-suche { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-s); font-weight: 600; }
.kopf .suche-feld { display: inline-flex; align-items: center; border: 1.5px solid var(--text); border-radius: var(--r-pille); padding-left: 0.9rem; height: 2.75rem; transition: box-shadow 160ms ease; }
.kopf .suche-feld:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 35%, transparent); }
.kopf .suche-feld input { width: 9.5rem; height: 100%; align-self: stretch; border: 0; background: none; font: inherit; font-weight: 400; color: var(--text); outline: none; }
.kopf .suche-feld input::-webkit-search-cancel-button { display: none; }
.kopf .suche-feld button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.3rem; border-radius: 50%; transition: transform 160ms var(--ease-out); }
.kopf .suche-feld button:active, .kopf .mm-social a:active { transform: scale(0.94); }
.kopf .mm-zurueck:active { transform: scale(0.97); }

.kopf .kopf-icon {
  position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: none; border: 0; border-radius: 50%; color: inherit; font-size: 1.45rem; cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.kopf .kopf-icon:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .kopf .kopf-icon:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
.kopf .korb-zahl {
  position: absolute; top: 0.1rem; right: 0; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem;
  display: grid; place-items: center; border-radius: var(--r-pille);
  background: var(--sonne); color: var(--auf-sonne); font: 700 0.6875rem / 1 var(--font-display);
}
.kopf .korb-zahl[hidden] { display: none; }
.kopf .nur-schmal { display: none; }

@media (max-width: 1099px) {
  .kopf .suche { display: none; }
  .kopf .nur-schmal { display: grid; }
}
@media (max-width: 719px) {
  .kopf .nur-schmal { display: none; }
  .kopf .burger-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf .spenden { padding-inline: 0.85rem; }
}
@media (max-width: 419px) {
  .kopf .spenden { width: 2.75rem; padding: 0; font-size: 0; gap: 0; }
  .kopf .spenden svg { font-size: 1.1rem; }
}

/* Overlay */
.kopf .mm {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menue);
  background: var(--flaeche); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 160ms var(--ease-out);
}
.kopf .mm[hidden] { display: none; }
.kopf .mm.ist-offen { opacity: 1; transition-duration: 240ms; }
.kopf .mm-spalten { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(1.5rem, 4vh, 3rem) 4rem; align-items: start; }
.kopf .mm-e1 { grid-column: 1; grid-row: 1; }
.kopf .mm-panel[data-ebene='2'] { grid-column: 2; grid-row: 1; }
.kopf .mm-panel[data-ebene='3'] { grid-column: 3; grid-row: 1; }
.kopf .mm-neben { grid-column: 4; grid-row: 1; display: grid; gap: 1.5rem; justify-items: start; padding-top: 0.5rem; }
.kopf .mm-panel[hidden] { display: none; }
.kopf .mm-panel { animation: mm-rein 200ms var(--ease-out); }
@keyframes mm-rein { from { opacity: 0; transform: translateX(-10px); } }

.kopf .mm-liste { list-style: none; margin: 0; padding: 0; }
.kopf .mm-zeile { display: flex; align-items: stretch; border-bottom: 2px solid var(--linie); transition: border-color 200ms ease; }
.kopf .mm-zeile a { flex: 1; display: flex; align-items: center; padding: 1.25rem 0; color: inherit; text-decoration: none; font-weight: 500; font-size: 1.125rem; transition: color 160ms ease; }
.kopf .mm-e1 .mm-zeile a { font: 600 clamp(1.5rem, 2.2vw, 1.85rem) / 1.1 var(--font-display); font-stretch: 76%; letter-spacing: 0.015em; padding: 1.3rem 0; }
.kopf .mm-zeile.ist-offen, .kopf .mm-zeile.ist-pfad, .kopf .mm-zeile:has(a[aria-current='page']) { border-bottom-color: var(--akzent-text); }
.kopf .mm-zeile a[aria-current='page'] { color: var(--akzent-text); }
@media (hover: hover) and (pointer: fine) { .kopf .mm-zeile a:hover { color: var(--akzent-text); } }
.kopf .mm-pfeil {
  flex: none; align-self: center; position: relative; display: grid; place-items: center; width: 3.75rem; height: 2.75rem;
  background: none; border: 0; border-left: 1px solid var(--linie-stark); color: inherit; cursor: pointer; font-size: 1.25rem;
}
.kopf .mm-pfeil::before { content: ''; position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--flaeche-2); transform: scale(0.85); opacity: 0; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.kopf .mm-pfeil svg { position: relative; }
.kopf .mm-pfeil .ic-zu { display: none; }
.kopf .mm-pfeil[aria-expanded='true'] .ic-zu { display: block; }
.kopf .mm-pfeil[aria-expanded='true'] .ic-auf { display: none; }
.kopf .mm-pfeil[aria-expanded='true']::before, .kopf .mm-pfeil:focus-visible::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .kopf .mm-pfeil:hover::before { opacity: 1; transform: none; } }
.kopf .mm-pfeil:active::before { transform: scale(0.92); }
.kopf .mm-zurueck { display: none; }

.kopf .mm-kontakt { font-size: var(--fs-s); color: var(--text-2); line-height: 1.55; }
.kopf .mm-social { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.kopf .mm-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--linie-stark); color: var(--text); font-size: 1.3rem; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .kopf .mm-social a:hover { background: var(--flaeche-2); } }
.kopf .mm-suche { display: none; }

/* Mobil: jede Ebene überdeckt die vorherige */
@media (max-width: 1023px) {
  .kopf .mm-spalten { display: block; padding-top: 0.5rem; }
  .kopf .mm-panel { position: absolute; inset: 0 0 auto 0; min-height: 100%; background: var(--flaeche); padding: 0.5rem var(--rand) 4rem; margin-inline: calc(var(--rand) * -1); animation-name: mm-rein-mobil; animation-duration: 260ms; animation-timing-function: var(--ease-drawer); z-index: 1; }
  .kopf .mm-panel[data-ebene='3'] { z-index: 2; }
  @keyframes mm-rein-mobil { from { transform: translateX(100%); } }
  .kopf .mm-zurueck {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 3rem; padding: 0; margin-bottom: 0.25rem;
    background: none; border: 0; cursor: pointer; color: var(--akzent-text);
    font: 650 var(--fs-s) / 1 var(--font-display);
  }
  .kopf .mm-neben { margin-top: 2.5rem; }
  .kopf .mm-suche { display: flex; width: 100%; }
  .kopf .mm-suche .suche-feld { flex: 1; }
  .kopf .mm-suche .suche-feld input { width: 100%; }
  .kopf .mm-e1 .mm-zeile a { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kopf .mm, .kopf .mm-panel, .kopf .burger-balken i { transition: none; animation: none; }
}

/* ---------- Fuß (Footer.astro) ---------- */
/* Wurzel enger gefasst (body > .fuss): Die Klasse "fuss" gibt es in der Astro-Fassung noch einmal, gekapselt in
   anderen Komponenten (footer.fuss im Beitrag, aktuelles/[slug].astro; section.fuss im Katalog). Der Fuß der Seite
   ist das einzige Element mit dieser Klasse direkt im <body>. */
body > .fuss { background: var(--tief); color: var(--auf-tief); padding-top: clamp(3rem, 7vw, 5.5rem); margin-top: var(--abschnitt); }
body > .fuss a:not(.btn) { color: inherit; text-decoration: none; }
body > .fuss .fuss-raster { display: grid; grid-template-columns: minmax(16rem, 1.1fr) 3fr; gap: clamp(2rem, 5vw, 5rem); }
body > .fuss .fuss-marke { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
body > .fuss .fuss-logo { display: block; background: #fff; border-radius: var(--r-karte); padding: 0.9rem 1.1rem; }
body > .fuss .fuss-marke img { width: min(100%, 19rem); height: auto; display: block; }
/* Logo-Datei des Themes: PNG 1800 × 564 (Seitenverhältnis 3,191). Die HTML-Fassung lädt das von Astro erzeugte WebP 420 × 132
   (3,182) – zwei Folgen: (1) Die Breite des weißen Kastens (.fuss-logo, in .fuss-marke per justify-items: start so breit wie
   sein Inhalt) richtet sich nach der natürlichen Breite des Bildes, dort 420 px (+ Innenabstand = 455,2 px), hier 1800 px –
   zwischen etwa 490 und 920 px Fensterbreite lief der Kasten deshalb über die ganze Spalte (gemessen bei 768: 706,5 statt
   455,2 px). max-width: 420px begrenzt nur diesen Inhaltsbeitrag; gezeichnet wird das Bild weiter höchstens 19rem breit.
   (2) Das Seitenverhältnis 420/132 wie in der HTML-Fassung: Logo 95,5 statt 95,3 px hoch, Kasten 124,3 px – Adresse, Kontakt
   und „Spenden“ stehen wieder auf denselben Pixeln. */
body > .fuss .fuss-marke img { max-width: 420px; aspect-ratio: 420 / 132; }
body > .fuss address { font-style: normal; color: var(--auf-tief-2); line-height: 1.55; }
body > .fuss .fuss-kontakt { display: grid; gap: 0; }
body > .fuss .fuss-kontakt a { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; }
body > .fuss .fuss-kontakt svg { color: var(--blau); font-size: 1.2rem; }
body > .fuss .fuss-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem 1.5rem; }
body > .fuss .fuss-nav h2 { font-size: 1.05rem; font-stretch: 100%; letter-spacing: 0.02em; margin-bottom: 0.25rem; color: #fff; }
body > .fuss .fuss-nav h2 a { display: inline-flex; align-items: center; min-height: 2.75rem; }
body > .fuss .fuss-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
body > .fuss .fuss-nav li a { display: inline-block; padding-block: 0.65rem; color: var(--auf-tief-2); font-size: var(--fs-s); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { body > .fuss a:not(.btn):hover { color: #fff; text-decoration: underline; } }
body > .fuss .fuss-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: var(--fs-xs); color: var(--auf-tief-2); }
body > .fuss .fuss-recht, body > .fuss .fuss-social { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
body > .fuss .fuss-recht a { display: inline-block; padding-block: 0.8rem; }
body > .fuss .fuss-social { margin-left: auto; gap: 0.4rem; }
/* Die Social-Links stehen bewusst unter ".fuss" statt unter "body > .fuss": In der Astro-Fassung gewinnt
   ".fuss a:not(.btn)" gegen ".fuss-social a" (Kapselung zählt je Teilselektor), die Links erben also die Farbe
   von .fuss-unten und werden erst beim Überfahren weiß. Mit dem schwächeren Vorsatz bleibt diese Rangfolge erhalten. */
.fuss .fuss-social a, body > .fuss .fuss-social button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.25); background: none; color: #fff; font-size: 1.25rem; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.fuss .fuss-social a:active, body > .fuss .fuss-social button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .fuss .fuss-social a:hover, body > .fuss .fuss-social button:hover { background: rgb(255 255 255 / 0.12); text-decoration: none; } }
@media (max-width: 860px) {
  body > .fuss .fuss-raster { grid-template-columns: 1fr; }
  body > .fuss .fuss-social { margin-left: 0; }
}

/* ---------- Warenkorb-Schublade (CartDrawer.astro, dort schon global) ---------- */
.korb {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: none; width: min(100vw, 27rem); max-width: none;
  padding: 0; border: 0; background: var(--flaeche); box-shadow: var(--schatten-hoch);
  transform: translateX(100%); transition: transform 260ms var(--ease-drawer), overlay 260ms allow-discrete, display 260ms allow-discrete;
}
.korb[open] { transform: none; transition-duration: 420ms; }
@starting-style { .korb[open] { transform: translateX(100%); } }
.korb::backdrop { opacity: 0; transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
.korb[open]::backdrop { opacity: 1; transition-duration: 300ms; }
@starting-style { .korb[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .korb, .korb::backdrop { transition: none; } }

.korb-innen { display: grid; grid-template-rows: auto auto 1fr; height: 100%; padding: 1.25rem 1.25rem 0; gap: 1rem; }
.korb-kopf { display: flex; align-items: center; justify-content: space-between; }
.korb-kopf h2 { font-size: var(--fs-xl); }
.korb-zu { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--flaeche-2); color: var(--text); font-size: 1.25rem; cursor: pointer; transition: transform 160ms var(--ease-out); }
.korb-zu:active { transform: scale(0.94); }
.korb-koerper { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.korb-leer { align-self: center; justify-self: center; display: grid; gap: 1rem; justify-items: center; text-align: center; color: var(--text-2); }
.korb-leer[hidden] { display: none; }
.korb-leer svg { font-size: 2.5rem; }
.korb-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; grid-row: 1; }
.korb-posten { display: grid; grid-template-columns: 3rem 1fr auto; grid-template-areas: 'farbe info weg' 'farbe menge preis'; gap: 0.35rem 0.85rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--linie); }
.korb-farbe { grid-area: farbe; width: 3rem; height: 3.6rem; border-radius: var(--r-feld); background: var(--f); }
.korb-info { grid-area: info; display: grid; line-height: 1.25; }
.korb-info small { color: var(--text-2); }
.korb-menge { grid-area: menge; display: inline-flex; align-items: center; gap: 0.25rem; }
.korb-menge button, .korb-weg { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--linie-stark); background: none; color: var(--text); font-size: 1.1rem; cursor: pointer; }
.korb-menge button, .korb-weg { transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.korb-menge button:active, .korb-weg:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .korb-menge button:hover { background: var(--flaeche-2); } .korb-weg:hover { background: var(--flaeche-2); color: var(--fehler); } }
.korb-menge output { min-width: 1.75rem; text-align: center; font-weight: 650; }
.korb-weg { grid-area: weg; border-color: transparent; color: var(--text-2); }
.korb-preis { grid-area: preis; font-weight: 650; font-variant-numeric: tabular-nums; }
.korb-fuss { display: grid; gap: 0.85rem; padding-block: 1.1rem 1.4rem; border-top: 1.5px solid var(--linie-stark); justify-items: stretch; }
.korb-fuss[hidden] { display: none; }
.korb-fuss .textlink { justify-self: center; }
.korb-summe { display: flex; justify-content: space-between; font-size: var(--fs-l); }
.korb-summe strong { font-variant-numeric: tabular-nums; }

/* ---------- Rahmen (Base.astro, dort schon global) ---------- */
main:focus { outline: none; }
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: var(--z-toast);
  transform: translate(-50%, 140%); opacity: 0;
  max-width: min(92vw, 30rem); padding: 0.85rem 1.2rem;
  background: var(--lapis); color: #fff; border-radius: var(--r-pille);
  font-size: var(--fs-s); font-weight: 600; box-shadow: var(--schatten-hoch);
  transition: transform 400ms var(--ease-out), opacity 300ms ease;
  pointer-events: none;
}
.toast.ist-da { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 200ms ease; transform: translate(-50%, 0); }
}

/* ---------- Nur WordPress: Werkzeugleiste angemeldeter Nutzer ---------- */
/* Kopf und Überlagerung rücken unter die Leiste. Besucher ohne Anmeldung betrifft das nicht. */
.admin-bar .kopf { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .kopf .mm { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 600px) { .admin-bar #wpadminbar { position: fixed; } }

/* ---------- Nur WordPress: Schutz des Fußes vor Seitenstilen ---------- */
/* Seitenstile stehen in WordPress unter Körperklassen statt in einer Kapselung. Ein Seitenstil, der den Fuß des
   Beitragstexts meint, trifft mit ".fuss" auch den Fuß der Seite und würde ihn auf Textbreite stauchen.
   Der einzige solche Fall (aktuelles.css) ist inzwischen auf ".ajm-beitrag .beitrag-text > .fuss" eingeengt und
   trifft den Seitenfuß nicht mehr; diese Regel bleibt als Netz und stellt die Werte von oben wieder her.
   ":root" hebt sie über den Vorsatz aus einer Körperklasse. Die vier Eigenschaften sind die, die ein solcher
   Seitenstil setzt; sie entsprechen den Browser-Vorgaben, auf die sich die Astro-Fassung verlässt. */
:root body > .fuss { max-width: none; margin-top: var(--abschnitt); padding-top: clamp(3rem, 7vw, 5.5rem); border-top: 0; }

/* Unter 360 px passte der Kopf nicht (Überlauf 27 px bei 320, auch in der HTML-Fassung – dort ebenso behoben): Logo etwas kleiner,
   Abstände enger. Tipp-Flächen bleiben 44 px. Kopf und Menü sind Theme-Code (Vorgabe), deshalb hier und nicht in Elementor. */
@media (max-width: 359px) {
  .kopf .kopf-innen { gap: 0.5rem; }
  .kopf .kopf-rechts { gap: 0.25rem; }
  .kopf .marke-logo { height: 2.6rem; }
}

/* ---------- Nur WordPress mit Elementor: Übergänge in Kopf, Fuß, Schublade und Toast unter prefers-reduced-motion ---------- */
/* WARUM: Elementors Frontend-CSS (custom-frontend.min.css bzw. frontend.min.css – auf jeder Seite, auf der Elementor läuft, auch in
   PHP-Ansichten) setzt bei prefers-reduced-motion seitenweit „html * { transition-duration: 0s !important; transition-delay: 0s
   !important }“. Die HTML-Fassung nimmt in Kopf, Fuß, Schublade und Toast nur die Bewegung zurück (oben: .mm, .mm-panel,
   .burger-balken i, .korb, .korb::backdrop – „transition: none“) und behält die kurzen Farb-, Rahmen-, Schatten- und Versatzübergänge.
   Diese Regeln stellen genau die Dauern der Regeln oben wieder her (Werte 1:1 je Regel; Pseudo-Elemente wie .mm-pfeil::before trifft
   Elementors Regel nicht; Pausenknopf, .btn und Medien-iframe stehen in elementor-rest.css, Block „prefers-reduced-motion“). !important
   und die Rangfolge (mindestens 0,2,0) überstimmen Elementors (0,0,1); :root:not(.kein-uebergang) lässt der Regel
   „.kein-uebergang * { transition: none !important }“ (global.css, Wechsel des Farbschemas) den Vortritt wie in der HTML-Fassung.
   Ohne Elementor ohne Wirkung (dieselben Werte). Nachbesserung 30.09.2026 (live-r2-5). */
@media (prefers-reduced-motion: reduce) {
  :root:not(.kein-uebergang) .kopf { transition-duration: 250ms, 250ms, 250ms !important; transition-delay: 0s, 0s, 0s !important; }
  :root:not(.kein-uebergang) .kopf .kopf-icon, :root:not(.kein-uebergang) .fuss .fuss-social a,
  :root:not(.kein-uebergang) body > .fuss .fuss-social button { transition-duration: 160ms, 160ms !important; transition-delay: 0s, 0s !important; }
  :root:not(.kein-uebergang) .kopf .burger-balken, :root:not(.kein-uebergang) .kopf .suche-feld, :root:not(.kein-uebergang) .kopf .suche-feld button,
  :root:not(.kein-uebergang) .kopf .mm-zeile a, :root:not(.kein-uebergang) .kopf .mm-social a, :root:not(.kein-uebergang) body > .fuss .fuss-nav li a,
  :root:not(.kein-uebergang) .korb-zu { transition-duration: 160ms !important; transition-delay: 0s !important; }
  :root:not(.kein-uebergang) .kopf .mm-zeile { transition-duration: 200ms !important; transition-delay: 0s !important; }
  :root:not(.kein-uebergang) .korb-menge button, :root:not(.kein-uebergang) .korb-weg { transition-duration: 160ms, 180ms, 180ms !important; transition-delay: 0s, 0s, 0s !important; }
  :root:not(.kein-uebergang) .toast { transition-duration: 200ms !important; transition-delay: 0s !important; }
}