/* ============================================================
   LUKON Fresh-Signature · Komponenten
   Header · Hero · Karten · Trust · Prozess · Pakete · FAQ
   ============================================================ */

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;   /* opak: Logo-Weißgrund verschmilzt exakt (multiply auf Weiß) */
  border-bottom: 2px solid var(--emerald);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.logo {
  display: flex;
  align-items: center;
  height: 74px;
  overflow: hidden;   /* Logo-JPEG hat Eigen-Weißraum — Überstand unter dem Header clippen */
}

/* Echtes Logo (JPEG auf Weiß) — multiply blendet den weißen Grund in helle Flächen ein */
.logo img {
  height: 116px;
  width: auto;
  mix-blend-mode: multiply;
  margin: -28px 0;   /* Bildmarke hat viel Eigen-Weißraum — optisch auf Nav-Höhe trimmen */
}

/* Header-Aktionen rechts: CTA + Burger (einziger Menü-Zugang, alle Breiten) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-burger {
  --bar: 2px;
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.nav-burger:hover { border-color: var(--green-mid); background: var(--mint); }
.nav-burger:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* Drei Balken aus einem Element: mittlerer = Box-Shadow-freier Kern */
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: var(--bar);
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.2s;
}

.nav-burger span { top: 50%; margin-top: calc(var(--bar) / -2); }
.nav-burger span::before,
.nav-burger span::after { content: ""; left: 0; transform: none; }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }

/* ---------- Menü-Panels („Stack": Ebene N schiebt sich neben Ebene N-1) ---------- */

.lm-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}

.lm-nav.is-open { visibility: visible; pointer-events: auto; }

/* Overlay in Tannengrün (--forest-deep #062218) — gleicher Farbwert, nur transparent */
.lm-nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 34, 24, 0.72);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  cursor: pointer;
}

.lm-nav.is-open .lm-nav-overlay { opacity: 1; }

.lm-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(410px, 100vw);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-3) var(--space-4);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--lm-slide) var(--lm-ease),
              visibility 0s linear var(--lm-slide);
}

/* Timing des Menü-Aufbaus an einer Stelle.
   --lm-ease klingt schnell aus (statt symmetrisch ease-in-out): das Panel
   schnappt herein und bremst weich — dadurch wirkt der Aufbau dynamisch. */
.lm-nav {
  --lm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lm-slide: 0.42s;
  --lm-step: 55ms;    /* Abstand zwischen zwei Stufen */
  --lm-base: 90ms;    /* Vorlauf: Inhalt startet, wenn das Panel schon unterwegs ist */
}

/* Ebene 0 = dunkle Konsole (Bühnen-Sprache der Trust-/CTA-Bänder) */
.lm-panel-0 {
  background: linear-gradient(180deg, var(--forest-deep-2), var(--forest-deep));
  border-right: 1px solid rgba(53, 158, 115, 0.25);
}

/* Ebene 1 = warme Sand-Bühne, damit die Staffelung ohne neue Farbe lesbar bleibt */
.lm-panel-1 {
  background: var(--sand);
  border-right: 1px solid var(--sand-deep);
  box-shadow: var(--shadow-lift);
}

.lm-nav.is-open .lm-panel-0 {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--lm-slide) var(--lm-ease), visibility 0s;
}

/* Unterebene offen: Ebene 0 bleibt als 205px-Streifen sichtbar */
.lm-nav.is-sub .lm-panel-1[data-open] {
  transform: translateX(205px);
  visibility: visible;
  transition: transform var(--lm-slide) var(--lm-ease), visibility 0s;
}

.lm-nav.is-sub .lm-panel-0 { filter: brightness(0.82); }

/* Kopfzeile: Schließen (Ebene 0) bzw. Zurück (Ebene 1) */
.lm-panel-head { margin-bottom: var(--space-4); }

/* Alle Stufen starten links versetzt und verblasst — die Reihenfolge macht
   erst der transition-delay weiter unten: Kopf → Label → Einträge → Fußlinks */
.lm-panel-head,
.lm-panel-title,
.lm-meta {
  opacity: 0;
  transform: translateX(-26px);
}

.lm-close,
.lm-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0;
}

.lm-close { color: var(--dim-on-dark); }
.lm-close:hover { color: #ffffff; }
.lm-back { color: var(--text-dim); }
.lm-back:hover { color: var(--ink); }
.lm-close:focus-visible,
.lm-back:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 3px; }

.lm-panel-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* --green-mid käme auf dem Panel nur auf 4,2:1 — für 11px Text zu wenig (AA: 4,5) */
.lm-panel-0 .lm-panel-title { color: var(--dim-on-dark); }
.lm-panel-1 .lm-panel-title { color: var(--text-dim); }

.lm-list { list-style: none; }

.lm-list > li > a,
.lm-list > li > button {
  display: flex;
  align-items: center;
  /* flex-start, nicht space-between: der Status-Punkt des aktiven Eintrags ist
     ein Flex-Item und würde den Text sonst an den rechten Panelrand drücken */
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 0.75rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(226, 234, 228, 0.14);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
  /* Stagger beim Öffnen — Position kommt als --i aus dem Markup */
  opacity: 0;
  transform: translateX(-26px);
}

.lm-panel-1 .lm-list > li > a { border-bottom-color: var(--sand-deep); }

.lm-panel-0 .lm-list > li > a,
.lm-panel-0 .lm-list > li > button { color: var(--text-on-dark); }
.lm-panel-1 .lm-list > li > a { color: var(--text); }

.lm-panel-0 .lm-list > li > a:hover,
.lm-panel-0 .lm-list > li > button:hover { color: #ffffff; padding-left: 6px; }
.lm-panel-1 .lm-list > li > a:hover { color: var(--emerald); padding-left: 6px; }

.lm-list a:focus-visible,
.lm-list button:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }

/* Aktive Seite / aktiver Pfad — der grüne Signal-Punkt markiert, der Text bleibt
   auf der dunklen Ebene weiß: Smaragd auf Tannengrün käme nur auf 4,2:1. */
.lm-panel-0 .lm-list > li > a[aria-current="page"],
.lm-panel-0 .lm-list > li > button[data-active] { color: #ffffff; }
.lm-panel-1 .lm-list > li > a[aria-current="page"] { color: var(--emerald); }

.lm-list a[aria-current="page"]::before,
.lm-list button[data-active]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-mid);
  box-shadow: 0 0 8px rgba(53, 158, 115, 0.8);
  margin-right: 0.55rem;
  flex: 0 0 6px;
}

.lm-panel-1 .lm-list a[aria-current="page"] { color: var(--emerald); }

/* Chevron kennzeichnet Einträge mit Unterebene — sitzt rechts am Panelrand */
.lm-chevron { flex: 0 0 auto; margin-left: auto; transition: transform 0.2s; }
.lm-list button:hover .lm-chevron { transform: translateX(3px); }

/* Rechtliches abgesetzt am Panel-Fuß */
.lm-meta {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.lm-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;        /* WCAG 2.2 Zielgröße — vorher nur 21px hoch */
  padding: 0.2rem 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--dim-on-dark);
  transition: color 0.2s;
}

.lm-meta a:hover, .lm-meta a[aria-current="page"] { color: var(--green-mid); }
.lm-meta a:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 3px; }

/* Gestaffelter Aufbau, sobald ein Panel offen ist.
   Reihenfolge: Kopfzeile (Stufe 0) → Label (1) → Einträge (2…n) → Fußlinks.
   Die Einträge tragen ihre Position als --i im Markup, +2 macht darüber Platz. */
.lm-nav.is-open .lm-panel-0 .lm-panel-head,
.lm-nav.is-open .lm-panel-0 .lm-panel-title,
.lm-nav.is-open .lm-panel-0 .lm-meta,
.lm-nav.is-open .lm-panel-0 .lm-list > li > a,
.lm-nav.is-open .lm-panel-0 .lm-list > li > button,
.lm-nav.is-sub .lm-panel-1[data-open] .lm-panel-head,
.lm-nav.is-sub .lm-panel-1[data-open] .lm-panel-title,
.lm-nav.is-sub .lm-panel-1[data-open] .lm-list > li > a {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease-out,
              transform 0.55s var(--lm-ease),
              color 0.2s, padding-left 0.2s;
}

.lm-nav.is-open .lm-panel-0 .lm-panel-head,
.lm-nav.is-sub .lm-panel-1[data-open] .lm-panel-head {
  transition-delay: var(--lm-base);
}

.lm-nav.is-open .lm-panel-0 .lm-panel-title,
.lm-nav.is-sub .lm-panel-1[data-open] .lm-panel-title {
  transition-delay: calc(var(--lm-base) + var(--lm-step));
}

.lm-nav.is-open .lm-panel-0 .lm-list > li > a,
.lm-nav.is-open .lm-panel-0 .lm-list > li > button,
.lm-nav.is-sub .lm-panel-1[data-open] .lm-list > li > a {
  transition-delay: calc(var(--lm-base) + (var(--i, 0) + 2) * var(--lm-step));
}

/* Fußlinks schließen den Aufbau ab (Ebene 0 hat 4 Einträge → Stufe 6) */
.lm-nav.is-open .lm-panel-0 .lm-meta {
  transition-delay: calc(var(--lm-base) + 6 * var(--lm-step));
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s, background 0.18s, border-color 0.18s;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(180deg, #158155, var(--emerald));
  color: #ffffff;
  box-shadow: 0 1px 0 #ffffff30 inset, 0 3px 10px -5px #0e654347;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 #ffffff30 inset, 0 7px 18px -7px #0e654373;
}

/* Glanz-Streifen läuft beim Hover einmal durch */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, #ffffff4d, transparent);
    transform: skewX(-18deg);
  }

  .btn-primary:hover::after { animation: btn-shine 0.7s ease; }

  @keyframes btn-shine { to { left: 130%; } }
}

/* Terminal-Button: Mono-Schrift, 1px-Kante, füllt mit Frost-Mint */
.btn-ghost {
  border-color: #d5ddd4;
  color: var(--ink);
  background: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
}

.btn-ghost:hover {
  border-color: var(--green-mid);
  color: var(--green-ink);
  background: var(--mint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* Sekundär-CTA mit Pfeil — schlicht, ohne uiverse-Reveal-Effekt */
.btn-reveal {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--emerald);
  border-radius: var(--radius-sm);
  background: #ffffff;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--green-ink);
  transition: background 0.18s, transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.btn-reveal:hover {
  background: var(--mint);
  transform: translateY(-2px);
}

.btn-reveal svg {
  fill: none;
  stroke: var(--green-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-reveal:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }

/* Send-Button — schlicht, ohne uiverse-Papierflieger-Effekt */
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  justify-self: start;   /* im .form-Grid nicht auf volle Breite strecken */
  padding-inline: 2rem;
}

.btn-send .svg-wrapper { display: block; }

.btn-send svg { display: block; fill: currentColor; }

.btn-send span { display: block; }

/* Menü mobil: Panels füllen die volle Breite und ersetzen einander,
   statt sich zu stapeln (der 205px-Streifen hätte hier keinen Platz). */
@media (max-width: 767px) {
  .lm-panel { width: 100vw; padding: var(--space-3) var(--space-2) var(--space-4); }
  .lm-nav.is-sub .lm-panel-1[data-open] { transform: translateX(0); }
  .lm-nav.is-sub .lm-panel-0 { filter: none; }
  .lm-list > li > a,
  .lm-list > li > button { font-size: 1.3rem; }
  .nav-cta { display: none; }   /* Platz für den Burger — CTA steht im Menü */
}

/* Reduzierte Bewegung: Zustände wechseln sofort, nichts fährt oder staffelt */
@media (prefers-reduced-motion: reduce) {
  .lm-nav,
  .lm-nav * {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Hero — glatte Bühne mit gerichtetem Lichtkegel (Design-Linie v2) ---------- */

.hero {
  padding: var(--space-5) 0 var(--space-4);
  position: relative;
  overflow: hidden;
  background:
    conic-gradient(from 205deg at 82% -8%, transparent 42%, #359e731c 50%, transparent 58%),
    linear-gradient(180deg, #ffffff, #f2f8f4);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
}

/* (Ziel-Ringe entfernt — User-Wunsch 2026-07-26: keine Kreise im Hintergrund.
   Der Lichtkegel im conic-gradient oben trägt die Bühne allein.)
   (Glas-Chip entfernt — User-Wunsch 2026-07-06: keine viereckigen Deko-Elemente) */

.hero .container { position: relative; z-index: 1; }
.hero .lead { margin: var(--space-3) 0; }
.hero-ctas { display: flex; gap: 1.4rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero-ctas { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; text-align: center; }
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */

.page-hero { padding: var(--space-4) 0 var(--space-3); }
.page-hero .lead { margin-top: var(--space-2); }

/* ---------- Karten / Grids ---------- */

.grid { display: grid; gap: var(--space-2); }

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Gruppentitel ueber einem Kartenraster.
   Vorher standen diese Zwischenueberschriften linksbuendig und ohne Rahmen
   ueber ihren drei Karten — sie lasen sich dadurch wie eine weitere Karte
   ohne Kasten statt wie eine Beschriftung des Blocks darunter.

   Jetzt eine eigene Leiste in der Kartensprache: gleiche Flaeche, gleicher
   Rahmen, gleicher Radius, gleicher Schatten. Der Text sitzt mittig, damit
   die Leiste als Kopf des Rasters liest und nicht als vierte Karte.

   Bewusst ein eigener Kasten statt nur `text-align: center`: ohne Rahmen
   schwebt eine zentrierte Zeile ueber dem Raster und wirkt verloren. */
.gruppe-titel {
  margin: var(--space-3) 0 var(--space-2);
  padding: .9rem 1.5rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.1rem 1.9rem;
  transition: border-color 0.2s, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s;
  box-shadow: var(--shadow-soft);
}

/* Hover = leiser Lift + Signal-Kante (Glow nur als Feedback, Design-Linie v2) */
a.card:hover {
  border-color: #7fc5a3;
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px #359e7326, var(--shadow-lift);
}

/* Mono-Node-Index oben rechts auf verlinkten Karten — stiller System-Charakter */
.grid { counter-reset: cardidx; }
.grid > a.card { counter-increment: cardidx; position: relative; }

.grid > a.card::after {
  content: "SYS/0" counter(cardidx);
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.08em;
  background: #edf6ef;
  border: 1px solid #d3e6da;
  border-radius: 4px;
  padding: 2px 8px;
}

/* Team-Notiz unter dem Prozess: folgt der zentrierten Sektionsachse statt
   linksbündig auszubrechen (ersetzt die früheren Inline-Styles) */
.team-note {
  margin-top: var(--space-2);
  /* exakt die Breite des Steps-Rasters darüber — schmaler riss die Karte
     ein Loch ins Layout (Judge R2), breiter bricht die Sektionsachse */
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.team-note p { color: var(--text-dim); margin: 0.5rem 0 0.9rem; }

/* Preis-/Rahmen-Anker auf Übersichtskarten: die eine entscheidungsrelevante
   Zahl direkt an der Karte, damit die Übersicht vergleichbar wird. */
/* Karten mit Faktzeile werden Spalten, damit die Zahl bei ungleich langen
   Texten trotzdem auf einer Linie sitzt (Vergleichbarkeit) */
.card:has(.card-fact) { display: flex; flex-direction: column; }

.card-fact {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--green-ink);
}

/* Icon-Sockel: gefastes Modul (45°-Cut = Signatur-Form), 0° Rotation */
.card .icon {
  width: 48px;
  height: 48px;
  clip-path: var(--cut-sm);
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ffffff;
  margin-bottom: var(--space-2);
  transition: filter 0.25s;
}

.card .icon svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

a.card:hover .icon { filter: drop-shadow(0 2px 6px #359e7366); }

.card h3 { margin-bottom: 0.6rem; }
.card p { color: #3f4c43; font-size: 0.99rem; text-wrap: balance; }

.card .more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1.35rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--green-ink);
}

a.card:hover .more { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Referenz-Karten: echte Site-Vorschau + Link ---------- */

.ref-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s;
}

.ref-card:hover {
  border-color: #7fc5a3;
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px #359e7326, var(--shadow-lift);
}

.ref-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--border);
}

.ref-card .ref-body { padding: 1.5rem 1.8rem 1.7rem; text-align: left; }

.ref-card .ref-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 0.45rem;
}

.ref-card h3 { margin-bottom: 0.45rem; }
.ref-card .ref-body > p:not(.ref-label) { color: #3f4c43; font-size: 0.97rem; text-wrap: balance; }

.ref-card .more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1.1rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--green-ink);
}

.ref-card:hover .more { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Trust-Leiste — Mint-Band ---------- */

/* Trust-Band = dunkles Forest-Kontrastband mit Aurora-Glows —
   schwebt als rundum gerundetes Panel auf dem Canvas (kein Streifen) */
.trust {
  border-radius: 16px;
  width: min(100% - 2rem, calc(var(--maxw) + 96px));
  position: relative;
  margin: var(--space-2) auto;
  /* vier kurze Kennzahlen brauchen keine space-4-Bühne (Judge R2) */
  padding: var(--space-3) 0;
  overflow: hidden;
  box-shadow: 0 24px 60px -44px #05442f80;
  background:
    radial-gradient(ellipse 50% 90% at 85% 0%, #359e7328 0%, transparent 60%),
    linear-gradient(140deg, var(--forest-deep-2), var(--forest-deep));
}

/* Animierte Datenlinie an der geraden Unterkante der Konsole */
.trust::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, #35e0a3b3 0 16px, transparent 16px 30px);
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .trust::after { animation: data-flow 2.6s linear infinite; }

  @keyframes data-flow { to { background-position: 300px 0; } }
}

.trust-items {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.trust-item { text-align: center; flex: 1; min-width: 140px; }

.trust-item strong {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.7rem;
  display: block;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 0 24px #359e7355;
}

.trust-item span {
  color: var(--dim-on-dark);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.trust-item + .trust-item { border-left: 1px solid #ffffff14; }

@media (max-width: 640px) {
  .trust-item { min-width: 46%; max-width: 50%; }
  .trust-item strong { font-size: 1.3rem; overflow-wrap: anywhere; }
}

/* ---------- Prozess — Kreis-Nummern, 2×2 ---------- */

.steps {
  counter-reset: step;
  margin-left: 0;   /* linksbündig an der Sektions-Achse (H2), nicht frei schwebend */
  margin-right: auto;
  max-width: 56rem !important;   /* übersteuert Inline-46rem des Skeletts */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* enger gesetzt: die vier Karten tragen je nur einen Satz, der weite
     Abstand ließ die Sektion flächiger wirken als ihr Inhalt hergibt */
  gap: var(--space-2);
}

/* Partner-Karte schließt direkt an den Prozess an — der frühere space-4-Abstand
   trennte sie optisch von der Sektion, zu der sie gehört */
.steps + .card { margin-top: var(--space-2) !important; }

/* Steps als ruhige Modul-Karten (Design-Linie v2: kein Mikro-Ornament) */
.step {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  padding: var(--space-2) 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.step > div { flex: 1; }

/* Schritt-Nummern als „Nodes": Mono-Ziffer im Blatt-Chip mit dashed Orbit-Ring */
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.98rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: var(--leaf);
  background: var(--gradient);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 2px 8px -3px #0e654359;
}

.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--text-dim); font-size: 0.99rem; text-wrap: balance; }

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Pakete ---------- */

.pricing .card { position: relative; display: flex; flex-direction: column; }

/* Preisraster mittig statt linkslastig (Inline-max-width 46rem bleibt) */
.pricing .grid { margin-left: auto; margin-right: auto; }
.pricing .container > p { text-align: center; color: var(--text); }

.pricing .featured {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px #cfe9db, var(--shadow-lift);
}

/* Alle Paket-CTAs in derselben Primär-Sprache (Judge-Konsens R1: keine
   gemischte Button-Hierarchie innerhalb der Preistabelle) */
.pricing .btn-ghost {
  background: linear-gradient(180deg, #158155, var(--emerald));
  color: #ffffff;
  border-color: transparent;
  font-family: var(--font);
  box-shadow: 0 1px 0 #ffffff30 inset, 0 3px 10px -5px #0e654347;
}

.pricing .btn-ghost:hover {
  background: linear-gradient(180deg, #158155, var(--emerald));
  color: #ffffff;
  box-shadow: 0 1px 0 #ffffff30 inset, 0 7px 18px -7px #0e654373;
}

/* „Beliebt" als integrierter Amber-Marker (Judge R2: weicher einbinden) */
.pricing .featured::before {
  content: "Beliebt";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #3a2c08;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.24rem 0.9rem;
  border-radius: 8px;
}

.price {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 600;
  margin: var(--space-1) 0;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.price small { font-size: 0.85rem; color: var(--text-dim); font-family: var(--font); font-weight: 500; }

.pricing ul { list-style: none; margin: var(--space-2) 0; flex: 1; }
.pricing li { padding: 0.35rem 0; color: var(--text-dim); font-size: 0.95rem; }
.pricing li::before { content: "✓  "; color: var(--green-ink); font-weight: 700; }

/* Anrechnungs-Marker: liest als Vorteil, nicht als Kleingedrucktes.
   Der Discovery-Preis wird sonst als Zusatzkosten missverstanden. */
.anrechnung {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin: 0 0 var(--space-1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #e4f3ec;
  color: var(--green-ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;   /* zweizeilige Pill wirkt klobig */
}

.anrechnung::before { content: "↺"; font-size: 0.9em; }

/* ---------- Stufen-Raster (Discovery ↔ MVP nach Projektgröße) ---------- */

.stufen {
  max-width: 46rem;
  margin: var(--space-2) auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.stufen-kopf,
.stufen-zeile {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.3rem;
}

.stufen-kopf {
  background: #f4f8f6;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.stufen-zeile + .stufen-zeile { border-top: 1px solid var(--border); }
.stufen-zeile strong { display: block; font-size: 1rem; color: var(--ink); }
.stufen-zeile small { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: var(--text-dim); }
.stufen-zeile span + span { font-family: var(--font-mono); font-size: 0.97rem; color: var(--ink); }

/* Schmal: Kopfzeile weg, jede Zeile wird zur Karte mit Inline-Labels */
@media (max-width: 640px) {
  .stufen-kopf { display: none; }
  .stufen-zeile { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.1rem 1.2rem; }
  .stufen-zeile span + span { display: flex; justify-content: space-between; gap: 1rem; }
  .stufen-zeile span + span::before {
    content: attr(data-label);
    font-family: var(--font);
    font-size: 0.86rem;
    color: var(--text-dim);
  }
}

/* ---------- FAQ ---------- */

details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s;
}

details[open] { border-color: #b5dcc8; box-shadow: inset 3px 0 0 var(--green-mid), var(--shadow-soft); }
details[open] summary { color: var(--green-ink); }

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
}

summary::-webkit-details-marker { display: none; }

/* Präzises Plus-Icon, dreht sich beim Öffnen zum × (Judge R2: statt Text-[+]) */
summary::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  margin-right: 0.7rem;
  background:
    linear-gradient(var(--green-mid) 0 0) center / 14px 2px no-repeat,
    linear-gradient(var(--green-mid) 0 0) center / 2px 14px no-repeat;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

details[open] summary::before { transform: rotate(45deg); }
details p { margin-top: var(--space-1); color: var(--text-dim); }


/* ---------- Kontaktformular: Status-Banner + Honeypot ---------- */
.form-status {
  display: none;
  margin-top: var(--space-2);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.form-status.show { display: block; }
.form-status.ok {
  background: var(--mint);
  border: 1px solid var(--green-mid);
  color: var(--green-ink);
}
.form-status.err {
  background: #fdf0ee;
  border: 1px solid #d9856f;
  color: #8a2f1d;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}