/* ============================================================
   KURSIMPLE GMBH – Haupt-Stylesheet (styles.css)
   ============================================================
   Typografie:  Sora (Display/Headlines) + DM Sans (Fließtext)
   Design:      Refined Swiss-geometric, Brand-Blue Palette
   Farben:      Direkt aus dem K-Globe Logo abgeleitet
   Struktur:
     01. Reset & Basis
     02. Design-Tokens (CSS Custom Properties)
     03. Typografie-Basis
     04. Layout-Helfer (.container)
     05. Fokus-Stil / Skip-Link (Barrierefreiheit)
     06. Buttons
     07. Header / Navigation
     08. Dropdown-Navigation (shadcn-Stil)
     09. Hero / Slider
     10. Marken-Architektur
     11. Feature-Blöcke (KiSimple + DokSimple)
     12. App-Mockups
     13. Produktübersicht
     14. Vorteile
     15. Zielgruppen
     16. Messe-Callout
     17. Kontaktformular
     18. Footer
     19. Scroll-Reveal-Animationen
     20. Reduced Motion (Barrierefreiheit)
     21. Responsive (Breakpoints)
   ============================================================ */


/* ════════════════════════════════════
   01. RESET & BASIS
   ════════════════════════════════════
   Strikter Box-Model-Reset: Alle Elemente nutzen
   box-sizing:border-box, damit padding/border NICHT
   zur Gesamtgröße addiert werden (intuitiver).
   margin/padding auf 0 setzt Browser-Defaults zurück.
   ════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════════════════════════════
   02. DESIGN-TOKENS (CSS Custom Properties)
   ════════════════════════════════════
   Alle Farben, Abstände, Schatten und Transitions sind
   als CSS-Variablen in :root definiert. Das ermöglicht:
     • Konsistenz: Eine Farbe ändern → überall aktualisiert
     • Wartbarkeit: Kein "Magic-Number"-Suchen im Code
     • Theming: Zukünftige Dark-Mode-Variante per @media
       prefers-color-scheme ohne Selector-Duplikation

   Alias-Variablen (--teal → --blue) sichern Rückwärts-
   kompatibilität mit bestehenden Referenzen, die noch
   "teal" nutzen – beides zeigt auf dieselbe blaue Farbe.
   ════════════════════════════════════ */
:root {
  /* ── Brand Blues – direkt aus dem K-Globe Logo ──────────────
     Außenring/dunkelste Ebene : #0d2460  (tiefstes Navy)
     Hauptkugel                : #1a56b5  (Königsblau)
     Kugelglanz / Highlight    : #5cb3ec  (Hellblau)
     Orbit-Ring                : #3b82c4  (Mittelblau)
     K-Buchstabe (Stahl)       : #3d5f7a  (Stahlblau-Grau)
     Logotext                  : #111827  (Nahezu Schwarz)
  ─────────────────────────────────────────────────────────── */

  /* Primärfarben */
  --blue:       #1a56b5;   /* Hauptkugel – primäre Markenfarbe */
  --blue-dark:  #1244a0;   /* Hover / aktiv */
  --blue-deep:  #0d2460;   /* Außenring – tiefes Navy für Hero, Footer */
  --blue-mid:   #3b82c4;   /* Orbit-Ring – sekundärer Akzent */
  --blue-sky:   #5cb3ec;   /* Kugelglanz – Highlight / heller Akzent */
  --blue-light: #e8f3fd;   /* Sehr helles Blau – Oberflächen, Tints */
  --blue-glow:  rgba(26,86,181,.16);

  /* ── Neutrale Töne (blau-unterlegt, passend zum Logo) ── */
  --ink:        #0f1c2e;   /* Tiefstes Dunkelblau für Texte */
  --ink-80:     #1a2d42;
  --ink-60:     #2d4460;
  --mid:        #4a6585;   /* Stahlblau-Grau wie K-Buchstabe */
  --muted:      #7a90a8;   /* Abgedämpftes Blau-Grau */
  --border:     #d0e2f4;   /* Blau-getönte Borderlinie */
  --border-mid: #b0cce8;
  --surface:    #f0f6fc;   /* Sehr helle blau-getönte Fläche */
  --white:      #ffffff;

  /* ── Alias: teal → brand blue (alle bestehenden Referenzen) ──
     Das Projekt startete mit einem "Teal"-Farbschema, wurde
     aber auf das Markenblau migriert. Die Aliases erhalten
     die Rückwärtskompatibilität aller CSS-Stellen, die noch
     var(--teal) verwenden, ohne jeden Selektor umschreiben
     zu müssen.                                              ── */
  --teal:       var(--blue);
  --teal-dark:  var(--blue-dark);
  --teal-light: var(--blue-light);
  --teal-glow:  var(--blue-glow);

  /* ── Sky: heller Akzent speziell für DUNKLE Hintergründe ──
     --blue / --teal (#1a56b5) ist auf dem tiefen Navy (#0d2460)
     kaum zu erkennen (zu geringer Kontrast). --sky (#5cb3ec)
     ist deutlich heller und erfüllt WCAG AA auf dark backgrounds.
     Nutzung: Eyebrow-Texte, Counter-Werte, Scan-Line-Animation,
     DokSimple-Tag, Footer-Links-Hover, svg-Icons auf dunkel.  ── */
  --sky:        #5cb3ec;   /* = blue-sky – sichtbar auf dunkelblauem Grund */

  /* ── Produktfarben (alle aus der Logo-Palette) ── */
  --ki:         #1a56b5;   /* KiSimple = Königsblau (Hauptkugel) */
  --ki-light:   #eaf3fd;
  --ki-border:  #b0d0f0;
  --dok:        #0d2460;   /* DokSimple = Tiefstes Navy (Außenring) */
  --dok-light:  #e0eaf8;
  --dok-border: #a8c0e0;

  /* ── System-Tokens ──
     --focus-ring:  Globaler Fokus-Ring für Keyboard-Navigation
                    (3 px offset, halbtransparent = subtil, aber sichtbar)
     --radius-*:    Abgestufte Border-Radius-Skala (s=Buttons/Inputs,
                    m=Karten, l=große Container wie Hero-Slider)
     --shadow-*:    Dreistufiges Schatten-System (s=Header,
                    m=Cards/Modals, l=Hero-Elemente)
     --t:           Standard-Transition (200ms, smooth)
     --t-slow:      Federnde Transition für besondere Akzente
     --max:         Maximale Content-Breite (1120 px)              ── */
  --focus-ring: 0 0 0 3px rgba(26,86,181,.35);
  --radius-s:   6px;
  --radius-m:   14px;
  --radius-l:   24px;
  --shadow-s:   0 1px 4px rgba(10,15,30,.07), 0 1px 2px rgba(10,15,30,.05);
  --shadow-m:   0 4px 20px rgba(10,15,30,.10), 0 2px 6px rgba(10,15,30,.06);
  --shadow-l:   0 16px 48px rgba(10,15,30,.14), 0 4px 12px rgba(10,15,30,.07);
  --t:          .2s ease;
  --t-slow:     .45s cubic-bezier(.22,.68,0,1.2); /* Federt leicht über Zielwert */
  --max:        1120px;

  /* ── Typografie-Skala (rem-basiert, 1rem = 16px) ──
     Verwendet clamp() in Headlines für fluid Typography ohne
     viele Breakpoints. Die Skala folgt einer leicht
     harmonischen Progression (~1.25 Verhältnis).             ── */
  --text-xs:    .75rem;
  --text-s:     .875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.75rem;
}

/* ════════════════════════════════════
   03. TYPOGRAFIE-BASIS
   ════════════════════════════════════ */

/* scroll-behavior:smooth aktiviert CSS-natives Smooth Scrolling
   für alle Anker-Links (#section) – kein JavaScript nötig. */
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'DM Sans', system-ui, sans-serif; /* system-ui als Fallback ohne Netzwerk */
  color: var(--ink);
  background: var(--white);
  line-height: 1.65; /* Erhöhte Zeilenhöhe → bessere Lesbarkeit für Mittelstand-Zielgruppe */
  -webkit-font-smoothing: antialiased;      /* macOS/iOS: subpixel → grayed antialiasing */
  -moz-osx-font-smoothing: grayscale;       /* Firefox macOS */
}


/* ════════════════════════════════════
   04. LAYOUT-HELFER
   ════════════════════════════════════ */

/* Zentrierter Content-Wrapper mit max-width und
   horizontalem padding (28px = Mindestabstand zum Rand). */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}


/* ════════════════════════════════════
   05. BARRIEREFREIHEIT
   ════════════════════════════════════ */

/* Globaler Keyboard-Fokus-Indikator.
   :focus-visible greift NUR bei Tastatur-Navigation (nicht Maus),
   sodass Maus-Nutzer keinen Fokus-Ring sehen (bessere UX).
   outline:none entfernt den hässlichen Browser-Standard-Ring;
   box-shadow ersetzt ihn mit dem Markenfarb-Ring. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

/* Skip-Link: Für Tastatur- und Screenreader-Nutzer.
   Normaler Text ist positional außerhalb des Viewports
   (top:-100px). Bei :focus springt er ans Seitenende
   (top:0) und zeigt einen "Zum Hauptinhalt"-Link. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 24px;
  z-index: 9999;
  background: var(--teal);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 600;
  font-size: var(--text-s);
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ════════════════════════════════════
   06. BUTTONS
   ════════════════════════════════════
   Alle Buttons erben von .btn (Base-Klasse).
   Spezifische Varianten via BEM-Modifier:
     .btn-primary  → Haupt-CTA (blau, gefüllt)
     .btn-ghost    → Sekundär (transparent, Outline)
     .btn-white    → Auf dunklem Hintergrund (weißer Hintergrund)
     .btn-nav      → Kompakter CTA in der Navigation

   WCAG 2.1 SC 2.5.5: min-height:44px sichert ausreichend
   große Touch-Targets für Mobile-Nutzer (iOS/Android).

   Das ::after-Pseudo-Element stellt den Fokus-Ring via
   box-shadow sicher – mit border-radius:inherit passt
   er sich automatisch an runde Buttons an.
   ════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 26px;
  border-radius: var(--radius-s);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}
.btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: var(--focus-ring);
}
.btn:focus-visible::after { opacity: 1; }

.btn-primary {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.btn-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26,86,181,.3);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-mid);
}
.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
  transform: translateY(-1px);
}

/* Ghost-Button auf dunklem Hintergrund (Hero, DokSimple, Messe).
   Das Standard-.btn-ghost hat var(--ink) als Textfarbe, die auf
   dunklem Grund (#0d2460) nicht sichtbar ist. Diese Überschreibung
   setzt weiße Farbe+Border nur in dunklen Sektions-Kontexten. */
.hero .btn-ghost,
.feature-dok .btn-ghost,
.messe-inner .btn-ghost {
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.35);
}
.hero .btn-ghost:hover,
.feature-dok .btn-ghost:hover,
.messe-inner .btn-ghost:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
}

.btn-white {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn-white:hover {
  background: var(--teal-light);
  transform: translateY(-1px);
}

.btn-nav {
  background: var(--teal);
  color: var(--white);
  min-height: 40px;
  padding: 8px 20px;
  font-size: var(--text-s);
}
.btn-nav:hover { background: var(--teal-dark); }

.btn-full { width: 100%; }

/* ════════════════════════════════════
   07. HEADER / NAVIGATION
   ════════════════════════════════════
   Der Header ist fixed (bleibt beim Scrollen oben).
   backdrop-filter:blur erzeugt den "Frosted Glass"-Effekt –
   der Hintergrund ist leicht durchscheinend (88% Opazität)
   und unscharf. -webkit-Prefix für Safari-Kompatibilität.

   Initialzustand: border-bottom transparent (unsichtbar).
   Mit JS-Klasse ".scrolled": border + shadow sichtbar.
   → Verhindert harte Linie wenn Header direkt am Hero-Bild liegt.

   z-index:200 > Dropdown-Panels (300) → Header selbst liegt
   unter den Panels. Panels brauchen z-index:300 da sie
   außerhalb des Headers-Stacking-Context liegen.
   ════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,.88); /* 88% = leicht transparent für Frosted-Glass */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%); /* Safari */
  border-bottom: 1px solid transparent; /* Unsichtbar bis .scrolled */
  transition: border-color var(--t), box-shadow var(--t);
}
/* JS in script.js fügt .scrolled ab scrollY > 16px hinzu */
.header.scrolled {
  border-color: var(--border);
  box-shadow: var(--shadow-s);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: 36px;
  width: auto;
  display: block;
  /* mix-blend-mode keeps it clean on both light and slightly tinted backgrounds */
}

/* KiSimple product logo in feature section */
.product-logo-img {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: 28px;
}

/* Footer logo */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  text-decoration: none;
}
.footer-icon-img {
  height: 44px;
  width: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  /* The globe looks great on dark backgrounds */
}
.footer-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.footer-logo-name {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

/* Plain nav links */
.nav-plain-link {
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--mid);
  padding: 8px 12px;
  border-radius: var(--radius-s);
  transition: color var(--t), background var(--t);
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-plain-link:hover { color: var(--ink); background: var(--surface); }
.nav-plain-link.active { color: var(--teal); }

/* ════════════════════════════════════
   08. DROPDOWN-NAVIGATION (shadcn NavigationMenu-Stil)
   ════════════════════════════════════
   Visuell an shadcn/ui NavigationMenu angelehnt, aber in
   reinem HTML/CSS/JS umgesetzt (kein React/Radix benötigt).

   Animationskonzept:
     • Panel startet opacity:0, scale(.96), translateY(-6px)
     • Mit Klasse ".open": opacity:1, scale(1), translateY(0)
     • transition:.15s ease → schnell und knackig wie shadcn

   Zwei-Spalten-Grid (.nav-dd-grid) zeigt 2 Produkte pro Zeile,
   inspiriert vom shadcn NavigationMenu-Demo.

   .nav-chevron dreht sich 180° wenn aria-expanded="true" –
   rein CSS-gesteuert via Attribut-Selektor.

   z-index:300 auf .nav-dd-panel → liegt über dem Header (200)
   und allen anderen Seiten-Elementen.
   ════════════════════════════════════ */
.nav-item-dd {
  position: relative; /* Positioning-Kontext für das absolute Panel */
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav-trigger:hover { color: var(--ink); background: var(--surface); }
.nav-trigger[aria-expanded="true"] { color: var(--ink); background: var(--surface); }

.nav-chevron {
  transition: transform .2s ease;
  flex-shrink: 0;
  opacity: .6;
}
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Dropdown-Panel: absolut positioniert unterhalb des Triggers.
   top: calc(100% + 6px) = direkt unter dem Trigger mit 6px Abstand.
   left: -16px = leicht nach links verschoben für optisches Alignment.
   pointer-events:none im geschlossenen Zustand verhindert, dass das
   unsichtbare Panel Klicks "fängt" und andere Elemente blockiert. */
.nav-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: -16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: 0 8px 32px rgba(10,15,30,.12), 0 2px 8px rgba(10,15,30,.07);
  padding: 6px;
  min-width: 520px;
  opacity: 0;
  transform: scale(.96) translateY(-6px);
  transform-origin: top left;
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  z-index: 300;
}
.nav-dd-panel.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.nav-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  list-style: none;
}

.nav-dd-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: background var(--t);
}
.nav-dd-link:hover { background: var(--surface); }

.nav-dd-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.nav-dd-body { flex: 1; min-width: 0; }

.nav-dd-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.3;
}

.nav-dd-desc {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.nav-dd-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--border-mid);
  padding: 1px 6px;
  border-radius: 100px;
  flex-shrink: 0;
  letter-spacing: .01em;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 10px;
  border-radius: var(--radius-s);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .25s ease;
  transform-origin: center;
}
.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; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Produktname-Formatierung: erster Teil fett, "Simple" schlank ──
   HTML-Muster: <span class="pname"><b>Ki</b><em>Simple</em></span>
   <b>  → font-weight:800 (Ultra Bold) für den Präfix  (Ki, Dok…)
   <em> → font-weight:300 (Light), font-style:normal (kein Kursiv!)
   Der Kontrast zwischen 800/300 schafft die Marken-Typografie.
   display:inline damit der Span keinen Zeilenumbruch erzwingt.  ── */
.pname { display: inline; font-family: inherit; }
.pname b  { font-weight: 800; font-style: normal; }
.pname em { font-weight: 300; font-style: normal; letter-spacing: -.01em; }

/* ════════════════════════════════════
   09. HERO / BILDSLIDER
   ════════════════════════════════════
   Dunkler Hero mit tiefem Marine-Blau-Verlauf (aus Logo-Palette).
   padding-top:148px = Nav-Höhe (70px) + 78px Luft.
   overflow:hidden schneidet den dekorativen Grid-Hintergrund ab.

   Split-Layout (1fr 1fr):
     Links  → Headline, Sub-Text, CTA-Buttons, Counter-Bar
     Rechts → Bildslider (4 Handwerks-/KMU-Fotos)

   Slider-Mechanik (CSS-Seite):
     • .hero-slide   → position:absolute, opacity:0
     • .hero-slide.active → opacity:1 (CSS-Transition .9s)
     → Weiches Crossfade zwischen Bildern
     → JS in script.js steuert welches Slide .active bekommt

   .hero-image-overlay: Dezenter blauer Tint-Gradient über den
   Fotos, damit Markenfarbe kohärent bleibt und Kontrast gut ist.

   .hero-grid-bg: Feines Gitter als dekorativer Hintergrund.
   mask-image mit radialem Gradienten: Gitter blendet nach außen
   aus (Vignette-Effekt) – sonst wirkt es zu dominant.
   ════════════════════════════════════ */
.hero {
  position: relative;
  padding: 148px 0 96px; /* Oben: Nav-Höhe + Luft; unten: Abstand vor nächster Sektion */
  overflow: hidden;
  background: linear-gradient(160deg, var(--blue-deep) 0%, #0a1e50 60%, #0f1c2e 100%);
}

/* Split-Layout: Text links, Bild rechts */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Wrapper für den Slider mit relativem Positioning-Kontext */
.hero-image-wrap {
  position: relative;
  z-index: 2;
}

.hero-slider {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  aspect-ratio: 4/3;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13,36,96,.35) 0%,
    transparent 60%,
    rgba(26,86,181,.2) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Slider Dots */
.slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}
.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
  flex-shrink: 0;
}
.sdot.active {
  background: var(--white);
  width: 24px;
  border-radius: 4px;
}

/* Dekorativer Gitter-Hintergrund (sehr subtil, 6% Opazität).
   Zwei überlagerte lineare Gradienten bilden das Gitter (48×48px).
   mask-image / -webkit-mask-image: Radiales Ausblenden nach außen,
   damit das Gitter in der Mitte sichtbar ist und zu den Rändern
   weich ausläuft (keine harte Kante). */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,86,181,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,86,181,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: var(--text-s);
  color: rgba(255,255,255,.7);
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}
.hero-eyebrow strong { color: var(--sky); font-weight: 600; }

.eyebrow-pulse {
  width: 7px;
  height: 7px;
  background: var(--sky);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--teal-glow); }
  50% { opacity: .8; box-shadow: 0 0 0 5px transparent; }
}

.hero-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-5xl));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--white);
  margin-bottom: 28px;
}
.hero-title em {
  font-style: normal;
  color: var(--blue-sky);
  display: block;
}

.hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.6);
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.75;
}
.hero-sub strong { color: rgba(255,255,255,.9); font-weight: 600; }

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.hero-counters {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-m);
  overflow: hidden;
  width: fit-content;
}
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 28px;
  gap: 4px;
}
.counter-val {
  font-family: 'Sora', sans-serif;
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--sky);
  letter-spacing: -.04em;
  line-height: 1;
}
.counter-lbl {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  font-weight: 500;
}
.counter-sep {
  font-size: var(--text-2xl);
  color: rgba(255,255,255,.1);
  padding: 0 2px;
  font-weight: 300;
  align-self: center;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.3);
}
.scroll-line {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--sky);
  animation: scanline 2s ease-in-out infinite;
}
@keyframes scanline {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ════════════════════════════════════
   10. MARKEN-ARCHITEKTUR
   ════════════════════════════════════
   Schmale Leiste direkt unterhalb des Heroes.
   Zeigt die Hierarchie: Kursimple GmbH → Simple → Produkte
   Als visuelle Orientierungshilfe für Erstbesucher, die
   das Produkt-Portfolio von der Unternehmensmarke trennen sollen.

   .brand-connector: dekorative Trennlinie + Pfeil zwischen
   den Knoten. Auf Mobile: rotiert 90° (transform:rotate(90deg))
   da die Knoten vertikal gestapelt werden.
   ════════════════════════════════════ */
.brand-arch {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}

.brand-track {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.brand-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.bn-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.bn-value {
  font-family: 'Sora', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
}
.bn-product-line {
  color: var(--teal);
  font-size: var(--text-2xl);
}

.brand-connector {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--border-mid);
  padding: 0 4px;
}
.bc-line { width: 24px; height: 1px; background: var(--border-mid); }

.brand-node-products { text-align: center; }
.bn-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.bchip {
  padding: 4px 14px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--mid);
  letter-spacing: .01em;
  transition: all var(--t);
}
.bchip:hover { border-color: var(--teal); color: var(--teal); }
.bchip-featured {
  background: var(--teal-light);
  border-color: #b0cce8;
  color: var(--teal-dark);
  font-weight: 700;
}

/* ════════════════════════════════════
   11. FEATURE-BLÖCKE (KiSimple + DokSimple)
   ════════════════════════════════════
   Zwei abwechselnde Full-Width-Sektionen präsentieren die
   Haupt-Produkte im Detail:
     .feature-ki  → Weißer Hintergrund, Text links, Mockup rechts
     .feature-dok → Dunkles Navy, umgekehrte Reihenfolge

   Reverse-Layout-Trick (.fb-inner-rev):
     direction:rtl auf dem Grid-Container dreht die Spalten-
     Reihenfolge um (Mockup links, Text rechts), OHNE die
     HTML-Quellreihenfolge zu ändern. Die Direktive > * { direction:ltr }
     stellt sicher, dass Text im Inneren wieder normal links-
     nach-rechts läuft. Auf Mobile wird .fb-inner-rev via
     Media Query auf direction:ltr zurückgesetzt.

   .tag-dok nutzt --sky-Farbe statt --teal, da es auf dem
   dunklen DokSimple-Hintergrund sichtbar sein muss.
   ════════════════════════════════════ */
.feature-block { padding: 108px 0; }
.feature-ki { background: var(--white); }
.feature-dok {
  background: linear-gradient(160deg, var(--blue-deep) 0%, #0f2d6a 100%);
  color: var(--white);
}

.fb-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
/* direction:rtl dreht Spaltenreihenfolge für "Bild links, Text rechts" */
.fb-inner-rev { direction: rtl; }
/* Innere Elemente explizit auf ltr zurücksetzen (Text, Icons etc.) */
.fb-inner-rev > * { direction: ltr; }

.fb-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.tag-ki { background: var(--ki-light); color: var(--ki); border: 1px solid var(--ki-border); }
.tag-dok { background: rgba(92,179,236,.12); color: var(--sky); border: 1px solid rgba(92,179,236,.3); }

.fb-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-4xl));
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.04em;
  margin-bottom: 20px;
}
.feature-ki .fb-title { color: var(--ink); }
.feature-dok .fb-title { color: var(--white); }

.fb-lead {
  font-size: var(--text-lg);
  line-height: 1.75;
  margin-bottom: 36px;
}
.feature-ki .fb-lead { color: var(--mid); }
.feature-dok .fb-lead { color: rgba(255,255,255,.6); }

/* ── KiSimple: Schritt-für-Schritt Timeline ──
   Vertikale Timeline via border-left (2px Linie) + ::before-Punkt.
   Jedes .ki-step::before ist ein kleiner Kreis (10×10px) der links
   an der Linie sitzt (left:-6px = halbe Breite des Punktes).
   Das erzeugt die klassische Bullet-Timeline ohne SVG oder Bilder. */
.ki-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
  border-left: 2px solid var(--border);
  padding-left: 0;
  margin-left: 16px;
}

.ki-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 16px 0 16px 24px;
  position: relative;
}
.ki-step::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 22px;
  width: 10px;
  height: 10px;
  background: var(--white);
  border: 2px solid var(--ki);
  border-radius: 50%;
}

.ks-num {
  font-family: 'Sora', sans-serif;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ki);
  padding-top: 3px;
  min-width: 24px;
}
.ks-body h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.ks-body p { font-size: var(--text-s); color: var(--mid); }

.fb-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--ki-light);
  border: 1px solid var(--ki-border);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  font-size: var(--text-s);
  color: var(--ink-60);
  line-height: 1.6;
  margin-bottom: 28px;
}
.fb-callout svg { flex-shrink: 0; color: var(--ki); margin-top: 1px; }

/* DokSimple features */
.dok-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.dok-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-base);
  color: rgba(255,255,255,.75);
}
.dok-features svg { flex-shrink: 0; color: var(--sky); }

/* ════════════════════════════════════
   12. APP-MOCKUPS
   ════════════════════════════════════
   Simulierte Browser-/App-Fenster zeigen die Software-UX.
   .am-bar: macOS-artige Titelleiste mit roten/gelben/grünen Dots.
   .am-body: Inhalt des Fensters mit gestaffelten UI-Elementen.
   Animationen (.am-progress-fill via @keyframes fillprogress)
   laufen einmalig beim Laden – kein Scroll-Trigger nötig da
   die Mockups erst nach dem Scrollen sichtbar werden.
   ════════════════════════════════════ */

/* Flexbox-Container für Foto + Mockup übereinander */
.fb-visual { display: flex; flex-direction: column; justify-content: center; gap: 16px; }

/* KiSimple – Kontext-Foto über dem Mockup */
.ki-context-img {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  aspect-ratio: 16/7;
  flex-shrink: 0;
}
.ki-context-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ki-context-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(13,36,96,.6) 100%
  );
}

.app-mockup {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  border: 1px solid var(--border);
}
.feature-dok .app-mockup {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
}

.am-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
}
.am-dots { display: flex; gap: 6px; }
.dot-r { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dot-y { width: 11px; height: 11px; border-radius: 50%; background: #febc2e; }
.dot-g { width: 11px; height: 11px; border-radius: 50%; background: #28c840; }
.am-title { font-size: var(--text-xs); color: var(--muted); font-weight: 500; margin-left: 6px; }

.am-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.am-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}
.am-file-icon { color: var(--mid); }
.am-file-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.am-filename { font-size: var(--text-s); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-filesize { font-size: var(--text-xs); color: var(--muted); }
.am-check { color: var(--blue-sky); flex-shrink: 0; }

.am-select-wrap { display: flex; flex-direction: column; gap: 6px; }
.am-select-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.am-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ki-light);
  border: 1.5px solid var(--ki-border);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ki);
  cursor: default;
}
.am-select .chevron { margin-left: auto; color: var(--ki); opacity: .5; }

.am-progress-wrap { display: flex; flex-direction: column; gap: 7px; }
.am-progress-header { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); }
.am-pct { font-weight: 700; color: var(--ki); }
.am-progress-track {
  height: 5px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.am-progress-fill {
  height: 100%;
  width: 78%;
  background: linear-gradient(90deg, var(--blue), var(--blue-sky));
  border-radius: 100px;
  animation: fillprogress 2.5s ease-out forwards;
}
@keyframes fillprogress { from { width: 0; } to { width: 78%; } }

.am-results {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.am-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-s);
}
.am-result-row:last-child { border-bottom: none; }
.am-rk { color: var(--muted); }
.am-rv { color: var(--ink); font-weight: 600; }
.am-status { display: flex; align-items: center; gap: 6px; color: var(--blue-mid); }
.status-dot { width: 7px; height: 7px; background: var(--blue-sky); border-radius: 50%; }

.am-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background var(--t), transform var(--t);
}
.am-export-btn:hover { background: var(--ink-80); transform: translateY(-1px); }
.am-export-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* DokSimple mockup */
.dok-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}
.dok-searchbar svg { color: var(--muted); flex-shrink: 0; }
.dok-searchbar input {
  border: none;
  background: transparent;
  font-size: var(--text-s);
  color: var(--ink);
  outline: none;
  flex: 1;
  font-family: 'DM Sans', sans-serif;
}
.dok-searchbar input::placeholder { color: var(--muted); }
kbd {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--white);
  font-family: inherit;
}

.dok-tree { display: flex; flex-direction: column; gap: 2px; }
.dtree-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--mid);
  cursor: default;
}
.dtree-folder.dtree-open {
  background: var(--dok-light);
  color: var(--dok);
  font-weight: 700;
}
.dtree-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--border);
  padding: 1px 7px;
  border-radius: 100px;
}
.dtree-open .dtree-count { background: rgba(3,105,161,.15); color: var(--dok); }

.dtree-children { padding-left: 22px; display: flex; flex-direction: column; gap: 2px; }
.dtree-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: var(--text-xs);
  color: var(--mid);
  border-radius: var(--radius-s);
}
.dtree-file.dtree-active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 500;
}

.dok-ki-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--mid);
  padding: 5px 0;
}
.ki-badge {
  background: var(--ki);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
}

.dok-preview-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 2px;
}
.dpm-line {
  height: 7px;
  border-radius: 4px;
  background: var(--border);
}
.dpm-long { width: 90%; }
.dpm-mid { width: 65%; }
.dpm-short { width: 40%; }

/* ════════════════════════════════════
   13. PRODUKTÜBERSICHT
   ════════════════════════════════════
   3-spaltiges Grid aller 5 Produkte (3+2 Karten).
   .pcard-hi markiert das Highlight-Produkt (KiSimple) mit
   einem 2px-Rahmen und einem subtilen Glühwürmchen-Kreis
   via ::before-Pseudo-Element (top-right, kein pointer-events).

   Produkt-Farbkodierung der Icons:
     KiSimple  → Königsblau   (Haupt-Markenfarbe)
     DokSimple → Tiefstes Navy
     KursSimple → Gelb/Amber (externe Plattform: KursSimple.de)
     HelpSimple → Grün
     PlanSimple → Rot

   .pcard-link min-height:44px sichert Touch-Target-Größe auch
   für den "Mehr erfahren →"-Link am Kartenende.
   ════════════════════════════════════ */
.products-sec {
  padding: 108px 0;
  background: var(--surface);
}

.sec-header { text-align: center; margin-bottom: 60px; }
.sec-header-left { text-align: left; }

.sec-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal);
  margin-bottom: 14px;
}
.sec-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-4xl));
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: 16px;
}
.sec-sub {
  font-size: var(--text-lg);
  color: var(--mid);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.pcard:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
  border-color: var(--teal);
}
.pcard-hi {
  border-color: var(--teal);
  border-width: 2px;
  background: linear-gradient(145deg, #fcfefd 0%, #f2fcfb 100%);
  position: relative;
  overflow: hidden;
}
.pcard-hi::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: var(--teal-glow);
  border-radius: 50%;
  pointer-events: none;
}

.pcard-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.pcard-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.picon-ki  { background: var(--ki-light);  color: var(--ki); }
.picon-dok { background: var(--dok-light); color: var(--dok); }
.picon-kurs { background: #fef3c7; color: #b45309; }
.picon-help { background: #dcfce7; color: #15803d; }
.picon-plan { background: #fee2e2; color: #b91c1c; }

.pcard-meta { display: flex; flex-direction: column; gap: 3px; }
.pcard-name { font-family: 'Sora', sans-serif; font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.pcard-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal-dark);
  background: var(--teal-light);
  border: 1px solid #b0cce8;
  padding: 2px 8px;
  border-radius: 100px;
  width: fit-content;
}

.pcard h3 { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.pcard p { font-size: var(--text-s); color: var(--mid); line-height: 1.65; flex: 1; }
.pcard-link {
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--teal-dark);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: gap var(--t);
  gap: 4px;
}
.pcard-link:hover { gap: 8px; text-decoration: underline; }

/* ════════════════════════════════════
   14. VORTEILE (Benefits)
   ════════════════════════════════════
   3-spaltiges Grid auf weißem Hintergrund.
   Hover-Effekt: translateY(-2px) + shadow erzeugt "Lift"-Gefühl.
   Karten-Hover-Ripple wird zusätzlich per JS (script.js Abschnitt 8)
   auf .bcard angewendet (radialer Gradient folgt der Maus).
   ════════════════════════════════════ */
.benefits-sec {
  padding: 108px 0;
  background: var(--white);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bcard {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.bcard:hover {
  box-shadow: var(--shadow-m);
  border-color: var(--teal);
  transform: translateY(-2px);
}

.bcard-icon {
  width: 52px; height: 52px;
  background: var(--teal-light);
  color: var(--teal-dark);
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.bcard h3 { font-family: 'Sora', sans-serif; font-size: var(--text-base); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.bcard p { font-size: var(--text-s); color: var(--mid); line-height: 1.65; }

/* ════════════════════════════════════
   15. ZIELGRUPPEN
   ════════════════════════════════════
   Dunkle Sektion (Navy-Gradient) mit Text links und einem
   Handwerker-Foto rechts als Illustration der Zielgruppe.

   .target-img-wrap: position:sticky, top:100px – das Foto
   bleibt beim Scrollen durch die Zielgruppen-Karten stehen
   (Parallax-ähnlicher Effekt ohne JavaScript). Auf Mobile
   wird position:sticky durch position:static ersetzt.

   .target-sec .sec-eyebrow: Explizit auf --sky gesetzt, da der
   Standard-Eyebrow var(--teal) auf dunklem Hintergrund nicht
   ausreichend Kontrast hat (zu dunkles Blau auf Navy).

   .tcard-Hintergrund ist halbtransparent (rgba(255,255,255,.04))
   um den Navy-Verlauf dahinter durchscheinen zu lassen.
   ════════════════════════════════════ */
.target-sec {
  padding: 108px 0;
  background: linear-gradient(180deg, var(--blue-deep) 0%, #0a1e50 100%);
}
.target-sec .sec-title { color: var(--white); }
/* --sky statt --teal: besserer Kontrast auf dunkelblauem Hintergrund */
.target-sec .sec-eyebrow { color: var(--sky); }

/* Zwei-Spalten-Layout: Karten-Grid links (flex), Foto rechts (fixed 420px) */
.target-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}
.target-left {}

.target-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 32px;
}

/* Handwerker-Foto rechts */
.target-right {}
.target-img-wrap {
  position: sticky;
  top: 100px;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  aspect-ratio: 3/4;
}
.target-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.95);
}
.target-img-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(13,36,96,.85) 0%, transparent 100%);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .02em;
}
.target-img-caption svg { color: var(--blue-sky); flex-shrink: 0; }

.tcard {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-m);
  padding: 28px 22px;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.tcard:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--teal);
  transform: translateY(-2px);
}
.tcard-glyph { font-size: 2.25rem; margin-bottom: 14px; }
.tcard h3 { font-family: 'Sora', sans-serif; font-size: var(--text-base); font-weight: 700; color: var(--white); margin-bottom: 8px; }
.tcard p { font-size: var(--text-s); color: rgba(255,255,255,.5); line-height: 1.65; }

/* ════════════════════════════════════
   16. MESSE-CALLOUT
   ════════════════════════════════════
   Auffällige CTA-Sektion für den Messeauftritt.
   .messe-inner: Dunkler Gradient-Container mit gerundeten
   Ecken (radius-l) – wirkt wie ein "Karte auf hellem Grund".
   .messe-deco: Dekorative Kreise via position:absolute,
   pointer-events:none (reagieren nicht auf Klicks).
   ════════════════════════════════════ */
.messe-sec {
  padding: 72px 0;
  background: var(--white);
}

.messe-inner {
  background: linear-gradient(135deg, var(--blue-deep) 0%, #0f2d6a 100%);
  border-radius: var(--radius-l);
  padding: 60px 64px;
  display: flex;
  align-items: center;
  gap: 56px;
  position: relative;
  overflow: hidden;
}

.messe-deco { position: absolute; inset: 0; pointer-events: none; }
.md-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--teal-glow);
}
.md-c1 { width: 300px; height: 300px; top: -80px; right: -60px; }
.md-c2 { width: 160px; height: 160px; bottom: -40px; left: 40%; }

.messe-content { position: relative; flex: 1; }
.messe-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sky);
  margin-bottom: 14px;
}
.messe-content h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 14px;
}
.messe-content p {
  font-size: var(--text-base);
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 440px;
  margin-bottom: 28px;
}

.messe-details-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-m);
  min-width: 240px;
  flex-shrink: 0;
}
.mdl-item { display: flex; flex-direction: column; gap: 3px; }
.mdl-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); font-weight: 700; }
.mdl-val { font-size: var(--text-s); color: var(--white); font-weight: 600; }

/* ════════════════════════════════════
   17. KONTAKTFORMULAR
   ════════════════════════════════════
   Zwei-Spalten-Layout: Links Adresse/Intro, rechts Formular.
   Das Formular-Panel (.contact-right) ist eine weiße Karte
   mit shadow-m – hebt sich vom blauen surface-Hintergrund ab.

   Validierungs-CSS:
     input:invalid:not(:placeholder-shown) → Roten Border nur
     wenn das Feld AUSGEFÜLLT aber ungültig ist. Das :not(:placeholder-shown)
     verhindert, dass leere Felder beim Laden sofort rot sind.

   Der Versand ist aktuell SIMULIERT (kein Backend).
   Für eine echte Integration: siehe TODO in script.js Abschnitt 6.
   ════════════════════════════════════ */
.contact-sec {
  padding: 108px 0;
  background: var(--surface);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: start;
}

.contact-left .sec-title { margin-bottom: 14px; }
.contact-left p { font-size: var(--text-base); color: var(--mid); line-height: 1.75; margin-bottom: 30px; }

.contact-addr { font-style: normal; display: flex; flex-direction: column; gap: 12px; }
.caddr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-60);
  text-decoration: none;
  transition: color var(--t);
  min-height: 44px;
}
.caddr-item:hover { color: var(--teal); }
.caddr-item svg { color: var(--teal); flex-shrink: 0; }

.contact-right {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 40px;
  box-shadow: var(--shadow-m);
}

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mid);
}
.form-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }

.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  font-size: var(--text-base);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  min-height: 44px;
  width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--muted); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.form-field input:invalid:not(:placeholder-shown) { border-color: #f87171; }

.form-field textarea { resize: vertical; min-height: 88px; }

/* ── Checkbox-Gruppe (Produktinteresse) ── */
.form-checkboxes {
  border: none;
  padding: 0;
  margin: 0;
}
.form-checkboxes legend {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mid);
  margin-bottom: 10px;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* Spezifität 0,2,0 – schlägt .form-field label (0,1,1) und verhindert uppercase */
.form-checkboxes .cb-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  user-select: none;
  min-height: 44px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.form-checkboxes .cb-label:hover {
  border-color: var(--teal);
  background: var(--teal-light);
}
/* Natives <input> verstecken, bleibt aber für Screen-Reader zugänglich */
.form-checkboxes .cb-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Custom Checkbox-Box */
.cb-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-mid);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), border-color var(--t);
  background: var(--white);
}
/* Checked: blaue Box mit Häkchen */
.form-checkboxes .cb-label input[type="checkbox"]:checked ~ .cb-box {
  background: var(--teal);
  border-color: var(--teal);
}
.form-checkboxes .cb-label input[type="checkbox"]:checked ~ .cb-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid var(--white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
/* Fokus-Ring für Tastatur-Navigation */
.form-checkboxes .cb-label input[type="checkbox"]:focus-visible ~ .cb-box {
  box-shadow: var(--focus-ring);
}
/* Gesamte Karte hervorheben wenn Checkbox gecheckt */
.form-checkboxes .cb-label:has(input[type="checkbox"]:checked) {
  border-color: var(--teal);
  background: var(--teal-light);
}
/* Produktname: fett + mager wie überall auf der Seite */
.cb-text {
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.cb-text b  { font-weight: 800; }
.cb-text em { font-weight: 300; font-style: normal; }


/* ════════════════════════════════════
   18. FOOTER
   ════════════════════════════════════
   Dunkles Navy (--blue-deep) als Hintergrund.
   Zwei-Spalten-Layout: Brand-Info links (1fr), Nav-Spalten rechts (2fr).
   .footer-tagline: Hervorgehobener Slogan in --sky (sichtbar auf dunkel).
   .fnav-col a:hover: Farbe wechselt auf --sky statt --teal
   (Kontrast-Anforderung auf dunklem Hintergrund).
   .footer-base: Dünne Trennlinie oben (6% Weiß) + Copyright.
   ════════════════════════════════════ */
.site-footer { background: var(--blue-deep); }

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
  padding: 72px 28px 56px;
  max-width: var(--max);
  margin: 0 auto;
}

.footer-brand .footer-logo { margin-bottom: 16px; }
.footer-brand p { font-size: var(--text-s); color: rgba(255,255,255,.7); line-height: 1.7; }
.footer-tagline { margin-top: 10px; font-weight: 600; color: var(--sky) !important; font-size: var(--text-xs) !important; text-transform: uppercase; letter-spacing: .1em; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.fnav-col { display: flex; flex-direction: column; gap: 10px; }
.fnav-title {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}
.fnav-col a {
  font-size: var(--text-s);
  color: rgba(255,255,255,.8);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--t);
}
.fnav-col a:hover { color: var(--sky); }

.footer-base {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 20px 28px;
}
.footer-base-inner {
  display: flex;
  justify-content: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.25);
  max-width: var(--max);
  margin: 0 auto;
}

/* ════════════════════════════════════
   19. SCROLL-REVEAL-ANIMATIONEN (data-reveal)
   ════════════════════════════════════
   Elemente mit [data-reveal] starten unsichtbar (opacity:0)
   und leicht nach unten versetzt (translateY:24px).
   IntersectionObserver in script.js fügt ".revealed" hinzu,
   sobald das Element sichtbar wird → CSS-Transition läuft ab.

   cubic-bezier(.22,.68,0,1): "Ease Out Expo" – schneller Start,
   weicher Auslauf. Wirkt natürlicher als einfaches ease-out.

   transitionDelay wird per JS inline gesetzt (80ms Stagger
   pro Geschwister-Element).

   Wichtig: Diese Regel muss NACH allen normalen Regeln für
   die betreffenden Elemente stehen, damit sie nicht durch
   spätere Selektoren überschrieben wird.
   ════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22,.68,0,1), transform .55s cubic-bezier(.22,.68,0,1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════
   20. REDUCED MOTION (Barrierefreiheit)
   ════════════════════════════════════
   Nutzer, die in ihrem Betriebssystem "Bewegung reduzieren"
   aktiviert haben (vestibulär-bedingte Störungen, Epilepsie),
   sehen hier keine Animationen/Transitions mehr.
   WCAG 2.1 SC 2.3.3 (AAA) / Best Practice.

   !important: Nötig um alle vorigen Transition-Definitionen
   zu überschreiben, ohne jeden Selektor einzeln zu überschreiben.
   animation-duration:.01ms statt 0 – einige Browser benötigen
   einen minimalen Wert damit animationend-Events feuern.

   [data-reveal]: Direkt auf sichtbar setzen, da JS trotzdem
   ".revealed" ergänzt – ohne diese Regel wären Elemente unsichtbar.
   ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; } /* Elemente sofort sichtbar */
}

/* ════════════════════════════════════
   21. RESPONSIVE (Breakpoints)
   ════════════════════════════════════
   Drei Breakpoints:
     ≤1024px  Tablet-Querformat / kleine Laptops
     ≤768px   Tablet-Hochformat / großes Mobile
     ≤480px   Kleines Smartphone

   Strategie: Desktop-first (max-width Queries).
   Grids werden progressiv vereinfacht:
     3 Spalten → 2 Spalten → 1 Spalte

   Auf ≤768px wird die Navigation zum Hamburger-Menü:
     .nav-links: display:none → bei .open: display:flex
     .nav-toggle: display:none → display:flex (sichtbar)
     .nav-dd-panel: position:absolute → position:static
       (kein Float über anderen Elementen auf Mobile)
   ════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-inner { grid-template-columns: 1fr; gap: 48px; }
  .fb-inner-rev { direction: ltr; } /* direction:rtl-Trick auf Mobile deaktivieren */
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .messe-inner { flex-direction: column; padding: 40px 36px; gap: 36px; }
  .footer-inner { grid-template-columns: 1fr; gap: 48px; }

  /* Hero: Bild unter Text (Slider zu groß für halbe Breite) */
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-image-wrap { max-width: 560px; }

  /* Zielgruppen: Foto erscheint VOR dem Grid (order:-1) */
  .target-layout { grid-template-columns: 1fr; gap: 40px; }
  .target-grid { grid-template-columns: repeat(2, 1fr); }
  .target-img-wrap { position: static; aspect-ratio: 16/7; } /* sticky → normal */
  .target-right { order: -1; } /* Foto vor Karten-Grid platzieren */
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 16px 20px 24px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-m);
    z-index: 199;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }

  /* Mobile: Dropdown als statisches List */
  .nav-item-dd { width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 10px 12px; }
  .nav-dd-panel {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 12px;
    min-width: 0;
    display: none;
    background: transparent;
  }
  .nav-dd-panel.open { display: block; }
  .nav-dd-grid { grid-template-columns: 1fr; }
  .nav-dd-link { padding: 8px; }
  .nav-plain-link { width: 100%; padding: 10px 12px; }

  .hero { padding: 116px 0 80px; }
  .hero-counters { flex-direction: column; width: 100%; border-radius: var(--radius-m); }
  .counter { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .counter:last-child { border-bottom: none; }
  .counter-sep { display: none; }

  .brand-track { flex-direction: column; gap: 8px; }
  .brand-connector { transform: rotate(90deg); }

  .products-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .target-grid { grid-template-columns: 1fr 1fr; }
  .hero-image-wrap { display: none; }
  .ki-context-img { display: none; }

  .contact-right { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; }

  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-inner { padding: 48px 20px 36px; }
}

/* ── Kleines Smartphone (≤480px) ── */
@media (max-width: 480px) {
  :root { --text-5xl: 2.75rem; } /* Hero-Headline auf kleinen Screens verkleinern */
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; } /* Buttons über volle Breite */
  .target-grid { grid-template-columns: 1fr; }
  .messe-inner { padding: 32px 24px; }
  .footer-nav { grid-template-columns: 1fr; }
}