/* Zorvexgroup: eigenstaendiges CSS, kein Build-Schritt, kein Framework noetig.
   Basis-Tokens/Komponenten bewusst analog zum Lagersystem-Produkt gehalten
   (Wiedererkennungswert), erweitert um Marketing-/Shop-spezifische Klassen. */

:root {
  --background: #f8fafc;
  --card: #ffffff;
  --foreground: #0f172a;
  --muted-foreground: #64748b;
  --border: #e2e8f0;
  /* Industrial-Orange-Marke (Redesign 09.09.2026, an das Lagersystem
     angeglichen -- CEO-Wunsch: "verkaufsseite ... farben usw wie vom
     screenshot"). --primary war vorher Indigo (#4f46e5); da hier im Gegensatz
     zum Lagersystem schon ueberall dieselbe Primaerfarben-Variable als
     Marken-/CTA-Farbe verwendet wird, reicht ein Umfaerben der Tokens selbst
     -- keine Notwendigkeit, jede einzelne Stelle im CSS anzufassen.
     --accent-* zusaetzlich als Alias fuer Konsistenz mit dem Lagersystem-Namensraum. */
  --primary: #f97316;
  --primary-foreground: #431407;
  --ring: #94a3b8;
  --radius: 12px;
  --accent-soft: #fff2e6;
  --accent: #f97316; --accent-fg: #431407; --accent-bg: #fff2e6; --accent-bd: #fdba74;

  --slate-bg: #f1f5f9; --slate-fg: #334155; --slate-bd: #cbd5e1;
  --amber-bg: #fef3c7; --amber-fg: #92400e; --amber-bd: #fcd34d;
  --blue-bg: #dbeafe; --blue-fg: #1e40af; --blue-bd: #93c5fd;
  --indigo-bg: #e0e7ff; --indigo-fg: #3730a3; --indigo-bd: #a5b4fc;
  --emerald-bg: #d1fae5; --emerald-fg: #065f46; --emerald-bd: #6ee7b7;
  --gray-bg: #e5e7eb; --gray-fg: #374151; --gray-bd: #9ca3af;
  --red-bg: #fee2e2; --red-fg: #b91c1c; --red-bd: #fca5a5;
  --sky-bg: #e0f2fe; --sky-fg: #075985; --sky-bd: #7dd3fc;

  --red-50: #fef2f2; --red-700: #b91c1c;
  --amber-50: #fffbeb; --amber-700: #b45309;
  --emerald-50: #ecfdf5; --emerald-700: #047857;
}

[data-theme="dark"] {
  --background: #0a0a0c; --card: #17171b; --foreground: #f1f5f9;
  --muted-foreground: #94a3b8; --border: #2b2b30; --primary: #fb923c;
  --primary-foreground: #fff7ed; --ring: #52525b; --accent-soft: #3a1a06;
  --accent: #fb923c; --accent-fg: #fff7ed; --accent-bg: #3a1a06; --accent-bd: #c2410c;
  --slate-bg: #27272a; --slate-fg: #cbd5e1; --slate-bd: #52525b;
  --amber-bg: #451a03; --amber-fg: #fcd34d; --amber-bd: #92400e;
  --blue-bg: #172554; --blue-fg: #93c5fd; --blue-bd: #1e40af;
  --indigo-bg: #1e1b4b; --indigo-fg: #a5b4fc; --indigo-bd: #3730a3;
  --emerald-bg: #052e1f; --emerald-fg: #6ee7b7; --emerald-bd: #065f46;
  --gray-bg: #27272a; --gray-fg: #d4d4d8; --gray-bd: #52525b;
  --red-bg: #450a0a; --red-fg: #fca5a5; --red-bd: #b91c1c;
  --sky-bg: #082f49; --sky-fg: #7dd3fc; --sky-bd: #075985;
  --red-50: #2a0e0e; --red-700: #fca5a5;
  --amber-50: #2a1c05; --amber-700: #fcd34d;
  --emerald-50: #04241a; --emerald-700: #6ee7b7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0a0a0c; --card: #17171b; --foreground: #f1f5f9;
    --muted-foreground: #94a3b8; --border: #2b2b30; --primary: #fb923c;
    --primary-foreground: #fff7ed; --ring: #52525b; --accent-soft: #3a1a06;
    --accent: #fb923c; --accent-fg: #fff7ed; --accent-bg: #3a1a06; --accent-bd: #c2410c;
    --slate-bg: #27272a; --slate-fg: #cbd5e1; --slate-bd: #52525b;
    --amber-bg: #451a03; --amber-fg: #fcd34d; --amber-bd: #92400e;
    --blue-bg: #172554; --blue-fg: #93c5fd; --blue-bd: #1e40af;
    --indigo-bg: #1e1b4b; --indigo-fg: #a5b4fc; --indigo-bd: #3730a3;
    --emerald-bg: #052e1f; --emerald-fg: #6ee7b7; --emerald-bd: #065f46;
    --gray-bg: #27272a; --gray-fg: #d4d4d8; --gray-bd: #52525b;
    --red-bg: #450a0a; --red-fg: #fca5a5; --red-bd: #b91c1c;
    --sky-bg: #082f49; --sky-fg: #7dd3fc; --sky-bd: #075985;
    --red-50: #2a0e0e; --red-700: #fca5a5;
    --amber-50: #2a1c05; --amber-700: #fcd34d;
    --emerald-50: #04241a; --emerald-700: #6ee7b7;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
h1 { font-size: 30px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
p { margin: 0; }
.text-muted { color: var(--muted-foreground); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }

/* ---- Navigation / Footer (Marketing + Konto) ---------------------------- */
.wf-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.wf-nav-inner, .wf-footer-inner, .wf-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wf-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.wf-brand { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.brand-mark { display: block; border-radius: 6px; flex-shrink: 0; }
.wf-nav-links { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; }
.wf-nav-links a:not(.btn):hover { color: var(--primary); }
.wf-nav-icons { display: flex; align-items: center; gap: 8px; }
.wf-nav-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--foreground); align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 780px) {
  .wf-nav-inner { padding: 0 16px; }
  .wf-nav-toggle { display: flex; }
  .wf-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 39;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px; box-shadow: 0 16px 32px -12px rgba(0,0,0,.3);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .wf-nav-links.wf-nav-open { display: flex; }
  .wf-nav-links a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .wf-nav-links .btn { width: 100%; }
  .wf-nav-icons { align-self: flex-start; margin-top: 8px; }
}
.wf-footer { border-top: 1px solid var(--border); margin-top: 80px; padding: 0 0 28px; }
.wf-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted-foreground); }
.wf-footer-top { padding: 24px 0; border-bottom: 1px solid var(--border); justify-content: center; }
.wf-footer-inner:not(.wf-footer-top) { padding-top: 24px; }
.wf-newsletter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; text-align: center; }
.wf-newsletter-label { font-weight: 600; color: var(--foreground); font-size: 14px; }
.wf-newsletter-form { display: flex; gap: 8px; flex-shrink: 0; }
.wf-newsletter-form input[type="email"] { width: 220px; border: 1px solid var(--border); background: var(--background); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.wf-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.wf-footer-links a:hover { color: var(--primary); }
.wf-flash-wrap { max-width: 700px; margin: 0 auto; padding: 16px 24px 0; }
.wf-account-main { padding: 32px 0 64px; }

/* ---- Hero / Marketing-Sektionen ------------------------------------------ */
.hero-band { position: relative; overflow: hidden; padding-bottom: 20px; }
.hero-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(55% 65% at 50% -5%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 70%),
    radial-gradient(38% 50% at 88% 8%, color-mix(in srgb, #7c3aed 22%, transparent), transparent 70%),
    radial-gradient(32% 42% at 8% 18%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%);
}
.hero-band::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;
  width: min(680px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 45%, transparent), transparent);
}
.hero { position: relative; z-index: 1; padding: 90px 24px 0; text-align: center; max-width: 780px; margin: 0 auto; }
.hero .eyebrow { display: inline-block; background: var(--accent-soft); color: var(--primary); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; }
.hero h1 { font-size: 50px; margin-bottom: 18px; }
.hero p.lead { font-size: 18px; color: var(--muted-foreground); margin-bottom: 32px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
@media (max-width: 640px) { .hero h1 { font-size: 32px; } .hero { padding: 60px 20px 0; } }

/* ---- Kennzahlen-Leiste (Fakten statt erfundener Kundenzahlen) ---- */
.stat-strip { max-width: 900px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-strip .num { font-size: 28px; font-weight: 800; color: var(--primary); }
.stat-strip .lbl { font-size: 13px; color: var(--muted-foreground); margin-top: 4px; }
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---- Abschluss-CTA-Banner ---- */
.cta-banner { max-width: 1080px; margin: 24px auto 0; padding: 56px 32px; text-align: center; border-radius: 24px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #7c3aed)); }
.cta-banner h2 { color: var(--primary-foreground); margin-bottom: 10px; }
.cta-banner p { color: color-mix(in srgb, var(--primary-foreground) 85%, transparent); margin-bottom: 24px; }
.cta-banner .btn { background: var(--primary-foreground); color: var(--primary); }
.cta-banner .btn-outline { background: transparent; border-color: color-mix(in srgb, var(--primary-foreground) 50%, transparent); color: var(--primary-foreground); }

/* ---- Vorher/Nachher-Vergleich ---- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card { border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); }
.compare-card.bad { background: color-mix(in srgb, var(--red-bg) 60%, transparent); }
.compare-card.good { background: color-mix(in srgb, var(--emerald-bg) 60%, transparent); border-color: var(--emerald-bd); }
.compare-card h3 { margin-bottom: 12px; }
.compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.compare-card.bad li::before { content: "✕ "; color: var(--red-fg); font-weight: 700; }
.compare-card.good li::before { content: "✓ "; color: var(--emerald-fg); font-weight: 700; }

.section { max-width: 1080px; margin: 0 auto; padding: 60px 24px; }
.section-head { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.section-head p { color: var(--muted-foreground); margin-top: 8px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
/* Vier gleich wichtige Kacheln (z.B. "Warum ZORVEX" auf der Startseite) --
   eigene 4-Spalten-Variante statt einer 3er-Reihe mit Waisenkind. */
.feature-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .feature-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid-4 { grid-template-columns: 1fr; } }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.feature-card p { color: var(--muted-foreground); font-size: 14px; margin-top: 6px; }
.feature-card.highlight { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--card)), var(--card) 40%); padding-top: 30px; }
.feature-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--primary); margin-bottom: 14px; font-size: 22px; }
.feature-icon svg { width: 22px; height: 22px; }

/* ---- Kundenreferenzen (nur sichtbar, sobald echte Inhalte im Admin gepflegt wurden) ---- */

/* ---- Changelog: "In Arbeit"-Fortschrittskarten ---- */
.changelog-progress-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.changelog-progress-heading h2 { font-size: 18px; }
.changelog-progress-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex-shrink: 0; position: relative; }
.changelog-progress-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--primary); animation: changelog-pulse 1.8s ease-out infinite; }
@keyframes changelog-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.changelog-progress-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.changelog-progress-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.changelog-progress-card h3 { font-size: 15px; }
.changelog-progress-pct { font-size: 14px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.changelog-progress-bar { margin-top: 14px; height: 8px; border-radius: 999px; background: var(--slate-bg); overflow: hidden; }
.changelog-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #7c3aed)); transition: width .3s ease; }
.changelog-released-heading { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); margin-bottom: 16px; }

/* ---- Changelog-Zeitleiste (veroeffentlichte Eintraege) ---- */
.changelog-list { display: flex; flex-direction: column; }
.changelog-entry { display: grid; grid-template-columns: 24px 1fr; gap: 18px; padding-bottom: 28px; }
.changelog-entry:last-child { padding-bottom: 0; }
.changelog-entry:last-child .changelog-line { display: none; }
.changelog-entry-marker { display: flex; flex-direction: column; align-items: center; }
.changelog-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 3px var(--accent-soft); }
.changelog-line { flex: 1; width: 2px; background: var(--border); margin-top: 6px; }
.changelog-date { font-size: 12px; color: var(--muted-foreground); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.changelog-body h3 { font-size: 16px; margin-bottom: 4px; }
@media (max-width: 560px) { .changelog-progress-card { padding: 16px 18px; } }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.testimonial-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.testimonial-card .quote { font-size: 15px; line-height: 1.6; flex: 1; }
.testimonial-card .author { display: flex; flex-direction: column; font-size: 13px; }
.testimonial-card .author span { font-size: 12px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 8px; }
.step .num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-weight: 700; margin-bottom: 12px; }

/* ---- Geld-zurueck-Garantie-Banner (unter der Preistabelle) ---- */
.guarantee-banner { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 32px auto 0; padding: 18px 22px; border: 1px solid var(--emerald-bd); background: color-mix(in srgb, var(--emerald-bg) 55%, transparent); border-radius: var(--radius); }
.guarantee-banner svg { width: 32px; height: 32px; flex-shrink: 0; color: var(--emerald-fg); }
.guarantee-banner strong { display: block; margin-bottom: 2px; }

/* ---- Vergleichstabelle Zorvexgroup vs. Cloud-Loesungen ---- */
.compare-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.compare-table th { font-size: 13px; color: var(--muted-foreground); font-weight: 600; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.good { color: var(--emerald-fg); font-weight: 600; }

.pricing-grid { display: grid; grid-template-columns: repeat(var(--pricing-cols, 2), 1fr); gap: 20px; max-width: var(--pricing-maxw, 760px); margin: 0 auto; }
@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; } }
/* Name ist historisch ("Abo" war urspruenglich der einzig eingerahmte Block) --
   seit dem Abo/Einmalkauf-Umschalter (12.09.2026, Nutzer-Feedback "einmal mit
   schoenem Hintergrund und einmal ohne?") bekommen beide Bloecke denselben
   Rahmen, damit keine Abrechnungsart optisch "billiger" wirkt. */
.pricing-abo-panel { background: color-mix(in srgb, var(--primary) 5%, var(--background)); border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border)); border-radius: calc(var(--radius) + 8px); padding: 32px 24px; margin: 0 auto 32px; max-width: calc(var(--pricing-maxw, 760px) + 48px); }
.pricing-divider { display: flex; align-items: center; gap: 14px; max-width: var(--pricing-maxw, 760px); margin: 8px auto 32px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pricing-divider::before, .pricing-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Flex-Spalte + die Liste waechst (flex:1): schiebt den Kaufen-Button auf
   dieselbe Hoehe wie in den Nachbarkarten, statt dass eine kuerzere Liste
   (z.B. Basic) eine grosse leere Luecke vor dem Button laesst, waehrend die
   laengste Karte (Enterprise) die ganze Reihe streckt (Nutzer-Feedback
   12.09.2026, Screenshot: "riesengross/langgezogen gehaltene Module" war in
   Wahrheit die riesige Luecke unter den kuerzeren Karten). */
.price-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.price-card ul { flex: 1; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(0,0,0,.3); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.price-card.abo-card { background: color-mix(in srgb, var(--primary) 4%, var(--card)); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.price-card.highlight { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 12px 32px -16px color-mix(in srgb, var(--primary) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--card)), var(--card) 40%); }
.price-card.highlight:hover { box-shadow: 0 0 0 1px var(--primary), 0 24px 48px -20px color-mix(in srgb, var(--primary) 55%, transparent); }
.price-card .empfohlen-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--primary) 70%, transparent); white-space: nowrap; }
.price-card .price { font-size: 38px; font-weight: 800; margin: 10px 0; }
.price-card .price small { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
/* ---- Modernisierte Feature-Liste (12.09.2026, Nutzer-Feedback "wirkt
   langgezogen") -- runde Haekchen-Badges statt reinem Text-Haekchen, engere
   Zeilenhoehe, dezenter Hover je Zeile statt einer reinen Aufzaehlung. ---- */
.price-card ul { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.price-card li { position: relative; padding: 3px 4px 3px 24px; line-height: 1.35; border-radius: 6px; transition: background-color .15s ease; }
.price-card li:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.price-card li::before {
  content: "✓"; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--emerald-bg); color: var(--emerald-fg);
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; flex-shrink: 0;
}
.price-card li.text-muted::before { background: var(--slate-bg); color: var(--slate-fg); }
/* Zweispalten-Versuch (12.09.2026) wieder verworfen: die Preiskarten sind in
   einer 3er-Reihe nur ~320px breit -- eine interne 2-Spalten-Liste darin
   liess Text in beiden Spalten unschoen umbrechen (Nutzer-Screenshot). Die
   eigentliche Ursache der "riesengross/langgezogen"-Beschwerde war die
   Button-Ausrichtung (siehe .price-card { flex:1 } oben), nicht die
   Zeilenzahl selbst -- die ist jetzt behoben, eine einspaltige Liste bleibt.*/

.trust-strip { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 20px 24px 0; color: var(--muted-foreground); font-size: 13px; }
.trust-strip span { display: inline-flex; align-items: center; gap: 7px; }
.trust-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-foreground); }
@media (max-width: 700px) { .trust-strip { gap: 16px 24px; } }

/* ---- Produktvorschau: originalgetreu nachgebaute UI-Ausschnitte des echten
   Lagersystems (kein Screenshot, sondern mit denselben Farb-/Badge-Tokens
   nachgebaut), fuer die Produktseite ("So sieht's aus"). ---------------- */
.ui-mock { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; height: 100%; }
.ui-mock-label { font-size: 12px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 14px; }
.ui-mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ui-mock-kpi { background: var(--slate-bg); border-radius: 8px; padding: 8px 10px; }
.ui-mock-kpi .val { font-size: 18px; font-weight: 700; line-height: 1.2; }
.ui-mock-kpi .lbl { font-size: 10px; color: var(--muted-foreground); }
.ui-mock-alert { background: var(--red-bg); color: var(--red-fg); border: 1px solid var(--red-bd); border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 14px; font-weight: 600; }
.ui-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.ui-mock-row:last-child { border-bottom: none; }
.ui-mock-row .badges { display: flex; gap: 6px; flex-shrink: 0; }
.ui-mock-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.ui-mock-toggle-row:last-child { border-bottom: none; }
.ui-mock-toggle { width: 32px; height: 18px; border-radius: 999px; background: var(--emerald-fg); position: relative; flex-shrink: 0; }
.ui-mock-toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; }
.ui-mock-toggle.off { background: var(--border); }
.ui-mock-toggle.off::after { right: auto; left: 2px; }
.ui-mock-select { font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted-foreground); background: var(--background); }

/* ---- Echte Screenshots des Lagersystems auf der Produktseite ---- */
.shot-hero { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.12); margin-bottom: 12px; }
.shot-hero img { width: 100%; display: block; }
.shot-caption { text-align: center; font-size: 13px; color: var(--muted-foreground); margin-bottom: 32px; }
.shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 12px; }
@media (max-width: 700px) { .shot-grid { grid-template-columns: 1fr; } }
.shot-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.shot-card img { width: 100%; display: block; }
.shot-card .cap { padding: 10px 14px; font-size: 13px; color: var(--muted-foreground); border-top: 1px solid var(--border); }

/* ---- Produktkarten zentriert statt starrem Grid (wirkt bei 1-2 Karten
   sonst schief/zu weit aussen) ---- */
.product-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.product-cards .feature-card { width: 320px; flex-shrink: 0; }

/* ---- Hero-Showcase mit Glow-Hintergrund (modernere Praesentation) ---- */
.hero-shot-wrap { position: relative; max-width: 880px; margin: 0 auto 72px; padding: 40px 20px 0; }
.hero-shot-wrap::before {
  content: ""; position: absolute; inset: -60px -20px auto -20px; height: 420px;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-shot-wrap .browser-frame { position: relative; z-index: 1; }

/* ---- Browser-Chrome-Rahmen um Screenshots (modernere Praesentation) ---- */
.browser-frame { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 24px 60px -12px rgba(0,0,0,.35); }
.browser-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--slate-bg); border-bottom: 1px solid var(--border); }
.browser-frame-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.browser-frame-dot.red { background: #ff5f57; }
.browser-frame-dot.amber { background: #febc2e; }
.browser-frame-dot.green { background: #28c840; }
.browser-frame-url { flex: 1; margin-left: 10px; background: var(--background); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; font-size: 11px; color: var(--muted-foreground); text-align: center; }
.browser-frame img { display: block; width: 100%; }

/* ---- Alternierende Feature-Showcase-Reihen (Bild + Text) ---- */
.showcase { display: flex; flex-direction: column; gap: 72px; margin: 8px 0 64px; }
.showcase-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.showcase-row.reverse .showcase-media { order: -1; }
@media (max-width: 860px) {
  .showcase-row { grid-template-columns: 1fr; }
  .showcase-row.reverse .showcase-media { order: initial; }
}
.showcase-text .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.showcase-text h3 { font-size: 24px; margin-bottom: 12px; }
.showcase-text p { color: var(--muted-foreground); font-size: 15px; }
.showcase-media img { width: 100%; display: block; border-radius: 10px; }
.showcase-media { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 16px 40px -10px rgba(0,0,0,.25); }

/* ---- Layout (App-Shell fuer Admin) ---------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar-brand { padding: 16px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--foreground); }
.sidebar-link:hover { background: var(--slate-bg); }
.sidebar-link.active { background: var(--primary); color: var(--primary-foreground); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px; border-top: 1px solid var(--border); }
.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--slate-bg); color: var(--slate-fg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.sidebar-footer { padding: 8px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); text-align: center; }
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--card); }
.main-content { flex: 1; padding: 24px; }
.admin-nav-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--foreground); align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-backdrop { display: none; }
@media (max-width: 860px) {
  .admin-nav-toggle { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop.sidebar-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 59; }
  .main-content { padding: 16px; }
  .topbar { padding: 10px 14px; flex-wrap: wrap; row-gap: 8px; position: sticky; top: 0; z-index: 45; }
  .topbar > .row { flex-wrap: wrap; row-gap: 8px; }
}

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
summary { outline: none; }
summary::-webkit-details-marker { display: none; }
.flag-icon { width: 24px; height: 16px; border-radius: 2px; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.card-header { padding: 16px 16px 0; }
.card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 16px; }
.grid { display: grid; gap: 16px; }
.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: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---- Kundenkonto: Downloads-&-Lizenzen-Dashboard-Kopf ------------------ */
.dashboard-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .dashboard-summary-grid { grid-template-columns: 1fr; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; background: var(--primary); color: var(--primary-foreground); min-height: 40px; }
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-destructive { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-bd); }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.btn-lg { padding: 14px 22px; min-height: 50px; font-size: 16px; }
.btn-block { width: 100%; }
.icon-btn { padding: 6px; min-height: auto; }
.btn-armed { animation: btn-armed-pulse 1s ease-in-out infinite; }
@keyframes btn-armed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* Forms */
label, .label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 14px; background: var(--card); color: var(--foreground); font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.field { margin-bottom: 12px; }
textarea { resize: vertical; min-height: 70px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.checkbox-row input { width: auto; margin-top: 3px; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid; }
.badge-slate { background: var(--slate-bg); color: var(--slate-fg); border-color: var(--slate-bd); }
.badge-amber { background: var(--amber-bg); color: var(--amber-fg); border-color: var(--amber-bd); }
.badge-blue { background: var(--blue-bg); color: var(--blue-fg); border-color: var(--blue-bd); }
.badge-emerald { background: var(--emerald-bg); color: var(--emerald-fg); border-color: var(--emerald-bd); }
.badge-gray { background: var(--gray-bg); color: var(--gray-fg); border-color: var(--gray-bd); }
.badge-red { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-bd); }

/* Alerts */
.alert { border-radius: 8px; padding: 10px 12px; font-size: 13px; border: 1px solid; }
.alert-red { background: var(--red-50); color: var(--red-700); border-color: var(--red-bd); }
.nav-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red-700); margin-left: 6px; vertical-align: middle; }
.maintenance-banner { display: inline-flex; align-items: center; gap: 14px; text-align: left; background: var(--amber-bg); color: var(--amber-fg); border: 1px solid var(--amber-bd); border-radius: 14px; padding: 12px 22px 12px 12px; font-weight: 600; font-size: 16px; line-height: 1.4; margin: 20px auto 28px; max-width: 640px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.35); }
.maintenance-banner .sign { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.maintenance-notice { display: flex; gap: 14px; align-items: flex-start; background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: var(--radius); padding: 16px 18px; }
.maintenance-notice .icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.maintenance-notice strong { display: block; color: var(--amber-fg); font-size: 14px; margin-bottom: 3px; }
.maintenance-notice p { margin: 0; color: var(--amber-fg); font-size: 13px; opacity: .9; line-height: 1.5; }
.alert-amber { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-bd); }
.alert-emerald { background: var(--emerald-50); color: var(--emerald-700); border-color: var(--emerald-bd); }
.alert-blue { background: var(--blue-bg); color: var(--blue-fg); border-color: var(--blue-bd); }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 10px 16px; color: var(--muted-foreground); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.table-empty { text-align: center; padding: 40px; color: var(--muted-foreground); }

/* Utility */
.login-wrap { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 400px; }
.stat-value { font-size: 28px; font-weight: 700; }
.center-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px; color: var(--muted-foreground); text-align: center; }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin-top: 32px; }
.prose p, .prose li { color: var(--muted-foreground); }
.prose code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .88em; background: var(--background); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.code-block { background: #14161a; color: #e2e8f0; border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.6; margin: 12px 0 20px; white-space: pre; }
.code-block .cm { color: #71717a; }
.provider-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.provider-card h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.provider-card p { margin: 0; font-size: 14px; }

/* ==========================================================================
   ZORVEX Sales Platform 2.0 -- Design-Umbau (12.09.2026)
   Nutzer-Feedback: bestehende Produktseiten wirkten "hingeklatscht" -- echtes
   Icon-System, Bild-Text-Split, Workflow-Visualisierung, gezielte dunkle
   Kontrast-Sektionen (kein Dark-Mode-Zwang, der Theme-Umschalter bleibt),
   Headline-Schrift Space Grotesk, dezentes Scroll-Reveal. Gilt fuer
   Startseite, Produkt-Hub, Produkt-Landingpages, Wartungsseite.
   ========================================================================== */

:root { --font-display: 'Space Grotesk', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.hero h1, .section-head h2, .dark-band h1, .dark-band h2, .split-hero h1 {
  font-family: var(--font-display); letter-spacing: -0.01em;
}

/* ---- Echte SVG-Icons (ersetzt Emoji durchgaengig, app/helpers.php::icon()) */
.ui-icon { width: 20px; height: 20px; flex-shrink: 0; }
.feature-icon .ui-icon { width: 22px; height: 22px; }

/* ---- Scroll-Reveal (app.js, respektiert prefers-reduced-motion) -------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal-in { opacity: 1; transform: none; }
/* .reveal's eigene "transition"-Kurzschrift wuerde sonst die von .price-card
   (Hover-Lift/Schatten/Rahmenfarbe) komplett ersetzen, nicht nur ergaenzen --
   hier beides zusammengefuehrt, damit nach dem einmaligen Einblenden der
   normale Hover-Effekt wieder greift. */
.price-card.reveal { transition: opacity .5s ease, transform .3s ease, box-shadow .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Gezielte dunkle Kontrast-Flaeche, unabhaengig vom Theme-Umschalter
   (Hero-Bands, Workflow, CTA-Abschluss, Wartungsseite) -- eigene Token statt
   var(--foreground)/var(--card), damit Hell- UND Dunkel-Theme-Besucher
   dieselbe bewusst dunkle Sektion sehen. ------------------------------- */
.dark-band {
  --db-bg: #0a0a0c; --db-fg: #f4f4f5; --db-muted: #a1a1aa; --db-border: #2b2b30;
  --db-card: #17171b;
  background: var(--db-bg); color: var(--db-fg);
}
/* Hinweis: ".dark-band p" hat dieselbe Spezifitaet wie ".section-head p"
   (Zeile 181) und ".maintenance-notice p" (Zeile 419) -- gewinnt aktuell nur,
   weil dieser Block SPAETER im File steht. Bleibt das so, solange dieser
   Block nach jenen beiden steht; sonst braucht die Regel eine hoehere
   Spezifitaet. */
.dark-band .text-muted, .dark-band p, .dark-band .stat-strip .lbl, .dark-band .trust-strip, .dark-band .hero p.lead, .dark-band p.lead { color: var(--db-muted); }
.dark-band .trust-strip .trust-icon { color: var(--db-muted); }
.dark-band .stat-strip { border-color: var(--db-border); }
.dark-band h1, .dark-band h2, .dark-band h3, .dark-band strong { color: var(--db-fg); }
.dark-band .eyebrow { display: inline-block; background: color-mix(in srgb, var(--primary) 18%, var(--db-bg)); color: var(--primary); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; }
.dark-band .btn-outline { border-color: var(--db-border); color: var(--db-fg); }
.dark-band .btn-outline:hover { border-color: var(--primary); }

/* ---- Hero: Text links, grosses Visual rechts (statt zentriert-gestapelt) */
.split-hero { max-width: 1160px; margin: 0 auto; padding: 88px 24px 72px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.split-hero h1 { font-size: 42px; line-height: 1.12; margin-bottom: 18px; }
.split-hero p.lead { font-size: 17px; color: var(--db-muted, var(--muted-foreground)); margin-bottom: 28px; max-width: 480px; }
.split-hero .hero-cta { justify-content: flex-start; margin-bottom: 0; }
.split-hero .visual { position: relative; }
.split-hero .visual img { width: 100%; display: block; border-radius: var(--radius); box-shadow: 0 24px 64px -24px rgba(0,0,0,.4); border: 1px solid var(--db-border, var(--border)); }
@media (max-width: 900px) {
  .split-hero { grid-template-columns: 1fr; padding: 56px 20px 48px; text-align: center; gap: 32px; }
  .split-hero .hero-cta { justify-content: center; }
  .split-hero p.lead { margin-left: auto; margin-right: auto; }
  .split-hero h1 { font-size: 32px; }
}

/* ---- Workflow-Strip: horizontale Schritt-Kette mit Pfeilen ------------- */
.workflow-strip { display: flex; align-items: stretch; justify-content: center; gap: 4px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; }
.workflow-step { flex: 1 1 160px; max-width: 190px; background: var(--db-card, var(--card)); border: 1px solid var(--db-border, var(--border)); border-radius: var(--radius); padding: 20px 16px; text-align: center; }
.workflow-step .n { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; display: block; }
.workflow-step .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); margin-bottom: 12px; }
.workflow-step .icon-badge svg { width: 24px; height: 24px; }
.workflow-step h3 { font-size: 14px; margin-bottom: 4px; }
.workflow-step p { font-size: 12.5px; }
.workflow-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; color: var(--db-border, var(--border)); }
.workflow-arrow svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .workflow-strip { flex-direction: column; align-items: stretch; }
  .workflow-step { max-width: none; }
  .workflow-arrow { transform: rotate(90deg); flex: 0 0 20px; align-self: center; }
}

/* ---- Bild-Text-Split-Sektionen: bereits als .showcase-row auf /funktionen
   vorhanden (Zeile ~318) und hier bewusst wiederverwendet statt dupliziert. */
.showcase-text h3 { font-family: var(--font-display); }

/* ---- Rollen-Kacheln ("Fuer jede Rolle") --------------------------------- */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .roles-grid { grid-template-columns: 1fr; } }
.role-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.role-card .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--primary); margin-bottom: 14px; }
.role-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--muted-foreground); }
.role-card li::before { content: "— "; color: var(--primary); font-weight: 700; }

/* ---- Team-Reiter (/team): Personenkarten mit Foto/Initialen/KI-Icon ---- */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.team-grid .role-card { flex: 0 1 260px; }
.team-card { text-align: center; }
.team-card .role { font-size: 13px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.avatar-circle { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--primary); font-size: 20px; font-weight: 700; margin: 0 auto 14px; overflow: hidden; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-circle .ui-icon { width: 26px; height: 26px; }
.team-badge-ai { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--primary); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; margin-top: 8px; }
.team-badge-ai .ui-icon { width: 12px; height: 12px; }

/* ---- Produkt-Hub: hochwertige Produktkarten statt schlichter Boxen ----- */
.product-hero-card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 32px; width: 340px; flex-shrink: 0; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-hero-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.product-hero-card .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); margin-bottom: 18px; }
.product-hero-card .icon-badge svg { width: 28px; height: 28px; }
.product-hero-card h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; }
.product-hero-card p { color: var(--muted-foreground); font-size: 14px; flex: 1; }
.product-status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; width: fit-content; }
.product-status-badge.is-active { background: var(--emerald-bg); color: var(--emerald-fg); }
.product-status-badge.is-soon { background: var(--amber-bg); color: var(--amber-fg); }
.product-status-badge .ui-icon { width: 13px; height: 13px; }

/* ---- Rotierender Screenshot-Showcase auf der Startseite (12.09.2026,
   Nutzer-Idee "soll rotieren zwischen unsere Produkte") -- eine Folie pro
   echtem Screenshot, faedet um, Pfeile + Punkte fuer manuelle Steuerung,
   Autoplay pausiert bei Hover/Fokus/Tab-im-Hintergrund/prefers-reduced-motion
   (app.js). Nutzt dieselbe .showcase-row/-text/-media-Optik wie /funktionen,
   nur eine Folie gleichzeitig sichtbar statt aller gestapelt. ------------ */
.hero-carousel { position: relative; }
.hero-carousel-slide { display: none; }
.hero-carousel-slide.is-active { display: grid; }
.hero-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.hero-carousel-dots { display: flex; gap: 8px; }
.hero-carousel-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: var(--border); cursor: pointer; }
.hero-carousel-dot.is-active { background: var(--primary); width: 22px; border-radius: 999px; transition: width .2s ease; }
.hero-carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; flex-shrink: 0; }
.hero-carousel-arrow:hover { border-color: var(--primary); color: var(--primary); }
.hero-carousel-arrow svg { width: 16px; height: 16px; }