/*
Theme Name: billerbeck IT Next
Theme URI: https://www.billerbeck-it.software/
Author: billerbeck IT Solutions
Description: Eigenständiger heller Website-Entwurf mit Produktatelier, neuem Header und neuen Heroes.
Version: 3.0.0
License: GNU General Public License v2 or later
Text Domain: billerbeck-it
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* === Grundpalette === */
  --navy:           #00305b;
  --navy-dark:      #001f3d;
  --navy-soft:      #1a4574;

  --steel:          #6e82a6;
  --steel-soft:     #9aabc7;
  --steel-pale:     #c4cfdf;

  --gray:           #c6c6c6;
  --gray-light:     #e3e3e3;
  --gray-pale:      #f1f1f1;

  --paper:          #ffffff;
  --paper-warm:     #fafafa;
  --paper-soft:     #fafafa;   /* compat alias */
  --blush:          #e3e3e3;   /* compat alias → gray-light */

  --ink:            #0d1a2b;
  --mute:           #5a6477;

  /* === Produktfarben === */
  /* PIM = Petrol (statt Navy), damit es sich von der Marken-Blau-Familie abhebt */
  --pim:            #0e5e69;
  --pim-soft:       #5f8c92;
  --pim-pale:       #d3e8ea;

  --dms:            #f3c200;
  --dms-soft:       #f7d54d;
  --dms-pale:       #fdf4d1;

  --workflow:       #62544a;
  --workflow-soft:  #8b7a6e;
  --workflow-pale:  #ecddd2;

  --rag:            #ed8200;
  --rag-soft:       #f5ac52;
  --rag-pale:       #fde7cc;

  /* Tasks = Moosgrün. Bewusst weit weg vom Petrol des PIM (Cyan-Ton),
     damit die beiden Produkte im Farbleitsystem nicht verwechselbar sind. */
  --tasks:          #5b7f3f;
  --tasks-soft:     #8aa86a;
  --tasks-pale:     #e5edd9;

  /* === Status === */
  --success:        #4caf7a;
  --warning:        #f39200;
  --error:          #d64545;

  /* Legacy color aliases (sub-page templates) */
  --color-primary:      #00305b;
  --color-primary-dark: #001f3d;
  --color-primary-mid:  #6e82a6;
  --color-accent:       #00305b;
  --color-accent-hover: #1a4574;
  --color-claim:        #c6c6c6;
  --color-text:         #0d1a2b;
  --color-text-muted:   #5a6477;
  --color-bg:           #fafafa;
  --color-bg-light:     #e3e3e3;
  --color-bg-dark:      #00305b;
  --color-border:       #e3e3e3;
  --color-gold:         #ed8200;
  --color-gold-light:   rgba(237,130,0,.12);

  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --container:    1280px;
  --radius:       12px;
  --radius-lg:    24px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-sm:      0 4px 12px rgba(0,48,91,.06);
  --shadow-md:      0 8px 24px rgba(0,48,91,.10);
  --shadow-lg:      0 24px 40px -20px rgba(0,48,91,.20);
  --shadow-navy:    0 24px 40px -20px rgba(0,48,91,.40);
  --shadow-dark:    0 24px 40px -20px rgba(0,0,0,.30);
  --shadow-blue-sm: 0 2px 12px rgba(0,48,91,.08);
  --shadow-blue:    0 8px 28px rgba(0,48,91,.12);
  --shadow-blue-lg: 0 20px 50px rgba(0,48,91,.18);

  /* Easing */
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart:  cubic-bezier(0.76, 0, 0.24, 1);
  --transition:         0.2s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes wm-bob   { 0%,100% { transform: translateY(0) }    50% { transform: translateY(-8px) } }
@keyframes wm-spin  { to      { transform: rotate(360deg) } }
@keyframes wm-hub-pulse  { 0%,100% { opacity: .25 }   50% { opacity: 1 } }
@keyframes wm-hub-dash   { to { stroke-dashoffset: -40 } }
@keyframes wm-hub-float  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes wm-flow-dash  { to { stroke-dashoffset: -32 } }
@keyframes wm-flow-blink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes float-up      { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes fade-in-down  { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: translateY(0) } }
@keyframes wave-drift    { 0% { transform: scale(1.05) translate(0,0) } 33% { transform: scale(1.08) translate(-1.5%,1%) } 66% { transform: scale(1.06) translate(1.5%,-.8%) } 100% { transform: scale(1.05) translate(0,0) } }

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: .5rem 1rem; background: var(--navy); color: #fff;
  font-weight: 600; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; transition: top .2s ease;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.5rem, 6vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 2rem); letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; letter-spacing: -0.01em; }

p { color: var(--mute); line-height: 1.7; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 3.5rem;
  position: relative;
  z-index: 1;
}

.section { padding: 5rem 0; }

.section--light { background: var(--paper-soft); }

.section--dark {
  background: var(--navy);
  color: var(--paper);
}
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark p   { color: rgba(244,239,230,.75); }

.about { background: var(--paper); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}
.section__header p { margin-top: 1rem; font-size: 1.05rem; }

.label,
.section__header .label {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1rem;
}

.section--dark .section__header .label { color: var(--steel-soft); }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1rem;
}
.eyebrow--light { color: var(--steel-soft); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn--primary {
  background: var(--navy);
  color: var(--paper);
}
.btn--primary:hover { background: var(--navy-soft); }

.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn--outline:hover { background: rgba(0,41,102,.04); }

.btn--outline-white {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--blush);
}
.btn--outline-white:hover { background: rgba(244,239,230,.08); border-color: var(--paper); }

.btn--white {
  background: var(--paper-soft);
  color: var(--navy);
  font-weight: 700;
}
.btn--white:hover { background: var(--blush); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--gray-light);
  transition: box-shadow .3s ease;
}
.site-header.scrolled {
  box-shadow: 0 2px 24px rgba(0,41,102,.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo { display: flex; align-items: center; }
.site-logo img { height: 40px; width: auto; }

/* Main nav — pill container */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.main-nav > ul {
  display: flex;
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--blush);
  padding: 6px;
  border-radius: var(--radius-pill);
  gap: 2px;
}
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: block;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius-pill);
  transition: background .18s ease, color .18s ease;
}
.main-nav > ul > li > a:hover {
  background: rgba(0,41,102,.05);
  color: var(--navy);
}
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li > a[aria-current="page"] {
  background: var(--navy);
  color: var(--paper);
}
.main-nav > ul > li > a::after { display: none; }
.main-nav .has-dropdown > a::after { display: none; }

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  background: var(--paper-soft);
  border: 1px solid var(--blush);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 200;
}
.has-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .625rem .875rem;
  font-size: .9rem;
  color: var(--ink);
  border-radius: 10px;
  transition: background .15s ease;
}
.dropdown-menu a:hover { background: var(--blush); color: var(--navy); }

/* Marker in den Dropdowns, zwei Sorten mit unterschiedlicher Aufgabe:
   .dd-dot traegt die Produktfarbe aus dem Farbleitsystem (ein Punkt je
   Produkt, Farbe kommt per --dd-color aus dem Markup).
   .dd-mark ist der neutrale Strich fuer Ankerlinks innerhalb einer Seite,
   dort gibt es nichts farblich zu unterscheiden. Er faehrt beim Hover in
   der Seitenfarbe aus, nur per transform, damit der Text nicht springt. */
.dd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dd-color, var(--steel));
  flex-shrink: 0;
}
.dd-mark {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--steel-pale);
  flex-shrink: 0;
  transform: scaleX(.55);
  transform-origin: left center;
  transition: transform .3s var(--ease-out-expo), background .2s ease;
}
.dropdown-menu a:hover .dd-mark,
.dropdown-menu a:focus-visible .dd-mark {
  transform: scaleX(1);
  background: var(--dd-color, var(--navy));
}
.dd-soon {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
@media (prefers-reduced-motion: reduce) {
  .dd-mark { transition: background .2s ease; }
}

/* Nav CTA pill button */
.nav-cta {
  margin-left: 1.25rem;
  padding: .625rem 1.375rem !important;
  background: var(--navy) !important;
  color: var(--paper) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  border: none !important;
  transition: background .2s ease !important;
}
.nav-cta:hover { background: var(--navy-soft) !important; }
.nav-cta::after { display: none !important; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: .5rem;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .2s ease;
}

/* Global wave background — disabled in warm design */
.bg-wave { display: none; }

/* ============================================================
   HERO — WARM CANVAS
   ============================================================ */
.hero {
  padding: 40px 0 80px;
  background: var(--paper);
  position: relative;
  z-index: 1;
}

.hero__canvas {
  background: var(--paper-soft);
  border-radius: 28px;
  border: 1px solid var(--blush);
  padding: 44px 56px;
  position: relative;
  overflow: hidden;
}

/* Rotating orbit ring */
.hero__orbit {
  position: absolute;
  top: -160px; right: -160px;
  width: 460px; height: 460px;
  border-radius: 50%;
  border: 1px dashed var(--steel-soft);
  opacity: .45;
  pointer-events: none;
  animation: wm-spin 30s linear infinite;
}
.hero__orbit::after {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--navy);
  transform: translateX(-50%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}

.hero__trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blush);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 24px;
}
.hero__trust-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(1.85rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(105deg, var(--steel), var(--navy));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--mute);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 28px;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__product-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--blush);
}

.hero__trust-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed var(--blush);
}

.hero__avatars { display: flex; }
.hero__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--paper-soft);
}
.hero__avatar:not(:first-child) { margin-left: -10px; }

.hero__trust-text { font-family: var(--font-sans); }
.hero__trust-text strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.hero__trust-text span { font-size: 12px; color: var(--mute); }

/* Floating product cards */
.hero__visual {
  position: relative;
  height: 480px;
}

/* 4-product color strip in hero visual */
.hero-product-strip {
  position: absolute;
  bottom: 0; left: 0;
  display: flex; gap: 6px; z-index: 2;
}
.hero-product-dot {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em;
}
.hero-product-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.hero-product-dot--pim      { background: var(--navy); color: #fff; }
.hero-product-dot--pim::before { background: rgba(255,255,255,.5); animation: wm-pulse 2.4s ease-in-out infinite; }
.hero-product-dot--dms      { background: var(--dms-pale); color: var(--navy-dark); border: 1px solid rgba(243,194,0,.3); }
.hero-product-dot--dms::before { background: var(--dms); animation: wm-pulse 2.4s ease-in-out .6s infinite; }
.hero-product-dot--workflow { background: var(--workflow-pale); color: var(--navy-dark); border: 1px solid rgba(98,84,74,.2); }
.hero-product-dot--workflow::before { background: var(--workflow); animation: wm-pulse 2.4s ease-in-out 1.2s infinite; }
.hero-product-dot--rag      { background: var(--rag-pale); color: var(--navy-dark); border: 1px solid rgba(237,130,0,.3); }
.hero-product-dot--rag::before { background: var(--rag); animation: wm-pulse 2.4s ease-in-out 1.8s infinite; }

.hero-card {
  position: absolute;
  border-radius: 16px;
  padding: 20px;
}
.hero-card--pim {
  top: 0; right: 0;
  width: 280px; height: 200px;
  background: var(--paper);
  border: 1px solid var(--blush);
  box-shadow: var(--shadow-lg);
  animation: wm-bob 6s ease-in-out infinite;
}
.hero-card--ai {
  top: 180px; left: 0;
  width: 240px; height: 240px;
  background: var(--navy);
  color: var(--paper);
  box-shadow: var(--shadow-navy);
  animation: wm-bob 6s ease-in-out 2s infinite;
}
.hero-card--dms {
  bottom: 0; right: 40px;
  width: 200px; height: 140px;
  background: var(--blush);
  border: 1px solid var(--steel-soft);
  animation: wm-bob 6s ease-in-out 4s infinite;
}

.hero-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--steel);
  margin-bottom: 12px;
}
.hero-card--ai  .hero-card__label { color: var(--steel-soft); }
.hero-card--dms .hero-card__label { color: var(--navy); }

.hero-card__img {
  width: 100%; height: 130px;
  border-radius: 8px;
  background-image: repeating-linear-gradient(135deg, rgba(0,41,102,.05) 0 1px, transparent 1px 14px);
  background-color: rgba(0,41,102,.03);
  border: 1px dashed rgba(0,41,102,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,41,102,.35);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--paper);
  line-height: 1.2;
  margin-top: 8px;
}
.hero-card__bar-wrap {
  margin-top: 16px; height: 6px;
  background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden;
}
.hero-card__bar { width: 72%; height: 100%; background: var(--steel-soft); }
.hero-card__bar-label {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--steel-soft);
}
.hero-card__live {
  margin-top: 16px; padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; color: var(--paper);
}
.hero-card__live::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0;
}
.hero-card__num {
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  color: var(--navy); line-height: 1; margin-top: 4px;
}
.hero-card__sub {
  font-family: var(--font-sans); font-size: 12px; color: var(--mute); margin-top: 4px;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--paper);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--blush);
  position: relative; z-index: 1;
}
.trust-bar__inner {
  display: flex; align-items: center; gap: 2rem;
  flex-wrap: nowrap; justify-content: center;
}
.trust-bar__label {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 400;
  color: var(--mute); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.trust-bar__logos {
  display: flex; gap: .75rem;
  align-items: center; flex-wrap: wrap; justify-content: center;
}
.trust-badge {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 500; color: var(--navy);
  background: var(--paper-soft); border: 1px solid var(--blush);
  padding: .4rem 1rem; border-radius: var(--radius-pill); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.trust-badge:hover {
  background: var(--blush); border-color: rgba(0,41,102,.2); transform: translateY(-1px);
}

/* ============================================================
   PRODUCTS SECTION (PIM / DMS / WORKFLOW / RAG — 4er-Grid)
   ============================================================ */
.products {
  padding: 80px 0 40px;
  background: var(--paper);
  position: relative; z-index: 1;
}

.products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
  padding: 0 8px;
}
.products__head-left h2 { font-size: clamp(2rem, 4vw, 4rem); margin-top: 12px; line-height: 1.02; }
.products__head-left h2 span { color: var(--steel); }
.products__head-right {
  max-width: 320px;
  font-size: 15px; color: var(--mute); line-height: 1.6;
}

/* 2x2-Raster: vier gleichrangige Produkte (PIM, DMS, KI, Tasks).
   War vorher 3-spaltig; mit dem vierten Produkt stünde sonst eine
   einzelne Karte allein in der zweiten Reihe. */
.product-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 8px;
}

.product-card {
  border-radius: 28px;
  padding: 36px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card--pim { min-height: 380px; }

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,48,91,.12);
}

/* PIM: pale blue bg — consistent mit anderen Karten */
.product-card--pim {
  background: #f4f7fa;
  border: 1px solid rgba(0,48,91,.09);
  border-top: 3px solid var(--pim);
  color: var(--navy-dark);
}

/* DMS: orange-pale bg, dark text */
.product-card--dms {
  background: #fdfbf4;
  border: 1px solid rgba(243,194,0,.12);
  border-top: 3px solid var(--dms);
  color: var(--navy-dark);
}

/* Workflow: taupe-pale bg, dark text */
.product-card--workflow,
.product-card--flow {
  background: #f7f4f2;
  border: 1px solid rgba(98,84,74,.10);
  border-top: 3px solid var(--workflow);
  color: var(--navy-dark);
}

/* RAG: gold-pale bg, dark text */
.product-card--rag {
  background: #fdf9f4;
  border: 1px solid rgba(237,130,0,.12);
  border-top: 3px solid var(--rag);
  color: var(--navy-dark);
}

/* Tasks: moosgrün-pale bg, dark text */
.product-card--tasks {
  background: #f8faf4;
  border: 1px solid rgba(91,127,63,.12);
  border-top: 3px solid var(--tasks);
  color: var(--navy-dark);
}

/* ── Coming soon: bewusst kleinere, ruhigere Karten. Sie stehen unter
   den echten Produkten und sollen sie nicht überstrahlen. ────────── */
.product-cards--soon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.product-card--soon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  min-height: 0;
  border-radius: 14px;
  background: var(--paper);
  border: 1px dashed var(--gray-light);
  color: var(--navy-dark);
  text-decoration: none;
  /* Nur transform/opacity animieren — kein transition-all */
  transition: transform .28s cubic-bezier(.34,1.3,.64,1),
              border-color .28s ease,
              box-shadow .28s ease;
}

.product-card--soon:hover {
  transform: translateY(-2px);
  border-color: var(--steel-soft);
  box-shadow: 0 10px 26px -12px rgba(0,48,91,.22);
}

.product-card--soon:focus-visible {
  outline: 2px solid var(--rag);
  outline-offset: 3px;
}

.product-card--soon:active { transform: translateY(0); }

.product-card--soon__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gray-pale);
  color: var(--steel);
}

.product-card--soon__body { min-width: 0; }

.product-card--soon__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.product-card--soon__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--navy);
}

.badge-soon {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gray-pale);
  color: var(--mute);
  border: 1px solid var(--gray-light);
}

.product-card--soon p {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
}

.product-card__fullname {
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .5;
  margin-top: 2px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.product-card__icon-wrap {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px; color: #fff;
}
.product-card--pim      .product-card__icon-wrap { background: var(--pim); }
.product-card--dms      .product-card__icon-wrap { background: var(--dms); }
.product-card--workflow .product-card__icon-wrap,
.product-card--flow     .product-card__icon-wrap { background: var(--workflow); }
.product-card--rag      .product-card__icon-wrap { background: var(--rag); color: var(--navy-dark); }
.product-card--tasks    .product-card__icon-wrap { background: var(--tasks); }

.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__tag {
  font-family: var(--font-mono);
  font-size: 1.35rem; letter-spacing: .06em; margin-bottom: 6px; font-weight: 700;
  line-height: 1.1;
}
.product-card--pim      .product-card__tag { color: var(--pim); }
.product-card--dms      .product-card__tag { color: var(--dms); }
.product-card--workflow .product-card__tag,
.product-card--flow     .product-card__tag { color: var(--workflow); }
.product-card--rag      .product-card__tag { color: var(--rag); }
.product-card--tasks    .product-card__tag { color: var(--tasks); }

.product-card h3 {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  margin-bottom: 12px; line-height: 1.05; letter-spacing: -0.02em;
}
.product-card--pim h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); color: var(--navy-dark); }

/* Wide full-width RAG card */
.product-card--rag-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 28px 36px;
  min-height: auto;
}
.product-card--rag-wide .product-card__body { flex: 1; }
.product-card--rag-wide .product-card__body h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); margin-bottom: 6px; }
.product-card--rag-wide .product-card__body p  { font-size: 13px; margin-bottom: 0; }
.product-card--rag-wide .product-card__cta { margin-top: 0; white-space: nowrap; flex-shrink: 0; }

.product-card p {
  font-size: 15px; line-height: 1.6; opacity: .85; flex: 1;
}
.product-card--pim p { color: rgba(0,31,61,.65); font-size: 15px; }

.product-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  margin-top: 20px; opacity: .9;
  transition: gap .15s ease;
}
.product-card--pim      .product-card__cta { color: var(--navy-dark); font-size: 14px; }
.product-card--dms      .product-card__cta { color: var(--navy-dark); }
.product-card--workflow .product-card__cta,
.product-card--flow     .product-card__cta { color: var(--navy-dark); }
.product-card--rag      .product-card__cta { color: var(--navy-dark); }
.product-card:hover .product-card__cta { gap: 12px; }

/* ============================================================
   SOLUTIONS OVERVIEW (ecosystem diagram + panels)
   ============================================================ */
.solutions-section {
  background: var(--paper);
  padding: 40px 0 80px;
  position: relative; z-index: 1;
}

/* Ecosystem diagram */
.ecosystem__diagram {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: auto auto auto;
  gap: 0;
  align-items: center;
  justify-items: center;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 0;
}

.eco-channels {
  grid-column: 1; grid-row: 1 / 4;
  display: flex; flex-direction: column; gap: .75rem; align-self: center;
}
.eco-channel-group {
  background: var(--navy); border-radius: var(--radius);
  padding: 1.25rem; width: 175px;
}
.eco-channel-group__title {
  color: var(--paper); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.eco-channel-item {
  background: var(--paper-soft); border-radius: 6px;
  padding: .5rem .75rem; font-size: .8rem; font-weight: 600;
  color: var(--navy); margin-bottom: .4rem; text-align: center;
}
.eco-channel-item:last-child { margin-bottom: 0; }

.eco-external {
  grid-column: 4; grid-row: 1 / 4; align-self: center;
}
.eco-external-box {
  background: var(--navy); border-radius: var(--radius);
  padding: 1.25rem; width: 175px; color: var(--paper);
}
.eco-external-box h4 { color: var(--paper); font-size: .9rem; margin-bottom: .5rem; }
.eco-external-box p  { color: rgba(244,239,230,.75); font-size: .75rem; margin: 0; line-height: 1.5; }

.eco-top {
  grid-column: 2 / 4; grid-row: 1;
  display: flex; justify-content: center; padding-bottom: 1.5rem;
}
.eco-erp {
  background: var(--navy-soft); color: var(--paper);
  border-radius: var(--radius); padding: 1rem 2rem; text-align: center; min-width: 260px;
}
.eco-erp h4 { color: var(--paper); font-size: 1rem; margin-bottom: .25rem; }
.eco-erp p  { color: rgba(244,239,230,.7); font-size: .78rem; margin: 0; }

.eco-middle {
  grid-column: 2 / 4; grid-row: 2 / 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  row-gap: 2rem;
  column-gap: 2.5rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding: .5rem 0 1.5rem;
}
.eco-circle {
  width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--paper-soft); padding: 1.5rem; position: relative;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.eco-circle--sm {
  width: 150px; height: 150px;
  border-width: 2px;
}
.eco-circle--sm .eco-circle__label { font-size: 1.4rem; }
.eco-circle--sm p { font-size: .65rem; }
.eco-circle:hover { transform: scale(1.04); box-shadow: 0 12px 40px rgba(0,41,102,.15); }
.eco-circle--pim      { border-color: var(--navy); }
.eco-circle--dms      { border-color: var(--dms); }
.eco-circle--workflow { border-color: var(--workflow); }
.eco-circle--rag      { border-color: var(--rag); }
.eco-circle__label {
  font-size: 2rem; font-weight: 800; line-height: 1;
  font-family: var(--font-display); margin-bottom: .35rem;
}
.eco-circle--pim      .eco-circle__label { color: var(--navy); }
.eco-circle--dms      .eco-circle__label { color: var(--dms); }
.eco-circle--workflow .eco-circle__label { color: var(--workflow); font-size: 1.1rem; }
.eco-circle--rag      .eco-circle__label { color: var(--rag); font-size: 1.6rem; }
.eco-circle h4 { font-size: .8rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; }
.eco-circle p  { font-size: .7rem; color: var(--mute); margin: 0; line-height: 1.4; }

.eco-connector {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-size: .6rem; color: var(--mute); text-align: center; flex-shrink: 0; max-width: 80px;
}

.eco-exchange {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-size: .65rem; color: var(--mute); font-weight: 600; text-align: center; flex-shrink: 0;
}
.eco-exchange__arrow { font-size: 1.1rem; color: var(--navy); }

.eco-bottom {
  grid-column: 2 / 4; grid-row: 3;
  display: flex; justify-content: space-around; width: 100%; padding-top: 1.5rem; gap: 2rem;
}
.eco-bottom-node {
  background: var(--navy-soft); color: var(--paper);
  border-radius: var(--radius); padding: .875rem 1.5rem; text-align: center; flex: 1;
}
.eco-bottom-node h4 { color: var(--paper); font-size: .875rem; margin: 0; }

.eco-features {
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: center; margin-top: 2.5rem;
}
.eco-pill {
  display: flex; align-items: center; gap: .5rem;
  background: var(--paper-soft); border: 1px solid var(--blush);
  border-radius: var(--radius-pill); padding: .5rem 1rem;
  font-size: .85rem; font-weight: 500; color: var(--navy);
}

/* Solution panels 2-col */
.solutions-showcase__panels { display: flex; flex-direction: column; gap: 1.25rem; }
.solutions-showcase__panels--2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem;
}

.solution-panel {
  display: block;
  background: var(--paper-soft); border: 1px solid var(--blush);
  border-radius: var(--radius-lg); padding: 1.75rem;
  text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.solution-panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--navy), var(--steel));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s var(--ease-out-expo); border-radius: 0 2px 2px 0;
}
.solution-panel:hover {
  box-shadow: var(--shadow-blue); transform: translateY(-2px); border-color: rgba(0,41,102,.2);
}
.solution-panel:hover::before { transform: scaleY(1); }

.solution-panel__header {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem;
}
.solution-panel__icon {
  font-size: 2rem; flex-shrink: 0; line-height: 1; margin-top: .1rem;
}
.solution-panel__subtitle {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin: 0 0 .2rem;
}
.solution-panel__header h3 { font-size: 1.35rem; margin: 0; color: var(--navy); }
.solution-panel__badge {
  margin-left: auto; flex-shrink: 0;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel); background: rgba(89,125,179,.1); border: 1px solid rgba(89,125,179,.2);
  padding: .25rem .75rem; border-radius: var(--radius-pill);
}
.solution-panel__text { font-size: .9rem; line-height: 1.65; margin: 0 0 1rem; color: var(--mute); }
.solution-panel__features {
  list-style: none; display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.25rem; padding: 0;
}
.solution-panel__features li {
  font-size: .875rem; color: var(--mute); padding-left: 1.25rem; position: relative;
}
.solution-panel__features li::before {
  content: '✓'; position: absolute; left: 0; color: var(--navy); font-weight: 700; font-size: .75rem;
}
.solution-panel__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .875rem; font-weight: 600; color: var(--navy); transition: gap .15s ease;
}
.solution-panel:hover .solution-panel__cta { gap: .6rem; }

.solution-panel--pim::before     { background: linear-gradient(to bottom, var(--pim), var(--pim-soft)); }
.solution-panel--dms::before     { background: linear-gradient(to bottom, var(--dms), var(--dms-soft)); }
.solution-panel--workflow::before { background: linear-gradient(to bottom, var(--workflow), var(--workflow-soft)); }
.solution-panel--rag::before     { background: linear-gradient(to bottom, var(--rag), var(--rag-soft)); }

/* ============================================================
   BENEFITS SECTION
   ============================================================ */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  counter-reset: benefit-counter;
}
/* Variante für 4 Karten: 2×2 statt 3+1 mit verwaister Karte */
.benefits__grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.benefit-card {
  background: var(--paper-soft); border: 1px solid var(--blush);
  border-radius: var(--radius-lg); padding: 2rem; position: relative; overflow: hidden;
  counter-increment: benefit-counter;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
}
.benefit-card::before {
  content: counter(benefit-counter, decimal-leading-zero);
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  color: var(--navy); opacity: .06; line-height: 1; letter-spacing: -0.03em;
  transition: opacity .3s ease;
}
.benefit-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--navy), var(--steel));
  transform: scaleY(0); transition: transform .3s var(--ease-out-expo);
  transform-origin: bottom; border-radius: 0 2px 2px 0;
}
.benefit-card:hover {
  border-color: rgba(0,41,102,.18); box-shadow: var(--shadow-blue); transform: translateY(-3px);
}
/* Die anklickbaren Karten tragen role="button" und tabindex="0". Ohne
   eigene Fokusregel sieht man beim Durchtabben nicht, wo man steht. */
.benefit-card:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
/* Hover für alle anklickbaren Kacheln mit data-modal (nicht nur benefit-card) */
[data-modal-title]:not(.benefit-card) {
  transition: transform .2s ease, box-shadow .2s ease;
}
[data-modal-title]:not(.benefit-card):hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,41,102,.12);
}
.benefit-card:hover::before { opacity: .12; }
.benefit-card:hover::after  { transform: scaleY(1); }

.benefit-card__icon {
  width: 48px; height: 48px;
  background: rgba(0,41,102,.06); border: 1px solid rgba(0,41,102,.1);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 1.25rem;
}
.benefit-card h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--navy); }
.benefit-card p  { font-size: .9rem; margin: 0; line-height: 1.7; }

/* ============================================================
   INDUSTRIES SECTION
   ============================================================ */
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--blush);
  border-radius: 24px;
  overflow: hidden;
}

.industry-card {
  padding: 28px; background: var(--paper-soft);
  display: flex; flex-direction: column; gap: 16px; min-height: 200px;
  text-decoration: none; color: inherit;
  border-right: 1px solid var(--blush);
  border-bottom: 1px solid var(--blush);
  transition: background .2s ease, transform .2s ease;
}
.industry-card:nth-child(3n)   { border-right: none; }
.industry-card:nth-child(n+4)  { border-bottom: none; }
.industry-card:hover { background: var(--blush); transform: translateY(-1px); }
.industry-card::before { display: none; }

.industry-card__icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--navy); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  flex-shrink: 0;
}
.industry-card__icon { display: none; }

.industry-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy);
}
.industry-card p  { font-size: 14px; color: var(--mute); margin: 0; line-height: 1.5; flex: 1; }

/* ============================================================
   ABOUT / STORY SECTION
   ============================================================ */
.about {
  padding: 80px 0;
  background: var(--paper);
  position: relative; z-index: 1;
}

.about__story {
  background: var(--navy); color: var(--paper);
  border-radius: 28px; padding: 72px 64px;
  position: relative; overflow: hidden;
}

.about__story__blob {
  position: absolute; bottom: -120px; right: -60px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--steel), transparent 70%);
  opacity: .5; pointer-events: none;
}

.about__story__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative;
}

.about__story h2 {
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  color: var(--paper); margin-top: 16px; line-height: 1.0;
}
.about__story h2 em {
  font-style: italic; font-weight: 500; color: var(--steel-soft);
}
.about__story p {
  font-size: 17px; color: rgba(244,239,230,.85); line-height: 1.6; margin-top: 28px; max-width: 540px;
}

/* Absprung auf die Ueber-uns-Seite. Bewusst ein Textlink, kein Button:
   der einzige Button in diesem Abschnitt bleibt der CTA weiter unten. */
.about__story__more { margin-top: 24px; }
.about__story__more a {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease-out-expo), color .25s var(--ease-out-expo);
}
.about__story__more a::after { content: " \2192"; }
.about__story__more a:hover { border-bottom-color: #fff; color: var(--steel-soft); }
.about__story__more a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .about__story__more a { transition: none; } }

.about__stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 36px; margin-top: 40px;
}
.about__stat-num {
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  color: var(--paper); line-height: 1; display: block;
}
.about__stat-label {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--steel-soft);
  margin-top: 4px; display: block;
}

/* Portrait & quote */
.about__portrait { position: relative; }
.about__portrait-img {
  width: 100%; aspect-ratio: 3/4; border-radius: 20px;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
  background-color: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.35); letter-spacing: .06em; text-transform: uppercase;
}
.about__portrait-img img { width: 100%; height: 100%; object-fit: cover; }

.about__quote-card {
  position: absolute; bottom: -16px; left: -16px;
  background: var(--paper); color: var(--navy);
  padding: 16px 20px; border-radius: 16px; max-width: 280px;
  box-shadow: var(--shadow-dark);
}
.about__quote-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--navy); }
.about__quote-role { font-family: var(--font-sans); font-size: 12px; color: var(--mute); margin-top: 2px; }
.about__quote-text {
  font-family: var(--font-sans); font-style: italic; font-size: 13px;
  color: var(--ink); margin-top: 10px; line-height: 1.5;
}

/* Old about values kept for compatibility */
.about__values { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.about__value  { display: flex; gap: 1rem; align-items: flex-start; }
.about__value-icon {
  width: 40px; height: 40px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.about__value-text h4 { font-size: .9375rem; color: var(--paper); margin-bottom: .25rem; }
.about__value-text p  { font-size: .875rem; color: rgba(244,239,230,.7); margin: 0; }

/* image placeholder legacy */
.about__image { position: relative; }
.about__image-placeholder {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: var(--radius-lg); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-size: 4rem;
}
.about__badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--navy); color: #fff; padding: 1.25rem; border-radius: var(--radius-lg);
  text-align: center; box-shadow: var(--shadow-lg);
}
.about__badge .number { font-size: 2rem; font-weight: 800; display: block; }
.about__badge .text   { font-size: .75rem; font-weight: 600; opacity: .9; }

/* ============================================================
   SECURITY SECTION
   ============================================================ */
.security__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.security-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 2rem; text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  cursor: pointer; position: relative; overflow: hidden;
}
.security-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.security-card:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); transform: translateY(-2px);
}
.security-card__icon { font-size: 2.25rem; margin-bottom: 1.125rem; display: block; }
.security-card h3    { font-size: 1.05rem; color: #fff; margin-bottom: .75rem; }

/* ============================================================
   CTA SECTION — WARM CANVAS
   ============================================================ */
.cta {
  padding: 0 0 80px;
  background: var(--paper);
  position: relative; z-index: 1;
}

.cta__canvas {
  background: var(--paper-soft); border-radius: 28px; border: 1px solid var(--blush);
  padding: 64px 56px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
.cta__canvas h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 4rem); line-height: 1.0;
  color: var(--navy); margin: 0; letter-spacing: -0.025em;
}
.cta__body p { font-family: var(--font-sans); font-size: 16px; color: var(--mute); margin: 0 0 24px; }
.cta__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Old CTA for sub-pages */
.cta--dark {
  background: linear-gradient(150deg, #000d1a 0%, #001228 25%, #001f3d 55%, #002966 100%);
  padding: 6rem 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta--dark h2, .cta--dark h3 { color: #fff; }
.cta--dark p { color: rgba(255,255,255,.85); font-size: 1.1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy);
  color: rgba(244,239,230,.6);
  padding: 4rem 0 2rem;
  position: relative; z-index: 1;
}
.footer__logo { display: inline-block; margin-bottom: 1rem; }
.footer__logo img { height: 38px; width: auto; filter: brightness(0) invert(1); }

.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer__brand p { color: rgba(244,239,230,.55); font-size: .9rem; line-height: 1.7; margin-bottom: 1.5rem; }
.footer__contact { display: flex; flex-direction: column; gap: .75rem; font-size: .9rem; }
.footer__contact a {
  color: rgba(244,239,230,.6); transition: color .2s;
  display: flex; align-items: flex-start; gap: .5rem;
}
.footer__contact a:hover { color: var(--paper); }
.footer__contact address {
  color: rgba(244,239,230,.6); font-style: normal;
  display: flex; align-items: flex-start; gap: .5rem;
}
.footer__heading {
  font-size: .875rem; font-weight: 600; color: var(--paper);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.25rem;
}
.footer__links { display: flex; flex-direction: column; gap: .625rem; }
.footer__links a { font-size: .9rem; color: rgba(244,239,230,.55); transition: color .2s; }
.footer__links a:hover { color: var(--paper); }
.footer__bottom {
  border-top: 1px solid rgba(244,239,230,.1); padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer__bottom p { font-size: .875rem; color: rgba(244,239,230,.4); margin: 0; }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { font-size: .875rem; color: rgba(244,239,230,.4); transition: color .2s; }
.footer__legal a:hover { color: var(--paper); }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
/* Der Startzustand haengt an `.bb-js` auf dem <html>-Element.
   Diese Klasse setzt ein winziges Skript im <head> (billerbeck_anim_flag()
   in der functions.php), also nur dann, wenn JavaScript ueberhaupt laeuft.

   WARUM: Die Regeln unten starten auf `opacity: 0` und brauchen JavaScript,
   um jemals wieder sichtbar zu werden. Faellt das Skript aus — abgeschaltet,
   blockiert, Ladefehler, ein Crawler ohne JS-Rendering — blieben ganze
   Abschnitte dauerhaft unsichtbar. Der Text stuende im Quelltext und waere
   fuer niemanden lesbar. Mit dem Scope ist der Ausfallzustand „alles sofort
   sichtbar, nur ohne Animation".

   Das ist der Grund, aus dem einzelne Bloecke bewusst kein data-anim tragen
   (siehe `.lede` weiter unten). Diese Ausnahmen bleiben richtig, sie sind
   jetzt nur nicht mehr die einzige Absicherung. */
[data-anim] {
  /* KEIN pauschales will-change hier: es hält jedes animierte Element
     dauerhaft auf einer eigenen Compositor-Ebene und macht das Scrollen
     ruckelig. main.js setzt will-change nur während der Einblendung. */
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-js [data-anim="fade-up"]    { opacity: 0; transform: translateY(52px); }
.bb-js [data-anim="fade-left"]  { opacity: 0; transform: translateX(-52px); }
.bb-js [data-anim="fade-right"] { opacity: 0; transform: translateX(52px); }
.bb-js [data-anim="scale-in"]   { opacity: 0; transform: scale(0.92) translateY(24px); }
.bb-js [data-anim="fade-up-sm"] { opacity: 0; transform: translateY(28px); transition-duration: .55s; }
[data-anim].anim--visible { opacity: 1 !important; transform: translate(0,0) scale(1) !important; }

@media (prefers-reduced-motion: reduce) {
  /* Wer Bewegung abbestellt hat, bekommt den Inhalt sofort und vollstaendig.
     Vorher wurde hier nur die Transition abgeschaltet — die Elemente lagen
     trotzdem auf opacity:0 und warteten auf den IntersectionObserver. Wer
     Animationen meidet, sitzt aber oft genau vor der Technik, bei der dieses
     Warten schiefgeht. */
  .bb-js [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-anim], [data-anim].anim--visible { transition: none !important; animation: none !important; }
  .hero__orbit, .hero-card--pim, .hero-card--ai, .hero-card--dms,
  .rag-hub__dot, .rag-hub__line { animation: none !important; }
}

/* ============================================================
   MODAL / INFO DIALOG
   ============================================================ */
.info-dialog {
  border: none; border-radius: 24px; padding: 0;
  box-shadow: 0 32px 80px rgba(0,41,102,.25);
  max-width: 520px; width: calc(100vw - 2rem);
  background: var(--paper-soft);
  /* Zentrierung sicherstellen */
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
}
.info-dialog::backdrop { background: rgba(14,23,38,.6); backdrop-filter: blur(8px); }
.info-dialog[open] { animation: fade-in-down .28s var(--ease-out-expo) forwards; }
.info-dialog__panel { display: flex; flex-direction: column; }
.info-dialog__header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  padding: 2rem 2rem 1.5rem; border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; position: relative;
}
.info-dialog__close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.7);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.info-dialog__close:hover { background: rgba(255,255,255,.2); color: #fff; }
.info-dialog__icon  { font-size: 2.25rem; margin-bottom: .75rem; }
.info-dialog__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.info-dialog__body  { padding: 1.5rem 2rem; }
.info-dialog__text  { font-size: .9375rem; line-height: 1.75; color: var(--ink); }
.info-dialog__tags  { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.info-dialog__tag {
  background: rgba(0,41,102,.07); color: var(--navy);
  border: 1px solid rgba(0,41,102,.12);
  padding: .3rem .75rem; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.info-dialog__footer {
  padding: 1rem 2rem 1.5rem; display: flex; gap: .75rem; align-items: center;
}
.info-dialog__cta { flex: 1; text-align: center; }
.info-dialog__dismiss {
  background: none; border: none; cursor: pointer; padding: .75rem 1.25rem;
  font-size: .875rem; color: var(--mute); border-radius: var(--radius-pill);
  font-family: var(--font-sans); transition: background .2s;
}
.info-dialog__dismiss:hover { background: var(--blush); }

/* ============================================================
   PAGE HERO (sub-pages)
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 60%, #004a8c 100%);
  padding: 64px 0 56px; position: relative;
}
.page-hero--compact { padding: 56px 0 48px; }
.page-hero--dms { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }

.page-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.page-hero__content .label {
  display: inline-block; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem 1rem; border-radius: 100px; margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,.12);
}
.page-hero__content h1 {
  color: #fff; margin-bottom: 1.25rem;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.05; letter-spacing: -0.025em;
}
/* Sachzeile im H1: nennt das Thema der Seite beim Namen (PIM-Software,
   Dokumentenmanagement, …), damit die Schlagzeile darunter ihre Kuerze behalten
   kann. Bewusst kleiner gesetzt - die zweite Zeile bleibt der Hero. */
.page-hero__content h1 .h1-kicker {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: rgba(255,255,255,.72);
  margin-bottom: .6rem;
  text-wrap: balance;
}
[data-theme] .page-hero__content h1 .h1-kicker { color: var(--page-soft); }
.page-hero__sub { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2.5rem; max-width: 52ch; }
.page-hero__actions { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }

/* Light page-accent colour for meta chips + label in themed heroes */
[data-theme] .hero-meta span          { color: var(--page-soft); }
[data-theme] .hero-meta span::before  { background: var(--page-soft); }
[data-theme] .page-hero__content .label {
  background: rgba(255,255,255,.08);
  color: var(--page-soft);
  border-color: rgba(255,255,255,.14);
}

/* PIM Visual Card */
.pim-visual-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg); overflow: hidden; backdrop-filter: blur(10px);
}
.pim-visual-card__header {
  background: rgba(0,0,0,.2); padding: .75rem 1rem; display: flex; align-items: center; gap: .4rem;
}
.pim-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pim-dot--blue  { background: #3b82f6; }
.pim-dot--grey  { background: #6b7280; }
.pim-dot--light { background: #9ca3af; }
.pim-visual-card__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); }
.pim-stat { background: rgba(255,255,255,.06); padding: 1.5rem 1.25rem; text-align: center; }
.pim-stat__num { display: block; font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: .35rem; }
.pim-stat__label { font-size: .72rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; }

.branch-icons-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.branch-icon-box {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg);
  padding: 1.25rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; align-items: center;
  font-size: .8rem; color: rgba(255,255,255,.85); font-weight: 600; transition: background .2s;
}
.branch-icon-box:hover { background: rgba(255,255,255,.18); }
.branch-icon-box span:first-child { font-size: 2rem; }

/* ============================================================
   COMPARE SECTION
   ============================================================ */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.compare-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--blush); }
.compare-card--good { border-color: var(--navy); }
.compare-card__header { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; }
.compare-card--bad  .compare-card__header { background: #fef2f2; }
.compare-card--good .compare-card__header { background: var(--navy); }
.compare-icon { width: 32px; height: 32px; border-radius: 50%; background: #fca5a5; color: #dc2626; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.compare-icon--good { background: rgba(255,255,255,.2); color: #fff; }
.compare-card--bad  h3 { color: #dc2626; margin: 0; font-size: 1.1rem; }
.compare-card--good h3 { color: #fff; margin: 0; font-size: 1.1rem; }
.compare-list { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: .75rem; }
.compare-list__item { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; line-height: 1.5; }
.compare-list__item--bad::before  { content: '✗'; color: #dc2626; flex-shrink: 0; font-weight: 700; }
.compare-list__item--good::before { content: '✓'; color: var(--navy); flex-shrink: 0; font-weight: 700; }

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feature-rows { display: flex; flex-direction: column; gap: 5rem; }
.feature-row { display: grid; grid-template-columns: 260px 1fr; gap: 4rem; align-items: center; }
.feature-row--reverse { grid-template-columns: 1fr 260px; }
.feature-row--reverse .feature-row__visual { order: 2; }
.feature-row__visual {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-soft); border: 1px solid var(--blush);
  border-radius: var(--radius-lg); min-height: 220px; font-size: 5rem; position: relative; overflow: hidden;
}
.feature-row__visual::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,41,102,.04) 0%, transparent 60%); border-radius: inherit;
}
.feature-row__content h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--navy); }
.feature-row__content > p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.5rem; }
.feature-row__list { list-style: none; margin: 0; padding: 0; }
.feature-row__list li { padding: .7rem 0 .7rem 1.75rem; position: relative; border-bottom: 1px solid var(--blush); font-size: .95rem; }
.feature-row__list li:last-child { border-bottom: none; }
.feature-row__list li::before { content: '→'; position: absolute; left: 0; color: var(--navy); font-weight: 700; }

.io-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.io-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 2rem; }
.io-card h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.io-card ul  { display: flex; flex-direction: column; gap: .5rem; }
.io-card li  { font-size: .875rem; color: rgba(255,255,255,.7); padding-left: 1rem; position: relative; }
.io-card li::before { content: '·'; position: absolute; left: 0; color: var(--steel); }

.pim-dms-combo { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.pim-dms-combo__list { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.25rem; }
.pim-dms-combo__list li { font-size: .9rem; color: rgba(255,255,255,.75); padding-left: 1rem; position: relative; }
.combo-circles { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.combo-circle { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 800; font-family: var(--font-display); border: 3px solid rgba(255,255,255,.3); }
.combo-circle--pim { color: var(--steel); background: rgba(89,125,179,.15); }
.combo-circle--dms { color: #e8bc0c; background: rgba(232,188,12,.12); }
.combo-plus { font-size: 2rem; color: rgba(255,255,255,.4); font-weight: 300; }

/* ============================================================
   STRENGTHS / BRANCHEN
   ============================================================ */
.strengths-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.strength-card { background: var(--paper-soft); border: 1px solid var(--blush); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; transition: all .2s; }
.strength-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.strength-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.strength-card h3 { margin-bottom: .75rem; }

.branche-card { background: var(--paper-soft); border: 1px solid var(--blush); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; transition: box-shadow .2s; }
.branche-card:hover { box-shadow: var(--shadow-md); }
.branche-card__header { display: flex; align-items: center; gap: 1rem; padding: 1.75rem 2rem; background: var(--navy); }
.branche-card__icon { font-size: 2rem; }
.branche-card__header h3 { color: #fff; margin: 0; font-size: 1.3rem; }
.branche-card__body { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0; }
.branche-card__challenge, .branche-card__results, .branche-card__features { padding: 1.75rem 2rem; border-right: 1px solid var(--blush); }
.branche-card__features { border-right: none; }
.branche-card__body h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); margin-bottom: 1rem; }
.branche-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.branche-stat { background: var(--blush); border-radius: var(--radius); padding: .75rem; text-align: center; }
.branche-stat__num { display: block; font-size: 1.25rem; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: .25rem; }
.branche-stat__label { font-size: .7rem; color: var(--mute); line-height: 1.3; }
.branche-card__features ul { display: flex; flex-direction: column; gap: .5rem; }
.branche-card__features li { font-size: .875rem; color: var(--mute); padding-left: 1rem; position: relative; }
.branche-card__features li::before { content: '✓'; position: absolute; left: 0; color: var(--navy); font-size: .75rem; font-weight: 700; }

/* ============================================================
   CONTACT / FORM
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: flex-start; }
.contact-form-wrap h2 { margin-bottom: .5rem; }
.contact-form-wrap > p { margin-bottom: 2rem; }
.form-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-weight: 600; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--navy); }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--blush); border-radius: var(--radius);
  padding: .75rem 1rem; font-size: .9375rem; font-family: var(--font-sans);
  color: var(--ink); background: var(--paper-soft);
  transition: border-color .2s, box-shadow .2s; outline: none; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,41,102,.08);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group--check { margin-top: .25rem; }
.checkbox-label { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--mute); cursor: pointer; line-height: 1.5; }
.checkbox-label input { margin-top: .2rem; flex-shrink: 0; accent-color: var(--navy); }
.checkbox-label a { color: var(--navy); text-decoration: underline; }

.contact-info__card { background: var(--navy); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.5rem; }
.contact-info__card h3 { color: #fff; margin-bottom: 1.5rem; }
.contact-info__items { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__icon { font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.contact-info__item strong { display: block; color: rgba(255,255,255,.6); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.contact-info__item p { color: #fff; margin: 0; font-size: .9rem; line-height: 1.6; }
.contact-info__item a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-info__demo { background: var(--paper-soft); border: 1px solid var(--blush); border-radius: var(--radius-lg); padding: 1.75rem; }
.contact-info__demo h4 { margin-bottom: .75rem; color: var(--navy); }
.contact-info__demo p  { font-size: .9rem; margin-bottom: 1rem; }
.contact-info__demo ul { display: flex; flex-direction: column; gap: .5rem; }
.contact-info__demo li { font-size: .875rem; color: var(--navy); font-weight: 600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: var(--paper-soft); border: 1px solid var(--blush); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s; }
.faq-item.is-open { box-shadow: var(--shadow-md); border-color: var(--navy); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left;
  font-size: .9375rem; font-weight: 600; color: var(--navy); font-family: var(--font-sans); transition: color .2s;
}
.faq-question:hover { color: var(--steel); }
.faq-icon { font-size: 1.25rem; font-weight: 300; color: var(--navy); flex-shrink: 0; transition: transform .2s; line-height: 1; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 1.5rem 1.25rem; border-top: 1px solid var(--blush); }
.faq-answer p { font-size: .9rem; line-height: 1.75; padding-top: 1rem; margin: 0; }

/* ============================================================
   LEGAL PAGE HERO (Impressum / Datenschutz)
   ============================================================ */
.legal-hero {
  background: linear-gradient(160deg, var(--navy-dark) 0%, #0d2340 55%, #112d50 100%);
  padding: 52px 0 44px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.legal-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 60%, #000 20%, transparent 65%);
  mask-image: radial-gradient(ellipse at 20% 60%, #000 20%, transparent 65%);
}
.legal-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: .75rem;
  max-width: 760px;
}
.legal-hero__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--steel-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.legal-hero__eyebrow::before {
  content: ""; width: 20px; height: 1px;
  background: var(--steel-soft); opacity: .6; flex-shrink: 0;
}
.legal-hero__title {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
  color: #fff; margin: 0;
}
.legal-hero__sub {
  font-size: .95rem; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0;
}
.legal-hero__meta {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: .5rem;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3);
}
.legal-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.legal-hero__meta span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--steel-soft); opacity: .5; flex-shrink: 0;
}

/* Legal prose styles */
.legal-content {
  max-width: 760px; padding: 56px 0 80px;
}
.legal-content h2 {
  font-size: 1.2rem; font-weight: 700; color: var(--navy);
  margin: 2.5rem 0 .75rem; letter-spacing: -0.01em;
}
.legal-content h3 {
  font-size: 1rem; font-weight: 600; color: var(--navy);
  margin: 1.75rem 0 .5rem;
}
.legal-content p, .legal-content li {
  font-size: .925rem; color: var(--mute); line-height: 1.75;
}
.legal-content ul, .legal-content ol {
  padding-left: 1.25rem; margin: .5rem 0 1rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.legal-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--navy-soft); }
.legal-content a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

/* Abstände für Inhalte aus dem Editor.
   Der globale Reset ganz oben (Zeile ~126) nimmt jedem Element margin und
   padding. Für die gebauten Seiten stimmt das, dort setzen Flexbox und gap
   die Abstände. Blog, Impressum, Datenschutz und die Fallback-Seite bekommen
   ihren Inhalt aber aus dem Editor, und dort hält nichts die Absätze
   auseinander. Ohne diesen Block laufen mehrere Absätze zu einem Textklumpen
   zusammen. Die Überschriften und Listen darüber bringen ihre Abstände selbst
   mit, deshalb stehen sie hier nicht noch einmal. */
.legal-content p { margin-bottom: 1.05rem; }
.legal-content > *:last-child { margin-bottom: 0; }
.legal-content figure.wp-block-image,
.legal-content figure.wp-block-table { margin: 1.75rem 0; }
.legal-content hr {
  margin: 2.5rem 0; border: 0; height: 1px; background: var(--gray-light);
}

/* ============================================================
   ECO SVG LINES
   ============================================================ */
.eco-svg  { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.eco-line {
  stroke: var(--steel); stroke-width: 1.5; fill: none;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  transition: stroke-dashoffset .7s ease;
}
.eco-line--drawn { stroke-dashoffset: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .container { padding: 0 2.5rem; }
  .hero__canvas { padding: 56px 40px; }
  .cta__canvas  { padding: 56px 40px; }
  .about__story { padding: 56px 48px; }
}

@media (max-width: 900px) {
  /* Mobile nav */
  .main-nav > ul { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.is-open {
    display: flex; flex-direction: column; position: fixed;
    inset: 72px 0 0; background: var(--paper-soft);
    padding: 1.5rem; overflow-y: auto; z-index: 99;
    border-top: 1px solid var(--blush);
  }
  .main-nav.is-open > ul {
    display: flex !important; flex-direction: column; align-items: stretch; gap: .25rem;
    background: none; border: none; padding: 0; border-radius: 0;
  }
  .main-nav.is-open > ul > li > a { padding: .875rem 1rem; border-radius: var(--radius); }
  .nav-cta { margin-left: 0; margin-top: 1rem; justify-content: center; }
  /* Sub-page layouts */
  .page-hero { padding: 52px 0 44px; }
  .page-hero--compact { padding: 48px 0 40px; }
  .page-hero--themed  { padding: 52px 0 44px; }
  .page-hero__content h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
  .page-hero__inner   { grid-template-columns: 1fr; }
  .compare-grid       { grid-template-columns: 1fr; }
  .feature-row, .feature-row--reverse { grid-template-columns: 1fr; }
  .feature-row--reverse .feature-row__visual { order: 0; }
  .feature-row__visual { min-height: 140px; font-size: 3.5rem; }
  .io-grid            { grid-template-columns: 1fr; }
  .pim-dms-combo      { grid-template-columns: 1fr; }
  .strengths-grid     { grid-template-columns: 1fr; }
  .branche-card__body { grid-template-columns: 1fr; }
  .branche-card__challenge, .branche-card__results { border-right: none; border-bottom: 1px solid var(--blush); }
  .contact-grid       { grid-template-columns: 1fr; }
  .branch-icons-grid  { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 840px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; height: 360px; }
  .hero-card--pim { width: 240px; height: 160px; }
  .hero-card--ai  { width: 200px; height: 200px; top: 140px; }
  .hero-card--dms { width: 170px; height: 110px; }
  .about__story__grid { grid-template-columns: 1fr; }
  .about__portrait { order: -1; }
  .cta__canvas { grid-template-columns: 1fr; }
  .products__head { flex-direction: column; align-items: flex-start; }
  .products__head-right { max-width: none; }
}

@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }
  .container { padding: 0 1.5rem; }
  .hero__canvas { padding: 40px 24px; }
  .cta__canvas  { padding: 40px 24px; }
  .about__story { padding: 40px 28px; }
  .trust-bar__inner, .trust-bar__logos { flex-wrap: wrap; justify-content: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .product-cards { grid-template-columns: 1fr; }
  .product-card--rag-wide { flex-direction: column; padding: 28px; }
  .product-card--rag-wide .product-card__cta { margin-top: 16px; }
  .industries__grid { grid-template-columns: repeat(2,1fr); }
  .industry-card:nth-child(3n)  { border-right: 1px solid var(--blush); }
  .industry-card:nth-child(2n)  { border-right: none; }
  .industry-card:nth-child(n+5) { border-bottom: none; }
  .industry-card:nth-child(4)   { border-bottom: 1px solid var(--blush); }
  .about__stats { grid-template-columns: repeat(3,auto); gap: 20px; }
  .solutions-showcase__panels--2col { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .industries__grid { grid-template-columns: 1fr; }
  .industry-card { border-right: none; border-bottom: 1px solid var(--blush); }
  .industry-card:last-child { border-bottom: none; }
  .about__stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   RAG SECTION — KI-Brücke
   ============================================================ */
.rag-section {
  background: var(--paper);
  padding: 80px 0;
  position: relative; z-index: 1;
}

.rag-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.rag-section__text .eyebrow { color: var(--rag); }

.rag-section__text h2 {
  font-size: clamp(1.75rem, 3.2vw, 3.25rem);
  line-height: 1.05;
  color: var(--navy);
  margin: 16px 0 24px;
  letter-spacing: -0.025em;
}

.rag-section__text h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--rag);
}

.rag-section__lead {
  font-size: 16px;
  color: var(--mute);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}

.rag-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.rag-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rag-pale);
  border: 1px solid rgba(237,130,0,.25);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--navy-dark);
  font-weight: 500;
}

.rag-stat::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rag);
  flex-shrink: 0;
}

/* RAG Hub Diagram */
.rag-hub {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
}

.rag-hub__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rag-hub__node {
  font-family: var(--font-display);
  font-weight: 700;
  cursor: default;
}

.rag-hub__node-circle {
  transition: filter .2s ease;
}

.rag-hub__node:hover .rag-hub__node-circle {
  filter: brightness(1.1);
}

.rag-hub__line {
  fill: none;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
}

.rag-hub__line--pim  { stroke: var(--pim);      stroke-width: 2; animation: wm-hub-dash 2s linear infinite; }
.rag-hub__line--dms  { stroke: var(--dms);      stroke-width: 2; animation: wm-hub-dash 2s linear infinite reverse; }
.rag-hub__line--wf   { stroke: var(--workflow); stroke-width: 1.5; stroke-dasharray: 4 6; animation: wm-hub-dash 3s linear infinite; }

.rag-hub__dot {
  animation: wm-hub-pulse 2.4s ease-in-out infinite;
}

/* ============================================================
   KI-VORTEILE SECTION
   ============================================================ */
.ai-features {
  background: var(--paper);
  padding: 80px 0;
  position: relative; z-index: 1;
}

.ai-features__head {
  text-align: center;
  margin-bottom: 56px;
}

.ai-features__head h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  color: var(--navy);
  margin-top: 16px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.ai-features__head h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--steel);
}

.ai-features__head p {
  font-size: 17px;
  color: var(--mute);
  line-height: 1.65;
  max-width: 620px;
  margin: 20px auto 0;
}

.ai-features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ai-group {
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.ai-group--pim {
  background: var(--navy);
  color: #fff;
}

.ai-group--dms {
  background: var(--paper-warm);
  border: 1px solid var(--gray-light);
  color: var(--navy-dark);
}

.ai-group__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.ai-group__icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ai-group--pim .ai-group__icon-wrap { background: rgba(255,255,255,.15); color: #fff; }
.ai-group--dms .ai-group__icon-wrap { background: var(--dms); color: #fff; }

.ai-group__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
  display: block;
  margin-bottom: 4px;
}

.ai-group__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.ai-group--pim .ai-group__title { color: #fff; }
.ai-group--dms .ai-group__title { color: var(--navy-dark); }

.ai-feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.ai-feature-item__dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}

.ai-group--pim .ai-feature-item__dot {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
}

.ai-group--dms .ai-feature-item__dot {
  background: var(--dms-pale);
  color: var(--dms);
}

.ai-feature-item__dot svg { flex-shrink: 0; }

.ai-group--pim .ai-feature-item { color: rgba(255,255,255,.8); }
.ai-group--dms .ai-feature-item { color: var(--mute); }

.ai-group__privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
}

.ai-group__privacy-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.ai-group--dms .ai-group__privacy-pill {
  background: var(--pim-pale);
  border-color: rgba(0,48,91,.1);
  color: var(--navy);
}

.ai-group--dms .ai-group__privacy-pill::before { background: var(--success); }

/* ============================================================
   PAGE HERO — themed variants (sub-pages)
   ============================================================ */
[data-theme="pim"]      { --page-accent: var(--pim);      --page-pale: var(--pim-pale);      --page-soft: var(--pim-soft); }
[data-theme="dms"]      { --page-accent: var(--dms);      --page-pale: var(--dms-pale);      --page-soft: var(--dms-soft); }
[data-theme="workflow"] { --page-accent: var(--workflow);  --page-pale: var(--workflow-pale); --page-soft: var(--workflow-soft); }
[data-theme="rag"]      { --page-accent: var(--rag);       --page-pale: var(--rag-pale);      --page-soft: var(--rag-soft); }
[data-theme="ki"]    { --page-accent: var(--rag);       --page-pale: var(--rag-pale);      --page-soft: var(--rag-soft); }
[data-theme="tasks"]    { --page-accent: var(--tasks);     --page-pale: var(--tasks-pale);    --page-soft: var(--tasks-soft); }
/* ERP und CMS sind noch nicht verfügbar und bekommen bewusst keine eigene
   Produktfarbe — sie laufen neutral in Stahlblau, bis sie echt sind. */
[data-theme="erp"]      { --page-accent: var(--steel);     --page-pale: var(--steel-pale);    --page-soft: var(--steel-soft); }
[data-theme="cms"]      { --page-accent: var(--steel);     --page-pale: var(--steel-pale);    --page-soft: var(--steel-soft); }

/* ── Hero-Variante „in Entwicklung" ───────────────────────────────── */
.label--soon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.label--soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel-soft);
  animation: soon-blink 2.6s ease-in-out infinite;
}
@keyframes soon-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .label--soon::before { animation: none; opacity: .7; }
}

/* Gemeinsame SVG-Stile der beiden Teaser-Heroes (ERP, CMS) */
.soon-illu .sn-box        { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.16); stroke-width: 1; }
.soon-illu .sn-box--ghost { fill: rgba(255,255,255,.02); stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 5 5; }
.soon-illu .sn-lbl        { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; fill: rgba(255,255,255,.55); text-transform: uppercase; }
.soon-illu .sn-lbl--dim   { fill: rgba(255,255,255,.32); }
.soon-illu .sn-edge       { stroke: rgba(255,255,255,.22); stroke-width: 1.4; fill: none; }
.soon-illu .sn-edge--ghost{ stroke: rgba(255,255,255,.18); stroke-width: 1.4; fill: none; stroke-dasharray: 5 5; }
.soon-illu .sn-core       { fill: rgba(237,130,0,.16); stroke: #ed8200; stroke-width: 1.4; }
.soon-illu .sn-pulse      { animation: sn-pulse 3.4s ease-in-out infinite; }
@keyframes sn-pulse { 0%,100% { opacity: .4; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .soon-illu .sn-pulse { animation: none; opacity: .6; }
}

.page-hero--themed {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-soft) 100%);
  padding: 64px 0 56px;
  position: relative;
}

/* Main hero: eigene Werte — unabhängig von sub-page hero */
.page-hero--themed.hero--main {
  padding: 3rem 0 2rem;
  min-height: auto;
}
.hero--main .page-hero__inner {
  grid-template-columns: 1fr 1.6fr;
  gap: 2.5rem;
  align-items: center;
}
.hero--main .page-hero__content h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  margin-bottom: .75rem;
}
.hero--main .page-hero__sub {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.hero--main .hero-illu--const {
  aspect-ratio: auto;
  height: 440px;
}

.page-hero--themed .label {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}

/* ============================================================
   RESPONSIVE — neue Sektionen
   ============================================================ */
@media (max-width: 840px) {
  .rag-section__inner { grid-template-columns: 1fr; }
  .rag-hub { max-width: 340px; }
  .ai-features__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rag-stats { flex-direction: column; }
  .ai-group { padding: 28px; }
  .products__head-right { display: none; }
}

/* ============================================================
   ARCHITECTURE DIAGRAM (Ökosystem-Illustration)
   ============================================================ */
.arch-stage {
  background:
    radial-gradient(1100px 500px at 50% -5%, #ffffff 0%, transparent 60%),
    var(--paper-soft);
  border-radius: 20px;
  padding: 40px 48px 48px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

/* Scroll-driven choreography wrapper */
.arch-scroller {
  position: relative;
  height: 280vh;
}
.arch-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.arch-sticky .container { width: 100%; }

/* Fade-in state driven by JS --ao variable */
.anim-reveal {
  opacity: var(--ao, 0);
  transition: opacity .35s linear;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .arch-scroller { height: auto; }
  .arch-sticky { position: static; height: auto; padding: 0; }
  .anim-reveal { opacity: 1 !important; }
}
@media (max-width: 840px) {
  .arch-scroller { height: auto; }
  .arch-sticky { position: static; height: auto; padding: 0; }
  .anim-reveal { opacity: 1 !important; }
}

/* Clickable core circles */
a.arch-core {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.arch-core:hover {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 6px 28px -10px currentColor;
}

/* Space after the sticky scroller before eco-features */
.arch-scroller + .container {
  margin-top: 3rem;
}
.arch-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,48,91,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,48,91,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
  pointer-events: none;
}

.arch-legend {
  display: flex; gap: 18px; align-items: center;
  font-size: 12px; color: var(--mute); flex-wrap: wrap;
  margin-bottom: 28px; position: relative; z-index: 2;
}
.arch-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.arch-legend__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* Diagram canvas — aspect ratio locks scaling */
.arch-diagram {
  position: relative;
  aspect-ratio: 1240 / 700;
  width: 100%;
  z-index: 2;
}
.arch-diagram__layer { position: absolute; inset: 0; }
.arch-diagram__svg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}

/* Generic node wrapper — percent-positioned */
.arch-node {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* ERP banner */
.arch-erp {
  left: 50%; top: 9%;
  width: 46%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 16px 24px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 14px 30px -18px rgba(0,48,91,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.arch-erp__pill {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  padding: 5px 10px; border-radius: 999px; color: #b9c5d6; flex-shrink: 0;
}
.arch-erp__label { display: flex; flex-direction: column; }
.arch-erp__label b { font-size: 17px; letter-spacing: -.01em; font-weight: 600; }
.arch-erp__label span { font-size: 12px; color: #b9c5d6; margin-top: 2px; }

/* Side cards (channels / external) */
.arch-side {
  width: 170px;
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 0 rgba(0,48,91,.04), 0 10px 22px -20px rgba(0,48,91,.2);
}
.arch-side__cap {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pim); font-weight: 600;
}
.arch-side--ext .arch-side__cap { color: var(--dms); }
.arch-side h3 {
  margin: 5px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink);
  line-height: 1.25; letter-spacing: -.005em;
}
.arch-side hr { border: 0; border-top: 1px solid var(--gray-light); margin: 0 0 10px; }
.arch-side ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.arch-side li {
  font-size: 12px; color: var(--ink);
  border: 1px solid var(--gray-light); border-radius: 8px; padding: 6px 10px;
  background: var(--paper-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.arch-side__arrow {
  color: var(--mute); font-family: var(--font-mono); font-size: 11px;
}
.arch-side__meta { font-size: 11px; color: var(--mute); line-height: 1.5; }
.arch-channels { left: 8%; top: 50%; }
.arch-external { left: 92%; top: 50%; }

/* Core circles — 2×2 grid */
.arch-core {
  width: 10.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border: 2.5px solid;
  position: absolute;
  transition: transform .2s var(--ease-out-expo), box-shadow .2s ease;
}
.arch-core:hover { transform: translate(-50%,-50%) scale(1.04); }
.arch-core::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .16;
  transition: opacity .2s ease;
}
.arch-core:hover::after { opacity: .28; }
.arch-core__name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.arch-core__role {
  margin-top: 5px; font-size: 11px; color: var(--ink); font-weight: 600;
}
.arch-core__desc {
  margin-top: 2px; font-size: 10px; color: var(--mute); line-height: 1.3; max-width: 100px;
}

/* PIM and DMS are larger */
.arch-core--pim,
.arch-core--dms { width: 14.5%; }
.arch-core--pim .arch-core__name,
.arch-core--dms .arch-core__name { font-size: 30px; }
.arch-core--pim .arch-core__role,
.arch-core--dms .arch-core__role { font-size: 13px; margin-top: 7px; }
.arch-core--pim .arch-core__desc,
.arch-core--dms .arch-core__desc { font-size: 11.5px; margin-top: 4px; max-width: 140px; }

/* Color variants */
.arch-core--pim {
  left: 34%; top: 38%;
  color: var(--pim); border-color: var(--pim);
  background: linear-gradient(180deg, #fff 60%, var(--pim-pale));
}
.arch-core--pim .arch-core__name { color: var(--pim); }
.arch-core--dms {
  left: 66%; top: 38%;
  color: var(--dms); border-color: var(--dms);
  background: linear-gradient(180deg, #fff 60%, var(--dms-pale));
}
.arch-core--dms .arch-core__name { color: var(--dms); }
.arch-core--wf {
  left: 34%; top: 78%;
  color: var(--workflow); border-color: var(--workflow);
  background: linear-gradient(180deg, #fff 60%, var(--workflow-pale));
}
.arch-core--wf .arch-core__name { color: var(--workflow); }
.arch-core--rag {
  left: 66%; top: 78%;
  color: var(--rag); border-color: var(--rag);
  background: linear-gradient(180deg, #fff 60%, var(--rag-pale));
}
.arch-core--rag .arch-core__name { color: var(--rag); }

/* Edge labels */
.arch-edge {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--paper-soft);
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .06em;
  color: var(--mute);
  border: 1px solid var(--gray-light);
  white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  pointer-events: none;
}
.arch-edge__ico { font-size: 11px; font-weight: 700; }

/* Edge label positions (matching SVG path midpoints) */
.arch-el-erp-pim { left: 34%; top: 21%; }
.arch-el-erp-dms { left: 66%; top: 21%; }
.arch-el-pim-dms { left: 50%; top: 38%; }
.arch-el-wf-rag  { left: 50%; top: 78%; }
.arch-el-ch-pim  { left: 22%; top: 47%; }
.arch-el-ex-dms  { left: 78%; top: 47%; }
.arch-el-pim-wf  { left: 34%; top: 60%; }
.arch-el-dms-rag { left: 66%; top: 60%; }
.arch-el-pim-rag { left: 50%; top: 59%; }
.arch-el-wf-dms  { left: 58%; top: 50%; }

/* Responsive */
@media (max-width: 900px) {
  .arch-stage { padding: 24px 20px; }
  .arch-erp { width: 76%; }
  .arch-channels { left: 11%; }
  .arch-external { left: 89%; }
}
@media (max-width: 640px) {
  .arch-stage { display: none; }
}

/* ============================================================
   HEADER ILLUSTRATIONS — dark-mode variant for navy hero
   ============================================================ */
.hero-illu {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  width: 100%; aspect-ratio: 560/320;
}
.hero-illu::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none; z-index: 1;
}
.hero-illu svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
[data-theme="pim"]      .hero-illu { background: radial-gradient(circle at 70% 50%, rgba(120,176,182,.18) 0%, transparent 65%); }
.page-hero--dms         .hero-illu { background: radial-gradient(circle at 70% 50%, rgba(255,221,84,.18)  0%, transparent 65%); }
[data-theme="workflow"] .hero-illu { background: radial-gradient(circle at 70% 50%, rgba(200,179,161,.18) 0%, transparent 65%); }
[data-theme="rag"]      .hero-illu { background: radial-gradient(circle at 70% 50%, rgba(243,165,69,.22)  0%, transparent 65%); }

.hero-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase;
  margin-top: 1.5rem; margin-bottom: .25rem;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* PIM illustration — dark (Petrol-getönt) */
.pim-rec      { fill:none; stroke:#7cb0b6; stroke-width:1.5; }
.pim-rec-soft { fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.18); stroke-width:1.1; }
.pim-chip     { fill:rgba(120,176,182,.18); stroke:#7cb0b6; stroke-width:1; }
.pim-image-bg { fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.18); stroke-width:1; }
.pim-text     { font-family:var(--font-mono); font-size:9px; fill:#a6d4d8; }
.pim-mute     { font-family:var(--font-mono); font-size:8px; fill:#78a6ab; }
.pim-attr { animation:pim-attr 4.8s ease both infinite; transform-origin:left center; }
@keyframes pim-attr {
  0%,5%    { opacity:0; transform:translateX(-8px); }
  18%,100% { opacity:1; transform:translateX(0); }
}
.pim-attr:nth-child(1){ animation-delay:.1s }
.pim-attr:nth-child(2){ animation-delay:.5s }
.pim-attr:nth-child(3){ animation-delay:.9s }
.pim-attr:nth-child(4){ animation-delay:1.3s }
.pim-attr:nth-child(5){ animation-delay:1.7s }
.pim-arrow       { stroke:#7cb0b6; stroke-width:1.3; fill:none; stroke-dasharray:3 3; opacity:.55; }
.pim-pulse       { fill:#a6d4d8; }
.pim-pulse.a { animation:pim-pulseA 3.6s linear infinite; }
.pim-pulse.b { animation:pim-pulseB 3.6s linear infinite; animation-delay:1.2s; }
.pim-pulse.c { animation:pim-pulseC 3.6s linear infinite; animation-delay:2.4s; }
@keyframes pim-pulseA { 0%{transform:translate(0,0);opacity:0} 8%{opacity:1} 100%{transform:translate(180px,-86px);opacity:0} }
@keyframes pim-pulseB { 0%{transform:translate(0,0);opacity:0} 8%{opacity:1} 100%{transform:translate(180px,0);opacity:0} }
@keyframes pim-pulseC { 0%{transform:translate(0,0);opacity:0} 8%{opacity:1} 100%{transform:translate(180px,86px);opacity:0} }
.pim-channel     { fill:rgba(255,255,255,.04); stroke:#7cb0b6; stroke-width:1.2; }
.pim-channel-bar { fill:#7cb0b6; opacity:.6; }
.pim-ch-glow { animation:pim-glow 3.6s ease-in-out infinite; transform-origin:center; }
@keyframes pim-glow { 0%,100%{filter:drop-shadow(0 0 0 rgba(120,190,196,0))} 50%{filter:drop-shadow(0 0 10px rgba(120,190,196,.55))} }
.pim-ch-1 { animation-delay:.6s } .pim-ch-2 { animation-delay:1.8s } .pim-ch-3 { animation-delay:3s }

/* DMS illustration — dark */
.dms-doc    { fill:rgba(255,255,255,.05); stroke:#ffdd54; stroke-width:1.4; }
.dms-line   { stroke:rgba(255,221,84,.45); stroke-width:1.1; }
.dms-corner { fill:rgba(255,221,84,.22); }
.dms-fall   { animation:dms-fall 4.5s cubic-bezier(.6,.2,.4,1) infinite; }
@keyframes dms-fall {
  0%  { transform:translateY(-100px) rotate(-4deg); opacity:0; }
  12% { opacity:1; }
  45% { transform:translateY(46px) rotate(0deg); opacity:1; }
  55% { transform:translateY(46px) rotate(0deg); opacity:1; }
  70% { transform:translateY(120px) rotate(2deg); opacity:0; }
  100%{ transform:translateY(120px) rotate(2deg); opacity:0; }
}
.dms-fall.b { animation-delay:1.5s } .dms-fall.c { animation-delay:3s }
.dms-scan { fill:#ffdd54; opacity:0; animation:dms-scan 4.5s linear infinite; }
@keyframes dms-scan {
  0%,44%   { opacity:0; transform:translateY(0); }
  46%      { opacity:.55; transform:translateY(0); }
  52%      { opacity:.55; transform:translateY(72px); }
  54%,100% { opacity:0; transform:translateY(72px); }
}
.dms-scan.b { animation-delay:1.5s } .dms-scan.c { animation-delay:3s }
.dms-check { opacity:0; animation:dms-check 4.5s linear infinite; transform-origin:center; }
@keyframes dms-check {
  0%,55%   { opacity:0; transform:scale(.6); }
  60%      { opacity:1; transform:scale(1.15); }
  68%,100% { opacity:1; transform:scale(1); }
}
.dms-check.b { animation-delay:1.5s } .dms-check.c { animation-delay:3s }
.dms-stack-rec     { fill:rgba(255,255,255,.05); stroke:#ffdd54; stroke-width:1.3; }
.dms-stack-band    { fill:#ffdd54; opacity:.85; }
.dms-archive-label { font-family:var(--font-mono); font-size:9px; fill:#ffdd54; letter-spacing:.1em; }

/* Workflow illustration — dark */
.wf-node      { fill:rgba(255,255,255,.04); stroke:#c8b3a1; stroke-width:1.6; }
.wf-node-fill { fill:rgba(200,179,161,.18);  stroke:#c8b3a1; stroke-width:1.6; }
.wf-edge      { stroke:#c8b3a1; stroke-width:1.6; fill:none; opacity:.55; }
.wf-label     { font-family:var(--font-mono); font-size:9px; fill:#e2d2c0; }
.wf-active    { fill:#e2d2c0; animation:wf-active 5s linear infinite; transform-origin:center; }
@keyframes wf-active {
  0%,8%    { opacity:0; transform:scale(.7); }
  10%,18%  { opacity:1; transform:scale(1); }
  25%,100% { opacity:0; transform:scale(.7); }
}
.wf-active.n1{animation-delay:0s}   .wf-active.n2{animation-delay:.9s}
.wf-active.n3{animation-delay:1.8s} .wf-active.n4{animation-delay:2.7s} .wf-active.n5{animation-delay:3.6s}
.wf-token {
  fill:#e2d2c0;
  offset-path:path('M 60 130 L 130 130 L 200 130 L 270 130 L 330 130 L 400 130');
  offset-rotate:0deg; animation:wf-token 5s linear infinite;
}
@keyframes wf-token {
  0%{offset-distance:0%;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{offset-distance:100%;opacity:0}
}
.wf-trail { stroke:#c8b3a1; stroke-width:2.5; fill:none; stroke-dasharray:360; stroke-dashoffset:360; animation:wf-trail 5s linear infinite; opacity:.6; }
@keyframes wf-trail {
  0%{stroke-dashoffset:360} 90%{stroke-dashoffset:0} 100%{stroke-dashoffset:0;opacity:0}
}

/* RAG illustration — dark */
.rag-bubble      { fill:rgba(255,255,255,.04); stroke:#f3a545; stroke-width:1.4; }
.rag-bubble-fill { fill:rgba(243,165,69,.16);  stroke:#f3a545; stroke-width:1.4; }
.rag-text        { font-family:var(--font-mono); fill:#ffc680; font-size:11px; font-weight:600; }
.rag-spine-bg    { fill:rgba(243,165,69,.20); }
.rag-shelf       { fill:#f3a545; opacity:.55; }
.rag-query-pulse { transform-origin:center; animation:rag-query 5s ease-in-out infinite; }
@keyframes rag-query { 0%,90%,100%{transform:scale(1)} 5%,15%{transform:scale(1.06)} }
.rag-spark { fill:#ffc680; animation:rag-spark 5s linear infinite; opacity:0; }
@keyframes rag-spark {
  0%{opacity:0;transform:translate(0,0)} 10%{opacity:1} 35%{opacity:1;transform:translate(110px,0)} 40%,100%{opacity:0;transform:translate(110px,0)}
}
.rag-spark.a{animation-delay:.1s} .rag-spark.b{animation-delay:.3s} .rag-spark.c{animation-delay:.5s}
.rag-hit { animation:rag-hit 5s linear infinite; }
@keyframes rag-hit { 0%,30%{fill:rgba(243,165,69,.20)} 35%,55%{fill:#f3a545} 60%,100%{fill:rgba(243,165,69,.20)} }
.rag-chunk { fill:#ffc680; opacity:0; animation:rag-chunk 5s linear infinite; }
@keyframes rag-chunk {
  0%,40%{opacity:0;transform:translate(0,0)} 45%{opacity:1} 70%{opacity:1;transform:translate(110px,0)} 75%,100%{opacity:0;transform:translate(110px,0)}
}
.rag-chunk.c1{animation-delay:0s} .rag-chunk.c2{animation-delay:.15s} .rag-chunk.c3{animation-delay:.3s}
.rag-answer-line { fill:#f3a545; opacity:0; transform-origin:left center; transform:scaleX(0); animation:rag-answer 5s linear infinite; }
@keyframes rag-answer {
  0%,68%{opacity:0;transform:scaleX(0)} 72%{opacity:.95;transform:scaleX(1)} 90%{opacity:.95;transform:scaleX(1)} 95%,100%{opacity:0;transform:scaleX(1)}
}
.rag-answer-line.l1{animation-delay:0s} .rag-answer-line.l2{animation-delay:.15s} .rag-answer-line.l3{animation-delay:.3s}

@media (max-width: 768px) {
  .hero-illu { aspect-ratio: 560/240; }
}

/* ============================================================
   CONSTELLATION HERO — main page (hero-illu--const / cs-*)
   ============================================================ */

.hero-illu--const {
  aspect-ratio: 700/480;
  background: radial-gradient(circle at 55% 50%, rgba(154,171,199,.10) 0%, transparent 65%);
}

/* Orbit rings */
.hero-illu--const .cs-orbit {
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.hero-illu--const .cs-r1 { animation: cs-spin  60s linear infinite;         transform-origin: 350px 240px; }
.hero-illu--const .cs-r2 { animation: cs-spin  90s linear infinite reverse; transform-origin: 350px 240px; }
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* Cross-link arcs */
.hero-illu--const .cs-xlink {
  stroke: rgba(255,255,255,.20);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 3 4;
}

/* Core-to-module link lines */
.hero-illu--const .cs-link {
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  opacity: 0.6;
  animation: cs-link-draw 5s ease-in-out infinite;
}
@keyframes cs-link-draw {
  0%   { stroke-dashoffset:  240; opacity: 0    }
  20%  { stroke-dashoffset:    0; opacity: 0.65 }
  80%  { stroke-dashoffset:    0; opacity: 0.65 }
  100% { stroke-dashoffset: -240; opacity: 0    }
}
.hero-illu--const .cs-k1 { stroke: #9aabc7; animation-delay: 0s; }
.hero-illu--const .cs-k2 { stroke: #ffdd54; animation-delay: 1s; }
.hero-illu--const .cs-k3 { stroke: #f3a545; animation-delay: 2s; }
.hero-illu--const .cs-k4 { stroke: #7ea85f; animation-delay: 3s; }

/* Node breathing */
.hero-illu--const .cs-node-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: cs-breathe 6s ease-in-out infinite;
}
.hero-illu--const .cs-n1 .cs-node-inner { animation-delay: 0s;   }
.hero-illu--const .cs-n2 .cs-node-inner { animation-delay: 1.5s; }
.hero-illu--const .cs-n3 .cs-node-inner { animation-delay: 3s;   }
.hero-illu--const .cs-n4 .cs-node-inner { animation-delay: 4.5s; }
@keyframes cs-breathe {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-4px); }
}

/* Node tiles */
.hero-illu--const .cs-node-tile {
  fill: rgba(255,255,255,.05);
  stroke-width: 1.4;
}
.hero-illu--const .cs-node-tile.cs-pim { stroke: #9aabc7; }
.hero-illu--const .cs-node-tile.cs-dms { stroke: #ffdd54; }
.hero-illu--const .cs-node-tile.cs-wf  { stroke: #c8b3a1; }
.hero-illu--const .cs-node-tile.cs-rag { stroke: #f3a545; }
.hero-illu--const .cs-node-tile.cs-tasks { stroke: #7ea85f; }

/* Node pulse rings */
.hero-illu--const .cs-node-pulse {
  fill: none;
  stroke-width: 1;
  animation: cs-node-pulse 3s ease-out infinite;
}
@keyframes cs-node-pulse {
  0%   { r: 26; opacity: .7; }
  100% { r: 46; opacity: 0;  }
}
.hero-illu--const .cs-node-pulse.cs-pim { stroke: #9aabc7; }
.hero-illu--const .cs-node-pulse.cs-dms { stroke: #ffdd54; animation-delay:  .75s; }
.hero-illu--const .cs-node-pulse.cs-wf  { stroke: #c8b3a1; animation-delay: 1.5s;  }
.hero-illu--const .cs-node-pulse.cs-rag { stroke: #f3a545; animation-delay: 2.25s; }
.hero-illu--const .cs-node-pulse.cs-tasks { stroke: #7ea85f; animation-delay: 3s; }

/* Node labels */
.hero-illu--const .cs-node-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-anchor: middle;
}
.hero-illu--const .cs-node-label.cs-pim { fill: #b8c8e2; }
.hero-illu--const .cs-node-label.cs-dms { fill: #ffe88a; }
.hero-illu--const .cs-node-label.cs-wf  { fill: #e2d2c0; }
.hero-illu--const .cs-node-label.cs-rag { fill: #ffc680; }
.hero-illu--const .cs-node-label.cs-tasks { fill: #b0dd8f; }

/* Travelling particles */
.hero-illu--const .cs-particle { opacity: 0; }
.hero-illu--const .cs-p1 {
  fill: #b8c8e2;
  offset-path: path('M 350 240 L 350 80');
  animation: cs-travel 5s linear infinite;
  animation-delay: .4s;
}
.hero-illu--const .cs-p2 {
  fill: #ffe88a;
  offset-path: path('M 350 240 L 510 240');
  animation: cs-travel 5s linear infinite;
  animation-delay: 1.4s;
}
.hero-illu--const .cs-p3 {
  fill: #ffc680;
  offset-path: path('M 350 240 L 350 400');
  animation: cs-travel 5s linear infinite;
  animation-delay: 2.4s;
}
.hero-illu--const .cs-p4 {
  fill: #b0dd8f;
  offset-path: path('M 350 240 L 190 240');
  animation: cs-travel 5s linear infinite;
  animation-delay: 3.4s;
}
@keyframes cs-travel {
  0%           { offset-distance:   0%; opacity: 0; }
  10%          { opacity: 1; }
  60%          { opacity: 1; offset-distance: 100%; }
  65%, 100%    { opacity: 0; }
}

/* Core circle */
.hero-illu--const .cs-core-bg    { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.30); stroke-width: 1.4; }
.hero-illu--const .cs-core-inner { fill: var(--navy-dark, #001f3d); }
.hero-illu--const .cs-core-mark  { font-family: var(--font-heading); font-weight: 700; font-size: 18px; fill: #f0f4fa; letter-spacing: -.01em; text-anchor: middle; dominant-baseline: middle; }
.hero-illu--const .cs-core-sub   { font-family: var(--font-mono); font-size: 8.5px; fill: #8a9ab8; letter-spacing: .18em; text-anchor: middle; text-transform: uppercase; }

@media (max-width: 768px) {
  .hero-illu--const { aspect-ratio: 700/380; }
}

/* ============================================================
   MOBILE OPTIMIZATION — konsolidiert
   Targeted breakpoints: 375px (iPhone), 414px (Plus), 480px, 640px, 768px
   Ziele: Touch-Targets ≥44px, iOS-Safe Inputs (≥16px),
   Stack-Layouts statt absolute Cards, ruhigere Spacings
   ============================================================ */

/* ---------- 768px: Tablet portrait & große Mobile ---------- */
@media (max-width: 768px) {
  /* Globale Spacings & Container */
  .section            { padding: 3rem 0; }
  .container          { padding: 0 1.25rem; }
  .section__header    { margin: 0 auto 2.5rem; }
  .section__header p  { font-size: 1rem; }

  /* Typografie etwas zähmen */
  h1 { font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.08; }
  h2 { font-size: clamp(1.65rem, 6vw, 2.25rem); line-height: 1.1; }
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }

  /* Buttons: Touch-Target ≥44px, voll auf XS */
  .btn {
    padding: .85rem 1.4rem;
    min-height: 44px;
    font-size: .9rem;
  }
  .page-hero__actions .btn,
  .hero__actions .btn,
  .cta__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Header */
  .site-logo img { height: 34px; }
  .header-inner  { height: 64px; }
  .nav-toggle    {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
  }
  .main-nav.is-open { inset: 64px 0 0; padding: 1.25rem 1rem 2rem; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero (Homepage) */
  .hero              { padding: 24px 0 56px; }
  .hero__canvas      { padding: 32px 20px; border-radius: 22px; }
  .hero__orbit       { display: none; }
  .hero__grid        { gap: 32px; }
  .hero h1           { font-size: clamp(1.7rem, 6.5vw, 2.4rem); margin-bottom: 16px; }
  .hero__subtitle    { font-size: 14.5px; margin-bottom: 22px; }
  .hero__trust-row   { gap: 14px; margin-top: 32px; padding-top: 20px; }
  .hero__trust-text strong { font-size: 12.5px; }
  .hero__trust-text span   { font-size: 11.5px; }

  /* Hero visual: Stack-Layout statt absolute Floating-Cards */
  .hero__visual { height: auto; min-height: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
  .hero-card    { position: static !important; width: 100% !important; height: auto !important; min-height: 150px; padding: 16px; animation: none !important; }
  .hero-card--ai { grid-column: 1 / -1; min-height: 180px; }
  .hero-card__title { font-size: 18px; }
  .hero-card__num   { font-size: 28px; }
  .hero-card__img   { height: 80px; }
  .hero-product-strip { position: static; margin-top: 12px; flex-wrap: wrap; gap: 6px; }

  /* Trust-Bar */
  .trust-bar         { padding: 1rem 0; }
  .trust-bar__inner  { flex-direction: column; gap: 1rem; }
  .trust-bar__logos  { gap: .5rem; }
  .trust-badge       { font-size: .75rem; padding: .35rem .75rem; }

  /* Products */
  .products          { padding: 56px 0 24px; }
  .products__head    { margin-bottom: 24px; gap: 12px; padding: 0; }
  .product-cards     { padding: 0; gap: 12px; }
  .product-card      { padding: 28px 24px; min-height: 0; border-radius: 22px; }
  .product-card--pim { min-height: 0; }
  .product-card__icon-wrap { width: 44px; height: 44px; margin-bottom: 20px; }
  .product-card h3   { font-size: 1.4rem; margin-bottom: 10px; }
  .product-card p    { font-size: 14px; }
  .product-card--rag-wide { padding: 24px; gap: 18px; }

  /* Solutions Showcase */
  .solutions-section { padding: 24px 0 56px; }
  .solution-panel    { padding: 1.5rem 1.25rem; }
  .solution-panel__header h3 { font-size: 1.2rem; }
  .solution-panel__icon      { font-size: 1.7rem; }

  /* Benefits */
  .benefits__grid    { grid-template-columns: 1fr; gap: .875rem; }
  .benefit-card      { padding: 1.5rem 1.25rem; }

  /* Industries */
  .industries__grid  { grid-template-columns: 1fr; border-radius: 18px; }
  .industry-card     { padding: 22px; min-height: 0; border-right: none; }
  .industry-card:not(:last-child) { border-bottom: 1px solid var(--blush); }
  .industry-card h3  { font-size: 1.15rem; }
  .industry-card p   { font-size: 13.5px; }

  /* RAG Section */
  .rag-section       { padding: 56px 0; }
  .rag-section__inner { gap: 32px; }
  .rag-section__text h2 { margin: 12px 0 18px; }
  .rag-section__lead { font-size: 15px; margin-bottom: 24px; }
  .rag-stats         { gap: 10px; }
  .rag-stat          { font-size: 10.5px; padding: 6px 12px; }
  .rag-hub           { max-width: 320px; }

  /* AI Features */
  .ai-features       { padding: 56px 0; }
  .ai-features__head { margin-bottom: 36px; }
  .ai-features__grid { grid-template-columns: 1fr; gap: 14px; }
  .ai-group          { padding: 28px 22px; border-radius: 20px; }
  .ai-group__header  { gap: 12px; margin-bottom: 22px; }
  .ai-group__title   { font-size: 18px; }
  .ai-features__head h2 { font-size: clamp(1.65rem, 6vw, 2.25rem); }
  .ai-features__head p  { font-size: 15px; }

  /* About Story */
  .about             { padding: 56px 0; }
  .about__story      { padding: 36px 24px; border-radius: 22px; }
  .about__story__grid { gap: 36px; }
  .about__story h2   { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-top: 12px; }
  .about__story p    { font-size: 15px; margin-top: 18px; }
  .about__stats      { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
  .about__stat-num   { font-size: 32px; }
  .about__stat-label { font-size: 12.5px; }
  .about__quote-card { position: static; max-width: none; margin-top: 16px; }
  .about__portrait-img { aspect-ratio: 4/3; }

  /* CTA Section */
  .cta               { padding: 0 0 56px; }
  .cta__canvas       { padding: 36px 24px; border-radius: 22px; gap: 24px; }
  .cta__canvas h2    { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .cta__body p       { font-size: 14.5px; margin-bottom: 18px; }
  .cta--dark         { padding: 56px 0; }

  /* Footer */
  .site-footer       { padding: 48px 0 24px; }
  .footer__grid      { grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
  .footer__brand     { grid-column: 1 / -1; }
  .footer__logo img  { height: 32px; }

  /* Form / Contact */
  .form-row          { grid-template-columns: 1fr; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;            /* iOS Safari: kein Auto-Zoom */
    padding: .85rem 1rem;
    min-height: 48px;
  }
  .form-group textarea { min-height: 140px; }
  .contact-grid      { gap: 32px; }
  .contact-info__card { padding: 1.5rem; }
  .contact-info__demo { padding: 1.4rem; }

  /* Page Hero (Sub-Pages) */
  .page-hero,
  .page-hero--themed { padding: 40px 0 32px; }
  .page-hero--compact { padding: 32px 0 28px; }
  .page-hero__inner  { grid-template-columns: 1fr; gap: 32px; }
  .page-hero__content h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); margin-bottom: 1rem; }
  .page-hero__sub    { font-size: .98rem; margin-bottom: 1.75rem; }
  .page-hero__actions { gap: .75rem; }
  .hero-meta         { gap: 12px; font-size: 10px; }
  .hero--main .page-hero__inner { grid-template-columns: 1fr; }
  .hero--main .hero-illu--const { height: auto; aspect-ratio: 700/440; }

  /* Compare-Grid */
  .compare-grid      { grid-template-columns: 1fr; gap: 1rem; }
  .compare-card__header { padding: 1.25rem 1.5rem; }
  .compare-list      { padding: 1.25rem 1.5rem; }

  /* Feature Rows */
  .feature-rows      { gap: 3rem; }
  .feature-row,
  .feature-row--reverse { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-row--reverse .feature-row__visual { order: 0; }
  .feature-row__visual { min-height: 160px; font-size: 3.5rem; }
  .feature-row__content h3 { font-size: 1.3rem; }
  .feature-row__content > p { font-size: 1rem; }

  /* Strengths Grid */
  .strengths-grid    { grid-template-columns: 1fr; gap: 1rem; }
  .strength-card     { padding: 2rem 1.5rem; }

  /* Branche-Card */
  .branche-card__header { padding: 1.25rem 1.5rem; }
  .branche-card__body { grid-template-columns: 1fr; }
  .branche-card__challenge,
  .branche-card__results,
  .branche-card__features { padding: 1.25rem 1.5rem; border-right: none; border-bottom: 1px solid var(--blush); }
  .branche-card__features { border-bottom: none; }
  .branche-stats     { grid-template-columns: 1fr 1fr; }
  .branche-card__header h3 { font-size: 1.15rem; }

  /* IO Grid */
  .io-grid           { grid-template-columns: 1fr; gap: 1rem; }
  .io-card           { padding: 1.5rem; }

  /* PIM/DMS Combo */
  .pim-dms-combo     { grid-template-columns: 1fr; gap: 2rem; }
  .combo-circles     { gap: .75rem; }
  .combo-circle      { width: 96px; height: 96px; font-size: 1.4rem; }

  /* PIM Visual Card */
  .pim-visual-card__body { grid-template-columns: 1fr 1fr; }
  .pim-stat__num     { font-size: 1.5rem; }
  .pim-stat__label   { font-size: .68rem; }

  /* Branch Icons */
  .branch-icons-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .branch-icon-box   { padding: 1rem; font-size: .75rem; }
  .branch-icon-box span:first-child { font-size: 1.75rem; }

  /* Ecosystem Diagram → Stack-Fallback (Layout vereinfachen) */
  .ecosystem__diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 1rem 0;
  }
  .eco-channels,
  .eco-external,
  .eco-top,
  .eco-middle,
  .eco-bottom {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100%;
    justify-content: center;
  }
  .eco-channel-group,
  .eco-external-box  { width: 100%; max-width: 360px; margin: 0 auto; }
  .eco-middle {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
    padding: 0;
  }
  .eco-circle        { width: 130px; height: 130px; padding: 1rem; }
  .eco-circle--sm    { width: 110px; height: 110px; }
  .eco-circle__label { font-size: 1.5rem; }
  .eco-exchange,
  .eco-connector     { display: none; }
  .eco-bottom        { gap: .75rem; flex-wrap: wrap; padding-top: 1rem; }
  .eco-bottom-node   { padding: .75rem 1rem; min-width: 0; }
  .eco-features      { gap: .5rem; margin-top: 1.5rem; }
  .eco-pill          { font-size: .8rem; padding: .4rem .85rem; }

  /* Architecture-Diagramm: ist <640px ohnehin display:none, hier reicht das */
  .arch-scroller     { height: auto; }
  .arch-sticky       { position: static; height: auto; padding: 0; }
  .anim-reveal       { opacity: 1 !important; }

  /* Security Grid */
  .security__grid    { grid-template-columns: 1fr 1fr; }
  .security-card     { padding: 1.5rem 1rem; }

  /* Modal */
  .info-dialog       { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 2rem); }
  .info-dialog__header { padding: 1.5rem 1.5rem 1.25rem; }
  .info-dialog__title  { font-size: 1.3rem; }
  .info-dialog__body   { padding: 1.25rem 1.5rem; }
  .info-dialog__footer { padding: .75rem 1.5rem 1.25rem; flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .info-dialog__dismiss { width: 100%; }

  /* FAQ */
  .faq-question      { padding: 1.1rem 1.25rem; font-size: .9rem; }
  .faq-answer        { padding: 0 1.25rem 1.1rem; }

  /* Legal Hero */
  .legal-hero        { padding: 36px 0 28px; }
  .legal-hero__title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .legal-hero__sub   { font-size: .9rem; }
  .legal-content     { padding: 36px 0 56px; }

  /* Reveal-Transforms auf Mobile reduzieren — kein 52px-Schub auf engem Screen.
     `.bb-js` muss hier mit: ohne den Scope haetten diese Regeln eine niedrigere
     Spezifitaet als die gescopeten Startwerte weiter oben und wuerden gar nicht
     mehr greifen — auf Mobil waere der 52px-Schub zurueck. Und ohne JavaScript
     duerfen sie ohnehin nicht greifen, sonst stuenden die Abschnitte zwar
     sichtbar, aber um 24 bis 28 px verschoben. */
  .bb-js [data-anim="fade-up"]    { transform: translateY(28px); }
  .bb-js [data-anim="fade-left"]  { transform: translateX(-24px); }
  .bb-js [data-anim="fade-right"] { transform: translateX(24px); }
}

/* ---------- 480px: kompakte Smartphones ---------- */
@media (max-width: 480px) {
  .container         { padding: 0 1rem; }
  .section           { padding: 2.5rem 0; }

  /* Hero visual: Cards untereinander statt 2-spaltig */
  .hero__visual      { grid-template-columns: 1fr; }
  .hero-card--ai     { grid-column: auto; }
  .hero__canvas      { padding: 26px 18px; border-radius: 20px; }
  .hero__trust-pill  { font-size: 11px; padding: 6px 12px; margin-bottom: 18px; }
  .hero h1           { font-size: clamp(1.55rem, 8vw, 2rem); }

  /* Trust-Bar: weniger ausladend */
  .trust-bar__logos  { gap: .4rem; }
  .trust-badge       { font-size: .72rem; padding: .3rem .65rem; gap: .35rem; }

  /* Product-Cards: kompakter */
  .product-card      { padding: 24px 20px; border-radius: 20px; }
  .product-card__icon-wrap { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px; }
  .product-card h3   { font-size: 1.3rem; }
  .product-card__fullname { margin-bottom: 12px; }
  .product-card--rag-wide { padding: 22px 20px; gap: 14px; }

  /* About Story */
  .about__story      { padding: 32px 20px; }
  .about__stats      { grid-template-columns: 1fr 1fr; gap: 14px; }
  .about__stats > *:nth-child(3) { grid-column: 1 / -1; }
  .about__stat-num   { font-size: 28px; }

  /* CTA */
  .cta__canvas       { padding: 32px 20px; }
  .cta__actions      { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }
  .hero__actions     { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; }

  /* Footer: 1-spaltig */
  .footer__grid      { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__brand     { grid-column: auto; }
  .footer__bottom    { flex-direction: column; text-align: center; gap: .75rem; }
  .footer__legal     { gap: 1rem; flex-wrap: wrap; justify-content: center; }

  /* Ecosystem-Diagramm: ganz auf 1-spaltig */
  .eco-middle        { grid-template-columns: 1fr; row-gap: .75rem; }
  .eco-circle        { width: 120px; height: 120px; }
  .eco-bottom        { flex-direction: column; }
  .eco-bottom-node   { width: 100%; }

  /* Forms */
  .contact-info__card { padding: 1.4rem; }
  .contact-info__item { gap: .75rem; }

  /* Compare-Card */
  .compare-card__header { padding: 1rem 1.25rem; gap: .75rem; }
  .compare-list      { padding: 1rem 1.25rem; gap: .65rem; }
  .compare-list__item { font-size: .875rem; }

  /* Branche-Card */
  .branche-card__header { padding: 1rem 1.25rem; }
  .branche-card__challenge,
  .branche-card__results,
  .branche-card__features { padding: 1rem 1.25rem; }
  .branche-stats     { grid-template-columns: 1fr; }

  /* PIM Visual Card */
  .pim-visual-card__body { grid-template-columns: 1fr; }
  .pim-stat          { padding: 1.1rem .75rem; }

  /* Branch Icons */
  .branch-icons-grid { grid-template-columns: 1fr 1fr; }

  /* Security Grid */
  .security__grid    { grid-template-columns: 1fr; }

  /* Modal: full-bleed-Touch-Feeling */
  .info-dialog       { width: calc(100vw - 1rem); border-radius: 18px; }
  .info-dialog__header { padding: 1.25rem 1.25rem 1rem; border-radius: 18px 18px 0 0; }
  .info-dialog__body { padding: 1.1rem 1.25rem; }
  .info-dialog__footer { padding: .5rem 1.25rem 1.1rem; }

  /* Section-Headers etwas knapper */
  .section__header   { margin: 0 auto 2rem; }
  .section__header p { font-size: .95rem; }

  /* Page Hero Visual */
  .pim-visual-card   { margin-top: .5rem; }

  /* Legal hero meta knapper */
  .legal-hero__meta  { gap: 12px; font-size: 10px; }
}

/* ---------- 375px: iPhone Standard ---------- */
@media (max-width: 380px) {
  .container         { padding: 0 .875rem; }
  h1                 { font-size: clamp(1.45rem, 9vw, 1.85rem); }
  .hero h1           { font-size: clamp(1.4rem, 9vw, 1.85rem); }
  .hero__canvas      { padding: 22px 16px; }
  .product-card      { padding: 20px 18px; }
  .about__story      { padding: 28px 18px; }
  .cta__canvas       { padding: 28px 18px; }
  .nav-cta           { font-size: .8rem !important; padding: .55rem 1.1rem !important; }

  /* Hero-Karten leicht runder & dichter gepackt */
  .hero-card         { padding: 14px; min-height: 130px; }
  .hero-card--ai     { min-height: 160px; }
  .hero-card__title  { font-size: 16px; }

  /* About Stats: alle gleich-gestaffelt 2/2/1 */
  .about__stat-num   { font-size: 26px; }
  .about__stat-label { font-size: 11.5px; }

  /* Footer Brand-Text */
  .footer__brand p   { font-size: .85rem; }
  .footer__heading   { font-size: .8rem; }

  /* Trust-Bar Label kleiner */
  .trust-bar__label  { font-size: .65rem; letter-spacing: .1em; }
  .trust-badge       { font-size: .68rem; }

  /* Combo-Circles weiter schrumpfen */
  .combo-circle      { width: 80px; height: 80px; font-size: 1.2rem; border-width: 2px; }
}

/* ---------- Universal Mobile-Polish: gilt überall ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Auf Touch-Geräten kein dauerhafter Hover-State */
  .product-card:hover,
  .benefit-card:hover,
  .industry-card:hover,
  .solution-panel:hover,
  .strength-card:hover,
  .eco-circle:hover,
  .trust-badge:hover { transform: none; }

  /* Touch-Targets durchsetzen */
  a, button, .btn, .faq-question, .dropdown-menu a {
    min-height: 44px;
  }
}

/* Mobile-Nav: Dropdown immer ausgeklappt, statisch im Stack-Layout */
@media (max-width: 900px) {
  /* Außerhalb des Mobile-Menüs keine Hover-Dropdowns auf Touch-Geräten */
  .has-dropdown:hover .dropdown-menu { opacity: 0; visibility: hidden; transform: none; }

  /* Im offenen Mobile-Menü: Dropdown als statische, eingerückte Sub-Liste */
  .main-nav.is-open .has-dropdown .dropdown-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding: .25rem 0 .5rem 1rem;
    margin: .15rem 0 .5rem;
    min-width: 0;
    display: flex; flex-direction: column; gap: .15rem;
  }
  .main-nav.is-open .dropdown-menu a {
    padding: .75rem .875rem;
    font-size: .9rem;
    border-radius: 10px;
  }
}

/* ============================================================
   GUTENBERG-BLOCK MOBILE FIXES
   Diese Sub-Pages benutzen Inline-Styles (grid-template-columns
   direkt im HTML), die mit normalem CSS nur per !important und
   Attribute-Selector erreichbar sind.
   ============================================================ */

/* ---------- 768px: Inline-Grid-Layouts flach klopfen ---------- */
@media (max-width: 768px) {
  /* Alle 2-spaltigen Inline-Grids → 1-spaltig (Vergleich, Integrationen, KI-Anbindung) */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-spaltige Inline-Grids → 1-spaltig (Import/Export/Integrationen-Listen, RAG-Karten) */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Auto-fit-Grids: greift Tablet-Layout für Branchen, Workflow */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* RAG: 3 Spalten mit Trennlinien */
  [style*="grid-template-columns:1fr 48px 1fr 48px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline-Cards (Vergleich „Ohne / Mit"): innere Borders/Trennlinien fixen */
  [style*="grid-template-columns:1fr 1fr"][style*="overflow:hidden"] > div + div {
    border-left: none !important;
    border-top: 1px solid var(--blush);
  }

  /* RAG Full-Width-Karte (grid-column:1/-1) bleibt natürlich full-width im 1-Spalter */
  [style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; }

  /* Inline-Padding der Sektion-Boxen reduzieren */
  [style*="padding:2rem"]:not([class*="container"]):not(section) {
    padding: 1.5rem !important;
  }

  /* DMS-Stats-Bar (background:var(--dms) + flex-Items mit padding:1rem 3rem) */
  section[style*="background:var(--dms)"] > .container > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section[style*="background:var(--dms)"] > .container > div > div {
    padding: 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.2) !important;
    width: 100%;
  }
  section[style*="background:var(--dms)"] > .container > div > div:last-child {
    border-bottom: none !important;
  }

  /* Inline „Stats-Bar"-Bereich auf PIM/sonstige dunkle Sektionen */
  #ki-features [style*="border-right:1px solid"][style*="padding:1rem 3rem"],
  section[style*="background:var(--navy-dark)"] [style*="padding:1rem 3rem"] {
    padding: 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    width: 100%;
  }
  #ki-features [style*="display:flex"][style*="border-top:1px solid"] {
    flex-direction: column !important;
  }

  /* Workflow .wf-shell hat schon eigene Mobile-Regel (max-width:860px) — ok */

  /* PIM/DMS „KI-Anbindung" / „Integrationen" Karten: Icons müssen weiß bleiben.
     Die bb-icon-Klasse erbt currentColor — in dunklen Sektionen explizit setzen. */
  section[style*="background:var(--navy-dark)"] .bb-icon,
  section[style*="background:var(--navy)"] .bb-icon,
  [data-theme] section[style*="background:var(--navy"] .bb-icon { color: #fff; }
}

/* ---------- Icon-Farbe global in dunklen Sektionen (gilt auch Desktop) ---------- */
/* Die SVG-Icons benutzen stroke="currentColor" → wenn die Sektion einen dunklen
   Background per Inline-Style setzt aber NICHT die Klasse `section--dark`, fehlt
   der weiße Text-Color-Inheritance. Hier explizit setzen. */
section[style*="background:var(--navy-dark)"] .bb-icon,
section[style*="background:var(--navy)"]:not(.section--dark) .bb-icon,
section[style*="background:#0"] .bb-icon,
#ki-features .bb-icon,
#integrationen .bb-icon { color: #fff; }

/* In dunklen Sektionen sollen auch die Icon-Wrap-Spans (Pillen mit Emoji) weiß sein */
section[style*="background:var(--navy-dark)"] [style*="background:var(--navy)"] .bb-icon,
section[style*="background:var(--navy-dark)"] [style*="background:var(--workflow)"] .bb-icon {
  color: #fff;
}

/* ============================================================
   ZIELGERICHTETE FIXES
   ============================================================ */

/* Mobile: Konstellations-Hero komplett ausblenden (zu voll, unleserlich) */
@media (max-width: 768px) {
  .hero--main .page-hero__visual { display: none !important; }
  .hero--main .page-hero__inner  { grid-template-columns: 1fr; }
  .hero--main { padding: 28px 0 24px; }
  .hero--main .page-hero__content h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* Burger-Menü: position:fixed + hoher z-index absichern, damit es
   immer über dem Content liegt und vom Body-overflow nicht abgeschnitten wird.

   WICHTIG: Der Site-Header hat backdrop-filter, was einen neuen
   "containing block" für position:fixed-Kinder erzeugt — dadurch wird das
   Menü nur so hoch wie der Header (~64 px). Lösung: backdrop-filter auf
   Mobile entfernen und Header opak machen.  */
@media (max-width: 900px) {
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--paper) !important;
    z-index: 1000;
  }
  .main-nav.is-open {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: 64px !important; bottom: 0 !important;
    width: auto !important;
    z-index: 999 !important;
    background: var(--paper-soft);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1rem 2rem;
  }
  /* Body-Lock wenn Menü offen ist (Scroll im Hintergrund verhindern) */
  body:has(.main-nav.is-open) { overflow: hidden; }
}

/* Verhindern, dass body horizontal scrollt (würde durch zu breite Inline-Grids
   ohne meine Overrides passieren). Wir clippen NUR den body, nicht html —
   damit position:fixed im Menü, sticky-Header und einzelne overflow-x:auto-
   Container (z.B. DMS Lebenszyklus) weiterhin funktionieren. */
body { overflow-x: clip; }

/* ============================================================
   KI-SEITE NACHTARBEIT — Mond + Oktopus + Sprechblase nebeneinander
   ============================================================ */

.ki-night {
  display: block;
}
/* Nacht-Protokoll als Terminal-/Konsolen-Karte */
.night-log {
  font-family: var(--font-mono);
  background: linear-gradient(180deg,#021c34 0%,#03101f 100%);
  border: 1px solid rgba(255,198,128,.18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 34px 64px -26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  max-width: 500px;
  margin: 0 0 0 auto;     /* rechtsbündig: nutzt den Platz auf der rechten Seite */
}
.night-log__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.night-log__dot { width: 10px; height: 10px; border-radius: 50%; }
.night-log__dot:nth-child(1) { background: #ff5f56; }
.night-log__dot:nth-child(2) { background: #ffbd2e; }
.night-log__dot:nth-child(3) { background: #27c93f; }
.night-log__title {
  margin-left: .6rem;
  font-size: .72rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.45);
}
.night-log__moon { margin-left: auto; font-size: .85rem; opacity: .9; }
.night-log__body { padding: 1.25rem 1.3rem 1.45rem; }
.night-log__line {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  font-size: .82rem;
  line-height: 2;
  color: rgba(255,255,255,.82);
}
.night-log__ts { color: #ed8200; font-weight: 700; flex-shrink: 0; }
.night-log__task { flex: 1; }
.night-log__ok { color: #27c93f; font-weight: 700; flex-shrink: 0; }
.night-log__line--done {
  margin-top: .65rem;
  padding-top: .9rem;
  border-top: 1px dashed rgba(255,255,255,.12);
  color: #ffc680;
  font-style: italic;
}
.night-log__cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: #ffc680;
  margin-left: .35rem;
  transform: translateY(2px);
  animation: night-log-blink 1.1s steps(1) infinite;
}
@keyframes night-log-blink { 50% { opacity: 0; } }

@media (max-width: 768px) {
  .ki-night { margin-top: 1.5rem; }
  .night-log { max-width: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .night-log__cursor { animation: none; }
}

/* ============================================================
   KI EXPLAINER — OkKI am Whiteboard + Sprechblase, in Sektion eingebettet
   ============================================================ */

.ki-explainer {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.ki-explainer--right { margin-left: auto; margin-right: 0; flex-direction: row-reverse; }

/* Hilfsklasse fuer nachgeruestete <picture>-Wrapper.
   Die Bilder darin wurden vorher direkt als <img> ausgeliefert, ihr CSS setzt
   also auf das img als direktes Kind des Containers: width:150% im KI-Hero,
   height:100% im Portraetrahmen. Ein normales <picture> schiebt sich als
   Inline-Box dazwischen, die Prozentwerte laufen dann gegen den Wrapper und
   das Layout bricht. display:contents nimmt den Wrapper aus dem Layout, die
   Quellenauswahl fuer WebP funktioniert trotzdem. */
.pic-contents { display: contents; }

.ki-explainer__img {
  width: 140px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 12px 24px rgba(0,32,61,.25));
}
/* Querformat-Illustration (Whiteboard) braucht mehr Breite */
.ki-explainer__img--wide { width: 240px; align-self: center; }

.ki-explainer__bubble {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--blush);
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  box-shadow: 0 14px 28px -10px rgba(0,32,61,.18);
  flex: 1;
}
.ki-explainer__bubble::before {
  content: '';
  position: absolute;
  top: 32px;
  left: -10px;
  width: 18px; height: 18px;
  background: var(--paper);
  border-left: 1.5px solid var(--blush);
  border-bottom: 1.5px solid var(--blush);
  transform: rotate(45deg);
}
.ki-explainer--right .ki-explainer__bubble::before {
  left: auto; right: -10px;
  border-left: none; border-bottom: none;
  border-right: 1.5px solid var(--blush);
  border-top: 1.5px solid var(--blush);
}
.ki-explainer__bubble-meta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ed8200;
  font-weight: 700;
  margin-bottom: .5rem;
}
.ki-explainer__bubble p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 768px) {
  .ki-explainer,
  .ki-explainer--right { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .ki-explainer__img { width: 120px; }
  .ki-explainer__img--wide { width: 210px; }
  .ki-explainer__bubble::before,
  .ki-explainer--right .ki-explainer__bubble::before {
    top: -10px; left: 50%; right: auto;
    transform: translateX(-50%) rotate(45deg);
    border: none;
    border-top: 1.5px solid var(--blush);
    border-left: 1.5px solid var(--blush);
  }
}

/* ============================================================
   KI PERCH — OkKI „hängt" oben an einer Box
   ============================================================ */

.ki-perch {
  position: relative;
  background: linear-gradient(135deg,#fdf9f4 0%,#fff 100%);
  border: 1px solid rgba(237,130,0,.2);
  border-radius: 24px;
  padding: 3rem;
  margin-top: 80px;       /* Platz für den Oktopus, der 38px über die Kante ragt */
}
.ki-perch__mascot {
  position: absolute;
  /* Die Illustration hat viel transparenten Rand: der Oktopus liegt nur bei
     x 1,3–38,7 % und y 21,9–80,2 % der Datei. Die Offsets sind daraus gerechnet,
     damit er auf der oberen linken Ecke sitzt, knapp über die Kante hängt und
     rechts vor dem 3rem-Innenabstand endet — sonst läuft er in die Überschrift.
     Bei width:380px ist der sichtbare Oktopus 285px hoch und liegt darin
     bei y 62..229px. top:-33px => sein Kopf beginnt 29px unterhalb der
     Kartenkante. Wichtig: margin-top der Karte NICHT mitverkleinern, sonst
     wandert die Karte nach oben und hebt die Verschiebung wieder auf. */
  top: -33px;
  left: -104px;
  width: 380px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 18px 28px rgba(0,32,61,.3));
  pointer-events: none;
}
.ki-perch__content { position: relative; z-index: 1; }

.ki-perch__modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.ki-perch__module {
  background: #fff;
  border: 1px solid var(--blush);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ki-perch__module:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(0,32,61,.18);
}
.ki-perch__module-tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.ki-perch__module-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
}

@media (max-width: 768px) {
  .ki-perch { padding: 2rem 1.5rem; margin-top: 70px; }
  /* 200px breit => sichtbarer Oktopus x 5..77px, y 33..120px. Mit left:-38px
     endet er bei x 39px und bleibt damit links vom Kartentext (ab ca. 48px) —
     bei 230px Breite stiess sein Arm an das Label "billerbeck PIM". */
  .ki-perch__mascot { top: -18px; left: -38px; right: auto; width: 200px; }
  .ki-perch__content > div { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .ki-perch__modules { grid-template-columns: 1fr 1fr; }
}

/* Auf der KI-Seite das Logo-SVG im Header anzeigen */
[data-theme="ki"] .site-logo img {
  /* Optional: könnte hier auf das KI-Logo wechseln */
}

/* ============================================================
   KI-Seite / 4-Top-Level-Nav / Layouts
   ============================================================ */

/* Nav: bei 4 Top-Level-Items wird's auf engen Laptops eng — knapperer Padding */
@media (min-width: 901px) and (max-width: 1100px) {
  .main-nav > ul > li > a { padding: 7px 13px; font-size: 13px; }
  .nav-cta { margin-left: .75rem !important; padding: .55rem 1.1rem !important; font-size: .82rem !important; }
}

/* KI-Hero auf Mobile: Visual sichtbar lassen */
@media (max-width: 768px) {
  .hero--main[data-theme="ki"] .page-hero__visual,
  [data-theme="ki"] .page-hero__visual { display: block !important; }
}

/* Stats-Box auf KI-Tech-Sektion: Mobile-fähig (Inline-Style override) */
@media (max-width: 768px) {
  #technik [style*="display:flex"][style*="border-top"] {
    flex-direction: column !important;
  }
  #technik [style*="display:flex"][style*="border-top"] > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    padding: 1rem !important;
    width: 100% !important;
  }
  #technik [style*="display:flex"][style*="border-top"] > div:last-child {
    border-bottom: none !important;
  }
}

/* "Womit die KI arbeitet"-Sektion: auf Mobile gestapelt */
@media (max-width: 768px) {
  #was-fuettert-die-ki [style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Plattform-Highlight + Standalone Cross-Link: gestapelt, Eule kleiner */
  #ki-standalone [style*="grid-template-columns:1fr 1fr"],
  #mit-plattform [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #ki-standalone [style*="font-size:7rem"],
  #mit-plattform [style*="font-size:8rem"] { font-size: 5rem !important; }
}

/* ============================================================
   FIXES — Round 2
   ============================================================ */

/* Architecture-Stage „Ein verbundenes Software-Ökosystem" auf Mobile
   komplett ausblenden — Diagramm ist für ≥ 1200 px gemacht, auf Phone
   nur Brei. Lieber gar nicht zeigen. */
@media (max-width: 900px) {
  section#uebersicht,
  .av2-stage { display: none !important; }
}

/* Inline „nowrap"-Pills (z.B. RAG-Hero Security-Badge mit
   „On-premise · Ihr wählt das Modell · DSGVO Art. 32") überlaufen auf
   Mobile den Viewport → Pinch-Zoom-Out / horizontaler Scroll.
   Umbrechen erlauben + kleiner schalten. */
@media (max-width: 768px) {
  [style*="white-space:nowrap"][style*="border-radius:999px"] {
    white-space: normal !important;
    text-align: center;
    line-height: 1.55;
    padding: .55rem 1rem !important;
    font-size: .72rem !important;
    max-width: 100%;
  }
  /* Die Pill war ein inline-flex — auf Mobile zur normalen Box, damit
     der Text umbrechen kann und nicht zwingend in eine Zeile muss. */
  .page-hero .container > [style*="white-space:nowrap"] {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
  }
}

/* ---------- Header-Layout auf Mobile: Toggle ganz rechts, CTA ins Menü ---------- */
@media (max-width: 900px) {
  /* Toggle nach ganz rechts schieben — Logo links, Toggle rechts, dazwischen nichts */
  .nav-toggle {
    margin-left: auto;
    order: 99;            /* fallback, falls flex-order woanders gesetzt wird */
  }
  /* „Termin vereinbaren"-CTA im Header verstecken — er erscheint nur im offenen Menü */
  .main-nav:not(.is-open) .nav-cta { display: none; }
  /* Nav-Container selbst nimmt im Header keinen Platz, solange das Menü zu ist */
  .main-nav:not(.is-open) { width: 0; }

  /* Mobile-Menü-Items: großzügige Touch-Targets */
  .main-nav.is-open > ul {
    gap: .35rem;
  }
  .main-nav.is-open > ul > li > a {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem !important;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 12px;
  }
  /* Aktiv-Markierung im Mobile-Menü:
     - Top-Level „Start" und „Branchen" werden voll markiert
     - Aber Plattform-Parent NICHT (auch wenn current-menu-item) — stattdessen
       wird das konkrete Sub-Item (PIM/DMS/Workflow/RAG) im Dropdown markiert */
  .main-nav.is-open > ul > li.current-menu-item:not(.has-dropdown) > a {
    background: var(--navy);
    color: var(--paper);
  }
  .main-nav.is-open > ul > li.has-dropdown.current-menu-item > a {
    background: transparent;
    color: var(--ink);
  }

  /* Dropdown-Items im Mobile-Menü: ebenfalls touch-freundlich */
  .main-nav.is-open .dropdown-menu a {
    padding: .85rem 1rem !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: .95rem;
  }
  /* Aktives Sub-Item (PIM/DMS/Workflow/RAG) im Mobile-Menü voll markieren */
  .main-nav.is-open .dropdown-menu a[aria-current="page"] {
    background: var(--navy);
    color: var(--paper);
  }
  /* Der farbige Dot im aktiven Sub-Item bleibt erhalten, bekommt auf navy
     aber einen hellen Ring. Gilt nur fuer den Punkt, nicht fuer das
     "bald"-Label daneben. */
  .main-nav.is-open .dropdown-menu a[aria-current="page"] .dd-dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
  }
  .main-nav.is-open .dropdown-menu a[aria-current="page"] .dd-soon {
    color: rgba(255,255,255,.65);
  }
  /* Ohne Hover auf dem Handy zeigt der Strich nichts an, also steht er
     ausgefahren und ruhig in der Seitenfarbe. */
  .main-nav.is-open .dropdown-menu .dd-mark {
    transform: none;
    background: var(--dd-color, var(--steel-pale));
    opacity: .55;
  }
  /* CTA-Button unten im Menü: full-width und prominent */
  .main-nav.is-open .nav-cta {
    display: inline-flex;
    margin-top: 1.25rem;
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 52px;
  }
}

/* ============================================================
   PREISE PAGE — Configurator, Packages, Table, ROI, FAQ
   ============================================================ */

/* ── Hero ── */
.preise-hero {
  background: linear-gradient(140deg, #001a35 0%, #00305b 55%, #0d3a6e 100%);
  padding: 6rem 0 5rem;
  text-align: center;
}
.preise-hero h1 { color: #fff; }
.preise-hero .page-hero__sub { color: rgba(255,255,255,.72); max-width: 560px; margin: 1rem auto 0; font-size: 1.1rem; }
.preise-hero .hero-meta { justify-content: center; margin-top: 2rem; }
.preise-hero .hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .35rem .9rem;
  border-radius: var(--radius-pill);
}

/* ── Module Cards (Configurator) ── */
.configurator__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.module-card {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s cubic-bezier(0.16,1,0.3,1);
}
.module-card:hover {
  border-color: var(--steel-pale);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.module-card.active {
  border-color: var(--rag);
  background: #fff8f0;
  box-shadow: 0 0 0 3px rgba(237,130,0,.14), var(--shadow-md);
  transform: translateY(-3px);
}
.module-card__toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gray);
  background: transparent;
  transition: background .2s ease, border-color .2s ease;
  pointer-events: none;
}
.module-card.active .module-card__toggle {
  background: var(--rag);
  border-color: var(--rag);
}
.module-card.active .module-card__toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 6px;
  width: 5px; height: 9px;
  border: 2px solid var(--navy-dark);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.module-card__icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: .75rem;
  display: block;
}
.module-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: .3rem;
  padding-right: 1.75rem;
}
.module-card__desc {
  font-size: .84rem;
  color: var(--mute);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.module-card__price-wrap { margin-top: auto; }
.module-card__price-wrap {
  min-height: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
}
.module-card__price-old {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--steel);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.module-card__price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}
.module-card__price--disc {
  color: #9a5500;
}
.module-card.active .module-card__price--disc {
  color: #7a4300;
}
.module-card__price-suffix {
  font-size: .78rem;
  font-weight: 400;
  opacity: .65;
  margin-left: .1rem;
}
.module-card__disc-badge {
  display: inline-flex;
  align-items: center;
  background: var(--rag);
  color: var(--navy-dark);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .18rem .55rem;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  align-self: center;
}
/* Preview-Badge auf noch nicht ausgewählten Karten: gedämpfter */
.module-card__disc-badge--preview {
  background: transparent;
  color: #9a5500;
  border: 1.5px dashed #c97d20;
  opacity: .85;
}

/* ── Configurator Summary Bar ── */
.configurator__summary {
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.configurator__left { flex: 1; min-width: 200px; }
.configurator__total-label {
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .2rem;
}
.configurator__total-price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
  display: inline;
}
.configurator__total-suffix {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  margin-left: .25rem;
}
.configurator__bundle-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}
.configurator__bundle-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--rag);
  color: var(--navy-dark);
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .85rem;
  border-radius: var(--radius-pill);
}
.configurator__savings {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.configurator__savings strong { color: #ffc680; }
.configurator__impl {
  text-align: right;
  flex-shrink: 0;
}
.configurator__impl-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: .25rem;
}
.configurator__impl-value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,.65);
}
.configurator__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.configurator__reset {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: .4rem 0;
  transition: color .18s ease;
}
.configurator__reset:hover { color: var(--navy); }

/* ── Package Cards ── */
.packages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.package-card {
  background: var(--paper);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: box-shadow .25s ease, transform .2s cubic-bezier(0.16,1,0.3,1), border-color .2s ease;
}
.package-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--steel-pale);
}
.package-card.featured {
  background: var(--navy-dark);
  border-color: rgba(237,130,0,.3);
  box-shadow: 0 0 0 3px rgba(237,130,0,.1), var(--shadow-dark);
  transform: translateY(-4px);
}
.package-card.featured:hover { transform: translateY(-7px); }
.package__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .28rem .8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}
.package__badge--starter   { background: var(--rag-pale); color: var(--navy); }
.package__badge--pro       { background: var(--rag); color: var(--navy-dark); }
.package__badge--enterprise{ background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.18); }
.package__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  margin-bottom: .75rem;
}
.package-card.featured .package__name { color: #fff; }
.package__modules {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.package__module {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .07em;
  color: var(--mute);
  background: var(--gray-pale);
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
}
.package-card.featured .package__module { background: rgba(255,255,255,.1); color: rgba(255,255,255,.65); }
.package__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1;
}
.package-card.featured .package__price { color: #ffc680; }
.package__price small { font-family: var(--font-mono); font-size: .85rem; font-weight: 400; opacity: .65; }
.package__impl {
  font-size: .82rem;
  color: var(--mute);
  margin-top: .2rem;
  margin-bottom: 1.5rem;
}
.package-card.featured .package__impl { color: rgba(255,255,255,.45); }
.package__desc {
  font-size: .9rem;
  color: var(--mute);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}
.package-card.featured .package__desc { color: rgba(255,255,255,.6); }
.package__cta { width: 100%; justify-content: center; }
.package-card.featured .package__cta {
  background: var(--rag);
  color: var(--navy-dark);
  border-color: var(--rag);
}
.package-card.featured .package__cta:hover { background: #ffc680; border-color: #ffc680; }

/* ── Comparison Table ── */
.comparison__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
}
.comparison-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: .88rem;
}
.comparison-table th,
.comparison-table td {
  padding: .8rem .9rem;
  text-align: center;
  border-bottom: 1px solid var(--gray-light);
  vertical-align: middle;
}
.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
  color: var(--ink);
  padding-left: 1.5rem;
  font-weight: 500;
}
.comparison-table thead th {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--steel);
  position: sticky;
  top: 72px;
  z-index: 8;
  border-bottom: 2px solid var(--gray-light);
}
.comparison-table thead th.col-bundle { background: var(--gray-pale); color: var(--navy); }
.comparison-table thead th.col-featured { background: var(--navy); color: #fff; }
.comparison-table .row-group td,
.comparison-table .row-group th {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--gray-pale);
  text-align: left;
  padding: .55rem .9rem .55rem 1.5rem;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table td.col-featured { background: rgba(0,31,61,.03); }
.comparison-table thead th:first-child { text-align: left; }

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
}
.check--yes  { background: rgba(76,175,122,.14); color: #2d8a5a; }
.check--no   { color: var(--gray-light); font-size: 1.1rem; line-height: 1; }
.check--plus { background: rgba(237,130,0,.14); color: #9a5500; font-size: .7rem; font-weight: 900; }

.comparison__note {
  font-size: .82rem;
  color: var(--mute);
  margin-top: 1rem;
  font-style: italic;
}
.comparison__note .check { width: 16px; height: 16px; font-size: .6rem; vertical-align: middle; }

/* ── ROI Calculator ── */
.roi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.roi__input-group { margin-bottom: 1.5rem; }
.roi__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
}
.roi__label-text { font-size: .9rem; font-weight: 500; color: var(--ink); }
.roi__label-value {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
}
.roi__label-value input {
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  width: 60px;
  text-align: right;
}
.roi__slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--gray-light);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.roi__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid var(--paper);
  box-shadow: 0 0 0 2px var(--navy), 0 2px 8px rgba(0,48,91,.2);
  cursor: pointer;
}
.roi__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid var(--paper);
  box-shadow: 0 0 0 2px var(--navy);
  cursor: pointer;
}

.roi__results {
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 2rem;
  color: #fff;
  position: sticky;
  top: 100px;
}
.roi__results-title {
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 1.25rem;
}
.roi__result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .88rem;
  gap: 1rem;
}
.roi__result-row:last-of-type { border-bottom: none; }
.roi__result-label { color: rgba(255,255,255,.55); flex: 1; }
.roi__result-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.roi__result-value.highlight { color: #ffc680; font-size: 1.05rem; }
.roi__result-value.positive { color: #78dfa8; }
.roi__savings-box {
  background: rgba(237,130,0,.1);
  border: 1px solid rgba(237,130,0,.22);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  text-align: center;
}
.roi__savings-box .amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffc680;
  letter-spacing: -.04em;
  display: block;
  line-height: 1;
}
.roi__savings-box .sublabel { font-size: .8rem; color: rgba(255,255,255,.45); margin-top: .3rem; display: block; }

.roi__chart { margin-top: 1.25rem; }
.roi__chart-title {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .75rem;
}
.roi__chart-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}
.roi__chart-label { font-size: .78rem; color: rgba(255,255,255,.45); min-width: 120px; text-align: right; }
.roi__chart-track {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
}
.roi__chart-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .5s cubic-bezier(0.16,1,0.3,1);
  min-width: 4px;
}
.roi__chart-bar--sq { background: rgba(255,255,255,.28); }
.roi__chart-bar--bb { background: linear-gradient(90deg, #ffc680, #ed8200); }
.roi__chart-value {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
.roi__disclaimer {
  font-size: .78rem;
  color: var(--mute);
  margin-top: 1.25rem;
  font-style: italic;
}

/* ── FAQ Accordion ── */
.faq__list { max-width: 800px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--gray-light); }
.faq__item:first-child { border-top: 1px solid var(--gray-light); }
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1.25rem 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: color .18s ease;
}
.faq__trigger:hover { color: var(--navy-soft); }
.faq__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--steel);
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .25s cubic-bezier(0.16,1,0.3,1);
}
.faq__item.open .faq__icon {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: rotate(45deg);
}
.faq__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq__body-inner {
  padding: 0 0 1.25rem;
  color: var(--mute);
  line-height: 1.7;
  font-size: .95rem;
}

/* ── Final CTA ── */
.preise-cta { text-align: center; }
.preise-cta h2 { font-size: clamp(1.5rem, 3.5vw, 2.75rem); max-width: 700px; margin: 0 auto 1.25rem; color: #fff; }
.preise-cta p { color: rgba(255,255,255,.6); margin-bottom: 2rem; }
.preise-cta .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .configurator__grid { grid-template-columns: repeat(2, 1fr); }
  .roi__grid { grid-template-columns: 1fr; gap: 2rem; }
  .roi__results { position: static; }
}
@media (max-width: 768px) {
  .configurator__grid { grid-template-columns: 1fr; }
  .configurator__summary { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .configurator__impl { text-align: left; }
  .packages__grid { grid-template-columns: 1fr; }
  .package-card.featured { transform: none; }
  .comparison-table thead th { position: static; }
}

/* ── Print ── */
@media print {
  .comparison__wrap { overflow: visible; }
  .comparison-table { min-width: auto; font-size: .72rem; }
  .comparison-table thead th { position: static; }
}

/* ============================================================
   BILLERBECK KI HERO DESIGNS
   ============================================================ */

/* ── Split-Hero: Homepage (Navy links / Schreibtisch-Bild rechts) ── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 660px;
  overflow: hidden;
}
.hero-split__content {
  background: linear-gradient(140deg, #001428 0%, #001f3d 45%, #00305b 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 3rem 5rem 0;
}
/* Content uses the container margin on the left — align with rest of page */
.hero-split__content .label,
.hero-split__content h1,
.hero-split__content .page-hero__sub,
.hero-split__content .hero-meta,
.hero-split__content .page-hero__actions {
  padding-left: 3.5rem;
}
.hero-split__content h1 { color: #fff; }
.hero-split__visual {
  position: relative;
  background: #f5f8fc;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Sanfter Übergang von Navy zu Bildbereich */
.hero-split__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  width: 80px;
  background: linear-gradient(90deg, #001f3d, transparent);
  z-index: 2;
  pointer-events: none;
}
.hero-split__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  position: relative;
  z-index: 1;
}

/* ── Full-Bleed-Hero: KI-Seite (System-Bild als Hintergrund) ── */
.hero-fullbleed {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-fullbleed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  z-index: 0;
}
.hero-fullbleed__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Gradient: links dunkel für Text, rechts transparent für das Bild */
  background: linear-gradient(
    90deg,
    rgba(0,20,40,.95)  0%,
    rgba(0,30,60,.88) 30%,
    rgba(0,35,70,.55) 55%,
    rgba(0,35,70,.1)  75%,
    transparent       90%
  );
}
.hero-fullbleed__overlay .container { width: 100%; }
.hero-fullbleed__content {
  max-width: 580px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-split__visual {
    min-height: 300px;
    order: -1; /* Bild oben, Text darunter */
  }
  .hero-split__visual::before { display: none; }
  .hero-split__content {
    padding: 3rem 1.5rem;
  }
  .hero-split__content .label,
  .hero-split__content h1,
  .hero-split__content .page-hero__sub,
  .hero-split__content .hero-meta,
  .hero-split__content .page-hero__actions { padding-left: 0; }

  .hero-fullbleed { min-height: 560px; }
  .hero-fullbleed__bg { object-position: 80% center; }
  .hero-fullbleed__overlay {
    background: linear-gradient(
      180deg,
      rgba(0,20,40,.85) 0%,
      rgba(0,30,60,.80) 60%,
      rgba(0,20,40,.92) 100%
    );
    padding: 4rem 0;
  }
  .hero-fullbleed__content { max-width: none; }
}

@media (max-width: 480px) {
  .hero-split__visual { min-height: 220px; }
  .hero-fullbleed { min-height: 480px; }
}


/* ============================================================
   BLOG / AKTUELLES  (Übersicht, Karten, Einzelbeitrag)
   ============================================================ */

/* --- Übersicht: Karten-Raster --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  padding: 56px 0 24px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-blue-sm);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-blue-lg);
  border-color: var(--rag-pale);
}

.blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.blog-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}

.blog-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.5rem 1.5rem 1.6rem;
}
.blog-card__meta {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--mute); margin-bottom: .75rem;
}
.blog-card__cat {
  display: inline-flex; align-items: center;
  background: var(--rag-pale); color: #9c5600;
  padding: .2rem .6rem; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.blog-card__title {
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3;
  font-weight: 700; letter-spacing: -.01em; margin: 0 0 .6rem;
}
.blog-card__title a { color: var(--navy); text-decoration: none; }
.blog-card__title a:hover { color: var(--rag); }
.blog-card__excerpt {
  font-size: .9rem; color: var(--mute); line-height: 1.65; margin: 0 0 1.1rem;
}
.blog-card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: auto; align-self: flex-start;
  font-weight: 600; font-size: .875rem; color: var(--navy);
  text-decoration: none;
}
.blog-card__more svg { transition: transform .2s ease; }
.blog-card__more:hover { color: var(--rag); }
.blog-card__more:hover svg { transform: translateX(3px); }
.blog-card a:focus-visible,
.blog-card__more:focus-visible { outline: 2px solid var(--rag); outline-offset: 3px; border-radius: 4px; }

/* --- Pagination --- */
.blog-pagination { padding: 1.5rem 0 88px; }
.blog-pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .75rem;
  border: 1px solid var(--gray-light); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .85rem; color: var(--navy);
  text-decoration: none; background: var(--paper);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.blog-pagination .page-numbers:hover { border-color: var(--rag); color: var(--rag); }
.blog-pagination .page-numbers.current {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.blog-pagination .page-numbers.dots { border: none; background: none; }

/* --- Leerzustand --- */
.blog-empty {
  text-align: center; padding: 72px 0 96px;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.blog-empty p { color: var(--mute); font-size: 1.05rem; }

/* --- Einzelbeitrag --- */
.post-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--steel-soft); margin-bottom: 1rem;
}
.post-hero__cat {
  background: rgba(237,130,0,.18); color: var(--rag-soft);
  padding: .25rem .7rem; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  text-decoration: none;
}
.post-hero__cat:hover { background: rgba(237,130,0,.3); }
.post-hero__author::before,
.post-hero__read::before { content: "\00b7  "; }
/* Hero-Textspalte deckungsgleich mit der (zentrierten) Inhaltsspalte:
   weiße Überschrift startet damit exakt über dem Fließtext darunter. */
.post-hero .legal-hero__inner { margin-left: auto; margin-right: auto; }

/* Beitragsbild: kleiner, schwebt links, Text fließt rechts daneben */
.post-single__figure {
  float: left;
  width: min(42%, 340px);
  margin: .4rem 1.75rem 1.1rem 0;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-blue);
}
.post-single__figure img { width: 100%; height: auto; display: block; }
@media (max-width: 620px) {
  .post-single__figure { float: none; width: 100%; margin: 0 0 1.25rem; }
}

.post-single__content { margin: 0 auto; }
.post-single__content.legal-content { padding-bottom: 40px; }
.post-single__content > p:first-of-type {
  font-size: 1.05rem; color: var(--ink); line-height: 1.8;
}
.post-single__content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-single__content blockquote {
  margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem;
  border-left: 3px solid var(--rag); color: var(--navy);
  font-family: var(--font-display); font-size: 1.1rem; font-style: italic;
}

.post-single__foot {
  max-width: 760px; margin: 0 auto; padding: 1.5rem 0 88px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--gray-light);
}
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.post-tags a {
  font-family: var(--font-mono); font-size: .75rem; color: var(--mute);
  background: var(--gray-pale); padding: .3rem .7rem; border-radius: var(--radius-pill);
  text-decoration: none;
}
.post-tags a:hover { background: var(--rag-pale); color: #9c5600; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding-top: 40px; }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-single__foot { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   TOPIC INDEX — Themen-Übersicht direkt unter dem Hero.
   Führt die großen Kategorien der Seite kurz ein und springt
   per Klick zum jeweiligen Abschnitt.
   Akzentfarbe pro Seite über --ti-accent (inline gesetzt).
   ============================================================ */
.topic-index {
  background: var(--paper);
  border-bottom: 1px solid var(--blush);
  padding: 3.25rem 0 3rem;
}
.topic-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.topic-index__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 0;
}
.topic-index__hint {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.topic-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: topic-counter;
}
.topic-index__grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.35rem 1.5rem 1.3rem;
  background: var(--paper-soft);
  border: 1px solid var(--blush);
  border-radius: var(--radius-lg);
  text-decoration: none;
  counter-increment: topic-counter;
  overflow: hidden;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s ease, box-shadow .18s ease;
}
.topic-card::before {
  content: counter(topic-counter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ti-accent, var(--navy));
  opacity: .8;
}
.topic-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ti-accent, var(--navy));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 0 2px 2px 0;
}
.topic-card:hover {
  transform: translateY(-2px);
  border-color: var(--ti-accent, var(--navy));
  box-shadow: var(--shadow-md);
}
.topic-card:hover::after { transform: scaleY(1); }
.topic-card:focus-visible {
  outline: 2px solid var(--ti-accent, var(--navy));
  outline-offset: 2px;
}
.topic-card:active { transform: translateY(0); }
.topic-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.topic-card__title svg {
  flex-shrink: 0;
  color: var(--ti-accent, var(--navy));
  transition: transform .18s ease;
}
.topic-card:hover .topic-card__title svg { transform: translateY(2px); }
.topic-card__desc {
  font-size: .85rem;
  color: var(--mute);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .topic-index__grid,
  .topic-index__grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .topic-index { padding: 2.25rem 0 2rem; }
  .topic-index__grid,
  .topic-index__grid--2col { grid-template-columns: 1fr; gap: .75rem; }
}


/* ============================================================
   DIGITALER PRODUKTPASS — /pim/digitaler-produktpass/
   ============================================================
   BEWUSST ANDERE FORMENSPRACHE als die uebrigen Produktseiten.
   Die Seite ist ein Umsetzungs-Dossier, keine Produktseite:

     - heller Kopf statt Navy-Hero
     - linksbuendige, nummerierte Kapitel statt zentrierter
       section__header
     - Fliesstext und Register statt Benefit-Karten
     - Kapitelleiste, die beim Scrollen stehen bleibt

   Farbleitsystem der drei Zielgruppen (Hero, Matrix, Ablaufbild
   sprechen dieselbe Sprache):
     Kundschaft = Petrol (--pim), Recycling = Moosgruen (--tasks),
     Behoerde   = Navy    (--navy)
   Alles unter .dpp-* gescopet.
   ============================================================ */

/* Nur fuer Screenreader. Fehlte im Theme, wird von der
   Sichtbarkeitsmatrix gebraucht: die Punkte allein sagen einer
   Vorlesesoftware nichts. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Kopf: Dossier statt Hero ── */
.dpp-head {
  position: relative;
  padding: 3.5rem 0 3rem;
  background:
    radial-gradient(900px 400px at 12% 0%, rgba(14,94,105,.07) 0%, transparent 70%),
    var(--paper);
  border-top: 3px solid var(--pim);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-head__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0 0 2rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}
/* Direkte Kinder statt nur span: seit die Brotkrume als <nav> vorne in
   der Zeile steht, muss der Trennpunkt auch nach einem nicht-span
   greifen. */
.dpp-head__eyebrow > * { display: inline-flex; align-items: center; }
.dpp-head__eyebrow > * + *::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pim-soft);
  margin-right: 1.25rem;
}

/* Brotkrume auf hellem Grund. Sie ersetzt die erste Kleinzeile, deshalb
   erbt sie deren Mono-Typografie und bringt nur die Zustaende mit. */
.dpp-crumbs { gap: .5rem; flex-wrap: wrap; }
.dpp-crumbs a {
  color: var(--pim);
  text-decoration: none;
  transition: color .15s ease;
}
.dpp-crumbs a:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dpp-crumbs a:active { color: var(--pim-soft); }
.dpp-crumbs a:focus-visible {
  outline: 2px solid var(--pim);
  outline-offset: 3px;
  border-radius: 2px;
}
.dpp-crumbs .bb-crumbs__sep { color: var(--pim-soft); }
.dpp-crumbs .bb-crumbs__here { color: var(--steel); }
.dpp-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.dpp-head__main h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--navy-dark);
}
.dpp-head__lede {
  margin: 0 0 2rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--mute);
  max-width: 56ch;
}
.dpp-head__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Kurzfassung als Faktenkasten — liest sich wie der Kopf eines
   Merkblatts, nicht wie eine Produktkachel. */
.dpp-abstract {
  background: var(--paper-warm);
  border: 1px solid var(--gray-light);
  border-left: 3px solid var(--pim);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-blue-sm);
}
.dpp-abstract__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pim);
}
.dpp-abstract__list { margin: 0; }
.dpp-abstract__list > div { padding: .8rem 0; border-top: 1px solid var(--gray-light); }
.dpp-abstract__list > div:first-child { border-top: none; padding-top: 0; }
.dpp-abstract__list > div:last-child { padding-bottom: 0; }
.dpp-abstract__list dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: .3rem;
}
.dpp-abstract__list dd {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--navy-dark);
  font-weight: 500;
}

/* ── Kapitelleiste ── */
.dpp-chapters {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-chapters__list {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dpp-chapters__list::-webkit-scrollbar { display: none; }
.dpp-chapters__list a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  white-space: nowrap;
  padding: .9rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.dpp-chapters__list a:hover { color: var(--pim); border-bottom-color: var(--pim-soft); }
.dpp-chapters__list a:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.dpp-chapters__list a.is-current { color: var(--pim); border-bottom-color: var(--pim); }
.dpp-chapters__num {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--steel-soft);
}
.dpp-chapters__list a.is-current .dpp-chapters__num { color: var(--pim-soft); }

/* Anker nicht unter der klebenden Leiste verschwinden lassen. */
.dpp-page [id] { scroll-margin-top: 130px; }

/* ── Einordnung + Fristen-Schiene ── */
.dpp-intro { padding: 3.5rem 0; background: var(--paper); }
.dpp-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.dpp-intro__text h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy-dark);
}
.dpp-intro__text p {
  margin: 0 0 1rem;
  font-size: .98rem;
  line-height: 1.8;
  color: var(--mute);
}
.dpp-intro__link a {
  font-weight: 600;
  color: var(--pim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dpp-intro__link a:hover { color: var(--navy); }

.dpp-rail { position: relative; padding-left: 1.6rem; }
.dpp-rail::before {
  content: '';
  position: absolute;
  left: 5px; top: .5rem; bottom: .5rem;
  width: 1px;
  background: var(--gray-light);
}
.dpp-rail__item { position: relative; padding: 0 0 1.4rem; }
.dpp-rail__item:last-child { padding-bottom: 0; }
.dpp-rail__item::before {
  content: '';
  position: absolute;
  left: -1.6rem; top: .35rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gray);
}
.dpp-rail__item.is-done::before { background: var(--pim); border-color: var(--pim); }
.dpp-rail__item.is-next::before { background: var(--paper); border-color: var(--rag); box-shadow: 0 0 0 4px var(--rag-pale); }
.dpp-rail__year {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-dark);
  font-weight: 700;
  margin-bottom: .2rem;
}
.dpp-rail__what { display: block; font-size: .88rem; line-height: 1.55; color: var(--mute); }

/* ── Film: der Ueberblick vor den Kapiteln ──
   Sitzt zwischen Einordnung und Kapitel 01 und bleibt hell getoent. Die
   dunkle Flaeche der Seite ist Kapitel 06; ein zweiter dunkler Block
   wuerde die Dramaturgie verwaessern. Dunkel ist hier nur der Player. */
.dpp-film {
  padding: 3.5rem 0;
  background:
    radial-gradient(760px 460px at 15% 0%, rgba(14,94,105,.055) 0%, transparent 68%),
    var(--paper-warm);
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-film__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.dpp-film__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: 0 2px 6px rgba(0,31,61,.14), 0 30px 58px -34px rgba(0,31,61,.7);
}
.dpp-film__screen img,
.dpp-film__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.dpp-film__screen img { object-fit: cover; }

/* Die Titelkarte traegt unten links selbst Text. Der Schleier deckt
   deshalb nur so weit, dass der Knopf fuehrt und die Schrift lesbar
   bleibt. */
.dpp-film__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  color: #fff;
  background: linear-gradient(to bottom, rgba(4,18,34,.3), rgba(4,18,34,.52));
  transition: background .25s var(--ease-out-expo);
}
.dpp-film__veil:hover { background: linear-gradient(to bottom, rgba(4,18,34,.2), rgba(4,18,34,.4)); }
.dpp-film__veil:focus-visible { outline: 3px solid var(--pim-soft); outline-offset: -6px; }
.dpp-film__play {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--pim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6);
  transition: transform .3s var(--ease-out-expo);
}
.dpp-film__veil:hover .dpp-film__play { transform: scale(1.07); }
.dpp-film__veil:active .dpp-film__play { transform: scale(.98); }
.dpp-film__play svg { width: 25px; height: 25px; margin-left: 3px; }
.dpp-film__cue {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.dpp-film__note {
  margin: .85rem 0 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--mute);
}

.dpp-film__meta {
  display: block;
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pim);
}
.dpp-film__text h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--navy-dark);
}
.dpp-film__text p {
  margin: 0 0 1.1rem;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--mute);
}
.dpp-film__list { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.dpp-film__list li {
  position: relative;
  padding: .5rem 0 .5rem 1.5rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--mute);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-film__list li:last-child { border-bottom: none; }
.dpp-film__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .95rem;
  width: 8px; height: 1.5px;
  background: var(--pim);
}
.dpp-film__link {
  font-weight: 600;
  font-size: .9rem;
  color: var(--pim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ease-out-expo);
}
.dpp-film__link:hover { color: var(--navy); }
.dpp-film__link:focus-visible { outline: 2px solid var(--pim); outline-offset: 3px; }

/* ── Kapitel ── */
.dpp-chapter { padding: 4.5rem 0; background: var(--paper); }
.dpp-chapter--tint {
  background:
    radial-gradient(800px 500px at 85% 10%, rgba(14,94,105,.05) 0%, transparent 70%),
    var(--paper-warm);
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-chapter--faq { background: var(--paper-warm); border-top: 1px solid var(--gray-light); }
.dpp-chapter--dark { background: var(--navy-dark); }

.dpp-chapter__head { max-width: 62ch; margin-bottom: 2.75rem; }
.dpp-chapter__marker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pim);
}
.dpp-chapter__marker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--pim-soft);
  font-size: .74rem;
  letter-spacing: 0;
}
.dpp-chapter__head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--navy-dark);
}
.dpp-chapter__lede {
  margin: 1.25rem 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--mute);
}
.dpp-chapter--dark .dpp-chapter__head h2 { color: #fff; }
.dpp-chapter--dark .dpp-chapter__marker { color: var(--steel-soft); }
.dpp-chapter--dark .dpp-chapter__marker span { border-color: rgba(255,255,255,.25); }

/* ── Kennzahl mit Zitat ── */
.dpp-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin: 0 0 3rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-stat__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.75rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--pim);
}
.dpp-stat__text { margin: 0; }
.dpp-stat__text p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--mute);
  max-width: 62ch;
}
/* Quellenangabe unter der Zahl: leiser als die Aussage, aber belegbar. */
.dpp-stat__text p.dpp-stat__src {
  margin-top: .7rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--steel);
}
.dpp-stat__src a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-color: var(--steel-soft);
  transition: color .2s var(--ease-out-expo), text-decoration-color .2s var(--ease-out-expo);
}
.dpp-stat__src a:hover,
.dpp-stat__src a:focus-visible { color: var(--pim); text-decoration-color: var(--pim); }

/* ── Gegenüberstellung ohne Karten ── */
.dpp-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.dpp-versus__col { padding-top: 1rem; border-top: 3px solid var(--gray); }
.dpp-versus__col--after { border-top-color: var(--pim); }
.dpp-versus__col h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--navy-dark);
}
.dpp-versus__col--after h3 { color: var(--pim); }
.dpp-versus__col ul { margin: 0; padding: 0; list-style: none; }
.dpp-versus__col li {
  padding: .6rem 0 .6rem 1.5rem;
  position: relative;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--mute);
  border-bottom: 1px solid var(--gray-light);
}
.dpp-versus__col li:last-child { border-bottom: none; }
.dpp-versus__col li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05rem;
  width: 8px; height: 1.5px;
  background: var(--gray);
}
.dpp-versus__col--after li::before { background: var(--pim); }

/* ── Erläuterungsblöcke ── */
.dpp-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.dpp-note-card {
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.dpp-note-card h3 {
  margin: 0 0 .65rem;
  font-size: 1rem;
  color: var(--navy-dark);
}
.dpp-note-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--mute);
}
.dpp-note-card--accent {
  background: var(--pim-pale);
  border-color: rgba(14,94,105,.2);
}
.dpp-note-card--accent h3 { color: #0b4a53; }
.dpp-note-card--accent p  { color: #21545c; }
/* Steht nur eine Karte in der Reihe, soll sie nicht auf halber Breite
   haengen bleiben — aber auch nicht ueber die Lesebreite hinauslaufen. */
.dpp-notes--single { grid-template-columns: minmax(0, 46rem); }

/* ── Drei Handgriffe: durchnummerierte Liste mit Verbindungslinie ── */
.dpp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  counter-reset: dpp-step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dpp-step {
  counter-increment: dpp-step;
  position: relative;
  padding-top: 2.75rem;
  border-top: 1px solid var(--gray-light);
}
.dpp-step::before {
  content: counter(dpp-step, decimal-leading-zero);
  position: absolute;
  top: -1px; left: 0;
  padding-right: .75rem;
  background: var(--paper-warm);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pim);
  transform: translateY(-45%);
}
.dpp-chapter:not(.dpp-chapter--tint) .dpp-step::before { background: var(--paper); }
.dpp-step h3 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--navy-dark); }
.dpp-step p  { margin: 0; font-size: .92rem; line-height: 1.75; color: var(--mute); }

.dpp-closing {
  margin: 2.5rem 0 0;
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--navy-dark);
  font-weight: 500;
  padding-left: 1.25rem;
  border-left: 3px solid var(--pim);
}

/* ── Merkposten ── */
.dpp-merk { margin-top: 3rem; }
.dpp-merk__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.dpp-merk__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 3rem;
  margin: 0;
}
.dpp-merk__list dt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pim);
  margin-bottom: .4rem;
}
.dpp-merk__list dd {
  margin: 0;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--mute);
}

/* ── Sichtbarkeitsmatrix ──
   Kern der Seite. Ohne JavaScript steht die vollstaendige Tabelle
   da; die Umschalter blenden anschliessend nur noch ab. */
.dpp-matrix { margin-top: 1rem; }
.dpp-matrix__switch {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.dpp-switch {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-out-expo);
}
.dpp-switch:hover { background: var(--pim-pale); border-color: var(--pim-soft); }
.dpp-switch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.dpp-switch:active { transform: translateY(1px); }
.dpp-switch.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.dpp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
}
.dpp-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .88rem;
}
.dpp-table th,
.dpp-table td {
  padding: .8rem .9rem;
  text-align: center;
  border-bottom: 1px solid var(--gray-light);
  vertical-align: middle;
}
.dpp-table tbody th[scope="row"],
.dpp-table thead th:first-child {
  text-align: left;
  padding-left: 1.5rem;
  color: var(--ink);
  font-weight: 500;
}
.dpp-table thead th {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--paper-warm);
  border-bottom: 2px solid var(--gray-light);
}
.dpp-table thead th.col-kunde     { color: var(--pim);   }
.dpp-table thead th.col-recycling { color: var(--tasks); }
.dpp-table thead th.col-behoerde  { color: var(--navy);  }
.dpp-table tbody tr:last-child th,
.dpp-table tbody tr:last-child td { border-bottom: none; }
.dpp-table tbody tr:hover { background: rgba(14,94,105,.03); }

/* Punkt = freigegeben, Ring = bleibt im Haus. Farbe kommt aus der Spalte. */
.dpp-dot {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--gray);
  background: transparent;
  vertical-align: middle;
}
.dpp-dot.is-on { border-color: transparent; background: var(--steel); }
.col-kunde     .dpp-dot.is-on { background: var(--pim);   }
.col-recycling .dpp-dot.is-on { background: var(--tasks); }
.col-behoerde  .dpp-dot.is-on { background: var(--navy);  }

.dpp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--mute);
}
.dpp-legend__item { display: inline-flex; align-items: center; gap: .45rem; }
.dpp-legend__item .dpp-dot.is-on { background: var(--pim); }
.dpp-legend__note { margin-left: auto; font-style: italic; }

/* Umschalt-Zustaende: nicht gewaehlte Spalten treten zurueck,
   verschwinden aber nicht — der Vergleich ist der Punkt. */
.dpp-matrix[data-audience="kunde"]     td.col-recycling,
.dpp-matrix[data-audience="kunde"]     th.col-recycling,
.dpp-matrix[data-audience="kunde"]     td.col-behoerde,
.dpp-matrix[data-audience="kunde"]     th.col-behoerde,
.dpp-matrix[data-audience="recycling"] td.col-kunde,
.dpp-matrix[data-audience="recycling"] th.col-kunde,
.dpp-matrix[data-audience="recycling"] td.col-behoerde,
.dpp-matrix[data-audience="recycling"] th.col-behoerde,
.dpp-matrix[data-audience="behoerde"]  td.col-kunde,
.dpp-matrix[data-audience="behoerde"]  th.col-kunde,
.dpp-matrix[data-audience="behoerde"]  td.col-recycling,
.dpp-matrix[data-audience="behoerde"]  th.col-recycling {
  opacity: .22;
}
.dpp-table td[class*="col-"],
.dpp-table th[class*="col-"] { transition: opacity .22s ease; }

/* ── Normenregister ── */
.dpp-table--norms { min-width: 720px; }
.dpp-table--norms td { text-align: left; }
.dpp-table--norms thead th { text-align: left; }
.dpp-table--norms tbody th[scope="row"] { white-space: nowrap; }
.dpp-norm {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
}
.dpp-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.dpp-status.is-done { background: var(--pim-pale); color: #0b4a53; }
.dpp-status.is-open { background: var(--rag-pale); color: #9c5600; }

/* ── Ablaufbild: Aenderung an der Ware erzeugt einen neuen Stand ── */
.dpp-flow {
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  overflow-x: auto;
}
.dpp-flow svg { width: 100%; min-width: 720px; height: auto; display: block; }
.dpp-flow__line {
  stroke: var(--steel-soft);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  fill: none;
}
.dpp-flow__line--new { stroke: var(--pim); }
.dpp-flow__line--fix { stroke: var(--rag); }
.dpp-flow__node rect,
.dpp-flow__node path {
  fill: var(--paper-warm);
  stroke: var(--steel-soft);
  stroke-width: 1.4;
}
.dpp-flow__node text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--navy-dark);
  text-anchor: middle;
}
.dpp-flow__node--q path { fill: var(--paper); stroke: var(--navy); }
.dpp-flow__node--q text { font-size: 11px; }
.dpp-flow__node--new rect { fill: var(--pim-pale); stroke: var(--pim); }
.dpp-flow__node--fix rect { fill: var(--rag-pale); stroke: var(--rag); }
.dpp-flow__sub {
  font-size: 10px;
  font-weight: 500;
  fill: var(--mute);
  font-family: var(--font-mono);
}
.dpp-flow__edge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  fill: var(--mute);
  text-anchor: middle;
}
.dpp-flow__result rect {
  fill: var(--paper-warm);
  stroke: var(--gray-light);
  stroke-width: 1;
}
.dpp-flow__result--new rect { stroke: var(--pim); stroke-width: 1.5; }
.dpp-flow__result--fix rect { stroke: var(--rag); stroke-width: 1.5; }
.dpp-flow__keep rect { fill: var(--gray-pale); stroke: var(--gray-light); }
/* Beschriftungen der Ergebnisflaechen sitzen mittig unter ihrem Zweig. */
.dpp-flow__keep text,
.dpp-flow__result text { text-anchor: middle; }
.dpp-flow__rtitle {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--navy-dark);
}
.dpp-flow__rtext {
  font-family: var(--font-sans);
  font-size: 11.5px;
  fill: var(--mute);
}

/* ── Offene Punkte (dunkles Kapitel) ── */
.dpp-honest { max-width: 68ch; }
.dpp-honest p {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(244,239,230,.75);
  margin: 0 0 1.25rem;
}
.dpp-honest__lead {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rag);
}

/* Die FAQ-Liste des Themes ist mittig gesetzt. Auf dieser Seite sind
   alle Ueberschriften linksbuendig, deshalb zieht sie hier nach links. */
.dpp-chapter--faq .faq-list { margin-left: 0; }
.dpp-chapter--faq .faq-item { background: var(--paper); }

.dpp-standnote {
  margin: 2.5rem 0 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--steel);
  font-style: italic;
}

/* ── Teaser am Ende des Produktpass-Abschnitts auf /pim/ ── */
.dpp-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  background: var(--pim-pale);
  border: 1px solid rgba(14,94,105,.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.dpp-teaser__text { flex: 1 1 24rem; }
.dpp-teaser__text h3 { margin: 0 0 .5rem; font-size: 1.1rem; color: #0b4a53; }
.dpp-teaser__text p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: #21545c;
  max-width: 62ch;
}
.dpp-teaser .btn { flex-shrink: 0; }

/* Hinweis unter der PIM-FAQ auf die Produktpass-FAQ. */
.faq-more {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .92rem;
  color: var(--mute);
}
.faq-more a {
  color: var(--pim);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-more a:hover { color: var(--navy); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .dpp-head__grid,
  .dpp-intro__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .dpp-abstract { border-left-width: 3px; }
}
@media (max-width: 900px) {
  .dpp-chapter { padding: 3.25rem 0; }
  .dpp-film { padding: 2.75rem 0; }
  .dpp-film__grid { grid-template-columns: 1fr; gap: 2rem; }
  .dpp-versus,
  .dpp-notes,
  .dpp-merk__list { grid-template-columns: 1fr; gap: 1.5rem; }
  .dpp-versus { gap: 2.25rem; }
  .dpp-steps  { grid-template-columns: 1fr; gap: 2.25rem; }
  .dpp-stat   { grid-template-columns: 1fr; gap: .75rem; }
}
@media (max-width: 640px) {
  .dpp-head { padding: 2.5rem 0 2.25rem; }
  .dpp-head__eyebrow { gap: .35rem .9rem; margin-bottom: 1.5rem; }
  .dpp-head__eyebrow > * + *::before { margin-right: .9rem; }
  .dpp-crumbs { gap: .4rem; letter-spacing: .08em; }
  .dpp-head__actions .btn { width: 100%; justify-content: center; }
  .dpp-abstract { padding: 1.25rem 1.25rem; }
  .dpp-chapters { top: 60px; }
  .dpp-chapters__list a { padding: .75rem .7rem; font-size: .8rem; }
  .dpp-page [id] { scroll-margin-top: 110px; }
  .dpp-chapter__head { margin-bottom: 2rem; }
  .dpp-legend__note { margin-left: 0; width: 100%; }
  .dpp-note-card { padding: 1.25rem 1.25rem; }
  .dpp-flow { padding: 1rem .75rem; }
  .dpp-film__play { width: 58px; height: 58px; }
  .dpp-film__play svg { width: 21px; height: 21px; }
  .dpp-film__cue { font-size: .88rem; }
  .dpp-teaser { padding: 1.35rem 1.25rem; gap: 1.25rem; }
  .dpp-teaser .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   HOMEPAGE-FUNNEL (31.08.2026)
   Die Startseite ist von einem Produktkatalog auf einen Funnel
   umgestellt: Problem -> Zielbild -> Plattform -> Vorgehen ->
   Beleg -> Erstgespraech -> Ueber uns -> Branchen -> FAQ -> CTA.
   Alles unter .hp-* gehoert nur der Startseite.
   ============================================================ */

/* ── Wiederholter CTA nach jedem Abschnitt ───────────────── */
.hp-cta-inline {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 1rem 1.25rem;
  text-align: center;
}
.hp-cta-inline--left { justify-content: flex-start; text-align: left; margin-top: 2.25rem; }
.hp-cta-inline__note {
  font-size: .875rem; color: var(--mute); line-height: 1.6; max-width: 42ch;
}

/* ── Vorgehen: vier Schritte auf einer Linie ─────────────── */
.hp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem;
  position: relative;
}
/* durchgehende Linie hinter den Nummernkreisen */
.hp-steps::before {
  content: ''; position: absolute;
  top: 27px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(to right, var(--steel-pale), var(--steel-pale));
  z-index: 0;
}
.hp-step { position: relative; z-index: 1; }
.hp-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--steel-pale);
  font-family: var(--font-mono); font-size: .95rem; letter-spacing: .02em;
  color: var(--navy); margin-bottom: 1.25rem;
  box-shadow: var(--shadow-blue-sm);
  transition: border-color .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
.hp-step:hover .hp-step__num {
  border-color: var(--navy); box-shadow: var(--shadow-blue);
}
.hp-step h3 { font-size: 1.05rem; color: var(--navy); margin: 0 0 .6rem; }
.hp-step p  { font-size: .92rem; line-height: 1.75; color: var(--mute); margin: 0; }

/* ── Belegband: die drei Zahlen ──────────────────────────── */
.hp-proof {
  padding: 4.5rem 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  position: relative; overflow: hidden;
}
.hp-proof::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 340px at 78% 30%, rgba(237,130,0,.14), transparent 70%);
}
.hp-proof .container { position: relative; z-index: 1; }
.hp-proof__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
  text-align: center;
}
.hp-proof__item { position: relative; }
.hp-proof__item + .hp-proof__item::before {
  content: ''; position: absolute; left: -1.25rem; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,.14);
}
.hp-proof__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1;
  letter-spacing: -0.03em; color: #fff;
}
.hp-proof__label {
  display: block; margin-top: .6rem;
  font-size: .95rem; color: var(--steel-soft); line-height: 1.5;
}
.hp-proof__note {
  margin: 2.75rem auto 0; max-width: 62ch; text-align: center;
  font-size: .95rem; line-height: 1.75; color: rgba(255,255,255,.7);
}

/* ── Erstgespraech ───────────────────────────────────────── */
.hp-talk__grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: center;
}
.hp-talk__text h2 { margin-top: 1rem; }
.hp-talk__text p  { font-size: 1rem; line-height: 1.8; color: var(--mute); margin-top: 1.25rem; }

.hp-talk__card {
  list-style: none; margin: 0; padding: 2.25rem;
  background: var(--paper-warm); border: 1px solid var(--blush);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 1.5rem;
  box-shadow: var(--shadow-blue-sm);
}
.hp-talk__item { display: grid; grid-template-columns: 34px 1fr; gap: 1rem; align-items: start; }
.hp-talk__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1;
}
.hp-talk__item h3 { font-size: .98rem; color: var(--navy); margin: .35rem 0 .35rem; }
.hp-talk__item p  { font-size: .9rem; line-height: 1.7; color: var(--mute); margin: 0; }

@media (max-width: 1024px) {
  .hp-steps { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.75rem; }
  .hp-steps::before { display: none; }
  .hp-talk__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 900px) {
  .hp-proof { padding: 3.5rem 0; }
  .hp-proof__grid { gap: 2rem 1.5rem; }
  .hp-proof__item + .hp-proof__item::before { left: -.75rem; }
}

@media (max-width: 640px) {
  .hp-steps { grid-template-columns: 1fr; gap: 2rem; }
  .hp-step__num { width: 46px; height: 46px; margin-bottom: 1rem; }
  .hp-proof__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hp-proof__item + .hp-proof__item::before { display: none; }
  .hp-proof__item + .hp-proof__item { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); }
  .hp-proof__note { margin-top: 2rem; font-size: .9rem; }
  .hp-talk__card { padding: 1.5rem 1.25rem; gap: 1.25rem; }
  .hp-cta-inline { margin-top: 2.25rem; }
  .hp-cta-inline .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   HP-SPLIT: Problem und Zielbild (31.08.2026)
   Bewusst KEINE Karten. Die Benefit-/Produktkarten sind auf der
   ganzen Site die Sprache fuer Funktionen; Problem und Zielbild
   sollen wie eine Befundliste lesen, nicht wie ein Featureset.
   Deshalb: stehende Ueberschriftenspalte links, rechts eine
   Liste aus Haarlinien ohne Rahmen, Rundung und Icon-Kachel.
   ============================================================ */
.hp-split { padding: 6rem 0; background: var(--paper); }

.hp-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 5rem;
  align-items: start;
}

/* Die Ueberschrift bleibt stehen, waehrend die Befunde durchlaufen.
   Das ist der Grid-Break, den es sonst nirgends auf der Seite gibt. */
.hp-split__aside {
  position: sticky;
  top: 120px;
  align-self: start;
}
.hp-split__eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 1.5rem;
}
.hp-split__eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 28px; height: 1px; background: var(--error);
  margin-right: .9rem; opacity: .7;
}
.hp-split__aside h2 {
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.08; letter-spacing: -0.03em;
  color: var(--navy); margin: 0;
  text-wrap: balance;
}
.hp-split__aside p {
  margin-top: 1.5rem; font-size: 1rem; line-height: 1.8;
  color: var(--mute); max-width: 44ch;
}

.hp-split__list { list-style: none; margin: 0; padding: 0; }

.hp-split__item {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 0;
  padding: 2rem 0;
  border-top: 1px solid var(--gray-light);
  position: relative;
}
.hp-split__item:last-child { border-bottom: 1px solid var(--gray-light); }
/* Die Linie faerbt sich beim Ueberfahren ein, der Text ruckt leicht nach. */
.hp-split__item::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--error);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out-expo);
}
.hp-split__item:hover::before { transform: scaleX(1); }
.hp-split__body { transition: transform .35s var(--ease-out-expo); }
.hp-split__item:hover .hp-split__body { transform: translateX(4px); }

.hp-split__idx {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em;
  color: var(--error); opacity: .75; line-height: 1.9; padding-top: .1rem;
}
.hp-split__body h3 {
  font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--navy); margin: 0 0 .55rem;
}
.hp-split__body p {
  margin: 0; font-size: .95rem; line-height: 1.8; color: var(--mute);
}

/* ── Dunkles Gegenstueck: das Zielbild ───────────────────── */
.hp-split--dark {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  position: relative; overflow: hidden;
}
.hp-split--dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 520px at 88% 18%, rgba(237,130,0,.16), transparent 68%);
}
.hp-split--dark .container { position: relative; z-index: 1; }
.hp-split--dark .hp-split__eyebrow { color: var(--steel-soft); }
.hp-split--dark .hp-split__eyebrow::before { background: var(--rag); opacity: 1; }
.hp-split--dark .hp-split__aside h2 { color: #fff; }
.hp-split--dark .hp-split__aside h2 em { font-style: italic; font-weight: 500; color: var(--rag); }
.hp-split--dark .hp-split__aside p { color: rgba(255,255,255,.72); }
.hp-split--dark .hp-split__item { border-top-color: rgba(255,255,255,.14); }
.hp-split--dark .hp-split__item:last-child { border-bottom-color: rgba(255,255,255,.14); }
.hp-split--dark .hp-split__item::before { background: var(--rag); }
.hp-split--dark .hp-split__idx { color: var(--rag); opacity: 1; }
.hp-split--dark .hp-split__body h3 { color: #fff; }
.hp-split--dark .hp-split__body p  { color: rgba(255,255,255,.7); }

@media (max-width: 1024px) {
  .hp-split { padding: 4.5rem 0; }
  .hp-split__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .hp-split__aside { position: static; }
  .hp-split__aside p { max-width: none; }
}

@media (max-width: 640px) {
  .hp-split { padding: 3.5rem 0; }
  .hp-split__item { grid-template-columns: 2.5rem 1fr; padding: 1.5rem 0; }
  .hp-split__idx { font-size: .72rem; }
  .hp-split__body h3 { font-size: 1.05rem; }
  .hp-split__body p  { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-split__item::before,
  .hp-split__body { transition: none; }
}

/* Branchen-Ueberschrift auf der Startseite: die globale h2-Groesse
   (bis 64px) trieb den Titel auf drei Zeilen. Hier bewusst kleiner. */
#branchen .section__header h2 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); }

/* ============================================================
   PLATTFORM-SEITE (.pf-*)
   Bausteinsystem, Futter-Karten und Konfigurator auf /plattform/.
   Bewusst eigene Klassen: die .roi__*-Bausteine der Preisseite
   werden mitbenutzt, aber nicht veraendert.
   ============================================================ */

/* ── Bausteinsystem: Chips ── */
.pf-kit__chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.pf-chip {
  --pf-c: var(--steel);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: 1.35rem 1.25rem 1.15rem;
  border: 1.5px dashed var(--gray-light);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform .25s var(--ease-out-expo),
              box-shadow .25s ease,
              border-color .2s ease,
              background-color .2s ease;
}
.pf-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pf-c);
  opacity: .22;
  transition: opacity .2s ease, top .25s var(--ease-out-expo), bottom .25s var(--ease-out-expo);
}
.pf-chip__mark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--mute);
  transition: color .2s ease;
}
.pf-chip__name {
  font-size: .82rem;
  color: var(--mute);
  line-height: 1.35;
}
.pf-chip__state {
  position: absolute;
  top: .85rem; right: .9rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-soft);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-pill);
  padding: .18rem .5rem;
  transition: all .2s ease;
}
.pf-chip:hover  { transform: translateY(-3px); box-shadow: var(--shadow-blue-sm); }
.pf-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pf-chip:active { transform: translateY(-1px); }

.pf-chip[aria-pressed="true"] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--pf-c) 45%, transparent);
  background: color-mix(in srgb, var(--pf-c) 7%, var(--paper));
  box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--pf-c) 80%, transparent);
}
.pf-chip[aria-pressed="true"]::before { opacity: 1; top: 0; bottom: 0; }
.pf-chip[aria-pressed="true"] .pf-chip__mark { color: var(--pf-c); }
.pf-chip[aria-pressed="true"] .pf-chip__name { color: var(--ink); }
.pf-chip[aria-pressed="true"] .pf-chip__state {
  color: var(--paper);
  background: var(--pf-c);
  border-color: var(--pf-c);
}
.pf-chip--pim   { --pf-c: var(--pim); }
.pf-chip--dms   { --pf-c: #b08d00; }   /* DMS-Gelb ist auf Weiss zu hell fuer Text */
.pf-chip--tasks { --pf-c: var(--tasks); }
.pf-chip--ki    { --pf-c: var(--rag); }

/* ── Bausteinsystem: Ergebnis-Panel ── */
.pf-kit__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.75rem 2.25rem;
  color: #fff;
  min-height: 260px;
}
.pf-kit__main,
.pf-kit__aside { position: relative; z-index: 1; }
.pf-kit__aside {
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 2.5rem;
  align-self: stretch;
}
.pf-kit__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px 380px at 88% 8%, rgba(237,130,0,.16), transparent 70%);
}
.pf-kit__panel > * { position: relative; z-index: 1; }
.pf-kit__meter {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.pf-kit__bars { display: flex; gap: 5px; }
.pf-kit__bars i {
  display: block;
  width: 30px; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.12);
  transition: background-color .3s var(--ease-out-expo);
}
.pf-kit__bars i.on { background: linear-gradient(90deg, #ffc680, #ed8200); }
.pf-kit__meter span {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.pf-kit__panel h3 {
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -.02em;
  margin: 0 0 .85rem;
  max-width: 46ch;
}
.pf-kit__panel p {
  color: rgba(255,255,255,.74);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}
.pf-kit__gap {
  color: rgba(255,255,255,.55) !important;
  font-size: .92rem !important;
  line-height: 1.65 !important;
}
.pf-kit__gap:empty { display: none; }
.pf-kit__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.pf-kit__gap:empty + .pf-kit__links { margin-top: 0; }
.pf-kit__links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  padding: .4rem .85rem;
  transition: transform .2s var(--ease-out-expo), background-color .2s ease, border-color .2s ease;
}
.pf-kit__links a:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
}
.pf-kit__links a:focus-visible { outline: 2px solid var(--rag); outline-offset: 2px; }

/* ── Was in die Bausteine reinkommt ── */
.pf-feed__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.pf-feed__card {
  --pf-c: var(--steel);
  position: relative;
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-blue-sm);
}
.pf-feed__card::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--pf-c);
}
.pf-feed__tag {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pf-c);
  font-weight: 600;
}
.pf-feed__card h3 {
  font-size: 1.02rem;
  margin: .5rem 0 1.1rem;
  letter-spacing: -.01em;
}
.pf-feed__list { list-style: none; padding: 0; margin: 0; }
.pf-feed__list li {
  position: relative;
  padding: .5rem 0 .5rem 1.15rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
  border-top: 1px solid var(--gray-pale);
}
.pf-feed__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pf-c);
}
.pf-feed__card--pim   { --pf-c: var(--pim); }
.pf-feed__card--dms   { --pf-c: #b08d00; }
.pf-feed__card--tasks { --pf-c: var(--tasks); }
.pf-feed__card--ki {
  --pf-c: var(--rag);
  background: var(--navy-dark);
  border-color: transparent;
  color: #fff;
  overflow: hidden;
}
.pf-feed__card--ki::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px 240px at 80% 0%, rgba(237,130,0,.2), transparent 70%);
}
.pf-feed__card--ki > * { position: relative; z-index: 1; }
.pf-feed__card--ki h3 { color: #fff; }
.pf-feed__nix {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--rag);
  line-height: 1;
  display: block;
  margin-bottom: .85rem;
}
.pf-feed__card--ki p {
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  margin: 0 0 .85rem;
}
.pf-feed__card--ki p:last-child { margin-bottom: 0; }

/* ── Konfigurator ── */
.pf-cfg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 4rem;
  align-items: start;
}
/* Das Ergebnispanel ist hoeher als die Eingaben. Es ueber beide Zeilen
   zu spannen laesst die Fussnote direkt unter die Eingaben rutschen,
   statt unter das gesamte Raster. Die Spalten muessen dabei explizit
   stehen, sonst zieht die automatische Platzierung das Panel nach links. */
.pf-cfg__inputs              { grid-column: 1; grid-row: 1; }
.pf-cfg__grid > .roi__results { grid-column: 2; grid-row: 1 / span 2; }
.pf-cfg__step { margin-bottom: 2rem; }
.pf-cfg__step > .roi__label { margin-bottom: .65rem; }
.pf-cfg__num {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .16em;
  color: var(--steel);
  margin-right: .55rem;
}
.pf-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-opt {
  font-family: var(--font-sans);
  font-size: .84rem;
  color: var(--mute);
  background: var(--paper);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-pill);
  padding: .5rem 1rem;
  cursor: pointer;
  transition: transform .2s var(--ease-out-expo), background-color .2s ease,
              border-color .2s ease, color .2s ease;
}
.pf-opt:hover { transform: translateY(-2px); border-color: var(--steel-pale); }
.pf-opt:active { transform: translateY(0); }
.pf-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pf-opt[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.pf-opt[aria-pressed="true"]:hover { background: var(--navy-soft); border-color: var(--navy-soft); }

/* ── Konfigurator: Empfehlung im dunklen Panel ── */
.pf-rec { margin-bottom: 1.5rem; }
.pf-rec__row {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .85rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pf-rec__row:last-child { border-bottom: none; }
.pf-rec__step {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  padding-top: .3rem;
}
.pf-rec__mod {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pf-rec__mod i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pf-c, var(--steel));
  flex-shrink: 0;
}
.pf-rec__why {
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
  margin-top: .2rem;
}
.pf-rec__hint {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rag);
  margin-bottom: .3rem;
}
.pf-rec__row:not(:first-child) .pf-rec__hint { color: rgba(255,255,255,.32); }
.pf-rec__off {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pf-rec__off:empty { display: none; }
/* Steht als dritter Rasterplatz unter der Eingabespalte: fuellt auf dem
   Desktop die Luecke neben dem hohen Ergebnispanel und rutscht auf
   schmalen Schirmen von selbst hinter das Ergebnis. */
.pf-cfg__note {
  grid-column: 1;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--mute);
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
  font-style: italic;
}

@media (max-width: 1024px) {
  .pf-kit__chips  { grid-template-columns: repeat(2, 1fr); }
  .pf-feed__grid  { grid-template-columns: repeat(2, 1fr); }
  .pf-cfg__grid   { grid-template-columns: 1fr; gap: 2.5rem; }
  .pf-cfg__inputs { grid-column: auto; grid-row: auto; }
  .pf-cfg__grid > .roi__results { grid-column: auto; grid-row: auto; }
  .pf-cfg__note   { grid-column: auto; }
  .pf-kit__panel  { grid-template-columns: 1fr; gap: 1.5rem; }
  .pf-kit__aside  {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

@media (max-width: 640px) {
  .pf-kit__chips  { grid-template-columns: 1fr; gap: .75rem; }
  .pf-feed__grid  { grid-template-columns: 1fr; }
  .pf-kit__panel  { padding: 1.75rem 1.5rem; }
  .pf-kit__bars i { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-chip, .pf-opt, .pf-kit__links a, .pf-kit__bars i { transition: none; }
}

/* ============================================================
   UEBER UNS  (/ueber-uns/)
   Editorial gehalten: Chronik mit Mono-Jahreszahlen, Haarlinien,
   ein dunkles Zwischenband. Bewusst KEINE Benefit-Karten und
   bewusst keine Produktfarbe, die Seite gehoert keinem Produkt.
   Alles unter .ab- gescopet.
   ============================================================ */

/* -- Herkunft: Text links, Faktenspalte rechts -------------------- */
.ab-origin { background: var(--paper); }

.ab-origin__grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 5rem;
  align-items: start;
}

.ab-origin__text h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.45rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--navy-dark);
  margin: 0 0 1.75rem;
  max-width: 22ch;
  text-wrap: balance;
}
.ab-origin__text p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}
.ab-origin__text p:last-child { margin-bottom: 0; color: var(--mute); }

/* Die Faktenspalte bleibt beim Scrollen stehen, damit sie neben dem
   laengeren Fliesstext nicht nach oben weglaeuft. */
.ab-origin__aside {
  position: sticky;
  top: 110px;
  padding-left: 2.5rem;
  border-left: 1px solid var(--gray-light);
}
.ab-facts__title {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1rem;
}
.ab-facts { margin: 0; }
.ab-facts__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1rem;
  padding: .8rem 0;
  border-top: 1px solid var(--gray-light);
}
.ab-facts__row dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: .18rem;
}
.ab-facts__row dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--navy-dark);
}
.ab-facts__claim {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--steel);
}
.ab-facts__claim sup { font-size: .6em; font-style: normal; }

/* -- Chronik ------------------------------------------------------ */
.ab-chron { background: var(--paper-warm); }

.ab-chron__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
}
.ab-chron__item {
  display: grid;
  grid-template-columns: 158px 1fr;
  gap: 2.75rem;
}
/* Die senkrechte Linie ist der rechte Rand der Jahresspalte. Sie traegt
   durch, weil der Abstand nach unten am Body haengt und die Rail-Spalte
   dadurch ueber die volle Zeilenhoehe streckt. */
.ab-chron__rail {
  position: relative;
  text-align: right;
  padding-right: 2rem;
  border-right: 1px solid var(--steel-pale);
}
.ab-chron__item--last .ab-chron__rail {
  border-right: none;
  background: linear-gradient(to bottom, var(--steel-pale) 0 3.5rem, transparent 3.5rem) right top / 1px 100% no-repeat;
}
.ab-chron__rail::after {
  content: "";
  position: absolute;
  right: -5px;
  top: .55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--paper-warm);
}
.ab-chron__year {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.ab-chron__year--soft {
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: .45rem;
}
.ab-chron__body { padding-bottom: 3.25rem; }
.ab-chron__item--last .ab-chron__body { padding-bottom: 0; }
.ab-chron__body h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy-dark);
  margin: 0 0 .7rem;
}
.ab-chron__body p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--mute);
  margin: 0;
  max-width: 58ch;
}
.ab-chron__link { margin-top: .9rem; }
.ab-chron__link a {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--steel-pale);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease-out-expo), color .25s var(--ease-out-expo);
}
.ab-chron__link a::after { content: " \2192"; }
.ab-chron__link a:hover { color: var(--navy-dark); border-bottom-color: var(--navy); }
.ab-chron__link a:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 2px; }

/* -- Dunkles Zwischenband: der Anlass ----------------------------- */
.ab-need {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 62%, var(--navy-soft) 100%);
}
/* Feines Raster als Textur, radial ausgeblendet, damit das Band nicht
   wie eine flache Farbflaeche wirkt. */
.ab-need::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 50%, black 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 20% 50%, black 10%, transparent 72%);
  pointer-events: none;
}
/* Die Leadspalte ist bewusst schmal: bei 1280px bleiben so rund 380px je
   Textspalte, darunter wird der zweispaltige Satz unleserlich schmal. Die
   Schlagzeile bricht dadurch zweizeilig um, das ist gewollt. */
.ab-need__grid {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 3.5rem;
  align-items: start;
}
.ab-need__lead h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
.ab-need__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.ab-need__cols p {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(255,255,255,.8);
}

/* -- Zusammenarbeit: nummerierte Haarlinien, keine Karten --------- */
.ab-how { background: var(--paper); }

.ab-how__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
}
.ab-how__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2.1rem 0;
  border-top: 1px solid var(--gray-light);
}
.ab-how__item:last-child { border-bottom: 1px solid var(--gray-light); }
.ab-how__num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--steel-soft);
  transition: color .35s var(--ease-out-expo);
}
.ab-how__item:hover .ab-how__num { color: var(--navy); }
.ab-how__item h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy-dark);
  margin: 0 0 .6rem;
}
.ab-how__item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--mute);
  max-width: 62ch;
}

/* -- Zitat mit Portraet ------------------------------------------- */
.ab-voice { background: var(--paper); padding: 0 0 5rem; }

/* Schmaler als der Container: das Zitat ist kurz, ueber die volle Breite
   bliebe rechts unten ein grosses Loch im Panel. */
.ab-voice__grid {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: center;
  padding: 2.75rem 3.5rem 2.75rem 2.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  box-shadow: var(--shadow-navy);
  position: relative;
  overflow: hidden;
}
.ab-voice__portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(0,10,25,.7);
}
.ab-voice__portrait img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: 50% 20%;
}
/* Farbschleier plus Verlauf von unten, damit das Foto zum Navy-Panel passt
   und die Kante nach unten nicht hart abbricht. */
.ab-voice__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: multiply;
  opacity: .28;
  pointer-events: none;
}
.ab-voice__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,31,61,.6) 0%, transparent 55%);
  pointer-events: none;
}
.ab-voice__quote { margin: 0; position: relative; }
.ab-voice__quote::before {
  content: "\201E";
  position: absolute;
  left: -2.4rem;
  top: -1.6rem;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(255,255,255,.13);
  pointer-events: none;
}
.ab-voice__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.ab-voice__quote footer {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.ab-voice__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.ab-voice__role {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-soft);
}

/* -- Was Sie davon haben ------------------------------------------ */
.ab-today { background: var(--paper-warm); }

.ab-today__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4.5rem;
  align-items: start;
}
.ab-today__text h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--navy-dark);
  margin: 0 0 1.75rem;
  max-width: 20ch;
  text-wrap: balance;
}
.ab-today__text p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}
.ab-today__text p:last-child { margin-bottom: 0; }

.ab-link {
  display: block;
  padding: 1.4rem 0;
  border-top: 1px solid var(--gray-light);
  text-decoration: none;
  transition: transform .35s var(--ease-out-expo);
}
.ab-link:last-child { border-bottom: 1px solid var(--gray-light); }
.ab-link:hover { transform: translateX(5px); }
.ab-link:active { transform: translateX(2px); }
.ab-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 4px; }
.ab-link__ttl {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: .35rem;
}
.ab-link__ttl::after {
  content: " \2192";
  color: var(--steel-soft);
  transition: color .3s var(--ease-out-expo);
}
.ab-link:hover .ab-link__ttl::after { color: var(--navy); }
.ab-link__sub {
  display: block;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--mute);
}

/* -- Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .ab-origin__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ab-origin__aside {
    position: static;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--gray-light);
    padding-top: 2rem;
  }
  .ab-need__grid  { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-today__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ab-voice__grid { grid-template-columns: 240px 1fr; gap: 2.5rem; padding: 2.5rem; }
}

@media (max-width: 768px) {
  /* Chronik stapelt: Jahr oben, darunter der Text an einer linken Linie. */
  .ab-chron__item { grid-template-columns: 1fr; gap: .5rem; }
  .ab-chron__rail {
    text-align: left;
    padding-right: 0;
    padding-left: 1.5rem;
    border-right: none;
    background: none;
  }
  .ab-chron__item--last .ab-chron__rail { background: none; }
  .ab-chron__rail::after { right: auto; left: -4px; top: .5rem; }
  .ab-chron__body {
    padding-left: 1.5rem;
    padding-bottom: 2.5rem;
    border-left: 1px solid var(--steel-pale);
  }
  .ab-chron__item--last .ab-chron__body { border-left-color: transparent; padding-bottom: 0; }
  .ab-chron__year { font-size: 1.25rem; }

  .ab-need__cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .ab-how__item  { grid-template-columns: 1fr; gap: .75rem; padding: 1.75rem 0; }
  .ab-how__num   { font-size: 1.4rem; }

  .ab-voice__grid { grid-template-columns: 1fr; padding: 2rem 1.75rem; gap: 2rem; }
  .ab-voice__portrait img { height: 260px; object-position: 50% 18%; }
  /* Gestapelt hat das Anfuehrungszeichen keinen Platz mehr, es landete
     hinter dem Portraet. */
  .ab-voice__quote::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-link, .ab-link__ttl::after, .ab-how__num, .ab-chron__link a { transition: none; }
  .ab-link:hover, .ab-link:active { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   VORSPANN (.lede)
   Antwortabsatz direkt unter dem Hero, 40 bis 60 Woerter.
   Erster Satz ist immer eine Definition ("X ist ein ..."), damit
   Google und die KI-Suchmaschinen die Kernfrage der Seite hier
   beantwortet finden und nicht erst im FAQ am Seitenende.

   Bewusst kein data-anim: [data-anim] startet auf opacity:0 und
   wird erst per JS sichtbar. Crawler ohne JS-Rendering saehen den
   Absatz sonst gar nicht, und genau fuer die ist er da.

   Bewusst keine Karte, kein Icon, kein Rahmen: der Absatz soll als
   Fliesstext gelesen werden, nicht als weitere Feature-Kachel.
   Akzentfarbe kommt per --lede-accent inline von der Seite,
   analog zu --ti-accent beim Themen-Index.
════════════════════════════════════════════════════════════ */
.lede {
  background: var(--paper);
  padding: 3.25rem 0 2.5rem;
}
/* Linksbuendig an der Container-Kante, nicht zentriert: der Absatz
   muss auf derselben Linie stehen wie die H1 darueber und die
   Abschnittsueberschrift darunter, sonst schwimmt er.
   Der Akzent liegt deshalb als kurzer Strich ueber dem Text und
   nicht als Linie daneben, die die Kante verschieben wuerde. */
.lede__inner {
  max-width: 68ch;
  margin: 0;
}
.lede__inner::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--lede-accent, var(--navy));
  margin-bottom: 1.5rem;
}
.lede__text {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.75;
  letter-spacing: -.005em;
  color: var(--ink);
}
.lede__text strong {
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 640px) {
  .lede               { padding: 2.25rem 0 1.75rem; }
  .lede__inner::before{ margin-bottom: 1.1rem; }
  .lede__text         { font-size: 1.04rem; line-height: 1.7; }
}


/* ════════════════════════════════════════════════════════════
   REVISIONSSICHERHEIT UND ARCHIVIERUNG (.rv-, nur /dms/)
   Fliesstext statt Karten. Die Begriffe revisionssicher,
   Archivierung und Aufbewahrungsfrist standen vorher nur als
   Kachelueberschrift und in den data-modal-Attributen; hier
   stehen sie im Satz. Rechts die Fristen als Definitionsliste,
   weil genau danach gesucht wird.
   Bewusst ohne data-anim: der Abschnitt ist fuer Suchmaschinen
   und Antwortmaschinen geschrieben, er soll ohne JS dastehen.
════════════════════════════════════════════════════════════ */
/* align-items bleibt auf stretch: nur wenn die Spalte die volle
   Zeilenhoehe hat, hat position:sticky in der Karte darin ueberhaupt
   Weg zum Mitlaufen. Mit align-items:start verhaelt sie sich statisch. */
.rv-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  margin-top: 3rem;
}
.rv-text p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-width: 62ch;
}
.rv-text p:last-child { margin-bottom: 0; }
.rv-text p strong { font-weight: 700; color: var(--navy); }
.rv-text h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 2.25rem 0 .85rem;
}

/* Die Fristenkarte laeuft beim Scrollen mit, weil der Text
   daneben deutlich laenger ist als sie. */
.rv-fristen {
  position: sticky;
  top: 6.5rem;
  background: #fff;
  border: 1px solid var(--gray-light);
  border-left: 3px solid var(--dms);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0,48,91,.04), 0 16px 32px -22px rgba(0,48,91,.3);
}
.rv-fristen__title {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 1.1rem;
}
.rv-fristen dl { margin: 0; }
.rv-frist {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: .9rem;
  padding: .95rem 0;
  border-top: 1px solid var(--gray-light);
}
.rv-frist:last-of-type { border-bottom: 1px solid var(--gray-light); }
.rv-frist dt {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.rv-frist dd {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--mute);
}
.rv-fristen__note {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--mute);
}

/* Ohne diese Zeile faellt die Spalte auf ihre Inhaltshoehe zusammen
   und die Karte darin klebt nicht mehr. */
.rv-aside { height: 100%; }

@media (max-width: 1024px) {
  .rv-grid    { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.25rem; }
  .rv-fristen { position: static; }
  .rv-text p  { max-width: none; }
}
@media (max-width: 480px) {
  .rv-frist { grid-template-columns: 1fr; gap: .2rem; }
}

/* ============================================================
   SCREENSHOT-TOUR (.shots)
   Echte Programmansichten statt abstrakter Diagramme.

   Fuenf Screenshots untereinander machten die Seite zu lang,
   deshalb liegt immer nur einer offen und die anderen haengen an
   einer Reiterleiste. Umgesetzt mit Radiobuttons statt JavaScript:
   funktioniert ohne Skript, die Pfeiltasten steuern die Auswahl
   von Haus aus, und alle fuenf Bilder bleiben im Quelltext, wo
   die Bildersuche sie findet.
   Zuerst eingesetzt auf /pim/, Abschnitt #einblick.
   ============================================================ */
.shots { margin-top: 2.5rem; }
.shots > input { position: absolute; opacity: 0; pointer-events: none; }

.shots__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.shots__tabs label {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 48, 91, .16);
  background: var(--paper, #fff);
  color: var(--mute);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color .18s var(--ease-out-expo, ease), border-color .18s var(--ease-out-expo, ease), background .18s var(--ease-out-expo, ease);
}
.shots__tabs label:hover { border-color: var(--pim, #0e5e69); color: var(--navy); }

.shot { margin: 0; display: none; }
.shot__frame {
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  background: var(--paper-soft, #f4f6f9);
  border: 1px solid rgba(0, 48, 91, .12);
  box-shadow: 0 1px 2px rgba(0, 48, 91, .06), 0 18px 40px -22px rgba(0, 48, 91, .38);
}
.shot__frame img { display: block; width: 100%; height: auto; }
.shot__text {
  display: grid;
  grid-template-columns: minmax(0, 25ch) minmax(0, 62ch);
  gap: 1.5rem 3rem;
  margin-top: 1.5rem;
  padding-left: .25rem;
}
.shot__text h3 {
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.shot__text p { margin: 0; color: var(--mute); line-height: 1.75; }

/* Aktiver Reiter und zugehoerige Tafel. Fuenf Paare, deshalb
   ausgeschrieben - eine Schleife gibt es in CSS nicht. */
.shots > input:nth-of-type(1):checked ~ .shots__tabs label:nth-of-type(1),
.shots > input:nth-of-type(2):checked ~ .shots__tabs label:nth-of-type(2),
.shots > input:nth-of-type(3):checked ~ .shots__tabs label:nth-of-type(3),
.shots > input:nth-of-type(4):checked ~ .shots__tabs label:nth-of-type(4),
.shots > input:nth-of-type(5):checked ~ .shots__tabs label:nth-of-type(5) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.shots > input:nth-of-type(1):checked ~ .shots__panels .shot:nth-of-type(1),
.shots > input:nth-of-type(2):checked ~ .shots__panels .shot:nth-of-type(2),
.shots > input:nth-of-type(3):checked ~ .shots__panels .shot:nth-of-type(3),
.shots > input:nth-of-type(4):checked ~ .shots__panels .shot:nth-of-type(4),
.shots > input:nth-of-type(5):checked ~ .shots__panels .shot:nth-of-type(5) {
  display: block;
}
/* Tastaturbedienung sichtbar machen: der Radiobutton ist versteckt,
   der Fokusring muss deshalb auf dem Label erscheinen. */
.shots > input:focus-visible ~ .shots__tabs label { outline: 1px dotted rgba(0, 48, 91, .35); }
.shots > input:nth-of-type(1):focus-visible ~ .shots__tabs label:nth-of-type(1),
.shots > input:nth-of-type(2):focus-visible ~ .shots__tabs label:nth-of-type(2),
.shots > input:nth-of-type(3):focus-visible ~ .shots__tabs label:nth-of-type(3),
.shots > input:nth-of-type(4):focus-visible ~ .shots__tabs label:nth-of-type(4),
.shots > input:nth-of-type(5):focus-visible ~ .shots__tabs label:nth-of-type(5) {
  outline: 2px solid var(--pim, #0e5e69);
  outline-offset: 2px;
}

/* Einzelne Ansicht: keine Reiterleiste noetig, die Tafel steht
   einfach offen. Ohne diese Regel bliebe sie verborgen, weil .shot
   im Grundzustand ausgeblendet ist. */
.shots--single .shot { display: block; }

/* Schmale Aufnahmen nicht hochrechnen: lieber in Originalgroesse
   zentriert stehen lassen als unscharf auf volle Breite ziehen. */
.shot--narrow .shot__frame { max-width: 950px; margin-left: auto; margin-right: auto; }

.shots__note {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(0, 48, 91, .12);
  color: var(--mute);
  line-height: 1.75;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .shots__tabs { gap: .4rem; margin-bottom: 1.25rem; }
  .shots__tabs label { padding: .45rem .8rem; font-size: .8rem; }
  .shot__text { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.1rem; }
}

/* ============================================================
   QUERVERWEISE IM FLIESSTEXT  (.xlink)
   ============================================================
   Die Produktseiten reden staendig voneinander ("die Belege
   gehen ins DMS"), verlinkten sich aber nicht. Diese Klasse ist
   der eine Stil dafuer, damit solche Verweise nicht als Streu-
   feld aus Inline-Styles enden - mit Inline-Styles gaebe es
   ausserdem weder :hover noch :focus-visible.

   Auf hellem Grund laufen alle Querverweise einheitlich in
   Navy. Die Produktfarbe als Unterlaengelinie ist hier bewusst
   NICHT eingebaut: --dms (#f3c200) ist auf Weiss selbst als
   Linie nicht mehr zu erkennen, und ein Leitsystem, das bei
   einem von fuenf Produkten unsichtbar wird, verwirrt mehr als
   es fuehrt. Welches Produkt gemeint ist, sagt der Ankertext.

   .xlink--on-dark ist die Variante fuer die dunklen Sektionen
   (navy-dark-Hintergruende): Text auf Weiss, und dort traegt
   die Produktfarbe die Linie sehr wohl, weil sie sich vom
   dunklen Grund abhebt. Sie kommt ueber --xlink-c und immer in
   der -soft-Stufe, sonst verschwindet sie im Hintergrund:
     <a class="xlink xlink--on-dark" style="--xlink-c:var(--pim-soft);" href="/pim/">
   ============================================================ */
.xlink {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--navy) 45%, transparent);
  transition: color .18s cubic-bezier(.22, 1, .36, 1),
              border-bottom-color .18s cubic-bezier(.22, 1, .36, 1);
}
.xlink:hover {
  color: var(--navy-dark);
  border-bottom-color: var(--navy);
}
.xlink:active { color: var(--navy-soft); }
.xlink:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.xlink--on-dark {
  color: #fff;
  border-bottom-color: color-mix(in srgb, var(--xlink-c, var(--steel-soft)) 65%, transparent);
}
.xlink--on-dark:hover { border-bottom-color: var(--xlink-c, var(--steel-soft)); }
.xlink--on-dark:active { color: var(--steel-pale); }
.xlink--on-dark:focus-visible { outline-color: #fff; }

/* Optionaler Pfeil am Ende eines Querverweises, gedacht fuer
   verlinkte Ueberschriften. Er rueckt beim Hover ein Stueck nach
   rechts, nur ueber transform, damit die Zeile nicht umbricht. */
.xlink__arrow {
  display: inline-block;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.xlink:hover .xlink__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .xlink, .xlink__arrow { transition: none; }
  .xlink:hover .xlink__arrow { transform: none; }
}

/* ============================================================
   HP-SHOTS  —  Produktoberflaechen auf der Startseite (07.09.2026)
   Abschnitt #einblick in gutenberg-blocks-homepage.html.

   Warum es diesen Abschnitt gibt: Die Startseite trug vorher genau ein
   Bild, das Portraet. Wer sehen wollte, wie die Software aussieht,
   musste erst eine Produktseite oeffnen — und wer das nicht tat, hat
   die Oberflaeche nie gesehen.

   Bewusst NICHT die .shot-Komponente der Produktseiten: die stellt ein
   Bild gross heraus und stellt einen Absatz danebe. Hier stehen drei
   Karten nebeneinander, jede mit einem Satz. Die Produktseiten bleiben
   der Ort fuer die ausfuehrliche Fassung.
   ============================================================ */
.hp-shots__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.hp-shot {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--blush);
  overflow: hidden;
  /* Nur transform und box-shadow animieren, kein transition-all. */
  transition:
    transform .3s var(--ease-out-expo),
    box-shadow .3s var(--ease-out-expo),
    border-color .3s var(--ease-out-expo);
}
.hp-shot:hover,
.hp-shot:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-navy);
  border-color: var(--steel);
}
.hp-shot:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.hp-shot:active { transform: translateY(-1px); }

/* Der Rahmen schneidet den Screenshot auf ein einheitliches Format.
   object-position:top left, weil bei allen drei Bildern oben links das
   Wesentliche steht (Baum, Beleg, Verlauf) und rechts unten nur Flaeche. */
.hp-shot__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--blush);
}
.hp-shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

.hp-shot__text { padding: 1.25rem 1.4rem 1.5rem; }

.hp-shot__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--shot-accent, var(--navy));
  margin-bottom: .5rem;
}
.hp-shot__text h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 .5rem;
  color: var(--navy);
}
.hp-shot__text p {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--mute);
  margin: 0;
}

@media (max-width: 980px) {
  .hp-shots__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Einspaltig ist ein 16:10-Ausschnitt sehr hoch. Flacher schneiden,
     damit der Abschnitt auf dem Handy nicht drei Bildschirme fuellt. */
  .hp-shot__frame { aspect-ratio: 16 / 8; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-shot { transition: none; }
  .hp-shot:hover, .hp-shot:focus-visible, .hp-shot:active { transform: none; }
}