/* X11-Launch-Aktion (Marc 28.10., vorher Black Weeks): Hinweis im Warenkorb, Platzhalter-Hinweise und feste Leiste unten.
   Gemeinsam für Shop und Konfigurator; die Leiste baut aktion-leiste.js. Radius 2px, Schrift erbt (Mulish). */

/* Warenkorbzeile über der Gesamtsumme */
.shop-aktion td { padding-top: 18px; text-align: left !important; }
.shop-aktion__text { display: block; font-size: 17px; line-height: 1.45; font-weight: 400; margin-bottom: 26px; text-align: left; }
.shop-aktion__text strong { font-weight: 800; }

/* Stufenbalken (Warenkorb und Leiste) */
.shop-aktion__balken { position: relative; display: block; height: 10px; border-radius: 2px; background: var(--line, #e5e5ea); margin: 0 14px 34px; }
.shop-aktion__fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent, #1495d4); transition: width .35s ease; }
.shop-aktion__marke { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--line-strong, #c7c7cc); transform: translateX(-1px); }
.shop-aktion__marke b { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--text-dim, #6e6e73); }
.shop-aktion__marke.is-erreicht { background: var(--accent, #1495d4); }
.shop-aktion__marke.is-erreicht b { color: var(--text, #1d1d1f); }

/* Platzhalter (Leiste über dem Warenkorb, Shop-Übersicht, Produktseite) und Mini-Warenkorb */
.shop-aktion-hinweis { margin: 10px 0 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--accent, #1495d4); }
.spg-mini__aktion { margin: 10px 0 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--accent, #1495d4); }
.shop-aktion-hinweis strong, .spg-mini__aktion strong { font-weight: 800; }
.shop-aktion__text strong, .shop-aktion-hinweis strong, .spg-mini__aktion strong, .spg-aleiste__text strong { white-space: nowrap; }

/* Schmale Spalte (Warenkorb-Summe, Handy): Beschriftungen abwechselnd über und unter dem Balken, damit sie lesbar groß bleiben */
.shop-aktion__box { container-type: inline-size; }
@container (max-width: 460px) {
  .shop-aktion .shop-aktion__balken { margin-top: 30px; }
  .shop-aktion .shop-aktion__marke:nth-child(odd) b { top: auto; bottom: 25px; }
}
.spg-aleiste__kurz { display: none; }
.spg-aleiste__erreicht[hidden] { display: inline-block; visibility: hidden; } /* Marc 02.11.: Platz bleibt reserviert (Desktop gleiche Höhe, Handy Satz fest); unsichtbar, also kein blauer Strich */
.spg-aleiste__erreicht[hidden]::before { content: "\00a0"; } /* leeres Abzeichen so hoch wie ein volles */
/* Ohne Rabatt graues Abzeichen gleicher Größe (Marc 02.11.), mit Rabatt blau mit Betrag; Text aus data-leer-* (aktion.php/-leiste.js), Kontrast 5,1:1 */
.spg-aleiste__erreicht[hidden][data-leer-lang] { visibility: visible; background: #3a3a3d; color: #aeaeb2; }
.spg-aleiste__erreicht[hidden][data-leer-lang]::before { content: attr(data-leer-lang); }
/* Desktop-Leiste: alle Stufen beschriftet (Marc 30.10.); Platz kommt aus der vollen Breite. Wird der Balken trotzdem schmal
   (761–1000 px), Beschriftung kleiner statt Überlappung. */
.spg-aleiste__balken { container-type: inline-size; }
@container (max-width: 240px) { .spg-aleiste .spg-aleiste__balken .shop-aktion__marke b { font-size: 11px; } } /* höhere Spezifität: die 13-px-Regel steht weiter unten */

/* ===== Feste Leiste unten ===== */
.spg-aleiste { position: fixed; left: 0; right: 0; bottom: var(--spg-aktion-unten, 0px); z-index: 85; background: #1d1d1f; color: #f5f5f7; border-top: 2px solid var(--accent, #1495d4); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); font-family: inherit; }
.spg-aleiste[hidden] { display: none; }
.spg-aleiste__innen { max-width: 1200px; margin: 0 auto; padding: 14px 24px 12px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) auto auto; /* Labels wechseln oben/unten: Balken kommt mit weniger Breite aus, der Satz bleibt einzeilig (Shop 30.10.) */ grid-template-areas: "kopf balken mehr info"; gap: 10px 20px; align-items: center; position: relative; }
.spg-aleiste__kopf { grid-area: kopf; }
.spg-aleiste__balken { grid-area: balken; }
/* Infos zur Aktion: Sekundärknopf, heller Rahmen auf dunkler Leiste (Marc 28.10.) */
.spg-aleiste__info { grid-area: info; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 2px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.spg-aleiste__info:hover, .spg-aleiste__info:focus-visible { background: #2c2c2e; border-color: #fff; color: #fff; }
.spg-aleiste__info svg { flex: none; }
.spg-aleiste__kopf { min-width: 0; }
.spg-aleiste__erreicht { display: inline-block; margin: 0 0 4px; padding: 2px 8px; border-radius: 2px; background: var(--accent, #1495d4); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.spg-aleiste__text { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 400; color: #f5f5f7; }
.spg-aleiste__text strong { font-weight: 800; color: #fff; }
/* Kurzsatz („Noch 605 € bis 250 € Rabatt“) über __lang/__kurz wie beim Abzeichen; am Handy einzeilig */
.spg-aleiste .shop-aktion__balken { margin: 6px 14px 26px; background: #3a3a3d; }
.spg-aleiste .shop-aktion__marke { background: #5a5a5f; }
.spg-aleiste .shop-aktion__marke b { color: #a1a1a6; font-size: 13px; top: 24px; }
.spg-aleiste .shop-aktion__marke.is-erreicht { background: var(--accent, #1495d4); }
.spg-aleiste .shop-aktion__marke.is-erreicht b { color: #fff; }
/* Desktop (Marc 30.10., mkt-website fuer Shop): Leiste wieder auf Inhaltsbreite, alle Stufen beschriftet, abwechselnd unter/ueber dem Balken */
@media (min-width: 761px) {
  .spg-aleiste .shop-aktion__balken { margin: 20px 14px 22px; }
  .spg-aleiste .shop-aktion__marke:nth-child(odd) b { top: auto; bottom: 24px; }   /* 1. Kind = Fuellung -> 2., 4., 6. Stufe oben */
  /* Marc 02.11. (Leiste springt nie): Satz immer so hoch wie der längste (Leer-Satz), sonst wechselt die Leistenhöhe mit dem ersten
     Artikel. 761–999 px bis 3 Zeilen, ab 1000 px bis 2 (gemessen DE/EN). Konfigurator setzt den Satz selbst (Kurzsatz, feste Höhe). */
  body:not(.configurator-page) .spg-aleiste__text { min-height: calc(3 * 1.4em); }
}
@media (min-width: 1000px) { body:not(.configurator-page) .spg-aleiste__text { min-height: calc(2 * 1.4em); } }

/* Start ohne Übergänge (fertig aus dem HTML bzw. letzter Stand der Sitzung); Übergänge nur bei echten Änderungen */
.spg-aleiste.is-still .shop-aktion__fuell { transition: none; }

/* Neue Stufe erreicht (Marc 28.10.): kurzer Hinweis direkt über der Leiste, links (rechts sitzt der Chat-Knopf) */
.spg-aleiste-neu { position: fixed; left: 24px; bottom: calc(var(--spg-aktion-h, 82px) + var(--spg-aktion-unten, 0px) + 12px); z-index: 86; max-width: min(460px, calc(100vw - 120px)); padding: 12px 16px; border-radius: 2px; background: var(--accent, #1495d4); color: #fff; font-size: 16px; line-height: 1.35; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.spg-aleiste-neu[hidden] { display: none; }
.spg-aleiste-neu.is-da { opacity: 1; transform: none; }
.spg-aleiste-neu.is-weg { opacity: 0; transform: translateY(8px); }
.spg-aleiste__erreicht.is-puls { animation: spg-puls .9s ease-out 2; }
@keyframes spg-puls { 0% { box-shadow: 0 0 0 0 rgba(20, 149, 212, .75); transform: scale(1); } 35% { transform: scale(1.08); } 100% { box-shadow: 0 0 0 14px rgba(20, 149, 212, 0); transform: scale(1); } }


/* ===== Was passt dazu? (Marc 29.10.): Auslöser in der Leiste, Fläche als Overlay darüber ===== */
.spg-aleiste__mehr { grid-area: mehr; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--accent, #1495d4); border-radius: 2px; background: var(--accent, #1495d4); color: #fff; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.spg-aleiste__mehr[hidden] { display: inline-flex; visibility: hidden; pointer-events: none; } /* Marc 02.11.: ohne Vorschläge unsichtbar, Platz bleibt (nichts rückt) */
.spg-aleiste__mehr:hover, .spg-aleiste__mehr:focus-visible { filter: brightness(1.1); }
.spg-aleiste__mehr svg { flex: none; transition: transform .2s ease; }
.spg-aleiste.is-offen .spg-aleiste__mehr svg { transform: rotate(180deg); }
.spg-aleiste__info .spg-aleiste__lang { display: none; } /* Marc 02.11.: „Infos“ immer kurz, kein Wechsel */
.spg-aleiste__info .spg-aleiste__kurz { display: inline; }
body:has(.spg-aleiste.is-offen) .chatdock, body:has(.spg-aleiste.is-offen) .chatpanel, body:has(.spg-aleiste.is-offen) .pagetools { visibility: hidden; } /* aufgeklappt: Chat/Werkzeuge nicht über den Karten (wie Konfigurator) */
.spg-aleiste.is-offen { z-index: 97; } /* aufgeklappt über Chat-Knopf und Seitenwerkzeugen, unter dem Cookie-Banner */
.spg-aleiste__panel { position: absolute; left: 0; right: 0; bottom: 100%; max-height: 60vh; overflow: auto; background: #1d1d1f; color: #f5f5f7; border-top: 2px solid var(--accent, #1495d4); box-shadow: 0 -12px 30px rgba(0, 0, 0, .3); }
.spg-aleiste__panel[hidden] { display: none; }
.spg-aleiste__panel-innen { max-width: 1200px; margin: 0 auto; padding: 16px 24px 18px; }
.spg-aleiste__panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.spg-aleiste__panel-titel { margin: 0; font-size: 17px; font-weight: 800; color: #fff; outline: none; }
.spg-aleiste__panel-zu { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 2px; background: transparent; color: #a1a1a6; cursor: pointer; }
.spg-aleiste__panel-zu:hover, .spg-aleiste__panel-zu:focus-visible { background: #2c2c2e; color: #fff; }
.spg-aleiste__panel-text { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: #d2d2d7; }
.spg-aleiste__panel-text[hidden] { display: none; }
.spg-aleiste__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.spg-vorschlag { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bild text" "fuss fuss"; gap: 10px 12px; padding: 12px; border-radius: 2px; background: #2c2c2e; }
.spg-vorschlag__bild { grid-area: bild; width: 56px; height: 56px; object-fit: contain; border-radius: 2px; background: #fff; }
.spg-vorschlag__text { grid-area: text; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spg-vorschlag__titel { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.spg-vorschlag__info { font-size: 13px; color: #a1a1a6; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spg-vorschlag__info:empty { display: none; }
.spg-vorschlag__ziel { font-size: 14px; font-weight: 700; color: #6cc4ee; }
.spg-vorschlag__fuss { grid-area: fuss; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spg-vorschlag__preis { font-size: 15px; font-weight: 800; color: #fff; }
.spg-vorschlag__knopf { padding: 8px 14px; border: 0; border-radius: 2px; background: var(--accent, #1495d4); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.spg-vorschlag__knopf.is-ok, .spg-vorschlag__knopf:disabled { background: #3a3a3d; cursor: default; }
.spg-aleiste__panel-link { align-self: center; color: #6cc4ee; font-weight: 700; text-decoration: none; }

/* Platz schaffen: Seiteninhalt, Chat-Knopf und Seitenwerkzeuge über die Leiste heben */
body.has-aleiste { padding-bottom: var(--spg-aktion-h, 0px); }
html:has(body.has-aleiste) { scroll-padding-bottom: calc(var(--spg-aktion-h, 0px) + 16px); } /* Anker (#upgrades), Fokus und scrollIntoView nicht unter die Leiste */
body.has-aleiste:not(.configurator-page) { --chat-b: calc(var(--spg-aktion-h, 0px) + 16px); }
body.has-aleiste:not(.has-chatknopf):not(.configurator-page) .pagetools { bottom: calc(var(--spg-aktion-h, 0px) + 16px); }

@media (max-width: 760px) {
  .spg-aleiste__innen { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf info" "balken balken"; padding: 8px 14px 4px; gap: 2px 10px; }
  /* Lasche oben mittig über der blauen Kante (Marc 30.10.): absolut, die Leiste wird nicht höher; Tippfläche 64 × 44 px */
  .spg-aleiste__mehr { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 64px; height: 24px; padding: 0; margin: 0; justify-content: center; border: 0; border-radius: 2px 2px 0 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, .2); z-index: 1; }
  .spg-aleiste__mehr::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } /* 24 + 2 × 10 = 44 px Tippfläche */
  .spg-aleiste.is-offen .spg-aleiste__mehr { top: calc(-26px - var(--spg-panel-h, 0px)); }
  .spg-aleiste__panel-zu { display: none; } /* am Handy schließt die Lasche */
  body.has-aleiste { padding-bottom: calc(var(--spg-aktion-h, 79px) + 26px); } /* Lasche ragt 26 px über die Leiste: Seitenende nicht verdecken */ /* aufgeklappt an der Oberkante der Fläche, Pfeil nach unten */
  .spg-aleiste__mehr .spg-aleiste__lang { display: none; }
  .spg-aleiste__panel-innen { padding: 12px 14px 14px; }
  .spg-aleiste__karten { grid-template-columns: 1fr; gap: 8px; }
  .spg-vorschlag { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "bild text fuss"; padding: 10px; }
  .spg-vorschlag__bild { width: 44px; height: 44px; }
  .spg-vorschlag__fuss { flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
  .spg-vorschlag__titel { font-size: 14px; }
  .spg-vorschlag__ziel { font-size: 13px; }
  .spg-aleiste__info { align-self: start; padding: 5px 9px; font-size: 13px; gap: 5px; }
  .spg-aleiste__erreicht { font-size: 13px; margin: 0 6px 0 0; padding: 0 6px; vertical-align: 1px; min-width: 5.8em; box-sizing: border-box; text-align: center; } /* fester Platz bis „−2.000 €“/„−€2,000“: Satz rückt nicht */
  .spg-aleiste__erreicht[hidden][data-leer-kurz]::before { content: attr(data-leer-kurz); }
  .spg-aleiste__lang { display: none; }
  .spg-aleiste__kurz { display: inline; }
  .spg-aleiste__kopf { display: block; }
  .spg-aleiste__text { display: inline; font-size: 14px; line-height: 1.35; }
  .spg-aleiste .shop-aktion__balken { height: 7px; margin: 8px 12px 20px; }
  .spg-aleiste .shop-aktion__marke { height: 15px; top: -4px; }
  .spg-aleiste .shop-aktion__marke b { font-size: 11px; top: 17px; }
  .spg-aleiste-neu { left: 14px; max-width: calc(100vw - 90px); padding: 9px 12px; font-size: 14px; bottom: calc(var(--spg-aktion-h, 100px) + var(--spg-aktion-unten, 0px) + 10px); }
  .shop-aktion__text { font-size: 16px; }
  .shop-aktion__marke b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .shop-aktion__fuell, .spg-aleiste-neu { transition: none; } .spg-aleiste__erreicht.is-puls { animation: none; } }
@media print { .spg-aleiste, .spg-aleiste-neu { display: none; } body.has-aleiste { padding-bottom: 0; } }