/*
 * Kasten auf den Produktseiten unter dem Warenkorb-Knopf (framework/aktion/produktkasten.php), Bennis Vorschau "Variante B, Karten".
 * Lädt nur auf Produktseiten mit Kasten. Alles unter .lcb-pk, eigene Klassen mit "lcb-pk-", damit Theme-Regeln nicht durchschlagen.
 * Kein filter:drop-shadow auf Bildern (WebKit malt damit schwarze Kästen), Schatten per box-shadow. Kein JavaScript.
 * Abstände in Flex-Behältern stehen als margin, nicht als gap (Safari kennt gap in Flexbox erst ab 14.1; im Raster kennt er es länger).
 * Die Überschriften sind div, nicht p: die Theme-Regel "p:first-of-type" der Produktseite stellte die erste sonst linksbündig.
 */
.lcb-pk {
  --pk-gruen: #538915;
  --pk-gruen-dunkel: #3d6a0e;
  --pk-rot: #b3261e;
  --pk-tinte: #2b2b2b;
  --pk-grau: #5a5a5a;
  --pk-gold: #d8bd78;
  --pk-creme: #fbf5e6;
  --pk-rand: #e3d9bf;
  display: block; box-sizing: border-box; clear: both; margin: 16px 0 8px; padding: 14px 12px 12px;
  border: 1px solid var(--pk-gold); border-radius: 16px; background: var(--pk-creme);
  font-family: 'Lato', Arial, sans-serif; font-size: 15px; line-height: 1.3; color: var(--pk-tinte); text-align: left;
  -webkit-text-size-adjust: 100%;
}
.lcb-pk *, .lcb-pk *::before, .lcb-pk *::after { box-sizing: border-box; }
.lcb-pk p { margin: 0; padding: 0; }
.lcb-pk a, .lcb-pk a:hover, .lcb-pk a:visited { color: inherit; text-decoration: none; }
.lcb-pk img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.lcb-pk b { font-weight: 900; }
.lcb-pk small { font-size: inherit; }
.lcb-pk s { text-decoration: line-through; }

.lcb-pk .lcb-pk-kopf { margin: 0 0 10px; font-size: 16px; line-height: 1.2; font-weight: 900; color: var(--pk-tinte); letter-spacing: .005em; text-align: center; }
.lcb-pk .lcb-pk-kopf2 { margin-top: 16px; }

/* Buch oder eBook: zwei gleich breite Karten, das angesehene Format mit grünem Rand und Haken */
.lcb-pk .lcb-pk-formate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lcb-pk .lcb-pk-fmt {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 10px 8px;
  border: 2px solid var(--pk-rand); border-radius: 12px; background: #fff; color: var(--pk-tinte);
}
.lcb-pk .lcb-pk-fmt img { height: 72px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 4px; }
.lcb-pk .lcb-pk-t { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.lcb-pk .lcb-pk-t > * + * { margin-top: 1px; }
.lcb-pk .lcb-pk-l { font-weight: 700; font-size: 13.5px; color: var(--pk-grau); }
.lcb-pk .lcb-pk-fmt b { font-size: 19px; line-height: 1.15; white-space: nowrap; }
.lcb-pk .lcb-pk-fmt small { font-size: 12.5px; font-weight: 700; color: var(--pk-gruen-dunkel); }
.lcb-pk .lcb-pk-an { border-color: var(--pk-gruen); background: #f6faef; }
.lcb-pk .lcb-pk-an .lcb-pk-l { color: var(--pk-tinte); }
.lcb-pk .lcb-pk-hier:not(.lcb-pk-an) small { color: var(--pk-rot); }
.lcb-pk .lcb-pk-haken {
  position: absolute; top: -9px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--pk-gruen); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lcb-pk .lcb-pk-haken svg { width: 14px; height: 14px; }
.lcb-pk a.lcb-pk-fmt:hover { border-color: var(--pk-gruen); }
.lcb-pk a.lcb-pk-fmt:focus-visible, .lcb-pk a.lcb-pk-karte:focus-visible, .lcb-pk a.lcb-pk-wunsch:focus-visible { outline: 3px solid var(--pk-gruen-dunkel); outline-offset: 2px; }

/* Pakete: Karten mit Bild, Name, Preis, statt, Du sparst */
.lcb-pk .lcb-pk-karten { display: flex; flex-direction: column; }
.lcb-pk .lcb-pk-karte + .lcb-pk-karte { margin-top: 9px; }
.lcb-pk .lcb-pk-karte {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 8px 10px 8px 8px; background: #fff;
  border: 1px solid var(--pk-rand); border-radius: 12px; box-shadow: 0 1px 4px rgba(60, 40, 0, .07); color: var(--pk-tinte);
}
.lcb-pk a.lcb-pk-karte:hover, .lcb-pk a.lcb-pk-wunsch:hover { border-color: var(--pk-gruen); }
.lcb-pk .lcb-pk-bild { width: 64px; height: 64px; border-radius: 9px; background: var(--pk-creme); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lcb-pk .lcb-pk-bild img { width: 100%; height: 100%; object-fit: contain; }
.lcb-pk .lcb-pk-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lcb-pk .lcb-pk-nm { font-weight: 900; font-size: 15px; line-height: 1.2; word-break: break-word; overflow-wrap: anywhere; }
.lcb-pk .lcb-pk-sb { margin-top: 2px; font-size: 12.5px; color: var(--pk-grau); line-height: 1.25; word-break: break-word; overflow-wrap: anywhere; }
.lcb-pk .lcb-pk-pr { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 4px; }
.lcb-pk .lcb-pk-pr b { font-size: 18px; line-height: 1.1; white-space: nowrap; margin-right: 7px; }
.lcb-pk .lcb-pk-statt { font-size: 12.5px; color: var(--pk-grau); white-space: nowrap; }
.lcb-pk .lcb-pk-statt s { color: var(--pk-grau); }
.lcb-pk .lcb-pk-sp { margin-top: 4px; background: var(--pk-rot); color: #fff; font-weight: 900; font-size: 12.5px; line-height: 1.3; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.lcb-pk .lcb-pk-pfeil { width: 18px; height: 18px; flex: none; color: var(--pk-gruen-dunkel); }

/* Konfigurator: Signet, vier Textzeilen, Pfeil. Das Signet bestimmt die Breite der ersten Spalte, der Text steht immer in der zweiten. */
.lcb-pk .lcb-pk-wunsch {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px 8px 8px;
  border: 1.5px dashed var(--pk-gold); border-radius: 12px; color: var(--pk-grau); font-size: 13.5px; line-height: 1.3;
}
.lcb-pk .lcb-pk-signet { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.lcb-pk .lcb-pk-signet img { width: 100%; height: 100%; object-fit: contain; }
.lcb-pk .lcb-pk-wt { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }
.lcb-pk .lcb-pk-wt b { color: var(--pk-tinte); font-size: 14.5px; }
/*
 * Genau vier Zeilen bei jeder Breite (Bennis Wunsch vom 11.11.2026): Jede Zeile ist ein eigenes Element und bricht nicht um. Damit die längste
 * Zeile ("Bücher selbst mixen und sparen", fett, höchstens 15,45 Schriftgrößen breit, auch in der Ersatzschrift Arial) immer hineinpasst, folgt
 * die Schriftgröße der Breite der Zeile: (Breite des Links - feste Teile) / 15.6, höchstens 14,5 px. 100cqw = Innenbreite des Links.
 * Feste Teile: Signet 44 + Abstand 10 + Pfeil 18 + Abstand 10 = 82 px. Bis 284 px Innenbreite (Fenster unter 372 px) entfällt der Pfeil und das
 * Signet ist 36 px (36 + 10 = 46 px, der Text nutzt den freien Abstand des Pfeils mit). Bis 234 px (schmale zweispaltige Ansicht, Fenster 577
 * bis rund 670 px) steht nur der Text. Browser ohne Container-Abfragen (Safari vor 16) überspringen den Block: Der Text bricht dort frei um.
 */
@supports (container-type: inline-size) {
  .lcb-pk .lcb-pk-wunsch { container-type: inline-size; }
  .lcb-pk .lcb-pk-wt { font-size: min(14.5px, calc((100cqw - 82px) / 15.6)); }
  .lcb-pk .lcb-pk-wt > * { white-space: nowrap; }
  .lcb-pk .lcb-pk-wt b { font-size: 1em; }
  .lcb-pk .lcb-pk-wt span { font-size: min(13.5px, 1em); }
  @container (max-width: 284px) {
    .lcb-pk .lcb-pk-wunsch .lcb-pk-pfeil { display: none; }
    .lcb-pk .lcb-pk-signet { width: 36px; height: 36px; }
    .lcb-pk .lcb-pk-wt { margin-right: -10px; font-size: min(14.5px, calc((100cqw - 46px) / 15.6)); }
  }
  @container (max-width: 234px) {
    .lcb-pk .lcb-pk-signet { display: none; }
    .lcb-pk .lcb-pk-wt { margin-left: -10px; font-size: min(14.5px, calc(100cqw / 15.6)); }
  }
}

@media (min-width: 700px) {
  .lcb-pk .lcb-pk-fmt img { height: 96px; }
  .lcb-pk .lcb-pk-karte { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .lcb-pk .lcb-pk-bild { width: 88px; height: 88px; }
}
@media (max-width: 359px) {
  .lcb-pk { padding-left: 9px; padding-right: 9px; }
  .lcb-pk .lcb-pk-kopf { font-size: 15px; }
  .lcb-pk .lcb-pk-karte { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; }
  .lcb-pk .lcb-pk-bild { width: 52px; height: 52px; }
  .lcb-pk .lcb-pk-l { font-size: 12.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lcb-pk .lcb-pk-fmt, .lcb-pk .lcb-pk-karte, .lcb-pk .lcb-pk-wunsch { transition: border-color .15s ease; }
}