/* Sectorum · gemeinsames Stylesheet (vormals Inline-CSS der Startseite) */
  :root{
    --bg: #050404; --bg-soft: #0A0808; --bg-elevated: #0F0C0B;
    --signal: #E8500C; --signal-rust: #C4410E; --signal-b: #FF7A3D;
    --signal-dim: rgba(232,80,12,0.12); --signal-glow: rgba(232,80,12,0.20);
    --ink: #FFFFFF; --ink-mid: rgba(255,255,255,0.62); --ink-faint: rgba(255,255,255,0.48);
    --glass: rgba(255,255,255,0.03); --glass-hover: rgba(255,255,255,0.055); --glass-border: rgba(255,255,255,0.08);
    --line: rgba(255,255,255,0.08);
    --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace;
    --max: 1240px; --edge: clamp(1.25rem, 5vw, 3rem);
    --ease: cubic-bezier(0.16,1,0.3,1);
    --radius-card: 20px; --radius-pill: 999px;
  }

  *, *::before, *::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
  body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img, svg{ display: block; max-width: 100%; }
  a{ color: inherit; text-decoration: none; }
  button{ font-family: inherit; background: none; border: none; color: inherit; padding: 0; }
  a, button, .faq-q, .autopilot-toggle, .menu-toggle{ cursor: pointer; }
  :focus-visible{ outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }
  .wrap{ max-width: var(--max); margin-inline: auto; padding-inline: var(--edge); position: relative; }
  .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .skip-link{ position: fixed; top: -100px; left: 1rem; z-index: 1000; background: var(--signal); color: #fff; padding: 0.7rem 1.2rem; border-radius: 8px; transition: top 0.2s ease; font-size: 0.9rem; }
  .skip-link:focus{ top: 1rem; }

  h1, h2, h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
  p{ margin: 0; }
  .eyebrow{ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); display: inline-flex; align-items: center; gap: 0.55rem; }
  .eyebrow::before{ content: ''; width: 5px; height: 5px; background: var(--signal); box-shadow: 0 0 8px var(--signal-glow); flex-shrink: 0; }
  .section-head{ max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 1; }
  .section-head h2{ margin-top: 0.9rem; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; }
  .section-head p{ margin-top: 1.1rem; color: var(--ink-mid); font-size: 1.05rem; max-width: 56ch; line-height: 1.65; }
  .section-head.is-center{ margin-inline: auto; text-align: center; }
  section.section{ padding-block: clamp(4.5rem, 9vw, 7.5rem); position: relative; }

  /* ===== Aurora background ===== */
  .aurora-wrap{ position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
  .aurora-fallback{ position: absolute; inset: -15%;
    background:
      radial-gradient(ellipse 55% 45% at 28% 28%, rgba(196,65,14,0.42), transparent 60%),
      radial-gradient(ellipse 50% 45% at 78% 62%, rgba(232,80,12,0.32), transparent 65%),
      radial-gradient(ellipse 42% 36% at 50% 92%, rgba(255,122,61,0.16), transparent 60%);
    filter: blur(30px); }
  #aurora{ position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
  html.webgl-ready #aurora{ display: block; }
  html.webgl-ready .aurora-fallback{ display: none; }

  /* ===== Dot grid texture ===== */
  .dot-grid{ position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 78%); }

  /* ===== Glass card ===== */
  .glass-card{ position: relative; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-border); border-radius: var(--radius-card); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
  .glass-card:hover{ border-color: rgba(232,80,12,0.3); box-shadow: 0 0 32px rgba(232,80,12,0.12); }

  /* ===== Buttons ===== */
  .btn{ display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-pill); transition: transform 0.2s var(--ease), box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease; white-space: nowrap; will-change: transform; }
  .btn-primary{ background: #fff; color: #100b09; padding: 0.4rem 0.4rem 0.4rem 1.6rem; }
  .btn-primary.is-lg{ padding: 0.5rem 0.5rem 0.5rem 2rem; font-size: 1.05rem; }
  .btn-primary .btn-arrow{ width: 36px; height: 36px; border-radius: 50%; background: var(--signal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s var(--ease); }
  .btn-primary.is-lg .btn-arrow{ width: 44px; height: 44px; }
  .btn-primary .btn-arrow svg{ width: 16px; height: 16px; color: #fff; }
  .btn-primary:hover{ box-shadow: 0 8px 30px rgba(232,80,12,0.35); transform: translateY(-2px); }
  .btn-primary:hover .btn-arrow{ transform: translateX(3px); }
  .btn-glass{ background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); padding: 0.95rem 1.7rem; }
  .btn-glass:hover{ border-color: rgba(255,255,255,0.22); background: var(--glass-hover); }

  /* ===== Reveal system ===== */
  .reveal, .reveal-left, .reveal-right, .reveal-scale{ opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--stagger-delay, 0s); }
  .reveal{ transform: translateY(26px); }
  .reveal-left{ transform: translateX(-26px); }
  .reveal-right{ transform: translateX(26px); }
  .reveal-scale{ transform: scale(0.94); }
  .reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible{ opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){ .reveal, .reveal-left, .reveal-right, .reveal-scale{ opacity: 1; transform: none; transition: none; } }

  /* ===== Scroll progress ===== */
  .scroll-progress{ position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); z-index: 300; box-shadow: 0 0 8px var(--signal-glow); pointer-events: none; }

  /* ===== Header ===== */
  .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding-block: 1.2rem; transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease; border-bottom: 1px solid transparent; }
  .site-header.is-scrolled{ background: rgba(5,4,4,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--line); padding-block: 0.85rem; }
  .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .logo{ display: flex; align-items: center; }
  .logo img{ height: 20px; width: auto; }
  .main-nav{ display: flex; align-items: center; gap: 2.2rem; }
  .main-nav ul{ list-style: none; display: flex; gap: 1.9rem; margin: 0; padding: 0; }
  .main-nav a{ font-size: 0.92rem; color: var(--ink-mid); transition: color 0.2s ease; position: relative; padding-block: 0.2rem; }
  .main-nav a:hover, .main-nav a.is-active{ color: var(--ink); }
  .main-nav a.is-active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--signal); border-radius: 2px; }
  .header-cta{ padding: 0.65rem 1.35rem; font-size: 0.88rem; }
  .menu-toggle{ display: none; padding: 0.4rem; color: var(--ink); }
  .menu-toggle svg{ width: 22px; height: 22px; }

  /* ===== Mobile nav ===== */
  .mobile-nav{ display: none; position: fixed; inset: 0; background: var(--bg); z-index: 500; padding: 1.5rem var(--edge); flex-direction: column; transform: translateY(-8px); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
  .mobile-nav.is-open{ display: flex; transform: translateY(0); opacity: 1; }
  .mobile-nav-top{ display: flex; justify-content: space-between; align-items: center; }
  .mobile-nav ul{ list-style: none; margin: 3rem 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
  .mobile-nav ul a{ font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--ink); }
  .mobile-nav .btn{ margin-top: 2.5rem; justify-content: center; width: 100%; }

  /* ===== A. HERO ===== */
  .hero{ position: relative; min-height: 100vh; display: flex; align-items: center; padding-block: clamp(7rem, 12vw, 6rem); overflow: hidden; }
  .hero-inner{ position: relative; z-index: 2; max-width: 760px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .badge-pill{ display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--signal-b); background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); margin-bottom: 2.2rem; }
  .badge-pill .spark{ width: 13px; height: 13px; color: var(--signal-b); flex-shrink: 0; }
  .hero h1{ font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; }
  .hero-sub{ margin-top: 1.6rem; max-width: 52ch; font-size: 1.15rem; line-height: 1.65; color: var(--ink-mid); }
  .hero-actions{ margin-top: 2.4rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
  .hero-trust{ margin-top: 3.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .avatar-stack{ display: flex; align-items: center; }
  .avatar-stack span{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .avatar-stack span:first-child{ margin-left: 0; }
  .avatar-stack img{ width: 100%; height: 100%; object-fit: cover; }
  .hero-trust-text{ font-size: 0.86rem; color: var(--ink-faint); }

  /* ===== Footer ===== */
  .site-footer{ position: relative; background: var(--bg-soft); border-top: 1px solid var(--line); padding-block: 3.2rem 2.2rem; z-index: 1; }
  .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
  .footer-brand .logo{ margin-bottom: 0.9rem; }
  .footer-brand p{ color: var(--ink-faint); font-size: 0.88rem; max-width: 32ch; line-height: 1.6; }
  .footer-col h4{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem 0; font-weight: 500; }
  .footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
  .footer-col a{ font-size: 0.9rem; color: var(--ink-mid); transition: color 0.2s ease; }
  .footer-col a:hover{ color: var(--ink); }
  .footer-bottom{ margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--ink-faint); }

  /* ===== 2. TRUST MARQUEE ===== */
  .marquee-band{ position: relative; background: var(--bg-soft); border-block: 1px solid var(--line); padding-block: 1.7rem; overflow: hidden; z-index: 1; }
  .marquee-track{ display: flex; width: max-content; gap: 2.4rem; align-items: center; animation: marqueeScroll 32s linear infinite; }
  .marquee-band:hover .marquee-track{ animation-play-state: paused; }
  @keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
  .marquee-item{ font-family: var(--font-mono); font-size: 0.92rem; color: var(--ink-faint); white-space: nowrap; transition: color 0.2s ease; }
  .marquee-item:hover{ color: var(--signal-b); }
  .marquee-sep{ color: var(--signal-rust); opacity: 0.6; font-size: 0.7rem; }
  @media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } }

  /* ===== 3. STATS ===== */
  .stats{ position: relative; z-index: 1; background: var(--bg); }
  .stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
  .stat-card{ padding: 2.1rem 1.7rem; }
  .stat-card strong{ display: flex; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
  .stat-card span{ display: block; margin-top: 0.8rem; font-size: 0.88rem; color: var(--ink-mid); line-height: 1.5; }

  /* ===== 3B. CONVERGENCE ("Everything you need"-Baum) ===== */
  .convergence{ position: relative; z-index: 1; background: var(--bg-soft); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .convergence-diagram{ position: relative; max-width: 820px; margin: 3rem auto 0; aspect-ratio: 900 / 400; }
  .convergence-diagram svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .conv-branch-base{ stroke: var(--glass-border); stroke-width: 1.5; fill: none; }
  .conv-branch-flow{ stroke: var(--signal); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-dasharray: 5 90; opacity: 0.95; filter: drop-shadow(0 0 3px var(--signal-glow)); animation: convFlow 3.2s linear infinite; }
  @keyframes convFlow{ to{ stroke-dashoffset: -380; } }
  .conv-trunk-base{ stroke: var(--glass-border); stroke-width: 2; fill: none; }
  .conv-trunk-flow{ stroke: var(--signal); stroke-width: 2.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--signal-glow)); stroke-dasharray: 14 4; opacity: 0.9; animation: convTrunk 1.6s linear infinite; }
  @keyframes convTrunk{ to{ stroke-dashoffset: -18; } }
  .conv-node{ fill: var(--bg-soft); stroke: var(--glass-border); stroke-width: 1.5; }
  .conv-core{ fill: var(--signal); filter: drop-shadow(0 0 12px var(--signal-glow)); animation: statusPulseConv 2.4s ease-in-out infinite; }
  @keyframes statusPulseConv{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.55; } }
  .conv-labels{ position: absolute; top: -0.3rem; left: 0; right: 0; height: 0; }
  .conv-labels span{ position: absolute; top: 0; transform: translate(-50%, -100%); font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; padding-bottom: 0.5rem; }
  .conv-core-label{ position: absolute; left: 50%; bottom: -1.9rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--signal-b); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce){ .conv-branch-flow, .conv-trunk-flow, .conv-core{ animation: none; } }
  @media (max-width: 640px){ .conv-labels span{ font-size: 0.6rem; } }

  /* ===== 4. LEISTUNGEN — sticky-left story + free-standing scroll-acts ===== */
  .leistungen{ position: relative; z-index: 1; background: var(--bg-soft); }
  .leistung-icon{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--signal-dim); color: var(--signal-b); border-radius: 12px; margin-bottom: 1.2rem; flex-shrink: 0; }
  .leistung-icon svg{ width: 20px; height: 20px; }

  /* two-column story (desktop) */
  .story{ display: none; grid-template-columns: minmax(230px, 0.8fr) 1.2fr; gap: clamp(1.5rem, 3.5vw, 3.5rem); margin-top: 2.5rem; align-items: start; }
  .story-sticky{ position: sticky; top: 7vh; height: 86vh; max-height: 720px; display: flex; flex-direction: column; justify-content: center; }
  .story-progress{ display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2.2rem; max-width: 260px; }
  .story-marker{ font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; }
  .story-marker.is-active{ color: #fff; border-color: var(--signal); background: var(--signal-dim); box-shadow: 0 0 16px var(--signal-glow); }
  .story-line{ flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
  .story-line i{ position: absolute; inset: 0; width: 0%; background: var(--signal); display: block; transition: width 0.5s var(--ease); }
  .story-line.is-filled i{ width: 100%; }
  .story-chapter{ display: none; }
  .story-chapter.is-active{ display: block; animation: chapterFade 0.5s var(--ease); }
  @keyframes chapterFade{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
  .story-chapter h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .story-chapter p{ margin-top: 1.1rem; color: var(--ink-mid); font-size: 1.02rem; line-height: 1.7; max-width: 44ch; }
  .story-bullets{ list-style: none; margin: 1.7rem 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
  .story-bullets li{ display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; color: var(--ink-mid); }
  .story-bullets li::before{ content: ''; width: 6px; height: 6px; background: var(--signal); flex-shrink: 0; box-shadow: 0 0 6px var(--signal-glow); }

  /* right column: free-standing pinned animations */
  .acts{ min-width: 0; position: relative; }
  .act{ position: relative; height: 190vh; }
  .act:last-child{ height: 160vh; }
  .act-card{ position: sticky; top: 7vh; height: 86vh; max-height: 720px; display: flex; align-items: center; justify-content: center; overflow: visible; }
  .act-stage{ position: relative; width: 100%; aspect-ratio: 900 / 560; max-height: 86vh; margin: auto; }
  .act-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

  /* shared act svg language */
  .act-appear{ opacity: 0; transition: opacity 0.6s var(--ease); }
  .act-appear.is-in{ opacity: 1; }
  .act-flow-solid{ fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--signal-glow)); stroke-dasharray: 1; stroke-dashoffset: 1; }
  .act-flow-dashed{ fill: none; stroke: var(--ink-faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.5 9; opacity: 0.5; }
  .act-node{ fill: var(--bg-elevated); stroke: var(--ink-faint); stroke-width: 2; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease), filter 0.4s var(--ease); }
  .act-node.is-lit{ fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 7px var(--signal-glow)); }
  .act-node-hollow{ fill: var(--bg-elevated); stroke: var(--ink-faint); stroke-width: 2; }
  .act-label{ font-family: var(--font-display); font-weight: 500; font-size: 13px; fill: var(--ink-mid); }
  .act-label-dim{ font-family: var(--font-display); font-weight: 500; font-size: 13px; fill: var(--ink-faint); }

  /* pills (svg) */
  .pill-cream{ fill: #F4EEE7; }
  .pill-solid{ fill: var(--signal); }
  .pill-solid-glow{ filter: drop-shadow(0 0 18px var(--signal-glow)); }
  .pill-text-dark{ fill: #17110D; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
  .pill-text-light{ fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
  .pill-dollar{ fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 21px; }

  /* scene 2 checks + autopilot */
  .check-ring{ fill: var(--bg-elevated); stroke: var(--ink-faint); stroke-width: 2; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease), filter 0.4s var(--ease); }
  .check-badge.is-done .check-ring{ fill: var(--signal); stroke: var(--signal); filter: drop-shadow(0 0 7px var(--signal-glow)); }
  .check-mark{ fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.4s var(--ease); }
  .check-badge.is-done .check-mark{ opacity: 1; }
  .check-label{ fill: var(--ink-faint); font-family: var(--font-display); font-weight: 600; font-size: 15px; transition: fill 0.4s var(--ease); }
  .check-badge.is-done .check-label{ fill: #fff; }
  .check-col-title{ fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
  .ap-track{ fill: rgba(23,17,13,0.16); transition: fill 0.35s var(--ease); }
  .ap-knob{ fill: #b4ada3; transform-box: fill-box; transform-origin: center; transition: transform 0.35s var(--ease), fill 0.35s var(--ease); }
  .autopilot-pill.is-on .ap-track{ fill: var(--signal); }
  .autopilot-pill.is-on .ap-knob{ fill: #fff; transform: translateX(15px); }

  /* scene 3 orbit */
  .orbit-ring{ fill: none; stroke: var(--signal); stroke-width: 2; opacity: 0.65; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--signal-glow)); stroke-dasharray: 1; stroke-dashoffset: 1; }
  .orbit-cursor-halo{ fill: var(--signal); opacity: 0.22; }
  .orbit-cursor{ fill: #fff; stroke: var(--signal); stroke-width: 2.5; }
  .skeleton-bar{ fill: rgba(255,255,255,0.07); }
  .skeleton-bar-sm{ fill: rgba(255,255,255,0.05); }
  .float-card-bg{ fill: #F4EEE7; }
  .float-card-title{ fill: #17110D; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
  .float-card-name{ fill: #17110D; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
  .float-card-role{ fill: #6b6259; font-family: var(--font-display); font-weight: 400; font-size: 11px; }
  .float-card-hired{ fill: var(--signal); font-family: var(--font-mono); font-weight: 500; font-size: 12px; }
  .float-pill-text{ fill: #17110D; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
  .float-node{ animation: floatY 5s ease-in-out infinite; }
  @keyframes floatY{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce){ .float-node{ animation: none; } .act-appear{ transition: none; } }

  /* Mobile fallback: simple vertical cards */
  .leistungen-mobile{ display: flex; flex-direction: column; gap: 1.2rem; }
  .leistung-card{ padding: 1.9rem; }
  .leistung-card.is-featured{ padding: 2.2rem; border-color: rgba(232,80,12,0.22); }
  .leistung-card h3{ font-size: 1.3rem; }
  .leistung-card p{ margin-top: 0.9rem; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.65; }

  @media (min-width: 900px){
    .story{ display: grid; }
    .leistungen-mobile{ display: none; }
  }

  /* ===== 5. WARUM SECTORUM ===== */
  .why{ position: relative; z-index: 1; background: var(--bg); }
  .why-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .why-card{ padding: 2rem 1.9rem; }
  .why-icon{ width: 40px; height: 40px; border-radius: 12px; background: var(--signal-dim); color: var(--signal-b); display: flex; align-items: center; justify-content: center; margin-bottom: 1.3rem; }
  .why-icon svg{ width: 20px; height: 20px; }
  .why-card h3{ font-size: 1.2rem; }
  .why-card p{ margin-top: 0.6rem; color: var(--ink-mid); font-size: 0.94rem; line-height: 1.6; }

  /* ===== 6. PROZESS-TIMELINE ===== */
  .prozess{ position: relative; z-index: 1; background: var(--bg-soft); }
  .timeline{ position: relative; max-width: 660px; margin-inline: auto; }
  .timeline-track{ position: absolute; left: 23px; top: 6px; bottom: 6px; width: 2px; }
  .timeline-track svg{ width: 100%; height: 100%; overflow: visible; display: block; }
  .timeline-track-base{ stroke: var(--glass-border); stroke-width: 2; fill: none; stroke-dasharray: 1.2 2.6; }
  .timeline-track-fill{ stroke: var(--signal); stroke-width: 2; fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 0 4px var(--signal-glow)); }
  .timeline.is-drawn .timeline-track-fill{ stroke-dashoffset: 0; }
  .timeline-step{ position: relative; display: flex; gap: 1.5rem; padding-block: 1.9rem; }
  .timeline-step:first-child{ padding-top: 0; }
  .timeline-node{ position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-soft); border: 2px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); flex-shrink: 0; transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease); z-index: 1; }
  .timeline-node svg{ width: 20px; height: 20px; }
  .timeline-step.is-reached .timeline-node{ border-color: var(--signal); color: #fff; background: var(--signal-dim); box-shadow: 0 0 18px var(--signal-glow); transform: scale(1.08); }
  .timeline-body{ padding-top: 0.3rem; }
  .timeline-body h3{ font-size: 1.2rem; display: flex; align-items: baseline; gap: 0.6rem; }
  .timeline-num{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--signal-b); font-weight: 400; }
  .timeline-body p{ margin-top: 0.6rem; color: var(--ink-mid); font-size: 0.96rem; line-height: 1.6; max-width: 46ch; }
  .timeline-finish{ position: relative; display: flex; align-items: center; gap: 1.5rem; padding-top: 0.6rem; }
  .timeline-finish-flag{ position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-soft); border: 2px dashed var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); flex-shrink: 0; z-index: 1; transition: border-color 0.4s ease, color 0.4s ease; }
  .timeline-finish-flag svg{ width: 18px; height: 18px; }
  .timeline.is-drawn .timeline-finish-flag{ border-color: var(--signal-b); color: var(--signal-b); border-style: solid; }
  .timeline-finish span{ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-faint); text-transform: uppercase; }

  /* ===== 6B. LEISTUNGS-MATRIX (Quadranten + Energie-Linien) ===== */
  .lmatrix-sec{ position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
  .lmatrix{ position: relative; max-width: 1080px; margin: 3.5rem auto 0; }
  .lmatrix-row{ position: relative; display: grid; }
  .lmatrix-row.is-top{ grid-template-columns: 1fr 1fr; padding-bottom: 4.5rem; }
  .lmatrix-row.is-bottom{ grid-template-columns: 1fr 1fr 1fr; padding-top: 4.5rem; }
  .lmatrix-item{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; padding-inline: 1.4rem; }
  .lmatrix-item p{ margin: 0; color: var(--ink-mid); font-size: 0.98rem; line-height: 1.65; max-width: 34ch; }
  .lmatrix-icon{ width: 56px; height: 56px; border-radius: 15px; background: var(--bg-elevated); border: 1px solid rgba(232,80,12,0.28); display: flex; align-items: center; justify-content: center; color: var(--ink); box-shadow: 0 0 22px rgba(232,80,12,0.10); flex-shrink: 0; }
  .lmatrix-icon svg{ width: 22px; height: 22px; }

  .lmatrix-axis{ position: relative; height: 1px; background: rgba(255,255,255,0.07); }
  .lm-hbeam{ position: absolute; top: 0; height: 1px; overflow: hidden; }
  .lm-hbeam.is-left{ left: 0; width: 50%; }
  .lm-hbeam.is-right{ left: 50%; width: 50%; }
  .lm-hbeam i{ position: absolute; top: 0; width: 130px; height: 1px; display: block; }
  .lm-hbeam.is-left i{ left: 0; background: linear-gradient(90deg, transparent, var(--signal)); animation: lmBeamL 4.6s linear infinite; }
  .lm-hbeam.is-right i{ right: 0; background: linear-gradient(270deg, transparent, var(--signal)); animation: lmBeamR 4.6s linear infinite; animation-delay: 1.5s; }
  @keyframes lmBeamL{ from{ left: -130px; } to{ left: 100%; } }
  @keyframes lmBeamR{ from{ right: -130px; } to{ right: 100%; } }

  .lm-vline{ position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.07); overflow: hidden; }
  .lmatrix-row.is-top .lm-vline{ left: 50%; }
  .lm-vline.at-1{ left: 33.333%; }
  .lm-vline.at-2{ left: 66.666%; }
  .lm-vline i{ position: absolute; left: 0; width: 1px; height: 110px; display: block; }
  .lmatrix-row.is-top .lm-vline i{ background: linear-gradient(180deg, transparent, var(--signal)); animation: lmBeamDown 4.6s linear infinite; animation-delay: 0.7s; }
  .lmatrix-row.is-bottom .lm-vline i{ background: linear-gradient(0deg, transparent, var(--signal)); animation: lmBeamUp 4.6s linear infinite; }
  .lm-vline.at-1 i{ animation-delay: 2.2s; }
  .lm-vline.at-2 i{ animation-delay: 3.1s; }
  @keyframes lmBeamDown{ from{ top: -110px; } to{ top: 100%; } }
  @keyframes lmBeamUp{ from{ bottom: -110px; } to{ bottom: 100%; } }

  .lmatrix-core{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(180deg, #FF8A3D, var(--signal)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 34px rgba(232,80,12,0.35), 0 0 90px rgba(232,80,12,0.16); z-index: 2; animation: lmCorePulse 3.2s ease-in-out infinite; }
  .lmatrix-core svg{ width: 24px; height: 24px; }
  @keyframes lmCorePulse{ 0%, 100%{ box-shadow: 0 0 34px rgba(232,80,12,0.35), 0 0 90px rgba(232,80,12,0.16); } 50%{ box-shadow: 0 0 44px rgba(232,80,12,0.5), 0 0 110px rgba(232,80,12,0.24); } }

  @media (prefers-reduced-motion: reduce){
    .lm-hbeam i, .lm-vline i{ animation: none; display: none; }
    .lmatrix-core{ animation: none; }
  }
  @media (max-width: 899px){
    .lmatrix{ margin-top: 2.5rem; }
    .lmatrix-row.is-top, .lmatrix-row.is-bottom{ grid-template-columns: 1fr; gap: 2.4rem; padding: 0; }
    .lmatrix-row.is-bottom{ margin-top: 2.4rem; }
    .lmatrix-axis, .lm-vline{ display: none; }
  }

  /* ===== 7. FAQ ===== */
  .faq{ position: relative; z-index: 1; background: var(--bg-soft); }
  .faq-list{ max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.9rem; }
  .faq-item{ overflow: hidden; }
  .faq-q{ width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.6rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
  .faq-q .plus{ position: relative; width: 18px; height: 18px; flex-shrink: 0; }
  .faq-q .plus::before, .faq-q .plus::after{ content: ''; position: absolute; background: var(--signal); transition: transform 0.25s ease; }
  .faq-q .plus::before{ top: 8px; left: 0; width: 18px; height: 2px; }
  .faq-q .plus::after{ top: 0; left: 8px; width: 2px; height: 18px; }
  .faq-item.is-open .faq-q .plus::after{ transform: rotate(90deg); }
  .faq-a-wrap{ max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .faq-a{ padding: 0 1.6rem 1.4rem; font-size: 0.96rem; color: var(--ink-mid); line-height: 1.65; }

  /* ===== 8. CTA FINAL ===== */
  .cta-final{ position: relative; z-index: 1; text-align: center; padding-block: clamp(5rem, 10vw, 8rem); background: transparent; overflow: hidden; }
  .cta-final-scrim{ position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 40%, transparent, var(--bg) 78%); pointer-events: none; }
  .cta-final-inner{ position: relative; max-width: 640px; margin-inline: auto; z-index: 1; }
  .cta-final h2{ font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.1; }
  .cta-final .btn{ margin-top: 2.2rem; }
  .cta-final-note{ margin-top: 2.2rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
  .cta-final-note .sep{ color: var(--glass-border); }

  @media (max-width: 900px){
    .main-nav ul, .main-nav .header-cta{ display: none; }
    .menu-toggle{ display: inline-flex; }
    .mobile-nav .btn{ display: flex; }
  }
  @media (max-width: 768px){
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    .stats-grid{ grid-template-columns: 1fr 1fr; }
    .why-grid{ grid-template-columns: 1fr; }
  }
  @media (max-width: 560px){
    .footer-grid{ grid-template-columns: 1fr; }
    .stats-grid{ grid-template-columns: 1fr; }
    .hero-actions{ flex-direction: column; align-items: stretch; }
    .hero-actions .btn{ justify-content: center; }
  }

/* =====================================================================
   Branchen- & Musterprozess-Seiten
   Komposition bestehender Bausteine (Index, leistungen.html, kontakt.html)
   mit den bestehenden Tokens. Keine neuen Farben, Fonts, Radien, Motion.
   ===================================================================== */

::selection{ background: rgba(232,80,12,0.35); color: #fff; }

/* Hintergrund-Rhythmus der Abschnitte */
.bg-base{ background: var(--bg); }
.bg-soft{ background: var(--bg-soft); }
.lmatrix-sec.bg-soft{ background: var(--bg-soft); }
.faq.bg-base{ background: var(--bg); }

/* --- Hero der Branchenseiten: Index-Hero in seiner 2-spaltigen Variante,
       Typografie und Akzentzeile wie auf der Startseite --- */
.page-branche .hero::after{ display: none; }
.page-branche .hero h1{ font-size: clamp(2.35rem, 5.2vw, 4.6rem); line-height: 1.04; letter-spacing: -0.045em; }
.page-branche .hero h1 .hero-accent{ color: #fff; background: none; -webkit-text-fill-color: #fff; animation: none; }
.page-branche .hero-sub{ max-width: 54ch; }
.page-branche .hero-trust{ margin-top: 2.6rem; }
.page-branche .hero-trust-text{ color: var(--ink-mid); }

/* kompakter Hero der Musterprozess-Seiten */
.hero.is-compact{ min-height: auto; padding-block: clamp(8rem, 13vw, 10rem) clamp(3.5rem, 7vw, 5.5rem); }
.hero.is-compact .hero-layout{ display: block; }
.hero.is-compact .hero-inner{ max-width: 860px; }

/* Breadcrumb */
.breadcrumb{ margin-bottom: 1.6rem; }
.breadcrumb ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-faint); }
.breadcrumb li{ display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before{ content: '\203A'; color: var(--signal-rust); }
.breadcrumb a{ color: var(--ink-mid); transition: color 0.2s ease; }
.breadcrumb a:hover{ color: var(--ink); }
.breadcrumb [aria-current="page"]{ color: var(--ink); }
@media (max-width: 820px){ .breadcrumb ol{ justify-content: center; } }

/* --- Beispiel-Mockup: hero-engine / engine-shell als Klärliste --- */
figure.hero-engine{ margin: 0; }
.hero-engine.is-example{ aspect-ratio: auto; }
.hero-engine.is-example .engine-shell{ position: relative; inset: auto; margin: 3%; min-height: 430px; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 1.5rem 1.5rem; }
.engine-shell.is-list .engine-head,
.engine-shell.is-list .engine-console{ position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; z-index: 1; }
.engine-shell.is-list .engine-head{ font-size: 0.7rem; }
.hero-engine.is-example .engine-metric small{ font-size: 0.64rem; }
.hero-engine.is-example .engine-metric strong{ font-size: 0.78rem; }
.engine-example{ display: inline-flex; align-items: center; padding: 0.4rem 0.62rem; border: 1px solid rgba(255,122,61,0.38); border-radius: 999px; color: var(--signal-hot); white-space: nowrap; }
.engine-caption{ position: relative; z-index: 1; }
.engine-caption strong{ display: block; font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; letter-spacing: -0.01em; color: #f7eee9; }
.engine-caption span{ display: block; margin-top: 0.35rem; font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.engine-list{ position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; flex: 1; }
.engine-row{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 0.85rem; padding: 0.78rem 0.85rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(8,6,6,0.72); box-shadow: 0 12px 35px rgba(0,0,0,0.3); }
.engine-row-icon{ width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.62); }
.engine-row-icon svg{ width: 15px; height: 15px; }
.engine-row strong{ display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: #f7eee9; }
.engine-row small{ display: block; margin-top: 0.3rem; font: 500 0.66rem/1.35 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.engine-row em{ font: 500 0.7rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.42rem 0.55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); white-space: nowrap; }
.engine-row.is-ok .engine-row-icon, .engine-row.is-ok em{ color: #8be0ac; border-color: rgba(113,220,161,0.3); background: rgba(113,220,161,0.08); }
.engine-row.is-warn .engine-row-icon, .engine-row.is-warn em{ color: var(--signal-hot); border-color: rgba(232,80,12,0.35); background: var(--signal-dim); }
.hero-engine.is-example .engine-metric strong{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px){
  .hero-engine.is-example .engine-shell{ padding: 1.2rem 1rem; min-height: 0; }
  .engine-row{ grid-template-columns: auto minmax(0,1fr); }
  .engine-row em{ grid-column: 2; justify-self: start; }
}

/* --- Karten-Raster (3 Spalten) aus den bestehenden glass-/leistung-cards --- */
.card-grid-3{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; }
.pain-card{ padding: 1.9rem; }
.pain-card h3{ font-size: 1.18rem; line-height: 1.35; letter-spacing: -0.01em; }
.pain-card p{ margin-top: 0.8rem; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.65; }
.branch-card{ padding: 2rem 1.9rem; display: flex; flex-direction: column; }
.branch-card h3{ font-size: 1.3rem; }
.branch-card p{ margin-top: 0.8rem; color: var(--ink-mid); font-size: 0.98rem; line-height: 1.6; flex: 1; }
.card-more{ margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal-b); }
.card-more svg{ width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.branch-card:hover .card-more svg{ transform: translateX(3px); }
@media (max-width: 900px){ .card-grid-3{ grid-template-columns: 1fr; } }

/* --- So läuft es: Text + Ablauf-Karte (Baustein von leistungen.html) --- */
.split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split > .section-head{ margin-bottom: 0; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }
.ablauf{ padding: 1.9rem clamp(1.6rem, 3vw, 2.1rem); }
.ablauf-rail{ position: relative; list-style: none; margin: 0; padding: 0 0 0 2.2rem; }
.ablauf-rail::before{ content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--signal-rust), var(--signal) 50%, var(--signal-rust)); opacity: 0.5; }
.ablauf-step{ position: relative; padding-bottom: 1.5rem; }
.ablauf-step:last-child{ padding-bottom: 0; }
.ablauf-step::before{ content: ''; position: absolute; left: -2.2rem; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--signal); box-shadow: 0 0 8px var(--signal-glow); animation: expPulse 2.2s ease-in-out infinite; }
.ablauf-step:nth-child(2)::before{ animation-delay: 0.35s; }
.ablauf-step:nth-child(3)::before{ animation-delay: 0.7s; }
.ablauf-step:nth-child(4)::before{ animation-delay: 1.05s; }
.ablauf-step strong{ display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal-b); }
.ablauf-step span{ font-size: 0.96rem; line-height: 1.55; color: var(--ink-mid); }
.ablauf-result{ margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-mid); font-style: italic; }
.example-tag{ display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; padding: 0.42rem 0.75rem; border: 1px dashed rgba(255,255,255,0.18); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); }
.example-tag::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--signal-b); }

/* --- Musterprozesse: Leistungs-Matrix mit 3 + 3 aufklappbaren Kacheln --- */
@media (min-width: 900px){ .lmatrix-row.is-top.has-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.lmatrix-row.is-top .lm-vline.at-1{ left: 33.333%; }
.lmatrix-row.is-top .lm-vline.at-2{ left: 66.666%; }
.lmatrix-row.is-top .lm-vline.at-2 i{ animation-delay: 1.9s; }
.mp-tile{ gap: 0.85rem; justify-content: flex-start; }
.mp-tile .lmatrix-icon{ margin-bottom: 0.4rem; }
.mp-tile h3{ font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
.mp-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.3rem; margin-top: 0.2rem; }
.mp-toggle, .mp-link{ display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.mp-toggle{ color: var(--ink-mid); transition: color 0.2s ease; }
.mp-toggle:hover, .mp-tile.is-open .mp-toggle{ color: var(--ink); }
.mp-toggle .plus{ position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.mp-toggle .plus::before, .mp-toggle .plus::after{ content: ''; position: absolute; background: var(--signal); transition: transform 0.25s ease; }
.mp-toggle .plus::before{ top: 5px; left: 0; width: 12px; height: 2px; }
.mp-toggle .plus::after{ top: 0; left: 5px; width: 2px; height: 12px; }
.mp-tile.is-open .mp-toggle .plus::after{ transform: rotate(90deg); }
.mp-link{ color: var(--signal-b); }
.mp-link svg{ width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.mp-link:hover svg{ transform: translateX(3px); }
.mp-detail{ width: 100%; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.35s ease, visibility 0s linear 0.35s; }
.mp-tile.is-open .mp-detail{ visibility: visible; transition: max-height 0.35s ease, visibility 0s; }
.mp-grid{ margin: 0.5rem 0 0.2rem; padding: 1.1rem 1.2rem; display: grid; gap: 0.85rem; text-align: left; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass); }
.mp-grid dt{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-b); }
.mp-grid dd{ margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-mid); }
.mp-grid dd.is-decision{ color: var(--ink); }

/* --- Passt das zu Ihnen? (why-grid + story-bullets) --- */
.fit-card{ padding: 2rem 1.9rem; }
.fit-card h3{ font-size: 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
.fit-card .why-icon{ margin-bottom: 0; flex-shrink: 0; }
.fit-card .story-bullets{ margin-top: 1.4rem; }
.fit-card .story-bullets li, .duo-card .story-bullets li{ align-items: baseline; font-size: 0.96rem; line-height: 1.55; }
.fit-card .story-bullets li::before, .duo-card .story-bullets li::before{ transform: translateY(-2px); }
.fit-card.is-no .why-icon{ background: rgba(255,255,255,0.05); color: var(--ink-mid); }
.story-bullets.is-muted li::before{ background: var(--ink-faint); box-shadow: none; }

/* --- Ihr Ansprechpartner (Gründerfoto + Textblock) --- */
.person-card{ display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem); max-width: 900px; margin-inline: auto; }
.person-photo{ margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #756c64; border: 1px solid var(--glass-border); }
.person-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person-card h2{ margin-top: 1rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.person-role{ display: block; margin-top: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); }
.person-card p{ margin-top: 1.1rem; color: var(--ink-mid); font-size: 1rem; line-height: 1.65; max-width: 54ch; }
.person-contact{ margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.person-mail{ font-size: 0.98rem; color: var(--ink); border-bottom: 1px solid var(--glass-border); transition: border-color 0.2s ease, color 0.2s ease; }
.person-mail:hover{ color: var(--signal-b); border-color: var(--signal-b); }
@media (max-width: 680px){ .person-card{ grid-template-columns: 1fr; } .person-photo{ max-width: 240px; } }

/* --- Musterprozess: Ergebnis, System + Voraussetzungen, weitere Abläufe --- */
.result-row .lmatrix-item{ padding-inline: 0.6rem; }
.result-row .lmatrix-item p{ color: var(--ink); font-size: 1.02rem; }
.duo-card{ padding: 2rem 1.9rem; }
.duo-card h3{ font-size: 1.25rem; }
.duo-card > p{ margin-top: 0.7rem; color: var(--ink-mid); font-size: 0.96rem; line-height: 1.65; }
.duo-card .story-bullets{ margin-top: 1.3rem; }
.duo-card .ablauf-rail{ margin-top: 1.5rem; }
.next-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.faq-link-card{ padding: 1.4rem 1.5rem; display: flex; flex-direction: column; }
.faq-link-card strong{ display: block; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.faq-link-card span{ display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--signal-b); font-family: var(--font-mono); }
@media (max-width: 900px){ .next-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .next-grid{ grid-template-columns: 1fr; } }

/* --- Abschluss-CTA mit Rückruf-Formular (Formular-Stil von kontakt.html) --- */
.cta-final h2{ text-wrap: balance; }
.cta-final-sub{ margin: 1.2rem auto 0; max-width: 46ch; color: var(--ink-mid); font-size: 1.05rem; line-height: 1.6; }
.callback-form{ margin-top: 2.2rem; padding: clamp(1.4rem, 3vw, 2.2rem); text-align: left; }
.callback-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-field{ margin-bottom: 1.1rem; }
.form-field label{ display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5rem; }
.form-field input{ width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: var(--ink); padding: 0.8rem 0.95rem; border-radius: 10px; font-family: var(--font-body); font-size: 1rem; caret-color: var(--signal); transition: border-color 0.2s ease, background 0.2s ease; }
.form-field input:focus{ outline: none; border-color: var(--signal); background: rgba(255,255,255,0.06); }
.form-field.has-error input{ border-color: #E5484D; }
.form-error{ display: none; margin-top: 0.4rem; font-size: 0.78rem; color: #FF8A80; }
.form-field.has-error .form-error{ display: block; }
.form-hint{ font-size: 0.78rem; color: var(--ink-faint); margin-top: 1rem; }
.form-hint a{ color: var(--signal-b); text-decoration: underline; text-underline-offset: 3px; }
.cta-final .form-submit{ width: 100%; justify-content: center; margin-top: 0.6rem; }
.form-submit:disabled{ cursor: wait; opacity: 0.72; }
.form-success{ display: none; align-items: center; gap: 0.7rem; margin-top: 1rem; padding: 0.9rem 1.1rem; background: var(--signal-dim); border: 1px solid rgba(232,80,12,0.3); border-radius: 12px; color: var(--signal-b); font-size: 0.9rem; }
.form-success.is-visible{ display: flex; }
.form-success svg{ width: 18px; height: 18px; flex-shrink: 0; }
.form-success.is-error{ background: rgba(229,72,77,0.1); border-color: rgba(229,72,77,0.4); color: #FF8A80; }
.form-success.is-error svg{ display: none; }
.form-honeypot{ display: none !important; }
@media (max-width: 640px){ .callback-fields{ grid-template-columns: 1fr; } }

/* =====================================================================
   Runde 2: mehr Sectorum-Signatur (Konvergenz, Kern-Puls, Energie-Strahl)
   ===================================================================== */

/* --- So läuft es: Konvergenz-Baum + Schrittreihe --- */
.flow-steps{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.4rem; margin: 4.4rem 0 0; padding: 0; list-style: none; }
.flow-step{ position: relative; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.flow-step::before{ content: ''; position: absolute; top: -1px; left: 0; width: 36px; height: 2px; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.flow-step strong{ display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); }
.flow-step span{ display: block; margin-top: 0.55rem; color: var(--ink-mid); font-size: 0.98rem; line-height: 1.55; }
.flow-step:last-child span{ color: var(--ink); }
.flow-foot{ margin-top: 2.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; text-align: center; }
.flow-foot p{ color: var(--ink-mid); font-style: italic; font-size: 0.95rem; }
.flow-foot .example-tag{ margin-top: 0; }
@media (max-width: 900px){ .flow-steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .flow-steps{ grid-template-columns: 1fr; } }
@media (max-width: 640px){
  .conv-labels span:nth-child(even){ transform: translate(-50%, -205%); }
  .convergence-diagram{ margin-top: 4.2rem; }
}

/* --- Musterfall: Bisher -> Mit Sectorum (engine-Zeilen, Matrix-Kern, Energie-Strahl) --- */
.case-top{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.case-top > .section-head{ margin-bottom: 0; }
.case-facts{ padding: 1.6rem 1.7rem; }
.case-facts .engine-example{ font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.case-name{ display: block; margin-top: 1.1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.case-dl{ margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.case-dl div{ display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.case-dl dt{ padding-top: 0.15rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-b); }
.case-dl dd{ margin: 0; color: var(--ink-mid); font-size: 0.94rem; line-height: 1.5; }
.case-compare{ display: grid; grid-template-columns: minmax(0,1fr) 128px minmax(0,1fr); align-items: stretch; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.case-col{ padding: 1.6rem; }
.case-col h3{ display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.15rem; }
.case-tag{ align-self: flex-start; padding: 0.42rem 0.62rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); }
.case-tag.is-after{ border-color: rgba(232,80,12,0.38); color: var(--signal-hot); background: var(--signal-dim); }
.case-list{ list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.case-col.is-before .engine-row{ background: rgba(8,6,6,0.45); box-shadow: none; }
.case-col.is-before .engine-row strong{ color: var(--ink-mid); font-weight: 500; }
.case-col.is-after{ border-color: rgba(232,80,12,0.24); }
.case-beam{ position: relative; min-height: 84px; }
.case-line{ position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.08); overflow: hidden; }
.case-line i{ position: absolute; top: 0; left: 0; display: block; width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--signal)); animation: lmBeamL 2.8s linear infinite; }
.case-note{ margin-top: 1.7rem; text-align: center; font-size: 0.88rem; font-style: italic; color: var(--ink-faint); }
.case-note a{ color: var(--signal-b); font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px){
  .case-top{ grid-template-columns: 1fr; align-items: start; }
  .case-compare{ grid-template-columns: 1fr; }
  .case-line{ top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; }
  .case-line i{ width: 1px; height: 60px; background: linear-gradient(180deg, transparent, var(--signal)); animation: lmBeamDown 2.8s linear infinite; }
}
@media (max-width: 560px){ .case-dl div{ grid-template-columns: 1fr; gap: 0.3rem; } }
@media (prefers-reduced-motion: reduce){ .case-line i{ display: none; animation: none; } }

/* --- Schmerzpunkte mit "Alltag dahinter" (Mechanik der Musterprozess-Kacheln) --- */
.pain-card .mp-actions{ justify-content: flex-start; margin-top: 1rem; }
.pain-card .mp-detail p{ margin-top: 0.3rem; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--ink-mid); font-size: 0.93rem; line-height: 1.65; }
.chip-row{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.chip-row span{ padding: 0.42rem 0.58rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(8,6,6,0.5); font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); }
.chip-row span.is-hot{ border-color: rgba(232,80,12,0.35); background: var(--signal-dim); color: var(--signal-hot); }
.pain-examples{ list-style: none; margin: 0.3rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; }
.pain-examples li{ font-size: 0.92rem; line-height: 1.55; color: var(--ink-mid); }
.pain-examples b{ display: block; margin-bottom: 0.2rem; font: 500 0.7rem/1.2 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-b); }
.pain-close{ margin: 2.6rem auto 0; max-width: 60ch; text-align: center; font-size: 1.08rem; line-height: 1.6; color: var(--ink); }

/* --- Startseite: Branchen-Karten mit Musterprozess-Links --- */
.branch-card p{ flex: 0 0 auto; }
.branch-card .branch-line{ margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-b); }
.branch-links{ list-style: none; margin: 1.3rem 0 0; padding: 0; flex: 1; }
.branch-links a{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.72rem 0; border-top: 1px solid var(--line); color: var(--ink-mid); font-size: 0.95rem; transition: color 0.2s ease; }
.branch-links a:hover{ color: var(--ink); }
.branch-links svg{ width: 14px; height: 14px; color: var(--signal-b); flex-shrink: 0; transition: transform 0.25s var(--ease); }
.branch-links a:hover svg{ transform: translateX(3px); }
.branch-card .card-more{ margin-top: 1.4rem; }
.has-divider{ border-top: 1px solid var(--line); }

/* --- Erstgespräch-Seite: Info links, Rückruf-Formular rechts --- */
.eg-hero{ padding-block: clamp(7.5rem, 12vw, 9rem) clamp(3.5rem, 7vw, 5rem); }
.eg-grid{ display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; position: relative; z-index: 2; }
.page-eg .hero h1{ font-size: clamp(2.2rem, 4.2vw, 3.6rem); max-width: 16ch; }
.eg-info .ablauf-rail{ margin-top: 2rem; }
.eg-reassure{ margin-top: 1.8rem; padding: 1rem 1.15rem; border: 1px dashed rgba(255,255,255,0.18); border-radius: 14px; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.6; }
.eg-person{ margin-top: 1.8rem; display: flex; align-items: center; gap: 1rem; }
.eg-person img{ width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid var(--glass-border); background: #756c64; }
.eg-person strong{ display: block; font-size: 1rem; }
.eg-person span{ display: block; margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-b); }
.eg-person a{ display: inline-block; margin-top: 0.35rem; color: var(--ink-mid); font-size: 0.92rem; border-bottom: 1px solid var(--glass-border); transition: color 0.2s ease, border-color 0.2s ease; }
.eg-person a:hover{ color: var(--signal-b); border-color: var(--signal-b); }
.callback-form.eg-form{ margin-top: 0; }
.eg-form .form-submit{ width: 100%; justify-content: center; margin-top: 0.6rem; }
.callback-fields .is-wide{ grid-column: 1 / -1; }
.form-field textarea{ width: 100%; min-height: 110px; resize: vertical; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: var(--ink); padding: 0.8rem 0.95rem; border-radius: 10px; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; caret-color: var(--signal); transition: border-color 0.2s ease, background 0.2s ease; }
.form-field textarea::placeholder{ color: var(--ink-faint); }
.form-field textarea:focus{ outline: none; border-color: var(--signal); background: rgba(255,255,255,0.06); }
.form-field label small{ text-transform: none; letter-spacing: 0; font-size: 0.72rem; color: var(--ink-faint); }
.eg-note{ margin-top: 0.9rem; font-size: 0.84rem; color: var(--ink-mid); }
@media (max-width: 900px){ .eg-grid{ grid-template-columns: 1fr; } .page-eg .hero h1{ max-width: none; } }
.callback-form.eg-form{ background: rgba(10,8,8,0.82); }
@media (max-width: 900px){
  .eg-grid{ row-gap: 0; }
  .eg-info{ display: contents; }
  .eg-info > .badge-pill{ justify-self: start; }
  .eg-grid > .reveal-right{ order: 2; margin-top: 2rem; }
  .eg-info .ablauf-rail{ order: 3; margin-top: 2.6rem; }
  .eg-reassure{ order: 4; }
  .eg-person{ order: 5; }
}

/* =====================================================================
   Runde 4: Branchenseiten mit mehr Tiefe
   Sprungmarken, Alltagssätze, Lösung im Detail (Szenen-Animationen),
   Praxisbeispiele, weitere Anwendungsfälle, Bildplätze, Vorteile + Rechner.
   Nur bestehende Tokens; neue Bewegungsmuster in Signal-Orange.
   ===================================================================== */

/* --- Sprungmarken unter dem Hero --- */
.page-jump{ position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: clamp(2.6rem, 5vw, 3.6rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.page-jump > span{ margin-right: 0.6rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.page-jump a{ padding: 0.55rem 0.9rem; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); background: rgba(8,6,6,0.55); font-size: 0.88rem; color: var(--ink-mid); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.page-jump a:hover{ color: var(--ink); border-color: rgba(232,80,12,0.45); background: var(--signal-dim); }
@media (max-width: 900px){ .page-jump{ justify-content: center; } .page-jump > span{ width: 100%; margin: 0 0 0.3rem; text-align: center; } }

/* --- Fotos: einheitliche CI-Bildsprache (warm, dunkel, Signal-Licht) --- */
.photo-frame{ position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--glass-border); background: var(--bg-elevated); isolation: isolate; }
.photo-frame img{ display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.06) brightness(0.86); }
.photo-frame::after{ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,4,4,0) 45%, rgba(5,4,4,0.72)), radial-gradient(120% 80% at 85% 0%, rgba(232,80,12,0.22), transparent 60%); mix-blend-mode: normal; }
.photo-frame figcaption{ position: absolute; z-index: 2; right: 0.9rem; bottom: 0.8rem; padding: 0.32rem 0.55rem; border-radius: var(--radius-pill); background: rgba(5,4,4,0.6); font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero-visual.has-photo{ position: relative; width: min(100%, 560px); justify-self: end; }
.hero-photo{ aspect-ratio: 4 / 5; }
.hero-visual .hero-engine.is-overlay{ position: absolute; left: -14%; bottom: -6%; width: 78%; z-index: 3; }
.hero-visual .hero-engine.is-overlay .engine-shell{ min-height: 0; transform: none; }
@media (max-width: 900px){
  .hero-visual.has-photo{ justify-self: center; margin-top: 1.5rem; }
  .hero-visual .hero-engine.is-overlay{ position: relative; left: auto; bottom: auto; width: 100%; margin-top: -22%; }
}

/* --- Probleme: Sätze aus dem Alltag --- */
.quotes{ margin-top: clamp(3.5rem, 7vw, 5rem); display: grid; grid-template-columns: minmax(0,0.75fr) minmax(0,1.6fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quotes-head h3{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }
.quotes-head p{ margin-top: 0.8rem; color: var(--ink-mid); font-size: 1rem; line-height: 1.6; }
@media (min-width: 901px){ .quotes-head{ position: sticky; top: 7.5rem; } }
.quote-list{ list-style: none; margin: 0; padding: 0; }
.quote-row{ position: relative; display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); gap: 1rem; align-items: center; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.quote-row:last-child{ border-bottom: 1px solid var(--line); }
.quote-row::before{ content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--signal), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) calc(var(--stagger-delay, 0s) + 0.2s); }
.quote-row.is-visible::before{ transform: scaleX(1); }
.quote-row q{ quotes: '\201E' '\201C'; font-size: 1.05rem; line-height: 1.45; color: var(--ink); font-weight: 500; }
.quote-row q::before{ color: var(--signal-b); }
.quote-row q::after{ color: var(--signal-b); }
.quote-arrow{ width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(232,80,12,0.35); color: var(--signal-b); background: var(--signal-dim); }
.quote-arrow svg{ width: 13px; height: 13px; }
.quote-row p{ font-size: 0.94rem; line-height: 1.55; color: var(--ink-mid); }
@media (max-width: 900px){
  .quotes{ grid-template-columns: 1fr; }
  .quote-row{ grid-template-columns: 1fr; gap: 0.55rem; }
  .quote-arrow{ transform: rotate(90deg); width: 24px; height: 24px; }
}

/* --- Lösung im Detail: Schritte + animierte Bühne --- */
.sol{ display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: stretch; }
.sol-tabs{ display: flex; flex-direction: column; gap: 0.6rem; }
.sol-tab{ position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; width: 100%; padding: 1.15rem 1.2rem 1.25rem; text-align: left; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); color: inherit; cursor: pointer; overflow: hidden; transition: border-color 0.25s ease, background 0.25s ease, transform 0.16s ease; }
.sol-tab:hover{ border-color: rgba(255,255,255,0.16); background: var(--glass-hover); }
.sol-tab:active{ transform: scale(0.99); }
.sol-tab:focus-visible{ outline: 2px solid var(--signal-b); outline-offset: 3px; }
.sol-tab.is-active{ border-color: rgba(232,80,12,0.4); background: linear-gradient(135deg, rgba(232,80,12,0.1), rgba(255,255,255,0.02)); }
.sol-num{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.12); font: 500 0.78rem/1 var(--font-mono); color: var(--ink-mid); transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.sol-tab.is-active .sol-num{ color: #fff; border-color: var(--signal); background: var(--signal); box-shadow: 0 0 22px var(--signal-glow); }
.sol-tab-text strong{ display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-mid); transition: color 0.25s ease; }
.sol-tab.is-active .sol-tab-text strong{ color: var(--ink); }
.sol-tab-text > span{ display: block; margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink-faint); transition: color 0.25s ease; }
.sol-tab.is-active .sol-tab-text > span{ color: var(--ink-mid); }
.sol-progress{ position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.sol-progress i{ display: block; height: 100%; background: linear-gradient(90deg, var(--signal-rust), var(--signal-b)); transform: scaleX(0); transform-origin: left; }
.sol.is-running .sol-tab.is-active .sol-progress i{ animation: solProgress 7.5s linear forwards; }
.sol.is-held .sol-tab.is-active .sol-progress i{ animation-play-state: paused; }
@keyframes solProgress{ to{ transform: scaleX(1); } }

.sol-stage{ position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 1.3rem 1.4rem 1.5rem; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); }
.sol-stage::before{ content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent); }
.sol-stage-head{ position: relative; z-index: 1; display: flex; align-items: center; gap: 0.7rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.sol-brand{ margin-right: auto; }
.sol-pause{ display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px; padding: 0 0.7rem; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: var(--ink-mid); font: inherit; letter-spacing: inherit; text-transform: inherit; background: rgba(8,6,6,0.5); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.sol-pause:hover{ color: var(--ink); border-color: rgba(255,255,255,0.2); }
.sol-pause-ico{ position: relative; width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.sol-pause[aria-pressed="true"] .sol-pause-ico{ width: 0; height: 0; border-left: 8px solid currentColor; border-right: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sol:not(.is-auto) .sol-pause{ display: none; }
.sol-scenes{ position: relative; z-index: 1; flex: 1; display: flex; margin-top: 1.2rem; }
.sol-scene{ flex: 1; display: flex; flex-direction: column; }
.sol-scene[hidden]{ display: none; }
.sol.is-armed .sol-scene.is-active{ animation: scFade 0.45s var(--ease) both; }
@keyframes scFade{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* gemeinsame Szenen-Bausteine */
.sc-label{ display: block; font: 500 0.68rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); }
.sc-foot{ margin-top: auto; padding-top: 1rem; font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.sc-intake, .sc-check{ flex: 1; display: flex; flex-direction: column; }

/* Szene 1: Eingang erkennen - Dokumente fliegen ein, Scan-Streifen, Etiketten springen auf */
.sc-docs{ list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.sc-docs li{ position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "ico name" "ico tags"; gap: 0.35rem 0.85rem; align-items: center; padding: 0.85rem 0.95rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(8,6,6,0.72); overflow: hidden; }
.sc-ico{ grid-area: ico; width: 34px; height: 40px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.7); }
.sc-ico svg{ width: 17px; height: 17px; }
.sc-name{ grid-area: name; font-size: 0.92rem; font-weight: 600; color: #f7eee9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tags{ grid-area: tags; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sc-tags b{ padding: 0.3rem 0.5rem; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-pill); font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); }
.sc-tags b.is-hot{ border-color: rgba(232,80,12,0.4); background: var(--signal-dim); color: var(--signal-hot); }
.sc-docs li::after{ content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,122,61,0.22), transparent); opacity: 0; }

/* Szene 2: Inhalte auslesen - Blatt mit Scan-Balken, Fundstellen leuchten auf, Werte laufen ein */
.sc-extract{ flex: 1; display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 1.1rem; align-items: center; }
.sc-paper{ position: relative; aspect-ratio: 3 / 4; padding: 1rem 0.95rem; border-radius: 10px; background: linear-gradient(180deg, #f3ece6, #e6ddd5); box-shadow: 0 24px 50px rgba(0,0,0,0.45); overflow: hidden; }
.sc-paper-title{ display: block; font: 600 0.66rem/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: #3a2f29; }
.sc-lines{ margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.62rem; }
.sc-lines i{ display: block; height: 5px; border-radius: 3px; background: rgba(40,30,25,0.16); }
.sc-mark{ position: absolute; left: 0.7rem; right: 0.7rem; height: 14px; margin-top: -4px; border: 1.5px solid var(--signal); border-radius: 4px; background: rgba(232,80,12,0.12); opacity: 0; }
.sc-beam{ position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(232,80,12,0.18) 70%, rgba(255,122,61,0.75) 98%, transparent); opacity: 0; }
.sc-fields{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sc-fields li{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.2rem 0.8rem; padding: 0.75rem 0.85rem; border: 1px solid rgba(255,255,255,0.1); border-left: 2px solid var(--signal); border-radius: 10px; background: rgba(8,6,6,0.72); }
.sc-fields small{ grid-column: 1 / -1; font: 500 0.64rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sc-fields strong{ font-size: 0.95rem; font-weight: 600; color: #f7eee9; }
.sc-fields li.is-warn{ border-color: rgba(232,80,12,0.35); background: linear-gradient(90deg, rgba(232,80,12,0.12), rgba(8,6,6,0.72) 65%); }
.sc-fields li.is-warn strong{ color: var(--signal-hot); }
.sc-fields em{ align-self: center; font: 500 0.64rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal-hot); white-space: nowrap; }

/* Szene 3: Regeln prüfen - jede Zeile wird nacheinander abgehakt */
.sc-rules{ list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sc-rules li{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 0.85rem; align-items: center; padding: 0.8rem 0.9rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(8,6,6,0.72); transition: border-color 0.3s ease; }
.sc-state{ position: relative; width: 28px; height: 28px; }
.sc-pend{ position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.14); border-top-color: var(--signal-b); }
.sc-res{ position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9px; border: 1px solid; }
.sc-res svg{ width: 15px; height: 15px; }
.sc-rules li.is-ok .sc-res{ color: #8be0ac; border-color: rgba(113,220,161,0.3); background: rgba(113,220,161,0.08); }
.sc-rules li.is-warn .sc-res{ color: var(--signal-hot); border-color: rgba(232,80,12,0.35); background: var(--signal-dim); }
.sc-rule{ font-size: 0.93rem; font-weight: 500; color: #f7eee9; }
.sc-rules em{ font: 500 0.64rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.38rem 0.5rem; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.sc-rules li.is-warn em{ color: var(--signal-hot); border-color: rgba(232,80,12,0.35); }

/* Szene 4: Übergabe - Karte setzt sich zusammen, Stempel, Team übernimmt */
.sc-hand{ flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.sc-card{ padding: 1.1rem 1.15rem; border: 1px solid rgba(232,80,12,0.3); border-radius: 14px; background: rgba(8,6,6,0.8); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 40px rgba(232,80,12,0.08); }
.sc-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
.sc-card-head strong{ font-size: 1rem; font-weight: 600; color: #f7eee9; }
.sc-stamp{ padding: 0.38rem 0.6rem; border: 1.5px solid var(--signal-b); border-radius: 6px; font: 600 0.64rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); transform: rotate(-4deg); white-space: nowrap; }
.sc-card ul{ list-style: none; margin: 0.6rem 0 0; padding: 0; }
.sc-card li{ display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.9rem; color: var(--ink-mid); border-bottom: 1px dashed rgba(255,255,255,0.08); }
.sc-card li:last-child{ border-bottom: 0; }
.sc-card li em{ font: 500 0.66rem/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6); white-space: nowrap; }
.sc-team{ display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.85rem; border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(8,6,6,0.6); }
.sc-avatar{ width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--signal-dim); color: var(--signal-b); border: 1px solid rgba(232,80,12,0.35); }
.sc-avatar svg{ width: 18px; height: 18px; }
.sc-team-text{ margin-right: auto; }
.sc-team-text strong{ display: block; font-size: 0.92rem; color: #f7eee9; }
.sc-team-text small{ display: block; margin-top: 0.15rem; font: 500 0.64rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sc-approve{ padding: 0.55rem 0.85rem; border-radius: var(--radius-pill); background: var(--signal); color: #fff; font-size: 0.82rem; font-weight: 600; }

/* Szenen-Bewegung: nur mit JS ("is-armed") und nur in der aktiven Szene */
.sol.is-armed .sol-scene.is-active .sc-docs li{ animation: scDocIn 0.6s var(--ease) calc(var(--i) * 0.38s) both; }
.sol.is-armed .sol-scene.is-active .sc-docs li::after{ animation: scSweep 0.9s ease-out calc(var(--i) * 0.38s + 0.35s) both; }
.sol.is-armed .sol-scene.is-active .sc-tags b{ animation: scPop 0.4s var(--ease) calc(var(--i) * 0.38s + 0.85s) both; }
.sol.is-armed .sol-scene.is-active .sc-tags b + b{ animation-delay: calc(var(--i) * 0.38s + 1s); }
.sol.is-armed .sol-scene.is-active .sc-docs li:nth-child(1) .sc-tags b{ --i: 0; }
.sol.is-armed .sol-scene.is-active .sc-docs li:nth-child(2) .sc-tags b{ --i: 1; }
.sol.is-armed .sol-scene.is-active .sc-docs li:nth-child(3) .sc-tags b{ --i: 2; }
.sol.is-armed .sol-scene.is-active .sc-foot{ animation: scPop 0.5s var(--ease) 2.3s both; }
.sol.is-armed .sol-scene.is-active .sc-beam{ animation: scBeam 2.6s cubic-bezier(0.77,0,0.175,1) 0.2s both; }
.sol.is-armed .sol-scene.is-active .sc-mark{ animation: scMark 0.45s var(--ease) calc(0.75s + var(--i) * 0.62s) both; }
.sol.is-armed .sol-scene.is-active .sc-fields li{ animation: scDocIn 0.55s var(--ease) calc(0.95s + var(--i) * 0.62s) both; }
.sol.is-armed .sol-scene.is-active .sc-rules li{ animation: scDocIn 0.45s var(--ease) calc(var(--i) * 0.12s) both; }
.sol.is-armed .sol-scene.is-active .sc-pend{ animation: expSpin 0.8s linear infinite, scOut 0.2s ease calc(0.7s + var(--i) * 0.6s) forwards; }
.sol.is-armed .sol-scene.is-active .sc-rules li{ --d: calc(0.7s + var(--i) * 0.6s); }
.sol.is-armed .sol-scene.is-active .sc-res{ animation: scTick 0.4s var(--ease) calc(0.85s + var(--i) * 0.6s) both; }
.sol.is-armed .sol-scene.is-active .sc-rules em{ animation: scPop 0.35s var(--ease) calc(0.95s + var(--i) * 0.6s) both; }
.sol.is-armed .sol-scene.is-active .sc-check .sc-foot{ animation-delay: 3.4s; }
.sol.is-armed .sol-scene.is-active .sc-card{ animation: scRise 0.6s var(--ease) 0.1s both; }
.sol.is-armed .sol-scene.is-active .sc-card li{ animation: scDocIn 0.45s var(--ease) calc(0.5s + var(--i) * 0.3s) both; }
.sol.is-armed .sol-scene.is-active .sc-stamp{ animation: scStamp 0.5s cubic-bezier(0.2,1.4,0.4,1) 1.7s both; }
.sol.is-armed .sol-scene.is-active .sc-team{ animation: scSlide 0.6s var(--ease) 2.2s both; }
.sol.is-armed .sol-scene.is-active .sc-approve{ animation: scHalo 2.2s ease-in-out 2.9s infinite; }
@keyframes scDocIn{ from{ opacity: 0; transform: translateX(-18px); } to{ opacity: 1; transform: none; } }
@keyframes scSweep{ 0%{ opacity: 0; left: -30%; } 20%{ opacity: 1; } 100%{ opacity: 0; left: 110%; } }
@keyframes scPop{ from{ opacity: 0; transform: scale(0.92); } to{ opacity: 1; transform: none; } }
@keyframes scBeam{ 0%{ opacity: 0; transform: translateY(-100%); } 12%{ opacity: 1; } 88%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(300%); } }
@keyframes scMark{ from{ opacity: 0; transform: scaleX(0.94); } to{ opacity: 1; transform: none; } }
@keyframes scOut{ to{ opacity: 0; } }
@keyframes scTick{ from{ opacity: 0; transform: scale(0.7) rotate(-12deg); } to{ opacity: 1; transform: none; } }
@keyframes scRise{ from{ opacity: 0; transform: translateY(18px) scale(0.98); } to{ opacity: 1; transform: none; } }
@keyframes scStamp{ from{ opacity: 0; transform: rotate(-12deg) scale(1.5); } to{ opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes scSlide{ from{ opacity: 0; transform: translateX(22px); } to{ opacity: 1; transform: none; } }
@keyframes scHalo{ 0%,100%{ box-shadow: 0 0 0 0 rgba(232,80,12,0); } 50%{ box-shadow: 0 0 0 6px rgba(232,80,12,0.18), 0 0 24px rgba(232,80,12,0.35); } }
/* Ohne JS: Prüfstatus direkt sichtbar */
.sol:not(.is-armed) .sc-pend{ display: none; }

@media (max-width: 900px){
  .sol{ grid-template-columns: 1fr; }
  .sol-stage{ order: -1; min-height: 400px; }
}
@media (max-width: 560px){
  .sc-extract{ grid-template-columns: 1fr; }
  .sc-paper{ aspect-ratio: auto; height: 150px; }
  .sc-lines{ gap: 0.5rem; }
  .sol-stage{ padding: 1.1rem 1rem 1.2rem; }
  .sol-stage-head .engine-example{ display: none; }
  .sol-stage-head .sol-brand::after{ content: ' · Beispiel'; }
}

/* --- Praxisbeispiele: Eingang -> vorbereitet, verbunden durch ein laufendes Datenpaket --- */
.ex-list{ display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 5.5rem); }
.ex-item{ display: grid; grid-template-columns: minmax(0,0.72fr) minmax(0,1.28fr); gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center; }
.ex-item.is-flip{ grid-template-columns: minmax(0,1.28fr) minmax(0,0.72fr); }
.ex-item.is-flip .ex-text{ order: 2; }
.ex-tag{ display: inline-flex; align-items: center; gap: 0.6rem; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); }
.ex-tag b{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(232,80,12,0.4); background: var(--signal-dim); font-weight: 500; color: var(--signal-hot); }
.ex-text h3{ margin-top: 1rem; font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.ex-text > p{ margin-top: 0.9rem; color: var(--ink-mid); font-size: 1rem; line-height: 1.65; }
.ex-text .ex-decision{ display: flex; align-items: center; gap: 0.7rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--ink); font-size: 0.95rem; }
.ex-decision-ico{ width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(232,80,12,0.35); color: var(--signal-b); }
.ex-decision-ico svg{ width: 15px; height: 15px; }
.ex-visual{ position: relative; margin: 0; display: grid; grid-template-columns: minmax(0,0.85fr) 56px minmax(0,1.15fr); align-items: center; padding-top: 2.3rem; container: exvis / inline-size; }
.ex-card{ container: excard / inline-size; min-width: 0; }
.ex-card{ padding: 1.2rem 1.15rem; }
.ex-card.is-out{ border-color: rgba(232,80,12,0.28); box-shadow: 0 0 50px rgba(232,80,12,0.07); }
.ex-card-label{ display: block; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.ex-card-label.is-hot{ color: var(--signal-b); }
.ex-card-title{ display: flex; align-items: center; gap: 0.55rem; margin-top: 0.75rem; font-size: 0.98rem; font-weight: 600; line-height: 1.3; color: #f7eee9; overflow-wrap: break-word; min-width: 0; }
.ex-file{ width: 26px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.65); }
.ex-file svg{ width: 14px; height: 14px; }
.ex-dl{ margin: 0.9rem 0 0; display: grid; gap: 0.5rem; }
.ex-dl div{ display: flex; justify-content: space-between; gap: 0.8rem; padding-top: 0.5rem; border-top: 1px dashed rgba(255,255,255,0.08); }
.ex-dl dt{ font: 500 0.66rem/1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ex-dl dd{ margin: 0; font-size: 0.86rem; color: var(--ink-mid); text-align: right; }
.ex-card .case-list{ margin-top: 0.9rem; gap: 0.45rem; }
.ex-card .engine-row{ padding: 0.6rem 0.7rem; gap: 0.7rem; }
.ex-card .engine-row strong{ font-size: 0.84rem; }
.ex-card .engine-row em{ font-size: 0.64rem; padding: 0.36rem 0.48rem; }
.ex-link{ position: relative; height: 2px; margin-inline: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 11px); }
.ex-packet{ position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: var(--signal-b); box-shadow: 0 0 14px var(--signal), 0 0 4px #fff inset; opacity: 0; }
.ex-visual.is-visible .ex-packet{ animation: exPacket 2.4s cubic-bezier(0.77,0,0.175,1) 0.6s infinite; }
@keyframes exPacket{ 0%{ opacity: 0; transform: translateX(0) rotate(0); } 15%{ opacity: 1; } 80%{ opacity: 1; } 100%{ opacity: 0; transform: translateX(40px) rotate(90deg); } }
.ex-flag{ position: absolute; top: 0; right: 0; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 1180px){
  .ex-item, .ex-item.is-flip{ grid-template-columns: 1fr; gap: 1.8rem; }
  .ex-item.is-flip .ex-text{ order: 0; }
  .ex-text{ max-width: 680px; }
  .ex-visual{ max-width: 820px; }
}
@media (max-width: 640px){
  .ex-visual{ grid-template-columns: 1fr; }
  .ex-link{ width: 2px; height: 44px; margin: 6px auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 11px); }
  .ex-packet{ top: 0; left: 50%; margin: 0 0 0 -6px; }
  .ex-visual.is-visible .ex-packet{ animation-name: exPacketDown; }
  .ex-flag{ position: static; justify-self: start; order: -1; margin-bottom: 0.9rem; }
  .ex-visual{ padding-top: 0; }
}
@keyframes exPacketDown{ 0%{ opacity: 0; transform: translateY(0) rotate(0); } 15%{ opacity: 1; } 80%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(32px) rotate(90deg); } }

/* --- Weitere Anwendungsfälle (kompakt, unter der Leistungs-Matrix) --- */
.more-uc{ margin-top: clamp(3.5rem, 7vw, 5rem); position: relative; z-index: 1; }
.more-uc-head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 2rem; padding-bottom: 1.3rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.more-uc-head h3{ font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.015em; }
.more-uc-head p{ color: var(--ink-mid); font-size: 0.96rem; max-width: 52ch; }
.more-uc-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.more-uc-card{ display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.3rem 1.4rem; }
.more-uc-card .leistung-icon{ margin-bottom: 0; transition: transform 0.3s var(--ease), box-shadow 0.3s ease; }
.more-uc-card:hover{ border-color: rgba(232,80,12,0.3); }
.more-uc-card:hover .leistung-icon{ transform: translateY(-2px); box-shadow: 0 0 18px var(--signal-glow); }
.more-uc-card > div{ min-width: 0; }
.more-uc-card > div > strong{ display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.more-uc-card > div > span{ display: block; margin-top: 0.4rem; color: var(--ink-mid); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 1000px){ .more-uc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .more-uc-grid{ grid-template-columns: 1fr; } }

/* --- Bild-Band mit Leitsatz --- */
.photo-band{ position: relative; min-height: clamp(380px, 46vw, 560px); display: flex; align-items: center; overflow: hidden; background: var(--bg); border-block: 1px solid var(--line); }
.photo-band-media{ position: absolute; inset: 0; border: 0; border-radius: 0; }
.photo-band-media::after{ background: linear-gradient(90deg, rgba(5,4,4,0.94) 0%, rgba(5,4,4,0.7) 38%, rgba(5,4,4,0.1) 75%), linear-gradient(0deg, rgba(5,4,4,0.6), transparent 40%), radial-gradient(60% 80% at 90% 10%, rgba(232,80,12,0.22), transparent 60%); }
.photo-band-media figcaption{ right: var(--edge); bottom: 1.2rem; }
.photo-band-inner{ position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 6rem); }
.photo-band h2{ max-width: 17ch; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.photo-band p{ margin-top: 1.2rem; max-width: 46ch; color: var(--ink-mid); font-size: 1.08rem; line-height: 1.6; }
.photo-band-fallback{ position: absolute; inset: 0; background: radial-gradient(50% 70% at 78% 50%, rgba(232,80,12,0.18), transparent 70%), radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 26px 26px; }
.pb-ring{ position: absolute; top: 50%; left: 78%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid rgba(232,80,12,0.35); animation: pbRing 6s var(--ease) infinite; }
.pb-ring.is-2{ animation-delay: 2s; }
.pb-ring.is-3{ animation-delay: 4s; }
.pb-core{ position: absolute; top: 50%; left: 78%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 30px var(--signal), 0 0 80px rgba(232,80,12,0.5); }
@keyframes pbRing{ 0%{ opacity: 0; transform: scale(0.3); } 30%{ opacity: 1; } 100%{ opacity: 0; transform: scale(2.4); } }
@media (max-width: 760px){
  .photo-band-media::after{ background: linear-gradient(0deg, rgba(5,4,4,0.95) 25%, rgba(5,4,4,0.45) 70%, rgba(5,4,4,0.2)); }
  .photo-band{ align-items: flex-end; }
  .pb-ring, .pb-core{ left: 70%; top: 30%; }
}

/* --- Vorteile + Beispielrechnung --- */
.ben-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; position: relative; z-index: 1; }
.ben-card{ padding: 1.8rem 1.7rem; }
.ben-card h3{ font-size: 1.15rem; letter-spacing: -0.01em; }
.ben-card p{ margin-top: 0.7rem; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 1000px){ .ben-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .ben-grid{ grid-template-columns: 1fr; } }
.calc{ position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.4rem, 3vw, 2.4rem); border-color: rgba(232,80,12,0.22); }
.calc-head{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; }
.calc-head h3{ margin-top: 0.7rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; }
.calc-head p{ margin-top: 0.7rem; max-width: 60ch; color: var(--ink-mid); font-size: 0.98rem; line-height: 1.6; }
.calc-head .engine-example{ font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.calc-body{ margin-top: 1.8rem; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,0.75fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; }
.calc-inputs{ display: flex; flex-direction: column; gap: 0.8rem; }
.calc-row{ margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 0.5rem 1rem; align-items: end; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(8,6,6,0.45); }
.calc-row legend{ float: left; width: 100%; grid-column: 1 / -1; padding: 0; margin-bottom: 0.35rem; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.calc-row label span, .calc-share label span{ display: block; margin-bottom: 0.4rem; font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.calc-row input{ width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255,255,255,0.04); color: var(--ink); font: 500 1rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; caret-color: var(--signal); transition: border-color 0.2s ease, background 0.2s ease; }
.calc-row input:focus{ outline: none; border-color: var(--signal); background: rgba(255,255,255,0.06); }
.calc-row-out{ padding-bottom: 0.7rem; font-size: 0.9rem; color: var(--ink-mid); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-row-out b{ color: var(--ink); font-weight: 600; }
.calc-share{ padding: 1rem 1.1rem; border: 1px dashed rgba(255,255,255,0.16); border-radius: 14px; }
.calc-share label{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.calc-share label span{ margin-bottom: 0; color: var(--ink-mid); }
.calc-share label small{ font-size: 0.78rem; color: var(--ink-faint); }
.calc-share-ctl{ margin-top: 0.8rem; display: flex; align-items: center; gap: 1rem; }
.calc-share input[type="range"]{ flex: 1; accent-color: var(--signal); height: 28px; }
.calc-share output{ min-width: 3.4rem; text-align: right; font: 600 1rem/1 var(--font-mono); color: var(--signal-b); font-variant-numeric: tabular-nums; }
.calc-result{ display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.5rem; border-radius: 16px; border: 1px solid rgba(232,80,12,0.3); background: radial-gradient(120% 90% at 100% 0%, rgba(232,80,12,0.16), transparent 60%), rgba(8,6,6,0.7); }
.calc-kicker{ font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.calc-now{ margin-top: 0.4rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-bars{ margin: 1rem 0 1.3rem; display: grid; gap: 0.6rem; }
.calc-bar span{ display: block; margin-bottom: 0.3rem; font-size: 0.78rem; color: var(--ink-mid); }
.calc-bar{ position: relative; }
.calc-bar::after{ content: ''; display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); }
.calc-bar i{ position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 999px; transform-origin: left; transition: transform 0.6s var(--ease); z-index: 1; }
.calc-bar.is-now i{ background: rgba(255,255,255,0.35); }
.calc-bar.is-after i{ background: linear-gradient(90deg, var(--signal-rust), var(--signal-b)); box-shadow: 0 0 14px var(--signal-glow); }
.calc-big{ display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.35rem; font-size: clamp(2.8rem, 5vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-big small{ font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--ink-mid); }
.calc-days{ margin-top: 0.7rem; color: var(--ink-mid); font-size: 0.95rem; }
.calc-days b{ color: var(--signal-b); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-cta{ margin-top: auto; justify-content: center; }
.calc-result .calc-cta{ margin-top: 1.5rem; width: 100%; }
.calc-note{ margin-top: 1.3rem; font-size: 0.84rem; line-height: 1.6; color: var(--ink-faint); }
@media (max-width: 1000px){ .calc-body{ grid-template-columns: 1fr; } }
@media (max-width: 560px){
  .calc-row{ grid-template-columns: 1fr 1fr; }
  .calc-row-out{ grid-column: 1 / -1; padding-bottom: 0; }
}

/* --- Bewegung reduzieren --- */
@media (prefers-reduced-motion: reduce){
  .sol-scene *, .sol-scene *::after, .sol.is-armed .sol-scene.is-active{ animation: none !important; }
  .sc-pend{ display: none; }
  .sc-beam, .sc-docs li::after{ display: none; }
  .sc-mark{ opacity: 1; }
  .ex-packet{ display: none; }
  .pb-ring{ animation: none; opacity: 0.5; }
  .pb-ring.is-2{ transform: scale(1.6); opacity: 0.3; }
  .pb-ring.is-3{ transform: scale(2.2); opacity: 0.15; }
  .quote-row::before{ transition: none; transform: scaleX(1); }
  .calc-bar i{ transition: none; }
}

/* --- Beispiel-Karten passen sich ihrer eigenen Breite an (statt nur der Fensterbreite) --- */
.ex-card .engine-row > span:not(.engine-row-icon){ min-width: 0; }
.ex-card .engine-row strong{ overflow-wrap: break-word; }
.ex-dl dt, .ex-dl dd{ min-width: 0; }
.ex-dl dd{ white-space: nowrap; }
/* schmale Eingangskarte: Bezeichnung über dem Wert */
@container excard (max-width: 300px){
  .ex-dl div{ flex-direction: column; gap: 0.2rem; }
  .ex-dl dd{ text-align: left; white-space: normal; font-size: 0.9rem; color: var(--ink); }
  .ex-card-title{ font-size: 0.92rem; }
}
/* schmale Ergebniskarte: Status-Etikett unter den Text statt daneben */
@container excard (max-width: 350px){
  .ex-card .engine-row{ grid-template-columns: auto minmax(0,1fr); row-gap: 0.45rem; }
  .ex-card .engine-row em{ grid-column: 2; justify-self: start; }
}
/* wenig Platz für beide Karten nebeneinander: untereinander mit senkrechter Verbindung */
@container exvis (max-width: 560px){
  .ex-visual > .ex-card, .ex-visual > .ex-link{ grid-column: 1 / -1; }
  .ex-visual > .ex-link{ width: 2px; height: 44px; margin: 6px auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 11px); }
  .ex-visual > .ex-link .ex-packet{ top: 0; left: 50%; margin: 0 0 0 -6px; }
  .ex-visual.is-visible > .ex-link .ex-packet{ animation-name: exPacketDown; }
}
/* Klärlisten-Mockups (Hero, Musterprozess, Musterfall): Status unter den Text, wenn die Karte schmal wird */
.engine-shell.is-list, .case-col{ container: mockcard / inline-size; }
@container mockcard (max-width: 400px){
  .engine-row{ grid-template-columns: auto minmax(0,1fr); row-gap: 0.45rem; }
  .engine-row em{ grid-column: 2; justify-self: start; }
}
.engine-row > span:not(.engine-row-icon){ min-width: 0; }
.engine-row strong, .engine-row small{ overflow-wrap: break-word; }

/* =====================================================================
   Musterprozess-Kacheln mit eigener Grafik (statt Icon)
   Glas-Panel, Punktraster, Ergebnis-Karte in Signal-Orange, Status wie in den Klärlisten
   ===================================================================== */
.mp-tile.has-viz{ gap: 1rem; }
.mp-viz{ position: relative; width: 100%; max-width: 330px; height: 172px; margin-bottom: 0.5rem; padding: 14px; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, rgba(232,80,12,0.10), transparent 62%), rgba(10,8,8,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px rgba(0,0,0,0.28); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.mp-viz::before{ content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(90% 80% at 30% 60%, #000, transparent); mask-image: radial-gradient(90% 80% at 30% 60%, #000, transparent); }
.mp-tile.has-viz:hover .mp-viz, .mp-tile.is-open .mp-viz{ border-color: rgba(232,80,12,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px rgba(0,0,0,0.28), 0 0 30px rgba(232,80,12,0.10); }
.mpv-label{ display: block; font: 500 0.64rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-b); }
.mpv-pill{ flex-shrink: 0; padding: 0.3rem 0.45rem; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.14); font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72); white-space: nowrap; }
.mpv-pill.is-ok{ color: #8be0ac; border-color: rgba(113,220,161,0.32); background: rgba(113,220,161,0.08); }
.mpv-pill.is-warn{ color: var(--signal-hot); border-color: rgba(232,80,12,0.38); background: var(--signal-dim); }
.mpv-pill.is-team{ color: #fff; border-color: var(--signal); background: var(--signal); }

/* Typ "flow": Eingänge -> Ergebnis-Karte */
.mpv-in{ flex: 0 0 38%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mpv-doc{ display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 5px 5px; padding: 7px 7px 8px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; background: rgba(255,255,255,0.035); }
.mpv-doc svg{ width: 12px; height: 12px; color: rgba(255,255,255,0.6); }
.mpv-doc b{ font-size: 0.66rem; font-weight: 600; color: #f7eee9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpv-doc i{ grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.mpv-doc i + i{ width: 60%; margin-top: -2px; }
.mpv-in.is-3 .mpv-doc{ padding: 5px 7px 6px; gap: 4px 6px; }
.mpv-in.is-3 .mpv-doc i + i{ display: none; }
.mpv-in.is-1 .mpv-doc{ padding: 10px 8px 11px; }
.mpv-link{ position: relative; flex: 0 0 14px; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.28) 0 4px, transparent 4px 7px); }
.mpv-link i{ position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 2px; background: var(--signal-b); box-shadow: 0 0 10px var(--signal); opacity: 0; }
.mpv-out{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 11px; border: 1px solid rgba(232,80,12,0.32); border-radius: 11px; background: rgba(8,6,6,0.88); box-shadow: 0 0 26px rgba(232,80,12,0.08); }
.mpv-out-title{ padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 0.74rem; font-weight: 600; line-height: 1.25; color: #f7eee9; }
.mpv-row{ display: flex; align-items: center; gap: 7px; font-size: 0.7rem; line-height: 1.25; color: rgba(255,255,255,0.72); }
.mpv-row em{ width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.3); }
.mpv-row.is-ok em{ background: #71dca1; box-shadow: 0 0 8px rgba(113,220,161,0.45); }
.mpv-row.is-warn em{ background: var(--signal-b); box-shadow: 0 0 8px var(--signal); }
.mpv-row.is-team em{ background: transparent; border: 1.5px solid var(--signal-b); }
.mpv-row.is-team{ color: #fff; }

/* Typ "table": Bezeichnung + Status je Zeile */
.mpv-panel{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mpv-table{ display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.09); border-radius: 11px; background: rgba(8,6,6,0.7); overflow: hidden; }
.mpv-tr{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 0.72rem; color: rgba(255,255,255,0.78); }
.mpv-tr + .mpv-tr{ border-top: 1px dashed rgba(255,255,255,0.08); }
.mpv-tr > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Typ "board": drei Spalten mit Stand */
.mpv-board{ flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.mpv-col{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mpv-col .mpv-label{ font-size: 0.6rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpv-card{ display: flex; flex-direction: column; gap: 6px; padding: 10px 9px 11px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(8,6,6,0.75); }
.mpv-card i{ display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.mpv-card i + i{ width: 65%; }
.mpv-card .mpv-pill{ align-self: flex-start; margin-top: 6px; font-size: 0.8rem; padding: 0.32rem 0.55rem; }
.mpv-col:nth-child(3) .mpv-card{ border-color: rgba(232,80,12,0.35); box-shadow: 0 0 22px rgba(232,80,12,0.08); }

/* Typ "compare": alter und neuer Stand */
.mpv-compare{ display: flex; align-items: center; gap: 8px; }
.mpv-side{ flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(8,6,6,0.7); }
.mpv-side small{ font: 500 0.62rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.mpv-side strong{ font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.6); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.35); }
.mpv-side.is-new{ border-color: rgba(232,80,12,0.35); }
.mpv-side.is-new strong{ color: #fff; text-decoration: none; }
.mpv-delta{ align-self: flex-start; }

/* Typ "steps": zweistufige Freigabe */
.mpv-steps{ flex: 1; display: flex; align-items: center; gap: 8px; }
.mpv-steps .mpv-link{ flex-basis: 22px; }
.mpv-step{ flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 11px 10px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 11px; background: rgba(8,6,6,0.75); }
.mpv-step.is-team{ border-color: rgba(232,80,12,0.38); box-shadow: 0 0 24px rgba(232,80,12,0.1); }
.mpv-num{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.14); font: 500 0.7rem/1 var(--font-mono); color: rgba(255,255,255,0.7); }
.mpv-step.is-team .mpv-num{ background: var(--signal); border-color: var(--signal); color: #fff; }
.mpv-step strong{ font-size: 0.8rem; font-weight: 600; color: #f7eee9; }

/* Typ "chart": Vergleich + Hinweis-Karte */
.mpv-chart{ flex: 0 0 52%; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 2px 0; }
.mpv-bars{ flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 0 2px 2px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.mpv-bars i{ flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; background: rgba(255,255,255,0.14); transform-origin: bottom; }
.mpv-bars i.is-hot{ background: linear-gradient(180deg, var(--signal-b), var(--signal)); box-shadow: 0 0 16px rgba(232,80,12,0.4); }
.mpv-note{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 11px 11px 12px; border: 1px solid rgba(232,80,12,0.32); border-radius: 11px; background: rgba(8,6,6,0.88); }
.mpv-note strong{ font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: #f7eee9; }
.mpv-note span{ font-size: 0.68rem; line-height: 1.35; color: rgba(255,255,255,0.65); }

/* Bewegung beim Einblenden der Kachel */
.mp-tile.has-viz.is-visible .mpv-doc, .mp-tile.has-viz.is-visible .mpv-row, .mp-tile.has-viz.is-visible .mpv-tr,
.mp-tile.has-viz.is-visible .mpv-card, .mp-tile.has-viz.is-visible .mpv-side, .mp-tile.has-viz.is-visible .mpv-step,
.mp-tile.has-viz.is-visible .mpv-note, .mp-tile.has-viz.is-visible .mpv-delta{ animation: mpvIn 0.55s var(--ease) calc(0.35s + var(--stagger-delay, 0s) + var(--i, 0) * 0.12s) both; }
.mp-tile.has-viz.is-visible .mpv-bars i{ animation: mpvBar 0.7s var(--ease) calc(0.35s + var(--stagger-delay, 0s) + var(--i, 0) * 0.08s) both; }
.mp-tile.has-viz.is-visible .mpv-link i{ animation: mpvPacket 2.8s cubic-bezier(0.77,0,0.175,1) calc(1.2s + var(--stagger-delay, 0s)) infinite; }
@keyframes mpvIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@keyframes mpvBar{ from{ transform: scaleY(0.12); } to{ transform: none; } }
@keyframes mpvPacket{ 0%{ opacity: 0; transform: translateX(0); } 20%{ opacity: 1; } 75%{ opacity: 1; } 100%{ opacity: 0; transform: translateX(14px); } }
.mp-note{ margin: 2.4rem auto 0; text-align: center; font-size: 0.84rem; color: var(--ink-faint); font-style: italic; }
@media (max-width: 899px){ .mp-viz{ max-width: 380px; } }
@media (prefers-reduced-motion: reduce){
  .mp-tile.has-viz .mpv-doc, .mp-tile.has-viz .mpv-row, .mp-tile.has-viz .mpv-tr, .mp-tile.has-viz .mpv-card, .mp-tile.has-viz .mpv-side,
  .mp-tile.has-viz .mpv-step, .mp-tile.has-viz .mpv-note, .mp-tile.has-viz .mpv-delta, .mp-tile.has-viz .mpv-bars i, .mp-tile.has-viz .mpv-link i{ animation: none !important; }
}
/* Matrix mit Grafiken: 2 x 3 zwischen 900 und 1179 px, damit jedes Panel breit genug bleibt */
@media (min-width: 900px) and (max-width: 1179px){
  .lmatrix:has(.has-viz){ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 3.4rem; }
  .lmatrix:has(.has-viz) .lmatrix-row{ display: contents; }
  .lmatrix:has(.has-viz) .lm-vline, .lmatrix:has(.has-viz) .lmatrix-axis{ display: none; }
}
/* Sehr schmale Panels (kleine Handys): Text darf umbrechen statt gekürzt zu werden */
.mp-viz{ container-type: inline-size; }
@container (max-width: 310px){
  .mp-viz{ height: auto; min-height: 172px; }
  .mpv-doc svg{ display: none; }
  .mpv-doc{ grid-template-columns: minmax(0,1fr); }
  .mpv-doc b, .mpv-tr > span, .mpv-col .mpv-label{ white-space: normal; overflow: visible; text-overflow: clip; }
  .mpv-in{ flex-basis: 36%; }
}

/* =====================================================================
   Runde 5: Zeitersparnis (Startseite) + Über uns
   ===================================================================== */
.zeit-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; }
.zeit-card{ padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; }
.zeit-top{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.zeit-branch{ padding: 0.4rem 0.6rem; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill); font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mid); }
.zeit-icon{ width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--signal-dim); color: var(--signal-b); }
.zeit-icon svg{ width: 18px; height: 18px; }
.zeit-card h3{ margin-top: 1.1rem; font-size: 1.2rem; letter-spacing: -0.01em; }
.zeit-dl{ margin: 1rem 0 0; display: grid; gap: 0.7rem; }
.zeit-dl div{ position: relative; padding: 0.75rem 0.85rem 0.8rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(8,6,6,0.5); }
.zeit-dl dt{ font: 500 0.64rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.zeit-dl dd{ margin: 0.35rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-mid); }
.zeit-dl .is-after{ border-color: rgba(232,80,12,0.32); background: linear-gradient(135deg, rgba(232,80,12,0.1), rgba(8,6,6,0.6) 70%); }
.zeit-dl .is-after dt{ color: var(--signal-b); }
.zeit-dl .is-after dd{ color: var(--ink); }
.zeit-dl .is-after::before{ content: ''; position: absolute; left: 50%; top: -0.7rem; width: 1px; height: 0.7rem; background: linear-gradient(180deg, transparent, var(--signal)); }
.zeit-calc{ position: relative; z-index: 1; margin-top: clamp(3rem, 6vw, 4.2rem); }
.zeit-calc-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.zeit-calc-head h3{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; }
.zeit-panel .calc{ margin-top: 1.2rem; }
.seg{ display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); background: rgba(8,6,6,0.6); }
.seg [role="tab"]{ min-height: 40px; padding: 0 1.1rem; border-radius: var(--radius-pill); font: 500 0.9rem/1 var(--font-body); color: var(--ink-mid); background: transparent; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, transform 0.16s ease; }
.seg [role="tab"]:hover{ color: var(--ink); }
.seg [role="tab"]:active{ transform: scale(0.97); }
.seg [role="tab"]:focus-visible{ outline: 2px solid var(--signal-b); outline-offset: 2px; }
.seg [role="tab"][aria-selected="true"]{ background: var(--signal); color: #fff; box-shadow: 0 0 18px var(--signal-glow); }
@media (max-width: 1000px){ .zeit-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .zeit-grid{ grid-template-columns: 1fr; } .zeit-calc-head{ flex-direction: column; align-items: flex-start; } }

/* Über uns */
.page-about .hero h1{ max-width: 14ch; }
.about-split{ align-items: start; }
.about-story p{ margin-top: 1.1rem; }
.about-quote{ margin: 0; padding: clamp(1.6rem, 3vw, 2.2rem); border-color: rgba(232,80,12,0.24); background: radial-gradient(120% 90% at 100% 0%, rgba(232,80,12,0.12), transparent 60%), var(--glass); }
.about-quote blockquote{ margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); quotes: '\201E' '\201C'; }
.about-quote blockquote::before{ content: open-quote; color: var(--signal-b); }
.about-quote blockquote::after{ content: close-quote; color: var(--signal-b); }
.about-quote p{ margin-top: 1.1rem; color: var(--ink-mid); font-size: 0.98rem; line-height: 1.65; }
.team-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.team-card{ display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 1.5rem; align-items: center; padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.team-card .person-photo{ max-width: none; }
.team-card h3{ font-size: 1.3rem; letter-spacing: -0.01em; }
.team-card .person-role{ margin-top: 0.4rem; }
.team-card p{ margin-top: 0.9rem; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .team-card{ grid-template-columns: 1fr; } .team-card .person-photo{ max-width: 200px; } }

/* =====================================================================
   Startseite: Hero mit Kartenstapel + Zahlen-Band
   ===================================================================== */
.page-home .hero-layout.has-deck{ display: grid !important; grid-template-columns: minmax(0,1.1fr) minmax(360px,0.9fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.page-home .hero-layout.has-deck .hero-inner{ max-width: 640px !important; margin: 0 !important; text-align: left !important; align-items: flex-start !important; }
.page-home .hero-layout.has-deck h1{ font-size: clamp(2.3rem, 4.3vw, 4.2rem) !important; }
.page-home .hero-layout.has-deck .hero-actions, .page-home .hero-layout.has-deck .hero-trust{ justify-content: flex-start !important; }
.page-home .hero-deck .hero-engine{ display: block !important; width: 100%; }
.hero-deck{ position: relative; z-index: 3; width: 100%; max-width: 520px; justify-self: end; }
.deck-tabs{ display: flex; gap: 0.4rem; margin: 0 0 0.9rem 3%; }
.deck-tabs span{ padding: 0.42rem 0.7rem; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); background: rgba(8,6,6,0.5); animation: deckTab 12s linear var(--d) infinite; }
.deck{ display: grid; padding: 46px 46px 0 0; }
.deck-card{ grid-area: 1 / 1; transform-origin: 70% 30%; animation: deckCycle 12s cubic-bezier(0.16,1,0.3,1) var(--d) infinite; }
@keyframes deckCycle{
  0%, 30%{ transform: translate(0,0) scale(1); opacity: 1; z-index: 3; }
  33%{ transform: translate(0,22px) scale(0.97); opacity: 0; z-index: 3; }
  34%{ transform: translate(46px,-46px) scale(0.9); opacity: 0; z-index: 1; }
  40%, 63%{ transform: translate(46px,-46px) scale(0.9); opacity: 0.22; z-index: 1; }
  66%, 96%{ transform: translate(23px,-23px) scale(0.95); opacity: 0.5; z-index: 2; }
  100%{ transform: translate(0,0) scale(1); opacity: 1; z-index: 3; }
}
@keyframes deckTab{
  0%, 31%{ color: #fff; border-color: rgba(232,80,12,0.55); background: var(--signal-dim); }
  33%, 96%{ color: var(--ink-faint); border-color: var(--glass-border); background: rgba(8,6,6,0.5); }
  100%{ color: #fff; border-color: rgba(232,80,12,0.55); background: var(--signal-dim); }
}
@media (max-width: 960px){
  .page-home .hero-layout.has-deck{ grid-template-columns: 1fr; }
  .page-home .hero-layout.has-deck .hero-inner{ margin-inline: auto !important; text-align: center !important; align-items: center !important; }
  .page-home .hero-layout.has-deck .hero-actions, .page-home .hero-layout.has-deck .hero-trust{ justify-content: center !important; }
  .page-home .hero-layout.has-deck h1{ font-size: clamp(2.7rem, 9vw, 4rem) !important; }
  .hero-deck{ justify-self: center; margin-top: 1rem; }
  .deck-tabs{ justify-content: center; margin-left: 0; }
}
@media (max-width: 560px){ .deck{ padding: 28px 28px 0 0; } }
@media (prefers-reduced-motion: reduce){
  .deck-card, .deck-tabs span{ animation: none; }
  .deck-card:not(:first-child){ display: none; }
  .deck-tabs{ display: none; }
}

.zahlen-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; }
.zahl-card{ padding: 1.9rem 1.8rem 1.8rem; display: flex; flex-direction: column; align-items: flex-start; border-color: rgba(232,80,12,0.22); background: radial-gradient(120% 90% at 100% 0%, rgba(232,80,12,0.13), transparent 60%), var(--glass); }
.zahl{ display: flex; align-items: baseline; gap: 0.35rem; margin-top: 1.3rem; font-size: clamp(3.4rem, 5.6vw, 4.8rem); font-weight: 650; line-height: 1; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; }
.zahl small{ font-size: 0.45em; font-weight: 500; color: var(--signal-b); }
.zahl em{ font-style: normal; font-size: 0.3em; font-weight: 500; letter-spacing: 0; color: var(--ink-mid); }
.zahl-unit{ margin-top: 0.7rem; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.zahl-days{ margin-top: 0.5rem; font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal-b); }
.zahl-basis{ margin-top: auto; padding-top: 1.1rem; width: 100%; border-top: 1px dashed var(--line); font-size: 0.84rem; line-height: 1.5; color: var(--ink-faint); }
.zahl-card .zahl-days + .zahl-basis{ margin-top: 1.1rem; }
.fakten{ position: relative; z-index: 1; list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--glass-border); border-radius: var(--radius-card); background: rgba(8,6,6,0.55); overflow: hidden; }
.fakten li{ padding: 1.4rem 1.5rem 1.5rem; }
.fakten li + li{ border-left: 1px solid var(--line); }
.fakten b{ display: block; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1; color: var(--signal-b); }
.fakten strong{ display: block; margin-top: 0.55rem; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.fakten span{ display: block; margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.45; color: var(--ink-mid); }
.zahlen-note{ position: relative; z-index: 1; margin-top: 1.5rem; text-align: center; font-size: 0.86rem; color: var(--ink-faint); }
.zahlen-note a{ color: var(--signal-b); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px){ .fakten{ grid-template-columns: 1fr 1fr; } .fakten li:nth-child(3){ border-left: 0; } .fakten li:nth-child(n+3){ border-top: 1px solid var(--line); } }
@media (max-width: 900px){ .zahlen-grid{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .fakten{ grid-template-columns: 1fr; } .fakten li + li{ border-left: 0; border-top: 1px solid var(--line); } }
/* Kartenstapel: Karten deckend, damit nur die Kanten der hinteren Karten sichtbar sind */
.deck-card .engine-shell{ background: linear-gradient(145deg, #17110f, #0c0908 70%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: rgba(255,255,255,0.1); }
.deck-card .hero-engine::before{ display: none !important; }
.deck::before{ content: ''; position: absolute; inset: 10% 8% 0 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(232,80,12,0.22), transparent 65%); filter: blur(30px); pointer-events: none; }
.deck{ position: relative; }
/* Hero mit Foto: Beispiel-Karte deckend und kleiner, überlappt die Bildkante unten links */
.hero-visual .hero-engine.is-overlay{ left: -20%; bottom: -7%; width: 68%; }
.hero-visual .hero-engine.is-overlay .engine-shell{ background: linear-gradient(145deg, #17110f, #0c0908 70%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: rgba(255,255,255,0.12); box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 60px rgba(232,80,12,0.12); padding: 1.2rem 1.1rem 1.1rem; gap: 0.75rem; }
.hero-visual .hero-engine.is-overlay .engine-row{ padding: 0.6rem 0.7rem; }
.hero-visual .hero-engine.is-overlay .engine-console{ display: none; }
.hero-visual .hero-engine.is-overlay::before{ display: none; }
.hero-photo img{ object-position: 60% 20%; }
@media (max-width: 900px){
  .hero-visual .hero-engine.is-overlay{ left: auto; bottom: auto; width: 88%; margin: -30% auto 0; }
}
.hero-visual .hero-engine.is-overlay{ left: -9%; width: 64%; }
.photo-band.has-photo h2{ font-size: clamp(1.9rem, 3.3vw, 3rem); max-width: 15ch; }
.photo-band.has-photo p{ max-width: 40ch; }
@media (max-width: 900px){
  .hero-visual .hero-engine.is-overlay{ position: relative; left: auto; bottom: auto; width: 92%; margin: -26% auto 0; }
}
.hero-photo figcaption{ top: 0.8rem; bottom: auto; }
/* Startseite: Branchen-Karten mit Bildkopf */
.branch-card{ overflow: hidden; }
.branch-photo{ margin: -2rem -1.9rem 1.5rem; aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.branch-photo img{ object-position: 50% 30%; }
.branch-card:hover .branch-photo img{ transform: scale(1.03); }
.branch-photo img{ transition: transform 0.6s var(--ease); }
.branch-photo + .leistung-icon{ margin-top: -2.9rem; position: relative; z-index: 2; box-shadow: 0 0 0 4px var(--bg); }

/* =====================================================================
   Runde 6: Schwarz/Weiß im Wechsel
   ===================================================================== */
.theme-light{
  --bg: #f4f1ec; --bg-soft: #efebe4; --bg-elevated: #ffffff;
  --ink: #120e0c; --ink-mid: rgba(18,14,12,0.68); --ink-faint: rgba(18,14,12,0.52);
  --glass: #ffffff; --glass-hover: #ffffff; --glass-border: rgba(18,14,12,0.09); --line: rgba(18,14,12,0.1);
  --signal-b: #c4410e; --signal-hot: #b33a0b; --signal-dim: rgba(232,80,12,0.1); --signal-glow: rgba(232,80,12,0.18);
  color: var(--ink);
}
section.section.theme-light, .theme-light.convergence, .theme-light.prozess, .theme-light.faq{ background: #f4f1ec !important; border-color: rgba(18,14,12,0.08); }
.theme-light + .theme-light{ border-top: 1px solid rgba(18,14,12,0.07); }
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light strong{ color: var(--ink); }
.theme-light .dot-grid{ background-image: radial-gradient(rgba(18,14,12,0.07) 1px, transparent 1px); }
.theme-light .eyebrow{ border-color: rgba(196,65,14,0.25); background: rgba(232,80,12,0.07); }
.theme-light .glass-card{ background: #ffffff !important; border-color: rgba(18,14,12,0.08); box-shadow: 0 1px 2px rgba(18,14,12,0.04), 0 22px 44px -26px rgba(18,14,12,0.25); backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-light .glass-card:hover{ border-color: rgba(196,65,14,0.25); }
.theme-light .btn-primary{ background: #120e0c; color: #fff; box-shadow: 0 12px 30px -12px rgba(18,14,12,0.45); }
.theme-light .btn-glass{ background: #fff; color: var(--ink); border-color: rgba(18,14,12,0.14); }
.theme-light .why-icon, .theme-light .leistung-icon, .theme-light .zeit-icon{ background: rgba(232,80,12,0.1); color: #c4410e; }
.theme-light .faq-item{ background: #fff !important; }
.theme-light .faq-q{ color: var(--ink); }
.theme-light .person-photo{ background: #d9d3cc; border-color: rgba(18,14,12,0.08); }
.theme-light .person-mail{ color: var(--ink); border-color: rgba(18,14,12,0.2); }
.theme-light .zeit-branch{ border-color: rgba(18,14,12,0.14); color: var(--ink-mid); }
.theme-light .zeit-dl div{ background: #f8f6f2; border-color: rgba(18,14,12,0.08); }
.theme-light .zeit-dl .is-after{ background: linear-gradient(135deg, rgba(232,80,12,0.09), #ffffff 70%); border-color: rgba(232,80,12,0.3); }
.theme-light .seg{ background: #fff; border-color: rgba(18,14,12,0.12); }
.theme-light .seg [role="tab"]:hover{ color: var(--ink); }
.theme-light .seg [role="tab"][aria-selected="true"]{ color: #fff; }
.theme-light .story-bullets.is-muted li::before{ background: rgba(18,14,12,0.3); }
.theme-light .fit-card.is-no .why-icon{ background: rgba(18,14,12,0.06); color: var(--ink-mid); }
.theme-light .ben-card p, .theme-light .why-card p{ color: var(--ink-mid); }
.theme-light .zahl, .theme-light .zahl b{ color: var(--ink); }
.theme-light .fakten{ background: #fff; border-color: rgba(18,14,12,0.08); box-shadow: 0 22px 44px -30px rgba(18,14,12,0.25); }
.theme-light .fakten b{ color: var(--signal); }
.theme-light .mp-note, .theme-light .case-note, .theme-light .calc-note{ color: var(--ink-faint); }
/* Dunkle Inseln in hellen Abschnitten (z. B. der Rechner) behalten die dunklen Farben */
.theme-light .calc{
  --ink: #fff; --ink-mid: rgba(255,255,255,0.62); --ink-faint: rgba(255,255,255,0.48);
  --glass: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.08); --line: rgba(255,255,255,0.08);
  --signal-b: #FF7A3D; --signal-hot: #ff9a67; --signal-dim: rgba(232,80,12,0.12);
  color: #fff; background: #0d0a09 !important; border-color: rgba(232,80,12,0.25);
}
.theme-light .calc h3, .theme-light .calc strong, .theme-light .calc legend{ color: #fff; }
.theme-light .calc .btn-primary{ background: #fff; color: #120e0c; }
.theme-light .calc .eyebrow{ border-color: rgba(255,122,61,0.16); background: rgba(232,80,12,0.055); }

/* --- Zahlen als Split (wie ein Praxisfall) --- */
.zahl-split{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(2rem, 4vw, 3rem); border-radius: 28px; background: #fff; border: 1px solid rgba(18,14,12,0.07); box-shadow: 0 30px 60px -40px rgba(18,14,12,0.3); }
.zahl-split h2{ margin-top: 1rem; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.zahl-split-text p{ margin-top: 1rem; color: var(--ink-mid); font-size: 1.05rem; line-height: 1.6; max-width: 52ch; }
.zahl-link{ display: inline-flex; gap: 0.4rem; margin-top: 1.4rem; padding-bottom: 0.2rem; border-bottom: 1.5px solid currentColor; font-weight: 600; color: var(--ink); }
.zahl-link:hover{ color: #c4410e; }
.zahl-split-num{ padding-left: clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid rgba(18,14,12,0.12); }
.zahl-kicker{ display: block; font: 500 0.72rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.zahl-split .zahl{ margin-top: 0.8rem; font-size: clamp(4rem, 8vw, 6.4rem); }
.zahl-split .zahl small{ color: var(--signal); }
.zahl-split .zahl-unit{ display: block; margin-top: 0.8rem; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.zahl-split .zahl-days{ display: block; }
.zahl-split .zahl-basis{ margin-top: 1rem; padding-top: 0; border: 0; color: var(--ink-faint); }
.zahl-minis{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.zahl-mini{ padding: 1.6rem 1.8rem; border-radius: 22px; background: #fff; border: 1px solid rgba(18,14,12,0.07); }
.zahl.is-sm{ margin-top: 1rem; font-size: clamp(2.6rem, 4vw, 3.4rem); }
.zahl.is-sm em{ font-size: 0.32em; }
.zahl-mini .zahl-basis{ margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed rgba(18,14,12,0.12); }
@media (max-width: 860px){
  .zahl-split{ grid-template-columns: 1fr; }
  .zahl-split-num{ padding-left: 0; padding-top: 1.6rem; border-left: 0; border-top: 1px solid rgba(18,14,12,0.12); }
  .zahl-minis{ grid-template-columns: 1fr; }
}

/* --- Bildkarussell (Branchen + Ansprechpartner) --- */
.crs-sec{ overflow: hidden; }
.crs-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.crs-head h2{ margin-top: 0.9rem; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; max-width: 18ch; text-wrap: balance; }
.crs-head p{ max-width: 44ch; color: var(--ink-mid); font-size: 1.02rem; line-height: 1.6; }
.crs{ --crs-pad: max(var(--edge), calc((100vw - var(--max)) / 2 + var(--edge))); }
.crs-track{ display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--crs-pad); padding: 0.4rem var(--crs-pad) 1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.crs-track::-webkit-scrollbar{ display: none; }
.crs-track:focus-visible{ outline: 2px solid var(--signal-b); outline-offset: -2px; }
.crs-card{ position: relative; flex: 0 0 clamp(270px, 28vw, 380px); aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; scroll-snap-align: start; isolation: isolate; color: #fff; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.crs-card img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(0.92) contrast(1.04); transition: transform 0.9s var(--ease); }
.crs-card::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,4,4,0.82) 0%, rgba(5,4,4,0.18) 34%, rgba(5,4,4,0.08) 52%, rgba(5,4,4,0.9) 100%); }
.crs-card:hover img{ transform: scale(1.045); }
.crs-card:focus-visible{ outline: 2px solid var(--signal-b); outline-offset: 3px; }
.crs-top{ position: absolute; top: 1.6rem; left: 1.6rem; right: 1.6rem; }
.crs-kicker{ font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-hot); }
.crs-card h3{ margin-top: 0.7rem; font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1.08; letter-spacing: -0.03em; color: #fff; }
.crs-bottom{ position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.22); }
.crs-bottom p{ font-size: 0.96rem; line-height: 1.5; color: rgba(255,255,255,0.86); }
.crs-more{ display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.8rem; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.crs-more svg{ width: 14px; height: 14px; color: var(--signal-b); transition: transform 0.25s var(--ease); }
.crs-card:hover .crs-more svg{ transform: translateX(3px); }
.crs-controls{ display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.2rem; }
.crs-progress{ position: relative; flex: 1; max-width: 460px; height: 2px; background: rgba(255,255,255,0.14); border-radius: 2px; }
.crs-progress i{ position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 2px; background: var(--signal); box-shadow: 0 0 10px var(--signal); transition: left 0.25s ease, width 0.25s ease; }
.crs-btns{ display: flex; gap: 0.6rem; }
.crs-btn{ width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--glass-border); color: var(--ink); background: rgba(255,255,255,0.03); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.16s ease, opacity 0.2s ease; }
.crs-btn svg{ width: 20px; height: 20px; }
.crs-btn:hover{ border-color: rgba(232,80,12,0.5); background: var(--signal-dim); }
.crs-btn:active{ transform: scale(0.96); }
.crs-btn:disabled{ opacity: 0.35; cursor: default; }
.crs-btn:focus-visible{ outline: 2px solid var(--signal-b); outline-offset: 3px; }
@media (max-width: 640px){ .crs-card{ flex-basis: 78vw; } .crs-btns{ display: none; } .crs-progress{ max-width: none; } }

/* --- Großes Foto mit Hinweis-Chip --- */
.foto-sec{ padding-block: clamp(3.5rem, 7vw, 6rem) !important; }
.foto-frame{ position: relative; margin: 0; aspect-ratio: 21 / 9; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(18,14,12,0.6); }
.foto-frame img{ width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(0.95) contrast(1.03); }
.foto-chip{ position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.3rem; border-radius: 14px; background: #fff; color: #120e0c; font-size: 1rem; font-weight: 600; box-shadow: 0 16px 40px rgba(0,0,0,0.25); }
.foto-chip::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.foto-cap{ margin-top: 0.9rem; text-align: center; font-size: 0.8rem; color: var(--ink-faint); }
@media (max-width: 640px){ .foto-frame{ aspect-ratio: 4 / 3; } .foto-chip{ font-size: 0.88rem; padding: 0.75rem 1rem; } }

/* --- Leistungen als gestapelte Karten --- */
.stack{ display: flex; flex-direction: column; gap: 1.6rem; }
.stack-card{ position: sticky; top: calc(108px + var(--i) * 26px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; min-height: 440px; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 28px; background: linear-gradient(145deg, #15100e, #0b0908 70%); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 -24px 60px -20px rgba(0,0,0,0.65); }
.stack-text{ display: flex; flex-direction: column; justify-content: center; padding: clamp(0.5rem, 1.5vw, 1.2rem); }
.stack-pill{ align-self: flex-start; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 0.82rem; font-weight: 500; color: #fff; }
.stack-card h3{ margin-top: 1.2rem; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.stack-card p{ margin-top: 0.9rem; color: var(--ink-mid); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.stack-list{ list-style: none; margin: 1.4rem 0 0; padding: 0; }
.stack-list li{ display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: 0.98rem; color: var(--ink); }
.stack-list li::before{ content: ''; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal-glow); }
.stack-img{ position: relative; margin: 0; border-radius: 20px; overflow: hidden; min-height: 300px; }
.stack-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(0.92) contrast(1.04) brightness(0.92); }
.stack-img figcaption{ position: absolute; right: 0.8rem; bottom: 0.8rem; padding: 0.32rem 0.55rem; border-radius: var(--radius-pill); background: rgba(5,4,4,0.6); font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
@media (max-width: 900px){
  .stack-card{ position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; }
  .stack-img{ order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}
.crs-card::before{ background: linear-gradient(180deg, rgba(5,4,4,0.86) 0%, rgba(5,4,4,0.42) 26%, rgba(5,4,4,0.06) 50%, rgba(5,4,4,0.12) 62%, rgba(5,4,4,0.92) 100%); }
/* Oberflächen-Beispiel statt Foto (fiktive Daten) */
.stack-img.is-ui{ display: grid; place-items: center; padding: clamp(1.2rem, 3vw, 2.4rem); background: radial-gradient(120% 90% at 80% 10%, rgba(232,80,12,0.28), transparent 60%), linear-gradient(160deg, #1c1411, #0a0807); border: 1px solid rgba(255,255,255,0.07); }
.stack-img.is-ui figcaption{ background: rgba(255,255,255,0.08); }
.ui-win{ width: 100%; max-width: 420px; border-radius: 16px; background: rgba(12,9,8,0.92); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); overflow: hidden; }
.ui-bar{ display: flex; align-items: center; gap: 6px; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ui-bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.ui-bar span{ margin-left: 0.6rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.04em; color: rgba(255,255,255,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1rem 1rem 0.4rem; }
.ui-stats div{ padding: 0.7rem 0.75rem; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.ui-stats b{ display: block; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.ui-stats span{ display: block; margin-top: 0.2rem; font-size: 0.72rem; color: rgba(255,255,255,0.55); }
.ui-rows{ list-style: none; margin: 0; padding: 0.4rem 1rem 1rem; }
.ui-rows li{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.86rem; color: rgba(255,255,255,0.86); }
.ui-rows li:first-child{ border-top: 0; }
.ui-rows.is-status{ padding-top: 0.6rem; }
.ui-rows em{ font: 500 0.66rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.38rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap; }
.ui-rows .is-ok{ color: #7fd6a4; background: rgba(60,180,110,0.12); border: 1px solid rgba(60,180,110,0.28); }
.ui-rows .is-wait{ color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.ui-rows .is-go{ color: var(--signal-hot); background: rgba(232,80,12,0.12); border: 1px solid rgba(232,80,12,0.32); }
.ui-rows.is-status li span::before{ content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.6rem; border-radius: 50%; background: #5fc98c; box-shadow: 0 0 8px rgba(95,201,140,0.6); vertical-align: 1px; }
.ui-log{ margin: 0 1rem 1rem; padding: 0.8rem 0.9rem; border-radius: 10px; background: rgba(232,80,12,0.08); border: 1px dashed rgba(232,80,12,0.3); }
.ui-log span{ font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-hot); }
.ui-log p{ margin-top: 0.45rem !important; font-size: 0.84rem !important; line-height: 1.45 !important; color: rgba(255,255,255,0.8) !important; max-width: none !important; }
@media (max-width: 900px){ .stack-img.is-ui{ aspect-ratio: auto; } }
@media (max-height: 720px){ .stack-card{ position: relative; top: auto; } }
.stack-img.is-ui{ padding-bottom: 3.2rem; }
@media (max-width: 520px){
  .ui-stats{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.4rem; padding: 0.8rem 0.8rem 0.3rem; }
  .ui-stats div{ padding: 0.55rem 0.5rem; }
  .ui-stats b{ font-size: 1.1rem; }
  .ui-stats span{ font-size: 0.64rem; line-height: 1.25; }
  .ui-rows{ padding-inline: 0.8rem; }
  .ui-rows li{ font-size: 0.8rem; }
  .ui-log{ margin-inline: 0.8rem; }
}
/* Musterprozess-Grafiken bleiben auch im hellen Abschnitt dunkle Inseln */
.theme-light .mp-viz{
  --ink: #fff; --ink-mid: rgba(255,255,255,0.62); --ink-faint: rgba(255,255,255,0.48);
  --glass: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.08); --line: rgba(255,255,255,0.08);
  --signal-b: #FF7A3D; --signal-hot: #ff9a67;
  background: #120d0b !important; color: #fff; box-shadow: 0 24px 48px -26px rgba(18,14,12,0.6), 0 0 0 1px rgba(232,80,12,0.25);
}
.lmatrix:has(.has-viz) .lm-hbeam{ display: none; }
/* Bausteine-Matrix im hellen Abschnitt: Linien sichtbar, orange Lichtpunkte laufen weiter */
.theme-light .lmatrix-axis, .theme-light .lm-vline{ background: rgba(18,14,12,0.1); }
.theme-light .mp-tile h3, .theme-light .lmatrix-item h3{ color: var(--ink); }

/* --- Hero Startseite: Foto statt Kartenstapel --- */
.page-home .hero-layout.has-photo{ display: grid !important; grid-template-columns: minmax(0,1.1fr) minmax(320px,0.9fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.page-home .hero-layout.has-photo .hero-inner{ max-width: 640px !important; margin: 0 !important; text-align: left !important; align-items: flex-start !important; }
.page-home .hero-layout.has-photo h1{ font-size: clamp(2.3rem, 4.3vw, 4.2rem) !important; }
.page-home .hero-layout.has-photo .hero-actions, .page-home .hero-layout.has-photo .hero-trust{ justify-content: flex-start !important; }
.home-shot{ position: relative; z-index: 3; justify-self: end; width: 100%; max-width: 480px; aspect-ratio: 4 / 5; margin: 0; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.75), 0 0 80px rgba(232,80,12,0.18); }
.home-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: 76% 50%; filter: saturate(0.95) contrast(1.04); }
.home-shot::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,4,4,0) 55%, rgba(5,4,4,0.55) 100%); pointer-events: none; }
.home-shot-tag{ position: absolute; top: 1rem; right: 1rem; z-index: 2; padding: 0.32rem 0.55rem; border-radius: var(--radius-pill); background: rgba(5,4,4,0.55); font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.home-shot-chip{ position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; padding: 0.9rem 1.1rem; border-radius: 16px; background: #fff; color: #120e0c; font-size: 0.98rem; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.home-shot-chip::before{ content: ''; width: 8px; height: 8px; margin-right: 0.3rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.home-shot-chip span{ color: rgba(18,14,12,0.7); }
.home-shot-chip b{ font-weight: 600; }
@media (max-width: 900px){
  .page-home .hero-layout.has-photo{ grid-template-columns: 1fr; }
  .page-home .hero-layout.has-photo .hero-inner{ margin-inline: auto !important; text-align: center !important; align-items: center !important; }
  .page-home .hero-layout.has-photo .hero-actions, .page-home .hero-layout.has-photo .hero-trust{ justify-content: center !important; }
  .page-home .hero-layout.has-photo h1{ font-size: clamp(2.7rem, 9vw, 4rem) !important; }
  .home-shot{ justify-self: center; max-width: 440px; aspect-ratio: 4 / 3.4; margin-top: 0.5rem; }
  .home-shot img{ object-position: 72% 50%; }
}
.hero-visual.is-clean .home-shot-chip{ margin: 0; }
@media (max-width: 900px){ .hero-visual.is-clean{ width: min(100%, 440px); } }

/* =====================================================================
   Runde 7: ruhigerer Rhythmus, Karussell mit drei Branchen, Beispielfälle als Stapel
   ===================================================================== */
/* Helle Abschnitte hintereinander wirken wie ein Block: keine Trennlinie, weniger Abstand */
.theme-light + .theme-light{ border-top: 0 !important; }
section.section.theme-light + section.section.theme-light{ padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }
.theme-light.lmatrix-sec{ border-color: transparent !important; }
.theme-light .lmatrix-icon{ background: #fff; color: #c4410e; border-color: rgba(232,80,12,0.22); box-shadow: 0 10px 24px -14px rgba(18,14,12,0.3); }
.theme-light .lmatrix-item p{ color: var(--ink-mid); }
/* Karussell: auf breiten Bildschirmen passen alle drei Karten nebeneinander, ohne Pfeile */
@media (min-width: 900px){
  .crs-card{ flex: 1 1 0; min-width: 0; }
}
.crs.is-static .crs-controls{ display: none; }
.crs.is-static .crs-track{ padding-bottom: 0.4rem; }
/* Beispielfälle im Stapel */
.stack-label{ display: block; margin-top: 1.4rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-hot); }
.stack-label + .stack-list{ margin-top: 0.7rem; }
.stack-link{ display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; margin-top: 1.3rem; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.25); font-size: 0.95rem; font-weight: 600; color: #fff; transition: border-color 0.2s ease, color 0.2s ease; }
.stack-link svg{ width: 15px; height: 15px; color: var(--signal-b); transition: transform 0.2s var(--ease); }
.stack-link:hover{ border-color: var(--signal-b); }
.stack-link:hover svg{ transform: translateX(3px); }
.stack-sec .case-note{ margin-top: 1.6rem; text-align: center; font-size: 0.86rem; font-style: italic; color: var(--ink-faint); }
.stack-card h3{ font-size: clamp(1.45rem, 2.3vw, 1.95rem); }
.theme-light .badge-pill{ background: #fff !important; border-color: rgba(196,65,14,0.22) !important; color: #c4410e; box-shadow: 0 8px 22px -14px rgba(18,14,12,0.3); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Zahlen-Block mit Foto links */
.zahl-split.has-photo{ grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); padding: 0; gap: 0; overflow: hidden; align-items: stretch; }
.zahl-photo{ position: relative; margin: 0; min-height: 420px; }
.zahl-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.zahl-photo figcaption, .head-photo figcaption{ position: absolute; right: 0.8rem; bottom: 0.8rem; padding: 0.32rem 0.55rem; border-radius: var(--radius-pill); background: rgba(5,4,4,0.55); font: 500 0.62rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.zahl-split-body{ padding: clamp(2rem, 4vw, 3.2rem); }
.has-photo .zahl-split-num{ margin-top: 1.8rem; padding: 1.6rem 0 0; border-left: 0; border-top: 1px solid rgba(18,14,12,0.12); display: grid; grid-template-columns: auto 1fr; column-gap: 2rem; align-items: end; }
.has-photo .zahl-split-num .zahl-kicker{ grid-column: 1 / -1; }
.has-photo .zahl-split-num .zahl{ grid-row: span 3; margin-top: 0.5rem; font-size: clamp(3.6rem, 6.5vw, 5.6rem); }
.has-photo .zahl-split-num .zahl-unit{ margin-top: 0; }
.has-photo .zahl-split-num .zahl-basis{ margin-top: 0.4rem; }
@media (max-width: 860px){
  .zahl-split.has-photo{ grid-template-columns: 1fr; }
  .zahl-photo{ min-height: 0; aspect-ratio: 16 / 9; }
  .has-photo .zahl-split-num{ grid-template-columns: 1fr; }
  .has-photo .zahl-split-num .zahl{ grid-row: auto; }
}
/* Engpässe: Überschrift mit Foto */
.head-split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.head-split .section-head{ margin-bottom: 0; }
.head-photo{ position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
.head-photo img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) contrast(1.05); }
@media (max-width: 860px){ .head-split{ grid-template-columns: 1fr; } }
.zahl-photo img{ object-position: 50% 72%; }
.head-photo img{ filter: saturate(1) contrast(1.04) brightness(1.22); }
.hero .hero-sub{ text-wrap: pretty; }

/* =====================================================================
   Runde 8: Zeitfresser als Foto-Split (hell), Beispielfälle-CTA
   ===================================================================== */
.pains-split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pains-media{ position: sticky; top: 112px; }
.pains-photo{ position: relative; margin: 0; aspect-ratio: 1 / 0.98; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(18,14,12,0.55); }
.pains-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.pains-card{ position: absolute; left: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); padding: 1.4rem 1.6rem 1.5rem 3.4rem; border-radius: 16px; background: #fff; color: #120e0c; box-shadow: 0 18px 44px rgba(18,14,12,0.22); }
.pains-card::before{ content: ''; position: absolute; left: 1.5rem; top: 50%; width: 11px; height: 11px; margin-top: 0.55rem; border-radius: 50%; border: 2.5px solid var(--signal); box-sizing: border-box; }
.pains-card span{ display: block; font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #c4410e; }
.pains-card strong{ display: block; margin-top: 0.6rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; color: #120e0c; text-wrap: balance; }
.pains-note{ margin-top: 0.8rem; text-align: center; font-size: 0.8rem; color: var(--ink-faint); }
.pains-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(18,14,12,0.1); }
.pain-item{ padding: 1.6rem 0 1.5rem; border-bottom: 1px solid rgba(18,14,12,0.1); }
.pain-top{ display: flex; align-items: center; gap: 0.9rem; }
.pain-num{ font: 600 0.82rem/1 var(--font-mono); letter-spacing: 0.04em; color: #c4410e; }
.pain-item .chip-row{ margin: 0; }
.theme-light .chip-row span{ background: #f6f2ec; border-color: rgba(18,14,12,0.1); color: rgba(18,14,12,0.66); }
.theme-light .chip-row span.is-hot{ background: rgba(232,80,12,0.09); border-color: rgba(232,80,12,0.3); color: #b33a0b; }
.pain-item h3{ margin-top: 1rem; font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.18; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.pain-item > p{ margin-top: 0.55rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink-mid); max-width: 52ch; }
.pain-toggle{ display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding: 0; border: 0; background: none; font: 600 0.95rem/1.3 var(--font-sans, inherit); color: var(--ink); cursor: pointer; text-align: left; }
.pain-toggle:hover{ color: #c4410e; }
.pain-toggle:focus-visible{ outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 6px; }
.pain-toggle .plus{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(18,14,12,0.18); background: #fff; }
.pain-toggle .plus::before{ top: 14px; left: 9px; width: 11px; height: 1.6px; background: var(--ink); }
.pain-toggle .plus::after{ top: 9px; left: 14px; width: 1.6px; height: 11px; background: var(--ink); }
.pain-item.is-open .pain-toggle{ color: #c4410e; }
.pain-item .pain-examples{ margin-top: 1rem; border-top-color: rgba(18,14,12,0.1); }
.pain-item .pain-examples b{ color: #c4410e; }
@media (max-width: 900px){
  .pains-split{ grid-template-columns: 1fr; }
  .pains-media{ position: relative; top: auto; }
  .pains-photo{ aspect-ratio: 4 / 3.2; }
}
/* CTA nach den Beispielfällen */
.stack-cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.6rem clamp(1.4rem, 3vw, 2.2rem); border-radius: 22px; border: 1px solid rgba(232,80,12,0.25); background: linear-gradient(120deg, rgba(232,80,12,0.12), rgba(255,255,255,0.02) 60%); }
.stack-cta p{ margin: 0; max-width: 56ch; font-size: 1.02rem; line-height: 1.55; color: var(--ink-mid); }
.stack-cta strong{ color: #fff; font-weight: 600; }
/* Conversion: Erstgespräch-Button auf dem Handy direkt im Kopf */
.header-cta-m{ display: none; }
@media (max-width: 900px){
  .header-cta-m{ display: inline-flex; align-items: center; margin-left: auto; margin-right: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; background: #fff; color: #120e0c; font-size: 0.86rem; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(232,80,12,0.7); transition: transform 0.16s ease; }
  .header-cta-m:active{ transform: scale(0.97); }
}
.pain-toggle{ text-transform: none; letter-spacing: 0; font-family: inherit; }

/* Video-Seiten (Mail vor dem Erstgespräch) */
.page-video .header-cta, .page-video .header-cta-m{ display: none !important; }
.vid-hero .hero-inner{ max-width: 760px; }
.vid-frame{ position: relative; z-index: 2; max-width: 1040px; margin: clamp(2rem, 4vw, 3rem) auto 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), 0 0 80px rgba(232,80,12,0.18); }
.vid-frame video{ display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vid-next{ max-width: 860px; }
.vid-points{ list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid rgba(18,14,12,0.1); }
.vid-points li{ padding: 1.1rem 0 1.1rem 1.6rem; border-bottom: 1px solid rgba(18,14,12,0.1); position: relative; font-size: 1.05rem; line-height: 1.55; color: var(--ink-mid); }
.vid-points li::before{ content: ''; position: absolute; left: 0; top: 1.55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.vid-points b{ color: var(--ink); font-weight: 600; }
.vid-contact{ margin-top: 1.6rem; color: var(--ink-mid); line-height: 1.6; }
.vid-contact a{ color: #c4410e; text-decoration: underline; text-underline-offset: 3px; }
.vid-hero .hero-inner{ margin-inline: auto !important; text-align: center !important; align-items: center !important; }