/* Preise (Nutzer 01.10.2026, Preisliste vom 07.10.2026): Generation ist die Basis (immer gewählt), die übrigen Modulkarten zum Wählen,
   Paket-Karte rechnet live (preise.js). Unter den sechs Modulen die Zeile „Für den Handel“ (POS, Shop, je Kasse bzw. Shop mit
   Zähler in der Karte), darunter „Optional dazu“ (Phone, Server, breite Karte Einrichtung und Schulung mit Tagezähler).
   Desktop ab 1100 px: Karten links, Paket-Karte klebt rechts. Darunter klebt die Paket-Karte als Leiste unten.
   Einflüge nur am Desktop (#preise.is-pre → .is-in), auf dem Handy keine (Regel Handy-Ansicht).
   Darkmode-Regeln in der Form html[data-bs-theme="dark"] …, wie im Rest der Seite. */

#preise .hp-price {
  position: relative;
  z-index: 1; /* über der Wellen-Leinwand (preise.js), die Welle läuft unter den Karten */
  max-width: 72rem;
  margin-inline: auto;
}

/* Kopf */
#preise .hp-price-head {
  max-width: 56rem;
  margin-bottom: 1.8rem;
}
#preise .k,
#preise .hp-price-sum-k {
  font-size: .72rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
  font-weight: 600;
  margin-bottom: .4rem;
}
#preise .hp-price-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
  line-height: 1.08 !important;
  margin: 0 0 .7rem !important;
  font-weight: 650 !important;
  color: #141210 !important;
  letter-spacing: -0.03em;
}
#preise .hp-price-mark {
  background: linear-gradient(90deg, rgb(245 158 11 / .38), rgb(91 77 255 / .28)) no-repeat 0 88% / 100% .34em;
  transition: background-size 1.1s cubic-bezier(.16,1,.3,1) .35s;
}
#preise.is-pre .hp-price-mark { background-size: 0% .34em; }
/* eine Zeile am Desktop (Nutzer 01.10.2026); wo es umbrechen muss, gleich lange Zeilen statt „dazu.“ allein */
#preise .hp-price-head p {
  text-wrap: balance;
  margin: 0 !important;
  color: #5c564c !important;
  font-size: 1.05rem !important;
  line-height: 1.45;
}

#preise .hp-price-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.5rem;
  gap: 1.4rem;
  align-items: start;
}
#preise .hp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  #preise .hp-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#preise .hp-price-sub-k {
  margin: 1.5rem 0 .55rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
#preise .hp-price-sub-k::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(27 54 97 / .18), transparent);
}
#preise .hp-price-trade,
#preise .hp-price-extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
/* Einrichtung und Schulung: breite Karte unter Phone und Server, Mehrwerte nebeneinander, Preis und Tagezähler in einer Zeile */
#preise .hp-price-card--wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
  #preise .hp-price-card--wide .hp-price-feats {
    display: flex;
    flex-wrap: wrap;
    gap: .32rem 1.6rem;
  }
}

/* Modulkarte: Symbol links neben Marke und Name, darunter Nutzen, Liste (füllt auf) und Preis */
#preise .hp-price-card {
  --acc: #1b3661;
  --acc-ui: var(--acc);
  --rd: 0s;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: .8rem;
  min-width: 0;
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease,
    border-color .25s ease,
    background-color .25s ease,
    opacity .6s ease var(--rd),
    translate .8s cubic-bezier(.16,1,.3,1) var(--rd);
}
/* Lichtkegel folgt dem Zeiger (--mx/--my aus preise.js) */
#preise .hp-price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(19rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 13%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
}
/* Gewählt (Nutzer 07.10.2026: alles gewählt wirkte unruhig): nur ein leiser Rand in Modulfarbe und ein neutraler Schatten,
   kein zweiter Farbring, kein farbiger Schein. Die Farbe tragen Haken, Symbol, Häkchen und Unterstrich. */
#preise .hp-price-card.is-on {
  border-color: color-mix(in srgb, var(--acc) 26%, transparent);
  box-shadow: 0 10px 28px rgb(27 54 97 / .07);
}
@media (hover: hover) and (pointer: fine) {
  #preise .hp-price-card[data-price-item]:not([data-base]):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgb(27 54 97 / .12);
  }
  #preise .hp-price-card[data-price-item]:hover::before { opacity: 1; }
  #preise .hp-price-card[data-price-item]:hover .hp-price-icon { transform: rotate(-6deg) scale(1.06); }
}
#preise .hp-price-card[data-price-item]:not([data-base]):active:not(:has(.hp-price-qty:active, a:active)) { transform: translateY(-1px) scale(.985); }

/* Abgewählt = inaktiv, alles grau (Nutzer 01.10.2026); Farbe erst beim Wählen. Trifft die Intro-Welle eine Karte,
   leuchtet sie kurz farbig auf (.is-lit, schnell an, langsam wieder grau). */
#preise .hp-price-card[data-price-item] > :not(.hp-price-toggle):not(.hp-price-hint) {
  transition: opacity .8s ease, filter .8s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
#preise .hp-price-card[data-price-item]:not(.is-on) { background: #fbfaf8; }
#preise .hp-price-card[data-price-item]:not(.is-on) > :not(.hp-price-toggle):not(.hp-price-hint) {
  opacity: .6;
  filter: grayscale(1);
}
#preise .hp-price-card[data-price-item]:not(.is-on):hover > :not(.hp-price-toggle):not(.hp-price-hint) { opacity: .82; }
#preise .hp-price-card[data-price-item]:not(.is-on).is-lit { background: #fff; }
#preise .hp-price-card[data-price-item]:not(.is-on).is-lit > :not(.hp-price-toggle):not(.hp-price-hint) {
  opacity: 1;
  filter: none;
  transition-duration: .3s;
}

/* Generation ist die Basis: immer gewählt, nicht abwählbar (Schloss am Haken, Hinweis beim Klick) */
#preise .hp-price-card--base,
#preise .hp-price-card--base .hp-price-toggle { cursor: default; }
#preise .hp-price-card--base.is-on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 3%, #ffffff) 0%, #ffffff 58%);
}
#preise .hp-price-brand b { color: var(--acc-ui); font-weight: 700; }
/* kleine Schrift im Hellmodus dunkler als das Orange der Karte (#d97706 hat nur 3,2:1) */
#preise .hp-price-card--base .hp-price-brand b { color: #b45309; }
#preise .hp-price-lock {
  position: absolute;
  right: -.32rem;
  bottom: -.32rem;
  display: grid;
  place-items: center;
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 50%;
  font-size: .52rem;
  line-height: 1;
  color: var(--acc-ui);
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--acc) 40%, #ffffff);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease .15s, transform .45s cubic-bezier(.34,1.56,.64,1) .15s;
}
#preise .hp-price-card.is-on .hp-price-lock { opacity: 1; transform: scale(1); }
#preise .hp-price-hint {
  position: absolute;
  right: .45rem;
  bottom: calc(100% - .5rem);
  z-index: 4;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: #141210;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.96);
  transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
#preise .hp-price-hint::after {
  content: "";
  position: absolute;
  right: 1.05rem;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #141210;
}
#preise .hp-price-card.is-hint .hp-price-hint { opacity: 1; transform: none; }
#preise .hp-price-card.is-hint .hp-price-toggle { animation: hp-price-lock-wiggle .5s ease; }
@keyframes hp-price-lock-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-5deg); }
}

#preise .hp-price-icon {
  grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 13px;
  font-size: 1.25rem;
  color: var(--acc-ui);
  background: color-mix(in srgb, var(--acc) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, filter .3s ease;
}
#preise .hp-price-brand {
  grid-column: 2;
  align-self: end;
  padding-right: 2.3rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #7a7368;
  line-height: 1.3;
}
#preise .hp-price-card h3 {
  grid-column: 2;
  padding-right: 2.3rem;
  font-size: 1.2rem !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: #141210 !important;
  letter-spacing: -0.01em;
}
#preise .hp-price-lead,
#preise .hp-price-feats,
#preise .hp-price-specs,
#preise .hp-price-tag { grid-column: 1 / -1; }
#preise .hp-price-lead {
  margin: .8rem 0 .7rem !important;
  color: #5c564c !important;
  font-size: .9rem !important;
  line-height: 1.35;
}
#preise .hp-price-feats,
#preise .hp-price-specs {
  align-self: start;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .32rem;
}
#preise .hp-price-feats li {
  position: relative;
  padding-left: 1.2rem;
  font-size: .86rem;
  line-height: 1.3;
  color: #3d3830;
}
#preise .hp-price-feats li::before {
  content: "";
  position: absolute;
  left: .12rem;
  top: .3em;
  width: .5rem;
  height: .28rem;
  border-left: 2px solid var(--acc-ui);
  border-bottom: 2px solid var(--acc-ui);
  transform: rotate(-45deg);
}
#preise .hp-price-specs li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: center;
  font-size: .86rem;
  line-height: 1.25;
  color: #3d3830;
}
#preise .hp-price-specs i { color: var(--acc-ui); font-size: .95rem; }
#preise .hp-price-specs small { color: #8a847a; font-size: .76rem; margin-left: .2rem; }
/* Externer Link in einem Punkt (Nutzer 15.10.2026: channable.com bei Commerce) und Hinweis klein unter den Punkten
   ("Beachten Sie die Preise der externen Partner"); der Link schaltet die Karte nicht um (preise.js) */
#preise .hp-price-feats a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--acc-ui);
  text-underline-offset: 2px;
}
#preise .hp-price-feats a:hover { text-decoration-thickness: 2px; }
#preise .hp-price-feats a:focus-visible { outline: 2px solid var(--acc-ui); outline-offset: 2px; border-radius: 3px; }
#preise .hp-price-fine {
  grid-column: 1 / -1;
  align-self: start;
  margin: -.55rem 0 1rem;
  font-size: .76rem;
  line-height: 1.3;
  text-wrap: balance;
  color: #8a847a;
}
/* mit Hinweis: der freie Platz der Karte liegt unter dem Hinweis statt zwischen Punkten und Hinweis */
#preise .hp-price-card:has(> .hp-price-fine) { grid-template-rows: auto auto auto auto 1fr auto; }

#preise .hp-price-tag {
  padding-top: .75rem;
  border-top: 1px dashed rgb(27 54 97 / .14);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .5rem;
}
#preise .hp-price-tag strong {
  position: relative;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: #141210;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Unterstrich unter dem Preis gewählter Module (Nutzer 01.10.2026, statt Balken oben an der Karte).
   Beim Wählen zeichnet er sich mit Federschwung von links, ein Lichtlauf folgt der Spitze;
   beim Abwählen zieht er sich nach rechts zurück. */
#preise .hp-price-tag strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.4rem;
  height: 3px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, var(--acc-ui) 0 40%, color-mix(in srgb, var(--acc-ui) 25%, #ffffff) 50%, var(--acc-ui) 60% 100%)
    0 0 / 250% 100%;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#preise .hp-price-card.is-on .hp-price-tag strong::after {
  transform: scaleX(1);
  transform-origin: left center;
}
#preise .hp-price-card.is-pop.is-on .hp-price-tag strong { animation: hp-price-bump .45s cubic-bezier(.34,1.56,.64,1); }
#preise .hp-price-card.is-pop.is-on .hp-price-tag strong::after { animation: hp-price-underline .75s cubic-bezier(.16,1,.3,1); }
@keyframes hp-price-underline {
  0% { transform: scaleX(0); background-position: 100% 0; }
  55% { transform: scaleX(1.12); }
  78% { transform: scaleX(.97); }
  100% { transform: scaleX(1); background-position: 0 0; }
}
#preise .hp-price-tag strong small,
#preise .hp-price-per strong small {
  font-size: .55em;
  font-weight: 600;
  opacity: .75;
}
#preise .hp-price-tag span {
  font-size: .76rem;
  color: #7a7368;
}
/* Server: Bereitstellung einmalig als eigene Zeile unter dem Preis (Abstand zum Unterstrich) */
#preise .hp-price-tag .hp-price-tag-note {
  flex-basis: 100%;
  margin-top: .45rem;
}

/* Anzahl in der Karte (Kassen, Shops, Tage): rechts neben dem Preis, in schmalen Karten rechts darunter.
   Klick in den Zähler schaltet die Karte nicht um, Plus in einer abgewählten Karte wählt sie mit (preise.js). */
#preise .hp-price-tag--qty { row-gap: .75rem; }
#preise .hp-price-qty {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: default;
}
#preise .hp-price-qty label {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: #5c564c;
  cursor: pointer;
}
#preise .hp-price-qty .hp-price-stepper {
  padding: .15rem;
  background: color-mix(in srgb, var(--acc) 6%, #ffffff);
  box-shadow: inset 0 0 0 1px rgb(27 54 97 / .14);
}
#preise .hp-price-qty .hp-price-stepper button {
  width: 1.75rem;
  height: 1.75rem;
  color: #1b3661;
}
#preise .hp-price-qty .hp-price-stepper button:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); }
#preise .hp-price-qty .hp-price-stepper input {
  width: 2.2rem;
  font-size: .95rem;
  color: #141210;
  user-select: text;
}
#preise .hp-price-qty .hp-price-stepper button:focus-visible,
#preise .hp-price-qty .hp-price-stepper input:focus-visible { outline-color: var(--acc-ui); }

/* Wählen-Knopf: Plus wird zum Haken */
#preise .hp-price-toggle {
  position: absolute;
  top: .95rem;
  right: .95rem;
  z-index: 2;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgb(27 54 97 / .22);
  background: #fff;
  color: #1b3661;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease;
}
#preise .hp-price-toggle:focus-visible {
  outline: 2px solid var(--acc-ui);
  outline-offset: 3px;
}
#preise .hp-price-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
#preise .hp-price-plus {
  transform-origin: 10px 10px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
#preise .hp-price-check {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset .35s cubic-bezier(.16,1,.3,1) .05s;
}
/* Haken-Knopf ohne Schatten (Nutzer 01.10.2026) */
#preise .hp-price-card.is-on .hp-price-toggle {
  background: var(--acc-ui);
  border-color: var(--acc-ui);
  color: #fff;
}
#preise .hp-price-card.is-on .hp-price-plus { transform: rotate(90deg) scale(.2); opacity: 0; }
#preise .hp-price-card.is-on .hp-price-check { stroke-dashoffset: 0; }
#preise .hp-price-card.is-pop .hp-price-toggle { animation: hp-price-spring .55s cubic-bezier(.34,1.56,.64,1); }
#preise .hp-price-card.is-pop.is-on .hp-price-icon { animation: hp-price-icon-pop .6s cubic-bezier(.34,1.56,.64,1); }
#preise .hp-price-card[data-price-item="phone"].is-pop.is-on .hp-price-icon i { animation: hp-price-ring .7s ease; }
@keyframes hp-price-spring {
  0% { transform: scale(1); }
  30% { transform: scale(.72); }
  65% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes hp-price-icon-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes hp-price-ring {
  0%, 100% { transform: rotate(0); }
  15%, 45%, 75% { transform: rotate(-16deg); }
  30%, 60%, 90% { transform: rotate(16deg); }
}

/* Server-LED blinkt, sobald der Server gewählt ist */
#preise .hp-price-led {
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: #c9c2b4;
  transition: background-color .3s ease;
}
#preise .hp-price-card.is-on .hp-price-led {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: hp-price-led 1.6s steps(1, end) infinite;
}
@keyframes hp-price-led {
  0%, 60%, 80% { opacity: 1; }
  70%, 90% { opacity: .25; }
}

/* +3,90 € steigt vom Knopf auf (preise.js) */
#preise .hp-price-delta {
  position: absolute;
  top: -.3rem;
  right: .9rem;
  z-index: 3;
  pointer-events: none;
  font-weight: 700;
  font-size: .82rem;
  color: var(--acc-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: hp-price-float .95s cubic-bezier(.16,1,.3,1) forwards;
}
#preise .hp-price-delta.is-minus { color: #8a847a; }
@keyframes hp-price-float {
  0% { opacity: 0; transform: translateY(6px) scale(.9); }
  25% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* Intro (preise.js, nur Desktop, einmal je Seitenaufruf; Nutzer 01.10.2026: dezent und langsam): weicher Puls unter
   Generation, digitale Welle unter den Karten. Die Welle hebt jede Karte an, über die sie läuft (erst die Kante zur
   Welle, dann die Mitte, dann die abgewandte Kante), dabei leuchtet sie kurz auf; die Paket-Karte bekommt einen
   weichen Schein. */
#preise .hp-price-card::after,
#preise .hp-price-sum::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
#preise .hp-price-card::after {
  border: 1.5px solid color-mix(in srgb, var(--acc-ui) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 10%, transparent), 0 18px 38px color-mix(in srgb, var(--acc) 20%, transparent);
}
/* Die Bewegung der getroffenen Karte (Welle hebt sie an) läuft per Web Animations aus preise.js (ride);
   hier nur Schein und Schatten dazu, so lange wie die Bewegung (--glow-ms) */
#preise .hp-price-card.is-glow::after { animation: hp-price-soft-glow var(--glow-ms, .95s) ease-out; }
@keyframes hp-price-soft-glow {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
/* Die Basis schaltet sich weich ein: kaum merkliches Atmen, der Schein liegt auf der Leinwand darunter */
#preise .hp-price-card.is-pulse { animation: hp-price-breathe 1.6s ease-in-out; }
#preise .hp-price-card.is-pulse::after { animation: hp-price-soft-glow 1.7s ease-out; }
@keyframes hp-price-breathe {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.015); }
}
#preise .hp-price-sum::after {
  inset: -4px;
  border-radius: 26px;
  border: 1.5px solid rgb(245 185 66 / .8);
  box-shadow: 0 0 18px rgb(245 158 11 / .3);
}
#preise .hp-price-sum.is-hit::after { animation: hp-price-soft-glow 1.2s ease-out; }

/* Wellen-Leinwand über die ganze Rubrik, hinter dem Inhalt (.hp-price liegt darüber); 1 Leinwandpixel je CSS-Pixel,
   ganzzahlige Quadrate, auf Retina scharf vergrößert */
#preise .hp-price-wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 72px, #000 calc(100% - 72px), transparent),
    linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent, #000 72px, #000 calc(100% - 72px), transparent),
    linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-composite: intersect;
}

/* Paket-Karte. Klebt unter der Kopfzeile; ist sie höher als der Platz darunter, setzt preise.js --sum-top so,
   dass sie mit der Unterkante klebt (Summen und „Angebot anfordern“ bleiben sichtbar). */
#preise .hp-price-sum {
  position: sticky;
  top: var(--sum-top, 5.2rem);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
  padding: 1.3rem 1.3rem 1.15rem;
  border-radius: 22px;
  color: #f4f1ea;
  background:
    radial-gradient(120% 70% at 100% 0%, rgb(91 77 255 / .28), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgb(245 158 11 / .16), transparent 60%),
    #1b3661;
  box-shadow: 0 26px 60px rgb(27 54 97 / .3);
  transition: opacity .6s ease var(--rd, 0s), translate .8s cubic-bezier(.16,1,.3,1) var(--rd, 0s);
}
#preise .hp-price-sum-k { color: rgb(244 241 234 / .7); margin: 0; }
#preise .hp-price-users {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
#preise .hp-price-users label {
  font-size: .9rem;
  font-weight: 600;
  margin: 0;
}
#preise .hp-price-stepper {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  padding: .2rem;
}
#preise .hp-price-stepper button {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
#preise .hp-price-stepper button:hover { background: rgb(255 255 255 / .14); }
#preise .hp-price-stepper button:active { transform: scale(.86); }
#preise .hp-price-stepper button:focus-visible,
#preise .hp-price-stepper input:focus-visible,
#preise .hp-price-all:focus-visible {
  outline: 2px solid #f5b942;
  outline-offset: 2px;
}
#preise .hp-price-stepper input {
  width: 3.2rem;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  font: 700 1.05rem Outfit, sans-serif;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
#preise .hp-price-stepper input::-webkit-outer-spin-button,
#preise .hp-price-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#preise .hp-price-per {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  padding-top: .2rem;
}
#preise .hp-price-per strong {
  display: inline-block;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
#preise .hp-price-per span { font-size: .85rem; color: rgb(244 241 234 / .72); }
#preise .hp-price-day {
  margin: -.55rem 0 0 !important;
  font-size: .84rem !important;
  color: #f5c66a !important;
}
#preise .is-bump { animation: hp-price-bump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes hp-price-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

#preise .hp-price-meter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
#preise .hp-price-meter i {
  height: 6px;
  border-radius: 99px;
  background: rgb(255 255 255 / .14);
  overflow: hidden;
  position: relative;
}
#preise .hp-price-meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #f5c66a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1) calc(var(--n, 0) * 45ms);
}
#preise .hp-price-meter i.is-on::after { transform: scaleX(1); }
#preise .hp-price-progress { display: grid; gap: .4rem; }
#preise .hp-price-progress-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  font-size: .8rem;
  color: rgb(244 241 234 / .75);
  min-height: 1.5rem;
}
#preise .hp-price-progress.is-full [data-price-out="count"] { color: #f5c66a; font-weight: 600; }
#preise .hp-price-progress.is-full [data-price-out="count"]::before {
  content: "\2726";
  display: inline-block;
  margin-right: .35rem;
  animation: hp-price-twinkle 2.4s ease-in-out infinite;
}
@keyframes hp-price-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  50% { opacity: .55; transform: scale(.8) rotate(45deg); }
}
#preise .hp-price-all {
  border: 0;
  border-radius: 999px;
  padding: .2rem .65rem;
  font: 600 .76rem Outfit, sans-serif;
  color: #1b3661;
  background: #f5c66a;
  cursor: pointer;
  transition: transform .2s ease;
}
#preise .hp-price-all:hover { transform: scale(1.05); }

#preise .hp-price-rows {
  margin: 0;
  display: grid;
  gap: .4rem;
  padding-top: .8rem;
  border-top: 1px solid rgb(255 255 255 / .14);
}
/* Zeilen in drei Spalten (Nutzer 07.10.2026: sauberer): Posten links, Rechnung leise davor, Betrag rechtsbündig in fester
   Breite, damit Rechnungen und Beträge in beiden Blöcken untereinander stehen */
#preise .hp-price-row {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-size: .86rem;
  color: rgb(244 241 234 / .8);
}
#preise .hp-price-row[hidden] { display: none; }
#preise .hp-price-row dt { flex: 1 1 auto; min-width: 0; font-weight: 400; }
#preise .hp-price-row dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
#preise .hp-price-row .hp-price-calc { font-size: .78rem; color: rgb(244 241 234 / .5); }
#preise .hp-price-row:not(.hp-price-total) dd:last-child {
  min-width: 4.9rem;
  text-align: right;
  color: #f4f1ea;
}
#preise .hp-price-total {
  margin-top: .2rem;
  padding-top: .55rem;
  border-top: 1px dashed rgb(255 255 255 / .18);
  color: #fff;
  font-size: 1rem;
  align-items: baseline;
}
#preise .hp-price-total dt { font-weight: 600; }
#preise .hp-price-total dd { font-size: 1.35rem; font-weight: 700; display: inline-block; }

/* Einmalig (Server-Bereitstellung, Einrichtung und Schulung): eigener Block unter dem Monat, nur wenn etwas davon gewählt ist */
#preise .hp-price-once {
  display: grid;
  gap: .45rem;
  padding-top: .75rem;
  border-top: 1px solid rgb(255 255 255 / .14);
}
#preise .hp-price-once[hidden] { display: none; }
#preise .hp-price-once .hp-price-rows { padding-top: 0; border-top: 0; }
#preise .hp-price-once .hp-price-total dd { font-size: 1.1rem; }

#preise .hp-price-cta {
  position: relative;
  display: block;
  margin-top: .2rem;
  text-decoration: none;
  --BG_color: #ffffff;
  --color: #1b3661;
}
#preise .hp-price-cta .fan-chip-face {
  gap: .5rem;
  padding: .85rem 1.1rem;
  font-weight: 650;
  font-size: 1rem;
  color: #1b3661;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
#preise .hp-price-cta:hover .fan-chip-face { transform: translateY(-1px); }
#preise .hp-price-cta .fan-chip-face i { transition: transform .35s cubic-bezier(.16,1,.3,1); }
#preise .hp-price-cta:hover .fan-chip-face i { transform: translate(3px, -3px) rotate(8deg); }
#preise .hp-price-cta:focus-visible { outline: 2px solid #f5b942; outline-offset: 4px; border-radius: 999px; }
#preise .hp-price-note {
  margin: -.3rem 0 0 !important;
  text-align: center;
  font-size: .76rem !important;
  color: rgb(244 241 234 / .62) !important;
}

/* Niedrige Laptop-Fenster (1366×768 hat rund 657 px Fensterhöhe): Paket-Karte kompakter, ohne die Zeile „rund … am Tag“,
   damit sie auch mit allem Gewählten samt Block „Einmalig“ ganz ins Bild passt */
@media (min-width: 1100px) and (max-height: 780px) {
  #preise .hp-price-sum { gap: .6rem; padding: 1.05rem 1.2rem .95rem; }
  #preise .hp-price-per strong { font-size: 2.3rem; }
  #preise .hp-price-day { display: none; }
  #preise .hp-price-rows { gap: .28rem; padding-top: .6rem; }
  #preise .hp-price-row { font-size: .82rem; }
  #preise .hp-price-total dd { font-size: 1.2rem; }
  #preise .hp-price-once { gap: .35rem; padding-top: .55rem; }
  #preise .hp-price-once .hp-price-rows { padding-top: 0; }
  #preise .hp-price-once .hp-price-total dd { font-size: 1.02rem; }
  #preise .hp-price-cta .fan-chip-face { padding: .62rem 1.1rem; }
}

/* Einflug beim ersten Erscheinen (nur Desktop, preise.js setzt --rd je Element) */
#preise.is-pre .hp-price-head,
#preise.is-pre .hp-price-card,
#preise.is-pre .hp-price-sum,
#preise.is-pre .hp-price-sub-k {
  opacity: 0;
  translate: 0 22px;
}
#preise .hp-price-head,
#preise .hp-price-sub-k {
  transition: opacity .6s ease var(--rd, 0s), translate .8s cubic-bezier(.16,1,.3,1) var(--rd, 0s);
}
#preise.is-pre .hp-price-sum { translate: 26px 0; }

/* Tablet und schmaler: Paket-Karte als Leiste, die unten klebt */
@media (max-width: 1099.98px) {
  #preise .hp-price-layout { grid-template-columns: minmax(0, 1fr); }
  #preise .hp-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #preise .hp-price-sum {
    top: auto;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "per users"
      "total cta"
      "note note";
    gap: .55rem .9rem;
    align-items: center;
    padding: .85rem 1rem .7rem;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgb(27 54 97 / .35);
  }
  #preise .hp-price-sum-k,
  #preise .hp-price-day,
  #preise .hp-price-progress { display: none; }
  #preise .hp-price-users { grid-area: users; }
  #preise .hp-price-users label { display: none; }
  #preise .hp-price-per { grid-area: per; padding: 0; gap: 0 .4rem; }
  #preise .hp-price-per strong { font-size: 1.6rem; }
  #preise .hp-price-per span { font-size: .74rem; }
  #preise .hp-price-rows { grid-area: total; padding: 0; border: 0; }
  #preise .hp-price-row:not(.hp-price-total) { display: none; }
  #preise .hp-price-total { margin: 0; padding: 0; border: 0; flex-direction: column; gap: 0; }
  #preise .hp-price-total dt { font-size: .74rem; font-weight: 400; color: rgb(244 241 234 / .72); }
  #preise .hp-price-total dd { font-size: 1.15rem; }
  #preise .hp-price-cta { grid-area: cta; margin: 0; }
  #preise .hp-price-cta .fan-chip-face { padding: .65rem 1rem; font-size: .9rem; }
  #preise .hp-price-note { grid-area: note; margin: 0 !important; font-size: .7rem !important; }
  #preise .hp-price-stepper button { width: 1.8rem; height: 1.8rem; }
  #preise .hp-price-stepper input { width: 2.6rem; font-size: .95rem; }
  #preise .hp-price-sum.has-once {
    grid-template-areas:
      "per users"
      "total cta"
      "once once"
      "note note";
  }
  #preise .hp-price-once { grid-area: once; padding: 0; border: 0; gap: 0; }
  #preise .hp-price-once .hp-price-rows { grid-area: auto; }
  #preise .hp-price-once .hp-price-total { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: .4rem; }
  #preise .hp-price-once .hp-price-total dt { flex: none; }
  #preise .hp-price-once .hp-price-total dd { font-size: .86rem; }
  /* die Zähler in den Karten behalten ihre Größe */
  #preise .hp-price-qty .hp-price-stepper button { width: 1.75rem; height: 1.75rem; }
  #preise .hp-price-qty .hp-price-stepper input { width: 2.2rem; }
}

/* Handy: Karten untereinander, kompakter */
@media (max-width: 767.98px) {
  #preise.scene--board { padding-bottom: 1.2rem; }
  #preise .hp-price-head { margin-bottom: 1.2rem; }
  #preise .hp-price-head p { font-size: .98rem !important; }
  #preise .hp-price-grid,
  #preise .hp-price-trade,
  #preise .hp-price-extras { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  #preise .hp-price-card { padding: .95rem 1rem .9rem; }
  #preise .hp-price-icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
  }
  #preise .hp-price-card h3 { font-size: 1.1rem !important; }
  #preise .hp-price-lead { margin: .6rem 0 .55rem !important; }
  #preise .hp-price-feats {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin-bottom: .75rem;
  }
  #preise .hp-price-feats li { font-size: .82rem; }
  #preise .hp-price-specs { margin-bottom: .75rem; }
  #preise .hp-price-tag { padding-top: .6rem; }
  #preise .hp-price-tag strong { font-size: 1.4rem; }
  #preise .hp-price-toggle { top: .85rem; right: .85rem; }
  #preise .hp-price-sum { margin-inline: -.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  #preise .hp-price-card,
  #preise .hp-price-tag strong::after,
  #preise .hp-price-icon,
  #preise .hp-price-meter i::after,
  #preise .hp-price-mark { transition-duration: .01s !important; transition-delay: 0s !important; }
  #preise .is-pop .hp-price-toggle,
  #preise .is-pop .hp-price-icon,
  #preise .is-pop .hp-price-icon i,
  #preise .is-pop .hp-price-tag strong,
  #preise .is-pop .hp-price-tag strong::after,
  #preise .is-bump,
  #preise .hp-price-led,
  #preise .hp-price-progress.is-full [data-price-out="count"]::before { animation: none !important; }
  #preise .hp-price-delta,
  #preise .hp-price-wave { display: none; }
  #preise .hp-price-card.is-glow::after,
  #preise .hp-price-card.is-pulse,
  #preise .hp-price-card.is-pulse::after,
  #preise .hp-price-card.is-hint .hp-price-toggle,
  #preise .hp-price-sum.is-hit::after { animation: none !important; }
  #preise .hp-price-card[data-price-item] > * { transition-duration: .01s !important; }
  #preise .hp-price-lock,
  #preise .hp-price-hint { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Darkmode */
html[data-bs-theme="dark"] #preise .hp-price-head h2,
html[data-bs-theme="dark"] #preise .hp-price-card h3,
html[data-bs-theme="dark"] #preise .hp-price-tag strong { color: #e6edf3 !important; }
html[data-bs-theme="dark"] #preise .hp-price-head p,
html[data-bs-theme="dark"] #preise .hp-price-lead { color: #9ca3af !important; }
html[data-bs-theme="dark"] #preise .hp-price-feats li,
html[data-bs-theme="dark"] #preise .hp-price-specs li { color: #c9d1d9; }
html[data-bs-theme="dark"] #preise .k,
html[data-bs-theme="dark"] #preise .hp-price-brand,
html[data-bs-theme="dark"] #preise .hp-price-tag span,
html[data-bs-theme="dark"] #preise .hp-price-specs small,
html[data-bs-theme="dark"] #preise .hp-price-fine { color: #8b949e; }
html[data-bs-theme="dark"] #preise .hp-price-sub-k::after { background: linear-gradient(90deg, #30363d, transparent); }
html[data-bs-theme="dark"] #preise .hp-price-card {
  --acc-ui: color-mix(in srgb, var(--acc) 62%, #ffffff);
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}
html[data-bs-theme="dark"] #preise .hp-price-card.is-on {
  border-color: color-mix(in srgb, var(--acc-ui) 30%, #30363d);
  box-shadow: 0 12px 30px rgb(0 0 0 / .3);
}
html[data-bs-theme="dark"] #preise .hp-price-card--base.is-on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc-ui) 5%, #161b22) 0%, #161b22 58%);
}
html[data-bs-theme="dark"] #preise .hp-price-lock {
  background: #0d1117;
  border-color: color-mix(in srgb, var(--acc-ui) 45%, #0d1117);
}
html[data-bs-theme="dark"] #preise .hp-price-hint { background: #e6edf3; color: #0d1117; }
html[data-bs-theme="dark"] #preise .hp-price-hint::after { border-top-color: #e6edf3; }
html[data-bs-theme="dark"] #preise .hp-price-card--base .hp-price-brand b { color: var(--acc-ui); }
html[data-bs-theme="dark"] #preise .hp-price-card[data-price-item]:not(.is-on) { background: #12161c; }
html[data-bs-theme="dark"] #preise .hp-price-card[data-price-item]:not(.is-on).is-lit { background: #161b22; }
html[data-bs-theme="dark"] #preise .hp-price-icon { background: color-mix(in srgb, var(--acc-ui) 14%, transparent); }
html[data-bs-theme="dark"] #preise .hp-price-tag { border-top-color: #30363d; }
html[data-bs-theme="dark"] #preise .hp-price-toggle {
  background: #0d1117;
  border-color: #3d444d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] #preise .hp-price-card.is-on .hp-price-toggle {
  background: var(--acc-ui);
  border-color: var(--acc-ui);
  color: #0d1117;
}
html[data-bs-theme="dark"] #preise .hp-price-qty label { color: #9ca3af; }
html[data-bs-theme="dark"] #preise .hp-price-qty .hp-price-stepper {
  background: #0d1117;
  box-shadow: inset 0 0 0 1px #3d444d;
}
html[data-bs-theme="dark"] #preise .hp-price-qty .hp-price-stepper button,
html[data-bs-theme="dark"] #preise .hp-price-qty .hp-price-stepper input { color: #e6edf3; }
html[data-bs-theme="dark"] #preise .hp-price-qty .hp-price-stepper button:hover { background: color-mix(in srgb, var(--acc-ui) 18%, transparent); }
html[data-bs-theme="dark"] #preise .hp-price-sum {
  background:
    radial-gradient(120% 70% at 100% 0%, rgb(123 109 255 / .26), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgb(245 158 11 / .12), transparent 60%),
    #1a2942;
  box-shadow: 0 0 0 1px #30363d, 0 26px 60px rgb(0 0 0 / .45);
}
html[data-bs-theme="dark"] #preise .hp-price-cta .fan-chip-face {
  background: #e6edf3;
  color: #0d1117;
}

/* Link zur Landingpage des Moduls (Nutzer 13.10.2026), schaltet die Karte nicht um (preise.js) */
#preise .hp-price-more {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: -.4rem 0 .9rem;
  color: var(--acc-ui);
  font-size: .86rem;
  font-weight: 650;
  text-decoration: none;
}
#preise .hp-price-more:hover { text-decoration: underline; }
#preise .hp-price-more .bi { transition: transform .15s ease; }
#preise .hp-price-more:hover .bi { transform: translateX(2px); }