/*
  MENÜ-WARENKORB IM KOPF (Theme 3.3.0). Lädt überall, wo das Theme die Elementor-Vorlage mit der Markierungsklasse
  ajm-kopf-warenkorb in den Kopf setzt (inc/65-shop.php), und in der Editor-Vorschau; steht hinter den Stylesheets von
  Elementor. Maßstab: .kopf-icon/.korb-zahl (Header.astro, kopf-fuss.css) und die Schublade CartDrawer.astro – Werte verbatim.

  NATIV ZUERST: Farben des Umschalters (Text und Symbol „currentColor“, Hintergrund „transparent“), Symbolgröße, Radius,
  Farben der Zahl, Hintergrund und Innenabstand der Seitenleiste, Farben und Schriften von Produktname, Preis, Zwischensumme,
  Knöpfen, Trennlinien, Schließen- und Entfernen-Symbol stellt der Kunde im Widget „Menü Warenkorb“ ein (Namen der Einstellungen:
  docs/ELEMENTOR-SHOP.md). Hinweis und „Zum Shop“ sind ein Text- und ein Schaltflächen-Widget derselben Vorlage (Klassen
  ajm-korb-hinweis, ajm-korb-zum-shop), die shop.js in die Seitenleiste setzt. Hier steht nur, was das Widget NICHT kann – jeder
  Block nennt den Grund („WARUM NICHT NATIV“).
  Rangfolge: Pro schreibt (0,2,0) bis (0,3,0); jede Regel hier hat mindestens (0,3,0) und steht später.
  Symbole: ../icons/ (Phosphor, Masken).
*/

/* ---------- Umschalter im Kopf wie .kopf-icon ---------- */
/* WARUM NICHT NATIV: Der Kopf ist Theme-Code; der Umschalter muss genau in der 44-px-Fläche der übrigen Kopf-Symbole sitzen
   (Breite/Höhe und Zentrieren hat das Widget nicht als Regler). Überfahren nur für Zeigergeräte (Medienabfrage), Druckgefühl
   (:active) und Übergänge sind Zustände und Bewegung. Das Phosphor-Symbol „shopping-bag“ ist eine Maske: Die Symbolauswahl
   des Widgets kennt nur die eigenen Symbole oder eine SVG aus der Mediathek, und dort liegt keine. */
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button {
  position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; gap: 0; cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
/* Farbe des Kopfes übernehmen wie .kopf-icon (color: inherit – über dem Hero weiß, sonst Text). Pro bietet die Textfarbe des
   Umschalters nur bei eingeblendeter Zwischensumme an (Bedingung show_subtotal) und setzt sonst fest #69727d; das Symbol
   („Symbolfarbe“ = currentColor, im Widget eingestellt) folgt dieser Farbe. Gemessen ohne diese Regel: rgb(105, 114, 125). */
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button,
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button:hover { color: inherit; }
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
}
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button-icon { position: static; display: grid; place-items: center; }
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button-icon svg,
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button-icon i { display: none; }
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button-icon::before {
  content: ''; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url(../icons/shopping-bag.svg) center / contain no-repeat; mask: url(../icons/shopping-bag.svg) center / contain no-repeat;
}
/* Die Maske von der linken oberen Ecke aus und auf die volle Fläche (Symbol und Fläche sind quadratisch): Mit „center / contain“
   zeichnet Chrome das Symbol an dieser Stelle (Kasten 23,19 px bei y 36,41) 1 px tiefer als das Inline-SVG der HTML-Fassung
   im selben Kasten (Schwerpunkt y 47,75 statt 46,75, gemessen bei 1440 und 375); mit „0 0 / 100% 100%“ deckungsgleich. */
.kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button-icon::before { -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Zahl wie .korb-zahl: Pro setzt die Blase an das Symbol (font-size 10px, top/right in em); die Maße der HTML-Fassung (1.2rem,
   Schrift 700 0.6875rem Archivo, oben 0.1rem, rechts 0 am 44-px-Knopf) hat das Widget nicht als Regler – nur Farben und Abstand. */
.kopf .ajm-kopf-warenkorb.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
  top: 0.1rem; right: 0; inset-inline-end: 0; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem;
  display: grid; place-items: center; border-radius: var(--r-pille);
  font: 700 0.6875rem / 1 var(--font-display);
}
.kopf .ajm-kopf-warenkorb.elementor-menu-cart--empty-indicator-hide .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter='0'] { display: none; }

/* ---------- Seitenleiste wie CartDrawer.astro ---------- */
/* WARUM NICHT NATIV: Breite der Seitenleiste (Pro: feste 350 px, kein Regler), zweilagiger Schatten --schatten-hoch (das
   Schatten-Feld des Widgets kennt eine Lage und keine Variable), Schleier mit Unschärfe hinter der Leiste (wie dialog::backdrop
   in global.css; Pro: festes rgba ohne Regler), Bewegung (Ein-/Ausfahren 420/260 ms mit --ease-drawer) und
   prefers-reduced-motion. */
.ajm-kopf-warenkorb .elementor-menu-cart__main {
  width: min(100vw, 27rem); box-shadow: var(--schatten-hoch);
  transition: transform 260ms var(--ease-drawer), opacity 260ms ease;
}
.ajm-kopf-warenkorb.elementor-menu-cart--shown .elementor-menu-cart__main { transition-duration: 420ms; }
.ajm-kopf-warenkorb.elementor-menu-cart--shown .elementor-menu-cart__container {
  background-color: rgb(4 16 27 / 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
  .ajm-kopf-warenkorb .elementor-menu-cart__main,
  .ajm-kopf-warenkorb .elementor-menu-cart__container { transition: none; }
}
/* Zwischensumme und Knöpfe immer im Bild wie .korb-koerper (grid-template-rows: 1fr auto, min-height: 0 – nur .korb-liste scrollt).
   Pro gibt dem Inhalt der Leiste die volle Höhe (.widget_shopping_cart_content: height 100 %) und begrenzt die Postenliste fest auf
   calc(100vh - 250px). Mit Titel und Hinweis, die shop.js zusätzlich oben in die Leiste setzt, reichten die 250 px nicht: ab drei
   Posten (375 × 667) bzw. fünf Posten (1440 × 900) standen „Zur Kasse“ und „Warenkorb ansehen“ unter dem Bildschirmrand, und weder
   Mausrad noch Wischen brachten sie ins Bild – die Leiste schneidet ab, nur die Liste scrollt (Abnahme Runde 4, funktion-r4-1).
   Jetzt nimmt der Inhalt den Platz unter Titel und Hinweis, die Liste den Rest (sie schrumpft und scrollt), Summe und Knöpfe
   behalten ihre Höhe. Reicht die Höhe selbst dafür nicht (sehr niedrige Fenster), scrollt die ganze Leiste wie das <dialog> der
   HTML-Fassung (overflow: auto). WARUM NICHT NATIV: Höhe und Scrollbereich der Postenliste hat das Widget nicht als Regler (Pro:
   feste max-height), und Titel und Hinweis stehen nur per Skript in der Leiste. */
.ajm-kopf-warenkorb .elementor-menu-cart__main .widget_shopping_cart_content { flex: 1 1 auto; height: auto; min-height: 0; }
.ajm-kopf-warenkorb .elementor-menu-cart__main .elementor-menu-cart__products { flex: 0 1 auto; min-height: 0; max-height: none; }
.ajm-kopf-warenkorb .elementor-menu-cart__main :is(.elementor-menu-cart__subtotal, .elementor-menu-cart__footer-buttons) { flex: none; }
.ajm-kopf-warenkorb.elementor-menu-cart--shown .elementor-menu-cart__main { overflow-y: auto; }

/* Kopf der Leiste: Titel und runder Schließen-Knopf wie .korb-kopf/.korb-zu. Der Titel ist das Überschrift-Widget der Vorlage
   (Klasse ajm-korb-titel; Text, Schrift, Farbe und Außenabstand stehen im Widget), shop.js setzt es an den Anfang der Leiste.
   WARUM NICHT NATIV: Die Titelzeile steht mittig zu Pros Schließen-Knopf (ein div im Innenmarkup, absolut oben rechts, 2,75 rem
   hoch) – das Widget kennt dieses Innenmarkup nicht; der Schließen-Knopf ist bei Pro ein div, dessen Kreuz aus zwei
   Pseudo-Elementen besteht (Fläche, Kreis und das Phosphor-Kreuz als Maske erreicht kein Regler); :active ist ein Zustand.
   Größe und Farben des Kreuzes kommen aus den Reglern des Widgets („Warenkorb schließen“: Symbolgröße, Farbe, Farbe beim
   Überfahren; in 1107 1.25rem und var(--text)). Pro schreibt sie nur als Variablen an die Widget-Hülle
   (--cart-close-icon-size, --cart-close-button-color, --cart-close-button-hover-color) – die Regeln hier lesen sie; die Werte
   hinter dem Komma gelten nur, wenn ein Regler leer ist (Abnahme Runde 3, funktion-r3-7: vorher fest, die Regler blieben ohne Wirkung). */
.ajm-kopf-warenkorb .ajm-korb-titel { display: flex; align-items: center; min-height: 2.75rem; }
/* Rückfall ohne Überschrift-Widget in der Vorlage: Titel „Warenkorb“ aus shop.js mit dem Aussehen von .korb-kopf h2. */
.ajm-kopf-warenkorb h2.ajm-korb-titel { margin: 0 3.5rem 1rem 0; font-size: var(--fs-xl); color: var(--text); }
.ajm-kopf-warenkorb .elementor-menu-cart__close-button {
  position: absolute; top: var(--ajm-korb-rand, 1.25rem); right: var(--ajm-korb-rand, 1.25rem); margin: 0;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--flaeche-2); color: var(--cart-close-button-color, var(--text)); font-size: var(--cart-close-icon-size, 1.25rem);
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ajm-kopf-warenkorb .elementor-menu-cart__close-button:hover { color: var(--cart-close-button-hover-color, var(--cart-close-button-color, var(--text))); }
}
.ajm-kopf-warenkorb .elementor-menu-cart__close-button:active { transform: scale(0.94); }
.ajm-kopf-warenkorb .elementor-menu-cart__close-button::after { display: none; }
.ajm-kopf-warenkorb .elementor-menu-cart__close-button::before {
  position: static; inset: auto; width: 1em; height: 1em; margin: 0; border-radius: 0; transform: none; background: currentColor;
  -webkit-mask: url(../icons/x.svg) center / contain no-repeat; mask: url(../icons/x.svg) center / contain no-repeat;
}

/* Posten wie .korb-posten: Bild | Name | Entfernen, darunter Menge und Preis.
   WARUM NICHT NATIV: Aufbau und Größe der Zeilen (Pro: Bild 28 % breit, Entfernen-Kreis absolut unten rechts) sowie Größe und
   Tönung des Vorschaubilds (5:6-Kachel in der Produktfarbe --pf, die das Theme ans Bild schreibt) hat das Widget nicht als
   Regler; Trennlinien, Farben, Schriften und Abstand der Posten schon (divider_*, product_*), die Größe des Entfernen-Kreises
   auch (remove_item_button_size, 44 px). Pro zeichnet den Kreisrand in der Farbe des Kreuzes – die HTML-Fassung hat keinen Rand. */
.ajm-kopf-warenkorb .elementor-menu-cart__product {
  grid-template-columns: 3rem 1fr auto; grid-template-rows: auto auto;
  grid-template-areas: 'farbe info weg' 'farbe menge preis';
  gap: 0.35rem 0.85rem; align-items: center; padding-inline-end: 0;
}
/* Pro lässt dem ersten Posten den Innenabstand oben weg (:not(:first-of-type)); in der HTML-Fassung hat jede Zeile 1rem oben
   und unten. Der Wert folgt dem Regler „Abstand“ der Trennlinien (--product-divider-gap). */
.ajm-kopf-warenkorb .elementor-menu-cart__product:first-of-type { padding-top: var(--product-divider-gap, 1rem); }
/* Trennlinie auch unter dem letzten Posten wie .korb-posten (CartDrawer.astro: jede Zeile border-bottom 1px var(--linie), auch die
   letzte). WARUM NICHT NATIV: Pro nimmt sie dem letzten Posten fest weg (custom-pro-widget-woocommerce-menu-cart.min.css:
   .elementor-menu-cart__product:last-child { border: none }) – dafür gibt es keinen Regler (Schlussabnahme Runde 1, design-r1-1). Breite, Art
   und Farbe bleiben die der Regler „Trennlinie“ des Widgets (Pro schreibt sie als --divider-width/-style/-color an die Hülle). */
.ajm-kopf-warenkorb .elementor-menu-cart__product:last-child {
  border-bottom: var(--divider-width, 1px) var(--divider-style, solid) var(--divider-color, #d5d8dc);
}
.ajm-kopf-warenkorb .elementor-menu-cart__product-image { grid-area: farbe; }
/* Kachel ganz in der Produktfarbe wie .korb-farbe (span.ajm-korb-bild mit --pf, inc/65-shop.php); das Bild bleibt für den Namen des
   Links im Dokument, wird aber nicht gezeichnet – die Seitenleiste der HTML-Fassung zeigt nur die Farbe. */
.ajm-kopf-warenkorb .elementor-menu-cart__product-image .ajm-korb-bild {
  display: block; width: 3rem; height: 3.6rem; overflow: hidden; border-radius: var(--r-feld); background: var(--pf, var(--blau));
}
.ajm-kopf-warenkorb .elementor-menu-cart__product-image .ajm-korb-bild img { display: block; width: 100%; height: 100%; opacity: 0; }
/* Name, darunter klein die Größe (small.ajm-korb-zusatz) wie .korb-info strong/small */
.ajm-kopf-warenkorb .elementor-menu-cart__product-name { grid-area: info; display: grid; padding-inline-start: 0; line-height: 1.25; }
/* Größe wie small in .korb-info (smaller von 17 px = 17/1.2): Pro setzt die Namenszelle auf 14 px, nur der Link hat die
   Schriftgröße des Reglers – „smaller“ ergäbe hier 11,7 px. */
.ajm-kopf-warenkorb .elementor-menu-cart__product-name .ajm-korb-zusatz { color: var(--text-2); font-size: calc(var(--fs-m) / 1.2); font-weight: 400; }
/* Preis mittig zur Mengenwahl wie .korb-posten (align-items: center); Pro stellt die Zelle ans untere Ende (align-self: end, kein
   Regler) – gemessen 7,8 px zu tief. */
.ajm-kopf-warenkorb .elementor-menu-cart__product-price { grid-area: preis; justify-self: end; align-self: center; padding-inline-start: 0; font-variant-numeric: tabular-nums; }
/* Zeilensumme statt „2 × 24,90 €“, sobald shop.js die Mengenwahl gebaut hat (ohne Skript bleibt die Ausgabe von Pro) */
.ajm-kopf-warenkorb .elementor-menu-cart__product .ajm-zeilensumme { display: none; }
.ajm-kopf-warenkorb .elementor-menu-cart__product.ajm-mit-menge .quantity { display: none; }
.ajm-kopf-warenkorb .elementor-menu-cart__product.ajm-mit-menge .ajm-zeilensumme { display: inline; }
/* Mengenwahl wie .korb-menge: runde Knöpfe mit Rand, dazwischen die Zahl. WARUM NICHT NATIV: Die Seitenleiste von Pro hat keine
   Mengenwahl; shop.js baut sie (Store API von WooCommerce). */
.ajm-kopf-warenkorb .ajm-korb-menge { grid-area: menge; display: inline-flex; align-items: center; gap: 0.25rem; }
.ajm-kopf-warenkorb .ajm-korb-menge button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--linie-stark); background: none; color: var(--text); cursor: pointer;
  /* Schrift wie .korb-menge button: die HTML-Fassung setzt keine, also die Standardschrift des Browsers für Knöpfe (Arial 400) */
  font: revert; font-size: 1.1rem;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}
.ajm-kopf-warenkorb .ajm-korb-menge button:active:not(:disabled, [aria-disabled='true']) { transform: scale(0.94); }
/* Während der Aktualisierung gesperrt: aria-disabled (shop.js) statt disabled – ein deaktivierter Knopf verlöre den Tastaturfokus. */
.ajm-kopf-warenkorb .ajm-korb-menge button:is(:disabled, [aria-disabled='true']) { opacity: 0.55; cursor: progress; }
.ajm-kopf-warenkorb .ajm-korb-menge output { min-width: 1.75rem; text-align: center; font-weight: 650; }
/* Schriftgröße und Zeilenhöhe wie .korb-menge output (erbt dort die Grundschrift: var(--fs-m) / 1.6). Pro setzt die Zeile des
   Postens auf 14 px; die Zahl erbte sie (gemessen 14 px, 2,4 px zu tief). Die Mengenwahl baut shop.js – kein Regler erreicht sie. */
.ajm-kopf-warenkorb .ajm-korb-menge output { font-size: var(--fs-m); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .ajm-kopf-warenkorb .ajm-korb-menge button:not(:disabled, [aria-disabled='true']):hover { background: var(--flaeche-2); }
}
/* Plus bei erreichter Höchstmenge (shop.js: aria-disabled mit data-ajm-grenze, Grenze aus inc/65-shop.php) wie das gesperrte Plus der
   Warenkorbseite (shop.css) und .menge button:disabled der HTML-Fassung: blass, Zeiger „not-allowed“ (Schlussabnahme Runde 1, funktion-r1-2).
   WARUM NICHT NATIV: ein Zustand an der Mengenwahl, die shop.js baut – kein Regler erreicht sie. */
.ajm-kopf-warenkorb .ajm-korb-menge button[data-ajm-grenze][aria-disabled='true'] { opacity: 0.35; cursor: not-allowed; }
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove,
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove:hover {
  grid-area: weg; position: relative; inset: auto; justify-self: start;
  border-color: transparent; border-radius: 50%; transition: transform 160ms var(--ease-out), background-color 180ms ease;
}
/* Textfarbe des Knopfs wie das Kreuz (Regler „Farbe“ des Entfernen-Symbols, --remove-item-button-color): Pro setzt sie fest auf
   #69727d, ohne Regler. Das Kreuz selbst zeichnet Pro schon in der Farbe des Reglers; so folgen auch Umriss und Symbole, die
   currentColor nehmen (z. B. im Modus erzwungener Farben), dem Regler. */
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove { color: var(--remove-item-button-color, var(--text-2)); }
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .ajm-kopf-warenkorb .elementor-menu-cart__product-remove:hover { background: var(--flaeche-2); color: var(--remove-item-button-hover-color, var(--fehler)); }
}
/* Fokusring am Kreis wie :focus-visible an .korb-weg (global.css: 3 px var(--fokus), Abstand 3 px, rund). WARUM NICHT NATIV: ein
   Zustand (:focus-visible), und Pro legt den fokussierbaren Link (a.remove_from_cart_button, 42 px) unsichtbar über das Kreuz
   (opacity 0, der Kreis schneidet mit overflow: hidden ab) – sein Umriss wird berechnet, aber nie gezeichnet (Abnahme Runde 3,
   gemessen: Fokus änderte den Ausschnitt um 0,0 %, dist 10,7 %). Der Ring gehört deshalb an den 44-px-Kreis, der den Link trägt. */
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove:has(> a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Zwischensumme und Knöpfe wie .korb-fuss: Summe links/rechts, „Zur Kasse“ als erster, voller Knopf, „Warenkorb ansehen“ als
   Textlink mit Pfeil darunter. WARUM NICHT NATIV: Reihenfolge der Knöpfe (Pro: erst „Warenkorb“, dann „Kasse“; kein Regler),
   Verteilung Wort/Betrag, Pfeil als Maske; :active. Farben, Schrift, Radius, Innenabstand und Anordnung untereinander
   (buttons_layout) stellt das Widget ein. */
.ajm-kopf-warenkorb .elementor-menu-cart__subtotal { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
/* Zwischensumme und Knöpfe stehen unten in der Leiste wie .korb-koerper (grid-template-rows: 1fr auto). Pro kennt nur „Vertikale
   Position“ der Knöpfe – die Zwischensumme bliebe oben unter den Posten. Mindesthöhen wie .btn (3rem) und .textlink (2.75rem):
   kein Regler im Widget (gemessen ohne: 37,4 bzw. 18 px hoch). */
.ajm-kopf-warenkorb .elementor-menu-cart__main .elementor-menu-cart__subtotal { margin-top: auto; padding-block: 1.1rem 0; }
/* Gewichte wie .korb-summe (Wort normal, Betrag fett): Pro setzt das Wort als <strong> und den Betrag normal; der Regler
   „Zwischensumme“ gilt für beide gleich. */
.ajm-kopf-warenkorb .elementor-menu-cart__subtotal strong { font-weight: 400; }
.ajm-kopf-warenkorb .elementor-menu-cart__subtotal .amount { font-weight: 700; }
/* Das Kreuz zum Entfernen als Zeichen „ד wie .korb-weg: ein Knopf ohne eigene Schrift, also die Standardschrift des Browsers
   für Knöpfe (gemessen in der HTML-Fassung: Arial 400, 1.1rem, Zeilenhöhe normal), mittig im 44-px-Kreis. Pro zeichnet das
   Kreuz als zwei gedrehte Linien (::before/::after, Hintergrund in der Farbe des Reglers) – ohne Regler für die Form. Die
   Farbe bleibt die des Reglers („Farbe“/„Farbe beim Überfahren“ des Entfernen-Symbols, --remove-item-button-*). */
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove::after { display: none; }
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove::before,
.ajm-kopf-warenkorb .elementor-menu-cart__product-remove:hover::before {
  content: '×'; inset: 0; width: auto; height: auto; margin: 0; transform: none; background: none; color: inherit;
  display: grid; place-items: center; font: 400 1.1rem / normal Arial, sans-serif;
}
/* Abstände wie .korb-fuss (padding-top 1.1rem, gap 0.85rem): Pro rechnet Zwischensumme und Knöpfe mit dem Abstand der Posten
   („Abstand“ der Trennlinien, --product-divider-gap) – ein eigener Regler fehlt. */
.ajm-kopf-warenkorb .elementor-menu-cart__main .elementor-menu-cart__footer-buttons { padding-top: 0.85rem; }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--checkout { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--view-cart { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--checkout { order: -1; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--checkout:active { transform: scale(0.97); }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--view-cart { justify-self: center; }
/* Innenabstand der Knöpfe auch unter 768 px aus den Reglern (view_cart_button_padding, view_checkout_button_padding): Pro
   überschreibt ihn dort fest mit 10 px links und rechts (Medienabfrage ohne Regler) – „Warenkorb ansehen“ stand dadurch 20 px
   breiter und 10 px versetzt (gemessen bei 375: 183 statt 163 px, x 96 statt 106). */
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button.elementor-button--view-cart { padding: var(--view-cart-button-padding, 15px); }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button.elementor-button--checkout { padding: var(--checkout-button-padding, 15px); }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--view-cart .elementor-button-text { display: inline-flex; align-items: center; gap: 0.4rem; }
.ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--view-cart .elementor-button-text::after {
  content: ''; width: 1.1em; height: 1.1em; background: currentColor; transition: transform 200ms var(--ease-out);
  -webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat; mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover .elementor-button-text::after { transform: translateX(4px); }
}

/* Leerer Warenkorb wie .korb-leer: Symbol über dem Satz, darunter „Zum Shop“ (Schaltflächen-Widget der Vorlage, von shop.js
   hineingesetzt), alles mittig am unteren Rand der Leiste und ohne den unteren Innenabstand, den die Leiste für den Fuß hat –
   wie in CartDrawer.astro, wo der Leerzustand in der letzten Zeile des Körpers steht. WARUM NICHT NATIV: Symbol als Maske
   (Pseudo-Element), Anordnung in der Leiste von Pro; Farbe, Schrift und Ausrichtung des Satzes stellt das Widget ein
   (empty_message_*), Farben und Schrift von „Zum Shop“ das Schaltflächen-Widget. */
.ajm-kopf-warenkorb .elementor-menu-cart__main:has(.woocommerce-mini-cart__empty-message) { padding-bottom: 0; }
.ajm-kopf-warenkorb .widget_shopping_cart_content:has(> .woocommerce-mini-cart__empty-message) { display: flex; flex-direction: column; flex: 1 1 auto; }
.ajm-kopf-warenkorb .woocommerce-mini-cart__empty-message { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-block: auto 0; padding-block: 0; color: var(--text-2); }
.ajm-kopf-warenkorb .woocommerce-mini-cart__empty-message .ajm-korb-zum-shop { margin: 0; }
.ajm-kopf-warenkorb .woocommerce-mini-cart__empty-message::before {
  content: ''; width: 2.5rem; height: 2.5rem; background: currentColor;
  -webkit-mask: url(../icons/shopping-bag.svg) center / contain no-repeat; mask: url(../icons/shopping-bag.svg) center / contain no-repeat;
}

/* Titel, Hinweis und „Zum Shop“ stehen in der Vorlage neben dem Widget (Überschrift-, Text- und Schaltflächen-Widget, Klassen
   ajm-korb-titel, ajm-korb-hinweis und ajm-korb-zum-shop, im Editor bearbeitbar); shop.js setzt sie in die Seitenleiste. Bis
   dahin – und außerhalb des Editors – sind sie verborgen, sonst stünden sie im Kopf neben dem Korb-Symbol. WARUM NICHT NATIV:
   Die Seitenleiste ist die Ausgabe von Pro, ein Element lässt sich in Elementor nicht hineinlegen. */
body:not(.elementor-editor-active) :is(.ajm-korb-titel, .ajm-korb-hinweis, .ajm-korb-zum-shop):not(.elementor-menu-cart__main *) { display: none; }
/* Bedientexte des Shops (Container ajm-shop-texte in derselben Vorlage: je Text ein Überschrift-Widget mit der Klasse ajm-text-<schlüssel>,
   im Editor bearbeitbar; shop.js und inc/65-shop.php lesen sie – Schlussabnahme Runde 1, funktion-r1-10). Sie werden nie selbst gezeigt. Im
   Container ist „Erweitert → Responsive → Ausblenden“ für alle Geräte gesetzt; diese Regel hält ihn auch dann verborgen, wenn ein neuer
   Umbruchpunkt dazukommt. WARUM NICHT NATIV: Elementor kennt kein „nur im Editor sichtbar“. */
body:not(.elementor-editor-active) .ajm-shop-texte { display: none; }
/* Hinweis wie .hinweis: Info-Symbol als Maske vor dem Text. Fläche, Innenabstand, Radius, Schrift, Farbe und Abstand darunter
   stellt das Text-Widget ein. */
.ajm-kopf-warenkorb .elementor-menu-cart__main .ajm-korb-hinweis { display: flex; gap: 0.75rem; align-items: flex-start; }
.ajm-kopf-warenkorb .elementor-menu-cart__main .ajm-korb-hinweis::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;
}
.ajm-kopf-warenkorb .elementor-menu-cart__main .ajm-korb-hinweis p { margin: 0; }
/* „Zum Shop“ wie .btn: Mindesthöhe 3rem (kein Regler im Schaltflächen-Widget), Druckgefühl */
.ajm-kopf-warenkorb .ajm-korb-zum-shop .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease; }
.ajm-kopf-warenkorb .ajm-korb-zum-shop .elementor-button:active { transform: scale(0.97); }
/* Fokus ohne Überfahren zeigt wie .btn.btn-linie der HTML-Fassung nur den Ring (Abnahme Runde 4, design1-r4-1). Elementor schreibt
   die Einstellungen „… beim Überfahren“ des Schaltflächen-Widgets für „:hover, :focus“ (post-1107.css, 0,5,0) – mit der Tastatur
   stand „Zum Shop“ deshalb mit der Fläche und dem Rand des Überfahrens da (gemessen hell rgb(230, 240, 247) / Rand rgb(10, 26, 43)
   statt durchsichtig / rgb(169, 188, 203)). dist färbt nur beim Überfahren und nur auf Zeigergeräten (global.css .btn-linie:hover).
   Hier deshalb für Fokus ohne Überfahren und auf Geräten ohne Zeiger die Grundwerte des Widgets (Hintergrund transparent,
   Rahmenfarbe var(--linie-stark); ändert sie jemand im Editor, hier mitziehen) – wie .ajm-karte-kauf in shop.css. WARUM NICHT
   NATIV: Das Widget hat für :hover und :focus nur einen Regler und keine Medienabfrage für Zeigergeräte. .elementor-widget hebt
   die Regel über die des Widgets (dieses Stylesheet lädt nach post-1107.css). */
.ajm-kopf-warenkorb .elementor-widget.ajm-korb-zum-shop .elementor-button:focus:not(:hover) { background-color: transparent; border-color: var(--linie-stark); }
@media not ((hover: hover) and (pointer: fine)) {
  .ajm-kopf-warenkorb .elementor-widget.ajm-korb-zum-shop .elementor-button:is(:hover, :focus) { background-color: transparent; border-color: var(--linie-stark); }
}

/* ---------- Dunkles Schema: „Zur Kasse“ wie .btn-tief ---------- */
/* WARUM NICHT NATIV: Die HTML-Fassung schaltet .btn-tief im dunklen Schema auf --blau mit --auf-akzent; die Farbregler des Widgets
   kennen weder :root[data-theme] noch prefers-color-scheme. Überfahren wie elementor-rest.css: --lapis-2 nur für Zeigergeräte. */
:root[data-theme='dark'] .elementor-widget.elementor-element.ajm-kopf-warenkorb {
  --checkout-button-background-color: var(--blau); --checkout-button-text-color: var(--auf-akzent);
  --checkout-button-hover-text-color: var(--auf-akzent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .elementor-widget.elementor-element.ajm-kopf-warenkorb {
    --checkout-button-background-color: var(--blau); --checkout-button-text-color: var(--auf-akzent);
    --checkout-button-hover-text-color: var(--auf-akzent);
  }
}
@media not ((hover: hover) and (pointer: fine)) {
  :root[data-theme='dark'] .elementor-widget.elementor-element.ajm-kopf-warenkorb { --checkout-button-hover-background-color: var(--blau); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .elementor-widget.elementor-element.ajm-kopf-warenkorb { --checkout-button-hover-background-color: var(--blau); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ajm-kopf-warenkorb .ajm-korb-menge button,
  .ajm-kopf-warenkorb .ajm-korb-zum-shop .elementor-button,
  .kopf .ajm-kopf-warenkorb .elementor-menu-cart__toggle .elementor-button,
  .ajm-kopf-warenkorb .elementor-menu-cart__close-button,
  .ajm-kopf-warenkorb .elementor-menu-cart__product-remove,
  .ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button,
  .ajm-kopf-warenkorb .elementor-menu-cart__footer-buttons .elementor-button-text::after { transition: none; }
}