/* Ausgelagert aus dem <style>-Block von en/index.html, fr/index.html, index.html, it/index.html.
   Inhalt unveraendert uebernommen. */
    body { font-family: Inter, sans-serif; background: #f8f9ff; color: #0b1c30; }
    h1, h2, h3, .font-title { font-family: 'Plus Jakarta Sans', sans-serif; }
    .soft-glow { box-shadow: 0 4px 24px -4px rgba(14,165,233,0.14); }
    .hero-glow  { box-shadow: 0 0 80px 20px rgba(0,101,145,0.10); }
    .step-num {
      width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
      background: #006591; color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px;
      display: flex; align-items: center; justify-content: center;
    }
    .flow-step-num {
      width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
      background: #006591; color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px;
      display: flex; align-items: center; justify-content: center;
    }
    .platform-tab { cursor: pointer; transition: all .2s; }
    .platform-tab.active { background: #006591; color: #fff; }
    .platform-tab:not(.active) { background: #e5eeff; color: #006591; }
    .install-panel { display: none; }
    .install-panel.active { display: flex; }
    @media (min-width: 768px) {
      .install-tabs { display: none !important; }
      .install-panel { display: flex !important; flex: 1; }
      .install-panels-wrapper { display: flex; gap: 2rem; }
      .install-panel-header {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 700; font-size: 16px; color: #0b1c30;
        margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
      }
    }
    @media (max-width: 767px) {
      .install-panel-header { display: none; }
      .install-panels-wrapper { display: block; }
    }
    .roadmap-dot { width: 10px; height: 10px; min-width: 10px; border-radius: 50%; background: #006591; margin-top: 5px; }
    html { scroll-behavior: smooth; }
    .nav-link {
      font-family: Inter, sans-serif; font-size: 14px; font-weight: 600;
      color: #3e4850; padding: 8px 10px; border-radius: 999px;
      transition: background .15s, color .15s; text-decoration: none;
      white-space: nowrap; line-height: 1.2;
    }
    .nav-link:hover { background: #e5eeff; color: #006591; }
    .main-nav { display: none; align-items: center; gap: 2px; min-width: 0; }
    @media (min-width: 1024px) { .main-nav { display: flex; } }
    .site-header-inner { max-width: 1120px; }
    .site-brand { min-width: 0; }
    .site-brand span { white-space: nowrap; }
    .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .nav-cta,
    .language-pill {
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
      white-space: nowrap; line-height: 1.15; flex-shrink: 0;
    }
    .nav-cta { padding-left: 18px; padding-right: 18px; }
    .language-pill { min-width: 44px; }
    @media (max-width: 420px) {
      .site-header-inner { padding-left: 14px; padding-right: 14px; gap: 10px; }
      .site-brand span { font-size: 16px !important; }
      .nav-actions { gap: 8px; }
      .nav-cta { padding-left: 14px; padding-right: 14px; font-size: 13px; }
      .language-pill { padding-left: 10px; padding-right: 10px; }
    }
    /* Mobile Sprungleiste unter dem Hero */
    .jump-chips {
      display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
      padding: 4px 20px 12px; scrollbar-width: none; justify-content: flex-start;
    }
    .jump-chips::-webkit-scrollbar { display: none; }
    .jump-chip {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
      background: #e5eeff; color: #006591; border-radius: 999px;
      padding: 8px 14px; font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 13px; font-weight: 600; text-decoration: none;
      transition: background .15s;
    }
    .jump-chip:active { background: #c9e6ff; }
    @media (min-width: 768px) { .jump-chips { display: none; } }
    /* Anker nicht unter dem Sticky-Header verschwinden lassen */
    section[id] { scroll-margin-top: 84px; }
    /* ── UI-Polish ── */
    /* CTAs: Markenverlauf statt Flachfarbe */
    a.bg-primary-container, button.bg-primary-container {
      background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 55%, #006591 130%);
      box-shadow: 0 8px 22px -8px rgba(2, 132, 199, 0.55);
    }
    /* Verlaufstext im Hero */
    .grad-text {
      background: linear-gradient(115deg, #0ea5e9 10%, #006591 90%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    /* Kicker-Labels über Sektions-Überschriften */
    .sec-kicker {
      font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
      font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
      color: #0ea5e9; margin-bottom: 8px;
    }
    /* Karten: sanftes Anheben bei Hover (nur Geräte mit Maus) */
    @media (hover: hover) {
      .soft-glow { transition: transform .25s ease, box-shadow .25s ease; }
      .soft-glow:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(2, 132, 199, 0.32); }
    }
    /* Hero: weicher Farbschein hinter dem Icon */
    .hero-halo { position: relative; }
    .hero-halo::before {
      content: ""; position: absolute; left: 50%; top: 40px;
      /* Darf auf Mobile nicht breiter als der Viewport werden, sonst entsteht rechts Whitespace. */
      width: min(560px, 100%); height: 360px; transform: translateX(-50%);
      background: radial-gradient(closest-side, rgba(14,165,233,0.16), transparent 75%);
      pointer-events: none; z-index: -1;
    }
    /* Zusätzliche Absicherung gegen seitlichen Body-Overflow auf kleinen Displays. */
    html, body { max-width: 100%; overflow-x: clip; }
    @supports not (overflow: clip) {
      html, body { overflow-x: hidden; }
    }
    main, header, footer { max-width: 100%; }
    .jump-chips { max-width: 100%; overscroll-behavior-inline: contain; }
    .jump-chip { white-space: nowrap; }