/* =================================================================
   UXOVIA · STARTSEITE · GRUNDLAGEN
   Seitenweite Stile der Startseite: Grundgeruest, Tastaturfokus,
   Keyframes und die Klassen, die mehrere Sektionen teilen.
   Ausgelagert am 21.08.2026 aus den <style>-Bloecken von index.html.
   Die Einbindung steht im Dokument an derselben Stelle wie vorher der
   Block, sonst kippt die Kaskade: vor topbar.css, backdrops.css und touch.css,
   damit deren Regeln bei gleicher Spezifitaet weiter gewinnen.
   ================================================================= */

/* IBM Plex Mono entfernt. Der Designsystem-Token --font-mono zeigt selbst auf DM Sans;
     Plex hing zuletzt nur noch an neun Ziffern in den Use-Case-Karten und zog dafuer zwei
     Schriftdateien nach. Die Startseite laeuft jetzt auf einer einzigen Schriftfamilie. */
  body { margin: 0; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
  ::selection { background: rgba(0,85,254,0.35); }
  @keyframes uxfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  @keyframes uxglow { 0%, 100% { filter: drop-shadow(0 22px 60px rgba(0,85,254,0.22)); } 50% { filter: drop-shadow(0 22px 75px rgba(0,85,254,0.4)); } }
  @keyframes uxsweep { 0% { left: -22%; } 100% { left: 122%; } }
  @keyframes uxscrolldot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
  @keyframes uxmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .ux-marquee:hover { animation-play-state: paused; }
  #ux-hero-content.ux-hero--left { align-items: flex-start !important; text-align: left !important; }
  #ux-hero-content.ux-hero--left .ux-hero-cta { justify-content: flex-start !important; }
  #hero.ux-hero-sec--left { justify-content: flex-start !important; padding-left: clamp(28px, 8vw, 130px); }
  .ux-uc-row.rev .ux-uc-media { order:2; }
  @media (max-width:600px) {
  }
  @media (max-width:860px) {
    .ux-uc-row.rev .ux-uc-media { order:0; }
  }
  @media (max-width:560px) {
  }
  @media (max-width:820px) { }
  @media (max-width:560px) { }
  @media (prefers-reduced-motion: reduce) {
    html.ux-force-motion [style*="animation"]:not(.ux-once), html.ux-force-motion [style*="animation"]:not(.ux-once)::before, html.ux-force-motion [style*="animation"]:not(.ux-once)::after {
      animation-duration: var(--ux-ad, 3s) !important;
      animation-iteration-count: infinite !important;
    }
    html.ux-force-motion .ux-once { animation-duration: var(--ux-ad, 0.3s) !important; animation-iteration-count: 1 !important; }
    html.ux-force-motion [style*="transition"] { transition-duration: var(--ux-td, 0.32s) !important; }
  }
  /* ─────────────────── Mobile-Optimierung ─────────────────── */
  /* Colon-agnostisch: app.js re-serialisiert Inline-Styles an [data-reveal]-
     Elementen (Leerzeichen nach dem Doppelpunkt). Deshalb auf Werte statt
     "prop:value" matchen bzw. beide Schreibweisen abdecken. */
  @media (max-width: 760px) {
    body { overflow-x: hidden; }
    nav[style*="padding:14px 32px"], nav[style*="padding: 14px 32px"] { padding: 12px 18px !important; }
    /* feste Zweispalter → einspaltig */
    [style*="1fr 1fr"],
    [style*="1.05fr 0.95fr"],
    [style*="1.25fr 0.75fr"],
    [style*="minmax(190px, 1fr)"] {
      grid-template-columns: 1fr !important;
      gap: 22px !important;
    }
    /* weniger Höhe/Seitenrand pro Sektion */
    [style*="148px 32px"] { padding: 78px 20px !important; }
    [style*="140px 32px 80px"] { padding: 84px 20px 64px !important; }
    /* Erstgespraech-Karte + rechte Spalte (gestapelt) */
    [style*="clamp(28px, 5vw, 68px)"] { padding: 40px 22px !important; }
    [style*="padding-left:34px"], [style*="padding-left: 34px"] {
      border-left: none !important; padding-left: 0 !important;
      padding-top: 28px !important; border-top: 1px solid var(--border) !important;
    }
    /* Ablauf: senkrechte Trenner → waagerechte */
    [style*="border-right:1px solid var(--border-faint)"],
    [style*="border-right: 1px solid var(--border-faint)"] {
      border-right: none !important;
      border-top: 1px solid var(--border-faint) !important;
      padding: 24px 0 !important;
    }
    /* große Kopf-Abstände straffen */
    [style*="margin:0 0 64px"], [style*="margin: 0 0 64px"] { margin-bottom: 36px !important; }
    [style*="margin-bottom:56px"], [style*="margin-bottom: 56px"] { margin-bottom: 34px !important; }
  }
  @media (max-width: 480px) {
    [style*="148px 32px"] { padding: 62px 18px !important; }
  }

  /* ── Angebots-Engine Dashboard (Proof) — aus der Unterseite uebernommen ── */
  /* Am Telefon entfaellt der ganze Abschnitt. Er besteht aus der
     Beispielansicht eines Backoffice-Dashboards mit Seitenleiste, vier
     Kennzahlen, einer sechsspaltigen Tabelle und einem Diagramm. Auf
     390 px schrumpft das auf eine Groesse, in der nichts davon mehr
     lesbar ist; es bleibt ein huebsches, aber leeres Bild. */
  @media (max-width: 900px) { #proof { display: none; } }
  /* ── Angebots-Engine · Interface-Mockup (nur Design-System-Tokens) ── */
    .ae-frame { max-width: var(--container); margin-inline: auto; }
    .ae-app { border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); box-shadow: var(--shadow-card), 0 40px 120px -50px var(--brand-glow); }
    .ae-topbar { display: flex; align-items: center; gap: var(--s-3); padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-ink); }
    .ae-dots { display: flex; gap: 6px; }
    .ae-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); display: block; }
    .ae-url { margin-inline: auto; font-family: var(--font-mono); font-size:0.75rem; letter-spacing: 0.03em; color: var(--text-legible); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.3rem 0.9rem; }
    .ae-body { display: grid; grid-template-columns: 208px 1fr; }
    .ae-side { border-right: 1px solid var(--border); padding: var(--s-5) var(--s-4); background: var(--bg-ink); display: flex; flex-direction: column; gap: var(--s-5); }
    .ae-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: var(--w-semi); font-size:0.875rem; color: var(--text); }
    .ae-brand img { width: 22px; height: 22px; }
    .ae-nav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
    .ae-nav li { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: var(--r-sm); font-size:0.875rem; color: var(--text-legible); }
    .ae-nav li svg { width: 17px; height: 17px; flex-shrink: 0; }
    .ae-nav li.is-active { background: var(--brand-soft); color: var(--kobalt-zart); border: 1px solid var(--border-brand); }
    .ae-main { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
    .ae-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
    /* Vier Kennzahlen, vier Farben aus dem Uxovia-System: Geld gruen,
       Laufendes kobalt, Abgeschlossenes cyan, Wartendes bernstein. */
    .ae-kpi {
      position: relative; overflow: hidden;
      border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4);
      background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-farbe) 9%, var(--surface-2)), transparent 72%);
    }
    .ae-kpi::before {
      content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
      background: linear-gradient(90deg, var(--kpi-farbe), transparent 85%);
    }
    .ae-kpis > .ae-kpi:nth-child(1) { --kpi-farbe: var(--success); }
    .ae-kpis > .ae-kpi:nth-child(2) { --kpi-farbe: var(--kobalt-klar); }
    .ae-kpis > .ae-kpi:nth-child(3) { --kpi-farbe: var(--cyan); }
    .ae-kpis > .ae-kpi:nth-child(4) { --kpi-farbe: var(--warning); }
    .ae-kpi .lbl { font-family: var(--font-mono); font-size:0.75rem; letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--kpi-farbe) 62%, var(--text-legible)); }
    .ae-kpi .val { font-size:1.5rem; font-weight: var(--w-medium); letter-spacing: -0.02em; margin: 0.3rem 0 0.25rem; color: var(--text); }
    .ae-kpi .sub { font-size:0.75rem; color: var(--text-legible); }
    .ae-kpi .sub b { color: var(--gruen-hell); font-weight: var(--w-medium); }
    .ae-cols { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--s-4); }
    .ae-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
    .ae-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.85rem var(--s-4); border-bottom: 1px solid var(--border); }
    .ae-card-h .ttl { font-size:0.875rem; font-weight: var(--w-medium); color: var(--text); }
    .ae-pill { font-family: var(--font-mono); font-size:0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-legible); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.25rem 0.6rem; }
    /* min-width:0 ist noetig, damit der Rollbereich wirklich greift: ohne das
       dehnt die 500px breite Tabelle ihren Container ueber die Fensterbreite,
       statt darin zu rollen. */
    .ae-tablewrap { overflow-x: auto; min-width: 0; }
    table.ae-table { width: 100%; border-collapse: collapse; font-size:0.875rem; min-width: 500px; }
    .ae-table th { text-align: left; font-family: var(--font-mono); font-size:0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-legible); font-weight: var(--w-medium); padding: 0.65rem 0.55rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .ae-table td { padding: 0.7rem 0.55rem; border-bottom: 1px solid var(--border-faint); color: var(--text-2); white-space: nowrap; }
    .ae-table th:first-child, .ae-table td:first-child { padding-left: var(--s-4); }
    .ae-table th:last-child, .ae-table td:last-child { padding-right: var(--s-4); }
    .ae-table tr:last-child td { border-bottom: none; }
    .ae-table td.strong { color: var(--text); }
    .ae-table td.num { font-variant-numeric: tabular-nums; color: var(--text); }
    .ae-st { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); font-size:0.75rem; font-weight: var(--w-medium); }
    .ae-st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .ae-st.draft { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
    .ae-st.ok { background: rgba(31,203,122,.15); color: var(--gruen-hell); border: 1px solid rgba(31,203,122,.4); }
    .ae-act { display: inline-flex; gap: 0.55rem; color: var(--text-faint); }
    .ae-act svg { width: 15px; height: 15px; }
    .ae-chart-foot { font-size: 0.75rem; color: var(--text-legible); padding: 0 var(--s-4) var(--s-4); }
    .ae-chart-foot b { color: var(--text); }
    .ae-chart-svg { display: block; width: 100%; height: auto; padding: var(--s-4) var(--s-4) 0; }
    @media (max-width: 860px) {
      .ae-body { grid-template-columns: 1fr; }
      .ae-side { flex-direction: row; align-items: center; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); gap: var(--s-4); padding: 0.75rem var(--s-4); }
      .ae-nav { flex-direction: row; gap: 4px; }
      .ae-nav li span { display: none; }
      .ae-cols { grid-template-columns: 1fr; }
      .ae-kpis { grid-template-columns: 1fr 1fr; }
    }