/* =================================================================================================
   Die Startseite (Pages/Index.cshtml)

   Keine einzige Farbe steht hier als Zahlenwert - alles kommt aus den Tokens in theme.css (siehe
   CLAUDE.md, Abschnitt "Design"). Die dunklen Fenster (Live-Anzeige, Code, Terminal) bekommen
   ihre Farben aus dem Token-Bereich .fenster-dunkel in theme.css: derselbe Satz wie im dunklen
   Design, auch wenn die Seite gerade hell ist.
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   Vollbreite Baender

   Das Layout legt den Inhalt in einen .container. Die Baender der Startseite (abgesetzter Grund,
   Raster hinter dem Hero) sollen aber bis an den Rand reichen. Der negative Aussenabstand holt
   das Band aus dem Container heraus, der Innenabstand stellt die Breite des Inhalts wieder her.
   100vw schliesst die Bildlaufleiste mit ein - ohne overflow-x: clip gaebe es deshalb einen
   waagerechten Balken; geclippt wird nur, was ohnehin ueber den Rand ragt.
   ------------------------------------------------------------------------------------------------- */

body:has(.lp-seite) {
  overflow-x: clip;
}

.lp-seite {
  color: var(--ink2);
}

.lp-band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  border-top: 1px solid var(--line);
}

.lp-band-grund {
  background-color: var(--bg2);
}

.lp-abschnitt {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.lp-kennung {
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
  color: var(--accent-text);
}

.lp-seite h2.lp-ueberschrift,
.lp-seite h1.lp-ueberschrift {
  margin: 1rem 0 0;
  max-width: 54rem;
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.lp-seite h3 {
  color: var(--ink);
}

.lp-hinweis {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--dim);
}

/* Der Akzent im Text einer Ueberschrift: im hellen Design das dunkle Ocker, nicht das Gelb. */
.lp-akzent {
  color: var(--accent-text);
}

/* -------------------------------------------------------------------------------------------------
   Knoepfe

   Die Fuellung des Hauptknopfs ist in beiden Designs dieselbe Marke (--accent), der Text darauf
   immer --accent-ink. Der zweite Knopf ist eine Kontur in --line2, dem Rahmenton fuer
   Bedienelemente (3:1 gegen alle Flaechen, von ThemeContrastTests geprueft).
   ------------------------------------------------------------------------------------------------- */

.lp-knopf,
.lp-knopf-rand {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.lp-knopf {
  background-color: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
}

.lp-knopf:hover,
.lp-knopf:focus-visible {
  color: var(--accent-ink);
  text-decoration: underline;
}

.lp-knopf-rand {
  border: 2px solid var(--line2);
  color: var(--ink);
  font-weight: 600;
}

.lp-knopf-rand:hover,
.lp-knopf-rand:focus-visible {
  color: var(--ink);
  background-color: var(--panel);
  text-decoration: underline;
}

.lp-knopf-gross {
  padding: 1.1rem 2.4rem;
  font-size: 1.25rem;
}

.lp-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------------------------------
   Hero mit Folien

   Alle sieben Folien stehen im HTML, die uebrigen sechs mit hidden. Die Mindesthoehe haelt den
   Platz fuer die hoechste Folie frei, damit beim Wechsel nichts darunter springt; sie ist je
   Breite gestuft, weil die Folien auf schmalen Schirmen untereinander stehen und viel hoeher sind.
   ------------------------------------------------------------------------------------------------- */

.lp-hero {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  padding-block: 2rem 1.5rem;
}

.lp-folien {
  min-height: 62rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 576px) {
  .lp-folien {
    min-height: 56rem;
  }
}

@media (min-width: 992px) {
  .lp-folien {
    min-height: 37rem;
  }
}

.lp-folie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3.5rem;
}

.lp-folie[hidden] {
  display: none;
}

.lp-folie > * {
  flex: 1 1 28rem;
  min-width: 0;
}

.lp-einblenden {
  animation: lp-einblenden 0.7s ease both;
}

@keyframes lp-einblenden {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-puls {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.lp-puls {
  animation: lp-puls 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-einblenden,
  .lp-puls {
    animation: none;
  }
}

.lp-titel {
  margin: 1.25rem 0 0;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.lp-titel-mittel {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
}

.lp-lead {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--mute2);
}

/* Die Steuerung: Pausenknopf, Punkte, Zaehler. Ohne JavaScript ist sie hidden (siehe landing.js). */
.lp-steuerung {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.lp-steuerung[hidden] {
  display: none;
}

.lp-pause {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.lp-pause .lp-sinnbild-weiter,
.lp-pause[data-pausiert] .lp-sinnbild-pause {
  display: none;
}

.lp-pause[data-pausiert] .lp-sinnbild-weiter {
  display: block;
}

.lp-pause svg {
  fill: currentColor;
}

.lp-punkte {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 44 Pixel Trefferflaeche, auch wenn der sichtbare Punkt nur 8 Pixel misst. */
.lp-punkt {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lp-punkt::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--dim);
}

.lp-punkt[aria-current="true"]::before {
  width: 36px;
  background-color: var(--accent);
}

.lp-zaehler {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  color: var(--dim);
}

.lp-vorteile {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
  color: var(--dim);
}

/* -------------------------------------------------------------------------------------------------
   Fenster (Live-Anzeige, Code, Terminal)

   .fenster-dunkel kommt aus theme.css und legt die dunklen Tokens an. Hier steht nur, was ein
   Fenster der Startseite zusaetzlich braucht. Die Darstellung der Live-Anzeige folgt der echten
   Seite /Simulator: Kasse links (--ecr), Terminal rechts (--pt), Uhrzeit in eckigen Klammern,
   "empfangen" und "gesendet" als Richtungswort - ein Ausgang (Ablehnung, Abbruch) in Blaugruen,
   nicht in Rot.
   ------------------------------------------------------------------------------------------------- */

.lp-fenster {
  background-color: var(--bg);
  color: var(--ink);
  border: 2px solid var(--line2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--schatten);
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.lp-fenster-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background-color: var(--bg2);
  color: var(--mute);
}

.lp-fenster-kopf .lp-titelzeile {
  flex: 1 1 auto;
}

.lp-fenster-rumpf {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-fenster-fuss {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lp-punkte-zier {
  display: inline-flex;
  gap: 0.375rem;
}

.lp-punkte-zier > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.lp-punkte-zier > span:nth-child(1) {
  background-color: var(--bad);
}

.lp-punkte-zier > span:nth-child(2) {
  background-color: var(--warn);
}

.lp-punkte-zier > span:nth-child(3) {
  background-color: var(--ok);
}

.lp-mini-knopf {
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--line2);
  border-radius: 999px;
  color: var(--mute2);
  font-size: 0.75rem;
}

/* Eine Zeile der Live-Anzeige. */
.lp-gruppe {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.lp-gruppe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.45rem 0.75rem;
  background-color: var(--teal-soft);
  border-bottom: 1px solid var(--teal-line);
}

.lp-gruppe-kopf .lp-uhr {
  color: var(--dim);
}

.lp-gruppe-kopf .lp-ausgang {
  color: var(--teal);
  font-weight: 600;
}

.lp-telegramm {
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--line);
}

.lp-telegramm:first-of-type {
  border-top: 0;
}

.lp-telegramm.lp-von-kasse {
  background-color: var(--ecr);
  text-align: left;
}

.lp-telegramm.lp-vom-terminal {
  background-color: var(--pt);
  text-align: right;
}

.lp-telegramm .lp-kopfzeile {
  color: var(--dim);
}

.lp-telegramm .lp-bytes {
  color: var(--ink);
  letter-spacing: 0.02em;
}

.lp-telegramm .lp-deutung {
  color: var(--mute2);
}

.lp-telegramm .lp-ausgang {
  color: var(--teal);
  font-weight: 600;
}

.lp-meldung {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--teal-line);
  border-radius: 12px;
  background-color: var(--teal-soft);
  color: var(--teal);
}

.lp-meldung-hinweis {
  border-color: var(--warn-line);
  background-color: var(--warn-soft);
  color: var(--warn);
}

/* Zeitachse der dritten Folie. */
.lp-zeitachse {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-zeitachse > li {
  position: relative;
  padding: 0 0 1.25rem 1.75rem;
}

.lp-zeitachse > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent);
}

.lp-zeitachse > li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.2rem;
  bottom: 0;
  width: 2px;
  background-color: var(--line2);
}

.lp-zeitachse > li:last-child::after {
  display: none;
}

.lp-zeitachse > li.lp-zu-terminal::before {
  background-color: var(--vio);
}

.lp-zeitachse > li.lp-ohne-antwort::before {
  background-color: var(--warn);
}

.lp-schweigen {
  border: 2px dashed var(--warn);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  background-color: var(--warn-soft);
}

.lp-schweigen strong {
  color: var(--warn);
}

.lp-modi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lp-modi > li {
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--line2);
  border-radius: 999px;
  color: var(--mute2);
}

.lp-modi > li.lp-modus-ok {
  color: var(--ok);
}

.lp-modi > li.lp-modus-ausgang {
  color: var(--teal);
}

.lp-modi > li.lp-modus-hinweis {
  color: var(--warn);
}

.lp-modi > li.lp-modus-gewaehlt {
  border-color: var(--teal);
  background-color: var(--teal-soft);
}

/* Code */
.lp-code {
  margin: 0;
  padding: 1.1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
}

.lp-code .lp-kommentar {
  color: var(--dim);
}

.lp-code .lp-befehl {
  color: var(--accent);
}

.lp-code .lp-text {
  color: var(--vio);
}

.lp-ergebnis {
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
  border-top: 1px solid var(--line);
  background-color: var(--bg2);
  color: var(--ok);
  font-size: 0.875rem;
  line-height: 1.7;
}

.lp-codefenster {
  min-width: 0;
}

/* Postman-Fenster */
.lp-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.lp-senden {
  margin-left: auto;
  padding: 0.25rem 1rem;
  border-radius: 8px;
  background-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.lp-antwort {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--bg2);
}

.lp-antwort .lp-status-ok {
  color: var(--ok);
  font-weight: 600;
}

/* Grafiken mit eigener Zeichnung */
.lp-terminal-bild {
  position: relative;
  width: 100%;
  max-width: 29rem;
  min-height: 31rem;
  margin-inline: auto;
}

.lp-terminal {
  position: absolute;
  right: 0;
  top: 0;
  width: 17.5rem;
  max-width: 62%;
  height: auto;
}

.lp-terminal-bild .lp-fenster {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20rem;
  max-width: 78%;
}

.lp-terminal .t-gehaeuse {
  fill: var(--panel);
  stroke: var(--line2);
  stroke-width: 3;
}

.lp-terminal .t-anzeige {
  fill: var(--bg);
}

.lp-terminal .t-marke {
  fill: var(--teal);
  font-family: var(--bs-font-monospace);
  font-size: 13px;
}

.lp-terminal .t-betrag {
  fill: var(--ink);
  font-weight: 800;
  font-size: 34px;
}

.lp-terminal .t-ausgang-grund {
  fill: var(--teal-soft);
}

.lp-terminal .t-ausgang {
  fill: var(--teal);
  font-weight: 800;
  font-size: 17px;
}

.lp-terminal .t-taste {
  fill: var(--mute-line);
}

.lp-terminal .t-abbruch {
  fill: var(--bad);
}

.lp-terminal .t-ok {
  fill: var(--ok);
}

/* Die Karte der siebten Folie folgt dem Design der Seite und ist kein Fenster. */
.lp-karte {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 1.75rem 1.9rem;
  box-shadow: var(--schatten);
}

.lp-karte-teil + .lp-karte-teil {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.lp-schalter {
  position: relative;
  flex: none;
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background-color: var(--line2);
}

.lp-schalter::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--panel);
}

.lp-schalter-zeile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.lp-schalter-zeile strong {
  display: block;
  font-size: 1.125rem;
  color: var(--ink);
}

.lp-schalter-zeile span {
  color: var(--mute);
  font-size: 0.9375rem;
}

.lp-marken {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.lp-marken > li {
  color: var(--ok);
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
}

.lp-pille {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 2px solid var(--line2);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.lp-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* -------------------------------------------------------------------------------------------------
   Abschnitte unterhalb des Hero
   ------------------------------------------------------------------------------------------------- */

.lp-raster {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.lp-kachel {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.75rem;
}

.lp-kachel h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.375rem;
}

.lp-kachel p {
  margin: 0;
  color: var(--mute);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.lp-kachel svg {
  display: block;
}

.lp-kachel .lp-nachweis {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

/* Bento: die erste Kachel doppelt breit. */
.lp-bento {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.lp-bento > li {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 2.25rem;
}

@media (min-width: 992px) {
  .lp-bento > li:first-child {
    grid-column: span 2;
  }
}

.lp-bento h3 {
  margin: 0.75rem 0;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.lp-bento p {
  margin: 0;
  max-width: 36rem;
  color: var(--mute2);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lp-etikett {
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}

.lp-bento .lp-modi {
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
}

.lp-weiter {
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--accent-text);
}

.lp-livebetrieb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3.5rem;
}

.lp-livebetrieb > * {
  flex: 1 1 26rem;
  min-width: 0;
}

.lp-livebetrieb p.lp-text-gross {
  margin: 1.5rem 0 0;
  max-width: 35rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--mute2);
}

.lp-lupe {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.lp-lupe .l-zeile {
  fill: var(--dim);
  font-family: var(--bs-font-monospace);
  font-size: 15px;
}

.lp-lupe .l-glas {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 2;
}

.lp-lupe .l-bytes {
  fill: var(--ink);
  font-family: var(--bs-font-monospace);
  font-size: 15px;
}

.lp-lupe .l-ausgang {
  fill: var(--teal);
  font-family: var(--bs-font-monospace);
  font-size: 15px;
  font-weight: 600;
}

.lp-lupe .l-ring,
.lp-lupe .l-stiel {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
}

.lp-lupe .l-ring {
  stroke-width: 10;
}

.lp-lupe .l-stiel {
  stroke-width: 16;
}

/* Vergleich als echte Tabelle */
.lp-vergleich {
  margin-top: 3rem;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
}

.lp-vergleich table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 1.0625rem;
}

.lp-vergleich th,
.lp-vergleich td {
  padding: 1.25rem 1.75rem;
  vertical-align: top;
  text-align: left;
}

.lp-vergleich thead th {
  background-color: var(--panel);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--mute);
}

.lp-vergleich thead th:last-child {
  color: var(--accent-text);
}

.lp-vergleich thead th:first-child {
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--dim);
}

.lp-vergleich tbody tr {
  border-top: 1px solid var(--line);
}

.lp-vergleich tbody tr:nth-child(even) {
  background-color: var(--row);
}

.lp-vergleich tbody th {
  font-weight: 600;
  color: var(--ink);
}

.lp-vergleich tbody td:nth-child(2) {
  color: var(--mute);
}

.lp-vergleich tbody td:nth-child(3) {
  color: var(--ink);
}

@media (max-width: 767.98px) {
  .lp-vergleich th,
  .lp-vergleich td {
    padding: 0.9rem 1rem;
  }
}

.lp-ehrlich {
  margin: 1.75rem 0 0;
  max-width: 47rem;
  color: var(--mute);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* So geht's */
.lp-schritte {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.lp-schritte > li {
  padding-top: 1.5rem;
  border-top: 3px solid var(--line2);
}

.lp-schritte > li:first-child {
  border-top-color: var(--accent);
}

.lp-nummer {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.lp-schritte > li:first-child .lp-nummer {
  color: var(--accent-text);
}

.lp-schritte h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.625rem;
}

.lp-schritte p {
  margin: 0;
  color: var(--mute);
  font-size: 1.125rem;
  line-height: 1.55;
}

.lp-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3.5rem;
}

.lp-pipeline > * {
  flex: 1 1 26rem;
  min-width: 0;
}

.lp-pipeline p {
  margin: 1.5rem 0 0;
  color: var(--mute2);
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* Preise */
.lp-preise {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.lp-tarif {
  display: flex;
  flex-direction: column;
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 2rem;
}

.lp-tarif-pro {
  border: 2px solid var(--accent);
  padding: calc(2rem - 1px);
}

.lp-tarif h3 {
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--mute);
}

.lp-tarif-pro h3 {
  color: var(--accent-text);
}

.lp-tarif-plus h3 {
  color: var(--vio);
}

.lp-tarif-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.lp-schild {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background-color: var(--accent);
  color: var(--accent-ink);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 600;
}

.lp-preis {
  margin: 0.75rem 0 0;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
}

.lp-takt {
  margin: 0;
  color: var(--mute);
  font-size: 1rem;
}

.lp-leistungen {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 1.0625rem;
  color: var(--ink2);
}

.lp-leistungen > li.lp-fehlt {
  color: var(--dim);
}

.lp-tarif .lp-kauf {
  margin-top: auto;
  padding-top: 1.75rem;
}

.lp-tarif .lp-kauf a {
  display: block;
  padding: 0.85rem;
  border-radius: 999px;
  border: 2px solid var(--line2);
  text-align: center;
  font-weight: 800;
  color: var(--ink);
}

.lp-tarif-pro .lp-kauf a {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.lp-tarif-plus .lp-kauf a {
  border-color: var(--vio);
  color: var(--vio2);
}

.lp-tarif .lp-kauf a:hover,
.lp-tarif .lp-kauf a:focus-visible {
  text-decoration: underline;
}

/* Vertrauensleiste */
.lp-vertrauen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.lp-vertrauen strong {
  display: block;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--ink);
}

.lp-vertrauen p {
  margin: 0.5rem 0 0;
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.55;
}

/* Abschluss */
.lp-abschluss {
  text-align: center;
}

.lp-abschluss h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.lp-abschluss p {
  margin: 1.25rem auto 0;
  max-width: 35rem;
  color: var(--mute2);
  font-size: 1.25rem;
  line-height: 1.55;
}

.lp-abschluss .lp-knopf {
  margin-top: 2.25rem;
}