/* ============================================================
 * MK-PREMIUM v3 · CSS
 * Mehrkunden 26 · Premium-Layer über mk-motion v2
 *
 * Disziplin (Framer-Motion-Director / Luxury-Language):
 *  - Eine Easing-Familie: cubic-bezier(0.23, 1, 0.32, 1)
 *  - Nur transform + opacity in Loops (GPU-composited)
 *  - prefers-reduced-motion: alles Dekorative aus
 *  - Hintergrund flüstert, schreit nie
 * ============================================================ */

:root {
  --mkp-ease:    cubic-bezier(0.23, 1, 0.32, 1);
  --mkp-lime:    #A3E635;
  --mkp-lime-rgb: 163, 230, 53;
  --mkp-fast:    180ms;
  --mkp-base:    260ms;
  --mkp-slow:    420ms;
}

/* ============================================================
 * 1. GLOBALER HINTERGRUND
 *    Fixed Layer hinter allem: Grid + Orbs + Partikel + Noise.
 *    Wird per JS injiziert (.mkp-bg). Sichtbar nur dort, wo
 *    Sektionen leicht transparente Flächen haben — bewusst
 *    extrem subtil, damit Inhalte Kontrast behalten.
 * ============================================================ */
.mkp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;            /* ECHTER Hintergrund: Inhalt (z-index 1) deckt Sterne ab */
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* 1a · Animiertes Grid (driftet sehr langsam diagonal) */
.mkp-bg-grid {
  display: none !important;   /* Linien-Gitter entfernt — weniger "spacy" (Robin) */
  position: absolute;
  inset: -80px;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: mkp-grid-drift 90s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 100%);
}
@keyframes mkp-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(56px, 56px, 0); }
}

/* 1b · Glow-Orbs (drei, sehr langsam, transform-only) */
.mkp-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.mkp-orb-1 {
  width: 640px; height: 640px;
  top: -12%; left: -8%;
  background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.075), rgba(var(--mkp-lime-rgb), 0) 70%);
  animation: mkp-orb-a 38s var(--mkp-ease) infinite alternate;
}
.mkp-orb-2 {
  width: 540px; height: 540px;
  top: 30%; right: -10%;
  background: radial-gradient(closest-side, rgba(255,255,255, 0.045), rgba(255,255,255, 0) 70%);
  animation: mkp-orb-b 46s var(--mkp-ease) infinite alternate;
}
.mkp-orb-3 {
  width: 480px; height: 480px;
  bottom: -14%; left: 28%;
  background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.05), rgba(var(--mkp-lime-rgb), 0) 70%);
  animation: mkp-orb-c 52s var(--mkp-ease) infinite alternate;
}
@keyframes mkp-orb-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(90px, 70px, 0) scale(1.12); } }
@keyframes mkp-orb-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-70px, -90px, 0) scale(0.96); } }
@keyframes mkp-orb-c { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(60px, -50px, 0) scale(1.1); } }

/* 1c · Partikel (12 Stück, je eigener Delay via inline-style) */
.mkp-p {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(var(--mkp-lime-rgb), 0.35);
  animation: mkp-p-float 14s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes mkp-p-float {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
  12%      { opacity: 0.7; }
  50%      { transform: translate3d(14px, -48px, 0); opacity: 0.35; }
  88%      { opacity: 0.6; }
}

/* 1d · Noise-Textur (statisch, kein Repaint) */
.mkp-noise {
  position: absolute;
  inset: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tab unsichtbar → Loops pausieren (per JS-Klasse) */
.mkp-paused .mkp-bg-grid,
.mkp-paused .mkp-orb,
.mkp-paused .mkp-p { animation-play-state: paused; }

/* ============================================================
 * 2. FLOATING NAVIGATION
 *    Header bleibt sticky; die innere Nav wird beim Scrollen
 *    zur schwebenden Glas-Pille mit Glow-Border.
 * ============================================================ */
header.mk-fnav {
  position: sticky !important;   /* Seite setzt .mk-header auf relative — Floating-Nav braucht sticky */
  top: 0;
  z-index: 40;
  background: transparent !important;
  border-bottom-color: transparent !important;
  transition: padding var(--mkp-slow) var(--mkp-ease);
}
header.mk-fnav > nav {
  transition:
    background var(--mkp-slow) var(--mkp-ease),
    box-shadow var(--mkp-slow) var(--mkp-ease),
    border-color var(--mkp-slow) var(--mkp-ease),
    border-radius var(--mkp-slow) var(--mkp-ease),
    height var(--mkp-slow) var(--mkp-ease),
    margin var(--mkp-slow) var(--mkp-ease),
    max-width var(--mkp-slow) var(--mkp-ease);
  border: 1px solid transparent;
  background: rgba(9,9,9,0.94);
}
header.mk-fnav.is-scrolled {
  padding: 0 12px;
}
header.mk-fnav.is-scrolled > nav {
  margin-top: 10px;
  height: 56px;
  max-width: 72rem;
  border-radius: 22px;
  background: rgba(9,9,9,0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(var(--mkp-lime-rgb), 0.07),
    0 12px 40px -12px rgba(0,0,0,0.7),
    0 0 24px -8px rgba(var(--mkp-lime-rgb), 0.12);
  padding-left: 22px;
  padding-right: 14px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.mk-fnav.is-scrolled > nav { background: rgba(10,10,10,0.94); }
}

/* Nav-Links: Underline-Reveal von links */
header.mk-fnav ul a {
  position: relative;
  padding-bottom: 2px;
}
header.mk-fnav ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1.5px;
  background: var(--mkp-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mkp-base) var(--mkp-ease);
}
header.mk-fnav ul a:hover::after,
header.mk-fnav ul a:focus-visible::after { transform: scaleX(1); }
header.mk-fnav ul .mk-cdd-btn::after { display: none; }

/* Nav-CTA (Formular-Link) bekommt im Scroll-Zustand Lime-Glow */
header.mk-fnav.is-scrolled .mkp-nav-cta {
  background: var(--mkp-lime) !important;
  color: #0a0a0a !important;
  box-shadow: 0 0 18px -2px rgba(var(--mkp-lime-rgb), 0.55);
}
header.mk-fnav.is-scrolled .mkp-nav-cta:hover {
  box-shadow: 0 0 26px 0 rgba(var(--mkp-lime-rgb), 0.7);
  transform: translateY(-1px);
}

/* ============================================================
 * 3. BUTTON-SYSTEM
 *    Primary: Glow + Hover-Lift (Magnetic kommt aus mk-motion).
 *    Secondary: Border-Glow.
 * ============================================================ */
.btn-lime {
  box-shadow: 0 0 0 0 rgba(var(--mkp-lime-rgb), 0);
  transition: box-shadow var(--mkp-base) var(--mkp-ease),
              transform var(--mkp-fast) var(--mkp-ease),
              background var(--mkp-base) ease;
}
.btn-lime:hover {
  box-shadow:
    0 6px 24px -6px rgba(var(--mkp-lime-rgb), 0.55),
    0 0 0 1px rgba(var(--mkp-lime-rgb), 0.4);
}
.btn-ghost, .btn-wa {
  transition: box-shadow var(--mkp-base) var(--mkp-ease),
              border-color var(--mkp-base) ease,
              transform var(--mkp-fast) var(--mkp-ease);
}
.btn-ghost:hover {
  box-shadow: 0 0 0 1px rgba(var(--mkp-lime-rgb), 0.35),
              0 0 20px -6px rgba(var(--mkp-lime-rgb), 0.3);
}

/* ============================================================
 * 4. CARD-GLOW (Pointer-Tracking-Border, Linear/Raycast-Stil)
 *    JS setzt --mx / --my pro Karte. Ohne Hover: unsichtbar.
 * ============================================================ */
.mkp-glow {
  position: relative;
  transition: transform var(--mkp-base) var(--mkp-ease),
              box-shadow var(--mkp-base) var(--mkp-ease);
}
.mkp-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--mkp-lime-rgb), 0.55), rgba(var(--mkp-lime-rgb), 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--mkp-base) ease;
  pointer-events: none;
  z-index: 2;
}
.mkp-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--mkp-lime-rgb), 0.06), rgba(var(--mkp-lime-rgb), 0) 70%);
  opacity: 0;
  transition: opacity var(--mkp-base) ease;
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .mkp-glow:hover::before,
  .mkp-glow:hover::after { opacity: 1; }
  .mkp-glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px -16px rgba(0,0,0,0.35);
  }
  /* dunkle Karten: stärkerer Schatten */
  .mkp-glow.mkp-dark:hover {
    box-shadow: 0 18px 48px -14px rgba(0,0,0,0.65),
                0 0 28px -10px rgba(var(--mkp-lime-rgb), 0.18);
  }
}

/* 3D-Tilt (JS setzt rotateX/rotateY per rAF; Transition auf transform aus,
   sonst kämpft die CSS-Transition gegen den Spring-Loop) */
.mkp-tilting {
  transition: box-shadow var(--mkp-base) var(--mkp-ease) !important;
  will-change: transform;
}

/* ============================================================
 * 5. SCROLL-STORYTELLING-UPGRADE
 *    Bestehende data-reveal-Elemente bekommen Entblurren.
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    filter: blur(7px);
    transition: opacity var(--mk-reveal, 700ms) var(--mkp-ease),
                transform var(--mk-reveal, 700ms) var(--mkp-ease),
                filter var(--mk-reveal, 700ms) var(--mkp-ease);
  }
  [data-reveal].in-view { filter: blur(0); }
}

/* ============================================================
 * 6. SECTION-SEAMS (Lichtübergänge statt harter Schnitte)
 *    JS gibt jeder Top-Level-Section die Klasse .mkp-seam.
 * ============================================================ */
.mkp-seam { position: relative; }
.mkp-seam::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--mkp-lime-rgb), 0) 0%, rgba(var(--mkp-lime-rgb), 0.16) 35%,
    rgba(var(--mkp-lime-rgb), 0.28) 50%,
    rgba(var(--mkp-lime-rgb), 0.16) 65%, rgba(var(--mkp-lime-rgb), 0) 100%);
  pointer-events: none;
  z-index: 3;
}
.mkp-seam::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(560px, 80vw); height: 90px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.07), rgba(var(--mkp-lime-rgb), 0) 70%);
  pointer-events: none;
  z-index: 3;
}

/* ============================================================
 * 7. HERO-FLOATS · schwebende Stat-Chips über dem Live-Feed
 * ============================================================ */
.mkp-hero-floats {
  position: relative;
  height: 0;
  z-index: 5;
  display: none;
}
@media (min-width: 1024px) { .mkp-hero-floats { display: block; } }
.mkp-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: rgba(14,14,14,0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 10px 28px -10px rgba(0,0,0,0.6),
    0 0 18px -6px rgba(var(--mkp-lime-rgb), 0.22);
  white-space: nowrap;
}
.mkp-chip .mkp-chip-num { color: var(--mkp-lime); font-weight: 700; }
.mkp-chip .mkp-chip-check {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--mkp-lime);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 800;
}
.mkp-float { animation: mkp-floaty 6.5s ease-in-out infinite; will-change: transform; }
.mkp-float-2 { animation-duration: 7.8s; animation-delay: -2.6s; }
@keyframes mkp-floaty {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* ============================================================
 * 8. FAQ-ACCORDION · weiche Höhen-Animation (JS-gesteuert)
 * ============================================================ */
details.mkp-acc > .mkp-acc-body {
  overflow: hidden;
  will-change: height;
}
details.mkp-acc summary::-webkit-details-marker { display: none; }

/* ============================================================
 * 9. REDUCED MOTION · Dekoration komplett aus
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mkp-bg { display: none; }
  .mkp-float, .mkp-float-2 { animation: none; }
  .mkp-glow:hover { transform: none; }
  header.mk-fnav > nav,
  header.mk-fnav.is-scrolled > nav { transition: none; }
  [data-reveal] { filter: none; }
}

/* Mobile: Hintergrund deutlich abspecken (Akku, GPU) */
@media (max-width: 768px) {
  .mkp-bg-grid { animation: none; }
  .mkp-orb-2, .mkp-orb-3, .mkp-p { display: none; }
}

/* ============================================================
 * ===== MK-PREMIUM v4 · NovaraPro-Look =======================
 * Sichtbare Struktur-Signaturen statt nur Hover-Politur:
 * Flares hinter Headlines, Pill-Eyebrows, Light-Rays,
 * Top-Lights auf Karten, Gradient-Headlines, Shine-Sweeps.
 * ============================================================ */

/* ---- Intensitäts-Bump für den globalen Layer ---- */
.mkp-bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}
.mkp-orb-1 { background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.11), rgba(var(--mkp-lime-rgb), 0) 78%); }
.mkp-orb-2 { background: radial-gradient(closest-side, rgba(255,255,255, 0.055), rgba(255,255,255, 0) 78%); }
.mkp-orb-3 { background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.04), rgba(var(--mkp-lime-rgb), 0) 78%); }
.mkp-p { background: rgba(var(--mkp-lime-rgb), 0.5); }

/* ============================================================
 * A · EYEBROWS → GLOW-PILLS (NovaraPro-Signatur Nr. 1)
 * ============================================================ */
.eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(8,8,8,0.12);
  background: rgba(8,8,8,0.035);
  position: relative;
  overflow: hidden;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--mkp-lime);
  box-shadow: 0 0 8px 1px rgba(var(--mkp-lime-rgb), 0.7);
  flex: 0 0 auto;
}
/* dunkle Sektionen */
.bg-ink-950 .eyebrow,
.text-white .eyebrow,
section[style*="#0b0b0b"] .eyebrow {
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 22px -8px rgba(var(--mkp-lime-rgb), 0.35),
              inset 0 1px 0 rgba(255,255,255,0.07);
}
/* vorhandene Punkt-Spans in Eyebrows ausblenden (Pille bringt eigenen) */
.eyebrow > span[class*="rounded-full"],
.eyebrow > .mk-live-dot { display: none !important; }

/* Shine-Sweep über die Hero-Pille */
@media (prefers-reduced-motion: no-preference) {
  .mkp-pill-shine::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(105deg, rgba(255,255,255, 0), rgba(255,255,255, 0.22), rgba(255,255,255, 0));
    animation: mkp-shine 4.5s var(--mkp-ease) infinite;
  }
  @keyframes mkp-shine {
    0%   { left: -60%; }
    45%  { left: 130%; }
    100% { left: 130%; }
  }
}

/* ============================================================
 * B · FLARES HINTER HEADLINES (NovaraPro "Heading Background")
 *     JS injiziert .mkp-flare in jeden Section-Header.
 * ============================================================ */
.mkp-flare {
  position: absolute;
  left: 50%; top: 38%;
  width: min(720px, 92vw);
  height: 300px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(var(--mkp-lime-rgb), 0.07), rgba(var(--mkp-lime-rgb), 0) 72%),
    radial-gradient(ellipse 40% 32% at 50% 50%, rgba(255,255,255, 0.04), rgba(255,255,255, 0) 72%);
}
.mkp-flare-light {
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(var(--mkp-lime-rgb), 0.10), rgba(var(--mkp-lime-rgb), 0) 72%);
}
.mkp-has-flare { position: relative; z-index: 0; }

/* ============================================================
 * C · LIGHT-RAYS (Beams aus der oberen Mitte, Hero + Dark-CTAs)
 * ============================================================ */
.mkp-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mkp-ray {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 150px;
  height: 68%;
  transform-origin: top center;
  background: linear-gradient(180deg,
    rgba(var(--mkp-lime-rgb), 0.14) 0%,
    rgba(var(--mkp-lime-rgb), 0.045) 45%, rgba(var(--mkp-lime-rgb), 0) 100%);
  filter: blur(10px);
  will-change: transform, opacity;
}
.mkp-ray-1 { transform: translateX(-50%) rotate(-24deg); animation: mkp-ray-sway-a 11s ease-in-out infinite alternate; }
.mkp-ray-2 { transform: translateX(-50%) rotate(0deg);   width: 240px; opacity: 0.8; animation: mkp-ray-sway-b 13s ease-in-out infinite alternate; }
.mkp-ray-3 { transform: translateX(-50%) rotate(24deg);  animation: mkp-ray-sway-c 12s ease-in-out infinite alternate; }
@keyframes mkp-ray-sway-a { from { transform: translateX(-50%) rotate(-24deg); opacity:.75; } to { transform: translateX(-50%) rotate(-19deg); opacity:1; } }
@keyframes mkp-ray-sway-b { from { transform: translateX(-50%) rotate(-3deg);  opacity:.65; } to { transform: translateX(-50%) rotate(3deg);   opacity:.95; } }
@keyframes mkp-ray-sway-c { from { transform: translateX(-50%) rotate(24deg);  opacity:.75; } to { transform: translateX(-50%) rotate(19deg);  opacity:1; } }

/* Statischer Licht-Kegel für alle dunklen Sektionen (JS: .mkp-cone) */
.mkp-cone::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(900px, 100vw);
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 70% at 50% 0%,
    rgba(var(--mkp-lime-rgb), 0.04), rgba(var(--mkp-lime-rgb), 0) 72%);
  pointer-events: none;
}

/* ============================================================
 * D · TOP-LIGHT AUF KARTEN (immer sichtbar, nicht nur Hover)
 *     JS injiziert <span class="mkp-tl"> in dunkle Karten.
 * ============================================================ */
.mkp-tl {
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255, 0), rgba(255,255,255, 0.35) 50%, rgba(255,255,255, 0));
}
.mkp-tl::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 70%; height: 56px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 100% at 50% 0%,
    rgba(var(--mkp-lime-rgb), 0.10), rgba(var(--mkp-lime-rgb), 0) 70%);
}
/* helle Karten: dezenter, in Lime */
.mkp-tl-light { background: linear-gradient(90deg, rgba(var(--mkp-lime-rgb), 0), rgba(var(--mkp-lime-rgb), 0.55) 50%, rgba(var(--mkp-lime-rgb), 0)); }
.mkp-tl-light::after {
  background: radial-gradient(ellipse 60% 100% at 50% 0%,
    rgba(var(--mkp-lime-rgb), 0.08), rgba(var(--mkp-lime-rgb), 0) 70%);
}

/* Dunkle Karten bekommen sichtbare Border + Tiefe (Default-Zustand) */
.mkp-glow.mkp-dark {
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
              0 14px 40px -18px rgba(0,0,0,0.6);
}

/* ============================================================
 * E · GRADIENT-HEADLINES (JS: .mkp-grad-text auf sichere h1/h2)
 * ============================================================ */
.mkp-grad-text {
  background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
 * F · CTA-SHINE + AVAILABILITY-CHIP
 * ============================================================ */
.btn-lime { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .btn-lime::after {
    content: "";
    position: absolute;
    top: -20%; bottom: -20%;
    width: 34%;
    left: -50%;
    transform: skewX(-18deg);
    background: linear-gradient(105deg, rgba(255,255,255, 0), rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    animation: mkp-shine 5.5s var(--mkp-ease) infinite;
    animation-delay: 1.2s;
    pointer-events: none;
  }
}
.btn-lime:hover {
  box-shadow:
    0 8px 32px -6px rgba(var(--mkp-lime-rgb), 0.65),
    0 0 0 1px rgba(var(--mkp-lime-rgb), 0.5),
    0 0 44px -8px rgba(var(--mkp-lime-rgb), 0.45);
}

.mkp-avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(var(--mkp-lime-rgb), 0.25);
  background: rgba(var(--mkp-lime-rgb), 0.06);
  box-shadow: 0 0 26px -8px rgba(var(--mkp-lime-rgb), 0.4),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.mkp-avail-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--mkp-lime);
  position: relative;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .mkp-avail-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 1.5px solid rgba(var(--mkp-lime-rgb), 0.7);
    animation: mkp-ping 2.2s var(--mkp-ease) infinite;
  }
  @keyframes mkp-ping {
    0%   { transform: scale(0.6); opacity: 1; }
    80%, 100% { transform: scale(1.7); opacity: 0; }
  }
}

/* Seams kräftiger */
.mkp-seam::before {
  background: linear-gradient(90deg,
    rgba(var(--mkp-lime-rgb), 0) 0%, rgba(var(--mkp-lime-rgb), 0.22) 35%,
    rgba(var(--mkp-lime-rgb), 0.42) 50%,
    rgba(var(--mkp-lime-rgb), 0.22) 65%, rgba(var(--mkp-lime-rgb), 0) 100%);
}
.mkp-seam::after {
  background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.055), rgba(var(--mkp-lime-rgb), 0) 70%);
}

/* Reduced Motion: v4-Dekoration beruhigen */
@media (prefers-reduced-motion: reduce) {
  .mkp-ray { animation: none; }
  .mkp-pill-shine::after, .btn-lime::after { display: none; }
  .mkp-avail-dot::after { display: none; }
}
@media (max-width: 768px) {
  .mkp-ray { display: none; }
  .mkp-flare { width: 92vw; height: 200px; }
}

/* Sicherheitsnetz: Deko darf nie horizontalen Scroll erzeugen */
html, body { overflow-x: clip; }

/* ============================================================
 * BUGFIX (Altbestand) · Grid-Blowout auf Mobile
 * Kinder mit langem nowrap-Inhalt (z.B. Live-Feed-Zeiten)
 * zwangen Grid-Spuren über den Viewport hinaus → Hero-Text
 * wurde rechts abgeschnitten. min-width:0 ist der Standard-Fix.
 * ============================================================ */
.grid > * { min-width: 0; }

/* Eyebrow-Pille: darf nie breiter als ihr Container werden */
.eyebrow { max-width: 100%; }

/* ============================================================
 * ===== MK-PREMIUM v5 · Cosmic Layer =========================
 * 1. Einheitlicher schwarzer Seitenhintergrund (kein grauer
 *    Header-Balken mehr, kein weißer Body-Schimmer)
 * 2. Parallax-Starfield (Canvas): driftende Sterne in 3
 *    Tiefenebenen, Twinkle, Mouse-Parallax
 * ============================================================ */

/* 1 · Einheitliches Schwarz */
html, body { background: #050505 !important; }

/* Header oben: nahtlos mit dem Hero verschmelzen */
header.mk-fnav > nav {
  background: transparent;
}
header.mk-fnav.is-scrolled > nav {
  background: rgba(9,9,9,0.94);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.mk-fnav.is-scrolled > nav { background: rgba(10,10,10,0.94); }
}

/* 2 · Starfield-Canvas (liegt im mkp-bg-Layer, screen-blend) */
.mkp-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* alte Einzel-Partikel sind durch das Starfield ersetzt */
.mkp-p { display: none; }

/* ============================================================
 * v5 · HERO-VIDEO (Futuristic AI Landscape, tiefste Ebene)
 * ============================================================ */
.mkp-hero-video {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(115vh, 1020px);   /* nur der erste Viewport — Section ist deutlich höher */
  overflow: hidden;
  pointer-events: none;
}
.mkp-hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* Shade: hält Text links lesbar, dunkelt unten vollständig nach Schwarz ab */
.mkp-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.78) 0%, rgba(5,5,5,0.45) 45%, rgba(5,5,5,0.55) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.2) 35%, rgba(5,5,5,0.65) 70%, #050505 100%);
}
/* Mobile: Video aus (Datenvolumen), Poster als Standbild */
@media (max-width: 767px) {
  .mkp-hero-video video { display: none; }
  /* Mobile: CSS-Glow statt Bild — LCP bleibt der Text, nicht ein Hintergrundbild */
}
@media (prefers-reduced-motion: reduce) {
  .mkp-hero-video video { display: none; }
  .mkp-hero-video {
    background: url('hero-cosmic.jpg') center / cover no-repeat;
    opacity: 0.45;
  }
}

/* ============================================================
 * v5.1 · HINTERGRUND-ARCHITEKTUR
 * Der Deko-Layer liegt jetzt HINTER dem Inhalt (z-index 0).
 * Dunkle Sektionen werden transparent, damit Sterne/Orbs in
 * den Freiflächen durchscheinen — Text, Karten und Fenster
 * decken sie physisch ab. Helle Sektionen bleiben opak.
 * ============================================================ */
body > section, body > div, body > footer, body > main { position: relative; z-index: 1; }
section.bg-ink-950 { background-color: transparent !important; }

/* Karten ("Fenster") klar abgegrenzt: sichtbare Kante + eigene Fläche */
.mkp-glow.mkp-dark {
  border-color: rgba(255,255,255,0.14);
  background-color: rgba(255,255,255,0.045);
}

/* Stadt-Pills (Kiel, Lübeck, ...): deutlich erkennbare Kanten + Kontrast */
.mk-cities .mk-city {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}
.mk-cities .mk-city.is-hub {
  color: #0a0a0a;
  background: #A3E635;
  box-shadow: 0 0 18px -6px rgba(163,230,53,0.55);
}
.mk-cities .mk-city-more {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(163,230,53,0.45);
  color: rgba(255,255,255,0.75);
}

/* ============================================================
 * v5.1 · PERFORMANCE
 * ============================================================ */

/* Deko-Animationen starten erst NACH window.load (html.mkp-anim).
 * Senkt Total Blocking Time und beschleunigt LCP massiv. */
html:not(.mkp-anim) .mkp-ray,
html:not(.mkp-anim) .mkp-orb-1,
html:not(.mkp-anim) .mkp-orb-2,
html:not(.mkp-anim) .mkp-orb-3 { animation: none !important; }
html:not(.mkp-anim) .mkp-pill-shine::after,
html:not(.mkp-anim) .btn-lime::after,
html:not(.mkp-anim) .mkp-avail-dot::after { animation: none !important; }

/* content-visibility entfernt: verschob Anker-Sprünge (#angebote etc.)
 * um bis zu 2.300px — Navigations-Korrektheit geht vor Lab-Punkte. */

/* ============================================================
 * v5.1 · BARRIEREFREIHEIT · Cookie-Banner (Altbestand) auf AA
 * ============================================================ */
body .mkck-card { background: #101010 !important; }
body .mkck-txt { color: rgba(255,255,255,0.8) !important; }
body .mkck-txt a { color: #d9f99d !important; }
body .mkck-set { color: rgba(255,255,255,0.8) !important; }
body .mkck-nec { color: #ffffff !important; background: rgba(255,255,255,0.13) !important; }

/* Cookie-Banner: zustandsunabhängig AA-konform (Styles werden vom
 * Banner-Script zeitversetzt injiziert — diese Overrides gelten immer) */
body .mkck-h { color: #ffffff !important; }
body .mkck-accept { background: #A3E635 !important; color: #0a0a0a !important; }
body .mkck-txt a, body .mkck-links a {
  color: #d9f99d !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* LCP: Inhalte der ersten Section (Hero) niemals per JS verstecken.
 * Der größte Inhaltsblock ist sofort sichtbar — Reveals laufen
 * auf dem Rest der Seite weiter. */
body > section:first-of-type [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ============================================================
 * v5.2 · CLEAN-PASS — Elite-Premium-Zurückhaltung
 * 1. Orbs: halbe Intensität, Verlauf bis 100% (kein harter
 *    Rand mehr, kein diagonaler Schleier über Sektionen)
 * 2. Kegel/Flares/Seams: deutlich leiser — Ambiente, kein Smear
 * 3. Nav beim Scrollen: satt dunkel — bleibt auch über hellen
 *    Sektionen schwarz statt grau
 * 4. Dunkle Karten: solide Fläche — keine Sterne mehr, die
 *    durch die Fenster schimmern
 * ============================================================ */

/* 1 · Orbs entschärfen */
.mkp-orb-1 { background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.055), rgba(var(--mkp-lime-rgb), 0) 100%); }
.mkp-orb-2 { background: radial-gradient(closest-side, rgba(255,255,255, 0.03), rgba(255,255,255, 0) 100%); }
.mkp-orb-3 { background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.028), rgba(var(--mkp-lime-rgb), 0) 100%); }

/* 2 · Licht-Akzente leiser und weicher */
.mkp-cone::before {
  background: radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(var(--mkp-lime-rgb), 0.028), rgba(var(--mkp-lime-rgb), 0) 78%);
}
.mkp-flare {
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(var(--mkp-lime-rgb), 0.045), rgba(var(--mkp-lime-rgb), 0) 75%),
    radial-gradient(ellipse 40% 32% at 50% 50%, rgba(255,255,255, 0.025), rgba(255,255,255, 0) 75%);
}
.mkp-flare-light {
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(var(--mkp-lime-rgb), 0.07), rgba(var(--mkp-lime-rgb), 0) 75%);
}
.mkp-seam::before {
  background: linear-gradient(90deg, rgba(var(--mkp-lime-rgb), 0) 0%, rgba(var(--mkp-lime-rgb), 0.14) 35%,
    rgba(var(--mkp-lime-rgb), 0.28) 50%,
    rgba(var(--mkp-lime-rgb), 0.14) 65%, rgba(var(--mkp-lime-rgb), 0) 100%);
}
.mkp-seam::after {
  background: radial-gradient(closest-side, rgba(var(--mkp-lime-rgb), 0.035), rgba(var(--mkp-lime-rgb), 0) 70%);
}

/* 3 · Nav: satt dunkel beim Scrollen — sauber über Hell UND Dunkel */
header.mk-fnav.is-scrolled > nav { background: rgba(9, 9, 9, 0.93); }

/* 4 · Dunkle Karten solide: identischer Look, aber blickdicht */
.mkp-glow.mkp-dark { background-color: #0f100e; }




/* ============================================================
 * v5.3 · EHEMALS BG-LOSE SEKTION #angebote (lag auf bg-paper-Body)
 * Diese Sektionen hatten keinen eigenen Hintergrund und lagen
 * auf dem hellen Body. Body ist jetzt #050505 → dunkle
 * Textklassen werden hell gemappt. Texte INNERHALB weißer
 * Karten bleiben unverändert.
 * ============================================================ */
/* Grundfarbe der beiden Sektionen hell (Body vererbt sonst Dunkel) */
#angebote { color: rgba(255, 255, 255, 0.7); }
#angebote .text-ink-950:not([class*="bg-white"] *) {
  color: #ffffff;
}
#angebote :is(.text-ink-700, .text-ink-600, .text-ink-500):not([class*="bg-white"] *) {
  color: rgba(255, 255, 255, 0.68);
}
/* Eyebrow-Pills dort in der Dunkel-Variante */
#angebote .eyebrow {
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  box-shadow: 0 0 22px -8px rgba(163,230,53,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ============================================================
 * v5.4 · CLEAN — Schluss mit mittigen Glow-Boxen
 * Die auf max. 720–900px begrenzten Licht-Kegel/Flares saßen
 * mittig in vollbreiten dunklen Sektionen und lasen auf großen
 * Monitoren als grünes Rechteck. Eleganz kommt jetzt aus
 * Starfield + dünner Naht-Linie + soliden Karten — kein Beam,
 * keine Box, kein fehlerhafter Verlauf mehr möglich.
 * (Hero-Rays bleiben — die sitzen im Hero und werden nicht
 *  von content-visibility beschnitten.)
 * ============================================================ */
.mkp-flare,
.mkp-flare-light { display: none !important; }
.mkp-cone::before { display: none !important; }
.mkp-seam::after { display: none !important; }
/* Naht-Linien komplett entfernt — Robin wünscht keine grünen Striche */
.mkp-seam::before { display: none !important; }

/* ============================================================
 * v5.4 · CLS-FIX + KONTRAST (vorher von content-visibility
 * vor der Messung verborgen — für echte Nutzer immer relevant)
 * ============================================================ */

/* 1 · Aurora CLS-sicher: viewport-stabile Höhe statt %-der-Hero-Höhe.
 *     Schrift-Reflow ändert die Hero-Höhe — vh bleibt konstant,
 *     also kein Layout-Shift mehr (war CLS 0.845). */
.mk-aurora {
  height: 60vh !important;
  inset: -10vh -10% auto -10% !important;
}

/* 2 · Kontrast text-ink-500 auf dunklem Grund anheben (AA 4.5:1).
 *     In hellen Kontexten (#referenzen, weiße Karten) bleibt dunkel. */
body .text-ink-500 { color: rgba(255,255,255,0.52); }
#referenzen .text-ink-500,
[class*="bg-white"] .text-ink-500 { color: rgb(99 99 99); }

/* 3 · Tech-Section-Label kontraststark (war #9a9a90 = 2.64:1) */
body .mk-tech-label { color: #666666 !important; }

/* ============================================================
 * v5.4 · CLS · Hero-Dekos viewport-stabil pinnen
 * Die rein dekorativen Hero-Layer (Rays, Glow-Säulen) hatten
 * %-Höhen relativ zur Hero-Höhe. Im allerersten Render-Moment
 * (Cold-Load) skalierten sie kurz mit → Layout-Shift hinter dem
 * Inhalt. Feste vh-Maße sind vom Hero-Transient entkoppelt.
 * ============================================================ */
.mkp-ray { height: 100vh !important; }
/* Glow-Säulen + Kantenlicht: an feste Hero-Deko-Höhe koppeln statt
 * an top/bottom des wachsenden Hero-Containers */
/* (inset-0-Pin entfernt — erzeugte sichtbare Deko-Kanten;
 *  Hero-CLS wird unten gezielt über die Hero-Deko gelöst) */

/* ============================================================
 * v5.6 · VERGLEICHS-KARTEN — Motion im Framer-Motion-Stil
 *   Gestaffelter Spring-Entrance + Premium-Hover (grüne Karte)
 * ============================================================ */
.mkp-cmp-card {
  opacity: 0;
  transform: translateY(26px) scale(0.984);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.34, 1.36, 0.64, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.mkp-compare.mkp-in .mkp-cmp-card { opacity: 1; transform: none; }
.mkp-compare.mkp-in .mkp-cmp-card:nth-child(1) { transition-delay: 0.05s; }
.mkp-compare.mkp-in .mkp-cmp-card:nth-child(2) { transition-delay: 0.18s; }

/* Agentur-Karte: dezenter Hover */
.mkp-compare.mkp-in .mkp-cmp-card:not(.mkp-cmp-hero):hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 64px -32px rgba(0,0,0,0.62);
}
/* Grüne Karte: Lift + Lime-Bloom (Spring-Overshoot) */
.mkp-compare.mkp-in .mkp-cmp-hero:hover {
  transform: translateY(-8px) scale(1.014);
  box-shadow:
    0 46px 96px -34px rgba(163,230,53,0.60),
    0 0 0 1px rgba(8,8,8,0.06),
    0 0 70px -22px rgba(163,230,53,0.50) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mkp-cmp-card { opacity: 1; transform: none; transition: none; }
  .mkp-compare.mkp-in .mkp-cmp-hero:hover,
  .mkp-compare.mkp-in .mkp-cmp-card:not(.mkp-cmp-hero):hover { transform: none; }
}

/* ============================================================
 * v5.7 · SERVICE-KARTEN-BILDER — elite Bild-Motion (Framer-Motion-Stil)
 *   Entrance: Ken-Burns-Settle · Hover: sanfter Zoom + Lime-Sheen
 * ============================================================ */
.mkp-svc-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mkp-svc-media img {
  transform: scale(1.06);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
}
[data-reveal].in-view .mkp-svc-media img { transform: scale(1); }
.lift:hover .mkp-svc-media img { transform: scale(1.075); }

/* Lime-Sheen-Sweep beim Hover (edel, einmaliger Durchlauf) */
.mkp-svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 32%, rgba(163,230,53,0.16) 47%, rgba(255,255,255,0.12) 52%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 3;
}
.lift:hover .mkp-svc-media::after { transform: translateX(130%); }

@media (prefers-reduced-motion: reduce) {
  .mkp-svc-media img,
  [data-reveal].in-view .mkp-svc-media img,
  .lift:hover .mkp-svc-media img { transform: none; transition: none; }
  .mkp-svc-media::after { display: none; }
}

/* ============================================================
 * v5.8 · ZIELGRUPPEN-KARTEN (dunkel) — elite Framer-Motion-Stil
 *   Spring-Entrance (überschreibt reveal-stagger) + Premium-Hover
 * ============================================================ */
.reveal-stagger > .mkp-zg-card {
  transform: translateY(28px) scale(0.972);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.34, 1.36, 0.64, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.reveal-stagger.in > .mkp-zg-card { opacity: 1; transform: translateY(0) scale(1); }

@media (hover: hover) {
  .mkp-zg-card.lift:hover {
    transform: translateY(-8px) scale(1.006);
    box-shadow:
      0 34px 74px -30px rgba(0,0,0,0.72),
      0 0 0 1px rgba(163,230,53,0.20),
      0 0 54px -18px rgba(163,230,53,0.30) !important;
  }
  /* Icon-Chip pulst beim Hover sanft mit */
  .mkp-zg-card.lift:hover .w-12 { transform: scale(1.08); transition: transform 0.4s cubic-bezier(0.34,1.4,0.64,1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > .mkp-zg-card,
  .reveal-stagger.in > .mkp-zg-card { transform: none; transition: none; }
  .mkp-zg-card.lift:hover { transform: none; }
}