/* Vorangestellt: Tokens kommen aus lociv.css. Hier nur Markenstory-spezifische Styles. */
  /* ════════════════════════════════════════════════════════════════
     LOCIV.IO MARKENSTORY v1.0
     Designsystem: Civic Future Interface
     ════════════════════════════════════════════════════════════════ */
  :root {
    /* Civic Blue */
    --civic-blue:       #6270E5;
    --civic-blue-deep:  #3049D8;
    --civic-blue-soft:  #7E8BFC;
    --civic-blue-pale:  #A4B4FF;

    /* Civic Lime */
    --civic-lime:       #D0F962;
    --civic-lime-deep:  #A8E827;

    /* Deep Background */
    --deep-bg:          #081426;
    --deep-bg-soft:     #0F1F38;

    /* Neutrals */
    --neutral-black:    #131313;
    --white:            #FFFFFF;
    --text-strong:      #0E1420;
    --text-body:        #1E2535;
    --text-muted:       #5C6578;
    --text-soft:        #8891A3;
    --surface-0:        #FFFFFF;
    --surface-1:        #F7F8FB;
    --surface-2:        #EEF1F6;
    --border-1:         #E4E8EF;
    --border-glass:     rgba(255, 255, 255, 0.12);

    /* Gradients */
    --hero-gradient:    radial-gradient(circle at 20% 30%, #6270E5 0%, #3049D8 35%, #081426 100%);
    --civic-gradient:   linear-gradient(135deg, #6270E5 0%, #7E8BFC 100%);
    --civic-gradient-h: linear-gradient(90deg, #6270E5 0%, #7E8BFC 50%, #A4B4FF 100%);
    --lime-glow:        radial-gradient(circle, #D0F962 0%, transparent 70%);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(8, 20, 38, 0.06);
    --shadow-sm: 0 2px 8px rgba(8, 20, 38, 0.08);
    --shadow-md: 0 6px 22px rgba(8, 20, 38, 0.12);
    --shadow-lg: 0 14px 40px rgba(8, 20, 38, 0.20);
    --shadow-xl: 0 28px 80px rgba(8, 20, 38, 0.28);
    --shadow-glow:0 0 120px rgba(98, 112, 229, 0.35);

    /* Typography */
    --font-display: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* Reset + Body-Defaults kommen aus lociv.css (inkl. display:flex column).
     Hier nur Markenstory-spezifische Body-Tweaks, keine display-/flex-Overrides. */
  body.page-story {
    font-family: var(--font-ui);
    line-height: 1.65;
    font-size: 17px;
  }
  /* Damit main auf der Markenstory wie auf Index den restlichen Platz füllt */
  body.page-story main { flex: 1; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text-strong);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
  }

  .container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }

  /* ─── Lociv-Wortmarken-Schreibweise im Fließtext ─────────────── */
  .lociv-mark {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .lociv-mark strong { font-weight: 700; color: var(--civic-blue); }
  .lociv-mark .tld {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85em;
    letter-spacing: 0;
  }
  /* Auf dunklem BG: Lociv bleibt Civic Blue (ruhige Markensignatur),
     ".io" in Civic Lime als Akzent gegen die Deep-BG-Fläche. */
  .on-dark .lociv-mark strong,
  section.dark .lociv-mark strong { color: var(--civic-blue); }
  .on-dark .lociv-mark .tld,
  section.dark .lociv-mark .tld { color: var(--civic-lime); }
  /* Lime-Variante (Hero-Wortmarken-Hervorhebung, z.B. Closing-Highlight) */
  .lociv-mark.lime strong { color: var(--white); }
  .lociv-mark.lime .tld { color: var(--civic-lime); }

  /* (Story-eigener Topbar entfernt - nutzt jetzt den globalen .topbar aus lociv.css) */

  /* ─── Breadcrumb (sichtbare Entsprechung zum BreadcrumbList-Schema) ─── */
  .breadcrumb.on-dark {
    background: var(--deep-bg);
    padding: 14px 0 0;
  }
  .breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }
  .breadcrumb-list li {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.55);
  }
  .breadcrumb-list li + li::before {
    content: '/';
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.30);
  }
  .breadcrumb-list a {
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
  }
  .breadcrumb-list a:hover,
  .breadcrumb-list a:focus-visible {
    color: var(--civic-lime);
  }
  .breadcrumb-list li[aria-current="page"] {
    color: var(--white);
    font-weight: 600;
  }

  /* Mobile: Breadcrumb als dezenter Glas-Chip mit Chevron-Trenner - premium,
     klar abgesetzt vom Hero, haengt sich an den Inhalt. Gilt fuer alle Unterseiten. */
  @media (max-width: 768px) {
    .breadcrumb.on-dark { padding: 16px 0; }
    .breadcrumb-list {
      display: inline-flex;
      gap: 8px;
      font-size: 0.72rem;
      padding: 5px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: var(--radius-pill);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
    .breadcrumb-list li + li::before {
      content: '\203A';
      margin-right: 8px;
      font-size: 1.1em;
      line-height: 1;
      color: rgba(255, 255, 255, 0.38);
    }
    .breadcrumb-list a { color: rgba(255, 255, 255, 0.72); }
    .breadcrumb-list li[aria-current="page"] { color: var(--white); }
  }

  /* ─── Hero ───────────────────────────────────────────────────── */
  .hero {
    background-color: var(--deep-bg);
    /* Großmaschiges Grid (96 px) als Textur + Hero-Gradient als Tiefen-Layer */
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px),
      var(--hero-gradient);
    background-size: 96px 96px, 96px 96px, auto;
    background-position: 0 0, 0 0, center;
    color: var(--white);
    /* Inhalt startet direkt unter dem Topbar - gleicher Top-Abstand wie auf der Startseite */
    padding: 32px 0 100px;
    position: relative;
    overflow: hidden;
  }
  .hero > .container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 78%, rgba(208,249,98,0.10) 0%, transparent 45%),
      radial-gradient(ellipse at 18% 28%, rgba(126,139,252,0.18) 0%, transparent 55%);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 4px;
    background: var(--civic-gradient-h);
  }
  .hero .container { position: relative; z-index: 2; }

  /* Hero-Hintergrund-Halos floaten subtil, gibt Tiefe */
  .hero {
    --halo-shift: 0px;
  }
  .hero::before {
    animation: hero-halo-float 24s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes hero-halo-float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-26px, 18px) scale(1.04); }
  }

  /* Hero-Eyebrow: identisch zur Startseite - Lime-Strich davor, keine Border-Linie */
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--civic-lime);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 28px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .hero-eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--civic-lime);
    border-radius: 1px;
  }
  .hero-wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(4rem, 11vw, 7.5rem);
    line-height: 0.95;
    color: var(--white);
    margin-bottom: 28px;
    letter-spacing: -0.03em;
  }
  .hero-wordmark .tld {
    color: var(--civic-lime);
    font-weight: 400;
    font-size: 0.78em;
    letter-spacing: -0.01em;
  }
  .hero-rule {
    width: 80px;
    height: 3px;
    background: var(--civic-lime);
    border-radius: 2px;
    margin: 0 0 28px;
  }
  .hero-claim {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.18rem;
    color: rgba(255,255,255,0.82);
    max-width: 660px;
    line-height: 1.65;
    margin-bottom: 40px;
  }
  .hero-pills {
    display: flex; flex-wrap: wrap; gap: 12px;
  }
  /* Pills auf gleicher Stilgrundlage wie .tag (Index) - mit Hover-Lift */
  .hero-pill {
    display: inline-block;
    padding: 9px 18px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.04em;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.2s;
  }
  .hero-pill:hover {
    border-color: rgba(208,249,98,0.55);
    color: var(--civic-lime);
    background: rgba(208,249,98,0.08);
    transform: translateY(-2px);
  }
  .hero-pill strong { color: var(--civic-lime); font-weight: 700; }

  /* Page-Load Fade-Up mit Stagger - analog Index-Hero (.hero-text / .hero-stat) */
  .hero .hero-eyebrow,
  .hero .hero-rule,
  .hero .hero-claim,
  .hero .hero-pills {
    animation: hero-fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .hero .hero-eyebrow { animation-delay: 0s;    }
  .hero .hero-rule    { animation-delay: 0.25s; }
  .hero .hero-claim   { animation-delay: 0.35s; }
  .hero .hero-pills   { animation-delay: 0.5s;  }
  /* Wordmark: Fade-Up + dauerhafter Sweep gleichzeitig (Comma-Liste) */
  .hero .hero-wordmark {
    animation:
      hero-fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both,
      wordmark-sweep 12s ease-in-out infinite;
  }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ─── Sections ────────────────────────────────────────────────── */
  section { padding: 100px 0; }
  section.alt { background: var(--surface-0); }
  section.soft { background: var(--surface-1); }
  section.markenstory-2 { padding-top: 28px; }
  section.dark {
    background: var(--deep-bg);
    background-image: var(--hero-gradient);
    color: rgba(255,255,255,0.92);
    position: relative;
    overflow: hidden;
  }
  section.dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 78%, rgba(208,249,98,0.10) 0%, transparent 45%),
      radial-gradient(ellipse at 18% 28%, rgba(126,139,252,0.16) 0%, transparent 55%);
    pointer-events: none;
  }
  section.dark .container { position: relative; z-index: 2; }
  section.dark h2, section.dark h3, section.dark h4 { color: var(--white); }
  /* Ausnahme: Light-Cards innerhalb einer dunklen Section behalten ihre dunkle Schrift,
     damit die Headlines auf hellem Card-Hintergrund nicht weiß-auf-weiß verschwinden. */
  section.dark .mission h3,
  section.dark .origin-card .term,
  section.dark .compare-card.them h3,
  section.dark .compare-card.them h3 { color: var(--text-strong); }
  section.dark .mission .lociv-mark .tld,
  section.dark .origin-card .lociv-mark .tld,
  section.dark .compare-card.them .lociv-mark .tld { color: var(--text-muted); }
  section.dark .mission .lociv-mark strong,
  section.dark .origin-card .lociv-mark strong,
  section.dark .compare-card.them .lociv-mark strong { color: var(--civic-blue); }

  .eyebrow {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--civic-blue);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  section.dark .eyebrow { color: var(--civic-lime); }

  h2 {
    font-size: clamp(1.95rem, 4vw, 2.85rem);
    font-weight: 600;
    margin-bottom: 24px;
    max-width: 800px;
    color: var(--text-strong);
  }
  section.dark h2 { color: var(--white); }
  h2 + .lead {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 740px;
    margin-bottom: 48px;
    line-height: 1.7;
  }
  section.dark h2 + .lead { color: rgba(255,255,255,0.78); }

  p { margin-bottom: 1.1em; }
  p:last-child { margin-bottom: 0; }

  /* ─── Origin Section: drei Karten + Result ───────────────────── */
  .origin-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
    margin: 48px 0 32px;
  }
  .origin-card {
    --accent: var(--civic-blue);
    --accent-soft: rgba(98, 112, 229, 0.08);
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 30px 30px 28px 32px;
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Großer Brand-Glyph im Hintergrund: LO / CIV / .IO - macht visuell sichtbar:
     die drei Komponenten ergeben Lociv.io */
  .origin-card .brand-glyph {
    position: absolute;
    top: 14px;
    right: 22px;
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .origin-card > *:not(.brand-glyph) { position: relative; z-index: 1; }
  /* Akzentfarben pro Variante */
  .origin-card--local {
    --accent: var(--civic-blue);
    --accent-soft: rgba(98, 112, 229, 0.12);
  }
  .origin-card--civic {
    --accent: var(--civic-blue-soft);
    --accent-soft: rgba(126, 139, 252, 0.14);
  }
  .origin-card--tech {
    --accent: var(--civic-lime-deep);
    --accent-soft: rgba(208, 249, 98, 0.18);
  }
  /* Eyebrow: Letter-Spaced Caps in Akzentfarbe (Sidebar-Stil, ohne Pill) */
  .origin-card .origin-eyebrow {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    max-width: calc(100% - 90px);
  }
  .origin-card--tech .origin-eyebrow { color: #5A7A0E; }
  .origin-card .term {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .origin-card .meaning {
    font-family: var(--font-ui);
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.6;
  }
  .origin-plus {
    align-self: center;
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--civic-blue);
    font-weight: 600;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--border-1);
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .origin-plus::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(98, 112, 229, 0.35);
    animation: origin-plus-rotate 18s linear infinite;
  }
  @keyframes origin-plus-rotate { to { transform: rotate(360deg); } }
  .origin-result {
    margin-top: 8px;
    background: var(--civic-gradient);
    border-radius: 24px;
    padding: 40px 32px;
    color: var(--white);
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
  }
  .origin-result::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--civic-lime);
  }
  .origin-result .equals {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--civic-lime);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .origin-result .formula {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .origin-result .formula strong { color: var(--civic-lime); font-weight: 700; }
  .origin-result .translation {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 1rem;
    color: rgba(255,255,255,0.88);
    font-weight: 400;
  }

  /* ─── Pull-Quote ──────────────────────────────────────────────── */
  .pullquote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-strong);
    border-left: 3px solid var(--civic-lime);
    padding: 6px 0 6px 22px;
    margin: 32px 0 0;
    max-width: 760px;
    letter-spacing: -0.005em;
  }
  section.dark .pullquote {
    color: var(--white);
    border-left-color: var(--civic-lime);
  }

  /* ─── Compare-Cards ───────────────────────────────────────────── */
  .compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 36px;
  }
  .compare-card {
    border-radius: 24px;
    padding: 36px 32px;
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-xs);
  }
  .compare-card.them {
    background: var(--surface-1);
  }
  .compare-card.them .label {
    font-family: var(--font-ui);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .compare-card.them h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .compare-card.them ul {
    list-style: none;
    padding: 0;
    color: var(--text-muted);
  }
  .compare-card.them ul li {
    padding: 8px 0;
    font-family: var(--font-ui);
    font-size: 0.96rem;
    border-bottom: 1px dashed var(--border-1);
  }
  .compare-card.them ul li:last-child { border-bottom: none; }

  /* "Wir fragen"-Karte: Glassmorphism analog CTA-Pfad-Karten (Image-Style)
     - transparent-weißer Layer über dem Deep-BG der Section
     - Backdrop-Blur für Tiefe
     - Lime-Akzentlinie oben bleibt als Hero-Signatur */
  .compare-card.us {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--white);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
  }
  .compare-card.us::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--civic-lime);
  }
  .compare-card.us .label {
    font-family: var(--font-ui);
    color: var(--civic-lime);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .compare-card.us h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--white);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  /* ─── Probleme ────────────────────────────────────────────────── */
  .problems {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 36px 0;
  }
  .problem {
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 24px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: var(--shadow-xs);
  }
  .problem .marker {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--civic-lime);
    color: var(--neutral-black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
  }
  .problem p {
    font-family: var(--font-ui);
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
  }

  /* ─── Mission-Trio ────────────────────────────────────────────── */
  .missions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
  }
  .mission {
    --accent: var(--civic-blue);
    --accent-soft: rgba(98, 112, 229, 0.10);
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 30px 30px 28px 32px;
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Große transparente Zahl 01/02/03 im Hintergrund -
     identisch zum Origin-Card-Brand-Glyph (LO/CIV/.IO) */
  .mission .big-num {
    position: absolute;
    top: 14px;
    right: 22px;
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .mission > *:not(.big-num) { position: relative; z-index: 1; }
  /* Akzentfarben pro Variante */
  .mission--emotional {
    --accent: var(--civic-blue);
    --accent-soft: rgba(98, 112, 229, 0.12);
  }
  .mission--erlebnis {
    --accent: var(--civic-blue-soft);
    --accent-soft: rgba(126, 139, 252, 0.14);
  }
  .mission--technisch {
    --accent: var(--civic-lime-deep);
    --accent-soft: rgba(208, 249, 98, 0.18);
  }
  .mission .num {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    color: var(--accent);
    background: transparent;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 36px;
    max-width: calc(100% - 90px);
  }
  .mission--technisch .num { color: #5A7A0E; }
  .mission h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.35;
    color: var(--text-strong);
    letter-spacing: -0.01em;
  }
  .mission p {
    font-family: var(--font-ui);
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
  }

  /* ─── Produkt-Stack ──────────────────────────────────────────── */
  .stack { margin-top: 40px; }
  .stack-platform {
    background: var(--deep-bg);
    background-image: var(--hero-gradient);
    color: var(--white);
    border-radius: 24px;
    padding: 40px 40px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
  }
  .stack-platform::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: var(--lime-glow);
    opacity: 0.5;
    pointer-events: none;
  }
  .stack-platform::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--civic-lime);
  }
  .stack-platform > * { position: relative; z-index: 2; }
  .stack-platform .role {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    color: var(--civic-lime);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .stack-platform .name {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .stack-platform .name .tld {
    color: var(--civic-lime);
    font-weight: 400;
    font-size: 0.85em;
  }
  .stack-platform .desc {
    font-family: var(--font-display);
    color: rgba(255,255,255,0.84);
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.6;
  }
  .stack-connector {
    width: 2px;
    height: 36px;
    background: var(--border-1);
    margin: 0 auto;
  }
  .stack-products {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
  }
  .stack-product {
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 30px 30px;
    box-shadow: var(--shadow-xs);
  }
  .stack-product.live {
    border-left: 4px solid var(--civic-lime);
  }
  .stack-product .status {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .stack-product.live .status {
    background: var(--civic-lime);
    color: var(--neutral-black);
  }
  .stack-product.future .status {
    background: var(--surface-2);
    color: var(--text-muted);
  }
  .stack-product .name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .stack-product .desc {
    font-family: var(--font-ui);
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .stack-product.future .desc {
    font-size: 1.08rem;
    line-height: 1.55;
  }
  .stack-product ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .stack-product ul li {
    padding: 7px 0;
    font-family: var(--font-ui);
    color: var(--text-body);
    font-size: 0.93rem;
    border-bottom: 1px solid var(--border-1);
    position: relative;
    padding-left: 20px;
  }
  .stack-product ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 15px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--civic-blue);
  }
  .stack-product.live ul li::before {
    background: var(--civic-lime-deep);
  }
  .stack-product ul li:last-child { border-bottom: none; }
  /* CTA-Link in der Nordbahn.app-Card */
  .stack-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 16px;
    background: rgba(98, 112, 229, 0.08);
    border: 1px solid rgba(98, 112, 229, 0.20);
    border-radius: 999px;
    color: var(--civic-blue);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  .stack-link .arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .stack-link:hover {
    background: rgba(98, 112, 229, 0.14);
    border-color: var(--civic-blue);
  }
  .stack-link:hover .arrow {
    transform: translateX(4px);
  }
  .stack-takeaway {
    margin-top: 36px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--text-strong);
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
  .stack-takeaway strong { color: var(--civic-blue); font-weight: 700; }

  /* ─── Closing ─────────────────────────────────────────────────── */
  .closing {
    background: var(--deep-bg);
    background-image: var(--hero-gradient);
    color: var(--white);
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .closing::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 78%, rgba(208,249,98,0.12) 0%, transparent 45%),
      radial-gradient(ellipse at 18% 28%, rgba(126,139,252,0.20) 0%, transparent 55%);
    pointer-events: none;
  }
  .closing::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    border-radius: 50%;
    background: var(--lime-glow);
    opacity: 0.10;
    pointer-events: none;
  }
  .closing .container { position: relative; z-index: 2; }
  .closing-eyebrow {
    font-family: var(--font-ui);
    color: var(--civic-lime);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 28px;
  }
  .closing-quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.45;
    max-width: 880px;
    margin: 0 auto 36px;
    color: var(--white);
    letter-spacing: -0.01em;
  }
  .closing-quote em {
    font-style: italic;
    color: var(--civic-blue-soft);
    font-weight: 400;
  }
  .closing-quote .lime {
    color: var(--civic-lime);
    font-weight: 600;
  }
  .closing-sig {
    font-family: var(--font-ui);
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
  .closing-sig strong { color: var(--civic-lime); font-weight: 600; }

  /* (Story-eigener Footer entfernt - nutzt jetzt den globalen .site-footer aus lociv.css) */

  /* ─── Mobile ──────────────────────────────────────────────────── */
  /* Top kleiner als Bottom - so wirkt der Sektionswechsel ruhiger und der
     Eyebrow „hueftet" direkt unter dem Section-Strich, nicht in einem
     halben Bildschirm Leere. */
  @media (max-width: 800px) {
    section { padding: 32px 0 56px; }
    section .eyebrow { margin-top: 0; }
  }
  @media (max-width: 480px) {
    section { padding: 24px 0 44px; }
  }
  @media (max-width: 800px) {
    /* Hero auf Mobile: Sonderbehandlung weiter unten */
    /* Hero auf Mobile: gleicher Top-Abstand wie auf Index (~16 px nach Topbar
       + reduziertes Container-Padding). Inhalt startet direkt unter dem Topbar.
       Bottom-Padding extra großzügig, damit die Pills nicht in den Browser-
       Footer (Safari Bottom-Bar) laufen. */
    .hero { padding: 16px 0 96px; }
    .hero > .container { padding-top: 24px; padding-bottom: 40px; }
    /* Closing-Section: extra Safe-Area-Padding gegen Safari-Bottom-Bar.
       Sonst wird der letzte Satz vom Browser-UI verschluckt. */
    .closing {
      padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    }
    /* Lime-Strich am Hero-Bottom auf Mobile entfernen - mit reduziertem
       Padding entsteht sonst ein optischer Bruch direkt unter den Pills. */
    .hero::after { display: none; }
    /* Origin-Grid auf Mobile: Flex-Column ist robuster als Grid mit auto-Spalten */
    .origin-grid {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }
    .origin-plus {
      align-self: center;
      transform: none;
      padding: 0;
      margin: 4px 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--surface-2);
      border: 2px solid var(--border-1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      line-height: 1;
      color: var(--civic-blue);
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(8,20,38,0.06);
    }
    /* Auf Mobile keinen rotierenden Dashed-Ring (sieht dort gequetscht aus) */
    .origin-plus::before { display: none; }
    .compare { grid-template-columns: 1fr; }
    .problems { grid-template-columns: 1fr; }
    .missions { grid-template-columns: 1fr; }
    .stack-products { grid-template-columns: 1fr; }

    /* Horizontale Slide-Animationen auf Mobile aus - sonst ragen Karten
       während des Reveals aus dem Viewport (animation-timeline: view
       hält translateX bei translateX(80px) wenn Position nicht voll erreicht).
       Stattdessen einfaches Fade-Up. */
    @supports (animation-timeline: view()) {
      .compare-card.them,
      .compare-card.us,
      .origin-card--local,
      .origin-card--tech,
      .stack-product:nth-child(1),
      .stack-product:nth-child(2) {
        animation: slide-up-soft linear both !important;
        animation-timeline: view() !important;
        animation-range: entry 0% cover 35% !important;
      }
    }
  }

  /* ════════════════════════════════════════════════════════════════
     DRIVE - Subtile Bewegung & Hover-Akzente (Tech-Company-Feel)
     ════════════════════════════════════════════════════════════════ */

  /* 1) Scroll-Reveal: Sections faden beim Eintreten ins Viewport sanft hoch.
     Plus alternierender Slide-In (left/right) auf Eyebrow + H2 für mehr „Drive" beim Scrollen. */
  @supports (animation-timeline: view()) {
    section {
      animation: section-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .hero { animation: none; }

    /* Eyebrow + H2: Slide-In von links beim Scrollen */
    section .eyebrow {
      animation: slide-from-left linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    section h2 {
      animation: slide-from-left linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }
    /* Lead-Text: Slide-In von rechts (Kontrast zur H2) */
    section .lead {
      animation: slide-from-right linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 38%;
    }
    /* Pullquote: subtiler Lime-Border-Sweep + slide-in */
    .pullquote {
      animation: pullquote-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    /* Origin-Result-Banner: Scale-In beim Scrollen (prominenter Auftritt) */
    .origin-result {
      animation: scale-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    /* Stack-Platform-Card: Lift-In von unten */
    .stack-platform, .stack-takeaway {
      animation: stack-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    /* Closing-Quote: Glow-In */
    .closing-quote {
      animation: glow-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    /* Origin-Cards: alternierender Slide (links / unten / rechts) - macht den Auftritt rhythmisch */
    .origin-card--local {
      animation: slide-from-left-strong linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    .origin-card--civic {
      animation: slide-up-strong linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 40%;
    }
    .origin-card--tech {
      animation: slide-from-right-strong linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    /* Plus-Symbole poppen mittendrin auf - kleiner Akzent zwischen den Karten */
    .origin-plus {
      animation: pop-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 38%;
    }
    /* Compare-Cards: links/rechts gegeneinander */
    .compare-card.them {
      animation: slide-from-left-strong linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .compare-card.us {
      animation: slide-from-right-strong linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 45%;
    }
    /* Problem-Cards: leicht versetzt von unten */
    .problem {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    /* Mission-Cards: gestaffelt von unten - jede etwas später */
    .mission:nth-child(1) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    .mission:nth-child(2) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
    .mission:nth-child(3) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
    /* Problem-Cards: ebenfalls gestaffelt */
    .problem:nth-child(1) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    .problem:nth-child(2) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 40%;
    }
    .problem:nth-child(3) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 45%;
    }
    .problem:nth-child(4) {
      animation: slide-up-soft linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 50%;
    }
    /* Stack-Products (Live-Prototyp / Roadmap): nebeneinander von links/rechts */
    .stack-product:nth-child(1) {
      animation: slide-from-left-strong linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 45%;
    }
    .stack-product:nth-child(2) {
      animation: slide-from-right-strong linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 48%;
    }
    /* Stack-Connector: vertikales Ein-Wachsen */
    .stack-connector {
      animation: connector-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
      transform-origin: top center;
    }
    /* Hero-Pills auf Markenstory: floaten von unten herein */
    .hero-pills .hero-pill:nth-child(1) {
      animation: pill-float-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
    }
    .hero-pills .hero-pill:nth-child(2) {
      animation: pill-float-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both;
    }
  }

  @keyframes section-rise {
    from { opacity: 0; transform: translateY(48px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes slide-from-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slide-from-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes pullquote-rise {
    from { opacity: 0; transform: translateX(-30px); border-left-width: 0; }
    to   { opacity: 1; transform: translateX(0); border-left-width: 3px; }
  }
  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes stack-rise {
    from { opacity: 0; transform: translateY(60px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes glow-in {
    from { opacity: 0; filter: blur(8px); transform: translateY(20px); }
    to   { opacity: 1; filter: blur(0); transform: translateY(0); }
  }
  /* Stärkere Slide-Varianten für die neuen Section-Reveals */
  @keyframes slide-from-left-strong {
    from { opacity: 0; transform: translateX(-80px) translateY(20px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
  }
  @keyframes slide-from-right-strong {
    from { opacity: 0; transform: translateX(80px) translateY(20px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
  }
  @keyframes slide-up-strong {
    from { opacity: 0; transform: translateY(70px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes slide-up-soft {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes pop-in {
    0%   { opacity: 0; transform: scale(0.4); }
    70%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes connector-grow {
    from { opacity: 0; transform: scaleY(0); }
    to   { opacity: 1; transform: scaleY(1); }
  }
  @keyframes pill-float-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 2) Sequentielle Stagger-Animation für Listen/Cards (initial bei Page-Load) */
  .problem, .mission, .stack-product, .origin-card {
    animation: card-pop 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .problem:nth-child(1)        { animation-delay: 0.05s; }
  .problem:nth-child(2)        { animation-delay: 0.15s; }
  .problem:nth-child(3)        { animation-delay: 0.25s; }
  .problem:nth-child(4)        { animation-delay: 0.35s; }
  .mission:nth-child(1)        { animation-delay: 0.05s; }
  .mission:nth-child(2)        { animation-delay: 0.20s; }
  .mission:nth-child(3)        { animation-delay: 0.35s; }
  .stack-product:nth-child(1)  { animation-delay: 0.05s; }
  .stack-product:nth-child(2)  { animation-delay: 0.20s; }

  @keyframes card-pop {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* 3) Hover-Lift auf interaktive Cards - Tech-SaaS-Feel */
  .problem,
  .mission,
  .compare-card,
  .stack-product,
  .origin-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s,
                background-color 0.25s;
    will-change: transform;
  }
  .problem:hover,
  .mission:hover,
  .compare-card:hover,
  .stack-product:hover,
  .origin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(8, 20, 38, 0.12);
  }

  /* 4) Numerische Marker (1/2/3/4) bekommen Civic-Lime-Halo on hover */
  .problem .marker {
    transition: box-shadow 0.3s, transform 0.25s;
  }
  .problem:hover .marker {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(208, 249, 98, 0.18),
                0 8px 22px rgba(208, 249, 98, 0.30);
  }

  /* 5) Live-Status: subtiler Lime-Pulse-Dot vor dem Text */
  .stack-product.live .status {
    position: relative;
    padding-left: 18px;
  }
  .stack-product.live .status::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--civic-lime);
    box-shadow: 0 0 0 0 rgba(208, 249, 98, 0.6);
    animation: live-ping 2.4s ease-out infinite;
  }
  @keyframes live-ping {
    0%   { box-shadow: 0 0 0 0 rgba(208, 249, 98, 0.6); }
    70%  { box-shadow: 0 0 0 14px rgba(208, 249, 98, 0); }
    100% { box-shadow: 0 0 0 0 rgba(208, 249, 98, 0); }
  }

  /* 6) Lociv-Mark in Body-Text bekommt sanften Lime-Akzent on hover */
  p .lociv-mark,
  h2 .lociv-mark,
  h3 .lociv-mark {
    transition: filter 0.3s;
  }
  p .lociv-mark:hover,
  h2 .lociv-mark:hover,
  h3 .lociv-mark:hover {
    filter: drop-shadow(0 0 12px rgba(98, 112, 229, 0.45));
  }

  /* 7) Origin-Plus „+" rotiert sanft, gibt Tech-Charakter */
  .origin-plus {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
  }
  .origin-grid:hover .origin-plus {
    transform: rotate(180deg);
    color: var(--civic-lime);
  }

  /* 8) Hero: Wortmarke bekommt einen subtilen, sehr langsamen Glow-Sweep */
  .hero-wordmark {
    background-image: linear-gradient(110deg,
      #FFFFFF 0%, #FFFFFF 40%,
      rgba(208, 249, 98, 0.85) 50%,
      #FFFFFF 60%, #FFFFFF 100%);
    background-size: 250% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: wordmark-sweep 12s ease-in-out infinite;
  }
  .hero-wordmark .tld {
    -webkit-text-fill-color: var(--civic-lime);
    background: none;
  }
  @keyframes wordmark-sweep {
    0%, 100% { background-position: 100% 50%; }
    50%      { background-position: 0% 50%; }
  }


  /* 10) Compare-Cards „us" hebt sich auf Hover stärker hervor (Civic-Highlight) */
  .compare-card.us {
    position: relative;
  }
  .compare-card.us::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(98, 112, 229, 0), rgba(208, 249, 98, 0.08));
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
  }
  .compare-card.us:hover::before { opacity: 1; }

  /* Reduced-Motion Respect */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    .hero-wordmark {
      background: none;
      color: var(--white);
      -webkit-text-fill-color: var(--white);
    }
    .hero-wordmark .tld { -webkit-text-fill-color: var(--civic-lime); }
  }

  /* ════════════════════════════════════════════════════════════════
     PRINT - A4 Querformat, 1 Sektion pro Seite
     ════════════════════════════════════════════════════════════════ */
  @page {
    size: A4 landscape;
    margin: 0;
  }
  @media print {
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    html, body {
      background: var(--white);
      font-size: 14px;
    }
    .container { max-width: none; padding: 0 56px; }

    .topbar { display: none; }

    .hero, section {
      page-break-before: always;
      page-break-inside: avoid;
      break-before: page;
      break-inside: avoid;
      min-height: 207mm;
      padding: 14px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hero {
      page-break-before: auto;
      break-before: auto;
    }
    .closing {
      min-height: 175mm;
      padding: 24px 0;
      page-break-after: avoid;
      break-after: avoid;
    }

    /* Hero kompakter */
    .hero-wordmark { font-size: 6.5rem; line-height: 0.95; margin-bottom: 18px; }
    .hero-rule { margin-bottom: 18px; }
    .hero-claim { font-size: 1.45rem; max-width: 720px; margin-bottom: 24px; }
    .hero-eyebrow { margin-bottom: 18px; }
    .hero-pill { font-size: 0.84rem; padding: 6px 16px; }

    /* Section-Headlines kompakter */
    h2 { font-size: 1.85rem; margin-bottom: 12px; max-width: none; }
    h2 + .lead { font-size: 0.98rem; margin-bottom: 18px; max-width: 900px; }
    .eyebrow { margin-bottom: 10px; font-size: 0.7rem; }

    /* Origin-Section */
    .origin-grid { gap: 14px; margin: 18px 0 14px; }
    .origin-card { padding: 22px 22px 22px 24px; border-radius: 10px; }
    .origin-card .origin-eyebrow { font-size: 0.7rem; margin-bottom: 10px; letter-spacing: 0.2em; max-width: calc(100% - 70px); }
    .origin-card .brand-glyph { font-size: 3rem; top: 10px; right: 16px; }
    .origin-card .term { font-size: 1.45rem; margin-bottom: 6px; }
    .origin-card .meaning { font-size: 0.86rem; line-height: 1.45; }
    .origin-plus { font-size: 1.6rem; }
    .origin-result { padding: 20px 18px; margin-top: 0; }
    .origin-result .equals { font-size: 0.78rem; margin-bottom: 6px; }
    .origin-result .formula { font-size: 1.5rem; }
    .origin-result .translation { font-size: 0.92rem; margin-top: 8px; }

    /* Compare-Cards */
    .compare { gap: 18px; margin-top: 22px; }
    .compare-card { padding: 24px 22px; }
    .compare-card.them h3 { font-size: 1.05rem; margin-bottom: 8px; }
    .compare-card.them ul li { font-size: 0.9rem; padding: 5px 0; }
    .compare-card.us h3 { font-size: 1.22rem; }

    /* Probleme */
    .problems { gap: 14px; margin: 22px 0; }
    .problem { padding: 16px 18px; }
    .problem .marker { width: 28px; height: 28px; font-size: 0.9rem; }
    .problem p { font-size: 0.93rem; }
    .pullquote { font-size: 1.35rem; padding: 6px 0 6px 22px; margin: 22px 0 0; }

    /* Missions */
    .missions { gap: 18px; margin-top: 22px; }
    .mission { padding: 22px 22px 22px 24px; border-radius: 10px; }
    .mission .num { font-size: 0.7rem; padding: 0; margin-bottom: 26px; letter-spacing: 0.2em; max-width: calc(100% - 70px); }
    .mission .big-num { font-size: 3rem; top: 10px; right: 16px; }
    .mission h3 { font-size: 1.08rem; margin-bottom: 10px; }
    .mission p { font-size: 0.9rem; }

    /* Produkt-Stack */
    .stack { margin-top: 14px; }
    .stack-platform { padding: 16px 22px; }
    .stack-platform .role { margin-bottom: 4px; font-size: 0.66rem; }
    .stack-platform .name { font-size: 1.45rem; margin-bottom: 4px; }
    .stack-platform .desc { font-size: 0.88rem; max-width: none; }
    .stack-connector { height: 14px; }
    .stack-products { gap: 14px; }
    .stack-product { padding: 16px 18px; }
    .stack-product .status { font-size: 0.64rem; margin-bottom: 8px; padding: 2px 10px; }
    .stack-product .name { font-size: 1.15rem; margin-bottom: 4px; }
    .stack-product .desc { font-size: 0.85rem; margin-bottom: 8px; line-height: 1.5; }
    .stack-product ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .stack-product ul li { font-size: 0.82rem; padding: 3px 0 3px 14px; border-bottom: none; }
    .stack-product ul li::before { top: 9px; width: 6px; height: 6px; }
    .stack-takeaway { font-size: 1rem; margin-top: 14px; line-height: 1.4; }

    /* Closing */
    .closing { padding: 36px 0; }
    .closing-quote { font-size: 1.95rem; max-width: 920px; margin-bottom: 24px; }
    .closing-eyebrow { margin-bottom: 16px; font-size: 0.72rem; }

    footer {
      page-break-before: avoid;
      break-before: avoid;
      padding: 18px 0;
      font-size: 0.82rem;
    }

    .origin-card, .origin-result, .compare-card, .problem,
    .mission, .stack-platform, .stack-product, .pullquote,
    .closing-quote {
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }


/* ════════════════════════════════════════════════════════════════════════
   Page-spezifische Markenstory-Overrides (vorher Inline in markenstory.php).
   Inkl. Dark-Section-Patterns, Reveal-Tuning, dezente Effekte.
   Stand: 2026-05-12 (PHP-Migration)
   ════════════════════════════════════════════════════════════════════════ */

  /* === markenstory-2 Overrides: Dark-Sections auf pures Deep BG === */
  /* section.dark bringt aktuell Hero-Gradient (Civic-Blue) + Glow-Overlays.
     Hier auf reines Deep BG mit Punktraster umstellen - das gibt weißen Cards
     mehr Kontrast und die Civic-Blue-Lociv-Mark bleibt sichtbar. */
  section.dark {
    background: var(--deep-bg) !important;
    background-color: var(--deep-bg) !important;
    /* Punktraster statt Linien-Grid (Light nutzt Grid) - schafft Kontrast
       und passt thematisch zum "Connected Civic Node"-Logo (Knoten). */
    background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1.2px, transparent 1.5px) !important;
    background-size: 28px 28px !important;
    background-position: 0 0 !important;
  }
  /* Dark-Section bekommt eigenen Glow-Layer (Light hat den gleichen Pattern,
     aber in Civic-Blue/Lime auf Weiß - hier umgekehrt: kräftigere Tints
     auf Deep BG). Vorbestehender ::before-Override mit display:none geht
     darum verloren - wir definieren ihn neu. */
  section.dark::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 700px 480px at 8% 12%, rgba(98, 112, 229, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse 560px 420px at 92% 88%, rgba(208, 249, 98, 0.10) 0%, transparent 65%) !important;
    pointer-events: none;
    z-index: 0;
  }
  /* Mission-Section spiegelt Glow-Position für Asymmetrie */
  section.dark + section.alt + section.dark::before,
  section.dark:nth-of-type(even)::before {
    background:
      radial-gradient(ellipse 700px 480px at 90% 15%, rgba(126, 139, 252, 0.16) 0%, transparent 60%),
      radial-gradient(ellipse 560px 420px at 5% 85%, rgba(208, 249, 98, 0.08) 0%, transparent 65%) !important;
  }

  /* === Sparkle-Knoten: dezente pulsierende Lichter ===========
     Kleine Punkte (r=2px) leuchten an wenigen Stellen leise auf -
     gibt der Punktraster-Fläche subtile Bewegung, ohne ins
     voll vernetzte Hero-SVG abzudriften. */
  .dark-sparkles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .sparkle {
    fill: rgba(164, 180, 255, 0.55);
    animation: sparkle-glow 5.5s ease-in-out infinite;
  }
  .sparkle-lime { fill: rgba(208, 249, 98, 0.75); }
  @keyframes sparkle-glow {
    0%, 100% { opacity: 0.15; r: 1.6; }
    50%      { opacity: 1;    r: 2.4; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sparkle { animation: none !important; opacity: 0.4; }
  }

  /* === Light-Sections: Grid + asymmetrischer Akzent-Glow =================
     Gleiche Tech-Logik wie Dark, aber invertiert:
     - 96px-Linien-Grid in zartem Civic-Blue-Schimmer
     - radialer Civic-Blue-Glow in linker oberer Ecke (sehr subtle)
     - radialer Lime-Tint in rechter unterer Ecke
     Macht weiße/hellgraue Sections nicht mehr "fade", bleibt aber B2B-zurückhaltend. */
  section.alt, section.soft {
    position: relative;
    background-image:
      linear-gradient(to right, rgba(98, 112, 229, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(98, 112, 229, 0.05) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px;
    background-position: 0 0, 0 0;
  }
  section.alt::before, section.soft::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 600px 400px at 8% 12%, rgba(98, 112, 229, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 500px 380px at 92% 88%, rgba(208, 249, 98, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  /* Asymmetrie: Soft-Section dreht Glow-Position, damit Pattern nicht monoton wirkt */
  section.soft::before {
    background:
      radial-gradient(ellipse 600px 400px at 90% 15%, rgba(126, 139, 252, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 500px 380px at 5% 85%, rgba(208, 249, 98, 0.05) 0%, transparent 65%);
  }
  section.alt > .container, section.soft > .container {
    position: relative;
    z-index: 1;
  }

  /* Closing-Section behält den Hero-Gradient (visueller Akzent zum Ende) */
  section.closing.on-dark {
    background: var(--deep-bg) !important;
    background-image: var(--hero-gradient) !important;
  }
  section.closing.on-dark::before { display: block !important; }

  /* === Reveal-Animation früher einfaden ===
     Original: entry 0% cover 25% (start bei Top-In, fertig bei 25% Cover).
     Override: früher fertig sein, damit der User den Effekt mitbekommt
     bevor er weiterscrollt. */
  @supports (animation-timeline: view()) {
    section {
      animation-range: entry -10% cover 15% !important;
    }
    section .eyebrow {
      animation-range: entry -5% cover 18% !important;
    }
    section h2 {
      animation-range: entry 0% cover 20% !important;
    }
    section .lead {
      animation-range: entry 3% cover 22% !important;
    }
    .pullquote, .origin-result, .stack-platform, .stack-takeaway {
      animation-range: entry 0% cover 22% !important;
    }
    /* Mission-Cards: gestaffelter Start, aber GLEICHES Ende, damit alle
       Karten zur gleichen Scroll-Position voll deckend sind (sonst wirkt
       die letzte Karte im Screenshot dunkler / halb-transparent). */
    .mission:nth-child(1) { animation-range: entry 0% cover 22% !important; }
    .mission:nth-child(2) { animation-range: entry 4% cover 22% !important; }
    .mission:nth-child(3) { animation-range: entry 8% cover 22% !important; }
    /* Closing-Quote: Blur-Phase auf wenige Scroll-Prozente reduzieren,
       damit der Text nicht länger unscharf bleibt. */
    .closing-quote {
      animation-range: entry 0% cover 18% !important;
    }
  }

  /* ════════════════════════════════════════════════════════════════
     DEZENTE EFFEKTE - "Pepp" ohne Showeffekt
     ════════════════════════════════════════════════════════════════ */

  /* ─── Cards: sanftes Hover-Heben ───
     Mission/Origin/Stack/Problem-Cards reagieren auf Hover mit
     leichtem Lift + leicht intensivierter Schatten + Akzent-Glow.
     Reduce-Motion: kein Lift, nur Shadow. */
  .mission, .origin-card, .stack-product, .stack-platform, .problem {
    transition:
      transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mission:hover, .origin-card:hover, .problem:hover {
    transform: translateY(-4px);
    box-shadow:
      0 14px 32px -10px rgba(8, 20, 38, 0.18),
      0 0 0 1px rgba(98, 112, 229, 0.18);
  }
  .mission--technisch:hover, .origin-card--tech:hover {
    box-shadow:
      0 14px 32px -10px rgba(8, 20, 38, 0.18),
      0 0 0 1px rgba(208, 249, 98, 0.32);
  }
  .stack-product:hover, .stack-platform:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -12px rgba(8, 20, 38, 0.22);
  }

  /* ─── Big-Num & Brand-Glyph: sanftes Atmen ───
     Die großen 01/02/03 und LO/CIV/.IO im Card-Hintergrund pulsen leicht,
     gibt Leben ohne abzulenken (12s Cycle, kaum sichtbar). */
  @keyframes glyph-breathe {
    0%, 100% { opacity: 0.16; transform: scale(1); }
    50%      { opacity: 0.22; transform: scale(1.02); }
  }
  .mission .big-num, .origin-card .brand-glyph {
    animation: glyph-breathe 12s ease-in-out infinite;
  }
  .mission:nth-child(2) .big-num,
  .origin-card--civic .brand-glyph { animation-delay: 4s; }
  .mission:nth-child(3) .big-num,
  .origin-card--tech .brand-glyph  { animation-delay: 8s; }

  /* ─── Cursor-Glow auf Dark-Sections ───
     Ein subtiler Civic-Blue-Glow folgt dem Mauszeiger auf dunklen
     Sections und macht die Punktraster-Fläche lebendig.
     Wird per JS gesetzt - hier nur die CSS-Variable + Pseudo-Element. */
  section.dark { --cursor-x: 50%; --cursor-y: 50%; }
  section.dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      600px circle at var(--cursor-x) var(--cursor-y),
      rgba(98, 112, 229, 0.10) 0%,
      transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
  }
  section.dark:hover::after { opacity: 1; }

  /* ─── Lociv-Mark: zarter Hover-Glow ───
     Bewegt die Maus über "Lociv.io" im Text, glimmt das .io kurz auf. */
  .lociv-mark { transition: filter 0.4s ease; }
  .lociv-mark:hover {
    filter: drop-shadow(0 0 14px rgba(208, 249, 98, 0.45));
  }

  /* ─── Eyebrow-Pulse ───
     Die kleinen Caps-Labels (DIE MARKENSTORY, DIE MISSION, ...)
     bekommen einen ganz leichten Blink-Akzent über die Lime-Linie. */
  .eyebrow {
    position: relative;
  }

  /* Reduced-Motion respektieren */
  @media (prefers-reduced-motion: reduce) {
    .mission, .origin-card, .stack-product, .stack-platform, .problem,
    .mission .big-num, .origin-card .brand-glyph,
    section.dark::after, .lociv-mark {
      animation: none !important;
      transition: none !important;
    }
    .mission:hover, .origin-card:hover, .problem:hover,
    .stack-product:hover, .stack-platform:hover {
      transform: none;
    }
  }