/*
  SHOP (Theme 3.3.0) – nur, was Elementor Pro NICHT ausdrücken kann.
  Lädt auf Shop-Ansichten (Produktarchive, Produkte, Warenkorb, Kasse, Mein Konto), auf Elementor-Dokumenten mit Shop-Widgets
  und in der Editor-Vorschau (inc/65-shop.php); steht hinter allen Stylesheets von Elementor. Das Standard-CSS von WooCommerce
  (woocommerce.css) lädt auf diesen Ansichten nicht.
  Maßstab: website/src/components/shop/*.astro, src/pages/shop/**, src/components/CartDrawer.astro – Werte verbatim.

  NATIV ZUERST (Vorgabe des Auftraggebers): Raster, Spalten, Reihenfolge, Abstände, Breiten, Höhen, Seitenverhältnisse, Farben,
  Schriften, Radien, Rahmen und Hintergründe der Bausteine stehen in Elementor – bei V4-Elementen in globalen Klassen und lokalen
  Stilen, bei den Pro-Widgets in deren Einstellungen (Namen: docs/ELEMENTOR-SHOP.md). Hier steht nur:
  Pseudo-Elemente, Zustände (:hover nur für Zeigergeräte, :focus-visible, :active, [open], [aria-*], :checked, Klassen von
  WooCommerce wie .added/.woocommerce-invalid), Eltern-Hover, Bewegung und prefers-reduced-motion, Masken-Symbole und das
  Innenmarkup der WooCommerce-Ausgabe, das kein Regler erreicht. Jeder Block nennt den Grund („WARUM NICHT NATIV“).

  Haken-Klassen (setzen die Elementor-Bauer an Container/Widgets): ajm-karte, ajm-karte-gross, ajm-karte-bild, ajm-karte-foto,
  ajm-karte-link, ajm-karte-kauf, ajm-produkt-buehne, ajm-produkt-kauf, ajm-produkt-preis, ajm-angabe, ajm-angabe-kopf, ajm-nur-mit-groessen,
  ajm-nur-mit-projekt, ajm-nur-mit-foto, ajm-nur-ohne-foto, ajm-warenkorb, ajm-korb-leer, ajm-kasse, ajm-konto, ajm-korb-summe-zusatz
  mit ajm-summe-versand, ajm-summe-klein, ajm-summe-neben und wk-leeren (Teile der Zusammenfassung, shop.js setzt sie in die Karte).
  Klassen, die das Theme selbst setzt: ajm-hat-/ajm-ohne-groessen, -projekt, -foto (Hülle von Karte und Produktvorlage, dazu
  --pf), ajm-korb-bild (Kachel um das Vorschaubild), ajm-korb-zusatz (Größe unter dem Namen), ajm-summe-produkte/-zahl
  (inc/65-shop.php), ajm-varianten/ajm-pillen/ajm-pille, ajm-menge/ajm-menge-feld/-minus/-plus/-titel (shop.js).
  Rangfolge: Pro schreibt (0,2,0) bis (0,4,0), die Einstellungen eines Widgets (0,3,0) und mehr; Regeln hier stehen später und
  sind mindestens so spezifisch. Ausnahme: Das CSS der Widgets Warenkorb, Kasse und Mein Konto lädt Pro erst im Seitenkörper –
  gegen dessen Regeln braucht es echt höhere Spezifität (docs/ELEMENTOR-SHOP.md, Abschnitt 8.3). Umbruchpunkte wie die HTML-Fassung.
  Symbole: ../icons/ (Phosphor, Masken).
*/


/* ---------- Grundlage ohne woocommerce.css ---------- */
/* WARUM NICHT NATIV: WooCommerce und Pro beschriften Felder und Knöpfe mit .screen-reader-text; die Klasse definiert sonst nur
   woocommerce.css, das auf Shop-Ansichten abgeschaltet ist. Werte wie .sr-only in global.css. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; word-wrap: normal !important;
}


/* WARUM NICHT NATIV: Ohne woocommerce.css fehlt den Tabellen von WooCommerce (Bestellübersicht der Kasse, Summen des Warenkorbs)
   die volle Breite und der Liste der Zahlarten die Rücksetzung; die Pro-Widgets setzen beides voraus und haben keinen Regler dafür. */
.woocommerce table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: start; }
.woocommerce #payment ul.payment_methods { margin: 0; padding: 0; list-style: none; }


/* ---------- Hinweise von WooCommerce wie .hinweis ---------- */
/* WARUM NICHT NATIV: Meldungen („… wurde deinem Warenkorb hinzugefügt“, Fehler der Kasse, „Keine Zahlarten“) gibt WooCommerce
   selbst aus; das Pro-Widget „Hinweise“ bestimmt nur den Ort. Symbol als Maske, Anordnung (Symbol neben dem Text), Außenabstand.
   Aussehen der Meldungen hat Elementor Pro in den Website-Einstellungen (WooCommerce → Hinweise, je Art Fehler/Meldung/Info:
   Textfarbe, Typografie, Symbolfarbe, Hintergrund, Rahmen, Schatten, Radius, Innenabstand, Knöpfe) – nur mit einer Lizenz, die
   das Merkmal „settings-woocommerce-notices“ enthält, und erst, wenn die Art dort unter „Hinweise“ gewählt ist (Pro setzt dann
   body.e-wc-<art>-notice). Das sind Website-Einstellungen – Schritt des Auftraggebers (docs/ELEMENTOR-SHOP.md, Abschnitt 7,
   Punkt 14; Abnahme Runde 3, funktion-r3-12). Bis dahin gelten die Werte hier wie .hinweis der HTML-Fassung; gesetzte Regler
   gewinnen: Textfarbe, Symbolfarbe, Radius, Innenabstand und die Farbe des Knopfs lesen die Variablen, die Pro dafür schreibt
   (--message-message-text-color, --message-message-icon-color, --message-box-border-radius, --message-box-padding,
   --message-buttons-normal-text-color; ebenso --info-… und --error-…), Hintergrund, Rahmen, Schatten und die Schrift der
   Knöpfe schreibt Pro mit höherer Spezifität (body.e-wc-…), und die Schriftgröße steht hier ohne Spezifität (:where), damit die
   Typografie der Einstellungen greift. */
:is(.woocommerce, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start;
  margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; list-style: none;
  border: 0; border-radius: var(--r-karte); background: var(--flaeche-2); color: var(--text);
}
:where(.woocommerce, .woocommerce-notices-wrapper) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) { font-size: var(--fs-s); }
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-message {
  padding: var(--message-box-padding, 0.9rem 1.1rem); border-radius: var(--message-box-border-radius, var(--r-karte)); color: var(--message-message-text-color, var(--text));
}
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-info {
  padding: var(--info-box-padding, 0.9rem 1.1rem); border-radius: var(--info-box-border-radius, var(--r-karte)); color: var(--info-message-text-color, var(--text));
}
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-error {
  padding: var(--error-box-padding, 0.9rem 1.1rem); border-radius: var(--error-box-border-radius, var(--r-karte)); color: var(--error-message-text-color, var(--text));
}
:is(.woocommerce, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  content: ''; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; background: var(--akzent-text);
  -webkit-mask: url(../icons/info.svg) center / contain no-repeat; mask: url(../icons/info.svg) center / contain no-repeat;
}
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-message::before { background: var(--message-message-icon-color, var(--akzent-text)); }
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-info::before { background: var(--info-message-icon-color, var(--akzent-text)); }
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-error::before {
  background: var(--error-message-icon-color, var(--fehler));
  -webkit-mask-image: url(../icons/warning-circle.svg); mask-image: url(../icons/warning-circle.svg);
}
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-error > li { flex: 1 1 100%; margin: 0; }
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-error > li:first-child { flex-basis: calc(100% - 2rem); }
/* Pro-Widget „Hinweise“ (Produktvorlage): Pro rückt jede Meldung der Seite in das Widget. Ohne Meldung bleibt das Widget ein leeres
   Rasterkind, das den Abstand der Kaufzeile (gap) doppelt zählen würde – es tritt zurück, bis eine Meldung darin steht. Außerhalb des
   Widgets (wo WooCommerce sie ausgibt, bis das Skript von Pro sie verschiebt) bleiben Meldungen verborgen wie von Pro vorgesehen;
   die Regel oben hätte sie sonst kurz über dem Layout gezeigt. Ort und Breite des Widgets stehen in Elementor. */
.elementor .elementor-widget-woocommerce-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)) { display: none; }
body:has(.elementor-widget-woocommerce-notices) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info):not(.elementor-widget-woocommerce-notices *) { display: none; }
/* Letzte Meldung ohne Abstand nach unten (den Abstand zur Kaufzeile gibt das Raster). Hinter ihr steht oft ein leerer
   .woocommerce-notices-wrapper, daher nicht :last-child. */
.elementor .elementor-widget-woocommerce-notices :is(.woocommerce-message, .woocommerce-error, .woocommerce-info):not(:has(~ :is(.woocommerce-message, .woocommerce-error, .woocommerce-info))) { margin-bottom: 0; }
/* Links im Text einer Meldung (z. B. „Rückgängig machen?“ nach dem Entfernen eines Postens) wie a in global.css: Unterstreichung
   1px, Abstand 0.18em, beim Überfahren 2px. Elementor nimmt jedem Link im Dokument die Unterstreichung (.elementor a), und die
   Meldungen haben dafür keinen Regler (Abnahme Runde 4, design1-r4-7 – ob die Meldung mit „Rückgängig“ bleibt, entscheidet der
   Auftraggeber, docs/ELEMENTOR-SHOP.md Abschnitt 7). Knöpfe der Meldung (.button) stehen wie .textlink ohne Unterstreichung, unten. */
:is(.woocommerce, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) {
  :is(.woocommerce, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button):hover { text-decoration-thickness: 2px; }
}
/* „Warenkorb ansehen“ in der Meldung wie .textlink */
:is(.woocommerce, .woocommerce-notices-wrapper) .woocommerce-message .button {
  order: 3; margin-left: auto; padding: 0; border: 0; background: none;
  font: 650 var(--fs-s) / 1.2 var(--font-display); font-stretch: 100%; color: var(--message-buttons-normal-text-color, var(--akzent-text)); text-decoration: none;
}


/* ---------- Karte (Schleifen-Element „Produktkarte“) ---------- */
/* WARUM NICHT NATIV: Eltern-Hover (Karte überfahren → Bildfläche hebt sich mit Schatten, Bild zoomt, Foto blendet ein, Titel
   färbt sich) nur für Zeigergeräte, Fokus über :has(), der über die ganze Karte gestreckte Link (Pseudo-Element), die
   „Neu“-Plakette aus der WooCommerce-Klasse product_tag-neu am Schleifen-Element (Pseudo-Element; eine Anzeigebedingung je
   Element gibt es für Schlagwörter von Produkten nicht), Container-Abfrage für den Schnell-Kaufknopf, Bewegung.
   Kachel (5:6, Radius --r-karte, overflow hidden, Fläche color-mix(in srgb, var(--pf) 9%, var(--auf-tief))), Bildausschnitt,
   Raster, Abstände und Schriften stehen in Elementor. position und container gehören zu den Regeln hier (Bezug für den
   gestreckten Link, die Plakette und die Container-Abfrage). */
.elementor .ajm-karte { position: relative; container: karte / inline-size; }
/* Heller Fokusring auf der Karte wie .karte in global.css (--fokus: var(--fokus-auf-tief); die Liste dort kennt nur die Klassen der
   HTML-Fassung). WARUM NICHT NATIV: Eine Token-Variable lässt sich in Elementor nicht je Element umsetzen – globale Variablen gelten
   für die ganze Seite, Klassen und lokale Stile setzen nur Eigenschaften. */
.elementor .ajm-karte { --fokus: var(--fokus-auf-tief); }
.elementor .ajm-karte .ajm-karte-bild { position: relative; transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.elementor .ajm-karte .ajm-karte-bild img { transition: transform 500ms var(--ease-out); }
.elementor .ajm-karte .ajm-karte-foto,
.elementor .ajm-karte .ajm-karte-foto img { opacity: 0; transform: scale(1.04); transition: opacity 260ms ease, transform 500ms var(--ease-out); }

/* „Neu“ wie .karte-neu. Der Wortlaut ist der Name des Produkt-Schlagworts „neu“ aus dem Backend (Produkte → Schlagwörter):
   inc/65-shop.php schreibt ihn als --ajm-neu-text an :root (Abnahme Runde 4, funktion-r4-6 – vorher stand „Neu“ fest hier). */
.e-loop-item.product_tag-neu .ajm-karte-bild::after {
  content: var(--ajm-neu-text); position: absolute; top: 0.65rem; left: 0.65rem; z-index: 1;
  display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.1rem 0.65rem;
  border-radius: var(--r-pille); background: var(--blau); color: var(--auf-akzent);
  font: 700 var(--fs-xs) / 1 var(--font-display); font-stretch: 100%; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Ein Link je Karte, über die ganze Fläche gestreckt (.karte-link::after). Bezug ist .ajm-karte (position oben); der Textblock
   dazwischen (Klasse shop-karte-text) steht deshalb in Elementor auf „Position: statisch“ (lokaler Stil in 1085/1086) – mit der
   Vorgabe von Elementor für Container (.e-con { position: relative }) deckte der Link nur den Textblock, über dem Bild zeigte der
   Zeiger den Pfeil und ein Klick bewirkte nichts (Abnahme Runde 2, design3-r2-2). */
.elementor .ajm-karte :is(a.ajm-karte-link, .ajm-karte-link a)::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-karte);
}
/* Der Kaufknopf liegt über dem Kartenlink (.karte-aktion: z-index 2). Ort, Größe und dieser z-index stehen NATIV in Elementor:
   z-index 2 (dazu grid-column/grid-row) an der globalen Klasse shop-karte-aktion der Hülle (Stil-Panel), damit liegt der ganze
   Kaufbereich über dem Kartenlink (::after oben, z-index 1). Bis zur Schlussabnahme Runde 3 stand hier zusätzlich
   „.ajm-karte .ajm-karte-kauf { z-index: 2 }“ am Widget – ohne Wirkung (Treffertest auf /shop/ mit und ohne gleich,
   schluss-vorgabe-r3-3) und eine zweite Quelle neben dem nativen Wert; gestrichen. Die Hülle der Schnell-Aktion fängt keine
   Klicks (pointer-events: none, Block „Aus den globalen Klassen“ unten); nur der Knopf selbst, sonst bliebe links neben dem
   Kreis ein toter Streifen über dem Kartenlink (.karte-aktion > .kk { pointer-events: auto }). WARUM NICHT NATIV: pointer-events
   kennt weder das Widget noch das Stil-Panel. */
.elementor .ajm-karte .ajm-karte-kauf .elementor-button { pointer-events: auto; }

/* Aus den globalen Klassen des Shops (bis Abnahme Runde 3 im Feld „Eigenes CSS“ der Klassen; funktion-r3-2: kein eigenes CSS in
   Elementor). WARUM NICHT NATIV: Das Stil-Panel von Elementor 4.3 kennt diese Eigenschaften bzw. Werte nicht und legt sie im Feld
   „Eigenes CSS“ ab (belegt: docs/ELEMENTOR-KLASSEN.md Abschnitt 7, docs/ELEMENTOR-SHOP.md Abschnitte 15 und 17) – Gewicht 650
   (das Panel kennt nur Hunderterstufen), font-stretch, text-wrap, white-space, font-variant-numeric, justify-self, pointer-events;
   am 28.09.2026 an den Klassen selbst nachgeprüft (manage-classes, danach das erzeugte CSS gelesen): auch row-gap allein oder als
   zweiter Wert von gap, align-items: baseline und max-width: none legt die SCHNITTSTELLE im Feld „Eigenes CSS“ ab (column-gap, gap
   mit einem Wert, Rahmen je Seite und border-radius speichert sie nativ). Berichtigung 29.09.2026 (Theme-Nachtrag 12): row-gap
   und align-items: baseline sind in Elementor 4.3.2 NATIV speicherbar (Stil-Panel Layout → Abstand, Eigenschaft gap vom Typ
   layout-direction {row, column}; lokale Stile auf /shop/ tragen „row-gap:0.25rem“ und „align-items:baseline“ ohne Leerzeichen) –
   nur der CSS-Parser von manage-classes kann sie nicht (erneut belegt an shop-karte-zeile und ajm-summe-neben: „row-gap: 0.1rem;
   align-items: baseline;“ bzw. „gap: 0.1rem 0.6rem“ landeten im Feld „Eigenes CSS“, letzteres verwarf auch das native column-gap;
   beide Klassen danach auf den nativen Stand zurückgesetzt, erzeugtes CSS byte-gleich wie vorher). Erneut belegt am 02.10.2026 mit
   Elementor 4.3.3 (Abnahme Runde 4, funktion-r4-5): „row-gap: 0.25rem“ an ajm-summe-neben landete wieder im Feld „Eigenes CSS“
   (global-11: „row-gap: 0.25rem;\n“), Klasse danach zurückgesetzt, global-11 byte-gleich. Seit 02.10.2026 stehen die Werte nativ in
   den Klassen (im Editor gesetzt, docs/ELEMENTOR-SHOP.md Abschnitt 7, Punkt 19; global-1087 bzw. global-11: row-gap 0.1rem / 0.25rem) – die
   zwei Ersatzregeln für shop-karte-zeile und ajm-summe-neben sind seitdem gestrichen (Hinweis unten bei shop-karte-zeile).
   Alles Übrige der Klassen (Größen, Farben, Abstände, Raster, Rahmen) steht nativ in Elementor. Werte verbatim wie bis dahin in den
   Klassen (= dist: ProduktKarte.astro .karte h3/.karte-preis/.karte-aktion, [slug].astro .tag/.angaben, shop/index.astro .chip).
   Rangfolge wie vorher im Feld der Klasse: über den Grundregeln für Überschriften (global.css h1–h4: 700, 84 %), aber unter den
   lokalen Stilen eines Elements (die in Elementor Vorrang vor Klassen haben – z. B. Titel der großen Karte 1086: 700) – daher
   :where(.elementor) (0,1,0) statt .elementor .klasse (0,2,0), das nach Elementor geladen die lokalen Stile überstimmen würde.
   Die Regeln der großen Karte weiter unten sind spezifischer. */
:where(.elementor) .ajm-karte-link { font-stretch: 92%; font-weight: 650; text-wrap: pretty; }
:where(.elementor) .shop-karte-preis { font-variant-numeric: tabular-nums; }
:where(.elementor) .shop-karte-aktion { justify-self: end; pointer-events: none; }
:where(.elementor) .shop-tag { white-space: nowrap; }
:where(.elementor) .shop-chip { font-stretch: 100%; font-weight: 650; white-space: nowrap; }
:where(.elementor) .shop-angabe-titel { font-stretch: 100%; font-weight: 650; }
:where(.elementor) .shop-angabe-text { text-wrap: pretty; }
/* align-items: baseline bleibt hier: Das Stil-Panel bietet unter „Elemente ausrichten“ nur Anfang, Zentriert, Ende und Strecken – keine
   Grundlinie (4.3.2 und 4.3.3, docs/ELEMENTOR-KLASSEN.md 9.18) –, und der Parser der Schnittstelle legt den Wert im Feld „Eigenes CSS“ ab. */
:where(.elementor) .shop-karte-zeile { align-items: baseline; }
/* row-gap von shop-karte-zeile (0,1 rem) und ajm-summe-neben (0,25 rem) steht seit 02.10.2026 nativ in den Klassen (Editor: Layout →
   Lücken, entkoppelt; docs/ELEMENTOR-SHOP.md Abschnitt 7, Punkt 19) – die Ersatzregeln hier sind gestrichen. */
/* Bilder: gegen .elementor img { max-width: 100% } (Elementor, 0,1,1) – die Grafik ist absichtlich breiter als ihre Kachel
   (111,2 %, Ausschnitt wie die SVG der HTML-Fassung). */
:where(.elementor) img:is(.shop-karte-grafik, .ajm-karte-foto) { max-width: none; }

/* Große erste Karte (Wechselvorlage des Schleifenrasters, .ist-feature): zwei Spalten und zwei Zeilen hoch.
   WARUM NICHT NATIV: Das Schleifenraster bietet für die Wechselvorlage nur die Spaltenspanne (column_span, gesetzt: 2); das
   Rasterelement ist die Hülle des Schleifen-Dokuments (.e-loop-item), die kein Stil-Panel hat. Unter 700 px eine Zeile wie dist. */
@media (min-width: 700px) {
  .elementor .elementor-loop-container > .e-loop-item:has(> .ajm-karte-gross) { grid-row: span 2; }
}

@supports selector(:has(*)) {
  .elementor .ajm-karte :is(a.ajm-karte-link, .ajm-karte-link a):focus-visible { outline: none; }
  .elementor .ajm-karte:has(:is(a.ajm-karte-link, .ajm-karte-link a):focus-visible) .ajm-karte-bild { outline: 3px solid var(--fokus); outline-offset: 3px; }
  .elementor .ajm-karte:has(:is(a.ajm-karte-link, .ajm-karte-link a):focus-visible) :is(.ajm-karte-foto, .ajm-karte-foto img) { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-karte:hover .ajm-karte-bild { transform: translateY(-4px); box-shadow: var(--schatten); }
  .elementor .ajm-karte:hover .ajm-karte-bild img { transform: scale(1.04); }
  .elementor .ajm-karte:hover :is(.ajm-karte-foto, .ajm-karte-foto img) { opacity: 1; transform: none; }
  .elementor .ajm-karte:hover :is(a.ajm-karte-link, .ajm-karte-link a) { color: var(--akzent-text); }
}

/* Große erste Karte (Wechselvorlage): Foto immer sichtbar, Kaufknopf mit Beschriftung (.ist-feature der HTML-Fassung) */
.elementor .ajm-karte-gross :is(.ajm-karte-foto, .ajm-karte-foto img) { opacity: 1; transform: none; }
/* Große erste Karte (1086), Werte wie .ist-feature in ProduktKarte.astro: Titel in 84 % Schriftbreite (.ist-feature h3), Schatten
   der kleinen Kachel oben rechts (.ist-feature.hat-foto .karte-svg), Schnell-Aktion links (.ist-feature .karte-aktion). Bis zur
   Abnahme Runde 2 standen die drei Werte im Feld „Eigenes CSS“ lokaler Stile in 1086 – Vorgabe: kein eigenes CSS in Elementor.
   WARUM NICHT NATIV (belegt 28.09.2026 mit build-composition am Entwurf 1026): font-stretch und justify-self kennt das Stil-Panel
   nicht, Elementor legt sie im Feld „Eigenes CSS“ ab. Einen Schatten speichert es nativ, aber mit festen Farben; der Token
   --schatten (zwei Schatten) wechselt mit dem Farbschema (hell rgb(11 39 68 / …), dunkel rgb(0 0 0 / …)) – ein fester Wert wäre in
   einem der beiden Schemata falsch. Größe, Stärke, Zeilenhöhe des Titels, Maße, Fläche und Radius der Kachel sowie der Abstand
   der Schnell-Aktion stehen in Elementor. Als normale Zelle (weiter unten) gelten die Werte der normalen Karte. */
.elementor .ajm-karte-gross .ajm-karte-link { font-stretch: 84%; }
.elementor .ajm-karte-gross .ajm-karte-bild > .ajm-nur-mit-foto:not(.ajm-karte-foto) { box-shadow: var(--schatten); }
.elementor .ajm-karte-gross > .shop-karte-aktion { justify-self: start; }
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-karte-gross:hover :is(.ajm-karte-foto, .ajm-karte-foto img) { transform: scale(1.03); }
}

/* Schnell-Kaufknopf (Pro-Widget „Individuelles In den Warenkorb“ ohne Mengenfeld, Klasse ajm-karte-kauf) wie .kk-rund:
   44-px-Kreis mit Plus; auf breiten Karten (ab 16.5rem) klappt die Beschriftung per clip-path auf – beim Überfahren der Karte,
   beim Fokus und nach dem Hinzufügen (WooCommerce setzt .added). clip-path beschneidet auch die Trefferfläche.
   WARUM NICHT NATIV: Container-Abfrage, clip-path, Eltern-Hover, Zustände .loading/.added, Plus/Häkchen als Maske. Farbe,
   Schrift, Radius (Pille) und Hintergrund beim Überfahren stellt das Widget ein (background_color, button_text_color,
   typography_*, border_radius, button_background_hover_color). */
/* vertical-align: Der Knopf steht als inline-flex in der Hülle des Widgets; ohne top rechnet die Zeile die Unterlänge des Fließtexts
   dazu (gemessen: Hülle 53 statt 44 px hoch). align-items der Hülle von Text und Symbol: Elementor streckt den Text sonst auf
   44 px und setzt ihn oben an (wie .kk-text > span zentriert). */
.elementor .ajm-karte-kauf .elementor-button {
  display: inline-flex; align-items: center; vertical-align: top; height: 2.75rem; padding: 0; border: 0; cursor: pointer;
  max-width: calc(100cqw - 1.25rem);
  transition: transform 160ms var(--ease-out), clip-path 240ms var(--ease-out), background-color 180ms ease;
}
.elementor .ajm-karte-kauf .elementor-button:active { transform: scale(0.97); }
.elementor .ajm-karte-kauf .elementor-button .elementor-button-content-wrapper { flex-direction: row-reverse; align-items: center; gap: 0; }
.elementor .ajm-karte-kauf .elementor-button .elementor-button-text { display: none; min-width: 0; overflow: hidden; white-space: nowrap; }
/* Textwechsel „Hinzugefügt“ wie .kk-text der HTML-Fassung: shop.js legt die Beschriftung des Widgets (.ajm-kk-a) und „Hinzugefügt“
   (.ajm-kk-b) in dieselbe Rasterzelle – die Breite des Knopfs richtet sich nach der längeren und bleibt beim Wechsel stehen (vorher
   ersetzte das Skript den Text, der Knopf wurde schmaler und sprang nach rechts: gemessen 170,4 → 138 px). Rechtsbündig wie
   .kk-rund .kk-text > span; Überblenden mit Unschärfe und Versatz wie dort. WARUM NICHT NATIV: Zustand nach dem Hinzufügen
   (.added), Bewegung; das Widget kennt nur einen Text. */
.elementor .ajm-karte-kauf .elementor-button :is(.ajm-kk-a, .ajm-kk-b) {
  grid-area: 1 / 1; text-align: end;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms var(--ease-out);
}
.elementor .ajm-karte-kauf .elementor-button .ajm-kk-b { opacity: 0; filter: blur(3px); transform: translateY(35%); }
.elementor .ajm-karte-kauf .elementor-button.added .ajm-kk-a { opacity: 0; filter: blur(3px); transform: translateY(-35%); }
.elementor .ajm-karte-kauf .elementor-button.added .ajm-kk-b { opacity: 1; filter: none; transform: none; }
.elementor .ajm-karte-kauf .elementor-button .elementor-button-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; margin: 0; font-size: 1.1rem; }
.elementor .ajm-karte-kauf .elementor-button .elementor-button-icon :is(svg, i) { display: none; }
.elementor .ajm-karte-kauf .elementor-button .elementor-button-icon::before {
  content: ''; width: 1em; height: 1em; background: currentColor; transition: transform 180ms var(--ease-out);
  -webkit-mask: url(../icons/bold/plus.svg) center / contain no-repeat; mask: url(../icons/bold/plus.svg) center / contain no-repeat;
}
.elementor .ajm-karte-kauf .elementor-button.added .elementor-button-icon::before { -webkit-mask-image: url(../icons/bold/check.svg); mask-image: url(../icons/bold/check.svg); }
.elementor .ajm-karte-kauf .elementor-button.loading { cursor: progress; opacity: 0.7; }
/* WooCommerce hängt nach dem Hinzufügen „Warenkorb anzeigen“ an den Knopf; auf der Karte zeigt das der Kopf (Zahl, Seitenleiste). */
.elementor .ajm-karte-kauf .added_to_cart { display: none; }
@container karte (min-width: 16.5rem) {
  .elementor .ajm-karte-kauf .elementor-button .elementor-button-text { display: grid; padding-left: 1.15rem; }
  .elementor .ajm-karte-kauf .elementor-button { clip-path: inset(0 0 0 calc(100% - 2.75rem) round 999px); }
  /* Der Umriss würde mit abgeschnitten, deshalb liegt der Fokusring innen */
  .elementor .ajm-karte-kauf .elementor-button:focus-visible { clip-path: inset(0 0 0 0 round 999px); outline: none; box-shadow: inset 0 0 0 3px var(--blau); }
  .elementor .ajm-karte-kauf .elementor-button.added { clip-path: inset(0 0 0 0 round 999px); }
}
@media (hover: hover) and (pointer: fine) {
  @container karte (min-width: 16.5rem) {
    .elementor .ajm-karte:hover .ajm-karte-kauf .elementor-button { clip-path: inset(0 0 0 0 round 999px); }
  }
}
.elementor .ajm-karte-gross .ajm-karte-kauf .elementor-button { clip-path: none; box-shadow: none; }
.elementor .ajm-karte-gross .ajm-karte-kauf .elementor-button .elementor-button-text { display: grid; padding-left: 1.15rem; }
/* Ohne clip-path ist der Fokusring der normale Umriss (:focus-visible in global.css, auf der Karte hell) – wie .ist-feature .kk-rund.
   Die Regel der kleinen Karte oben legt ihn für den abgeschnittenen Kreis nach innen und nimmt den Umriss weg. */
.elementor .ajm-karte-gross .ajm-karte-kauf .elementor-button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; box-shadow: none; }
/* Fokus ohne Überfahren-Farbe: Elementor schreibt die Einstellung „Hintergrundfarbe beim Überfahren“ (var(--lapis-2)) für
   „:hover, :focus“ – mit der Tastatur (und nach einem Klick, solange der Fokus bleibt) stand der Knopf deshalb in lapis-2
   (gemessen rgb(18, 58, 99) statt rgb(11, 39, 68)). Die HTML-Fassung färbt nur beim Überfahren und nur auf Zeigergeräten
   (.kk-rund:hover); der Fokus zeigt allein den Ring. Hier steht deshalb für den Fokus ohne Überfahren und auf Geräten ohne
   Zeiger die Grundfarbe des Knopfs – derselbe Wert wie die Einstellung „Hintergrundfarbe“ des Widgets (var(--lapis); ändert
   sie jemand im Editor, hier mitziehen). WARUM NICHT NATIV: Zustand :focus getrennt von :hover und die Medienabfrage für
   Zeigergeräte hat das Widget nicht (ein Regler für beide Zustände). .elementor-widget: Die Regeln des Schleifen-Elements
   stehen im Seitenkörper, also nach diesem Stylesheet, mit (0,5,0). */
.elementor .elementor-widget.ajm-karte-kauf .elementor-button:focus:not(:hover) { background-color: var(--lapis); }
@media not ((hover: hover) and (pointer: fine)) {
  .elementor .elementor-widget.ajm-karte-kauf .elementor-button:is(:hover, :focus) { background-color: var(--lapis); }
}

/* Große Karte mit Foto: Beim Überfahren wächst die kleine Kachel oben rechts als Ganzes – Fläche, Schatten und Grafik – wie
   .ist-feature.hat-foto .karte-svg (scale 1.04, 500 ms) der HTML-Fassung; die Grafik darin wächst nicht zusätzlich (die Regel
   „Karte überfahren → Bild zoomt“ oben gilt sonst jedem Bild der Kachel). Vorher wuchs nur die Grafik, der Kasten blieb
   (gemessen 152 × 182,4 statt 158,1 × 189,7 px). WARUM NICHT NATIV: Eltern-Hover und Bewegung. Die Kachel ist der Container
   mit „nur mit Foto“ neben dem Foto (1086, Container f44193e; Maße, Fläche, Schatten nativ). */
.elementor .ajm-karte-gross .ajm-karte-bild > .ajm-nur-mit-foto:not(.ajm-karte-foto) { transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-karte-gross:hover .ajm-karte-bild > .ajm-nur-mit-foto:not(.ajm-karte-foto) { transform: scale(1.04); }
  .elementor .ajm-karte-gross:hover .ajm-karte-bild > .ajm-nur-mit-foto:not(.ajm-karte-foto) img { transform: none; }
}

/* Bewegung reduziert wie ProduktKarte.astro: Kachel, Grafik und kleine Kachel ohne Bewegung (!important wie dort); das Foto nur
   ohne Übergang für transform – beim Überfahren der großen Karte zoomt es auch dort auf 1,03 (.ist-feature.hat-foto:hover
   .karte-foto steht in der HTML-Fassung über der Regel für reduzierte Bewegung, gemessen matrix(1.03)); deshalb hier ohne
   !important, die Regeln des Überfahrens oben sind spezifischer. */
@media (prefers-reduced-motion: reduce) {
  .elementor .ajm-karte .ajm-karte-bild, .elementor .ajm-karte .ajm-karte-bild img:not(.ajm-karte-foto, .ajm-karte-foto img),
  .elementor .ajm-karte-gross .ajm-karte-bild > .ajm-nur-mit-foto:not(.ajm-karte-foto) { transition: none; transform: none !important; }
  .elementor .ajm-karte :is(.ajm-karte-foto, .ajm-karte-foto img) { transition: opacity 200ms ease; transform: none; }
  .elementor .ajm-karte-kauf .elementor-button, .elementor .ajm-karte-kauf .elementor-button .elementor-button-icon::before { transition: none; }
  .elementor .ajm-karte-kauf .elementor-button :is(.ajm-kk-a, .ajm-kk-b) { transition: opacity 120ms ease; transform: none; filter: none; }
  .elementor .ajm-karte-kauf .elementor-button.added .ajm-kk-a { transform: none; filter: none; }
}


/* ---------- Kategorie-Chips (Pro-Widget „Taxonomie-Filter“) ---------- */
/* WARUM NICHT NATIV: Mindesthöhe 44 px (Trefferfläche wie .chip) hat das Widget nicht als Regler; Druckgefühl (:active),
   Übergänge und der Zeiger (.chip: cursor: pointer; Pro lässt den Knopf beim Standardzeiger, gemessen „default“, kein Regler). Farben, Hintergrund und Rahmen je Zustand (normal/überfahren/aktiv), Radius, Innenabstand, Schrift und Abstand
   stellt das Widget ein (taxonomy_filter_*). „Alle“ steht per Pro-CSS vorn (order: -1). box-sizing: Die Knöpfe von Pro rechnen
   mit content-box – die Mindesthöhe gälte sonst ohne Innenabstand und Rahmen (gemessen 62 statt 44 px); .chip der HTML-Fassung
   rechnet wie alles dort mit border-box. */
.elementor .elementor-widget-taxonomy-filter .e-filter-item {
  box-sizing: border-box; min-height: 2.75rem; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.elementor .elementor-widget-taxonomy-filter .e-filter-item:active { transform: scale(0.97); }


/* ---------- Kategorie-Links als Chips (Vorlage „AJM – Produktkategorie“, Klassen shop-chip + ajm-kategorie-link) ---------- */
/* WARUM NICHT NATIV: Aussehen, Maße und Schrift stehen in der Klasse shop-chip (Elementor). Der Zustand „aktuelle Kategorie“
   (aria-current, setzt shop.js – Elementor kennt keinen Zustand „aktuelle Seite“ für Links), Überfahren nur für Zeigergeräte,
   Druckgefühl und Übergänge wie .chip in shop/index.astro. */
.elementor a.shop-chip { transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.elementor a.shop-chip:active { transform: scale(0.97); }
.elementor a.shop-chip[aria-current='page'] { background-color: var(--text); border-color: var(--text); color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .elementor a.shop-chip:not([aria-current='page']):hover { background-color: var(--flaeche-2); border-color: var(--text); color: var(--text); }
}


/* ---------- Große Karte als normale Zelle (Sortierung, Filter, Kategorie) ---------- */
/* WARUM NICHT NATIV: ein Zustand, den weder das Schleifenraster noch das Schleifen-Element kennt. Die HTML-Fassung zeigt die große
   Karte (.ist-feature) nur für das erste Produkt und nur in der Reihenfolge „Empfohlen“ (data-feature); sortiert oder in einer
   Kategorie ohne dieses Produkt ist jede Karte eine normale Zelle. Das Schleifenraster setzt die Wechselvorlage dagegen immer an
   Stelle 1 – auch wenn dort nach dem Filtern (Taxonomie-Filter), in einer Kategorie oder nach dem Sortieren ein anderes Produkt
   steht. Groß bleibt die Karte deshalb nur für ein hervorgehobenes Produkt (WooCommerce „Hervorgehoben“, Stern in der
   Produktliste; Klasse featured am Schleifen-Element) in der Reihenfolge „Empfohlen“ (shop.js setzt sonst data-ajm-sortiert an
   die Liste). Sonst nimmt sie Maße und Verhalten der normalen Karte an (Schleifen-Element „Produktkarte“, ProduktKarte.astro ohne
   .ist-feature): eine Zelle; Kachel 5:6 mit der Produktgrafik wie die Klasse shop-karte-grafik (Werte von dort); Titel, Zeile,
   Kaufknopf wie die normale Karte; das Foto nur beim Überfahren und beim Fokus; der Kaufknopf ein 44-px-Kreis, der sich öffnet. */
/* Pro setzt die Spaltenspanne mit (0,4,0), deshalb die doppelte Klasse. */
.elementor .elementor-widget-loop-grid .elementor-loop-container[data-ajm-sortiert] > .e-loop-item.e-loop-item,
.elementor .elementor-widget-loop-grid .elementor-loop-container > .e-loop-item.e-loop-item:not(.featured):has(> .ajm-karte-gross) { grid-column: auto; grid-row: auto; }
/* Sonst streckte die Bildhöhe der großen Karte (min-height 15rem, Höhe 100 %) jede Reihe des Rasters (gemessen 434 statt 332 px). */
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross { grid-template-rows: auto auto; height: auto; }
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-bild { aspect-ratio: 5 / 6; height: auto; min-height: 0; }
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-link { font-size: var(--fs-m); font-stretch: 92%; font-weight: 650; line-height: 1.25; }
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .shop-karte-zeile { font-size: var(--fs-s); }
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .shop-karte-meta { font-size: var(--fs-xs); }
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .shop-karte-aktion { justify-self: end; margin: 0.6rem; }
/* Kachel: Die kleine Grafik oben rechts tritt zurück; die Produktgrafik steht wie shop-karte-grafik (auch bei Produkten mit Foto,
   gegen die Zustandsregel „nur ohne Foto“ weiter unten); das Foto blendet wie auf der normalen Karte ein. */
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-bild > .ajm-nur-mit-foto:not(.ajm-karte-foto) { display: none !important; }
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-bild > .ajm-nur-ohne-foto {
  display: block !important; width: 111.2%; height: auto; inset-block-start: 3.66%; inset-inline-start: -5.6%; object-fit: fill;
}
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross :is(.ajm-karte-foto, .ajm-karte-foto img) { opacity: 0; transform: scale(1.04); }
@supports selector(:has(*)) {
  .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross:has(:is(a.ajm-karte-link, .ajm-karte-link a):focus-visible) :is(.ajm-karte-foto, .ajm-karte-foto img) { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross:hover :is(.ajm-karte-foto, .ajm-karte-foto img) { opacity: 1; transform: none; }
}
/* Kaufknopf wie auf der normalen Karte (Regeln oben), gegen die Regeln der großen Karte */
.elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-kauf .elementor-button .elementor-button-text { display: none; }
@container karte (min-width: 16.5rem) {
  .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-kauf .elementor-button { clip-path: inset(0 0 0 calc(100% - 2.75rem) round 999px); }
  .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-kauf .elementor-button .elementor-button-text { display: grid; }
  .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-kauf .elementor-button:is(:focus-visible, .added) { clip-path: inset(0 0 0 0 round 999px); }
  .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross .ajm-karte-kauf .elementor-button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--blau); }
}
@media (hover: hover) and (pointer: fine) {
  @container karte (min-width: 16.5rem) {
    .elementor :is(.elementor-loop-container[data-ajm-sortiert] > .e-loop-item, .e-loop-item:not(.featured)) > .ajm-karte-gross:hover .ajm-karte-kauf .elementor-button { clip-path: inset(0 0 0 0 round 999px); }
  }
}


/* ---------- Trefferzahl (Modul ajm-modul-shop-treffer) ---------- */
/* WARUM NICHT NATIV: Das Markup liefert das Theme (p.treffer wie in shop/index.astro); Pro hat für das Schleifenraster keine
   Trefferzahl. */
[data-ajm-modul='shop-treffer'] .treffer { margin: 0; color: var(--text-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }


/* ---------- Sortierung: „Sortieren nach“ (Klasse ajm-sortierung-titel in 1087 und 1105) ---------- */
/* Schriftstärke 650 wie .feld label in global.css der HTML-Fassung (.sortier label). WARUM NICHT NATIV (belegt 28.09.2026 mit
   build-composition am Entwurf 1026): Die Liste der Schriftstärken im Stil-Panel kennt nur Hunderter; 650 legt Elementor im Feld
   „Eigenes CSS“ ab – dort stand der Wert bis zur Abnahme Runde 2 (Vorgabe: kein eigenes CSS in Elementor). Größe, Farbe und
   Anzeige stehen im lokalen Stil des Titels. */
.elementor .ajm-sortierung .ajm-sortierung-titel { font-weight: 650; }


/* ---------- Produktseite: Brotkrumen (Modul ajm-modul-krumen in der Produktvorlage) ---------- */
/* WARUM NICHT NATIV: Das Markup (nav > ol > li) liefert das Theme; das Rest-CSS gestaltet es für den dunklen Seitenkopf. Die
   Produktseite hat keinen Seitenkopf (shop/produkt/[slug].astro: .krumen auf hellem Grund) – Farben und Abstand der Liste im
   Modul erreicht kein Regler. Der Abstand oben steht nativ am Container. */
.elementor[data-elementor-type='product'] .ajm-modul-krumen .ajm-krumen ol { margin: 0; }
.elementor[data-elementor-type='product'] .ajm-modul-krumen .ajm-krumen li { color: var(--text-2); }
.elementor[data-elementor-type='product'] .ajm-modul-krumen .ajm-krumen a { min-height: 0; padding-block: 0.75rem; }
.elementor[data-elementor-type='product'] .ajm-modul-krumen .ajm-krumen [aria-current] { color: var(--text); font-weight: 650; padding-block: 0.75rem; }
@media (hover: hover) and (pointer: fine) {
  .elementor[data-elementor-type='product'] .ajm-modul-krumen .ajm-krumen a:hover { color: var(--akzent-text); text-decoration: underline; }
}


/* ---------- Produktseite: Preis (Absatz „preis“ in 1088 mit der globalen Klasse ajm-produkt-preis) ---------- */
/* Schriftbreite 92 % und gleich breite Ziffern wie .preis in shop/produkt/[slug].astro. WARUM NICHT NATIV (belegt 28.09.2026 mit
   build-composition am Entwurf 1026): font-stretch und font-variant-numeric kennt das Stil-Panel nicht, Elementor legt sie im Feld
   „Eigenes CSS“ ab – dort standen sie bis zur Abnahme Runde 2 (Vorgabe: kein eigenes CSS in Elementor). Schriftfamilie, Stärke,
   Größe, Zeilenhöhe und Abstand stehen im lokalen Stil. Haken ist die globale Klasse ajm-produkt-preis (ohne eigene Werte, im Editor
   am Absatz sichtbar; beim Duplizieren wandert sie mit; neu angelegt → Klasse zuweisen). Bis zur Schlussabnahme Runde 1
   (funktion-r1-11) war es die Element-ID 59788857 – ein neu angelegter Absatz verlor die Gestaltung ohne Hinweis. Rangfolge wie die
   übrigen Shop-Klassen (Block „Aus den globalen Klassen“): :where(.elementor), lokale Stile gehen vor. */
:where(.elementor) .ajm-produkt-preis { font-stretch: 92%; font-variant-numeric: tabular-nums; }


/* ---------- Produktseite: Kategorie-Plakette und „Alles aus …“ (dynamischer Tag „Produkt-Begriffe“) ---------- */
/* WARUM NICHT NATIV: Der Tag gibt den Begriff als <a rel="tag"> im Absatz aus; der Link im Widget hat kein Stil-Panel. Wie
   .schlagworte a.tag: Farbe des Schildes, ohne Unterstreichung, Trefferfläche nach oben und unten auf 44 px erweitert
   (Pseudo-Element; die Pille selbst trägt position: relative und min-height nativ). „Alles aus …“ (Klasse ajm-alles-aus am
   Absatz mit textlink/mit-pfeil): shop.js zieht den Text davor in den Link; der Link deckt die ganze Zeile samt Pfeil. */
.elementor .shop-tag a { color: inherit; text-decoration: none; }
.elementor .shop-tag a::after { content: ''; position: absolute; inset: -0.4rem 0; }
.elementor .ajm-alles-aus { position: relative; }
.elementor .ajm-alles-aus a { color: inherit; text-decoration: none; }
.elementor .ajm-alles-aus a::after { content: ''; position: absolute; inset: 0; }
/* Fokusring um die ganze Pille bzw. die ganze Zeile samt Pfeil wie a.tag und a.textlink der HTML-Fassung (dort ist der Link selbst
   die Pille bzw. die 44 px hohe Zeile; gemessen 87 × 32 und 170 × 44 px). Hier liegt der Link als Text im Absatz – der Ring
   umschloss nur den Namen (64 × 21 bzw. 147 × 18 px), die Pillenfläche und der Pfeil standen daneben. Der Ring wandert an den
   Absatz; am Link entfällt er. Rundung wie :focus-visible in global.css (4 px) bzw. die der Pille. WARUM NICHT NATIV:
   Zustand :focus-visible eines Kindes (:has()). */
.elementor :is(.shop-tag, .ajm-alles-aus) a:focus-visible { outline: none; }
.elementor .shop-tag:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.elementor .ajm-alles-aus:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }


/* ---------- Produktseite: Bühne und Galerie ---------- */
/* WARUM NICHT NATIV: „Neu“-Plakette aus product_tag-neu (Pseudo-Element; die Produktvorlage trägt die Klassen des Produkts).
   Die Galerie von WooCommerce (Pro-Widget „Produktbilder“) baut ihre Daumen per Skript; Größe, Tönung, Zustand (flex-active)
   und das quadratische Bühnenformat der HTML-Fassung erreicht kein Regler des Widgets. */
.elementor .ajm-produkt-buehne { position: relative; }
/* Wortlaut wie an der Karte aus dem Namen des Schlagworts (--ajm-neu-text, inc/65-shop.php). */
.elementor.product_tag-neu[data-elementor-type='product'] .ajm-produkt-buehne::after {
  content: var(--ajm-neu-text); position: absolute; top: 1rem; left: 1rem; z-index: 2;
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.15rem 0.8rem;
  border-radius: var(--r-pille); background: var(--blau); color: var(--auf-akzent);
  font: 700 var(--fs-xs) / 1 var(--font-display); font-stretch: 100%; letter-spacing: 0.06em; text-transform: uppercase;
}
.elementor .ajm-produkt-buehne .woocommerce-product-gallery { float: none; width: 100%; margin: 0; display: grid; gap: 0.85rem; }
.elementor .ajm-produkt-buehne :is(.flex-viewport, .woocommerce-product-gallery__wrapper) {
  border-radius: var(--r-karte); overflow: hidden; background: color-mix(in srgb, var(--pf, var(--auf-tief)) 9%, var(--auf-tief));
}
/* Bühne wie .buehne: quadratisch, höchstens min(44rem, 78vh); schmal 5:5,2, höchstens 34rem. Die Produktgrafik (erstes Bild,
   quadratisches PNG mit getönter Fläche, die Silhouette darin wie das SVG der HTML-Fassung in inset 9% 14%) steht so groß wie
   dort: Das SVG (200 × 240) richtet sich in der Innenfläche der Bühne immer nach deren Höhe, das PNG muss also so hoch stehen wie
   die Bühne. Ist die Bühne breiter als hoch, leistet das contain, ist sie höher als breit, cover. Breit (ab 921 px) ist sie nie
   höher als breit (quadratisch oder durch 78vh gekappt) → contain. Schmal (5:5,2, höchstens 34rem = 544 px) ist sie höher als
   breit, solange sie schmaler als 34rem ist → cover; ab 34rem Breite kappt max-height die Höhe (gemessen bei 768 px: Bühne
   706,5 × 544) → contain. Die Breite der Bühne fragt die Container-Abfrage ab (Folie der Galerie als Container; ihre Breite
   setzt der Schieber, sie hängt nicht vom Inhalt ab). Fotos füllen die Bühne (cover). WARUM NICHT NATIV: Das Pro-Widget
   „Produktbilder“ hat weder Bildformat noch Einpassung als Regler; Container-Abfragen kennt das Stil-Panel nicht. */
.elementor .ajm-produkt-buehne .woocommerce-product-gallery__image img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: min(44rem, 78vh); object-fit: cover; }
.elementor .ajm-produkt-buehne .woocommerce-product-gallery__image:first-child img { object-fit: contain; }
/* Umbruch mit dem Umbruchpunkt „Tablet“ des Kits (920 px), an dem Elementor die Spalten der Produktvorlage untereinanderstellt
   (dist: 899 px, dort stapelt auch .produkt). Mit 899 stand die Bühne zwischen 900 und 920 px einspaltig im Desktop-Format
   (quadratisch, höchstens 78vh – gemessen bei 920: 846 × 702 statt 544 px hoch, alles darunter 158 px tiefer). */
@media (max-width: 920px) {
  .elementor .ajm-produkt-buehne .woocommerce-product-gallery__image { container-type: inline-size; }
  .elementor .ajm-produkt-buehne .woocommerce-product-gallery__image img { aspect-ratio: 5 / 5.2; max-height: 34rem; }
  .elementor .ajm-produkt-buehne .woocommerce-product-gallery__image:first-child img { object-fit: cover; }
  @container (min-width: 34rem) {
    .elementor .ajm-produkt-buehne .woocommerce-product-gallery__image:first-child img { object-fit: contain; }
  }
}
/* Daumen wie .daumen-knopf */
.elementor .ajm-produkt-buehne .flex-control-thumbs { display: flex; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.elementor .ajm-produkt-buehne .flex-control-thumbs li {
  float: none; width: 4.5rem; height: 4.5rem; margin: 0; border-radius: var(--r-feld); overflow: hidden;
  background: color-mix(in srgb, var(--pf, var(--auf-tief)) 9%, var(--auf-tief));
}
/* Blass ist wie .daumen-knopf (opacity 0.65) der ganze Daumen samt getönter Fläche, nicht nur das Bild – sonst stünde die helle
   Fläche im dunklen Schema voll da (gemessen: mittlere Helligkeit 170 statt 91). Aktiv (Bild mit flex-active) und beim
   Überfahren voll; Druckgefühl am ganzen Daumen. */
.elementor .ajm-produkt-buehne .flex-control-thumbs li { opacity: 0.65; transition: transform 160ms var(--ease-out), opacity 180ms ease; }
.elementor .ajm-produkt-buehne .flex-control-thumbs li:has(> img.flex-active) { opacity: 1; }
.elementor .ajm-produkt-buehne .flex-control-thumbs li:active { transform: scale(0.97); }
/* Das Bild ohne eigene Rundung wie .daumen-knopf img: Die Ecken schneidet der Daumen (overflow: hidden, Radius --r-feld). Mit einem
   eigenen Radius zeichnete Chrome die Bildkante auf halben Pixeln (Bühne 78vh, Daumen bei y 1092,53) geglättet halb durchsichtig –
   darunter schaute der Ring „gewählt“ (Schatten am li) als Saum am Foto hervor (Abnahme Runde 3: Randband 35 Pixel, dist 0). Fotos füllen den Daumen; die Produktgrafik behält ihre Rundung (unten). */
.elementor .ajm-produkt-buehne .flex-control-thumbs img {
  width: 100%; height: 100%; object-fit: cover; cursor: pointer; border-radius: 0;
}
/* Daumen der Produktgrafik wie .daumen-svg (inset 12%): Das SVG (200 × 240) steht in 76 % des Daumens und richtet sich nach der
   Höhe (0,76 × Daumen / 240 je Einheit); das PNG trägt die Silhouette mit 4,1 px je Einheit auf 1200 px. Gleich groß steht sie,
   wenn das PNG 0,76 × 1200 / (240 × 4,1) = 92,68 % des Daumens breit ist – Innenabstand je Seite (100 − 92,68) / 2 = 3,66 %
   (vorher 7,3 %: die Silhouette 34 × 35 statt 37 × 39 px im 72-px-Daumen). */
.elementor .ajm-produkt-buehne .flex-control-thumbs li:first-child img { object-fit: contain; padding: 3.66%; }
/* Die Produktgrafik (PNG mit getönter Fläche bis an den Rand, Innenabstand 3,66 %) behält die Rundung: Mit eckigem Bild lagen seine
   Ecken über dem Ring „gewählt“ (gemessen: die vier Ecken des Rings verdeckt). */
.elementor .ajm-produkt-buehne .flex-control-thumbs li:first-child img { border-radius: var(--r-feld); }
/* Gewählt: Ring innen wie .daumen-knopf[aria-pressed='true'] (box-shadow inset 2.5px) am Daumen, nicht am Bild. Der Schatten liegt
   unter dem Bild – beim Foto (füllt den Daumen) ist er wie in der HTML-Fassung verdeckt, bei der Produktgrafik steht er im Rand
   um das PNG. Vorher lag ein Umriss auf dem Bild und zeigte sich auch über dem Foto. */
.elementor .ajm-produkt-buehne .flex-control-thumbs li:has(> img.flex-active) { box-shadow: inset 0 0 0 2.5px var(--blau-tief); }
.elementor .ajm-produkt-buehne .flex-control-thumbs img.flex-active { opacity: 1; }
/* Tastaturfokus wie :focus-visible am .daumen-knopf: Ring außen um den Daumen (3px, Abstand 3px). Am Bild schnitt ihn der Daumen
   (overflow: hidden) ab, und er ersetzte den Ring „gewählt“ – zu sehen war nichts. Der Ring hängt deshalb am Daumen (li), der
   blasse Daumen macht ihn blass wie dort (opacity am Knopf). */
.elementor .ajm-produkt-buehne .flex-control-thumbs img:focus-visible { outline: none; }
.elementor .ajm-produkt-buehne .flex-control-thumbs li:has(> img:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .elementor .ajm-produkt-buehne .flex-control-thumbs li:hover { opacity: 1; } }


/* ---------- Produktseite: Kaufformular (Pro-Widget „In den Warenkorb“, Klasse ajm-produkt-kauf) ---------- */
/* WARUM NICHT NATIV: Größen als Pillen und Minus/Plus am Mengenfeld baut shop.js (Markup ohne Elementor-Einstellungen); ihre
   Gestaltung ist die der HTML-Fassung (.varianten, .pille, .menge). Aufbau des Formulars (Größen über Menge und Knopf, Menge
   und Knopf in einer Zeile, unten bündig), Symbol im Kaufknopf (Maske), Druckgefühl. Farben, Schrift, Radius und
   Innenabstand des Kaufknopfs stellt das Widget ein (button_*); das Mengenfeld bekommt dort KEINEN Rahmen (quantity_*), den
   Rahmen trägt die Pille. Zeiger wie .btn (cursor: pointer; Pro lässt den Kaufknopf beim Standardzeiger, kein Regler). */
.elementor .ajm-produkt-kauf form.variations_form { display: grid; gap: 1.25rem; }
/* flex-wrap mit !important: Pro setzt „flex-wrap: nowrap“ mit (0,6,2) (eine :is()-Liste mit „.woocommerce div.product …“ hebt
   jede Regel des Widgets an); schmal muss der Knopf wie .menge-zeile in die nächste Zeile umbrechen (gemessen bei 375 px). */
.elementor .ajm-produkt-kauf :is(.variations_button, form.cart:not(.variations_form), .e-atc-qty-button-holder) {
  display: flex; flex-wrap: wrap !important; align-items: flex-end; gap: 1rem; width: 100%;
}
.elementor .ajm-produkt-kauf .single_add_to_cart_button { cursor: pointer; flex: 1 1 14rem; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.elementor .ajm-produkt-kauf .single_add_to_cart_button:active { transform: scale(0.97); }
.elementor .ajm-produkt-kauf .single_add_to_cart_button::before {
  content: ''; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: url(../icons/shopping-bag.svg) center / contain no-repeat; mask: url(../icons/shopping-bag.svg) center / contain no-repeat;
}
.elementor .ajm-produkt-kauf .single_add_to_cart_button .elementor-button-icon { display: none; }
/* Nach „In den Warenkorb“ ohne Neuladen (shop.js) steht 1,6 s „Hinzugefügt“ mit Haken statt Tasche wie .kk-voll .kk-b
   (Klasse ajm-hinzugefuegt); während der Anfrage der Zeiger „progress“ wie beim Schnellkauf der Karte. */
.elementor .ajm-produkt-kauf .single_add_to_cart_button.ajm-hinzugefuegt::before { -webkit-mask-image: url(../icons/bold/check.svg); mask-image: url(../icons/bold/check.svg); }
/* Mit Skript: beide Beschriftungen mit Inline-Symbol übereinander wie .kk-voll .kk-text (KorbKnopf.astro, Werte verbatim), der
   Wechsel blendet (Abnahme Runde 4, design3-r4-1/-2; Aufbau shop.js kaufTexte). Die Maske der Tasche entfällt dann. WARUM NICHT
   NATIV: Markup des Skripts, Zustand (Klasse ajm-hinzugefuegt) und Bewegung. */
.elementor .ajm-produkt-kauf .single_add_to_cart_button:has(> .ajm-kk-text)::before { display: none; }
.elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-text { display: grid; }
.elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-text > span {
  grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; white-space: nowrap;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms var(--ease-out);
}
.elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-text svg { width: 1.15em; height: 1.15em; flex: none; }
.elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-b { opacity: 0; filter: blur(3px); transform: translateY(35%); }
.elementor .ajm-produkt-kauf .single_add_to_cart_button.ajm-hinzugefuegt .ajm-kk-a { opacity: 0; filter: blur(3px); transform: translateY(-35%); }
.elementor .ajm-produkt-kauf .single_add_to_cart_button.ajm-hinzugefuegt .ajm-kk-b { opacity: 1; filter: none; transform: none; }
.elementor .ajm-produkt-kauf .single_add_to_cart_button.loading { cursor: progress; }
.elementor .ajm-produkt-kauf .single_add_to_cart_button:is(.disabled, :disabled) { opacity: 0.55; cursor: not-allowed; transform: none; }
.elementor .ajm-produkt-kauf .reset_variations { display: none !important; }
/* Ersatz für cellspacing="0" an der Größen-Tabelle von WooCommerce (ohne Skript sichtbar): Das Attribut ist in HTML5 veraltet
   (HTML-Prüfung: Fehler), inc/65-shop.php Abschnitt 26 nimmt es aus dem Formular. Gleiche Wirkung wie der Darstellungshinweis
   des Attributs – auch gleich schwach (:where, Spezifität 0): jede andere Regel für die Tabelle gewinnt wie zuvor. */
:where(.elementor .ajm-produkt-kauf table.variations) { border-spacing: 0; }

/* Größen-Pillen wie .varianten/.pille */
.elementor .ajm-produkt-kauf .ajm-varianten { margin: 0; padding: 0; border: 0; min-width: 0; }
.elementor .ajm-produkt-kauf .ajm-varianten legend { padding: 0; margin-bottom: 0.55rem; font-weight: 650; font-size: var(--fs-s); }
.elementor .ajm-produkt-kauf .ajm-pillen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.elementor .ajm-produkt-kauf .ajm-pille { cursor: pointer; }
.elementor .ajm-produkt-kauf .ajm-pille span {
  display: grid; place-items: center; min-width: 3.25rem; min-height: 2.75rem; padding: 0 1rem;
  border-radius: var(--r-pille); border: 1.5px solid var(--linie-stark);
  font: 650 var(--fs-s) / 1 var(--font-display); font-stretch: 100%;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.elementor .ajm-produkt-kauf .ajm-pille:active span { transform: scale(0.97); }
.elementor .ajm-produkt-kauf .ajm-pille input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.elementor .ajm-produkt-kauf .ajm-pille input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 3px; }
.elementor .ajm-produkt-kauf .ajm-pille input:disabled + span { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-produkt-kauf .ajm-pille input:not(:checked):not(:disabled) + span:hover { background: var(--flaeche-2); border-color: var(--text); }
}

/* Mengenwahl wie .feld.menge-feld > label + .menge */
.elementor .ajm-produkt-kauf .quantity.ajm-menge { display: grid; justify-items: start; gap: 0.45rem; margin: 0; }
.elementor .ajm-produkt-kauf .ajm-menge-titel { font-weight: 650; font-size: var(--fs-s); }
.elementor .ajm-produkt-kauf .ajm-menge-feld {
  display: inline-flex; align-items: center; gap: 0.15rem; height: 3rem; padding: 0 0.15rem;
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-pille);
}
/* Minus/Plus sind <button> in form.cart: Pro gestaltet mit den Knopf-Einstellungen des Widgets „.cart button“ (0,4,1) auch
   sie (gemessen: Fläche --lapis, Innenabstand, Schrift des Kaufknopfs). Deshalb hier die höhere Rangfolge. */
.elementor .elementor-widget.ajm-produkt-kauf .ajm-menge-feld :is(button.ajm-menge-minus, button.ajm-menge-plus) {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text); font-size: 1rem; font-weight: inherit; line-height: 1; letter-spacing: normal; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, opacity 180ms ease;
}
/* Pro setzt „.quantity input { height: 100% }“ mit (0,4,2) – die Zahl stünde 46 statt 44 px hoch (gemessen). */
.elementor .elementor-widget.ajm-produkt-kauf .ajm-menge-feld input.qty.qty {
  width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: var(--r-feld); background: none;
  color: var(--text); font: 650 var(--fs-m) / 1 var(--font-text); font-variant-numeric: tabular-nums; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}

/* Minus/Plus, gemeinsam für Kaufformular und Warenkorb: Symbol als Maske, Druckgefühl, gesperrt */
.elementor :is(.ajm-menge-minus, .ajm-menge-plus)::before {
  content: ''; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url(../icons/bold/minus.svg) center / contain no-repeat; mask: url(../icons/bold/minus.svg) center / contain no-repeat;
}
.elementor .ajm-menge-plus::before { -webkit-mask-image: url(../icons/bold/plus.svg); mask-image: url(../icons/bold/plus.svg); }
.elementor :is(.ajm-menge-minus, .ajm-menge-plus):active:not(:disabled) { transform: scale(0.94); }
.elementor :is(.ajm-menge-minus, .ajm-menge-plus):disabled { opacity: 0.35; cursor: not-allowed; }
/* Zeiger „nicht erlaubt“ auch dort, wo die Knöpfe mit höherer Rangfolge cursor: pointer tragen (Kaufformular 0,5,1, Warenkorb
   0,4,0 – die Regel darüber hat 0,3,0; gemessen „pointer“ über dem gesperrten Minus bei Menge 1) – wie .menge button:disabled der
   HTML-Fassung. WARUM NICHT NATIV: Zustand :disabled. */
.elementor .elementor-widget.ajm-produkt-kauf .ajm-menge-feld :is(button.ajm-menge-minus, button.ajm-menge-plus):disabled,
.elementor .ajm-warenkorb .ajm-menge-feld :is(.ajm-menge-minus, .ajm-menge-plus):disabled { cursor: not-allowed; }
.elementor .ajm-menge-feld input.qty::-webkit-outer-spin-button,
.elementor .ajm-menge-feld input.qty::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .elementor :is(.ajm-menge-minus, .ajm-menge-plus):not(:disabled):hover { background: var(--flaeche-2); }
  .elementor .elementor-widget.ajm-produkt-kauf .ajm-menge-feld :is(button.ajm-menge-minus, button.ajm-menge-plus):not(:disabled):hover { background: var(--flaeche-2); color: var(--text); }
}


/* ---------- Produktseite: Aufklapper (e-accordion, Klassen ajm-angabe am Eintrag, ajm-angabe-kopf an der Kopfzeile) ---------- */
/* WARUM NICHT NATIV: Das Zeichen ist ein Pseudo-Element (das Symbolfeld von e-accordion braucht eine SVG aus der Mediathek, die
   es nicht gibt – show_icon aus, wie bei der FAQ); details[open] ist kein Zustand des Stil-Panels; Bewegung. Rahmenlinien,
   Höhe der Kopfzeile, Schrift und Abstände stehen nativ in den Klassen. */
.elementor .ajm-angabe-kopf { cursor: pointer; list-style: none; }
.elementor .ajm-angabe-kopf::-webkit-details-marker { display: none; }
.elementor .ajm-angabe-kopf::after {
  content: ''; flex: none; width: 1.1rem; height: 1.1rem; background: var(--text-2); transition: transform 220ms var(--ease-out);
  -webkit-mask: url(../icons/caret-down.svg) center / contain no-repeat; mask: url(../icons/caret-down.svg) center / contain no-repeat;
}
.elementor .ajm-angabe[open] > .ajm-angabe-kopf::after { transform: rotate(180deg); }


/* ---------- Zustände aus Produktfeldern ---------- */
/* WARUM NICHT NATIV: Ob ein Produkt Größen, einen Projektverweis oder ein Foto hat, steht in Produktfeldern bzw. der Galerie.
   Die Anzeigebedingungen von Elementor Pro (Kunde: im Editor unter „Anzeigebedingungen“) lassen sich über die Schnittstelle
   nicht setzen; das Theme schreibt den Zustand als Klasse an die Hülle der Produktvorlage und jeder Karte. !important: gegen
   die display-Werte der Elementor-Container, die im Seitenverlauf später kommen können. */
/* Die Karten der Produktvorlage („Das könnte dir auch gefallen“) liegen in der Hülle der Produktvorlage, die selbst einen
   Zustand trägt. Es gilt immer der nächste: in einer Karte deren Zustand, außerhalb von Karten der der Produktvorlage
   (gemessen: ohne diese Trennung blendete die Produktvorlage eines T-Shirts in den Karten ohne Größen beide Meta-Zeilen und
   beide Kaufknöpfe aus). */
.e-loop-item.ajm-ohne-groessen .ajm-nur-mit-groessen,
.e-loop-item.ajm-hat-groessen .ajm-nur-ohne-groessen,
.e-loop-item.ajm-ohne-projekt .ajm-nur-mit-projekt,
.e-loop-item.ajm-ohne-foto .ajm-nur-mit-foto,
.e-loop-item.ajm-hat-foto .ajm-nur-ohne-foto,
.ajm-ohne-groessen .ajm-nur-mit-groessen:not(.e-loop-item *),
.ajm-hat-groessen .ajm-nur-ohne-groessen:not(.e-loop-item *),
.ajm-ohne-projekt .ajm-nur-mit-projekt:not(.e-loop-item *),
.ajm-ohne-foto .ajm-nur-mit-foto:not(.e-loop-item *),
.ajm-hat-foto .ajm-nur-ohne-foto:not(.e-loop-item *) { display: none !important; }


/* ---------- Warenkorb-Seite (Pro-Widget „Warenkorb“, Klasse ajm-warenkorb) ---------- */
/* WARUM NICHT NATIV: Das Widget gibt die Tabelle von WooCommerce aus. Aufbau der Posten wie .wk .korb-posten (Bild | Name |
   Menge | Preis | Entfernen, schmal zweizeilig; Umbruch nach der Breite der Liste per Container-Abfrage), Größe und Tönung der
   Vorschaubilder (5:6-Kachel in --pf), Entfernen-Kreis, Mengenwahl mit Minus/Plus und das Ausblenden der Tabellenköpfe erreicht
   kein Regler (Pro rückt die Zeilen schmal um 28 px ein, ohne Regler; dist: bündig). Abschnittsflächen, Rahmen, Radien,
   Innenabstände, Schriften und Farben von Posten, Links, Trennlinien,
   Entfernen-Symbol, Summen und Knöpfen sowie die klebende Zusammenfassung stellt das Widget ein (sections_*, order_summary_*,
   product_link_*, totals_*, checkout_button_*, sticky_right_column). */
.elementor .ajm-warenkorb table.shop_table.cart { display: block; width: 100%; margin: 0; border: 0; border-top: 1.5px solid var(--text); border-radius: 0; container: wkliste / inline-size; }
.elementor .ajm-warenkorb table.shop_table.cart thead { display: none; }
.elementor .ajm-warenkorb table.shop_table.cart tbody { display: block; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  grid-template-areas: 'farbe info weg' 'farbe menge preis';
  gap: 0.35rem 0.85rem; align-items: center; padding-block: 1.1rem; padding-inline: 0;
  border-bottom: var(--order-summary-items-divider-weight, 1px) solid var(--order-summary-items-divider-color, var(--linie-stark));
  /* Pro gibt jeder Zeile bis 920 px zusätzlich eine Linie oben (… table.cart tr, border-top-width aus demselben Regler) – mit der
     Linie unten ergab das zwischen zwei Posten 2 px statt 1 px (gemessen bei 768 und 375). Wie .wk .korb-posten: nur unten. */
  border-top: 0;
}
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td { display: block; padding: 0; border: 0; background: none; text-align: left !important; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td::before { display: none; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-thumbnail { grid-area: farbe; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-thumbnail a { display: block; }
/* Kachel .korb-farbe.hat-bild (span.ajm-korb-bild mit --pf, inc/65-shop.php). Die Produktgrafik ist ein quadratisches PNG, die
   Silhouette darin 68,35 % breit (wie shop-karte-grafik: 111,2 % der Kachel). Damit sie so groß steht wie das SVG der HTML-Fassung
   in der Kachel mit Innenabstand (0.5rem, breit 0.55rem), ist das Bild (Kachel − 2 × Innenabstand) / 0,6835 breit und mittig;
   die Kachel schneidet den Rand ab. */
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-thumbnail .ajm-korb-bild {
  display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 5.4rem; overflow: hidden; border-radius: var(--r-feld);
  background: color-mix(in srgb, var(--pf, var(--blau)) 9%, var(--auf-tief));
}
/* flex: none und Flex statt Raster: Das Bild ist breiter als die Kachel und soll nach beiden Seiten gleich überstehen (ein Raster
   legte die Spur an den linken Rand – gemessen 7 px nach rechts versetzt). */
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-thumbnail .ajm-korb-bild img {
  flex: none; display: block; width: calc((4.5rem - 1rem) / 0.6835); height: auto; max-width: none; aspect-ratio: 1; object-fit: cover;
  border-radius: 0; box-shadow: none; background: none;
}
/* Name und darunter klein „Größe S · je 24,90 €“ wie .wk .korb-info (small.ajm-korb-zusatz, inc/65-shop.php) */
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-name { grid-area: info; align-self: start; padding-top: 0.2rem; }
/* Der Name bleibt ein Textlink in einer Blockzeile wie .korb-info strong > a (inline): Als Rasterzelle wurde der Link zum Block über
   die ganze Zelle – Fokusring 423 × 21 statt 129 × 19 px (Abnahme Runde 3). Die Zeile darunter setzt ihr Abstand wie gap: 0.25rem. */
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-name:has(.ajm-korb-zusatz) { display: block; line-height: 1.25; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-name .ajm-korb-zusatz { margin-top: 0.25rem; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-name a { font-stretch: 92%; text-decoration: none; }
/* Überfahren wie .wk .korb-info a:hover: Farbe aus dem Regler des Widgets („Produktlink beim Überfahren“), dazu unterstrichen – der
   Regler kennt nur die Farbe. */
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-name a:hover { text-decoration: underline; }
}
.elementor .ajm-warenkorb table.shop_table.cart .ajm-korb-zusatz {
  display: block; min-height: 1em; color: var(--text-2); font: 400 var(--fs-xs) / 1.25 var(--font-text); font-stretch: 100%;
}
/* Der Stückpreis in dieser Zeile ist ein span: die Typografie „Produkt“ des Widgets (… .cart td span, Spezifität 0,4,2) gäbe
   ihm sonst 17 px und eine höhere Zeile. Er folgt der kleinen Zeile. */
.elementor .elementor-widget.ajm-warenkorb table.cart .ajm-korb-zusatz span { font: inherit; color: inherit; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-price { display: none; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-quantity { grid-area: menge; }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-subtotal { grid-area: preis; text-align: right !important; font-variant-numeric: tabular-nums; }
/* Preis und Menge in der Textschrift wie .wk .korb-preis / .korb-menge output (Name dagegen in --font-display). Pro hat für Name,
   Preis und Mengenfeld nur eine gemeinsame Typografie („Produkt“, im Widget Archivo 650 für den Namen); die Schriftart der beiden
   Zahlen legt deshalb das Theme fest, Größe und Gewicht kommen weiter aus dem Regler. */
.elementor .elementor-widget.ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-subtotal,
.elementor .elementor-widget.ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-subtotal :is(span, bdi),
.elementor .elementor-widget.ajm-warenkorb .ajm-menge-feld input.qty.qty { font-family: var(--font-text); }
.elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-remove { grid-area: weg; justify-self: start; }
/* Das Kreuz wie .wk .korb-weg: ein Knopf ohne eigene Schrift, also in der Standardschrift des Browsers für Knöpfe (gemessen:
   Arial 400, 1.1rem). Der Link von WooCommerce erbte sonst die Typografie „Produkt“ des Widgets (Archivo 650, fetteres ×);
   ein Link kann die Knopfschrift nicht per revert holen, deshalb steht sie hier ausgeschrieben. */
.elementor .ajm-warenkorb table.shop_table.cart a.remove {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
  font: 400 1.1rem / 1 Arial, sans-serif; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}
.elementor .ajm-warenkorb table.shop_table.cart a.remove:active { transform: scale(0.94); }
/* Pro färbt jeden Link im Widget mit „Links“ (a:not(…), Spezifität 0,6,1) – auch das Entfernen-Kreuz, dessen eigener Regler
   („Entfernen-Symbol“, --order-summary-remove-icon-*) dadurch wirkungslos bliebe. */
.elementor .ajm-warenkorb .woocommerce table.shop_table.cart a.remove { color: var(--order-summary-remove-icon-normal-color, var(--text-2)); }
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-warenkorb .woocommerce table.shop_table.cart a.remove:hover { color: var(--order-summary-remove-icon-hover-color, var(--fehler)); }
}
/* Die Zeile mit dem (verborgenen) Aktualisieren-Knopf und den Formularfeldern bleibt ohne Höhe: Pro gibt jeder Zeile den
   Innenabstand und die Trennlinie der Posten, dist hat unter der Liste nichts. */
.elementor .ajm-warenkorb table.shop_table.cart tr:has(> td.actions) { display: block; padding: 0; border: 0; }
.elementor .ajm-warenkorb table.shop_table.cart td.actions { display: block; padding: 0; border: 0; }
/* Mit „Warenkorb automatisch aktualisieren“ lässt Pro einen leeren Knopf stehen (das Skript von Pro klickt ihn weiter, ebenso
   „Warenkorb leeren“ aus shop.js). !important, weil Pro den Knopf selbst mit display: inline-block !important zeigt
   (custom-pro-widget-woocommerce-cart.css); ohne das bliebe unter der Liste eine leere Zeile von 32 px stehen. */
.elementor .ajm-warenkorb table.shop_table.cart td.actions button[name='update_cart']:is(:empty, [value='']) { display: none !important; }
/* Ohne JavaScript aktualisiert nichts automatisch: Dann steht die Zeile mit „Warenkorb aktualisieren“ (Text aus dem Widget,
   Einstellung „Warenkorb aktualisieren“) wieder da, und Enter im Mengenfeld schickt das Formular über diesen Knopf ab – bis 3.3.0
   blieben Mengen ohne Skript unveränderbar (gemessen 28.09.2026: 7 → 6, Enter, Menge blieb 7). Mit Skript bleibt der Knopf
   verborgen (Pro klickt ihn selbst). .no-js/.js setzt das Kopfskript (inc/10-grundlagen.php). WARUM NICHT NATIV: Zustand
   „Skript läuft“ – die Einstellung „Warenkorb automatisch aktualisieren“ gilt für beide Fälle. */
.no-js .elementor .ajm-warenkorb .woocommerce { --update-cart-automatically-display: block; }
.js .elementor .ajm-warenkorb table.shop_table.cart td.actions button[name='update_cart'] { display: none !important; }
/* „Warenkorb aktualisiert.“ nach einer Mengenänderung: WooCommerce setzt die Meldung als Kasten über die Liste (gemessen bei 1440:
   1320 × 52,8 px, die Seite wächst um 72,8 px). Die HTML-Fassung zeigt dort nichts. Die Meldung ist role="alert" und bleibt für
   Bildschirmleser erhalten, nur nicht sichtbar (wie .screen-reader-text); den Fokus, den WooCommerce ihr gibt, setzt shop.js
   zurück auf den Knopf der Mengenwahl. Gemeint sind nur Erfolgsmeldungen ohne Link – „… entfernt. Rückgängig?“ (mit Link) und
   Fehler bleiben sichtbar. WARUM NICHT NATIV: Das Widget „Warenkorb“ hat für die Meldungen von WooCommerce keinen Regler. */
.elementor .ajm-warenkorb .woocommerce-notices-wrapper .woocommerce-message:not(:has(a)) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@container wkliste (min-width: 40rem) {
  .elementor .ajm-warenkorb table.shop_table.cart tr.cart_item {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto 6.5rem 2.75rem; grid-template-areas: 'farbe info menge preis weg';
    gap: 0.5rem 1.5rem; padding-block: 1.25rem;
  }
  .elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-thumbnail .ajm-korb-bild { width: 5.5rem; height: 6.6rem; }
  .elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-thumbnail .ajm-korb-bild img { width: calc((5.5rem - 1.1rem) / 0.6835); }
  .elementor .ajm-warenkorb table.shop_table.cart tr.cart_item > td.product-name { align-self: center; padding-top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-warenkorb table.shop_table.cart a.remove:hover { background: var(--flaeche-2); }
}
/* Mengenwahl im Warenkorb wie .wk .korb-menge: runde Knöpfe mit Rand, dazwischen die Zahl */
.elementor .ajm-warenkorb .quantity.ajm-menge { margin: 0; }
.elementor .ajm-warenkorb .ajm-menge-feld { display: inline-flex; align-items: center; gap: 0.15rem; }
.elementor .ajm-warenkorb .ajm-menge-feld :is(.ajm-menge-minus, .ajm-menge-plus) {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1.5px solid var(--linie-stark); border-radius: 50%; background: none; color: var(--text); cursor: pointer;
  font: revert; font-size: 1.1rem; line-height: 1;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}
/* Minus und Plus als Textzeichen wie .wk .korb-menge (− und + in 1.1rem) – nicht die Symbole der Produktseite. Die HTML-Fassung
   setzt für diese Knöpfe keine Schrift, sie stehen in der Standardschrift des Browsers für Knöpfe (gemessen: Arial 400); „font:
   revert“ am Knopf holt genau diese zurück, das Zeichen erbt sie. */
.elementor .ajm-warenkorb .ajm-menge-feld :is(.ajm-menge-minus, .ajm-menge-plus)::before {
  content: '\2212'; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font: inherit;
}
.elementor .ajm-warenkorb .ajm-menge-feld .ajm-menge-plus::before { content: '+'; }
/* Überfahren wie .wk .korb-menge button:hover (Fläche --flaeche-2). Die gemeinsame Regel für Minus/Plus weiter oben hat dieselbe
   Rangfolge (0,4,0) wie „background: none“ hier und stand davor – die Fläche fehlte (gemessen rgba(0, 0, 0, 0) statt
   rgb(230, 240, 247)). */
@media (hover: hover) and (pointer: fine) {
  .elementor .ajm-warenkorb .ajm-menge-feld :is(.ajm-menge-minus, .ajm-menge-plus):not(:disabled):hover { background: var(--flaeche-2); }
}
.elementor .ajm-warenkorb .ajm-menge-feld input.qty {
  width: 2rem; min-width: 2rem; height: 2.75rem; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
/* Die Zahl steht wie .wk .korb-menge output. Das Feld ist ein Zahlenfeld (Pro: 28 px hoch, min-/max-height ohne Regler), dessen Text
   Chrome anders auf die Pixel rundet als die Textzeile des output: gemessen stand die Ziffer in 7 von 12 Fällen (1440/1024/768/700/
   375/320, je zwei Posten) 1 px tiefer als in dist, in 5 gleich. 1,25 px Innenabstand unten heben die Mitte um 0,625 px – danach
   gleich in 12 von 12 (Abnahme Runde 3; 0,5 px zu wenig, 1,5–2 px zu viel). WARUM NICHT NATIV: Innenmarkup von WooCommerce, das
   Mengenfeld hat im Widget „Warenkorb“ keinen Regler für den Innenabstand. (0,6,1): gegen die Typografie des Widgets (0,4,2). */
.elementor .elementor-widget.ajm-warenkorb .ajm-menge-feld input.qty.qty { padding-bottom: 1.25px; }


/* ---------- Warenkorb-Seite: Aufbau wie .wk (Liste links, Zusammenfassung rechts) ---------- */
/* WARUM NICHT NATIV: Pro gibt Liste und Zusammenfassung in einem eigenen, festen Raster aus (59 % | Rest, Umbruch bei
   1024 px, kein Regler für Spalten und Umbruch). Die Überschrift „Deine Auswahl“ und die Zeile „Versand und Lieferung …“ /
   „Weiter einkaufen“ stehen als Elementor-Elemente daneben. Damit Überschrift und Zusammenfassung oben bündig stehen wie in
   dist, werden die Hüllen des Widgets durchlässig (display: contents) und seine beiden Spalten Zellen des Elementor-Rasters,
   dessen Spalten, Abstände und Zeilen (auto auto auto 1fr) nativ am Container stehen. Hier nur die Platzierung der beiden
   Spalten, die kein Regler erreicht: Liste in Spalte 1 / Zeile 3, Zusammenfassung in Spalte 2 über die Zeilen 2–4 (klebt
   darin, Pro: „Rechte Spalte fixieren“); Hinweise von WooCommerce über die ganze Breite in Zeile 1. Schmal (Umbruchpunkt
   „Tablet“ des Kits, 920 px) untereinander: Liste, Zusammenfassung, dann die Zeile darunter. */
.elementor .ajm-warenkorb:has(.e-cart__container),
.elementor .ajm-warenkorb:has(.e-cart__container) > .elementor-widget-container,
.elementor .ajm-warenkorb .woocommerce:has(> .e-cart__container),
.elementor .ajm-warenkorb .e-cart__container { display: contents; }
.elementor .ajm-warenkorb .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
.elementor .ajm-warenkorb .e-cart__column-start { grid-column: 1; grid-row: 3; min-width: 0; }
.elementor .ajm-warenkorb .e-cart__column-end { grid-column: 2; grid-row: 2 / span 3; align-self: stretch; min-width: 0; }
@media (max-width: 920px) {
  .elementor .ajm-warenkorb .e-cart__column-end { grid-column: 1; grid-row: 4; }
}
/* Leerer Warenkorb: Der Leerzustand wie .wk-leer (Symbol, „Dein Warenkorb ist leer.“, Satz, „Zum Shop“) steht als Elementor-
   Container mit der Klasse ajm-korb-leer im selben Raster (ganze Breite, Zeile 2 – nativ). Ob er oder der Warenkorb zu sehen
   ist, entscheidet die Ausgabe von WooCommerce: gefüllt die Spalten des Widgets (.e-cart__container), leer die Meldung
   .cart-empty. WARUM NICHT NATIV: Zustand der WooCommerce-Ausgabe (auch nach dem Leeren per AJAX ohne Neuladen), keine
   Anzeigebedingung in Elementor. Die Meldung „Dein Warenkorb ist derzeit leer.“ samt „Zurück zum Shop“ von WooCommerce, die
   Überschrift „Deine Auswahl“ und die Zeile darunter treten dann zurück (dist: [data-korb-leer]:not([hidden]) ~ .wk-titel).
   :has() lässt sich nicht verschachteln, deshalb die Beschreibung über den Elternteil. */
.elementor :has(> .ajm-warenkorb .e-cart__container) > .ajm-korb-leer { display: none; }
.elementor :has(> .ajm-warenkorb .cart-empty) > :not(.ajm-korb-leer, .ajm-warenkorb) { display: none; }
/* Das Widget selbst bleibt im Leerzustand stehen (Zeile 1, ganze Breite), damit Hinweise wie „… entfernt. Rückgängig machen?“
   nach dem Leeren per AJAX sichtbar bleiben; nur die Leer-Meldung von WooCommerce tritt zurück
   (nach dem Leeren per AJAX setzt WooCommerce sie zu den Hinweisen, daher .cart-empty einzeln). */
.elementor .ajm-warenkorb:not(:has(.e-cart__container)) { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.elementor .ajm-warenkorb :is(.wc-empty-cart-message, .cart-empty, .return-to-shop) { display: none; }

/* Zusammenfassung wie .wk-summe. WARUM NICHT NATIV: zweilagiger Schatten --schatten (das Schatten-Feld des Widgets kennt eine
   Lage und keine Variable); Innenabstand der Überschrift (Pro: 8 px unten, 20 px rechts, ohne Regler); die Beschriftungen der
   Zeilen sind Pseudo-Elemente (td::before mit data-title), deren Farbe, Größe und Gewicht Pro an den Betrag koppelt; Zeilen
   als Flex-Zeile mit Linie unter jeder Zeile (Pro: Linie nur über der Gesamtsumme) – Farbe und Stärke der Linie und der
   Zeilenabstand kommen aus den Reglern des Widgets (--totals-divider-*, --totals-rows-gap-*). Fläche, Rahmen, Radius,
   Innenabstand, Schrift und Farben stehen im Widget. */
.elementor .ajm-warenkorb .e-cart-totals { box-shadow: var(--schatten); }
.elementor .ajm-warenkorb .woocommerce .cart_totals h2 { padding: 0; line-height: 1.06; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table { margin: 0; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr { display: block; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr > td {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 0; border-bottom: var(--totals-divider-weight, 1px) solid var(--totals-divider-color, var(--linie));
  font-variant-numeric: tabular-nums;
  /* rechts bündig wie .wk-summe dd: Pro setzt nur oben, unten und links; rechts blieb 1 px aus dem Grundstil des Browsers
     (td { padding: 1px }) – die Beträge standen 1 px zu weit links (Abnahme Runde 3). */
  padding-inline-end: 0;
}
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr > td::before {
  float: none; color: var(--text-2); font-size: var(--fs-s); font-weight: 400; line-height: 1.6;
}
/* Zeile „Produkte“ (inc/65-shop.php) an den Anfang wie in .wk-summe dl (Produkte, Zwischensumme, Versand). Die Gesamtsumme nur,
   wenn sie etwas anderes sagt als die Zwischensumme – bei Versand, Gebühren, Steuern oder Gutschein; die HTML-Fassung hat keine. */
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tbody { display: flex; flex-direction: column; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr.ajm-summe-produkte { order: -1; }
/* Zahl wie .wk-summe dd (650, Ziffern gleich breit); die Typografie „Summen“ des Widgets erreicht nur Beträge (.woocommerce-Price-amount) */
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table .ajm-summe-zahl { font-weight: 650; font-variant-numeric: tabular-nums; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table:not(:has(tr:not(.cart-subtotal, .order-total, .ajm-summe-produkte), .includes_tax)) tr.order-total { display: none; }
/* Weitere Teile der Karte stehen als Elementor-Elemente auf der Seite (Container ajm-korb-summe-zusatz: Zeile „Versand“, Satz zu
   Versand und Lieferung, „Weiter einkaufen“ und „Warenkorb leeren“; Aufbau, Abstände, Schriften nativ). shop.js setzt sie in die
   Karte von WooCommerce, auch nach jedem Neuladen per AJAX. Bis dahin bleibt der Container zu; im Editor steht er sichtbar
   unter dem Warenkorb. Ohne Skript steht er wie im Editor unter dem Warenkorb (Versand, Satz, „Weiter einkaufen“ – bis 3.3.0
   fehlten sie ohne Skript ganz), nur „Warenkorb leeren“ nicht: Das braucht das Skript. Die Zeile „Versand“ tritt zurück,
   sobald WooCommerce selbst Versand ausweist. */
.js body:not(.elementor-editor-active) .elementor .ajm-korb-summe-zusatz { display: none; }
.no-js .elementor .ajm-korb-summe-zusatz .wk-leeren { display: none; }
.elementor .ajm-warenkorb .cart_totals:has(tr.shipping, tr.woocommerce-shipping-totals) .ajm-summe-versand { display: none; }
/* Versandarten in Warenkorb und Kasse (Schlussabnahme Runde 5, Gruppe recht-r5, 04.10.2026). Seitdem gibt es Versandarten (Zone
   „Deutschland“: Versand 4,90 €, kostenloser Versand ab 50 €, Abholung). WARUM NICHT NATIV: Die Liste #shipping_method setzt
   WooCommerce in woocommerce.css zurück, das auf Shop-Ansichten aus ist (inc/65-shop.php, Abschnitt 1) – ohne diese Regeln stand sie
   mit Aufzählungspunkten und 40 px Einzug des Browsers da (gemessen 04.10.2026: list-style disc, padding-left 40px, in der Kasse bei
   375 px Wörter mitten im Wort getrennt); Warenkorb- und Kassen-Widget von Pro haben für diese Liste keinen Regler. Im Warenkorb ist
   die Zeile eine Flex-Zeile (oben: td mit der Beschriftung als ::before); die Liste nimmt den Rest der Zeile, der Satz „Versandoptionen
   werden während des Bezahlvorgangs aktualisiert.“ von WooCommerce steht darunter über die ganze Breite statt als dritte Spalte. In der
   schmalen Spalte der Kasse (375 px: 127 px) trennt die Beschriftung nach Silben (lang="de-DE"), statt über den Rand zu laufen. */
.elementor :is(.ajm-warenkorb, .ajm-kasse) #shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.elementor :is(.ajm-warenkorb, .ajm-kasse) #shipping_method li { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; padding: 0; text-align: start; }
.elementor :is(.ajm-warenkorb, .ajm-kasse) #shipping_method li input { flex: none; margin: 0; }
.elementor :is(.ajm-warenkorb, .ajm-kasse) #shipping_method li label { margin: 0; min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals > td { flex-wrap: wrap; }
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals #shipping_method { flex: 1 1 12rem; }
.elementor .ajm-warenkorb .woocommerce .cart_totals .woocommerce-shipping-destination { flex: 1 1 100%; margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
/* Kasse am Handy (Nachbesserung, Befund R5N-11): In der Bestellübersicht teilt sich die Zeile „Sendung“ die Spalten mit den
   Produktnamen; die Beschriftungsspalte war bei 375 px 173 px breit, die Versandarten bekamen 128 px und brachen sieben Zeilen hoch
   mit Trennstrichen um („Ge-schäftsstelle“, „Terminab-sprache“). Unter 600 px nimmt die Zelle der Versandarten 62 % der Tabelle;
   die erste Spalte behält ihre Mindestbreite („Zwischensumme“). Gemessen mit eingespielter Datei: 375 px Abholung 109 statt 190 px
   hoch, Versand 82 statt 109 px, Produktname unverändert; 430 px 82 statt 163 px. Darüber bleibt die Aufteilung von WooCommerce
   (sonst bricht der Produktname bei 1024 und 1440 px um). WARUM NICHT NATIV: Das Kassen-Widget von Pro hat für die Spalten der
   Übersicht keinen Regler, und den Titel der Versandart kürzt nur der Verein in WooCommerce (Vorschlag in docs/RECHTSTEXTE.md). */
@media (max-width: 600px) {
  .elementor .ajm-kasse .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { width: 62%; }
}
/* „Warenkorb leeren“ wie .wk-leeren: Mülleimer als Maske, Farbe beim Überfahren, Druckgefühl */
.elementor .wk-leeren::before {
  content: ''; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url(../icons/trash.svg) center / contain no-repeat; mask: url(../icons/trash.svg) center / contain no-repeat;
}
.elementor .wk-leeren { transition: transform 160ms var(--ease-out), color 180ms ease; }
.elementor .wk-leeren:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .elementor .wk-leeren:hover { color: var(--fehler); } }
/* „← Weiter einkaufen“ (Container ajm-summe-neben): Der Pfeil weicht beim Überfahren 4 px nach links vom Text weg wie
   .wk-neben .textlink:hover svg (warenkorb/index.astro: translateX(-4px)). Die allgemeine Regel für mit-pfeil-links in
   elementor-rest.css („Zurück zu Aktuelles“ wie .textlink:hover svg in global.css) schob ihn 4 px zum Text hin (Abnahme Runde 4,
   design1-r4-2, gemessen +4,00 statt −4,00 px). WARUM NICHT NATIV: Pseudo-Element, Zustand :hover nur für Zeigergeräte. */
@media (hover: hover) and (pointer: fine) { .elementor .ajm-summe-neben .textlink.mit-pfeil-links:hover::before { transform: translateX(-4px); } }
/* Zwischensumme größer (dist: .wk-summe dl > div:nth-child(2) dd) */
.elementor .ajm-warenkorb .woocommerce .cart_totals table.shop_table tr.cart-subtotal td .woocommerce-Price-amount { font-size: var(--fs-l); }
/* „Zur Kasse“ wie .btn.btn-tief mit Pfeil. WARUM NICHT NATIV: Mindesthöhe 3rem und Zentrieren (kein Regler), Pfeil als Maske
   (Pseudo-Element), Druckgefühl (:active). Farben, Schrift, Rahmen, Radius und Innenabstand stellt das Widget ein. */
.elementor .ajm-warenkorb .woocommerce .wc-proceed-to-checkout { padding-top: 1.1rem; }
.elementor .ajm-warenkorb .woocommerce .wc-proceed-to-checkout .checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.elementor .ajm-warenkorb .woocommerce .wc-proceed-to-checkout .checkout-button::after {
  content: ''; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat; mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}
.elementor .ajm-warenkorb .woocommerce .wc-proceed-to-checkout .checkout-button:active { transform: scale(0.97); }

/* Leerer Warenkorb (Container mit der Klasse ajm-korb-leer): Symbol wie .wk-leer > svg. WARUM NICHT NATIV:
   Symbol als Maske (Pseudo-Element; die Mediathek hat keine SVG); Rahmen, Abstände, Schrift und Farben stehen in der Klasse. */
.elementor .ajm-korb-leer::after {
  content: ''; order: -1; width: 3rem; height: 3rem; background: var(--akzent-text);
  -webkit-mask: url(../icons/shopping-bag.svg) center / contain no-repeat; mask: url(../icons/shopping-bag.svg) center / contain no-repeat;
}


/* ---------- Kasse und Mein Konto (Pro-Widgets, Klassen ajm-kasse, ajm-konto) ---------- */
/* WARUM NICHT NATIV: Zustände der Felder – Überfahren nur für Zeigergeräte, Tastaturfokus (:focus-visible), Fehler
   (.woocommerce-invalid von WooCommerce) – wie .eingabe in global.css; Farbe von Kontrollkästchen und Optionsfeldern
   (accent-color); die Länder-Auswahl (select2 von WooCommerce, von Pro mit festem Grau #f9fafa und Roboto gestaltet, ohne
   Regler); der Knopf „Passwort anzeigen“ (Symbol als Maske, sonst nur in woocommerce.css). Flächen, Rahmen, Radien,
   Innenabstände, Schriften und Farben der Felder, Beschriftungen, Abschnitte und Knöpfe stellt das Widget ein
   (sections_*, forms_fields_*, forms_label_*, forms_buttons_*, purchase_button_*, tabs_*). */
/* Die Randfarbe der Felder setzt Pro in der Kasse mit einer ID (#customer_details, 1,6,0) im später geladenen Widget-CSS; die
   Zustände hier brauchen deshalb die ID und eine Klasse mehr (.elementor-widget), sonst bliebe der Rand bei Fehler und beim
   Überfahren grau (gemessen: rgb(116, 137, 157) trotz woocommerce-invalid). */
@media (hover: hover) and (pointer: fine) {
  .elementor :is(.ajm-kasse, .ajm-konto) .form-row :is(.input-text, select, textarea):hover:not(:focus),
  .elementor .elementor-widget.ajm-kasse .woocommerce #customer_details .form-row :is(.input-text, select, textarea):hover:not(:focus) { border-color: var(--text-2); }
}
/* Dasselbe für „Mein Konto“ und die Auswahlfelder der Kasse (Abnahme Runde 4, design1-r4-3): Im Widget „Mein Konto“ setzt Pro die
   Randfarbe mit (0,8,0) (.elementor-13 … .e-my-account-tab:not(…) .woocommerce .form-row .input-text) – die Regel oben (0,6,0)
   verlor, der Rand blieb beim Überfahren rgb(116, 137, 157) statt rgb(61, 81, 102) wie .eingabe:hover. Die Auswahlfelder der Kasse
   (select2: „Land/Region“, „Bundesland/Landkreis“) sind kein .input-text: Überfahren wie .auswahl:hover, solange sie weder den
   Fokus haben noch offen sind (dann gilt die Regel „Fokus/offen“ unten); Pro setzt ihren Rand mit einer ID (1,6,0). */
@media (hover: hover) and (pointer: fine) {
  .elementor .elementor-widget.ajm-konto .e-my-account-tab .woocommerce .form-row :is(.input-text, select, textarea):hover:not(:focus),
  .elementor .elementor-widget.ajm-kasse .woocommerce #customer_details .form-row .select2-container--default:not(.select2-container--focus, .select2-container--open) .select2-selection--single:hover { border-color: var(--text-2); }
}
.elementor :is(.ajm-kasse, .ajm-konto) .form-row :is(.input-text, select, textarea):focus-visible {
  outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 30%, transparent);
}
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce-invalid :is(.input-text, select, textarea, .select2-selection),
.elementor .elementor-widget.ajm-kasse .woocommerce #customer_details .form-row.woocommerce-invalid :is(.input-text, select, textarea, .select2-selection) { border-color: var(--fehler); }
/* Fehlertext unter dem Feld wie .feld .fehlertext in global.css der HTML-Fassung. WooCommerce (checkout.js, show_inline_errors)
   setzt nach einem abgelehnten Absenden p.checkout-inline-error-message unter jedes fehlerhafte Feld; ohne eigene Regel erbte er
   Pros festes Grau #69727d der Widget-Hülle (dunkel 3,39:1 auf der Fläche, unter 4,5:1 – Abnahme Runde 3, funktion-r3-4). Die
   Regel dafür steht nur in woocommerce.css, das auf Shop-Ansichten nicht lädt. WARUM NICHT NATIV: Das Markup entsteht erst im
   Browser beim Fehler (Zustand), das Widget hat für diesen Text keinen Regler. */
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce .form-row .checkout-inline-error-message {
  margin: 0.45rem 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--fehler);
}
/* Grundschrift der Widgets wie der Fließtext (--font-text). WARUM NICHT NATIV: Pro setzt für „Kasse“, „Mein Konto“ und „Warenkorb“ im Widget-CSS
   fest Roboto (beim Warenkorb am inneren .woocommerce) und hat für die Grundschrift keinen Regler – nur für einzelne Teile. Texte ohne eigenen Regler (Hinweis ohne
   Zahlart, „Passwort vergessen?“) erbten sonst Roboto (gemessen). */
.elementor .elementor-widget:is(.ajm-kasse, .ajm-konto, .ajm-warenkorb),
.elementor .elementor-widget.ajm-warenkorb .woocommerce { font-family: var(--font-text); }
.elementor :is(.ajm-kasse, .ajm-konto) :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--blau-tief); }
.elementor :is(.ajm-kasse, .ajm-konto) .required { color: inherit; text-decoration: none; }
/* Kontrollkästchen wie das einzige der HTML-Fassung (.haken im Katalog, katalog/index.astro: Kästchen 1.25rem, Abstand 0.55rem,
   mittig zur Beschriftung, Zeile mindestens 2.75rem hoch, Zeiger; als eigene Zeile wie bisher – WooCommerce setzt die Beschriftung
   auf display: block, der Knopf „Anmelden“ steht darunter). Die Schrift der Beschriftung (15px/600 wie .haken) stellt das
   Widget ein („Kontrollkästchen“ → Typografie, checkboxes_typography bzw. payment_checkboxes_typography). Abnahme Runde 4,
   design1-r4-6: „Angemeldet bleiben“ war das Standardkästchen des Browsers (13 × 13 px). WARUM NICHT NATIV: Größe des
   Eingabefelds und Aufbau der Beschriftung sind Innenmarkup von WooCommerce, kein Regler der Widgets erreicht sie. */
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce label:has(> input[type='checkbox']) { display: flex; width: fit-content; align-items: center; gap: 0.55rem; min-height: 2.75rem; cursor: pointer; }
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce input[type='checkbox'] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; }
/* Links im Text der Widgets wie a in global.css (Unterstreichung 1px, Abstand 0.18em, beim Überfahren 2px): Elementor nimmt jedem
   Link die Unterstreichung (.elementor a { text-decoration: none }), die Widgets haben für Links nur Farbregler (links_*). Betroffen:
   „Datenschutzerklärung“ im Datenschutzhinweis und die AGB im Satz am Kontrollkästchen (Kasse), „Passwort vergessen?“ (Mein
   Konto). Abnahme Runde 4, design1-r4-5. */
.elementor :is(.ajm-kasse, .ajm-konto) :is(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text, .woocommerce-LostPassword) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) {
  .elementor :is(.ajm-kasse, .ajm-konto) :is(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text, .woocommerce-LostPassword) a:hover { text-decoration-thickness: 2px; }
}
/* Haken „Ich akzeptiere die Allgemeinen Geschäftsbedingungen *“ (erscheint seit der Zuordnung der AGB-Seite /agb-shop/, Schlussabnahme
   Runde 5, Gruppe recht-r5): WooCommerce setzt zwischen Text und Pflicht-Sternchen ein geschütztes Leerzeichen; in der Flex-Beschriftung
   oben wurde daraus ein eigenes Flex-Glied, und der Abstand 0.55rem stand zweimal davor – das Sternchen stand gut 20 px abgesetzt
   (gemessen 04.10.2026). Der Abstand zum Kästchen kommt hier als Außenabstand des Kästchens, Text und Sternchen stehen wie bei den
   übrigen Pflichtfeldern der Kasse („Postleitzahl *“). Das Widget hat für diese Beschriftung keinen Regler.
   Nachbesserung (Befund R5N-07): Als Flex-Glieder hielt das nur, solange die Beschriftung einzeilig war – bei 375 px bricht der Text um,
   die Textspanne wird so breit wie die Zeile, und das Sternchen stand 77 bis 124 px abgesetzt am rechten Rand. Deshalb hier Fließtext
   statt Flex: Kästchen, Text und Sternchen stehen in einer Zeile hintereinander und brechen gemeinsam um; der hängende Einzug
   (Innenabstand = Kästchen + Abstand, negativer Texteinzug) hält Folgezeilen bündig unter dem Text. Der Innenabstand oben und unten
   zentriert eine einzelne Zeile in der Mindesthöhe 2.75rem wie vorher. */
.elementor .ajm-kasse .woocommerce-terms-and-conditions-wrapper label:has(> input[type='checkbox']) {
  display: block; padding-block: 0.71875rem; padding-block: calc((2.75rem - 1lh) / 2); padding-inline-start: 1.8rem; text-indent: -1.8rem;
}
.elementor .ajm-kasse .woocommerce-terms-and-conditions-wrapper label > input[type='checkbox'] { display: inline-block; vertical-align: middle; margin: 0 calc(0.55rem - 0.3em) 0 0; }
/* Textlinks in den Absätzen der Shop-Vorlagen und -Seiten wie die Links im Fließtext (elementor-rest.css, .haupt/.prosa): Akzentfarbe,
   Unterstreichung 1px mit Abstand 0.18em, beim Überfahren 2px. Seit der Schlussabnahme Runde 5 (Gruppe recht-r5) verweisen Absätze
   in Shop-Übersicht, Kategorie, Produktseite, Warenkorb und Mein Konto auf /versand-und-zahlung/, /widerruf/ und /vertrag-widerrufen/;
   gemessen 04.10.2026: Linkfarbe = Textfarbe, keine Unterstreichung – als Link nicht zu erkennen. WARUM NICHT NATIV: Elementor nimmt
   jedem Link die Unterstreichung (.elementor a { text-decoration: none }), das Absatz-Widget hat für Links im Text keinen Regler, und
   die Linkregel von elementor-rest.css erreicht nur .haupt/.faq-antwort/.hinweis. Ausgenommen sind die Kategorie-Schildchen
   (.shop-tag) und Textlinks mit Pfeil (.textlink), die eigene Stile haben; der Link im Satz unter der Warenkorb-Summe (.ajm-summe-klein)
   bekommt von shop.js die Klasse wc-backward (damit die Linkfarbe des Warenkorb-Widgets die Links der Karte nicht trifft) und steht
   deshalb eigens in der Liste. */
body:is(.woocommerce, .woocommerce-page) .elementor .e-paragraph-base:not(.shop-tag, .textlink) a:not([class]),
.elementor .ajm-summe-klein a:not(.textlink) { color: var(--akzent-text); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  body:is(.woocommerce, .woocommerce-page) .elementor .e-paragraph-base:not(.shop-tag, .textlink) a:not([class]):hover,
  .elementor .ajm-summe-klein a:not(.textlink):hover { text-decoration-thickness: 2px; }
}
/* „Passwort vergessen?“ in der kleinsten Schriftgröße der Tokens (--fs-xs wie der Hinweis neben dem Knopf eines Formulars,
   .vorschau-hinweis auf /kontakt/): Pro setzt dort fest 12px (.woocommerce-LostPassword, 0,6,0), das Widget hat für diesen Satz
   keinen Regler. Abnahme Runde 4, design1-r4-5. */
.elementor .elementor-widget.ajm-konto .e-my-account-tab .woocommerce .login .woocommerce-LostPassword { font-size: var(--fs-xs); }
/* Mein Konto, abgemeldet: das Anmeldeformular so breit wie die linke Spalte der Kasse (Pro: .e-checkout__container 56 % und Rest, bis
   920 px eine Spalte; bei 1440 px 739 px) und wie die Formularkarte der HTML-Fassung (/kontakt/: .formular-spalte 728 px bei 1440 px,
   bis 920 px volle Breite). Vorher lief die Karte über die ganze Breite (1320 px, Felder 1262 px; Schlussabnahme Runde 1,
   design-r1-3). Die Überschrift „Anmelden“ bleibt wie in der HTML-Fassung über der Karte (/kontakt/: h2#formular-titel vor
   form.formular). Nur das einzelne Formular: Mit Registrierung stehen Anmelden und Registrieren in zwei Spalten (.u-columns) und
   behalten ihre Breite; angemeldet greift die Regel nicht. WARUM NICHT NATIV: Das Widget „Mein Konto“ hat für das Anmeldeformular keine
   Breite, und die Breite des Widgets (Erweitert → Breite) gälte auch für das angemeldete Konto mit Navigation, Bestellungen und Adressen. */
.elementor .elementor-widget.ajm-konto .woocommerce > form.woocommerce-form-login { width: 56%; }
@media (max-width: 920px) {
  .elementor .elementor-widget.ajm-konto .woocommerce > form.woocommerce-form-login { width: auto; }
}
/* Kasse: Seit „Adresszusatz“ seine Beschriftung zeigt (inc/65-shop.php Abschnitt 23 – Felder ohne Platzhalter wie die Formulare der
   HTML-Fassung, Schlussabnahme Runde 1, design-r1-2), hat auch die Zeile „Straße und Hausnummer“ davor den Zeilenabstand der übrigen
   Felder (Regler „Formulare → Zeilen“, --forms-rows-gap). Pro rückt die zweite Adresszeile als Fortsetzung ohne Beschriftung auf 5 px heran
   (#customer_details #billing_address_1_field, 2,2,0; das CSS des Widgets lädt nach diesem Stylesheet). WARUM NICHT NATIV: Pro setzt den
   Wert fest, ohne Regler. */
.elementor .elementor-widget.ajm-kasse .woocommerce #customer_details #billing_address_1_field { margin-bottom: var(--forms-rows-gap, 1.1rem); }
/* Betrag der Gesamtsumme in der Stärke der übrigen Summen (650 aus dem Regler „Titel und Summen“, order_summary_totals_typography):
   WooCommerce setzt ihn in <strong>, das der Browser „bolder“ rechnet – 900, eine Stärke, die die HTML-Fassung nicht hat (dort die
   Summe in 650, .wk-summe dd). Den Satz der Übersicht erreicht kein Regler. Abnahme Runde 4, design1-r4-5. */
.elementor .ajm-kasse .woocommerce-checkout-review-order-table tfoot td strong { font-weight: inherit; }

/* Knöpfe wie .btn: Mindesthöhe 3rem, Text mittig, Zeiger (cursor: pointer). WARUM NICHT NATIV: Die Widgets „Kasse“ und „Mein
   Konto“ haben Regler für Farbe, Schrift, Rahmen, Radius und Innenabstand, aber keine Mindesthöhe (Pro setzt am Bestellknopf
   sogar min-height: auto; gemessen 38 statt 48 px) und keinen Zeiger (gemessen „default“). Pro lädt das CSS dieser Widgets erst im Seitenkörper, also nach diesem Stylesheet: Regeln
   hier brauchen deshalb eine höhere Spezifität als die von Pro (hier .woocommerce zusätzlich). */
.elementor .ajm-kasse .woocommerce #payment #place_order,
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce .woocommerce-form-login__submit,
.elementor .ajm-konto .woocommerce :is(.woocommerce-Button, .woocommerce-button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.elementor .ajm-kasse .woocommerce #payment #place_order:active,
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce .woocommerce-form-login__submit:active { transform: scale(0.97); }
/* Schriftgröße der Felder wie .eingabe (font: inherit = --fs-m). WARUM NICHT NATIV: Der Regler „Schrift der Felder“ des Widgets
   „Kasse“ schreibt 1.0625rem, verliert aber gegen die Grundregel von Pro (font-size: 14px, gleiche Spezifität, später geladen) –
   gemessen 14 px. Die Grundregel trägt eine ID (#customer_details), daher hier ebenso. */
.elementor :is(.ajm-kasse, .ajm-konto) .woocommerce .form-row :is(.input-text, textarea, select),
.elementor .ajm-kasse .woocommerce #customer_details .form-row :is(.input-text, textarea, select) { font-size: var(--fs-m); }
/* Abstand zwischen Datenschutzhinweis und Bestellknopf wie die Abstände der Zusammenfassung (.wk-summe: gap 1.1rem). Pro setzt
   dort keinen Abstand und hat keinen Regler (gemessen: Knopf direkt unter dem Text). */
.elementor .ajm-kasse .woocommerce #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1.1rem; }
/* „Bestellhinweise“ (textarea, WooCommerce setzt rows=2: 78,8 px, der Platzhalter lief schmal in eine angeschnittene dritte
   Zeile) wie textarea.eingabe der Formulare (formulare.css): Höhe nach Zeilen – hier 3 wie das Hinweisfeld der Ausleihe –,
   1.6em je Zeile + Innenabstand 0.7rem oben und unten + Rand 2 × 1.5px, mindestens 6rem, nur senkrecht ziehbar.
   WARUM NICHT NATIV: Das Widget „Kasse“ hat für die Höhe des Textfelds keinen Regler (Innenabstand, Rand, Zeilenhöhe schon). */
.elementor .ajm-kasse .woocommerce #customer_details .form-row textarea { --zeilen: 3; min-height: 6rem; height: calc(var(--zeilen) * 1.6em + 1.4rem + 3px); resize: vertical; }
/* Vorname/Nachname: Pro stapelt die beiden Felder unter 1025 px mit width: 100 % und behält dabei den Spaltenabstand als
   Innenabstand – bei border-box rückt „Vorname“ rechts 17,6 px ein und „Nachname“ links (gemessen bei 375 px). Wie jede
   andere Zeile: volle Breite. Ohne Regler (Fehler der Pro-Ausgabe). */
@media (max-width: 1024px) {
  .elementor .ajm-kasse .woocommerce-checkout :is(.form-row-first, .form-row-last) { float: none; width: auto; }
}
/* Bestellübersicht wie .wk-summe dl: Beschriftungen links, Beträge rechts (Tabellenköpfe stehen sonst mittig – Vorgabe des
   Browsers für th, kein Regler). */
.elementor .ajm-kasse .woocommerce-checkout-review-order-table :is(th, td) { text-align: start; }
/* Größe hinter dem Namen (small.ajm-korb-zusatz, inc/65-shop.php) leiser wie die Merkmale einer Variation. „Größe S“ bleibt
   zusammen (nowrap) wie im Warenkorb der HTML-Fassung – schmal brach die Zeile sonst zwischen „Größe“ und „S“ (gemessen bei 375:
   „T-Shirt / Shooshla! Größe / S × 2“). Den Satz der Übersicht erreicht kein Regler des Widgets. */
.elementor .ajm-kasse .woocommerce-checkout-review-order-table .ajm-korb-zusatz { color: var(--text-2); font-size: var(--fs-s); font-weight: 400; white-space: nowrap; }
.elementor .ajm-kasse .woocommerce-checkout-review-order-table :is(th, td):last-child { text-align: end; font-variant-numeric: tabular-nums; }
/* Produktspalte: Pro setzt td.product-name „padding-inline-end: 40px; max-width: 150px“ (Widget-CSS, kein Regler). Schmal brachen
   dadurch kurze Namen um, obwohl daneben Platz war (gemessen bei 375: „T-Shirt / Shooshla!“, bei 320: „Pin Stern × 1“ zweizeilig).
   Der Abstand zum Betrag ist wie in den Zeilen der Zusammenfassung (.wk-summe: gap 1rem) – die Spalte wird nicht künstlich
   schmal. Das Widget-CSS lädt Pro im Seitenkörper; .woocommerce und die Tabellenklasse heben die Regel über dessen (0,5,1). */
.elementor .ajm-kasse .woocommerce .woocommerce-checkout-review-order-table .cart_item td.product-name { max-width: none; padding-inline-end: 1rem; }
/* Schmale Bildschirme: Die beiden Spalten der Kasse sind Rasterelemente mit der Vorgabe min-width: auto – die einzige Spur („1fr“
   von Pro) wuchs deshalb auf die Mindestbreite der Bestellübersicht. Die setzt „Zwischensumme“ zweimal nebeneinander (Kopf der
   Betragsspalte, Zeile der Summe): Tabelle 256 px + Innenabstand der Karte = 298 px Spalte im 288 px breiten Raster bei 320 px
   (gemessen 28.09.2026; beide Karten reichten bis x = 314, rechts 6 statt 16 px Rand; in der Abnahme Runde 2 mit anderem Stand
   bis x = 329, waagerechter Überlauf). min-width: 0 hält die Spalten im Raster. Unter 360 px trennen die Beschriftungen der
   Übersicht (Kopf und Summenzeilen) nach Silben (lang="de", „Zwischen-summe“), damit die Tabelle in die Karte passt;
   Produktnamen und Beträge bleiben ungetrennt. WARUM NICHT NATIV: Das Widget „Kasse“ hat für die Spuren seines Rasters und für
   den Satz der Übersicht keinen Regler. */
.elementor .ajm-kasse .e-checkout__column { min-width: 0; }
@media (max-width: 359px) {
  .elementor .ajm-kasse .woocommerce-checkout-review-order-table :is(thead th, tfoot th) { -webkit-hyphens: auto; hyphens: auto; }
}

/* Länder-Auswahl (select2) wie .auswahl. Fläche, Rand und Radius kommen wie bei allen Feldern aus den Reglern des Widgets
   („Felder“: Hintergrund, Rahmen, Eckenradius – Pro nennt select2 in deren Selektoren); hier steht nur, was kein Regler setzt:
   Höhe und Zeilenhöhe wie .auswahl (min-height 3rem; Pro setzt 45 px bzw. mit Innenabstand „height: auto“ und eine Zeilenhöhe aus
   dem Innenabstand – gemessen 40,4 statt 48 px), Bewegung und die Zustände Fokus/offen. Vorher setzte diese Regel auch Fläche,
   Rand und Radius fest und gewann gegen die Regler (gleiche Spezifität 0,5,0, später geladen) – änderte der Kunde die Felder im
   Editor, folgten alle außer „Land/Region“ (Abnahme Runde 3, funktion-r3-8). Mit .woocommerce: gegen Pros Widget-CSS. */
.elementor .ajm-kasse .woocommerce .select2-container--default .select2-selection--single {
  height: 3rem; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.elementor .ajm-kasse .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(3rem - 3px); color: var(--text); padding-inline: 0.9rem 2.5rem; }
.elementor .ajm-kasse .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(3rem - 3px); right: 0.5rem; }
.elementor .ajm-kasse .woocommerce .select2-container--focus .select2-selection--single,
.elementor .ajm-kasse .woocommerce .select2-container--open .select2-selection--single { border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 30%, transparent); }
/* Tastaturfokus nur Rand und Leuchtrand wie .auswahl:focus-visible (outline: none). Fokussierbar ist bei select2 die Fläche selbst
   (span.select2-selection, tabindex 0); sie bekam zusätzlich den allgemeinen Fokusring aus global.css (3 px im Abstand von 3 px –
   Abnahme Runde 4, design1-r4-3). */
.elementor .ajm-kasse .woocommerce .select2-container--default .select2-selection--single:focus-visible { outline: none; }
/* Die Liste hängt select2 an <body>; Pro gibt ihr die Klasse e-woo-select2-wrapper. */
.select2-container.e-woo-select2-wrapper .select2-dropdown { background: var(--flaeche); border-color: var(--feld-rand); color: var(--text); }
.select2-container.e-woo-select2-wrapper .select2-results__option { color: var(--text); font-family: var(--font-text); }
.select2-container.e-woo-select2-wrapper .select2-results__option--highlighted[aria-selected],
.select2-container.e-woo-select2-wrapper .select2-results__option--highlighted[data-selected] { background: var(--flaeche-2); color: var(--text); }
.select2-container.e-woo-select2-wrapper .select2-search__field { border: 1.5px solid var(--feld-rand); border-radius: var(--r-feld); background: var(--flaeche); color: var(--text); }

/* „Passwort anzeigen“ (setzt woocommerce.js neben das Passwortfeld) */
.elementor :is(.ajm-kasse, .ajm-konto) .password-input { position: relative; display: flex; flex-direction: column; justify-content: center; }
.elementor :is(.ajm-kasse, .ajm-konto) .password-input input[type='password'],
.elementor :is(.ajm-kasse, .ajm-konto) .password-input input[type='text'] { padding-right: 3rem; }
.elementor :is(.ajm-kasse, .ajm-konto) .show-password-input {
  position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer;
}
.elementor :is(.ajm-kasse, .ajm-konto) .show-password-input::before {
  content: ''; width: 1.25rem; height: 1.25rem; background: currentColor;
  -webkit-mask: url(../icons/eye-slash.svg) center / contain no-repeat; mask: url(../icons/eye-slash.svg) center / contain no-repeat;
}
.elementor :is(.ajm-kasse, .ajm-konto) .show-password-input.display-password::before { -webkit-mask-image: url(../icons/eye.svg); mask-image: url(../icons/eye.svg); }
@media (hover: hover) and (pointer: fine) {
  .elementor :is(.ajm-kasse, .ajm-konto) .show-password-input:hover { background: var(--flaeche-2); color: var(--text); }
}


/* ---------- „Fragen zum Shop?“ und Knöpfe btn-tief/btn-linie: Tastaturfokus wie in der HTML-Fassung ---------- */
/* Fokusring in --fokus-auf-tief: In dist trägt der Abschnitt die Klasse „fragen“, für die global.css --fokus auf --fokus-auf-tief
   umstellt (hell rgb(108, 192, 238) statt rgb(15, 106, 156); gemessen am Ring um „info@ajm-nrw.org“ und „Zum Kontakt“). In den
   Produktarchiv-Vorlagen (1087 Shop, 1105 Kategorie) ist „Fragen zum Shop?“ der einzige Abschnitt mit der Klasse abschnitt-eng.
   WARUM NICHT NATIV: --fokus ist die Farbe eines Zustands (:focus-visible); eine Variable setzen die Stile in Elementor nicht, und
   neue globale Klassen (etwa „fragen“) legt diese Runde nicht an. Hinweis: dist hat damit auf der hellen Fläche einen hellen Ring
   (Kontrast zur Fläche --flaeche-2 1,75 : 1, der dunkle Ring hätte 5,1 : 1) – so übernommen, weil die HTML-Fassung der Maßstab ist. */
[data-elementor-type='product-archive'] .abschnitt-eng { --fokus: var(--fokus-auf-tief); }
/* Fokus ohne Überfahren zeigt wie in dist nur den Ring. Elementor schreibt den Zustand „Überfahren“ der globalen Klassen zugleich für
   :focus-visible („.elementor .btn-tief:hover, .elementor .btn-tief:focus-visible { background-color: var(--lapis-2) }“, ebenso
   btn-linie mit Fläche --flaeche-2 und Rand --text) – gemessen: Fokus auf „info@ajm-nrw.org“ rgb(18, 58, 99) statt rgb(11, 39, 68),
   „Zum Kontakt“ mit Fläche und Rand des Überfahrens. Hier deshalb für Fokus ohne Überfahren die Grundwerte derselben Klassen
   (btn-tief var(--lapis), im dunklen Schema var(--blau) wie elementor-rest.css; btn-linie durchsichtig mit Rand var(--linie-stark));
   ändert jemand diese Klassen im Editor, hier mitziehen. WARUM NICHT NATIV: Elementor trennt :hover und :focus-visible nicht. */
.elementor a.btn.btn-tief:focus-visible:not(:hover) { background-color: var(--lapis); }
:root[data-theme='dark'] .elementor a.btn.btn-tief:focus-visible:not(:hover) { background-color: var(--blau); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .elementor a.btn.btn-tief:focus-visible:not(:hover) { background-color: var(--blau); }
}
.elementor a.btn.btn-linie:focus-visible:not(:hover) { background-color: transparent; border-color: var(--linie-stark); }
/* Spielart „medien-extern“ (Medien.astro, Rand weiß 50 %) wie die Regel für Geräte ohne Zeiger in elementor-rest.css – kommt in
   Shop-Ansichten nicht vor, aber die Editor-Vorschau lädt shop.css auf jeder Seite. */
.elementor a.btn.btn-linie.medien-extern:focus-visible:not(:hover) { border-color: rgb(255 255 255 / 0.5); }


/* ---------- Symbole als Maske in den Shop-Ansichten: Lage auf ganzen Pixeln wie das SVG der HTML-Fassung ---------- */
/* Brief („info@ajm-nrw.org“ in „Fragen zum Shop?“, btn mit-brief) und Pfeil der Knöpfe („Zum Shop“ im leeren Warenkorb, btn
   mit-pfeil) sind Masken auf Pseudo-Elementen (elementor-rest.css, „mask: … center / contain“).
   Das Inline-SVG der HTML-Fassung rastet als ersetztes Element auf ganze Pixel ein; die Maske eines Kästchens, das auf einem
   Bruchteil eines Pixels steht (17,25 px groß, Lage je nach Seite und Breite), zeichnet Chrome dagegen um bis zu 1 px versetzt und
   weicher (Abnahme Runde 4, design1-r4-4: Tintenschwerpunkt des Briefs dy +0,80 auf /shop/ bei 768, dx +0,86 bei 375 – Umriss x 41–55
   statt 40–54 –, Pfeil „Zum Shop“ dy +0,84 bei 1024). Als eigene Ebene (will-change: transform)
   legt Chrome das Symbol wie das SVG auf ganze Pixel: gemessen dx/dy ≤ 0,3 px und derselbe Umriss auf /shop/ (1440/1024/768/375/320),
   Kategorie Bekleidung (1440/375), leerem Warenkorb (1024/768/375), hell und dunkel. Die Maske an die Ecke zu legen (mask-position:
   0 0) half nur auf manchen Seiten (Kategorie 375: dx +0,75, dy +0,69 – verworfen). Die kleineren Pfeile der Textlinks (1.1em,
   „Warenkorb ansehen“, „Weiter einkaufen“; Strich abgenommen) bleiben ohne eigene Ebene – mit ihr lagen sie gemessen nicht näher an
   dist (dx +0,4, Tinte 5,5 statt 4,7). Nur in den Shop-Ansichten (WooCommerce setzt
   .woocommerce-page an body); die übrigen Seiten bleiben unberührt. WARUM NICHT NATIV: Pseudo-Elemente und Masken kennt das
   Stil-Panel nicht. */
.woocommerce-page .elementor .btn.mit-brief::before,
.woocommerce-page .elementor .btn.mit-pfeil::after { will-change: transform; }


/* ---------- Dunkles Schema: Hauptknöpfe der Pro-Widgets wie .btn-tief ---------- */
/* WARUM NICHT NATIV: Die HTML-Fassung schaltet .btn-tief im dunklen Schema auf --blau mit Text --auf-akzent (global.css). Das Schema
   hängt an :root[data-theme] bzw. prefers-color-scheme – die Farbregler der Pro-Widgets kennen weder einen solchen Vorfahren noch
   die Medienabfrage (wie .btn-tief in elementor-rest.css). Überfahren wie dort: --lapis-2 nur für Zeigergeräte. Die ID in der
   Liste gibt jeder Regel die Rangfolge über die Widget-Regeln von Pro (bis 2,4,0, später geladen). */
:root[data-theme='dark'] :is(.elementor .ajm-produkt-kauf .single_add_to_cart_button, .elementor .ajm-warenkorb .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse #payment #place_order, .elementor .ajm-kasse .woocommerce-button,
  .elementor .ajm-konto .woocommerce :is(.woocommerce-form-login__submit, .woocommerce-Button, .woocommerce-button, button.button)) { background-color: var(--blau); color: var(--auf-akzent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :is(.elementor .ajm-produkt-kauf .single_add_to_cart_button, .elementor .ajm-warenkorb .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse #payment #place_order, .elementor .ajm-kasse .woocommerce-button,
  .elementor .ajm-konto .woocommerce :is(.woocommerce-form-login__submit, .woocommerce-Button, .woocommerce-button, button.button)) { background-color: var(--blau); color: var(--auf-akzent); }
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme='dark'] :is(.elementor .ajm-produkt-kauf .single_add_to_cart_button, .elementor .ajm-warenkorb .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse #payment #place_order, .elementor .ajm-kasse .woocommerce-button,
  .elementor .ajm-konto .woocommerce :is(.woocommerce-form-login__submit, .woocommerce-Button, .woocommerce-button, button.button)):hover { background-color: var(--lapis-2); color: var(--auf-akzent); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) :is(.elementor .ajm-produkt-kauf .single_add_to_cart_button, .elementor .ajm-warenkorb .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse #payment #place_order, .elementor .ajm-kasse .woocommerce-button,
  .elementor .ajm-konto .woocommerce :is(.woocommerce-form-login__submit, .woocommerce-Button, .woocommerce-button, button.button)):hover { background-color: var(--lapis-2); color: var(--auf-akzent); }
  }
}
@media not ((hover: hover) and (pointer: fine)) {
  :root[data-theme='dark'] :is(.elementor .ajm-produkt-kauf .single_add_to_cart_button, .elementor .ajm-warenkorb .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse #payment #place_order, .elementor .ajm-kasse .woocommerce-button,
  .elementor .ajm-konto .woocommerce :is(.woocommerce-form-login__submit, .woocommerce-Button, .woocommerce-button, button.button)):hover { background-color: var(--blau); color: var(--auf-akzent); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) :is(.elementor .ajm-produkt-kauf .single_add_to_cart_button, .elementor .ajm-warenkorb .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse #payment #place_order, .elementor .ajm-kasse .woocommerce-button,
  .elementor .ajm-konto .woocommerce :is(.woocommerce-form-login__submit, .woocommerce-Button, .woocommerce-button, button.button)):hover { background-color: var(--blau); color: var(--auf-akzent); }
  }
}


/* ---------- Bewegung reduziert ---------- */
/* Nur Bewegung zurücknehmen, wie die HTML-Fassung: Chips, Aufklapper-Pfeil und die Teile von Warenkorb und Kasse ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .elementor .elementor-widget-taxonomy-filter .e-filter-item,
  .elementor .ajm-angabe-kopf::after,
  .elementor .ajm-warenkorb table.shop_table.cart a.remove,
  .elementor .wk-leeren,
  .elementor .ajm-kasse .woocommerce .select2-container--default .select2-selection--single,
  .elementor .ajm-warenkorb .woocommerce .wc-proceed-to-checkout .checkout-button,
  .elementor .ajm-kasse .woocommerce #payment #place_order,
  .elementor :is(.ajm-kasse, .ajm-konto) .woocommerce .woocommerce-form-login__submit { transition: none; }
  /* Kaufknopf der Produktseite: Beschriftungen nur überblenden wie .kk-text > span in KorbKnopf.astro (opacity 120ms). */
  .elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-text > span { transition: opacity 120ms ease; transform: none; filter: none; }
  .elementor .ajm-produkt-kauf .single_add_to_cart_button.ajm-hinzugefuegt .ajm-kk-a,
  .elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-b { transform: none; filter: none; }
}
/* Kurze Übergänge der Produktseite und der Karten bei reduzierter Bewegung wie in der HTML-Fassung (Abnahme Runde 4, design2-r4-2).
   WARUM: Elementors Frontend-CSS setzt bei prefers-reduced-motion seitenweit „html * { transition-duration: 0s !important;
   transition-delay: 0s !important }“ (wie in kopf-fuss.css und elementor-rest.css, Block „prefers-reduced-motion“). dist nimmt auf der
   Produktseite nur Bewegung zurück ([slug].astro: Bühne .ansicht nur noch opacity 200ms, Aufklapper-Pfeil ohne Übergang;
   KorbKnopf.astro: Beschriftungen opacity 120ms, .kk-rund ohne Übergang; ProduktKarte.astro: Foto opacity 200ms) und behält die
   Farb- und Deckkraftübergänge von .btn (global.css), .pille span, .menge button und .daumen-knopf (160/180 ms). Diese Regeln
   stellen genau die Dauern der Regeln weiter oben wieder her (je Eigenschaft in derselben Reihenfolge); !important und die Rangfolge
   überstimmen Elementors (0,0,1), :root:not(.kein-uebergang) lässt „.kein-uebergang * { transition: none !important }“ (global.css,
   Wechsel des Farbschemas) den Vortritt. Bis Runde 3 standen diese Teile hier auf „transition: none“, und die Bühne sprang
   (1 ms) – die HTML-Fassung überblendet. Die Bühne: Der Schieber von WooCommerce überblendet per CSS-Übergang (Modus fade,
   inc/65-shop.php) und schließt einen Wechsel erst mit transitionend ab – ganz ohne Übergang blieb er „animating“ (gemessen
   28.09.2026); mit 200 ms kommt das Ereignis. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.kein-uebergang) .elementor .woocommerce-product-gallery .woocommerce-product-gallery__image { transition-duration: 200ms !important; transition-delay: 0s !important; }
  /* Kaufknopf: Pro schreibt mit dem Regler „Übergangsdauer“ des Widgets „transition: all 0.2s“ (c0a8e02, 0,4,1) über die Liste von
     .btn; bei reduzierter Bewegung hier die vollständige Liste von .btn wie in der HTML-Fassung (global.css: transform 160ms
     --ease-out, background-color/border-color/color/box-shadow 180ms ease – dort bei reduzierter Bewegung unverändert). */
  :root:not(.kein-uebergang) .elementor .ajm-produkt-kauf .single_add_to_cart_button {
    transition-property: transform, background-color, border-color, color, box-shadow !important;
    transition-timing-function: var(--ease-out), ease, ease, ease, ease !important;
    transition-duration: 160ms, 180ms, 180ms, 180ms, 180ms !important; transition-delay: 0s, 0s, 0s, 0s, 0s !important;
  }
  :root:not(.kein-uebergang) .elementor .ajm-produkt-kauf .ajm-pille span { transition-duration: 160ms, 180ms, 180ms, 180ms !important; transition-delay: 0s, 0s, 0s, 0s !important; }
  :root:not(.kein-uebergang) .elementor .elementor-widget.ajm-produkt-kauf .ajm-menge-feld :is(button.ajm-menge-minus, button.ajm-menge-plus) { transition-duration: 160ms, 180ms, 180ms !important; transition-delay: 0s, 0s, 0s !important; }
  :root:not(.kein-uebergang) .elementor .ajm-produkt-buehne .flex-control-thumbs li { transition-duration: 160ms, 180ms !important; transition-delay: 0s, 0s !important; }
  :root:not(.kein-uebergang) .elementor .ajm-produkt-kauf .single_add_to_cart_button .ajm-kk-text > span,
  :root:not(.kein-uebergang) .elementor .ajm-karte-kauf .elementor-button :is(.ajm-kk-a, .ajm-kk-b) { transition-duration: 120ms !important; transition-delay: 0s !important; }
  :root:not(.kein-uebergang) .elementor .ajm-karte :is(.ajm-karte-foto, .ajm-karte-foto img) { transition-duration: 200ms !important; transition-delay: 0s !important; }
}