/* Landingpages POS, WMS und Shop im Layout der CRM-Seite (Nutzer 13.10.2026). Die Seite lädt dazu homepage.css und
   hero-banners.css (Kopfzeile, Rubrik-Punkte, Hero-Banner, Kurztext-Karten, Erklärkarten, Vollbild-Blatt, Abschluss)
   und das Stylesheet des Tools (pos-app.css). Hier steht nur, was dort an Rubrik-IDs der CRM-Seite hängt, in
   allgemeiner Form (.lp-scene, .lp-mod), dazu die Tour-Optik aus crm.css, Dialoge über dem Modul und die Preis-Rubrik. */

/* ---------- Rubrik mit Modul (wie #kontakte und .hp-kontakte) ---------- */
.lp-scene .fg {
  align-items: stretch;
  place-items: center;
}
.lp-mod {
  position: relative;
  width: min(1100px, 88vw);
  height: calc(100vh - 7.4rem);
  max-height: 820px;
  transform-origin: 50% 58%;
  will-change: transform, opacity;
  opacity: var(--op, 0);
  transform:
    translate3d(var(--tx, 90px), var(--ty, 140px), 0)
    rotateX(var(--rx, 10deg))
    rotateZ(var(--rz, -3deg))
    scale(var(--sc, .78));
  pointer-events: none;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
}
.lp-mod.is-landed {
  pointer-events: auto;
  transform: none !important;
  filter: none !important;
  will-change: auto;
  box-shadow: 0 32px 70px rgb(27 54 97 / .22);
}
/* Fläche des Tools hinter der Ansicht (POS: #main mit --cin-background und Innenabstand) */
.lp-app {
  height: 100%;
  min-height: 0;
  padding: 1rem;
  background: var(--cin-background, #f3f4f6);
  color: var(--cin-foreground, #111827);
  text-align: start;
  /* wie #main im Tool (overflow-y-auto): unter 992 px stapelt die Kasse Katalog und Warenkorb, dann scrollt die Fläche */
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-bs-theme="dark"] .lp-mod.is-landed { box-shadow: 0 32px 70px rgb(0 0 0 / .5); }

/* „i“-Knopf der Tour: fest am Fenster rechts neben dem Modul (wie #hp-tour-kontakte) */
.lp-tour-btn {
  position: fixed !important;
  z-index: 2200 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .45s ease;
}
.lp-tour-btn.is-in {
  opacity: 1;
  pointer-events: auto !important;
}

/* ---------- Dialoge des Tools über dem Modul statt über der Seite (POS.modal, Application.js) ---------- */
.lp-pos-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
}
.lp-pos-overlay > .modal-backdrop {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  opacity: 1;
}
.lp-pos-overlay > .modal {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  opacity: 1;
}
.lp-pos-overlay .modal-dialog {
  margin: 1rem auto;
  min-height: calc(100% - 2rem);
  transform: none;
}
.lp-pos-overlay .modal-dialog-scrollable { height: calc(100% - 2rem); }
.lp-pos-overlay .modal-dialog-scrollable .modal-content { max-height: 100%; }
@media (max-width: 767.98px) {
  .lp-pos-overlay .modal-dialog { margin: .5rem; max-width: none; }
}
.lp-scene .copy { transition: opacity .2s ease; }
.lp-scene.lp-has-dialog .copy { opacity: 0; pointer-events: none; }

/* ---------- Handy: Rubrik ohne Pin, Vorschau mit Kopf des echten Moduls (wie #kontakte) ---------- */
@media (max-width: 767.98px) {
  .lp-scene.scene--pin { height: auto !important; }
  .lp-scene .scene-sticky {
    position: relative;
    height: auto;
    min-height: 0;
  }
  .lp-scene .hp-peek-fg {
    --peek-h: min(23rem, 56svh);
    position: relative;
    display: block;
    padding: 0 .75rem 1.6rem;
  }
  .lp-mod {
    width: 100%;
    height: calc(100vh - 8.4rem);
    max-height: none;
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }
  .hp-peek-fg > .lp-mod {
    height: var(--peek-h) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-radius: 14px;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  .hp-sheet-body > .lp-mod {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .lp-app { padding: .6rem; }
  .lp-tour-btn { display: none !important; }
}

/* ---------- POS-Kasse im Modul ---------- */
/* Die Kasse füllt die Karte; Spalten wie im Tool (col-md-7 col-lg-8 / col-md-5 col-lg-4) */
.lp-mod .kasse-view { height: 100%; }

/* Listenkarten (Bons, Kunden, Gutscheine, Kommissionen): Bootstrap lässt .card-body in der Spaltenkarte mitwachsen. Im
   Tool füllen viele Zeilen die Tabelle, mit den wenigen Demo-Einträgen nahm das Filterformular die freie Höhe auf
   (große Lücke über der Tabelle). Das Formular bleibt deshalb auf seiner Höhe, die Tabelle bekommt den Rest. */
.lp-mod .card > form.card-body { flex: 0 0 auto; }

/* Keine waagrechten Scrollleisten in den Karten (Nutzer 13.10.2026: „horizontalen Balken entfernen“). Die Karte ist mit
   1100 px schmaler als #main im Tool, die Spaltenbreiten richten sich aber nach dem Fenster (col-xl-*). Deshalb:
   Rasterabstand der Bereiche abschneiden, Kopfzeilen silbengetrennt umbrechen, Datum und Uhrzeit dürfen umbrechen.
   Beträge bleiben einzeilig. */
.lp-mod .gutscheine-view > .overflow-y-auto,
.lp-mod .berichte-panes { overflow-x: hidden; }
.lp-mod .table > thead th { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.lp-mod .table td.small.text-nowrap { white-space: normal !important; }
/* Kommissionen: Kunde darf umbrechen (im Tool einzeilig gekürzt), Kopf der Positionen etwas kleiner */
.lp-mod .kommissionen-table td.kommissionen-customer-cell { white-space: normal; overflow: visible; text-overflow: clip; }
.lp-mod .kommissionen-items > thead th { font-size: .8125rem; }
/* Kassenbuch: Summenblöcke zeigen technische Schlüssel als Spaltenköpfe, die dürfen an jeder Stelle umbrechen */
.lp-mod .kassenbuch-figures > thead th { overflow-wrap: anywhere; }
/* Kasse: Kategorien brechen in schmalen Karten in eine zweite Zeile um, statt seitlich zu scrollen */
.lp-mod .kasse-categories { flex-wrap: wrap !important; overflow-x: visible !important; }

/* ---------- Tour (crm.css „Anwender-Tour“, unverändert übernommen) ---------- */
.crm-tour {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 2050;
}
.crm-tour-backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(13, 27, 42, 0.66);
  pointer-events: auto;
  position: fixed;
}
.crm-tour-highlight {
  border: 2px solid rgba(var(--bs-primary-rgb), 0.95);
  border-radius: 0.5rem;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 24px rgba(var(--bs-primary-rgb), 0.55);
  pointer-events: none;
  position: fixed;
}
.crm-tour-tooltip {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.24);
  color: var(--bs-body-color);
  max-width: calc(100vw - 1.5rem);
  padding: 1rem;
  pointer-events: auto;
  position: fixed;
  width: min(22rem, calc(100vw - 1.5rem));
  z-index: 2070;
}
.crm-tour-tooltip-header,
.crm-tour-actions,
.crm-tour-step-actions {
  align-items: center;
  display: flex;
}
.crm-tour-tooltip-header {
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.crm-tour-counter {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  font-weight: 600;
}
.crm-tour-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.crm-tour-text {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-bottom: 1rem;
}
.crm-tour-actions {
  gap: 0.75rem;
  justify-content: space-between;
}
.crm-tour-step-actions {
  gap: 0.5rem;
}
@media (max-width: 575.98px) {
  .crm-tour-tooltip { padding: 0.875rem; }
  .crm-tour-actions { align-items: stretch; flex-direction: column; }
  .crm-tour-step-actions { justify-content: flex-end; }
}

/* ---------- Preis-Kopf und Robo-Rubrik (Reste der früheren Preis-Rubrik der Landingpages) ----------
   Seit 15.10.2026 hat jede Seite den gemeinsamen Rechner (preise.*); die Regeln der kleinen Preiskarte (.lp-price,
   .lp-price-card*, .lp-price-tag, .lp-price-note) sind entfernt. Es bleiben: lp-price-scene, -copy, -actions für die
   Robo-Rubrik der WMS-Seite und lp-price-soon für „In Vorbereitung“ im Preis-Kopf von POS, WMS und Shop. */
.lp-price-scene { padding: clamp(5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.lp-price-copy .k {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
  margin-bottom: .45rem;
}
.lp-price-copy h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.12;
  margin: 0;
  font-weight: 650;
  color: #141210;
}
.lp-price-copy p { margin: .8rem 0 0; color: #5c564c; max-width: 30rem; }
.lp-price-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  margin-top: 1.2rem;
  color: #5c564c;
  font-size: .92rem;
}
.lp-price-soon-k {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #1b3661;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lp-price-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
html[data-bs-theme="dark"] .lp-price-copy h2 { color: #e6edf3; }
html[data-bs-theme="dark"] .lp-price-copy p,
html[data-bs-theme="dark"] .lp-price-soon { color: #9ca3af; }
html[data-bs-theme="dark"] .lp-price-soon-k { background: #161b22; border-color: #30363d; }
html[data-bs-theme="dark"] .lp-price-soon-k { color: #9db0ff; }

@media (max-width: 767.98px) {
  /* Platz für die Kopfzeile (63 px) nach dem Sprung auf den Rubrik-Anker, wie .hp-explain der CRM-Seite */
  .lp-price-scene { padding-top: 4.6rem; }
}